/* ============================================================
   app.css — single consolidated stylesheet (auto-built)
   layout chrome (global) + per-page scoped blocks
   ============================================================ */

/* ===== Header / global chrome ===== */

/* ============================================================
   PRELOADER — full-viewport dark progress screen (0 → 100)
   ============================================================ */
#preloader.artify-preloader {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	background: #0f0d0a;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 999999;
	pointer-events: auto;
	overflow: hidden;
	transition: opacity 0.5s ease, visibility 0.5s ease;
	opacity: 1;
	visibility: visible;
}

/* Ambient warm glow, top-right */
#preloader.artify-preloader::before {
	content: '';
	position: absolute;
	top: -220px;
	right: -180px;
	width: 520px;
	height: 520px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(227, 68, 50, 0.32) 0%, transparent 70%);
	filter: blur(90px);
	pointer-events: none;
	z-index: 0;
}

/* Ambient cool glow, bottom-left */
#preloader.artify-preloader::after {
	content: '';
	position: absolute;
	bottom: -260px;
	left: -180px;
	width: 560px;
	height: 560px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(15, 102, 174, 0.22) 0%, transparent 70%);
	filter: blur(100px);
	pointer-events: none;
	z-index: 0;
}

#preloader.artify-preloader.hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.artify-preloader__inner {
	position: relative;
	z-index: 2;
	width: min(420px, 84vw);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 0 8px;
}

.artify-preloader__label {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--font-inter, 'Inter', sans-serif);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: #f0a58c;
	margin-bottom: 20px;
}

.artify-preloader__label::before,
.artify-preloader__label::after {
	content: '';
	display: inline-block;
	width: 24px;
	height: 1px;
	background: currentColor;
	opacity: 0.55;
}

.artify-preloader__count {
	display: inline-flex;
	align-items: baseline;
	justify-content: center;
	gap: 4px;
	font-family: var(--font-graphik, 'Inter', sans-serif);
	font-size: 96px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	color: #ffffff;
	margin-bottom: 28px;
	font-variant-numeric: tabular-nums;
}

.artify-preloader__percent-sym {
	font-size: 42px;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.5);
	line-height: 1;
}

.artify-preloader__bar {
	position: relative;
	width: 100%;
	height: 3px;
	background: rgba(255, 255, 255, 0.10);
	border-radius: 3px;
	overflow: hidden;
}

.artify-preloader__bar-fill {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 0%;
	background: linear-gradient(90deg,
		var(--color-ember-red, #e34432) 0%,
		#f0a58c 100%);
	border-radius: 3px;
	box-shadow: 0 0 18px rgba(227, 68, 50, 0.55);
	transition: width 0.25s ease;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
	#preloader.artify-preloader,
	.artify-preloader__bar-fill {
		transition: none !important;
	}
}

/* Mobile responsive */
@media (max-width: 576px) {
	.artify-preloader__count {
		font-size: 72px;
	}
	.artify-preloader__percent-sym {
		font-size: 32px;
	}
	.artify-preloader__label {
		font-size: 10px;
		letter-spacing: 0.24em;
		gap: 10px;
	}
	.artify-preloader__label::before,
	.artify-preloader__label::after {
		width: 18px;
	}
}

/* ============================================================
   COOKIE CONSENT
   ============================================================ */
            .cookiesBtn__link {
                background: var(--color-ink) !important;
                border: none !important;
                color: var(--color-paper) !important;
            }

            /* ============================================================
               SCROLLBAR STYLING (NEW THEME)
               ============================================================ */
            html {
                scroll-behavior: smooth;
                scrollbar-width: thin;
                scrollbar-color: var(--color-ember-red) var(--color-lighter);
            }

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

            ::-webkit-scrollbar-track {
                background: var(--color-lighter);
                border-radius: 5px;
            }

            ::-webkit-scrollbar-thumb {
                background: var(--color-ember-red);
                border-radius: 5px;
                border: 2px solid var(--color-lighter);
                transition: all var(--transition-normal);
            }

            ::-webkit-scrollbar-thumb:hover {
                background: var(--color-deep-ember);
                box-shadow: 0 0 8px rgba(227, 68, 50, 0.4);
            }

            /* ============================================================
               NH — REDESIGNED HEADER (EMBER THEME, FULLY RESPONSIVE)
               ============================================================ */

            /* Base */
            /* NOTE: backdrop-filter on the header would create a new containing block
               and trap the drawer's position:fixed inside the header — use solid
               translucent backgrounds instead so the mobile drawer can cover the viewport. */
            .nh {
                position: sticky;
                top: 0;
                z-index: 1050;
                width: 100%;
                background: rgba(254, 253, 252, 0.92);
                transition: background 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
                border-bottom: 1px solid transparent;
            }
            .nh--scrolled {
                background: #fefdfc;
                box-shadow: 0 2px 20px rgba(37, 34, 30, 0.08);
                border-bottom-color: rgba(215, 214, 212, 0.5);
            }

            /* Inner bar */
            .nh__inner {
                display: flex;
                align-items: center;
                gap: 16px;
                max-width: 1280px;
                margin: 0 auto;
                padding: 0 32px;
                height: 72px;
            }

            /* Logo */
            .nh__logo { display: inline-flex; align-items: center; flex-shrink: 0; text-decoration: none; }
            .nh__logo-img {
                height: 46px;
                width: auto;
                display: block;
                object-fit: contain;
                transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
            }
            .nh__logo:hover .nh__logo-img { transform: scale(1.04); }

            /* ── CENTER NAV ── */
            .nh__nav { flex: 1; display: flex; justify-content: center; }
            .nh__nav-list { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
            .nh__nav-item { position: relative; }

            .nh__nav-link {
                display: inline-flex;
                align-items: center;
                gap: 6px;
                padding: 10px 18px;
                border-radius: 999px;
                font-family: var(--font-inter), sans-serif;
                font-size: 14.5px;
                font-weight: 500;
                color: var(--color-ink, #25221e);
                text-decoration: none;
                white-space: nowrap;
                position: relative;
                transition: color 0.28s ease,
                            background 0.28s ease,
                            box-shadow 0.28s ease,
                            transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
            }

            /* HOVER (non-active): subtle ember tint + micro-lift */
            .nh__nav-link:hover {
                color: var(--color-deep-ember, #cf3520) !important;
                background: rgba(227, 68, 50, 0.08);
                transform: translateY(-1px);
                text-decoration: none;
            }

            /* ACTIVE: bold ember gradient pill with glow */
            .nh__nav-link--active,
            .nh__nav-link--active:hover {
                color: #ffffff !important;
                background: linear-gradient(135deg, var(--color-ember-red, #e34432) 0%, var(--color-deep-ember, #cf3520) 100%) !important;
                font-weight: 700;
                box-shadow: 0 6px 16px rgba(227, 68, 50, 0.35),
                            inset 0 1px 0 rgba(255, 255, 255, 0.18);
                transform: translateY(-1px);
            }
            .nh__nav-link--active .nh__caret {
                opacity: 0.9;
            }

            .nh__caret {
                width: 10px;
                height: 6px;
                flex-shrink: 0;
                opacity: 0.5;
                transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s;
            }
            .nh__nav-item--drop:hover .nh__caret,
            .nh__pill-drop:hover .nh__caret,
            .nh__pill-drop--account:hover .nh__caret {
                transform: rotate(180deg);
                opacity: 0.85;
            }

            /* ── DROPDOWN ── */
            .nh__dropdown {
                position: absolute;
                top: calc(100% + 10px);
                left: 0;
                min-width: 240px;
                background: rgba(254, 253, 252, 0.98);
                backdrop-filter: blur(14px);
                -webkit-backdrop-filter: blur(14px);
                border: 1px solid rgba(215, 214, 212, 0.7);
                border-radius: 16px;
                padding: 8px;
                box-shadow:
                    0 20px 48px rgba(37, 34, 30, 0.12),
                    0 2px 8px rgba(37, 34, 30, 0.04),
                    inset 0 1px 0 rgba(255, 255, 255, 0.6);
                opacity: 0;
                visibility: hidden;
                transform: translateY(8px) scale(0.98);
                transform-origin: top left;
                pointer-events: none;
                transition: opacity 0.25s ease,
                            transform 0.28s cubic-bezier(0.34, 1.4, 0.5, 1),
                            visibility 0.25s;
                z-index: 1060;
            }
            .nh__dropdown--end { left: auto; right: 0; transform-origin: top right; }
            .nh__dropdown--catalog { min-width: 270px; }
            .nh__dropdown--account { min-width: 260px; }

            /* Bridge so cursor can travel to dropdown */
            .nh__dropdown::before { content: ''; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }

            .nh__nav-item--drop:hover .nh__dropdown,
            .nh__nav-item--drop:focus-within .nh__dropdown,
            .nh__pill-drop:hover .nh__dropdown,
            .nh__pill-drop:focus-within .nh__dropdown {
                opacity: 1;
                visibility: visible;
                transform: translateY(0) scale(1);
                pointer-events: auto;
            }

            .nh__dropdown-inner { display: flex; flex-direction: column; gap: 2px; }

            .nh__drop-item {
                display: flex;
                align-items: center;
                gap: 12px;
                padding: 11px 14px;
                border-radius: 12px;
                font-family: var(--font-inter), sans-serif;
                font-size: 14px;
                font-weight: 500;
                color: var(--color-ink, #25221e);
                text-decoration: none;
                white-space: nowrap;
                transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
                cursor: pointer;
                background: transparent;
                border: none;
            }
            .nh__drop-item:hover {
                background: rgba(227, 68, 50, 0.08);
                color: var(--color-deep-ember, #cf3520);
                transform: translateX(3px);
            }
            .nh__drop-item--active {
                background: rgba(227, 68, 50, 0.09);
                color: var(--color-deep-ember, #cf3520);
                font-weight: 600;
            }
            .nh__drop-item--danger { color: #dc3545; }
            .nh__drop-item--danger:hover { background: rgba(220, 53, 69, 0.08); color: #b91c1c; }
            .nh__drop-item--muted {
                color: var(--color-pencil, #6f6c69);
                font-size: 13px;
                cursor: default;
                pointer-events: none;
            }
            .nh__drop-item--all {
                border-top: 1px dashed rgba(215, 214, 212, 0.6);
                margin-top: 6px;
                padding-top: 14px;
                color: var(--color-deep-ember, #cf3520);
                font-weight: 600;
            }

            .nh__drop-ico {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 26px;
                height: 26px;
                border-radius: 8px;
                font-size: 12px;
                color: var(--color-deep-ember, #cf3520);
                background: rgba(227, 68, 50, 0.10);
                flex-shrink: 0;
                transition: background 0.2s ease, color 0.2s ease;
            }
            .nh__drop-item:hover .nh__drop-ico {
                background: var(--color-ember-red, #e34432);
                color: #ffffff;
            }
            .nh__drop-item--danger .nh__drop-ico {
                background: rgba(220, 53, 69, 0.10);
                color: #dc3545;
            }
            .nh__drop-item--danger:hover .nh__drop-ico {
                background: #dc3545;
                color: #ffffff;
            }
            .nh__drop-ico-flag {
                display: inline-block;
                width: 22px;
                height: 16px;
                border-radius: 3px;
                background-size: cover;
                background-position: center;
                box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
                flex-shrink: 0;
            }
            .nh__drop-check {
                font-size: 11px;
                margin-left: auto;
                color: var(--color-forest, #446c3d);
                opacity: 0;
                flex-shrink: 0;
            }
            .nh__drop-item--active .nh__drop-check { opacity: 1; }

            .nh__drop-divider {
                height: 1px;
                background: var(--color-stone, #d7d6d4);
                border: none;
                margin: 8px 4px;
                opacity: 0.5;
            }

            /* ── RIGHT ACTIONS ── */
            .nh__actions {
                display: flex;
                align-items: center;
                gap: 4px;
                flex-shrink: 0;
                margin-left: auto;
            }

            /* Pill buttons (lang / currency) */
            .nh__pill-drop { position: relative; }
            .nh__pill-btn {
                display: inline-flex;
                align-items: center;
                gap: 7px;
                padding: 8px 13px;
                border: 1px solid transparent;
                border-radius: 999px;
                background: transparent;
                font-family: var(--font-inter), sans-serif;
                font-size: 13.5px;
                font-weight: 500;
                color: var(--color-ink, #25221e);
                cursor: pointer;
                transition: all 0.22s ease;
                white-space: nowrap;
                line-height: 1;
            }
            .nh__pill-btn:hover,
            .nh__pill-drop:hover .nh__pill-btn {
                color: var(--color-deep-ember, #cf3520);
                background: rgba(227, 68, 50, 0.07);
                border-color: rgba(227, 68, 50, 0.20);
                transform: translateY(-1px);
            }
            .nh__flag {
                display: inline-block;
                width: 20px;
                height: 14px;
                border-radius: 3px;
                background-size: cover;
                background-position: center;
                box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
            }
            .nh__pill-label { line-height: 1; }

            /* Account button */
            .nh__acct-btn {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                padding: 5px 12px 5px 5px;
                border: 1px solid transparent;
                border-radius: 999px;
                background: transparent;
                font-family: var(--font-inter), sans-serif;
                font-size: 13.5px;
                font-weight: 500;
                color: var(--color-ink, #25221e);
                cursor: pointer;
                transition: all 0.22s ease;
                line-height: 1;
            }
            .nh__acct-btn:hover,
            .nh__pill-drop--account:hover .nh__acct-btn {
                background: rgba(227, 68, 50, 0.07);
                border-color: rgba(227, 68, 50, 0.20);
                transform: translateY(-1px);
            }
            .nh__acct-avatar {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 32px;
                height: 32px;
                border-radius: 50%;
                background: linear-gradient(135deg, var(--color-ember-red, #e34432), var(--color-deep-ember, #cf3520));
                color: #ffffff;
                font-size: 13px;
                font-weight: 700;
                flex-shrink: 0;
                box-shadow: 0 3px 10px rgba(227, 68, 50, 0.35);
            }
            .nh__acct-ico {
                font-size: 16px;
                color: var(--color-ink, #25221e);
                padding-left: 6px;
            }
            .nh__acct-name {
                max-width: 110px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            /* Account dropdown head */
            .nh__acct-head {
                display: flex;
                align-items: center;
                gap: 14px;
                padding: 10px 14px 14px;
            }
            .nh__acct-head-avatar {
                width: 44px;
                height: 44px;
                border-radius: 50%;
                flex-shrink: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                background: linear-gradient(135deg, var(--color-ember-red, #e34432), var(--color-deep-ember, #cf3520));
                color: #ffffff;
                font-size: 17px;
                font-weight: 700;
                box-shadow: 0 4px 12px rgba(227, 68, 50, 0.35);
            }
            .nh__acct-head-name {
                font-size: 14.5px;
                font-weight: 700;
                color: var(--color-ink, #25221e);
                font-family: var(--font-graphik), sans-serif;
            }
            .nh__acct-head-credits {
                font-size: 12.5px;
                color: var(--color-deep-ember, #cf3520);
                font-weight: 600;
                display: flex;
                align-items: center;
                gap: 6px;
                margin-top: 3px;
            }
            .nh__acct-head-credits i { color: var(--color-ember-red, #e34432); }
            .nh__acct-cta { padding: 4px 6px 4px; }
            .nh__cta-register {
                display: block;
                width: 100%;
                text-align: center;
                background: var(--color-ember-red, #e34432);
                color: #ffffff;
                border: none;
                padding: 12px 20px;
                border-radius: 12px;
                font-family: var(--font-inter), sans-serif;
                font-size: 14px;
                font-weight: 700;
                letter-spacing: 0.02em;
                text-decoration: none;
                transition: all 0.25s ease;
                box-shadow: 0 6px 16px rgba(227, 68, 50, 0.35);
            }
            .nh__cta-register:hover {
                background: var(--color-deep-ember, #cf3520);
                color: #ffffff;
                transform: translateY(-2px);
                box-shadow: 0 10px 24px rgba(227, 68, 50, 0.45);
            }

            /* Cart button */
            .nh__cart-btn {
                position: relative;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 44px;
                height: 44px;
                border: 1px solid transparent;
                border-radius: 12px;
                background: transparent;
                color: var(--color-ink, #25221e);
                font-size: 17px;
                text-decoration: none;
                transition: all 0.22s ease;
            }
            .nh__cart-btn:hover {
                color: var(--color-deep-ember, #cf3520);
                background: rgba(227, 68, 50, 0.07);
                border-color: rgba(227, 68, 50, 0.20);
                transform: translateY(-2px);
            }
            .nh__cart-badge {
                position: absolute;
                top: -4px;
                right: -4px;
                display: flex;
                align-items: center;
                justify-content: center;
                min-width: 20px;
                height: 20px;
                padding: 0 5px;
                background: var(--color-ember-red, #e34432);
                color: #ffffff;
                border: 2px solid #fefdfc;
                border-radius: 999px;
                font-size: 10.5px;
                font-weight: 700;
                font-family: var(--font-inter), sans-serif;
                line-height: 1;
                box-shadow: 0 3px 8px rgba(227, 68, 50, 0.35);
            }

            /* Start Learning CTA */
            .nh__start-btn {
                display: inline-flex;
                align-items: center;
                padding: 11px 22px;
                background: var(--color-ember-red, #e34432);
                color: #ffffff;
                border: none;
                border-radius: 999px;
                font-family: var(--font-inter), sans-serif;
                font-size: 14px;
                font-weight: 700;
                letter-spacing: 0.02em;
                text-decoration: none;
                white-space: nowrap;
                margin-left: 6px;
                box-shadow: 0 6px 18px rgba(227, 68, 50, 0.35);
                transition: all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
            }
            .nh__start-btn:hover {
                background: var(--color-deep-ember, #cf3520);
                color: #ffffff;
                transform: translateY(-2px);
                box-shadow: 0 10px 26px rgba(227, 68, 50, 0.50);
            }

            /* Hamburger */
            .nh__burger {
                display: none;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                gap: 5px;
                width: 42px;
                height: 42px;
                background: transparent;
                border: 1px solid transparent;
                border-radius: 12px;
                cursor: pointer;
                transition: all 0.22s ease;
                flex-shrink: 0;
            }
            .nh__burger span {
                display: block;
                width: 22px;
                height: 2px;
                background: var(--color-ink, #25221e);
                border-radius: 2px;
                transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
            }
            .nh__burger:hover {
                background: rgba(227, 68, 50, 0.08);
                border-color: rgba(227, 68, 50, 0.20);
            }
            .nh__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
            .nh__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
            .nh__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

            /* ── MOBILE DRAWER ──
               Explicit top/right/bottom/left + high z-index + hardware-accel transform
               so it always covers the full viewport regardless of parent context. */
            .nh__drawer {
                position: fixed;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                width: 100vw;
                height: 100vh;
                height: 100dvh;
                z-index: 1200;
                pointer-events: none;
            }
            .nh__drawer--open { pointer-events: auto; }
            .nh__drawer-overlay {
                position: absolute;
                top: 0; right: 0; bottom: 0; left: 0;
                background: rgba(22, 19, 15, 0.55);
                opacity: 0;
                transition: opacity 0.35s ease;
            }
            .nh__drawer--open .nh__drawer-overlay { opacity: 1; }

            .nh__drawer-panel {
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                width: 340px;
                max-width: 92vw;
                height: 100%;
                background: #fefdfc;
                border-left: 1px solid rgba(215, 214, 212, 0.6);
                box-shadow: -16px 0 48px rgba(22, 19, 15, 0.18);
                display: flex;
                flex-direction: column;
                transform: translate3d(100%, 0, 0);
                transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
            }
            .nh__drawer--open .nh__drawer-panel { transform: translate3d(0, 0, 0); }

            .nh__drawer-head {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 22px 24px;
                border-bottom: 1px dashed rgba(215, 214, 212, 0.6);
            }
            .nh__drawer-logo { height: 40px; width: auto; display: block; object-fit: contain; }
            .nh__drawer-close {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 38px;
                height: 38px;
                border-radius: 50%;
                background: rgba(227, 68, 50, 0.06);
                border: 1px solid rgba(227, 68, 50, 0.15);
                color: var(--color-ink, #25221e);
                font-size: 14px;
                cursor: pointer;
                transition: all 0.25s ease;
            }
            .nh__drawer-close:hover {
                border-color: var(--color-ember-red, #e34432);
                background: rgba(227, 68, 50, 0.12);
                color: var(--color-ember-red, #e34432);
                transform: rotate(90deg);
            }

            .nh__drawer-nav {
                padding: 20px 16px 8px;
                display: flex;
                flex-direction: column;
                gap: 4px;
                flex: 1;
            }
            .nh__drawer-link {
                display: flex;
                align-items: center;
                gap: 12px;
                padding: 14px 16px;
                border-radius: 12px;
                font-family: var(--font-inter), sans-serif;
                font-size: 15px;
                font-weight: 500;
                color: var(--color-ink, #25221e);
                text-decoration: none;
                transition: all 0.22s ease;
            }
            .nh__drawer-link:hover {
                background: rgba(227, 68, 50, 0.08);
                color: var(--color-deep-ember, #cf3520);
            }
            .nh__drawer-link i {
                width: 18px;
                text-align: center;
                color: var(--color-deep-ember, #cf3520);
                font-size: 14px;
            }
            .nh__drawer-link--danger { color: #dc3545; }
            .nh__drawer-link--danger:hover { background: rgba(220, 53, 69, 0.08); color: #b91c1c; }
            .nh__drawer-link--danger i { color: #dc3545; }

            .nh__drawer-link-inner {
                display: inline-flex;
                align-items: center;
                gap: 12px;
                transition: transform 0.2s ease;
            }
            .nh__drawer-link:hover .nh__drawer-link-inner {
                transform: translateX(4px);
            }

            /* Expandable catalog group */
            .nh__drawer-group {
                display: flex;
                flex-direction: column;
            }
            .nh__drawer-toggle {
                display: flex;
                align-items: center;
                justify-content: space-between;
                width: 100%;
                background: transparent;
                border: none;
                cursor: pointer;
                text-align: left;
                font: inherit;
            }
            .nh__drawer-caret {
                color: var(--color-pencil, #6f6c69);
                opacity: 0.6;
                transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s;
                flex-shrink: 0;
            }
            .nh__drawer-toggle--open .nh__drawer-caret {
                transform: rotate(180deg);
                opacity: 1;
                color: var(--color-deep-ember, #cf3520);
            }
            .nh__drawer-toggle--open {
                color: var(--color-deep-ember, #cf3520);
                background: rgba(227, 68, 50, 0.06);
            }

            .nh__drawer-sub {
                max-height: 0;
                overflow: hidden;
                transition: max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1);
                margin: 0 4px;
                display: flex;
                flex-direction: column;
                gap: 2px;
            }
            .nh__drawer-sub--open {
                max-height: 60vh;
                overflow-y: auto;
                padding: 6px 0 8px;
            }
            .nh__drawer-sub-link {
                display: flex;
                align-items: center;
                gap: 12px;
                padding: 11px 16px 11px 20px;
                border-radius: 10px;
                font-family: var(--font-inter), sans-serif;
                font-size: 14px;
                font-weight: 500;
                color: var(--color-ink, #25221e);
                text-decoration: none;
                transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
            }
            .nh__drawer-sub-link:hover {
                background: rgba(227, 68, 50, 0.07);
                color: var(--color-deep-ember, #cf3520);
                transform: translateX(3px);
            }
            .nh__drawer-sub-link--muted {
                color: var(--color-pencil, #6f6c69);
                font-size: 13px;
                cursor: default;
                pointer-events: none;
            }
            .nh__drawer-sub-link--all {
                margin-top: 4px;
                border-top: 1px dashed rgba(215, 214, 212, 0.6);
                padding-top: 14px;
                color: var(--color-deep-ember, #cf3520);
                font-weight: 600;
            }
            .nh__drawer-sub-ico {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 26px;
                height: 26px;
                border-radius: 8px;
                background: rgba(227, 68, 50, 0.10);
                color: var(--color-deep-ember, #cf3520);
                font-size: 11px;
                flex-shrink: 0;
                transition: background 0.2s ease, color 0.2s ease;
            }
            .nh__drawer-sub-link:hover .nh__drawer-sub-ico {
                background: var(--color-ember-red, #e34432);
                color: #ffffff;
            }

            .nh__drawer-footer {
                padding: 18px 16px 22px;
                border-top: 1px dashed rgba(215, 214, 212, 0.6);
                display: flex;
                flex-direction: column;
                gap: 10px;
            }
            .nh__drawer-btn {
                display: block;
                text-align: center;
                padding: 14px;
                border-radius: 12px;
                background: var(--color-ember-red, #e34432);
                color: #ffffff;
                font-family: var(--font-inter), sans-serif;
                font-size: 14px;
                font-weight: 700;
                letter-spacing: 0.02em;
                text-decoration: none;
                transition: all 0.25s ease;
                box-shadow: 0 6px 16px rgba(227, 68, 50, 0.35);
            }
            .nh__drawer-btn:hover {
                background: var(--color-deep-ember, #cf3520);
                color: #ffffff;
                transform: translateY(-1px);
                box-shadow: 0 10px 24px rgba(227, 68, 50, 0.45);
            }
            .nh__drawer-btn--outline {
                background: transparent;
                color: var(--color-ink, #25221e);
                border: 1.5px solid rgba(215, 214, 212, 0.8);
                box-shadow: none;
            }
            .nh__drawer-btn--outline:hover {
                background: rgba(227, 68, 50, 0.05);
                border-color: var(--color-ember-red, #e34432);
                color: var(--color-deep-ember, #cf3520);
                box-shadow: none;
            }

            /* ── RESPONSIVE ── */
            .nh__hide-md { display: inline-flex !important; }
            .nh__hide-sm { display: inline !important; }

            @media (max-width: 1200px) {
                .nh__inner { padding: 0 24px; }
                .nh__nav-list { gap: 2px; }
                .nh__nav-link { padding: 9px 12px; font-size: 14px; }
            }
            @media (max-width: 1024px) {
                .nh__nav { display: none; }
                .nh__hide-md { display: none !important; }
                .nh__burger { display: flex; }
                .nh__start-btn { display: none !important; }
            }
            @media (max-width: 640px) {
                .nh__inner { padding: 0 16px; height: 64px; }
                .nh__logo-img { height: 40px; }
                .nh__hide-sm { display: none !important; }
                .nh__pill-btn { padding: 7px 10px; font-size: 13px; gap: 6px; }
                .nh__acct-btn { padding: 4px 10px 4px 4px; gap: 6px; }
                .nh__acct-avatar { width: 28px; height: 28px; font-size: 11.5px; }
                .nh__acct-ico { font-size: 15px; padding-left: 4px; }
                .nh__cart-btn { width: 40px; height: 40px; font-size: 16px; }
                .nh__actions { gap: 2px; }
                .nh__burger { width: 40px; height: 40px; }
                .nh__dropdown { min-width: 200px; }
            }
            @media (max-width: 420px) {
                .nh__inner { gap: 8px; padding: 0 12px; }
                .nh__logo-img { height: 34px; }
                .nh__pill-drop--lang .nh__pill-label { display: none; }
                .nh__pill-drop--lang .nh__caret { display: none; }
                .nh__pill-btn { padding: 8px; }
            }

            /* ============================================================
               HEADER STYLING (NEW THEME)
               ============================================================ */
            header.main-header {
                position: sticky !important;
                top: 0 !important;
                background-color: transparent !important;
                background-image: none !important;
                border-bottom: 0px solid var(--color-stone) !important;
                z-index: 1030 !important;
                transition: all var(--transition-normal);
                width: 100% !important;
                left: 0 !important;
                right: 0 !important;
                padding: var(--spacing-12) 0 !important;
                box-shadow: none !important;
            }

            header.main-header.sticky-top {
                box-shadow: none !important;
            }

            header.main-header:hover,
            header.main-header.scrolled {
                background-color: rgba(254, 253, 252, 1) !important;
                backdrop-filter: blur(10px) !important;
                -webkit-backdrop-filter: blur(10px) !important;
                box-shadow: 0 4px 18px rgba(37, 34, 30, 0.08) !important;
                /* border-bottom: 1px solid var(--color-stone) !important; */
            }

            header.main-header .auto-container {
                padding: var(--spacing-12) var(--spacing-20);
                max-width: var(--page-max-width);
                margin: 0 auto;
            }

            /* ============================================================
               LOGO STYLING
               ============================================================ */
            .logo-box {
                display: flex;
                align-items: center;
                gap: var(--spacing-8);
                flex-shrink: 0;
            }

            .logo-box a {
                display: inline-flex;
                align-items: center;
                text-decoration: none;
                transition: transform var(--transition-normal);
                outline: none;
            }

            .logo-box a:hover {
                transform: translateY(-2px);
            }

            .logo-box a:focus {
                outline: 2px solid var(--color-cobalt-link);
                outline-offset: 4px;
                border-radius: var(--radius-sm);
            }

            .logo-box img {
                height: 44px;
                width: auto;
                display: block;
                object-fit: contain;
                transition: filter var(--transition-normal);
            }

            .modern-nav > li.dropdown > a {
                color: inherit;
                text-decoration: none;
                gap: 6px;
                display: inline-flex;
                align-items: center;
            }

            .dropdown-item i {
                font-size: 12px;
            }

            .dropdown-menu {
                min-width: 200px;
            }

            .currency-dropdown {
                min-width: auto;
            }

            .logo-box a:hover img {
                filter: brightness(1.1);
            }

            /* ============================================================
               NAVIGATION STYLING
               ============================================================ */
            nav.modern-nav-wrapper {
                flex: 1;
                display: flex;
                justify-content: center;
            }

            .modern-nav {
                display: flex;
                list-style: none;
                margin: 0;
                padding: 0;
                gap: var(--spacing-8);
            }

            .modern-nav > li {
                position: relative;
            }

            .modern-nav > li > a {
                display: inline-flex !important;
                align-items: center !important;
                gap: var(--spacing-4) !important;
                padding: var(--spacing-8) var(--spacing-16) !important;
                color: var(--color-ink) !important;
                font-family: var(--font-inter) !important;
                font-size: var(--text-body) !important;
                font-weight: var(--font-weight-medium) !important;
                line-height: var(--leading-body) !important;
                letter-spacing: var(--tracking-body) !important;
                text-decoration: none !important;
                transition: all var(--transition-normal) !important;
                border-radius: var(--radius-nav) !important;
                position: relative !important;
            }

            .modern-nav > li > a::after {
                content: '';
                position: absolute;
                bottom: 6px;
                left: var(--spacing-16);
                right: var(--spacing-16);
                height: 2px;
                background-color: var(--color-ember-red);
                transform: scaleX(0);
                transform-origin: center;
                transition: transform var(--transition-normal);
            }

            .modern-nav > li > a:hover {
                color: var(--color-deep-ember);
                background-color: rgba(227, 68, 50, 0.05);
            }

            .modern-nav > li > a:hover::after {
                transform: scaleX(1);
            }

            .modern-nav > li.active > a {
                color: var(--color-deep-ember);
                background-color: rgba(207, 53, 32, 0.08);
            }

            .modern-nav > li.active > a::after {
                transform: scaleX(1);
            }

            /* ============================================================
               DROPDOWN STYLING
               ============================================================ */
            .dropdown-menu {
                background-color: var(--surface-paper-canvas) !important;
                border: 1px solid var(--color-stone) !important;
                border-radius: var(--radius-lg) !important;
                padding: var(--spacing-8) 0 !important;
                margin-top: var(--spacing-8) !important;
                min-width: 200px !important;
                box-shadow: var(--shadow-lg) !important;
                animation: slideDown var(--transition-normal) ease-out !important;
            }

            @keyframes slideDown {
                from {
                    opacity: 0;
                    transform: translateY(-8px);
                }
                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }

            .dropdown-menu.show {
                display: block;
                animation: slideDown var(--transition-normal) ease-out;
            }

            .dropdown-item {
                color: var(--color-ink) !important;
                font-family: var(--font-inter) !important;
                font-size: var(--text-body-sm) !important;
                font-weight: var(--font-weight-regular) !important;
                line-height: var(--leading-body-sm) !important;
                letter-spacing: var(--tracking-body-sm) !important;
                padding: var(--spacing-12) var(--spacing-16) !important;
                display: flex !important;
                align-items: center !important;
                gap: var(--spacing-8) !important;
                border: none !important;
                background-color: transparent !important;
                transition: all var(--transition-normal) !important;
                text-decoration: none !important;
                border-radius: 0 !important;
                cursor: pointer !important;
                white-space: nowrap !important;
            }

            .dropdown-item:hover {
                background-color: #f0f6df;
                color: var(--color-deep-ember);
                padding-left: calc(var(--spacing-16) + 4px);
            }

            .dropdown-item:focus {
                background-color: rgba(207, 53, 32, 0.1);
                outline: none;
                border-left: 3px solid var(--color-deep-ember);
                padding-left: calc(var(--spacing-16) - 3px);
            }

            .dropdown-item.active {
                background-color: var(--surface-tinted-wave);
                color: var(--color-ink);
                font-weight: var(--font-weight-semibold);
            }

            .dropdown-item.active.bg-primary {
                background-color: var(--color-ember-red) !important;
                color: var(--color-paper) !important;
            }

            .dropdown-item.text-muted {
                color: var(--color-graphite);
                cursor: default;
                pointer-events: none;
            }

            .dropdown-item i {
                font-size: 14px;
                flex-shrink: 0;
                color: var(--color-ember-red);
            }

            .dropdown-divider {
                height: 1px;
                background-color: var(--color-stone);
                margin: var(--spacing-8) 0;
                border: none;
            }

            /* ============================================================
               BUTTONS STYLING
               ============================================================ */
            .modern-btn {
                display: inline-flex !important;
                align-items: center !important;
                justify-content: center !important;
                gap: var(--spacing-4) !important;
                padding: var(--spacing-8) var(--spacing-12) !important;
                border: 1px solid transparent !important;
                border-radius: var(--radius-buttons) !important;
                font-family: var(--font-inter) !important;
                font-size: var(--text-body-sm) !important;
                font-weight: var(--font-weight-medium) !important;
                line-height: var(--leading-body-sm) !important;
                letter-spacing: var(--tracking-body-sm) !important;
                color: var(--color-ink) !important;
                background-color: transparent !important;
                text-decoration: none !important;
                cursor: pointer !important;
                transition: all var(--transition-normal) !important;
                outline: none !important;
                white-space: nowrap !important;
            }

            .modern-btn:hover {
                background-color: rgba(227, 68, 50, 0.05) !important;
                color: var(--color-deep-ember) !important;
            }

            .modern-btn:focus {
                outline: 2px solid var(--color-cobalt-link);
                outline-offset: 2px;
            }

            .modern-btn-outline {
                border: 1px solid var(--color-stone);
                background-color: var(--surface-paper-canvas);
                color: var(--color-ink);
            }

            .modern-btn-outline:hover {
                border-color: var(--color-deep-ember);
                background-color: rgba(207, 53, 32, 0.05);
                color: var(--color-deep-ember);
            }

            .modern-btn-solid {
                background-color: var(--color-ember-red) !important;
                color: var(--color-paper) !important;
                border: 1px solid var(--color-ember-red) !important;
                font-weight: var(--font-weight-semibold) !important;
                box-shadow: var(--shadow-lg) !important;
            }

            .modern-btn-solid:hover {
                background-color: var(--color-deep-ember) !important;
                border-color: var(--color-deep-ember) !important;
                transform: translateY(-1px) !important;
                box-shadow: var(--shadow-lg) !important;
            }

            .modern-btn-solid:active {
                background-color: var(--color-charcoal) !important;
                transform: translateY(0) !important;
            }

            /* ============================================================
               CART BUTTON
               ============================================================ */
            .modern-cart-btn {
                position: relative !important;
                display: inline-flex !important;
                align-items: center !important;
                justify-content: center !important;
                width: 44px !important;
                height: 44px !important;
                padding: 0 !important;
                color: var(--color-ink) !important;
                background-color: var(--surface-paper-canvas) !important;
                border: 1px solid var(--color-stone) !important;
                border-radius: var(--radius-buttons) !important;
                font-size: 20px !important;
                cursor: pointer !important;
                transition: all var(--transition-normal) !important;
                text-decoration: none !important;
            }

            .modern-cart-btn:hover {
                background-color: #f0f6df !important;
                border-color: var(--color-deep-ember) !important;
                color: var(--color-deep-ember) !important;
            }

            .modern-cart-btn:focus {
                outline: 2px solid var(--color-cobalt-link);
                outline-offset: 2px;
            }

            .cart-count {
                position: absolute !important;
                top: -8px !important;
                right: -8px !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                width: 24px !important;
                height: 24px !important;
                min-width: 24px !important;
                background-color: var(--color-ember-red) !important;
                color: var(--color-paper) !important;
                border-radius: 50% !important;
                font-family: var(--font-inter) !important;
                font-size: 11px !important;
                font-weight: var(--font-weight-bold) !important;
                line-height: 1 !important;
                animation: scaleIn 0.3s ease-out !important;
            }

            @keyframes scaleIn {
                from {
                    transform: scale(0);
                }
                to {
                    transform: scale(1);
                }
            }

            /* ============================================================
               RESPONSIVE
               ============================================================ */
            @media (max-width: 767px) {
                header.main-header {
                    padding: var(--spacing-8) 0;
                }

                header.main-header .auto-container {
                    padding: var(--spacing-8) var(--spacing-12);
                }

                .logo-box img {
                    height: 40px;
                }

                .modern-btn {
                    padding: var(--spacing-8) var(--spacing-8);
                    font-size: var(--text-caption);
                }

                .dropdown.d-none.d-md-block {
                    display: none;
                }

                .dropdown.d-none.d-lg-block {
                    display: none;
                }
            }

            /* Cart item title full text with line breaks */
            .cart-info a {
                white-space: normal !important;
                word-wrap: break-word !important;
                overflow: visible !important;
                text-overflow: clip !important;
                display: block !important;
                line-height: 1.4 !important;
            }

            /* ============================================================
               REVAMPED NAVBAR (restored)
               ============================================================ */
            header.main-header {
                box-shadow: 0 4px 18px rgba(37, 34, 30, 0.05) !important;
                padding: 0 !important;
                overflow: visible !important;
            }
            .header-wrapper { gap: 24px !important; width: 100% !important; overflow: visible !important; }
            .logo-section { display: flex !important; align-items: center !important; flex-shrink: 0 !important; }
            .logo-link { display: inline-flex !important; align-items: center !important; transition: transform .3s cubic-bezier(.34,1.56,.64,1) !important; }
            .logo-link:hover { transform: translateY(-1px) scale(1.02) !important; }
            .logo-img { height: 60px !important; width: auto !important; display: block !important; object-fit: contain !important; }

            /* center nav */
            .center-nav { flex: 1 1 auto !important; display: flex !important; justify-content: center !important; }
            .nav-list { display: flex !important; align-items: center !important; list-style: none !important; margin: 0 !important; padding: 0 !important; column-gap: 8px !important; }
            .nav-item { position: relative !important; margin: 0 !important; }
            .nav-link {
                position: relative !important;
                display: inline-flex !important; align-items: center !important; gap: 6px !important;
                padding: 9px 15px !important; border-radius: 4px !important;
                color: var(--color-ink) !important; font-family: var(--font-inter) !important;
                font-size: 15px !important; font-weight: 500 !important; text-decoration: none !important;
                white-space: nowrap !important; line-height: 1 !important;
                transition: color .25s ease, background-color .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1) !important;
            }
            .nav-link:hover, .nav-link.active { color: var(--color-deep-ember) !important; background-color: rgb(50 227 131 / 8%) !important; transform: translateY(-1px) !important; }
            .nav-toggle::after, .dropdown-toggle::after { display: none !important; }
            .nav-caret { width: 10px !important; height: 6px !important; opacity: .5 !important; flex-shrink: 0 !important; transition: transform .28s cubic-bezier(.34,1.56,.64,1) !important; }
            .hover-dropdown:hover .nav-caret { transform: rotate(180deg) !important; opacity: 1 !important; }

            /* right actions */
            .right-actions { display: flex !important; align-items: center !important; column-gap: 6px !important; flex-shrink: 0 !important; }
            .selector-btn, .account-btn {
                display: inline-flex !important; align-items: center !important; gap: 6px !important;
                background: transparent !important; border: 1px solid transparent !important;
                color: var(--color-ink) !important; font-family: var(--font-inter) !important;
                font-size: 14px !important; font-weight: 500 !important; cursor: pointer !important;
                padding: 7px 12px !important; border-radius: 999px !important; line-height: 1 !important;
                transition: all .2s ease, transform .25s cubic-bezier(.34,1.56,.64,1) !important;
            }
            .selector-btn:hover, .account-btn:hover, .hover-dropdown:hover .selector-btn, .hover-dropdown:hover .account-btn {
                color: var(--color-deep-ember) !important; background-color: rgba(50, 227, 127, 0.07) !important; border-color: rgba(50, 227, 109, 0.22) !important; transform: translateY(-1px) !important;
            }
            .selector-ico { font-size: 13px !important; opacity: .7 !important; }
            .account-ico { font-size: 18px !important; transition: transform .25s ease !important; }
            .hover-dropdown:hover .account-ico { transform: scale(1.08) !important; color: var(--color-ember-red) !important; }
            .account-name { max-width: 120px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }

            /* primary button (register CTA in account dropdown) */
            .primary-btn {
                background: var(--color-ember-red) !important; color: var(--color-paper) !important;
                border: none !important; padding: 9px 20px !important; border-radius: 8px !important;
                font-family: var(--font-inter) !important; font-size: 14px !important; font-weight: 600 !important;
                text-decoration: none !important; display: inline-block !important; text-align: center !important;
                box-shadow: 0 2px 10px rgba(227,68,50,.28) !important; transition: all .2s ease !important;
            }
            .primary-btn:hover { background: var(--color-deep-ember) !important; color: var(--color-paper) !important; transform: translateY(-1px) !important; }
            .primary-btn--block { display: block !important; width: 100% !important; }

            /* cart button (themed, overrides old .modern-cart-btn) */
            .cart-btn {
                position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important;
                width: 44px !important; height: 44px !important; margin-left: 2px !important;
                color: var(--color-ink) !important; background: transparent !important; border: 1px solid transparent !important;
                font-size: 18px !important; border-radius: 8px !important; text-decoration: none !important;
                transition: all .2s ease !important;
            }
            .cart-btn:hover { color: var(--color-deep-ember) !important; background: rgb(50 227 131 / 8%) !important; border-color: rgba(227,68,50,.25) !important; transform: translateY(-1px) !important; }
            .cart-btn .cart-badge, .cart-btn .cart-count {
                position: absolute !important; top: -4px !important; right: -4px !important;
                display: flex !important; align-items: center !important; justify-content: center !important;
                min-width: 20px !important; height: 20px !important; padding: 0 4px !important;
                background: var(--color-ember-red) !important; color: var(--color-paper) !important;
                border: 2px solid #fff6f0 !important; border-radius: 999px !important;
                font-family: var(--font-inter) !important; font-size: 10px !important; font-weight: 700 !important; line-height: 1 !important;
            }

            /* hover dropdowns */
            .hover-dropdown { position: relative !important; }
            .main-header .hover-dropdown .dropdown-menu {
                display: block !important; position: absolute !important; top: calc(100% + 14px) !important; inset: auto !important; margin: 0 !important;
                background: linear-gradient(180deg, #fffefd 0%, #fff7f1 100%) !important;
                border: 1px solid rgba(215,214,212,.8) !important; border-radius: 15px !important; padding: 8px !important; min-width: 230px !important;
                box-shadow: 0 10px 30px rgba(37,34,30,.12), inset 0 1px 0 rgba(255,255,255,.8) !important;
                opacity: 0 !important; visibility: hidden !important; transform: translateY(10px) scale(.98) !important; transform-origin: top center !important;
                pointer-events: none !important; transition: opacity .22s ease, transform .26s cubic-bezier(.34,1.4,.5,1), visibility .22s !important; z-index: 1040 !important;
            }
            .main-header .hover-dropdown .dropdown-menu-end, .main-header .hover-dropdown .account-dropdown { right: 0 !important; left: auto !important; }
            .main-header .hover-dropdown .catalog-menu { left: 0 !important; right: auto !important; }
            .main-header .hover-dropdown .dropdown-menu::before { content: '' !important; position: absolute !important; top: -16px !important; left: 0 !important; right: 0 !important; height: 16px !important; }
            .main-header .hover-dropdown:hover .dropdown-menu, .main-header .hover-dropdown:focus-within .dropdown-menu {
                opacity: 1 !important; visibility: visible !important; transform: translateY(0) scale(1) !important; pointer-events: auto !important;
            }
            .main-header .dropdown-item {
                display: flex !important; align-items: center !important; gap: 10px !important;
                color: var(--color-ink) !important; font-family: var(--font-inter) !important; font-size: 14px !important; font-weight: 500 !important;
                padding: 10px 12px !important; border: none !important; border-radius: 8px !important; background: transparent !important; text-decoration: none !important; white-space: nowrap !important; transition: all .15s ease !important;
            }
            .main-header .dropdown-item:hover { background: rgb(50 227 131 / 8%) !important; color: var(--color-deep-ember) !important; }
            .main-header .dropdown-item.active { background: rgb(50 227 131 / 8%) !important; color: var(--color-forest) !important; font-weight: 600 !important; }
            .main-header .dropdown-divider { height: 1px !important; background: var(--color-stone) !important; margin: 6px 4px !important; border: none !important; opacity: .6 !important; }
            .dd-icon { font-size: 13px !important; width: 18px !important; text-align: center !important; color: var(--color-ember-red) !important; flex-shrink: 0 !important; }
            .dropdown-item.active .dd-icon { color: var(--color-forest) !important; }
            /* Flag icons for language selector */
            .fi.selector-ico, .fi.dd-icon { display: inline-block !important; width: 20px !important; height: 14px !important; border-radius: 3px !important; background-size: cover !important; background-position: center !important; opacity: 1 !important; box-shadow: 0 0 0 1px rgba(0,0,0,.08) !important; }
            .dd-check { font-size: 11px !important; width: 14px !important; margin-left: auto !important; color: var(--color-forest) !important; opacity: 0 !important; flex-shrink: 0 !important; }
            .dropdown-item.active .dd-check { opacity: 1 !important; }
            .account-head { padding: 6px 12px 10px !important; display: flex !important; flex-direction: column !important; gap: 3px !important; }
            .account-head__name { font-family: var(--font-graphik) !important; font-weight: 600 !important; font-size: 15px !important; color: var(--color-ink) !important; }
            .account-head__credits { font-size: 12px !important; color: var(--color-cobalt-link) !important; font-weight: 500 !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; }
            .account-head__credits i { color: var(--color-ember-red) !important; }
            .account-cta { padding: 4px 6px 2px !important; }

            @media (max-width: 991px) {
                .center-nav { display: none !important; }
                .currency-selector { display: none !important; }
                .account-name { display: none !important; }
            }
            @media (max-width: 767px) {
                .logo-img { height: 54px !important; }
                .right-actions { column-gap: 2px !important; }
                .language-selector, .currency-selector { display: none !important; }
                .account-btn { padding: 7px 8px !important; }
                .cart-btn { width: 40px !important; height: 40px !important; }
            }

            /* ============================================================
               MODERN CART SIDEBAR DRAWER (REVAMPED THEME)
               ============================================================ */
            .modern-cart-drawer {
                background: linear-gradient(180deg, var(--surface-paper-canvas, #fefdfc) 0%, var(--surface-cream-wash, #fff6f0) 100%) !important;
                border-left: 1px solid var(--color-stone, #d7d6d4) !important;
                box-shadow: -10px 0 35px rgba(37, 34, 30, 0.08) !important;
                width: 420px !important;
                max-width: 100% !important;
            }

            .modern-cart-drawer .offcanvas__wrapper {
                padding: 30px clamp(15px, 4vw, 30px) !important;
            }

            /* Cart list items style overrides */
            .modern-cart-drawer .cart-list li {
                background: var(--color-paper, #fefdfc) !important;
                border: 1px solid var(--color-stone, #d7d6d4) !important;
                border-radius: 14px !important;
                padding: 16px !important;
                transition: all 0.25s ease !important;
                box-shadow: 0 4px 10px rgba(37,34,30,0.02) !important;
            }

            .modern-cart-drawer .cart-list .cart-thumb {
                width: 56px !important;
                height: 56px !important;
                border-radius: 10px !important;
                overflow: hidden !important;
                border: 1px solid var(--color-stone, #d7d6d4) !important;
            }
            .modern-cart-drawer .cart-list .cart-thumb img {
                width: 100% !important;
                height: 100% !important;
                object-fit: cover !important;
                display: block !important;
            }
            .modern-cart-drawer .cart-list .cart-thumb--credits {
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                background: var(--surface-cream-wash, #fff6f0) !important;
                color: var(--color-ember-red, #e34432) !important;
                font-size: 20px !important;
            }

            .modern-cart-drawer .cart-list li:hover {
                transform: translateY(-2px);
                border-color: rgba(227, 68, 50, 0.25) !important;
                box-shadow: 0 8px 20px rgba(37,34,30,0.05) !important;
                background: var(--color-paper, #fefdfc) !important;
            }

            .modern-cart-drawer .cart-list .remove-item {
                background: var(--surface-cream-wash, #fff6f0) !important;
                border: 1px solid var(--color-stone, #d7d6d4) !important;
                color: var(--color-ember-red, #e34432) !important;
                transition: all 0.25s ease !important;
                box-shadow: none !important;
            }

            .modern-cart-drawer .cart-list .remove-item:hover {
                background: var(--color-ember-red, #e34432) !important;
                border-color: var(--color-ember-red, #e34432) !important;
                color: #fff !important;
                transform: rotate(90deg) scale(1.05) !important;
            }

            /* Close Button Override */
            .modern-cart-drawer .cartcanvas__close {
                background: transparent !important;
                border: 1px solid var(--color-stone, #d7d6d4) !important;
                color: var(--color-ink, #25221e) !important;
                transition: all 0.25s ease !important;
            }

            .modern-cart-drawer .cartcanvas__close:hover {
                border-color: var(--color-ember-red, #e34432) !important;
                color: var(--color-ember-red, #e34432) !important;
                transform: rotate(90deg) scale(1.05) !important;
                background: transparent !important;
            }

            /* Credits badges inside drawer */
            .modern-cart-drawer .db-points-badge--amber {
                background: var(--surface-cream-wash, #fff6f0) !important;
                border: 1px solid rgba(227, 68, 50, 0.15) !important;
                color: var(--color-ember-red, #e34432) !important;
                display: inline-flex;
                align-items: center;
                padding: 3px 8px;
                border-radius: 6px;
                font-size: 11px;
                font-weight: 700;
            }

            /* Drawer Footer adjustments */
            .modern-cart-drawer .cart-footer {
                border-top: 1.5px dashed var(--color-stone, #d7d6d4) !important;
            }

            .modern-cart-drawer .cart-footer h5 {
                font-family: var(--font-inter), sans-serif !important;
                font-weight: 700 !important;
                color: var(--color-pencil, #6f6c69) !important;
            }

            .modern-cart-drawer .cart-footer .modern-btn-outline {
                border: 1.5px solid var(--color-stone, #d7d6d4) !important;
                color: var(--color-pencil, #6f6c69) !important;
                background: transparent !important;
                font-weight: 700 !important;
                border-radius: 10px !important;
                transition: all 0.25s ease !important;
            }
            .modern-cart-drawer .cart-footer .modern-btn-outline:hover {
                border-color: var(--color-deep-ember, #cf3520) !important;
                color: var(--color-deep-ember, #cf3520) !important;
                background-color: var(--surface-cream-wash, #fff6f0) !important;
            }
            .modern-cart-drawer .cart-footer .modern-btn-solid {
                background: var(--color-ember-red, #e34432) !important;
                color: white !important;
                border: none !important;
                border-radius: 10px !important;
                font-weight: 700 !important;
                transition: all 0.25s ease !important;
                box-shadow: 0 4px 12px rgba(227, 68, 50, 0.15) !important;
            }
            .modern-cart-drawer .cart-footer .modern-btn-solid:hover {
                background: var(--color-deep-ember, #cf3520) !important;
                transform: translateY(-1px) !important;
                box-shadow: 0 6px 16px rgba(227, 68, 50, 0.22) !important;
            }

/* ===== Footer ===== */
    /* ============================================================
       Core Coach Lab — FOOTER (new warm theme)
       Visual redesign only; routes & handlers preserved.
       ============================================================ */
    .af-footer {
        position: relative;
        overflow: hidden;
        background: transparent;
        color: var(--color-ink, #25221e);
        border-top: 0px solid var(--color-stone, #d7d6d4);
        font-family: var(--font-inter, 'Inter', sans-serif);
        isolation: isolate;
    }

    /* gradient accent line bookending the page (matches header) */
    .af-footer::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0;
        display: none;
        height: 3px;
        background: linear-gradient(90deg,
            var(--color-ember-red, #e34432) 0%,
            var(--color-teal-dusk, #497d7e) 35%,
            var(--color-forest, #446c3d) 60%,
            var(--color-ember-red, #e34432) 100%);
        opacity: .8;
        z-index: 2;
    }

    /* soft decorative washes — the "studio light" atmosphere */
    .af-footer__glow {
        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        overflow: hidden;
    }
    .af-footer__glow::before,
    .af-footer__glow::after {
        content: '';
        position: absolute;
        border-radius: 50%;
        filter: blur(60px);
    }
    .af-footer__glow::before {
        width: 460px; height: 460px;
        top: -180px; right: -120px;
        background: radial-gradient(circle, rgba(220,234,255,0.55) 0%, transparent 70%);
    }
    .af-footer__glow::after {
        width: 420px; height: 420px;
        bottom: -200px; left: -140px;
        background: radial-gradient(circle, rgba(240,246,223,0.7) 0%, transparent 70%);
    }

    .af-container {
        position: relative;
        z-index: 1;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 24px;
    }

    .af-footer__top { padding: 64px 0 56px; }

    /* ---- Featured newsletter CTA banner ---- */
    .af-cta {
        position: relative;
        overflow: hidden;
        display: grid;
        grid-template-columns: 1.1fr 1fr;
        align-items: center;
        gap: 32px;
        padding: 40px 48px;
        margin-bottom: 64px;
        border-radius: 24px;
        border: 1px solid var(--color-stone, #d7d6d4);
        background:
            radial-gradient(120% 140% at 100% 0%, rgba(220,234,255,0.55) 0%, transparent 55%),
            radial-gradient(120% 140% at 0% 100%, rgba(240,246,223,0.7) 0%, transparent 55%),
            linear-gradient(135deg, #fffefd 0%, #fff6f0 100%);
        box-shadow: 0 18px 40px rgba(37, 34, 30, 0.06);
    }
    .af-cta__eyebrow {
        display: inline-block;
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.14em;
        color: var(--color-deep-ember, #cf3520);
        margin-bottom: 10px;
    }
    .af-cta__title {
        font-family: var(--font-graphik, 'Inter', sans-serif);
        font-size: 30px;
        line-height: 1.15;
        font-weight: 700;
        letter-spacing: -0.02em;
        color: var(--color-ink, #25221e);
        margin: 0 0 8px;
    }
    .af-cta__desc {
        font-size: 15px;
        line-height: 1.6;
        color: var(--color-pencil, #6f6c69);
        margin: 0;
        max-width: 420px;
    }
    .af-cta__form { justify-self: end; width: 100%; max-width: 440px; }

    .af-footer__grid {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr;
        gap: 48px;
        align-items: start;
    }

    /* ---- Brand column ---- */
    .af-footer__logo { display: inline-block; line-height: 0; transition: opacity .25s ease; }
    .af-footer__logo:hover { opacity: .85; }
    .af-footer__logo img { max-width: 190px; height: auto; margin-bottom: 20px; }

    .af-footer__tagline {
        position: relative;
        display: inline-block;
        margin: 18px 0 24px;
        padding-bottom: 12px;
        font-family: var(--font-graphik, 'Inter', sans-serif);
        font-size: 19px;
        font-weight: 600;
        letter-spacing: -0.01em;
        color: var(--color-ink, #25221e);
    }
    /* hand-painted brush underline */
    .af-footer__tagline::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 64px;
        height: 4px;
        border-radius: 4px;
        background: linear-gradient(90deg, var(--color-ember-red, #e34432), var(--color-teal-dusk, #497d7e));
    }

    .af-footer__contact { list-style: none; margin: 0; padding: 0; }
    .af-footer__contact li {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 12px;
        font-size: 15px;
        line-height: 1.5;
        color: var(--color-pencil, #6f6c69);
    }
    .af-footer__contact li i {
        color: var(--color-ember-red, #e34432);
        font-size: 14px;
        margin-top: 4px;
        flex-shrink: 0;
        width: 16px;
        text-align: center;
    }
    .af-footer__contact a {
        color: var(--color-pencil, #6f6c69);
        text-decoration: none;
        transition: color .2s ease;
    }
    .af-footer__contact a:hover { color: var(--color-deep-ember, #cf3520); }

    /* ---- Heading (eyebrow style) ---- */
    .af-footer__heading {
        margin: 4px 0 20px;
        font-family: var(--font-inter, 'Inter', sans-serif);
        font-size: 13px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--color-pencil, #6f6c69);
    }

    /* ---- Link lists ---- */
    .af-footer__links { list-style: none; margin: 0; padding: 0; }
    .af-footer__links li { margin-bottom: 12px; }
    .af-footer__links a {
        position: relative;
        display: inline-block;
        color: var(--color-ink, #25221e);
        font-size: 15px;
        text-decoration: none;
        transition: color .2s ease, transform .2s ease;
        padding-left: 0;
    }
    .af-footer__links a:hover {
        color: var(--color-deep-ember, #cf3520);
        transform: translateX(3px);
    }
.af-footer__links a::after{
    left: 0;
}
    /* ---- Newsletter ---- */
    .af-footer__news-desc {
        margin: 0 0 18px;
        font-size: 15px;
        line-height: 1.55;
        color: var(--color-pencil, #6f6c69);
        max-width: 320px;
    }
    .af-footer .subscribe-form .form-group {
        display: flex;
        align-items: stretch;
        background: var(--color-paper, #fefdfc);
        border: 1.5px solid var(--color-stone, #d7d6d4);
        border-radius: 999px;
        padding: 6px 6px 6px 8px;
        max-width: 380px;
        box-shadow: 0 1px 2px rgba(37, 34, 30, 0.04);
        transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
    }
    .af-footer .subscribe-form .form-group:hover {
        border-color: var(--color-graphite, #94928f);
    }
    .af-footer .subscribe-form .form-group:focus-within {
        border-color: var(--color-ember-red, #e34432);
        box-shadow: 0 0 0 4px rgba(227, 68, 50, 0.12);
        transform: translateY(-1px);
    }
    .af-footer .subscribe-form input.email {
        flex: 1 1 auto;
        border: none !important;
        background: transparent !important;
        outline: none !important;
        padding: 11px 14px !important;
        font-family: var(--font-inter, 'Inter', sans-serif) !important;
        font-size: 15px !important;
        color: var(--color-ink, #25221e) !important;
        box-shadow: none !important;
        min-width: 0;
        letter-spacing: 0.01em;
    }
    .af-footer .subscribe-form input.email::placeholder { color: var(--color-graphite, #94928f) !important; }
    .af-footer .subscribe-form button.theme-btn {
        flex-shrink: 0;
        position: relative;
        overflow: hidden;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 44px;
        padding: 0 !important;
        border: none !important;
        border-radius: 999px !important;
        background: linear-gradient(135deg, var(--color-ember-red, #e34432), var(--color-deep-ember, #cf3520)) !important;
        color: var(--color-paper, #fefdfc) !important;
        font-size: 15px !important;
        cursor: pointer;
        transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease !important;
        box-shadow: 0 4px 12px rgba(227, 68, 50, 0.32) !important;
    }
    .af-footer .subscribe-form button.theme-btn:hover {
        transform: translateY(-1px) scale(1.04);
        box-shadow: 0 6px 16px rgba(227, 68, 50, 0.42) !important;
    }
    .af-footer .subscribe-form button.theme-btn:hover i { animation: afPlane .5s ease; }
    @keyframes afPlane {
        0% { transform: translate(0,0); }
        40% { transform: translate(3px,-3px) rotate(8deg); }
        100% { transform: translate(0,0); }
    }
    .af-footer .subscribe-form .suces_rinfo {
        margin-top: 14px;
        font-size: 14px;
        color: var(--color-forest, #446c3d) !important;
        font-weight: 500;
        display: inline-flex;
        align-items: center;
        gap: 7px;
    }
    .af-footer .subscribe-form .suces_rinfo::before {
        content: '\f058'; /* fa check-circle */
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        color: var(--color-forest, #446c3d);
    }

    /* ---- Bottom bar ---- */
    .af-footer__bottom {
        border-top: 1px solid var(--color-stone, #d7d6d4);
        padding: 20px 0;
    }
    .af-footer__bottom-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        flex-wrap: wrap;
    }
    .af-footer__copyright {
        font-size: 14px;
        color: var(--color-pencil, #6f6c69);
    }
    .af-footer__copyright a {
        color: var(--color-ink, #25221e);
        font-weight: 600;
        text-decoration: none;
        transition: color .2s ease;
    }
    .af-footer__copyright a:hover { color: var(--color-deep-ember, #cf3520); }

    .af-footer__payment {
        display: inline-flex;
        align-items: center;
        padding: 6px 12px;
        background: var(--color-paper, #fefdfc);
        border: 0px solid var(--color-stone, #d7d6d4);
        border-radius: 999px;
        box-shadow: 0 1px 2px rgba(37, 34, 30, 0.04);
        transition: box-shadow .25s ease, transform .25s ease;
    }
    .af-footer__payment:hover {
        box-shadow: 0 4px 12px rgba(37, 34, 30, 0.08);
        transform: translateY(-1px);
    }
    .af-footer__payment img {
        height: 24px;
        width: auto;
        display: block;
        opacity: .85;
        filter: saturate(.9);
        transition: opacity .25s ease;
    }
    .af-footer__payment:hover img { opacity: 1; }

    @media (max-width: 575px) {
        .af-footer__bottom-inner { flex-direction: column; text-align: center; gap: 14px; }
    }

    /* form fills the CTA column */
    .af-cta .subscribe-form .form-group { max-width: 100% !important; }

    /* ---- Responsive ---- */
    @media (max-width: 991px) {
        .af-cta {
            grid-template-columns: 1fr;
            gap: 24px;
            padding: 36px 32px;
            margin-bottom: 52px;
        }
        .af-cta__form { justify-self: stretch; max-width: 100%; }
        .af-footer__grid {
            grid-template-columns: 1.5fr 1fr 1fr;
            gap: 40px 32px;
        }
    }
    @media (max-width: 700px) {
        .af-footer__grid {
            grid-template-columns: 1fr 1fr;
            gap: 36px 28px;
        }
        .af-footer__brand { grid-column: 1 / -1; }
    }
    @media (max-width: 575px) {
        .af-footer__top { padding: 48px 0 36px; }
        .af-cta { padding: 28px 22px; border-radius: 18px; }
        .af-cta__title { font-size: 24px; }
        .af-footer__grid {
            grid-template-columns: 1fr;
            gap: 32px;
        }
    }

/* ============================================================
   ARTIFY FOOTER — DARK EDITORIAL REDESIGN
   ============================================================ */
    .artf-footer{
        position: relative;
        overflow: hidden;
        background: #16130f;
        color: rgba(255, 255, 255, 0.72);
        font-family: var(--font-inter, 'Inter', sans-serif);
        isolation: isolate;
    }

    .artf-footer__glow{
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        overflow: hidden;
    }
    .artf-footer__glow::before,
    .artf-footer__glow::after{
        content: "";
        position: absolute;
        border-radius: 50%;
        filter: blur(90px);
    }
    .artf-footer__glow::before{
        width: 480px; height: 480px;
        top: -200px; right: -140px;
        background: radial-gradient(circle, rgba(227, 68, 50, 0.30) 0%, transparent 70%);
    }
    .artf-footer__glow::after{
        width: 520px; height: 520px;
        bottom: -240px; left: -160px;
        background: radial-gradient(circle, rgba(15, 102, 174, 0.22) 0%, transparent 70%);
    }

    .artf-footer__inner{
        position: relative;
        z-index: 1;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 24px;
    }

    .artf-footer__top{
        padding: 84px 0 44px;
    }

    /* ---- Newsletter (dark, underline field) ---- */
    .artf-newsletter{
        display: grid;
        grid-template-columns: 1.1fr 1fr;
        gap: 48px;
        align-items: end;
        padding-bottom: 56px;
        margin-bottom: 56px;
        border-bottom: 1px dashed rgba(255, 255, 255, 0.12);
    }
    .artf-newsletter__eyebrow{
        display: inline-flex;
        align-items: center;
        gap: 12px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--color-ember-red);
        margin-bottom: 14px;
    }
    .artf-newsletter__eyebrow::before{
        content: "";
        display: inline-block;
        width: 28px;
        height: 1px;
        background: currentColor;
    }
    .artf-newsletter__title{
        font-family: var(--font-graphik, 'Inter', sans-serif);
        font-size: 42px;
        line-height: 1.1;
        font-weight: 800;
        letter-spacing: -0.02em;
        color: #fff;
        margin: 0 0 14px 0;
    }
    .artf-newsletter__desc{
        font-size: 15px;
        line-height: 1.6;
        color: rgba(255, 255, 255, 0.55);
        margin: 0;
        max-width: 460px;
    }

    .artf-newsletter__form{ width: 100%; }
    .artf-newsletter__form .subscribe-form{ width: 100%; }
    .artf-newsletter__form .form-group{
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 0;
        border: 0;
        border-bottom: 1.5px solid rgba(255, 255, 255, 0.22);
        background: transparent;
        border-radius: 0;
        max-width: 100%;
        box-shadow: none;
        transition: border-color 0.3s ease;
    }
    .artf-newsletter__form .form-group:hover{
        border-bottom-color: rgba(255, 255, 255, 0.35);
    }
    .artf-newsletter__form .form-group:focus-within{
        border-bottom-color: var(--color-ember-red);
    }
    .artf-newsletter__form input.email{
        flex: 1 1 auto;
        border: 0 !important;
        background: transparent !important;
        outline: none !important;
        padding: 6px 0 !important;
        font-family: var(--font-inter, 'Inter', sans-serif) !important;
        font-size: 17px !important;
        color: #fff !important;
        font-weight: 500;
        min-width: 0;
        box-shadow: none !important;
        letter-spacing: 0.01em;
    }
    .artf-newsletter__form input.email::placeholder{
        color: rgba(255, 255, 255, 0.32) !important;
        font-weight: 500;
    }
    /* Kill Chrome/Safari autofill light-blue pill; keep the underline look */
    .artf-newsletter__form input.email:-webkit-autofill,
    .artf-newsletter__form input.email:-webkit-autofill:hover,
    .artf-newsletter__form input.email:-webkit-autofill:focus,
    .artf-newsletter__form input.email:-webkit-autofill:active{
        -webkit-box-shadow: 0 0 0 1000px #16130f inset !important;
        box-shadow: 0 0 0 1000px #16130f inset !important;
        -webkit-text-fill-color: #ffffff !important;
        caret-color: #ffffff !important;
        border-radius: 0 !important;
        transition: background-color 99999s ease-in-out 0s,
                    color 99999s ease-in-out 0s;
    }
    .artf-newsletter__form input.email:autofill{
        background: transparent !important;
        color: #ffffff !important;
        border-radius: 0 !important;
    }
    .artf-newsletter__form button.theme-btn{
        flex-shrink: 0;
        width: 46px;
        height: 46px;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 50% !important;
        background: var(--color-ember-red, #e34432) !important;
        color: #fff !important;
        font-size: 15px !important;
        cursor: pointer;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        box-shadow: 0 8px 20px rgba(227, 68, 50, 0.35) !important;
        transition: transform 0.3s cubic-bezier(.34,1.56,.64,1),
                    background 0.3s ease,
                    box-shadow 0.3s ease !important;
    }
    .artf-newsletter__form button.theme-btn:hover{
        transform: translateY(-2px) scale(1.05);
        background: var(--color-deep-ember, #cf3520) !important;
        box-shadow: 0 12px 28px rgba(227, 68, 50, 0.5) !important;
    }
    .artf-newsletter__form button.theme-btn:hover i{
        animation: artfPlane 0.55s ease;
    }
    @keyframes artfPlane{
        0%   { transform: translate(0,0); }
        40%  { transform: translate(3px,-3px) rotate(8deg); }
        100% { transform: translate(0,0); }
    }
    .artf-newsletter__form .suces_rinfo{
        margin-top: 14px;
        font-size: 13.5px;
        color: #a4d199 !important;
        font-weight: 500;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }
    .artf-newsletter__form .suces_rinfo::before{
        content: "\f058";
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        color: #a4d199;
    }

    /* ---- Grid: brand + nav columns ---- */
    .artf-footer__grid{
        display: grid;
        grid-template-columns: 1.5fr 1fr 1fr;
        gap: 56px;
        align-items: start;
        padding-bottom: 56px;
    }

    .artf-footer__brand{
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    .artf-footer__logo{
        display: inline-block;
        line-height: 0;
        max-width: 180px;
        opacity: 0.95;
        transition: opacity 0.25s ease;
    }
    .artf-footer__logo:hover{ opacity: 1; }
    .artf-footer__logo img{
        max-width: 100%;
        height: auto;
    }

    .artf-footer__contact{
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .artf-footer__contact li{
        display: flex;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 12px;
        font-size: 14px;
        line-height: 1.55;
        color: rgba(255, 255, 255, 0.62);
    }
    .artf-footer__contact li i{
        color: var(--color-ember-red);
        font-size: 13px;
        margin-top: 4px;
        flex-shrink: 0;
        width: 16px;
        text-align: center;
    }
    .artf-footer__contact a{
        color: rgba(255, 255, 255, 0.62);
        text-decoration: none;
        transition: color 0.25s ease;
    }
    .artf-footer__contact a:hover{ color: var(--color-ember-red); }

    .artf-footer__col{
        display: flex;
        flex-direction: column;
    }
    .artf-footer__heading{
        margin: 6px 0 22px;
        font-family: var(--font-inter, 'Inter', sans-serif);
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.18em;
        color: var(--color-ember-red);
    }

    .artf-footer__links{
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .artf-footer__links li{
        margin-bottom: 12px;
    }
    .artf-footer__links a{
        position: relative;
        display: inline-block;
        color: rgba(255, 255, 255, 0.72);
        font-size: 14.5px;
        text-decoration: none;
        padding-bottom: 2px;
        transition: color 0.25s ease;
    }
    .artf-footer__links a::after{
        content: "";
        position: absolute;
        left: 0;
        right: auto;
        bottom: 0;
        width: 0;
        height: 1px;
        background: var(--color-ember-red);
        transition: width 0.3s ease;
    }
    .artf-footer__links a:hover{ color: #fff; }
    .artf-footer__links a:hover::after{ width: 100%; }

    /* ---- Bottom bar ---- */
    .artf-footer__bottom{
        border-top: 1px dashed rgba(255, 255, 255, 0.12);
        padding: 22px 0 32px;
    }
    .artf-footer__bottom-inner{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        flex-wrap: wrap;
    }
    .artf-footer__copyright{
        font-size: 13px;
        color: rgba(255, 255, 255, 0.48);
    }
    .artf-footer__copyright a{
        color: rgba(255, 255, 255, 0.88);
        font-weight: 600;
        text-decoration: none;
        transition: color 0.25s ease;
    }
    .artf-footer__copyright a:hover{ color: var(--color-ember-red); }

    .artf-footer__payment{
        display: inline-flex;
        align-items: center;
        padding: 8px 14px;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.10);
        border-radius: 999px;
        transition: background 0.25s ease,
                    border-color 0.25s ease,
                    transform 0.25s ease;
    }
    .artf-footer__payment:hover{
        background: rgba(255, 255, 255, 0.10);
        border-color: rgba(255, 255, 255, 0.20);
        transform: translateY(-1px);
    }
    .artf-footer__payment img{
        height: 22px;
        width: auto;
        display: block;
        opacity: 0.9;
        transition: opacity 0.25s ease;
    }
    .artf-footer__payment:hover img{ opacity: 1; }

    /* ---- Responsive ---- */
    @media (max-width: 991px){
        .artf-newsletter{
            grid-template-columns: 1fr;
            gap: 24px;
        }
        .artf-newsletter__title{ font-size: 34px; }
        .artf-footer__grid{
            grid-template-columns: 1.3fr 1fr 1fr;
            gap: 40px 32px;
        }
    }
    @media (max-width: 700px){
        .artf-footer__top{ padding: 60px 0 36px; }
        .artf-footer__grid{
            grid-template-columns: 1fr 1fr;
            gap: 36px 28px;
        }
        .artf-footer__brand{ grid-column: 1 / -1; }
    }
    @media (max-width: 480px){
        .artf-newsletter{
            padding-bottom: 40px;
            margin-bottom: 40px;
        }
        .artf-newsletter__title{ font-size: 26px; }
        .artf-footer__grid{
            grid-template-columns: 1fr;
            gap: 32px;
        }
        .artf-footer__bottom-inner{
            flex-direction: column;
            text-align: center;
            gap: 14px;
        }
    }

/* ============================================================
   COOKIE CONSENT — EDITORIAL DARK BAR WITH EMBER MEDIA BLOCK
   Override vendor's #cookies-policy.cookies with high specificity.
   ============================================================ */
#cookies-policy.cookies.artify-cookies,
.artify-cookies {
    position: fixed !important;
    bottom: 0 !important;
    right: 0 !important;
    left: 0 !important;
    top: auto !important;
    z-index: 9999 !important;
    display: block !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    font-family: var(--font-inter, 'Inter', sans-serif);
    font-size: 16px;
}
.artify-cookies__overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: -1;
    animation: artifyCookiesFadeIn 0.35s ease;
    pointer-events: none;
}
.artify-cookies__card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 100%;
    background: #16130f;
    color: rgba(255, 255, 255, 0.75);
    border-radius: 24px 24px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow:
        0 -24px 60px rgba(0, 0, 0, 0.55),
        0 -4px 14px rgba(0, 0, 0, 0.25);
    padding: 0;
    overflow: hidden;
    animation: artifyCookiesSlideUp 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Grabber hint at very top (subtle) */
.artify-cookies__card::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 3px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.12);
    pointer-events: none;
}

/* Warm ember glow accent — sits at top-center */
.artify-cookies__card::after {
    content: '';
    position: absolute;
    top: -220px;
    left: 50%;
    transform: translateX(-50%);
    width: 520px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(227, 68, 50, 0.25) 0%, transparent 65%);
    filter: blur(60px);
    pointer-events: none;
    z-index: 0;
}

/* Content max-width wrapper — center everything */
.artify-cookies__main,
.artify-cookies__customize-toggle,
.artify-cookies__customize {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* MAIN 3-COLUMN LAYOUT: icon block | copy | actions */
.artify-cookies__main {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 28px;
    padding: 26px 34px 26px;
    position: relative;
}

/* LEFT: bold ember icon block */
.artify-cookies__media {
    flex-shrink: 0;
}
.artify-cookies__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--color-ember-red, #e34432) 0%, var(--color-deep-ember, #cf3520) 100%);
    color: #ffffff;
    font-size: 30px;
    box-shadow:
        0 12px 26px rgba(227, 68, 50, 0.40),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
    animation: artifyCookieWiggle 3s ease-in-out infinite;
}
.artify-cookies__icon i {
    line-height: 1;
    color: inherit;
    font-size: inherit;
}
@keyframes artifyCookieWiggle {
    0%, 100% { transform: rotate(0deg); }
    15% { transform: rotate(-8deg) scale(1.04); }
    30% { transform: rotate(8deg) scale(1.04); }
    45% { transform: rotate(-3deg); }
    60% { transform: rotate(3deg); }
    75% { transform: rotate(0deg); }
}

/* CENTER: copy */
.artify-cookies__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.artify-cookies__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-inter, sans-serif);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #f0a58c;
}
.artify-cookies__eyebrow-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-ember-red, #e34432);
    box-shadow: 0 0 10px rgba(227, 68, 50, 0.7);
    animation: artifyCookiesPulse 1.8s ease-in-out infinite;
}
@keyframes artifyCookiesPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.25); opacity: 0.75; }
}

/* Backward-compat title (if used) */
.artify-cookies__title {
    font-family: var(--font-graphik, sans-serif);
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.3px;
}

.artify-cookies__intro {
    font-size: 14.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
    max-width: 640px;
}
.artify-cookies__policy-link {
    font-size: 12.5px;
    margin: 4px 0 0 0;
    color: rgba(255, 255, 255, 0.55);
}
.artify-cookies__policy-link a {
    color: #f0a58c;
    text-decoration: none;
    border-bottom: 1px dashed rgba(240, 165, 140, 0.4);
    transition: all 0.2s ease;
}
.artify-cookies__policy-link a:hover {
    color: #ffffff;
    border-bottom-color: #ffffff;
    border-bottom-style: solid;
}

/* RIGHT: action buttons — stacked vertical */
.artify-cookies__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
    justify-content: center;
    flex-shrink: 0;
    min-width: 210px;
}

/* The @cookieconsentbutton directive renders as:
   <form class="artify-cookies__btn artify-cookies__btn--{variant}">
       <button class="artify-cookies__btn__link">
           <span class="artify-cookies__btn__label">…</span>
       </button>
   </form>
   So treat the form as an invisible full-width slot and style the inner button. */
.artify-cookies__btn {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
}
.artify-cookies__btn > button,
.artify-cookies__btn__link {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 13px 24px;
    border-radius: 12px;
    font-family: var(--font-inter, 'Inter', sans-serif) !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                background-color 0.28s ease,
                box-shadow 0.28s ease,
                color 0.28s ease,
                border-color 0.28s ease;
}
.artify-cookies__btn__label {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    line-height: 1;
}

/* Primary (ember filled) */
.artify-cookies__btn--primary > button,
.artify-cookies__btn--primary .artify-cookies__btn__link {
    background: var(--color-ember-red, #e34432) !important;
    color: #ffffff !important;
    border: 1px solid var(--color-ember-red, #e34432) !important;
    box-shadow: 0 10px 24px rgba(227, 68, 50, 0.38) !important;
}
.artify-cookies__btn--primary > button:hover,
.artify-cookies__btn--primary .artify-cookies__btn__link:hover {
    background: var(--color-deep-ember, #cf3520) !important;
    border-color: var(--color-deep-ember, #cf3520) !important;
    box-shadow: 0 14px 32px rgba(227, 68, 50, 0.55) !important;
    transform: translateY(-2px);
}

/* Secondary (translucent glass) */
.artify-cookies__btn--secondary > button,
.artify-cookies__btn--secondary .artify-cookies__btn__link {
    background: rgba(255, 255, 255, 0.05) !important;
    color: rgba(255, 255, 255, 0.88) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    box-shadow: none !important;
}
.artify-cookies__btn--secondary > button:hover,
.artify-cookies__btn--secondary .artify-cookies__btn__link:hover {
    background: rgba(255, 255, 255, 0.10) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.30) !important;
    transform: translateY(-1px);
}

/* Close button — floating top-right corner */
.artify-cookies__close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.55);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.25s ease;
    z-index: 3;
    padding: 0;
}
.artify-cookies__close:hover {
    background: var(--color-ember-red, #e34432);
    border-color: var(--color-ember-red, #e34432);
    color: #ffffff;
    transform: rotate(90deg);
}

/* Customize toggle — full-width dashed strip */
.artify-cookies__customize-toggle {
    display: flex;
    width: 100%;
    max-width: none;
    padding: 16px 34px;
    background: rgba(255, 255, 255, 0.02);
    border: none;
    border-top: 1px dashed rgba(255, 255, 255, 0.10);
    font-family: var(--font-inter, sans-serif);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #f0a58c;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transition: all 0.25s ease;
    text-align: center;
    margin-left: auto !important;
    margin-right: auto !important;
}
.artify-cookies__customize-toggle:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
}
.artify-cookies__customize-toggle--open {
    background: rgba(240, 165, 140, 0.06);
    color: #ffffff;
}
.artify-cookies__customize-toggle i {
    font-size: 10px;
    transition: transform 0.3s ease;
}
.artify-cookies__customize-label {
    font-family: inherit;
    font-size: inherit;
    letter-spacing: inherit;
}

/* Expand section */
.artify-cookies__expand {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    background: rgba(255, 255, 255, 0.02);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.artify-cookies__expand--open {
    max-height: 520px;
    overflow-y: auto;
}
.artify-cookies__customize {
    padding: 26px 32px 30px;
}

/* Sections */
.artify-cookies__sections {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 22px;
}
.artify-cookies__section {
    padding: 18px 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    transition: all 0.28s ease;
}
.artify-cookies__section:hover {
    border-color: rgba(240, 165, 140, 0.30);
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-1px);
}

/* Category structure */
.artify-cookies__category-wrapper {
    display: flex;
    flex-direction: column;
}
.artify-cookies__category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.artify-cookies__cat-title {
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.01em;
}
.artify-cookies__cat-desc {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.55);
    margin: 6px 0 0 0;
    line-height: 1.5;
}

/* Toggle Switch — dark palette */
.artify-cookies__switch {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 24px;
    flex-shrink: 0;
    cursor: pointer;
}
.artify-cookies__switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.artify-cookies__slider {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(255, 255, 255, 0.14);
    transition: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 34px;
}
.artify-cookies__slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: #ffffff;
    transition: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}
.artify-cookies__switch input:checked + .artify-cookies__slider {
    background-color: var(--color-ember-red, #e34432);
    box-shadow: 0 0 12px rgba(227, 68, 50, 0.4);
}
.artify-cookies__switch input:checked + .artify-cookies__slider:before {
    transform: translateX(18px);
}
.artify-cookies__switch input:disabled + .artify-cookies__slider {
    opacity: 0.6;
    background-color: rgba(240, 165, 140, 0.35);
    cursor: not-allowed;
}

/* More toggle */
.artify-cookies__more-toggle {
    background: none;
    border: none;
    color: #f0a58c;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
    margin-top: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    letter-spacing: 0.04em;
    transition: color 0.2s ease;
}
.artify-cookies__more-toggle:hover {
    color: #ffffff;
}
.artify-cookies__more-toggle i {
    font-size: 10px;
    transition: transform 0.25s ease;
}

/* Details */
.artify-cookies__details {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    margin-top: 12px;
}
.artify-cookies__details--open {
    max-height: 400px;
}
.artify-cookies__cookies-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.artify-cookies__cookie-item {
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    border-left: 3px solid var(--color-ember-red, #e34432);
}
.artify-cookies__cookie-name {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 4px;
}
.artify-cookies__cookie-duration {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 700;
    color: #f0a58c;
    background: rgba(227, 68, 50, 0.20);
    padding: 2px 8px;
    border-radius: 999px;
    margin-bottom: 4px;
    letter-spacing: 0.02em;
}
.artify-cookies__cookie-desc {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.55);
    margin: 4px 0 0;
    line-height: 1.55;
}

/* Footer save */
.artify-cookies__footer {
    padding: 18px 0 0;
    border-top: 1px dashed rgba(255, 255, 255, 0.10);
    display: flex;
    justify-content: flex-end;
}
.artify-cookies__save {
    width: 100%;
    padding: 14px 24px;
    background: var(--color-ember-red, #e34432);
    color: #ffffff;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: all 0.28s ease;
    text-align: center;
    box-shadow: 0 10px 24px rgba(227, 68, 50, 0.38);
}
.artify-cookies__save:hover {
    background: var(--color-deep-ember, #cf3520);
    box-shadow: 0 14px 32px rgba(227, 68, 50, 0.55);
    transform: translateY(-2px);
}

/* Animations */
@keyframes artifyCookiesFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes artifyCookiesSlideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

/* Responsive */
@media (max-width: 991px) {
    .artify-cookies__main {
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "media body"
            "actions actions";
        padding: 24px 28px 22px;
        gap: 22px;
    }
    .artify-cookies__media   { grid-area: media; }
    .artify-cookies__body    { grid-area: body; }
    .artify-cookies__actions {
        grid-area: actions;
        flex-direction: row;
        min-width: 0;
    }
    .artify-cookies__btn {
        flex: 1 1 0;
    }
}

@media (max-width: 575px) {
    .artify-cookies__card {
        border-radius: 20px 20px 0 0;
    }
    .artify-cookies__main {
        grid-template-columns: 1fr;
        grid-template-areas:
            "media"
            "body"
            "actions";
        padding: 22px 20px;
        gap: 18px;
        text-align: center;
    }
    .artify-cookies__media {
        justify-self: center;
    }
    .artify-cookies__icon {
        width: 60px;
        height: 60px;
        font-size: 26px;
        border-radius: 18px;
    }
    .artify-cookies__eyebrow {
        justify-content: center;
    }
    .artify-cookies__intro {
        max-width: none;
    }
    .artify-cookies__actions {
        flex-direction: column;
    }
    .artify-cookies__customize-toggle {
        padding: 14px 20px;
    }
    .artify-cookies__customize {
        padding: 22px 20px;
    }
    .artify-cookies__close {
        top: 10px;
        right: 10px;
        width: 26px;
        height: 26px;
    }
    .artify-cookies__expand--open {
        max-height: 65vh;
    }
}

/* ============================================================
   FLASH NOTIFICATIONS / TOAST MESSAGES — modern glassmorphism
   ============================================================ */
.artify-toasts {
	position: fixed;
	top: 100px;
	right: 24px;
	z-index: 2000;
	display: flex;
	flex-direction: column;
	gap: 14px;
	width: 384px;
	max-width: calc(100vw - 48px);
	pointer-events: none;
	font-family: var(--font-inter, sans-serif);
}

.artify-toast {
	position: relative;
	pointer-events: auto;
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 16px 18px;
	background: linear-gradient(135deg, rgba(254, 253, 252, 0.95) 0%, rgba(255, 250, 248, 0.92) 100%);
	border: 1px solid rgba(215, 214, 212, 0.6);
	border-radius: 12px;
	color: var(--color-ink, #25221e);
	box-shadow: 0 16px 48px rgba(37, 34, 30, 0.12), 0 2px 8px rgba(37, 34, 30, 0.04);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	overflow: hidden;
	animation: artifyToastSlideIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.artify-toast.artify-toast--dismiss {
	opacity: 0;
	transform: translateX(400px);
}

/* Left accent stripe */
.artify-toast::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 5px;
	border-radius: 5px 0 0 5px;
}

.artify-toast--success::before {
	background: linear-gradient(180deg, var(--color-forest, #446c3d) 0%, var(--color-forest, #446c3d) 100%);
	box-shadow: inset 0 2px 4px rgba(68, 108, 61, 0.3);
}

.artify-toast--error::before {
	background: linear-gradient(180deg, var(--color-ember-red, #e34432) 0%, var(--color-deep-ember, #cf3520) 100%);
	box-shadow: inset 0 2px 4px rgba(227, 68, 50, 0.3);
}

/* Content wrapper */
.artify-toast__content {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	flex: 1;
}

/* Icon medallion */
.artify-toast__icon {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	font-size: 18px;
	margin-top: 1px;
}

.artify-toast--success .artify-toast__icon {
	background: linear-gradient(135deg, rgba(68, 108, 61, 0.1) 0%, rgba(68, 108, 61, 0.05) 100%);
	color: var(--color-forest, #446c3d);
}

.artify-toast--error .artify-toast__icon {
	background: linear-gradient(135deg, rgba(227, 68, 50, 0.12) 0%, rgba(227, 68, 50, 0.06) 100%);
	color: var(--color-ember-red, #e34432);
}

/* Message text */
.artify-toast__message {
	flex: 1;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--color-ink, #25221e);
	word-break: break-word;
	padding-top: 2px;
}

/* Close button */
.artify-toast__close {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	padding: 0;
	margin: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 8px;
	background: transparent;
	color: var(--color-graphite, #94928f);
	font-size: 13px;
	cursor: pointer;
	opacity: 0.8;
	transition: all 0.2s ease;
	margin-top: 1px;
}

.artify-toast__close:hover {
	opacity: 1;
	background: rgba(37, 34, 30, 0.08);
	color: var(--color-ink, #25221e);
}

.artify-toast__close:active {
	transform: scale(0.92);
}

/* Animations */
@keyframes artifyToastSlideIn {
	from {
		opacity: 0;
		transform: translateX(420px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* Responsive */
@media (max-width: 768px) {
	.artify-toasts {
		top: 92px;
		right: 16px;
		left: 16px;
		width: auto;
	}
}

@media (max-width: 480px) {
	.artify-toasts {
		top: 80px;
		right: 12px;
		left: 12px;
		gap: 10px;
	}

	.artify-toast {
		padding: 14px 15px;
		gap: 12px;
		border-radius: 10px;
		font-size: 13px;
	}

	.artify-toast__icon {
		width: 36px;
		height: 36px;
		font-size: 16px;
	}

	.artify-toast__message {
		font-size: 13px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.artify-toast {
		animation: none;
	}
}

/* ===================== page-about-us ===================== */
    /* ============================================================
       ABOUT PAGE - MODERN EDITORIAL GALLERY & PILLARS
       ============================================================ */

    /* Reduce hero section padding on about page so bento sits flush */
    .page-about-us .about-info.about-info--new {
        padding-top: 72px;
        padding-bottom: 72px;
    }

    .page-about-us .about-page-section{
        background-color: #fffdfb; /* Crisp warm backdrop */
        position: relative;
        overflow: hidden;
    }

    .page-about-us .asymmetric-gallery-wrapper{
        position: relative;
        height: 520px;
        width: 100%;
    }

    /* Ambient light blur glows behind gallery */
    .page-about-us .gallery-bg-accent-1{
        position: absolute;
        top: 10%;
        left: 5%;
        width: 260px;
        height: 260px;
        background-color: var(--color-mint-wash, #f0f6df);
        border-radius: 50%;
        filter: blur(80px);
        opacity: 0.6;
        z-index: 1;
        pointer-events: none;
    }

    .page-about-us .gallery-bg-accent-2{
        position: absolute;
        bottom: 10%;
        right: 5%;
        width: 300px;
        height: 300px;
        background-color: var(--color-sky-wash, #dceaff);
        border-radius: 50%;
        filter: blur(90px);
        opacity: 0.5;
        z-index: 1;
        pointer-events: none;
    }

    .page-about-us .gallery-bg-accent-3{
        position: absolute;
        top: 40%;
        left: 45%;
        width: 180px;
        height: 180px;
        background-color: var(--surface-cream-wash, #fff6f0);
        border-radius: 50%;
        filter: blur(60px);
        opacity: 0.8;
        z-index: 1;
        pointer-events: none;
    }

    /* Elegant Editorial Frames */
    .page-about-us .gallery-frame{
        position: absolute;
        border-radius: var(--radius-images, 15px);
        border: 1px solid var(--color-stone, #d7d6d4);
        overflow: hidden;
        background-color: var(--surface-paper-canvas, #fefdfc);
        box-shadow: var(--shadow-subtle, 0px 1px 0px 0px rgba(37, 34, 30, 0.04));
        transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    }

    .page-about-us .gallery-frame img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    }

    /* Asymmetrical positions */
    .page-about-us .frame-main{
        top: 12%;
        left: 0;
        width: 62%;
        height: 68%;
        z-index: 2;
    }

    .page-about-us .frame-secondary{
        top: 0;
        right: 2%;
        width: 48%;
        height: 44%;
        z-index: 3;
    }

    .page-about-us .frame-tertiary{
        bottom: 2%;
        right: 18%;
        width: 36%;
        height: 36%;
        z-index: 4;
    }

    /* Hover Micro-interactions */
    .page-about-us .gallery-frame:hover{
        transform: translateY(-8px) scale(1.015);
        border-color: var(--color-ember-red, #e34432);
        box-shadow: var(--shadow-lg, 0px 14px 19px -9px rgba(37, 34, 30, 0.07), 0px 10px 48px 0px rgba(37, 34, 30, 0.18));
        z-index: 10 !important;
    }

    .page-about-us .gallery-frame:hover img{
        transform: scale(1.07);
    }

    /* Badges, Typography & Descriptive Elements */
    .page-about-us .modern-badge{
        display: inline-block;
        font-family: var(--font-inter), sans-serif;
        font-size: var(--text-caption, 12px);
        font-weight: var(--font-weight-semibold, 600);
        line-height: 1;
        color: var(--color-deep-ember, #cf3520);
        background-color: var(--surface-cream-wash, #fff6f0);
        border: 1px solid var(--color-stone, #d7d6d4);
        border-radius: var(--radius-badges, 8px);
        padding: 6px 12px;
        letter-spacing: 0.05em;
        text-transform: uppercase;
    }

    .page-about-us .modern-h2{
        font-family: var(--font-graphik), sans-serif;
        font-size: var(--text-heading, 38px);
        font-weight: var(--font-weight-bold, 700);
        line-height: var(--leading-heading, 1.28);
        letter-spacing: var(--tracking-heading, -0.19px);
        color: var(--color-ink, #25221e);
    }

    .page-about-us .about-description-text{
        font-family: var(--font-inter), sans-serif;
        font-size: var(--text-body, 16px);
        line-height: var(--leading-body, 1.5);
        color: var(--color-pencil, #6f6c69);
    }

    /* Core Pillars Cards style */
    .page-about-us .about-pillar-card{
        background-color: var(--surface-paper-canvas, #fefdfc);
        border: 1px solid var(--color-stone, #d7d6d4);
        border-radius: var(--radius-cards, 8px);
        padding: var(--spacing-20, 20px);
        transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .page-about-us .about-pillar-card:hover{
        transform: translateY(-4px);
        border-color: var(--color-ember-red, #e34432);
        box-shadow: var(--shadow-subtle, 0px 1px 0px 0px rgba(37, 34, 30, 0.04));
    }

    .page-about-us .pillar-icon-wrapper{
        width: 44px;
        height: 44px;
        border-radius: 6px;
        background-color: var(--surface-cream-wash, #fff6f0);
        border: 1px solid var(--color-stone, #d7d6d4);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--color-deep-ember, #cf3520);
        font-size: 18px;
        margin-bottom: var(--spacing-16, 16px);
        transition: all 0.3s ease;
    }

    .page-about-us .about-pillar-card:hover .pillar-icon-wrapper{
        background-color: var(--color-ember-red, #e34432);
        border-color: var(--color-ember-red, #e34432);
        color: #ffffff;
    }

    .page-about-us .pillar-title{
        font-family: var(--font-graphik), sans-serif;
        font-size: var(--text-body-lg, 18px);
        font-weight: var(--font-weight-bold, 700);
        color: var(--color-ink, #25221e);
        margin: 0 0 var(--spacing-8, 8px) 0;
    }

    .page-about-us .pillar-desc{
        font-family: var(--font-inter), sans-serif;
        font-size: var(--text-body-sm, 14px);
        line-height: var(--leading-body-sm, 1.5);
        color: var(--color-pencil, #6f6c69);
        margin: 0;
    }

    /* Responsive Adjustments */
    @media (max-width: 991px) {
        .page-about-us .asymmetric-gallery-wrapper{
            height: 420px;
            margin-bottom: var(--spacing-32, 32px);
        }
    }

    @media (max-width: 576px) {
        .page-about-us .asymmetric-gallery-wrapper{
            height: 320px;
        }
        .page-about-us .modern-h2{
            font-size: var(--text-subheading, 21px);
        }
    }

    /* ============================================================
       ABOUT US — REDESIGNED HERO + NUMBERED PILLARS
       ============================================================ */

    /* ---- Hero ---- */
    .page-about-us .abt-hero {
        position: relative;
        overflow: hidden;
        background: linear-gradient(180deg, #fff9f1 0%, #fefdfc 100%);
    }
    .page-about-us .abt-hero__blob {
        position: absolute;
        border-radius: 50%;
        filter: blur(90px);
        pointer-events: none;
        z-index: 0;
    }
    .page-about-us .abt-hero__blob--a {
        top: -140px;
        right: -100px;
        width: 360px;
        height: 360px;
        background: rgba(227, 68, 50, 0.18);
    }
    .page-about-us .abt-hero__blob--b {
        bottom: -160px;
        left: -100px;
        width: 400px;
        height: 400px;
        background: rgba(15, 102, 174, 0.12);
    }
    .page-about-us .abt-hero__inner {
        position: relative;
        z-index: 1;
    }
    .page-about-us .abt-hero__grid {
        display: grid;
        grid-template-columns: 1.15fr 1fr;
        gap: 64px;
        align-items: center;
    }

    /* Eyebrow with pulsing dot */
    .page-about-us .abt-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        font-family: var(--font-inter, 'Inter', sans-serif);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: var(--color-deep-ember, #cf3520);
        margin-bottom: 18px;
    }
    .page-about-us .abt-eyebrow__dot {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--color-ember-red, #e34432);
        box-shadow: 0 0 10px rgba(227, 68, 50, 0.55);
        animation: abtDotPulse 1.8s ease-in-out infinite;
    }
    @keyframes abtDotPulse {
        0%,100% { transform: scale(1); opacity: 1; }
        50%     { transform: scale(1.25); opacity: 0.75; }
    }

    /* Hero title/desc */
    .page-about-us .abt-hero__title {
        font-family: var(--font-graphik, sans-serif);
        font-size: 54px;
        line-height: 1.08;
        font-weight: 800;
        letter-spacing: -0.03em;
        color: var(--color-ink, #25221e);
        margin: 0 0 20px 0;
    }
    .page-about-us .abt-hero__desc {
        font-family: var(--font-inter, sans-serif);
        font-size: 16.5px;
        line-height: 1.65;
        color: var(--color-pencil, #6f6c69);
        margin: 0;
        max-width: 560px;
    }
    .page-about-us .abt-hero__rule {
        display: block;
        margin-top: 32px;
        width: 88px;
        height: 3px;
        border-radius: 3px;
        background: linear-gradient(90deg, var(--color-ember-red, #e34432), #f0a58c);
        box-shadow: 0 0 14px rgba(227, 68, 50, 0.35);
    }

    /* Video media panel — offset ember backing */
    .page-about-us .abt-hero__media {
        position: relative;
        justify-self: center;
        width: 100%;
        max-width: 380px;
        aspect-ratio: 9/16;
    }
    .page-about-us .abt-hero__frame-back {
        position: absolute;
        top: 26px;
        left: 26px;
        right: -26px;
        bottom: -26px;
        background: linear-gradient(135deg, var(--color-ember-red, #e34432) 0%, #f0a58c 100%);
        border-radius: 24px;
        z-index: 0;
        opacity: 0.95;
        box-shadow: 0 20px 50px rgba(227, 68, 50, 0.30);
    }
    .page-about-us .abt-hero__frame {
        position: relative;
        width: 100%;
        height: 100%;
        border-radius: 24px;
        overflow: hidden;
        background: #000;
        z-index: 1;
        box-shadow: 0 24px 60px rgba(37, 34, 30, 0.20);
        border: 1px solid rgba(255, 255, 255, 0.5);
    }
    .page-about-us .abt-hero__video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    .page-about-us .abt-hero__tag {
        position: absolute;
        top: 16px;
        left: 16px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 7px 12px 7px 10px;
        border-radius: 999px;
        background: rgba(22, 19, 15, 0.72);
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
        color: #ffffff;
        font-family: var(--font-inter, sans-serif);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        z-index: 2;
    }
    .page-about-us .abt-hero__tag-dot {
        display: inline-block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--color-ember-red, #e34432);
        box-shadow: 0 0 8px rgba(227, 68, 50, 0.8);
        animation: abtDotPulse 1.5s ease-in-out infinite;
    }

    /* ---- Pillars ---- */
    .page-about-us .abt-pillars {
        position: relative;
        background: #fefdfc;
        overflow: hidden;
    }
    .page-about-us .abt-pillars__grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 22px;
    }
    .page-about-us .abt-pillar {
        position: relative;
        background: var(--color-paper, #fefdfc);
        border: 1px solid var(--color-stone, #e7e6e3);
        border-radius: 20px;
        padding: 40px 26px 30px;
        overflow: hidden;
        text-align: left;
        transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
                    box-shadow 0.4s ease,
                    border-color 0.4s ease;
    }
    .page-about-us .abt-pillar:hover {
        transform: translateY(-6px);
        box-shadow: 0 18px 40px rgba(37, 34, 30, 0.08),
                    0 6px 12px rgba(37, 34, 30, 0.04);
    }

    /* Left accent bar */
    .page-about-us .abt-pillar__accent {
        position: absolute;
        left: 0;
        top: 40px;
        bottom: 40px;
        width: 4px;
        border-radius: 0 4px 4px 0;
        transition: top 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
                    bottom 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
                    width 0.4s ease;
    }
    .page-about-us .abt-pillar:hover .abt-pillar__accent {
        top: 0;
        bottom: 0;
        width: 6px;
    }

    /* Numbered watermark */
    .page-about-us .abt-pillar__number {
        position: absolute;
        top: 14px;
        right: 20px;
        font-family: var(--font-graphik, sans-serif);
        font-size: 60px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: -0.03em;
        color: rgba(37, 34, 30, 0.06);
        pointer-events: none;
        transition: color 0.4s ease, transform 0.4s ease;
    }
    .page-about-us .abt-pillar:hover .abt-pillar__number {
        transform: translateY(-2px);
    }

    /* Icon */
    .page-about-us .abt-pillar__icon {
        position: relative;
        width: 50px;
        height: 50px;
        border-radius: 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        line-height: 1;
        margin-bottom: 22px;
        transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                    background 0.4s ease,
                    color 0.4s ease;
    }
    .page-about-us .abt-pillar__icon i {
        color: inherit;
        font-size: inherit;
        line-height: 1;
    }
    .page-about-us .abt-pillar:hover .abt-pillar__icon {
        transform: rotate(-6deg) scale(1.06);
    }

    .page-about-us .abt-pillar__title {
        position: relative;
        font-family: var(--font-graphik, sans-serif);
        font-size: 19px;
        font-weight: 700;
        color: var(--color-ink, #25221e);
        margin: 0 0 10px 0;
        line-height: 1.3;
    }
    .page-about-us .abt-pillar__desc {
        position: relative;
        font-family: var(--font-inter, sans-serif);
        font-size: 14px;
        line-height: 1.6;
        color: var(--color-pencil, #6f6c69);
        margin: 0;
    }

    /* Tints — ember / forest / cobalt / bronze */
    .page-about-us .abt-pillar--tint-0 .abt-pillar__accent { background: var(--color-deep-ember, #cf3520); }
    .page-about-us .abt-pillar--tint-0 .abt-pillar__icon {
        background: rgba(227, 68, 50, 0.10);
        color: var(--color-deep-ember, #cf3520);
    }
    .page-about-us .abt-pillar--tint-0:hover { border-color: rgba(227, 68, 50, 0.35); }
    .page-about-us .abt-pillar--tint-0:hover .abt-pillar__number { color: rgba(227, 68, 50, 0.14); }
    .page-about-us .abt-pillar--tint-0:hover .abt-pillar__icon {
        background: var(--color-deep-ember, #cf3520);
        color: #ffffff;
    }

    .page-about-us .abt-pillar--tint-1 .abt-pillar__accent { background: var(--color-forest, #446c3d); }
    .page-about-us .abt-pillar--tint-1 .abt-pillar__icon {
        background: rgba(68, 108, 61, 0.10);
        color: var(--color-forest, #446c3d);
    }
    .page-about-us .abt-pillar--tint-1:hover { border-color: rgba(68, 108, 61, 0.35); }
    .page-about-us .abt-pillar--tint-1:hover .abt-pillar__number { color: rgba(68, 108, 61, 0.14); }
    .page-about-us .abt-pillar--tint-1:hover .abt-pillar__icon {
        background: var(--color-forest, #446c3d);
        color: #ffffff;
    }

    .page-about-us .abt-pillar--tint-2 .abt-pillar__accent { background: var(--color-cobalt-link, #0f66ae); }
    .page-about-us .abt-pillar--tint-2 .abt-pillar__icon {
        background: rgba(15, 102, 174, 0.10);
        color: var(--color-cobalt-link, #0f66ae);
    }
    .page-about-us .abt-pillar--tint-2:hover { border-color: rgba(15, 102, 174, 0.35); }
    .page-about-us .abt-pillar--tint-2:hover .abt-pillar__number { color: rgba(15, 102, 174, 0.14); }
    .page-about-us .abt-pillar--tint-2:hover .abt-pillar__icon {
        background: var(--color-cobalt-link, #0f66ae);
        color: #ffffff;
    }

    .page-about-us .abt-pillar--tint-3 .abt-pillar__accent { background: #8a5a2b; }
    .page-about-us .abt-pillar--tint-3 .abt-pillar__icon {
        background: rgba(138, 90, 43, 0.10);
        color: #8a5a2b;
    }
    .page-about-us .abt-pillar--tint-3:hover { border-color: rgba(138, 90, 43, 0.35); }
    .page-about-us .abt-pillar--tint-3:hover .abt-pillar__number { color: rgba(138, 90, 43, 0.14); }
    .page-about-us .abt-pillar--tint-3:hover .abt-pillar__icon {
        background: #8a5a2b;
        color: #ffffff;
    }

    /* Responsive */
    @media (max-width: 1199px) {
        .page-about-us .abt-pillars__grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }
    @media (max-width: 991px) {
        .page-about-us .abt-hero__grid {
            grid-template-columns: 1fr;
            gap: 48px;
        }
        .page-about-us .abt-hero__title { font-size: 40px; }
        .page-about-us .abt-hero__media {
            max-width: 320px;
            margin: 0 auto;
        }
    }
    @media (max-width: 575px) {
        .page-about-us .abt-hero__title { font-size: 32px; }
        .page-about-us .abt-hero__desc { font-size: 15px; }
        .page-about-us .abt-pillars__grid { grid-template-columns: 1fr; }
        .page-about-us .abt-pillar { padding: 34px 22px 26px; }
        .page-about-us .abt-hero__frame-back {
            top: 20px;
            left: 20px;
            right: -20px;
            bottom: -20px;
        }
    }

    /* ============================================================
       WHAT YOU'LL LEARN — numbered horizontal list
       ============================================================ */
    .page-about-us .abt-learn {
        position: relative;
        background: linear-gradient(180deg, #fff6ee 0%, #fefdfc 100%);
        overflow: hidden;
    }
    .page-about-us .abt-learn__blob {
        position: absolute;
        border-radius: 50%;
        filter: blur(90px);
        pointer-events: none;
        z-index: 0;
    }
    .page-about-us .abt-learn__blob--a {
        top: -160px;
        left: -120px;
        width: 380px;
        height: 380px;
        background: rgba(227, 68, 50, 0.14);
    }
    .page-about-us .abt-learn__inner {
        position: relative;
        z-index: 1;
    }
    .page-about-us .abt-learn__title {
        font-family: var(--font-graphik, sans-serif);
        font-size: 40px;
        font-weight: 800;
        line-height: 1.12;
        letter-spacing: -0.02em;
        color: var(--color-ink, #25221e);
        margin: 0;
    }
    .page-about-us .abt-learn__lede {
        font-family: var(--font-inter, sans-serif);
        font-size: 15.5px;
        line-height: 1.6;
        color: var(--color-pencil, #6f6c69);
        max-width: 640px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Ordered list — reset + gap */
    .page-about-us .abt-learn__list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 18px;
    }
    .page-about-us .abt-learn__item {
        position: relative;
        display: grid;
        grid-template-columns: auto 1fr auto;
        gap: 24px;
        align-items: center;
        padding: 26px 28px;
        background: var(--color-paper, #fefdfc);
        border: 1px solid var(--color-stone, #e7e6e3);
        border-radius: 20px;
        transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
                    box-shadow 0.4s ease,
                    border-color 0.4s ease;
    }
    .page-about-us .abt-learn__item:hover {
        transform: translateY(-4px);
        border-color: rgba(227, 68, 50, 0.35);
        box-shadow: 0 16px 40px rgba(37, 34, 30, 0.08),
                    0 4px 10px rgba(37, 34, 30, 0.04);
    }
    .page-about-us .abt-learn__num {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-family: var(--font-graphik, sans-serif);
        font-size: 20px;
        font-weight: 800;
        letter-spacing: -0.02em;
        color: var(--color-deep-ember, #cf3520);
        background: rgba(227, 68, 50, 0.10);
        border: 1px solid rgba(227, 68, 50, 0.22);
        width: 56px;
        height: 56px;
        border-radius: 16px;
        transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                    background 0.4s ease,
                    color 0.4s ease;
    }
    .page-about-us .abt-learn__item:hover .abt-learn__num {
        transform: rotate(-6deg) scale(1.05);
        background: var(--color-ember-red, #e34432);
        color: #ffffff;
        border-color: var(--color-ember-red, #e34432);
    }
    .page-about-us .abt-learn__body { min-width: 0; }
    .page-about-us .abt-learn__topic {
        font-family: var(--font-graphik, sans-serif);
        font-size: 19px;
        font-weight: 700;
        color: var(--color-ink, #25221e);
        margin: 0 0 8px 0;
        line-height: 1.3;
    }
    .page-about-us .abt-learn__desc {
        font-family: var(--font-inter, sans-serif);
        font-size: 14.5px;
        line-height: 1.6;
        color: var(--color-pencil, #6f6c69);
        margin: 0;
    }
    .page-about-us .abt-learn__spark {
        display: inline-block;
        width: 6px;
        height: 40px;
        border-radius: 3px;
        background: linear-gradient(180deg, var(--color-ember-red, #e34432), #f0a58c);
        opacity: 0.25;
        transition: opacity 0.4s ease, height 0.4s ease;
    }
    .page-about-us .abt-learn__item:hover .abt-learn__spark {
        opacity: 1;
        height: 56px;
    }

    /* ============================================================
       WHY CHOOSE — 2-col split (heading + checklist)
       ============================================================ */
    .page-about-us .abt-why {
        position: relative;
        background: #fefdfc;
        overflow: hidden;
    }
    .page-about-us .abt-why__blob {
        position: absolute;
        border-radius: 50%;
        filter: blur(90px);
        pointer-events: none;
        z-index: 0;
    }
    .page-about-us .abt-why__blob--a {
        top: -140px;
        right: -120px;
        width: 380px;
        height: 380px;
        background: rgba(68, 108, 61, 0.10);
    }
    .page-about-us .abt-why__blob--b {
        bottom: -160px;
        left: -100px;
        width: 340px;
        height: 340px;
        background: rgba(15, 102, 174, 0.10);
    }
    .page-about-us .abt-why__inner {
        position: relative;
        z-index: 1;
    }
    .page-about-us .abt-why__grid {
        display: grid;
        grid-template-columns: 1fr 1.05fr;
        gap: 64px;
        align-items: center;
    }
    .page-about-us .abt-why__title {
        font-family: var(--font-graphik, sans-serif);
        font-size: 44px;
        font-weight: 800;
        line-height: 1.1;
        letter-spacing: -0.02em;
        color: var(--color-ink, #25221e);
        margin: 0;
    }
    .page-about-us .abt-why__lede {
        font-family: var(--font-inter, sans-serif);
        font-size: 16px;
        line-height: 1.6;
        color: var(--color-pencil, #6f6c69);
        margin: 0;
        max-width: 480px;
    }
    .page-about-us .abt-why__rule {
        display: block;
        margin-top: 28px;
        width: 72px;
        height: 3px;
        border-radius: 3px;
        background: linear-gradient(90deg, var(--color-ember-red, #e34432), #f0a58c);
        box-shadow: 0 0 14px rgba(227, 68, 50, 0.35);
    }

    /* Features grid */
    .page-about-us .abt-why__features {
        list-style: none;
        padding: 0;
        margin: 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px 16px;
    }
    .page-about-us .abt-why__feature {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 16px 18px;
        background: var(--color-paper, #fefdfc);
        border: 1px solid var(--color-stone, #e7e6e3);
        border-radius: 14px;
        transition: transform 0.35s cubic-bezier(0.165, 0.84, 0.44, 1),
                    border-color 0.35s ease,
                    box-shadow 0.35s ease;
    }
    .page-about-us .abt-why__feature:hover {
        transform: translateY(-3px);
        border-color: rgba(227, 68, 50, 0.35);
        box-shadow: 0 10px 24px rgba(37, 34, 30, 0.06);
    }
    .page-about-us .abt-why__check {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--color-ember-red, #e34432), var(--color-deep-ember, #cf3520));
        color: #ffffff;
        font-size: 11px;
        line-height: 1;
        box-shadow: 0 4px 10px rgba(227, 68, 50, 0.30);
    }
    .page-about-us .abt-why__label {
        font-family: var(--font-inter, sans-serif);
        font-size: 14.5px;
        font-weight: 600;
        line-height: 1.45;
        color: var(--color-ink, #25221e);
    }

    /* Responsive — learn + why */
    @media (max-width: 991px) {
        .page-about-us .abt-learn__title { font-size: 32px; }
        .page-about-us .abt-why__grid {
            grid-template-columns: 1fr;
            gap: 40px;
        }
        .page-about-us .abt-why__title { font-size: 34px; }
        .page-about-us .abt-why__lede { max-width: none; }
    }
    @media (max-width: 575px) {
        .page-about-us .abt-learn__title { font-size: 26px; }
        .page-about-us .abt-learn__topic { font-size: 17px; }
        .page-about-us .abt-learn__desc { font-size: 13.5px; }
        .page-about-us .abt-learn__item {
            grid-template-columns: auto 1fr;
            padding: 22px 20px;
            gap: 16px;
        }
        .page-about-us .abt-learn__spark { display: none; }
        .page-about-us .abt-learn__num {
            width: 46px;
            height: 46px;
            font-size: 17px;
            border-radius: 14px;
        }
        .page-about-us .abt-why__title { font-size: 28px; }
        .page-about-us .abt-why__features { grid-template-columns: 1fr; }
    }

/* ===================== page-cart ===================== */
    /* =========================================
       CART PAGE REDESIGN — Warm Editorial Theme
       ========================================= */
    .page-cart .cart-redesign{
        position: relative;
        overflow: hidden;
        background-color: var(--surface-paper-canvas, #fefdfc);
        padding: var(--spacing-48, 48px) 0 var(--spacing-80, 80px);
        font-family: var(--font-inter, sans-serif);
        min-height: 60vh;
    }
    
    /* Background Pattern & Glow Blobs */
    .page-cart .cart-pattern{
        position: absolute;
        inset: 0;
        background-image: radial-gradient(rgba(37, 34, 30, 0.03) 1.2px, transparent 1.2px);
        background-size: 24px 24px;
        pointer-events: none;
        z-index: 0;
    }
    .page-cart .cart-glow{
        position: absolute;
        border-radius: 50%;
        filter: blur(120px);
        pointer-events: none;
        z-index: 0;
        opacity: 0.65;
        mix-blend-mode: multiply;
    }
    .page-cart .cart-glow-mint{ 
        width: 450px; 
        height: 450px; 
        background: radial-gradient(circle, var(--color-mint-wash, #f0f6df) 0%, rgba(240, 246, 223, 0.2) 70%, transparent 100%); 
        top: -150px; 
        left: -100px; 
        animation: page-cart-cartRedesignDrift 22s ease-in-out infinite; 
    }
    .page-cart .cart-glow-sky{ 
        width: 400px; 
        height: 400px; 
        background: radial-gradient(circle, var(--color-sky-wash, #dceaff) 0%, rgba(220, 234, 255, 0.2) 70%, transparent 100%); 
        bottom: 8%; 
        right: -100px; 
        animation: page-cart-cartRedesignDrift 28s ease-in-out infinite reverse; 
    }
    @keyframes page-cart-cartRedesignDrift { 
        0%, 100% { transform: translate(0, 0) scale(1); } 
        50% { transform: translate(40px, -30px) scale(1.08); } 
    }
    
    .page-cart .cart-redesign .container{ 
        position: relative; 
        z-index: 1; 
    }

    /* ---- ITEMS CONTAINER & CARDS ---- */
    .page-cart .cart-items-section{
        background: var(--color-paper, #fefdfc);
        border: 1px solid var(--color-stone, #d7d6d4);
        border-radius: var(--radius-xl, 15px);
        padding: var(--spacing-32, 32px);
        box-shadow: 0 4px 20px rgba(37, 34, 30, 0.02);
    }
    .page-cart .cart-section-header{
        display: flex; 
        align-items: center; 
        justify-content: space-between;
        padding-bottom: var(--spacing-20, 20px); 
        margin-bottom: var(--spacing-24, 24px);
        border-bottom: 1px solid var(--color-stone, #d7d6d4);
    }
    .page-cart .cart-section-title{
        display: flex; 
        align-items: center; 
        gap: 12px;
        font-family: var(--font-graphik, sans-serif);
        font-size: 20px; 
        font-weight: 700;
        color: var(--color-ink, #25221e); 
        margin: 0;
    }
    .page-cart .cart-section-title i{ 
        color: var(--color-ember-red, #e34432); 
        font-size: 20px; 
    }
    .page-cart .cart-section-count{
        background: #f0f6df; 
        color: var(--color-deep-ember, #cf3520);
        font-size: 13px; 
        font-weight: 700;
        padding: 4px 12px; 
        border-radius: 999px;
    }

    /* Modern List of Cart Items */
    .page-cart .cart-items-list{
        display: flex;
        flex-direction: column;
        gap: var(--spacing-16, 16px);
    }

    /* Horizontal Cart Card Redesign */
    .page-cart .cart-item-card{
        display: flex;
        align-items: center;
        gap: var(--spacing-20, 20px);
        background: var(--color-paper, #fefdfc);
        border: 1px solid var(--color-stone, #d7d6d4);
        border-radius: var(--radius-lg, 8px);
        padding: var(--spacing-16, 16px);
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        position: relative;
    }
    .page-cart .cart-item-card:hover{
        transform: translateY(-2px);
        box-shadow: 0 10px 30px rgba(37, 34, 30, 0.06);
        border-color: rgba(227, 68, 50, 0.25);
    }
    
    /* Card media/thumbnail */
    .page-cart .cart-item-card__media{
        position: relative;
        width: 140px;
        height: 84px;
        flex-shrink: 0;
        border-radius: 6px;
        overflow: hidden;
        background: linear-gradient(135deg, var(--color-cream, #fff6f0), var(--color-mint-wash, #f0f6df));
        border: 1px solid rgba(0, 0, 0, 0.05);
    }
    .page-cart .cart-item-card__media img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
    }
    .page-cart .cart-item-card:hover .cart-item-card__media img{
        transform: scale(1.05);
    }
    
    /* Badges positioned on images */
    .page-cart .cart-item-card__badge{
        position: absolute;
        bottom: 6px;
        left: 6px;
        z-index: 2;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 3px 8px;
        border-radius: var(--radius-sm, 2.5px);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.02em;
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        text-transform: uppercase;
    }
    .page-cart .cart-item-card__badge--course{
        background: rgba(254, 253, 252, 0.95);
        color: var(--color-forest, #446c3d);
        border: 1px solid var(--color-stone, #d7d6d4);
    }
    .page-cart .cart-item-card__badge--topup{
        background: rgba(254, 253, 252, 0.95);
        color: var(--color-deep-ember, #cf3520);
        border: 1px solid var(--color-stone, #d7d6d4);
    }

    /* Credits Visual (in place of top-up images) */
    .page-cart .cart-item-card__credits-visual{
        width: 140px;
        height: 84px;
        flex-shrink: 0;
        border-radius: 6px;
        background: linear-gradient(135deg, #f0f6df 0%, rgba(255, 160, 32, 0.08) 100%);
        border: 1px solid rgba(227, 68, 50, 0.15);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: var(--color-ember-red, #e34432);
        gap: 2px;
        box-shadow: inset 0 2px 6px rgba(227, 68, 50, 0.02);
    }
    .page-cart .cart-item-card__credits-visual i{
        font-size: 20px;
        animation: page-cart-ccCoinPulse 2s ease-in-out infinite;
    }
    .page-cart .cart-item-card__credits-amount{
        font-family: var(--font-graphik, sans-serif);
        font-size: 15px;
        font-weight: 800;
        color: var(--color-ink, #25221e);
        line-height: 1.1;
        margin-top: 2px;
    }
    .page-cart .cart-item-card__credits-unit{
        font-size: 9px;
        font-weight: 700;
        color: var(--color-deep-ember, #cf3520);
        letter-spacing: 0.05em;
    }
    
    @keyframes page-cart-ccCoinPulse {
        0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 transparent); }
        50% { transform: scale(1.1); filter: drop-shadow(0 2px 4px rgba(227, 68, 50, 0.2)); }
    }

    /* Details styling */
    .page-cart .cart-item-card__details{
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        gap: 6px;
        min-width: 0; /* Prevents overflow with flex */
    }
    .page-cart .cart-item-card__title{
        font-family: var(--font-graphik, sans-serif);
        font-size: 16px;
        font-weight: 600;
        line-height: 1.35;
        color: var(--color-ink, #25221e);
        text-decoration: none;
        transition: color 0.2s ease;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .page-cart .cart-item-card__title:hover{
        color: var(--color-deep-ember, #cf3520);
        text-decoration: none;
    }
    .page-cart .cart-item-card__meta{
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 12px;
        color: var(--color-pencil, #6f6c69);
    }
    .page-cart .cart-item-card__type{
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }
    .page-cart .cart-item-card__type i{
        font-size: 11px;
    }

    /* Price alignment */
    .page-cart .cart-item-card__price{
        text-align: right;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-end;
        padding-left: var(--spacing-16, 16px);
        border-left: 1px solid var(--color-stone, #d7d6d4);
        min-width: 130px;
    }
    .page-cart .cart-item-card__price-label{
        font-size: 11px;
        color: var(--color-pencil, #6f6c69);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 2px;
    }
    .page-cart .cart-item-card__price-value{
        font-family: var(--font-graphik, sans-serif);
        font-size: 18px;
        font-weight: 700;
        color: var(--color-ink, #25221e);
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }
    .page-cart .cart-item-card__price-value i{
        color: var(--color-ember-red, #e34432);
        font-size: 14px;
        margin-right: 2px;
    }
    .page-cart .cart-item-card__price-value .price-creds{
        display: flex;
        align-items: baseline;
        gap: 3px;
        font-weight: 700;
        color: var(--color-ink, #25221e);
    }
    .page-cart .cart-item-card__price-value .price-unit{
        font-size: 11px;
        font-weight: 700;
        color: var(--color-pencil, #6f6c69);
    }
    .page-cart .cart-item-card__price-value .price-main{
        font-size: 17px;
        color: var(--color-ink, #25221e);
        font-weight: 700;
    }

    /* Action (Remove button) */
    .page-cart .cart-item-card__action{
        flex-shrink: 0;
    }
    .page-cart .cart-item-card__remove{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: transparent;
        color: var(--color-graphite, #94928f);
        font-size: 14px;
        transition: all 0.2s ease;
        border: 1px solid transparent;
        text-decoration: none;
    }
    .page-cart .cart-item-card__remove:hover{
        background: #f0f6df;
        border-color: rgba(227, 68, 50, 0.1);
        color: var(--color-ember-red, #e34432);
        transform: scale(1.08);
        text-decoration: none;
    }

    .page-cart .cart-continue-link{
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-top: 24px;
        font-family: var(--font-inter), sans-serif;
        font-size: 14px;
        font-weight: 600;
        color: var(--color-deep-ember, #cf3520);
        text-decoration: none;
        transition: gap 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s ease;
    }
    .page-cart .cart-continue-link:hover{
        gap: 12px;
        color: var(--color-deep-ember, #cf3520);
        text-decoration: none;
        transform: translateX(-2px);
    }

    /* ---- STICKY ORDER SUMMARY SIDEBAR ---- */
    .page-cart .cart-sidebar{
        position: -webkit-sticky;
        position: sticky;
        top: 110px;
        background: linear-gradient(180deg, var(--color-paper, #fefdfc) 0%, var(--surface-cream-wash, #fff6f0) 100%);
        border: 1px solid var(--color-stone, #d7d6d4);
        border-radius: var(--radius-xl, 15px);
        padding: var(--spacing-28, 28px);
        box-shadow: 0 10px 30px rgba(37, 34, 30, 0.04);
        animation: page-cart-cartFadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
    }
    .page-cart .cart-sidebar__header{
        border-bottom: 1px solid var(--color-stone, #d7d6d4);
        padding-bottom: var(--spacing-16, 16px);
        margin-bottom: var(--spacing-20, 20px);
    }
    .page-cart .cart-sidebar__title{
        display: flex;
        align-items: center;
        gap: 8px;
        font-family: var(--font-graphik, sans-serif);
        font-size: 18px;
        font-weight: 700;
        color: var(--color-ink, #25221e);
        margin: 0;
    }
    .page-cart .cart-sidebar__title i{
        color: var(--color-ember-red, #e34432);
        font-size: 16px;
    }
    
    .page-cart .cart-sidebar__rows{
        display: flex;
        flex-direction: column;
        gap: var(--spacing-12, 12px);
        margin-bottom: var(--spacing-24, 24px);
    }
    .page-cart .cart-sidebar__row{
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
    }
    .page-cart .cart-sidebar__row-label{
        color: var(--color-pencil, #6f6c69);
    }
    .page-cart .cart-sidebar__row-value{
        font-weight: 600;
        color: var(--color-ink, #25221e);
    }
    
    /* Total cost indicator */
    .page-cart .cart-sidebar__row--total{
        padding-top: var(--spacing-16, 16px);
        border-top: 1px solid var(--color-stone, #d7d6d4);
        align-items: baseline;
    }
    .page-cart .cart-sidebar__row--total .cart-sidebar__row-label{
        font-size: 15px;
        font-weight: 700;
        color: var(--color-ink, #25221e);
    }
    .page-cart .cart-sidebar__row--total .cart-sidebar__row-value{
        font-family: var(--font-graphik, sans-serif);
        font-size: 24px;
        font-weight: 800;
        color: var(--color-ember-red, #e34432);
        display: flex;
        align-items: baseline;
        gap: 4px;
    }
    .page-cart .cart-sidebar__row--total .cart-sidebar__row-value i{
        font-size: 16px;
    }
    .page-cart .cart-sidebar__row--total .total-unit{
        font-size: 12px;
        font-weight: 700;
        color: var(--color-pencil, #6f6c69);
    }

    /* Reusable Cart Action Button */
    .page-cart .cart-action-btn{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 13px 24px;
        border-radius: var(--radius-buttons, 8px);
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
        cursor: pointer;
        border: none;
        transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
        text-align: center;
    }
    .page-cart .cart-action-btn:hover{
        text-decoration: none;
    }
    .page-cart .cart-action-btn--primary{
        background: var(--color-ember-red, #e34432);
        color: var(--color-paper, #fefdfc);
        box-shadow: 0 4px 14px rgba(227, 68, 50, 0.25);
    }
    .page-cart .cart-action-btn--primary:hover{
        background: var(--color-deep-ember, #cf3520);
        color: var(--color-paper, #fefdfc);
        transform: translateY(-2px);
        box-shadow: 0 6px 18px rgba(227, 68, 50, 0.35);
    }
    .page-cart .cart-action-btn--checkout{
        background: var(--color-ember-red, #e34432);
        color: var(--color-paper, #fefdfc);
        box-shadow: 0 4px 14px rgba(227, 68, 50, 0.2);
    }
    .page-cart .cart-action-btn--checkout:hover{
        background: var(--color-deep-ember, #cf3520);
        color: var(--color-paper, #fefdfc);
        transform: translateY(-2px);
        box-shadow: 0 6px 18px rgba(227, 68, 50, 0.3);
    }
    .page-cart .cart-action-btn--checkout i{
        transition: transform 0.25s ease;
    }
    .page-cart .cart-action-btn--checkout:hover i{
        transform: translateX(4px);
    }
    .page-cart .cart-action-btn--block{
        display: flex;
        width: 100%;
        margin-bottom: var(--spacing-12, 12px);
    }
    .page-cart .cart-action-btn--block:last-child{
        margin-bottom: 0;
    }

    /* Trust section */
    .page-cart .cart-sidebar__trust{
        list-style: none;
        margin: var(--spacing-24, 24px) 0 0;
        padding: var(--spacing-16, 16px);
        display: flex;
        flex-direction: column;
        gap: var(--spacing-12, 12px);
        background-color: rgba(37, 34, 30, 0.02);
        border: 1px solid var(--color-stone, #d7d6d4);
        border-radius: var(--radius-lg, 8px);
    }
    .page-cart .cart-sidebar__trust li{
        display: flex;
        align-items: center;
        gap: var(--spacing-12, 12px);
        font-size: 13px;
        font-weight: 600;
        color: var(--color-pencil, #6f6c69);
    }
    .page-cart .cart-sidebar__trust li:not(:last-child){
        padding-bottom: var(--spacing-8, 8px);
        border-bottom: 1px solid rgba(37, 34, 30, 0.05);
    }
    .page-cart .cart-sidebar__trust-icon-wrap{
        width: 28px;
        height: 28px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    .page-cart .cart-sidebar__trust-icon-wrap--security{
        background-color: rgba(15, 102, 174, 0.08);
        color: var(--color-cobalt-link, #0f66ae);
        border: 1px solid rgba(15, 102, 174, 0.12);
    }
    .page-cart .cart-sidebar__trust-icon-wrap--access{
        background-color: rgba(68, 108, 61, 0.08);
        color: var(--color-forest, #446c3d);
        border: 1px solid rgba(68, 108, 61, 0.12);
    }
    .page-cart .cart-sidebar__trust i{
        font-size: 12px;
    }
    
    .page-cart .cart-sidebar__pay{
        margin-top: var(--spacing-20, 20px);
        padding-top: var(--spacing-16, 16px);
        border-top: 1px solid var(--color-stone, #d7d6d4);
        text-align: center;
    }
    .page-cart .cart-sidebar__pay img{
        height: 24px;
        width: auto;
        opacity: 0.85;
    }

    /* Empty State for Summary */
    .page-cart .cart-sidebar__empty{
        text-align: center;
        padding: var(--spacing-24, 24px) var(--spacing-16, 16px);
        background: rgba(37, 34, 30, 0.02);
        border: 1px dashed var(--color-stone, #d7d6d4);
        border-radius: var(--radius-lg, 8px);
    }
    .page-cart .cart-sidebar__empty i{
        font-size: 24px;
        color: var(--color-graphite, #94928f);
        margin-bottom: 8px;
        display: block;
    }
    .page-cart .cart-sidebar__empty p{
        font-size: 13px;
        color: var(--color-pencil, #6f6c69);
        margin: 0;
        line-height: 1.4;
    }

    /* ---- EMPTY STATE ---- */
    .page-cart .cart-empty-state{
        text-align: center;
        padding: var(--spacing-48, 48px) var(--spacing-24, 24px);
    }
    .page-cart .cart-empty-state__icon-wrap{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: var(--color-cream, #fff6f0);
        border: 1px solid var(--color-stone, #d7d6d4);
        color: var(--color-graphite, #94928f);
        font-size: 32px;
        margin-bottom: var(--spacing-20, 20px);
        box-shadow: inset 0 2px 8px rgba(0,0,0,0.02);
    }
    .page-cart .cart-empty-state__title{
        font-family: var(--font-graphik, sans-serif);
        font-size: 22px;
        font-weight: 700;
        color: var(--color-ink, #25221e);
        margin: 0 0 var(--spacing-20, 20px);
    }

    /* ---- Animations ---- */
    @keyframes page-cart-cartFadeUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    .page-cart .cart-items-section{
        animation: page-cart-cartFadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
    }

    /* ---- Responsive Adaptations ---- */
    @media (max-width: 991px) {
        .page-cart .cart-sidebar{
            position: static;
            top: auto;
            margin-top: var(--spacing-16, 16px);
        }
    }
    @media (max-width: 767px) {
        .page-cart .cart-item-card{
            flex-direction: column;
            align-items: stretch;
            gap: var(--spacing-16, 16px);
        }
        .page-cart .cart-item-card__media{
            width: 100%;
            height: 180px;
        }
        .page-cart .cart-item-card__credits-visual{
            width: 100%;
            height: 120px;
        }
        .page-cart .cart-item-card__price{
            border-left: none;
            border-top: 1px solid var(--color-stone, #d7d6d4);
            padding-left: 0;
            padding-top: var(--spacing-12, 12px);
            align-items: flex-start;
            text-align: left;
            min-width: 0;
        }
        .page-cart .cart-item-card__price-value{
            align-items: flex-start;
            flex-direction: row;
            gap: 8px;
        }
        .page-cart .cart-item-card__remove{
            position: absolute;
            top: 12px;
            right: 12px;
            background: rgba(255, 255, 255, 0.9);
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
    }
    @media (max-width: 575px) {
        .page-cart .cart-redesign{
            padding: var(--spacing-32, 32px) 0 var(--spacing-64, 64px);
        }
        .page-cart .cart-items-section{
            padding: var(--spacing-20, 20px);
        }
    }
    @media (prefers-reduced-motion: reduce) {
        .page-cart .cart-glow, .page-cart .cart-items-section, .page-cart .cart-sidebar{
            animation: none !important;
        }
    }

/* ===================== page-checkout ===================== */
    /* =========================================
       CHECKOUT — Warm Editorial Redesign
       ========================================= */
    .page-checkout .kv-checkout-section{
        position: relative;
        overflow: hidden;
        background-color: var(--surface-paper-canvas, #fefdfc);
        padding: var(--spacing-48, 48px) 0 var(--spacing-80, 80px);
        font-family: var(--font-inter, sans-serif);
        min-height: 70vh;
    }
    
    /* Background Pattern & Glow Blobs */
    .page-checkout .kv-pattern{
        position: absolute;
        inset: 0;
        background-image: radial-gradient(rgba(37, 34, 30, 0.03) 1.2px, transparent 1.2px);
        background-size: 24px 24px;
        pointer-events: none;
        z-index: 0;
    }
    .page-checkout .kv-glow{
        position: absolute;
        border-radius: 50%;
        filter: blur(120px);
        pointer-events: none;
        z-index: 0;
        opacity: 0.65;
        mix-blend-mode: multiply;
    }
    .page-checkout .kv-glow-mint{ 
        width: 450px; 
        height: 450px; 
        background: radial-gradient(circle, var(--color-mint-wash, #f0f6df) 0%, rgba(240, 246, 223, 0.2) 70%, transparent 100%); 
        top: -150px; 
        left: -100px; 
        animation: page-checkout-kvGlowFloat 22s ease-in-out infinite; 
    }
    .page-checkout .kv-glow-sky{ 
        width: 400px; 
        height: 400px; 
        background: radial-gradient(circle, var(--color-sky-wash, #dceaff) 0%, rgba(220, 234, 255, 0.2) 70%, transparent 100%); 
        bottom: 8%; 
        right: -100px; 
        animation: page-checkout-kvGlowFloat 28s ease-in-out infinite reverse; 
    }
    
    .page-checkout .kv-checkout-section .container{ 
        position: relative; 
        z-index: 1; 
    }

    .page-checkout .kv-checkout-grid{
        display: grid;
        grid-template-columns: 1.4fr 380px;
        gap: var(--spacing-32, 32px);
        align-items: start;
    }

    /* ---- PROGRESS STEPPER ---- */
    .page-checkout .kv-stepper{
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0;
        max-width: 800px;
        margin: 0 auto var(--spacing-48, 48px);
        padding: var(--spacing-16, 16px) var(--spacing-32, 32px);
        background: var(--color-paper, #fefdfc);
        border: 1px solid var(--color-stone, #d7d6d4);
        border-radius: var(--radius-xl, 15px);
        box-shadow: 0 4px 20px rgba(37, 34, 30, 0.02);
        animation: page-checkout-kvFadeDown 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
    }
    .page-checkout .kv-stepper__step{
        display: flex;
        align-items: center;
        gap: 10px;
        flex-shrink: 0;
    }
    .page-checkout .kv-stepper__dot{
        width: 40px;
        height: 40px;
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: var(--color-cream, #fff6f0);
        border: 1px solid var(--color-stone, #d7d6d4);
        color: var(--color-ember-red, #e34432);
        font-size: 14px;
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
    }
    .page-checkout .kv-stepper__step:hover .kv-stepper__dot{
        background: var(--color-ember-red, #e34432);
        border-color: var(--color-ember-red, #e34432);
        color: var(--color-paper, #fefdfc);
        transform: translateY(-2px);
        box-shadow: 0 6px 14px rgba(227, 68, 50, 0.25);
    }
    .page-checkout .kv-stepper__label{
        font-family: var(--font-inter), sans-serif;
        font-size: 13px;
        font-weight: 600;
        color: var(--color-ink, #25221e);
        white-space: nowrap;
    }
    .page-checkout .kv-stepper__bar{
        flex: 1;
        height: 2px;
        min-width: 20px;
        margin: 0 var(--spacing-16, 16px);
        background: linear-gradient(90deg, var(--color-ember-red, #e34432), var(--color-stone, #d7d6d4));
        border-radius: 2px;
        opacity: 0.6;
    }

    /* ---- CARDS ---- */
    .page-checkout .kv-checkout-card{
        background: var(--color-paper, #fefdfc);
        border: 1px solid var(--color-stone, #d7d6d4);
        border-radius: var(--radius-xl, 15px);
        padding: var(--spacing-28, 28px);
        margin-bottom: var(--spacing-24, 24px);
        box-shadow: 0 4px 20px rgba(37, 34, 30, 0.02);
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .page-checkout .kv-checkout-card:hover{
        border-color: rgba(227, 68, 50, 0.25);
        box-shadow: 0 12px 36px rgba(37, 34, 30, 0.06);
    }

    .page-checkout .kv-checkout-card-title{
        display: flex;
        align-items: center;
        gap: 12px;
        font-family: var(--font-graphik, sans-serif);
        font-size: 19px;
        font-weight: 700;
        color: var(--color-ink, #25221e);
        margin: 0 0 var(--spacing-24, 24px) 0;
        padding-bottom: var(--spacing-12, 12px);
        border-bottom: 1px solid var(--color-stone, #d7d6d4);
    }
    .page-checkout .kv-checkout-card-title > i{ 
        color: var(--color-ember-red, #e34432); 
        font-size: 18px; 
    }
    
    /* Stepper digit inside title */
    .page-checkout .kv-step{
        flex-shrink: 0;
        width: 26px;
        height: 26px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: var(--color-ember-red, #e34432);
        color: var(--color-paper, #fefdfc);
        font-family: var(--font-inter), sans-serif;
        font-size: 12px;
        font-weight: 700;
        box-shadow: 0 3px 8px rgba(227, 68, 50, 0.25);
        transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .page-checkout .kv-checkout-card:hover .kv-step{ 
        transform: scale(1.1) rotate(-6deg); 
    }

    /* ---- FORM INPUTS ---- */
    .page-checkout .kv-checkout-form-grid{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-16, 16px);
    }
    .page-checkout .kv-checkout-form-group{ 
        display: flex; 
        flex-direction: column; 
        position: relative;
    }
    .page-checkout .kv-checkout-form-group-full{ 
        grid-column: 1 / -1; 
    }

    .page-checkout .kv-label{
        font-family: var(--font-inter), sans-serif;
        font-size: 12px;
        font-weight: 700;
        color: var(--color-ink, #25221e);
        margin-bottom: 6px;
        display: block;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        transition: color 0.2s ease;
    }
    .page-checkout .kv-checkout-form-group:focus-within > .kv-label{ 
        color: var(--color-deep-ember, #cf3520); 
    }

    .page-checkout .kv-input,
    .page-checkout .kv-select,
    .page-checkout .kv-textarea{
        width: 100%;
        padding: 12px 15px;
        background: var(--surface-paper-canvas, #fefdfc);
        border: 1.5px solid var(--color-stone, #d7d6d4);
        border-radius: var(--radius-lg, 8px);
        color: var(--color-ink, #25221e);
        font-family: var(--font-inter), sans-serif;
        font-size: 14px;
        transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
        will-change: transform;
    }
    .page-checkout .kv-input:focus,
    .page-checkout .kv-select:focus,
    .page-checkout .kv-textarea:focus{
        outline: none;
        background: #fff;
        border-color: var(--color-ember-red, #e34432);
        box-shadow: 0 0 0 4px rgba(227, 68, 50, 0.12);
        transform: translateY(-1px);
    }
    .page-checkout .kv-input::placeholder{ color: var(--color-graphite, #94928f); }
    .page-checkout .kv-select option{ color: var(--color-ink, #25221e); }
    .page-checkout .kv-textarea{ resize: vertical; min-height: 120px; }

    /* Expiry divider and layout */
    .page-checkout .kv-card-expiry{ 
        display: flex; 
        gap: 10px; 
        align-items: center; 
    }
    .page-checkout .kv-card-expiry .kv-input{ 
        flex: 1; 
    }
    .page-checkout .kv-card-separator{ 
        color: var(--color-graphite, #94928f); 
        font-weight: 700; 
    }

    /* Secure Banner in Form */
    .page-checkout .kv-secure-note{
        display: flex;
        align-items: flex-start;
        gap: 12px;
        margin-top: var(--spacing-20, 20px);
        padding: 14px var(--spacing-16, 16px);
        background: var(--color-mint-wash, #f0f6df);
        border: 1px solid rgba(68, 108, 61, 0.12);
        border-radius: var(--radius-lg, 8px);
        font-size: 13px;
        line-height: 1.5;
        color: var(--color-forest, #446c3d);
    }
    .page-checkout .kv-secure-note i{ 
        margin-top: 3px; 
        font-size: 14px;
    }
    
    .page-checkout .kv-payment-methods{ 
        margin-top: var(--spacing-20, 20px); 
        text-align: center;
        padding-top: var(--spacing-16, 16px);
        border-top: 1px solid var(--color-stone, #d7d6d4);
    }
    .page-checkout .kv-payment-methods img{ 
        height: 26px; 
        width: auto; 
        opacity: 0.85; 
    }

    /* ---- TERMS AND CONDITIONS CHECKBOXES ---- */
    .page-checkout .kv-checkbox{
        width: 18px;
        height: 18px;
        margin-top: 2px;
        cursor: pointer;
        accent-color: var(--color-ember-red, #e34432);
        flex-shrink: 0;
    }
    .page-checkout .kv-terms-group{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: var(--spacing-12, 12px);
        padding: var(--spacing-8, 8px) var(--spacing-12, 12px) var(--spacing-12, 12px);
        border-bottom: 1px solid rgba(37, 34, 30, 0.05);
        transition: all 0.2s ease;
        border-radius: 6px;
    }
    .page-checkout .kv-terms-row{
        display: flex;
        align-items: flex-start;
        gap: 12px;
        width: 100%;
    }
    .page-checkout .kv-terms-group:last-child{ 
        border-bottom: none; 
        margin-bottom: 0; 
        padding-bottom: 0; 
    }
    .page-checkout .kv-terms-group:hover{ 
        padding-left: var(--spacing-16, 16px);
        background-color: rgba(37, 34, 30, 0.02);
    }
    .page-checkout .kv-terms-row label{
        color: var(--color-pencil, #6f6c69);
        font-size: 13px;
        line-height: 1.5;
        cursor: pointer;
        margin: 0;
    }
    .page-checkout .kv-terms-row a{
        color: var(--color-cobalt-link, #0f66ae);
        text-decoration: none;
        font-weight: 600;
        transition: color 0.2s ease;
    }
    .page-checkout .kv-terms-row a:hover{ 
        color: var(--color-deep-ember, #cf3520); 
        text-decoration: underline; 
    }

    /* ---- ORDER SUMMARY SIDEBAR ---- */
    .page-checkout .kv-checkout-summary{ 
        position: -webkit-sticky;
        position: sticky; 
        top: 110px; 
        height: fit-content; 
    }
    .page-checkout .kv-checkout-order{
        background: linear-gradient(180deg, var(--color-paper, #fefdfc) 0%, var(--surface-cream-wash, #fff6f0) 100%);
    }
    .page-checkout .kv-checkout-order-table{
        margin-bottom: var(--spacing-20, 20px);
        padding-bottom: var(--spacing-16, 16px);
        border-bottom: 1px solid var(--color-stone, #d7d6d4);
    }
    .page-checkout .kv-checkout-order-header{
        display: flex;
        justify-content: space-between;
        margin-bottom: 12px;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--color-stone, #d7d6d4);
        font-weight: 700;
        color: var(--color-graphite, #94928f);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }
    .page-checkout .kv-checkout-order-item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: var(--spacing-12, 12px) 0;
        border-bottom: 1px dashed var(--color-stone, #d7d6d4);
    }
    .page-checkout .kv-checkout-order-points{
        display: flex;
        align-items: center;
        gap: 8px;
        color: var(--color-ink, #25221e);
        font-size: 13.5px;
        font-weight: 600;
    }
    .page-checkout .kv-checkout-order-points i{ 
        color: var(--color-ember-red, #e34432); 
    }
    .page-checkout .kv-checkout-order-price{
        font-family: var(--font-graphik, sans-serif);
        color: var(--color-ink, #25221e);
        font-weight: 700;
        font-size: 14px;
    }
    .page-checkout .kv-checkout-order-total{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: var(--spacing-16, 16px);
        padding-top: var(--spacing-16, 16px);
        border-top: 1px solid var(--color-stone, #d7d6d4);
    }
    .page-checkout .kv-checkout-order-total span:first-child{
        font-size: 14px;
        font-weight: 700;
        color: var(--color-pencil, #6f6c69);
    }
    .page-checkout .kv-checkout-order-total-value{
        font-family: var(--font-graphik, sans-serif);
        font-size: 22px;
        font-weight: 800;
        color: var(--color-ember-red, #e34432);
        display: flex;
        align-items: center;
        gap: 6px;
    }

    /* Captcha inputs formatting */
    .page-checkout .kv-captcha-group{ 
        margin-bottom: var(--spacing-20, 20px); 
    }
    .page-checkout .kv-captcha-wrapper{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        align-items: center;
    }
    .page-checkout .kv-captcha-display{
        background: var(--surface-paper-canvas, #fefdfc);
        border: 1.5px solid var(--color-stone, #d7d6d4);
        border-radius: var(--radius-lg, 8px);
        padding: 5px 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .page-checkout .kv-captcha-display img{ 
        max-width: 100%; 
        height: 38px; 
        border-radius: var(--radius-sm, 2.5px); 
    }

    /* ---- ACTION BUTTONS ---- */
    .page-checkout .kv-btn{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        padding: 13px 20px;
        border: none;
        border-radius: var(--radius-buttons, 8px);
        font-size: 14.5px;
        font-weight: 600;
        cursor: pointer;
        text-decoration: none;
        transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
        margin-bottom: var(--spacing-12, 12px);
        position: relative;
        overflow: hidden;
    }
    .page-checkout .kv-btn-accent{
        background: var(--color-ember-red, #e34432);
        color: var(--color-paper, #fefdfc);
        box-shadow: 0 4px 14px rgba(227, 68, 50, 0.25);
    }
    .page-checkout .kv-btn-accent:hover{
        background: var(--color-deep-ember, #cf3520);
        color: var(--color-paper, #fefdfc);
        transform: translateY(-2px);
        box-shadow: 0 6px 18px rgba(227, 68, 50, 0.35);
        text-decoration: none;
    }
    /* Sheen Sweep */
    .page-checkout .kv-btn-accent::after{
        content: '';
        position: absolute;
        top: 0; left: -120%;
        width: 60%; height: 100%;
        background: linear-gradient(120deg, transparent, rgba(255,255,255,0.4), transparent);
        transform: skewX(-20deg);
        transition: left 0.6s ease;
    }
    .page-checkout .kv-btn-accent:hover::after{ 
        left: 140%; 
    }
    
    .page-checkout .kv-btn-outline{
        background: transparent;
        color: var(--color-pencil, #6f6c69);
        border: 1px solid var(--color-stone, #d7d6d4);
    }
    .page-checkout .kv-btn-outline:hover{
        border-color: rgba(227, 68, 50, 0.25);
        color: var(--color-deep-ember, #cf3520);
        background: var(--color-cream, #fff6f0);
        text-decoration: none;
    }
    .page-checkout .kv-btn-lg{ 
        padding: 14px 24px; 
    }

    .page-checkout .kv-summary-assure{
        margin-top: 6px;
        text-align: center;
        font-size: 12px;
        color: var(--color-graphite, #94928f);
    }
    .page-checkout .kv-summary-assure i{ 
        color: var(--color-forest, #446c3d); 
        margin-right: 4px; 
    }

    .page-checkout .kv-summary-assure{
        margin-top: 6px;
        text-align: center;
        font-size: 12px;
        color: var(--color-graphite, #94928f);
    }
    .page-checkout .kv-summary-assure i{ color: var(--color-forest, #446c3d); margin-right: 4px; }

    /* ---- ENTRANCE ANIMATIONS ---- */
    @keyframes page-checkout-kvFadeDown { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes page-checkout-kvRise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes page-checkout-kvGlowFloat { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(30px,-30px) scale(1.08); } }

    .page-checkout .kv-glow-mint{ animation: page-checkout-kvGlowFloat 20s ease-in-out infinite; }
    .page-checkout .kv-glow-sky{ animation: page-checkout-kvGlowFloat 26s ease-in-out infinite reverse; }

    /* Staggered Form Section Entrance */
    .page-checkout .kv-checkout-form .kv-checkout-card{ animation: page-checkout-kvRise 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; }
    .page-checkout .kv-checkout-form .kv-checkout-card:nth-child(1){ animation-delay: 0.05s; }
    .page-checkout .kv-checkout-form .kv-checkout-card:nth-child(2){ animation-delay: 0.12s; }
    .page-checkout .kv-checkout-form .kv-checkout-card:nth-child(3){ animation-delay: 0.19s; }
    .page-checkout .kv-checkout-form .kv-checkout-card:nth-child(4){ animation-delay: 0.26s; }
    .page-checkout .kv-checkout-summary{ animation: page-checkout-kvRise 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both; }

    /* ---- Validation Errors (JQuery validation) ---- */
    .page-checkout label.error,
    .page-checkout .kv-error{
        color: #e34432;
        font-size: 12px;
        font-weight: 600;
        margin-top: 6px;
        display: block;
    }
    .page-checkout input.error,
    .page-checkout textarea.error,
    .page-checkout select.error{
        border-color: #e34432 !important;
        background-color: rgba(227, 68, 50, 0.04) !important;
    }
    .page-checkout input.error:focus,
    .page-checkout textarea.error:focus,
    .page-checkout select.error:focus{ 
        border-color: #e34432 !important; 
        box-shadow: 0 0 0 4px rgba(227, 68, 50, 0.12) !important;
    }

    /* Expiry Month/Year and Checkbox styling alignment */
    .page-checkout #expiry_month-error,
    .page-checkout #expiry_year-error{
        margin-top: 6px;
    }
    .page-checkout .kv-captcha-display{ order: 1; }
    .page-checkout #captcha-error,
    .page-checkout label#captcha-error{
        position: static !important;
        padding: 0 !important;
        order: 2;
        grid-column: 1 / -1;
        margin-top: 8px;
    }
    .page-checkout .kv-terms-group .kv-error,
    .page-checkout .kv-terms-group label.error{
        margin-top: 4px;
        padding-left: 30px;
    }

    /* ---- Responsive Adaptations ---- */
    @media (max-width: 1024px) {
        .page-checkout .kv-checkout-grid{ grid-template-columns: 1fr; }
        .page-checkout .kv-checkout-summary{ position: static; top: auto; }
    }
    @media (max-width: 768px) {
        .page-checkout .kv-checkout-section{ padding: var(--spacing-32, 32px) 0 var(--spacing-64, 64px); }
        .page-checkout .kv-checkout-form-grid{ grid-template-columns: 1fr; }
        .page-checkout .kv-checkout-card{ padding: var(--spacing-20, 20px); }
        .page-checkout .kv-stepper{ border-radius: 18px; flex-wrap: wrap; gap: 10px 0; padding: var(--spacing-16, 16px); }
        .page-checkout .kv-stepper__label{ display: none; }
        .page-checkout .kv-stepper__bar{ min-width: 16px; margin: 0 6px; }
    }
    @media (max-width: 480px) {
        .page-checkout .kv-checkout-card{ padding: var(--spacing-16, 16px); margin-bottom: var(--spacing-16, 16px); }
    }
    @media (prefers-reduced-motion: reduce) {
        .page-checkout .kv-stepper, .page-checkout .kv-glow-mint, .page-checkout .kv-glow-sky,
        .page-checkout .kv-checkout-form .kv-checkout-card, .page-checkout .kv-checkout-summary{ animation: none !important; }
    }

    /* ============================================================
       CHECKOUT — EDITORIAL REDESIGN (co-* classes)
       ============================================================ */

    /* Section wrapper */
    .page-checkout .co-checkout {
        position: relative;
        overflow: hidden;
        padding: 48px 0 96px;
        background: linear-gradient(180deg, #fff9f1 0%, #fefdfc 100%);
    }
    /* Hide the old dot-grid pattern and blob glows so the new bg is clean */
    .page-checkout .co-checkout .kv-pattern,
    .page-checkout .co-checkout .kv-glow { display: none !important; }
    .page-checkout .co-checkout__blob {
        position: absolute;
        border-radius: 50%;
        filter: blur(90px);
        pointer-events: none;
        z-index: 0;
    }
    .page-checkout .co-checkout__blob--a {
        top: -180px; right: -140px;
        width: 380px; height: 380px;
        background: rgba(227, 68, 50, 0.14);
    }
    .page-checkout .co-checkout__blob--b {
        bottom: -180px; left: -140px;
        width: 400px; height: 400px;
        background: rgba(15, 102, 174, 0.10);
    }
    .page-checkout .co-checkout__inner {
        position: relative;
        z-index: 1;
    }

    /* Reset kv- grid so we can restyle */
    .page-checkout .co-checkout .kv-stepper { display: none !important; }
    .page-checkout .co-grid {
        display: grid;
        grid-template-columns: 1.55fr 1fr;
        gap: 32px;
        align-items: start;
    }

    /* ---- Editorial steps bar ---- */
    .page-checkout .co-steps {
        list-style: none;
        margin: 0 0 36px 0;
        padding: 12px 14px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
        background: #ffffff;
        border: 1px solid rgba(215, 214, 212, 0.6);
        border-radius: 999px;
        box-shadow: 0 12px 30px rgba(37, 34, 30, 0.06);
    }
    .page-checkout .co-steps__item {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 10px 14px;
        border-radius: 999px;
        color: var(--color-pencil, #6f6c69);
        font-family: var(--font-inter, sans-serif);
        font-size: 12.5px;
        font-weight: 700;
        letter-spacing: 0.04em;
        transition: background 0.28s ease, color 0.28s ease;
    }
    .page-checkout .co-steps__marker {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 26px;
        border-radius: 8px;
        background: rgba(227, 68, 50, 0.10);
        color: var(--color-deep-ember, #cf3520);
        font-family: var(--font-graphik, sans-serif);
        font-size: 11px;
        font-weight: 800;
    }
    .page-checkout .co-steps__label {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }
    .page-checkout .co-steps__label i {
        font-size: 11px;
        color: var(--color-graphite, #94928f);
    }
    .page-checkout .co-steps__item--current {
        background: linear-gradient(135deg, var(--color-ember-red, #e34432), var(--color-deep-ember, #cf3520));
        color: #ffffff;
        box-shadow: 0 8px 18px rgba(227, 68, 50, 0.32);
    }
    .page-checkout .co-steps__item--current .co-steps__marker {
        background: rgba(255, 255, 255, 0.22);
        color: #ffffff;
    }
    .page-checkout .co-steps__item--current .co-steps__label i {
        color: #ffffff;
    }

    /* ---- Numbered editorial form cards ---- */
    .page-checkout .co-form {
        display: flex;
        flex-direction: column;
        gap: 22px;
    }
    .page-checkout .co-card {
        position: relative !important;
        background: var(--color-paper, #fefdfc) !important;
        border: 1px solid rgba(215, 214, 212, 0.6) !important;
        border-radius: 20px !important;
        padding: 32px 32px 30px !important;
        overflow: hidden;
        box-shadow: 0 14px 34px rgba(37, 34, 30, 0.06);
        transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
                    border-color 0.4s ease,
                    box-shadow 0.4s ease;
    }
    .page-checkout .co-card:hover {
        transform: translateY(-3px);
        border-color: rgba(227, 68, 50, 0.30) !important;
        box-shadow: 0 22px 44px rgba(37, 34, 30, 0.08);
    }
    /* left ember accent bar */
    .page-checkout .co-card__accent {
        position: absolute;
        left: 0; top: 32px; bottom: 32px;
        width: 4px;
        border-radius: 0 4px 4px 0;
        background: linear-gradient(180deg, var(--color-ember-red, #e34432), var(--color-deep-ember, #cf3520));
        transition: top 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
                    bottom 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    }
    .page-checkout .co-card:hover .co-card__accent {
        top: 0; bottom: 0;
    }
    /* number watermark */
    .page-checkout .co-card__num {
        position: absolute;
        top: 12px; right: 24px;
        font-family: var(--font-graphik, sans-serif);
        font-size: 60px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: -0.03em;
        color: rgba(37, 34, 30, 0.06);
        pointer-events: none;
    }
    .page-checkout .co-card:hover .co-card__num {
        color: rgba(227, 68, 50, 0.14);
    }
    /* header */
    .page-checkout .co-card__title {
        position: relative;
        display: flex !important;
        align-items: center;
        gap: 12px;
        font-family: var(--font-graphik, sans-serif) !important;
        font-size: 20px !important;
        font-weight: 800 !important;
        color: var(--color-ink, #25221e) !important;
        margin: 0 0 24px 0 !important;
        padding: 0 0 12px !important;
        letter-spacing: -0.01em;
    }
    /* Hide old numbered step badge inside titles */
    .page-checkout .co-card .kv-step { display: none !important; }
    .page-checkout .co-card__title-ico {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 12px;
        background: linear-gradient(135deg, var(--color-ember-red, #e34432), var(--color-deep-ember, #cf3520));
        color: #ffffff;
        font-size: 15px;
        box-shadow: 0 8px 16px rgba(227, 68, 50, 0.28);
        flex-shrink: 0;
    }
    .page-checkout .co-card__title-ico i {
        line-height: 1;
    }
    /* Labels + inputs (override existing kv-* patterns) */
    .page-checkout .co-checkout .kv-label {
        display: inline-flex !important;
        align-items: center;
        gap: 6px;
        font-family: var(--font-inter, sans-serif) !important;
        font-size: 11.5px !important;
        font-weight: 800 !important;
        letter-spacing: 0.08em !important;
        text-transform: uppercase !important;
        color: var(--color-deep-ember, #cf3520) !important;
        margin-bottom: 8px !important;
    }
    .page-checkout .co-checkout .kv-input,
    .page-checkout .co-checkout .kv-textarea,
    .page-checkout .co-checkout .kv-select {
        width: 100%;
        padding: 13px 16px !important;
        background: #fff9f2 !important;
        border: 1.5px solid rgba(215, 214, 212, 0.7) !important;
        border-radius: 12px !important;
        font-family: var(--font-inter, sans-serif) !important;
        font-size: 15px !important;
        line-height: 1.5 !important;
        color: var(--color-ink, #25221e) !important;
        transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease !important;
        outline: none;
        box-shadow: none !important;
    }
    .page-checkout .co-checkout .kv-input:hover,
    .page-checkout .co-checkout .kv-textarea:hover,
    .page-checkout .co-checkout .kv-select:hover {
        border-color: rgba(227, 68, 50, 0.30) !important;
    }
    .page-checkout .co-checkout .kv-input:focus,
    .page-checkout .co-checkout .kv-textarea:focus,
    .page-checkout .co-checkout .kv-select:focus {
        background: #ffffff !important;
        border-color: var(--color-ember-red, #e34432) !important;
        box-shadow: 0 0 0 4px rgba(227, 68, 50, 0.12) !important;
    }
    .page-checkout .co-checkout .kv-input.error,
    .page-checkout .co-checkout .kv-input.is-invalid {
        border-color: #dc3545 !important;
        background: rgba(220, 53, 69, 0.04) !important;
    }
    .page-checkout .co-checkout .kv-textarea {
        min-height: 130px;
        resize: vertical;
    }
    .page-checkout .co-checkout .kv-error,
    .page-checkout .co-checkout label.error {
        display: inline-block;
        margin-top: 8px;
        font-family: var(--font-inter, sans-serif);
        font-size: 12.5px;
        font-weight: 600;
        color: #dc3545 !important;
    }
    /* Expiry row */
    .page-checkout .co-checkout .kv-card-expiry {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 8px;
    }
    .page-checkout .co-checkout .kv-card-separator {
        font-weight: 800;
        color: var(--color-graphite, #94928f);
    }
    /* Secure note under card */
    .page-checkout .co-checkout .kv-secure-note {
        display: inline-flex !important;
        align-items: center;
        gap: 10px;
        margin-top: 18px;
        padding: 10px 14px;
        background: rgba(227, 68, 50, 0.06);
        border: 1px dashed rgba(227, 68, 50, 0.25);
        border-radius: 999px;
        color: var(--color-deep-ember, #cf3520);
        font-family: var(--font-inter, sans-serif);
        font-size: 12.5px;
        font-weight: 600;
    }
    .page-checkout .co-checkout .kv-secure-note i {
        font-size: 11px;
    }
    .page-checkout .co-checkout .kv-payment-methods {
        margin-top: 16px;
    }
    .page-checkout .co-checkout .kv-payment-methods img {
        max-height: 26px;
        opacity: 0.9;
    }
    /* Terms rows */
    .page-checkout .co-checkout .kv-terms-group {
        margin-top: 14px;
    }
    .page-checkout .co-checkout .kv-terms-row {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 14px 16px;
        background: #fff9f2;
        border: 1px solid rgba(215, 214, 212, 0.7);
        border-radius: 12px;
        transition: border-color 0.25s ease, background 0.25s ease;
    }
    .page-checkout .co-checkout .kv-terms-row:hover {
        border-color: rgba(227, 68, 50, 0.30);
        background: #ffffff;
    }
    .page-checkout .co-checkout .kv-checkbox {
        flex-shrink: 0;
        width: 18px;
        height: 18px;
        margin-top: 3px;
        accent-color: var(--color-ember-red, #e34432);
        cursor: pointer;
    }
    .page-checkout .co-checkout .kv-terms-row label {
        font-family: var(--font-inter, sans-serif);
        font-size: 13.5px;
        line-height: 1.55;
        color: var(--color-ink, #25221e);
        cursor: pointer;
        margin: 0;
    }
    .page-checkout .co-checkout .kv-terms-row label a {
        color: var(--color-deep-ember, #cf3520);
        font-weight: 700;
        text-decoration: none;
    }
    .page-checkout .co-checkout .kv-terms-row label a:hover {
        text-decoration: underline;
        color: var(--color-ember-red, #e34432);
    }

    /* ============================================================
       SIDEBAR — dark editorial order summary
       ============================================================ */
    .page-checkout .co-summary {
        position: sticky;
        top: 90px;
        align-self: start;
    }
    .page-checkout .co-summary__card {
        position: relative !important;
        background: linear-gradient(160deg, #16130f 0%, #221d17 100%) !important;
        color: rgba(255, 255, 255, 0.75) !important;
        border: 1px solid rgba(255, 255, 255, 0.06) !important;
        border-radius: 24px !important;
        padding: 32px 28px 28px !important;
        overflow: hidden;
        box-shadow: 0 26px 60px rgba(22, 19, 15, 0.35) !important;
    }
    .page-checkout .co-summary__glow {
        position: absolute;
        top: -100px; right: -80px;
        width: 240px; height: 240px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(227, 68, 50, 0.35) 0%, transparent 65%);
        filter: blur(40px);
        pointer-events: none;
        z-index: 0;
    }
    .page-checkout .co-summary__head {
        position: relative;
        z-index: 1;
        margin-bottom: 22px;
    }
    .page-checkout .co-summary__eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-family: var(--font-inter, sans-serif);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: #f0a58c;
        margin-bottom: 10px;
    }
    .page-checkout .co-summary__eyebrow-dot {
        display: inline-block;
        width: 7px; height: 7px;
        border-radius: 50%;
        background: var(--color-ember-red, #e34432);
        box-shadow: 0 0 8px rgba(227, 68, 50, 0.7);
        animation: coDotPulse 1.8s ease-in-out infinite;
    }
    @keyframes coDotPulse {
        0%,100% { transform: scale(1); opacity: 1; }
        50%     { transform: scale(1.25); opacity: 0.75; }
    }
    .page-checkout .co-summary__title {
        display: flex !important;
        align-items: center;
        gap: 10px;
        font-family: var(--font-graphik, sans-serif) !important;
        font-size: 22px !important;
        font-weight: 800 !important;
        color: #ffffff !important;
        margin: 0 !important;
        padding: 0 !important;
        letter-spacing: -0.01em;
    }
    .page-checkout .co-summary__title i {
        color: #f0a58c;
        font-size: 16px;
    }

    /* Order table (override kv-checkout-order-*) */
    .page-checkout .co-summary__card .kv-checkout-order-table {
        position: relative;
        z-index: 1;
        margin-bottom: 22px;
    }
    .page-checkout .co-summary__card .kv-checkout-order-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 12px;
        margin-bottom: 12px;
        border-bottom: 1px dashed rgba(255, 255, 255, 0.14);
        font-family: var(--font-inter, sans-serif);
        font-size: 10.5px;
        font-weight: 800;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.55);
    }
    .page-checkout .co-summary__card .kv-checkout-order-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 0;
        color: rgba(255, 255, 255, 0.78);
        font-family: var(--font-inter, sans-serif);
        font-size: 13.5px;
    }
    .page-checkout .co-summary__card .kv-checkout-order-points {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: #f0a58c;
        font-weight: 700;
    }
    .page-checkout .co-summary__card .kv-checkout-order-points i {
        color: var(--color-ember-red, #e34432);
    }
    .page-checkout .co-summary__card .kv-checkout-order-price {
        font-family: var(--font-graphik, sans-serif);
        font-weight: 700;
        color: #ffffff;
    }
    .page-checkout .co-summary__card .kv-checkout-order-total {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        margin-top: 14px;
        padding: 16px 0 6px;
        border-top: 1px dashed rgba(255, 255, 255, 0.14);
        font-family: var(--font-inter, sans-serif);
        font-size: 11.5px;
        font-weight: 800;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.65);
    }
    .page-checkout .co-summary__card .kv-checkout-order-total-value {
        font-family: var(--font-graphik, sans-serif);
        font-size: 28px;
        font-weight: 800;
        color: #ffffff;
        letter-spacing: -0.02em;
    }

    /* Captcha in sidebar */
    .page-checkout .co-summary__card .kv-captcha-group {
        position: relative;
        z-index: 1;
        margin: 20px 0 22px;
    }
    .page-checkout .co-summary__card .kv-label {
        color: #f0a58c !important;
        margin-bottom: 8px !important;
    }
    .page-checkout .co-summary__card .kv-captcha-wrapper {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 10px;
        align-items: center;
    }
    .page-checkout .co-summary__card .kv-captcha-wrapper .kv-input {
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(255, 255, 255, 0.14) !important;
        color: #ffffff !important;
    }
    .page-checkout .co-summary__card .kv-captcha-wrapper .kv-input::placeholder {
        color: rgba(255, 255, 255, 0.4);
    }
    .page-checkout .co-summary__card .kv-captcha-wrapper .kv-input:focus {
        background: rgba(255, 255, 255, 0.10) !important;
        border-color: #f0a58c !important;
        box-shadow: 0 0 0 4px rgba(240, 165, 140, 0.15) !important;
    }
    .page-checkout .co-summary__card .kv-captcha-display {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 6px 10px;
        background: #ffffff;
        border-radius: 10px;
        min-width: 120px;
    }
    .page-checkout .co-summary__card .kv-captcha-display img {
        max-height: 44px;
        width: auto;
    }

    /* Buttons */
    .page-checkout .co-summary__cta {
        position: relative;
        z-index: 1;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 10px;
        margin: 0 0 12px !important;
        padding: 15px 22px !important;
        background: var(--color-ember-red, #e34432) !important;
        color: #ffffff !important;
        border: 0 !important;
        border-radius: 999px !important;
        font-family: var(--font-inter, sans-serif) !important;
        font-size: 14px !important;
        font-weight: 800 !important;
        letter-spacing: 0.04em !important;
        text-transform: uppercase !important;
        cursor: pointer;
        box-shadow: 0 12px 28px rgba(227, 68, 50, 0.4) !important;
        transition: transform 0.28s ease, background 0.28s ease, box-shadow 0.28s ease !important;
    }
    .page-checkout .co-summary__cta:hover {
        background: var(--color-deep-ember, #cf3520) !important;
        transform: translateY(-2px);
        box-shadow: 0 16px 34px rgba(227, 68, 50, 0.55) !important;
    }
    .page-checkout .co-summary__cta i {
        font-size: 12px;
        transition: transform 0.25s ease;
    }
    .page-checkout .co-summary__cta:hover i {
        transform: translateX(3px);
    }
    .page-checkout .co-summary__back {
        position: relative;
        z-index: 1;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 13px 22px !important;
        background: transparent !important;
        color: rgba(255, 255, 255, 0.85) !important;
        border: 1px solid rgba(255, 255, 255, 0.18) !important;
        border-radius: 999px !important;
        font-family: var(--font-inter, sans-serif) !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        letter-spacing: 0.02em !important;
        text-decoration: none;
        transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
    }
    .page-checkout .co-summary__back:hover {
        background: rgba(255, 255, 255, 0.06) !important;
        border-color: rgba(255, 255, 255, 0.30) !important;
        color: #ffffff !important;
    }
    .page-checkout .co-summary__assure {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin-top: 16px;
        padding-top: 16px;
        border-top: 1px dashed rgba(255, 255, 255, 0.14);
        font-family: var(--font-inter, sans-serif);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.55);
    }
    .page-checkout .co-summary__assure i {
        color: #f0a58c;
    }

    /* Responsive */
    @media (max-width: 1199px) {
        .page-checkout .co-steps {
            grid-template-columns: repeat(2, 1fr);
            border-radius: 22px;
        }
    }
    @media (max-width: 991px) {
        .page-checkout .co-grid {
            grid-template-columns: 1fr;
        }
        .page-checkout .co-summary {
            position: static;
        }
    }
    @media (max-width: 575px) {
        .page-checkout .co-checkout { padding: 32px 0 64px; }
        .page-checkout .co-steps {
            grid-template-columns: 1fr;
            border-radius: 22px;
            padding: 10px;
        }
        .page-checkout .co-card {
            padding: 24px 22px 24px !important;
        }
        .page-checkout .co-card__num {
            font-size: 48px;
            top: 8px; right: 18px;
        }
        .page-checkout .co-card__title {
            font-size: 17px !important;
        }
        .page-checkout .co-summary__card {
            padding: 26px 22px 24px !important;
        }
    }

/* ===================== page-contact ===================== */
    /* ============================================================
       CONTACT PAGE - REVAMPED PREMIUM EDITORIAL STYLE
       ============================================================ */

    .page-contact .contact-page-section{
        background-color: #fffdfb; /* Crisp warm backdrop */
        position: relative;
        overflow: hidden;
    }

    /* Ambient blur backdrop shapes */
    .page-contact .contact-bg-blob{
        position: absolute;
        border-radius: 50%;
        filter: blur(90px);
        -webkit-filter: blur(90px);
        pointer-events: none;
        opacity: 0.55;
        z-index: 1;
    }

    .page-contact .contact-bg-blob.blob-1{
        width: 380px;
        height: 380px;
        background-color: var(--color-mint-wash, #f0f6df);
        top: -100px;
        left: -120px;
    }

    .page-contact .contact-bg-blob.blob-2{
        width: 320px;
        height: 320px;
        background-color: var(--color-sky-wash, #dceaff);
        bottom: -80px;
        right: -80px;
    }

    .page-contact .contact-content-container{
        position: relative;
        z-index: 2;
    }

    /* Single Unified Premium Card Layout */
    .page-contact .unified-contact-card{
        background-color: var(--surface-paper-canvas, #fefdfc);
        border: 1px solid var(--color-stone, #d7d6d4);
        border-radius: var(--radius-cards, 12px);
        overflow: hidden;
        box-shadow: var(--shadow-subtle, 0px 1px 0px 0px rgba(37, 34, 30, 0.04));
        transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        animation: page-contact-slideInUp 0.6s ease-out;
    }

    .page-contact .unified-contact-card:hover{
        border-color: var(--color-stone, #d7d6d4);
        box-shadow: var(--shadow-lg, 0px 14px 19px -9px rgba(37, 34, 30, 0.07), 0px 10px 48px 0px rgba(37, 34, 30, 0.18));
    }

    /* Left Panel details style */
    .page-contact .brand-details-panel{
        background-color: transparent;
        border-left: 1px solid var(--color-stone, #d7d6d4);
    }

    .page-contact .panel-content{
        padding: var(--spacing-48, 48px);
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .page-contact .panel-title{
        font-family: var(--font-graphik), sans-serif;
        font-size: var(--text-heading, 38px);
        font-weight: var(--font-weight-bold, 700);
        line-height: var(--leading-heading, 1.28);
        letter-spacing: var(--tracking-heading, -0.19px);
        color: var(--color-ink, #25221e);
    }

    .page-contact .panel-text{
        font-family: var(--font-inter), sans-serif;
        font-size: var(--text-body, 16px);
        line-height: var(--leading-body, 1.5);
        color: var(--color-pencil, #6f6c69);
    }

    /* Company Metadata List inside the panel */
    .page-contact .company-info-list{
        display: flex;
        flex-direction: column;
    }

    .page-contact .info-item{
        display: flex;
        align-items: flex-start;
        gap: 16px;
    }

    .page-contact .info-icon{
        width: 42px;
        height: 42px;
        min-width: 42px;
        border-radius: 6px;
        background-color: var(--surface-paper-canvas, #fefdfc);
        border: 1px solid var(--color-stone, #d7d6d4);
        color: var(--color-deep-ember, #cf3520);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        transition: all 0.3s ease;
    }

    .page-contact .info-item:hover .info-icon{
        background-color: var(--color-ember-red, #e34432);
        border-color: var(--color-ember-red, #e34432);
        color: #ffffff;
    }

    .page-contact .info-body{
        display: flex;
        flex-direction: column;
    }

    .page-contact .info-label{
        font-family: var(--font-inter), sans-serif;
        font-size: var(--text-caption, 12px);
        font-weight: var(--font-weight-semibold, 600);
        color: var(--color-graphite, #94928f);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        line-height: 1.2;
        margin-bottom: 4px;
    }

    .page-contact .info-value{
        font-family: var(--font-inter), sans-serif;
        font-size: var(--text-body-sm, 14px);
        color: var(--color-ink, #25221e);
        font-weight: var(--font-weight-medium, 500);
        text-decoration: none;
        transition: color 0.2s ease;
    }

    .page-contact a.info-value:hover{
        color: var(--color-ember-red, #e34432);
    }

    /* Bottom Brand Mark */
    .page-contact .panel-brand-mark{
        display: flex;
        flex-direction: column;
        border-top: 1px solid var(--color-stone, #d7d6d4);
        padding-top: 24px;
    }

    .page-contact .brand-mark-title{
        font-family: var(--font-graphik), sans-serif;
        font-size: var(--text-body-lg, 18px);
        font-weight: var(--font-weight-bold, 700);
        color: var(--color-ink, #25221e);
    }

    .page-contact .brand-mark-desc{
        font-family: var(--font-inter), sans-serif;
        font-size: var(--text-caption, 12px);
        color: var(--color-pencil, #6f6c69);
    }

    /* Right Panel: Clean Form Panel */
    .page-contact .form-panel{
        background-color: var(--surface-paper-canvas, #fefdfc);
    }

    .page-contact .form-title{
        font-family: var(--font-graphik), sans-serif;
        font-size: var(--text-subheading, 21px);
        font-weight: var(--font-weight-bold, 700);
        color: var(--color-ink, #25221e);
        margin: 0 0 8px 0;
    }

    .page-contact .form-subtitle{
        font-family: var(--font-inter), sans-serif;
        font-size: var(--text-body-sm, 14px);
        color: var(--color-pencil, #6f6c69);
        margin: 0;
    }

    /* Premium Input Elements */
    .page-contact .premium-input-label{
        display: block;
        font-family: var(--font-inter), sans-serif;
        font-size: var(--text-caption, 12px);
        font-weight: var(--font-weight-semibold, 600);
        color: var(--color-ink, #25221e);
        margin-bottom: 8px;
    }

    .page-contact .premium-form-input{
        width: 100%;
        font-family: var(--font-inter), sans-serif;
        font-size: var(--text-body-sm, 14px);
        font-weight: var(--font-weight-medium, 500);
        color: var(--color-ink, #25221e);
        background-color: var(--surface-paper-canvas, #fefdfc);
        border: 1px solid var(--color-stone, #d7d6d4);
        border-radius: var(--radius-inputs, 8px);
        padding: 12px 16px;
        transition: all 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
        outline: none;
    }

    .page-contact .premium-form-input::placeholder{
        color: var(--color-graphite, #94928f);
        font-weight: var(--font-weight-regular, 400);
    }

    .page-contact .premium-form-input:focus{
        border-color: var(--color-ember-red, #e34432);
        background-color: var(--surface-paper-canvas, #fefdfc);
        box-shadow: 0 0 0 3px #f0f6df;
    }

    /* Validation and Error elements */
    .page-contact .premium-form-input.is-invalid{
        border-color: var(--color-ember-red, #e34432) !important;
        background-color: #fffaf9 !important;
    }

    .page-contact .premium-error-msg{
        color: var(--color-deep-ember, #cf3520);
        font-family: var(--font-inter), sans-serif;
        font-size: var(--text-caption, 12px);
        font-weight: var(--font-weight-medium, 500);
    }

    .page-contact .captcha-image-container img{
        border-radius: var(--radius-inputs, 8px);
        border: 1px solid var(--color-stone, #d7d6d4);
    }

    /* Submit Button */
    .page-contact .premium-submit-btn{
        width: 100%;
        font-family: var(--font-inter), sans-serif;
        font-size: var(--text-body-sm, 14px);
        font-weight: var(--font-weight-semibold, 600);
        color: #ffffff;
        background-color: var(--color-ember-red, #e34432);
        border: 1px solid var(--color-ember-red, #e34432);
        border-radius: var(--radius-buttons, 8px);
        padding: 14px 24px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
        box-shadow: 0 4px 14px rgba(227, 68, 50, 0.2);
    }

    .page-contact .premium-submit-btn:hover{
        background-color: var(--color-deep-ember, #cf3520);
        border-color: var(--color-deep-ember, #cf3520);
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(227, 68, 50, 0.35);
    }

    .page-contact .premium-submit-btn:active{
        transform: translateY(0);
    }

    /* Badges Style */
    .page-contact .modern-badge{
        display: inline-block;
        font-family: var(--font-inter), sans-serif;
        font-size: var(--text-caption, 12px);
        font-weight: var(--font-weight-semibold, 600);
        line-height: 1;
        color: var(--color-deep-ember, #cf3520);
        background-color: var(--surface-cream-wash, #fff6f0);
        border: 1px solid var(--color-stone, #d7d6d4);
        border-radius: var(--radius-badges, 8px);
        padding: 6px 12px;
        letter-spacing: 0.05em;
        text-transform: uppercase;
    }

    @keyframes page-contact-slideInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @media (max-width: 991px) {
        .page-contact .brand-details-panel{
            border-left: none;
            border-bottom: 1px solid var(--color-stone, #d7d6d4);
        }
    }

    @media (max-width: 768px) {
        .page-contact .panel-content{
            padding: var(--spacing-24, 24px);
        }
    }

    /* ============================================================
       CONTACT — EDITORIAL STACKED REDESIGN (ct-* classes)
       ============================================================ */

    /* Shared eyebrow */
    .page-contact .ct-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-family: var(--font-inter, sans-serif);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: var(--color-deep-ember, #cf3520);
        margin-bottom: 16px;
    }
    .page-contact .ct-eyebrow__dot {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--color-ember-red, #e34432);
        box-shadow: 0 0 10px rgba(227, 68, 50, 0.5);
        animation: ctDotPulse 1.8s ease-in-out infinite;
    }
    @keyframes ctDotPulse {
        0%,100% { transform: scale(1); opacity: 1; }
        50%     { transform: scale(1.25); opacity: 0.75; }
    }

    /* ============================================================
       HERO (heading + info grid)
       ============================================================ */
    .page-contact .ct-hero {
        position: relative;
        overflow: hidden;
        padding: 64px 0 40px;
        background: linear-gradient(180deg, #fff9f1 0%, #fefdfc 100%);
    }
    .page-contact .ct-hero__blob {
        position: absolute;
        border-radius: 50%;
        filter: blur(90px);
        pointer-events: none;
        z-index: 0;
    }
    .page-contact .ct-hero__blob--a {
        top: -160px; right: -120px;
        width: 380px; height: 380px;
        background: rgba(227, 68, 50, 0.16);
    }
    .page-contact .ct-hero__blob--b {
        bottom: -160px; left: -120px;
        width: 380px; height: 380px;
        background: rgba(15, 102, 174, 0.10);
    }
    .page-contact .ct-hero__inner {
        position: relative;
        z-index: 1;
    }
    .page-contact .ct-hero__heading {
        margin-bottom: 44px;
    }
    .page-contact .ct-hero__title {
        font-family: var(--font-graphik, sans-serif);
        font-size: clamp(32px, 4.4vw, 52px);
        font-weight: 800;
        line-height: 1.08;
        letter-spacing: -0.03em;
        color: var(--color-ink, #25221e);
        margin: 0 0 16px;
    }
    .page-contact .ct-hero__lede {
        font-family: var(--font-inter, sans-serif);
        font-size: 16px;
        line-height: 1.6;
        color: var(--color-pencil, #6f6c69);
        max-width: 620px;
        margin: 0 auto;
    }
    .page-contact .ct-hero__rule {
        display: block;
        margin: 24px auto 0;
        width: 88px;
        height: 3px;
        border-radius: 3px;
        background: linear-gradient(90deg, var(--color-ember-red, #e34432), #f0a58c);
        box-shadow: 0 0 14px rgba(227, 68, 50, 0.35);
    }

    /* Info grid — 3 wide cards */
    .page-contact .ct-info-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 22px;
    }
    .page-contact .ct-info {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 26px 26px;
        background: var(--color-paper, #fefdfc);
        border: 1px solid rgba(215, 214, 212, 0.6);
        border-radius: 20px;
        text-align: left;
        transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
                    border-color 0.4s ease,
                    box-shadow 0.4s ease;
    }
    .page-contact .ct-info:hover {
        transform: translateY(-4px);
        border-color: rgba(227, 68, 50, 0.35);
        box-shadow: 0 18px 40px rgba(37, 34, 30, 0.08);
    }
    .page-contact .ct-info__icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: 12px;
        background: linear-gradient(135deg, var(--color-ember-red, #e34432), var(--color-deep-ember, #cf3520));
        color: #ffffff;
        font-size: 16px;
        box-shadow: 0 8px 18px rgba(227, 68, 50, 0.30);
        margin-bottom: 6px;
    }
    .page-contact .ct-info__label {
        font-family: var(--font-inter, sans-serif);
        font-size: 10.5px;
        font-weight: 800;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--color-graphite, #94928f);
    }
    .page-contact .ct-info__value {
        font-family: var(--font-graphik, sans-serif);
        font-size: 16px;
        font-weight: 700;
        line-height: 1.35;
        color: var(--color-ink, #25221e);
        word-break: break-word;
    }
    .page-contact .ct-info__value--link {
        color: var(--color-deep-ember, #cf3520);
        text-decoration: none;
        transition: color 0.25s ease;
    }
    .page-contact .ct-info__value--link:hover {
        color: var(--color-ember-red, #e34432);
    }

    /* ============================================================
       FORM SECTION
       ============================================================ */
    .page-contact .ct-form-section {
        position: relative;
        overflow: hidden;
        padding: 80px 0 96px;
        background: linear-gradient(180deg, #fefdfc 0%, #fff6ee 100%);
    }
    .page-contact .ct-form-section__blob {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 600px;
        height: 300px;
        border-radius: 50%;
        background: radial-gradient(ellipse at center, rgba(227, 68, 50, 0.10) 0%, transparent 65%);
        filter: blur(80px);
        pointer-events: none;
        z-index: 0;
    }
    .page-contact .ct-form-section__inner {
        position: relative;
        z-index: 1;
    }
    .page-contact .ct-form-heading {
        margin-bottom: 40px;
    }
    .page-contact .ct-form-heading__title {
        font-family: var(--font-graphik, sans-serif);
        font-size: clamp(28px, 3.6vw, 40px);
        font-weight: 800;
        line-height: 1.1;
        letter-spacing: -0.02em;
        color: var(--color-ink, #25221e);
        margin: 0 0 12px;
    }
    .page-contact .ct-form-heading__sub {
        font-family: var(--font-inter, sans-serif);
        font-size: 15px;
        line-height: 1.55;
        color: var(--color-pencil, #6f6c69);
        max-width: 540px;
        margin: 0 auto;
    }

    /* Form card */
    .page-contact .ct-form-card {
        max-width: 780px;
        margin: 0 auto;
        padding: 44px 48px 40px;
        background: var(--color-paper, #fefdfc);
        border: 1px solid rgba(215, 214, 212, 0.6);
        border-radius: 24px;
        box-shadow: 0 24px 60px rgba(37, 34, 30, 0.08),
                    0 4px 12px rgba(37, 34, 30, 0.04);
    }
    .page-contact .ct-form {
        display: flex;
        flex-direction: column;
        gap: 22px;
    }
    .page-contact .ct-form__row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 22px;
    }
    .page-contact .ct-form__field {
        display: flex;
        flex-direction: column;
    }
    .page-contact .ct-form__label {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-family: var(--font-inter, sans-serif);
        font-size: 12.5px;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--color-deep-ember, #cf3520);
        margin-bottom: 8px;
    }
    .page-contact .ct-form__label i {
        color: var(--color-ember-red, #e34432);
        font-size: 11px;
    }
    .page-contact .ct-form__input {
        width: 100%;
        padding: 13px 16px;
        background: #fff9f2;
        border: 1.5px solid rgba(215, 214, 212, 0.7);
        border-radius: 12px;
        font-family: var(--font-inter, sans-serif);
        font-size: 15px;
        line-height: 1.5;
        color: var(--color-ink, #25221e);
        transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
        outline: none;
    }
    .page-contact .ct-form__input::placeholder {
        color: var(--color-graphite, #94928f);
    }
    .page-contact .ct-form__input:hover {
        border-color: rgba(227, 68, 50, 0.3);
    }
    .page-contact .ct-form__input:focus {
        background: #ffffff;
        border-color: var(--color-ember-red, #e34432);
        box-shadow: 0 0 0 4px rgba(227, 68, 50, 0.12);
    }
    .page-contact .ct-form__input.is-invalid {
        border-color: #dc3545 !important;
        background: rgba(220, 53, 69, 0.04);
    }
    .page-contact .ct-form__input.is-invalid:focus {
        box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.12);
    }
    .page-contact .ct-form__textarea {
        resize: vertical;
        min-height: 130px;
    }
    .page-contact .ct-form__error,
    .page-contact .ct-form__field .text-danger,
    .page-contact .ct-form__field .custom-error-message {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-family: var(--font-inter, sans-serif);
        font-size: 12.5px;
        font-weight: 600;
        color: #dc3545;
        margin-top: 8px;
    }

    /* Captcha */
    .page-contact .ct-form__captcha {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 14px;
        align-items: stretch;
    }
    .page-contact .ct-form__captcha-img {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 6px 12px;
        background: #ffffff;
        border: 1.5px solid rgba(215, 214, 212, 0.7);
        border-radius: 12px;
        min-width: 140px;
    }
    .page-contact .ct-form__captcha-img img {
        max-height: 44px;
        width: auto;
        display: block;
    }

    /* Submit */
    .page-contact .ct-form__submit {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        margin-top: 10px;
        padding: 15px 28px;
        background: var(--color-ember-red, #e34432);
        color: #ffffff;
        border: 0;
        border-radius: 999px;
        font-family: var(--font-inter, sans-serif);
        font-size: 14px;
        font-weight: 800;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        cursor: pointer;
        box-shadow: 0 12px 28px rgba(227, 68, 50, 0.38);
        transition: transform 0.28s ease, background 0.28s ease, box-shadow 0.28s ease;
        align-self: center;
        min-width: 240px;
    }
    .page-contact .ct-form__submit:hover {
        background: var(--color-deep-ember, #cf3520);
        transform: translateY(-2px);
        box-shadow: 0 16px 34px rgba(227, 68, 50, 0.5);
    }
    .page-contact .ct-form__submit i {
        font-size: 12px;
        transition: transform 0.25s ease;
    }
    .page-contact .ct-form__submit:hover i {
        transform: translateX(3px);
    }

    /* Brand mark */
    .page-contact .ct-brand-mark {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin-top: 44px;
        padding-top: 30px;
        border-top: 1px dashed rgba(215, 214, 212, 0.6);
    }
    .page-contact .ct-brand-mark__title {
        font-family: var(--font-graphik, sans-serif);
        font-size: 22px;
        font-weight: 800;
        color: var(--color-ink, #25221e);
        letter-spacing: -0.01em;
        margin-bottom: 6px;
    }
    .page-contact .ct-brand-mark__desc {
        font-family: var(--font-inter, sans-serif);
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--color-deep-ember, #cf3520);
    }

    /* Responsive */
    @media (max-width: 991px) {
        .page-contact .ct-info-grid {
            grid-template-columns: 1fr;
            gap: 16px;
        }
        .page-contact .ct-info {
            flex-direction: row;
            align-items: center;
            padding: 20px 22px;
            gap: 16px;
        }
        .page-contact .ct-info__icon {
            margin-bottom: 0;
        }
        .page-contact .ct-info__label,
        .page-contact .ct-info__value {
            display: block;
        }
        .page-contact .ct-form-card {
            padding: 32px 28px 32px;
        }
    }
    @media (max-width: 575px) {
        .page-contact .ct-hero { padding: 48px 0 32px; }
        .page-contact .ct-form-section { padding: 56px 0 72px; }
        .page-contact .ct-form__row {
            grid-template-columns: 1fr;
            gap: 18px;
        }
        .page-contact .ct-form__captcha {
            grid-template-columns: 1fr;
        }
        .page-contact .ct-form__captcha-img {
            min-width: 0;
        }
        .page-contact .ct-form__submit {
            width: 100%;
            min-width: 0;
        }
        .page-contact .ct-form-card {
            padding: 28px 20px 30px;
            border-radius: 20px;
        }
    }

/* ===================== page-coursecart ===================== */
    /* =========================================
       COURSE CART REDESIGN — Warm Editorial Theme
       ========================================= */
    .page-coursecart .ccart-redesign{
        position: relative;
        overflow: hidden;
        background-color: var(--surface-paper-canvas, #fefdfc);
        padding: var(--spacing-48, 48px) 0 var(--spacing-80, 80px);
        font-family: var(--font-inter, sans-serif);
        min-height: 60vh;
    }
    
    /* Background Pattern & Glow Blobs */
    .page-coursecart .ccart-pattern{
        position: absolute;
        inset: 0;
        background-image: radial-gradient(rgba(37, 34, 30, 0.03) 1.2px, transparent 1.2px);
        background-size: 24px 24px;
        pointer-events: none;
        z-index: 0;
    }
    .page-coursecart .ccart-glow{
        position: absolute;
        border-radius: 50%;
        filter: blur(120px);
        pointer-events: none;
        z-index: 0;
        opacity: 0.65;
        mix-blend-mode: multiply;
    }
    .page-coursecart .ccart-glow-mint{ 
        width: 450px; 
        height: 450px; 
        background: radial-gradient(circle, var(--color-mint-wash, #f0f6df) 0%, rgba(240, 246, 223, 0.2) 70%, transparent 100%); 
        top: -150px; 
        left: -100px; 
        animation: page-coursecart-ccRedesignDrift 22s ease-in-out infinite; 
    }
    .page-coursecart .ccart-glow-sky{ 
        width: 400px; 
        height: 400px; 
        background: radial-gradient(circle, var(--color-sky-wash, #dceaff) 0%, rgba(220, 234, 255, 0.2) 70%, transparent 100%); 
        bottom: 8%; 
        right: -100px; 
        animation: page-coursecart-ccRedesignDrift 28s ease-in-out infinite reverse; 
    }
    @keyframes page-coursecart-ccRedesignDrift { 
        0%, 100% { transform: translate(0, 0) scale(1); } 
        50% { transform: translate(40px, -30px) scale(1.08); } 
    }
    
    .page-coursecart .ccart-redesign .container{ 
        position: relative; 
        z-index: 1; 
    }

    /* ---- AVAILABLE CREDITS BALANCE CARD ---- */
    .page-coursecart .ccart-balance-card{
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: var(--spacing-20, 20px);
        padding: var(--spacing-24, 24px) var(--spacing-32, 32px);
        margin-bottom: var(--spacing-32, 32px);
        border-radius: var(--radius-xl, 15px);
        background: linear-gradient(135deg, var(--color-paper, #fefdfc), #ffffff);
        border: 1px solid var(--color-stone, #d7d6d4);
        box-shadow: 0 4px 20px rgba(37, 34, 30, 0.03);
        animation: page-coursecart-ccFadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
        position: relative;
        overflow: hidden;
    }
    .page-coursecart .ccart-balance-card::before{
        content: '';
        position: absolute;
        top: 0; left: 0; width: 4px; height: 100%;
        background: var(--color-ember-red, #e34432);
    }
    .page-coursecart .ccart-balance-card__info{ 
        display: flex; 
        align-items: center; 
        gap: var(--spacing-20, 20px); 
    }
    .page-coursecart .ccart-balance-card__icon-wrap{
        width: 60px; 
        height: 60px;
        display: inline-flex; 
        align-items: center; 
        justify-content: center;
        border-radius: 50%;
        background: rgba(227, 68, 50, 0.06);
        color: var(--color-ember-red, #e34432);
        font-size: 24px;
        box-shadow: inset 0 2px 6px rgba(227, 68, 50, 0.05);
    }
    .page-coursecart .ccart-balance-card__text{
        display: flex;
        flex-direction: column;
        gap: var(--spacing-4, 4px);
    }
    .page-coursecart .ccart-balance-card__label{ 
        font-size: 13px; 
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-weight: 600;
        color: var(--color-pencil, #6f6c69); 
    }
    .page-coursecart .ccart-balance-card__value{ 
        font-family: var(--font-graphik, sans-serif); 
        font-size: 28px; 
        font-weight: 800; 
        color: var(--color-ink, #25221e); 
        line-height: 1.1; 
        display: flex;
        align-items: baseline;
        gap: 6px;
    }
    .page-coursecart .ccart-balance-card__currency{ 
        font-size: 13px; 
        color: var(--color-deep-ember, #cf3520); 
        font-weight: 700; 
        letter-spacing: 0.05em;
    }
    
    /* Elegant top up button */
    .page-coursecart .ccart-btn-topup{
        display: inline-flex; 
        align-items: center; 
        gap: 8px;
        padding: 12px 24px; 
        border-radius: var(--radius-buttons, 8px);
        background: var(--color-ink, #25221e);
        color: var(--color-paper, #fefdfc);
        font-size: 14px; 
        font-weight: 600;
        text-decoration: none; 
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        border: 1px solid var(--color-ink, #25221e);
        box-shadow: 0 4px 12px rgba(37, 34, 30, 0.15);
    }
    .page-coursecart .ccart-btn-topup:hover{ 
        background: var(--color-ember-red, #e34432); 
        border-color: var(--color-ember-red, #e34432); 
        color: var(--color-paper, #fefdfc); 
        transform: translateY(-2px); 
        box-shadow: 0 6px 18px rgba(227, 68, 50, 0.3);
    }
    .page-coursecart .ccart-btn-topup:active{
        transform: translateY(0);
    }

    /* ---- CARDS & CONTAINERS ---- */
    .page-coursecart .ccart-items-section{
        background: var(--color-paper, #fefdfc);
        border: 1px solid var(--color-stone, #d7d6d4);
        border-radius: var(--radius-xl, 15px);
        padding: var(--spacing-32, 32px);
        box-shadow: 0 4px 20px rgba(37, 34, 30, 0.02);
    }
    .page-coursecart .ccart-section-header{
        display: flex; 
        align-items: center; 
        justify-content: space-between;
        padding-bottom: var(--spacing-20, 20px); 
        margin-bottom: var(--spacing-24, 24px);
        border-bottom: 1px solid var(--color-stone, #d7d6d4);
    }
    .page-coursecart .ccart-section-title{
        display: flex; 
        align-items: center; 
        gap: 12px;
        font-family: var(--font-graphik, sans-serif);
        font-size: 20px; 
        font-weight: 700;
        color: var(--color-ink, #25221e); 
        margin: 0;
    }
    .page-coursecart .ccart-section-title i{ 
        color: var(--color-ember-red, #e34432); 
        font-size: 20px; 
    }
    .page-coursecart .ccart-section-count{
        background: #f0f6df; 
        color: var(--color-deep-ember, #cf3520);
        font-size: 13px; 
        font-weight: 700;
        padding: 4px 12px; 
        border-radius: 999px;
    }

    /* Modern List of Cart Items */
    .page-coursecart .ccart-items-list{
        display: flex;
        flex-direction: column;
        gap: var(--spacing-16, 16px);
    }

    /* Horizontal Cart Card Redesign */
    .page-coursecart .ccart-item-card{
        display: flex;
        align-items: center;
        gap: var(--spacing-20, 20px);
        background: var(--color-paper, #fefdfc);
        border: 1px solid var(--color-stone, #d7d6d4);
        border-radius: var(--radius-lg, 8px);
        padding: var(--spacing-16, 16px);
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        position: relative;
    }
    .page-coursecart .ccart-item-card:hover{
        transform: translateY(-2px);
        box-shadow: 0 10px 30px rgba(37, 34, 30, 0.06);
        border-color: rgba(227, 68, 50, 0.25);
    }
    
    /* Card media/thumbnail */
    .page-coursecart .ccart-item-card__media{
        position: relative;
        width: 140px;
        height: 84px;
        flex-shrink: 0;
        border-radius: 6px;
        overflow: hidden;
        background: linear-gradient(135deg, var(--color-cream, #fff6f0), var(--color-mint-wash, #f0f6df));
        border: 1px solid rgba(0, 0, 0, 0.05);
    }
    .page-coursecart .ccart-item-card__media img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
    }
    .page-coursecart .ccart-item-card:hover .ccart-item-card__media img{
        transform: scale(1.05);
    }
    
    /* Badges positioned on images */
    .page-coursecart .ccart-item-card__badge{
        position: absolute;
        bottom: 6px;
        left: 6px;
        z-index: 2;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 3px 8px;
        border-radius: var(--radius-sm, 2.5px);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.02em;
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        text-transform: uppercase;
    }
    .page-coursecart .ccart-item-card__badge--course{
        background: rgba(254, 253, 252, 0.95);
        color: var(--color-forest, #446c3d);
        border: 1px solid var(--color-stone, #d7d6d4);
    }
    .page-coursecart .ccart-item-card__badge--topup{
        background: rgba(254, 253, 252, 0.95);
        color: var(--color-deep-ember, #cf3520);
        border: 1px solid var(--color-stone, #d7d6d4);
    }

    /* Credits Visual (in place of top-up images) */
    .page-coursecart .ccart-item-card__credits-visual{
        width: 140px;
        height: 84px;
        flex-shrink: 0;
        border-radius: 6px;
        background: linear-gradient(135deg, #f0f6df 0%, rgba(255, 160, 32, 0.08) 100%);
        border: 1px solid rgba(227, 68, 50, 0.15);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: var(--color-ember-red, #e34432);
        gap: 2px;
        box-shadow: inset 0 2px 6px rgba(227, 68, 50, 0.02);
    }
    .page-coursecart .ccart-item-card__credits-visual i{
        font-size: 20px;
        animation: page-coursecart-ccCoinPulse 2s ease-in-out infinite;
    }
    .page-coursecart .ccart-item-card__credits-amount{
        font-family: var(--font-graphik, sans-serif);
        font-size: 15px;
        font-weight: 800;
        color: var(--color-ink, #25221e);
        line-height: 1.1;
        margin-top: 2px;
    }
    .page-coursecart .ccart-item-card__credits-unit{
        font-size: 9px;
        font-weight: 700;
        color: var(--color-deep-ember, #cf3520);
        letter-spacing: 0.05em;
    }
    
    @keyframes page-coursecart-ccCoinPulse {
        0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 transparent); }
        50% { transform: scale(1.1); filter: drop-shadow(0 2px 4px rgba(227, 68, 50, 0.2)); }
    }

    /* Details styling */
    .page-coursecart .ccart-item-card__details{
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        gap: 6px;
        min-width: 0; /* Prevents overflow with flex */
    }
    .page-coursecart .ccart-item-card__title{
        font-family: var(--font-graphik, sans-serif);
        font-size: 16px;
        font-weight: 600;
        line-height: 1.35;
        color: var(--color-ink, #25221e);
        text-decoration: none;
        transition: color 0.2s ease;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .page-coursecart .ccart-item-card__title:hover{
        color: var(--color-deep-ember, #cf3520);
        text-decoration: none;
    }
    .page-coursecart .ccart-item-card__meta{
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 12px;
        color: var(--color-pencil, #6f6c69);
    }
    .page-coursecart .ccart-item-card__type{
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }
    .page-coursecart .ccart-item-card__type i{
        font-size: 11px;
    }

    /* Cost alignment */
    .page-coursecart .ccart-item-card__cost{
        text-align: right;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-end;
        padding-left: var(--spacing-16, 16px);
        border-left: 1px solid var(--color-stone, #d7d6d4);
        min-width: 130px;
    }
    .page-coursecart .ccart-item-card__cost-label{
        font-size: 11px;
        color: var(--color-pencil, #6f6c69);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 2px;
    }
    .page-coursecart .ccart-item-card__cost-value{
        font-family: var(--font-graphik, sans-serif);
        font-size: 18px;
        font-weight: 700;
        color: var(--color-ink, #25221e);
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }
    .page-coursecart .ccart-item-card__cost-value i{
        color: var(--color-ember-red, #e34432);
        font-size: 14px;
        margin-right: 2px;
    }
    .page-coursecart .ccart-item-card__cost-value .cost-creds{
        display: flex;
        align-items: baseline;
        gap: 3px;
        font-weight: 700;
        color: var(--color-ink, #25221e);
    }
    .page-coursecart .ccart-item-card__cost-value .cost-unit{
        font-size: 11px;
        font-weight: 700;
        color: var(--color-pencil, #6f6c69);
    }
    .page-coursecart .ccart-item-card__cost-value .cost-price{
        font-size: 17px;
        color: var(--color-ink, #25221e);
        font-weight: 700;
    }

    /* Action (Remove button) */
    .page-coursecart .ccart-item-card__action{
        flex-shrink: 0;
    }
    .page-coursecart .ccart-item-card__remove{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: transparent;
        color: var(--color-graphite, #94928f);
        font-size: 14px;
        transition: all 0.2s ease;
        border: 1px solid transparent;
        text-decoration: none;
    }
    .page-coursecart .ccart-item-card__remove:hover{
        background: #f0f6df;
        border-color: rgba(227, 68, 50, 0.1);
        color: var(--color-ember-red, #e34432);
        transform: scale(1.08);
        text-decoration: none;
    }

    /* ---- STICKY ORDER SUMMARY SIDEBAR ---- */
    .page-coursecart .ccart-sidebar{
        position: -webkit-sticky;
        position: sticky;
        top: 110px;
        background: linear-gradient(180deg, var(--color-paper, #fefdfc) 0%, var(--surface-cream-wash, #fff6f0) 100%);
        border: 1px solid var(--color-stone, #d7d6d4);
        border-radius: var(--radius-xl, 15px);
        padding: var(--spacing-28, 28px);
        box-shadow: 0 10px 30px rgba(37, 34, 30, 0.04);
        animation: page-coursecart-ccFadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
    }
    .page-coursecart .ccart-sidebar__header{
        border-bottom: 1px solid var(--color-stone, #d7d6d4);
        padding-bottom: var(--spacing-16, 16px);
        margin-bottom: var(--spacing-20, 20px);
    }
    .page-coursecart .ccart-sidebar__title{
        display: flex;
        align-items: center;
        gap: 8px;
        font-family: var(--font-graphik, sans-serif);
        font-size: 18px;
        font-weight: 700;
        color: var(--color-ink, #25221e);
        margin: 0;
    }
    .page-coursecart .ccart-sidebar__title i{
        color: var(--color-ember-red, #e34432);
        font-size: 16px;
    }
    
    .page-coursecart .ccart-sidebar__rows{
        display: flex;
        flex-direction: column;
        gap: var(--spacing-12, 12px);
        margin-bottom: var(--spacing-20, 20px);
    }
    .page-coursecart .ccart-sidebar__row{
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
    }
    .page-coursecart .ccart-sidebar__row-label{
        color: var(--color-pencil, #6f6c69);
    }
    .page-coursecart .ccart-sidebar__row-value{
        font-weight: 600;
        color: var(--color-ink, #25221e);
    }
    
    /* Total cost indicator */
    .page-coursecart .ccart-sidebar__row--total{
        padding-top: var(--spacing-16, 16px);
        border-top: 1px solid var(--color-stone, #d7d6d4);
        margin-top: 4px;
        align-items: baseline;
    }
    .page-coursecart .ccart-sidebar__row--total .ccart-sidebar__row-label{
        font-size: 15px;
        font-weight: 700;
        color: var(--color-ink, #25221e);
    }
    .page-coursecart .ccart-sidebar__row--total .ccart-sidebar__row-value{
        font-family: var(--font-graphik, sans-serif);
        font-size: 24px;
        font-weight: 800;
        color: var(--color-ember-red, #e34432);
        display: flex;
        align-items: baseline;
        gap: 4px;
    }
    .page-coursecart .ccart-sidebar__row--total .ccart-sidebar__row-value i{
        font-size: 16px;
    }
    .page-coursecart .ccart-sidebar__row--total .total-unit{
        font-size: 12px;
        font-weight: 700;
        color: var(--color-pencil, #6f6c69);
    }

    /* Status Alerts inside Summary */
    .page-coursecart .ccart-status-alert{
        display: flex;
        gap: 12px;
        padding: 14px;
        border-radius: var(--radius-lg, 8px);
        margin-bottom: var(--spacing-20, 20px);
        border: 1px solid transparent;
    }
    .page-coursecart .ccart-status-alert--success{
        background-color: var(--color-mint-wash, #f0f6df);
        border-color: rgba(68, 108, 61, 0.15);
        color: var(--color-forest, #446c3d);
    }
    .page-coursecart .ccart-status-alert--danger{
        background-color: rgba(227, 68, 50, 0.06);
        border-color: rgba(227, 68, 50, 0.12);
        color: var(--color-deep-ember, #cf3520);
    }
    .page-coursecart .ccart-status-alert__icon{
        font-size: 16px;
        margin-top: 1px;
    }
    .page-coursecart .ccart-status-alert__content{
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    .page-coursecart .ccart-status-alert__title{
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.02em;
    }
    .page-coursecart .ccart-status-alert__desc{
        font-size: 12px;
        line-height: 1.4;
        opacity: 0.9;
    }

    /* Reusable Cart Action Button */
    .page-coursecart .ccart-action-btn{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 13px 24px;
        border-radius: var(--radius-buttons, 8px);
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
        cursor: pointer;
        border: none;
        transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
        text-align: center;
    }
    .page-coursecart .ccart-action-btn:hover{
        text-decoration: none;
    }
    .page-coursecart .ccart-action-btn--primary{
        background: var(--color-ember-red, #e34432);
        color: var(--color-paper, #fefdfc);
        box-shadow: 0 4px 14px rgba(227, 68, 50, 0.25);
    }
    .page-coursecart .ccart-action-btn--primary:hover{
        background: var(--color-deep-ember, #cf3520);
        color: var(--color-paper, #fefdfc);
        transform: translateY(-2px);
        box-shadow: 0 6px 18px rgba(227, 68, 50, 0.35);
    }
    .page-coursecart .ccart-action-btn--checkout{
        background: var(--color-ember-red, #e34432);
        color: var(--color-paper, #fefdfc);
        box-shadow: 0 4px 14px rgba(227, 68, 50, 0.2);
    }
    .page-coursecart .ccart-action-btn--checkout:hover{
        background: var(--color-deep-ember, #cf3520);
        color: var(--color-paper, #fefdfc);
        transform: translateY(-2px);
        box-shadow: 0 6px 18px rgba(227, 68, 50, 0.3);
    }
    .page-coursecart .ccart-action-btn--topup{
        background: var(--color-ink, #25221e);
        color: var(--color-paper, #fefdfc);
        margin-bottom: var(--spacing-12, 12px);
    }
    .page-coursecart .ccart-action-btn--topup:hover{
        background: #000;
        color: var(--color-paper, #fefdfc);
        transform: translateY(-2px);
    }
    .page-coursecart .ccart-action-btn--ghost{
        background: transparent;
        color: var(--color-pencil, #6f6c69);
        border: 1px solid var(--color-stone, #d7d6d4);
    }
    .page-coursecart .ccart-action-btn--ghost:hover{
        background: var(--color-cream, #fff6f0);
        border-color: rgba(227, 68, 50, 0.2);
        color: var(--color-deep-ember, #cf3520);
    }
    .page-coursecart .ccart-action-btn--disabled{
        background: var(--color-stone, #d7d6d4);
        color: var(--color-graphite, #94928f);
        cursor: not-allowed;
        box-shadow: none;
    }
    .page-coursecart .ccart-action-btn--disabled:hover{
        background: var(--color-stone, #d7d6d4);
        color: var(--color-graphite, #94928f);
        transform: none;
        box-shadow: none;
    }
    .page-coursecart .ccart-action-btn--block{
        display: flex;
        width: 100%;
        margin-bottom: var(--spacing-12, 12px);
    }
    .page-coursecart .ccart-action-btn--block:last-child{
        margin-bottom: 0;
    }

    /* Empty State for Summary */
    .page-coursecart .ccart-sidebar__empty{
        text-align: center;
        padding: var(--spacing-24, 24px) var(--spacing-16, 16px);
        background: rgba(37, 34, 30, 0.02);
        border: 1px dashed var(--color-stone, #d7d6d4);
        border-radius: var(--radius-lg, 8px);
    }
    .page-coursecart .ccart-sidebar__empty i{
        font-size: 24px;
        color: var(--color-graphite, #94928f);
        margin-bottom: 8px;
        display: block;
    }
    .page-coursecart .ccart-sidebar__empty p{
        font-size: 13px;
        color: var(--color-pencil, #6f6c69);
        margin: 0;
        line-height: 1.4;
    }

    /* ---- EMPTY & GUARD STATES ---- */
    .page-coursecart .ccart-empty-state, .page-coursecart .ccart-guard-card{
        text-align: center;
        padding: var(--spacing-48, 48px) var(--spacing-24, 24px);
    }
    .page-coursecart .ccart-empty-state__icon-wrap, .page-coursecart .ccart-guard-card__icon-wrap{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: var(--color-cream, #fff6f0);
        border: 1px solid var(--color-stone, #d7d6d4);
        color: var(--color-graphite, #94928f);
        font-size: 32px;
        margin-bottom: var(--spacing-20, 20px);
        box-shadow: inset 0 2px 8px rgba(0,0,0,0.02);
    }
    .page-coursecart .ccart-empty-state__title, .page-coursecart .ccart-guard-card__title{
        font-family: var(--font-graphik, sans-serif);
        font-size: 22px;
        font-weight: 700;
        color: var(--color-ink, #25221e);
        margin: 0 0 var(--spacing-12, 12px);
    }
    .page-coursecart .ccart-empty-state__text, .page-coursecart .ccart-guard-card__text{
        font-size: 15px;
        color: var(--color-pencil, #6f6c69);
        margin: 0 auto var(--spacing-24, 24px);
        max-width: 440px;
        line-height: 1.5;
    }
    
    .page-coursecart .ccart-guard-card{
        max-width: 540px;
        margin: 0 auto;
        background: var(--color-paper, #fefdfc);
        border: 1px solid var(--color-stone, #d7d6d4);
        border-radius: var(--radius-xl, 15px);
        box-shadow: 0 10px 40px rgba(37, 34, 30, 0.05);
        padding: var(--spacing-48, 48px) var(--spacing-32, 32px);
        animation: page-coursecart-ccFadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    /* ---- Animations ---- */
    @keyframes page-coursecart-ccFadeUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    .page-coursecart .ccart-items-section{
        animation: page-coursecart-ccFadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
    }

    /* ---- Responsive Adaptations ---- */
    @media (max-width: 991px) {
        .page-coursecart .ccart-sidebar{
            position: static;
            top: auto;
            margin-top: var(--spacing-16, 16px);
        }
    }
    @media (max-width: 767px) {
        .page-coursecart .ccart-item-card{
            flex-direction: column;
            align-items: stretch;
            gap: var(--spacing-16, 16px);
        }
        .page-coursecart .ccart-item-card__media{
            width: 100%;
            height: 180px;
        }
        .page-coursecart .ccart-item-card__credits-visual{
            width: 100%;
            height: 120px;
        }
        .page-coursecart .ccart-item-card__cost{
            border-left: none;
            border-top: 1px solid var(--color-stone, #d7d6d4);
            padding-left: 0;
            padding-top: var(--spacing-12, 12px);
            align-items: flex-start;
            text-align: left;
            min-width: 0;
        }
        .page-coursecart .ccart-item-card__cost-value{
            align-items: flex-start;
            flex-direction: row;
            gap: 8px;
        }
        .page-coursecart .ccart-item-card__remove{
            position: absolute;
            top: 12px;
            right: 12px;
            background: rgba(255, 255, 255, 0.9);
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        .page-coursecart .ccart-balance-card{
            flex-direction: column;
            align-items: stretch;
            padding: var(--spacing-20, 20px);
        }
        .page-coursecart .ccart-btn-topup{
            justify-content: center;
        }
    }
    @media (max-width: 575px) {
        .page-coursecart .ccart-redesign{
            padding: var(--spacing-32, 32px) 0 var(--spacing-64, 64px);
        }
        .page-coursecart .ccart-items-section{
            padding: var(--spacing-20, 20px);
        }
    }
    @media (prefers-reduced-motion: reduce) {
        .page-coursecart .ccart-glow, .page-coursecart .ccart-balance-card, .page-coursecart .ccart-items-section, .page-coursecart .ccart-sidebar, .page-coursecart .ccart-guard-card{
            animation: none !important;
        }
    }

/* ===================== page-dashboard ===================== */
    /* ============================================================
       USER DASHBOARD - REDESIGNED CREATIVE STUDIO CANVAS GRID
       ============================================================ */

    .page-dashboard .account-section{
        background-color: var(--surface-paper-canvas, #fefdfc);
        position: relative;
        overflow: hidden;
        min-height: 75vh;
    }

    /* Ambient background glows */
    .page-dashboard .account-bg-blob{
        position: absolute;
        border-radius: 50%;
        filter: blur(120px);
        -webkit-filter: blur(120px);
        pointer-events: none;
        opacity: 0.65;
        z-index: 0;
        mix-blend-mode: multiply;
    }
    .page-dashboard .blob-mint{
        width: 420px;
        height: 420px;
        background-color: var(--color-mint-wash, #f0f6df);
        top: -100px;
        left: -100px;
        animation: page-dashboard-dbFloat 20s ease-in-out infinite;
    }
    .page-dashboard .blob-sky{
        width: 360px;
        height: 360px;
        background-color: var(--color-sky-wash, #dceaff);
        bottom: -80px;
        right: -80px;
        animation: page-dashboard-dbFloat 24s ease-in-out infinite reverse;
    }
    .page-dashboard .blob-peach{
        width: 300px;
        height: 300px;
        background-color: var(--surface-cream-wash, #fff6f0);
        top: 40%;
        left: 45%;
        animation: page-dashboard-dbFloat 28s ease-in-out infinite;
    }

    @keyframes page-dashboard-dbFloat {
        0%, 100% { transform: translate(0, 0) scale(1); }
        50%      { transform: translate(24px, -28px) scale(1.06); }
    }

    .page-dashboard .account-container{
        position: relative;
        z-index: 1;
    }

    /* ---- LEFT PANEL: SIDEBAR ---- */
    .page-dashboard .db-profile-sidebar{
        display: flex;
        flex-direction: column;
        height: 100%;
        animation: page-dashboard-dbFadeInLeft 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    /* Core Coach Lab Member Card (Credit Card / Glassmorphic look) */
    .page-dashboard .artify-member-card{
        background: linear-gradient(135deg, #1e1b18 0%, #2f2b27 100%);
        border: 1px solid rgba(254, 253, 252, 0.08);
        border-radius: 20px;
        padding: 24px;
        position: relative;
        overflow: hidden;
        box-shadow: 0 14px 32px rgba(30, 27, 24, 0.18);
        margin-bottom: 24px;
        color: #fff;
    }
    .page-dashboard .member-card-glow{
        position: absolute;
        top: -50px;
        right: -50px;
        width: 150px;
        height: 150px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(227, 68, 50, 0.4) 0%, transparent 70%);
        filter: blur(10px);
        pointer-events: none;
    }
    .page-dashboard .member-card-inner{
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: 150px;
    }
    .page-dashboard .member-card-header{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .page-dashboard .member-logo{
        font-family: var(--font-graphik), sans-serif;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.15em;
        opacity: 0.8;
    }
    .page-dashboard .coin-icon{
        font-size: 20px;
        color: #ffb830;
        text-shadow: 0 0 10px rgba(255, 184, 48, 0.5);
    }
    .page-dashboard .member-card-body{
        margin: 16px 0;
    }
    .page-dashboard .balance-label{
        font-family: var(--font-inter), sans-serif;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.1em;
        opacity: 0.6;
        text-transform: uppercase;
        display: block;
        margin-bottom: 4px;
    }
    .page-dashboard .balance-value{
        font-family: var(--font-graphik), sans-serif;
        font-size: 32px;
        font-weight: 800;
        color: #fff;
        margin: 0;
        display: flex;
        align-items: baseline;
        gap: 6px;
    }
    .page-dashboard .balance-value small{
        font-size: 14px;
        font-weight: 600;
        color: var(--color-ember-red, #e34432);
    }
    .page-dashboard .member-card-footer{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .page-dashboard .member-name{
        font-family: var(--font-inter), sans-serif;
        font-size: 13px;
        font-weight: 600;
        opacity: 0.9;
        letter-spacing: 0.02em;
    }
    .page-dashboard .member-topup-btn{
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.2);
        padding: 6px 12px;
        border-radius: 8px;
        font-family: var(--font-inter), sans-serif;
        font-size: 11px;
        font-weight: 700;
        color: #fff;
        text-decoration: none;
        transition: all 0.2s ease;
    }
    .page-dashboard .member-topup-btn:hover{
        background: #fff;
        color: #1e1b18;
    }

    /* Greeting Overview */
    .page-dashboard .db-profile-overview{
        background: var(--color-cream, #fff6f0);
        border: 1px solid var(--color-stone, #d7d6d4);
        border-radius: 18px;
        padding: 22px;
        box-shadow: var(--shadow-subtle);
    }
    .page-dashboard .greeting-title{
        font-family: var(--font-graphik), sans-serif;
        font-size: 18px;
        font-weight: 700;
        color: var(--color-ink, #25221e);
        margin: 0 0 6px 0;
    }
    .page-dashboard .greeting-text{
        font-family: var(--font-inter), sans-serif;
        font-size: 13px;
        line-height: 1.5;
        color: var(--color-pencil, #6f6c69);
        margin: 0 0 18px 0;
    }
    .page-dashboard .db-mini-stats{
        display: flex;
        align-items: center;
        background: var(--color-paper, #fefdfc);
        border: 1px solid var(--color-stone, #d7d6d4);
        border-radius: 12px;
        padding: 12px 6px;
    }
    .page-dashboard .mini-stat-item{
        flex: 1;
        text-align: center;
    }
    .page-dashboard .mini-stat-value{
        display: block;
        font-family: var(--font-graphik), sans-serif;
        font-size: 20px;
        font-weight: 800;
        color: var(--color-ink, #25221e);
        line-height: 1.1;
    }
    .page-dashboard .mini-stat-label{
        font-family: var(--font-inter), sans-serif;
        font-size: 9.5px;
        font-weight: 700;
        text-transform: uppercase;
        color: var(--color-graphite, #94928f);
        letter-spacing: 0.05em;
        margin-top: 4px;
        display: block;
    }
    .page-dashboard .mini-stat-divider{
        width: 1px;
        height: 24px;
        background-color: var(--color-stone, #d7d6d4);
    }

    /* Vertical Navigation tabs */
    .page-dashboard .db-side-tabs{
        background: var(--color-paper, #fefdfc);
        border: 1px solid var(--color-stone, #d7d6d4);
        border-radius: 18px;
        padding: 10px;
        gap: 4px;
        box-shadow: var(--shadow-subtle);
    }
    .page-dashboard .db-side-tabs .nav-link{
        display: flex;
        align-items: center;
        gap: 12px;
        border-radius: 10px;
        padding: 12px 16px;
        background: transparent;
        border: none;
        font-family: var(--font-inter), sans-serif;
        font-size: 14px;
        font-weight: 600;
        color: var(--color-pencil, #6f6c69);
        text-align: left;
        width: 100%;
        transition: all 0.25s ease;
    }
    .page-dashboard .db-side-tabs .nav-link i{
        font-size: 14px;
        opacity: 0.8;
    }
    .page-dashboard .db-side-tabs .nav-link:hover{
        color: var(--color-deep-ember, #cf3520);
        background: var(--surface-cream-wash, #fff6f0);
    }
    .page-dashboard .db-side-tabs .nav-link.active{
        color: var(--color-ember-red, #e34432);
        background: var(--color-cream, #fff6f0);
        position: relative;
    }
    .page-dashboard .db-side-tabs .nav-link.active::after{
        content: '';
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: var(--color-ember-red, #e34432);
    }
    .page-dashboard .db-side-logout{
        display: flex;
        align-items: center;
        gap: 12px;
        border-radius: 10px;
        padding: 12px 16px;
        font-family: var(--font-inter), sans-serif;
        font-size: 14px;
        font-weight: 700;
        color: var(--color-ember-red, #e34432);
        text-decoration: none;
        transition: all 0.2s ease;
    }
    .page-dashboard .db-side-logout:hover{
        background: rgba(227, 68, 50, 0.06);
        color: var(--color-deep-ember, #cf3520);
    }

    /* ---- RIGHT PANEL: MAIN CONTENT ---- */
    .page-dashboard .db-main-content{
        animation: page-dashboard-dbFadeInRight 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
    }
    .page-dashboard .db-content-card{
        background: var(--color-paper, #fefdfc);
        border: 1px solid var(--color-stone, #d7d6d4);
        border-radius: 18px;
        padding: 36px clamp(18px, 4vw, 44px);
        box-shadow: var(--shadow-subtle);
        height: 100%;
    }
    .page-dashboard .db-content-card__title{
        font-family: var(--font-graphik), sans-serif;
        font-size: 20px;
        font-weight: 700;
        color: var(--color-ink, #25221e);
        margin-bottom: 28px;
        display: flex;
        align-items: center;
    }
    .page-dashboard .db-content-card__title i{
        color: var(--color-ember-red, #e34432);
    }

    /* ---- TABLE DESIGN ---- */
    .page-dashboard .db-table{
        margin: 0;
        border-collapse: separate;
        border-spacing: 0;
    }
    .page-dashboard .db-table thead th{
        background: var(--surface-cream-wash, #fff6f0) !important;
        border-bottom: 1.5px solid var(--color-stone, #d7d6d4) !important;
        color: var(--color-deep-ember, #cf3520) !important;
        font-family: var(--font-inter), sans-serif;
        font-weight: 700;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        padding: 14px 16px;
    }
    .page-dashboard .db-table tbody tr{
        border-bottom: 1px solid rgba(37,34,30,0.06) !important;
        transition: background-color 0.2s ease;
    }
    .page-dashboard .db-table tbody tr:hover{
        background-color: var(--color-cream, #fff6f0) !important;
    }
    .page-dashboard .db-table tbody td{
        padding: 16px;
        vertical-align: middle;
        font-family: var(--font-inter), sans-serif;
        font-size: 14px;
        color: var(--color-pencil, #6f6c69);
    }
    .page-dashboard .db-table__highlight{
        font-weight: 700;
        color: var(--color-ink, #25221e) !important;
    }
    .page-dashboard .db-table__course-title{
        color: var(--color-ink, #25221e) !important;
        font-weight: 600;
    }
    .page-dashboard .db-table__price{
        font-family: var(--font-graphik), sans-serif;
        font-weight: 700;
        color: var(--color-ink, #25221e);
    }
    .page-dashboard .db-table__date{
        color: var(--color-graphite, #94928f);
    }

    /* ---- BADGES & PILLS ---- */
    .page-dashboard .db-points-badge{
        display: inline-flex;
        align-items: center;
        padding: 5px 10px;
        border-radius: 6px;
        font-size: 12px;
        font-weight: 700;
        border: 1px solid transparent;
    }
    .page-dashboard .db-points-badge--amber{
        background: var(--color-cream, #fff6f0);
        border-color: rgba(227, 68, 50, 0.15);
        color: var(--color-ember-red, #e34432);
    }
    .page-dashboard .db-points-badge--teal{
        background: var(--color-sky-wash, #dceaff);
        border-color: rgba(73, 125, 126, 0.15);
        color: var(--color-teal-dusk, #497d7e);
    }

    .page-dashboard .db-status-pill{
        display: inline-flex;
        align-items: center;
        padding: 4px 10px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }
    .page-dashboard .db-status-pill--success{ background: var(--color-mint-wash, #f0f6df); color: var(--color-forest, #446c3d); }
    .page-dashboard .db-status-pill--warning{ background: var(--surface-cream-wash, #fff6f0); color: #cf7820; }
    .page-dashboard .db-status-pill--danger{ background: #ffebeb; color: #cf3220; }
    .page-dashboard .db-status-pill--teal{ background: var(--color-sky-wash, #dceaff); color: var(--color-teal-dusk, #497d7e); }
    .page-dashboard .db-status-pill--neutral{ background: #f1f0ef; color: var(--color-pencil, #6f6c69); }

    /* ---- ACTION BUTTONS ---- */
    .page-dashboard .db-action-btn{
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: transparent;
        border: 1px solid var(--color-stone, #d7d6d4);
        color: var(--color-pencil, #6f6c69);
        padding: 6px 12px;
        font-size: 12px;
        font-weight: 600;
        border-radius: 8px;
        text-decoration: none;
        transition: all 0.25s ease;
    }
    .page-dashboard .db-action-btn:hover{
        border-color: rgba(227, 68, 50, 0.3);
        background: var(--color-cream, #fff6f0);
        color: var(--color-deep-ember, #cf3520);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(37,34,30,0.03);
    }

    /* ---- FORMS ---- */
    .page-dashboard .db-form{
        display: grid;
        gap: 20px;
    }
    .page-dashboard .db-form-group{
        display: flex;
        flex-direction: column;
    }
    .page-dashboard .db-label{
        font-family: var(--font-inter), sans-serif;
        font-size: 12px;
        font-weight: 700;
        color: var(--color-ink, #25221e);
        margin-bottom: 6px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        display: flex;
        align-items: center;
    }
    .page-dashboard .db-label i{
        color: var(--color-ember-red, #e34432);
    }
    .page-dashboard .db-input{
        width: 100%;
        padding: 12px 15px;
        background: var(--surface-paper-canvas, #fefdfc);
        border: 1.5px solid var(--color-stone, #d7d6d4);
        border-radius: var(--radius-lg, 8px);
        color: var(--color-ink, #25221e);
        font-family: var(--font-inter), sans-serif;
        font-size: 14px;
        transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .page-dashboard .db-input:focus{
        outline: none;
        background: #fff;
        border-color: var(--color-ember-red, #e34432);
        box-shadow: 0 0 0 4px rgba(227, 68, 50, 0.12);
        transform: translateY(-1px);
    }
    .page-dashboard .db-submit-btn{
        background: var(--color-ember-red, #e34432);
        color: var(--color-paper, #fefdfc);
        border: none;
        border-radius: var(--radius-buttons, 8px);
        padding: 14px 20px;
        font-family: var(--font-inter), sans-serif;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
        box-shadow: 0 4px 14px rgba(227, 68, 50, 0.2);
    }
    .page-dashboard .db-submit-btn:hover{
        background: var(--color-deep-ember, #cf3520);
        transform: translateY(-2px);
        box-shadow: 0 6px 18px rgba(227, 68, 50, 0.35);
    }

    /* ---- ENTRANCE ANIMATIONS ---- */
    @keyframes page-dashboard-dbFadeInLeft {
        from { opacity: 0; transform: translateX(-32px); }
        to   { opacity: 1; transform: translateX(0); }
    }
    @keyframes page-dashboard-dbFadeInRight {
        from { opacity: 0; transform: translateX(32px); }
        to   { opacity: 1; transform: translateX(0); }
    }

    /* ---- RESPONSIVE ---- */
    @media (max-width: 991px) {
        .page-dashboard .db-profile-sidebar{ margin-bottom: 32px; }
        .page-dashboard .db-content-card{ padding: 24px 20px; }
    }
    @media (max-width: 575px) {
        .page-dashboard .db-mini-stats{ padding: 12px 4px; }
        .page-dashboard .db-side-tabs{ padding: 6px; }
        .page-dashboard .db-side-tabs .nav-link{ padding: 10px 12px; }
    }
    @media (prefers-reduced-motion: reduce) {
        .page-dashboard .db-profile-sidebar,
        .page-dashboard .db-main-content,
        .page-dashboard .account-bg-blob{ animation: none !important; }
    }

    .page-dashboard .db-input.is-invalid{
        border-color: var(--color-ember-red, #e34432) !important;
        background-color: #fffaf9 !important;
    }

    /* ============================================================
       DASHBOARD — EDITORIAL REDESIGN (dash-* classes)
       ============================================================ */

    /* Shared eyebrow */
    .page-dashboard .dash-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-family: var(--font-inter, sans-serif);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: var(--color-deep-ember, #c1940d);
        margin-bottom: 14px;
    }
    .page-dashboard .dash-eyebrow--dark { color: #f5b74a; }
    .page-dashboard .dash-eyebrow__dot {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--color-ember-red, #f5c518);
        box-shadow: 0 0 10px rgba(193, 148, 13, 0.55);
        animation: dashPulse 1.8s ease-in-out infinite;
    }
    @keyframes dashPulse {
        0%,100% { transform: scale(1); opacity: 1; }
        50%     { transform: scale(1.25); opacity: 0.75; }
    }

    /* ============================================================
       HERO
       ============================================================ */
    .page-dashboard .dash-hero {
        position: relative;
        overflow: hidden;
        padding: 48px 0 44px;
        background: linear-gradient(180deg, #fff9f1 0%, #fefdfc 100%);
    }
    .page-dashboard .dash-hero__blob {
        position: absolute;
        border-radius: 50%;
        filter: blur(90px);
        pointer-events: none;
        z-index: 0;
    }
    .page-dashboard .dash-hero__blob--a {
        top: -160px; right: -120px;
        width: 380px; height: 380px;
        background: rgba(193, 148, 13, 0.15);
    }
    .page-dashboard .dash-hero__blob--b {
        bottom: -180px; left: -100px;
        width: 340px; height: 340px;
        background: rgba(15, 102, 174, 0.10);
    }
    .page-dashboard .dash-hero__inner {
        position: relative;
        z-index: 1;
    }
    .page-dashboard .dash-hero__grid {
        display: grid;
        grid-template-columns: 1.15fr 1fr;
        gap: 40px;
        align-items: stretch;
    }

    /* Welcome (left) */
    .page-dashboard .dash-hero__welcome {
        display: flex;
        gap: 20px;
        align-items: flex-start;
    }
    .page-dashboard .dash-hero__avatar {
        flex-shrink: 0;
        width: 64px;
        height: 64px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, var(--color-ember-red, #f5c518), var(--color-deep-ember, #c1940d));
        color: #ffffff;
        font-family: var(--font-graphik, sans-serif);
        font-size: 22px;
        font-weight: 800;
        box-shadow: 0 12px 26px rgba(193, 148, 13, 0.35),
                    inset 0 1px 0 rgba(255, 255, 255, 0.25);
    }
    .page-dashboard .dash-hero__title {
        font-family: var(--font-graphik, sans-serif);
        font-size: clamp(28px, 3.6vw, 40px);
        font-weight: 800;
        line-height: 1.1;
        letter-spacing: -0.03em;
        color: var(--color-ink, #25221e);
        margin: 0 0 10px 0;
    }
    .page-dashboard .dash-hero__lede {
        font-family: var(--font-inter, sans-serif);
        font-size: 15px;
        line-height: 1.6;
        color: var(--color-pencil, #6f6c69);
        margin: 0 0 16px 0;
        max-width: 480px;
    }
    .page-dashboard .dash-hero__logout {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 14px;
        border-radius: 999px;
        background: rgba(220, 53, 69, 0.08);
        border: 1px solid rgba(220, 53, 69, 0.25);
        color: #dc3545;
        font-family: var(--font-inter, sans-serif);
        font-size: 12.5px;
        font-weight: 700;
        letter-spacing: 0.02em;
        text-decoration: none;
        transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
    }
    .page-dashboard .dash-hero__logout:hover {
        background: rgba(220, 53, 69, 0.14);
        border-color: rgba(220, 53, 69, 0.45);
        color: #b91c1c;
        transform: translateY(-1px);
    }
    .page-dashboard .dash-hero__logout i { font-size: 11px; }

    /* Dark balance card (right) */
    .page-dashboard .dash-hero__balance {
        position: relative;
        background: linear-gradient(160deg, #16130f 0%, #221d17 100%);
        border-radius: 22px;
        color: rgba(255, 255, 255, 0.85);
        overflow: hidden;
        box-shadow: 0 22px 50px rgba(22, 19, 15, 0.28);
        border: 1px solid rgba(255, 255, 255, 0.06);
    }
    .page-dashboard .dash-hero__balance-glow {
        position: absolute;
        top: -100px; right: -60px;
        width: 260px; height: 260px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(193, 148, 13, 0.35) 0%, transparent 65%);
        filter: blur(50px);
        pointer-events: none;
    }
    .page-dashboard .dash-hero__balance-inner {
        position: relative;
        z-index: 1;
        padding: 26px 28px 24px;
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    .page-dashboard .dash-hero__balance-label {
        display: block;
        font-family: var(--font-inter, sans-serif);
        font-size: 11.5px;
        font-weight: 800;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.55);
        margin-bottom: 8px;
    }
    .page-dashboard .dash-hero__balance-value {
        font-family: var(--font-graphik, sans-serif);
        font-size: 44px;
        font-weight: 800;
        color: #ffffff;
        line-height: 1;
        letter-spacing: -0.03em;
        margin-bottom: 20px;
    }
    .page-dashboard .dash-hero__balance-value small {
        font-family: var(--font-inter, sans-serif);
        font-size: 13px;
        font-weight: 700;
        color: #f5b74a;
        margin-left: 8px;
        letter-spacing: 0.05em;
    }
    .page-dashboard .dash-hero__balance-foot {
        margin-top: auto;
        padding-top: 18px;
        border-top: 1px dashed rgba(255, 255, 255, 0.14);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
    }
    .page-dashboard .dash-hero__balance-name {
        font-family: var(--font-graphik, sans-serif);
        font-size: 14.5px;
        font-weight: 700;
        color: #ffffff;
    }
    .page-dashboard .dash-hero__topup {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 9px 16px;
        border-radius: 999px;
        background: var(--color-ember-red, #f5c518);
        color: #ffffff;
        font-family: var(--font-inter, sans-serif);
        font-size: 12.5px;
        font-weight: 700;
        letter-spacing: 0.02em;
        text-decoration: none;
        box-shadow: 0 8px 18px rgba(193, 148, 13, 0.4);
        transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
    }
    .page-dashboard .dash-hero__topup:hover {
        background: var(--color-deep-ember, #c1940d);
        transform: translateY(-2px);
        color: #ffffff;
        box-shadow: 0 12px 24px rgba(193, 148, 13, 0.55);
    }
    .page-dashboard .dash-hero__topup i { font-size: 10px; }

    /* Stats row */
    .page-dashboard .dash-hero__stats {
        margin-top: 32px;
        padding: 22px 26px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 22px;
        background: var(--color-paper, #fefdfc);
        border: 1px solid rgba(215, 214, 212, 0.6);
        border-radius: 20px;
        box-shadow: 0 10px 26px rgba(37, 34, 30, 0.05);
    }
    .page-dashboard .dash-stat {
        display: flex;
        flex-direction: column;
        gap: 6px;
        border-left: 3px solid transparent;
        padding-left: 14px;
    }
    .page-dashboard .dash-stat:first-child { border-left-color: var(--color-ember-red, #f5c518); }
    .page-dashboard .dash-stat:nth-child(2) { border-left-color: var(--color-forest, #446c3d); }
    .page-dashboard .dash-stat:nth-child(3) { border-left-color: var(--color-cobalt-link, #0f66ae); }
    .page-dashboard .dash-stat__num {
        font-family: var(--font-graphik, sans-serif);
        font-size: 34px;
        font-weight: 800;
        color: var(--color-ink, #25221e);
        line-height: 1;
        letter-spacing: -0.02em;
    }
    .page-dashboard .dash-stat__label {
        font-family: var(--font-inter, sans-serif);
        font-size: 11.5px;
        font-weight: 800;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--color-graphite, #94928f);
    }

    /* ============================================================
       CONTENT SECTION
       ============================================================ */
    .page-dashboard .dash-content {
        padding: 40px 0 96px;
        background: #fefdfc;
    }

    /* Editorial tab bar (dark pill container) */
    .page-dashboard .dash-tabs {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
        padding: 8px !important;
        background: linear-gradient(180deg, #1c1812 0%, #16130f 100%) !important;
        border-radius: 999px !important;
        box-shadow:
            0 20px 40px rgba(22, 19, 15, 0.30),
            inset 0 1px 0 rgba(255, 255, 255, 0.08),
            inset 0 0 0 1px rgba(255, 255, 255, 0.04);
        margin-bottom: 32px !important;
        list-style: none !important;
        overflow: hidden;
    }
    .page-dashboard .dash-tabs .nav-item {
        display: flex;
    }
    .page-dashboard .dash-tab,
    .page-dashboard .dash-tabs .nav-link {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
        width: 100% !important;
        padding: 13px 18px !important;
        border-radius: 999px !important;
        background: transparent !important;
        border: 0 !important;
        color: rgba(255, 255, 255, 0.85) !important;
        font-family: var(--font-inter, sans-serif) !important;
        font-size: 13.5px !important;
        font-weight: 600 !important;
        cursor: pointer;
        transition: background 0.28s ease, color 0.28s ease, transform 0.28s ease;
        white-space: nowrap;
        text-decoration: none !important;
    }
    .page-dashboard .dash-tab__num {
        font-family: var(--font-graphik, sans-serif);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.06em;
        color: #f5b74a !important;
        padding: 3px 7px;
        border-radius: 999px;
        background: rgba(245, 197, 24, 0.14);
        border: 1px solid rgba(245, 197, 24, 0.22);
        line-height: 1;
        transition: background 0.28s ease, color 0.28s ease, border-color 0.28s ease;
    }
    .page-dashboard .dash-tab__label {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        color: inherit;
    }
    .page-dashboard .dash-tab__label i {
        font-size: 13px;
        color: inherit;
        opacity: 0.85;
    }
    .page-dashboard .dash-tab:hover,
    .page-dashboard .dash-tabs .nav-link:hover {
        background: rgba(255, 255, 255, 0.06) !important;
        color: #ffffff !important;
    }
    .page-dashboard .dash-tab:hover .dash-tab__num,
    .page-dashboard .dash-tabs .nav-link:hover .dash-tab__num {
        background: rgba(245, 197, 24, 0.22);
        border-color: rgba(245, 197, 24, 0.38);
        color: #ffd166 !important;
    }
    .page-dashboard .dash-tab.active,
    .page-dashboard .dash-tabs .nav-link.active {
        background: linear-gradient(135deg, #f5c518 0%, #c1940d 100%) !important;
        color: #ffffff !important;
        box-shadow:
            0 10px 24px rgba(193, 148, 13, 0.45),
            inset 0 1px 0 rgba(255, 255, 255, 0.30),
            inset 0 0 0 1px rgba(255, 255, 255, 0.10);
        transform: translateY(-1px);
    }
    .page-dashboard .dash-tab.active .dash-tab__num,
    .page-dashboard .dash-tabs .nav-link.active .dash-tab__num {
        color: #ffffff !important;
        background: rgba(255, 255, 255, 0.26);
        border-color: rgba(255, 255, 255, 0.24);
    }
    .page-dashboard .dash-tab.active .dash-tab__label i,
    .page-dashboard .dash-tabs .nav-link.active .dash-tab__label i {
        opacity: 1;
    }

    /* Panels */
    .page-dashboard .dash-panels {}
    .page-dashboard .dash-panel {
        position: relative;
        background: var(--color-paper, #fefdfc);
        border: 1px solid rgba(215, 214, 212, 0.6);
        border-radius: 22px;
        padding: 32px 34px 34px;
        box-shadow: 0 18px 40px rgba(37, 34, 30, 0.06);
    }
    .page-dashboard .dash-panel__head {
        display: flex;
        align-items: center;
        gap: 16px;
        padding-bottom: 20px;
        margin-bottom: 22px;
        border-bottom: 1px dashed rgba(215, 214, 212, 0.7);
    }
    .page-dashboard .dash-panel__ico {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 46px;
        border-radius: 14px;
        background: linear-gradient(135deg, #f5c518 0%, #c1940d 100%);
        color: #ffffff;
        font-size: 18px;
        box-shadow: 0 8px 18px rgba(193, 148, 13, 0.32);
        flex-shrink: 0;
    }
    .page-dashboard .dash-panel__title {
        font-family: var(--font-graphik, sans-serif);
        font-size: 22px;
        font-weight: 800;
        color: var(--color-ink, #25221e);
        margin: 0 0 4px 0;
        letter-spacing: -0.01em;
    }
    .page-dashboard .dash-panel__sub {
        font-family: var(--font-inter, sans-serif);
        font-size: 11.5px;
        font-weight: 800;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--color-graphite, #94928f);
        margin: 0;
    }

    /* Table */
    .page-dashboard .dash-table {
        width: 100%;
        margin: 0;
        border-collapse: separate;
        border-spacing: 0;
    }
    .page-dashboard .dash-table thead th {
        background: #fff9f1;
        color: var(--color-deep-ember, #c1940d);
        font-family: var(--font-inter, sans-serif);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        padding: 12px 14px;
        border: 0;
        border-bottom: 1px solid rgba(215, 214, 212, 0.7);
    }
    .page-dashboard .dash-table thead th:first-child {
        border-top-left-radius: 12px;
        border-bottom-left-radius: 12px;
    }
    .page-dashboard .dash-table thead th:last-child {
        border-top-right-radius: 12px;
        border-bottom-right-radius: 12px;
    }
    .page-dashboard .dash-table tbody td {
        padding: 16px 14px;
        border-top: 1px dashed rgba(215, 214, 212, 0.6);
        vertical-align: middle;
        font-family: var(--font-inter, sans-serif);
        font-size: 13.5px;
        color: var(--color-ink, #25221e);
    }
    .page-dashboard .dash-table tbody tr:hover {
        background: rgba(193, 148, 13, 0.03);
    }
    .page-dashboard .dash-table__ref {
        font-family: var(--font-graphik, sans-serif);
        font-weight: 800;
        color: var(--color-deep-ember, #c1940d);
        letter-spacing: 0.02em;
    }
    .page-dashboard .dash-table__price {
        font-family: var(--font-graphik, sans-serif);
        font-weight: 800;
        color: var(--color-ink, #25221e);
    }
    .page-dashboard .dash-table__date {
        color: var(--color-graphite, #94928f);
        font-weight: 600;
    }
    .page-dashboard .dash-table__course {
        font-weight: 700;
        color: var(--color-ink, #25221e);
    }

    /* Chip */
    .page-dashboard .dash-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 5px 10px;
        border-radius: 999px;
        font-family: var(--font-inter, sans-serif);
        font-size: 11.5px;
        font-weight: 800;
        letter-spacing: 0.05em;
        text-transform: uppercase;
    }
    .page-dashboard .dash-chip i { font-size: 10px; }
    .page-dashboard .dash-chip--ember {
        background: rgba(193, 148, 13, 0.10);
        color: var(--color-deep-ember, #c1940d);
        border: 1px solid rgba(193, 148, 13, 0.22);
    }

    /* Status pills */
    .page-dashboard .dash-status {
        display: inline-flex;
        align-items: center;
        padding: 4px 12px;
        border-radius: 999px;
        font-family: var(--font-inter, sans-serif);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }
    .page-dashboard .dash-status--success {
        background: rgba(68, 108, 61, 0.12);
        color: var(--color-forest, #446c3d);
        border: 1px solid rgba(68, 108, 61, 0.25);
    }
    .page-dashboard .dash-status--warning {
        background: rgba(245, 158, 11, 0.12);
        color: #b45309;
        border: 1px solid rgba(245, 158, 11, 0.25);
    }
    .page-dashboard .dash-status--danger {
        background: rgba(220, 53, 69, 0.10);
        color: #b91c1c;
        border: 1px solid rgba(220, 53, 69, 0.25);
    }
    .page-dashboard .dash-status--info {
        background: rgba(15, 102, 174, 0.10);
        color: var(--color-cobalt-link, #0f66ae);
        border: 1px solid rgba(15, 102, 174, 0.22);
    }
    .page-dashboard .dash-status--neutral {
        background: rgba(37, 34, 30, 0.06);
        color: var(--color-pencil, #6f6c69);
        border: 1px solid rgba(37, 34, 30, 0.10);
    }

    /* Action button */
    .page-dashboard .dash-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 7px 14px;
        border-radius: 999px;
        background: transparent;
        border: 1px solid rgba(215, 214, 212, 0.7);
        color: var(--color-ink, #25221e);
        font-family: var(--font-inter, sans-serif);
        font-size: 12px;
        font-weight: 700;
        text-decoration: none;
        letter-spacing: 0.02em;
        transition: all 0.22s ease;
    }
    .page-dashboard .dash-btn:hover {
        background: var(--color-ember-red, #f5c518);
        border-color: var(--color-ember-red, #f5c518);
        color: #ffffff;
        transform: translateY(-1px);
        box-shadow: 0 8px 16px rgba(193, 148, 13, 0.28);
    }
    .page-dashboard .dash-btn i { font-size: 10px; }

    /* Empty state */
    .page-dashboard .dash-empty {
        text-align: center;
        padding: 40px 20px;
        color: var(--color-pencil, #6f6c69);
        font-family: var(--font-inter, sans-serif);
        font-size: 14px;
    }
    .page-dashboard .dash-empty__ico {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 68px;
        height: 68px;
        border-radius: 50%;
        background: rgba(193, 148, 13, 0.08);
        color: var(--color-deep-ember, #c1940d);
        font-size: 26px;
        margin-bottom: 12px;
    }
    .page-dashboard .dash-empty p {
        margin: 0;
        font-weight: 600;
    }

    /* Password form — fills the full panel width, ember locked */
    .page-dashboard .dash-form {
        display: flex;
        flex-direction: column;
        gap: 22px;
        width: 100%;
        max-width: none;
    }
    .page-dashboard .dash-form__row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 22px;
    }
    .page-dashboard .dash-field {
        display: flex;
        flex-direction: column;
    }
    .page-dashboard .dash-label {
        display: inline-flex !important;
        align-items: center;
        gap: 8px;
        font-family: var(--font-inter, sans-serif) !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        letter-spacing: 0.06em !important;
        text-transform: uppercase !important;
        color: #c1940d !important;
        margin-bottom: 8px !important;
    }
    .page-dashboard .dash-label i {
        color: #f5c518 !important;
        font-size: 11px !important;
    }
    .page-dashboard .dash-input {
        width: 100% !important;
        padding: 14px 18px !important;
        background: #fff9f2 !important;
        border: 1.5px solid rgba(215, 214, 212, 0.7) !important;
        border-radius: 12px !important;
        font-family: var(--font-inter, sans-serif) !important;
        font-size: 15px !important;
        line-height: 1.5;
        color: var(--color-ink, #25221e) !important;
        transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease !important;
        outline: none !important;
        box-shadow: none;
    }
    .page-dashboard .dash-input::placeholder {
        color: var(--color-graphite, #94928f);
    }
    .page-dashboard .dash-input:hover {
        border-color: rgba(193, 148, 13, 0.35) !important;
    }
    .page-dashboard .dash-input:focus {
        background: #ffffff !important;
        border-color: #f5c518 !important;
        box-shadow: 0 0 0 4px rgba(193, 148, 13, 0.12) !important;
    }
    .page-dashboard .dash-input.is-invalid {
        border-color: #dc3545 !important;
        background: rgba(220, 53, 69, 0.04) !important;
    }
    .page-dashboard .dash-submit {
        margin-top: 10px !important;
        align-self: flex-start;
        display: inline-flex !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 15px 34px !important;
        min-width: 260px;
        background: #f5c518 !important;
        color: #ffffff !important;
        border: 0 !important;
        border-radius: 999px !important;
        font-family: var(--font-inter, sans-serif) !important;
        font-size: 14px !important;
        font-weight: 800 !important;
        letter-spacing: 0.04em !important;
        text-transform: uppercase !important;
        cursor: pointer;
        box-shadow: 0 12px 26px rgba(193, 148, 13, 0.38) !important;
        transition: transform 0.28s ease, background 0.28s ease, box-shadow 0.28s ease !important;
    }
    .page-dashboard .dash-submit:hover {
        background: #c1940d !important;
        transform: translateY(-2px);
        box-shadow: 0 16px 32px rgba(193, 148, 13, 0.5) !important;
    }
    .page-dashboard .dash-submit i {
        font-size: 12px;
        transition: transform 0.25s ease;
    }
    .page-dashboard .dash-submit:hover i {
        transform: translateX(3px);
    }

    /* Responsive */
    @media (max-width: 991px) {
        .page-dashboard .dash-hero__grid {
            grid-template-columns: 1fr;
            gap: 28px;
        }
        .page-dashboard .dash-hero__stats {
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
            padding: 18px 20px;
        }
        .page-dashboard .dash-panel {
            padding: 28px 24px 26px;
        }
        .page-dashboard .dash-tabs {
            grid-template-columns: 1fr;
            border-radius: 22px;
        }
    }
    @media (max-width: 575px) {
        .page-dashboard .dash-hero {
            padding: 32px 0 32px;
        }
        .page-dashboard .dash-hero__welcome {
            gap: 14px;
        }
        .page-dashboard .dash-hero__avatar {
            width: 52px; height: 52px; font-size: 18px;
        }
        .page-dashboard .dash-hero__balance-inner {
            padding: 22px 22px 20px;
        }
        .page-dashboard .dash-hero__balance-value { font-size: 36px; }
        .page-dashboard .dash-hero__stats {
            grid-template-columns: 1fr;
        }
        .page-dashboard .dash-panel__head {
            gap: 12px;
        }
        .page-dashboard .dash-panel__title { font-size: 18px; }
        .page-dashboard .dash-form__row {
            grid-template-columns: 1fr;
        }
        .page-dashboard .dash-submit {
            width: 100%;
            justify-content: center;
        }
    }

/* ===================== page-forget-pwd-form ===================== */
    /* ============================================================
       FORGOT PASSWORD PAGE - REVAMPED PREMIUM EDITORIAL STYLE
       ============================================================ */

    .page-forget-pwd-form .auth-page-section{
        background-color: #fffdfb; /* Crisp warm backdrop */
        position: relative;
        overflow: hidden;
    }

    /* Ambient blur backdrop shapes */
    .page-forget-pwd-form .auth-bg-blob{
        position: absolute;
        border-radius: 50%;
        filter: blur(90px);
        -webkit-filter: blur(90px);
        pointer-events: none;
        opacity: 0.55;
        z-index: 1;
    }

    .page-forget-pwd-form .auth-bg-blob.blob-1{
        width: 380px;
        height: 380px;
        background-color: var(--color-mint-wash, #f0f6df);
        top: -100px;
        left: -120px;
    }

    .page-forget-pwd-form .auth-bg-blob.blob-2{
        width: 320px;
        height: 320px;
        background-color: var(--color-sky-wash, #dceaff);
        bottom: -80px;
        right: -80px;
    }

    .page-forget-pwd-form .auth-content-container{
        position: relative;
        z-index: 2;
    }

    /* Single Unified Premium Card Layout */
    .page-forget-pwd-form .unified-auth-card{
        background-color: var(--surface-paper-canvas, #fefdfc);
        border: 1px solid var(--color-stone, #d7d6d4);
        border-radius: var(--radius-cards, 12px);
        overflow: hidden;
        box-shadow: var(--shadow-subtle, 0px 1px 0px 0px rgba(37, 34, 30, 0.04));
        transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        animation: page-forget-pwd-form-slideInUp 0.6s ease-out;
    }

    .page-forget-pwd-form .unified-auth-card:hover{
        border-color: var(--color-stone, #d7d6d4);
        box-shadow: var(--shadow-lg, 0px 14px 19px -9px rgba(37, 34, 30, 0.07), 0px 10px 48px 0px rgba(37, 34, 30, 0.18));
    }

    /* Left Panel details style */
    .page-forget-pwd-form .brand-details-panel{
        background-color: var(--surface-cream-wash, #fff6f0);
        border-right: 1px solid var(--color-stone, #d7d6d4);
    }

    .page-forget-pwd-form .panel-content{
        padding: var(--spacing-48, 48px);
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .page-forget-pwd-form .panel-title{
        font-family: var(--font-graphik), sans-serif;
        font-size: var(--text-heading, 38px);
        font-weight: var(--font-weight-bold, 700);
        line-height: var(--leading-heading, 1.28);
        letter-spacing: var(--tracking-heading, -0.19px);
        color: var(--color-ink, #25221e);
    }

    .page-forget-pwd-form .panel-text{
        font-family: var(--font-inter), sans-serif;
        font-size: var(--text-body, 16px);
        line-height: var(--leading-body, 1.5);
        color: var(--color-pencil, #6f6c69);
    }

    /* Benefits Metadata List inside the panel */
    .page-forget-pwd-form .benefits-info-list{
        display: flex;
        flex-direction: column;
    }

    .page-forget-pwd-form .benefit-item{
        display: flex;
        align-items: flex-start;
        gap: 16px;
    }

    .page-forget-pwd-form .benefit-icon{
        width: 42px;
        height: 42px;
        min-width: 42px;
        border-radius: 6px;
        background-color: var(--surface-paper-canvas, #fefdfc);
        border: 1px solid var(--color-stone, #d7d6d4);
        color: var(--color-deep-ember, #cf3520);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        transition: all 0.3s ease;
    }

    .page-forget-pwd-form .benefit-item:hover .benefit-icon{
        background-color: var(--color-ember-red, #e34432);
        border-color: var(--color-ember-red, #e34432);
        color: #ffffff;
    }

    .page-forget-pwd-form .benefit-body{
        display: flex;
        flex-direction: column;
    }

    .page-forget-pwd-form .benefit-title{
        font-family: var(--font-inter), sans-serif;
        font-size: var(--text-body-sm, 14px);
        font-weight: var(--font-weight-semibold, 600);
        color: var(--color-ink, #25221e);
        margin-bottom: 2px;
    }

    .page-forget-pwd-form .benefit-desc{
        font-family: var(--font-inter), sans-serif;
        font-size: var(--text-caption, 12px);
        color: var(--color-pencil, #6f6c69);
        line-height: 1.4;
    }

    /* Bottom Brand Mark */
    .page-forget-pwd-form .panel-brand-mark{
        display: flex;
        flex-direction: column;
        border-top: 1px solid var(--color-stone, #d7d6d4);
        padding-top: 24px;
    }

    .page-forget-pwd-form .brand-mark-title{
        font-family: var(--font-graphik), sans-serif;
        font-size: var(--text-body-lg, 18px);
        font-weight: var(--font-weight-bold, 700);
        color: var(--color-ink, #25221e);
    }

    .page-forget-pwd-form .brand-mark-desc{
        font-family: var(--font-inter), sans-serif;
        font-size: var(--text-caption, 12px);
        color: var(--color-pencil, #6f6c69);
    }

    /* Right Panel: Clean Form Panel */
    .page-forget-pwd-form .form-panel{
        background-color: var(--surface-paper-canvas, #fefdfc);
    }

    .page-forget-pwd-form .form-title{
        font-family: var(--font-graphik), sans-serif;
        font-size: var(--text-subheading, 21px);
        font-weight: var(--font-weight-bold, 700);
        color: var(--color-ink, #25221e);
        margin: 0 0 8px 0;
    }

    .page-forget-pwd-form .form-subtitle{
        font-family: var(--font-inter), sans-serif;
        font-size: var(--text-body-sm, 14px);
        color: var(--color-pencil, #6f6c69);
        margin: 0;
    }

    /* Premium Input Elements */
    .page-forget-pwd-form .premium-input-label{
        display: block;
        font-family: var(--font-inter), sans-serif;
        font-size: var(--text-caption, 12px);
        font-weight: var(--font-weight-semibold, 600);
        color: var(--color-ink, #25221e);
        margin-bottom: 8px;
    }

    .page-forget-pwd-form .premium-form-input{
        width: 100%;
        font-family: var(--font-inter), sans-serif;
        font-size: var(--text-body-sm, 14px);
        font-weight: var(--font-weight-medium, 500);
        color: var(--color-ink, #25221e);
        background-color: var(--surface-paper-canvas, #fefdfc);
        border: 1px solid var(--color-stone, #d7d6d4);
        border-radius: var(--radius-inputs, 8px);
        padding: 12px 16px;
        transition: all 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
        outline: none;
    }

    .page-forget-pwd-form .premium-form-input::placeholder{
        color: var(--color-graphite, #94928f);
        font-weight: var(--font-weight-regular, 400);
    }

    .page-forget-pwd-form .premium-form-input:focus{
        border-color: var(--color-ember-red, #e34432);
        background-color: var(--surface-paper-canvas, #fefdfc);
        box-shadow: 0 0 0 3px #f0f6df;
    }

    /* Validation and Error elements */
    .page-forget-pwd-form .premium-form-input.is-invalid, .page-forget-pwd-form .premium-form-input.error{
        border-color: var(--color-ember-red, #e34432) !important;
        background-color: #fffaf9 !important;
    }

    .page-forget-pwd-form .premium-error-msg{
        color: var(--color-deep-ember, #cf3520);
        font-family: var(--font-inter), sans-serif;
        font-size: var(--text-caption, 12px);
        font-weight: var(--font-weight-medium, 500);
    }

    .page-forget-pwd-form label.error{
        color: var(--color-deep-ember, #cf3520) !important;
        font-family: var(--font-inter), sans-serif;
        font-size: var(--text-caption, 12px) !important;
        font-weight: var(--font-weight-medium, 500) !important;
        margin-top: 6px !important;
        display: block !important;
    }

    .page-forget-pwd-form .captcha-image-container img{
        border-radius: var(--radius-inputs, 8px);
        border: 1px solid var(--color-stone, #d7d6d4);
    }

    /* Submit Button */
    .page-forget-pwd-form .premium-submit-btn{
        width: 100%;
        font-family: var(--font-inter), sans-serif;
        font-size: var(--text-body-sm, 14px);
        font-weight: var(--font-weight-semibold, 600);
        color: #ffffff;
        background-color: var(--color-ember-red, #e34432);
        border: 1px solid var(--color-ember-red, #e34432);
        border-radius: var(--radius-buttons, 8px);
        padding: 14px 24px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
        box-shadow: 0 4px 14px rgba(227, 68, 50, 0.2);
    }

    .page-forget-pwd-form .premium-submit-btn:hover{
        background-color: var(--color-deep-ember, #cf3520);
        border-color: var(--color-deep-ember, #cf3520);
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(227, 68, 50, 0.35);
    }

    .page-forget-pwd-form .premium-submit-btn:active{
        transform: translateY(0);
    }

    /* Badges & Links Style */
    .page-forget-pwd-form .modern-badge{
        display: inline-block;
        font-family: var(--font-inter), sans-serif;
        font-size: var(--text-caption, 12px);
        font-weight: var(--font-weight-semibold, 600);
        line-height: 1;
        color: var(--color-deep-ember, #cf3520);
        background-color: var(--surface-cream-wash, #fff6f0);
        border: 1px solid var(--color-stone, #d7d6d4);
        border-radius: var(--radius-badges, 8px);
        padding: 6px 12px;
        letter-spacing: 0.05em;
        text-transform: uppercase;
    }

    .page-forget-pwd-form .register-redirect-link{
        color: var(--color-ember-red, #e34432);
        transition: color 0.2s ease;
    }

    .page-forget-pwd-form .register-redirect-link:hover{
        color: var(--color-deep-ember, #cf3520);
        text-decoration: underline !important;
    }

    @keyframes page-forget-pwd-form-slideInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @media (max-width: 991px) {
        .page-forget-pwd-form .brand-details-panel{
            border-right: none;
            border-bottom: 1px solid var(--color-stone, #d7d6d4);
        }
    }

    @media (max-width: 768px) {
        .page-forget-pwd-form .panel-content{
            padding: var(--spacing-24, 24px);
        }
    }

    /* ============================================================
       AUTH V2 — SHARED EDITORIAL DESIGN
       (login / register / forget password — same visual system)
       ============================================================ */

    .auth-v2 {
        position: relative;
        overflow: hidden;
        padding: 56px 0 88px;
        background: linear-gradient(180deg, #fff9f1 0%, #fefdfc 100%);
    }
    .auth-v2__blob {
        position: absolute;
        border-radius: 50%;
        filter: blur(90px);
        pointer-events: none;
        z-index: 0;
    }
    .auth-v2__blob--a {
        top: -160px; right: -140px;
        width: 380px; height: 380px;
        background: rgba(227, 68, 50, 0.16);
    }
    .auth-v2__blob--b {
        bottom: -180px; left: -140px;
        width: 400px; height: 400px;
        background: rgba(15, 102, 174, 0.10);
    }
    .auth-v2__inner {
        position: relative;
        z-index: 1;
    }

    /* Split card */
    .auth-v2__card {
        display: grid;
        grid-template-columns: 5fr 7fr;
        max-width: 1100px;
        margin: 0 auto;
        background: var(--color-paper, #fefdfc);
        border: 1px solid rgba(215, 214, 212, 0.6);
        border-radius: 28px;
        overflow: hidden;
        box-shadow: 0 30px 70px rgba(37, 34, 30, 0.12),
                    0 6px 16px rgba(37, 34, 30, 0.04);
    }

    /* ---- LEFT: dark editorial aside ---- */
    .auth-v2__aside {
        position: relative;
        background: linear-gradient(160deg, #16130f 0%, #221d17 100%);
        color: rgba(255, 255, 255, 0.72);
        padding: 48px 44px;
        display: flex;
        flex-direction: column;
        min-height: 100%;
        overflow: hidden;
    }
    .auth-v2__aside-glow {
        position: absolute;
        top: -180px;
        right: -100px;
        width: 320px;
        height: 320px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(227, 68, 50, 0.35) 0%, transparent 65%);
        filter: blur(60px);
        pointer-events: none;
        z-index: 0;
    }
    .auth-v2__aside-inner {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        gap: 0;
        height: 100%;
    }
    .auth-v2__aside-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 56px;
        height: 56px;
        border-radius: 16px;
        background: linear-gradient(135deg, var(--color-ember-red, #e34432), var(--color-deep-ember, #cf3520));
        color: #ffffff;
        font-size: 22px;
        margin-bottom: 22px;
        box-shadow: 0 12px 24px rgba(227, 68, 50, 0.4),
                    inset 0 1px 0 rgba(255, 255, 255, 0.25);
    }
    .auth-v2__eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-family: var(--font-inter, sans-serif);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: var(--color-deep-ember, #cf3520);
        margin-bottom: 14px;
    }
    .auth-v2__eyebrow--dark {
        color: #f0a58c;
    }
    .auth-v2__eyebrow-dot {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--color-ember-red, #e34432);
        box-shadow: 0 0 10px rgba(227, 68, 50, 0.55);
        animation: authV2Pulse 1.8s ease-in-out infinite;
    }
    @keyframes authV2Pulse {
        0%,100% { transform: scale(1); opacity: 1; }
        50%     { transform: scale(1.25); opacity: 0.75; }
    }
    .auth-v2__aside-title {
        font-family: var(--font-graphik, sans-serif);
        font-size: 28px;
        font-weight: 800;
        line-height: 1.15;
        letter-spacing: -0.02em;
        color: #ffffff;
        margin: 0 0 10px;
    }
    .auth-v2__aside-desc {
        font-family: var(--font-inter, sans-serif);
        font-size: 14.5px;
        line-height: 1.6;
        color: rgba(255, 255, 255, 0.65);
        margin: 0 0 26px;
    }

    /* Benefits list (login/register) */
    .auth-v2__benefits {
        list-style: none;
        padding: 0;
        margin: 0 0 28px 0;
        display: flex;
        flex-direction: column;
        gap: 14px;
    }
    .auth-v2__benefit {
        display: flex;
        align-items: flex-start;
        gap: 14px;
    }
    .auth-v2__benefit-check {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: rgba(227, 68, 50, 0.20);
        border: 1px solid rgba(240, 165, 140, 0.35);
        color: #f0a58c;
        font-size: 11px;
        margin-top: 2px;
    }
    .auth-v2__benefit strong {
        display: block;
        font-family: var(--font-graphik, sans-serif);
        font-size: 13.5px;
        font-weight: 700;
        color: #ffffff;
        margin-bottom: 3px;
    }
    .auth-v2__benefit p {
        font-family: var(--font-inter, sans-serif);
        font-size: 12.5px;
        line-height: 1.5;
        color: rgba(255, 255, 255, 0.55);
        margin: 0;
    }

    /* Numbered steps (forget password) */
    .auth-v2__steps {
        list-style: none;
        padding: 0;
        margin: 0 0 28px 0;
        display: flex;
        flex-direction: column;
        gap: 14px;
    }
    .auth-v2__step {
        display: flex;
        align-items: flex-start;
        gap: 14px;
    }
    .auth-v2__step-num {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 10px;
        background: rgba(227, 68, 50, 0.16);
        border: 1px solid rgba(240, 165, 140, 0.30);
        color: #f0a58c;
        font-family: var(--font-graphik, sans-serif);
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 0.02em;
    }
    .auth-v2__step strong {
        display: block;
        font-family: var(--font-graphik, sans-serif);
        font-size: 13.5px;
        font-weight: 700;
        color: #ffffff;
        margin-bottom: 3px;
    }
    .auth-v2__step p {
        font-family: var(--font-inter, sans-serif);
        font-size: 12.5px;
        line-height: 1.5;
        color: rgba(255, 255, 255, 0.55);
        margin: 0;
    }

    /* Brand mark */
    .auth-v2__brand-mark {
        margin-top: auto;
        padding-top: 22px;
        border-top: 1px dashed rgba(255, 255, 255, 0.15);
        display: flex;
        flex-direction: column;
    }
    .auth-v2__brand-name {
        font-family: var(--font-graphik, sans-serif);
        font-size: 18px;
        font-weight: 800;
        color: #ffffff;
        margin-bottom: 4px;
        letter-spacing: -0.01em;
    }
    .auth-v2__brand-tagline {
        font-family: var(--font-inter, sans-serif);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: #f0a58c;
    }

    /* ---- RIGHT: form panel ---- */
    .auth-v2__panel {
        padding: 48px 48px 42px;
        display: flex;
        flex-direction: column;
    }
    .auth-v2__panel-head {
        margin-bottom: 26px;
    }
    .auth-v2__panel-title {
        font-family: var(--font-graphik, sans-serif);
        font-size: 30px;
        font-weight: 800;
        line-height: 1.1;
        letter-spacing: -0.02em;
        color: var(--color-ink, #25221e);
        margin: 0 0 10px;
    }
    .auth-v2__panel-sub {
        font-family: var(--font-inter, sans-serif);
        font-size: 14.5px;
        line-height: 1.6;
        color: var(--color-pencil, #6f6c69);
        margin: 0;
    }

    /* Form */
    .auth-v2__form {
        display: flex;
        flex-direction: column;
        gap: 18px;
    }
    .auth-v2__row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 18px;
    }
    .auth-v2__row-inline {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin: -4px 0 4px;
    }
    .auth-v2__field {
        display: flex;
        flex-direction: column;
    }
    .auth-v2__label {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-family: var(--font-inter, sans-serif);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--color-deep-ember, #cf3520);
        margin-bottom: 8px;
    }
    .auth-v2__label i {
        color: var(--color-ember-red, #e34432);
        font-size: 11px;
    }
    .auth-v2__input {
        width: 100%;
        padding: 13px 16px;
        background: #fff9f2;
        border: 1.5px solid rgba(215, 214, 212, 0.7);
        border-radius: 12px;
        font-family: var(--font-inter, sans-serif);
        font-size: 15px;
        line-height: 1.5;
        color: var(--color-ink, #25221e);
        transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
        outline: none;
    }
    .auth-v2__input::placeholder {
        color: var(--color-graphite, #94928f);
    }
    .auth-v2__input:hover {
        border-color: rgba(227, 68, 50, 0.30);
    }
    .auth-v2__input:focus {
        background: #ffffff;
        border-color: var(--color-ember-red, #e34432);
        box-shadow: 0 0 0 4px rgba(227, 68, 50, 0.12);
    }
    .auth-v2__input.is-invalid,
    .auth-v2__input.error {
        border-color: #dc3545 !important;
        background: rgba(220, 53, 69, 0.04);
    }
    .auth-v2__input.is-invalid:focus,
    .auth-v2__input.error:focus {
        box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.12);
    }

    /* --- Password eye toggle --- */
    .auth-v2__pw-wrap {
        position: relative;
        display: flex;
        align-items: center;
    }
    .auth-v2__pw-wrap .auth-v2__input {
        width: 100%;
        padding-right: 46px; /* room for the eye button */
    }
    .auth-v2__pw-eye {
        position: absolute;
        right: 14px;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
        color: #9ca3af;
        font-size: 15px;
        line-height: 1;
        transition: color 0.2s ease, transform 0.2s ease;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .auth-v2__pw-eye:hover {
        color: var(--color-deep-ember, #cf3520);
        transform: translateY(-50%) scale(1.15);
    }
    .auth-v2__pw-eye:focus-visible {
        outline: 2px solid var(--color-deep-ember, #cf3520);
        outline-offset: 2px;
        border-radius: 4px;
    }

    .auth-v2__link {
        font-family: var(--font-inter, sans-serif);
        font-size: 13px;
        font-weight: 600;
        color: var(--color-deep-ember, #cf3520);
        text-decoration: none;
        transition: color 0.2s ease;
    }
    .auth-v2__link:hover {
        color: var(--color-ember-red, #e34432);
        text-decoration: underline;
    }

    .auth-v2__error,
    .auth-v2__field .text-danger,
    .auth-v2__field label.error {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-family: var(--font-inter, sans-serif);
        font-size: 12.5px;
        font-weight: 600;
        color: #dc3545 !important;
        margin-top: 8px;
    }

    /* Captcha */
    .auth-v2__captcha {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 14px;
    }
    .auth-v2__captcha-img {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 6px 12px;
        background: #ffffff;
        border: 1.5px solid rgba(215, 214, 212, 0.7);
        border-radius: 12px;
        min-width: 140px;
    }
    .auth-v2__captcha-img img {
        max-height: 44px;
        width: auto;
        display: block;
    }

    /* Submit */
    .auth-v2__submit {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        margin-top: 8px;
        padding: 15px 28px;
        background: var(--color-ember-red, #e34432);
        color: #ffffff;
        border: 0;
        border-radius: 999px;
        font-family: var(--font-inter, sans-serif);
        font-size: 14px;
        font-weight: 800;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        cursor: pointer;
        box-shadow: 0 12px 28px rgba(227, 68, 50, 0.38);
        transition: transform 0.28s ease, background 0.28s ease, box-shadow 0.28s ease;
        width: 100%;
    }
    .auth-v2__submit:hover {
        background: var(--color-deep-ember, #cf3520);
        transform: translateY(-2px);
        box-shadow: 0 16px 34px rgba(227, 68, 50, 0.5);
    }
    .auth-v2__submit i {
        font-size: 12px;
        transition: transform 0.25s ease;
    }
    .auth-v2__submit:hover i {
        transform: translateX(3px);
    }

    /* Divider */
    .auth-v2__divider {
        display: flex;
        align-items: center;
        gap: 14px;
        margin: 26px 0 20px;
        color: var(--color-graphite, #94928f);
        font-family: var(--font-inter, sans-serif);
        font-size: 11.5px;
        font-weight: 700;
        letter-spacing: 0.18em;
        text-transform: uppercase;
    }
    .auth-v2__divider::before,
    .auth-v2__divider::after {
        content: "";
        flex: 1;
        height: 1px;
        background: rgba(215, 214, 212, 0.7);
    }

    /* Switch link */
    .auth-v2__switch {
        text-align: center;
        font-family: var(--font-inter, sans-serif);
        font-size: 14px;
        color: var(--color-pencil, #6f6c69);
        margin: 0;
    }
    .auth-v2__switch a {
        color: var(--color-deep-ember, #cf3520);
        font-weight: 700;
        text-decoration: none;
        margin-left: 6px;
        transition: color 0.2s ease;
    }
    .auth-v2__switch a:hover {
        color: var(--color-ember-red, #e34432);
        text-decoration: underline;
    }

    /* Responsive */
    @media (max-width: 991px) {
        .auth-v2__card {
            grid-template-columns: 1fr;
        }
        .auth-v2__aside {
            padding: 40px 36px 36px;
            min-height: 0;
        }
        .auth-v2__aside-title {
            font-size: 24px;
        }
        .auth-v2__panel {
            padding: 40px 36px 36px;
        }
        .auth-v2__panel-title {
            font-size: 26px;
        }
    }
    @media (max-width: 575px) {
        .auth-v2 {
            padding: 32px 0 56px;
        }
        .auth-v2__aside,
        .auth-v2__panel {
            padding: 30px 22px 30px;
        }
        .auth-v2__aside-title {
            font-size: 22px;
        }
        .auth-v2__panel-title {
            font-size: 22px;
        }
        .auth-v2__row {
            grid-template-columns: 1fr;
        }
        .auth-v2__captcha {
            grid-template-columns: 1fr;
        }
        .auth-v2__captcha-img {
            min-width: 0;
        }
        .auth-v2__card {
            border-radius: 22px;
        }
    }

/* ===================== page-index ===================== */

    /* =========================================
       ARTIFY HERO — Arch Layout (Elegant Portrait)
       ========================================= */

    .artify-hero--arch {
        position: relative;
        background:
            radial-gradient(120% 120% at 85% 30%, #f3ecdd 0%, #efe6d4 45%, #ece2ce 100%) !important;
        padding: 96px 0 88px;
        overflow: hidden;
    }
    .artify-hero--arch__container {
        position: relative;
        z-index: 2;
        display: grid;
        grid-template-columns: 1.05fr 1fr;
        align-items: center;
        gap: 56px;
    }

    /* Decorative botanical corners */
    .artify-hero--arch__leaf {
        position: absolute;
        z-index: 1;
        pointer-events: none;
        opacity: 0.5;
        background-repeat: no-repeat;
        background-size: contain;
    }
    .artify-hero--arch__leaf--left {
        left: -30px;
        bottom: -20px;
        width: 260px;
        height: 340px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 260' fill='none' stroke='%23c9b98f' stroke-width='1.1'%3E%3Cpath d='M40 260 C40 180 55 110 110 40'/%3E%3Cpath d='M78 150 C40 140 20 160 8 190 C48 196 74 182 78 150 Z'/%3E%3Cpath d='M92 110 C58 96 34 110 20 138 C60 150 88 140 92 110 Z'/%3E%3Cpath d='M104 74 C74 58 48 70 34 96 C72 112 100 104 104 74 Z'/%3E%3Cpath d='M96 132 C126 120 150 132 164 158 C126 172 100 162 96 132 Z'/%3E%3Cpath d='M110 92 C138 78 162 88 178 112 C142 128 116 120 110 92 Z'/%3E%3C/svg%3E");
    }
    .artify-hero--arch__leaf--right {
        right: 24px;
        top: 40px;
        width: 200px;
        height: 240px;
        opacity: 0.4;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 220' fill='none' stroke='%23c9b98f' stroke-width='1.1'%3E%3Ccircle cx='118' cy='58' r='46'/%3E%3Ccircle cx='118' cy='58' r='20'/%3E%3Cpath d='M118 12 L118 104 M72 58 L164 58 M86 26 L150 90 M150 26 L86 90'/%3E%3Cpath d='M60 220 C70 170 90 140 130 118'/%3E%3Cpath d='M92 176 C70 168 54 180 46 200 C74 206 90 196 92 176 Z'/%3E%3C/svg%3E");
    }

    .artify-hero--arch__left {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        padding-left: 8px;
    }

    /* Headline */
    .artify-hero--arch__title {
        margin: 0 0 26px;
        line-height: 0.95;
    }
    .artify-hero--arch__title-serif {
        display: block;
        font-family: 'Playfair Display', Georgia, serif;
        font-weight: 500;
        font-size: clamp(44px, 6.4vw, 96px);
        letter-spacing: -0.01em;
        color: #26241f;
    }
    .artify-hero--arch__title-script {
        display: block;
        font-family: 'Great Vibes', cursive;
        font-weight: 400;
        font-size: clamp(52px, 8vw, 118px);
        line-height: 0.9;
        color: #b28f3a;
        margin-top: -4px;
    }

    /* Tagline with rule */
    .artify-hero--arch__tagline {
        display: flex;
        align-items: center;
        gap: 18px;
        margin: 6px 0 34px;
    }
    .artify-hero--arch__rule {
        width: 96px;
        height: 1px;
        background: #7b7566;
        flex-shrink: 0;
    }
    .artify-hero--arch__tagline-text {
        font-family: 'Playfair Display', Georgia, serif;
        font-size: clamp(16px, 1.6vw, 21px);
        font-style: italic;
        color: #3f3b33;
        letter-spacing: 0.01em;
    }

    /* Play + description */
    .artify-hero--arch__intro {
        margin-bottom: 34px;
        max-width: 520px;
    }
    .artify-hero--arch__desc {
        margin: 0;
        font-size: clamp(15px, 1.4vw, 17px);
        line-height: 1.75;
        color: #625c50;
        font-weight: 450;
    }

    /* CTA buttons */
    .artify-hero--arch__buttons {
        display: flex;
        gap: 14px;
        flex-wrap: wrap;
    }
    .artify-hero--arch__btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 14px 32px;
        border-radius: 50px;
        font-size: 15px;
        font-weight: 600;
        text-decoration: none;
        cursor: pointer;
        border: 1.5px solid transparent;
        transition: all 0.25s ease;
        white-space: nowrap;
    }
    .artify-hero--arch__btn--primary {
        background: #26241f;
        color: #f3ecdd;
        border-color: #26241f;
    }
    .artify-hero--arch__btn--primary:hover {
        background: #b28f3a;
        border-color: #b28f3a;
        color: #fff;
        transform: translateY(-3px);
        box-shadow: 0 10px 26px rgba(178, 143, 58, 0.35);
    }
    .artify-hero--arch__btn--secondary {
        background: transparent;
        color: #3f3b33;
        border-color: #b8ab8c;
    }
    .artify-hero--arch__btn--secondary:hover {
        border-color: #26241f;
        color: #26241f;
        transform: translateY(-3px);
    }

    /* Arched portrait */
    .artify-hero--arch__right {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .artify-hero--arch__frame {
        position: relative;
        width: 100%;
        max-width: 500px;
        aspect-ratio: 5 / 6.4;
        border-radius: 260px 260px 18px 18px;
        overflow: hidden;
        background: #ddd3bf;
        box-shadow:
            0 30px 70px rgba(60, 48, 20, 0.22),
            0 0 0 12px rgba(255, 255, 255, 0.5);
    }
    .artify-hero--arch__img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
        display: block;
        transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .artify-hero--arch__frame:hover .artify-hero--arch__img {
        transform: scale(1.04);
    }

    @media (max-width: 992px) {
        .artify-hero--arch { padding: 72px 0 72px; }
        .artify-hero--arch__container {
            grid-template-columns: 1fr;
            gap: 48px;
            text-align: center;
        }
        .artify-hero--arch__left { align-items: center; padding-left: 0; }
        .artify-hero--arch__tagline { justify-content: center; }
        .artify-hero--arch__intro { flex-direction: column; text-align: center; gap: 18px; }
        .artify-hero--arch__buttons { justify-content: center; }
        .artify-hero--arch__right { order: -1; }
        .artify-hero--arch__frame { max-width: 380px; }
        .artify-hero--arch__leaf--right { display: none; }
    }
    @media (max-width: 640px) {
        .artify-hero--arch { padding: 48px 0 56px; }
        .artify-hero--arch__frame { max-width: 300px; border-radius: 170px 170px 14px 14px; }
        .artify-hero--arch__rule { width: 56px; }
        .artify-hero--arch__leaf--left { width: 150px; height: 200px; opacity: 0.35; }
        .artify-hero--arch__buttons { width: 100%; justify-content: center; }
    }

    /* --- Carousel: stacked fade slides + dots --- */
    .artify-hero--arch__stage {
        position: relative;
        z-index: 2;
    }
    .artify-hero--arch__slides {
        display: grid;
    }
    .artify-hero--arch__slide {
        grid-area: 1 / 1;           /* stack every slide in the same cell */
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(12px);
        transition: opacity 0.7s ease, transform 0.7s ease, visibility 0s linear 0.7s;
    }
    .artify-hero--arch__slide.is-active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
        transition: opacity 0.7s ease, transform 0.7s ease, visibility 0s;
    }
    /* Gentle staggered entrance for the active slide's content */
    .artify-hero--arch__slide.is-active .artify-hero--arch__title { animation: heroFadeUp 0.7s 0.05s both; }
    .artify-hero--arch__slide.is-active .artify-hero--arch__tagline { animation: heroFadeUp 0.7s 0.15s both; }
    .artify-hero--arch__slide.is-active .artify-hero--arch__intro { animation: heroFadeUp 0.7s 0.25s both; }
    .artify-hero--arch__slide.is-active .artify-hero--arch__buttons { animation: heroFadeUp 0.7s 0.35s both; }
    .artify-hero--arch__slide.is-active .artify-hero--arch__frame { animation: heroFadeUp 0.8s 0.1s both; }
    @keyframes heroFadeUp {
        from { opacity: 0; transform: translateY(18px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    .artify-hero--arch__dots {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 12px;
        margin-top: 40px;
    }
    .artify-hero--arch__dot {
        width: 10px;
        height: 10px;
        padding: 0;
        border-radius: 50%;
        border: 1.5px solid #a99c7e;
        background: transparent;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    .artify-hero--arch__dot:hover { border-color: #b28f3a; transform: scale(1.15); }
    .artify-hero--arch__dot.is-active {
        width: 30px;
        border-radius: 6px;
        background: #b28f3a;
        border-color: #b28f3a;
    }
    @media (prefers-reduced-motion: reduce) {
        .artify-hero--arch__slide,
        .artify-hero--arch__slide.is-active * { animation: none !important; transition: opacity 0.3s ease !important; }
    }
    @media (max-width: 992px) {
        .artify-hero--arch__dots { margin-top: 28px; }
    }

    /* =========================================
       ARTIFY HERO — Professional Gallery
       ========================================= */
    .artify-hero{
    position: relative;
    overflow: hidden;
    width: 100%;
    margin: 0px auto;
    background: transparent !important;
    }
    .artify-hero__bg{
        position:absolute; inset:0; z-index:0;
        display: none;
        background-image:radial-gradient(ellipse 800px 600px at 20% 0%, rgba(220,234,255,.4) 0%, transparent 40%),
                          radial-gradient(ellipse 600px 700px at 80% 100%, rgba(227,68,50,.25) 0%, transparent 45%);
        pointer-events:none;
    }

    .artify-hero__container{
        position: relative;
    z-index: 1;
    /* overflow: hidden; */
    /* display: grid; */
    /* grid-template-columns: 1fr 1.2fr; */
    gap: 64px;
    align-items: start;
    margin: 0px auto;
    padding: 0px 0 0px 0;
    border-radius: 36px;
    /* max-width: 100%; */
    }
.artify-hero__container video {
    width: 100%;
    height: auto;
    border-radius: 36px;
}
    /* Left: Content */
.artify-hero__content {
    padding-top: 20px;
    position: absolute;
    z-index: 8;
    top: 0px;
    text-align: center;
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.artify-hero__content::before {
    background: rgba(255, 255, 255, .7);
    position: absolute;
    z-index: -1;
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
    .artify-hero__badge{
        display:inline-flex; align-items:center; gap:8px; padding:8px 16px; margin-bottom:28px;
        border-radius:999px; background:var(--color-paper,#fff); border:1px solid var(--color-stone,#d7d6d4);
        font-size:13px; font-weight:var(--font-weight-semibold,600); color:var(--color-ink,#25221e);
        box-shadow:0 1px 3px rgba(37,34,30,.05);
    }
    .artify-hero__badge i{ color:var(--color-ember-red,#e34432); }

    .artify-hero__title{
        font-family:var(--font-graphik); font-size:clamp(36px,5vw,52px);
        line-height:1.1; font-weight:var(--font-weight-bold,700); letter-spacing:-.02em;
        color:var(--color-ink,#25221e); margin:0 0 16px;
    }

    .artify-hero__subtitle{
        font-family:var(--font-inter); font-size:clamp(16px,1.8vw,21px); line-height:1.6;
        color:var(--color-pencil,#6f6c69); margin:0 0 36px; max-width:550px; font-weight:var(--font-weight-w475,475);
    }

    .artify-hero__buttons{
        display:flex; gap:14px; margin-bottom:48px; flex-wrap:wrap;
    }
    .artify-hero__btn{
        display:inline-flex; align-items:center; gap:10px; padding:14px 28px; border-radius:8px;
        font-family:var(--font-inter); font-size:16px; font-weight:var(--font-weight-semibold,600);
        text-decoration:none; cursor:pointer; border:none; transition:all .25s cubic-bezier(.34,1.56,.64,1);
    }
    .artify-hero__btn--primary{
        background:var(--color-ember-red,#e34432); color:#fff; box-shadow:0 8px 24px rgba(227,68,50,.3);
    }
    .artify-hero__btn--primary:hover{
        background:var(--color-deep-ember,#cf3520); transform:translateY(-3px); box-shadow:0 12px 32px rgba(227,68,50,.4);
        color: #ffffff;
    }
    .artify-hero__btn--secondary{
        background:#fff; color:var(--color-ink,#25221e); border:1.5px solid var(--color-stone,#d7d6d4);
        box-shadow:0 1px 3px rgba(37,34,30,.05);
    }
    .artify-hero__btn--secondary:hover{
        border-color:var(--color-ink,#25221e); background:var(--color-paper,#fff); transform:translateY(-3px);
    }

    .artify-hero__meta{
        display:flex; align-items:center; gap:14px; flex-wrap:wrap;
    }
    .artify-hero__avatars{
        display:flex;
    }
    .artify-hero__avatars img{
        width:40px; height:40px; border-radius:50%; object-fit:cover; border:2px solid #fff;
        box-shadow:0 2px 8px rgba(37,34,30,.12); margin-right:-12px;
    }
    .artify-hero__avatars img:first-child{ margin-right:-8px; }
    .artify-hero__text{
        font-family:var(--font-inter); font-size:14px; color:var(--color-ink,#25221e); line-height:1.4;
    }
    .artify-hero__text strong{ font-weight:var(--font-weight-semibold,600); }

    /* Right: Gallery */
    .artify-hero__gallery{}

    .artify-hero__grid{
        display:grid; grid-template-columns:2fr 1.4fr 1fr; gap:14px;
    }

    .artify-hero__card{
        position:relative; border-radius:12px; overflow:hidden; cursor:pointer; background:#f5f5f5;
        box-shadow:0 8px 24px rgba(37,34,30,.1); transition:all .35s cubic-bezier(.34,1.56,.64,1);
        border:1px solid rgba(255,255,255,.6);
    }
    .artify-hero__card:hover{
        transform:translateY(-6px); box-shadow:0 14px 40px rgba(37,34,30,.15);
    }

    .artify-hero__card img,
    .artify-hero__card video{
        width:100%; height:100%; object-fit:cover; object-position:center; display:block;
    }

    .artify-hero__play{
        position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
        width:60px; height:60px; border-radius:50%; background:rgba(255,255,255,.95);
        display:flex; align-items:center; justify-content:center; font-size:24px;
        color:var(--color-ember-red,#e34432); z-index:2; box-shadow:0 8px 24px rgba(0,0,0,.25);
        transition:all .35s cubic-bezier(.34,1.56,.64,1);
    }
    .artify-hero__card--large:hover .artify-hero__play{
        transform:translate(-50%,-50%) scale(1.2); background:rgba(227,68,50,.95); color:#fff;
    }

    /* Responsive */
    @media (max-width: 1200px){
        .artify-hero__container{ grid-template-columns:1fr; gap:48px; }
    }
    @media (max-width: 768px){
        .artify-hero{ padding:60px 0 80px; }
        .artify-hero__title{ font-size:32px; margin-bottom:12px; }
        .artify-hero__subtitle{ font-size:16px; margin-bottom:28px; }
        .artify-hero__buttons{ flex-wrap:wrap; margin-bottom:36px; }
        .artify-hero__btn{ width:100%; justify-content:center; }
        .artify-hero__grid{ grid-template-columns:repeat(2,1fr); gap:10px; }
    }
    @media (max-width: 640px){
        .artify-hero__title{ font-size:26px; }
        .artify-hero__subtitle{ font-size:15px; margin-bottom:20px; }
        .artify-hero__badge{ margin-bottom:20px; }
        .artify-hero__grid{ grid-template-columns:1fr; gap:10px; }
        .artify-hero__play{ width:50px; height:50px; font-size:18px; }
    }

    /* =========================================
       REDESIGNED LEARNING CREDITS PROGRESSION
       ========================================= */

    .page-index .points-topup-section{
        /* background-color: var(--color-paper, #fefdfc) !important; */
        border-top: 0px solid var(--color-stone, #d7d6d4);
        font-family: var(--font-inter), sans-serif;
    }

    /* Benefits Row */
    .page-index .learning-benefit-card{
        background: transparent;
        border: 1px solid var(--color-stone, #d7d6d4);
        border-radius: var(--radius-lg, 12px);
        padding: 18px 16px;
        text-align: center;
        height: 100%;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .page-index .learning-benefit-card:hover{
        transform: translateY(-2px);
        box-shadow: var(--shadow-subtle, 0 4px 12px rgba(37,34,30,0.04));
    }
    .page-index .benefit-emoji{
        font-size: 26px;
        display: block;
        margin-bottom: 10px;
    }
    .page-index .benefit-title{
        font-family: var(--font-inter), sans-serif;
        font-size: 14px;
        font-weight: var(--font-weight-semibold, 600);
        color: var(--color-ink, #25221e);
        margin: 0;
    }

    /* Pathway Card */
    .page-index .learning-pathway-card{
        background: transparent;
        border: 1px solid var(--color-stone, #d7d6d4);
        border-radius: var(--radius-xl, 20px);
        padding: 32px;
    }
    .page-index .pathway-header{
        display: flex;
        align-items: center;
        gap: 16px;
    }
    .page-index .header-icon-modern{
        width: 46px;
        height: 46px;
        background: var(--color-paper, #fefdfc);
        border: 1px solid var(--color-stone, #d7d6d4);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        color: var(--color-ember-red, #e34432);
        box-shadow: var(--shadow-subtle, 0 4px 12px rgba(37,34,30,0.04));
    }
    .page-index .pathway-title{
        font-family: var(--font-graphik), sans-serif;
        font-size: 20px;
        font-weight: 700;
        color: var(--color-ink, #25221e);
        margin: 0;
    }
    .page-index .pathway-subtitle{
        font-size: 13px;
        color: var(--color-pencil, #6f6c69);
        margin: 4px 0 0 0;
    }

    /* Timeline Progression */
    .page-index .visual-progression-timeline{
        display: flex;
        flex-direction: column;
        gap: 24px;
        position: relative;
        padding-left: 20px;
        margin-top: 24px;
    }
    .page-index .visual-progression-timeline::before{
        content: '';
        position: absolute;
        left: 31px;
        top: 15px;
        bottom: 15px;
        width: 2px;
        background: var(--color-stone, #d7d6d4);
        z-index: 0;
    }
    .page-index .timeline-step{
        display: flex;
        align-items: flex-start;
        gap: 20px;
        position: relative;
        z-index: 1;
    }
    .page-index .step-badge{
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: var(--color-paper, #fefdfc);
        border: 2px solid var(--color-stone, #d7d6d4);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        font-weight: 700;
        color: var(--color-graphite, #94928f);
        flex-shrink: 0;
        margin-top: 4px;
        transition: all 0.3s ease;
    }
    .page-index .timeline-step-highlight .step-badge{
        background: var(--color-ember-red, #e34432);
        border-color: var(--color-ember-red, #e34432);
        color: var(--color-paper, #fefdfc);
        box-shadow: 0 0 0 4px rgba(227, 68, 50, 0.15);
    }
    .page-index .step-content{
        background: var(--color-paper, #fefdfc);
        border: 1px solid var(--color-stone, #d7d6d4);
        border-radius: 12px;
        padding: 16px 20px;
        flex-grow: 1;
        transition: all 0.3s ease;
        box-shadow: var(--shadow-subtle, 0 4px 12px rgba(37,34,30,0.04));
    }
    .page-index .timeline-step-highlight .step-content{
        border-color: var(--color-ember-red, #e34432);
        background: var(--color-paper, #fefdfc);
    }
    .page-index .step-header{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 6px;
    }
    .page-index .step-title{
        font-size: 15px;
        font-weight: 700;
        color: var(--color-ink, #25221e);
        margin: 0;
    }
    .page-index .step-bonus{
        font-size: 12px;
        font-weight: 700;
        color: var(--color-pencil, #6f6c69);
        padding: 2px 8px;
        background: var(--surface-cream-wash, #fffaf6);
        border: 1px solid var(--color-stone, #d7d6d4);
        border-radius: 6px;
    }
    .page-index .timeline-step-highlight .step-bonus{
        color: var(--color-paper, #fefdfc);
        background: var(--color-ember-red, #e34432);
        border-color: var(--color-ember-red, #e34432);
    }
    .page-index .step-desc{
        font-size: 13px;
        color: var(--color-pencil, #6f6c69);
        margin: 0 0 8px 0;
        line-height: 1.45;
    }
    .page-index .step-range{
        font-size: 11px;
        font-weight: 600;
        color: var(--color-graphite, #94928f);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    /* Calculator Redesign */
    .page-index .luxury-calculator-wrapper{
        background: transparent;
        border: 1px solid var(--color-stone, #d7d6d4);
        border-radius: var(--radius-xl, 20px);
        padding: 32px;
        box-shadow: var(--shadow-subtle, 0 4px 12px rgba(37,34,30,0.04));
    }
    .page-index .calc-header-premium{
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }
    .page-index .calc-title-premium{
        font-family: var(--font-graphik), sans-serif;
        font-size: 20px;
        font-weight: 700;
        color: var(--color-ink, #25221e);
        margin: 0;
    }
    .page-index .calc-tagline{
        font-size: 13px;
        color: var(--color-pencil, #6f6c69);
        margin: 4px 0 0 0;
    }
    .page-index .calc-currency-badge{
        width: 40px;
        height: 40px;
        border-radius: 10px;
        background: transparent;
        border: 1px solid var(--color-stone, #d7d6d4);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        font-weight: 700;
        color: var(--color-ink, #25221e);
    }

    /* Calculator inputs styling */
    .page-index .input-label-premium{
        font-size: 13px;
        font-weight: 600;
        color: var(--color-pencil, #6f6c69);
        margin-bottom: 8px;
        display: block;
    }
    .page-index .premium-amount-input-wrapper{
        position: relative;
        display: flex;
        align-items: center;
    }
    .page-index .premium-amount-input{
        width: 100%;
        background: transparent !important;
        border: 1px solid var(--color-stone, #d7d6d4) !important;
        border-radius: var(--radius-buttons, 10px) !important;
        padding: 14px 44px 14px 20px !important;
        font-size: 22px !important;
        font-weight: 700 !important;
        color: var(--color-ink, #25221e) !important;
        transition: all 0.25s ease;
    }
    .page-index .premium-amount-input:focus{
        background: var(--color-paper, #fefdfc) !important;
        border-color: var(--color-deep-ember, #cf3520) !important;
        outline: none;
        box-shadow: 0 0 0 3px rgba(207, 53, 32, 0.08);
    }
    .page-index .input-currency{
        position: absolute;
        right: 20px;
        font-size: 18px;
        font-weight: 700;
        color: var(--color-graphite, #94928f);
        pointer-events: none;
    }

    /* Breakdown card styling */
    .page-index .points-breakdown-card{
        background: transparent;
        border: 1px solid var(--color-stone, #d7d6d4);
        border-radius: 12px;
        padding: 20px;
    }
    .page-index .breakdown-row{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;
    }
    .page-index .breakdown-row:last-child{
        margin-bottom: 0;
    }
    .page-index .breakdown-label{
        font-size: 13px;
        font-weight: 500;
        color: var(--color-pencil, #6f6c69);
    }
    .page-index .breakdown-value{
        font-size: 14px;
        font-weight: 700;
        color: var(--color-ink, #25221e);
    }
    .page-index .bonus-badge{
        padding: 3px 8px;
        background: transparent;
        border: 1px solid var(--color-stone, #d7d6d4);
        border-radius: 6px;
        font-size: 12px;
        color: var(--color-ember-red, #e34432) !important;
    }
    .page-index .breakdown-divider{
        height: 1px;
        background: var(--color-stone, #d7d6d4);
        margin: 16px 0;
    }
    .page-index .breakdown-total .breakdown-label{
        font-weight: 700;
        color: var(--color-ink, #25221e);
    }
    .page-index .breakdown-value-total{
        font-size: 20px;
        font-weight: 800;
        color: var(--color-ember-red, #e34432);
    }

    /* Large display */
    .page-index .points-display-premium{
        background: transparent;
        border: 1px solid var(--color-stone, #d7d6d4);
        border-radius: 12px;
        padding: 24px;
        text-align: center;
        box-shadow: inset 0 2px 4px rgba(37,34,30,0.02);
    }
    .page-index .points-number{
        display: block;
        font-family: var(--font-graphik), sans-serif;
        font-size: 40px;
        font-weight: 800;
        color: var(--color-ink, #25221e);
        line-height: 1.1;
        margin-bottom: 4px;
    }
    .page-index .points-unit{
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--color-graphite, #94928f);
    }

    /* Buttons & Indicators */
    .page-index .btn-premium-checkout{
        background: var(--color-ember-red, #e34432);
        color: var(--color-paper, #fefdfc);
        border: none;
        border-radius: var(--radius-buttons, 10px);
        padding: 14px 28px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        transition: all 0.25s cubic-bezier(.34,1.56,.64,1);
        box-shadow: 0 4px 14px rgba(227, 68, 50, 0.2);
    }
    .page-index .btn-premium-checkout:hover{
        background: var(--color-deep-ember, #cf3520);
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(227, 68, 50, 0.3);
    }
    .page-index .btn-premium-checkout:active{
        transform: translateY(1px);
    }
    .page-index .trust-indicator{
        font-size: 12px;
        color: var(--color-pencil, #6f6c69);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }
    .page-index .trust-indicator i{
        color: var(--color-cobalt-link, #0f66ae);
    }

    /* Milestone reward card */
    .page-index .reward-milestone-card{
        background: var(--color-cream, #fff6f0);
        border: 1px solid var(--color-stone, #d7d6d4);
        border-radius: 16px;
        padding: 24px 20px;
        height: 100%;
        transition: all 0.3s cubic-bezier(.34,1.56,.64,1);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        box-shadow: var(--shadow-subtle, 0 4px 12px rgba(37,34,30,0.04));
    }
    .page-index .reward-milestone-card:hover{
        transform: translateY(-4px) scale(1.02);
        box-shadow: var(--shadow-lg, 0 12px 28px rgba(37,34,30,0.08));
        border-color: var(--color-deep-ember, #cf3520);
    }
    .page-index .reward-milestone-card--popular{
        background: var(--color-paper, #fefdfc);
        border-color: var(--color-ember-red, #e34432);
        border-width: 2px;
        position: relative;
    }
    .page-index .reward-milestone-card--popular::after{
        content: 'RECOMMENDED';
        position: absolute;
        top: -12px;
        left: 50%;
        transform: translateX(-50%);
        background: var(--color-ember-red, #e34432);
        color: var(--color-paper, #fefdfc);
        font-size: 9px;
        font-weight: 800;
        padding: 3px 10px;
        border-radius: 999px;
        letter-spacing: 0.06em;
    }
    .page-index .milestone-credits{
        font-size: 12px;
        font-weight: 800;
        color: var(--color-ember-red, #e34432);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        margin-bottom: 8px;
    }
    .page-index .milestone-title{
        font-family: var(--font-graphik), sans-serif;
        font-size: 16px;
        font-weight: 700;
        color: var(--color-ink, #25221e);
        margin: 0 0 10px 0;
    }
    .page-index .milestone-desc{
        font-size: 13px;
        color: var(--color-pencil, #6f6c69);
        line-height: 1.5;
        margin: 0 0 16px 0;
    }
    .page-index .milestone-lock-status{
        font-size: 12px;
        font-weight: 600;
        color: var(--color-graphite, #94928f);
        display: flex;
        align-items: center;
        gap: 6px;
        margin-top: auto;
    }
    .page-index .milestone-lock-status i{
        font-size: 11px;
    }
    .page-index .reward-milestone-card--popular .milestone-lock-status{
        color: var(--color-ember-red, #e34432);
    }

    /* Responsive */
    @media (max-width: 991px) {
        .page-index .learning-pathway-card, .page-index .luxury-calculator-wrapper{
            padding: 24px;
        }
    }
    @media (max-width: 768px) {
        .page-index .visual-progression-timeline::before{
            left: 21px;
        }
        .page-index .step-badge{
            width: 20px;
            height: 20px;
            font-size: 10px;
        }
    }

    /* =========================================
       HERO — modern creative-studio redesign
       ========================================= */
    .page-index .af-hero{
        position: relative;
        overflow: hidden;
        isolation: isolate;
        background:
            radial-gradient(60% 50% at 85% 8%, rgba(220,234,255,0.55) 0%, transparent 60%),
            radial-gradient(55% 55% at 8% 92%, rgba(240,246,223,0.70) 0%, transparent 60%),
            linear-gradient(180deg, #fffdfb 0%, #fff6f0 100%);
        padding: clamp(56px, 8vw, 110px) 0 clamp(64px, 9vw, 120px);
    }

    /* Animated background */
    .page-index .af-hero__bg{ position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
    .page-index .af-hero__blob{
        position:absolute; border-radius:50%; filter:blur(70px); opacity:.55; will-change:transform;
    }
    .page-index .af-hero__blob--ember{
        width:440px; height:440px; top:-130px; right:-70px;
        background:radial-gradient(circle, rgba(227,68,50,.45), transparent 70%);
        animation: idHeroFloat 16s ease-in-out infinite;
    }
    .page-index .af-hero__blob--teal{
        width:380px; height:380px; bottom:-150px; left:-90px;
        background:radial-gradient(circle, rgba(73,125,126,.40), transparent 70%);
        animation: idHeroFloat 20s ease-in-out infinite reverse;
    }
    .page-index .af-hero__blob--sky{
        width:320px; height:320px; top:42%; left:46%;
        background:radial-gradient(circle, rgba(15,102,174,.22), transparent 70%);
        animation: idHeroFloat 24s ease-in-out infinite;
    }
    .page-index .af-hero__grid{
        position:absolute; inset:0;
        background-image: radial-gradient(rgba(37,34,30,.05) 1px, transparent 1px);
        background-size: 26px 26px;
        -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 0%, transparent 75%);
                mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 0%, transparent 75%);
        opacity:.7;
    }
    @keyframes idHeroFloat{
        0%,100%{ transform:translate(0,0) scale(1); }
        33%{ transform:translate(30px,-40px) scale(1.06); }
        66%{ transform:translate(-25px,25px) scale(.96); }
    }

    /* Layout */
    .page-index .af-hero__inner{
        position:relative; z-index:1;
        display:grid; grid-template-columns:1.05fr 1fr;
        align-items:center; gap:clamp(32px,5vw,72px);
    }

    /* Copy */
    .page-index .af-hero__eyebrow{
        display:inline-flex; align-items:center; gap:9px;
        padding:7px 15px 7px 12px; border-radius:999px;
        background:var(--color-paper,#fefdfc); border:1px solid var(--color-stone,#d7d6d4);
        box-shadow:var(--shadow-subtle,0 1px 0 rgba(37,34,30,.04));
        font-family:var(--font-inter); font-size:13px; font-weight:var(--font-weight-semibold,600);
        letter-spacing:.02em; color:var(--color-ink,#25221e); margin-bottom:22px;
    }
    .page-index .af-hero__eyebrow i{ color:var(--color-ember-red,#e34432); }
    .page-index .af-hero__eyebrow-dot{
        width:8px; height:8px; border-radius:50%; background:var(--color-ember-red,#e34432);
        box-shadow:0 0 0 0 rgba(227,68,50,.55); animation: idHeroPulse 1.8s infinite;
    }
    .page-index .af-hero__title{
        font-family:var(--font-graphik); font-size:clamp(36px,5.2vw,58px);
        line-height:1.07; font-weight:var(--font-weight-bold,700); letter-spacing:-.025em;
        color:var(--color-ink,#25221e); margin:0 0 20px;
    }
    .page-index .af-hero__subtitle{
        font-family:var(--font-inter); font-size:clamp(16px,1.5vw,19px); line-height:1.6;
        color:var(--color-pencil,#6f6c69); max-width:520px; margin:0 0 28px;
    }

    /* Actions */
    .page-index .af-hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:34px; }
    .page-index .af-hero__btn{
        display:inline-flex; align-items:center; gap:10px; padding:14px 28px;
        border-radius:var(--radius-buttons,8px); font-family:var(--font-inter); font-size:16px;
        font-weight:var(--font-weight-semibold,600); text-decoration:none; cursor:pointer;
        transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease, background .25s ease, color .25s ease;
    }
    .page-index .af-hero__btn--primary{
        background:var(--color-ember-red,#e34432); color:var(--color-paper,#fff);
        box-shadow:0 8px 22px rgba(227,68,50,.30);
    }
    .page-index .af-hero__btn--primary:hover{
        background:var(--color-deep-ember,#cf3520); color:var(--color-paper,#fff);
        transform:translateY(-2px); box-shadow:0 12px 28px rgba(227,68,50,.40);
    }
    .page-index .af-hero__btn--primary i{ transition:transform .25s ease; }
    .page-index .af-hero__btn--primary:hover i{ transform:translateX(4px); }
    .page-index .af-hero__btn--ghost{
        background:var(--color-paper,#fff); color:var(--color-ink,#25221e);
        border:1px solid var(--color-stone,#d7d6d4); box-shadow:var(--shadow-subtle,0 1px 0 rgba(37,34,30,.04));
    }
    .page-index .af-hero__btn--ghost:hover{ border-color:var(--color-ink,#25221e); transform:translateY(-2px); }
    .page-index .af-hero__btn-play{
        display:inline-flex; align-items:center; justify-content:center;
        width:26px; height:26px; border-radius:50%; background:var(--color-ember-red,#e34432);
        color:#fff; font-size:10px;
    }

    /* Trust row */
    .page-index .af-hero__trust{ display:flex; align-items:center; gap:14px; margin-bottom:26px; flex-wrap:wrap; }
    .page-index .af-hero__avatars{ display:flex; }
    .page-index .af-hero__avatars img{
        width:42px; height:42px; border-radius:50%; object-fit:cover;
        border:2px solid var(--color-paper,#fff); margin-left:-12px; box-shadow:var(--shadow-subtle,0 1px 3px rgba(37,34,30,.1));
    }
    .page-index .af-hero__avatars img:first-child{ margin-left:0; }
    .page-index .af-hero__trust-meta{ display:flex; flex-direction:column; gap:2px; }
    .page-index .af-hero__stars{ color:#e8a020; font-size:13px; letter-spacing:2px; }
    .page-index .af-hero__trust-text{
        font-family:var(--font-inter); font-size:13px; font-weight:var(--font-weight-medium,500); color:var(--color-pencil,#6f6c69);
    }

    /* Disciplines — quick browse chips */
    .page-index .af-hero__disciplines{
        display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:26px;
    }
    .page-index .af-hero__disciplines-label{
        font-family:var(--font-inter); font-size:13px; font-weight:var(--font-weight-semibold,600);
        color:var(--color-pencil,#6f6c69); letter-spacing:.02em;
    }
    .page-index .af-hero__chip{
        display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:999px;
        background:var(--color-paper,#fefdfc); border:1px solid var(--color-stone,#d7d6d4);
        font-family:var(--font-inter); font-size:13px; font-weight:var(--font-weight-medium,500);
        color:var(--color-ink,#25221e); text-decoration:none;
        transition: border-color .2s ease, color .2s ease, transform .2s ease, background .2s ease;
    }
    .page-index .af-hero__chip i{ color:var(--color-ember-red,#e34432); font-size:12px; }
    .page-index .af-hero__chip:hover{
        border-color:var(--color-ember-red,#e34432); color:var(--color-deep-ember,#cf3520);
        background:#fff6f3; transform:translateY(-2px);
    }

    /* Tile discipline tag */
    .page-index .af-hero__tiletag{
        position:absolute; left:12px; bottom:12px; z-index:2;
        display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:999px;
        background:rgba(254,253,252,.92); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
        font-family:var(--font-inter); font-size:11px; font-weight:var(--font-weight-semibold,600);
        color:var(--color-ink,#25221e); box-shadow:var(--shadow-subtle,0 1px 3px rgba(37,34,30,.12));
    }
    .page-index .af-hero__tiletag i{ color:var(--color-ember-red,#e34432); font-size:10px; }

    /* Media collage */
    .page-index .af-hero__media{ position:relative; }
    .page-index .af-hero__collage{
        display:grid; grid-template-columns:1.4fr 1fr; grid-template-rows:1fr 1fr;
        gap:16px; align-items:stretch;
    }
    .page-index .af-hero__tile{
        position:relative; margin:0; overflow:hidden;
        border-radius:var(--radius-images,15px); background:var(--color-ink,#25221e);
        border:5px solid var(--color-paper,#fff); box-shadow:var(--shadow-lg,0 14px 40px rgba(37,34,30,.18));
    }
    .page-index .af-hero__tile img,
    .page-index .af-hero__tile video{
        width:100%; height:100%; object-fit:cover; display:block;
    }
    .page-index .af-hero__tile--video{
        grid-row:span 2; aspect-ratio:auto; z-index:1;
    }
    .page-index .af-hero__tile--a,
    .page-index .af-hero__tile--b{ aspect-ratio:4/3; }
    .page-index .af-hero__tile--a{ animation: idHeroTileFloat 14s ease-in-out infinite; }
    .page-index .af-hero__tile--b{ animation: idHeroTileFloat 17s ease-in-out infinite reverse; }

    /* Live tag */
    .page-index .af-hero__livetag{
        position:absolute; top:14px; left:14px; z-index:2;
        display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:999px;
        background:rgba(37,34,30,.5); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
        color:#fff; font-family:var(--font-inter); font-size:12px; font-weight:var(--font-weight-semibold,600); letter-spacing:.02em;
    }
    .page-index .af-hero__live-dot{
        width:8px; height:8px; border-radius:50%; background:var(--color-ember-red,#e34432);
        box-shadow:0 0 0 0 rgba(227,68,50,.55); animation: idHeroPulse 1.8s infinite; flex:0 0 auto;
    }
    .page-index .af-hero__caption{
        position:absolute; left:0; right:0; bottom:0; z-index:2; padding:34px 16px 14px;
        background:linear-gradient(180deg, transparent, rgba(37,34,30,.72));
        color:#fff; font-family:var(--font-caecilia,Georgia,serif); font-size:14px; line-height:1.45;
    }

    /* Floating glass "live class" card */
    .page-index .af-hero__floatcard{
        position:absolute; left:-18px; bottom:34px; z-index:5;
        display:flex; align-items:center; gap:12px; padding:10px 16px 10px 10px;
        border-radius:var(--radius-lg,16px); background:rgba(254,253,252,.85);
        -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
        border:1px solid var(--color-stone,#d7d6d4); box-shadow:var(--shadow-lg,0 14px 40px rgba(37,34,30,.18));
        animation: idHeroCardFloat 6s ease-in-out infinite;
    }
    .page-index .af-hero__floatcard-thumb{ width:46px; height:46px; border-radius:10px; overflow:hidden; flex:0 0 auto; }
    .page-index .af-hero__floatcard-thumb img{ width:100%; height:100%; object-fit:cover; }
    .page-index .af-hero__floatcard-body{ display:flex; flex-direction:column; }
    .page-index .af-hero__floatcard-body strong{
        font-family:var(--font-inter); font-size:14px; font-weight:var(--font-weight-semibold,600); color:var(--color-ink,#25221e);
    }
    .page-index .af-hero__floatcard-body span{
        display:inline-flex; align-items:center; gap:6px;
        font-family:var(--font-inter); font-size:12px; color:var(--color-pencil,#6f6c69); margin-top:2px;
    }

    @keyframes idHeroPulse{
        0%{ box-shadow:0 0 0 0 rgba(227,68,50,.55); }
        70%{ box-shadow:0 0 0 8px rgba(227,68,50,0); }
        100%{ box-shadow:0 0 0 0 rgba(227,68,50,0); }
    }
    @keyframes idHeroTileFloat{
        0%,100%{ transform:translateY(0); }
        50%{ transform:translateY(-12px); }
    }
    @keyframes idHeroCardFloat{
        0%,100%{ transform:translateY(0); }
        50%{ transform:translateY(-9px); }
    }

    /* Responsive */
    @media (max-width: 991px){
        .page-index .af-hero__inner{ grid-template-columns:1fr; text-align:center; }
        .page-index .af-hero__content{ display:flex; flex-direction:column; align-items:center; }
        .page-index .af-hero__subtitle{ margin-left:auto; margin-right:auto; }
        .page-index .af-hero__actions,
        .page-index .af-hero__disciplines,
        .page-index .af-hero__trust{ justify-content:center; }
        .page-index .af-hero__media{ max-width:620px; margin:8px auto 0; }
        .page-index .af-hero__floatcard{ left:8px; }
    }
    @media (max-width: 575px){
        .page-index .af-hero__collage{ grid-template-columns:1fr 1fr; gap:12px; }
        .page-index .af-hero__tile--video{ grid-column:1 / -1; grid-row:auto; aspect-ratio:16/11; }
        .page-index .af-hero__tile--a,
        .page-index .af-hero__tile--b{ aspect-ratio:1/1; }
        .page-index .af-hero__floatcard{ left:50%; bottom:-22px; transform:translateX(-50%); padding:8px 14px 8px 8px; }
        .page-index .af-hero__floatcard-thumb{ width:40px; height:40px; }
    }
    @media (prefers-reduced-motion: reduce){
        .page-index .af-hero__blob,
        .page-index .af-hero__tile--a,
        .page-index .af-hero__tile--b,
        .page-index .af-hero__floatcard,
        .page-index .af-hero__live-dot,
        .page-index .af-hero__eyebrow-dot{ animation:none !important; }
    }

    /* =========================================
       BENTO CATEGORY GRID
       ========================================= */

    .page-index .modern-badge{
        display: inline-flex !important;
        align-items: center !important;
        font-family: var(--font-inter) !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        letter-spacing: 0.08em !important;
        padding: 6px 12px !important;
        border-radius: var(--radius-badges, 8px) !important;
        background-color: var(--color-mint-wash, #fff6f0) !important;
        color: var(--color-deep-ember, #cf3520) !important;
        border: 1px solid var(--color-stone, #d7d6d4) !important;
        text-transform: uppercase !important;
        box-shadow: var(--shadow-subtle) !important;
        margin-bottom: 15px !important;
    }

    .page-index .category-bento-section{
        position: relative;
        overflow: hidden;
        background: var(--color-cream) !important;
    }

    /* ---------- Bento grid layout ---------- */
    .page-index .bento-grid{
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: 144px;
        gap: 18px;
    }

    /* ---------- Shared tile styling ---------- */
    .page-index .bento-tile{
        position: relative;
        display: flex;
        border-radius: 20px;
        overflow: hidden;
        text-decoration: none;
        color: inherit;
        transition: transform 0.35s cubic-bezier(0.165, 0.84, 0.44, 1),
                    box-shadow 0.35s ease,
                    border-color 0.35s ease;
        border: 1px solid var(--color-stone, #e7e6e3);
        background: var(--color-paper, #fefdfc);
    }

    .page-index .bento-tile:hover{
        transform: translateY(-4px);
        box-shadow: 0 18px 40px rgba(37, 34, 30, 0.10),
                    0 4px 10px rgba(37, 34, 30, 0.04);
        text-decoration: none;
    }

    /* ---------- Featured (large) tile ---------- */
    .page-index .bento-tile--featured{
        grid-column: span 2;
        grid-row: span 4;
        flex-direction: column;
        min-height: 570px;
    }

    .page-index .bento-tile__media{
        position: relative;
        flex: 1 1 auto;
        min-height: 200px;
        overflow: hidden;
        background: linear-gradient(135deg, #2b1a12 0%, #cf3520 100%);
    }

    .page-index .bento-tile__img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    }

    .page-index .bento-tile--featured:hover .bento-tile__img{
        transform: scale(1.06);
    }

    .page-index .bento-tile__img-fallback{
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 72px;
        color: rgba(255, 255, 255, 0.85);
    }

    .page-index .bento-tile__scrim{
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg,
                    rgba(37, 34, 30, 0) 45%,
                    rgba(37, 34, 30, 0.55) 100%);
        pointer-events: none;
    }

    .page-index .bento-tile__body{
        position: relative;
        flex: 0 0 auto;
        padding: 20px 24px 22px;
        background: var(--color-paper, #fefdfc);
    }

    .page-index .bento-tile__eyebrow{
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-family: var(--font-inter), sans-serif;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--color-deep-ember, #cf3520);
        margin-bottom: 8px;
    }

    .page-index .bento-tile__headline{
        font-family: var(--font-graphik, sans-serif);
        font-size: 22px;
        font-weight: 700;
        color: var(--color-ink, #25221e);
        margin: 0 0 8px 0;
        line-height: 1.25;
    }

    .page-index .bento-tile__lede{
        font-size: 13.5px;
        line-height: 1.5;
        color: var(--color-pencil, #6f6c69);
        margin: 0 0 14px 0;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .page-index .bento-tile__footer{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
    }

    .page-index .bento-tile__count-pill{
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        border-radius: 999px;
        background: var(--color-mint-wash, #fff6f0);
        color: var(--color-deep-ember, #cf3520);
        font-size: 12px;
        font-weight: 600;
        border: 1px solid rgba(227, 68, 50, 0.18);
    }

    .page-index .bento-tile__cta{
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
        font-weight: 600;
        color: var(--color-ink, #25221e);
        transition: color 0.25s ease, gap 0.25s ease;
    }

    .page-index .bento-tile--featured:hover .bento-tile__cta{
        color: var(--color-deep-ember, #cf3520);
        gap: 12px;
    }

    /* ---------- Compact tiles (mini featured cards) ---------- */
    .page-index .bento-tile--compact{
        grid-column: span 1;
        grid-row: span 2;
        flex-direction: column;
        padding: 0;
        gap: 0;
    }

    .page-index .bento-tile__thumb{
        position: relative;
        flex: 0 0 auto;
        height: 120px;
        overflow: hidden;
        background: linear-gradient(135deg, #3a2417 0%, #cf3520 100%);
    }

    .page-index .bento-tile__thumb-img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.55s cubic-bezier(0.165, 0.84, 0.44, 1);
    }

    .page-index .bento-tile--compact:hover .bento-tile__thumb-img{
        transform: scale(1.08);
    }

    .page-index .bento-tile__thumb-fallback{
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 44px;
        color: rgba(255, 255, 255, 0.9);
    }

    .page-index .bento-tile__thumb-scrim{
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg,
                    rgba(37, 34, 30, 0) 55%,
                    rgba(37, 34, 30, 0.45) 100%);
        pointer-events: none;
    }

    .page-index .bento-tile__icon-chip{
        position: absolute;
        top: 10px;
        left: 10px;
        width: 34px;
        height: 34px;
        border-radius: 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        line-height: 1;
        color: var(--color-ink, #25221e);
        background: rgba(255, 255, 255, 0.94);
        box-shadow: 0 3px 10px rgba(37, 34, 30, 0.18);
        transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
    }

    .page-index .bento-tile__icon-chip i{
        color: inherit;
        font-size: inherit;
        line-height: 1;
        display: inline-block;
    }

    .page-index .bento-tile__body-sm{
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 10px;
        padding: 14px 16px 14px;
        background: var(--color-paper, #fefdfc);
    }

    .page-index .bento-tile__label{
        font-family: var(--font-graphik, sans-serif);
        font-size: 15px;
        font-weight: 700;
        color: var(--color-ink, #25221e);
        margin: 0 0 6px 0;
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        word-break: break-word;
    }

    .page-index .bento-tile__desc-sm{
        font-size: 12.5px;
        line-height: 1.5;
        color: var(--color-pencil, #6f6c69);
        margin: 0 0 10px 0;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .page-index .bento-tile__foot-sm{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-top: auto;
    }

    .page-index .bento-tile__more{
        display: inline-flex;
        align-items: center;
        font-size: 12px;
        font-weight: 600;
        color: var(--color-ink, #25221e);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        transition: color 0.25s ease;
    }

    .page-index .bento-tile--compact:hover .bento-tile__more{
        color: var(--color-deep-ember, #cf3520);
    }

    .page-index .bento-tile__arrow{
        flex-shrink: 0;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        color: var(--color-pencil, #6f6c69);
        background: transparent;
        border: 1px solid var(--color-stone, #e7e6e3);
        transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    }

    .page-index .bento-tile--compact:hover .bento-tile__arrow{
        transform: translateX(3px);
    }

    /* ---------- Compact tile color tints ---------- */
    .page-index .bento-tile--tint-0 .bento-tile__icon-chip{
        color: var(--color-deep-ember, #cf3520);
    }
    .page-index .bento-tile--tint-0 .bento-tile__thumb{
        background: linear-gradient(135deg, #3a1c14 0%, #cf3520 100%);
    }
    .page-index .bento-tile--tint-0:hover{
        border-color: rgba(227, 68, 50, 0.35);
    }
    .page-index .bento-tile--tint-0:hover .bento-tile__icon-chip{
        background: var(--color-deep-ember, #cf3520);
        color: #fff;
    }
    .page-index .bento-tile--tint-0:hover .bento-tile__arrow{
        background: var(--color-deep-ember, #cf3520);
        color: #fff;
        border-color: var(--color-deep-ember, #cf3520);
    }

    .page-index .bento-tile--tint-1 .bento-tile__icon-chip{
        color: var(--color-forest, #446c3d);
    }
    .page-index .bento-tile--tint-1 .bento-tile__thumb{
        background: linear-gradient(135deg, #1f3a1b 0%, #446c3d 100%);
    }
    .page-index .bento-tile--tint-1:hover{
        border-color: rgba(68, 108, 61, 0.35);
    }
    .page-index .bento-tile--tint-1:hover .bento-tile__icon-chip{
        background: var(--color-forest, #446c3d);
        color: #fff;
    }
    .page-index .bento-tile--tint-1:hover .bento-tile__arrow{
        background: var(--color-forest, #446c3d);
        color: #fff;
        border-color: var(--color-forest, #446c3d);
    }

    .page-index .bento-tile--tint-2 .bento-tile__icon-chip{
        color: var(--color-cobalt-link, #0f66ae);
    }
    .page-index .bento-tile--tint-2 .bento-tile__thumb{
        background: linear-gradient(135deg, #0a3a63 0%, #0f66ae 100%);
    }
    .page-index .bento-tile--tint-2:hover{
        border-color: rgba(15, 102, 174, 0.35);
    }
    .page-index .bento-tile--tint-2:hover .bento-tile__icon-chip{
        background: var(--color-cobalt-link, #0f66ae);
        color: #fff;
    }
    .page-index .bento-tile--tint-2:hover .bento-tile__arrow{
        background: var(--color-cobalt-link, #0f66ae);
        color: #fff;
        border-color: var(--color-cobalt-link, #0f66ae);
    }

    .page-index .bento-tile--tint-3 .bento-tile__icon-chip{
        color: #8a5a2b;
    }
    .page-index .bento-tile--tint-3 .bento-tile__thumb{
        background: linear-gradient(135deg, #3b2411 0%, #8a5a2b 100%);
    }
    .page-index .bento-tile--tint-3:hover{
        border-color: rgba(138, 90, 43, 0.35);
    }
    .page-index .bento-tile--tint-3:hover .bento-tile__icon-chip{
        background: #8a5a2b;
        color: #fff;
    }
    .page-index .bento-tile--tint-3:hover .bento-tile__arrow{
        background: #8a5a2b;
        color: #fff;
        border-color: #8a5a2b;
    }

    /* ---------- Responsive ---------- */
    @media (max-width: 1199px) {
        .page-index .bento-grid{
            grid-template-columns: repeat(3, 1fr);
            grid-auto-rows: 125px;
        }
        .page-index .bento-tile--featured{
            grid-column: span 3;
            grid-row: span 4;
            min-height: 540px;
        }
        .page-index .bento-tile--compact{
            grid-column: span 1;
            grid-row: span 2;
        }
    }

    @media (max-width: 767px) {
        .page-index .bento-grid{
            grid-template-columns: repeat(2, 1fr);
            grid-auto-rows: 120px;
            gap: 14px;
        }
        .page-index .bento-tile--featured{
            grid-column: span 2;
            grid-row: span 4;
            min-height: 500px;
        }
        .page-index .bento-tile--compact{
            grid-column: span 1;
            grid-row: span 2;
        }
        .page-index .bento-tile__headline{
            font-size: 20px;
        }
        .page-index .bento-tile__body{
            padding: 18px 18px 20px;
        }
        .page-index .bento-tile__thumb{
            height: 110px;
        }
    }

    @media (max-width: 479px) {
        .page-index .bento-grid{
            grid-template-columns: 1fr;
            grid-auto-rows: auto;
        }
        .page-index .bento-tile--featured,
        .page-index .bento-tile--compact{
            grid-column: span 1;
            grid-row: auto;
        }
        .page-index .bento-tile__thumb{
            height: 140px;
        }
    }

    /* =========================================
       REVAMPED COURSE CARDS & CAROUSEL
       ========================================= */

    .page-index .courses-carousel{
        position: relative;
        padding: 0 10px;
    }

    .page-index .courses-carousel .owl-item{
        padding: 15px;
    }

    .page-index .courses-carousel .owl-stage-outer{
        padding-top: 15px !important;
        padding-bottom: 25px !important;
        /* margin-top: -15px !important;
        margin-bottom: -25px !important; */
    }

    .page-index .courses-carousel .owl-nav{
        position: absolute;
        top: 50%;
        left: -60px;
        right: -60px;
        transform: translateY(-50%);
        display: flex;
        justify-content: space-between;
        pointer-events: none;
        z-index: 10 !important;
    }

    .page-index .courses-carousel .owl-nav .owl-prev,
    .page-index .courses-carousel .owl-nav .owl-next{
        width: 44px !important;
        height: 44px !important;
        border-radius: 50% !important;
        background: var(--color-paper, #fefdfc) !important;
        border: 1px solid var(--color-stone, #d7d6d4) !important;
        color: var(--color-ink, #25221e) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 16px !important;
        box-shadow: 0 4px 10px rgba(37, 34, 30, 0.06) !important;
        transition: all 0.3s ease !important;
        pointer-events: auto !important;
    }

    .page-index .courses-carousel .owl-nav .owl-prev:hover,
    .page-index .courses-carousel .owl-nav .owl-next:hover{
        background: var(--color-cream, #fff6f0) !important;
        color: var(--color-deep-ember, #cf3520) !important;
        border-color: rgba(227, 68, 50, 0.35) !important;
        box-shadow: 0 6px 15px rgba(37, 34, 30, 0.1) !important;
        transform: translateY(-2px);
    }

    .page-index .courses-carousel .owl-dots{
        text-align: center;
        margin-top: 20px;
    }

    .page-index .courses-carousel .owl-dots .owl-dot{
        width: 8px !important;
        height: 8px !important;
        border-radius: 50% !important;
        background-color: var(--color-stone, #d7d6d4) !important;
        margin: 0 5px !important;
        display: inline-block !important;
        transition: all 0.3s ease !important;
    }

    .page-index .courses-carousel .owl-dots .owl-dot.active{
        background-color: var(--color-deep-ember, #cf3520) !important;
        transform: scale(1.3);
    }

    @media (max-width: 1300px) {
        .page-index .courses-carousel .owl-nav{
            position: static;
            transform: none;
            justify-content: center;
            gap: 15px;
            margin-top: 20px;
            pointer-events: auto;
        }
    }

    /* Course Card Overrides */
    .page-index .modern-course-card{
        background: var(--color-paper, #fefdfc) !important;
        border: 1px solid var(--color-stone, #d7d6d4) !important;
        border-radius: 16px !important;
        overflow: hidden !important;
        box-shadow: var(--shadow-subtle, rgba(37, 34, 30, 0.04) 0px 1px 0px 0px) !important;
        transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .page-index .modern-course-card:hover{
        transform: translateY(-6px) !important;
        box-shadow: rgba(37, 34, 30, 0.08) 0px 14px 28px, rgba(37, 34, 30, 0.04) 0px 4px 10px !important;
        border-color: rgba(227, 68, 50, 0.35) !important;
    }

    .page-index .course-img-container{
        border-radius: 0 !important;
        border-bottom: 1px solid var(--color-stone, #d7d6d4) !important;
    }

    .page-index .course-content{
        padding: 24px !important;
        display: flex !important;
        flex-direction: column !important;
        flex-grow: 1 !important;
    }

    .page-index .course-title{
        font-family: var(--font-graphik, sans-serif) !important;
        font-size: 18px !important;
        font-weight: 700 !important;
    }

    .page-index .course-title a{
        color: var(--color-ink, #25221e) !important;
        transition: color 0.3s ease !important;
    }

    .page-index .course-title a:hover{
        color: var(--color-deep-ember, #cf3520) !important;
    }

    .page-index .course-summary{
        color: var(--color-pencil, #6f6c69) !important;
        font-family: var(--font-inter, sans-serif) !important;
        font-size: 14px !important;
        line-height: 1.6 !important;
        margin-bottom: 20px !important;
    }

    .page-index .course-footer{
        border-top: 1px solid var(--color-stone, #d7d6d4) !important;
        margin-top: auto !important;
        padding-top: 15px !important;
    }

    .page-index .course-enroll-link{
        color: var(--color-deep-ember, #cf3520) !important;
        font-family: var(--font-inter) !important;
        font-weight: 600 !important;
        transition: all 0.3s ease !important;
    }

    .page-index .course-enroll-link:hover{
        color: var(--color-ink, #25221e) !important;
        transform: translateX(3px) !important;
    }

    /* =========================================
       PROGRAMS GRID (pgrid) — Course Cards
       ========================================= */

    /* Section header row */
    .pgrid-section__head {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 24px;
        margin-bottom: 48px;
        flex-wrap: wrap;
    }
    .pgrid-section__title {
        font-size: clamp(28px, 3.5vw, 44px);
        font-weight: 800;
        color: #1a1a2e;
        line-height: 1.15;
        letter-spacing: -0.02em;
        margin: 12px 0 10px;
    }
    .pgrid-section__sub {
        font-size: 15px;
        color: var(--color-pencil, #6f6c69);
        line-height: 1.7;
        max-width: 520px;
        margin: 0;
    }
    .pgrid-section__all-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 12px 26px;
        border: 1.5px solid #1a1a2e;
        border-radius: 999px;
        font-family: var(--font-inter), sans-serif;
        font-size: 14px;
        font-weight: 600;
        color: #1a1a2e;
        text-decoration: none;
        white-space: nowrap;
        flex-shrink: 0;
        transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .pgrid-section__all-btn:hover {
        background: #1a1a2e;
        color: #fff;
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(26,26,46,0.2);
    }

    /* Card grid */
    .pgrid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 28px;
    }

    .pgrid__card {
        display: flex;
        flex-direction: column;
        background: #fff;
        border-radius: 20px;
        overflow: hidden;
        border: 1px solid rgba(215,214,212,0.6);
        box-shadow: 0 4px 16px rgba(37,34,30,0.06);
        transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s ease;
        position: relative;
    }
    .pgrid__card::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 3px;
        background: var(--card-accent, #1abc9c);
        border-radius: 20px 20px 0 0;
        z-index: 1;
    }
    .pgrid__card:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 48px rgba(37,34,30,0.13);
    }

    /* Image */
    .pgrid__img-wrap {
        display: block;
        position: relative;
        overflow: hidden;
        aspect-ratio: 16/10;
        background: var(--card-accent, #1abc9c);
        text-decoration: none;
    }
    .pgrid__img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
        transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    .pgrid__card:hover .pgrid__img { transform: scale(1.06); }

    .pgrid__img-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(26,26,46,0.55) 0%, transparent 55%);
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    .pgrid__card:hover .pgrid__img-overlay { opacity: 1; }

    /* Body */
    .pgrid__body {
        display: flex;
        flex-direction: column;
        flex: 1;
        padding: 22px 24px 20px;
    }
    .pgrid__title {
        font-size: 16px;
        font-weight: 700;
        line-height: 1.4;
        color: #1a1a2e;
        margin: 0 0 10px;
        font-family: var(--font-graphik, 'Inter'), sans-serif;
    }
    .pgrid__title a {
        color: inherit;
        text-decoration: none;
        transition: color 0.2s ease;
    }
    .pgrid__title a:hover { color: var(--card-accent, #1abc9c); }

    .pgrid__summary {
        font-size: 13.5px;
        color: var(--color-pencil, #6f6c69);
        line-height: 1.6;
        margin: 0;
        flex: 1;
    }

    /* Footer / Enroll button */
    .pgrid__foot {
        margin-top: 20px;
        padding-top: 16px;
        border-top: 1px solid rgba(215,214,212,0.5);
    }
    .pgrid__enroll {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-family: var(--font-inter), sans-serif;
        font-size: 13.5px;
        font-weight: 700;
        color: var(--card-accent, #1abc9c);
        text-decoration: none;
        transition: gap 0.22s cubic-bezier(0.34,1.56,0.64,1), color 0.2s ease;
    }
    .pgrid__enroll:hover { gap: 14px; color: var(--card-accent, #1abc9c); filter: brightness(0.85); }
    .pgrid__enroll-ico {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px; height: 28px;
        background: var(--card-accent, #1abc9c);
        color: #fff;
        border-radius: 50%;
        font-size: 11px;
        flex-shrink: 0;
        transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1);
    }
    .pgrid__enroll:hover .pgrid__enroll-ico { transform: translateX(3px); }

    /* Responsive */
    @media (max-width: 1024px) {
        .pgrid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
        .pgrid-section__all-btn { display: none; }
    }
    @media (max-width: 640px) {
        .pgrid { grid-template-columns: 1fr; gap: 16px; }
        .pgrid-section__head { flex-direction: column; align-items: flex-start; }
        .pgrid-section__title { font-size: 26px; }
    }

    /* =========================================
       ABOUT SECTION — New Mosaic Layout
       ========================================= */

    .about-info--new__grid {
        display: grid;
        grid-template-columns: 1fr 1.15fr;
        align-items: center;
        gap: 56px;
    }

    /* --- LEFT CONTENT --- */
    .about-info--new__left {
        display: flex;
        flex-direction: column;
    }
    .about-info--new__title {
        font-size: clamp(32px, 4vw, 52px);
        font-weight: 800;
        line-height: 1.15;
        color: #1a1a2e;
        margin: 0 0 20px;
        letter-spacing: -0.02em;
    }
    .about-info--new__desc {
        font-size: 15px;
        line-height: 1.8;
        color: #6f6c69;
        margin: 0 0 32px;
        max-width: 500px;
    }
    .about-info--new__features {
        list-style: none;
        padding: 0;
        margin: 0 0 40px;
        display: flex;
        flex-direction: column;
        gap: 22px;
    }
    .about-info--new__feature {
        display: flex;
        gap: 16px;
        align-items: flex-start;
    }
    .about-info--new__check {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: rgba(34, 197, 94, 0.15);
        border: 2px solid rgba(34, 197, 94, 0.4);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        margin-top: 2px;
    }
    .about-info--new__check i {
        color: #16a34a;
        font-size: 13px;
        font-weight: 700;
    }
    .about-info--new__feat-title {
        display: block;
        font-size: 15px;
        font-weight: 700;
        color: #1a1a2e;
        margin-bottom: 4px;
    }
    .about-info--new__feat-desc {
        font-size: 14px;
        color: #6f6c69;
        line-height: 1.6;
        margin: 0;
    }
    .about-info--new__cta {
        display: inline-block;
        background: #1a1a2e;
        color: #ffffff;
        padding: 16px 36px;
        border-radius: 50px;
        font-size: 15px;
        font-weight: 600;
        text-decoration: none;
        align-self: flex-start;
        transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
        box-shadow: 0 6px 20px rgba(26, 26, 46, 0.25);
    }
    .about-info--new__cta:hover {
        background: #2d2d50;
        color: #ffffff;
        transform: translateY(-3px);
        box-shadow: 0 10px 30px rgba(26, 26, 46, 0.35);
    }

    /* --- RIGHT PHOTO COLLAGE (index page 3-col mosaic) --- */
    .about-info--new__right {
        display: flex;
        gap: 16px;
        align-items: flex-end;
        min-height: 480px;
    }
    .about-info--new__col {
        display: flex;
        flex-direction: column;
        gap: 16px;
        flex: 1;
    }
    .about-info--new__col--center {
        margin-top: -40px; /* lifts middle column up for the staggered look */
    }
    .about-info--new__col--stack {
        display: flex;
        flex-direction: column;
        gap: 16px;
        flex: 1;
    }
    /* Base photo card */
    .about-info--new__photo {
        border-radius: 24px;
        overflow: hidden;
        position: relative;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
        transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1),
                    box-shadow 0.38s ease;
        flex-shrink: 0;
    }
    .about-info--new__photo:hover {
        transform: translateY(-6px) scale(1.02);
        box-shadow: 0 18px 44px rgba(0, 0, 0, 0.18);
    }
    .about-info--new__photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
        transition: transform 0.52s ease;
    }
    .about-info--new__photo:hover img {
        transform: scale(1.06);
    }
    /* Height variants */
    .about-info--new__photo--tall    { height: 260px; }
    .about-info--new__photo--tallest { height: 380px; }
    .about-info--new__photo--short   { height: 180px; }
    /* Circle variant (col 3 top) */
    .about-info--new__photo--circle {
        width: 130px;
        height: 130px;
        border-radius: 50%;
        align-self: center;
    }
    /* Colour accent borders */
    .about-info--new__photo--green  { border: 3px solid rgba(34, 197, 94, 0.35); }
    .about-info--new__photo--pink   { border: 3px solid rgba(236, 72, 153, 0.35); }
    .about-info--new__photo--teal   { border: 3px solid rgba(20, 184, 166, 0.35); }
    .about-info--new__photo--amber  { border: 3px solid rgba(245, 158, 11, 0.35); }

    /* ==========================================
       ABOUT PAGE — Premium Bento Category Grid
       Layout:
         Col1 rows 1-2 : Yoga (tall)
         Col2 row 1    : Strength
         Col2 row 2    : Calm
         Col1-2 row 3  : Diet (full-width strip)
       ========================================== */
    .abt-bento {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 245px 245px 245px;
        gap: 14px;
    }
    /* Yoga — spans rows 1-2, col 1 */
    .abt-bento__card--tall {
        grid-column: 1;
        grid-row: 1 / 3;
        border-radius: 24px;
    }
    /* Strength — col 2, row 1 (auto) */
    /* Calm     — col 2, row 2 (auto) */
    /* Diet     — full-width bottom strip */
    .abt-bento__card--wide {
        grid-column: 1 / -1;
        grid-row: 3;
        border-radius: 20px;
    }
    .abt-bento__card {
        position: relative;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 6px 24px rgba(0,0,0,0.10);
        transition: transform 0.36s cubic-bezier(0.34, 1.56, 0.64, 1),
                    box-shadow 0.36s ease;
        cursor: pointer;
        background: #111;
    }
    .abt-bento__card:hover {
        transform: translateY(-6px) scale(1.02);
        box-shadow: 0 20px 48px rgba(0,0,0,0.20);
    }
    .abt-bento__card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
        transition: transform 0.52s ease;
    }
    .abt-bento__card:hover img {
        transform: scale(1.07);
    }
    .abt-bento__overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(
            to top,
            rgba(8, 8, 24, 0.75) 0%,
            rgba(8, 8, 24, 0.10) 52%,
            transparent 100%
        );
        display: flex;
        align-items: flex-end;
        padding: 16px 18px;
        opacity: 1;
    }
    .abt-bento__label {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        background: rgba(255,255,255,0.15);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid rgba(255,255,255,0.28);
        color: #ffffff;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        padding: 6px 14px;
        border-radius: 50px;
        transition: background 0.3s ease, transform 0.3s ease;
        transform: translateY(3px);
    }
    .abt-bento__card:hover .abt-bento__label {
        transform: translateY(0);
        background: rgba(255,255,255,0.24);
    }
    .abt-bento__label i {
        font-size: 11px;
        opacity: 0.9;
    }

    /* Responsive */
    @media (max-width: 1024px) {
        .about-info--new__grid { grid-template-columns: 1fr; gap: 40px; }
        .about-info--new__photo--tallest { height: 340px; }
        .about-info--new__photo--short   { height: 160px; }
        .about-info--new__photo--circle  { width: 110px; height: 110px; }
        .abt-bento { grid-template-rows: 160px 160px 130px; gap: 10px; }
    }
    @media (max-width: 640px) {
        .about-info--new__right { gap: 10px; min-height: 280px; }
        .about-info--new__col--center { margin-top: -20px; }
        .about-info--new__photo--tall    { height: 200px; }
        .about-info--new__photo--tallest { height: 260px; }
        .about-info--new__photo--short   { height: 120px; }
        .about-info--new__photo--circle  { width: 90px; height: 90px; }
        .about-info--new__title { font-size: 28px; }
        .abt-bento {
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 150px 150px 120px;
            gap: 8px;
        }
        .abt-bento__card--tall { border-radius: 18px; }
        .abt-bento__card--wide { border-radius: 16px; }
    }

    /* =========================================
       REVAMPED ABOUT SECTION
       ========================================= */
    .page-index .about-feature-item{
        background: var(--color-paper, #fefdfc) !important;
        border: 1px solid var(--color-stone, #d7d6d4) !important;
        border-radius: 12px !important;
        padding: 20px !important;
        display: flex !important;
        align-items: start !important;
        gap: 16px !important;
        transition: all 0.3s ease !important;
        box-shadow: var(--shadow-subtle) !important;
    }

    .page-index .about-feature-item:hover{
        transform: translateY(-3px) !important;
        box-shadow: rgba(37, 34, 30, 0.06) 0px 8px 16px !important;
        border-color: rgba(227, 68, 50, 0.25) !important;
    }

    .page-index .about-feature-icon{
        width: 44px !important;
        height: 44px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 18px !important;
        flex-shrink: 0 !important;
        background-color: var(--color-cream, #fff6f0) !important;
        color: var(--color-deep-ember, #cf3520) !important;
        border: 1px solid rgba(227, 68, 50, 0.15) !important;
    }

    .page-index .about-feature-icon.icon-forest{
        background-color: var(--color-mint-wash, #f0f6df) !important;
        color: var(--color-forest, #446c3d) !important;
        border: 1px solid rgba(68, 108, 61, 0.15) !important;
    }

    .page-index .about-feature-title{
        font-family: var(--font-graphik, sans-serif) !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        color: var(--color-ink, #25221e) !important;
        margin-bottom: 6px !important;
    }

    .page-index .about-feature-desc{
        font-family: var(--font-inter, sans-serif) !important;
        font-size: 13.5px !important;
        color: var(--color-pencil, #6f6c69) !important;
        line-height: 1.5 !important;
        margin-bottom: 0 !important;
    }

    .page-index .modern-img-wrapper:hover img{
        transform: scale(1.03) !important;
    }

    .page-index .modern-video-wrapper{
        position: relative;
        transition: transform 0.4s ease, box-shadow 0.4s ease !important;
    }

    .page-index .modern-video-wrapper:hover{
        transform: scale(1.02) translateY(-4px) !important;
        box-shadow: rgba(37, 34, 30, 0.12) 0px 20px 40px !important;
    }

    /* =========================================
       WHY CHOOSE US — EDITORIAL NUMBERED CARDS
       ========================================= */
    .page-index .why-choose-section{
        position: relative;
        overflow: hidden;
    }

    .page-index .why-choose-grid{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }

    .page-index .why-choose-card{
        position: relative;
        background: var(--color-paper, #fefdfc);
        border: 1px solid var(--color-stone, #e7e6e3);
        border-radius: 20px;
        padding: 40px 32px 34px;
        overflow: hidden;
        text-align: left;
        transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
                    box-shadow 0.4s ease,
                    border-color 0.4s ease;
    }

    .page-index .why-choose-card:hover{
        transform: translateY(-6px);
        box-shadow: 0 20px 40px rgba(37, 34, 30, 0.08),
                    0 6px 12px rgba(37, 34, 30, 0.04);
    }

    /* Left vertical accent bar — grows on hover */
    .page-index .why-choose-card__accent{
        position: absolute;
        left: 0;
        top: 40px;
        bottom: 40px;
        width: 4px;
        border-radius: 0 4px 4px 0;
        transition: top 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
                    bottom 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
                    width 0.4s ease;
    }

    .page-index .why-choose-card:hover .why-choose-card__accent{
        top: 0;
        bottom: 0;
        width: 6px;
    }

    /* Big translucent number watermark */
    .page-index .why-choose-card__number{
        position: absolute;
        top: 18px;
        right: 26px;
        font-family: var(--font-graphik, sans-serif);
        font-size: 76px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: -0.03em;
        color: rgba(37, 34, 30, 0.06);
        pointer-events: none;
        transition: color 0.4s ease, transform 0.4s ease;
    }

    .page-index .why-choose-card:hover .why-choose-card__number{
        transform: translateY(-2px);
    }

    /* Rounded-square icon */
    .page-index .why-choose-card__icon{
        position: relative;
        width: 54px;
        height: 54px;
        border-radius: 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        line-height: 1;
        margin-bottom: 24px;
        transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                    background 0.4s ease,
                    color 0.4s ease;
    }

    .page-index .why-choose-card__icon i{
        color: inherit;
        font-size: inherit;
        line-height: 1;
    }

    .page-index .why-choose-card:hover .why-choose-card__icon{
        transform: rotate(-6deg) scale(1.06);
    }

    .page-index .why-choose-card__title{
        position: relative;
        font-family: var(--font-graphik, sans-serif);
        font-size: 22px;
        font-weight: 700;
        color: var(--color-ink, #25221e);
        margin: 0 0 12px 0;
        line-height: 1.3;
    }

    .page-index .why-choose-card__desc{
        position: relative;
        font-family: var(--font-inter, sans-serif);
        font-size: 14.5px;
        line-height: 1.65;
        color: var(--color-pencil, #6f6c69);
        margin: 0;
    }

    /* Tints — ember / forest / cobalt */
    .page-index .why-choose-card--tint-0 .why-choose-card__accent{
        background: var(--color-deep-ember, #cf3520);
    }
    .page-index .why-choose-card--tint-0 .why-choose-card__icon{
        background: rgba(227, 68, 50, 0.10);
        color: var(--color-deep-ember, #cf3520);
    }
    .page-index .why-choose-card--tint-0:hover{
        border-color: rgba(227, 68, 50, 0.35);
    }
    .page-index .why-choose-card--tint-0:hover .why-choose-card__number{
        color: rgba(227, 68, 50, 0.14);
    }
    .page-index .why-choose-card--tint-0:hover .why-choose-card__icon{
        background: var(--color-deep-ember, #cf3520);
        color: var(--color-paper, #fefdfc);
    }

    .page-index .why-choose-card--tint-1 .why-choose-card__accent{
        background: var(--color-forest, #446c3d);
    }
    .page-index .why-choose-card--tint-1 .why-choose-card__icon{
        background: rgba(68, 108, 61, 0.10);
        color: var(--color-forest, #446c3d);
    }
    .page-index .why-choose-card--tint-1:hover{
        border-color: rgba(68, 108, 61, 0.35);
    }
    .page-index .why-choose-card--tint-1:hover .why-choose-card__number{
        color: rgba(68, 108, 61, 0.14);
    }
    .page-index .why-choose-card--tint-1:hover .why-choose-card__icon{
        background: var(--color-forest, #446c3d);
        color: var(--color-paper, #fefdfc);
    }

    .page-index .why-choose-card--tint-2 .why-choose-card__accent{
        background: var(--color-cobalt-link, #0f66ae);
    }
    .page-index .why-choose-card--tint-2 .why-choose-card__icon{
        background: rgba(15, 102, 174, 0.10);
        color: var(--color-cobalt-link, #0f66ae);
    }
    .page-index .why-choose-card--tint-2:hover{
        border-color: rgba(15, 102, 174, 0.35);
    }
    .page-index .why-choose-card--tint-2:hover .why-choose-card__number{
        color: rgba(15, 102, 174, 0.14);
    }
    .page-index .why-choose-card--tint-2:hover .why-choose-card__icon{
        background: var(--color-cobalt-link, #0f66ae);
        color: var(--color-paper, #fefdfc);
    }

    /* Responsive */
    @media (max-width: 991px){
        .page-index .why-choose-grid{
            grid-template-columns: 1fr;
            gap: 18px;
        }
        .page-index .why-choose-card{
            padding: 32px 26px 28px;
        }
        .page-index .why-choose-card__number{
            font-size: 64px;
            top: 14px;
            right: 20px;
        }
    }

    @media (max-width: 479px){
        .page-index .why-choose-card__title{
            font-size: 20px;
        }
        .page-index .why-choose-card__number{
            font-size: 56px;
        }
    }

    /* =========================================
       TOPUP STUDIO — EDITORIAL CREDITS SECTION
       ========================================= */
    .topup-studio-section{
        position: relative;
        overflow: hidden;
        background: linear-gradient(180deg, #fdf7ef 0%, #fff9f1 100%);
    }

    .topup-studio__blob{
        position: absolute;
        border-radius: 50%;
        filter: blur(90px);
        pointer-events: none;
        opacity: 0.35;
        z-index: 0;
    }
    .topup-studio__blob--a{
        top: -120px;
        left: -80px;
        width: 320px;
        height: 320px;
        background: rgba(227, 68, 50, 0.25);
    }
    .topup-studio__blob--b{
        bottom: -140px;
        right: -100px;
        width: 380px;
        height: 380px;
        background: rgba(15, 102, 174, 0.18);
    }

    .topup-studio__inner{
        position: relative;
        z-index: 1;
    }

    /* --- Heading --- */
    .topup-studio__heading{
        margin-bottom: 48px;
    }
    .topup-studio__lede{
        font-size: 15px;
        color: var(--color-pencil, #6f6c69);
        max-width: 620px;
        margin-left: auto;
        margin-right: auto;
    }

    /* --- Benefit chips --- */
    .topup-studio__chips{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
        margin-bottom: 56px;
    }
    .topup-studio__chip{
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 10px 18px 10px 12px;
        border-radius: 999px;
        background: var(--color-paper, #fefdfc);
        border: 1px solid var(--color-stone, #e7e6e3);
        box-shadow: 0 2px 6px rgba(37, 34, 30, 0.03);
        transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    }
    .topup-studio__chip:hover{
        transform: translateY(-2px);
        border-color: rgba(227, 68, 50, 0.35);
        box-shadow: 0 8px 20px rgba(227, 68, 50, 0.08);
    }
    .topup-studio__chip-icon{
        width: 30px;
        height: 30px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        color: var(--color-deep-ember, #cf3520);
        background: rgba(227, 68, 50, 0.10);
    }
    .topup-studio__chip-icon i{
        line-height: 1;
    }
    .topup-studio__chip-label{
        font-family: var(--font-inter, sans-serif);
        font-size: 13px;
        font-weight: 600;
        color: var(--color-ink, #25221e);
        letter-spacing: 0.01em;
    }

    /* --- Main panel: tiers + calculator side by side --- */
    .topup-studio__panel{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 32px;
        align-items: stretch;
    }

    /* --- Tiers card --- */
    .topup-studio__tiers{
        background: var(--color-paper, #fefdfc);
        border: 1px solid var(--color-stone, #e7e6e3);
        border-radius: 24px;
        padding: 36px 32px;
    }
    .topup-studio__tiers-head{
        display: flex;
        align-items: center;
        gap: 14px;
        margin-bottom: 28px;
    }
    .topup-studio__tiers-icon{
        flex-shrink: 0;
        width: 48px;
        height: 48px;
        border-radius: 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        color: var(--color-deep-ember, #cf3520);
        background: rgba(227, 68, 50, 0.10);
    }
    .topup-studio__tiers-title{
        font-family: var(--font-graphik, sans-serif);
        font-size: 20px;
        font-weight: 700;
        color: var(--color-ink, #25221e);
        margin: 0 0 4px 0;
        line-height: 1.25;
    }
    .topup-studio__tiers-sub{
        font-size: 13.5px;
        color: var(--color-pencil, #6f6c69);
        margin: 0;
        line-height: 1.5;
    }

    /* --- Tier ladder --- */
    .topup-studio__ladder{
        list-style: none;
        padding: 0;
        margin: 0;
        position: relative;
    }
    /* Vertical connector line running through markers */
    .topup-studio__ladder::before{
        content: "";
        position: absolute;
        left: 22px;
        top: 26px;
        bottom: 26px;
        width: 2px;
        background: repeating-linear-gradient(
            to bottom,
            var(--color-stone, #e7e6e3) 0 6px,
            transparent 6px 12px
        );
        z-index: 0;
    }
    .topup-studio__step{
        position: relative;
        display: flex;
        gap: 18px;
        padding: 14px 14px 14px 0;
        border-radius: 14px;
        transition: background 0.35s ease, transform 0.35s ease;
    }
    .topup-studio__step + .topup-studio__step{
        margin-top: 4px;
    }
    .topup-studio__step-marker{
        position: relative;
        z-index: 1;
        flex-shrink: 0;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-family: var(--font-graphik, sans-serif);
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.02em;
        color: var(--color-pencil, #6f6c69);
        background: var(--color-paper, #fefdfc);
        border: 1.5px solid var(--color-stone, #e7e6e3);
        transition: color 0.35s ease, background 0.35s ease, border-color 0.35s ease, transform 0.35s ease;
    }
    .topup-studio__step-body{
        flex: 1 1 auto;
        min-width: 0;
    }
    .topup-studio__step-head{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 4px;
    }
    .topup-studio__step-title{
        font-family: var(--font-graphik, sans-serif);
        font-size: 15.5px;
        font-weight: 700;
        color: var(--color-ink, #25221e);
        margin: 0;
        line-height: 1.3;
    }
    .topup-studio__step-multi{
        font-family: var(--font-inter, sans-serif);
        font-size: 11.5px;
        font-weight: 700;
        letter-spacing: 0.04em;
        padding: 4px 9px;
        border-radius: 999px;
        color: var(--color-pencil, #6f6c69);
        background: rgba(37, 34, 30, 0.05);
        transition: color 0.35s ease, background 0.35s ease;
        white-space: nowrap;
    }
    .topup-studio__step-desc{
        font-size: 13px;
        color: var(--color-pencil, #6f6c69);
        line-height: 1.5;
        margin: 0 0 6px 0;
    }
    .topup-studio__step-range{
        display: inline-block;
        font-family: var(--font-inter, sans-serif);
        font-size: 12px;
        font-weight: 600;
        color: var(--color-graphite, #94928f);
        letter-spacing: 0.02em;
    }

    /* Highlighted step (JS toggles .timeline-step-highlight) */
    .topup-studio__step.timeline-step-highlight{
        background: rgba(227, 68, 50, 0.06);
        transform: translateX(4px);
    }
    .topup-studio__step.timeline-step-highlight .topup-studio__step-marker{
        color: var(--color-paper, #fefdfc);
        background: var(--color-deep-ember, #cf3520);
        border-color: var(--color-deep-ember, #cf3520);
        transform: scale(1.05);
        box-shadow: 0 6px 14px rgba(227, 68, 50, 0.28);
    }
    .topup-studio__step.timeline-step-highlight .topup-studio__step-title{
        color: var(--color-deep-ember, #cf3520);
    }
    .topup-studio__step.timeline-step-highlight .topup-studio__step-multi{
        color: var(--color-paper, #fefdfc);
        background: var(--color-deep-ember, #cf3520);
    }

    /* --- Calculator card --- */
    .topup-studio__calc{
        background: var(--color-ink, #25221e);
        color: var(--color-paper, #fefdfc);
        border-radius: 24px;
        padding: 36px 32px 32px;
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    .topup-studio__calc::before{
        content: "";
        position: absolute;
        top: -80px;
        right: -60px;
        width: 220px;
        height: 220px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(227, 68, 50, 0.35) 0%, transparent 70%);
        pointer-events: none;
    }
    .topup-studio__calc-head{
        position: relative;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 28px;
    }
    .topup-studio__calc-eyebrow{
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-family: var(--font-inter, sans-serif);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--color-ember-red);
        margin-bottom: 6px;
    }
    .topup-studio__calc-title{
        font-family: var(--font-graphik, sans-serif);
        font-size: 22px;
        font-weight: 700;
        color: var(--color-paper, #fefdfc);
        margin: 0;
        line-height: 1.25;
    }
    .topup-studio__calc-badge{
        flex-shrink: 0;
        width: 44px;
        height: 44px;
        border-radius: 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        font-weight: 800;
        color: var(--color-paper, #fefdfc);
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.12);
    }
     .topup-studio__calc-badge strong{
        color: var(--color-paper, #fefdfc);
     }

    .topup-studio__form{
        position: relative;
    }
    .topup-studio__field-label{
        display: block;
        font-family: var(--font-inter, sans-serif);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.55);
        margin-bottom: 10px;
    }
    .topup-studio__amount{
        display: flex;
        align-items: baseline;
        gap: 8px;
        padding: 12px 0 16px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
        margin-bottom: 22px;
        transition: border-color 0.3s ease;
    }
    .topup-studio__amount:focus-within{
        border-bottom-color: var(--color-ember-red);
    }
    .topup-studio__amount-sym{
        font-family: var(--font-graphik, sans-serif);
        font-size: 26px;
        font-weight: 700;
        color: rgba(255, 255, 255, 0.55);
        line-height: 1;
    }
    .topup-studio__amount-input{
        flex: 1 1 auto;
        border: 0;
        background: transparent;
        color: var(--color-paper, #fefdfc);
        font-family: var(--font-graphik, sans-serif);
        font-size: 38px;
        font-weight: 800;
        letter-spacing: -0.01em;
        line-height: 1;
        padding: 0;
        outline: none;
        min-width: 0;
    }
    .topup-studio__amount-input::placeholder{
        color: rgba(255, 255, 255, 0.25);
        font-weight: 700;
    }
    .topup-studio__amount-input::-webkit-outer-spin-button,
    .topup-studio__amount-input::-webkit-inner-spin-button{
        -webkit-appearance: none;
        margin: 0;
    }
    .topup-studio__amount-input{
        -moz-appearance: textfield;
    }

    .topup-studio__breakdown{
        margin-bottom: 20px;
    }
    .topup-studio__break-row{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 8px 0;
        font-family: var(--font-inter, sans-serif);
    }
    .topup-studio__break-label{
        font-size: 13px;
        color: rgba(255, 255, 255, 0.65);
    }
    .topup-studio__break-value{
        font-size: 14px;
        font-weight: 700;
        color: var(--color-paper, #fefdfc);
        font-variant-numeric: tabular-nums;
    }
    .topup-studio__multi-pill{
        padding: 4px 10px;
        border-radius: 999px;
        background: rgba(227, 68, 50, 0.22);
        color: #ffbfa8;
        font-size: 12px;
    }
    .topup-studio__break-divider{
        height: 1px;
        background: rgba(255, 255, 255, 0.10);
        margin: 6px 0;
    }
    .topup-studio__break-row--total .topup-studio__break-label{
        color: var(--color-paper, #fefdfc);
        font-weight: 700;
    }
    .topup-studio__break-row--total .topup-studio__break-value{
        font-size: 16px;
    }

    .topup-studio__result{
        position: relative;
        text-align: center;
        padding: 22px 16px;
        border-radius: 16px;
        background: linear-gradient(135deg, rgba(227, 68, 50, 0.18) 0%, rgba(227, 68, 50, 0.05) 100%);
        border: 1px solid rgba(227, 68, 50, 0.28);
        margin-bottom: 22px;
    }
    .topup-studio__result-num{
        display: block;
        font-family: var(--font-graphik, sans-serif);
        font-size: 44px;
        font-weight: 800;
        color: var(--color-paper, #fefdfc);
        line-height: 1;
        letter-spacing: -0.02em;
        font-variant-numeric: tabular-nums;
        margin-bottom: 6px;
    }
    .topup-studio__result-unit{
        display: block;
        font-family: var(--font-inter, sans-serif);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--color-ember-red);
    }

    .topup-studio__cta{
        width: 100%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 15px 22px;
        border-radius: 12px;
        border: 0;
        cursor: pointer;
        background: var(--color-ember-red, #e34432);
        color: var(--color-paper, #fefdfc);
        font-family: var(--font-graphik, sans-serif);
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 0.02em;
        box-shadow: 0 8px 20px rgba(227, 68, 50, 0.35);
        transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    }
    .topup-studio__cta:hover{
        transform: translateY(-2px);
        background: var(--color-deep-ember, #cf3520);
        box-shadow: 0 12px 28px rgba(227, 68, 50, 0.45);
    }
    .topup-studio__cta-icon{
        display: inline-flex;
        transition: transform 0.3s ease;
    }
    .topup-studio__cta:hover .topup-studio__cta-icon{
        transform: translateX(4px);
    }

    .topup-studio__note{
        text-align: center;
        font-family: var(--font-inter, sans-serif);
        font-size: 12.5px;
        font-weight: 700;
        color: #f0a58c;
        letter-spacing: 0.02em;
        margin: 20px 0 0 0;
    }
    .topup-studio__note strong{
        font-weight: 700;
        color: #f0a58c;
    }
    .topup-studio__trust{
        display: inline-flex;
        align-items: center;
        gap: 10px;
        justify-content: center;
        width: 100%;
        margin-top: 18px;
        padding-top: 16px;
        border-top: 1px dashed rgba(255, 255, 255, 0.16);
        font-family: var(--font-inter, sans-serif);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.88);
    }
    .topup-studio__trust i{
        font-size: 12px;
        color: #f0a58c;
    }

    /* --- Responsive --- */
    @media (max-width: 991px){
        .topup-studio__panel{
            grid-template-columns: 1fr;
            gap: 24px;
        }
        .topup-studio__chips{
            margin-bottom: 40px;
        }
    }

    @media (max-width: 575px){
        .topup-studio__tiers,
        .topup-studio__calc{
            padding: 28px 22px;
        }
        .topup-studio__amount-input{
            font-size: 32px;
        }
        .topup-studio__result-num{
            font-size: 36px;
        }
        .topup-studio__ladder::before{
            left: 18px;
        }
        .topup-studio__step-marker{
            width: 38px;
            height: 38px;
            font-size: 12px;
        }
        .topup-studio__chip{
            padding: 8px 14px 8px 10px;
        }
        .topup-studio__chip-label{
            font-size: 12px;
        }
    }

/* ===================== page-login ===================== */
    /* ============================================================
       LOGIN PAGE - REVAMPED PREMIUM EDITORIAL STYLE
       ============================================================ */

    .page-login .auth-page-section{
        background-color: #fffdfb; /* Crisp warm backdrop */
        position: relative;
        overflow: hidden;
    }

    /* Ambient blur backdrop shapes */
    .page-login .auth-bg-blob{
        position: absolute;
        border-radius: 50%;
        filter: blur(90px);
        -webkit-filter: blur(90px);
        pointer-events: none;
        opacity: 0.55;
        z-index: 1;
    }

    .page-login .auth-bg-blob.blob-1{
        width: 380px;
        height: 380px;
        background-color: var(--color-mint-wash, #f0f6df);
        top: -100px;
        left: -120px;
    }

    .page-login .auth-bg-blob.blob-2{
        width: 320px;
        height: 320px;
        background-color: var(--color-sky-wash, #dceaff);
        bottom: -80px;
        right: -80px;
    }

    .page-login .auth-content-container{
        position: relative;
        z-index: 2;
    }

    /* Single Unified Premium Card Layout */
    .page-login .unified-auth-card{
        background-color: var(--surface-paper-canvas, #fefdfc);
        border: 1px solid var(--color-stone, #d7d6d4);
        border-radius: var(--radius-cards, 12px);
        overflow: hidden;
        box-shadow: var(--shadow-subtle, 0px 1px 0px 0px rgba(37, 34, 30, 0.04));
        transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        animation: page-login-slideInUp 0.6s ease-out;
    }

    .page-login .unified-auth-card:hover{
        border-color: var(--color-stone, #d7d6d4);
        box-shadow: var(--shadow-lg, 0px 14px 19px -9px rgba(37, 34, 30, 0.07), 0px 10px 48px 0px rgba(37, 34, 30, 0.18));
    }

    /* Left Panel details style */
    .page-login .brand-details-panel{
        background-color: var(--surface-cream-wash, #fff6f0);
        border-right: 1px solid var(--color-stone, #d7d6d4);
    }

    .page-login .panel-content{
        padding: var(--spacing-48, 48px);
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .page-login .panel-title{
        font-family: var(--font-graphik), sans-serif;
        font-size: var(--text-heading, 38px);
        font-weight: var(--font-weight-bold, 700);
        line-height: var(--leading-heading, 1.28);
        letter-spacing: var(--tracking-heading, -0.19px);
        color: var(--color-ink, #25221e);
    }

    .page-login .panel-text{
        font-family: var(--font-inter), sans-serif;
        font-size: var(--text-body, 16px);
        line-height: var(--leading-body, 1.5);
        color: var(--color-pencil, #6f6c69);
    }

    /* Benefits Metadata List inside the panel */
    .page-login .benefits-info-list{
        display: flex;
        flex-direction: column;
    }

    .page-login .benefit-item{
        display: flex;
        align-items: flex-start;
        gap: 16px;
    }

    .page-login .benefit-icon{
        width: 42px;
        height: 42px;
        min-width: 42px;
        border-radius: 6px;
        background-color: var(--surface-paper-canvas, #fefdfc);
        border: 1px solid var(--color-stone, #d7d6d4);
        color: var(--color-deep-ember, #cf3520);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        transition: all 0.3s ease;
    }

    .page-login .benefit-item:hover .benefit-icon{
        background-color: var(--color-ember-red, #e34432);
        border-color: var(--color-ember-red, #e34432);
        color: #ffffff;
    }

    .page-login .benefit-body{
        display: flex;
        flex-direction: column;
    }

    .page-login .benefit-title{
        font-family: var(--font-inter), sans-serif;
        font-size: var(--text-body-sm, 14px);
        font-weight: var(--font-weight-semibold, 600);
        color: var(--color-ink, #25221e);
        margin-bottom: 2px;
    }

    .page-login .benefit-desc{
        font-family: var(--font-inter), sans-serif;
        font-size: var(--text-caption, 12px);
        color: var(--color-pencil, #6f6c69);
        line-height: 1.4;
    }

    /* Bottom Brand Mark */
    .page-login .panel-brand-mark{
        display: flex;
        flex-direction: column;
        border-top: 1px solid var(--color-stone, #d7d6d4);
        padding-top: 24px;
    }

    .page-login .brand-mark-title{
        font-family: var(--font-graphik), sans-serif;
        font-size: var(--text-body-lg, 18px);
        font-weight: var(--font-weight-bold, 700);
        color: var(--color-ink, #25221e);
    }

    .page-login .brand-mark-desc{
        font-family: var(--font-inter), sans-serif;
        font-size: var(--text-caption, 12px);
        color: var(--color-pencil, #6f6c69);
    }

    /* Right Panel: Clean Form Panel */
    .page-login .form-panel{
        background-color: var(--surface-paper-canvas, #fefdfc);
    }

    .page-login .form-title{
        font-family: var(--font-graphik), sans-serif;
        font-size: var(--text-subheading, 21px);
        font-weight: var(--font-weight-bold, 700);
        color: var(--color-ink, #25221e);
        margin: 0 0 8px 0;
    }

    .page-login .form-subtitle{
        font-family: var(--font-inter), sans-serif;
        font-size: var(--text-body-sm, 14px);
        color: var(--color-pencil, #6f6c69);
        margin: 0;
    }

    /* Premium Input Elements */
    .page-login .premium-input-label{
        display: block;
        font-family: var(--font-inter), sans-serif;
        font-size: var(--text-caption, 12px);
        font-weight: var(--font-weight-semibold, 600);
        color: var(--color-ink, #25221e);
        margin-bottom: 8px;
    }

    .page-login .premium-form-input{
        width: 100%;
        font-family: var(--font-inter), sans-serif;
        font-size: var(--text-body-sm, 14px);
        font-weight: var(--font-weight-medium, 500);
        color: var(--color-ink, #25221e);
        background-color: var(--surface-paper-canvas, #fefdfc);
        border: 1px solid var(--color-stone, #d7d6d4);
        border-radius: var(--radius-inputs, 8px);
        padding: 12px 16px;
        transition: all 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
        outline: none;
    }

    .page-login .premium-form-input::placeholder{
        color: var(--color-graphite, #94928f);
        font-weight: var(--font-weight-regular, 400);
    }

    .page-login .premium-form-input:focus{
        border-color: var(--color-ember-red, #e34432);
        background-color: var(--surface-paper-canvas, #fefdfc);
        box-shadow: 0 0 0 3px #f0f6df;
    }

    /* Validation and Error elements */
    .page-login .premium-form-input.is-invalid, .page-login .premium-form-input.error{
        border-color: var(--color-ember-red, #e34432) !important;
        background-color: #fffaf9 !important;
    }

    .page-login .premium-error-msg{
        color: var(--color-deep-ember, #cf3520);
        font-family: var(--font-inter), sans-serif;
        font-size: var(--text-caption, 12px);
        font-weight: var(--font-weight-medium, 500);
    }

    .page-login label.error{
        color: var(--color-deep-ember, #cf3520) !important;
        font-family: var(--font-inter), sans-serif;
        font-size: var(--text-caption, 12px) !important;
        font-weight: var(--font-weight-medium, 500) !important;
        margin-top: 6px !important;
        display: block !important;
    }

    .page-login .forgot-password-link{
        color: var(--color-cobalt-link, #0f66ae);
        font-family: var(--font-inter), sans-serif;
        font-weight: var(--font-weight-semibold, 600);
        text-decoration: none;
        transition: color 0.2s ease;
    }

    .page-login .forgot-password-link:hover{
        color: var(--color-ember-red, #e34432);
        text-decoration: underline !important;
    }

    .page-login .captcha-image-container img{
        border-radius: var(--radius-inputs, 8px);
        border: 1px solid var(--color-stone, #d7d6d4);
    }

    /* Submit Button */
    .page-login .premium-submit-btn{
        width: 100%;
        font-family: var(--font-inter), sans-serif;
        font-size: var(--text-body-sm, 14px);
        font-weight: var(--font-weight-semibold, 600);
        color: #ffffff;
        background-color: var(--color-ember-red, #e34432);
        border: 1px solid var(--color-ember-red, #e34432);
        border-radius: var(--radius-buttons, 8px);
        padding: 14px 24px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
        box-shadow: 0 4px 14px rgba(227, 68, 50, 0.2);
    }

    .page-login .premium-submit-btn:hover{
        background-color: var(--color-deep-ember, #cf3520);
        border-color: var(--color-deep-ember, #cf3520);
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(227, 68, 50, 0.35);
    }

    .page-login .premium-submit-btn:active{
        transform: translateY(0);
    }

    /* Badges & Links Style */
    .page-login .modern-badge{
        display: inline-block;
        font-family: var(--font-inter), sans-serif;
        font-size: var(--text-caption, 12px);
        font-weight: var(--font-weight-semibold, 600);
        line-height: 1;
        color: var(--color-deep-ember, #cf3520);
        background-color: var(--surface-cream-wash, #fff6f0);
        border: 1px solid var(--color-stone, #d7d6d4);
        border-radius: var(--radius-badges, 8px);
        padding: 6px 12px;
        letter-spacing: 0.05em;
        text-transform: uppercase;
    }

    .page-login .register-redirect-link{
        color: var(--color-ember-red, #e34432);
        transition: color 0.2s ease;
    }

    .page-login .register-redirect-link:hover{
        color: var(--color-deep-ember, #cf3520);
        text-decoration: underline !important;
    }

    @keyframes page-login-slideInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @media (max-width: 991px) {
        .page-login .brand-details-panel{
            border-right: none;
            border-bottom: 1px solid var(--color-stone, #d7d6d4);
        }
    }

    @media (max-width: 768px) {
        .page-login .panel-content{
            padding: var(--spacing-24, 24px);
        }
    }

/* ===================== page-order-failed ===================== */
    /* =========================================
       ORDER STATUS PAGE — warm theme
       ========================================= */
    .page-order-failed .order-status{
        position: relative;
        overflow: hidden;
        background: var(--surface-paper-canvas, #fefdfc);
        padding: 80px 0 100px;
    }
    .page-order-failed .order-status__glow{
        position: absolute;
        border-radius: 50%;
        filter: blur(100px);
        pointer-events: none;
        z-index: 0;
        opacity: 0.55;
    }
    .page-order-failed .os-glow-peach{ width: 360px; height: 360px; background: var(--color-cream, #fff6f0); top: -120px; left: -80px; }
    .page-order-failed .os-glow-sky{ width: 320px; height: 320px; background: var(--color-sky-wash, #dceaff); bottom: 2%; right: -100px; }
    .page-order-failed .order-status .container{ position: relative; z-index: 1; }

    /* card */
    .page-order-failed .status-card{
        position: relative;
        overflow: hidden;
        background: var(--color-paper, #fefdfc);
        border: 1px solid var(--color-stone, #d7d6d4);
        border-radius: 24px;
        padding: clamp(28px, 4vw, 56px);
        box-shadow: 0 20px 50px rgba(37, 34, 30, 0.07), 0 2px 8px rgba(37, 34, 30, 0.03);
        animation: page-order-failed-osRise 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
    }
    .page-order-failed .status-card__accent{
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 4px;
    }
    .page-order-failed .status-card__accent--failed{ background: linear-gradient(90deg, var(--color-ember-red, #e34432), var(--color-deep-ember, #cf3520)); }

    /* icon */
    .page-order-failed .status-icon{
        width: 110px;
        height: 110px;
        margin: 0 auto 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        font-size: 50px;
        animation: page-order-failed-osPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
    }
    .page-order-failed .status-icon--error{
        background: rgba(227, 68, 50, 0.10);
        border: 2px solid rgba(227, 68, 50, 0.25);
        color: var(--color-ember-red, #e34432);
    }

    .page-order-failed .status-title{
        font-family: var(--font-graphik), sans-serif;
        font-size: clamp(26px, 3.4vw, 36px);
        font-weight: var(--font-weight-bold, 700);
        letter-spacing: -0.02em;
        color: var(--color-ink, #25221e);
        margin: 0 0 10px;
    }
    .page-order-failed .status-text{
        font-family: var(--font-inter), sans-serif;
        font-size: 16px;
        line-height: 1.65;
        color: var(--color-pencil, #6f6c69);
        margin: 0 auto 32px;
        max-width: 520px;
    }

    /* help card */
    .page-order-failed .status-help{
        background: var(--color-cream, #fff6f0);
        border: 1px solid var(--color-stone, #d7d6d4);
        border-left: 4px solid var(--color-ember-red, #e34432);
        border-radius: 14px;
        padding: 22px 24px;
        margin-bottom: 32px;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .page-order-failed .status-help:hover{ transform: translateY(-3px); box-shadow: var(--shadow-lg); }
    .page-order-failed .status-help__title{
        display: flex;
        align-items: center;
        gap: 8px;
        font-family: var(--font-inter), sans-serif;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.07em;
        color: var(--color-deep-ember, #cf3520);
        margin: 0 0 14px;
    }
    .page-order-failed .status-help__list{ list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
    .page-order-failed .status-help__list li{
        display: flex;
        align-items: flex-start;
        gap: 10px;
        font-family: var(--font-inter), sans-serif;
        font-size: 14px;
        line-height: 1.5;
        color: var(--color-ink, #25221e);
    }
    .page-order-failed .status-help__list li i{ color: var(--color-forest, #446c3d); font-size: 12px; margin-top: 4px; flex-shrink: 0; }

    /* actions */
    .page-order-failed .status-actions{
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        justify-content: center;
    }
    .page-order-failed .status-btn{
        display: inline-flex;
        align-items: center;
        gap: 9px;
        padding: 13px 26px;
        border-radius: var(--radius-buttons, 8px);
        font-family: var(--font-inter), sans-serif;
        font-size: 15px;
        font-weight: 600;
        text-decoration: none;
        cursor: pointer;
        transition: all 0.25s ease;
    }
    .page-order-failed .status-btn--primary{
        background: var(--color-ember-red, #e34432);
        color: var(--color-paper, #fefdfc);
        border: 1px solid var(--color-ember-red, #e34432);
        box-shadow: 0 8px 20px rgba(227, 68, 50, 0.3);
    }
    .page-order-failed .status-btn--primary:hover{ background: var(--color-deep-ember, #cf3520); color: var(--color-paper, #fefdfc); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(227, 68, 50, 0.4); }

    /* note */
    .page-order-failed .status-note{
        margin-top: 32px;
        padding-top: 24px;
        border-top: 1px solid var(--color-stone, #d7d6d4);
        text-align: center;
    }
    .page-order-failed .status-note--left{ text-align: left; }
    .page-order-failed .status-note__title{
        font-family: var(--font-graphik), sans-serif;
        font-size: 15px;
        font-weight: var(--font-weight-semibold, 600);
        color: var(--color-ink, #25221e);
        margin: 0 0 8px;
    }
    .page-order-failed .status-note p{
        font-family: var(--font-inter), sans-serif;
        font-size: 14px;
        line-height: 1.6;
        color: var(--color-pencil, #6f6c69);
        margin: 0;
    }
    .page-order-failed .status-note a{ color: var(--color-cobalt-link, #0f66ae); font-weight: 600; text-decoration: none; }
    .page-order-failed .status-note a:hover{ color: var(--color-deep-ember, #cf3520); }

    @keyframes page-order-failed-osRise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes page-order-failed-osPop { 0% { transform: scale(0); } 100% { transform: scale(1); } }

    @media (max-width: 575px) {
        .page-order-failed .order-status{ padding: 52px 0 64px; }
        .page-order-failed .status-actions{ flex-direction: column; }
        .page-order-failed .status-btn{ width: 100%; justify-content: center; }
    }
    @media (prefers-reduced-motion: reduce) {
        .page-order-failed .status-card, .page-order-failed .status-icon{ animation: none !important; }
        .page-order-failed .status-help{ transition: none !important; }
    }

/* ===================== page-order-show ===================== */
    /* ============================================================
       ORDER SHOW / INVOICE CANVAS - REDESIGNED EDITORIAL THEMING
       ============================================================ */

    .page-order-show .invoice-section{
        background-color: var(--surface-paper-canvas, #fefdfc);
        position: relative;
        overflow: hidden;
        min-height: 80vh;
    }

    /* Background artistic glows */
    .page-order-show .account-bg-blob{
        position: absolute;
        border-radius: 50%;
        filter: blur(120px);
        -webkit-filter: blur(120px);
        pointer-events: none;
        opacity: 0.65;
        z-index: 0;
        mix-blend-mode: multiply;
    }
    .page-order-show .blob-mint{
        width: 450px;
        height: 450px;
        background-color: var(--color-mint-wash, #f0f6df);
        top: -100px;
        left: -100px;
        animation: page-order-show-invoiceFloat 22s ease-in-out infinite;
    }
    .page-order-show .blob-sky{
        width: 380px;
        height: 380px;
        background-color: var(--color-sky-wash, #dceaff);
        bottom: -80px;
        right: -80px;
        animation: page-order-show-invoiceFloat 26s ease-in-out infinite reverse;
    }
    .page-order-show .blob-peach{
        width: 320px;
        height: 320px;
        background-color: var(--surface-cream-wash, #fff6f0);
        top: 35%;
        left: 40%;
        animation: page-order-show-invoiceFloat 30s ease-in-out infinite;
    }

    @keyframes page-order-show-invoiceFloat {
        0%, 100% { transform: translate(0, 0) scale(1); }
        50%      { transform: translate(28px, -32px) scale(1.08); }
    }

    .page-order-show .invoice-container{
        position: relative;
        z-index: 2;
    }

    /* ---- INVOICE CARD CONTAINER ---- */
    .page-order-show .invoice-card{
        background: var(--color-paper, #fefdfc);
        border: 1px solid var(--color-stone, #d7d6d4);
        border-radius: 20px;
        padding: clamp(20px, 5vw, 50px);
        box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.05), 0 1px 3px -1px rgba(0, 0, 0, 0.03);
    }

    /* ---- BRANDING & HEADER ---- */
    .page-order-show .invoice-card__header{
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 24px;
        border-bottom: 1.5px dashed var(--color-stone, #d7d6d4);
        padding-bottom: 30px;
    }

    .page-order-show .invoice-brand__logo{
        font-family: var(--font-graphik), sans-serif;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.18em;
        color: var(--color-pencil, #6f6c69);
        text-transform: uppercase;
        display: block;
    }

    .page-order-show .invoice-brand__title{
        font-family: var(--font-graphik), sans-serif;
        font-size: 24px;
        font-weight: 700;
        color: var(--color-ink, #25221e);
    }

    .page-order-show .order-number-badge{
        font-family: var(--font-graphik), sans-serif;
        font-size: 13px;
        font-weight: 700;
        background: var(--color-cream, #fff6f0);
        border: 1px solid var(--color-stone, #d7d6d4);
        color: var(--color-ink, #25221e);
        padding: 4px 10px;
        border-radius: 6px;
    }

    .page-order-show .invoice-actions{
        display: flex;
        gap: 12px;
    }

    /* Action Buttons */
    .page-order-show .invoice-btn{
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 20px;
        font-family: var(--font-inter), sans-serif;
        font-size: 13px;
        font-weight: 700;
        border-radius: 10px;
        text-decoration: none;
        transition: all 0.25s ease;
        cursor: pointer;
    }

    .page-order-show .invoice-btn--primary{
        background: var(--color-ember-red, #e34432);
        color: #fff !important;
        border: 1px solid var(--color-ember-red, #e34432);
        box-shadow: 0 4px 12px rgba(227, 68, 50, 0.18);
    }
    .page-order-show .invoice-btn--primary:hover{
        background: var(--color-deep-ember, #cf3520);
        border-color: var(--color-deep-ember, #cf3520);
        transform: translateY(-1.5px);
        box-shadow: 0 6px 16px rgba(227, 68, 50, 0.25);
    }

    .page-order-show .invoice-btn--secondary{
        background: transparent;
        color: var(--color-pencil, #6f6c69) !important;
        border: 1px solid var(--color-stone, #d7d6d4);
    }
    .page-order-show .invoice-btn--secondary:hover{
        background: var(--color-cream, #fff6f0);
        color: var(--color-deep-ember, #cf3520) !important;
        border-color: rgba(227, 68, 50, 0.3);
        transform: translateY(-1.5px);
    }

    /* ---- PROGRESS TIMELINE STEPPER ---- */
    .page-order-show .invoice-progress-container{
        background: var(--surface-cream-wash, #fff6f0);
        border: 1px solid var(--color-stone, #d7d6d4);
        border-radius: 16px;
        padding: 24px;
    }

    .page-order-show .invoice-stepper{
        display: flex;
        justify-content: space-between;
        position: relative;
        width: 100%;
        max-width: 800px;
        margin: 0 auto;
    }

    .page-order-show .stepper-line{
        position: absolute;
        top: 20px;
        left: 40px;
        right: 40px;
        height: 4px;
        background: var(--color-stone, #d7d6d4);
        z-index: 1;
        border-radius: 2px;
    }
    .page-order-show .stepper-line-fill{
        height: 100%;
        background: var(--color-teal-dusk, #497d7e);
        border-radius: 2px;
        transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .page-order-show .stepper-step{
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        z-index: 2;
        width: 120px;
        text-align: center;
    }

    .page-order-show .step-icon{
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: var(--color-paper, #fefdfc);
        border: 2px solid var(--color-stone, #d7d6d4);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        color: var(--color-graphite, #94928f);
        transition: all 0.3s ease;
    }

    .page-order-show .step-label{
        margin-top: 10px;
        font-family: var(--font-inter), sans-serif;
        font-weight: 700;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--color-graphite, #94928f);
    }

    .page-order-show .step-date{
        font-family: var(--font-inter), sans-serif;
        font-size: 10.5px;
        color: var(--color-pencil, #6f6c69);
        margin-top: 2px;
    }

    /* Stepper Status States */
    .page-order-show .stepper-step.completed .step-icon{
        background: var(--color-teal-dusk, #497d7e);
        border-color: var(--color-teal-dusk, #497d7e);
        color: #fff;
        box-shadow: 0 0 10px rgba(73, 125, 126, 0.25);
    }
    .page-order-show .stepper-step.completed .step-label{
        color: var(--color-teal-dusk, #497d7e);
    }

    .page-order-show .stepper-step.cancelled .step-icon{
        background: var(--color-ember-red, #e34432);
        border-color: var(--color-ember-red, #e34432);
        color: #fff;
    }
    .page-order-show .stepper-step.cancelled .step-label{
        color: var(--color-ember-red, #e34432);
    }

    .page-order-show .stepper-step.pending .step-icon{
        background: var(--color-paper, #fefdfc);
        border-color: var(--color-stone, #d7d6d4);
        animation: page-order-show-stepperPulse 2s infinite ease-in-out;
    }

    @keyframes page-order-show-stepperPulse {
        0%, 100% { transform: scale(1); box-shadow: 0 0 0 rgba(0,0,0,0); }
        50% { transform: scale(1.04); box-shadow: 0 0 8px rgba(37,34,30,0.06); }
    }

    /* ---- METADATA DETAILS GRID ---- */
    .page-order-show .invoice-details-grid{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 24px;
    }

    .page-order-show .details-card{
        background: var(--color-paper, #fefdfc);
        border: 1px solid var(--color-stone, #d7d6d4);
        border-radius: 14px;
        padding: 24px;
        transition: transform 0.2s ease;
    }
    .page-order-show .details-card:hover{
        transform: translateY(-2px);
    }

    .page-order-show .details-card__title{
        font-family: var(--font-graphik), sans-serif;
        font-weight: 700;
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--color-deep-ember, #cf3520);
        border-bottom: 1px solid var(--color-stone, #d7d6d4);
        padding-bottom: 12px;
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .page-order-show .detail-row{
        display: flex;
        justify-content: space-between;
        padding: 8px 0;
        border-bottom: 1px solid rgba(37,34,30,0.03);
        font-family: var(--font-inter), sans-serif;
        font-size: 13.5px;
    }
    .page-order-show .detail-row:last-child{
        border-bottom: none;
    }

    .page-order-show .detail-label{
        color: var(--color-pencil, #6f6c69);
        font-weight: 500;
    }
    .page-order-show .detail-value{
        color: var(--color-ink, #25221e);
        font-weight: 700;
        text-align: right;
    }

    /* ---- TABLE AND ITEMS LIST ---- */
    .page-order-show .invoice-section-title{
        font-family: var(--font-graphik), sans-serif;
        font-weight: 700;
        font-size: 16px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--color-ink, #25221e);
    }

    .page-order-show .db-table{
        margin: 0;
        border-collapse: separate;
        border-spacing: 0;
        width: 100%;
        border: 1px solid var(--color-stone, #d7d6d4);
        border-radius: 12px;
        overflow: hidden;
    }
    .page-order-show .db-table thead th{
        background: var(--surface-cream-wash, #fff6f0) !important;
        border-bottom: 1.5px solid var(--color-stone, #d7d6d4) !important;
        color: var(--color-deep-ember, #cf3520) !important;
        font-family: var(--font-inter), sans-serif;
        font-weight: 700;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        padding: 14px 16px;
    }
    .page-order-show .db-table tbody tr{
        border-bottom: 1px solid var(--color-stone, rgba(215, 214, 212, 0.5)) !important;
        transition: background-color 0.2s ease;
    }
    .page-order-show .db-table tbody tr:last-child{
        border-bottom: none !important;
    }
    .page-order-show .db-table tbody tr:hover{
        background-color: var(--surface-cream-wash, #fff6f0) !important;
    }
    .page-order-show .db-table tbody td{
        padding: 16px;
        vertical-align: middle;
        font-family: var(--font-inter), sans-serif;
        font-size: 13.5px;
        color: var(--color-pencil, #6f6c69);
    }
    .page-order-show .db-table__course-title{
        color: var(--color-ink, #25221e) !important;
        font-weight: 700;
    }
    .page-order-show .db-table__price{
        font-family: var(--font-graphik), sans-serif;
        font-weight: 800;
        color: var(--color-ink, #25221e);
    }

    /* Badges & Status Pills */
    .page-order-show .db-points-badge{
        display: inline-flex;
        align-items: center;
        padding: 5px 10px;
        border-radius: 6px;
        font-size: 11.5px;
        font-weight: 700;
        border: 1px solid transparent;
    }
    .page-order-show .db-points-badge--amber{
        background: var(--color-cream, #fff6f0);
        border-color: rgba(227, 68, 50, 0.15);
        color: var(--color-ember-red, #e34432);
    }
    .page-order-show .db-status-pill{
        display: inline-flex;
        align-items: center;
        padding: 4px 10px;
        border-radius: 999px;
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }
    .page-order-show .db-status-pill--success{ background: var(--color-mint-wash, #f0f6df); color: var(--color-forest, #446c3d); }
    .page-order-show .db-status-pill--warning{ background: var(--surface-cream-wash, #fff6f0); color: #cf7820; }
    .page-order-show .db-status-pill--danger{ background: #ffebeb; color: #cf3220; }
    .page-order-show .db-status-pill--teal{ background: var(--color-sky-wash, #dceaff); color: var(--color-teal-dusk, #497d7e); }
    .page-order-show .db-status-pill--neutral{ background: #f1f0ef; color: var(--color-pencil, #6f6c69); }

    /* Summary / Total Row */
    .page-order-show .invoice-summary-row td{
        padding-top: 20px !important;
        padding-bottom: 20px !important;
        font-family: var(--font-graphik), sans-serif;
        font-size: 15px;
        color: var(--color-ink, #25221e);
    }
    .page-order-show .grand-total-value{
        font-size: 20px !important;
        font-weight: 800 !important;
        color: var(--color-ember-red, #e34432) !important;
    }

    /* ---- RESPONSIVE LAYOUTS ---- */
    @media (max-width: 768px) {
        .page-order-show .invoice-card__header{
            flex-direction: column;
            align-items: stretch;
        }
        .page-order-show .invoice-actions{
            justify-content: flex-start;
        }
        .page-order-show .invoice-actions .invoice-btn{
            flex: 1;
            justify-content: center;
        }
        .page-order-show .invoice-stepper{
            flex-direction: column;
            align-items: flex-start;
            gap: 24px;
            padding-left: 20px;
        }
        .page-order-show .stepper-line{
            left: 31px;
            top: 20px;
            bottom: 20px;
            width: 4px;
            height: auto;
        }
        .page-order-show .stepper-line-fill{
            width: 100%;
            height: 50%;
            transition: height 0.6s ease;
        }
        .page-order-show .stepper-step{
            flex-direction: row;
            text-align: left;
            width: 100%;
            gap: 16px;
        }
        .page-order-show .step-label{
            margin-top: 0;
        }
    }

/* ===================== page-order-success ===================== */
    /* =========================================
       ORDER STATUS PAGE — warm theme
       ========================================= */
    .page-order-success .order-status{
        position: relative;
        overflow: hidden;
        background: var(--surface-paper-canvas, #fefdfc);
        padding: 80px 0 100px;
    }
    .page-order-success .order-status__glow{
        position: absolute;
        border-radius: 50%;
        filter: blur(100px);
        pointer-events: none;
        z-index: 0;
        opacity: 0.55;
    }
    .page-order-success .os-glow-mint{ width: 360px; height: 360px; background: var(--color-mint-wash, #f0f6df); top: -120px; left: -80px; }
    .page-order-success .os-glow-sky{ width: 320px; height: 320px; background: var(--color-sky-wash, #dceaff); bottom: 2%; right: -100px; }
    .page-order-success .order-status .container{ position: relative; z-index: 1; }

    /* card */
    .page-order-success .status-card{
        position: relative;
        overflow: hidden;
        background: var(--color-paper, #fefdfc);
        border: 1px solid var(--color-stone, #d7d6d4);
        border-radius: 24px;
        padding: clamp(28px, 4vw, 56px);
        box-shadow: 0 20px 50px rgba(37, 34, 30, 0.07), 0 2px 8px rgba(37, 34, 30, 0.03);
        animation: page-order-success-osRise 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
    }
    .page-order-success .status-card__accent{
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 4px;
    }
    .page-order-success .status-card__accent--success{ background: linear-gradient(90deg, var(--color-forest, #446c3d), var(--color-teal-dusk, #497d7e)); }

    /* icon */
    .page-order-success .status-icon{
        width: 110px;
        height: 110px;
        margin: 0 auto 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        font-size: 50px;
        animation: page-order-success-osPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
    }
    .page-order-success .status-icon--success{
        background: var(--color-mint-wash, #f0f6df);
        border: 2px solid rgba(68, 108, 61, 0.25);
        color: var(--color-forest, #446c3d);
    }

    .page-order-success .status-title{
        font-family: var(--font-graphik), sans-serif;
        font-size: clamp(26px, 3.4vw, 36px);
        font-weight: var(--font-weight-bold, 700);
        letter-spacing: -0.02em;
        color: var(--color-ink, #25221e);
        margin: 0 0 10px;
    }
    .page-order-success .status-text{
        font-family: var(--font-inter), sans-serif;
        font-size: 16px;
        line-height: 1.65;
        color: var(--color-pencil, #6f6c69);
        margin: 0 auto 36px;
        max-width: 520px;
    }

    /* facts grid */
    .page-order-success .status-grid{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
        margin-bottom: 36px;
    }
    .page-order-success .status-fact{
        background: var(--color-cream, #fff6f0);
        border: 1px solid var(--color-stone, #d7d6d4);
        border-radius: 14px;
        padding: 18px 20px;
        transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    }
    .page-order-success .status-fact:hover{
        transform: translateY(-3px);
        box-shadow: var(--shadow-lg);
        border-color: rgba(227, 68, 50, 0.3);
    }
    .page-order-success .status-fact--accent{ background: var(--color-mint-wash, #f0f6df); border-color: rgba(68, 108, 61, 0.2); }
    .page-order-success .status-fact__label{
        display: block;
        font-family: var(--font-inter), sans-serif;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.07em;
        color: var(--color-graphite, #94928f);
        margin-bottom: 8px;
    }
    .page-order-success .status-fact__value{
        font-family: var(--font-graphik), sans-serif;
        font-size: 18px;
        font-weight: var(--font-weight-semibold, 600);
        color: var(--color-ink, #25221e);
        word-break: break-word;
    }
    .page-order-success .status-pill{
        display: inline-block;
        padding: 5px 14px;
        border-radius: 999px;
        font-family: var(--font-inter), sans-serif;
        font-size: 13px;
        font-weight: 600;
    }
    .page-order-success .status-pill--success{ background: var(--color-forest, #446c3d); color: #fff; }

    /* actions */
    .page-order-success .status-actions{
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        justify-content: center;
    }
    .page-order-success .status-btn{
        display: inline-flex;
        align-items: center;
        gap: 9px;
        padding: 13px 26px;
        border-radius: var(--radius-buttons, 8px);
        font-family: var(--font-inter), sans-serif;
        font-size: 15px;
        font-weight: 600;
        text-decoration: none;
        cursor: pointer;
        transition: all 0.25s ease;
    }
    .page-order-success .status-btn--primary{
        background: var(--color-ember-red, #e34432);
        color: var(--color-paper, #fefdfc);
        border: 1px solid var(--color-ember-red, #e34432);
        box-shadow: 0 8px 20px rgba(227, 68, 50, 0.3);
    }
    .page-order-success .status-btn--primary:hover{ background: var(--color-deep-ember, #cf3520); color: var(--color-paper, #fefdfc); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(227, 68, 50, 0.4); }
    .page-order-success .status-btn--ghost{
        background: var(--color-paper, #fefdfc);
        color: var(--color-ink, #25221e);
        border: 1px solid var(--color-stone, #d7d6d4);
    }
    .page-order-success .status-btn--ghost:hover{ background: var(--color-cream, #fff6f0); color: var(--color-deep-ember, #cf3520); border-color: rgba(227, 68, 50, 0.3); transform: translateY(-2px); }
    .page-order-success .status-btn--outline{
        background: transparent;
        color: var(--color-deep-ember, #cf3520);
        border: 1.5px solid var(--color-ember-red, #e34432);
    }
    .page-order-success .status-btn--outline:hover{ background: var(--color-ember-red, #e34432); color: var(--color-paper, #fefdfc); transform: translateY(-2px); }

    /* note */
    .page-order-success .status-note{
        margin-top: 32px;
        padding-top: 24px;
        border-top: 1px solid var(--color-stone, #d7d6d4);
        text-align: center;
    }
    .page-order-success .status-note p{
        font-family: var(--font-inter), sans-serif;
        font-size: 14px;
        line-height: 1.6;
        color: var(--color-pencil, #6f6c69);
        margin: 0;
    }
    .page-order-success .status-note a{ color: var(--color-cobalt-link, #0f66ae); font-weight: 600; text-decoration: none; }
    .page-order-success .status-note a:hover{ color: var(--color-deep-ember, #cf3520); }

    @keyframes page-order-success-osRise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes page-order-success-osPop { 0% { transform: scale(0); } 100% { transform: scale(1); } }

    @media (max-width: 575px) {
        .page-order-success .order-status{ padding: 52px 0 64px; }
        .page-order-success .status-grid{ grid-template-columns: 1fr; }
        .page-order-success .status-actions{ flex-direction: column; }
        .page-order-success .status-btn{ width: 100%; justify-content: center; }
    }
    @media (prefers-reduced-motion: reduce) {
        .page-order-success .status-card, .page-order-success .status-icon{ animation: none !important; }
        .page-order-success .status-fact{ transition: none !important; }
    }

/* ===================== page-page ===================== */
    /* ============================================================
       DYNAMIC PAGES - PREMIUM EDITORIAL TEXT STYLING
       ============================================================ */

    /* =========================================================
       POLICY / STATIC PAGE  —  "Typeset Legal Document"
       Two-column editorial layout: dark sticky meta rail +
       clean typeset article sheet. Teal/forest accent system.
       ========================================================= */
    .page-page .doc-section{
        position: relative;
        background-color: #f6f5f2;                 /* soft warm stone backdrop */
        padding: 72px 0 96px;
        overflow: hidden;
    }

    /* thin brand rule pinned to the very top of the section */
    .page-page .doc-topline{
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 3px;
        background: linear-gradient(90deg,
            var(--color-deep-ember, #c1940d) 0%,
            var(--color-ember-red, #ffc107) 55%,
            var(--color-deep-ember, #c1940d) 100%);
        z-index: 3;
    }

    .page-page .doc-container{ position: relative; z-index: 2; }

    /* --- the two-column grid --------------------------------- */
    .page-page .doc-layout{
        display: grid;
        grid-template-columns: 300px minmax(0, 1fr);
        gap: 40px;
        align-items: start;
    }

    /* =========================================================
       LEFT META RAIL  (dark ink panel, sticky)
       ========================================================= */
    .page-page .doc-rail{ position: relative; }

    .page-page .doc-rail-inner{
        position: sticky;
        top: 100px;
        background:
            radial-gradient(120% 80% at 100% 0%, rgba(255,193,7,0.30) 0%, transparent 55%),
            var(--color-ink, #25221e);
        color: #f4f2ee;
        border-radius: 20px;
        padding: 30px 26px;
        box-shadow:
            0 24px 60px rgba(37, 34, 30, 0.22),
            0 2px 0 rgba(255,255,255,0.04) inset;
        overflow: hidden;
        animation: page-page-docFade 0.6s ease-out both;
    }

    .page-page .doc-chip{
        display: inline-flex;
        align-items: center;
        gap: 7px;
        font-family: var(--font-graphik), sans-serif;
        font-size: 11px;
        font-weight: var(--font-weight-bold, 700);
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: #ffe08a;
        background: rgba(255, 193, 7, 0.20);
        border: 1px solid rgba(255, 224, 138, 0.30);
        padding: 6px 12px;
        border-radius: 999px;
    }

    .page-page .doc-chip i{ font-size: 11px; }

    .page-page .doc-rail-title{
        font-family: var(--font-graphik), sans-serif;
        font-size: 24px;
        line-height: 1.2;
        font-weight: var(--font-weight-bold, 700);
        color: #ffffff;
        letter-spacing: var(--tracking-heading, -0.4px);
        margin: 18px 0 0;
    }

    .page-page .doc-rail-divider{
        height: 1px;
        background: linear-gradient(90deg, rgba(244,242,238,0.35), transparent);
        margin: 22px 0;
    }

    .page-page .doc-meta-row{
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 12px;
        padding: 9px 0;
        border-bottom: 1px dashed rgba(244,242,238,0.14);
    }

    .page-page .doc-meta-label{
        font-family: var(--font-graphik), sans-serif;
        font-size: 11px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: rgba(244,242,238,0.55);
    }

    .page-page .doc-meta-value{
        font-family: var(--font-inter), sans-serif;
        font-size: 13px;
        font-weight: var(--font-weight-medium, 500);
        color: #f4f2ee;
        text-align: right;
    }

    .page-page .doc-rail-note{
        font-family: var(--font-inter), sans-serif;
        font-size: 13px;
        line-height: 1.65;
        color: rgba(244,242,238,0.62);
        margin: 20px 0 24px;
    }

    .page-page .doc-print-btn{
        display: inline-flex;
        align-items: center;
        gap: 9px;
        width: 100%;
        justify-content: center;
        font-family: var(--font-graphik), sans-serif;
        font-size: 13px;
        font-weight: var(--font-weight-bold, 700);
        letter-spacing: 0.02em;
        color: var(--color-ink, #25221e);
        background: #f4f2ee;
        border: none;
        border-radius: 12px;
        padding: 13px 16px;
        text-decoration: none;
        transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
    }

    .page-page .doc-print-btn:hover{
        transform: translateY(-2px);
        background: var(--color-ember-red, #ffc107);
        color: var(--color-ink, #25221e);
    }

    /* =========================================================
       RIGHT ARTICLE SHEET  (clean typeset page)
       ========================================================= */
    .page-page .doc-sheet{
        position: relative;
        background-color: #ffffff;
        border: 1px solid #e8e6e1;
        border-radius: 4px 20px 20px 4px;          /* ledger-like left edge */
        border-left: 5px solid var(--color-ember-red, #ffc107);
        padding: 56px clamp(26px, 4.5vw, 64px) 60px;
        box-shadow: 0 14px 44px rgba(37, 34, 30, 0.07);
        animation: page-page-docFade 0.6s ease-out 0.06s both;
    }

    /* small emblem floated top-right of the sheet */
    .page-page .doc-sheet-flag{
        position: absolute;
        top: 30px; right: 34px;
        width: 46px; height: 46px;
        display: flex; align-items: center; justify-content: center;
        border-radius: 12px;
        background: linear-gradient(135deg, var(--color-ember-red, #ffc107), var(--color-deep-ember, #c1940d));
        color: var(--color-ink, #25221e);
        font-size: 18px;
        box-shadow: 0 8px 20px rgba(255,193,7,0.35);
    }

    /* =========================================================
       RICH TEXT TYPOGRAPHY
       ========================================================= */
    .page-page .policy-rich-text{
        font-family: var(--font-inter), sans-serif;
        font-size: var(--text-body, 16px);
        line-height: 1.75;
        color: var(--color-pencil, #56534f);
    }

    .page-page .policy-rich-text h1,
    .page-page .policy-rich-text h2,
    .page-page .policy-rich-text h3{
        font-family: var(--font-graphik), sans-serif;
        color: var(--color-ink, #25221e);
        font-weight: var(--font-weight-bold, 700);
        letter-spacing: var(--tracking-heading, -0.3px);
    }

    .page-page .policy-rich-text h1{
        font-size: clamp(30px, 4vw, 40px);
        line-height: 1.15;
        margin: 0 0 8px;
        padding-right: 60px;                        /* clear the feather emblem */
    }

    .page-page .policy-rich-text h3{
        font-size: 1.15em;
        margin: 32px 0 12px;
    }

    .page-page .policy-rich-text p{
        margin-bottom: 22px;
        color: var(--color-pencil, #56534f);
    }

    /* Section headings — left marker + full hairline rule
       (no auto-number: content already carries "1.", "2." …) */
    .page-page .policy-rich-text h2{
        position: relative;
        font-size: clamp(22px, 2.6vw, 30px);
        line-height: 1.25;
        margin: 46px 0 20px;
        padding: 0 0 14px 24px;
        border-bottom: 1px solid #ece9e4;
    }
    .page-page .policy-rich-text h2::before{
        content: '';
        position: absolute;
        left: 0; top: 4px; bottom: 18px;
        width: 6px;
        border-radius: 6px;
        background: linear-gradient(var(--color-ember-red, #ffc107), var(--color-deep-ember, #c1940d));
    }

    /* Boxed drop-cap on the opening paragraph */
    .page-page .policy-rich-text > p:first-of-type::first-letter{
        font-family: var(--font-graphik), sans-serif;
        font-size: 2.9em;
        float: left;
        line-height: 0.9;
        margin: 6px 14px 0 0;
        padding: 8px 12px;
        color: var(--color-ink, #25221e);
        font-weight: 700;
        background: linear-gradient(135deg, var(--color-ember-red, #ffc107), var(--color-deep-ember, #c1940d));
        border-radius: 10px;
    }

    /* Links — solid underline that thickens on hover */
    .page-page .policy-rich-text a{
        color: var(--color-deep-ember, #c1940d);
        text-decoration: none;
        font-weight: var(--font-weight-medium, 500);
        box-shadow: inset 0 -1px 0 rgba(255,193,7,0.55);
        transition: color 0.2s ease, box-shadow 0.2s ease;
    }
    .page-page .policy-rich-text a:hover{
        color: var(--color-ink, #25221e);
        box-shadow: inset 0 -2px 0 var(--color-ember-red, #ffc107);
    }

    /* Ordered lists */
    .page-page .policy-rich-text ol{
        margin: 0 0 24px !important;
        padding-left: 30px !important;
        list-style-type: decimal !important;
        list-style-position: outside !important;
    }
    .page-page .policy-rich-text ol li{
        display: list-item !important;
        list-style-type: decimal !important;
        list-style-position: outside !important;
        margin-bottom: 14px !important;
        padding-left: 6px;
        color: var(--color-pencil, #56534f) !important;
        font-size: var(--text-body, 16px);
    }
    .page-page .policy-rich-text ol li::marker{
        font-family: var(--font-graphik), sans-serif;
        font-weight: var(--font-weight-bold, 700);
        color: var(--color-deep-ember, #c1940d);
    }
    .page-page .policy-rich-text ol li h3{
        display: inline;
        margin: 0 0 0 6px !important;
        font-size: 1.2em;
    }
    .page-page .policy-rich-text ol li h4{
        color: var(--color-deep-ember, #c1940d);
        font-family: var(--font-graphik), sans-serif;
        font-weight: var(--font-weight-bold, 700);
        margin: 22px 0 10px !important;
        font-size: 1.15em;
    }

    /* Unordered lists — custom chevron markers, no default disc */
    .page-page .policy-rich-text ul{
        margin: 8px 0 24px !important;
        padding-left: 4px !important;
        list-style: none !important;
    }
    .page-page .policy-rich-text ul li{
        position: relative;
        display: list-item !important;
        list-style: none !important;
        margin-bottom: 11px !important;
        padding-left: 30px !important;
        color: var(--color-pencil, #56534f) !important;
        font-size: var(--text-body, 16px);
        transition: color 0.2s ease, transform 0.2s ease;
    }
    .page-page .policy-rich-text ul li::before{
        content: '\f105';                            /* fa angle-right */
        font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free';
        font-weight: 900;
        position: absolute;
        left: 6px;
        top: 1px;
        color: var(--color-deep-ember, #c1940d);
        transition: transform 0.2s ease, color 0.2s ease;
    }
    .page-page .policy-rich-text ul li:hover{
        color: var(--color-ink, #25221e) !important;
        transform: translateX(3px);
    }
    .page-page .policy-rich-text ul li:hover::before{
        color: var(--color-ember-red, #ffc107);
        transform: translateX(2px);
    }

    .page-page .policy-rich-text li{
        margin-bottom: 11px !important;
        color: var(--color-pencil, #56534f) !important;
    }

    /* Blockquote / callout treatment if present */
    .page-page .policy-rich-text blockquote{
        margin: 28px 0 !important;
        padding: 18px 24px !important;
        background: #fff8e6 !important;
        border-left: 4px solid var(--color-ember-red, #ffc107) !important;
        border-radius: 4px 12px 12px 4px !important;
        color: var(--color-ink, #25221e) !important;
        font-style: normal !important;
    }

    /* Metadata / company details container (raw HTML) */
    .page-page .policy-rich-text .contact-content{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 18px;
        margin: 32px 0 !important;
        padding: 24px !important;
        background: #fff8e6 !important;
        border: 1px solid #f0e2b5 !important;
        border-radius: 14px !important;
        transition: box-shadow 0.3s ease, transform 0.3s ease !important;
    }
    .page-page .policy-rich-text .contact-content:hover{
        box-shadow: 0 12px 30px rgba(193,148,13,0.14) !important;
        transform: translateY(-2px) !important;
    }
    .page-page .policy-rich-text .contact-content .content{
        display: flex !important;
        flex-direction: column !important;
    }
    .page-page .policy-rich-text .contact-content .title{
        font-family: var(--font-graphik), sans-serif !important;
        font-size: var(--text-body-sm, 13px) !important;
        font-weight: var(--font-weight-bold, 700) !important;
        color: var(--color-deep-ember, #c1940d) !important;
        margin: 0 0 6px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.06em !important;
    }
    .page-page .policy-rich-text .contact-content p,
    .page-page .policy-rich-text .contact-content span{
        font-family: var(--font-inter), sans-serif !important;
        font-size: var(--text-body-sm, 14px) !important;
        color: var(--color-pencil, #56534f) !important;
        margin: 0 !important;
    }

    /* Tables — amber header, quiet zebra rows */
    .page-page .policy-rich-text table{
        width: 100% !important;
        margin: 30px 0 !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
        border: 1px solid #e8e6e1 !important;
        border-radius: 12px !important;
        overflow: hidden !important;
    }
    .page-page .policy-rich-text table th{
        background: linear-gradient(135deg, var(--color-ember-red, #ffc107), var(--color-deep-ember, #c1940d)) !important;
        color: var(--color-ink, #25221e) !important;
        padding: 15px 18px !important;
        font-family: var(--font-graphik), sans-serif !important;
        font-weight: var(--font-weight-bold, 700) !important;
        text-align: left !important;
        font-size: var(--text-body-sm, 14px) !important;
        letter-spacing: 0.3px !important;
        border: none !important;
    }
    .page-page .policy-rich-text table tr:nth-child(even){ background:#fbf9f4 !important; }
    .page-page .policy-rich-text table tr:hover{ background:#fff8e6 !important; }
    .page-page .policy-rich-text table td{
        padding: 14px 18px !important;
        border: none !important;
        border-bottom: 1px solid #ece9e4 !important;
        color: var(--color-pencil, #56534f) !important;
        font-size: var(--text-body-sm, 14px) !important;
        line-height: 1.6 !important;
    }
    .page-page .policy-rich-text table td:first-child{
        font-weight: var(--font-weight-bold, 700) !important;
        color: var(--color-ink, #25221e) !important;
        width: 30% !important;
    }
    .page-page .policy-rich-text table strong{
        color: var(--color-deep-ember, #c1940d) !important;
        font-weight: var(--font-weight-bold, 700) !important;
    }

    /* Images */
    .page-page .policy-rich-text img{
        max-width: 100% !important;
        width: 106px;
        height: auto !important;
        border-radius: 12px !important;
        box-shadow: 0 8px 24px rgba(37,34,30,0.08) !important;
        transition: transform 0.3s cubic-bezier(0.165,0.84,0.44,1) !important;
    }
    .page-page .policy-rich-text img:hover{ transform: scale(1.01) !important; }

    @keyframes page-page-docFade {
        from { opacity: 0; transform: translateY(16px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* --- Responsive ------------------------------------------ */
    @media (max-width: 991px){
        .page-page .doc-layout{ grid-template-columns: 1fr; gap: 26px; }
        .page-page .doc-rail-inner{ position: static; }
        .page-page .doc-rail-title{ font-size: 22px; }
    }

    @media (max-width: 768px){
        .page-page .doc-section{ padding: 44px 0 60px; }
        .page-page .doc-sheet{ padding: 34px 22px 40px; border-radius: 4px 14px 14px 4px; }
        .page-page .doc-sheet-flag{ width: 40px; height: 40px; top: 22px; right: 22px; font-size: 15px; }
        .page-page .policy-rich-text h1{ padding-right: 52px; }
        .page-page .policy-rich-text > p:first-of-type::first-letter{ font-size: 2.5em; }
    }

    @media (prefers-reduced-motion: reduce){
        .page-page .doc-rail-inner,
        .page-page .doc-sheet{ animation: none !important; }
        .page-page .policy-rich-text ul li,
        .page-page .policy-rich-text img{ transition: none !important; }
    }

    @media print{
        .page-page .doc-rail, .page-page .doc-topline, .page-page .doc-sheet-flag{ display: none !important; }
        .page-page .doc-layout{ display: block !important; }
        .page-page .doc-sheet{ border: none !important; box-shadow: none !important; padding: 0 !important; }
    }

/* ===================== page-product-lists ===================== */
    /* =========================================
       CATEGORY COVER HERO (magazine style)
       ========================================= */
    .page-product-lists .cat-hero{
        background: var(--surface-paper-canvas, #fefdfc);
        padding: 32px 0 8px;
    }
    .page-product-lists .cat-hero__card{
        position: relative;
        overflow: hidden;
        border-radius: 24px;
        min-height: 340px;
        display: flex;
        align-items: flex-end;
        border: 1px solid var(--color-stone, #d7d6d4);
        box-shadow: var(--shadow-lg);
    }
    /* generic catalog cover if no category */
    .page-product-lists .cat-hero__media--generic{
        background: linear-gradient(135deg, var(--color-teal-dusk, #497d7e), var(--color-ember-red, #e34432));
    }
    .page-product-lists .cat-hero__card--generic{
        background: var(--color-cream, #fff6f0);
    }
    
    /* cover image / fallback */
    .page-product-lists .cat-hero__media{
        position: absolute;
        inset: 0;
        background-image: var(--cat-cover, none);
        background-size: cover;
        background-position: center;
        transform: scale(1.02);
        transition: transform 8s ease;
    }
    .page-product-lists .cat-hero__card:hover .cat-hero__media{ transform: scale(1.08); }
    .page-product-lists .cat-hero__media--plain{
        background-image: none;
        background: linear-gradient(135deg, var(--color-teal-dusk, #497d7e), var(--color-ink, #25221e));
    }
    /* readability veil */
    .page-product-lists .cat-hero__veil{
        position: absolute;
        inset: 0;
        background:
            linear-gradient(90deg, rgba(37, 34, 30, 0.82) 0%, rgba(37, 34, 30, 0.45) 55%, rgba(37, 34, 30, 0.15) 100%),
            linear-gradient(0deg, rgba(37, 34, 30, 0.55) 0%, transparent 60%);
    }
    /* top gradient accent line */
    .page-product-lists .cat-hero__card::before{
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 4px;
        z-index: 3;
        background: linear-gradient(90deg, var(--color-ember-red, #e34432), var(--color-teal-dusk, #497d7e), var(--color-forest, #446c3d));
    }

    .page-product-lists .cat-hero__inner{
        position: relative;
        z-index: 2;
        padding: clamp(28px, 4vw, 48px);
        max-width: 720px;
    }
    .page-product-lists .cat-hero__eyebrow{
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 7px 14px;
        margin-bottom: 16px;
        border-radius: 999px;
        background: rgba(254, 253, 252, 0.14);
        -webkit-backdrop-filter: blur(8px);
                backdrop-filter: blur(8px);
        border: 1px solid rgba(254, 253, 252, 0.25);
        font-family: var(--font-inter), sans-serif;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #fff;
    }
    .page-product-lists .cat-hero__eyebrow i{ color: #ffd9cf; }

    .page-product-lists .cat-hero__title{
        font-family: var(--font-graphik), sans-serif;
        font-size: clamp(30px, 4.4vw, 50px);
        font-weight: var(--font-weight-bold, 700);
        line-height: 1.08;
        letter-spacing: -0.02em;
        color: #fff;
        margin: 0 0 14px;
        text-shadow: 0 2px 18px rgba(0, 0, 0, 0.25);
    }
    .page-product-lists .cat-hero__summary{
        font-family: var(--font-inter), sans-serif;
        font-size: clamp(15px, 1.4vw, 17px);
        line-height: 1.65;
        color: rgba(255, 255, 255, 0.88);
        margin: 0 0 24px;
        max-width: 600px;
    }

    .page-product-lists .cat-hero__stats{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px;
    }
    .page-product-lists .cat-hero__chip{
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 9px 16px;
        border-radius: 999px;
        background: rgba(254, 253, 252, 0.16);
        -webkit-backdrop-filter: blur(8px);
                backdrop-filter: blur(8px);
        border: 1px solid rgba(254, 253, 252, 0.25);
        font-family: var(--font-inter), sans-serif;
        font-size: 14px;
        font-weight: 600;
        color: #fff;
    }
    .page-product-lists .cat-hero__chip i{ font-size: 13px; color: #ffd9cf; }
    .page-product-lists .cat-hero__cta{
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 20px;
        border-radius: 999px;
        background: var(--color-ember-red, #e34432);
        color: var(--color-paper, #fefdfc);
        font-family: var(--font-inter), sans-serif;
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
        box-shadow: 0 8px 18px rgba(227, 68, 50, 0.4);
        transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
    }
    .page-product-lists .cat-hero__cta:hover{
        background: var(--color-deep-ember, #cf3520);
        color: var(--color-paper, #fefdfc);
        transform: translateY(-2px);
    }
    .page-product-lists .cat-hero__cta i{ font-size: 12px; transition: transform 0.25s ease; }
    .page-product-lists .cat-hero__cta:hover i{ transform: translateY(3px); }

    /* =========================================
       CATALOG SECTION + TOOLBAR
       ========================================= */
    .page-product-lists .catalog-section{
        background: var(--surface-paper-canvas, #fefdfc);
        padding: 56px 0 80px;
    }
    .page-product-lists .catalog-head{ margin-bottom: 48px; }
    .page-product-lists .catalog-head__badge{
        display: inline-flex;
        align-items: center;
        font-family: var(--font-inter), sans-serif;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        padding: 6px 12px;
        border-radius: var(--radius-badges, 8px);
        background-color: var(--color-cream, #fff6f0);
        color: var(--color-deep-ember, #cf3520);
        border: 1px solid var(--color-stone, #d7d6d4);
        box-shadow: var(--shadow-subtle);
        margin-bottom: 16px;
    }
    .page-product-lists .catalog-head__title{
        font-family: var(--font-graphik), sans-serif;
        font-size: clamp(28px, 3.6vw, 42px);
        font-weight: var(--font-weight-bold, 700);
        line-height: 1.15;
        letter-spacing: -0.02em;
        color: var(--color-ink, #25221e);
        margin: 0 0 12px;
    }
    .page-product-lists .catalog-head__sub{
        font-family: var(--font-inter), sans-serif;
        font-size: 16px;
        line-height: 1.6;
        color: var(--color-pencil, #6f6c69);
        margin: 0 auto;
        max-width: 600px;
    }

    /* CATALOG TOOLBAR (Search & Filters) */
    .page-product-lists .catalog-toolbar{
        background: var(--color-paper, #fefdfc);
        border: 1px solid var(--color-stone, #d7d6d4);
        border-radius: 16px;
        padding: 18px 24px;
        box-shadow: var(--shadow-subtle);
    }
    .page-product-lists .search-input-wrapper{
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
    }
    .page-product-lists .search-icon{
        position: absolute;
        left: 16px;
        color: var(--color-graphite, #94928f);
        font-size: 14px;
        pointer-events: none;
    }
    .page-product-lists .catalog-search-control{
        width: 100%;
        background: var(--surface-paper-canvas, #fefdfc);
        border: 1px solid var(--color-stone, #d7d6d4);
        border-radius: var(--radius-buttons, 8px);
        padding: 11px 16px 11px 42px;
        font-family: var(--font-inter), sans-serif;
        font-size: 14px;
        color: var(--color-ink, #25221e);
        transition: all 0.25s ease;
    }
    .page-product-lists .catalog-search-control:focus{
        outline: none;
        border-color: var(--color-ember-red, #e34432);
        box-shadow: 0 0 0 3px #f0f6df;
    }
    .page-product-lists .filter-btn{
        background: var(--surface-paper-canvas, #fefdfc);
        border: 1px solid var(--color-stone, #d7d6d4);
        color: var(--color-pencil, #6f6c69);
        font-family: var(--font-inter), sans-serif;
        font-size: 13px;
        font-weight: 600;
        padding: 9px 18px;
        border-radius: var(--radius-buttons, 8px);
        cursor: pointer;
        transition: all 0.2s ease;
    }
    .page-product-lists .filter-btn:hover{
        border-color: rgba(227, 68, 50, 0.3);
        color: var(--color-deep-ember, #cf3520);
        background: var(--color-cream, #fff6f0);
    }
    .page-product-lists .filter-btn.active{
        background: var(--color-ember-red, #e34432);
        border-color: var(--color-ember-red, #e34432);
        color: var(--color-paper, #fefdfc);
        box-shadow: 0 4px 12px rgba(227, 68, 50, 0.2);
    }

    /* =========================================
       COURSE TILE
       ========================================= */
    .page-product-lists .course-tile{
        border-radius: 16px;
        overflow: hidden;
        box-shadow: var(--shadow-subtle);
        padding: 18px;
        transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    .page-product-lists .course-tile:hover{
        box-shadow: rgba(37, 34, 30, 0.08) 0px 14px 28px, rgba(37, 34, 30, 0.04) 0px 4px 10px;
        transform: translateY(-6px);
    }

    /* tint variants */
    .page-product-lists .course-tile--tint-0{
        /* background-color: var(--color-cream, #fff6f0); */
        border: 1px solid rgba(227, 68, 50, 0.15);
    }
    .page-product-lists .course-tile--tint-0:hover{ border-color: rgba(227, 68, 50, 0.45); }
    .page-product-lists .course-tile--tint-1{
        /* background-color: var(--color-mint-wash, #f0f6df); */
        border: 1px solid rgba(68, 108, 61, 0.15);
    }
    .page-product-lists .course-tile--tint-1:hover{ border-color: rgba(68, 108, 61, 0.45); }
    .page-product-lists .course-tile--tint-2{
        /* background-color: var(--color-sky-wash, #dceaff); */
        border: 1px solid rgba(15, 102, 174, 0.15);
    }
    .page-product-lists .course-tile--tint-2:hover{ border-color: rgba(15, 102, 174, 0.45); }

    /* image overlay */
    .page-product-lists .course-tile-image{
        position: relative;
        width: 100%;
        height: 300px;
        overflow: hidden;
        border-radius: 12px;
        background: var(--color-paper, #fefdfc);
        border: 1px solid var(--color-stone, #d7d6d4);
    }
    .page-product-lists .course-tile-img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.4s ease;
    }
    .page-product-lists .course-tile:hover .course-tile-img{ transform: scale(1.06); }
    .page-product-lists .course-tile-placeholder{
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 42px;
        color: var(--color-deep-ember, #cf3520);
        background: var(--color-paper, #fefdfc);
    }
    .page-product-lists .course-tile-overlay{
        position: absolute;
        inset: 0;
        background: rgba(37, 34, 30, 0.62);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.3s ease;
        -webkit-backdrop-filter: blur(2px);
                backdrop-filter: blur(2px);
    }
    .page-product-lists .course-tile:hover .course-tile-overlay{ opacity: 1; }
    .page-product-lists .course-tile-explore{
        background: var(--color-ember-red, #e34432);
        color: var(--color-paper, #fefdfc);
        padding: 10px 18px;
        border-radius: var(--radius-buttons, 8px);
        font-family: var(--font-inter), sans-serif;
        font-weight: 600;
        font-size: 13px;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        box-shadow: 0 4px 12px rgba(227, 68, 50, 0.25);
        transform: translateY(6px);
        transition: all 0.3s ease;
    }
    .page-product-lists .course-tile:hover .course-tile-explore{ transform: translateY(0); }
    .page-product-lists .course-tile-explore:hover{
        background: var(--color-deep-ember, #cf3520);
        color: var(--color-paper, #fefdfc);
    }

    /* content */
    .page-product-lists .course-tile-content{
        padding: 18px 2px 2px;
        flex: 1;
        display: flex;
        flex-direction: column;
    }
    .page-product-lists .course-tile-meta{
        display: flex;
        align-items: center;
        margin-bottom: 14px;
    }
    .page-product-lists .course-tile-badge{
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        background: var(--color-paper, #fefdfc);
        box-shadow: var(--shadow-subtle);
        transition: all 0.3s ease;
    }
    .page-product-lists .course-tile--tint-0 .course-tile-badge{ color: var(--color-deep-ember, #cf3520); border: 1px solid rgba(227, 68, 50, 0.25); }
    .page-product-lists .course-tile--tint-1 .course-tile-badge{ color: var(--color-forest, #446c3d); border: 1px solid rgba(68, 108, 61, 0.25); }
    .page-product-lists .course-tile--tint-2 .course-tile-badge{ color: var(--color-cobalt-link, #0f66ae); border: 1px solid rgba(15, 102, 174, 0.25); }
    
    .page-product-lists .course-tile-levels{
        margin-left: auto;
        font-family: var(--font-inter), sans-serif;
        font-size: 11px;
        font-weight: 600;
        color: var(--color-pencil, #6f6c69);
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .page-product-lists .course-tile-title{
        font-family: var(--font-graphik), sans-serif;
        font-size: 17px;
        font-weight: 700;
        line-height: 1.32;
        margin: 0 0 10px;
    }
    .page-product-lists .course-tile-title a{
        color: var(--color-ink, #25221e);
        text-decoration: none;
        transition: color 0.25s ease;
    }
    .page-product-lists .course-tile-title a:hover{ color: var(--color-deep-ember, #cf3520); }

    .page-product-lists .course-tile-desc{
        font-family: var(--font-inter), sans-serif;
        font-size: 13px;
        line-height: 1.55;
        color: var(--color-pencil, #6f6c69);
        margin: 0 0 18px 0;
    }

    /* Course Tile Footer Details */
    .page-product-lists .course-tile-footer{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: auto;
        padding-top: 14px;
        border-top: 1px dashed var(--color-stone, #d7d6d4);
    }
    .page-product-lists .course-tile-price{
        display: flex;
        flex-direction: column;
    }
    .page-product-lists .price-prefix{
        font-family: var(--font-inter), sans-serif;
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--color-graphite, #94928f);
    }
    .page-product-lists .price-value{
        font-family: var(--font-graphik), sans-serif;
        font-size: 16px;
        font-weight: 700;
        color: var(--color-ember-red, #e34432);
    }
    .page-product-lists .price-value small{
        font-size: 11px;
        font-weight: 600;
        color: var(--color-pencil, #6f6c69);
    }
    .page-product-lists .course-tile-btn{
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-family: var(--font-inter), sans-serif;
        font-size: 12px;
        font-weight: 700;
        color: var(--color-ink, #25221e);
        text-decoration: none;
        transition: color 0.2s ease, transform 0.2s ease;
    }
    .page-product-lists .course-tile-btn i{
        font-size: 10px;
        transition: transform 0.2s ease;
    }
    .page-product-lists .course-tile:hover .course-tile-btn{
        color: var(--color-ember-red, #e34432);
    }
    .page-product-lists .course-tile:hover .course-tile-btn i{
        transform: translateX(3px);
    }

    .page-product-lists .line-clamp-2{
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* =========================================
       PAGINATION
       ========================================= */
    .page-product-lists .catalog-section .pagination{ gap: 6px; }
    .page-product-lists .catalog-section .page-link{
        color: var(--color-ink, #25221e);
        background: var(--color-paper, #fefdfc);
        border: 1px solid var(--color-stone, #d7d6d4);
        border-radius: var(--radius-buttons, 8px) !important;
        font-family: var(--font-inter), sans-serif;
        font-weight: 500;
        padding: 9px 15px;
        transition: all 0.2s ease;
    }
    .page-product-lists .catalog-section .page-link:hover{
        color: var(--color-deep-ember, #cf3520);
        background: rgba(227, 68, 50, 0.06);
        border-color: rgba(227, 68, 50, 0.3);
        box-shadow: none;
    }
    .page-product-lists .catalog-section .page-item.active .page-link{
        background: var(--color-ember-red, #e34432);
        border-color: var(--color-ember-red, #e34432);
        color: var(--color-paper, #fefdfc);
        box-shadow: 0 4px 12px rgba(227, 68, 50, 0.28);
    }
    .page-product-lists .catalog-section .page-item.disabled .page-link{
        color: var(--color-graphite, #94928f);
        background: var(--color-paper, #fefdfc);
        border-color: var(--color-stone, #d7d6d4);
        opacity: 0.6;
    }

    /* =========================================
       RESPONSIVE
       ========================================= */
    .page-product-lists #catalog{ scroll-margin-top: 90px; }

    @media (max-width: 768px) {
        .page-product-lists .cat-hero{ padding: 20px 0 4px; }
        .page-product-lists .cat-hero__card{ min-height: 300px; border-radius: 18px; }
        .page-product-lists .cat-hero__veil{
            background: linear-gradient(0deg, rgba(37, 34, 30, 0.85) 0%, rgba(37, 34, 30, 0.3) 70%, rgba(37, 34, 30, 0.15) 100%);
        }
        .page-product-lists .catalog-section{ padding: 40px 0 56px; }
        .page-product-lists .course-tile:hover{ transform: translateY(-4px); }
        .page-product-lists .course-tile-image{ height: 170px; }
        .page-product-lists .cat-hero__stats{ gap: 10px; }
        .page-product-lists .cat-hero__cta, .page-product-lists .cat-hero__chip{ font-size: 13px; }
        .page-product-lists .catalog-toolbar{ padding: 14px 16px; }
    }

    @media (prefers-reduced-motion: reduce) {
        .page-product-lists .course-tile,
        .page-product-lists .course-tile-img,
        .page-product-lists .cat-hero__media{ transition: none !important; }
        .page-product-lists .course-tile:hover{ transform: none !important; }
        .page-product-lists .cat-hero__card:hover .cat-hero__media{ transform: scale(1.02) !important; }
    }

    /* ============================================================
       CAT BANNER — FULL-WIDTH DARK EDITORIAL HERO (redesigned)
       ============================================================ */
    .page-product-lists .cat-banner {
        padding: 32px 0 44px;
        background: #fefdfc;
    }
    .page-product-lists .cat-banner__card {
        position: relative;
        min-height: 360px;
        border-radius: 28px;
        overflow: hidden;
        background: linear-gradient(135deg, #1c1812 0%, #2b1a12 60%, #16130f 100%);
        border: 1px solid rgba(255, 255, 255, 0.05);
        box-shadow: 0 30px 70px rgba(22, 19, 15, 0.28),
                    0 8px 20px rgba(22, 19, 15, 0.15);
        display: flex;
        align-items: center;
        isolation: isolate;
    }

    /* Backdrop */
    .page-product-lists .cat-banner__bg {
        position: absolute;
        inset: 0;
        overflow: hidden;
    }
    .page-product-lists .cat-banner__bg-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0.55;
        filter: saturate(1.1) contrast(1.05);
        transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);
    }
    .page-product-lists .cat-banner__card:hover .cat-banner__bg-img {
        transform: scale(1.04);
    }
    .page-product-lists .cat-banner__bg-fallback {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding-right: 8%;
        font-size: 220px;
        color: rgba(240, 165, 140, 0.10);
        line-height: 1;
    }
    /* Left-to-right dark scrim, keeps content legible on any image */
    .page-product-lists .cat-banner__scrim {
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg,
                    rgba(22, 19, 15, 0.94) 0%,
                    rgba(22, 19, 15, 0.78) 45%,
                    rgba(22, 19, 15, 0.35) 80%,
                    rgba(22, 19, 15, 0.15) 100%);
        z-index: 1;
    }
    /* Ember glow bleed on the top-right */
    .page-product-lists .cat-banner__glow {
        position: absolute;
        top: -140px;
        right: -100px;
        width: 460px;
        height: 460px;
        border-radius: 50%;
        background: radial-gradient(circle,
                    rgba(227, 68, 50, 0.35) 0%,
                    transparent 65%);
        filter: blur(80px);
        z-index: 1;
        pointer-events: none;
    }

    /* Content */
    .page-product-lists .cat-banner__content {
        position: relative;
        z-index: 2;
        padding: 52px 56px;
        /* max-width: 720px; */
        width: 100%;
    }
    .page-product-lists .cat-banner__top {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 22px;
    }
    .page-product-lists .cat-banner__icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        height: 50px;
        border-radius: 14px;
        background: linear-gradient(135deg, #e34432 0%, #cf3520 100%);
        color: #ffffff;
        font-size: 20px;
        box-shadow: 0 12px 24px rgba(227, 68, 50, 0.42),
                    inset 0 1px 0 rgba(255, 255, 255, 0.22);
        flex-shrink: 0;
    }
    .page-product-lists .cat-banner__eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-family: var(--font-inter, sans-serif);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: #f0a58c;
    }
    .page-product-lists .cat-banner__eyebrow-dot {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #e34432;
        box-shadow: 0 0 10px rgba(227, 68, 50, 0.55);
        animation: catBannerPulse 1.8s ease-in-out infinite;
    }
    @keyframes catBannerPulse {
        0%,100% { transform: scale(1); opacity: 1; }
        50%     { transform: scale(1.25); opacity: 0.75; }
    }

    .page-product-lists .cat-banner__title {
        font-family: var(--font-graphik, sans-serif);
        font-size: clamp(34px, 5vw, 60px);
        font-weight: 800;
        line-height: 1.05;
        letter-spacing: -0.03em;
        color: #ffffff;
        margin: 0 0 16px 0;
    }
    .page-product-lists .cat-banner__desc {
        font-family: var(--font-inter, sans-serif);
        font-size: 16px;
        line-height: 1.6;
        color: rgba(255, 255, 255, 0.78);
        margin: 0 0 30px 0;
        max-width: 580px;
    }

    /* Footer row */
    .page-product-lists .cat-banner__foot {
        display: flex;
        align-items: center;
        gap: 28px;
        padding-top: 24px;
        border-top: 1px dashed rgba(255, 255, 255, 0.18);
    }
    .page-product-lists .cat-banner__stat {
        display: flex;
        flex-direction: column;
        line-height: 1;
    }
    .page-product-lists .cat-banner__stat-num {
        font-family: var(--font-graphik, sans-serif);
        font-size: 42px;
        font-weight: 800;
        color: #ffffff;
        letter-spacing: -0.02em;
        line-height: 1;
    }
    .page-product-lists .cat-banner__stat-label {
        font-family: var(--font-inter, sans-serif);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: #f0a58c;
        margin-top: 8px;
    }
    .page-product-lists .cat-banner__cta {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 13px 24px;
        background: #e34432;
        color: #ffffff;
        border-radius: 999px;
        font-family: var(--font-inter, sans-serif);
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-decoration: none;
        box-shadow: 0 12px 26px rgba(227, 68, 50, 0.42);
        transition: transform 0.28s ease, background 0.28s ease, box-shadow 0.28s ease;
        margin-left: auto;
        white-space: nowrap;
    }
    .page-product-lists .cat-banner__cta:hover {
        background: #cf3520;
        color: #ffffff;
        transform: translateY(-2px);
        box-shadow: 0 16px 34px rgba(227, 68, 50, 0.55);
    }
    .page-product-lists .cat-banner__cta i {
        font-size: 11px;
        animation: catBannerBounce 1.6s ease-in-out infinite;
    }
    @keyframes catBannerBounce {
        0%,100% { transform: translateY(0); }
        50%     { transform: translateY(4px); }
    }

    /* Responsive */
    @media (max-width: 991px) {
        .page-product-lists .cat-banner__card {
            min-height: 320px;
        }
        .page-product-lists .cat-banner__content {
            padding: 44px 40px;
        }
        .page-product-lists .cat-banner__scrim {
            background: linear-gradient(90deg,
                        rgba(22, 19, 15, 0.94) 0%,
                        rgba(22, 19, 15, 0.80) 70%,
                        rgba(22, 19, 15, 0.55) 100%);
        }
    }
    @media (max-width: 767px) {
        .page-product-lists .cat-banner {
            padding: 24px 0 32px;
        }
        .page-product-lists .cat-banner__card {
            border-radius: 22px;
            min-height: 280px;
        }
        .page-product-lists .cat-banner__content {
            padding: 32px 26px;
        }
        .page-product-lists .cat-banner__scrim {
            background: linear-gradient(180deg,
                        rgba(22, 19, 15, 0.35) 0%,
                        rgba(22, 19, 15, 0.85) 60%,
                        rgba(22, 19, 15, 0.95) 100%);
        }
        .page-product-lists .cat-banner__foot {
            flex-direction: column;
            align-items: flex-start;
            gap: 18px;
        }
        .page-product-lists .cat-banner__cta {
            margin-left: 0;
            width: 100%;
            justify-content: center;
        }
        .page-product-lists .cat-banner__icon {
            width: 44px; height: 44px;
            font-size: 17px;
        }
        .page-product-lists .cat-banner__stat-num { font-size: 34px; }
    }

    /* ============================================================
       CAT SHOWCASE — EDITORIAL SPLIT HERO (category detail header)
       ============================================================ */
    .page-product-lists .cat-showcase {
        position: relative;
        overflow: hidden;
        padding: 40px 0 56px;
        background: linear-gradient(180deg, #fff9f1 0%, #fefdfc 100%);
    }
    .page-product-lists .cat-showcase__blob {
        position: absolute;
        border-radius: 50%;
        filter: blur(90px);
        pointer-events: none;
        z-index: 0;
    }
    .page-product-lists .cat-showcase__blob--a {
        top: -140px;
        right: -100px;
        width: 340px;
        height: 340px;
        background: rgba(227, 68, 50, 0.15);
    }
    .page-product-lists .cat-showcase__blob--b {
        bottom: -160px;
        left: -100px;
        width: 360px;
        height: 360px;
        background: rgba(15, 102, 174, 0.10);
    }
    .page-product-lists .cat-showcase__inner {
        position: relative;
        z-index: 1;
    }
    .page-product-lists .cat-showcase__card {
        display: grid;
        grid-template-columns: 1.15fr 1fr;
        gap: 56px;
        align-items: center;
    }

    /* LEFT — copy */
    .page-product-lists .cat-showcase__copy {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    .page-product-lists .cat-showcase__icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 62px;
        height: 62px;
        border-radius: 18px;
        background: linear-gradient(135deg, var(--color-ember-red, #e34432) 0%, var(--color-deep-ember, #cf3520) 100%);
        color: #ffffff;
        font-size: 26px;
        margin-bottom: 22px;
        box-shadow: 0 14px 28px rgba(227, 68, 50, 0.35),
                    inset 0 1px 0 rgba(255, 255, 255, 0.25);
        transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .page-product-lists .cat-showcase__icon i {
        line-height: 1;
        color: inherit;
        font-size: inherit;
    }
    .page-product-lists .cat-showcase__card:hover .cat-showcase__icon {
        transform: rotate(-6deg) scale(1.06);
    }

    .page-product-lists .cat-showcase__eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-family: var(--font-inter, sans-serif);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: var(--color-deep-ember, #cf3520);
        margin-bottom: 14px;
    }
    .page-product-lists .cat-showcase__eyebrow-dot {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--color-ember-red, #e34432);
        box-shadow: 0 0 10px rgba(227, 68, 50, 0.5);
        animation: catShowPulse 1.8s ease-in-out infinite;
    }
    @keyframes catShowPulse {
        0%,100% { transform: scale(1); opacity: 1; }
        50%     { transform: scale(1.25); opacity: 0.75; }
    }

    .page-product-lists .cat-showcase__title {
        font-family: var(--font-graphik, sans-serif);
        font-size: clamp(32px, 4.5vw, 52px);
        font-weight: 800;
        line-height: 1.06;
        letter-spacing: -0.03em;
        color: var(--color-ink, #25221e);
        margin: 0 0 16px;
    }
    .page-product-lists .cat-showcase__desc {
        font-family: var(--font-inter, sans-serif);
        font-size: 16px;
        line-height: 1.6;
        color: var(--color-pencil, #6f6c69);
        margin: 0 0 26px 0;
        max-width: 540px;
    }

    .page-product-lists .cat-showcase__meta {
        display: flex;
        align-items: center;
        gap: 22px;
        padding-top: 22px;
        border-top: 1px dashed rgba(215, 214, 212, 0.7);
        width: 100%;
    }
    .page-product-lists .cat-showcase__stat {
        display: flex;
        flex-direction: column;
        line-height: 1.1;
    }
    .page-product-lists .cat-showcase__stat-num {
        font-family: var(--font-graphik, sans-serif);
        font-size: 40px;
        font-weight: 800;
        color: var(--color-deep-ember, #cf3520);
        letter-spacing: -0.02em;
        line-height: 1;
    }
    .page-product-lists .cat-showcase__stat-label {
        font-family: var(--font-inter, sans-serif);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--color-graphite, #94928f);
        margin-top: 6px;
    }
    .page-product-lists .cat-showcase__cta {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 13px 24px;
        background: var(--color-ember-red, #e34432);
        color: #ffffff;
        border-radius: 999px;
        font-family: var(--font-inter, sans-serif);
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.02em;
        text-decoration: none;
        box-shadow: 0 10px 22px rgba(227, 68, 50, 0.35);
        transition: transform 0.28s ease, background 0.28s ease, box-shadow 0.28s ease;
        margin-left: auto;
        white-space: nowrap;
    }
    .page-product-lists .cat-showcase__cta:hover {
        background: var(--color-deep-ember, #cf3520);
        color: #ffffff;
        transform: translateY(-2px);
        box-shadow: 0 14px 30px rgba(227, 68, 50, 0.5);
    }
    .page-product-lists .cat-showcase__cta i {
        font-size: 11px;
        animation: catShowBounce 1.6s ease-in-out infinite;
    }
    @keyframes catShowBounce {
        0%,100% { transform: translateY(0); }
        50%     { transform: translateY(4px); }
    }

    /* RIGHT — media (postcard with offset ember backing) */
    .page-product-lists .cat-showcase__media {
        position: relative;
        aspect-ratio: 4 / 5;
        max-width: 420px;
        justify-self: center;
        width: 100%;
    }
    .page-product-lists .cat-showcase__media-back {
        position: absolute;
        top: 22px;
        left: 22px;
        right: -22px;
        bottom: -22px;
        background: linear-gradient(135deg, var(--color-ember-red, #e34432) 0%, #f0a58c 100%);
        border-radius: 24px;
        opacity: 0.95;
        z-index: 0;
        box-shadow: 0 18px 40px rgba(227, 68, 50, 0.30);
    }
    .page-product-lists .cat-showcase__media-frame {
        position: relative;
        width: 100%;
        height: 100%;
        border-radius: 24px;
        overflow: hidden;
        background: #16130f;
        z-index: 1;
        box-shadow: 0 24px 60px rgba(37, 34, 30, 0.20);
        border: 1px solid rgba(255, 255, 255, 0.5);
    }
    .page-product-lists .cat-showcase__img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    }
    .page-product-lists .cat-showcase__card:hover .cat-showcase__img {
        transform: scale(1.05);
    }
    .page-product-lists .cat-showcase__img-fallback {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 72px;
        color: rgba(255, 255, 255, 0.9);
        background: linear-gradient(135deg, #3a2417 0%, #cf3520 100%);
    }
    .page-product-lists .cat-showcase__media-scrim {
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(37, 34, 30, 0) 55%, rgba(37, 34, 30, 0.45) 100%);
        pointer-events: none;
    }
    .page-product-lists .cat-showcase__media-tag {
        position: absolute;
        bottom: 18px;
        left: 18px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 7px 14px;
        border-radius: 999px;
        background: rgba(22, 19, 15, 0.72);
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
        color: #ffffff;
        font-family: var(--font-inter, sans-serif);
        font-size: 11.5px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        z-index: 2;
    }
    .page-product-lists .cat-showcase__media-dot {
        display: inline-block;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--color-ember-red, #e34432);
        box-shadow: 0 0 8px rgba(227, 68, 50, 0.8);
    }

    /* Responsive */
    @media (max-width: 991px) {
        .page-product-lists .cat-showcase__card {
            grid-template-columns: 1fr;
            gap: 44px;
        }
        .page-product-lists .cat-showcase__media {
            max-width: 340px;
            aspect-ratio: 4 / 4.6;
        }
        .page-product-lists .cat-showcase__media-back {
            top: 18px; left: 18px; right: -18px; bottom: -18px;
        }
    }
    @media (max-width: 575px) {
        .page-product-lists .cat-showcase {
            padding: 32px 0 44px;
        }
        .page-product-lists .cat-showcase__meta {
            flex-direction: column;
            align-items: flex-start;
            gap: 18px;
        }
        .page-product-lists .cat-showcase__cta {
            margin-left: 0;
            width: 100%;
            justify-content: center;
        }
        .page-product-lists .cat-showcase__icon {
            width: 54px;
            height: 54px;
            font-size: 22px;
        }
        .page-product-lists .cat-showcase__stat-num { font-size: 34px; }
    }

    /* ============================================================
       CATALOG V2 — REDESIGNED COURSE GRID
       ============================================================ */
    .page-product-lists .catalog-v2 {
        position: relative;
        overflow: hidden;
        padding: 88px 0 96px;
        background: linear-gradient(180deg, #fff9f1 0%, #fefdfc 100%);
    }
    .page-product-lists .catalog-v2__blob {
        position: absolute;
        border-radius: 50%;
        filter: blur(90px);
        pointer-events: none;
        z-index: 0;
    }
    .page-product-lists .catalog-v2__blob--a {
        top: -180px;
        right: -120px;
        width: 380px;
        height: 380px;
        background: rgba(227, 68, 50, 0.16);
    }
    .page-product-lists .catalog-v2__blob--b {
        bottom: -180px;
        left: -120px;
        width: 400px;
        height: 400px;
        background: rgba(15, 102, 174, 0.10);
    }
    .page-product-lists .catalog-v2__inner {
        position: relative;
        z-index: 1;
    }

    /* Heading */
    .page-product-lists .catalog-v2__heading { margin-bottom: 56px; }
    .page-product-lists .catalog-v2__eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-family: var(--font-inter, sans-serif);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: var(--color-deep-ember, #cf3520);
        margin-bottom: 16px;
    }
    .page-product-lists .catalog-v2__eyebrow-dot {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--color-ember-red, #e34432);
        box-shadow: 0 0 10px rgba(227, 68, 50, 0.55);
        animation: catV2Pulse 1.8s ease-in-out infinite;
    }
    @keyframes catV2Pulse {
        0%,100% { transform: scale(1); opacity: 1; }
        50%     { transform: scale(1.25); opacity: 0.75; }
    }
    .page-product-lists .catalog-v2__title {
        font-family: var(--font-graphik, sans-serif);
        font-size: clamp(30px, 4vw, 46px);
        font-weight: 800;
        line-height: 1.1;
        letter-spacing: -0.03em;
        color: var(--color-ink, #25221e);
        margin: 0 0 14px 0;
    }
    .page-product-lists .catalog-v2__lede {
        font-family: var(--font-inter, sans-serif);
        font-size: 16px;
        line-height: 1.6;
        color: var(--color-pencil, #6f6c69);
        max-width: 620px;
        margin: 0 auto;
    }
    .page-product-lists .catalog-v2__rule {
        display: block;
        margin: 24px auto 0;
        width: 88px;
        height: 3px;
        border-radius: 3px;
        background: linear-gradient(90deg, var(--color-ember-red, #e34432), #f0a58c);
        box-shadow: 0 0 14px rgba(227, 68, 50, 0.35);
    }

    /* Grid */
    .page-product-lists .catalog-v2__grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 26px;
        margin-bottom: 56px;
    }

    /* Card */
    .page-product-lists .catalog-v2__card {
        position: relative;
        background: var(--color-paper, #fefdfc);
        border: 1px solid rgba(215, 214, 212, 0.5);
        border-radius: 22px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
                    box-shadow 0.4s ease,
                    border-color 0.4s ease;
    }
    .page-product-lists .catalog-v2__card:hover {
        transform: translateY(-6px);
        border-color: rgba(227, 68, 50, 0.35);
        box-shadow: 0 22px 48px rgba(37, 34, 30, 0.10),
                    0 6px 14px rgba(37, 34, 30, 0.04);
    }

    /* Media */
    .page-product-lists .catalog-v2__media {
        position: relative;
        display: block;
        aspect-ratio: 16 / 10;
        background: #16130f;
        overflow: hidden;
        text-decoration: none;
    }
    .page-product-lists .catalog-v2__img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.55s cubic-bezier(0.165, 0.84, 0.44, 1);
    }
    .page-product-lists .catalog-v2__card:hover .catalog-v2__img {
        transform: scale(1.06);
    }
    .page-product-lists .catalog-v2__img-fallback {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 52px;
        color: rgba(255, 255, 255, 0.9);
        background: linear-gradient(135deg, #3a2417 0%, #cf3520 100%);
    }
    .page-product-lists .catalog-v2__scrim {
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(37, 34, 30, 0) 55%, rgba(37, 34, 30, 0.45) 100%);
        pointer-events: none;
    }

    /* Level pill (top-right of media) */
    .page-product-lists .catalog-v2__level {
        position: absolute;
        top: 14px;
        right: 14px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        border-radius: 999px;
        background: rgba(22, 19, 15, 0.72);
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
        color: #ffffff;
        font-family: var(--font-inter, sans-serif);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        z-index: 2;
    }
    .page-product-lists .catalog-v2__level i {
        font-size: 10px;
        color: #f0a58c;
    }

    /* Body */
    .page-product-lists .catalog-v2__body {
        padding: 22px 24px 24px;
        display: flex;
        flex-direction: column;
        flex: 1;
    }
    .page-product-lists .catalog-v2__course-title {
        font-family: var(--font-graphik, sans-serif);
        font-size: 18.5px;
        font-weight: 700;
        line-height: 1.3;
        margin: 0 0 10px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .page-product-lists .catalog-v2__course-title a {
        color: var(--color-ink, #25221e);
        text-decoration: none;
        transition: color 0.25s ease;
    }
    .page-product-lists .catalog-v2__course-title a:hover {
        color: var(--color-deep-ember, #cf3520);
    }
    .page-product-lists .catalog-v2__desc {
        font-family: var(--font-inter, sans-serif);
        font-size: 13.5px;
        line-height: 1.55;
        color: var(--color-pencil, #6f6c69);
        margin: 0 0 20px 0;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Footer */
    .page-product-lists .catalog-v2__foot {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        margin-top: auto;
        padding-top: 18px;
        border-top: 1px dashed rgba(215, 214, 212, 0.7);
    }
    .page-product-lists .catalog-v2__price {
        display: flex;
        flex-direction: column;
        line-height: 1.15;
        min-width: 0;
    }
    .page-product-lists .catalog-v2__price-label {
        font-family: var(--font-inter, sans-serif);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--color-graphite, #94928f);
        margin-bottom: 5px;
    }
    .page-product-lists .catalog-v2__price-value {
        font-family: var(--font-graphik, sans-serif);
        font-size: 20px;
        font-weight: 800;
        color: var(--color-deep-ember, #cf3520);
        letter-spacing: -0.01em;
        line-height: 1;
    }
    .page-product-lists .catalog-v2__price-value small {
        font-size: 11px;
        font-weight: 700;
        color: var(--color-pencil, #6f6c69);
        margin-left: 3px;
    }
    .page-product-lists .catalog-v2__cta {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 11px 18px;
        background: var(--color-ember-red, #e34432);
        color: #ffffff;
        border-radius: 999px;
        font-family: var(--font-inter, sans-serif);
        font-size: 12.5px;
        font-weight: 700;
        letter-spacing: 0.02em;
        text-decoration: none;
        box-shadow: 0 8px 18px rgba(227, 68, 50, 0.32);
        transition: transform 0.28s ease,
                    background 0.28s ease,
                    box-shadow 0.28s ease;
        white-space: nowrap;
        flex-shrink: 0;
    }
    .page-product-lists .catalog-v2__cta:hover {
        background: var(--color-deep-ember, #cf3520);
        color: #ffffff;
        transform: translateY(-2px);
        box-shadow: 0 12px 26px rgba(227, 68, 50, 0.45);
    }
    .page-product-lists .catalog-v2__cta i {
        font-size: 10px;
        transition: transform 0.25s ease;
    }
    .page-product-lists .catalog-v2__cta:hover i {
        transform: translateX(3px);
    }

    /* Pagination wrapper */
    .page-product-lists .catalog-v2__pagination {
        display: flex;
        justify-content: center;
    }

    /* Responsive */
    @media (max-width: 1199px) {
        .page-product-lists .catalog-v2__grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }
    @media (max-width: 767px) {
        .page-product-lists .catalog-v2 {
            padding: 64px 0 72px;
        }
        .page-product-lists .catalog-v2__heading {
            margin-bottom: 40px;
        }
        .page-product-lists .catalog-v2__grid {
            grid-template-columns: 1fr;
            gap: 20px;
            margin-bottom: 40px;
        }
        .page-product-lists .catalog-v2__body {
            padding: 20px 20px 22px;
        }
    }
    @media (max-width: 480px) {
        .page-product-lists .catalog-v2__foot {
            flex-direction: column;
            align-items: stretch;
            gap: 14px;
        }
        .page-product-lists .catalog-v2__cta {
            width: 100%;
            justify-content: center;
        }
        .page-product-lists .catalog-v2__level {
            top: 10px;
            right: 10px;
            padding: 5px 10px;
            font-size: 10px;
        }
    }

/* ===================== page-product_detail ===================== */
    /* =========================================
       COURSE DETAIL — warm theme
       ========================================= */
    .page-product_detail .course-detail{
        position: relative;
        overflow: hidden;
        background: var(--surface-paper-canvas, #fefdfc);
        padding: 64px 0 88px;
    }
    .page-product_detail .course-detail__glow{
        position: absolute;
        border-radius: 50%;
        filter: blur(100px);
        pointer-events: none;
        z-index: 0;
        opacity: 0.5;
    }
    .page-product_detail .cd-glow-mint{ width: 360px; height: 360px; background: var(--color-mint-wash, #f0f6df); top: -120px; left: -100px; }
    .page-product_detail .cd-glow-sky{ width: 320px; height: 320px; background: var(--color-sky-wash, #dceaff); bottom: 4%; right: -120px; }
    .page-product_detail .course-detail .container{ position: relative; z-index: 1; padding-top: 0; padding-bottom: 0; }

    /* header */
    .page-product_detail .course-eyebrow{
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 7px 14px;
        margin-bottom: 16px;
        border-radius: 999px;
        background: var(--color-cream, #fff6f0);
        border: 1px solid var(--color-stone, #d7d6d4);
        box-shadow: var(--shadow-subtle);
        font-family: var(--font-inter), sans-serif;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--color-deep-ember, #cf3520);
    }
    .page-product_detail .course-eyebrow i{ color: var(--color-ember-red, #e34432); }
    .page-product_detail .course-title{
        font-family: var(--font-graphik), sans-serif;
        font-size: clamp(28px, 3.6vw, 40px);
        font-weight: var(--font-weight-bold, 700);
        line-height: 1.15;
        letter-spacing: -0.02em;
        color: var(--color-ink, #25221e);
        margin: 0 0 14px;
    }
    .page-product_detail .course-lead{
        font-family: var(--font-inter), sans-serif;
        font-size: 16px;
        line-height: 1.7;
        color: var(--color-pencil, #6f6c69);
        margin: 0 0 36px;
        max-width: 600px;
    }

    /* level section */
    .page-product_detail .level-section__head{
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 18px;
    }
    .page-product_detail .level-section__title{
        font-family: var(--font-graphik), sans-serif;
        font-size: 22px;
        font-weight: var(--font-weight-semibold, 600);
        color: var(--color-ink, #25221e);
        margin: 0;
    }
    .page-product_detail .level-section__count{
        font-family: var(--font-inter), sans-serif;
        font-size: 12px;
        font-weight: 600;
        color: var(--color-deep-ember, #cf3520);
        background: #f0f6df;
        border-radius: 999px;
        padding: 4px 11px;
    }

    /* pills */
    .page-product_detail .level-pills{
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        padding: 0;
        margin: 0 0 22px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .page-product_detail .level-pills::-webkit-scrollbar{ height: 0; }
    .page-product_detail .level-pill{
        flex-shrink: 0;
        border: 1px solid var(--color-stone, #d7d6d4);
        background: var(--color-paper, #fefdfc);
        color: var(--color-ink, #25221e);
        font-family: var(--font-inter), sans-serif;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.02em;
        padding: 9px 18px;
        border-radius: 8px;
        white-space: nowrap;
        cursor: pointer;
        transition: all 0.25s ease;
    }
    .page-product_detail .level-pill:hover:not(.active){
        border-color: rgba(50, 227, 114, 0.4);
        color: var(--color-deep-ember, #cf3520);
        background: #f0f6df;
    }
    i.fas.fa-palette {
    display: none;
}
    .page-product_detail .level-pill.active{
        background: var(--color-ember-red, #e34432);
        border-color: var(--color-ember-red, #e34432);
        color: var(--color-paper, #fefdfc);
        /* box-shadow: 0 6px 16px rgba(227, 68, 50, 0.28); */
    }

    /* level card */
    .page-product_detail .level-card{
        background: var(--color-paper, #fefdfc);
        border: 1px solid var(--color-stone, #d7d6d4);
        border-radius: 18px;
        padding: 28px;
        box-shadow: var(--shadow-subtle);
    }
    .page-product_detail .level-card__tag{
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 6px 13px;
        border-radius: 999px;
        background: var(--color-mint-wash, #f0f6df);
        color: var(--color-forest, #446c3d);
        font-family: var(--font-inter), sans-serif;
        font-size: 12px;
        font-weight: 600;
        margin-bottom: 22px;
    }
    .page-product_detail .level-card__tag strong{ font-weight: 700; }

    .page-product_detail .level-grid{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        margin-bottom: 26px;
    }
    .page-product_detail .level-info{
        /* background: var(--color-cream, #fff6f0); */
        border: 1px solid var(--color-stone, #d7d6d4);
        border-radius: 14px;
        padding: 18px;
        transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
        position: relative;
        overflow: hidden;
    }
    .page-product_detail .level-info::before{
        content: '';
        position: absolute;
        top: 0; left: 0; bottom: 0;
        width: 4px;
        border-radius: 14px 0 0 14px;
        background-color: var(--color-ember-red, #e34432);
        opacity: 0.35;
    }
    .page-product_detail .level-info:hover{
        transform: translateY(-3px);
        box-shadow: var(--shadow-lg);
        border-color:  var(--color-ember-red);
    }
    .page-product_detail .level-info__label{
        display: block;
        font-family: var(--font-inter), sans-serif;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--color-deep-ember, #cf3520);
        margin-bottom: 8px;
    }
    .page-product_detail .level-info__text{
        font-family: var(--font-inter), sans-serif;
        font-size: 14px;
        line-height: 1.55;
        color: var(--color-ink, #25221e);
        margin: 0;
    }

    /* what you'll learn */
    .page-product_detail .level-learn{ margin-bottom: 26px; }
    .page-product_detail .level-learn__title{
        display: flex;
        align-items: center;
        gap: 8px;
        font-family: var(--font-graphik), sans-serif;
        font-size: 16px;
        font-weight: var(--font-weight-semibold, 600);
        color: var(--color-ink, #25221e);
        margin: 0 0 14px;
    }
    .page-product_detail .level-learn__title i{ color: var(--color-ember-red, #e34432); font-size: 15px; }
    .page-product_detail .level-learn__list{
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        gap: 8px;
    }
    .page-product_detail .level-learn__list li{
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 11px 14px;
        background: var(--surface-paper-canvas, #fefdfc);
        border: 1px solid var(--color-stone, #d7d6d4);
        border-radius: 10px;
        font-family: var(--font-inter), sans-serif;
        font-size: 14px;
        line-height: 1.5;
        color: var(--color-ink, #25221e);
        transition: border-color 0.25s ease, background 0.25s ease;
    }
    .page-product_detail .level-learn__list li:hover{
        /* border-color: var(--color-deep-ember);
        background: var(--color-deep-ember); */
    }
    .page-product_detail .level-learn__list li i{
        color: var(--color-forest, #446c3d);
        font-size: 12px;
        margin-top: 4px;
        flex-shrink: 0;
    }

    /* enroll footer */
    .page-product_detail .level-enroll{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding-top: 22px;
        border-top: 1px solid var(--color-stone, #d7d6d4);
    }
    .page-product_detail .level-price__label{
        display: block;
        font-family: var(--font-inter), sans-serif;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--color-graphite, #94928f);
        margin-bottom: 2px;
    }
    .page-product_detail .level-price__value{
        font-family: var(--font-graphik), sans-serif;
        font-size: 26px;
        font-weight: var(--font-weight-bold, 700);
        color: var(--color-ember-red, #e34432);
        line-height: 1;
    }
    .page-product_detail .level-price__value small{ font-size: 13px; font-weight: 600; color: var(--color-pencil, #6f6c69); }
    .page-product_detail .enroll-form{ flex-shrink: 0; }
    .page-product_detail .enroll-btn{
        display: inline-flex;
        align-items: center;
        gap: 10px;
        background: var(--color-ember-red, #e34432);
        color: var(--color-paper, #fefdfc);
        border: none;
        border-radius: var(--radius-buttons, 8px);
        font-family: var(--font-inter), sans-serif;
        font-size: 15px;
        font-weight: 600;
        padding: 13px 26px;
        cursor: pointer;
        box-shadow: 0 8px 20px rgb(50 227 159 / 30%);
        transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
    }
    .page-product_detail .enroll-btn:hover{
        background: var(--color-deep-ember, #cf3520);
        transform: translateY(-2px);
        box-shadow: 0 12px 26px rgba(227, 68, 50, 0.4);
    }
    .page-product_detail .enroll-btn:disabled{ opacity: 0.75; cursor: wait; transform: none; }
    .page-product_detail .enroll-btn i{ transition: transform 0.25s ease; }
    .page-product_detail .enroll-btn:hover i{ transform: translateX(4px); }

    /* =========================================
       RIGHT ASIDE
       ========================================= */
    .page-product_detail .course-aside{
        position: sticky;
        top: 100px;
    }
    .page-product_detail .course-aside__media{
        position: relative;
        border-radius: 18px;
        overflow: hidden;
        border: 1px solid var(--color-stone, #d7d6d4);
        box-shadow: var(--shadow-lg);
        margin-bottom: 20px;
        background: var(--color-paper, #fefdfc);
        padding: 8px; /* frame effect */
    }
    .page-product_detail .course-aside__media img{
        width: 100%;
        height: 300px;
        object-fit: cover;
        display: block;
        transition: transform 0.6s ease;
        border-radius: 12px;
    }
    .page-product_detail .course-aside__media:hover img{ transform: scale(1.05); }
    .page-product_detail .course-aside__badge{
        position: absolute;
        top: 22px; left: 22px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        border-radius: 999px;
        background: rgba(254, 253, 252, 0.92);
        -webkit-backdrop-filter: blur(6px);
                backdrop-filter: blur(6px);
        border: 1px solid rgba(215, 214, 212, 0.7);
        font-family: var(--font-inter), sans-serif;
        font-size: 11px;
        font-weight: 600;
        text-transform: capitalize;
        color: var(--color-ink, #25221e);
    }
    .page-product_detail .course-aside__badge i{ color: var(--color-ember-red, #e34432); font-size: 10px; }

    .page-product_detail .course-aside__card{
        background: var(--color-paper, #fefdfc);
        border: 1px solid var(--color-stone, #d7d6d4);
        border-radius: 18px;
        padding: 26px;
        box-shadow: var(--shadow-subtle);
    }
    .page-product_detail .course-aside__title{
        font-family: var(--font-graphik), sans-serif;
        font-size: 18px;
        font-weight: var(--font-weight-semibold, 600);
        color: var(--color-ink, #25221e);
        margin: 0 0 12px;
    }
    .page-product_detail .course-aside__text{
        font-family: var(--font-inter), sans-serif;
        font-size: 14px;
        line-height: 1.7;
        color: var(--color-pencil, #6f6c69);
        margin: 0 0 20px;
    }
    .page-product_detail .course-aside__facts{
        list-style: none;
        margin: 0;
        padding: 18px 0 0;
        border-top: 1px solid var(--color-stone, #d7d6d4);
        display: grid;
        gap: 12px;
    }
    .page-product_detail .course-aside__facts li{
        display: flex;
        align-items: center;
        gap: 12px;
        font-family: var(--font-inter), sans-serif;
        font-size: 14px;
        font-weight: 500;
        color: var(--color-ink, #25221e);
    }
    .page-product_detail .fact-ico{
        width: 34px;
        height: 34px;
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        background: var(--color-mint-wash, #f0f6df);
        color: var(--color-forest, #446c3d);
        font-size: 14px;
    }

    /* =========================================
       ANIMATIONS
       ========================================= */
    @keyframes page-product_detail-cdReveal {
        from { opacity: 0; transform: translateY(24px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes page-product_detail-cdRevealLeft {
        from { opacity: 0; transform: translateX(-24px); }
        to   { opacity: 1; transform: translateX(0); }
    }
    @keyframes page-product_detail-cdRevealRight {
        from { opacity: 0; transform: translateX(24px); }
        to   { opacity: 1; transform: translateX(0); }
    }

    /* columns slide in from sides */
    .page-product_detail .cd-reveal{ animation: page-product_detail-cdRevealRight 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }
    .page-product_detail .cd-reveal--delay{ animation: page-product_detail-cdRevealLeft 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both; }

    /* level card content transitions */
    .page-product_detail .tab-pane.fade.show .level-card__tag{ animation: page-product_detail-cdReveal 0.5s ease both; }
    .page-product_detail .tab-pane.fade.show .level-grid{ animation: page-product_detail-cdReveal 0.5s ease 0.08s both; }
    .page-product_detail .tab-pane.fade.show .level-learn{ animation: page-product_detail-cdReveal 0.5s ease 0.16s both; }
    .page-product_detail .tab-pane.fade.show .level-enroll{ animation: page-product_detail-cdReveal 0.5s ease 0.24s both; }

    /* learn items staggering */
    .page-product_detail .tab-pane.fade.show .level-learn__list li{ animation: page-product_detail-cdReveal 0.45s ease both; }
    .page-product_detail .tab-pane.fade.show .level-learn__list li:nth-child(1){ animation-delay: 0.20s; }
    .page-product_detail .tab-pane.fade.show .level-learn__list li:nth-child(2){ animation-delay: 0.26s; }
    .page-product_detail .tab-pane.fade.show .level-learn__list li:nth-child(3){ animation-delay: 0.32s; }
    .page-product_detail .tab-pane.fade.show .level-learn__list li:nth-child(4){ animation-delay: 0.38s; }
    .page-product_detail .tab-pane.fade.show .level-learn__list li:nth-child(5){ animation-delay: 0.44s; }
    .page-product_detail .tab-pane.fade.show .level-learn__list li:nth-child(n+6){ animation-delay: 0.50s; }

    /* media + facts gentle entrance */
    .page-product_detail .course-aside__media{ animation: page-product_detail-cdReveal 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.18s both; }
    .page-product_detail .course-aside__card{ animation: page-product_detail-cdReveal 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.28s both; }
    .page-product_detail .course-aside__facts li{ animation: page-product_detail-cdReveal 0.5s ease both; }
    .page-product_detail .course-aside__facts li:nth-child(1){ animation-delay: 0.40s; }
    .page-product_detail .course-aside__facts li:nth-child(2){ animation-delay: 0.48s; }
    .page-product_detail .course-aside__facts li:nth-child(3){ animation-delay: 0.56s; }

    /* =========================================
       RESPONSIVE
       ========================================= */
    @media (max-width: 991px) {
        .page-product_detail .course-detail{ padding: 44px 0 64px; }
        .page-product_detail .course-aside{ position: static; top: auto; margin-top: 8px; }
        .page-product_detail .cd-reveal, .page-product_detail .cd-reveal--delay{ animation-name: page-product_detail-cdReveal; }
    }
    @media (max-width: 575px) {
        .page-product_detail .level-card{ padding: 20px; }
        .page-product_detail .level-grid{ grid-template-columns: 1fr; }
        .page-product_detail .level-enroll{ flex-direction: column; align-items: stretch; }
        .page-product_detail .enroll-btn{ width: 100%; justify-content: center; }
        .page-product_detail .course-aside__media img{ height: 240px; }
    }
    @media (prefers-reduced-motion: reduce) {
        .page-product_detail .course-aside__media img, .page-product_detail .level-info, .page-product_detail .enroll-btn{ transition: none !important; }
        .page-product_detail .cd-reveal, .page-product_detail .cd-reveal--delay,
        .page-product_detail .course-aside__media, .page-product_detail .course-aside__card, .page-product_detail .course-aside__facts li,
        .page-product_detail .tab-pane.fade.show .level-card__tag,
        .page-product_detail .tab-pane.fade.show .level-grid,
        .page-product_detail .tab-pane.fade.show .level-learn,
        .page-product_detail .tab-pane.fade.show .level-enroll,
        .page-product_detail .tab-pane.fade.show .level-learn__list li{
            animation: none !important;
        }
    }

    /* ============================================================
       PRODUCT DETAIL — FULL REDESIGN (pd-* classes)
       Hero → Overview → Levels & Enroll
       ============================================================ */

    /* Shared eyebrow */
    .page-product_detail .pd-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-family: var(--font-inter, sans-serif);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: var(--color-deep-ember, #cf3520);
        margin-bottom: 16px;
    }
    .page-product_detail .pd-eyebrow--center {
        justify-content: center;
    }
    .page-product_detail .pd-eyebrow__dot {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--color-ember-red, #e34432);
        box-shadow: 0 0 10px rgba(227, 68, 50, 0.5);
        animation: pdDotPulse 1.8s ease-in-out infinite;
    }
    @keyframes pdDotPulse {
        0%,100% { transform: scale(1); opacity: 1; }
        50%     { transform: scale(1.25); opacity: 0.75; }
    }

    /* ============================================================
       HERO
       ============================================================ */
    .page-product_detail .pd-hero {
        position: relative;
        overflow: hidden;
        padding: 56px 0 72px;
        background: linear-gradient(180deg, #fff9f1 0%, #fefdfc 100%);
    }
    .page-product_detail .pd-hero__blob {
        position: absolute;
        border-radius: 50%;
        filter: blur(90px);
        pointer-events: none;
        z-index: 0;
    }
    .page-product_detail .pd-hero__blob--a {
        top: -160px; right: -120px;
        width: 380px; height: 380px;
        background: rgba(227, 68, 50, 0.16);
    }
    .page-product_detail .pd-hero__blob--b {
        bottom: -180px; left: -120px;
        width: 400px; height: 400px;
        background: rgba(15, 102, 174, 0.10);
    }
    .page-product_detail .pd-hero__inner {
        position: relative;
        z-index: 1;
    }
    .page-product_detail .pd-hero__grid {
        display: grid;
        grid-template-columns: 1.15fr 1fr;
        gap: 60px;
        align-items: center;
    }

    /* LEFT copy */
    .page-product_detail .pd-hero__copy {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    .page-product_detail .pd-hero__title {
        font-family: var(--font-graphik, sans-serif);
        font-size: clamp(30px, 4.4vw, 52px);
        font-weight: 800;
        line-height: 1.05;
        letter-spacing: -0.03em;
        color: var(--color-ink, #25221e);
        margin: 0 0 18px;
    }
    .page-product_detail .pd-hero__lede {
        font-family: var(--font-inter, sans-serif);
        font-size: 16px;
        line-height: 1.65;
        color: var(--color-pencil, #6f6c69);
        margin: 0 0 28px 0;
        max-width: 560px;
    }
    .page-product_detail .pd-hero__meta {
        display: flex;
        align-items: center;
        gap: 30px;
        padding-top: 22px;
        border-top: 1px dashed rgba(215, 214, 212, 0.7);
        width: 100%;
        flex-wrap: wrap;
    }
    .page-product_detail .pd-hero__stat {
        display: flex;
        flex-direction: column;
        line-height: 1.1;
    }
    .page-product_detail .pd-hero__stat-num {
        font-family: var(--font-graphik, sans-serif);
        font-size: 38px;
        font-weight: 800;
        color: var(--color-deep-ember, #cf3520);
        letter-spacing: -0.02em;
        line-height: 1;
    }
    .page-product_detail .pd-hero__stat-label {
        font-family: var(--font-inter, sans-serif);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--color-graphite, #94928f);
        margin-top: 6px;
    }
    .page-product_detail .pd-hero__stat--split {
        padding-left: 22px;
        border-left: 1px solid rgba(215, 214, 212, 0.7);
    }
    .page-product_detail .pd-hero__cta {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 13px 24px;
        background: var(--color-ember-red, #e34432);
        color: #ffffff;
        border-radius: 999px;
        font-family: var(--font-inter, sans-serif);
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.02em;
        text-decoration: none;
        box-shadow: 0 10px 22px rgba(227, 68, 50, 0.35);
        transition: transform 0.28s ease, background 0.28s ease, box-shadow 0.28s ease;
        margin-left: auto;
        white-space: nowrap;
    }
    .page-product_detail .pd-hero__cta:hover {
        background: var(--color-deep-ember, #cf3520);
        color: #ffffff;
        transform: translateY(-2px);
        box-shadow: 0 14px 30px rgba(227, 68, 50, 0.5);
    }
    .page-product_detail .pd-hero__cta i {
        font-size: 11px;
        animation: pdBounce 1.6s ease-in-out infinite;
    }
    @keyframes pdBounce {
        0%,100% { transform: translateY(0); }
        50%     { transform: translateY(4px); }
    }

    /* RIGHT media (postcard) */
    .page-product_detail .pd-hero__media {
        position: relative;
        aspect-ratio: 4 / 5;
        max-width: 420px;
        justify-self: center;
        width: 100%;
    }
    .page-product_detail .pd-hero__media-back {
        position: absolute;
        top: 22px; left: 22px;
        right: -22px; bottom: -22px;
        background: linear-gradient(135deg, var(--color-ember-red, #e34432) 0%, #f0a58c 100%);
        border-radius: 24px;
        opacity: 0.95;
        z-index: 0;
        box-shadow: 0 18px 40px rgba(227, 68, 50, 0.30);
    }
    .page-product_detail .pd-hero__media-frame {
        position: relative;
        width: 100%;
        height: 100%;
        border-radius: 24px;
        overflow: hidden;
        background: #16130f;
        z-index: 1;
        box-shadow: 0 24px 60px rgba(37, 34, 30, 0.20);
        border: 1px solid rgba(255, 255, 255, 0.5);
    }
    .page-product_detail .pd-hero__img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    }
    .page-product_detail .pd-hero__grid:hover .pd-hero__img {
        transform: scale(1.05);
    }
    .page-product_detail .pd-hero__media-scrim {
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(37, 34, 30, 0) 55%, rgba(37, 34, 30, 0.5) 100%);
        pointer-events: none;
    }
    .page-product_detail .pd-hero__media-tag {
        position: absolute;
        bottom: 18px;
        left: 18px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 7px 14px;
        border-radius: 999px;
        background: rgba(22, 19, 15, 0.72);
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
        color: #ffffff;
        font-family: var(--font-inter, sans-serif);
        font-size: 11.5px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        z-index: 2;
    }
    .page-product_detail .pd-hero__media-dot {
        display: inline-block;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--color-ember-red, #e34432);
        box-shadow: 0 0 8px rgba(227, 68, 50, 0.8);
    }

    /* ============================================================
       OVERVIEW
       ============================================================ */
    .page-product_detail .pd-overview {
        position: relative;
        background: #fefdfc;
        padding: 72px 0 72px;
    }
    .page-product_detail .pd-overview__inner {
        max-width: 780px;
    }
    .page-product_detail .pd-overview__heading {
        text-align: center;
        margin-bottom: 32px;
    }
    .page-product_detail .pd-overview__title {
        font-family: var(--font-graphik, sans-serif);
        font-size: clamp(28px, 3.4vw, 40px);
        font-weight: 800;
        line-height: 1.12;
        letter-spacing: -0.02em;
        color: var(--color-ink, #25221e);
        margin: 0;
    }
    .page-product_detail .pd-overview__rule {
        display: block;
        margin: 22px auto 0;
        width: 72px;
        height: 3px;
        border-radius: 3px;
        background: linear-gradient(90deg, var(--color-ember-red, #e34432), #f0a58c);
        box-shadow: 0 0 14px rgba(227, 68, 50, 0.35);
    }
    .page-product_detail .pd-overview__body {
        font-family: var(--font-inter, sans-serif);
        font-size: 16px;
        line-height: 1.75;
        color: var(--color-pencil, #6f6c69);
        text-align: left;
    }

    /* ============================================================
       LEVELS
       ============================================================ */
    .page-product_detail .pd-levels {
        position: relative;
        overflow: hidden;
        padding: 88px 0 100px;
        background: linear-gradient(180deg, #fefdfc 0%, #fff6ee 100%);
        scroll-margin-top: 90px;
    }
    .page-product_detail .pd-levels__blob {
        position: absolute;
        border-radius: 50%;
        filter: blur(100px);
        pointer-events: none;
        z-index: 0;
    }
    .page-product_detail .pd-levels__blob--a {
        top: -180px; left: 50%;
        transform: translateX(-50%);
        width: 500px; height: 320px;
        background: rgba(227, 68, 50, 0.14);
    }
    .page-product_detail .pd-levels__inner {
        position: relative;
        z-index: 1;
    }
    .page-product_detail .pd-levels__heading {
        margin-bottom: 40px;
    }
    .page-product_detail .pd-levels__title {
        font-family: var(--font-graphik, sans-serif);
        font-size: clamp(30px, 3.8vw, 44px);
        font-weight: 800;
        line-height: 1.08;
        letter-spacing: -0.02em;
        color: var(--color-ink, #25221e);
        margin: 0 0 12px;
    }
    .page-product_detail .pd-levels__lede {
        font-family: var(--font-inter, sans-serif);
        font-size: 15px;
        color: var(--color-graphite, #94928f);
        letter-spacing: 0.14em;
        text-transform: uppercase;
        font-weight: 700;
        margin: 0;
    }

    /* Segmented tabs (dark card look) */
    .page-product_detail .pd-tabs {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
        list-style: none;
        padding: 8px;
        margin: 0 auto 32px;
        max-width: 900px;
        background: #16130f;
        border-radius: 999px;
        box-shadow: 0 16px 34px rgba(22, 19, 15, 0.22),
                    inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }
    .page-product_detail .pd-tabs .nav-item {
        display: flex;
        flex: 1 1 auto;
        min-width: 140px;
    }
    .page-product_detail .pd-tab {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        padding: 12px 18px;
        border-radius: 999px;
        background: transparent;
        border: 0;
        color: rgba(255, 255, 255, 0.72);
        font-family: var(--font-inter, sans-serif);
        font-size: 13.5px;
        font-weight: 600;
        cursor: pointer;
        transition: background 0.28s ease, color 0.28s ease, transform 0.28s ease;
        white-space: nowrap;
    }
    .page-product_detail .pd-tab__num {
        font-family: var(--font-graphik, sans-serif);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.06em;
        color: #f0a58c;
        opacity: 0.85;
    }
    .page-product_detail .pd-tab__label {
        letter-spacing: 0.02em;
    }
    .page-product_detail .pd-tab:hover {
        color: #ffffff;
        background: rgba(255, 255, 255, 0.05);
    }
    .page-product_detail .pd-tab.active {
        background: linear-gradient(135deg, var(--color-ember-red, #e34432) 0%, var(--color-deep-ember, #cf3520) 100%);
        color: #ffffff;
        box-shadow: 0 8px 20px rgba(227, 68, 50, 0.4),
                    inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
    .page-product_detail .pd-tab.active .pd-tab__num {
        color: #ffffff;
        opacity: 1;
    }

    /* Level card */
    .page-product_detail .pd-tab-content {
        max-width: 1020px;
        margin: 0 auto;
    }
    .page-product_detail .pd-level {
        position: relative;
        background: var(--color-paper, #fefdfc);
        border: 1px solid rgba(215, 214, 212, 0.6);
        border-radius: 24px;
        padding: 36px 40px 40px;
        box-shadow: 0 20px 40px rgba(37, 34, 30, 0.06);
    }
    .page-product_detail .pd-level__head {
        margin-bottom: 26px;
    }
    .page-product_detail .pd-level__tag {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 14px;
        border-radius: 999px;
        background: rgba(227, 68, 50, 0.10);
        border: 1px solid rgba(227, 68, 50, 0.20);
        color: var(--color-deep-ember, #cf3520);
        font-family: var(--font-inter, sans-serif);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.06em;
    }
    .page-product_detail .pd-level__tag i {
        font-size: 11px;
    }
    .page-product_detail .pd-level__tag strong {
        font-weight: 800;
    }

    /* Purpose + Outcome grid */
    .page-product_detail .pd-level__grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 22px;
        margin-bottom: 30px;
    }
    .page-product_detail .pd-level__cell {
        padding: 22px 22px;
        background: rgba(227, 68, 50, 0.03);
        border-left: 3px solid var(--color-ember-red, #e34432);
        border-radius: 0 14px 14px 0;
    }
    .page-product_detail .pd-level__cell-label {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-family: var(--font-inter, sans-serif);
        font-size: 10.5px;
        font-weight: 800;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--color-deep-ember, #cf3520);
        margin-bottom: 8px;
    }
    .page-product_detail .pd-level__cell-label i {
        font-size: 11px;
    }
    .page-product_detail .pd-level__cell-text {
        font-family: var(--font-inter, sans-serif);
        font-size: 14.5px;
        line-height: 1.6;
        color: var(--color-ink, #25221e);
        margin: 0;
    }

    /* What you'll learn */
    .page-product_detail .pd-level__learn {
        padding: 24px 26px;
        background: #fff9f1;
        border-radius: 16px;
        border: 1px solid rgba(215, 214, 212, 0.6);
        margin-bottom: 28px;
    }
    .page-product_detail .pd-level__learn-title {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-family: var(--font-graphik, sans-serif);
        font-size: 15px;
        font-weight: 800;
        color: var(--color-ink, #25221e);
        margin: 0 0 18px;
    }
    .page-product_detail .pd-level__learn-title i {
        color: var(--color-ember-red, #e34432);
        font-size: 15px;
    }
    .page-product_detail .pd-level__learn-list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px 24px;
    }
    .page-product_detail .pd-level__learn-list li {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        font-family: var(--font-inter, sans-serif);
        font-size: 14px;
        line-height: 1.5;
        color: var(--color-ink, #25221e);
    }
    .page-product_detail .pd-level__learn-check {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--color-ember-red, #e34432), var(--color-deep-ember, #cf3520));
        color: #ffffff;
        font-size: 10px;
        box-shadow: 0 4px 10px rgba(227, 68, 50, 0.3);
        margin-top: 1px;
    }

    /* Enroll bar */
    .page-product_detail .pd-level__enroll {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        padding: 22px 26px;
        background: linear-gradient(135deg, #16130f 0%, #221d17 100%);
        border-radius: 18px;
        color: #ffffff;
        box-shadow: 0 16px 36px rgba(22, 19, 15, 0.24);
        position: relative;
        overflow: hidden;
    }
    .page-product_detail .pd-level__enroll::before {
        content: "";
        position: absolute;
        top: -60px; right: -40px;
        width: 180px; height: 180px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(227, 68, 50, 0.35) 0%, transparent 65%);
        filter: blur(30px);
        pointer-events: none;
    }
    .page-product_detail .pd-level__price {
        position: relative;
        display: flex;
        flex-direction: column;
        line-height: 1.1;
        z-index: 1;
    }
    .page-product_detail .pd-level__price-label {
        font-family: var(--font-inter, sans-serif);
        font-size: 10.5px;
        font-weight: 800;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: #f0a58c;
        margin-bottom: 6px;
    }
    .page-product_detail .pd-level__price-value {
        font-family: var(--font-graphik, sans-serif);
        font-size: 30px;
        font-weight: 800;
        color: #ffffff;
        letter-spacing: -0.02em;
        line-height: 1;
    }
    .page-product_detail .pd-level__price-value small {
        font-family: var(--font-inter, sans-serif);
        font-size: 11.5px;
        font-weight: 700;
        color: rgba(255, 255, 255, 0.55);
        margin-left: 6px;
        letter-spacing: 0.05em;
    }
    .page-product_detail .pd-level__enroll-btn {
        position: relative;
        z-index: 1;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 14px 26px;
        background: var(--color-ember-red, #e34432);
        color: #ffffff;
        border: 0;
        border-radius: 999px;
        font-family: var(--font-inter, sans-serif);
        font-size: 14px;
        font-weight: 800;
        letter-spacing: 0.02em;
        cursor: pointer;
        box-shadow: 0 10px 22px rgba(227, 68, 50, 0.42);
        transition: transform 0.28s ease, background 0.28s ease, box-shadow 0.28s ease;
        white-space: nowrap;
    }
    .page-product_detail .pd-level__enroll-btn:hover {
        background: var(--color-deep-ember, #cf3520);
        transform: translateY(-2px);
        box-shadow: 0 14px 28px rgba(227, 68, 50, 0.55);
    }
    .page-product_detail .pd-level__enroll-btn i {
        font-size: 11px;
        transition: transform 0.25s ease;
    }
    .page-product_detail .pd-level__enroll-btn:hover i {
        transform: translateX(3px);
    }

    /* Responsive */
    @media (max-width: 991px) {
        .page-product_detail .pd-hero__grid {
            grid-template-columns: 1fr;
            gap: 40px;
        }
        .page-product_detail .pd-hero__media {
            max-width: 340px;
            aspect-ratio: 4/4.6;
        }
        .page-product_detail .pd-hero__media-back {
            top: 18px; left: 18px; right: -18px; bottom: -18px;
        }
        .page-product_detail .pd-level__grid {
            grid-template-columns: 1fr;
        }
        .page-product_detail .pd-level__learn-list {
            grid-template-columns: 1fr;
        }
    }
    @media (max-width: 767px) {
        .page-product_detail .pd-hero {
            padding: 40px 0 56px;
        }
        .page-product_detail .pd-hero__meta {
            gap: 20px;
        }
        .page-product_detail .pd-hero__stat--split {
            padding-left: 0;
            border-left: 0;
        }
        .page-product_detail .pd-hero__cta {
            margin-left: 0;
            width: 100%;
            justify-content: center;
        }
        .page-product_detail .pd-overview {
            padding: 56px 0 56px;
        }
        .page-product_detail .pd-levels {
            padding: 64px 0 72px;
        }
        .page-product_detail .pd-level {
            padding: 28px 24px 30px;
        }
        .page-product_detail .pd-level__enroll {
            flex-direction: column;
            align-items: stretch;
            gap: 18px;
        }
        .page-product_detail .pd-level__enroll-btn {
            width: 100%;
            justify-content: center;
        }
        .page-product_detail .pd-tabs {
            border-radius: 22px;
        }
    }
    @media (max-width: 480px) {
        .page-product_detail .pd-hero__stat-num { font-size: 32px; }
        .page-product_detail .pd-tabs .nav-item {
            min-width: 100%;
        }
        .page-product_detail .pd-level__price-value { font-size: 26px; }
    }

/* ===================== page-register ===================== */
    /* ============================================================
       REGISTER PAGE - REVAMPED PREMIUM EDITORIAL STYLE
       ============================================================ */

    .page-register .auth-page-section{
        background-color: #fffdfb; /* Crisp warm backdrop */
        position: relative;
        overflow: hidden;
    }

    /* Ambient blur backdrop shapes */
    .page-register .auth-bg-blob{
        position: absolute;
        border-radius: 50%;
        filter: blur(90px);
        -webkit-filter: blur(90px);
        pointer-events: none;
        opacity: 0.55;
        z-index: 1;
    }

    .page-register .auth-bg-blob.blob-1{
        width: 380px;
        height: 380px;
        background-color: var(--color-mint-wash, #f0f6df);
        top: -100px;
        left: -120px;
    }

    .page-register .auth-bg-blob.blob-2{
        width: 320px;
        height: 320px;
        background-color: var(--color-sky-wash, #dceaff);
        bottom: -80px;
        right: -80px;
    }

    .page-register .auth-content-container{
        position: relative;
        z-index: 2;
    }

    /* Single Unified Premium Card Layout */
    .page-register .unified-auth-card{
        background-color: var(--surface-paper-canvas, #fefdfc);
        border: 1px solid var(--color-stone, #d7d6d4);
        border-radius: var(--radius-cards, 12px);
        overflow: hidden;
        box-shadow: var(--shadow-subtle, 0px 1px 0px 0px rgba(37, 34, 30, 0.04));
        transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        animation: page-register-slideInUp 0.6s ease-out;
    }

    .page-register .unified-auth-card:hover{
        border-color: var(--color-stone, #d7d6d4);
        box-shadow: var(--shadow-lg, 0px 14px 19px -9px rgba(37, 34, 30, 0.07), 0px 10px 48px 0px rgba(37, 34, 30, 0.18));
    }

    /* Left Panel details style */
    .page-register .brand-details-panel{
        background-color: var(--surface-cream-wash, #fff6f0);
        border-right: 1px solid var(--color-stone, #d7d6d4);
    }

    .page-register .panel-content{
        padding: var(--spacing-48, 48px);
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .page-register .panel-title{
        font-family: var(--font-graphik), sans-serif;
        font-size: var(--text-heading, 38px);
        font-weight: var(--font-weight-bold, 700);
        line-height: var(--leading-heading, 1.28);
        letter-spacing: var(--tracking-heading, -0.19px);
        color: var(--color-ink, #25221e);
    }

    .page-register .panel-text{
        font-family: var(--font-inter), sans-serif;
        font-size: var(--text-body, 16px);
        line-height: var(--leading-body, 1.5);
        color: var(--color-pencil, #6f6c69);
    }

    /* Benefits Metadata List inside the panel */
    .page-register .benefits-info-list{
        display: flex;
        flex-direction: column;
    }

    .page-register .benefit-item{
        display: flex;
        align-items: flex-start;
        gap: 16px;
    }

    .page-register .benefit-icon{
        width: 42px;
        height: 42px;
        min-width: 42px;
        border-radius: 6px;
        background-color: var(--surface-paper-canvas, #fefdfc);
        border: 1px solid var(--color-stone, #d7d6d4);
        color: var(--color-deep-ember, #cf3520);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        transition: all 0.3s ease;
    }

    .page-register .benefit-item:hover .benefit-icon{
        background-color: var(--color-ember-red, #e34432);
        border-color: var(--color-ember-red, #e34432);
        color: #ffffff;
    }

    .page-register .benefit-body{
        display: flex;
        flex-direction: column;
    }

    .page-register .benefit-title{
        font-family: var(--font-inter), sans-serif;
        font-size: var(--text-body-sm, 14px);
        font-weight: var(--font-weight-semibold, 600);
        color: var(--color-ink, #25221e);
        margin-bottom: 2px;
    }

    .page-register .benefit-desc{
        font-family: var(--font-inter), sans-serif;
        font-size: var(--text-caption, 12px);
        color: var(--color-pencil, #6f6c69);
        line-height: 1.4;
    }

    /* Bottom Brand Mark */
    .page-register .panel-brand-mark{
        display: flex;
        flex-direction: column;
        border-top: 1px solid var(--color-stone, #d7d6d4);
        padding-top: 24px;
    }

    .page-register .brand-mark-title{
        font-family: var(--font-graphik), sans-serif;
        font-size: var(--text-body-lg, 18px);
        font-weight: var(--font-weight-bold, 700);
        color: var(--color-ink, #25221e);
    }

    .page-register .brand-mark-desc{
        font-family: var(--font-inter), sans-serif;
        font-size: var(--text-caption, 12px);
        color: var(--color-pencil, #6f6c69);
    }

    /* Right Panel: Clean Form Panel */
    .page-register .form-panel{
        background-color: var(--surface-paper-canvas, #fefdfc);
    }

    .page-register .form-title{
        font-family: var(--font-graphik), sans-serif;
        font-size: var(--text-subheading, 21px);
        font-weight: var(--font-weight-bold, 700);
        color: var(--color-ink, #25221e);
        margin: 0 0 8px 0;
    }

    .page-register .form-subtitle{
        font-family: var(--font-inter), sans-serif;
        font-size: var(--text-body-sm, 14px);
        color: var(--color-pencil, #6f6c69);
        margin: 0;
    }

    /* Premium Input Elements */
    .page-register .premium-input-label{
        display: block;
        font-family: var(--font-inter), sans-serif;
        font-size: var(--text-caption, 12px);
        font-weight: var(--font-weight-semibold, 600);
        color: var(--color-ink, #25221e);
        margin-bottom: 8px;
    }

    .page-register .premium-form-input{
        width: 100%;
        font-family: var(--font-inter), sans-serif;
        font-size: var(--text-body-sm, 14px);
        font-weight: var(--font-weight-medium, 500);
        color: var(--color-ink, #25221e);
        background-color: var(--surface-paper-canvas, #fefdfc);
        border: 1px solid var(--color-stone, #d7d6d4);
        border-radius: var(--radius-inputs, 8px);
        padding: 12px 16px;
        transition: all 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
        outline: none;
    }

    .page-register .premium-form-input::placeholder{
        color: var(--color-graphite, #94928f);
        font-weight: var(--font-weight-regular, 400);
    }

    .page-register .premium-form-input:focus{
        border-color: var(--color-ember-red, #e34432);
        background-color: var(--surface-paper-canvas, #fefdfc);
        box-shadow: 0 0 0 3px #f0f6df;
    }

    /* Validation and Error elements */
    .page-register .premium-form-input.is-invalid, .page-register .premium-form-input.error{
        border-color: var(--color-ember-red, #e34432) !important;
        background-color: #fffaf9 !important;
    }

    .page-register .premium-error-msg{
        color: var(--color-deep-ember, #cf3520);
        font-family: var(--font-inter), sans-serif;
        font-size: var(--text-caption, 12px);
        font-weight: var(--font-weight-medium, 500);
    }

    .page-register label.error{
        color: var(--color-deep-ember, #cf3520) !important;
        font-family: var(--font-inter), sans-serif;
        font-size: var(--text-caption, 12px) !important;
        font-weight: var(--font-weight-medium, 500) !important;
        margin-top: 6px !important;
        display: block !important;
    }

    .page-register .captcha-image-container img{
        border-radius: var(--radius-inputs, 8px);
        border: 1px solid var(--color-stone, #d7d6d4);
    }

    /* Submit Button */
    .page-register .premium-submit-btn{
        width: 100%;
        font-family: var(--font-inter), sans-serif;
        font-size: var(--text-body-sm, 14px);
        font-weight: var(--font-weight-semibold, 600);
        color: #ffffff;
        background-color: var(--color-ember-red, #e34432);
        border: 1px solid var(--color-ember-red, #e34432);
        border-radius: var(--radius-buttons, 8px);
        padding: 14px 24px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
        box-shadow: 0 4px 14px rgba(227, 68, 50, 0.2);
    }

    .page-register .premium-submit-btn:hover{
        background-color: var(--color-deep-ember, #cf3520);
        border-color: var(--color-deep-ember, #cf3520);
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(227, 68, 50, 0.35);
    }

    .page-register .premium-submit-btn:active{
        transform: translateY(0);
    }

    /* Badges & Links Style */
    .page-register .modern-badge{
        display: inline-block;
        font-family: var(--font-inter), sans-serif;
        font-size: var(--text-caption, 12px);
        font-weight: var(--font-weight-semibold, 600);
        line-height: 1;
        color: var(--color-deep-ember, #cf3520);
        background-color: var(--surface-cream-wash, #fff6f0);
        border: 1px solid var(--color-stone, #d7d6d4);
        border-radius: var(--radius-badges, 8px);
        padding: 6px 12px;
        letter-spacing: 0.05em;
        text-transform: uppercase;
    }

    .page-register .login-redirect-link{
        color: var(--color-ember-red, #e34432);
        transition: color 0.2s ease;
    }

    .page-register .login-redirect-link:hover{
        color: var(--color-deep-ember, #cf3520);
        text-decoration: underline !important;
    }

    @keyframes page-register-slideInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @media (max-width: 991px) {
        .page-register .brand-details-panel{
            border-right: none;
            border-bottom: 1px solid var(--color-stone, #d7d6d4);
        }
    }

    @media (max-width: 768px) {
        .page-register .panel-content{
            padding: var(--spacing-24, 24px);
        }
    }

/* ===================== page-topup ===================== */
    /* =========================================
       REDESIGNED LEARNING CREDITS PROGRESSION
       ========================================= */

    .page-topup .points-topup-section{
        background-color: var(--color-paper, #fefdfc) !important;
        border-top: 1px solid var(--color-stone, #d7d6d4);
        font-family: var(--font-inter), sans-serif;
    }

    /* Benefits Row */
    .page-topup .learning-benefit-card{
        background: var(--surface-cream-wash, #fffaf6);
        border: 1px solid var(--color-stone, #d7d6d4);
        border-radius: var(--radius-lg, 12px);
        padding: 18px 16px;
        text-align: center;
        height: 100%;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .page-topup .learning-benefit-card:hover{
        transform: translateY(-2px);
        box-shadow: var(--shadow-subtle, 0 4px 12px rgba(37,34,30,0.04));
    }
    .page-topup .benefit-emoji{
        font-size: 26px;
        display: block;
        margin-bottom: 10px;
    }
    .page-topup .benefit-title{
        font-family: var(--font-inter), sans-serif;
        font-size: 14px;
        font-weight: var(--font-weight-semibold, 600);
        color: var(--color-ink, #25221e);
        margin: 0;
    }

    /* Pathway Card */
    .page-topup .learning-pathway-card{
        background: var(--color-cream, #fff6f0);
        border: 1px solid var(--color-stone, #d7d6d4);
        border-radius: var(--radius-xl, 20px);
        padding: 32px;
    }
    .page-topup .pathway-header{
        display: flex;
        align-items: center;
        gap: 16px;
    }
    .page-topup .header-icon-modern{
        width: 46px;
        height: 46px;
        background: var(--color-paper, #fefdfc);
        border: 1px solid var(--color-stone, #d7d6d4);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        color: var(--color-ember-red, #e34432);
        box-shadow: var(--shadow-subtle, 0 4px 12px rgba(37,34,30,0.04));
    }
    .page-topup .pathway-title{
        font-family: var(--font-graphik), sans-serif;
        font-size: 20px;
        font-weight: 700;
        color: var(--color-ink, #25221e);
        margin: 0;
    }
    .page-topup .pathway-subtitle{
        font-size: 13px;
        color: var(--color-pencil, #6f6c69);
        margin: 4px 0 0 0;
    }

    /* Timeline Progression */
    .page-topup .visual-progression-timeline{
        display: flex;
        flex-direction: column;
        gap: 24px;
        position: relative;
        padding-left: 20px;
        margin-top: 24px;
    }
    .page-topup .visual-progression-timeline::before{
        content: '';
        position: absolute;
        left: 31px;
        top: 15px;
        bottom: 15px;
        width: 2px;
        background: var(--color-stone, #d7d6d4);
        z-index: 0;
    }
    .page-topup .timeline-step{
        display: flex;
        align-items: flex-start;
        gap: 20px;
        position: relative;
        z-index: 1;
    }
    .page-topup .step-badge{
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: var(--color-paper, #fefdfc);
        border: 2px solid var(--color-stone, #d7d6d4);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        font-weight: 700;
        color: var(--color-graphite, #94928f);
        flex-shrink: 0;
        margin-top: 4px;
        transition: all 0.3s ease;
    }
    .page-topup .timeline-step-highlight .step-badge{
        background: var(--color-ember-red, #e34432);
        border-color: var(--color-ember-red, #e34432);
        color: var(--color-paper, #fefdfc);
        box-shadow: 0 0 0 4px rgba(227, 68, 50, 0.15);
    }
    .page-topup .step-content{
        background: var(--color-paper, #fefdfc);
        border: 1px solid var(--color-stone, #d7d6d4);
        border-radius: 12px;
        padding: 16px 20px;
        flex-grow: 1;
        transition: all 0.3s ease;
        box-shadow: var(--shadow-subtle, 0 4px 12px rgba(37,34,30,0.04));
    }
    .page-topup .timeline-step-highlight .step-content{
        border-color: var(--color-ember-red, #e34432);
        background: var(--color-paper, #fefdfc);
    }
    .page-topup .step-header{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 6px;
    }
    .page-topup .step-title{
        font-size: 15px;
        font-weight: 700;
        color: var(--color-ink, #25221e);
        margin: 0;
    }
    .page-topup .step-bonus{
        font-size: 12px;
        font-weight: 700;
        color: var(--color-pencil, #6f6c69);
        padding: 2px 8px;
        background: var(--surface-cream-wash, #fffaf6);
        border: 1px solid var(--color-stone, #d7d6d4);
        border-radius: 6px;
    }
    .page-topup .timeline-step-highlight .step-bonus{
        color: var(--color-paper, #fefdfc);
        background: var(--color-ember-red, #e34432);
        border-color: var(--color-ember-red, #e34432);
    }
    .page-topup .step-desc{
        font-size: 13px;
        color: var(--color-pencil, #6f6c69);
        margin: 0 0 8px 0;
        line-height: 1.45;
    }
    .page-topup .step-range{
        font-size: 11px;
        font-weight: 600;
        color: var(--color-graphite, #94928f);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    /* Calculator Redesign */
    .page-topup .luxury-calculator-wrapper{
        background: var(--color-paper, #fefdfc);
        border: 1px solid var(--color-stone, #d7d6d4);
        border-radius: var(--radius-xl, 20px);
        padding: 32px;
        box-shadow: var(--shadow-subtle, 0 4px 12px rgba(37,34,30,0.04));
    }
    .page-topup .calc-header-premium{
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }
    .page-topup .calc-title-premium{
        font-family: var(--font-graphik), sans-serif;
        font-size: 20px;
        font-weight: 700;
        color: var(--color-ink, #25221e);
        margin: 0;
    }
    .page-topup .calc-tagline{
        font-size: 13px;
        color: var(--color-pencil, #6f6c69);
        margin: 4px 0 0 0;
    }
    .page-topup .calc-currency-badge{
        width: 40px;
        height: 40px;
        border-radius: 10px;
        background: var(--color-cream, #fff6f0);
        border: 1px solid var(--color-stone, #d7d6d4);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        font-weight: 700;
        color: var(--color-ink, #25221e);
    }

    /* Calculator inputs styling */
    .page-topup .input-label-premium{
        font-size: 13px;
        font-weight: 600;
        color: var(--color-pencil, #6f6c69);
        margin-bottom: 8px;
        display: block;
    }
    .page-topup .premium-amount-input-wrapper{
        position: relative;
        display: flex;
        align-items: center;
    }
    .page-topup .premium-amount-input{
        width: 100%;
        background: var(--surface-cream-wash, #fffaf6) !important;
        border: 1px solid var(--color-stone, #d7d6d4) !important;
        border-radius: var(--radius-buttons, 10px) !important;
        padding: 14px 44px 14px 20px !important;
        font-size: 22px !important;
        font-weight: 700 !important;
        color: var(--color-ink, #25221e) !important;
        transition: all 0.25s ease;
    }
    .page-topup .premium-amount-input:focus{
        background: var(--color-paper, #fefdfc) !important;
        border-color: var(--color-deep-ember, #cf3520) !important;
        outline: none;
        box-shadow: 0 0 0 3px rgba(207, 53, 32, 0.08);
    }
    .page-topup .input-currency{
        position: absolute;
        right: 20px;
        font-size: 18px;
        font-weight: 700;
        color: var(--color-graphite, #94928f);
        pointer-events: none;
    }

    /* Breakdown card styling */
    .page-topup .points-breakdown-card{
        background: var(--color-cream, #fff6f0);
        border: 1px solid var(--color-stone, #d7d6d4);
        border-radius: 12px;
        padding: 20px;
    }
    .page-topup .breakdown-row{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;
    }
    .page-topup .breakdown-row:last-child{
        margin-bottom: 0;
    }
    .page-topup .breakdown-label{
        font-size: 13px;
        font-weight: 500;
        color: var(--color-pencil, #6f6c69);
    }
    .page-topup .breakdown-value{
        font-size: 14px;
        font-weight: 700;
        color: var(--color-ink, #25221e);
    }
    .page-topup .bonus-badge{
        padding: 3px 8px;
        background: var(--color-paper, #fefdfc);
        border: 1px solid var(--color-stone, #d7d6d4);
        border-radius: 6px;
        font-size: 12px;
        color: var(--color-ember-red, #e34432) !important;
    }
    .page-topup .breakdown-divider{
        height: 1px;
        background: var(--color-stone, #d7d6d4);
        margin: 16px 0;
    }
    .page-topup .breakdown-total .breakdown-label{
        font-weight: 700;
        color: var(--color-ink, #25221e);
    }
    .page-topup .breakdown-value-total{
        font-size: 20px;
        font-weight: 800;
        color: var(--color-ember-red, #e34432);
    }

    /* Large display */
    .page-topup .points-display-premium{
        background: var(--surface-cream-wash, #fffaf6);
        border: 1px solid var(--color-stone, #d7d6d4);
        border-radius: 12px;
        padding: 24px;
        text-align: center;
        box-shadow: inset 0 2px 4px rgba(37,34,30,0.02);
    }
    .page-topup .points-number{
        display: block;
        font-family: var(--font-graphik), sans-serif;
        font-size: 40px;
        font-weight: 800;
        color: var(--color-ink, #25221e);
        line-height: 1.1;
        margin-bottom: 4px;
    }
    .page-topup .points-unit{
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--color-graphite, #94928f);
    }

    /* Buttons & Indicators */
    .page-topup .btn-premium-checkout{
        background: var(--color-ember-red, #e34432);
        color: var(--color-paper, #fefdfc);
        border: none;
        border-radius: var(--radius-buttons, 10px);
        padding: 14px 28px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        transition: all 0.25s cubic-bezier(.34,1.56,.64,1);
        box-shadow: 0 4px 14px rgba(227, 68, 50, 0.2);
    }
    .page-topup .btn-premium-checkout:hover{
        background: var(--color-deep-ember, #cf3520);
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(227, 68, 50, 0.3);
    }
    .page-topup .btn-premium-checkout:active{
        transform: translateY(1px);
    }
    .page-topup .trust-indicator{
        font-size: 12px;
        color: var(--color-pencil, #6f6c69);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }
    .page-topup .trust-indicator i{
        color: var(--color-cobalt-link, #0f66ae);
    }

    /* Responsive */
    @media (max-width: 991px) {
        .page-topup .learning-pathway-card, .page-topup .luxury-calculator-wrapper{
            padding: 24px;
        }
    }
    @media (max-width: 768px) {
        .page-topup .visual-progression-timeline::before{
            left: 21px;
        }
        .page-topup .step-badge{
            width: 20px;
            height: 20px;
            font-size: 10px;
        }
    }
    @media (max-width: 480px) {
        .page-topup .points-number{
            font-size: 32px;
        }
        .page-topup .luxury-calculator-wrapper,
        .page-topup .learning-pathway-card{
            padding: 20px 16px;
        }
        .page-topup .benefit-title{
            font-size: 12px;
        }
    }