/**
 * GLOW HAUS ACADEMY THEME
 * Based on Dovetail Design System
 * Light theme with warm cream-paper editorial magazine aesthetic
 *
 * @author Design System
 * @version 1.0
 */

/* ============================================================
   ROOT DESIGN TOKENS
   ============================================================ */
:root {
  /* ---- Color Palette ---- */
  /* Primary Text & Surfaces */
  --color-butter-cream: #f9e5b1;   /* Hero and section canvas background */
  --color-ink-black: #1d1e21;      /* Primary text, filled buttons, main text color */
  --color-true-black: #000000;     /* Illustration strokes, icon fills, graphic elements */
  --color-warm-bone: #fef9f3;      /* Card backgrounds, secondary panels, light surface */
  --color-ash-gray: #e5e7eb;       /* Hairline borders, dividers, neutral tag fills */

  /* Legacy variables mappings to maintain theme compatibility */
  --color-ink: var(--color-ink-black);
  --color-paper: var(--color-warm-bone);
  --color-cream: var(--color-butter-cream);
  --color-stone: var(--color-ash-gray);
  --color-pencil: var(--color-ink-black);
  --color-graphite: #6f6c69;
  --color-charcoal: var(--color-ink-black);

  /* Brand accents mapped to design tokens for minimalist editorial feel */
  --color-ember-red: var(--color-ink-black);
  --color-deep-ember: var(--color-true-black);
  --color-cobalt-link: var(--color-ink-black);
  --color-teal-dusk: var(--color-ink-black);

  /* Background Washes mapped to warm cream / bone palette */
  --color-mint-wash: var(--color-butter-cream);
  --color-sky-wash: var(--color-warm-bone);
  --color-forest: var(--color-ink-black);

  /* Surface Layers */
  --surface-paper-canvas: var(--color-butter-cream);
  --surface-cream-wash: var(--color-butter-cream);
  --surface-tinted-wave: var(--color-butter-cream);
  --surface-card-surface: var(--color-warm-bone);

  /* ---- Typography ---- */
  /* Japanese and Latin font stacks suitable for modern editorial beauty websites */
  --font-japanese-sans: "Noto Sans JP", "Yu Gothic", "Meiryo", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-japanese-serif: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", "MS PMincho", serif;

  /* Font Families — Lausanne is the single typeface for everything, combined with premium Japanese fallbacks */
  --font-lausanne: 'Lausanne', 'Inter', var(--font-japanese-sans);
  --font-graphik: var(--font-lausanne);
  --font-inter: var(--font-lausanne);
  --font-caecilia: var(--font-lausanne);
  --font-shantell-sans: var(--font-lausanne);
  --font-serif: "Playfair Display", var(--font-japanese-serif);

  /* Typography Scale */
  --text-caption: 14px;
  --leading-caption: 1.4;
  --tracking-caption: 0.14px;

  --text-body-sm: 20px;
  --leading-body-sm: 1.4;
  --tracking-body-sm: 0.14px;

  --text-body: 22px;
  --leading-body: 1.36;
  --tracking-body: 0.11px;

  --text-body-lg: 24px;
  --leading-body-lg: 1.33;
  --tracking-body-lg: 0.11px;

  --text-subheading: 28px;
  --leading-subheading: 1.28;
  --tracking-subheading: 0;

  --text-heading: 32px;
  --leading-heading: 1.25;
  --tracking-heading: 0;

  --text-heading-lg: 48px;
  --leading-heading-lg: 1.16;
  --tracking-heading-lg: -0.24px;

  --text-display: 72px;
  --leading-display: 1.0;
  --tracking-display: -0.72px;

  /* Font Weights */
  --font-weight-regular: 400;
  --font-weight-w475: 400;
  --font-weight-medium: 600;
  --font-weight-semibold: 600;
  --font-weight-w625: 600;
  --font-weight-bold: 700;

  /* ---- Spacing Scale (8px base unit) ---- */
  --spacing-unit: 8px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-56: 56px;
  --spacing-64: 64px;
  --spacing-72: 72px;
  --spacing-128: 128px;
  --spacing-192: 192px;

  /* ---- Border Radius ---- */
  --radius-sm: 2.5px;
  --radius-lg: 16px;
  --radius-xl: 16px;

  /* Semantic Radius Names */
  --radius-nav: 9999px;
  --radius-cards: 16px;
  --radius-badges: 91px;
  --radius-images: 16px;
  --radius-inputs: 8px;
  --radius-buttons: 9999px;
  --radius-pilltags: 91px;

  /* ---- Shadows (Completely flat design - no shadows/depth) ---- */
  --shadow-subtle: none;
  --shadow-lg: none;

  /* ---- Layout ---- */
  --page-max-width: 1200px;
  --section-gap: 80px;
  --card-padding: 32px;
  --element-gap: 24px;

  /* ---- Transitions ---- */
  --transition-fast: 150ms ease-out;
  --transition-normal: 250ms ease-out;
  --transition-slow: 350ms ease-out;
}

/* ============================================================
   GLOBAL RESETS & DEFAULTS
   ============================================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-butter-cream);
  color: var(--color-ink-black);
  font-family: var(--font-lausanne);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  font-weight: var(--font-weight-regular);
}

/* ============================================================
   TYPOGRAPHY COMPONENTS
   ============================================================ */

/* Display Heading (72px) */
h1, .display {
  font-family: var(--font-lausanne);
  font-size: var(--text-display);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  color: var(--color-ink-black);
  margin-bottom: var(--spacing-24);
}

/* Large Heading (48px) */
h2, .heading-lg {
  font-family: var(--font-lausanne);
  font-size: var(--text-heading-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-heading-lg);
  letter-spacing: var(--tracking-heading-lg);
  color: var(--color-ink-black);
  margin-bottom: var(--spacing-24);
}

/* Heading (32px) */
h3, .heading {
  font-family: var(--font-lausanne);
  font-size: var(--text-heading);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-ink-black);
  margin-bottom: var(--spacing-16);
}

/* Subheading (28px) */
h4, .subheading {
  font-family: var(--font-lausanne);
  font-size: var(--text-subheading);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-subheading);
  letter-spacing: var(--tracking-subheading);
  color: var(--color-ink-black);
  margin-bottom: var(--spacing-16);
}

/* Body Large (24px) */
.body-lg, h5 {
  font-family: var(--font-lausanne);
  font-size: var(--text-body-lg);
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-body-lg);
  letter-spacing: var(--tracking-body-lg);
  color: var(--color-ink-black);
}

/* Body (22px) */
p, .body {
  font-family: var(--font-lausanne);
  font-size: var(--text-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  color: var(--color-ink-black);
  margin-bottom: var(--spacing-24);
  text-align: left; /* Left align body text always */
}

/* Body Small (20px) */
.body-sm, h6 {
  font-family: var(--font-lausanne);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-body-sm);
  letter-spacing: var(--tracking-body-sm);
  color: var(--color-ink-black);
}

/* Caption (14px) */
.caption {
  font-family: var(--font-lausanne);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
  color: var(--color-ink-black);
  opacity: 0.8;
}

/* Secondary Text */
.text-secondary {
  color: var(--color-ink-black);
  opacity: 0.8;
  font-size: var(--text-body-sm);
}

/* Muted Text */
.text-muted {
  color: var(--color-ink-black);
  opacity: 0.6;
}

/* ============================================================
   BUTTONS & ACTIONS (Filled Pill & Ghost)
   ============================================================ */

/* Primary Button - Filled Pill */
.btn-primary,
button[type="submit"],
input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);

  background-color: var(--color-ink-black);
  color: var(--color-warm-bone);

  font-family: var(--font-lausanne);
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
  line-height: 1;

  padding: 14px 20px;
  border: none;
  border-radius: var(--radius-buttons);

  cursor: pointer;
  transition: transform var(--transition-fast) cubic-bezier(.34,1.56,.64,1), background var(--transition-fast);
  box-shadow: none;
  text-decoration: none;
}

.btn-primary:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
  background-color: var(--color-true-black);
  transform: translateY(-1px);
  box-shadow: none;
}

.btn-primary:active,
button[type="submit"]:active,
input[type="submit"]:active {
  transform: translateY(0);
}

/* Ghost Button & Secondary Actions */
.btn-ghost,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);

  background-color: transparent;
  color: var(--color-ink-black);

  font-family: var(--font-lausanne);
  font-size: 18px;
  font-weight: var(--font-weight-regular);
  line-height: 1;

  padding: var(--spacing-8) var(--spacing-16);
  border: none;
  border-radius: var(--radius-navitems);

  cursor: pointer;
  transition: color var(--transition-fast);
  text-decoration: none;
}

.btn-ghost:hover,
.btn-secondary:hover {
  color: var(--color-true-black);
  text-decoration: underline;
}

/* Text Links */
a, .link {
  color: var(--color-ink-black);
  text-decoration: none;
  transition: color var(--transition-fast);
  font-weight: var(--font-weight-medium);
}

a:hover, .link:hover {
  color: var(--color-true-black);
  text-decoration: underline;
}

/* ============================================================
   CARDS & CONTAINERS (Flat Photo Cards, no shadow)
   ============================================================ */
.card {
  background-color: var(--color-warm-bone);
  border-radius: var(--radius-cards);
  padding: var(--card-padding);
  box-shadow: none;
  border: 1px solid var(--color-ash-gray);
  transition: border-color var(--transition-normal);
}

.card:hover {
  border-color: var(--color-ink-black);
  box-shadow: none;
}

/* ============================================================
   FORMS & INPUTS
   ============================================================ */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
textarea,
select {
  width: 100%;
  padding: var(--spacing-12) var(--spacing-16);
  font-family: var(--font-lausanne);
  font-size: 18px;
  line-height: 1.4;

  background-color: var(--color-warm-bone);
  color: var(--color-ink-black);
  border: 1px solid var(--color-ash-gray);
  border-radius: var(--radius-inputs);

  transition: border-color var(--transition-fast);
}

input::placeholder,
textarea::placeholder {
  color: var(--color-ink-black);
  opacity: 0.5;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--color-ink-black);
  background-color: var(--color-warm-bone);
  box-shadow: none;
}

/* ============================================================
   BADGES & PILLS
   ============================================================ */
.badge {
  display: inline-block;
  font-family: var(--font-lausanne);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  line-height: 1;

  padding: 6px 12px;
  border-radius: var(--radius-badges);
  border: 1px solid var(--color-ash-gray);
  background-color: var(--color-warm-bone);
  color: var(--color-ink-black);

  white-space: nowrap;
}

/* Capability Stacking Tag (Specific Dovetail pill structure) */
.capability-pill-tag {
  display: inline-flex;
  align-items: center;
  background-color: var(--color-warm-bone);
  border: 1px solid var(--color-ash-gray);
  border-radius: var(--radius-pilltags);
  padding: 20px 32px;
  font-family: var(--font-lausanne);
  font-size: 24px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-ink-black);
  transition: transform var(--transition-fast) ease;
}
.capability-pill-tag:hover {
  transform: translateY(-2px);
  border-color: var(--color-ink-black);
}

/* ============================================================
   EYEBROW LABEL
   ============================================================ */
.eyebrow {
  font-family: var(--font-lausanne);
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-ink-black);
  margin-bottom: var(--spacing-8);
  display: block;
}

/* ============================================================
   NAVIGATION
   ============================================================ */
nav {
  font-family: var(--font-lausanne);
  font-size: 18px;
  font-weight: var(--font-weight-regular);
}

nav a {
  display: inline-block;
  padding: var(--spacing-8) var(--spacing-16);
  color: var(--color-ink-black);
  transition: color var(--transition-fast);
  position: relative;
}

nav a:hover {
  color: var(--color-true-black);
}

nav a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: var(--spacing-16);
  right: var(--spacing-16);
  height: 1px;
  background-color: var(--color-ink-black);
  transform: scaleX(0);
  transition: transform var(--transition-fast);
}

nav a:hover::after,
nav a.active::after {
  transform: scaleX(1);
}

/* ============================================================
   SECTIONS & SPACING (Alternating canvases)
   ============================================================ */
section {
  padding: var(--spacing-64) var(--spacing-24);
  background-color: var(--color-butter-cream); /* Default canvas */
}

/* Alternating panels between Butter Cream and Warm Bone */
section:nth-child(even) {
  background-color: var(--color-warm-bone);
}

section:nth-child(3n) {
  background-color: var(--color-butter-cream);
}

.container {
  width: 100%;
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-24);
}

/* Section hair dividers */
.section-divider {
  width: 100%;
  height: 1px;
  background-color: var(--color-ash-gray);
  border: none;
  margin: 0;
}

/* ============================================================
   GLOW HAUS HERO (Minimal, oversized type, flat typography grids)
   ============================================================ */
.artify-hero {
  position: relative;
  overflow: hidden;
  background-color: var(--color-butter-cream);
  padding: var(--spacing-72) 0 var(--spacing-72);
  border-bottom: 1px solid var(--color-ash-gray);
}

.artify-hero__bg {
  display: none; /* No gradients or decorative backgrounds in Dovetail */
}

.artify-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: var(--radius-pilltags);
  background: var(--color-warm-bone);
  border: 1px solid var(--color-ash-gray);
  font-family: var(--font-lausanne);
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-ink-black);
  margin-bottom: var(--spacing-24);
}
.artify-hero__badge i {
  color: var(--color-ink-black);
}

.artify-hero__title {
  font-family: var(--font-lausanne);
  font-size: var(--text-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  font-weight: var(--font-weight-bold);
  color: var(--color-ink-black);
  margin: 0 0 var(--spacing-24) 0;
}

.artify-hero__subtitle {
  font-family: var(--font-lausanne);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-ink-black);
  max-width: 500px;
  margin: 0 0 var(--spacing-32) 0;
}

.artify-hero__btn--primary {
  background-color: var(--color-ink-black) !important;
  color: var(--color-warm-bone) !important;
  border-radius: var(--radius-buttons) !important;
  box-shadow: none !important;
  padding: 14px 24px !important;
}
.artify-hero__btn--primary:hover {
  background-color: var(--color-true-black) !important;
  transform: translateY(-2px);
}

.artify-hero__btn--secondary {
  color: var(--color-ink-black) !important;
  background-color: transparent !important;
  border: none !important;
  font-size: 16px !important;
}
.artify-hero__btn--secondary:hover {
  text-decoration: underline !important;
}

.artify-hero__card {
  border-radius: var(--radius-cards) !important;
  border: 1px solid var(--color-ash-gray) !important;
  box-shadow: none !important;
  overflow: hidden;
}

/* ============================================================
   MODERN BADGE & MISC COMPONENTS
   ============================================================ */
.modern-badge {
  display: inline-flex !important;
  align-items: center !important;
  font-family: var(--font-lausanne) !important;
  font-size: 11px !important;
  font-weight: var(--font-weight-semibold) !important;
  letter-spacing: 0.08em !important;
  padding: 6px 12px !important;
  border-radius: var(--radius-badges) !important;
  background-color: var(--color-warm-bone) !important;
  color: var(--color-ink-black) !important;
  border: 1px solid var(--color-ash-gray) !important;
  text-transform: uppercase !important;
}

.modern-h2 {
  font-family: var(--font-lausanne) !important;
  font-size: var(--text-heading-lg) !important;
  font-weight: var(--font-weight-bold) !important;
  line-height: var(--leading-heading-lg) !important;
  letter-spacing: var(--tracking-heading-lg) !important;
  color: var(--color-ink-black) !important;
}

/* Overriding courses premium cards */
.category-card-premium {
  background-color: var(--color-warm-bone) !important;
  border: 1px solid var(--color-ash-gray) !important;
  border-radius: var(--radius-cards) !important;
  box-shadow: none !important;
}
.category-card-premium:hover {
  border-color: var(--color-ink-black) !important;
}
.category-card-image {
  border-radius: var(--radius-cards) var(--radius-cards) 0 0 !important;
  border-bottom: 1px solid var(--color-ash-gray) !important;
}
.category-explore-btn {
  background-color: var(--color-ink-black) !important;
  color: var(--color-warm-bone) !important;
  border-radius: var(--radius-buttons) !important;
}

/* Overriding course blocks */
.modern-course-card {
  background-color: var(--color-warm-bone) !important;
  border: 1px solid var(--color-ash-gray) !important;
  border-radius: var(--radius-cards) !important;
}
.course-img-container {
  border-radius: var(--radius-cards) var(--radius-cards) 0 0 !important;
}

/* Points Pathway items */
.timeline-step {
  border: 1px solid var(--color-ash-gray) !important;
  background-color: var(--color-warm-bone) !important;
  border-radius: var(--radius-cards) !important;
}
.timeline-step-highlight {
  border-color: var(--color-ink-black) !important;
  background-color: var(--color-warm-bone) !important;
}
.step-badge {
  background-color: var(--color-ink-black) !important;
  color: var(--color-warm-bone) !important;
}

/* Calculator override */
.luxury-calculator-wrapper {
  background-color: var(--color-warm-bone) !important;
  border: 1px solid var(--color-ash-gray) !important;
  border-radius: var(--radius-cards) !important;
}
.btn-premium-checkout {
  background-color: var(--color-ink-black) !important;
  color: var(--color-warm-bone) !important;
}
.btn-premium-checkout:hover {
  background-color: var(--color-true-black) !important;
}
.points-breakdown-card {
  background-color: var(--color-butter-cream) !important;
  border: 1px solid var(--color-ash-gray) !important;
  border-radius: var(--radius-inputs) !important;
}
.premium-amount-input {
  color: var(--color-ink-black) !important;
  border-color: var(--color-ash-gray) !important;
}
.premium-amount-input:focus {
  border-color: var(--color-ink-black) !important;
}

/* why choose cards */
.why-card-premium {
  background-color: var(--color-warm-bone) !important;
  border: 1px solid var(--color-ash-gray) !important;
  border-radius: var(--radius-cards) !important;
}
.why-icon-badge {
  background-color: var(--color-butter-cream) !important;
  color: var(--color-ink-black) !important;
}

/* ============================================================
   UTILITIES
   ============================================================ */
.mt-1 { margin-top: var(--spacing-8); }
.mt-2 { margin-top: var(--spacing-16); }
.mt-3 { margin-top: var(--spacing-24); }
.mt-4 { margin-top: var(--spacing-32); }
.mt-5 { margin-top: var(--spacing-48); }
.mt-6 { margin-top: var(--spacing-64); }

.mb-1 { margin-bottom: var(--spacing-8); }
.mb-2 { margin-bottom: var(--spacing-16); }
.mb-3 { margin-bottom: var(--spacing-24); }
.mb-4 { margin-bottom: var(--spacing-32); }
.mb-5 { margin-bottom: var(--spacing-48); }
.mb-6 { margin-bottom: var(--spacing-64); }

.p-1 { padding: var(--spacing-8); }
.p-2 { padding: var(--spacing-16); }
.p-3 { padding: var(--spacing-24); }
.p-4 { padding: var(--spacing-32); }
.p-5 { padding: var(--spacing-48); }
.p-6 { padding: var(--spacing-64); }

/* ============================================================
   HEADER REVAMP - DOVETAIL EDITORIAL AESTHETIC
   ============================================================ */
/* Root header container */
.main-header {
  background-color: var(--color-warm-bone) !important;
  border-bottom: 1px solid var(--color-ash-gray) !important;
  box-shadow: none !important;
  padding: 12px 0 !important;
  transition: all 0.3s ease !important;
}

/* logo */
.logo-img {
  max-height: 48px !important;
  border-radius: 8px !important;
  transition: transform 0.2s ease !important;
}
.logo-img:hover {
  transform: scale(1.03);
}

/* Center nav capsule container alignment */
.center-nav {
  display: flex !important;
  justify-content: center !important;
}

/* Slide-Hover Pill Navigation */
.nav-list {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 4px !important;
  background-color: var(--color-warm-bone) !important;
  border: 1px solid var(--color-ash-gray) !important;
  border-radius: 9999px !important;
  height: 52px !important;
}
.nav-list .nav-item {
  position: relative !important;
  z-index: 2 !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.nav-list .nav-link {
  position: relative !important;
  z-index: 3 !important;
  display: flex !important;
  align-items: center !important;
  column-gap: 6px !important;
  color: #ffffff !important;
  mix-blend-mode: difference !important;
  padding: 10px 22px !important;
  font-family: var(--font-lausanne) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  text-transform: uppercase !important;
  border-radius: 9999px !important;
  border: none !important;
  background: transparent !important;
  transition: opacity 0.2s ease !important;
}
.nav-list .nav-link svg {
  stroke: currentColor !important;
  transition: transform 0.2s ease !important;
}
.nav-list .nav-link:hover svg {
  transform: translateY(1px);
}
.nav-list .nav-cursor {
  position: absolute !important;
  top: 4px !important;
  bottom: 4px !important;
  height: calc(100% - 8px) !important;
  background-color: var(--color-ink-black) !important;
  border-radius: 9999px !important;
  z-index: 1 !important;
  pointer-events: none !important;
  opacity: 0;
  transition: left 0.3s cubic-bezier(0.25, 1, 0.5, 1), width 0.3s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.2s ease !important;
}

/* Right-actions container spacing */
.right-actions {
  display: flex !important;
  align-items: center !important;
  column-gap: 12px !important;
}

/* Action Dropdown Buttons, Selectors, and Cart */
.selector-btn, .account-btn, .cart-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  column-gap: 8px !important;
  background-color: var(--color-warm-bone) !important;
  border: 1px solid var(--color-ash-gray) !important;
  border-radius: 9999px !important;
  padding: 8px 18px !important;
  font-family: var(--font-lausanne) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: var(--color-ink-black) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: none !important;
  height: 44px !important;
}
.selector-btn:hover, .account-btn:hover, .cart-btn:hover {
  background-color: var(--color-butter-cream) !important;
  border-color: var(--color-ink-black) !important;
  color: var(--color-ink-black) !important;
}
.selector-btn .selector-ico {
  margin-right: 2px !important;
  border-radius: 2px !important;
}

/* Cart Button indicator badge styling */
.cart-btn {
  position: relative !important;
  padding: 8px 14px !important;
  width: auto !important;
  color: var(--color-ink-black) !important;
}
.cart-btn i {
  font-size: 16px !important;
}
.cart-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: var(--color-ink-black) !important;
  color: var(--color-warm-bone) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  border-radius: 9999px !important;
  padding: 2px 6px !important;
  min-width: 20px !important;
  height: 20px !important;
  margin-left: 4px !important;
}

/* Dropdown Menu overrides */
.nav-list .dropdown-menu, .dropdown-menu {
  background-color: var(--color-warm-bone) !important;
  border: 1px solid var(--color-ash-gray) !important;
  border-radius: 16px !important;
  padding: 8px !important;
  box-shadow: none !important;
  margin-top: 8px !important;
  mix-blend-mode: normal !important;
  z-index: 999 !important;
}
.dropdown-item {
  display: flex !important;
  align-items: center !important;
  column-gap: 10px !important;
  font-family: var(--font-lausanne) !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  color: var(--color-ink-black) !important;
  padding: 10px 18px !important;
  border-radius: 9999px !important;
  transition: all 0.2s ease !important;
}
.dropdown-item:hover, .dropdown-item.active {
  background-color: var(--color-butter-cream) !important;
  color: var(--color-ink-black) !important;
}
.dropdown-divider {
  border-top: 1px solid var(--color-ash-gray) !important;
  margin: 6px 0 !important;
}

/* Account specific Dropdown headers */
.account-dropdown .account-head {
  padding: 10px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  row-gap: 4px !important;
}
.account-dropdown .account-head__name {
  font-family: var(--font-lausanne) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  color: var(--color-ink-black) !important;
}
.account-dropdown .account-head__credits {
  font-family: var(--font-lausanne) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  color: var(--color-ink-black) !important;
}
.account-cta {
  padding: 4px 8px !important;
}

/* Sticky Header styling */
.sticky-header {
  background-color: var(--color-warm-bone) !important;
  border-bottom: 1px solid var(--color-ash-gray) !important;
  box-shadow: none !important;
  padding: 10px 0 !important;
  transition: all 0.3s ease !important;
}
.sticky-header .logo img {
  max-height: 40px !important;
  border-radius: 6px !important;
}

/* Mobile Nav Toggle */
.mobile-nav-toggler {
  color: var(--color-ink-black) !important;
  font-size: 20px !important;
  cursor: pointer !important;
  transition: transform 0.2s ease !important;
}
.mobile-nav-toggler:hover {
  transform: scale(1.05);
}

/* ============================================================
   GLOBAL DOVETAIL SPECIFICATION FORCING
   ============================================================ */
/* Force flat warm cream canvas backdrop globally */
body, html, .page-wrapper {
  background-color: var(--color-butter-cream, #f9e5b1) !important;
  color: var(--color-ink-black, #1d1e21) !important;
  font-family: var(--font-lausanne), sans-serif !important;
}

/* Clear all page text contrast, default headings and subheadings */
h1, h2, h3, h4, h5, h6, .display, .heading-lg, .heading, .subheading {
  color: var(--color-ink-black, #1d1e21) !important;
  font-family: var(--font-lausanne), sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}

h1, .display {
  font-size: 72px !important;
  letter-spacing: -0.72px !important;
  line-height: 1.0 !important;
}
h2, .heading-lg {
  font-size: 48px !important;
  letter-spacing: -0.24px !important;
  line-height: 1.16 !important;
}
h3, .heading {
  font-size: 32px !important;
  line-height: 1.25 !important;
}
h4, .subheading {
  font-size: 28px !important;
  line-height: 1.28 !important;
}

/* Clean cards: 16px radius, warm bone surface, hairline ash-gray border, zero shadows */
.card, .product-card, .course-card, .category-card, .testimonial-card, .blog-card, .why-card-premium {
  background-color: var(--color-warm-bone, #fef9f3) !important;
  border: 1px solid var(--color-ash-gray, #e5e7eb) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  text-shadow: none !important;
  padding: 28px !important;
  transition: transform 0.2s ease !important;
}
.card:hover, .product-card:hover, .course-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: none !important;
}

/* Primary Filled Pill Button overrides: 9999px border-radius, Ink Black background, Bone white text, flat */
.btn-primary, .primary-btn, .button-primary, button[type="submit"], input[type="submit"] {
  background-color: var(--color-ink-black, #1d1e21) !important;
  color: var(--color-warm-bone, #fef9f3) !important;
  border-radius: 9999px !important;
  border: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  padding: 14px 20px !important;
  font-family: var(--font-lausanne), sans-serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  column-gap: 8px !important;
  transition: background-color 0.2s ease, transform 0.2s ease !important;
}
.btn-primary:hover, .primary-btn:hover, button[type="submit"]:hover {
  background-color: var(--color-true-black, #000000) !important;
  color: var(--color-warm-bone, #fef9f3) !important;
  transform: translateY(-1px) !important;
  box-shadow: none !important;
}

/* Secondary Button / Ghost links (no borders, no fill, Ink Black, underlined on hover) */
.btn-secondary, .btn-ghost, .secondary-btn, .link-btn {
  background: transparent !important;
  color: var(--color-ink-black, #1d1e21) !important;
  border: none !important;
  border-radius: 9999px !important;
  font-family: var(--font-lausanne), sans-serif !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  box-shadow: none !important;
  text-decoration: none !important;
  transition: opacity 0.2s ease !important;
}
.btn-secondary:hover, .secondary-btn:hover {
  text-decoration: underline !important;
  background: transparent !important;
}

/* Section divider override */
hr, .divider, .section-divider {
  border: 0 !important;
  border-top: 1px solid var(--color-ash-gray, #e5e7eb) !important;
  margin: 48px 0 !important;
  opacity: 1 !important;
  height: auto !important;
}

/* Remove shadows globally from all containers */
*, *::before, *::after {
  box-shadow: none !important;
  text-shadow: none !important;
}

/* ============================================================
   AUTH & CONTACT PAGES  (login / register / forgot-password / contact)
   Centralized from per-page inline <style> blocks
   ============================================================ */
.auth-page-section,
.contact-page-section {
    background-color: var(--color-butter-cream, #f9e5b1) !important;
    position: relative !important;
    padding: 100px 0 !important;
}
.unified-auth-card,
.unified-contact-card {
    border: 1px solid var(--color-stone, #d7d6d4) !important;
    border-radius: 32px !important;
    overflow: hidden !important;
    box-shadow: 0 25px 60px rgba(29, 30, 33, 0.05) !important;
    background: none !important;
}
.brand-details-panel {
    background-color: var(--color-warm-bone, #fef9f3) !important;
    border-right: 1px solid var(--color-stone, #d7d6d4) !important;
    padding: 60px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}
.panel-title {
    font-family: var(--font-lausanne), sans-serif !important;
    font-size: 38px !important;
    font-weight: 700 !important;
    letter-spacing: -1px !important;
    line-height: 1.2 !important;
    color: var(--color-ink-black, #1d1e21) !important;
}
.panel-text {
    font-family: var(--font-lausanne), sans-serif !important;
    font-size: 14.5px !important;
    line-height: 1.65 !important;
    color: rgba(29, 30, 33, 0.7) !important;
}
.benefit-icon, .info-icon {
    width: 44px !important;
    height: 44px !important;
    background-color: var(--color-butter-cream, #b39659) !important;
    color: var(--color-warm-bone, #fef9f3) !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    margin-right: 16px !important;
}
.benefit-item, .info-item {
    display: flex !important;
    align-items: center !important;
}
.benefit-title, .info-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: rgba(29, 30, 33, 0.5) !important;
    display: block !important;
    margin-bottom: 2px !important;
}
.benefit-desc, .info-value {
    font-family: var(--font-lausanne), sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--color-ink-black, #1d1e21) !important;
    text-decoration: none !important;
}
a.info-value:hover {
    color: var(--color-butter-cream, #b39659) !important;
}
.brand-mark-title {
    font-family: var(--font-lausanne), sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--color-ink-black, #1d1e21) !important;
    display: block !important;
}
.brand-mark-desc {
    font-size: 12px !important;
    color: rgba(29, 30, 33, 0.5) !important;
}
.form-panel {
    background-color: #0b0c0e !important;
    padding: 60px !important;
    color: #ffffff !important;
}
.form-title {
    font-family: var(--font-lausanne), sans-serif !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin-bottom: 6px !important;
}
.form-subtitle {
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 13.5px !important;
}
.premium-input-label {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    margin-bottom: 10px !important;
    display: block !important;
}
.premium-form-input {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 14px !important;
    color: #ffffff !important;
    padding: 14px 18px !important;
    font-size: 14.5px !important;
    width: 100% !important;
    transition: all 0.3s ease !important;
}
.premium-form-input:focus {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: var(--color-butter-cream, #b39659) !important;
    outline: none !important;
    box-shadow: 0 0 12px rgba(179, 150, 89, 0.15) !important;
}
.premium-form-input.is-invalid, .premium-form-input.error {
    border-color: #ff4d4d !important;
    box-shadow: 0 0 12px rgba(255, 77, 77, 0.15) !important;
}
.premium-error-msg, label.error, .custom-error-message {
    color: #ff4d4d !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-top: 8px !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    text-transform: none !important;
}
.forgot-password-link {
    color: rgba(255, 255, 255, 0.5) !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
    font-weight: 600 !important;
}
.forgot-password-link:hover {
    color: var(--color-butter-cream, #b39659) !important;
}
.premium-submit-btn {
    background: var(--color-butter-cream, #b39659) !important;
    color: #0b0c0e !important;
    font-family: var(--font-lausanne), sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    padding: 16px 32px !important;
    border-radius: 9999px !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    width: 100% !important;
}
.premium-submit-btn:hover {
    background: #cbb380 !important;
    transform: translateY(-2px) !important;
}
.premium-submit-btn:hover i { transform: translateX(4px) !important; }
.premium-submit-btn i { transition: transform 0.2s ease !important; }
.register-redirect-link, .login-redirect-link {
    color: var(--color-butter-cream, #b39659) !important;
    transition: color 0.2s ease !important;
}
.register-redirect-link:hover, .login-redirect-link:hover {
    color: #cbb380 !important;
}
.unified-contact-card .trust-indicator {
    font-size: 12px !important;
    color: rgba(255, 255, 255, 0.4) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
}
.unified-contact-card .trust-indicator i {
    color: var(--color-butter-cream, #b39659) !important;
}
@media (max-width: 991px) {
    .brand-details-panel {
        border-right: none !important;
        border-bottom: 1px solid var(--color-stone, #d7d6d4) !important;
        padding: 40px !important;
    }
    .form-panel { padding: 40px !important; }
}

/* ============================================================
   ORDER SUCCESS PAGE  (centralized)
   ============================================================ */
    /* ============================================================
       PREMIUM REDESIGNED ORDER STATUS PAGE — SUCCESS
       ============================================================ */
    .order-status {
        background-color: var(--color-butter-cream, #f9e5b1) !important;
        position: relative !important;
        padding: 100px 0 !important;
        overflow: hidden !important;
    }

    /* Flat editorial system — suppress decorative glow blobs */
    .order-status__glow { display: none !important; }

    .status-card {
        position: relative !important;
        background-color: #ffffff !important;
        border: 1px solid var(--color-stone, #d7d6d4) !important;
        border-radius: 32px !important;
        box-shadow: 0 25px 60px rgba(29, 30, 33, 0.06) !important;
        padding: 64px 56px !important;
        overflow: hidden !important;
    }

    /* Top accent bar */
    .status-card__accent {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 5px !important;
    }
    .status-card__accent--success { background: #1f7a52 !important; }

    /* Status icon */
    .status-icon {
        width: 88px !important;
        height: 88px !important;
        border-radius: 9999px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 34px !important;
        margin-bottom: 28px !important;
    }
    .status-icon--success {
        background: #e7f4ee !important;
        color: #1f7a52 !important;
        border: 1px solid rgba(31, 122, 82, 0.2) !important;
    }

    .status-title {
        font-family: var(--font-lausanne), sans-serif !important;
        font-size: 34px !important;
        font-weight: 700 !important;
        letter-spacing: -1px !important;
        line-height: 1.2 !important;
        color: var(--color-ink-black, #1d1e21) !important;
        margin-bottom: 12px !important;
    }
    .status-text {
        font-family: var(--font-lausanne), sans-serif !important;
        font-size: 15.5px !important;
        line-height: 1.65 !important;
        color: rgba(29, 30, 33, 0.65) !important;
        max-width: 520px !important;
        margin: 0 auto !important;
    }

    /* Order facts grid */
    .status-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
        margin-top: 48px !important;
    }
    .status-fact {
        background: rgba(29, 30, 33, 0.02) !important;
        border: 1px solid var(--color-stone, #d7d6d4) !important;
        border-radius: 16px !important;
        padding: 20px 24px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }
    .status-fact__label {
        font-family: var(--font-lausanne), sans-serif !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
        color: rgba(29, 30, 33, 0.45) !important;
    }
    .status-fact__value {
        font-family: var(--font-lausanne), sans-serif !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        color: var(--color-ink-black, #1d1e21) !important;
        word-break: break-word !important;
    }
    .status-fact--accent {
        align-items: flex-start !important;
    }

    /* Payment status pill */
    .status-pill {
        display: inline-flex !important;
        align-items: center !important;
        font-family: var(--font-lausanne), sans-serif !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        padding: 6px 14px !important;
        border-radius: 9999px !important;
    }
    .status-pill--success {
        background: #e7f4ee !important;
        color: #1f7a52 !important;
    }

    /* Action buttons */
    .status-actions {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 12px !important;
        margin-top: 48px !important;
    }
    .status-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 9px !important;
        font-family: var(--font-lausanne), sans-serif !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        letter-spacing: 0.3px !important;
        padding: 14px 26px !important;
        border-radius: 9999px !important;
        border: 1px solid transparent !important;
        text-decoration: none !important;
        cursor: pointer !important;
        transition: all 0.25s ease !important;
    }
    .status-btn--primary {
        background: var(--color-ink-black, #1d1e21) !important;
        color: var(--color-warm-bone, #fef9f3) !important;
    }
    .status-btn--primary:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 10px 24px rgba(29, 30, 33, 0.18) !important;
        color: #ffffff !important;
    }
    .status-btn--outline {
        background: transparent !important;
        border-color: var(--color-stone, #d7d6d4) !important;
        color: var(--color-ink-black, #1d1e21) !important;
    }
    .status-btn--outline:hover {
        border-color: var(--color-ink-black, #1d1e21) !important;
        background: rgba(29, 30, 33, 0.03) !important;
    }
    .status-btn--ghost {
        background: transparent !important;
        color: rgba(29, 30, 33, 0.6) !important;
    }
    .status-btn--ghost:hover {
        color: var(--color-ink-black, #1d1e21) !important;
    }

    /* Footer note */
    .status-note {
        margin-top: 32px !important;
        padding-top: 24px !important;
        border-top: 1px solid var(--color-stone, #d7d6d4) !important;
        text-align: center !important;
    }
    .status-note p {
        font-family: var(--font-lausanne), sans-serif !important;
        font-size: 13.5px !important;
        color: rgba(29, 30, 33, 0.6) !important;
        margin: 0 !important;
    }
    .status-note a {
        color: #b39659 !important;
        font-weight: 600 !important;
        text-decoration: none !important;
    }
    .status-note a:hover { color: #cbb380 !important; }

    @media (max-width: 767px) {
        .order-status { padding: 60px 0 !important; }
        .status-card { padding: 40px 24px !important; }
        .status-title { font-size: 28px !important; }
        .status-grid { grid-template-columns: 1fr !important; }
        .status-actions { flex-direction: column !important; }
        .status-btn { width: 100% !important; }
    }

/* ============================================================
   ORDER FAILED PAGE  (centralized)
   ============================================================ */
    /* ============================================================
       PREMIUM REDESIGNED ORDER STATUS PAGE — FAILED
       ============================================================ */
    .order-status {
        background-color: var(--color-butter-cream, #f9e5b1) !important;
        position: relative !important;
        padding: 100px 0 !important;
        overflow: hidden !important;
    }

    /* Flat editorial system — suppress decorative glow blobs */
    .order-status__glow { display: none !important; }

    .status-card {
        position: relative !important;
        background-color: #ffffff !important;
        border: 1px solid var(--color-stone, #d7d6d4) !important;
        border-radius: 32px !important;
        box-shadow: 0 25px 60px rgba(29, 30, 33, 0.06) !important;
        padding: 64px 56px !important;
        overflow: hidden !important;
    }

    /* Top accent bar */
    .status-card__accent {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 5px !important;
    }
    .status-card__accent--failed { background: #c0392b !important; }

    /* Status icon */
    .status-icon {
        width: 88px !important;
        height: 88px !important;
        border-radius: 9999px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 34px !important;
        margin-bottom: 28px !important;
    }
    .status-icon--error {
        background: #fdece9 !important;
        color: #c0392b !important;
        border: 1px solid rgba(192, 57, 43, 0.2) !important;
    }

    .status-title {
        font-family: var(--font-lausanne), sans-serif !important;
        font-size: 34px !important;
        font-weight: 700 !important;
        letter-spacing: -1px !important;
        line-height: 1.2 !important;
        color: var(--color-ink-black, #1d1e21) !important;
        margin-bottom: 12px !important;
    }
    .status-text {
        font-family: var(--font-lausanne), sans-serif !important;
        font-size: 15.5px !important;
        line-height: 1.65 !important;
        color: rgba(29, 30, 33, 0.65) !important;
        max-width: 520px !important;
        margin: 0 auto !important;
    }

    /* "What you can do" help block */
    .status-help {
        background: rgba(29, 30, 33, 0.02) !important;
        border: 1px solid var(--color-stone, #d7d6d4) !important;
        border-radius: 16px !important;
        padding: 28px 32px !important;
        margin-top: 44px !important;
    }
    .status-help__title {
        font-family: var(--font-lausanne), sans-serif !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
        color: var(--color-ink-black, #1d1e21) !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin: 0 0 18px 0 !important;
    }
    .status-help__title i { color: #b39659 !important; }
    .status-help__list {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
    }
    .status-help__list li {
        display: flex !important;
        align-items: flex-start !important;
        gap: 12px !important;
        font-family: var(--font-lausanne), sans-serif !important;
        font-size: 14.5px !important;
        line-height: 1.5 !important;
        color: rgba(29, 30, 33, 0.75) !important;
    }
    .status-help__list li i {
        flex-shrink: 0 !important;
        width: 20px !important;
        height: 20px !important;
        margin-top: 1px !important;
        border-radius: 9999px !important;
        background: #e7f4ee !important;
        color: #1f7a52 !important;
        font-size: 9px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Action buttons */
    .status-actions {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 12px !important;
        margin-top: 40px !important;
    }
    .status-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 9px !important;
        font-family: var(--font-lausanne), sans-serif !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        letter-spacing: 0.3px !important;
        padding: 14px 26px !important;
        border-radius: 9999px !important;
        border: 1px solid transparent !important;
        text-decoration: none !important;
        cursor: pointer !important;
        transition: all 0.25s ease !important;
    }
    .status-btn--primary {
        background: var(--color-ink-black, #1d1e21) !important;
        color: var(--color-warm-bone, #fef9f3) !important;
    }
    .status-btn--primary:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 10px 24px rgba(29, 30, 33, 0.18) !important;
        color: #ffffff !important;
    }

    /* Assistance note */
    .status-note {
        margin-top: 32px !important;
        padding-top: 24px !important;
        border-top: 1px solid var(--color-stone, #d7d6d4) !important;
        text-align: center !important;
    }
    .status-note--left { text-align: center !important; }
    .status-note__title {
        font-family: var(--font-lausanne), sans-serif !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
        color: rgba(29, 30, 33, 0.5) !important;
        margin: 0 0 8px 0 !important;
    }
    .status-note p {
        font-family: var(--font-lausanne), sans-serif !important;
        font-size: 13.5px !important;
        line-height: 1.6 !important;
        color: rgba(29, 30, 33, 0.6) !important;
        margin: 0 !important;
    }
    .status-note a {
        color: #b39659 !important;
        font-weight: 600 !important;
        text-decoration: none !important;
    }
    .status-note a:hover { color: #cbb380 !important; }

    @media (max-width: 767px) {
        .order-status { padding: 60px 0 !important; }
        .status-card { padding: 40px 24px !important; }
        .status-title { font-size: 28px !important; }
        .status-help { padding: 24px !important; }
        .status-actions { flex-direction: column !important; }
        .status-btn { width: 100% !important; }
    }

/* ============================================================
   COURSE / PRODUCT DETAIL PAGE  (centralized)
   ============================================================ */
    /* ============================================================
       COURSE DETAIL — FRESH EDITORIAL REDESIGN
       ============================================================ */
    .page-product_detail .course-detail {
        background-color: var(--color-butter-cream, #f9e5b1) !important;
        padding: 64px 16px 96px !important;
        position: relative !important;
        overflow: hidden !important;
    }
    .course-detail__glow { display: none !important; }
    .course-detail > .container { padding-left: 24px !important; padding-right: 24px !important; }

    /* Entrance reveal */
    .cd-reveal { animation: cdUp 0.6s cubic-bezier(0.16,0.84,0.44,1) both !important; }
    .cd-reveal--delay { animation-delay: 0.12s !important; }
    @keyframes cdUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

    /* -------- Right column: header -------- */
    .course-eyebrow {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        font-family: var(--font-lausanne), sans-serif !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 2px !important;
        color: #8a7038 !important;
        background: rgba(179,150,89,0.12) !important;
        border: 1px solid rgba(179,150,89,0.3) !important;
        padding: 8px 16px !important;
        border-radius: 9999px !important;
        margin-bottom: 20px !important;
    }
    .course-title {
        font-family: var(--font-lausanne), sans-serif !important;
        font-size: 44px !important;
        font-weight: 700 !important;
        letter-spacing: -1.5px !important;
        line-height: 1.05 !important;
        color: var(--color-ink-black, #1d1e21) !important;
        margin: 0 0 16px !important;
    }
    .course-lead {
        font-family: var(--font-lausanne), sans-serif !important;
        font-size: 16px !important;
        line-height: 1.65 !important;
        color: rgba(29,30,33,0.62) !important;
        margin: 0 0 36px !important;
        max-width: 560px !important;
    }

    /* -------- Level section -------- */
    .level-section__head {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        margin-bottom: 18px !important;
    }
    .level-section__title {
        font-family: var(--font-lausanne), sans-serif !important;
        font-size: 20px !important;
        font-weight: 700 !important;
        letter-spacing: -0.4px !important;
        color: var(--color-ink-black, #1d1e21) !important;
        margin: 0 !important;
    }
    .level-section__count {
        font-family: var(--font-lausanne), sans-serif !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
        color: rgba(29,30,33,0.45) !important;
        background: rgba(29,30,33,0.04) !important;
        border: 1px solid var(--color-stone, #d7d6d4) !important;
        padding: 6px 12px !important;
        border-radius: 9999px !important;
    }

    /* Level pills */
    .level-pills {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        border: 0 !important;
        margin: 0 0 24px !important;
        padding: 0 !important;
    }
    .level-pills .nav-item { margin: 0 !important; }
    .level-pill {
        font-family: var(--font-lausanne), sans-serif !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        color: var(--color-ink-black, #1d1e21) !important;
        background: #ffffff !important;
        border: 1px solid var(--color-stone, #d7d6d4) !important;
        border-radius: 9999px !important;
        padding: 11px 22px !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
    }
    .level-pill:hover { border-color: #1d1e21 !important; }
    .level-pill.active {
        background: var(--color-ink-black, #1d1e21) !important;
        border-color: var(--color-ink-black, #1d1e21) !important;
        color: #ffffff !important;
    }

    /* Tab panes */
    .level-section .tab-pane { display: none !important; opacity: 0 !important; }
    .level-section .tab-pane.active { display: block !important; opacity: 1 !important; animation: cdFade 0.35s ease !important; }
    @keyframes cdFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

    /* Level card */
    .level-card {
        background: #ffffff !important;
        border: 1px solid var(--color-stone, #d7d6d4) !important;
        border-radius: 22px !important;
        padding: 32px !important;
    }
    .level-card__tag {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        font-family: var(--font-lausanne), sans-serif !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        color: #8a7038 !important;
        background: rgba(179,150,89,0.12) !important;
        border: 1px solid rgba(179,150,89,0.3) !important;
        padding: 7px 14px !important;
        border-radius: 9999px !important;
        margin-bottom: 24px !important;
    }
    .level-card__tag strong { color: var(--color-ink-black, #1d1e21) !important; font-weight: 700 !important; }

    .level-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 16px !important;
        margin-bottom: 28px !important;
    }
    .level-info {
        background: rgba(29,30,33,0.02) !important;
        border: 1px solid var(--color-stone, #d7d6d4) !important;
        border-radius: 14px !important;
        padding: 18px 20px !important;
    }
    .level-info__label {
        display: block !important;
        font-family: var(--font-lausanne), sans-serif !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
        color: rgba(29,30,33,0.45) !important;
        margin-bottom: 8px !important;
    }
    .level-info__text {
        font-family: var(--font-lausanne), sans-serif !important;
        font-size: 14px !important;
        line-height: 1.55 !important;
        color: rgba(29,30,33,0.75) !important;
        margin: 0 !important;
    }

    /* What you'll learn */
    .level-learn { margin-bottom: 28px !important; }
    .level-learn__title {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        font-family: var(--font-lausanne), sans-serif !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        color: var(--color-ink-black, #1d1e21) !important;
        margin: 0 0 16px !important;
    }
    .level-learn__title i { color: #1f7a52 !important; }
    .level-learn__list {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }
    .level-learn__list li {
        display: flex !important;
        align-items: flex-start !important;
        gap: 10px !important;
        font-family: var(--font-lausanne), sans-serif !important;
        font-size: 14px !important;
        line-height: 1.5 !important;
        color: rgba(29,30,33,0.75) !important;
    }
    .level-learn__list li i {
        flex-shrink: 0 !important;
        width: 18px !important;
        height: 18px !important;
        margin-top: 2px !important;
        border-radius: 9999px !important;
        background: #e7f4ee !important;
        color: #1f7a52 !important;
        font-size: 8px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Enroll footer */
    .level-enroll {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 16px !important;
        flex-wrap: wrap !important;
        padding-top: 24px !important;
        border-top: 1px solid var(--color-stone, #d7d6d4) !important;
    }
    .level-price { display: flex !important; flex-direction: column !important; line-height: 1 !important; }
    .level-price__label {
        font-family: var(--font-lausanne), sans-serif !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
        color: rgba(29,30,33,0.45) !important;
        margin-bottom: 6px !important;
    }
    .level-price__value {
        font-family: var(--font-lausanne), sans-serif !important;
        font-size: 28px !important;
        font-weight: 700 !important;
        letter-spacing: -1px !important;
        color: var(--color-ink-black, #1d1e21) !important;
    }
    .level-price__value small { font-size: 12px !important; font-weight: 600 !important; color: #b39659 !important; text-transform: uppercase !important; }
    .enroll-btn {
        display: inline-flex !important;
        align-items: center !important;
        gap: 9px !important;
        font-family: var(--font-lausanne), sans-serif !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        letter-spacing: 0.3px !important;
        color: #ffffff !important;
        background: var(--color-ink-black, #1d1e21) !important;
        border: none !important;
        border-radius: 9999px !important;
        padding: 15px 30px !important;
        cursor: pointer !important;
        transition: all 0.25s ease !important;
    }
    .enroll-btn:hover { background: #b39659 !important; color: #1d1e21 !important; transform: translateY(-2px) !important; }
    .enroll-btn i { transition: transform 0.2s ease !important; }
    .enroll-btn:hover i { transform: translateX(4px) !important; }

    /* -------- Left aside -------- */
    .course-aside { position: sticky !important; top: 24px !important; }
    .course-aside__media {
        position: relative !important;
        border-radius: 24px !important;
        overflow: hidden !important;
        border: 1px solid var(--color-stone, #d7d6d4) !important;
        margin-bottom: 20px !important;
        aspect-ratio: 4 / 3 !important;
        background: #f2f0ec !important;
    }
    .course-aside__media img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }
    .course-aside__badge {
        position: absolute !important;
        top: 16px !important;
        left: 16px !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 7px !important;
        font-family: var(--font-lausanne), sans-serif !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
        color: #1d1e21 !important;
        background: rgba(255,255,255,0.92) !important;
        backdrop-filter: blur(8px) !important;
        padding: 8px 14px !important;
        border-radius: 9999px !important;
        box-shadow: 0 8px 24px rgba(15,16,18,0.15) !important;
    }
    .course-aside__card {
        background: #ffffff !important;
        border: 1px solid var(--color-stone, #d7d6d4) !important;
        border-radius: 22px !important;
        padding: 28px !important;
    }
    .course-aside__title {
        font-family: var(--font-lausanne), sans-serif !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        letter-spacing: -0.4px !important;
        color: var(--color-ink-black, #1d1e21) !important;
        margin: 0 0 12px !important;
    }
    .course-aside__text {
        font-family: var(--font-lausanne), sans-serif !important;
        font-size: 14px !important;
        line-height: 1.65 !important;
        color: rgba(29,30,33,0.62) !important;
        margin: 0 0 22px !important;
    }
    .course-aside__facts { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; gap: 14px !important; }
    .course-aside__facts li {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        font-family: var(--font-lausanne), sans-serif !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        color: var(--color-ink-black, #1d1e21) !important;
    }
    .fact-ico {
        flex-shrink: 0 !important;
        width: 38px !important;
        height: 38px !important;
        border-radius: 11px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(179,150,89,0.14) !important;
        color: #b39659 !important;
        font-size: 15px !important;
    }

    @media (max-width: 991px) {
        .course-aside { position: static !important; margin-bottom: 8px !important; }
        .course-title { font-size: 34px !important; }
    }
    @media (max-width: 575px) {
        .course-detail { padding: 48px 12px 64px !important; }
        .level-card { padding: 24px !important; }
        .level-grid { grid-template-columns: 1fr !important; }
        .level-learn__list { grid-template-columns: 1fr !important; }
        .course-title { font-size: 28px !important; }
    }

/* ============================================================
   CART PAGE  (centralized)
   ============================================================ */
    /* ============================================================
       CART — FRESH EDITORIAL REDESIGN
       ============================================================ */
    .page-cart .cart-redesign {
        background-color: var(--color-butter-cream, #f9e5b1) !important;
        padding: 64px 16px 96px !important;
        position: relative !important;
        overflow: hidden !important;
    }
    .cart-pattern, .cart-glow { display: none !important; }
    .cart-redesign > .container { padding-left: 24px !important; padding-right: 24px !important; }

    /* -------- Items column header -------- */
    .cart-section-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        margin-bottom: 24px !important;
    }
    .cart-section-title {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        font-family: var(--font-lausanne), sans-serif !important;
        font-size: 22px !important;
        font-weight: 700 !important;
        letter-spacing: -0.5px !important;
        color: var(--color-ink-black, #1d1e21) !important;
        margin: 0 !important;
    }
    .cart-section-title i { color: #b39659 !important; font-size: 18px !important; }
    .cart-section-count {
        font-family: var(--font-lausanne), sans-serif !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        color: #ffffff !important;
        background: var(--color-ink-black, #1d1e21) !important;
        min-width: 26px !important;
        height: 26px !important;
        padding: 0 9px !important;
        border-radius: 9999px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* -------- Item cards -------- */
    .cart-items-section {
        background: #ffffff !important;
        border: 1px solid var(--color-stone, #d7d6d4) !important;
        border-radius: 24px !important;
        padding: 30px 32px !important;
    }
    .cart-items-section .cart-empty-state { border: 0 !important; padding: 32px 12px !important; }
    .cart-items-list { display: flex !important; flex-direction: column !important; gap: 0 !important; }
    .cart-item-card {
        display: flex !important;
        align-items: center !important;
        gap: 18px !important;
        background: transparent !important;
        border: 0 !important;
        border-bottom: 1px solid var(--color-stone, #d7d6d4) !important;
        border-radius: 0 !important;
        padding: 20px 6px !important;
        transition: background 0.2s ease !important;
    }
    .cart-item-card:first-child { padding-top: 4px !important; }
    .cart-items-list .cart-item-card:last-child { border-bottom: 0 !important; padding-bottom: 4px !important; }
    .cart-item-card:hover { background: rgba(29,30,33,0.02) !important; }
    .cart-item-card__media {
        position: relative !important;
        width: 66px !important;
        height: 66px !important;
        flex-shrink: 0 !important;
        border-radius: 14px !important;
        overflow: hidden !important;
        background: #f2f0ec !important;
    }
    .cart-item-card__media img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }
    .cart-item-card__badge { display: none !important; }
    .cart-item-card__credits-visual {
        width: 66px !important;
        height: 66px !important;
        flex-shrink: 0 !important;
        border-radius: 14px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;
        background: rgba(179,150,89,0.12) !important;
        border: 1px solid rgba(179,150,89,0.3) !important;
    }
    .cart-item-card__credits-visual i { color: #b39659 !important; font-size: 18px !important; margin-bottom: 2px !important; }
    .cart-item-card__credits-amount { font-family: var(--font-lausanne), sans-serif !important; font-size: 15px !important; font-weight: 700 !important; color: var(--color-ink-black, #1d1e21) !important; }
    .cart-item-card__credits-unit { font-family: var(--font-lausanne), sans-serif !important; font-size: 9px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; color: #8a7038 !important; }

    .cart-item-card__details { flex: 1 1 auto !important; min-width: 0 !important; }
    .cart-item-card__title {
        display: block !important;
        font-family: var(--font-lausanne), sans-serif !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        letter-spacing: -0.3px !important;
        color: var(--color-ink-black, #1d1e21) !important;
        text-decoration: none !important;
        transition: color 0.2s ease !important;
    }
    .cart-item-card__title:hover { color: #b39659 !important; }
    .cart-item-card__meta { margin-top: 9px !important; }
    .cart-item-card__type {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        font-family: var(--font-lausanne), sans-serif !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        color: rgba(29,30,33,0.55) !important;
        background: rgba(29,30,33,0.04) !important;
        padding: 5px 11px !important;
        border-radius: 9999px !important;
    }
    .cart-item-card__type i { color: #b39659 !important; }

    .cart-item-card__price { display: flex !important; flex-direction: column !important; align-items: flex-end !important; flex-shrink: 0 !important; text-align: right !important; }
    .cart-item-card__price-label { font-family: var(--font-lausanne), sans-serif !important; font-size: 10px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 1px !important; color: rgba(29,30,33,0.4) !important; margin-bottom: 5px !important; }
    .price-creds { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-family: var(--font-lausanne), sans-serif !important; font-size: 17px !important; font-weight: 700 !important; color: var(--color-ink-black, #1d1e21) !important; }
    .price-creds i { color: #b39659 !important; font-size: 14px !important; }
    .price-unit { font-size: 11px !important; font-weight: 600 !important; color: #b39659 !important; text-transform: uppercase !important; }
    .price-main { font-family: var(--font-lausanne), sans-serif !important; font-size: 18px !important; font-weight: 700 !important; color: var(--color-ink-black, #1d1e21) !important; }

    .cart-item-card__action { flex-shrink: 0 !important; }
    .cart-item-card__remove {
        width: 40px !important;
        height: 40px !important;
        border-radius: 11px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(29,30,33,0.03) !important;
        border: 1px solid var(--color-stone, #d7d6d4) !important;
        color: rgba(29,30,33,0.5) !important;
        transition: all 0.2s ease !important;
    }
    .cart-item-card__remove:hover { background: #fdece9 !important; border-color: #f2c4bd !important; color: #c0392b !important; }

    .cart-continue-link {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin-top: 26px !important;
        font-family: var(--font-lausanne), sans-serif !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        color: var(--color-ink-black, #1d1e21) !important;
        text-decoration: none !important;
        transition: gap 0.2s ease, color 0.2s ease !important;
    }
    .cart-continue-link:hover { color: #b39659 !important; gap: 12px !important; }

    /* -------- Empty state -------- */
    .cart-empty-state {
        text-align: center !important;
        padding: 64px 24px !important;
        background: #ffffff !important;
        border: 1px solid var(--color-stone, #d7d6d4) !important;
        border-radius: 22px !important;
    }
    .cart-empty-state__icon-wrap {
        width: 76px !important;
        height: 76px !important;
        border-radius: 9999px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(179,150,89,0.14) !important;
        color: #b39659 !important;
        font-size: 28px !important;
        margin: 0 auto 22px !important;
    }
    .cart-empty-state__title {
        font-family: var(--font-lausanne), sans-serif !important;
        font-size: 20px !important;
        font-weight: 700 !important;
        color: var(--color-ink-black, #1d1e21) !important;
        margin: 0 0 24px !important;
    }

    /* -------- Buttons -------- */
    .cart-action-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 9px !important;
        font-family: var(--font-lausanne), sans-serif !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        letter-spacing: 0.3px !important;
        color: #ffffff !important;
        background: var(--color-ink-black, #1d1e21) !important;
        border: none !important;
        border-radius: 9999px !important;
        padding: 15px 30px !important;
        text-decoration: none !important;
        cursor: pointer !important;
        transition: all 0.25s ease !important;
    }
    .cart-action-btn:hover { background: #b39659 !important; color: #1d1e21 !important; transform: translateY(-2px) !important; }
    .cart-action-btn i { transition: transform 0.2s ease !important; }
    .cart-action-btn--checkout:hover i { transform: translateX(4px) !important; }
    .cart-action-btn--block { width: 100% !important; }

    /* -------- Sidebar -------- */
    .cart-sidebar {
        position: sticky !important;
        top: 24px !important;
        background: #ffffff !important;
        border: 1px solid var(--color-stone, #d7d6d4) !important;
        border-radius: 22px !important;
        padding: 28px !important;
    }
    .cart-sidebar__header { margin-bottom: 22px !important; padding-bottom: 20px !important; border-bottom: 1px solid var(--color-stone, #d7d6d4) !important; }
    .cart-sidebar__title {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        font-family: var(--font-lausanne), sans-serif !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        letter-spacing: -0.3px !important;
        color: var(--color-ink-black, #1d1e21) !important;
        margin: 0 !important;
    }
    .cart-sidebar__title i { color: #b39659 !important; font-size: 16px !important; }
    .cart-sidebar__rows { margin-bottom: 22px !important; }
    .cart-sidebar__row { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; }
    .cart-sidebar__row-label { font-family: var(--font-lausanne), sans-serif !important; font-size: 15px !important; font-weight: 600 !important; color: var(--color-ink-black, #1d1e21) !important; }
    .cart-sidebar__row-value {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        font-family: var(--font-lausanne), sans-serif !important;
        font-size: 26px !important;
        font-weight: 700 !important;
        letter-spacing: -1px !important;
        color: var(--color-ink-black, #1d1e21) !important;
    }
    .cart-sidebar__row-value i { color: #b39659 !important; font-size: 20px !important; }
    .total-unit { font-size: 12px !important; font-weight: 600 !important; color: #b39659 !important; text-transform: uppercase !important; }

    .cart-sidebar__trust { list-style: none !important; margin: 24px 0 0 !important; padding: 22px 0 0 !important; border-top: 1px solid var(--color-stone, #d7d6d4) !important; display: flex !important; flex-direction: column !important; gap: 16px !important; }
    .cart-sidebar__trust li { display: flex !important; align-items: center !important; gap: 12px !important; font-family: var(--font-lausanne), sans-serif !important; font-size: 13px !important; font-weight: 600 !important; color: var(--color-ink-black, #1d1e21) !important; }
    .cart-sidebar__trust-icon-wrap { flex-shrink: 0 !important; width: 36px !important; height: 36px !important; border-radius: 10px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 14px !important; }
    .cart-sidebar__trust-icon-wrap--security { background: #e7f4ee !important; color: #1f7a52 !important; }
    .cart-sidebar__trust-icon-wrap--access { background: rgba(179,150,89,0.14) !important; color: #b39659 !important; }

    .cart-sidebar__pay { margin-top: 24px !important; padding-top: 20px !important; border-top: 1px solid var(--color-stone, #d7d6d4) !important; text-align: center !important; }
    .cart-sidebar__pay img { max-width: 100% !important; height: auto !important; opacity: 0.85 !important; }

    .cart-sidebar__empty { text-align: center !important; padding: 28px 12px !important; }
    .cart-sidebar__empty i { display: block !important; font-size: 28px !important; color: #b39659 !important; margin-bottom: 12px !important; }
    .cart-sidebar__empty p { font-family: var(--font-lausanne), sans-serif !important; font-size: 14px !important; color: rgba(29,30,33,0.55) !important; margin: 0 !important; }

    /* ----- Dark premium summary panel ----- */
    .cart-sidebar { background: #0b0c0e !important; border-color: #0b0c0e !important; border-radius: 24px !important; }
    .cart-sidebar__header { border-bottom-color: rgba(255,255,255,0.12) !important; }
    .cart-sidebar__title { color: #ffffff !important; }
    .cart-sidebar__row-label { color: rgba(255,255,255,0.7) !important; }
    .cart-sidebar__row-value { color: #ffffff !important; }
    .cart-sidebar__trust { border-top-color: rgba(255,255,255,0.12) !important; }
    .cart-sidebar__trust li { color: rgba(255,255,255,0.85) !important; }
    .cart-sidebar__pay { border-top-color: rgba(255,255,255,0.12) !important; }
    .cart-sidebar__pay img { filter: brightness(0) invert(1) !important; opacity: 0.7 !important; }
    .cart-sidebar__empty p { color: rgba(255,255,255,0.6) !important; }
    .cart-sidebar .cart-action-btn--checkout { background: #b39659 !important; color: #1d1e21 !important; }
    .cart-sidebar .cart-action-btn--checkout:hover { background: #cbb380 !important; color: #1d1e21 !important; transform: translateY(-2px) !important; }

    @media (max-width: 575px) {
        .cart-items-section { padding: 22px 20px !important; }
        .cart-sidebar { padding: 24px 22px !important; }
    }

    @media (max-width: 991px) {
        .cart-sidebar { position: static !important; margin-top: 8px !important; }
    }
    @media (max-width: 575px) {
        .cart-redesign { padding: 48px 12px 64px !important; }
        .cart-item-card { flex-wrap: wrap !important; gap: 14px !important; }
        .cart-item-card__price { align-items: flex-start !important; text-align: left !important; }
        .cart-item-card__action { margin-left: auto !important; }
    }

/* ============================================================
   COURSE CART PAGE  (centralized)
   ============================================================ */
    /* ============================================================
       COURSE CART — FRESH EDITORIAL REDESIGN
       ============================================================ */
    .page-coursecart .ccart-redesign {
        background-color: var(--color-butter-cream, #f9e5b1) !important;
        padding: 56px 16px 96px !important;
        position: relative !important;
        overflow: hidden !important;
    }
    .ccart-pattern, .ccart-glow { display: none !important; }
    .ccart-redesign > .container { padding-left: 24px !important; padding-right: 24px !important; }

    /* -------- Credits balance hero -------- */
    .ccart-balance-card {
        display: flex !important; align-items: center !important; justify-content: space-between !important;
        gap: 20px !important; flex-wrap: wrap !important;
        background: #0b0c0e !important; border-radius: 22px !important; padding: 24px 28px !important; margin-bottom: 24px !important;
    }
    .ccart-balance-card__info { display: flex !important; align-items: center !important; gap: 18px !important; }
    .ccart-balance-card__icon-wrap { width: 56px !important; height: 56px !important; border-radius: 16px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: rgba(179,150,89,0.16) !important; color: #e6c98a !important; font-size: 24px !important; }
    .ccart-balance-card__text { display: flex !important; flex-direction: column !important; }
    .ccart-balance-card__label { font-family: var(--font-lausanne), sans-serif !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 1px !important; color: rgba(255,255,255,0.5) !important; margin-bottom: 5px !important; }
    .ccart-balance-card__value { font-family: var(--font-lausanne), sans-serif !important; font-size: 30px !important; font-weight: 700 !important; letter-spacing: -1px !important; line-height: 1 !important; color: #ffffff !important; }
    .ccart-balance-card__currency { font-size: 13px !important; font-weight: 600 !important; color: #e6c98a !important; text-transform: uppercase !important; }
    .ccart-btn-topup { display: inline-flex !important; align-items: center !important; gap: 8px !important; font-family: var(--font-lausanne), sans-serif !important; font-size: 13px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; color: #1d1e21 !important; background: #b39659 !important; border-radius: 9999px !important; padding: 12px 22px !important; text-decoration: none !important; transition: all 0.2s ease !important; }
    .ccart-btn-topup:hover { background: #cbb380 !important; transform: translateY(-1px) !important; }

    /* -------- Items panel (white) -------- */
    .ccart-items-section { background: #ffffff !important; border: 1px solid var(--color-stone, #d7d6d4) !important; border-radius: 24px !important; padding: 30px 32px !important; }
    .ccart-section-header { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; margin-bottom: 20px !important; }
    .ccart-section-title { display: flex !important; align-items: center !important; gap: 10px !important; font-family: var(--font-lausanne), sans-serif !important; font-size: 20px !important; font-weight: 700 !important; letter-spacing: -0.5px !important; color: var(--color-ink-black, #1d1e21) !important; margin: 0 !important; }
    .ccart-section-title i { color: #b39659 !important; font-size: 17px !important; }
    .ccart-section-count { font-family: var(--font-lausanne), sans-serif !important; font-size: 12px !important; font-weight: 700 !important; color: #ffffff !important; background: var(--color-ink-black, #1d1e21) !important; min-width: 26px !important; height: 26px !important; padding: 0 9px !important; border-radius: 9999px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; }

    .ccart-items-list { display: flex !important; flex-direction: column !important; }
    .ccart-item-card { display: flex !important; align-items: center !important; gap: 18px !important; padding: 20px 6px !important; border-bottom: 1px solid var(--color-stone, #d7d6d4) !important; transition: background 0.2s ease !important; }
    .ccart-item-card:first-child { padding-top: 4px !important; }
    .ccart-items-list .ccart-item-card:last-child { border-bottom: 0 !important; padding-bottom: 4px !important; }
    .ccart-item-card:hover { background: rgba(29,30,33,0.02) !important; }
    .ccart-item-card__media { position: relative !important; width: 66px !important; height: 66px !important; flex-shrink: 0 !important; border-radius: 14px !important; overflow: hidden !important; background: #f2f0ec !important; }
    .ccart-item-card__media img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }
    .ccart-item-card__badge { display: none !important; }
    .ccart-item-card__credits-visual { width: 66px !important; height: 66px !important; flex-shrink: 0 !important; border-radius: 14px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 1px !important; background: rgba(179,150,89,0.12) !important; border: 1px solid rgba(179,150,89,0.3) !important; }
    .ccart-item-card__credits-visual i { color: #b39659 !important; font-size: 16px !important; }
    .ccart-item-card__credits-amount { font-family: var(--font-lausanne), sans-serif !important; font-size: 13px !important; font-weight: 700 !important; color: var(--color-ink-black, #1d1e21) !important; }
    .ccart-item-card__credits-unit { font-size: 8px !important; font-weight: 600 !important; text-transform: uppercase !important; color: #8a7038 !important; }
    .ccart-item-card__details { flex: 1 1 auto !important; min-width: 0 !important; }
    .ccart-item-card__title { display: block !important; font-family: var(--font-lausanne), sans-serif !important; font-size: 16px !important; font-weight: 700 !important; letter-spacing: -0.3px !important; color: var(--color-ink-black, #1d1e21) !important; text-decoration: none !important; transition: color 0.2s ease !important; }
    .ccart-item-card__title:hover { color: #b39659 !important; }
    .ccart-item-card__meta { margin-top: 9px !important; display: flex !important; align-items: center !important; gap: 8px !important; flex-wrap: wrap !important; }
    .ccart-item-card__type { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-family: var(--font-lausanne), sans-serif !important; font-size: 11px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; color: rgba(29,30,33,0.55) !important; background: rgba(29,30,33,0.04) !important; padding: 5px 11px !important; border-radius: 9999px !important; }
    .ccart-item-card__type i { color: #b39659 !important; }
    .ccart-item-card__level { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-family: var(--font-lausanne), sans-serif !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; color: #8a7038 !important; background: rgba(179,150,89,0.14) !important; border: 1px solid rgba(179,150,89,0.3) !important; padding: 5px 11px !important; border-radius: 9999px !important; }
    .ccart-item-card__level i { color: #b39659 !important; }
    .ccart-item-card__cost { display: flex !important; flex-direction: column !important; align-items: flex-end !important; flex-shrink: 0 !important; text-align: right !important; }
    .ccart-item-card__cost-label { font-family: var(--font-lausanne), sans-serif !important; font-size: 10px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 1px !important; color: rgba(29,30,33,0.4) !important; margin-bottom: 5px !important; }
    .cost-creds { display: inline-flex !important; align-items: baseline !important; gap: 6px !important; font-family: var(--font-lausanne), sans-serif !important; font-size: 17px !important; font-weight: 700 !important; color: var(--color-ink-black, #1d1e21) !important; }
    .cost-creds i { color: #b39659 !important; font-size: 14px !important; }
    .cost-unit { font-size: 11px !important; font-weight: 700 !important; color: #b39659 !important; text-transform: uppercase !important; }
    .cost-price { font-family: var(--font-lausanne), sans-serif !important; font-size: 18px !important; font-weight: 700 !important; color: var(--color-ink-black, #1d1e21) !important; }
    .ccart-item-card__remove { width: 40px !important; height: 40px !important; border-radius: 11px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: rgba(29,30,33,0.03) !important; border: 1px solid var(--color-stone, #d7d6d4) !important; color: rgba(29,30,33,0.5) !important; transition: all 0.2s ease !important; }
    .ccart-item-card__remove:hover { background: #fdece9 !important; border-color: #f2c4bd !important; color: #c0392b !important; }

    /* -------- Empty state -------- */
    .ccart-empty-state { text-align: center !important; padding: 60px 24px !important; }
    .ccart-empty-state__icon-wrap { width: 76px !important; height: 76px !important; border-radius: 9999px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: rgba(179,150,89,0.14) !important; color: #b39659 !important; font-size: 28px !important; margin: 0 auto 22px !important; }
    .ccart-empty-state__title { font-family: var(--font-lausanne), sans-serif !important; font-size: 20px !important; font-weight: 700 !important; color: var(--color-ink-black, #1d1e21) !important; margin: 0 0 10px !important; }
    .ccart-empty-state__text { font-family: var(--font-lausanne), sans-serif !important; font-size: 14px !important; color: rgba(29,30,33,0.6) !important; margin: 0 0 24px !important; }

    /* -------- Sidebar (dark) -------- */
    .ccart-sidebar { position: sticky !important; top: 24px !important; background: #0b0c0e !important; border-radius: 24px !important; padding: 28px !important; }
    .ccart-sidebar__header { margin-bottom: 22px !important; padding-bottom: 20px !important; border-bottom: 1px solid rgba(255,255,255,0.12) !important; }
    .ccart-sidebar__title { display: flex !important; align-items: center !important; gap: 10px !important; font-family: var(--font-lausanne), sans-serif !important; font-size: 18px !important; font-weight: 700 !important; letter-spacing: -0.3px !important; color: #ffffff !important; margin: 0 !important; }
    .ccart-sidebar__title i { color: #b39659 !important; font-size: 16px !important; }
    .ccart-sidebar__rows { display: flex !important; flex-direction: column !important; gap: 14px !important; margin-bottom: 20px !important; }
    .ccart-sidebar__row { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; }
    .ccart-sidebar__row-label { font-family: var(--font-lausanne), sans-serif !important; font-size: 14px !important; font-weight: 600 !important; color: rgba(255,255,255,0.7) !important; }
    .ccart-sidebar__row-value { font-family: var(--font-lausanne), sans-serif !important; font-size: 15px !important; font-weight: 700 !important; color: #ffffff !important; }
    .ccart-sidebar__row--total { padding-top: 16px !important; border-top: 1px solid rgba(255,255,255,0.12) !important; }
    .ccart-sidebar__row--total .ccart-sidebar__row-label { color: #ffffff !important; font-size: 15px !important; }
    .ccart-sidebar__row--total .ccart-sidebar__row-value { display: inline-flex !important; align-items: baseline !important; gap: 6px !important; font-size: 24px !important; letter-spacing: -1px !important; }
    .ccart-sidebar__row--total .ccart-sidebar__row-value i { color: #b39659 !important; font-size: 19px !important; }
    .total-unit { font-size: 12px !important; font-weight: 600 !important; color: #b39659 !important; text-transform: uppercase !important; }

    /* -------- Credit status alert -------- */
    .ccart-status-alert { display: flex !important; align-items: flex-start !important; gap: 12px !important; padding: 16px 18px !important; border-radius: 14px !important; margin-bottom: 18px !important; }
    .ccart-status-alert__icon { font-size: 18px !important; margin-top: 1px !important; flex-shrink: 0 !important; }
    .ccart-status-alert__content { display: flex !important; flex-direction: column !important; gap: 3px !important; }
    .ccart-status-alert__title { font-family: var(--font-lausanne), sans-serif !important; font-size: 13px !important; font-weight: 700 !important; }
    .ccart-status-alert__desc { font-family: var(--font-lausanne), sans-serif !important; font-size: 12.5px !important; line-height: 1.5 !important; color: rgba(255,255,255,0.7) !important; }
    .ccart-status-alert--success { background: rgba(31,122,82,0.16) !important; border: 1px solid rgba(31,122,82,0.35) !important; }
    .ccart-status-alert--success .ccart-status-alert__icon, .ccart-status-alert--success .ccart-status-alert__title { color: #7fd6a8 !important; }
    .ccart-status-alert--danger { background: rgba(192,57,43,0.16) !important; border: 1px solid rgba(192,57,43,0.4) !important; }
    .ccart-status-alert--danger .ccart-status-alert__icon, .ccart-status-alert--danger .ccart-status-alert__title { color: #f0a49b !important; }

    .ccart-sidebar__empty { text-align: center !important; padding: 28px 12px !important; }
    .ccart-sidebar__empty i { display: block !important; font-size: 28px !important; color: #b39659 !important; margin-bottom: 12px !important; }
    .ccart-sidebar__empty p { font-family: var(--font-lausanne), sans-serif !important; font-size: 14px !important; color: rgba(255,255,255,0.6) !important; margin: 0 !important; }

    /* -------- Buttons -------- */
    .ccart-action-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 9px !important; font-family: var(--font-lausanne), sans-serif !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0.3px !important; border-radius: 9999px !important; padding: 15px 28px !important; text-decoration: none !important; border: 1px solid transparent !important; cursor: pointer !important; transition: all 0.25s ease !important; }
    .ccart-action-btn--block { width: 100% !important; }
    .ccart-sidebar .ccart-action-btn--block { margin-top: 12px !important; }
    .ccart-action-btn--primary { background: var(--color-ink-black, #1d1e21) !important; color: #ffffff !important; }
    .ccart-action-btn--primary:hover { background: #b39659 !important; color: #1d1e21 !important; transform: translateY(-2px) !important; }
    .ccart-action-btn--checkout { background: #b39659 !important; color: #1d1e21 !important; }
    .ccart-action-btn--checkout:hover { background: #cbb380 !important; transform: translateY(-2px) !important; }
    .ccart-action-btn--topup { background: #b39659 !important; color: #1d1e21 !important; }
    .ccart-action-btn--topup:hover { background: #cbb380 !important; transform: translateY(-2px) !important; }
    .ccart-action-btn--ghost { background: transparent !important; border-color: rgba(255,255,255,0.25) !important; color: rgba(255,255,255,0.85) !important; }
    .ccart-action-btn--ghost:hover { border-color: #ffffff !important; color: #ffffff !important; }
    .ccart-action-btn--disabled { background: rgba(255,255,255,0.06) !important; color: rgba(255,255,255,0.35) !important; border-color: transparent !important; cursor: not-allowed !important; }
    .ccart-action-btn--disabled:hover { transform: none !important; }

    /* -------- Guest guard card -------- */
    .ccart-guard-card { max-width: 520px !important; margin: 0 auto !important; text-align: center !important; background: #ffffff !important; border: 1px solid var(--color-stone, #d7d6d4) !important; border-radius: 24px !important; padding: 56px 32px !important; }
    .ccart-guard-card__icon-wrap { width: 76px !important; height: 76px !important; border-radius: 9999px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: rgba(179,150,89,0.14) !important; color: #b39659 !important; font-size: 28px !important; margin: 0 auto 22px !important; }
    .ccart-guard-card__title { font-family: var(--font-lausanne), sans-serif !important; font-size: 24px !important; font-weight: 700 !important; letter-spacing: -0.5px !important; color: var(--color-ink-black, #1d1e21) !important; margin: 0 0 10px !important; }
    .ccart-guard-card__text { font-family: var(--font-lausanne), sans-serif !important; font-size: 15px !important; line-height: 1.6 !important; color: rgba(29,30,33,0.6) !important; margin: 0 auto 28px !important; max-width: 380px !important; }
    .ccart-guard-card .ccart-action-btn { margin: 0 auto !important; }

    @media (max-width: 991px) {
        .ccart-sidebar { position: static !important; margin-top: 8px !important; }
    }
    @media (max-width: 575px) {
        .ccart-redesign { padding: 40px 12px 64px !important; }
        .ccart-balance-card { padding: 20px 22px !important; }
        .ccart-balance-card__value { font-size: 26px !important; }
        .ccart-items-section { padding: 22px 20px !important; }
        .ccart-sidebar { padding: 24px 22px !important; }
        .ccart-item-card { flex-wrap: wrap !important; }
        .ccart-item-card__cost { align-items: flex-start !important; text-align: left !important; }
        .ccart-item-card__action { margin-left: auto !important; }
        .ccart-guard-card { padding: 40px 24px !important; }
    }

/* ============================================================
   CHECKOUT PAGE  (centralized)
   ============================================================ */
        /* ============================================================
           CHECKOUT — FRESH EDITORIAL REDESIGN
           ============================================================ */
        .page-checkout .kv-checkout-section {
            background-color: var(--color-butter-cream, #f9e5b1) !important;
            padding: 56px 16px 96px !important;
            position: relative !important;
            overflow: hidden !important;
        }
        .kv-pattern, .kv-glow { display: none !important; }
        .kv-checkout-section > .container { padding-left: 24px !important; padding-right: 24px !important; }

        /* -------- Stepper -------- */
        .kv-stepper { display: flex !important; align-items: flex-start !important; justify-content: center !important; max-width: 780px !important; margin: 0 auto 48px !important; }
        .kv-stepper__step { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 10px !important; width: 120px !important; }
        .kv-stepper__dot {
            width: 48px !important; height: 48px !important; border-radius: 9999px !important;
            display: inline-flex !important; align-items: center !important; justify-content: center !important;
            font-size: 16px !important; background: #ffffff !important;
            border: 1px solid var(--color-stone, #d7d6d4) !important;
        }
        .kv-stepper__dot i { color: #b39659 !important; }
        .kv-stepper__label { font-family: var(--font-lausanne), sans-serif !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 1px !important; color: rgba(29,30,33,0.5) !important; text-align: center !important; }
        .kv-stepper__bar { flex: 1 !important; height: 2px !important; background: var(--color-stone, #d7d6d4) !important; margin: 23px 6px 0 !important; }

        /* -------- Grid -------- */
        .kv-checkout-grid { display: grid !important; grid-template-columns: 1.15fr 1fr !important; gap: 24px !important; align-items: start !important; }

        /* -------- Cards -------- */
        .kv-checkout-card { background: #ffffff !important; border: 1px solid var(--color-stone, #d7d6d4) !important; border-radius: 22px !important; padding: 30px 32px !important; margin-bottom: 24px !important; }
        .kv-checkout-form .kv-checkout-card:last-child { margin-bottom: 0 !important; }
        .kv-checkout-card-title {
            display: flex !important; align-items: center !important; gap: 12px !important;
            font-family: var(--font-lausanne), sans-serif !important;
            font-size: 18px !important; font-weight: 700 !important; letter-spacing: -0.3px !important;
            color: var(--color-ink-black, #1d1e21) !important; margin: 0 0 24px !important;
        }
        .kv-checkout-card-title > i { color: #b39659 !important; font-size: 16px !important; }
        .kv-step { width: 26px !important; height: 26px !important; border-radius: 9999px !important; background: var(--color-ink-black, #1d1e21) !important; color: #fff !important; font-size: 12px !important; font-weight: 700 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; }

        /* -------- Form fields -------- */
        .kv-checkout-form-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 18px !important; }
        .kv-checkout-form-group { display: flex !important; flex-direction: column !important; }
        .kv-checkout-form-group-full { grid-column: 1 / -1 !important; }
        .kv-label { font-family: var(--font-lausanne), sans-serif !important; font-size: 12px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; color: rgba(29,30,33,0.55) !important; margin-bottom: 8px !important; }
        .kv-input {
            width: 100% !important; font-family: var(--font-lausanne), sans-serif !important;
            font-size: 14.5px !important; color: var(--color-ink-black, #1d1e21) !important;
            background: #fbfaf8 !important; border: 1px solid var(--color-stone, #d7d6d4) !important;
            border-radius: 12px !important; padding: 13px 16px !important; transition: all 0.2s ease !important;
        }
        .kv-input:focus { outline: none !important; border-color: #b39659 !important; background: #ffffff !important; box-shadow: 0 0 0 4px rgba(179,150,89,0.12) !important; }
        .kv-input::placeholder { color: rgba(29,30,33,0.35) !important; }
        .kv-select {
            -webkit-appearance: none !important; appearance: none !important;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231d1e21' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
            background-repeat: no-repeat !important; background-position: right 16px center !important; padding-right: 40px !important;
        }
        .kv-textarea { min-height: 120px !important; resize: vertical !important; }
        .kv-error { display: block !important; font-size: 12px !important; font-weight: 600 !important; color: #c0392b !important; margin-top: 6px !important; }
        .kv-card-expiry { display: flex !important; align-items: center !important; gap: 8px !important; }
        .kv-card-expiry .kv-input { text-align: center !important; }
        .kv-card-separator { color: rgba(29,30,33,0.4) !important; font-weight: 600 !important; }
        .kv-secure-note { display: flex !important; align-items: center !important; gap: 8px !important; margin-top: 18px !important; font-family: var(--font-lausanne), sans-serif !important; font-size: 13px !important; color: rgba(29,30,33,0.55) !important; }
        .kv-secure-note i { color: #1f7a52 !important; }
        .kv-payment-methods { margin-top: 16px !important; }
        .kv-payment-methods img { max-width: 100% !important; height: auto !important; opacity: 0.85 !important; }

        /* -------- Terms -------- */
        .kv-terms-group { margin-bottom: 14px !important; }
        .kv-terms-row { display: flex !important; align-items: flex-start !important; gap: 12px !important; }
        .kv-checkbox { width: 20px !important; height: 20px !important; margin-top: 1px !important; accent-color: #b39659 !important; flex-shrink: 0 !important; cursor: pointer !important; }
        .kv-terms-row label { font-family: var(--font-lausanne), sans-serif !important; font-size: 14px !important; line-height: 1.5 !important; color: rgba(29,30,33,0.7) !important; }
        .kv-terms-row a { color: #b39659 !important; font-weight: 600 !important; text-decoration: none !important; }
        .kv-terms-row a:hover { text-decoration: underline !important; }

        /* -------- Summary (dark premium panel) -------- */
        .kv-checkout-summary { display: flex !important; flex-direction: column !important; }
        .kv-checkout-order { background: #0b0c0e !important; border-color: #0b0c0e !important; margin-bottom: 0 !important; }
        .kv-checkout-order .kv-checkout-card-title { color: #ffffff !important; }
        .kv-checkout-order-table { margin-bottom: 22px !important; }
        .kv-checkout-order-header { display: flex !important; align-items: center !important; justify-content: space-between !important; font-family: var(--font-lausanne), sans-serif !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 1px !important; color: rgba(255,255,255,0.45) !important; padding-bottom: 14px !important; border-bottom: 1px solid rgba(255,255,255,0.12) !important; }
        .kv-checkout-order-item { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; padding: 14px 0 !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; }
        .kv-checkout-order-points { display: inline-flex !important; align-items: center !important; gap: 8px !important; font-family: var(--font-lausanne), sans-serif !important; font-size: 14px !important; font-weight: 600 !important; color: rgba(255,255,255,0.85) !important; }
        .kv-checkout-order-points i { color: #e6c98a !important; }
        .kv-checkout-order-price { font-family: var(--font-lausanne), sans-serif !important; font-size: 14px !important; font-weight: 700 !important; color: #ffffff !important; }
        .kv-checkout-order-total { display: flex !important; align-items: center !important; justify-content: space-between !important; padding-top: 18px !important; }
        .kv-checkout-order-total > span:first-child { font-family: var(--font-lausanne), sans-serif !important; font-size: 15px !important; font-weight: 600 !important; color: rgba(255,255,255,0.7) !important; }
        .kv-checkout-order-total-value { font-family: var(--font-lausanne), sans-serif !important; font-size: 24px !important; font-weight: 700 !important; letter-spacing: -1px !important; color: #ffffff !important; }

        /* Captcha within dark panel */
        .kv-captcha-group { margin: 22px 0 !important; }
        .kv-checkout-order .kv-label { color: rgba(255,255,255,0.7) !important; }
        .kv-checkout-order .kv-input { background: rgba(255,255,255,0.05) !important; border-color: rgba(255,255,255,0.14) !important; color: #ffffff !important; }
        .kv-checkout-order .kv-input:focus { background: rgba(255,255,255,0.08) !important; border-color: #b39659 !important; box-shadow: 0 0 0 4px rgba(179,150,89,0.15) !important; }
        .kv-captcha-wrapper { display: flex !important; align-items: stretch !important; gap: 10px !important; }
        .kv-captcha-wrapper .kv-input { flex: 1 !important; }
        .kv-captcha-display { background: #ffffff !important; border-radius: 12px !important; padding: 4px 10px !important; display: flex !important; align-items: center !important; }
        .kv-captcha-display img { max-height: 44px !important; }

        /* -------- Buttons -------- */
        .kv-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 9px !important; font-family: var(--font-lausanne), sans-serif !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0.3px !important; border-radius: 9999px !important; padding: 14px 26px !important; text-decoration: none !important; border: 1px solid transparent !important; cursor: pointer !important; transition: all 0.25s ease !important; }
        .kv-btn-lg { padding: 16px 30px !important; font-size: 14px !important; }
        .kv-btn-accent { background: #b39659 !important; color: #1d1e21 !important; border-color: #b39659 !important; }
        .kv-btn-accent:hover { background: #cbb380 !important; transform: translateY(-2px) !important; }
        .kv-btn-outline { background: transparent !important; border-color: rgba(255,255,255,0.25) !important; color: rgba(255,255,255,0.9) !important; margin-top: 12px !important; }
        .kv-btn-outline:hover { border-color: #ffffff !important; color: #ffffff !important; }
        .kv-summary-assure { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; margin-top: 18px !important; font-family: var(--font-lausanne), sans-serif !important; font-size: 12px !important; color: rgba(255,255,255,0.5) !important; }
        .kv-summary-assure i { color: #1f7a52 !important; }

        @media (max-width: 991px) {
            .kv-checkout-grid { grid-template-columns: 1fr !important; }
            .kv-checkout-summary { position: static !important; }
        }
        @media (max-width: 575px) {
            .kv-checkout-section { padding: 40px 12px 64px !important; }
            .kv-checkout-card { padding: 22px 20px !important; }
            .kv-checkout-form-grid { grid-template-columns: 1fr !important; }
            .kv-stepper__step { width: auto !important; }
            .kv-stepper__label { display: none !important; }
        }

/* ============================================================
   TOP-UP PAGE  (centralized)
   ============================================================ */
    /* ============================================================
       TOP-UP PAGE — THEME REDESIGN
       ============================================================ */
    .page-topup .points-topup-section { background-color: var(--color-butter-cream, #f9e5b1) !important; padding: 72px 16px 96px !important; }
    .points-topup-section .auto-container { max-width: 1200px !important; margin: 0 auto !important; padding: 0 24px !important; }

    /* Header */
    .points-topup-section .modern-h2 { font-family: var(--font-lausanne), sans-serif !important; font-size: 40px !important; font-weight: 700 !important; letter-spacing: -1.2px !important; color: var(--color-ink-black, #1d1e21) !important; }
    .points-topup-section .text-muted { color: rgba(29,30,33,0.6) !important; }

    /* Benefits row */
    .learning-benefit-card { background: #ffffff !important; border: 1px solid var(--color-stone, #d7d6d4) !important; border-radius: 18px !important; padding: 24px 18px !important; text-align: center !important; height: 100% !important; transition: transform 0.25s ease, border-color 0.25s ease !important; }
    .learning-benefit-card:hover { transform: translateY(-4px) !important; border-color: rgba(29,30,33,0.3) !important; }
    .benefit-emoji { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 52px !important; height: 52px !important; border-radius: 14px !important; background: rgba(179,150,89,0.14) !important; color: #b39659 !important; font-size: 20px !important; margin-bottom: 14px !important; }
    .benefit-title { font-family: var(--font-lausanne), sans-serif !important; font-size: 14px !important; font-weight: 700 !important; color: var(--color-ink-black, #1d1e21) !important; margin: 0 !important; line-height: 1.3 !important; }

    /* Pathway card (left) */
    .learning-pathway-card { background: #ffffff !important; border: 1px solid var(--color-stone, #d7d6d4) !important; border-radius: 24px !important; padding: 32px !important; }
    .pathway-header { display: flex !important; align-items: center !important; gap: 16px !important; }
    .header-icon-modern { width: 48px !important; height: 48px !important; border-radius: 14px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: var(--color-ink-black, #1d1e21) !important; color: #ffffff !important; font-size: 18px !important; flex-shrink: 0 !important; }
    .pathway-title { font-family: var(--font-lausanne), sans-serif !important; font-size: 20px !important; font-weight: 700 !important; letter-spacing: -0.4px !important; color: var(--color-ink-black, #1d1e21) !important; margin: 0 0 2px !important; }
    .pathway-subtitle { font-family: var(--font-lausanne), sans-serif !important; font-size: 13.5px !important; color: rgba(29,30,33,0.55) !important; margin: 0 !important; }

    /* Timeline steps */
    .visual-progression-timeline { display: flex !important; flex-direction: column !important; gap: 14px !important; }
    .timeline-step { display: flex !important; gap: 16px !important; padding: 18px 20px !important; border: 1px solid var(--color-stone, #d7d6d4) !important; border-radius: 16px !important; background: rgba(29,30,33,0.015) !important; transition: all 0.25s ease !important; }
    .timeline-step-highlight { border-color: #b39659 !important; background: rgba(179,150,89,0.08) !important; box-shadow: 0 10px 26px rgba(179,150,89,0.12) !important; }
    .step-badge { width: 34px !important; height: 34px !important; border-radius: 9999px !important; background: var(--color-ink-black, #1d1e21) !important; color: #ffffff !important; font-family: var(--font-lausanne), sans-serif !important; font-weight: 700 !important; font-size: 14px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; }
    .timeline-step-highlight .step-badge { background: #b39659 !important; color: #1d1e21 !important; }
    .step-content { flex: 1 1 auto !important; min-width: 0 !important; }
    .step-header { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; margin-bottom: 4px !important; }
    .step-title { font-family: var(--font-lausanne), sans-serif !important; font-size: 15px !important; font-weight: 700 !important; color: var(--color-ink-black, #1d1e21) !important; margin: 0 !important; }
    .step-bonus { font-family: var(--font-lausanne), sans-serif !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; color: #8a7038 !important; background: rgba(179,150,89,0.14) !important; border: 1px solid rgba(179,150,89,0.3) !important; padding: 4px 10px !important; border-radius: 9999px !important; white-space: nowrap !important; }
    .step-desc { font-family: var(--font-lausanne), sans-serif !important; font-size: 13px !important; line-height: 1.5 !important; color: rgba(29,30,33,0.6) !important; margin: 0 0 8px !important; }
    .step-range { font-family: var(--font-lausanne), sans-serif !important; font-size: 13px !important; color: var(--color-ink-black, #1d1e21) !important; }

    /* Calculator (right, dark premium panel) */
    .luxury-calculator-wrapper { height: 100% !important; }
    .luxury-calculator { background: #0b0c0e !important; border-radius: 24px !important; padding: 32px !important; }
    .calc-header-premium { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 16px !important; }
    .calc-title-premium { font-family: var(--font-lausanne), sans-serif !important; font-size: 22px !important; font-weight: 700 !important; letter-spacing: -0.5px !important; color: #ffffff !important; margin: 0 0 4px !important; }
    .calc-tagline { font-family: var(--font-lausanne), sans-serif !important; font-size: 13px !important; color: rgba(255,255,255,0.5) !important; margin: 0 !important; }
    .calc-currency-badge { width: 44px !important; height: 44px !important; border-radius: 12px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: rgba(179,150,89,0.16) !important; color: #e6c98a !important; font-size: 18px !important; font-weight: 700 !important; flex-shrink: 0 !important; }

    .input-label-premium { display: block !important; font-family: var(--font-lausanne), sans-serif !important; font-size: 12px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; color: rgba(255,255,255,0.6) !important; margin-bottom: 10px !important; }
    .premium-amount-input-wrapper { position: relative !important; }
    .premium-amount-input { width: 100% !important; font-family: var(--font-lausanne), sans-serif !important; font-size: 24px !important; font-weight: 700 !important; color: #ffffff !important; background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(255,255,255,0.14) !important; border-radius: 14px !important; padding: 16px 48px 16px 18px !important; transition: all 0.2s ease !important; }
    .premium-amount-input:focus { outline: none !important; border-color: #b39659 !important; background: rgba(255,255,255,0.08) !important; box-shadow: 0 0 0 4px rgba(179,150,89,0.15) !important; }
    .input-currency { position: absolute !important; right: 18px !important; top: 50% !important; transform: translateY(-50%) !important; color: #e6c98a !important; font-size: 18px !important; font-weight: 700 !important; }

    .points-breakdown-card { background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.1) !important; border-radius: 16px !important; padding: 18px 20px !important; }
    .breakdown-row { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 6px 0 !important; }
    .breakdown-label { font-family: var(--font-lausanne), sans-serif !important; font-size: 13px !important; color: rgba(255,255,255,0.6) !important; }
    .breakdown-value { font-family: var(--font-lausanne), sans-serif !important; font-size: 14px !important; font-weight: 700 !important; color: #ffffff !important; }
    .bonus-badge { color: #1d1e21 !important; background: #e6c98a !important; padding: 3px 10px !important; border-radius: 9999px !important; font-size: 12px !important; }
    .breakdown-divider { height: 1px !important; background: rgba(255,255,255,0.1) !important; margin: 8px 0 !important; }
    .breakdown-total .breakdown-label { color: #ffffff !important; font-weight: 600 !important; }
    .breakdown-value-total { font-family: var(--font-lausanne), sans-serif !important; font-size: 18px !important; font-weight: 700 !important; color: #e6c98a !important; }

    .points-display-premium { text-align: center !important; background: rgba(179,150,89,0.1) !important; border: 1px solid rgba(179,150,89,0.25) !important; border-radius: 16px !important; padding: 20px !important; }
    .points-number { display: block !important; font-family: var(--font-lausanne), sans-serif !important; font-size: 44px !important; font-weight: 700 !important; letter-spacing: -1.5px !important; color: #ffffff !important; line-height: 1 !important; }
    .points-unit { display: block !important; font-family: var(--font-lausanne), sans-serif !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 1.5px !important; color: #e6c98a !important; margin-top: 6px !important; }

    .btn-premium-checkout { position: relative !important; overflow: hidden !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; width: 100% !important; font-family: var(--font-lausanne), sans-serif !important; font-size: 14px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; color: #1d1e21 !important; background: #b39659 !important; border: none !important; border-radius: 9999px !important; padding: 16px 28px !important; cursor: pointer !important; transition: all 0.25s ease !important; }
    .btn-premium-checkout:hover { background: #cbb380 !important; transform: translateY(-2px) !important; }
    .btn-premium-checkout .btn-icon { transition: transform 0.2s ease !important; }
    .btn-premium-checkout:hover .btn-icon { transform: translateX(4px) !important; }
    .btn-shine { display: none !important; }

    .currency-note-calc { color: rgba(255,255,255,0.45) !important; }
    .currency-note-calc strong { color: rgba(255,255,255,0.6) !important; font-weight: 600 !important; }
    .trust-indicator { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; font-family: var(--font-lausanne), sans-serif !important; font-size: 12px !important; color: rgba(255,255,255,0.5) !important; padding-top: 16px !important; border-top: 1px solid rgba(255,255,255,0.1) !important; }
    .trust-indicator i { color: #1f7a52 !important; }

    /* Header design & effects */
    .topup-head { position: relative !important; z-index: 0 !important; }
    .topup-head::before {
        content: '' !important;
        position: absolute !important;
        top: -34px !important; left: 50% !important;
        transform: translateX(-50%) !important;
        width: 540px !important; max-width: 92% !important; height: 300px !important;
        background: radial-gradient(ellipse at center, rgba(179,150,89,0.2) 0%, rgba(249,229,177,0) 66%) !important;
        z-index: -1 !important; pointer-events: none !important;
    }
    .topup-underline { display: block !important; width: 66px !important; height: 4px !important; margin: 16px auto 0 !important; border-radius: 9999px !important; background: linear-gradient(90deg, #b39659, #e6c98a) !important; }
    .topup-deco { position: absolute !important; color: #b39659 !important; opacity: 0.4 !important; pointer-events: none !important; }
    .topup-deco--1 { top: -8px !important; left: 26% !important; font-size: 12px !important; animation: topupFloat 5s ease-in-out infinite !important; }
    .topup-deco--2 { top: 8px !important; right: 26% !important; font-size: 16px !important; opacity: 0.32 !important; animation: topupFloat 6.5s ease-in-out infinite 0.7s !important; }
    @keyframes topupFloat { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-8px) rotate(8deg); } }
    @keyframes topupFadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
    .topup-head .modern-badge { animation: topupFadeUp 0.6s ease both !important; }
    .topup-head .modern-h2 { animation: topupFadeUp 0.7s ease 0.06s both !important; }
    .topup-head .topup-underline { animation: topupFadeUp 0.7s ease 0.12s both !important; }
    .topup-head .text-muted { animation: topupFadeUp 0.7s ease 0.16s both !important; }

    @media (max-width: 575px) {
        .page-topup .points-topup-section { padding: 48px 12px 64px !important; }
        .learning-pathway-card, .luxury-calculator { padding: 24px !important; }
        .points-topup-section .modern-h2 { font-size: 30px !important; }
        .points-number { font-size: 36px !important; }
    }

/* ============================================================
   DYNAMIC CONTENT PAGE (policy/terms)  (centralized)
   ============================================================ */
    /* ============================================================
       RICH-TEXT DOCUMENT PAGE (DB HTML) — EDITORIAL REDESIGN
       ============================================================ */
    .page-page .doc-section {
        background-color: var(--color-butter-cream, #f9e5b1) !important;
        padding: 80px 16px 100px !important;
        position: relative !important;
    }

    .doc-shell {
        max-width: 880px !important;
        margin: 0 auto !important;
    }

    /* Document title strip */
    .doc-head {
        display: flex !important;
        align-items: center !important;
        gap: 14px !important;
        margin-bottom: 24px !important;
    }
    .doc-head__icon {
        width: 46px !important;
        height: 46px !important;
        border-radius: 13px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: var(--color-ink-black, #1d1e21) !important;
        color: #fff !important;
        font-size: 18px !important;
        flex-shrink: 0 !important;
    }
    .doc-head__title {
        font-family: var(--font-lausanne), sans-serif !important;
        font-size: 30px !important;
        font-weight: 700 !important;
        letter-spacing: -1px !important;
        line-height: 1.1 !important;
        color: var(--color-ink-black, #1d1e21) !important;
        margin: 0 !important;
    }
    .doc-head__meta {
        font-family: var(--font-lausanne), sans-serif !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
        color: rgba(29,30,33,0.45) !important;
        margin-top: 2px !important;
    }

    /* The paper sheet holding the DB HTML */
    .doc-sheet {
        background: #ffffff !important;
        border: 1px solid var(--color-stone, #d7d6d4) !important;
        border-radius: 24px !important;
        padding: 48px 52px !important;
        box-shadow: 0 25px 60px rgba(29,30,33,0.06) !important;
    }

    /* ---------- PROSE STYLING FOR RAW DB HTML ---------- */
    .doc-prose { font-family: var(--font-lausanne), sans-serif !important; color: rgba(29,30,33,0.82) !important; font-size: 13.5px !important; line-height: 1.75 !important; }
    .doc-prose > *:first-child { margin-top: 0 !important; }
    .doc-prose > *:last-child { margin-bottom: 0 !important; }

    .doc-prose p { margin: 0 0 16px !important; color: rgba(29,30,33,0.75) !important; font-size: 13.5px !important; line-height: 1.75 !important; }

    .doc-prose h1, .doc-prose h2, .doc-prose h3,
    .doc-prose h4, .doc-prose h5, .doc-prose h6 {
        font-family: var(--font-lausanne), sans-serif !important;
        color: var(--color-ink-black, #1d1e21) !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        letter-spacing: -0.4px !important;
        margin: 36px 0 14px !important;
    }
    .doc-prose h1 { font-size: 28px !important; }
    .doc-prose h2 { font-size: 24px !important; padding-bottom: 10px !important; border-bottom: 1px solid var(--color-stone, #d7d6d4) !important; }
    .doc-prose h3 { font-size: 20px !important; }
    .doc-prose h4 { font-size: 17px !important; }
    .doc-prose h5, .doc-prose h6 { font-size: 14px !important; text-transform: uppercase !important; letter-spacing: 1px !important; color: rgba(29,30,33,0.6) !important; }

    /* Lists — force real bullets/numbers (global theme strips them) */
    .doc-prose ul, .doc-prose ol {
        margin: 0 0 18px !important;
        padding-left: 26px !important;
    }
    .doc-prose ul { list-style: disc outside !important; }
    .doc-prose ol { list-style: decimal outside !important; }
    .doc-prose ul ul { list-style: circle outside !important; }
    .doc-prose ul ul ul { list-style: square outside !important; }
    .doc-prose li {
        display: list-item !important;
        margin: 0 0 9px !important;
        padding-left: 4px !important;
        line-height: 1.7 !important;
        color: rgba(29,30,33,0.75) !important;
    }
    .doc-prose li::marker { color: #b39659 !important; font-weight: 700 !important; }

    .doc-prose a { color: #8a7038 !important; font-weight: 600 !important; text-decoration: none !important; border-bottom: 1px solid rgba(179,150,89,0.4) !important; transition: all 0.2s ease !important; }
    .doc-prose a:hover { color: #b39659 !important; border-bottom-color: #b39659 !important; }

    .doc-prose strong, .doc-prose b { font-weight: 700 !important; color: var(--color-ink-black, #1d1e21) !important; }
    .doc-prose em, .doc-prose i { font-style: italic !important; }

    .doc-prose blockquote {
        margin: 22px 0 !important;
        padding: 14px 22px !important;
        border-left: 3px solid #b39659 !important;
        background: rgba(179,150,89,0.07) !important;
        border-radius: 0 12px 12px 0 !important;
        color: rgba(29,30,33,0.7) !important;
        font-style: italic !important;
    }
    .doc-prose blockquote p { margin: 0 !important; }

    .doc-prose hr { border: none !important; height: 1px !important; background: var(--color-stone, #d7d6d4) !important; margin: 32px 0 !important; }

    .doc-prose img { max-width: 100% !important; height: auto !important; border-radius: 14px !important; border: 1px solid var(--color-stone, #d7d6d4) !important; margin: 18px 0 !important; }

    .doc-prose code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important; font-size: 13px !important; background: rgba(29,30,33,0.06) !important; padding: 2px 7px !important; border-radius: 6px !important; color: #b0472c !important; }
    .doc-prose pre { background: #141518 !important; color: #f2efe9 !important; padding: 18px 20px !important; border-radius: 14px !important; overflow-x: auto !important; margin: 20px 0 !important; }
    .doc-prose pre code { background: transparent !important; color: inherit !important; padding: 0 !important; }

    /* Tables */
    .doc-prose table {
        width: 100% !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
        margin: 24px 0 !important;
        font-size: 14px !important;
        border: 1px solid var(--color-stone, #d7d6d4) !important;
        border-radius: 14px !important;
        overflow: hidden !important;
    }
    .doc-prose thead th, .doc-prose th {
        background: var(--color-ink-black, #1d1e21) !important;
        color: #fff !important;
        font-family: var(--font-lausanne), sans-serif !important;
        font-weight: 700 !important;
        text-align: left !important;
        padding: 13px 16px !important;
        font-size: 12.5px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        border-bottom: 1px solid var(--color-stone, #d7d6d4) !important;
    }
    .doc-prose td {
        padding: 12px 16px !important;
        border-bottom: 1px solid var(--color-stone, #d7d6d4) !important;
        border-right: 1px solid rgba(29,30,33,0.05) !important;
        color: rgba(29,30,33,0.78) !important;
        vertical-align: top !important;
    }
    .doc-prose tbody tr:nth-child(even) { background: rgba(29,30,33,0.02) !important; }
    .doc-prose tbody tr:hover { background: rgba(179,150,89,0.06) !important; }
    .doc-prose tr:last-child td { border-bottom: none !important; }
    .doc-prose td:last-child, .doc-prose th:last-child { border-right: none !important; }

    @media (max-width: 767px) {
        .page-page .doc-section { padding: 48px 12px 64px !important; }
        .doc-sheet { padding: 30px 22px !important; }
        .doc-head__title { font-size: 24px !important; }
        .doc-prose, .doc-prose p { font-size: 13px !important; }
        .doc-prose table, .doc-prose thead, .doc-prose tbody, .doc-prose th, .doc-prose td, .doc-prose tr { display: block !important; }
        .doc-prose thead { display: none !important; }
        .doc-prose td { border-right: none !important; }
    }

/* ============================================================
   ORDER / INVOICE DETAIL PAGE  (centralized)
   ============================================================ */
    /* ============================================================
       ORDER / INVOICE DETAIL — THEME REDESIGN
       ============================================================ */
    .page-order-show .invoice-section { background-color: var(--color-butter-cream, #f9e5b1) !important; padding: 72px 16px 96px !important; position: relative !important; overflow: hidden !important; }
    .account-bg-blob { display: none !important; }
    .invoice-container { max-width: 980px !important; margin: 0 auto !important; }

    .invoice-card { background: #ffffff !important; border: 1px solid var(--color-stone, #d7d6d4) !important; border-radius: 26px !important; box-shadow: 0 26px 60px rgba(29,30,33,0.08) !important; overflow: hidden !important; }

    /* Header */
    .inv-head { padding: 34px 40px !important; border-bottom: 1px solid var(--color-stone, #d7d6d4) !important; display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 24px !important; flex-wrap: wrap !important; }
    .inv-brand { display: inline-flex !important; align-items: center !important; gap: 10px !important; font-family: var(--font-lausanne), sans-serif !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 2px !important; color: #8a7038 !important; }
    .inv-brand i { color: #b39659 !important; font-size: 16px !important; }
    .inv-title { font-family: var(--font-lausanne), sans-serif !important; font-size: 28px !important; font-weight: 700 !important; letter-spacing: -1px !important; color: var(--color-ink-black, #1d1e21) !important; margin: 14px 0 16px !important; }
    .inv-tags { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 8px !important; }
    .inv-order-no { font-family: var(--font-lausanne), sans-serif !important; font-size: 13px !important; font-weight: 700 !important; color: #fff !important; background: var(--color-ink-black, #1d1e21) !important; padding: 7px 14px !important; border-radius: 9999px !important; }
    .inv-pill { display: inline-flex !important; align-items: center !important; gap: 5px !important; font-family: var(--font-lausanne), sans-serif !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; padding: 7px 13px !important; border-radius: 9999px !important; }
    .inv-pill--success { background: #e7f4ee !important; color: #1f7a52 !important; }
    .inv-pill--danger { background: #fdece9 !important; color: #c0392b !important; }
    .inv-pill--warning { background: rgba(179,150,89,0.16) !important; color: #8a7038 !important; }
    .inv-pill--level { background: rgba(179,150,89,0.14) !important; color: #8a7038 !important; border: 1px solid rgba(179,150,89,0.3) !important; }
    .inv-pill--neutral { background: rgba(29,30,33,0.05) !important; color: rgba(29,30,33,0.55) !important; }
    .inv-credits { display: inline-flex !important; align-items: center !important; gap: 5px !important; font-family: var(--font-lausanne), sans-serif !important; font-size: 12px !important; font-weight: 700 !important; color: #8a7038 !important; background: rgba(179,150,89,0.12) !important; border: 1px solid rgba(179,150,89,0.3) !important; padding: 5px 11px !important; border-radius: 9999px !important; }

    .inv-actions { display: flex !important; gap: 10px !important; flex-wrap: wrap !important; }
    .inv-btn { display: inline-flex !important; align-items: center !important; gap: 7px !important; font-family: var(--font-lausanne), sans-serif !important; font-size: 12px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; padding: 11px 20px !important; border-radius: 9999px !important; cursor: pointer !important; text-decoration: none !important; transition: all 0.25s ease !important; border: 1px solid transparent !important; }
    .inv-btn--outline { background: transparent !important; border-color: var(--color-stone, #d7d6d4) !important; color: var(--color-ink-black, #1d1e21) !important; }
    .inv-btn--outline:hover { border-color: var(--color-ink-black, #1d1e21) !important; background: rgba(29,30,33,0.03) !important; }
    .inv-btn--primary { background: var(--color-ink-black, #1d1e21) !important; color: #fff !important; }
    .inv-btn--primary:hover { background: #b39659 !important; color: #1d1e21 !important; transform: translateY(-2px) !important; }

    /* Stepper */
    .inv-stepper { position: relative !important; display: flex !important; justify-content: space-between !important; max-width: 640px !important; margin: 0 auto !important; padding: 40px 20px !important; }
    .inv-stepper__line { position: absolute !important; top: 62px !important; left: 74px !important; right: 74px !important; height: 3px !important; background: var(--color-stone, #d7d6d4) !important; z-index: 0 !important; border-radius: 9999px !important; }
    .inv-stepper__fill { height: 100% !important; background: linear-gradient(90deg, #b39659, #e6c98a) !important; border-radius: 9999px !important; transition: width 0.6s ease !important; }
    .inv-step { position: relative !important; z-index: 1 !important; flex: 1 !important; display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; }
    .inv-step__icon { width: 46px !important; height: 46px !important; border-radius: 9999px !important; background: #ffffff !important; border: 2px solid var(--color-stone, #d7d6d4) !important; color: rgba(29,30,33,0.4) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 16px !important; margin-bottom: 12px !important; transition: all 0.3s ease !important; }
    .inv-step.completed .inv-step__icon { background: #b39659 !important; border-color: #b39659 !important; color: #1d1e21 !important; }
    .inv-step.cancelled .inv-step__icon { background: #c0392b !important; border-color: #c0392b !important; color: #fff !important; }
    .inv-step__label { font-family: var(--font-lausanne), sans-serif !important; font-size: 13px !important; font-weight: 700 !important; color: var(--color-ink-black, #1d1e21) !important; }
    .inv-step__date { font-family: var(--font-lausanne), sans-serif !important; font-size: 11px !important; color: rgba(29,30,33,0.5) !important; margin-top: 3px !important; }

    /* Detail cards */
    .inv-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important; gap: 20px !important; padding: 8px 40px 0 !important; }
    .inv-detail-card { background: rgba(29,30,33,0.02) !important; border: 1px solid var(--color-stone, #d7d6d4) !important; border-radius: 18px !important; padding: 24px !important; }
    .inv-detail-card__title { display: flex !important; align-items: center !important; gap: 10px !important; font-family: var(--font-lausanne), sans-serif !important; font-size: 14px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; color: var(--color-ink-black, #1d1e21) !important; margin-bottom: 18px !important; }
    .inv-detail-card__title i { color: #b39659 !important; font-size: 18px !important; }
    .inv-row { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; padding: 11px 0 !important; border-bottom: 1px solid var(--color-stone, #d7d6d4) !important; }
    .inv-row:last-child { border-bottom: none !important; }
    .inv-row__label { font-family: var(--font-lausanne), sans-serif !important; font-size: 11px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; color: rgba(29,30,33,0.45) !important; flex-shrink: 0 !important; }
    .inv-row__value { font-family: var(--font-lausanne), sans-serif !important; font-size: 13.5px !important; font-weight: 600 !important; color: var(--color-ink-black, #1d1e21) !important; text-align: right !important; word-break: break-word !important; }
    .inv-row__value--mono { font-family: ui-monospace, Menlo, monospace !important; font-size: 12px !important; }
    .inv-row__value--gold { color: #b39659 !important; font-weight: 700 !important; }

    /* Table */
    .inv-table-wrap { padding: 20px 40px 40px !important; }
    .inv-table-title { display: flex !important; align-items: center !important; gap: 10px !important; font-family: var(--font-lausanne), sans-serif !important; font-size: 18px !important; font-weight: 700 !important; letter-spacing: -0.4px !important; color: var(--color-ink-black, #1d1e21) !important; margin-bottom: 18px !important; }
    .inv-table-title i { color: #b39659 !important; font-size: 18px !important; }
    .inv-table { width: 100% !important; border-collapse: separate !important; border-spacing: 0 !important; border: 1px solid var(--color-stone, #d7d6d4) !important; border-radius: 14px !important; overflow: hidden !important; }
    .inv-table thead th { background: var(--color-ink-black, #1d1e21) !important; color: #fff !important; font-family: var(--font-lausanne), sans-serif !important; font-size: 11.5px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; padding: 14px 16px !important; text-align: left !important; }
    .inv-table td { padding: 15px 16px !important; border-bottom: 1px solid var(--color-stone, #d7d6d4) !important; font-family: var(--font-lausanne), sans-serif !important; font-size: 13.5px !important; color: rgba(29,30,33,0.8) !important; vertical-align: middle !important; }
    .inv-table tbody tr:nth-child(even) td { background: rgba(29,30,33,0.015) !important; }
    .inv-table tbody tr:hover td { background: rgba(179,150,89,0.06) !important; }
    .inv-table td.inv-course { font-weight: 700 !important; color: var(--color-ink-black, #1d1e21) !important; }
    .inv-table td.inv-qty { text-align: center !important; font-weight: 700 !important; color: #b39659 !important; }
    .inv-table td.inv-amt { text-align: right !important; font-weight: 700 !important; color: var(--color-ink-black, #1d1e21) !important; white-space: nowrap !important; }
    .inv-table tfoot td { padding: 18px 16px !important; border-top: 2px solid var(--color-ink-black, #1d1e21) !important; background: rgba(179,150,89,0.08) !important; }
    .inv-total-label { text-align: right !important; font-family: var(--font-lausanne), sans-serif !important; font-size: 12px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 1px !important; color: var(--color-ink-black, #1d1e21) !important; }
    .inv-total-value { text-align: right !important; font-family: var(--font-lausanne), sans-serif !important; font-size: 22px !important; font-weight: 700 !important; letter-spacing: -1px !important; color: #b39659 !important; white-space: nowrap !important; }
    .inv-empty { text-align: center !important; padding: 48px 16px !important; color: rgba(29,30,33,0.5) !important; }

    /* Not found */
    .inv-notfound { text-align: center !important; padding: 64px 32px !important; }
    .inv-notfound i { color: #b39659 !important; margin-bottom: 20px !important; }
    .inv-notfound h3 { font-family: var(--font-lausanne), sans-serif !important; font-size: 24px !important; font-weight: 700 !important; color: var(--color-ink-black, #1d1e21) !important; margin-bottom: 12px !important; }
    .inv-notfound p { font-family: var(--font-lausanne), sans-serif !important; font-size: 15px !important; color: rgba(29,30,33,0.6) !important; margin-bottom: 28px !important; }

    @media (max-width: 767px) {
        .page-order-show .invoice-section { padding: 44px 12px 64px !important; }
        .inv-head { padding: 26px 22px !important; }
        .inv-grid { padding: 8px 22px 0 !important; }
        .inv-table-wrap { padding: 18px 22px 28px !important; }
        .inv-title { font-size: 24px !important; }
        .inv-stepper__line { left: 50px !important; right: 50px !important; }
    }

/* ============================================================
   USER DASHBOARD PAGE  (centralized)
   ============================================================ */
/* Ambient backgrounds & container setup */
.page-dashboard .account-section {
  position: relative !important;
  overflow: hidden !important;
  background-color: var(--color-butter-cream, #f9e5b1) !important;
  padding: 56px 0 84px !important;
}
.account-bg-blob { display: none !important; }
.account-bg-blob {
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  filter: blur(140px);
  opacity: 0.15;
  z-index: 1;
  pointer-events: none;
}
.blob-mint {
  background: radial-gradient(circle, #a8e6cf 0%, rgba(255,255,255,0) 70%);
  top: -10%;
  left: -10%;
}
.blob-sky {
  background: radial-gradient(circle, #dcedc1 0%, rgba(255,255,255,0) 70%);
  bottom: -10%;
  right: -10%;
}
.blob-peach {
  background: radial-gradient(circle, #ffd3b6 0%, rgba(255,255,255,0) 70%);
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
}

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

/* LEFT COLUMN: Sidebar Navigation */
.db-profile-sidebar {
  background-color: #ffffff !important;
  border: 1px solid var(--color-stone, #d7d6d4) !important;
  border-radius: 24px !important;
  padding: 28px !important;
  box-shadow: 0 20px 50px rgba(29, 30, 33, 0.05) !important;
  height: 100%;
}

/* Premium Membership Card (Editorial Dark Theme) */
.artify-member-card {
  position: relative;
  background: linear-gradient(135deg, #fff8ea 0%, #ffffff 100%) !important;
  border: 1px solid rgba(179, 150, 89, 0.3) !important;
  border-radius: 20px !important;
  padding: 24px !important;
  color: var(--color-ink-black, #1d1e21) !important;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(29, 30, 33, 0.04) !important;
  margin-bottom: 26px !important;
}
.member-card-glow { display: none !important; }
.member-card-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 22px !important;
}
.member-logo {
  font-family: var(--font-lausanne), sans-serif !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  color: #8a7038 !important;
}
.coin-icon {
  color: #b39659 !important;
  font-size: 18px !important;
}
.balance-label {
  display: block !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: rgba(29, 30, 33, 0.45) !important;
  margin-bottom: 6px !important;
}
.balance-value {
  font-family: var(--font-lausanne), sans-serif !important;
  font-weight: 700 !important;
  font-size: 34px !important;
  letter-spacing: -1px !important;
  color: var(--color-ink-black, #1d1e21) !important;
  margin: 0 0 20px 0 !important;
}
.balance-value small {
  font-size: 13px !important;
  font-family: var(--font-lausanne), sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: #b39659 !important;
}
.member-card-footer {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  border-top: 1px solid rgba(29, 30, 33, 0.08) !important;
  padding-top: 16px !important;
}
.member-name {
  font-family: var(--font-lausanne), sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.2px !important;
  color: var(--color-ink-black, #1d1e21) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}
.member-topup-btn {
  background-color: var(--color-ink-black, #1d1e21) !important;
  color: #ffffff !important;
  border-radius: 99px !important;
  padding: 8px 16px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  column-gap: 4px !important;
}
.member-topup-btn:hover {
  background-color: #b39659 !important;
  color: #1d1e21 !important;
  transform: translateY(-2px) !important;
}

/* Personal Greeting & Overview */
.db-profile-overview {
  margin-bottom: 30px !important;
}
.greeting-title {
  font-family: var(--font-lausanne), sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.5px !important;
  color: var(--color-ink-black, #1d1e21) !important;
  margin-bottom: 8px !important;
}
.greeting-text {
  font-size: 14px !important;
  color: var(--color-graphite, #6f6c69) !important;
  line-height: 1.5 !important;
  margin-bottom: 20px !important;
}

/* Mini Stats Grid */
.db-mini-stats {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  background-color: rgba(29, 30, 33, 0.02) !important;
  border: 1px solid rgba(29, 30, 33, 0.05) !important;
  border-radius: 16px !important;
  padding: 16px !important;
}
.mini-stat-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  flex: 1 !important;
  text-align: center !important;
}
.mini-stat-value {
  font-family: var(--font-lausanne), sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--color-ink-black, #1d1e21) !important;
}
.mini-stat-label {
  font-size: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  color: var(--color-graphite, #6f6c69) !important;
  margin-top: 4px !important;
}
.mini-stat-divider {
  width: 1px !important;
  height: 28px !important;
  background-color: rgba(29, 30, 33, 0.08) !important;
}

/* Sidebar Tab Navigation */
.db-side-tabs {
  border: none !important;
  row-gap: 8px !important;
  padding: 0 !important;
}
.db-side-tabs .nav-item {
  width: 100% !important;
}
.db-side-tabs .nav-link {
  width: 100% !important;
  text-align: left !important;
  display: flex !important;
  align-items: center !important;
  column-gap: 12px !important;
  padding: 12px 18px !important;
  font-family: var(--font-lausanne), sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--color-graphite, #6f6c69) !important;
  border-radius: 12px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  transition: all 0.25s ease !important;
}
.db-side-tabs .nav-link i {
  font-size: 16px !important;
  opacity: 0.8 !important;
  transition: transform 0.25s ease !important;
}
.db-side-tabs .nav-link:hover {
  background-color: rgba(29, 30, 33, 0.03) !important;
  color: var(--color-ink-black, #1d1e21) !important;
}
.db-side-tabs .nav-link:hover i {
  transform: translateX(2px) !important;
}
.db-side-tabs .nav-link.active {
  background-color: var(--color-ink-black, #1d1e21) !important;
  color: var(--color-warm-bone, #fef9f3) !important;
  box-shadow: 0 4px 15px rgba(29, 30, 33, 0.1) !important;
}

.db-side-logout {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  column-gap: 12px !important;
  padding: 12px 18px !important;
  font-family: var(--font-lausanne), sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #b23b3b !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  background-color: rgba(178, 59, 59, 0.03) !important;
  border: 1px solid rgba(178, 59, 59, 0.08) !important;
  transition: all 0.25s ease !important;
}
.db-side-logout:hover {
  background-color: #b23b3b !important;
  color: var(--color-warm-bone, #fef9f3) !important;
  box-shadow: 0 4px 12px rgba(178, 59, 59, 0.15) !important;
}

/* RIGHT COLUMN: Main Content Panel */
.db-main-content {
  background-color: #ffffff !important;
  border: 1px solid var(--color-stone, #d7d6d4) !important;
  border-radius: 24px !important;
  padding: 32px !important;
  box-shadow: 0 20px 50px rgba(29, 30, 33, 0.05) !important;
  min-height: 500px;
}

.db-content-card__title {
  font-family: var(--font-lausanne), sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: -0.4px !important;
  color: var(--color-ink-black, #1d1e21) !important;
  margin-bottom: 28px !important;
  display: flex !important;
  align-items: center !important;
  border-bottom: 1px solid var(--color-stone, #d7d6d4) !important;
  padding-bottom: 16px !important;
}
.db-content-card__title i {
  color: #b39659 !important;
  font-size: 18px !important;
}

/* Tables and Records */
.db-table {
  width: 100% !important;
  margin-bottom: 0 !important;
  vertical-align: middle !important;
  border-collapse: separate !important;
  border-spacing: 0 8px !important; /* spacing between rows */
}
.db-table thead th {
  font-family: var(--font-lausanne), sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: var(--color-graphite, #6f6c69) !important;
  border-bottom: none !important;
  padding: 12px 16px !important;
  background-color: transparent !important;
}
.db-table tbody tr {
  background-color: var(--color-warm-bone, #fef9f3) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}
.db-table tbody tr:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(29, 30, 33, 0.04) !important;
}
.db-table tbody td {
  padding: 16px !important;
  border-top: 1px solid rgba(29, 30, 33, 0.04) !important;
  border-bottom: 1px solid rgba(29, 30, 33, 0.04) !important;
  background-color: transparent !important;
  font-size: 13px !important;
  color: var(--color-ink-black, #1d1e21) !important;
}
.db-table tbody td:first-child {
  border-left: 1px solid rgba(29, 30, 33, 0.04) !important;
  border-radius: 12px 0 0 12px !important;
}
.db-table tbody td:last-child {
  border-right: 1px solid rgba(29, 30, 33, 0.04) !important;
  border-radius: 0 12px 12px 0 !important;
}

.db-table__highlight {
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
}
.db-table__price {
  font-weight: 600 !important;
}
.db-table__course-title {
  font-weight: 600 !important;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.db-table__date {
  color: var(--color-graphite, #6f6c69) !important;
}

/* Action buttons */
.db-action-btn {
  display: inline-flex !important;
  align-items: center !important;
  column-gap: 4px !important;
  padding: 6px 12px !important;
  background-color: rgba(29, 30, 33, 0.04) !important;
  color: var(--color-ink-black, #1d1e21) !important;
  border: 1px solid rgba(29, 30, 33, 0.06) !important;
  border-radius: 8px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
}
.db-action-btn:hover {
  background-color: var(--color-ink-black, #1d1e21) !important;
  color: var(--color-warm-bone, #fef9f3) !important;
  border-color: var(--color-ink-black, #1d1e21) !important;
}

/* Status Pills */
.db-status-pill {
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 10px !important;
  border-radius: 8px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}
.db-status-pill--success {
  background-color: rgba(46, 117, 89, 0.08) !important;
  color: #2e7559 !important;
}
.db-status-pill--danger {
  background-color: rgba(178, 59, 59, 0.08) !important;
  color: #b23b3b !important;
}
.db-status-pill--warning {
  background-color: rgba(186, 118, 29, 0.08) !important;
  color: #ba761d !important;
}
.db-status-pill--teal {
  background-color: rgba(46, 109, 117, 0.08) !important;
  color: #2e6d75 !important;
}
.db-status-pill--neutral {
  background-color: rgba(29, 30, 33, 0.05) !important;
  color: var(--color-graphite, #6f6c69) !important;
}

/* Points Badge */
.db-points-badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
}
.db-points-badge--amber {
  background-color: rgba(249, 229, 177, 0.15) !important;
  color: #c99310 !important;
  border: 1px solid rgba(249, 229, 177, 0.3) !important;
}
.db-points-badge--teal {
  background-color: rgba(46, 109, 117, 0.06) !important;
  color: #2e6d75 !important;
  border: 1px solid rgba(46, 109, 117, 0.15) !important;
}

/* Forms in Dashboard */
.db-form {
  display: flex !important;
  flex-direction: column !important;
  row-gap: 20px !important;
}
.db-form-group {
  display: flex !important;
  flex-direction: column !important;
  row-gap: 8px !important;
}
.db-label {
  font-family: var(--font-lausanne), sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: var(--color-ink-black, #1d1e21) !important;
}
.db-input {
  width: 100% !important;
  height: 52px !important;
  background-color: var(--color-warm-bone, #fef9f3) !important;
  border: 1px solid rgba(29, 30, 33, 0.12) !important;
  border-radius: 12px !important;
  padding: 0 18px !important;
  font-family: var(--font-lausanne), sans-serif !important;
  font-size: 14px !important;
  color: var(--color-ink-black, #1d1e21) !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}
.db-input:focus {
  outline: none !important;
  border-color: #b39659 !important;
  box-shadow: 0 0 0 4px rgba(179, 150, 89, 0.12) !important;
  background-color: #ffffff !important;
}
.db-input.is-invalid {
  border-color: #b23b3b !important;
}
.db-input.is-invalid:focus {
  box-shadow: 0 0 0 4px rgba(178, 59, 59, 0.08) !important;
}

.db-submit-btn {
  height: 52px !important;
  background-color: var(--color-ink-black, #1d1e21) !important;
  color: var(--color-warm-bone, #fef9f3) !important;
  border: none !important;
  border-radius: 12px !important;
  font-family: var(--font-lausanne), sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 10px !important;
}
.db-submit-btn:hover {
  background-color: #000000 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1) !important;
}

/* ============================================================
   COURSE CATALOG / PRODUCT-LISTS PAGE  (centralized)
   ============================================================ */
    /* ============================================================
       COURSE CATALOG — FRESH EDITORIAL REDESIGN
       ============================================================ */
    .page-product-lists .cat-hero,
    .page-product-lists .catalog-section {
        background-color: var(--color-butter-cream, #f9e5b1) !important;
    }

    /* -------- Category Hero (editorial video split) -------- */
    .cat-hero { padding: 44px 0 12px !important; }
    .cat-hero__grid {
        display: grid !important;
        grid-template-columns: 1fr 1.15fr !important;
        gap: 48px !important;
        align-items: center !important;
    }

    /* Content side */
    .cat-hero__content {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        padding: 8px 0 !important;
    }
    .cat-hero__eyebrow {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        width: fit-content !important;
        font-family: var(--font-lausanne), sans-serif !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 2px !important;
        color: #8a7038 !important;
        background: rgba(179,150,89,0.12) !important;
        border: 1px solid rgba(179,150,89,0.3) !important;
        padding: 8px 16px !important;
        border-radius: 9999px !important;
        margin-bottom: 24px !important;
    }
    .cat-hero__title {
        font-family: var(--font-lausanne), sans-serif !important;
        font-size: 56px !important;
        font-weight: 700 !important;
        letter-spacing: -2px !important;
        line-height: 1.02 !important;
        color: var(--color-ink-black, #1d1e21) !important;
        margin: 0 0 18px !important;
    }
    .cat-hero__summary {
        font-family: var(--font-lausanne), sans-serif !important;
        font-size: 16px !important;
        line-height: 1.65 !important;
        color: rgba(29,30,33,0.62) !important;
        max-width: 480px !important;
        margin: 0 0 34px !important;
    }
    .cat-hero__stats {
        display: flex !important;
        align-items: center !important;
        gap: 28px !important;
        flex-wrap: wrap !important;
    }
    .cat-hero__stat {
        display: flex !important;
        flex-direction: column !important;
        line-height: 1 !important;
        padding-right: 28px !important;
        border-right: 1px solid var(--color-stone, #d7d6d4) !important;
    }
    .cat-hero__stat-num {
        font-family: var(--font-lausanne), sans-serif !important;
        font-size: 42px !important;
        font-weight: 700 !important;
        letter-spacing: -1.5px !important;
        color: var(--color-ink-black, #1d1e21) !important;
    }
    .cat-hero__stat-label {
        font-family: var(--font-lausanne), sans-serif !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 1.5px !important;
        color: rgba(29,30,33,0.45) !important;
        margin-top: 9px !important;
    }
    .cat-hero__cta {
        display: inline-flex !important;
        align-items: center !important;
        gap: 9px !important;
        font-family: var(--font-lausanne), sans-serif !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        letter-spacing: 0.3px !important;
        color: #fff !important;
        background: var(--color-ink-black, #1d1e21) !important;
        padding: 15px 26px !important;
        border-radius: 9999px !important;
        text-decoration: none !important;
        transition: all 0.25s ease !important;
    }
    .cat-hero__cta:hover {
        background: #b39659 !important;
        color: #1d1e21 !important;
        transform: translateY(-2px) !important;
    }
    .cat-hero__cta i { transition: transform 0.25s ease !important; }
    .cat-hero__cta:hover i { transform: translateY(3px) !important; }

    /* Video side */
    .cat-hero__visual {
        position: relative !important;
        border-radius: 26px !important;
        overflow: hidden !important;
        aspect-ratio: 16 / 9 !important;
        border: 1px solid var(--color-stone, #d7d6d4) !important;
        background: #1d1e21 !important;
    }
    .cat-hero__video {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        z-index: 0 !important;
        pointer-events: none !important;
    }
    .cat-hero__badge {
        position: absolute !important;
        top: 20px !important;
        left: 20px !important;
        z-index: 2 !important;
        width: 52px !important;
        height: 52px !important;
        border-radius: 16px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 20px !important;
        color: #1d1e21 !important;
        background: rgba(255,255,255,0.92) !important;
        backdrop-filter: blur(8px) !important;
        box-shadow: 0 8px 24px rgba(15,16,18,0.2) !important;
    }

    /* -------- Catalog Section + Head -------- */
    .catalog-section { padding: 96px 16px 100px !important; }
    .catalog-section > .container { padding-left: 24px !important; padding-right: 24px !important; }
    .catalog-head { max-width: 640px !important; margin: 0 auto 44px !important; }
    .catalog-head__badge {
        display: inline-block !important;
        font-family: var(--font-lausanne), sans-serif !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 2px !important;
        color: #8a7038 !important;
        background: rgba(179,150,89,0.12) !important;
        border: 1px solid rgba(179,150,89,0.3) !important;
        padding: 7px 16px !important;
        border-radius: 9999px !important;
        margin-bottom: 18px !important;
    }
    .catalog-head__title {
        font-family: var(--font-lausanne), sans-serif !important;
        font-size: 40px !important;
        font-weight: 700 !important;
        letter-spacing: -1.2px !important;
        color: var(--color-ink-black, #1d1e21) !important;
        margin: 0 0 12px !important;
    }
    .catalog-head__sub {
        font-family: var(--font-lausanne), sans-serif !important;
        font-size: 15.5px !important;
        line-height: 1.65 !important;
        color: rgba(29,30,33,0.6) !important;
        margin: 0 !important;
    }

    /* -------- Toolbar: Search + Filters -------- */
    .catalog-toolbar {
        background: #ffffff !important;
        border: 1px solid var(--color-stone, #d7d6d4) !important;
        border-radius: 20px !important;
        padding: 18px 20px !important;
    }
    .search-input-wrapper { position: relative !important; }
    .search-icon {
        position: absolute !important;
        left: 18px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        color: rgba(29,30,33,0.4) !important;
        font-size: 14px !important;
    }
    .catalog-search-control {
        width: 100% !important;
        font-family: var(--font-lausanne), sans-serif !important;
        font-size: 14.5px !important;
        color: var(--color-ink-black, #1d1e21) !important;
        background: rgba(29,30,33,0.03) !important;
        border: 1px solid var(--color-stone, #d7d6d4) !important;
        border-radius: 9999px !important;
        padding: 13px 20px 13px 44px !important;
        transition: all 0.25s ease !important;
    }
    .catalog-search-control:focus {
        outline: none !important;
        border-color: #b39659 !important;
        background: #fff !important;
        box-shadow: 0 0 0 4px rgba(179,150,89,0.12) !important;
    }
    .filter-btn {
        font-family: var(--font-lausanne), sans-serif !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        color: var(--color-ink-black, #1d1e21) !important;
        background: transparent !important;
        border: 1px solid var(--color-stone, #d7d6d4) !important;
        border-radius: 9999px !important;
        padding: 10px 20px !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        white-space: nowrap !important;
    }
    .filter-btn:hover { border-color: #1d1e21 !important; }
    .filter-btn.active {
        background: var(--color-ink-black, #1d1e21) !important;
        border-color: var(--color-ink-black, #1d1e21) !important;
        color: #fff !important;
    }

    /* -------- Course Card (immersive full-bleed) -------- */
    .ccard {
        position: relative !important;
        display: block !important;
        aspect-ratio: 3 / 4 !important;
        border-radius: 22px !important;
        overflow: hidden !important;
        border: 1px solid var(--color-stone, #d7d6d4) !important;
        background: #1d1e21 !important;
        text-decoration: none !important;
        transition: transform 0.4s cubic-bezier(0.16,0.84,0.44,1), box-shadow 0.4s ease !important;
    }
    .ccard:hover { transform: translateY(-8px) !important; box-shadow: 0 32px 60px rgba(29,30,33,0.22) !important; }

    .ccard__img, .ccard__ph {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 0 !important;
    }
    .ccard__img { object-fit: cover !important; transition: transform 0.7s cubic-bezier(0.16,0.84,0.44,1) !important; }
    .ccard:hover .ccard__img { transform: scale(1.07) !important; }
    .ccard__ph {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 46px !important;
        color: rgba(255,255,255,0.22) !important;
        background: linear-gradient(135deg, #2a2b2f 0%, #3a3c42 100%) !important;
    }

    .ccard__scrim {
        position: absolute !important;
        inset: 0 !important;
        z-index: 1 !important;
        background: linear-gradient(180deg, rgba(15,16,18,0) 28%, rgba(15,16,18,0.4) 58%, rgba(15,16,18,0.93) 100%) !important;
        transition: background 0.4s ease !important;
    }
    .ccard:hover .ccard__scrim { background: linear-gradient(180deg, rgba(15,16,18,0.08) 18%, rgba(15,16,18,0.55) 50%, rgba(15,16,18,0.96) 100%) !important; }

    /* Top row: level chip + arrow */
    .ccard__top {
        position: absolute !important;
        top: 18px !important;
        left: 18px !important;
        right: 18px !important;
        z-index: 3 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    .ccard__chip {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        font-family: var(--font-lausanne), sans-serif !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        color: #1d1e21 !important;
        background: rgba(255,255,255,0.92) !important;
        backdrop-filter: blur(6px) !important;
        padding: 7px 12px !important;
        border-radius: 9999px !important;
    }
    .ccard__chip i { color: #b39659 !important; }
    .ccard__go {
        width: 38px !important;
        height: 38px !important;
        border-radius: 9999px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 13px !important;
        color: #fff !important;
        background: rgba(255,255,255,0.15) !important;
        border: 1px solid rgba(255,255,255,0.3) !important;
        backdrop-filter: blur(6px) !important;
        transform: translateX(6px) !important;
        opacity: 0 !important;
        transition: all 0.35s ease !important;
    }
    .ccard:hover .ccard__go { transform: none !important; opacity: 1 !important; background: #b39659 !important; border-color: #b39659 !important; color: #1d1e21 !important; }

    /* Bottom content */
    .ccard__body {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 2 !important;
        padding: 26px 24px !important;
    }
    .ccard__title {
        font-family: var(--font-lausanne), sans-serif !important;
        font-size: 22px !important;
        font-weight: 700 !important;
        letter-spacing: -0.6px !important;
        line-height: 1.15 !important;
        color: #ffffff !important;
        margin: 0 0 8px !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }
    .ccard__desc {
        font-family: var(--font-lausanne), sans-serif !important;
        font-size: 13.5px !important;
        line-height: 1.55 !important;
        color: rgba(255,255,255,0.72) !important;
        margin: 0 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        max-height: 0 !important;
        opacity: 0 !important;
        transition: max-height 0.4s ease, opacity 0.4s ease, margin 0.4s ease !important;
    }
    .ccard:hover .ccard__desc { max-height: 60px !important; opacity: 1 !important; margin: 0 0 16px !important; }
    .ccard__price { display: flex !important; flex-direction: column !important; gap: 3px !important; margin-top: 16px !important; }
    .ccard__price-from {
        font-family: var(--font-lausanne), sans-serif !important;
        font-size: 10px !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
        color: rgba(255,255,255,0.55) !important;
    }
    .ccard__price-val {
        display: inline-flex !important;
        align-items: baseline !important;
        gap: 5px !important;
        font-family: var(--font-lausanne), sans-serif !important;
        font-size: 21px !important;
        font-weight: 700 !important;
        color: #ffffff !important;
    }
    .ccard__price-val small { font-size: 11px !important; font-weight: 700 !important; color: #e6c98a !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; }

    /* -------- Pagination -------- */
    #catalog .pagination { display: flex !important; gap: 6px !important; padding: 0 !important; }
    #catalog .page-item .page-link {
        font-family: var(--font-lausanne), sans-serif !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        color: var(--color-ink-black, #1d1e21) !important;
        background: #fff !important;
        border: 1px solid var(--color-stone, #d7d6d4) !important;
        border-radius: 12px !important;
        padding: 9px 15px !important;
        transition: all 0.2s ease !important;
    }
    #catalog .page-item .page-link:hover { border-color: #1d1e21 !important; }
    #catalog .page-item.active .page-link {
        background: var(--color-ink-black, #1d1e21) !important;
        border-color: var(--color-ink-black, #1d1e21) !important;
        color: #fff !important;
    }
    #catalog .page-item.disabled .page-link { opacity: 0.4 !important; }

    @media (max-width: 991px) {
        .cat-hero__grid { grid-template-columns: 1fr !important; gap: 28px !important; }
        .cat-hero__visual { order: -1 !important; }
        .cat-hero__title { font-size: 40px !important; }
        .catalog-head__title { font-size: 32px !important; }
    }
    @media (max-width: 767px) {
        .catalog-section { padding: 56px 16px 72px !important; }
        .cat-hero__title { font-size: 32px !important; }
    }

/* ============================================================
   ABOUT US PAGE  (centralized)
   ============================================================ */
    /* ============================================================
       ABOUT US — EDITORIAL REDESIGN
       ============================================================ */
    .page-about-us .about-page-section {
        background-color: var(--color-butter-cream, #f9e5b1) !important;
        position: relative !important;
        padding: 96px 0 !important;
        overflow: hidden !important;
    }
    .about-page-section .container {
        max-width: 1160px !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    /* ---- Centered header ---- */
    .about-head { max-width: 740px !important; margin: 0 auto 60px !important; text-align: center !important; position: relative !important; z-index: 0 !important; }
    .about-head::before {
        content: '' !important;
        position: absolute !important;
        top: -60px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 560px !important;
        max-width: 92% !important;
        height: 340px !important;
        background: radial-gradient(ellipse at center, rgba(179, 150, 89, 0.22) 0%, rgba(249, 229, 177, 0) 68%) !important;
        z-index: -1 !important;
        pointer-events: none !important;
    }
    .about-deco { position: absolute !important; color: #b39659 !important; opacity: 0.45 !important; pointer-events: none !important; }
    .about-deco--1 { top: 4px !important; left: 10% !important; font-size: 13px !important; animation: aboutFloat 5s ease-in-out infinite !important; }
    .about-deco--2 { bottom: 6px !important; right: 12% !important; font-size: 19px !important; opacity: 0.4 !important; animation: aboutFloat 6.5s ease-in-out infinite 0.6s !important; }
    .about-deco--3 { top: 48px !important; right: 18% !important; font-size: 10px !important; opacity: 0.35 !important; animation: aboutFloat 7s ease-in-out infinite 1.2s !important; }
    @keyframes aboutFloat { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-9px) rotate(8deg); } }
    .about-title-underline { display: block !important; width: 66px !important; height: 4px !important; margin: 6px auto 22px !important; border-radius: 9999px !important; background: linear-gradient(90deg, #b39659, #e6c98a) !important; }
    .about-title {
        font-family: var(--font-lausanne), sans-serif !important;
        font-size: 50px !important;
        font-weight: 700 !important;
        letter-spacing: -1.8px !important;
        line-height: 1.04 !important;
        color: var(--color-ink-black, #1d1e21) !important;
        margin: 20px 0 16px !important;
    }
    .about-subtitle {
        font-family: var(--font-lausanne), sans-serif !important;
        font-size: 16.5px !important;
        line-height: 1.65 !important;
        color: rgba(29, 30, 33, 0.6) !important;
        max-width: 580px !important;
        margin: 0 auto 28px !important;
    }
    .about-cta {
        display: inline-flex !important;
        align-items: center !important;
        gap: 9px !important;
        font-family: var(--font-lausanne), sans-serif !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        letter-spacing: 0.3px !important;
        color: #ffffff !important;
        background: var(--color-ink-black, #1d1e21) !important;
        border-radius: 9999px !important;
        padding: 15px 30px !important;
        text-decoration: none !important;
        transition: all 0.25s ease !important;
    }
    .about-cta:hover { background: #b39659 !important; color: #1d1e21 !important; transform: translateY(-2px) !important; }
    .about-cta i { transition: transform 0.2s ease !important; }
    .about-cta:hover i { transform: translateX(4px) !important; }

    /* ---- Cinematic video band ---- */
    .about-video-showcase {
        position: relative !important;
        max-width: 1040px !important;
        margin: 0 auto 80px !important;
        aspect-ratio: 16 / 9 !important;
        border-radius: 28px !important;
        border: 1px solid var(--color-stone, #d7d6d4) !important;
        overflow: hidden !important;
        background-color: #0b0c0e !important;
        box-shadow: 0 26px 64px rgba(29, 30, 33, 0.12) !important;
        transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.45s ease !important;
    }
    .about-video-showcase:hover { transform: translateY(-6px) !important; box-shadow: 0 34px 74px rgba(29, 30, 33, 0.16) !important; }
    .about-video-element { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }
    .video-glass-badge {
        position: absolute !important;
        top: 20px !important;
        left: 20px !important;
        z-index: 5 !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 7px !important;
        background: rgba(255, 255, 255, 0.9) !important;
        border: 1px solid rgba(29, 30, 33, 0.08) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        padding: 7px 16px !important;
        border-radius: 9999px !important;
        font-family: var(--font-lausanne), sans-serif !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        letter-spacing: 1.5px !important;
        text-transform: uppercase !important;
        color: var(--color-ink-black, #1d1e21) !important;
    }

    /* ---- Feature pillars (full-width row of 4) ---- */
    .about-pillars-head { text-align: center !important; margin: 0 auto 36px !important; }
    .about-pillars-eyebrow {
        display: inline-block !important;
        font-family: var(--font-lausanne), sans-serif !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 2px !important;
        color: #8a7038 !important;
        background: rgba(179, 150, 89, 0.12) !important;
        border: 1px solid rgba(179, 150, 89, 0.3) !important;
        padding: 7px 16px !important;
        border-radius: 9999px !important;
        margin-bottom: 14px !important;
    }
    .about-pillars-title {
        font-family: var(--font-lausanne), sans-serif !important;
        font-size: 28px !important;
        font-weight: 700 !important;
        letter-spacing: -0.8px !important;
        color: var(--color-ink-black, #1d1e21) !important;
        margin: 0 !important;
    }

    /* Pillars image stage (1:1 photo backdrop) */
    .about-pillars-stage {
        position: relative !important;
        border-radius: 30px !important;
        overflow: hidden !important;
        padding: 40px !important;
        background-image: url('../art-classes/i5.jpg') !important;
        background-size: cover !important;
        background-position: center !important;
        border: 1px solid var(--color-stone, #d7d6d4) !important;
    }
    .about-pillars-stage::before {
        content: '' !important;
        position: absolute !important;
        inset: 0 !important;
        background: linear-gradient(180deg, rgba(15, 16, 18, 0.5) 0%, rgba(15, 16, 18, 0.74) 100%) !important;
        z-index: 0 !important;
    }
    .about-pillars-stage > .row { position: relative !important; z-index: 1 !important; }

    .about-pillar-card {
        background: rgba(17, 18, 21, 0.5) !important;
        backdrop-filter: blur(14px) !important;
        -webkit-backdrop-filter: blur(14px) !important;
        border: 1px solid rgba(255, 255, 255, 0.14) !important;
        border-radius: 20px !important;
        padding: 30px 28px !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease !important;
    }
    .about-pillar-card:hover {
        transform: translateY(-8px) !important;
        border-color: #b39659 !important;
        box-shadow: 0 28px 52px rgba(20, 21, 24, 0.35) !important;
    }
    .pillar-icon-wrapper {
        width: 50px !important;
        height: 50px !important;
        background-color: rgba(179, 150, 89, 0.18) !important;
        color: #e6c98a !important;
        border-radius: 14px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 19px !important;
        margin-bottom: 22px !important;
        transition: all 0.3s ease !important;
    }
    .about-pillar-card:hover .pillar-icon-wrapper { background-color: #b39659 !important; color: #ffffff !important; transform: scale(1.06) !important; }
    .pillar-title {
        font-family: var(--font-lausanne), sans-serif !important;
        font-size: 17px !important;
        font-weight: 700 !important;
        letter-spacing: -0.3px !important;
        color: #ffffff !important;
        margin: 0 0 10px !important;
        transition: color 0.3s ease !important;
    }
    .about-pillar-card:hover .pillar-title { color: #e6c98a !important; }
    .pillar-desc {
        font-family: var(--font-lausanne), sans-serif !important;
        font-size: 13.5px !important;
        line-height: 1.6 !important;
        color: rgba(255, 255, 255, 0.62) !important;
        margin: 0 !important;
    }

    /* ---- Entrance effects ---- */
    @keyframes aboutFadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
    @keyframes aboutFadeIn { from { opacity: 0; } to { opacity: 1; } }
    .about-head .modern-badge { animation: aboutFadeUp 0.6s ease both !important; }
    .about-title { animation: aboutFadeUp 0.7s ease 0.06s both !important; }
    .about-subtitle { animation: aboutFadeUp 0.7s ease 0.13s both !important; }
    .about-cta { animation: aboutFadeIn 0.7s ease 0.2s both !important; }
    .about-video-showcase { animation: aboutFadeIn 0.85s ease 0.12s both !important; }
    .about-page-section .row > div { animation: aboutFadeUp 0.6s ease both !important; }
    .about-page-section .row > div:nth-child(1) { animation-delay: 0.05s !important; }
    .about-page-section .row > div:nth-child(2) { animation-delay: 0.13s !important; }
    .about-page-section .row > div:nth-child(3) { animation-delay: 0.21s !important; }
    .about-page-section .row > div:nth-child(4) { animation-delay: 0.29s !important; }

    @media (max-width: 991px) {
        .page-about-us .about-page-section { padding: 64px 0 !important; }
        .about-title { font-size: 38px !important; }
        .about-video-showcase { margin-bottom: 56px !important; }
    }
    @media (max-width: 575px) {
        .page-about-us .about-page-section { padding: 48px 0 !important; }
        .about-title { font-size: 30px !important; }
        .about-pillars-title { font-size: 24px !important; }
        .about-pillars-stage { padding: 18px !important; }
        .about-pillar-card { padding: 24px !important; }
    }

/* ============================================================
   HEADER / NAV / PRELOADER / CART DRAWER (layout)  (centralized)
   ============================================================ */
/* Prevent horizontal overflow globally */
html, body {
  overflow-x: hidden !important;
  width: 100% !important;
}
.page-wrapper {
  overflow: hidden !important;
  width: 100% !important;
}

/* ============================================================
   MODERN PRELOADER - GLOW HAUS ACADEMY EDITORIAL REVEAL
   ============================================================ */
.artify-preloader {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background-color: var(--color-warm-bone, #fef9f3) !important;
  z-index: 999999999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) scale(1) !important;
  transition: transform 1.2s cubic-bezier(0.85, 0, 0.15, 1), opacity 1.2s cubic-bezier(0.85, 0, 0.15, 1), visibility 1.2s !important;
}
.artify-preloader.hidden {
  transform: translateY(-100%) scale(0.98) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.preloader-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 350px !important;
  row-gap: 24px !important;
}

/* Star logo animation wrapper */
.preloader-logo-wrap {
  position: relative !important;
  width: 90px !important;
  height: 90px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.preloader-star-svg {
  width: 100% !important;
  height: 100% !important;
  transform: rotate(0deg) !important;
  animation: preloaderStarRotate 15s linear infinite !important;
}
@keyframes preloaderStarRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.star-track {
  stroke: rgba(29, 30, 33, 0.05) !important;
  stroke-width: 1.5px !important;
  fill: none !important;
}
.star-progress {
  stroke: var(--color-ink-black, #1d1e21) !important;
  stroke-width: 2.5px !important;
  stroke-linecap: round !important;
  fill: none !important;
  transition: stroke-dashoffset 0.15s ease !important;
}
.preloader-center-dot {
  position: absolute !important;
  width: 6px !important;
  height: 6px !important;
  background-color: var(--color-ink-black, #1d1e21) !important;
  border-radius: 50% !important;
  opacity: 0.8 !important;
  animation: preloaderDotPulse 1.5s ease-in-out infinite alternate !important;
}
@keyframes preloaderDotPulse {
  0% { transform: scale(0.8); opacity: 0.5; }
  100% { transform: scale(1.2); opacity: 1; }
}

.preloader-brand {
  font-family: var(--font-lausanne), system-ui, -apple-system, sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
  letter-spacing: 6px !important;
  color: var(--color-ink-black, #1d1e21) !important;
  text-align: center !important;
  opacity: 0.95 !important;
  margin-top: 8px !important;
  animation: preloaderBrandTracking 2s ease-in-out infinite alternate !important;
}
@keyframes preloaderBrandTracking {
  0% { letter-spacing: 5px; opacity: 0.8; }
  100% { letter-spacing: 7px; opacity: 1; }
}
.preloader-status {
  font-family: "Playfair Display", "Didot", Georgia, serif !important;
  font-size: 32px !important;
  font-weight: 300 !important;
  color: var(--color-ink-black, #1d1e21) !important;
  opacity: 0.85 !important;
  display: flex !important;
  align-items: baseline !important;
}
.preloader-suffix {
  font-size: 14px !important;
  font-weight: 600 !important;
  margin-left: 2px !important;
  opacity: 0.7 !important;
}


/* ============================================================
   DISABLE STICKY CLONE HEADER based on guidelines
   ============================================================ */
.sticky-header, 
.main-header.is-sticky, 
.main-header.sticky-active {
  display: none !important;
  height: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ============================================================
   STICKY HEADER & LAYOUT REVAMP - EDITORIAL DARK THEME
   ============================================================ */
.main-header {
  background-color: var(--color-ink-black, #1d1e21) !important;
  background-image: none !important;
  border-bottom: 1px solid rgba(254, 249, 243, 0.08) !important;
  box-shadow: none !important;
  padding: 16px 0 !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 10000 !important;
  transition: padding 0.3s ease, border-color 0.3s ease !important;
}
.main-header.scrolled {
  padding: 10px 0 !important;
  border-bottom-color: var(--color-butter-cream, #f9e5b1) !important;
}
.main-header .container {
  max-width: 1320px !important;
}
.main-header .container,
.main-header .header-wrapper {
  background-color: transparent !important;
  background-image: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Logo styling constraints */
.logo-section .logo-link {
  display: inline-flex !important;
  align-items: center !important;
}
.logo-img {
  max-height: 40px !important;
  width: auto !important;
  background-color: #ffffff !important;
  padding: 6px 12px !important;
  border-radius: 8px !important;
  display: block !important;
  transition: transform 0.25s ease !important;
}
.logo-img:hover {
  transform: scale(1.03) !important;
}

/* Center navigation layout & Sliding Cursor logic */
.center-nav {
  display: flex !important;
  justify-content: center !important;
}
.center-nav .nav-list {
  display: flex !important;
  align-items: center !important;
  column-gap: 4px !important;
  margin: 0 !important;
  padding: 4px !important;
  list-style: none !important;
  position: relative !important;
  background-color: rgba(254, 249, 243, 0.03) !important;
  border: 1px solid rgba(254, 249, 243, 0.08) !important;
  border-radius: 9999px !important;
  height: 48px !important;
}
.center-nav .nav-list .nav-item {
  position: relative !important;
  z-index: 2 !important;
}

/* Link Style */
.main-header .center-nav .nav-list .nav-link {
  font-family: var(--font-lausanne), sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: var(--color-warm-bone, #fef9f3) !important;
  mix-blend-mode: normal !important;
  padding: 8px 18px !important;
  border: none !important;
  background: transparent !important;
  transition: color 0.25s ease, opacity 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  column-gap: 6px !important;
  border-radius: 9999px !important;
  opacity: 0.8 !important;
}
.main-header .center-nav .nav-list .nav-link:hover {
  opacity: 1 !important;
  color: var(--color-butter-cream, #f9e5b1) !important;
}

/* Make hovered or active link text dark so it stands out against the light butter-cream nav cursor */
.main-header .center-nav .nav-list .nav-item:hover .nav-link,
.main-header .center-nav .nav-list .nav-link.active {
  color: var(--color-ink-black, #1d1e21) !important;
  opacity: 1 !important;
}

/* Dropdown Caret Styling */
.nav-caret {
  stroke: currentColor !important;
  transition: transform 0.25s ease !important;
}
.dropdown:hover .nav-caret,
.nav-item:hover .nav-caret {
  transform: rotate(180deg) !important;
}

/* Nav sliding cursor */
.nav-list .nav-cursor {
  position: absolute !important;
  top: 4px !important;
  bottom: 4px !important;
  height: calc(100% - 8px) !important;
  background-color: var(--color-butter-cream, #f9e5b1) !important;
  border-radius: 9999px !important;
  z-index: 1 !important;
  pointer-events: none !important;
  opacity: 0;
  transition: left 0.3s cubic-bezier(0.25, 1, 0.5, 1), width 0.3s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.2s ease !important;
}

/* ============================================================
   PREMIUM EDITORIAL MEGA DROPDOWN MENU
   ============================================================ */
.main-header .dropdown-menu.mega-menu {
  position: absolute !important;
  top: 100% !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(15px) !important;
  width: 580px !important;
  background-color: var(--color-ink-black, #1d1e21) !important;
  border: 1px solid rgba(254, 249, 243, 0.08) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  padding: 24px !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.25s !important;
  z-index: 1000 !important;
  display: block !important;
  mix-blend-mode: normal !important;
}
.main-header .dropdown-menu.mega-menu::before {
  content: '' !important;
  position: absolute !important;
  top: -20px !important;
  left: 0 !important;
  width: 100% !important;
  height: 20px !important;
  background: transparent !important;
}
.main-header .center-nav .nav-list .nav-item.dropdown:hover .dropdown-menu.mega-menu {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(-50%) translateY(6px) !important;
}
.main-header .mega-menu-grid {
  display: grid !important;
  grid-template-columns: 1.25fr 1fr !important;
  gap: 24px !important;
}
.main-header .mega-menu .mega-title {
  display: block !important;
  font-family: var(--font-lausanne), sans-serif !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 1.2px !important;
  color: var(--color-butter-cream, #f9e5b1) !important;
  opacity: 0.6 !important;
  margin-bottom: 16px !important;
}
.main-header .mega-menu .mega-links {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  row-gap: 8px !important;
}
.main-header .mega-menu .mega-link-item {
  display: flex !important;
  align-items: center !important;
  column-gap: 12px !important;
  text-decoration: none !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  transition: background-color 0.2s ease, padding-left 0.2s ease !important;
  background-color: transparent !important;
}
.main-header .mega-menu .mega-link-item:hover {
  background-color: rgba(254, 249, 243, 0.04) !important;
  padding-left: 16px !important;
}
.main-header .mega-menu .mega-link-item .item-title {
  font-family: var(--font-lausanne), sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  color: var(--color-warm-bone, #fef9f3) !important;
  transition: color 0.2s ease !important;
}
.main-header .mega-menu .mega-link-item:hover .item-title {
  color: var(--color-butter-cream, #f9e5b1) !important;
}
.main-header .mega-menu .item-icon-box {
  width: 36px !important;
  height: 36px !important;
  border-radius: 6px !important;
  background-color: rgba(254, 249, 243, 0.04) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  color: var(--color-warm-bone, #fef9f3) !important;
  transition: color 0.2s ease, background-color 0.2s ease !important;
}
.main-header .mega-menu .mega-link-item:hover .item-icon-box {
  color: var(--color-butter-cream, #f9e5b1) !important;
  background-color: rgba(254, 249, 243, 0.08) !important;
}
.main-header .mega-menu .item-content {
  display: flex !important;
  flex-direction: column !important;
}
.main-header .mega-menu .item-desc {
  font-family: var(--font-lausanne), sans-serif !important;
  font-size: 11px !important;
  color: var(--color-warm-bone, #fef9f3) !important;
  opacity: 0.5 !important;
  transition: opacity 0.2s ease !important;
}
.main-header .mega-menu .mega-link-item:hover .item-desc {
  opacity: 0.8 !important;
}

/* Featured card layout inside mega menu */
.main-header .mega-menu .featured-card {
  background-image: linear-gradient(rgba(29, 30, 33, 0.7), rgba(29, 30, 33, 0.85)), url('../images/featured_banner.webp') !important;
  background-size: cover !important;
  background-position: center center !important;
  border: 1px solid rgba(254, 249, 243, 0.08) !important;
  color: var(--color-warm-bone, #fef9f3) !important;
  padding: 24px !important;
  border-radius: 12px !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  transition: transform 0.25s ease, border-color 0.25s ease !important;
}
.main-header .mega-menu .featured-card:hover {
  transform: translateY(-2px) !important;
}
.main-header .mega-menu .featured-card .card-badge {
  display: inline-block !important;
  align-self: flex-start !important;
  background-color: var(--color-butter-cream, #f9e5b1) !important;
  color: var(--color-ink-black, #1d1e21) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
  margin-bottom: 12px !important;
}
.main-header .mega-menu .featured-card .card-title {
  font-family: var(--font-lausanne), sans-serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  line-height: 1.3 !important;
  margin-bottom: 8px !important;
  color: var(--color-warm-bone, #fef9f3) !important;
}
.main-header .mega-menu .featured-card .card-desc {
  font-size: 12px !important;
  color: var(--color-warm-bone, #fef9f3) !important;
  opacity: 0.8 !important;
  line-height: 1.45 !important;
  margin-bottom: 16px !important;
}
.main-header .mega-menu .featured-card .card-btn-inline {
  color: var(--color-butter-cream, #f9e5b1) !important;
  font-size: 12px !important;
  font-weight: 700;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  column-gap: 6px !important;
  transition: column-gap 0.2s ease !important;
}
.main-header .mega-menu .featured-card .card-btn-inline:hover {
  column-gap: 10px !important;
}
.main-header .mega-menu .mega-menu-footer {
  border-top: 1px solid rgba(254, 249, 243, 0.08) !important;
  margin-top: 20px !important;
  padding-top: 14px !important;
  display: flex !important;
  justify-content: center !important;
}
.main-header .mega-menu .mega-footer-link {
  font-family: var(--font-lausanne), sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--color-warm-bone, #fef9f3) !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  column-gap: 6px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}
.main-header .mega-menu .mega-footer-link:hover {
  color: var(--color-butter-cream, #f9e5b1) !important;
}

/* ============================================================
   SELECTORS, ACTION BUTTONS, DROPDOWNS
   ============================================================ */
.selector-btn, .account-btn, .cart-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  column-gap: 8px !important;
  background-color: rgba(254, 249, 243, 0.03) !important;
  border: 1px solid rgba(254, 249, 243, 0.08) !important;
  border-radius: 9999px !important;
  padding: 8px 16px !important;
  font-family: var(--font-lausanne), sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  color: var(--color-warm-bone, #fef9f3) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: none !important;
  height: 40px !important;
}
.selector-btn:hover, .account-btn:hover, .cart-btn:hover {
  background-color: var(--color-butter-cream, #f9e5b1) !important;
  border-color: var(--color-butter-cream, #f9e5b1) !important;
  color: var(--color-ink-black, #1d1e21) !important;
}
.selector-btn:hover svg, .account-btn:hover svg {
  color: var(--color-ink-black, #1d1e21) !important;
}
.selector-btn:hover .account-ico, .account-btn:hover .account-ico {
  color: var(--color-ink-black, #1d1e21) !important;
}
.cart-btn:hover i {
  color: var(--color-ink-black, #1d1e21) !important;
}
.account-ico {
  color: var(--color-warm-bone, #fef9f3) !important;
  transition: color 0.2s ease !important;
}
.cart-btn i {
  color: var(--color-warm-bone, #fef9f3) !important;
  transition: color 0.2s ease !important;
}

/* Dropdown override - Higher specificity to block theme overrides */
.main-header .dropdown-menu {
  display: block !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  background-color: var(--color-ink-black, #1d1e21) !important;
  border: 1px solid rgba(254, 249, 243, 0.08) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  padding: 6px !important;
  margin-top: 8px !important;
  z-index: 99999 !important;
  transform: translateY(8px) !important;
  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.2s !important;
  mix-blend-mode: normal !important;
}
.main-header .dropdown-menu-end {
  right: 0 !important;
  left: auto !important;
}
.main-header .dropdown-menu::before {
  content: '' !important;
  position: absolute !important;
  top: -15px !important;
  left: 0 !important;
  width: 100% !important;
  height: 15px !important;
  background: transparent !important;
}
.main-header .hover-dropdown:hover > .dropdown-menu,
.main-header .dropdown.show > .dropdown-menu,
.main-header .dropdown:hover > .dropdown-menu {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

/* Fix: Dropdown Item Visibility override */
.main-header .dropdown-menu li a.dropdown-item,
.main-header .dropdown-menu .dropdown-item {
  font-family: var(--font-lausanne), sans-serif !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  color: var(--color-warm-bone, #fef9f3) !important;
  padding: 8px 16px !important;
  display: flex !important;
  align-items: center !important;
  column-gap: 8px !important;
  border-radius: 9999px !important;
  transition: all 0.2s ease !important;
}
.main-header .dropdown-menu li a.dropdown-item:hover,
.main-header .dropdown-menu li a.dropdown-item.active,
.main-header .dropdown-menu .dropdown-item:hover,
.main-header .dropdown-menu .dropdown-item.active {
  background-color: var(--color-butter-cream, #f9e5b1) !important;
  color: var(--color-ink-black, #1d1e21) !important;
}

.main-header .dropdown-menu .dd-icon {
  width: 14px !important;
  font-size: 12px !important;
  color: var(--color-warm-bone, #fef9f3) !important;
  opacity: 0.6 !important;
}
.main-header .dropdown-menu li a.dropdown-item:hover .dd-icon,
.main-header .dropdown-menu li a.dropdown-item.active .dd-icon {
  color: var(--color-ink-black, #1d1e21) !important;
  opacity: 1 !important;
}
.main-header .dropdown-menu .dd-check {
  margin-left: auto !important;
  font-size: 10px !important;
  color: var(--color-warm-bone, #fef9f3) !important;
}
.main-header .dropdown-menu li a.dropdown-item:hover .dd-check,
.main-header .dropdown-menu li a.dropdown-item.active .dd-check {
  color: var(--color-ink-black, #1d1e21) !important;
}

/* Account specific Dropdown headers */
.main-header .account-dropdown .account-head {
  padding: 10px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  row-gap: 4px !important;
}
.main-header .account-dropdown .account-head__name {
  font-family: var(--font-lausanne) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  color: var(--color-warm-bone) !important;
}
.main-header .account-dropdown .account-head__credits {
  font-family: var(--font-lausanne) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  color: var(--color-butter-cream) !important;
}
.main-header .dropdown-divider {
  border-top: 1px solid rgba(254, 249, 243, 0.08) !important;
  margin: 6px 0 !important;
}
.main-header .dropdown-menu li a.dropdown-item.account-register-btn,
.main-header .dropdown-menu .account-register-btn {
  border: 1px solid rgba(254, 249, 243, 0.15) !important;
  margin: 6px 8px !important;
  width: calc(100% - 16px) !important;
  justify-content: center !important;
  background-color: rgba(254, 249, 243, 0.03) !important;
}
.main-header .dropdown-menu li a.dropdown-item.account-register-btn:hover,
.main-header .dropdown-menu .account-register-btn:hover {
  background-color: var(--color-butter-cream, #f9e5b1) !important;
  color: var(--color-ink-black, #1d1e21) !important;
  border-color: var(--color-butter-cream, #f9e5b1) !important;
}

/* Mobile Nav Toggler */
.mobile-nav-toggler {
  color: var(--color-warm-bone, #fef9f3) !important;
  font-size: 20px !important;
  cursor: pointer !important;
  transition: transform 0.2s ease !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
}
.mobile-nav-toggler:hover {
  transform: scale(1.05);
}

/* Mobile Menu Side Drawer positioning & colors */
.mobile-menu {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  width: 320px !important;
  max-width: 100% !important;
  height: 100vh !important;
  z-index: 999999 !important;
  background-color: var(--color-ink-black, #1d1e21) !important;
  border-right: 1px solid rgba(254, 249, 243, 0.08) !important;
  transform: translateX(-105%) !important;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
  padding: 40px 24px !important;
  box-shadow: none !important;
  visibility: hidden !important;
}
body.mobile-menu-visible .mobile-menu {
  transform: translateX(0) !important;
  visibility: visible !important;
}
.mobile-menu .nav-logo img {
  max-height: 40px !important;
  width: auto !important;
  background-color: #ffffff !important;
  padding: 6px 12px !important;
  border-radius: 8px !important;
}
.mobile-menu .menu-backdrop {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background-color: rgba(0, 0, 0, 0.5) !important;
  z-index: -1 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: all 0.3s ease !important;
}
body.mobile-menu-visible .mobile-menu .menu-backdrop {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(0) !important;
  left: 320px !important;
  width: calc(100vw - 320px) !important;
}
.mobile-menu .upper-box {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-bottom: 1px solid rgba(254, 249, 243, 0.08) !important;
  padding-bottom: 20px !important;
}
.mobile-menu .close-btn {
  font-size: 20px !important;
  color: var(--color-warm-bone, #fef9f3) !important;
  cursor: pointer !important;
  transition: transform 0.2s ease !important;
}
.mobile-menu .close-btn:hover {
  transform: rotate(90deg) !important;
}
.mobile-menu .navigation {
  list-style: none !important;
  margin: 32px 0 0 0 !important;
  padding: 0 !important;
}
.mobile-menu .navigation li {
  position: relative !important;
  display: block !important;
  border-bottom: 1px solid rgba(254, 249, 243, 0.08) !important;
}
.mobile-menu .navigation li a {
  display: block !important;
  padding: 16px 0 !important;
  font-family: var(--font-lausanne), sans-serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  color: var(--color-warm-bone, #fef9f3) !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  letter-spacing: 0.5px !important;
  transition: color 0.2s ease, padding-left 0.2s ease !important;
}
.mobile-menu .navigation li a:hover {
  color: var(--color-butter-cream, #f9e5b1) !important;
  padding-left: 8px !important;
}

/* Slide-out Cart Drawer panel styling */
.cartcanvas__info {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  width: 420px !important;
  max-width: 100% !important;
  height: 100% !important;
  background-color: var(--color-ink-black, #1d1e21) !important;
  border-left: 1px solid rgba(254, 249, 243, 0.08) !important;
  z-index: 99999999 !important;
  transform: translateX(105%) !important;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
  padding: 40px 24px !important;
  pointer-events: auto !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
}
.cartcanvas__info.info-open {
  transform: translateX(0) !important;
}

.offcanvas__overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background-color: rgba(0, 0, 0, 0.5) !important;
  z-index: 9999999 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: all 0.3s ease !important;
  pointer-events: auto !important;
}
.offcanvas__overlay.overlay-open {
  opacity: 1 !important;
  visibility: visible !important;
}

.cart-list li {
  list-style: none !important;
  background-color: rgba(254, 249, 243, 0.03) !important;
  border: 1px solid rgba(254, 249, 243, 0.08) !important;
  border-radius: var(--radius-cards, 16px) !important;
  padding: 16px !important;
  display: flex !important;
  align-items: center !important;
  column-gap: 16px !important;
  position: relative !important;
  margin-bottom: 16px !important;
  transition: border-color 0.2s ease !important;
}
.cart-list li:hover {
  border-color: var(--color-butter-cream, #f9e5b1) !important;
}
.cart-list li .remove-item {
  color: var(--color-warm-bone, #fef9f3) !important;
  opacity: 0.4 !important;
  transition: opacity 0.2s ease, transform 0.2s ease !important;
}
.cart-list li .remove-item:hover {
  opacity: 1 !important;
  color: var(--color-butter-cream, #f9e5b1) !important;
  transform: scale(1.1) !important;
}
.cart-thumb {
  width: 60px !important;
  height: 60px !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  border: 1px solid rgba(254, 249, 243, 0.08) !important;
}
.cart-thumb--credits {
  background-color: var(--color-butter-cream, #f9e5b1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  color: var(--color-ink-black, #1d1e21) !important;
}
.cart-info a {
  font-family: var(--font-lausanne), sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  color: var(--color-warm-bone, #fef9f3) !important;
  line-height: 1.3 !important;
  text-decoration: none !important;
}
.cart-info a:hover {
  color: var(--color-butter-cream, #f9e5b1) !important;
  text-decoration: underline !important;
}
.cart-info .badge {
  background-color: var(--color-butter-cream, #f9e5b1) !important;
  color: var(--color-ink-black, #1d1e21) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
  border: none !important;
  align-self: flex-start !important;
  margin-top: 2px !important;
}

.cartcanvas__close {
  background-color: rgba(254, 249, 243, 0.03) !important;
  border: 1px solid rgba(254, 249, 243, 0.08) !important;
  color: var(--color-warm-bone, #fef9f3) !important;
  transition: all 0.2s ease !important;
}
.cartcanvas__close:hover {
  background-color: var(--color-butter-cream, #f9e5b1) !important;
  border-color: var(--color-butter-cream, #f9e5b1) !important;
  color: var(--color-ink-black, #1d1e21) !important;
}
.cartcanvas__close i {
  color: var(--color-warm-bone, #fef9f3) !important;
  transition: color 0.2s ease !important;
}
.cartcanvas__close:hover i {
  color: var(--color-ink-black, #1d1e21) !important;
}

/* Premium Shopping Bag circular button and absolute badge */
.main-header .cart-btn {
  position: relative !important;
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: rgba(254, 249, 243, 0.03) !important;
  border: 1px solid rgba(254, 249, 243, 0.08) !important;
  color: var(--color-warm-bone, #fef9f3) !important;
  transition: all 0.2s ease !important;
}
.main-header .cart-btn:hover {
  background-color: var(--color-butter-cream, #f9e5b1) !important;
  border-color: var(--color-butter-cream, #f9e5b1) !important;
  color: var(--color-ink-black, #1d1e21) !important;
}
.main-header .cart-btn i {
  color: var(--color-warm-bone, #fef9f3) !important;
  font-size: 16px !important;
  margin: 0 !important;
  transition: color 0.2s ease !important;
}
.main-header .cart-btn:hover i {
  color: var(--color-ink-black, #1d1e21) !important;
}
.main-header .cart-btn .cart-badge {
  position: absolute !important;
  top: -4px !important;
  right: -4px !important;
  background-color: var(--color-butter-cream, #f9e5b1) !important;
  color: var(--color-ink-black, #1d1e21) !important;
  font-family: var(--font-lausanne), sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  min-width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid var(--color-ink-black, #1d1e21) !important;
  padding: 0 !important;
  line-height: 1 !important;
  z-index: 10 !important;
  transition: transform 0.2s ease !important;
}
.main-header .cart-btn:hover .cart-badge {
  transform: scale(1.05) !important;
}

/* ============================================================
   RESPONSIVENESS AND MOBILE VIEW OVERRIDES
   ============================================================ */
@media (max-width: 991px) {
  .logo-img {
    max-height: 36px !important;
    padding: 4px 8px !important;
  }
  .main-header {
    padding: 12px 0 !important;
  }
  .mobile-nav-toggler {
    display: flex !important;
  }
  .right-actions > *:not(:last-child) {
    border-right: none !important;
    padding-right: 0 !important;
  }
}
@media (max-width: 767px) {
  .right-actions {
    column-gap: 8px !important;
  }
    .selector-btn, .account-btn {
      padding: 6px 12px !important;
      font-size: 11px !important;
      height: auto !important;
      column-gap: 4px !important;
    }
}

/* ============================================================
   SIDE CART DRAWER — REVAMP
   ============================================================ */
.cartcanvas__info { padding: 32px 24px !important; }
.cartcanvas__info .cartcanvas__content { display: flex !important; flex-direction: column !important; height: 100% !important; }

/* Force light headings/text on the dark drawer (global h1-h6 rule paints them ink-black) */
.cartcanvas__info h1, .cartcanvas__info h2, .cartcanvas__info h3,
.cartcanvas__info h4, .cartcanvas__info h5, .cartcanvas__info h6 {
  color: var(--color-warm-bone, #fef9f3) !important;
}
.cartcanvas__info p { color: var(--color-warm-bone, #fef9f3) !important; }
.cartcanvas__info .cart-info a { color: var(--color-warm-bone, #fef9f3) !important; }

/* Item rows */
.cart-list li { padding: 14px !important; border-radius: 14px !important; }
.cart-thumb, .cart-thumb--credits { width: 56px !important; height: 56px !important; flex-shrink: 0 !important; }
.cart-thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }

/* Remove button -> visible circular control (top-right of every item, incl. credits) */
.cart-list li .remove-item {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  margin: 0 !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 9999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(254, 249, 243, 0.1) !important;
  border: 1px solid rgba(254, 249, 243, 0.25) !important;
  color: var(--color-warm-bone, #fef9f3) !important;
  opacity: 1 !important;
  z-index: 6 !important;
}
.cart-list li .remove-item:hover {
  background: #c0392b !important;
  border-color: #c0392b !important;
  color: #ffffff !important;
  opacity: 1 !important;
  transform: none !important;
}
.cart-list li .remove-item i { font-size: 11px !important; }

/* Footer action buttons — visible on the dark drawer */
.cartcanvas__info .btn-primary {
  background-color: var(--color-butter-cream, #f9e5b1) !important;
  color: var(--color-ink-black, #1d1e21) !important;
  border: 1px solid var(--color-butter-cream, #f9e5b1) !important;
  border-radius: 9999px !important;
  font-family: var(--font-lausanne), sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
}
.cartcanvas__info .btn-primary:hover {
  background-color: #cbb380 !important;
  border-color: #cbb380 !important;
  color: var(--color-ink-black, #1d1e21) !important;
  transform: translateY(-1px) !important;
}
.cartcanvas__info .btn-secondary {
  background-color: transparent !important;
  color: var(--color-warm-bone, #fef9f3) !important;
  border: 1px solid rgba(254, 249, 243, 0.25) !important;
  border-radius: 9999px !important;
  font-family: var(--font-lausanne), sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
}
.cartcanvas__info .btn-secondary:hover {
  background-color: rgba(254, 249, 243, 0.06) !important;
  border-color: var(--color-warm-bone, #fef9f3) !important;
  color: #ffffff !important;
}

/* ============================================================
   FOOTER (layout)  (centralized)
   ============================================================ */
/* Prevent horizontal overflow globally */
html, body {
  overflow-x: hidden !important;
  width: 100% !important;
}
.page-wrapper {
  overflow: hidden !important;
  width: 100% !important;
}

/* ============================================================
   FOUR-COLUMN EDITORIAL FOOTER — GLOW HAUS
   ============================================================ */
.af-footer {
  background-color: var(--color-ink-black, #1d1e21) !important;
  color: var(--color-warm-bone, #fef9f3) !important;
  font-family: var(--font-lausanne), sans-serif !important;
  padding: 80px 0 32px 0 !important;
  position: relative !important;
  overflow: hidden !important;
}
.af-footer a {
  color: var(--color-warm-bone, #fef9f3) !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
}
.af-footer a:hover { color: var(--color-butter-cream, #f9e5b1) !important; }
.af-container {
  max-width: 1320px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  width: 100% !important;
}

/* ---- Four-column grid ---- */
.footer-grid {
  display: grid !important;
  grid-template-columns: 1.6fr 1fr 1fr 1.7fr !important;
  gap: 56px !important;
  padding-bottom: 48px !important;
  border-bottom: 1px solid rgba(254, 249, 243, 0.1) !important;
}
.footer-col { display: flex !important; flex-direction: column !important; }

/* Col 1 — Brand */
.footer-logo-img {
  max-height: 64px !important;
  width: auto !important;
  background-color: #ffffff !important;
  padding: 8px 16px !important;
  border-radius: 10px !important;
  display: block !important;
  align-self: flex-start !important;
}
.footer-brand-desc {
  margin: 22px 0 0 0 !important;
  font-size: 13.5px !important;
  line-height: 1.65 !important;
  color: rgba(254, 249, 243, 0.6) !important;
  max-width: 300px !important;
}
.footer-social-row { display: flex !important; column-gap: 18px !important; margin-top: 24px !important; flex-wrap: wrap !important; }
.footer-social-link {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: rgba(254, 249, 243, 0.5) !important;
  transition: color 0.25s ease !important;
}
.footer-social-link:hover { color: var(--color-butter-cream, #f9e5b1) !important; }

/* Col 2 & 3 — Link columns */
.footer-column-title {
  font-family: var(--font-lausanne), sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  color: var(--color-butter-cream, #f9e5b1) !important;
  margin: 0 0 20px 0 !important;
}
.footer-links-list { list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex !important; flex-direction: column !important; row-gap: 12px !important; }
.footer-links-list li a {
  font-size: 13.5px !important;
  color: rgba(254, 249, 243, 0.72) !important;
  transition: all 0.25s ease !important;
  display: inline-block !important;
}
.footer-links-list li a:hover { color: var(--color-butter-cream, #f9e5b1) !important; transform: translateX(5px) !important; }

/* Col 4 — Newsletter + contact */
.footer-newsletter-desc { font-size: 13px !important; line-height: 1.55 !important; color: rgba(254, 249, 243, 0.6) !important; margin: 0 0 16px 0 !important; }
.footer-newsletter-form {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  background-color: rgba(254, 249, 243, 0.05) !important;
  border: 1px solid rgba(254, 249, 243, 0.1) !important;
  border-radius: 9999px !important;
  padding: 4px 4px 4px 18px !important;
  transition: border-color 0.25s ease !important;
}
.footer-newsletter-form:focus-within { border-color: var(--color-butter-cream, #f9e5b1) !important; }
.footer-newsletter-input {
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  padding: 10px 48px 10px 0 !important;
  font-family: var(--font-lausanne), sans-serif !important;
  font-size: 13px !important;
  color: var(--color-warm-bone, #fef9f3) !important;
}
.footer-newsletter-input:focus { outline: none !important; box-shadow: none !important; }
.footer-newsletter-input::placeholder { color: var(--color-warm-bone, #fef9f3) !important; opacity: 0.35 !important; }
.footer-newsletter-btn {
  position: absolute !important;
  right: 4px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background-color: var(--color-butter-cream, #f9e5b1) !important;
  color: var(--color-ink-black, #1d1e21) !important;
  border: none !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: transform 0.2s ease, background-color 0.2s ease !important;
}
.af-footer .footer-newsletter-btn:hover,
.af-footer .footer-newsletter-form button.footer-newsletter-btn:hover {
  transform: translateY(-50%) scale(1.05) !important;
  background-color: #ffffff !important;
  color: var(--color-ink-black, #1d1e21) !important;
}
.suces_rinfo { font-size: 12px !important; margin-top: 8px !important; color: var(--color-butter-cream, #f9e5b1) !important; }

.footer-contact-mini { display: flex !important; flex-direction: column !important; row-gap: 12px !important; margin-top: 24px !important; }
.footer-contact-mini a, .footer-contact-mini span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  font-size: 13px !important;
  color: rgba(254, 249, 243, 0.75) !important;
}
.footer-contact-mini i { color: var(--color-butter-cream, #f9e5b1) !important; font-size: 13px !important; width: 16px !important; text-align: center !important; }

/* ---- Bottom bar: copyright + payment ---- */
.footer-bottom {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 18px !important;
  margin-top: 28px !important;
  padding-top: 4px !important;
}
.footer-copyright { font-size: 12.5px !important; color: rgba(254, 249, 243, 0.55) !important; }
.footer-copyright a { font-weight: 700 !important; color: rgba(254, 249, 243, 0.82) !important; }
.footer-payment-icons img { max-height: 26px !important; width: auto !important; opacity: 0.9 !important; transition: none !important; }

/* Scroll To Top */
.scroll-to-top {
  position: fixed !important;
  bottom: 24px !important;
  left: 24px !important;
  right: auto !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background-color: var(--color-ink-black, #1d1e21) !important;
  border: 1px solid rgba(254, 249, 243, 0.15) !important;
  color: var(--color-warm-bone, #fef9f3) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  z-index: 999999 !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
}
.scroll-to-top:hover {
  background-color: var(--color-butter-cream, #f9e5b1) !important;
  color: var(--color-ink-black, #1d1e21) !important;
  transform: translateY(-4px) !important;
}

@media (max-width: 991px) {
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 40px !important; }
  .footer-brand { grid-column: span 2 !important; }
  .footer-newsletter { grid-column: span 2 !important; }
}
@media (max-width: 576px) {
  .af-footer { padding: 56px 0 28px 0 !important; }
  .footer-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .footer-brand, .footer-newsletter { grid-column: span 1 !important; }
  .footer-brand-desc { max-width: 100% !important; }
  .footer-bottom { flex-direction: column-reverse !important; text-align: center !important; justify-content: center !important; gap: 16px !important; }
}

/* ============================================================
   BREADCRUMB COMPONENT  (centralized)
   ============================================================ */
    /* ============================================================
       PREMIUM LIGHT CINEMATIC BREADCRUMB BANNER (Right-Aligned)
       ============================================================ */

    .premium-breadcrumb-banner {
        position: relative;
        padding: 100px 0;
        margin-bottom: 48px;
        background-color: var(--color-warm-bone, #fef9f3); /* Warm fallback */
        border-bottom: 1px solid var(--color-stone, #d7d6d4);
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: flex-end; /* Align right side */
        text-align: right;
    }

    /* Background video styles - stretched to fit container completely */
    .breadcrumb-video-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 1;
        pointer-events: none;
    }

    /* Luxury Light Gradient Overlay */
    .breadcrumb-video-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(254, 249, 243, 0.45) 0%, rgba(254, 249, 243, 0.75) 100%);
        z-index: 2;
    }

    /* Content container layout - align children to the right */
    .breadcrumb-content-container {
        position: relative;
        z-index: 3;
        display: flex;
        flex-direction: column;
        align-items: flex-end; /* Align elements to the right */
        justify-content: center;
        text-align: right;
    }

    /* Breadcrumb route trail list */
    .breadcrumb-nav-list {
        display: inline-flex;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: wrap;
        list-style: none;
        padding: 8px 24px;
        margin: 0 0 24px auto; /* Float container to the right */
        gap: 4px;
        background: rgba(255, 255, 255, 0.65);
        border: 1px solid rgba(29, 30, 33, 0.08);
        border-radius: 9999px;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        box-shadow: 0 4px 20px rgba(29, 30, 33, 0.03);
    }

    .breadcrumb-nav-item {
        font-family: var(--font-lausanne), sans-serif;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        display: flex;
        align-items: center;
        color: rgba(29, 30, 33, 0.7);
    }

    .breadcrumb-nav-item a {
        color: rgba(29, 30, 33, 0.7);
        text-decoration: none;
        display: flex;
        align-items: center;
        transition: color 0.3s ease;
    }

    .breadcrumb-nav-item a:hover {
        color: var(--color-butter-cream, #b39659);
    }

    .breadcrumb-nav-item.active {
        color: e2aa1a;
        font-weight: 700;
    }

    .breadcrumb-nav-separator {
        display: flex;
        align-items: center;
        color: rgba(29, 30, 33, 0.3);
        font-size: 8px;
        margin: 0 8px;
    }

    /* Page title and description */
    .breadcrumb-header-group {
        max-width: 800px;
        margin-left: auto; /* Float group to the right */
        margin-right: 0;
        text-align: right;
    }

    .breadcrumb-page-title {
        font-family: var(--font-lausanne), sans-serif;
        font-size: 48px;
        font-weight: 700;
        line-height: 1.15;
        letter-spacing: -1px;
        color: var(--color-ink-black, #1d1e21);
        margin: 0 0 16px 0;
        text-align: right;
        animation: revealText 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
    }

    .breadcrumb-page-description {
        font-family: var(--font-lausanne), sans-serif;
        font-size: 15px;
        font-weight: 500;
        line-height: 1.65;
        color: rgba(29, 30, 33, 0.7);
        margin-left: auto; /* Float description to the right */
        margin-right: 0;
        max-width: 600px;
        text-align: right;
        animation: revealText 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) 0.15s forwards;
    }

    @keyframes revealText {
        0% {
            opacity: 0;
            transform: translateY(16px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @media (max-width: 768px) {
        .premium-breadcrumb-banner {
            padding: 80px 0;
            justify-content: center;
            text-align: center;
        }

        .breadcrumb-content-container {
            align-items: center;
            text-align: center;
        }

        .breadcrumb-nav-list {
            padding: 6px 16px;
            margin: 0 auto 20px auto;
        }

        .breadcrumb-header-group {
            margin: 0 auto;
            text-align: center;
        }

        .breadcrumb-page-title {
            font-size: 36px;
            letter-spacing: -0.8px;
            text-align: center;
        }

        .breadcrumb-page-description {
            font-size: 13.5px;
            margin: 0 auto;
            text-align: center;
        }
    }

/* ============================================================
   INDEX — HERO SECTION  (centralized)
   ============================================================ */
/* ============================================================
   SHADER CENTERALIZED HERO WITH COLLAGE IMAGES
   ============================================================ */
.artify-hero-shader {
  position: relative !important;
  overflow: hidden !important;
  width: 100% !important;
  min-height: 85vh !important;
  height: 760px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: var(--color-warm-bone, #fef9f3) !important;
  border-bottom: 1px solid var(--color-stone, #d7d6d4) !important;
  z-index: 10 !important;
  padding: 80px 0 !important;
}

.absolute-filters {
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
}

/* Flowing Mesh Gradient Background */
.shader-mesh-bg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important;
  background-color: #fef9f3 !important;
  background-image: 
    radial-gradient(at 0% 0%, rgba(249, 229, 177, 0.4) 0px, transparent 50%),
    radial-gradient(at 50% 0%, rgba(255, 255, 255, 0.6) 0px, transparent 50%),
    radial-gradient(at 100% 0%, rgba(249, 229, 177, 0.3) 0px, transparent 50%),
    radial-gradient(at 0% 100%, rgba(215, 214, 212, 0.35) 0px, transparent 50%),
    radial-gradient(at 100% 100%, rgba(249, 229, 177, 0.45) 0px, transparent 50%) !important;
  background-size: 200% 200% !important;
  animation: meshFlow 20s ease infinite alternate !important;
}

@keyframes meshFlow {
  0% { background-position: 0% 0% !important; }
  50% { background-position: 100% 50% !important; }
  100% { background-position: 50% 100% !important; }
}

.shader-hero-container {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Main Layout Wrapper */
.shader-hero-layout-centered {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  gap: 48px !important;
}

/* Centered content block */
.shader-hero-content-center {
  position: relative !important;
  z-index: 1 !important;
  flex: 1 !important;
  max-width: 580px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  animation: shaderFadeUp 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
}
.shader-hero-content-center::before {
  content: '' !important;
  position: absolute !important;
  top: 46% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 640px !important;
  max-width: 130% !important;
  height: 440px !important;
  background: radial-gradient(ellipse at center, rgba(179, 150, 89, 0.16) 0%, rgba(249, 229, 177, 0) 68%) !important;
  z-index: -1 !important;
  pointer-events: none !important;
}

/* Glass Badge tag */
.shader-hero-badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 8px 18px !important;
  border-radius: 9999px !important;
  background: rgba(179, 150, 89, 0.12) !important;
  border: 1px solid rgba(179, 150, 89, 0.3) !important;
  margin-bottom: 24px !important;
  position: relative !important;
  overflow: hidden !important;
}
.shader-hero-badge span {
  font-family: var(--font-lausanne), sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.2px !important;
  color: #8a7038 !important;
}
.shader-hero-badge-shine {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.4), transparent) !important;
}

/* Title typography */
.shader-hero-title {
  font-family: var(--font-lausanne), sans-serif !important;
  font-size: 60px !important;
  font-weight: 300 !important;
  line-height: 1.15 !important;
  letter-spacing: -1.5px !important;
  color: var(--color-ink-black, #1d1e21) !important;
  margin-bottom: 20px !important;
}
.shader-hero-title .font-italic {
  font-style: italic !important;
  font-weight: 500 !important;
  color: #b39659 !important;
}
.shader-hero-title .font-light {
  font-weight: 300 !important;
}

.shader-hero-subtitle {
  font-family: var(--font-lausanne), sans-serif !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: rgba(29, 30, 33, 0.7) !important;
  font-weight: 400 !important;
  margin-bottom: 32px !important;
  max-width: 480px !important;
}

/* Action Buttons */
.shader-hero-buttons {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  justify-content: center !important;
}
.shader-btn {
  font-family: var(--font-lausanne), sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  padding: 14px 28px !important;
  border-radius: 9999px !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1) !important;
  text-decoration: none !important;
}
.shader-btn--primary {
  background-color: var(--color-ink-black, #1d1e21) !important;
  color: var(--color-warm-bone, #fef9f3) !important;
  border: none !important;
}
.shader-btn--primary:hover {
  background-color: var(--color-butter-cream, #f9e5b1) !important;
  color: var(--color-ink-black, #1d1e21) !important;
  transform: translateY(-2px) !important;
}
.shader-btn--outline {
  background-color: transparent !important;
  color: var(--color-ink-black, #1d1e21) !important;
  border: 1px solid rgba(29, 30, 33, 0.25) !important;
}
.shader-btn--outline:hover {
  background-color: rgba(29, 30, 33, 0.04) !important;
  border-color: var(--color-ink-black, #1d1e21) !important;
  transform: translateY(-2px) !important;
}

/* Floating Images Showcase */
.floating-hero-image {
  position: relative !important;
  width: 250px !important;
  height: 370px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(29, 30, 33, 0.1) !important;
  overflow: hidden !important;
  box-shadow: 0 20px 45px rgba(29, 30, 33, 0.1) !important;
  background-color: #ffffff !important;
  transition: border-color 0.4s ease, box-shadow 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
  z-index: 2 !important;
}
.floating-hero-image::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, transparent 52%, rgba(15, 16, 18, 0.34) 100%) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}
.floating-hero-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
.floating-hero-image--left {
  transform: rotate(-4deg) translateY(-20px) !important;
}
.floating-hero-image--right {
  transform: rotate(4deg) translateY(20px) !important;
}

/* Hover effects for images */
.floating-hero-image:hover {
  border-color: #b39659 !important;
  box-shadow: 0 30px 62px rgba(29, 30, 33, 0.2) !important;
}
.floating-hero-image:hover img {
  transform: scale(1.08) !important;
}

/* Floating Animations */
.animate-float-slow {
  animation: floatSlow 6s ease-in-out infinite alternate !important;
}
.animate-float-fast {
  animation: floatFast 5s ease-in-out infinite alternate !important;
}

@keyframes floatSlow {
  0% { transform: rotate(-4deg) translateY(-20px); }
  100% { transform: rotate(-3deg) translateY(-8px); }
}
@keyframes floatFast {
  0% { transform: rotate(4deg) translateY(20px); }
  100% { transform: rotate(5deg) translateY(8px); }
}

@keyframes shaderFadeUp {
  from {
    opacity: 0 !important;
    transform: translateY(30px) !important;
  }
  to {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
}

/* Third accent image (collage) */
.artify-hero-shader .floating-hero-image--accent {
  position: absolute !important;
  bottom: 44px !important;
  left: 7% !important;
  width: 155px !important;
  height: 205px !important;
  transform: rotate(7deg) !important;
  z-index: 3 !important;
  animation: floatAccent 5.5s ease-in-out infinite alternate !important;
}
@keyframes floatAccent {
  0% { transform: rotate(7deg) translateY(0); }
  100% { transform: rotate(10deg) translateY(-12px); }
}

/* Responsive Styles */
@media (max-width: 1199px) {
  .floating-hero-image {
    width: 200px !important;
    height: 300px !important;
  }
}
@media (max-width: 991px) {
  .artify-hero-shader {
    min-height: auto !important;
    height: auto !important;
    padding: 100px 0 80px 0 !important;
  }
  .shader-hero-layout-centered {
    flex-direction: column !important;
    align-items: center !important;
    gap: 48px !important;
  }
  .shader-hero-content-center {
    order: 1 !important;
  }
  .floating-hero-image {
    width: 260px !important;
    height: 350px !important;
    display: inline-block !important;
    margin: 0 10px !important;
  }
  .floating-hero-image--left {
    transform: rotate(-2deg) !important;
    order: 2 !important;
  }
  .floating-hero-image--right {
    transform: rotate(2deg) !important;
    order: 3 !important;
  }
  .artify-hero-shader .floating-hero-image--accent {
    display: none !important;
  }
  .animate-float-slow, .animate-float-fast {
    animation: none !important;
  }
}
@media (max-width: 767px) {
  .shader-hero-title {
    font-size: 48px !important;
  }
  .floating-hero-image {
    width: 45% !important;
    height: 260px !important;
    margin: 0 !important;
  }
}
@media (max-width: 576px) {
  .shader-hero-title {
    font-size: 38px !important;
  }
  .shader-hero-buttons {
    flex-direction: column !important;
    width: 100% !important;
  }
  .shader-btn {
    width: 100% !important;
    text-align: center !important;
  }
  .floating-hero-image {
    width: 100% !important;
    height: 300px !important;
    margin-bottom: 16px !important;
  }
  .floating-hero-image--right {
    margin-bottom: 0 !important;
  }
}

/* ============================================================
   INDEX — MASTERCLASS STORY  (centralized)
   ============================================================ */
/* ============================================================
   CINEMATIC MASTERCLASS PORTRAIT STORY SECTION (Triptych Layout)
   ============================================================ */
.masterclass-story {
  background-color: var(--color-paper, #fefdfc) !important;
  border-top: 1px solid var(--color-stone, #d7d6d4) !important;
  border-bottom: 1px solid var(--color-stone, #d7d6d4) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Triptych Flex Wrapper */
/* Triptych Flex Wrapper */
.masterclass-triptych {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 48px !important;
  width: 100% !important;
  position: relative !important;
}

/* Wing columns */
.triptych-wing {
  max-width: 360px !important;
  width: 100% !important;
}
.triptych-wing--left {
  text-align: left !important;
}
.triptych-wing--right {
  display: flex !important;
  justify-content: flex-start !important;
}

.triptych-desc {
  font-family: var(--font-lausanne), sans-serif !important;
  font-size: 14.5px !important;
  line-height: 1.7 !important;
  color: rgba(29, 30, 33, 0.7) !important;
  font-weight: 500 !important;
}

/* Center Column: Portrait Video */
.triptych-center {
  position: relative !important;
  z-index: 2 !important;
  width: 320px !important; /* Perfect 9:16 portrait viewport width */
  flex-shrink: 0 !important;
}

.portrait-video-frame {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 9/16 !important;
  border-radius: 30px !important;
  border: 1px solid var(--color-stone, #d7d6d4) !important;
  overflow: hidden !important;
  box-shadow: 0 25px 60px rgba(29, 30, 33, 0.08) !important;
  background-color: #000000 !important;
  z-index: 3 !important;
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
.portrait-video-frame:hover {
  transform: translateY(-6px) scale(1.02) !important;
  box-shadow: 0 35px 80px rgba(29, 30, 33, 0.15) !important;
}
.portrait-video-frame video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
.portrait-video-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.5) 100%) !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

/* Frosted glass controls */
.portrait-controls {
  position: absolute !important;
  bottom: 20px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 6px 14px !important;
  border-radius: 9999px !important;
  background: rgba(254, 249, 243, 0.2) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(254, 249, 243, 0.3) !important;
  z-index: 3 !important;
}
.portrait-control-btn {
  background: transparent !important;
  border: none !important;
  color: var(--color-warm-bone, #fef9f3) !important;
  font-size: 12px !important;
  cursor: pointer !important;
  width: 28px !important;
  height: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  transition: all 0.2s ease !important;
}
.portrait-control-btn:hover {
  background: rgba(254, 249, 243, 0.2) !important;
  color: var(--color-butter-cream, #f9e5b1) !important;
}

/* Accent Glow Ring Behind Player */
.portrait-glow-ring {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 120% !important;
  height: 110% !important;
  background: radial-gradient(circle, rgba(249, 229, 177, 0.3) 0%, rgba(254, 249, 243, 0) 70%) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* Timeline grid on Right Wing */
.triptych-highlight-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 28px !important;
  max-width: 360px !important;
}
.triptych-highlight-item {
  display: flex !important;
  gap: 20px !important;
  align-items: flex-start !important;
}
.triptych-highlight-icon {
  width: 42px !important;
  height: 42px !important;
  border-radius: 10px !important;
  background-color: var(--surface-cream-wash, #fff6f0) !important;
  border: 1px solid var(--color-stone, #d7d6d4) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  color: var(--color-ink-black, #1d1e21) !important;
  flex-shrink: 0 !important;
}
.triptych-highlight-icon--gold {
  color: var(--color-butter-cream, #b39659) !important;
  background-color: rgba(249, 229, 177, 0.15) !important;
}
.triptych-highlight-icon--stone {
  color: var(--color-ink-black, #1d1e21) !important;
  background-color: rgba(215, 214, 212, 0.2) !important;
}
.triptych-highlight-title {
  font-family: var(--font-lausanne), sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--color-ink-black, #1d1e21) !important;
  margin-bottom: 6px !important;
  text-align: left !important;
}
.triptych-highlight-desc {
  font-family: var(--font-lausanne), sans-serif !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: rgba(29, 30, 33, 0.75) !important;
  margin: 0 !important;
  text-align: left !important;
}

/* Responsive adjustment */
@media (max-width: 1199px) {
  .masterclass-triptych {
    gap: 32px !important;
  }
  .triptych-center {
    width: 280px !important;
  }
}
@media (max-width: 991px) {
  .masterclass-triptych {
    flex-direction: column !important;
    align-items: center !important;
    gap: 48px !important;
  }
  .triptych-wing {
    width: 100% !important;
  }
  .triptych-wing--left {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  .triptych-wing--right {
    justify-content: center !important;
  }
  .triptych-highlight-list {
    max-width: 500px !important;
  }
}
@media (max-width: 576px) {
  .triptych-center {
    width: 100% !important;
    max-width: 280px !important;
  }
}

/* ============================================================
   INDEX — CATEGORIES SWIPER  (centralized)
   ============================================================ */
/* ============================================================
   CATEGORIES MODERN SWIPER SECTION (Horizontal Video/Image Cards)
   ============================================================ */
/* Custom spacing to side of the screen */
.category-section .auto-container,
.prduct-info .auto-container {
  max-width: 1340px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 60px !important;
  padding-right: 60px !important;
}
@media (max-width: 768px) {
  .category-section .auto-container,
  .prduct-info .auto-container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

.category-section {
  position: relative !important;
  overflow: hidden !important;
}
.category-section::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(ellipse at 12% -10%, rgba(179, 150, 89, 0.16) 0%, transparent 42%),
    radial-gradient(ellipse at 88% 110%, rgba(179, 150, 89, 0.13) 0%, transparent 45%) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}
.category-section .auto-container { position: relative !important; z-index: 1 !important; }

/* Ensure Swiper slider width is correct and doesn't break page overflow */
.categories-swiper {
  width: 100% !important;
  position: relative !important;
  overflow: hidden !important;
  padding-bottom: 24px !important;
  height: auto !important;
}
.categories-swiper .swiper-wrapper {
  height: auto !important;
  display: flex !important;
}
.categories-swiper .swiper-slide {
  height: auto !important;
}

.category-modern-card {
  background-color: var(--color-warm-bone, #fef9f3) !important;
  border: 1px solid var(--color-stone, #d7d6d4) !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
  width: 100% !important;
}
.category-modern-card:hover {
  transform: translateY(-8px) !important;
  border-color: #b39659 !important;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.35) !important;
}

/* 16:9 Landscape Aspect Ratio for Horizontal Videos */
.category-image-wrapper {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 16/9 !important;
  overflow: hidden !important;
  border-bottom: 1px solid var(--color-stone, #d7d6d4) !important;
}
.category-image-wrapper img,
.category-image-wrapper .category-video-cover {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
.category-modern-card:hover .category-image-wrapper img,
.category-modern-card:hover .category-image-wrapper .category-video-cover {
  transform: scale(1.04) !important;
}

.category-placeholder-gradient {
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(135deg, rgba(249, 229, 177, 0.3) 0%, rgba(215, 214, 212, 0.2) 100%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.category-placeholder-gradient i {
  font-size: 32px !important;
  color: var(--color-ink-black, #1d1e21) !important;
}

/* Centralized Inline Badge */
.category-meta-badge-inline {
  display: inline-flex !important;
  align-items: center !important;
  background: rgba(29, 30, 33, 0.05) !important;
  border: 1px solid rgba(29, 30, 33, 0.08) !important;
  border-radius: 9999px !important;
  padding: 4px 14px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--color-ink-black, #1d1e21) !important;
  width: fit-content !important;
  margin-bottom: 12px !important;
}

.category-body-content {
  padding: 28px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  background-color: var(--color-warm-bone, #fef9f3) !important;
  flex: 1 !important;
}

.category-card-heading {
  font-family: var(--font-lausanne), sans-serif !important;
  font-size: 21px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  margin-bottom: 8px !important;
  width: 100% !important;
}
.category-card-heading a {
  color: var(--color-ink-black, #1d1e21) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}
.category-card-heading a:hover {
  color: var(--color-butter-cream, #b39659) !important;
}

.category-card-summary {
  font-family: var(--font-lausanne), sans-serif !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  color: rgba(29, 30, 33, 0.7) !important;
  margin-bottom: 20px !important;
  width: 100% !important;
  flex: 1 !important;
}

.category-explore-link {
  font-family: var(--font-lausanne), sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  color: var(--color-ink-black, #1d1e21) !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  transition: all 0.25s ease !important;
}
.category-explore-link:hover {
  color: var(--color-butter-cream, #b39659) !important;
  transform: translateX(4px) !important;
}

/* Custom Sleek Bottom Luxury Pill Navigation */
.categories-swiper-bottom-nav {
  margin-top: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 20px !important;
  background: var(--color-warm-bone, #fef9f3) !important;
  border: 1px solid var(--color-stone, #d7d6d4) !important;
  border-radius: 9999px !important;
  padding: 10px 32px !important;
  width: fit-content !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-shadow: 0 4px 15px rgba(29, 30, 33, 0.03) !important;
}
.swiper-button-prev-custom,
.swiper-button-next-custom {
  font-size: 14px !important;
  color: var(--color-ink-black, #1d1e21) !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4px 8px !important;
}
.swiper-button-prev-custom:hover,
.swiper-button-next-custom:hover {
  color: var(--color-butter-cream, #b39659) !important;
  transform: scale(1.15) !important;
}

.nav-divider {
  width: 1px !important;
  height: 20px !important;
  background-color: var(--color-stone, #d7d6d4) !important;
}

/* Category Header Layout Styles */
.category-section-header {
  margin-bottom: 60px !important;
  text-align: center !important;
}
.category-section-header {
  max-width: 640px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.category-badge {
  font-family: var(--font-lausanne), sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  color: #e6c98a !important;
  background: rgba(179, 150, 89, 0.14) !important;
  border: 1px solid rgba(179, 150, 89, 0.3) !important;
  padding: 8px 18px !important;
  border-radius: 9999px !important;
  display: inline-block !important;
  text-align: center !important;
  margin: 0 auto !important;
}
.category-h2 {
  font-family: var(--font-lausanne), sans-serif !important;
  font-size: 40px !important;
  font-weight: 700 !important;
  letter-spacing: -1px !important;
  line-height: 1.2 !important;
  color: #ffffff !important;
  margin-top: 20px !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.category-subtitle {
  font-family: var(--font-lausanne), sans-serif !important;
  font-size: 14.5px !important;
  line-height: 1.65 !important;
  color: rgba(255, 255, 255, 0.6) !important;
  max-width: 540px !important;
  margin: 14px auto 0 auto !important;
  font-weight: 400 !important;
  text-align: center !important;
}

/* ============================================================
   INDEX — COURSES  (centralized)
   ============================================================ */
/* ============================================================
   PROGRAMS / COURSES VERTICAL STACK SECTION
   ============================================================ */
.prduct-info {
  background-color: var(--color-butter-cream, #f9e5b1) !important;
  position: relative !important;
  overflow: hidden !important;
}
.prduct-info .auto-container { position: relative !important; z-index: 1 !important; }

.courses-section-header {
  margin-bottom: 50px !important;
  text-align: center !important;
}

.courses-badge {
  font-family: var(--font-lausanne), sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  color: #8a7038 !important;
  background: rgba(179, 150, 89, 0.12) !important;
  border: 1px solid rgba(179, 150, 89, 0.3) !important;
  padding: 8px 18px !important;
  border-radius: 9999px !important;
  display: inline-block !important;
  text-align: center !important;
  margin: 0 auto !important;
}

.courses-h2 {
  font-family: var(--font-lausanne), sans-serif !important;
  font-size: 40px !important;
  font-weight: 700 !important;
  letter-spacing: -1px !important;
  line-height: 1.2 !important;
  color: var(--color-ink-black, #1d1e21) !important;
  margin-top: 20px !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.courses-subtitle {
  font-family: var(--font-lausanne), sans-serif !important;
  font-size: 14.5px !important;
  line-height: 1.65 !important;
  color: rgba(29, 30, 33, 0.6) !important;
  max-width: 540px !important;
  margin: 14px auto 0 auto !important;
  font-weight: 400 !important;
  text-align: center !important;
}

.courses-vertical-list {
  max-width: 720px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 48px !important;
}

.modern-course-card {
  background-color: #ffffff !important;
  border: 1px solid var(--color-stone, #d7d6d4) !important;
  border-radius: 28px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  transition: all 0.45s cubic-bezier(0.25, 1, 0.5, 1) !important;
  box-shadow: 0 10px 30px rgba(29, 30, 33, 0.04) !important;
  width: 100% !important;
  max-width: 440px !important;
  margin: 14px auto 42px auto !important;
}
.modern-course-card:hover {
  transform: translateY(-8px) !important;
  border-color: #b39659 !important;
  box-shadow: 0 22px 46px rgba(29, 30, 33, 0.1) !important;
}
#toggle-courses-btn:hover {
  background: #b39659 !important;
  color: #1d1e21 !important;
  transform: translateY(-2px) !important;
}

/* Hidden Class for items beyond count of 4 */
.course-item-hidden {
  display: none !important;
}

.course-img-container {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 4/5 !important;
  overflow: hidden !important;
  border-bottom: 1px solid var(--color-stone, #d7d6d4) !important;
}
.course-img-container img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
.modern-course-card:hover .course-img-container img {
  transform: scale(1.05) !important;
}

.course-content {
  padding: 28px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

.course-title {
  font-family: var(--font-lausanne), sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  margin-bottom: 12px !important;
  letter-spacing: -0.5px !important;
}
.course-title a {
  color: var(--color-ink-black, #1d1e21) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}
.course-title a:hover {
  color: var(--color-butter-cream, #b39659) !important;
}

.course-summary {
  font-family: var(--font-lausanne), sans-serif !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  color: rgba(29, 30, 33, 0.65) !important;
  margin-bottom: 30px !important;
  max-width: 580px !important;
}

.course-footer {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  padding-top: 24px !important;
  border-top: 1px solid rgba(29, 30, 33, 0.08) !important;
}

.course-enroll-link {
  font-family: var(--font-lausanne), sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  color: var(--color-ink-black, #1d1e21) !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: all 0.25s ease !important;
}
.course-enroll-link:hover {
  color: var(--color-butter-cream, #b39659) !important;
  transform: translateX(4px) !important;
}

/* ============================================================
   INDEX — TOP-UP (base)  (centralized)
   ============================================================ */
/* ============================================================
   DARK LUXURY POINTS TOP UP SECTION
   ============================================================ */
.points-topup-section {
  background-color: #0b0c0e !important;
  color: #ffffff !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.points-topup-section .modern-badge {
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--color-butter-cream, #b39659) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding: 6px 16px !important;
  letter-spacing: 2px !important;
  display: inline-block !important;
  border-radius: 9999px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}

.points-topup-section .modern-h2 {
  color: #ffffff !important;
  font-size: 38px !important;
  font-weight: 700 !important;
}

.points-topup-section .text-muted {
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
}

/* Learning Benefit Cards */
.learning-benefit-card {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 20px !important;
  padding: 24px 20px !important;
  text-align: center !important;
  transition: all 0.3s ease !important;
  height: 100% !important;
}
.learning-benefit-card:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: var(--color-butter-cream, #b39659) !important;
  transform: translateY(-4px) !important;
}
.learning-benefit-card .benefit-emoji {
  font-size: 24px !important;
  color: var(--color-butter-cream, #b39659) !important;
  margin-bottom: 12px !important;
  display: inline-block !important;
}
.learning-benefit-card .benefit-title {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  margin: 0 !important;
  font-family: var(--font-lausanne), sans-serif !important;
}

/* Pathway Card & Tier System */
.learning-pathway-card {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 28px !important;
  padding: 40px !important;
}
.pathway-title {
  color: #ffffff !important;
  font-family: var(--font-lausanne), sans-serif !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  margin-bottom: 4px !important;
}
.pathway-subtitle {
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 13.5px !important;
  margin: 0 !important;
}

.visual-progression-timeline {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}

.timeline-step {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 20px !important;
  padding: 20px 24px !important;
  display: flex !important;
  gap: 20px !important;
  align-items: center !important;
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
.timeline-step-highlight {
  background: rgba(179, 150, 89, 0.08) !important;
  border-color: var(--color-butter-cream, #b39659) !important;
  box-shadow: 0 10px 30px rgba(179, 150, 89, 0.05) !important;
  transform: scale(1.02) !important;
}

.step-badge {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  flex-shrink: 0 !important;
  transition: all 0.3s ease !important;
}
.timeline-step-highlight .step-badge {
  background: var(--color-butter-cream, #b39659) !important;
  color: #111215 !important;
}

.step-content {
  flex: 1 !important;
}
.step-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 6px !important;
}
.step-title {
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  margin: 0 !important;
  font-family: var(--font-lausanne), sans-serif !important;
}
.step-bonus {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: var(--color-butter-cream, #b39659) !important;
  background: rgba(179, 150, 89, 0.15) !important;
  padding: 4px 10px !important;
  border-radius: 9999px !important;
}
.step-desc {
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 13px !important;
  margin-bottom: 8px !important;
  line-height: 1.5 !important;
}
.step-range {
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Calculator Wrapper */
.luxury-calculator-wrapper {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 28px !important;
  padding: 40px !important;
}

.calc-header-premium {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.calc-title-premium {
  color: #ffffff !important;
  font-family: var(--font-lausanne), sans-serif !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  margin-bottom: 4px !important;
}
.calc-tagline {
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 13.5px !important;
  margin: 0 !important;
}

.calc-currency-badge {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
}

.input-label-premium {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  margin-bottom: 10px !important;
  display: block !important;
}

.premium-amount-input-wrapper {
  position: relative !important;
}
.premium-amount-input {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 16px !important;
  color: #ffffff !important;
  padding: 16px 20px !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  width: 100% !important;
  transition: all 0.3s ease !important;
}
.premium-amount-input:focus {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: var(--color-butter-cream, #b39659) !important;
  outline: none !important;
  box-shadow: 0 0 15px rgba(179, 150, 89, 0.15) !important;
}
.input-currency {
  position: absolute !important;
  right: 20px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 18px !important;
}

/* Points Breakdown Card */
.points-breakdown-card {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 16px !important;
  padding: 20px !important;
}
.breakdown-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 10px !important;
}
.breakdown-label {
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 13.5px !important;
}
.breakdown-value {
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 14.5px !important;
}
.breakdown-value.bonus-badge {
  color: var(--color-butter-cream, #b39659) !important;
}
.breakdown-divider {
  height: 1px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  margin: 12px 0 !important;
}
.breakdown-total .breakdown-label {
  color: #ffffff !important;
  font-weight: 600 !important;
}
.breakdown-value-total {
  color: var(--color-butter-cream, #b39659) !important;
  font-weight: 700 !important;
  font-size: 18px !important;
}

/* Large Display */
.points-display-premium {
  background: linear-gradient(135deg, rgba(179, 150, 89, 0.1) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
  border: 1px solid rgba(179, 150, 89, 0.2) !important;
  border-radius: 20px !important;
  padding: 24px !important;
  text-align: center !important;
}
.points-number {
  font-family: var(--font-lausanne), sans-serif !important;
  font-size: 48px !important;
  font-weight: 700 !important;
  color: var(--color-butter-cream, #b39659) !important;
  display: block !important;
  line-height: 1.1 !important;
  margin-bottom: 4px !important;
}
.points-unit {
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
}

/* Submit Button */
.btn-premium-checkout {
  background: var(--color-butter-cream, #b39659) !important;
  color: #0b0c0e !important;
  font-family: var(--font-lausanne), sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  padding: 16px 32px !important;
  border-radius: 9999px !important;
  border: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
  width: 100% !important;
}
.btn-premium-checkout:hover {
  background: #cbb380 !important;
  transform: translateY(-2px) !important;
}
.btn-premium-checkout .btn-icon {
  transition: transform 0.2s ease !important;
}
.btn-premium-checkout:hover .btn-icon {
  transform: translateX(4px) !important;
}

.trust-indicator {
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.4) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}
.trust-indicator i {
  color: var(--color-butter-cream, #b39659) !important;
}

/* ============================================================
   INDEX — TOP-UP (ditto override)  (centralized)
   ============================================================ */
    /* ============================================================
       TOP-UP SECTION — DITTO OF THE TOP-UP PAGE THEME
       ============================================================ */
    .points-topup-section { background-color: #efe8db !important; padding: 72px 16px 96px !important; border-top: none !important; border-bottom: none !important; }
    .points-topup-section .auto-container { max-width: 1200px !important; margin: 0 auto !important; padding: 0 24px !important; }
    .points-topup-section .modern-badge { background: rgba(179,150,89,0.14) !important; color: #8a7038 !important; border: 1px solid rgba(179,150,89,0.3) !important; padding: 8px 18px !important; border-radius: 9999px !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 2px !important; display: inline-block !important; }

    /* Header */
    .points-topup-section .modern-h2 { font-family: var(--font-lausanne), sans-serif !important; font-size: 40px !important; font-weight: 700 !important; letter-spacing: -1.2px !important; color: var(--color-ink-black, #1d1e21) !important; }
    .points-topup-section .text-muted { color: rgba(29,30,33,0.6) !important; }

    /* Benefits row */
    .learning-benefit-card { background: #ffffff !important; border: 1px solid var(--color-stone, #d7d6d4) !important; border-radius: 18px !important; padding: 24px 18px !important; text-align: center !important; height: 100% !important; transition: transform 0.25s ease, border-color 0.25s ease !important; }
    .learning-benefit-card:hover { transform: translateY(-4px) !important; border-color: #b39659 !important; background: #ffffff !important; box-shadow: none !important; }
    .learning-benefit-card .benefit-emoji { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 52px !important; height: 52px !important; border-radius: 14px !important; background: rgba(179,150,89,0.16) !important; color: #b39659 !important; font-size: 20px !important; margin-bottom: 14px !important; }
    .learning-benefit-card .benefit-title { font-family: var(--font-lausanne), sans-serif !important; font-size: 14px !important; font-weight: 700 !important; color: var(--color-ink-black, #1d1e21) !important; margin: 0 !important; line-height: 1.3 !important; }

    /* Pathway card (left) */
    .learning-pathway-card { background: #ffffff !important; border: 1px solid var(--color-stone, #d7d6d4) !important; border-radius: 24px !important; padding: 32px !important; }
    .pathway-header { display: flex !important; align-items: center !important; gap: 16px !important; }
    .header-icon-modern { width: 48px !important; height: 48px !important; border-radius: 14px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: var(--color-ink-black, #1d1e21) !important; color: #ffffff !important; font-size: 18px !important; flex-shrink: 0 !important; }
    .pathway-title { font-family: var(--font-lausanne), sans-serif !important; font-size: 20px !important; font-weight: 700 !important; letter-spacing: -0.4px !important; color: var(--color-ink-black, #1d1e21) !important; margin: 0 0 2px !important; }
    .pathway-subtitle { font-family: var(--font-lausanne), sans-serif !important; font-size: 13.5px !important; color: rgba(29,30,33,0.55) !important; margin: 0 !important; }

    /* Timeline steps */
    .visual-progression-timeline { display: flex !important; flex-direction: column !important; gap: 14px !important; }
    .timeline-step { display: flex !important; gap: 16px !important; padding: 18px 20px !important; border: 1px solid var(--color-stone, #d7d6d4) !important; border-radius: 16px !important; background: rgba(29,30,33,0.015) !important; transition: all 0.25s ease !important; }
    .timeline-step-highlight { border-color: #b39659 !important; background: rgba(179,150,89,0.08) !important; box-shadow: 0 10px 26px rgba(179,150,89,0.12) !important; }
    .step-badge { width: 34px !important; height: 34px !important; border-radius: 9999px !important; background: var(--color-ink-black, #1d1e21) !important; color: #ffffff !important; font-family: var(--font-lausanne), sans-serif !important; font-weight: 700 !important; font-size: 14px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; }
    .timeline-step-highlight .step-badge { background: #b39659 !important; color: #1d1e21 !important; }
    .step-content { flex: 1 1 auto !important; min-width: 0 !important; }
    .step-header { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; margin-bottom: 4px !important; }
    .step-title { font-family: var(--font-lausanne), sans-serif !important; font-size: 15px !important; font-weight: 700 !important; color: var(--color-ink-black, #1d1e21) !important; margin: 0 !important; }
    .step-bonus { font-family: var(--font-lausanne), sans-serif !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; color: #8a7038 !important; background: rgba(179,150,89,0.14) !important; border: 1px solid rgba(179,150,89,0.3) !important; padding: 4px 10px !important; border-radius: 9999px !important; white-space: nowrap !important; }
    .step-desc { font-family: var(--font-lausanne), sans-serif !important; font-size: 13px !important; line-height: 1.5 !important; color: rgba(29,30,33,0.6) !important; margin: 0 0 8px !important; }
    .step-range { font-family: var(--font-lausanne), sans-serif !important; font-size: 13px !important; color: var(--color-ink-black, #1d1e21) !important; }

    /* Calculator (right, dark premium panel) */
    .luxury-calculator-wrapper { height: 100% !important; }
    .luxury-calculator { background: #0b0c0e !important; border-radius: 24px !important; padding: 32px !important; }
    .calc-header-premium { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 16px !important; }
    .calc-title-premium { font-family: var(--font-lausanne), sans-serif !important; font-size: 22px !important; font-weight: 700 !important; letter-spacing: -0.5px !important; color: #ffffff !important; margin: 0 0 4px !important; }
    .calc-tagline { font-family: var(--font-lausanne), sans-serif !important; font-size: 13px !important; color: rgba(255,255,255,0.5) !important; margin: 0 !important; }
    .calc-currency-badge { width: 44px !important; height: 44px !important; border-radius: 12px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: rgba(179,150,89,0.16) !important; color: #e6c98a !important; font-size: 18px !important; font-weight: 700 !important; flex-shrink: 0 !important; }

    .input-label-premium { display: block !important; font-family: var(--font-lausanne), sans-serif !important; font-size: 12px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; color: rgba(255,255,255,0.6) !important; margin-bottom: 10px !important; }
    .premium-amount-input-wrapper { position: relative !important; }
    .premium-amount-input { width: 100% !important; font-family: var(--font-lausanne), sans-serif !important; font-size: 24px !important; font-weight: 700 !important; color: #ffffff !important; background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(255,255,255,0.14) !important; border-radius: 14px !important; padding: 16px 48px 16px 18px !important; transition: all 0.2s ease !important; }
    .premium-amount-input:focus { outline: none !important; border-color: #b39659 !important; background: rgba(255,255,255,0.08) !important; box-shadow: 0 0 0 4px rgba(179,150,89,0.15) !important; }
    .input-currency { position: absolute !important; right: 18px !important; top: 50% !important; transform: translateY(-50%) !important; color: #e6c98a !important; font-size: 18px !important; font-weight: 700 !important; }

    .points-breakdown-card { background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.1) !important; border-radius: 16px !important; padding: 18px 20px !important; }
    .breakdown-row { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 6px 0 !important; }
    .breakdown-label { font-family: var(--font-lausanne), sans-serif !important; font-size: 13px !important; color: rgba(255,255,255,0.6) !important; }
    .breakdown-value { font-family: var(--font-lausanne), sans-serif !important; font-size: 14px !important; font-weight: 700 !important; color: #ffffff !important; }
    .bonus-badge { color: #1d1e21 !important; background: #e6c98a !important; padding: 3px 10px !important; border-radius: 9999px !important; font-size: 12px !important; }
    .breakdown-divider { height: 1px !important; background: rgba(255,255,255,0.1) !important; margin: 8px 0 !important; }
    .breakdown-total .breakdown-label { color: #ffffff !important; font-weight: 600 !important; }
    .breakdown-value-total { font-family: var(--font-lausanne), sans-serif !important; font-size: 18px !important; font-weight: 700 !important; color: #e6c98a !important; }

    .points-display-premium { text-align: center !important; background: rgba(179,150,89,0.1) !important; border: 1px solid rgba(179,150,89,0.25) !important; border-radius: 16px !important; padding: 20px !important; }
    .points-number { display: block !important; font-family: var(--font-lausanne), sans-serif !important; font-size: 44px !important; font-weight: 700 !important; letter-spacing: -1.5px !important; color: #ffffff !important; line-height: 1 !important; }
    .points-unit { display: block !important; font-family: var(--font-lausanne), sans-serif !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 1.5px !important; color: #e6c98a !important; margin-top: 6px !important; }

    .btn-premium-checkout { position: relative !important; overflow: hidden !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; width: 100% !important; font-family: var(--font-lausanne), sans-serif !important; font-size: 14px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; color: #1d1e21 !important; background: #b39659 !important; border: none !important; border-radius: 9999px !important; padding: 16px 28px !important; cursor: pointer !important; transition: all 0.25s ease !important; }
    .btn-premium-checkout:hover { background: #cbb380 !important; transform: translateY(-2px) !important; }
    .btn-premium-checkout .btn-icon { transition: transform 0.2s ease !important; }
    .btn-premium-checkout:hover .btn-icon { transform: translateX(4px) !important; }
    .btn-shine { display: none !important; }

    .currency-note-calc { color: rgba(255,255,255,0.45) !important; }
    .currency-note-calc strong { color: rgba(255,255,255,0.6) !important; font-weight: 600 !important; }
    .trust-indicator { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; font-family: var(--font-lausanne), sans-serif !important; font-size: 12px !important; color: rgba(255,255,255,0.5) !important; padding-top: 16px !important; border-top: 1px solid rgba(255,255,255,0.1) !important; }
    .trust-indicator i { color: #1f7a52 !important; }

    /* Header design & effects */
    .topup-head { position: relative !important; z-index: 0 !important; }
    .topup-head::before {
        content: '' !important;
        position: absolute !important;
        top: -34px !important; left: 50% !important;
        transform: translateX(-50%) !important;
        width: 540px !important; max-width: 92% !important; height: 300px !important;
        background: radial-gradient(ellipse at center, rgba(179,150,89,0.22) 0%, rgba(239,232,219,0) 66%) !important;
        z-index: -1 !important; pointer-events: none !important;
    }
    .topup-underline { display: block !important; width: 66px !important; height: 4px !important; margin: 16px auto 0 !important; border-radius: 9999px !important; background: linear-gradient(90deg, #b39659, #e6c98a) !important; }
    .topup-deco { position: absolute !important; color: #b39659 !important; opacity: 0.4 !important; pointer-events: none !important; }
    .topup-deco--1 { top: -8px !important; left: 26% !important; font-size: 12px !important; animation: topupFloat 5s ease-in-out infinite !important; }
    .topup-deco--2 { top: 8px !important; right: 26% !important; font-size: 16px !important; opacity: 0.32 !important; animation: topupFloat 6.5s ease-in-out infinite 0.7s !important; }
    @keyframes topupFloat { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-8px) rotate(8deg); } }
    @keyframes topupFadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
    .topup-head .modern-badge { animation: topupFadeUp 0.6s ease both !important; }
    .topup-head .modern-h2 { animation: topupFadeUp 0.7s ease 0.06s both !important; }
    .topup-head .topup-underline { animation: topupFadeUp 0.7s ease 0.12s both !important; }
    .topup-head .text-muted { animation: topupFadeUp 0.7s ease 0.16s both !important; }

    @media (max-width: 575px) {
        .points-topup-section { padding: 48px 12px 64px !important; }
        .learning-pathway-card, .luxury-calculator { padding: 24px !important; }
        .points-topup-section .modern-h2 { font-size: 30px !important; }
        .points-number { font-size: 36px !important; }
    }