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

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

/* ============================================================
   MODERN PRELOADER — glassmorphism design
   ============================================================ */
#preloader.artify-preloader {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(135deg, rgba(254, 253, 252, 0.95) 0%, rgba(255, 250, 248, 0.93) 100%);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 999999;
	animation: artifyPreloaderFadeOut 0.6s ease-out forwards 2.5s;
	pointer-events: auto;
}

#preloader.artify-preloader.hidden {
	display: none;
	pointer-events: none;
}

.preloader-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	text-align: center;
}

/* Logo with rotation */
.preloader-logo {
	position: relative;
	width: 80px;
	height: 80px;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 12px 32px rgba(37, 34, 30, 0.15);
	background: rgba(255, 255, 255, 0.8);
	border: 1px solid rgba(215, 214, 212, 0.5);
}

.preloader-logo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	animation: artifyLogoFloat 2s ease-in-out infinite;
}

/* Spinner ring */
.preloader-spinner {
	position: relative;
	width: 60px;
	height: 60px;
	margin-top: 12px;
}

.spinner {
	position: absolute;
	width: 60px;
	height: 60px;
	border: 3px solid rgba(227, 68, 50, 0.1);
	border-top: 3px solid var(--color-ember-red, #e34432);
	border-radius: 50%;
	animation: artifySpinnerRotate 1s linear infinite;
	box-shadow: 0 0 20px rgba(227, 68, 50, 0.2);
}

.spinner::before {
	content: '';
	position: absolute;
	width: 50px;
	height: 50px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border: 2px solid rgba(68, 108, 61, 0.1);
	border-right: 2px solid var(--color-forest, #446c3d);
	border-radius: 50%;
	animation: artifySpinnerRotate 2s linear infinite reverse;
}

/* Loading text */
.preloader-text {
	font-family: var(--font-inter, sans-serif);
	font-size: 14px;
	font-weight: 500;
	color: var(--color-pencil, #6f6c69);
	letter-spacing: 0.5px;
	margin-top: 8px;
	animation: artifyTextPulse 1.5s ease-in-out infinite;
}

/* Animations */
@keyframes artifyPreloaderFadeOut {
	0% {
		opacity: 1;
		visibility: visible;
	}
	100% {
		opacity: 0;
		visibility: hidden;
	}
}

@keyframes artifyLogoSpin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

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

@keyframes artifySpinnerRotate {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

@keyframes artifyTextPulse {
	0%, 100% {
		opacity: 0.6;
	}
	50% {
		opacity: 1;
	}
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
	#preloader.artify-preloader,
	.preloader-logo,
	.spinner,
	.preloader-text {
		animation: none !important;
	}
}

/* Mobile responsive */
@media (max-width: 576px) {
	.preloader-container {
		gap: 16px;
	}

	.preloader-logo {
		width: 64px;
		height: 64px;
	}

	.preloader-spinner {
		width: 48px;
		height: 48px;
	}

	.spinner,
	.spinner::before {
		width: 48px;
		height: 48px;
	}

	.preloader-text {
		font-size: 12px;
	}
}

/* ============================================================
   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);
            }

            /* ============================================================
               HEADER STYLING (NEW THEME)
               ============================================================ */
            header.main-header {
                position: sticky !important;
                top: 0 !important;
                background-color: var(--surface-paper-canvas) !important;
                background-image: none !important;
                border-bottom: 1px 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: var(--shadow-subtle);
            }

            header.main-header:hover {
                box-shadow: var(--shadow-subtle);
            }

            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: rgba(227, 68, 50, 0.08);
                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: rgba(227, 68, 50, 0.08) !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 {
                background: linear-gradient(180deg, #fffdfb 0%, #fff6f0 100%) !important;
                border-bottom: 1px solid rgba(215, 214, 212, 0.7) !important;
                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: 40px !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: 999px !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: rgba(227,68,50,.07) !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(227,68,50,.07) !important; border-color: rgba(227,68,50,.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: rgba(227,68,50,.08) !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: rgba(227,68,50,.08) !important; color: var(--color-deep-ember) !important; }
            .main-header .dropdown-item.active { background: var(--color-mint-wash) !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: 34px !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: var(--surface-cream-wash, #fff6f0) !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: rgba(227, 68, 50, 0.3) !important;
                color: var(--color-ember-red, #e34432) !important;
                transform: rotate(90deg) scale(1.05) !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 ===== */
    /* ============================================================
       ARTIFY ACADEMY — FOOTER (new warm theme)
       Visual redesign only; routes & handlers preserved.
       ============================================================ */
    .af-footer {
        position: relative;
        overflow: hidden;
        background: var(--color-cream, #fff6f0);
        color: var(--color-ink, #25221e);
        border-top: 1px 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;
        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; }

    .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-top:30px}
    .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;
    }
    .af-footer__links a:hover {
        color: var(--color-deep-ember, #cf3520);
        transform: translateX(3px);
    }

    /* ---- 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: 1px 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;
        }
    }

/* ============================================================
   COOKIE CONSENT — modern modal dialog with glassmorphism
   ============================================================ */
.artify-cookies{
    position:fixed; bottom:0; left:0; right:0; top:0; z-index:9999;
    display:flex; align-items:flex-end; justify-content:center; padding:20px;
    font-family:var(--font-inter,'Inter',sans-serif);
}
.artify-cookies__overlay{
    position:absolute; inset:0; background:rgba(37,34,30,.25); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); animation:artifyCookiesFadeIn .3s ease;
}
.artify-cookies__card{
    position:relative; z-index:1; max-width:520px; width:100%; border-radius:16px;
    background:linear-gradient(135deg, rgba(254,253,252,.98) 0%, rgba(255,246,240,.96) 100%);
    border:1px solid rgba(215,214,212,.5); box-shadow:0 20px 64px rgba(37,34,30,.16), 0 2px 8px rgba(37,34,30,.04);
    padding:0; overflow:hidden; animation:artifyCookiesSlidUp .3s cubic-bezier(.34,1.56,.64,1);
}

/* Header */
.artify-cookies__header{
    display:flex; align-items:center; gap:14px; padding:20px 24px; border-bottom:1px solid rgba(215,214,212,.3); position:relative;
}
.artify-cookies__icon{
    display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%;
    background:rgba(227,68,50,.1); color:var(--color-ember-red,#e34432); font-size:16px;
}
.artify-cookies__title{
    flex:1; font-size:18px; font-weight:var(--font-weight-semibold,600); color:var(--color-ink,#25221e); margin:0; line-height:1.2;
}
.artify-cookies__close{
    background:none; border:none; color:var(--color-pencil,#6f6c69); font-size:18px; cursor:pointer; padding:4px; transition:color .2s ease;
}
.artify-cookies__close:hover{ color:var(--color-ember-red,#e34432); }

/* Content */
.artify-cookies__content{ padding:16px 24px; }
.artify-cookies__intro{
    font-size:14px; line-height:1.6; color:var(--color-ink,#25221e); margin:0 0 10px;
}
.artify-cookies__policy-link{
    font-size:13px; line-height:1.5; color:var(--color-cobalt-link,#0f66ae); margin:0;
}
.artify-cookies__policy-link a{ color:var(--color-cobalt-link,#0f66ae); text-decoration:none; font-weight:var(--font-weight-medium,500); }
.artify-cookies__policy-link a:hover{ text-decoration:underline; }

/* Actions */
.artify-cookies__actions{
    display:flex; gap:10px; padding:0 24px 16px; align-items:center;
}
.artify-cookies__btn{
    flex:1; padding:10px 16px; border:none; border-radius:8px; font-size:14px; font-weight:var(--font-weight-semibold,600);
    cursor:pointer; transition:all .2s ease; font-family:var(--font-inter); text-decoration:none; display:inline-block; text-align:center;
}
.artify-cookies__btn--primary{
    background:var(--color-ember-red,#e34432); color:#fff; box-shadow:0 4px 12px rgba(227,68,50,.25);
}
.artify-cookies__btn--primary:hover{
    background:var(--color-deep-ember,#cf3520); box-shadow:0 6px 16px rgba(227,68,50,.35); transform:translateY(-1px);
}
.artify-cookies__btn--secondary{
    background:var(--color-paper,#fefdfc); color:var(--color-ink,#25221e); border:1px solid var(--color-stone,#d7d6d4);
}
.artify-cookies__btn--secondary:hover{
    border-color:var(--color-ink,#25221e); background:#fff; box-shadow:0 2px 8px rgba(37,34,30,.08);
}

/* Customize toggle */
.artify-cookies__customize-toggle{
    width:100%; padding:12px 24px; background:transparent; border:none; border-top:1px solid rgba(215,214,212,.3);
    font-size:13px; font-weight:var(--font-weight-semibold,600); color:var(--color-pencil,#6f6c69); cursor:pointer;
    display:flex; align-items:center; justify-content:space-between; transition:color .2s ease;
}
.artify-cookies__customize-toggle:hover{ color:var(--color-ink,#25221e); }
.artify-cookies__customize-toggle i{ font-size:12px; transition:transform .3s ease; }

/* Expand section */
.artify-cookies__expand{
    max-height:0; overflow:hidden; transition:max-height .3s ease;
}
.artify-cookies__expand--open{
    max-height:600px;
}
.artify-cookies__customize{
    padding:16px 24px;
}

/* Sections */
.artify-cookies__sections{
    display:flex; flex-direction:column; gap:12px; margin-bottom:14px;
}
.artify-cookies__section{
    padding:12px; border:1px solid rgba(215,214,212,.3); border-radius:8px; background:rgba(240,246,223,.2);
}

/* Category */
.artify-cookies__category{
    display:flex; align-items:flex-start; gap:10px; cursor:pointer; margin-bottom:6px;
}
.artify-cookies__category input[type="checkbox"]{
    width:18px; height:18px; margin-top:2px; cursor:pointer; accent-color:var(--color-ember-red,#e34432);
}
.artify-cookies__category input[type="checkbox"]:disabled{
    cursor:not-allowed; opacity:.6;
}
.artify-cookies__cat-title{
    font-size:14px; font-weight:var(--font-weight-semibold,600); color:var(--color-ink,#25221e);
}
.artify-cookies__cat-desc{
    font-size:12px; color:var(--color-pencil,#6f6c69); margin:4px 0 0 28px; line-height:1.4;
}

/* Details toggle */
.artify-cookies__more-toggle{
    background:none; border:none; color:var(--color-cobalt-link,#0f66ae); font-size:12px; font-weight:var(--font-weight-medium,500);
    cursor:pointer; padding:0; margin-left:28px; display:inline-flex; align-items:center; gap:4px; transition:color .2s ease;
}
.artify-cookies__more-toggle:hover{ color:var(--color-ink,#25221e); }
.artify-cookies__more-toggle i{ font-size:10px; transition:transform .2s ease; }

/* Details */
.artify-cookies__details{
    max-height:0; overflow:hidden; transition:max-height .3s ease; margin-left:28px; margin-top:6px;
}
.artify-cookies__details--open{
    max-height:400px;
}
.artify-cookies__cookies-list{
    list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px;
}
.artify-cookies__cookie-item{
    padding:8px 10px; background:rgba(255,255,255,.5); border-radius:6px; border-left:2px solid var(--color-ember-red,#e34432);
}
.artify-cookies__cookie-name{
    display:block; font-size:12px; font-weight:var(--font-weight-semibold,600); color:var(--color-ink,#25221e); margin-bottom:2px;
}
.artify-cookies__cookie-duration{
    display:inline-block; font-size:11px; color:var(--color-graphite,#94928f); margin-right:6px;
}
.artify-cookies__cookie-desc{
    font-size:11px; color:var(--color-pencil,#6f6c69); margin:4px 0 0; line-height:1.4;
}

/* Footer */
.artify-cookies__footer{
    padding:12px 24px; border-top:1px solid rgba(215,214,212,.3); display:flex; justify-content:flex-end;
}
.artify-cookies__save{
    padding:10px 20px; background:var(--color-ember-red,#e34432); color:#fff; border:none; border-radius:8px;
    font-size:14px; font-weight:var(--font-weight-semibold,600); cursor:pointer; transition:all .2s ease;
}
.artify-cookies__save:hover{
    background:var(--color-deep-ember,#cf3520); box-shadow:0 4px 12px rgba(227,68,50,.25); transform:translateY(-1px);
}

/* Animations */
@keyframes artifyCookiesFadeIn{
    from{ opacity:0; }
    to{ opacity:1; }
}
@keyframes artifyCookiesSlidUp{
    from{ transform:translateY(20px); opacity:0; }
    to{ transform:translateY(0); opacity:1; }
}

/* Responsive */
@media (max-width: 575px){
    .artify-cookies__card{ max-width:calc(100% - 16px); margin:0 8px 8px; }
    .artify-cookies__header{ gap:10px; padding:16px; }
    .artify-cookies__title{ font-size:16px; }
    .artify-cookies__icon{ width:32px; height:32px; font-size:14px; }
    .artify-cookies__content,
    .artify-cookies__actions,
    .artify-cookies__customize-toggle,
    .artify-cookies__customize{ padding-left:16px; padding-right:16px; }
    .artify-cookies__actions{ flex-direction:column-reverse; }
    .artify-cookies__btn{ font-size:13px; padding:12px 16px; }
}

/* ============================================================
   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
       ============================================================ */

    .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);
        }
    }

/* ===================== 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: rgba(227, 68, 50, 0.08); 
        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, rgba(227, 68, 50, 0.08) 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: rgba(227, 68, 50, 0.08);
        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; }
    }

/* ===================== 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: var(--surface-cream-wash, #fff6f0);
        border-right: 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 rgba(227, 68, 50, 0.08);
    }

    /* 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-right: none;
            border-bottom: 1px solid var(--color-stone, #d7d6d4);
        }
    }

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

/* ===================== 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: rgba(227, 68, 50, 0.08); 
        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, rgba(227, 68, 50, 0.08) 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: rgba(227, 68, 50, 0.08);
        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;
    }

    /* Artify 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;
    }

/* ===================== 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 rgba(227, 68, 50, 0.08);
    }

    /* 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);
        }
    }

/* ===================== page-index ===================== */
    /* =========================================
       ARTIFY HERO — Professional Gallery
       ========================================= */
    .artify-hero{
        position:relative; overflow:hidden; padding:80px 0 100px;
        background:linear-gradient(180deg, #fffdfb 0%, #fff6f0 100%);
    }
    .artify-hero__bg{
        position:absolute; inset:0; z-index:0;
        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;
        display:grid; grid-template-columns:1fr 1.2fr; gap:64px; align-items:start;
    }

    /* Left: Content */
    .artify-hero__content{ padding-top:20px; }

    .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(42px,6.5vw,68px);
        line-height:1.06; font-weight:var(--font-weight-bold,700); letter-spacing:-.03em;
        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);
    }
    .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 1.25fr;
    column-gap:10px;
    row-gap:10px;
}
/* Right side portrait */
.artify-hero__card--portrait{
    transform:scale(1.08);
    transform-origin:center;
}

/* Right side square artwork */
.artify-hero__card--art{
    transform:translateY(-20px) scale(1.08);
    transform-origin:center;
}

    .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:38px; 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:32px; }
        .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: 1px solid var(--color-stone, #d7d6d4);
        font-family: var(--font-inter), sans-serif;
    }

    /* Benefits Row */
    .page-index .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-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: var(--color-cream, #fff6f0);
        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: 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-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: 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-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: 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-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: var(--color-cream, #fff6f0);
        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: 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-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: 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-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; }
    }

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

    /* Custom 5-column grid columns */
    .page-index .col-custom-5{
        position: relative;
        width: 100%;
        padding-right: 12px;
        padding-left: 12px;
        flex: 0 0 100%;
        max-width: 100%;
    }

    @media (min-width: 576px) {
        .page-index .col-custom-5{
            flex: 0 0 50% !important;
            max-width: 50% !important;
        }
    }

    @media (min-width: 768px) {
        .page-index .col-custom-5{
            flex: 0 0 33.3333% !important;
            max-width: 33.3333% !important;
        }
    }

    @media (min-width: 992px) {
        .page-index .col-custom-5{
            flex: 0 0 25% !important;
            max-width: 25% !important;
        }
    }

    @media (min-width: 1200px) {
        .page-index .col-custom-5{
            flex: 0 0 20% !important;
            max-width: 20% !important;
        }
    }

    .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-cream, #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-section{
        position: relative;
        overflow: hidden;
    }

    .page-index .category-card-premium{
        border-radius: 16px;
        overflow: hidden;
        box-shadow: var(--shadow-subtle, 0 1px 3px rgba(0,0,0,0.05));
        padding: 18px;
        transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .page-index .category-card-premium:hover{
        box-shadow: rgba(37, 34, 30, 0.08) 0px 14px 28px, rgba(37, 34, 30, 0.04) 0px 4px 10px;
        transform: translateY(-6px);
    }

    /* Dynamic tint background colors by default */
    .page-index .category-card-premium--tint-0{
        background-color: var(--color-cream, #fff6f0) !important;
        border: 1px solid rgba(227, 68, 50, 0.15) !important;
    }
    .page-index .category-card-premium--tint-0:hover{
        border-color: rgba(227, 68, 50, 0.45) !important;
        background-color: var(--color-cream, #fff6f0) !important;
    }

    .page-index .category-card-premium--tint-1{
        background-color: var(--color-mint-wash, #f0f6df) !important;
        border: 1px solid rgba(68, 108, 61, 0.15) !important;
    }
    .page-index .category-card-premium--tint-1:hover{
        border-color: rgba(68, 108, 61, 0.45) !important;
        background-color: var(--color-mint-wash, #f0f6df) !important;
    }

    .page-index .category-card-premium--tint-2{
        background-color: var(--color-sky-wash, #dceaff) !important;
        border: 1px solid rgba(15, 102, 174, 0.15) !important;
    }
    .page-index .category-card-premium--tint-2:hover{
        border-color: rgba(15, 102, 174, 0.45) !important;
        background-color: var(--color-sky-wash, #dceaff) !important;
    }

    .page-index .category-icon-badge{
        width: 42px;
        height: 42px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        box-shadow: var(--shadow-subtle);
        transition: all 0.3s ease;
    }

    /* Icon badge default coloring per tint */
    .page-index .category-card-premium--tint-0 .category-icon-badge{
        color: var(--color-deep-ember, #cf3520) !important;
        border-color: rgba(227, 68, 50, 0.25) !important;
        background-color: var(--color-paper, #fefdfc) !important;
    }
    .page-index .category-card-premium--tint-1 .category-icon-badge{
        color: var(--color-forest, #446c3d) !important;
        border-color: rgba(68, 108, 61, 0.25) !important;
        background-color: var(--color-paper, #fefdfc) !important;
    }
    .page-index .category-card-premium--tint-2 .category-icon-badge{
        color: var(--color-cobalt-link, #0f66ae) !important;
        border-color: rgba(15, 102, 174, 0.25) !important;
        background-color: var(--color-paper, #fefdfc) !important;
    }

    /* Badge hover logic based on card tint */
    .page-index .category-card-premium--tint-0:hover .category-icon-badge{
        background-color: var(--color-ember-red, #e34432) !important;
        color: var(--color-paper, #fefdfc) !important;
        border-color: var(--color-ember-red, #e34432) !important;
    }
    .page-index .category-card-premium--tint-1:hover .category-icon-badge{
        background-color: var(--color-forest, #446c3d) !important;
        color: var(--color-paper, #fefdfc) !important;
        border-color: var(--color-forest, #446c3d) !important;
    }
    .page-index .category-card-premium--tint-2:hover .category-icon-badge{
        background-color: var(--color-cobalt-link, #0f66ae) !important;
        color: var(--color-paper, #fefdfc) !important;
        border-color: var(--color-cobalt-link, #0f66ae) !important;
    }

    .page-index .category-card-image{
        position: relative;
        width: 100%;
        height: 200px;
        overflow: hidden;
        border-radius: 12px;
        background: var(--color-paper, #fefdfc);
        border: 1px solid var(--color-stone, #d7d6d4);
    }

    .page-index .category-img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform var(--transition-normal, 0.25s ease);
    }

    .page-index .category-card-premium:hover .category-img{
        transform: scale(1.05);
    }

    .page-index .category-img-placeholder{
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 48px;
        color: var(--color-deep-ember, #cf3520);
        background: var(--color-paper, #fefdfc);
    }

    .page-index .category-overlay{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(37, 34, 30, 0.65);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity var(--transition-normal, 0.25s ease);
        backdrop-filter: blur(2px);
    }

    .page-index .category-card-premium:hover .category-overlay{
        opacity: 1;
    }

    .page-index .category-explore-btn{
        background: var(--color-ember-red, #e34432);
        color: var(--color-paper, #fefdfc);
        padding: 10px 20px;
        border-radius: var(--radius-buttons, 8px);
        font-weight: 600;
        font-size: 14px;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        transition: all var(--transition-normal, 0.25s ease);
        box-shadow: 0 4px 12px rgba(227, 68, 50, 0.2);
    }

    .page-index .category-explore-btn:hover{
        background: var(--color-deep-ember, #cf3520);
        box-shadow: 0 6px 16px rgba(227, 68, 50, 0.35);
        transform: translateY(-2px);
        color: var(--color-paper, #fefdfc);
    }

    .page-index .category-card-content{
        padding: 20px 16px;
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .page-index .category-title{
        font-family: var(--font-graphik, sans-serif);
        font-size: 17px;
        font-weight: 700;
        color: var(--color-ink, #25221e);
        margin: 0 0 12px 0;
    }

    .page-index .category-title a{
        color: var(--color-ink, #25221e);
        text-decoration: none;
        transition: color var(--transition-normal, 0.25s ease);
    }

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

    .page-index .category-count{
        font-size: 12px;
        color: var(--color-deep-ember, #cf3520);
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 6px;
        margin: 0 0 10px 0;
    }

    .page-index .category-count i{
        font-size: 11px;
    }

    .page-index .category-description{
        font-size: 13px;
        color: var(--color-pencil, #6f6c69);
        margin: 0;
        line-height: 1.5;
    }

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

    @media (max-width: 768px) {
        .page-index .category-card-image{
            height: 180px;
        }

        .page-index .category-card-content{
            padding: 16px 14px;
        }

        .page-index .category-title{
            font-size: 14px;
        }
    }

    @media (max-width: 480px) {
        .page-index .category-card-image{
            height: 160px;
        }

        .page-index .category-card-content{
            padding: 14px 12px;
        }

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

        .page-index .category-count{
            font-size: 11px;
        }

        .page-index .category-explore-btn{
            padding: 8px 14px;
            font-size: 12px;
        }
    }

    /* =========================================
       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;
    }

    /* =========================================
       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;
    }

    /* =========================================
       REVAMPED WHY CHOOSE US SECTION
       ========================================= */
    .page-index .why-card-premium{
        border-radius: 16px !important;
        overflow: hidden !important;
        box-shadow: var(--shadow-subtle, rgba(37, 34, 30, 0.04) 0px 1px 0px 0px) !important;
        padding: 40px 30px !important;
        transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .page-index .why-card-premium: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;
    }

    /* Tint backgrounds by default */
    .page-index .why-card-premium--tint-0{
        background-color: var(--color-cream, #fff6f0) !important;
        border: 1px solid rgba(227, 68, 50, 0.15) !important;
    }
    .page-index .why-card-premium--tint-0:hover{
        border-color: rgba(227, 68, 50, 0.45) !important;
    }

    .page-index .why-card-premium--tint-1{
        background-color: var(--color-mint-wash, #f0f6df) !important;
        border: 1px solid rgba(68, 108, 61, 0.15) !important;
    }
    .page-index .why-card-premium--tint-1:hover{
        border-color: rgba(68, 108, 61, 0.45) !important;
    }

    .page-index .why-card-premium--tint-2{
        background-color: var(--color-sky-wash, #dceaff) !important;
        border: 1px solid rgba(15, 102, 174, 0.15) !important;
    }
    .page-index .why-card-premium--tint-2:hover{
        border-color: rgba(15, 102, 174, 0.45) !important;
    }

    .page-index .why-icon-badge{
        width: 64px !important;
        height: 64px !important;
        border-radius: 50% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 24px !important;
        margin-bottom: 24px !important;
        box-shadow: var(--shadow-subtle) !important;
        transition: all 0.3s ease !important;
    }

    /* Icon color per tint */
    .page-index .why-card-premium--tint-0 .why-icon-badge{
        color: var(--color-deep-ember, #cf3520) !important;
        border: 1px solid rgba(227, 68, 50, 0.2) !important;
        background-color: var(--color-paper, #fefdfc) !important;
    }
    .page-index .why-card-premium--tint-1 .why-icon-badge{
        color: var(--color-forest, #446c3d) !important;
        border: 1px solid rgba(68, 108, 61, 0.2) !important;
        background-color: var(--color-paper, #fefdfc) !important;
    }
    .page-index .why-card-premium--tint-2 .why-icon-badge{
        color: var(--color-cobalt-link, #0f66ae) !important;
        border: 1px solid rgba(15, 102, 174, 0.2) !important;
        background-color: var(--color-paper, #fefdfc) !important;
    }

    /* Icon hover states */
    .page-index .why-card-premium--tint-0:hover .why-icon-badge{
        background-color: var(--color-ember-red, #e34432) !important;
        color: var(--color-paper, #fefdfc) !important;
        border-color: var(--color-ember-red, #e34432) !important;
    }
    .page-index .why-card-premium--tint-1:hover .why-icon-badge{
        background-color: var(--color-forest, #446c3d) !important;
        color: var(--color-paper, #fefdfc) !important;
        border-color: var(--color-forest, #446c3d) !important;
    }
    .page-index .why-card-premium--tint-2:hover .why-icon-badge{
        background-color: var(--color-cobalt-link, #0f66ae) !important;
        color: var(--color-paper, #fefdfc) !important;
        border-color: var(--color-cobalt-link, #0f66ae) !important;
    }

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

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

/* ===================== 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 rgba(227, 68, 50, 0.08);
    }

    /* 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{
        flex: 1;
        min-width: 260px;
    }

    .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__highlight{
        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
       ============================================================ */

    .page-page .policy-content-section{
        background-color: #fffdfb; /* Crisp warm backdrop */
        position: relative;
        overflow: hidden;
        padding: 80px 0 100px;
    }

    /* faint dotted sketch-grid, masked to fade at the edges */
    .page-page .policy-content-section::before{
        content: '';
        position: absolute;
        inset: 0;
        z-index: 0;
        background-image: radial-gradient(rgba(37, 34, 30, 0.05) 1px, transparent 1px);
        background-size: 26px 26px;
        -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 0%, transparent 80%);
                mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 0%, transparent 80%);
        pointer-events: none;
    }

    /* Ambient light blur glows behind rich text card (gently drifting) */
    .page-page .policy-bg-blob{
        position: absolute;
        border-radius: 50%;
        filter: blur(100px);
        -webkit-filter: blur(100px);
        pointer-events: none;
        opacity: 0.6;
        z-index: 1;
        will-change: transform;
    }

    .page-page .policy-bg-blob.blob-mint{
        width: 380px;
        height: 380px;
        background-color: var(--color-mint-wash, #f0f6df);
        top: -80px;
        left: -100px;
        animation: page-page-policyDrift 18s ease-in-out infinite;
    }

    .page-page .policy-bg-blob.blob-sky{
        width: 320px;
        height: 320px;
        background-color: var(--color-sky-wash, #dceaff);
        bottom: 10%;
        right: -80px;
        animation: page-page-policyDrift 22s ease-in-out infinite reverse;
    }

    .page-page .policy-bg-blob.blob-peach{
        width: 280px;
        height: 280px;
        background-color: var(--surface-cream-wash, #fff6f0);
        top: 35%;
        left: 50%;
        opacity: 0.8;
        animation: page-page-policyDrift 26s ease-in-out infinite;
    }

    @keyframes page-page-policyDrift {
        0%, 100% { transform: translate(0, 0) scale(1); }
        33%      { transform: translate(28px, -34px) scale(1.05); }
        66%      { transform: translate(-22px, 22px) scale(0.97); }
    }

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

    /* Premium card container with smooth elevate effects */
    .page-page .premium-rich-text-card{
        position: relative;
        background-color: var(--surface-paper-canvas, #fefdfc);
        border: 1px solid var(--color-stone, #d7d6d4);
        border-radius: 18px;
        padding: 56px clamp(28px, 5vw, 64px);
        box-shadow:
            0 1px 0 rgba(255, 255, 255, 0.8) inset,
            0 18px 50px rgba(37, 34, 30, 0.06),
            0 2px 8px rgba(37, 34, 30, 0.03);
        transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease, border-color 0.4s ease;
        animation: page-page-slideInUp 0.6s ease-out;
        overflow: hidden;
    }

    /* gradient accent strip across the top of the card */
    .page-page .premium-rich-text-card::before{
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 4px;
        background: linear-gradient(90deg,
            var(--color-ember-red, #e34432) 0%,
            var(--color-teal-dusk, #497d7e) 50%,
            var(--color-forest, #446c3d) 100%);
    }

    /* faint document watermark in the corner */
    .page-page .premium-rich-text-card::after{
        content: '\f15c'; /* fa file-alt */
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        position: absolute;
        top: 26px; right: 30px;
        font-size: 64px;
        color: var(--color-ember-red, #e34432);
        opacity: 0.05;
        pointer-events: none;
        line-height: 1;
    }

    .page-page .premium-rich-text-card:hover{
        transform: translateY(-4px);
        border-color: rgba(227, 68, 50, 0.4);
        box-shadow:
            0 1px 0 rgba(255, 255, 255, 0.8) inset,
            0 28px 60px rgba(37, 34, 30, 0.10),
            0 4px 12px rgba(37, 34, 30, 0.05);
    }

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

    .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);
        margin-top: 40px;
        margin-bottom: 20px;
        letter-spacing: var(--tracking-heading, -0.19px);
    }

    .page-page .policy-rich-text p{
        margin-bottom: 24px;
        color: var(--color-pencil, #6f6c69);
    }

    /* decorative gradient accent under section headings */
    .page-page .policy-rich-text h2{
        position: relative;
        padding-bottom: 14px;
    }
    .page-page .policy-rich-text h2::after{
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 52px;
        height: 3px;
        border-radius: 3px;
        background: linear-gradient(90deg, var(--color-ember-red, #e34432), var(--color-teal-dusk, #497d7e));
    }

    /* elegant drop-cap on the opening paragraph */
    .page-page .policy-rich-text > p:first-of-type::first-letter{
        font-family: var(--font-graphik), Georgia, serif;
        font-size: 3.2em;
        float: left;
        line-height: 0.8;
        margin-right: 8px;
        color: var(--color-ember-red, #e34432);
        font-weight: 700;
    }

    /* Modern Sliding Underline Link Effects */
    .page-page .policy-rich-text a{
        color: var(--color-cobalt-link, #0f66ae);
        text-decoration: none;
        font-weight: var(--font-weight-medium, 500);
        position: relative;
        transition: color 0.25s ease;
    }

    .page-page .policy-rich-text a::after{
        content: '';
        position: absolute;
        width: 100%;
        transform: scaleX(0);
        height: 1.5px;
        bottom: -2px;
        left: 0;
        background-color: var(--color-ember-red, #e34432);
        transform-origin: bottom right;
        transition: transform 0.25s ease-out;
    }

    .page-page .policy-rich-text a:hover{
        color: var(--color-ember-red, #e34432);
    }

    .page-page .policy-rich-text a:hover::after{
        transform: scaleX(1);
        transform-origin: bottom left;
    }

    /* Ordered List Styling with hover highlights */
    .page-page .policy-rich-text ol{
        margin-bottom: 24px !important;
        padding-left: 32px !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: 24px !important;
        color: var(--color-pencil, #6f6c69) !important;
        font-size: var(--text-body, 16px);
        transition: all 0.25s ease;
    }

    .page-page .policy-rich-text ol li:hover{
        transform: translateX(4px);
        color: var(--color-ink, #25221e) !important;
    }

    .page-page .policy-rich-text ol li::marker{
        font-family: var(--font-graphik), sans-serif;
        font-size: 1.6em;
        font-weight: var(--font-weight-bold, 700);
        color: var(--color-ember-red, #e34432);
        transition: color 0.25s ease;
    }

    .page-page .policy-rich-text ol li:hover::marker{
        color: var(--color-deep-ember, #cf3520);
    }

    .page-page .policy-rich-text ol li h3{
        display: inline;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        margin-left: 8px !important;
        font-size: 1.6em;
        line-height: var(--leading-heading, 1.28);
    }

    .page-page .policy-rich-text ol li h4{
        color: var(--color-deep-ember, #cf3520);
        font-family: var(--font-graphik), sans-serif;
        font-weight: var(--font-weight-bold, 700);
        margin-top: 24px !important;
        margin-bottom: 12px !important;
        font-size: 1.3em;
        transition: color 0.25s ease;
    }

    .page-page .policy-rich-text ol li h4:hover{
        color: var(--color-ember-red, #e34432);
    }

    /* Unordered List Styling (Bullet points) with micro-interactivity */
    .page-page .policy-rich-text ul{
        margin: 16px 0 24px 20px !important;
        padding-left: 20px !important;
        list-style-type: disc !important;
        list-style-position: outside !important;
    }

    .page-page .policy-rich-text ul li{
        display: list-item !important;
        list-style-type: disc !important;
        list-style-position: outside !important;
        margin-bottom: 8px !important;
        color: var(--color-pencil, #6f6c69) !important;
        font-size: var(--text-body-sm, 14px);
        transition: all 0.2s ease;
    }

    .page-page .policy-rich-text ul li:hover{
        transform: translateX(4px);
        color: var(--color-ink, #25221e) !important;
    }

    .page-page .policy-rich-text ul li::marker{
        color: var(--color-ember-red, #e34432) !important;
        transition: color 0.2s ease;
    }

    .page-page .policy-rich-text ul li:hover::marker{
        color: var(--color-deep-ember, #cf3520) !important;
    }

    .page-page .policy-rich-text li{
        margin-bottom: 12px !important;
        color: var(--color-pencil, #6f6c69) !important;
    }

    /* Metadata / Company Details Container in Raw HTML */
    .page-page .policy-rich-text .contact-content{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 20px;
        margin: 32px 0 !important;
        padding: 24px !important;
        background-color: var(--surface-cream-wash, #fff6f0) !important;
        border: 1px solid var(--color-stone, #d7d6d4) !important;
        border-radius: var(--radius-cards, 8px) !important;
        transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    }

    .page-page .policy-rich-text .contact-content:hover{
        border-color: var(--color-ember-red, #e34432) !important;
        box-shadow: var(--shadow-subtle, 0px 1px 0px 0px rgba(37, 34, 30, 0.04)) !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, 14px) !important;
        font-weight: var(--font-weight-bold, 700) !important;
        color: var(--color-deep-ember, #cf3520) !important;
        margin-top: 0 !important;
        margin-bottom: 8px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !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, #6f6c69) !important;
        margin: 0 !important;
    }

    /* Table Styling with scale transitions and elevated shadows */
    .page-page .policy-rich-text table{
        width: 100% !important;
        margin: 32px 0 !important;
        border-collapse: collapse !important;
        border: none !important;
        box-shadow: 0 4px 12px rgba(37, 34, 30, 0.03) !important;
        border-radius: var(--radius-cards, 8px) !important;
        overflow: hidden !important;
        transition: all 0.3s ease !important;
    }

    .page-page .policy-rich-text table:hover{
        box-shadow: 0 8px 24px rgba(37, 34, 30, 0.08) !important;
        transform: translateY(-2px) !important;
    }

    .page-page .policy-rich-text table tr{
        border: none !important;
    }

    .page-page .policy-rich-text table tr:nth-child(odd){
        background-color: var(--surface-paper-canvas, #fefdfc) !important;
    }

    .page-page .policy-rich-text table tr:nth-child(even){
        background-color: #fcfbfa !important;
    }

    .page-page .policy-rich-text table tr:hover{
        background-color: var(--surface-cream-wash, #fff6f0) !important;
        transition: background-color 0.25s ease !important;
    }

    .page-page .policy-rich-text table td{
        padding: 16px 20px !important;
        border: 1px solid var(--color-stone, #d7d6d4) !important;
        color: var(--color-pencil, #6f6c69) !important;
        font-size: var(--text-body-sm, 14px) !important;
        line-height: 1.6 !important;
    }

    .page-page .policy-rich-text table td:first-child{
        background-color: var(--surface-cream-wash, #fff6f0) !important;
        font-weight: var(--font-weight-bold, 700) !important;
        color: var(--color-deep-ember, #cf3520) !important;
        width: 30% !important;
    }

    .page-page .policy-rich-text table strong{
        color: var(--color-deep-ember, #cf3520) !important;
        font-weight: var(--font-weight-bold, 700) !important;
    }

    .page-page .policy-rich-text table img,
    .page-page .policy-rich-text img{
        max-width: 100% !important;
        height: auto !important;
        border-radius: var(--radius-images, 15px) !important;
        box-shadow: var(--shadow-subtle, 0px 1px 0px 0px rgba(37, 34, 30, 0.04)) !important;
        transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    }

    .page-page .policy-rich-text img:hover{
        transform: scale(1.02) !important;
        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)) !important;
    }

    .page-page .policy-rich-text table th{
        background: linear-gradient(135deg, var(--color-ember-red, #e34432) 0%, var(--color-deep-ember, #cf3520) 100%) !important;
        color: #ffffff !important;
        padding: 18px 20px !important;
        font-weight: var(--font-weight-bold, 700) !important;
        text-align: left !important;
        font-size: var(--text-body-sm, 14px) !important;
        letter-spacing: 0.5px !important;
        border: none !important;
    }

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

    @media (max-width: 768px) {
        .page-page .policy-content-section{ padding: 48px 0 64px; }
        .page-page .premium-rich-text-card{
            padding: var(--spacing-24, 24px);
            border-radius: 14px;
        }
        .page-page .premium-rich-text-card::after{ font-size: 48px; top: 18px; right: 20px; }
        .page-page .policy-rich-text > p:first-of-type::first-letter{ font-size: 2.8em; }
    }

    @media (prefers-reduced-motion: reduce) {
        .page-page .policy-bg-blob,
        .page-page .premium-rich-text-card{ animation: none !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 rgba(227, 68, 50, 0.08);
    }
    .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: 190px;
        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; }
    }

/* ===================== 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; }

    /* 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: rgba(227, 68, 50, 0.08);
        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: 999px;
        white-space: nowrap;
        cursor: pointer;
        transition: all 0.25s ease;
    }
    .page-product_detail .level-pill:hover:not(.active){
        border-color: rgba(227, 68, 50, 0.4);
        color: var(--color-deep-ember, #cf3520);
        background: rgba(227, 68, 50, 0.05);
    }
    .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;
    }
    .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: rgba(227, 68, 50, 0.35);
    }
    .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: rgba(227, 68, 50, 0.3);
        background: var(--color-cream, #fff6f0);
    }
    .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 rgba(227, 68, 50, 0.3);
        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;
        }
    }

/* ===================== 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 rgba(227, 68, 50, 0.08);
    }

    /* 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;
        }
    }