/* ==========================================================
   ARIZONA OCCUL — Masterpiece Soft Pastel Green Luxury Theme
   Palette: Soothing Pastel Green (#edf3f0), Mint Mist (#eff5f2),
            Crisp Pure White (#ffffff), Deep Castleton Green (#2d5244)
   ========================================================== */

:root {
    --bg-page: #edf3f0;
    --bg-dark: #edf3f0;
    --bg-surface: #ffffff;
    --bg-card: #ffffff;
    --bg-card-hover: #ffffff;
    
    --mint-primary: #c2dbd0;
    --mint-light: #f6f9f8;
    --mint-vibrant: #418869;
    --mint-bright: #4d806a;
    --mint-glow: rgba(194, 219, 208, 0.4);
    
    --misty-jade: #2d5244;
    --castleton-green: #2d5244;
    --castleton-deep: #1f3a2f;
    --castleton-rich: #3a6454;
    
    --gold-primary: #be9e4d;
    --gold-bright: #c4943c;
    --gold-gradient: linear-gradient(135deg, #2d5244 0%, #3a6454 50%, #2d5244 100%);
    --mint-gradient: linear-gradient(135deg, #c2dbd0 0%, #a4d1ba 100%);
    
    --border-subtle: #c2dbd0;
    --border-card: #d4e7de;
    --border-mint: #c2dbd0;
    --border-gold: #be9e4d;
    
    --text-heading: #2d5244;
    --text-body: #24342d;
    --text-sub: #2d5244;
    --text-muted: #51645c;
    --text-pure-white: #ffffff;
    --text-mint: #2d5244;
    
    --font-heading: 'Cinzel', serif;
    --font-body: 'Poppins', sans-serif;
    
    --shadow-soft: 0 4px 20px rgba(21, 47, 36, 0.06);
    --shadow-card: 0 10px 30px rgba(21, 47, 36, 0.08);
    --shadow-hover: 0 18px 45px rgba(21, 47, 36, 0.14);
    
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-full: 9999px;
    --transition: all 0.28s ease;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--bg-page); color: var(--text-body); font-family: var(--font-body); font-size: 15px; line-height: 1.65; overflow-x: hidden; }
a { color: inherit; text-decoration: none; transition: var(--transition); }
img { max-width: 100%; height: auto; display: block; }
.container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.text-center { text-align: center; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); color: var(--text-heading); font-weight: 700; }
.gold-gradient { background: var(--gold-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; }

/* Global Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 30px; border-radius: var(--radius-full); font-weight: 600; cursor: pointer; border: none; font-size: 0.95rem; text-decoration: none; transition: var(--transition); }
.btn-gold { background: var(--gold-gradient); color: #1f3a2f; font-weight: 700; box-shadow: 0 6px 20px rgba(190, 158, 77, 0.35); }
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(190, 158, 77, 0.55); color: #244335; }
.btn-purple-master { background: var(--purple-deep); color: #ffffff; padding: 13px 32px; border-radius: var(--radius-full); font-weight: 600; border: 1.5px solid var(--border-gold); }
.btn-purple-master:hover { background: var(--purple-velvet); color: var(--gold-bright); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(12, 23, 18, 0.25); }
.full-width { width: 100%; }

/* Section Headings */
.section-heading-center { margin-bottom: 48px; text-align: center; }
.gold-eyebrow { font-size: 0.8rem; font-weight: 700; letter-spacing: 2.2px; color: var(--gold-dark); display: inline-block; margin-bottom: 8px; }
.heading-title { font-size: clamp(2rem, 3.4vw, 2.75rem); color: var(--text-heading); margin-bottom: 10px; line-height: 1.25; }
.heading-sub { font-size: 1.05rem; color: var(--text-muted); max-width: 620px; margin: 0 auto; }
.heading-gold-line { width: 60px; height: 3px; background: var(--gold-gradient); margin: 16px auto 0; border-radius: 2px; }

/* ==========================================================
   ARIZONA OCCUL — Masterpiece Soft Pastel Green Luxury Theme
   Palette: Soothing Pastel Green (#edf3f0), Mint Mist (#eff5f2),
            Crisp Pure White (#ffffff), Deep Castleton Green (#2d5244)
   ========================================================== */

:root {
    --ref-bg-dark: #edf3f0;
    --ref-bg-card: #ffffff;
    --ref-bg-card-hover: #ffffff;
    --ref-mint-primary: #c2dbd0;
    --ref-misty-jade: #2d5244;
    --ref-castleton: #2d5244;
    --ref-emerald-bright: #4d806a;
    --ref-emerald-light: #c2dbd0;
    --ref-emerald-deep: #1f3a2f;
    --ref-gold-primary: #be9e4d;
    --ref-gold-bright: #c4943c;
    --ref-border-mint: #c2dbd0;
    --ref-border-gold: #be9e4d;
    --ref-text-title: #2d5244;
    --ref-text-sub: #2d5244;
    --ref-text-white: #ffffff;
    --ref-font-heading: 'Cinzel', serif;
    --ref-font-body: 'Poppins', sans-serif;
}

body {
    background-color: var(--ref-bg-dark) !important;
    color: var(--ref-text-sub);
    font-family: var(--ref-font-body);
}

.ref-site-root {
    background-color: var(--ref-bg-dark);
    overflow-x: hidden;
}

/* -------------------------------------------------------------
   1. HEADER NAVIGATION
   ------------------------------------------------------------- */
.ref-header {
    background: rgba(246, 249, 248, 0.96) !important;
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border-bottom: 1px solid rgba(194, 219, 208, 0.6) !important;
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 14px 0;
    box-shadow: 0 4px 20px rgba(21, 47, 36, 0.08) !important;
}

.ref-header-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    flex-wrap: nowrap !important;
    box-sizing: border-box !important;
}

.ref-branding,
.site-branding {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}

.ref-branding .ref-logo-link,
.ref-logo-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    text-decoration: none !important;
    flex-shrink: 0 !important;
}

.ref-logo-img {
    height: 40px !important;
    max-height: 40px !important;
    width: auto !important;
    max-width: 44px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
    display: block !important;
}

.ref-brand-titles {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    line-height: 1.15 !important;
}

.ref-brand-name {
    font-family: var(--ref-font-heading), 'Cinzel', serif !important;
    font-size: 1.12rem !important;
    font-weight: 700 !important;
    color: #2d5244 !important;
    letter-spacing: 0.8px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    display: block !important;
}

.ref-brand-tag {
    font-size: 0.65rem !important;
    font-weight: 500 !important;
    color: #4d806a !important;
    letter-spacing: 0.3px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    display: block !important;
}

.ref-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 1 auto !important;
    margin: 0 12px !important;
}

.ref-nav-menu {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 18px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-wrap: nowrap !important;
}

.ref-nav-menu > li {
    margin: 0 !important;
    padding: 0 !important;
}

.ref-nav-menu > li > a {
    color: #2d5244 !important;
    text-decoration: none !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px !important;
    padding: 6px 4px !important;
    position: relative !important;
    white-space: nowrap !important;
    display: inline-block !important;
    transition: color 0.2s ease !important;
}

.ref-nav-menu > li > a:hover,
.ref-nav-menu > li.current-menu-item > a {
    color: #4d806a !important;
}

.ref-nav-menu > li.current-menu-item > a::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 4px !important;
    right: 4px !important;
    height: 2px !important;
    background: #4d806a !important;
    border-radius: 2px !important;
}

.ref-header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-shrink: 0 !important;
}

.ref-account-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: #2d5244 !important;
    text-decoration: none !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    padding: 6px 10px !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}

.ref-account-link:hover {
    color: #4d806a !important;
    background: rgba(194, 219, 208, 0.25) !important;
}

.mobile-menu-toggle {
    display: none !important;
}

.ref-header-btn-book {
    background: linear-gradient(135deg, #be9e4d 0%, #a4843c 100%);
    color: #2b4f41 !important;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.88rem;
    padding: 10px 22px;
    border-radius: 6px;
    letter-spacing: 0.4px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    box-shadow: 0 4px 14px rgba(190, 158, 77, 0.3);
    white-space: nowrap;
}

.ref-header-btn-book:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(190, 158, 77, 0.45);
}

/* -------------------------------------------------------------
   2. HERO SECTION
   ------------------------------------------------------------- */
.ref-hero-section {
    position: relative;
    padding: 70px 0 90px;
    overflow: hidden;
    background-color: #edf3f0 !important;
    background: radial-gradient(circle at 50% 25%, #f6f9f8 0%, #edf3f0 55%, #e1ece7 85%) !important;
}

.ref-hero-cosmic-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.ref-live-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.ref-hero-container {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    align-items: center;
    gap: 40px;
}

.ref-hero-title {
    font-family: var(--ref-font-heading);
    font-size: 3.4rem;
    font-weight: 600;
    line-height: 1.18;
    color: var(--ref-text-title);
    margin-bottom: 22px;
    letter-spacing: 0.5px;
}

.ref-gold-highlight {
    color: var(--ref-gold-primary);
    font-style: italic;
    font-weight: 500;
}

.ref-hero-subtitle {
    font-size: 1.05rem;
    color: var(--ref-text-sub);
    line-height: 1.65;
    max-width: 520px;
    margin-bottom: 34px;
}

.ref-hero-cta-group {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.ref-btn-gold-solid {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #be9e4d 0%, #a4843c 100%);
    color: #2b4f41 !important;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.95rem;
    padding: 13px 26px;
    border-radius: 6px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    box-shadow: 0 6px 20px rgba(190, 158, 77, 0.35);
}

.ref-btn-gold-solid:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(190, 158, 77, 0.5);
}

.ref-btn-gold-outline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(190, 158, 77, 0.05);
    color: var(--ref-gold-bright) !important;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 12px 24px;
    border-radius: 6px;
    border: 1px solid var(--ref-border-gold);
    transition: all 0.25s ease;
}

.ref-btn-gold-outline:hover {
    background: rgba(190, 158, 77, 0.15);
    border-color: var(--ref-gold-primary);
    transform: translateY(-2px);
}

.ref-hero-right {
    display: flex;
    justify-content: center;
    align-items: center;
}

.ref-zodiac-wheel-wrapper {
    position: relative;
    width: 440px;
    height: 440px;
    max-width: 100%;
}

.ref-zodiac-aura {
    position: absolute;
    inset: -20px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(190, 158, 77, 0.25) 0%, rgba(65, 136, 105, 0.2) 50%, transparent 70%);
    filter: blur(25px);
    pointer-events: none;
}

.ref-zodiac-wheel-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 0 0 50px rgba(190, 158, 77, 0.35), inset 0 0 30px rgba(0,0,0,0.8);
    position: relative;
    z-index: 2;
}

@keyframes spinSlow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.animate-spin-slow {
    animation: spinSlow 120s linear infinite;
}

/* -------------------------------------------------------------
   3. TRUST STRIP
   ------------------------------------------------------------- */
.ref-trust-section {
    padding: 20px 0;
    position: relative;
    z-index: 5;
    margin-top: -30px;
}

.ref-trust-bar {
    background: rgba(37, 68, 53, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--ref-border-gold);
    border-radius: 12px;
    padding: 24px 32px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}

.ref-trust-item {
    display: flex;
    align-items: center;
    gap: 16px;
    border-right: 1px solid rgba(190, 158, 77, 0.14);
    padding-right: 15px;
}

.ref-trust-item:last-child {
    border-right: none;
}

.ref-trust-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(190, 158, 77, 0.1);
    border: 1.5px solid var(--ref-border-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ref-gold-bright);
    font-size: 1.15rem;
    flex-shrink: 0;
}

.ref-trust-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 2px;
}

.ref-trust-desc {
    font-size: 0.8rem;
    color: var(--ref-text-sub);
    margin: 0;
}

/* -------------------------------------------------------------
   4. SECTION HEADINGS & ORNAMENTS
   ------------------------------------------------------------- */
.ref-section-heading {
    margin-bottom: 50px;
}

.ref-eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--ref-gold-primary);
    text-transform: uppercase;
    margin-bottom: 10px;
}

.ref-section-title {
    font-family: var(--ref-font-heading);
    font-size: 2.3rem;
    font-weight: 600;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    letter-spacing: 0.5px;
}

.ref-ornament-line {
    display: inline-block;
    width: 60px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--ref-gold-primary));
}

.ref-ornament-line.right {
    background: linear-gradient(90deg, var(--ref-gold-primary), transparent);
}

/* -------------------------------------------------------------
   5. SERVICES CAROUSEL & CARDS
   ------------------------------------------------------------- */
.ref-services-section {
    padding: 90px 0;
    position: relative;
    background-color: #edf3f0 !important;
    background: radial-gradient(circle at 50% 20%, #f6f9f8 0%, #edf3f0 60%, #e1ece7 100%) !important;
}

.ref-carousel-container {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
}

.ref-carousel-arrow {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(190, 158, 77, 0.08);
    border: 1px solid var(--ref-border-gold);
    color: var(--ref-gold-bright);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.25s ease;
    flex-shrink: 0;
}

.ref-carousel-arrow:hover {
    background: var(--ref-gold-primary);
    color: #2b4f41;
    box-shadow: 0 0 16px rgba(190, 158, 77, 0.5);
}

.ref-services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    flex-grow: 1;
}

.ref-service-card {
    background: var(--ref-bg-card);
    border: 1px solid var(--ref-border-gold);
    border-radius: 16px;
    padding: 38px 28px 32px;
    text-align: center;
    transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ref-service-card:hover {
    transform: translateY(-8px);
    border-color: var(--ref-gold-primary);
    box-shadow: 0 16px 45px rgba(190, 158, 77, 0.15);
}

.ref-svc-icon-frame {
    width: 68px;
    height: 68px;
    border-radius: 14px;
    background: rgba(190, 158, 77, 0.1);
    border: 1px solid rgba(190, 158, 77, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: var(--ref-gold-bright);
    margin-bottom: 24px;
    transition: transform 0.3s ease;
}

.ref-service-card:hover .ref-svc-icon-frame {
    transform: scale(1.1);
}

.ref-svc-title {
    font-family: var(--ref-font-heading);
    font-size: 1.35rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 12px;
}

.ref-svc-desc {
    font-size: 0.92rem;
    color: var(--ref-text-sub);
    line-height: 1.6;
    margin-bottom: 26px;
    flex-grow: 1;
}

.ref-svc-link-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 22px !important;
    border-radius: 50px !important;
    background: #2d5244 !important;
    color: #ffffff !important;
    border: 1.5px solid #be9e4d !important;
    text-decoration: none !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 12px rgba(21, 47, 36, 0.25) !important;
    transition: all 0.25s ease !important;
}

.ref-svc-link-btn:hover {
    background: linear-gradient(135deg, #c4943c 0%, #d97706 100%) !important;
    color: #2b4f41 !important;
    border-color: #e6d6a2 !important;
    box-shadow: 0 6px 18px rgba(196, 148, 60, 0.4) !important;
    transform: translateY(-2px) !important;
}

/* -------------------------------------------------------------
   6. HOW IT WORKS
   ------------------------------------------------------------- */
.ref-how-it-works-section {
    padding: 80px 0;
    background-color: #2b4f41 !important;
    background: #2b4f41 !important;
}

.ref-steps-track {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto;
}

.ref-step-node {
    display: flex;
    align-items: center;
    gap: 18px;
    flex: 1;
}

.ref-step-badge-outer {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1.5px solid var(--ref-gold-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f8f5;
    flex-shrink: 0;
}

.ref-step-number {
    font-family: var(--ref-font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ref-gold-bright);
}

.ref-step-icon-box {
    width: 46px;
    height: 46px;
    border-radius: 10px;
    background: rgba(190, 158, 77, 0.08);
    border: 1px solid var(--ref-border-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    color: var(--ref-gold-bright);
    flex-shrink: 0;
}

.ref-step-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 4px;
}

.ref-step-desc {
    font-size: 0.82rem;
    color: var(--ref-text-sub);
    line-height: 1.4;
    margin: 0;
}

.ref-step-connector {
    flex-grow: 1;
    height: 1px;
    border-top: 1px dashed rgba(190, 158, 77, 0.35);
    margin: 0 10px;
}

/* -------------------------------------------------------------
   7. CLARITY BANNER
   ------------------------------------------------------------- */
.ref-clarity-banner-section {
    padding: 70px 0;
    background-color: #2b4f41 !important;
    background: #2b4f41 !important;
}

.ref-clarity-banner-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ref-border-gold);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}

.ref-clarity-bg-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: brightness(0.9);
}

.ref-clarity-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(36, 66, 52, 0.7) 0%, rgba(36, 66, 52, 0.4) 50%, rgba(36, 66, 52, 0.7) 100%);
}

.ref-clarity-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 50px 30px;
    max-width: 650px;
}

.ref-clarity-heading {
    font-family: var(--ref-font-heading);
    font-size: 2.5rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 14px;
}

.ref-gold-italic {
    color: var(--ref-gold-primary);
    font-style: italic;
}

.ref-clarity-sub {
    font-size: 1.05rem;
    color: #ffffff;
    margin-bottom: 28px;
    line-height: 1.6;
}

/* -------------------------------------------------------------
   8. SPIRITUAL COLLECTION
   ------------------------------------------------------------- */
.ref-collection-section {
    padding: 80px 0 90px;
    background-color: #2b4f41 !important;
    background: #2b4f41 !important;
}

.ref-collection-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40px;
}

.ref-collection-title {
    font-family: var(--ref-font-heading);
    font-size: 2.3rem;
    font-weight: 600;
    color: #ffffff;
}

.ref-btn-shop-all {
    padding: 9px 22px;
    border-radius: 6px;
    font-size: 0.88rem;
    font-weight: 600;
}

.ref-products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    flex-grow: 1;
}

.ref-product-card {
    background: var(--ref-bg-card);
    border: 1px solid var(--ref-border-gold);
    border-radius: 14px;
    overflow: hidden;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.ref-product-card:hover {
    transform: translateY(-8px);
    border-color: var(--ref-gold-primary);
    box-shadow: 0 14px 40px rgba(190, 158, 77, 0.18);
}

.ref-prod-img-box {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f8fafc;
}

.ref-prod-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.ref-product-card:hover .ref-prod-img-box img {
    transform: scale(1.08);
}

.ref-prod-body {
    padding: 18px 16px 20px;
    text-align: center;
}

.ref-prod-name {
    font-size: 0.98rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ref-prod-price {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ref-gold-bright);
    margin-bottom: 14px;
}

.ref-prod-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 18px;
    border-radius: 6px;
    border: 1px solid var(--ref-border-gold);
    color: #ffffff;
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 600;
    transition: all 0.25s ease;
}

.ref-prod-btn:hover {
    background: var(--ref-gold-primary);
    color: #2b4f41;
    border-color: var(--ref-gold-primary);
}

/* -------------------------------------------------------------
   9. TESTIMONIALS
   ------------------------------------------------------------- */
.ref-testimonials-section {
    padding: 90px 0 100px;
    background-color: #2b4f41 !important;
    background: radial-gradient(circle at 50% 20%, #2f5546 0%, #2b4f41 70%, #264638 100%) !important;
}

.ref-testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    max-width: 1100px;
    margin: 0 auto 35px;
}

.ref-testi-card {
    background: var(--ref-bg-card);
    border: 1px solid var(--ref-border-gold);
    border-radius: 16px;
    padding: 32px 26px;
    backdrop-filter: blur(10px);
    transition: transform 0.3s ease, border-color 0.3s ease;
    display: flex;
    flex-direction: column;
}

.ref-testi-card:hover {
    transform: translateY(-6px);
    border-color: var(--ref-gold-primary);
}

.ref-testi-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.ref-quote-mark {
    font-size: 2.2rem;
    color: var(--ref-gold-bright);
    line-height: 1;
    font-family: serif;
}

.ref-testi-stars {
    color: #cea851;
    font-size: 0.85rem;
    display: flex;
    gap: 3px;
}

.ref-testi-quote {
    font-size: 0.92rem;
    line-height: 1.65;
    color: #d5e1db;
    margin-bottom: 24px;
    flex-grow: 1;
}

.ref-testi-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid rgba(190, 158, 77, 0.12);
}

.ref-user-avatar-circle {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(190, 158, 77, 0.15);
    border: 1px solid var(--ref-border-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ref-gold-bright);
    font-size: 0.95rem;
}

.ref-user-name {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: #2d5244 !important;
}

.ref-testi-dots-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.ref-dot {
    width: 24px;
    height: 4px;
    border-radius: 2px;
    background: rgba(190, 158, 77, 0.25);
    cursor: pointer;
    transition: background 0.3s ease, width 0.3s ease;
}

.ref-dot.active {
    background: var(--ref-gold-primary);
    width: 36px;
}

/* -------------------------------------------------------------
   10. 5-COLUMN FOOTER
   ------------------------------------------------------------- */
.ref-footer {
    background: #203c2f !important;
    border-top: 1px solid rgba(190, 158, 77, 0.2) !important;
    padding: 70px 0 0;
    color: #91b3a3;
}

.ref-footer-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr 1fr 1.2fr;
    gap: 36px;
    padding-bottom: 50px;
}

.ref-footer-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.ref-footer-logo {
    height: 44px;
    width: auto;
}

.ref-footer-name {
    font-family: var(--ref-font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ref-gold-bright);
    display: block;
    letter-spacing: 1px;
}

.ref-footer-tagline {
    font-size: 0.7rem;
    color: #91b3a3;
    line-height: 1.3;
}

.ref-footer-bio {
    font-size: 0.85rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

.ref-footer-socials {
    display: flex;
    gap: 12px;
}

.ref-footer-socials a {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(190, 158, 77, 0.08);
    border: 1px solid var(--ref-border-gold);
    color: var(--ref-gold-bright);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.25s ease;
}

.ref-footer-socials a:hover {
    background: var(--ref-gold-primary);
    color: #2b4f41;
    transform: translateY(-2px);
}

.ref-col-title {
    font-family: var(--ref-font-heading);
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #ffffff;
    margin-bottom: 20px;
}

.ref-col-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ref-col-links li {
    margin-bottom: 10px;
}

.ref-col-links li a {
    color: #9ebbad;
    text-decoration: none;
    font-size: 0.86rem;
    transition: color 0.25s ease;
}

.ref-col-links li a:hover {
    color: var(--ref-gold-bright);
}

.ref-contact-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 14px;
    font-size: 0.86rem;
}

.ref-contact-row i {
    color: var(--ref-gold-bright);
    font-size: 0.95rem;
    margin-top: 3px;
}

.ref-contact-row a {
    color: #9ebbad;
    text-decoration: none;
}

.ref-contact-row a:hover {
    color: var(--ref-gold-bright);
}

.ref-footer-bottom {
    border-top: 1px solid rgba(190, 158, 77, 0.12);
    padding: 22px 0;
    font-size: 0.82rem;
}

.ref-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ref-bottom-links a {
    color: #9ebbad;
    text-decoration: none;
    transition: color 0.25s ease;
}

.ref-bottom-links a:hover {
    color: var(--ref-gold-bright);
}

.ref-sep {
    margin: 0 10px;
    color: rgba(190, 158, 77, 0.3);
}

/* Floating Back to Top (Gold Circle) */
.ref-back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #be9e4d 0%, #a4843c 100%);
    color: #2b4f41;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    box-shadow: 0 8px 24px rgba(190, 158, 77, 0.4);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    text-decoration: none;
}

.ref-back-to-top.visible {
    opacity: 1;
    visibility: visible;
}

.ref-back-to-top:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(190, 158, 77, 0.6);
}

/* -------------------------------------------------------------
   11. RESPONSIVE BREAKPOINTS
   ------------------------------------------------------------- */
@media (max-width: 1024px) {
    .ref-hero-container {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .ref-hero-subtitle {
        margin: 0 auto 30px;
    }
    .ref-hero-cta-group {
        justify-content: center;
    }
    .ref-trust-bar {
        grid-template-columns: repeat(2, 1fr);
    }
    .ref-services-grid {
        grid-template-columns: 1fr;
    }
    .ref-products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .ref-footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .ref-hero-title {
        font-size: 2.4rem;
    }
    .ref-nav {
        display: none;
    }
    .ref-trust-bar {
        grid-template-columns: 1fr;
    }
    .ref-trust-item {
        border-right: none;
        border-bottom: 1px solid rgba(190, 158, 77, 0.14);
        padding-bottom: 12px;
    }
    .ref-steps-track {
        flex-direction: column;
        align-items: flex-start;
    }
    .ref-step-connector {
        display: none;
    }
    .ref-testimonials-grid {
        grid-template-columns: 1fr;
    }
    .ref-footer-grid {
        grid-template-columns: 1fr;
    }
    .ref-bottom-inner {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
}

/* ==========================================================================
   ASTROLOGY SERVICES PAGE SPECIFICATION (EXACT REFERENCE DESIGN MATCH)
   ========================================================================== */

.astro-main-wrapper {
    background-color: var(--ref-bg-dark);
    color: var(--ref-text-sub);
    overflow-x: hidden;
}

/* -------------------------------------------------------------
   1. ASTROLOGY HERO SECTION
   ------------------------------------------------------------- */
.astro-hero-section {
    position: relative;
    padding: 50px 0 80px;
    background: radial-gradient(circle at 75% 40%, #2d5341 0%, #234133 65%, #264638 100%);
    overflow: hidden;
}

.astro-hero-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.astro-live-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.astro-hero-container {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    align-items: center;
    gap: 40px;
}

.astro-breadcrumb {
    font-size: 0.82rem;
    color: #cbe2d7;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.astro-breadcrumb a {
    color: #cbe2d7;
    text-decoration: none;
    transition: color 0.2s ease;
}

.astro-breadcrumb a:hover {
    color: var(--ref-gold-bright);
}

.astro-bc-sep {
    color: rgba(190, 158, 77, 0.4);
}

.astro-bc-curr {
    color: var(--ref-gold-bright);
    font-weight: 600;
}

.astro-hero-title {
    font-family: var(--ref-font-heading);
    font-size: 3.2rem;
    font-weight: 600;
    line-height: 1.18;
    color: #ffffff;
    margin-bottom: 16px;
    letter-spacing: 0.5px;
}

.astro-gold-highlight {
    color: var(--ref-gold-primary);
}

.astro-title-dash {
    width: 44px;
    height: 2px;
    background: var(--ref-gold-primary);
    margin-bottom: 22px;
    border-radius: 2px;
}

.astro-hero-subtitle {
    font-size: 1.02rem;
    color: var(--ref-text-sub);
    line-height: 1.65;
    max-width: 520px;
    margin-bottom: 36px;
}

.astro-micro-trust-row {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.astro-micro-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(38, 71, 56, 0.65);
    border: 1px solid rgba(190, 158, 77, 0.18);
    border-radius: 8px;
    padding: 10px 16px;
}

.astro-badge-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(190, 158, 77, 0.12);
    border: 1px solid var(--ref-border-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ref-gold-bright);
    font-size: 0.95rem;
    flex-shrink: 0;
}

.astro-badge-text strong {
    display: block;
    color: #ffffff;
    font-size: 0.86rem;
    font-weight: 700;
}

.astro-badge-text span {
    color: #91b3a3;
    font-size: 0.74rem;
}

.astro-hero-right {
    display: flex;
    justify-content: center;
    align-items: center;
}

.astro-wheel-frame {
    position: relative;
    width: 420px;
    height: 420px;
    max-width: 100%;
}

.astro-wheel-halo {
    position: absolute;
    inset: -20px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(190, 158, 77, 0.22) 0%, rgba(65, 136, 105, 0.18) 50%, transparent 70%);
    filter: blur(25px);
    pointer-events: none;
}

.astro-wheel-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 0 0 50px rgba(190, 158, 77, 0.35);
    position: relative;
    z-index: 2;
}

/* -------------------------------------------------------------
   2. FEATURED GUIDANCE SECTION (4 Large Cards)
   ------------------------------------------------------------- */
.astro-featured-section {
    padding: 90px 0;
    background: radial-gradient(circle at 50% 20%, #2f5546 0%, #2b4f41 70%, #264638 100%) !important;
}

.astro-section-head {
    margin-bottom: 50px;
}

.astro-eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--ref-gold-primary);
    text-transform: uppercase;
    margin-bottom: 10px;
}

.astro-section-title {
    font-family: var(--ref-font-heading);
    font-size: 2.3rem;
    font-weight: 600;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    letter-spacing: 0.5px;
}

.astro-ornament {
    display: inline-block;
    width: 60px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--ref-gold-primary));
}

.astro-ornament.right {
    background: linear-gradient(90deg, var(--ref-gold-primary), transparent);
}

.astro-featured-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.astro-feat-card {
    background: var(--ref-bg-card);
    border: 1px solid var(--ref-border-gold);
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
}

.astro-feat-card:hover {
    transform: translateY(-8px);
    border-color: var(--ref-gold-primary);
    box-shadow: 0 16px 45px rgba(190, 158, 77, 0.18);
}

.astro-feat-img-wrap {
    width: 100%;
    aspect-ratio: 16 / 11;
    overflow: hidden;
    position: relative;
    background: #f8fafc;
}

.astro-feat-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

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

.astro-feat-body {
    padding: 24px 20px 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.astro-feat-title {
    font-family: var(--ref-font-heading);
    font-size: 1.22rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 10px;
    line-height: 1.3;
}

.astro-feat-desc {
    font-size: 0.85rem;
    color: var(--ref-text-sub);
    line-height: 1.55;
    margin-bottom: 18px;
    flex-grow: 1;
}

.astro-feat-points {
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
}

.astro-feat-points li {
    font-size: 0.82rem;
    color: #ffffff;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.astro-feat-points li i {
    color: var(--ref-gold-bright);
    font-size: 0.82rem;
}

.astro-btn-card {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 6px;
    border: 1px solid var(--ref-border-gold);
    color: #ffffff;
    text-decoration: none;
    font-size: 0.84rem;
    font-weight: 600;
    transition: all 0.25s ease;
    text-align: center;
    width: 100%;
}

.astro-btn-card:hover {
    background: var(--ref-gold-primary);
    color: #2b4f41;
    border-color: var(--ref-gold-primary);
}

/* -------------------------------------------------------------
   3. MORE ASTROLOGY OFFERINGS (8 Cards Grid)
   ------------------------------------------------------------- */
.astro-more-section {
    padding: 70px 0 90px;
    background: #2b4f41 !important;
}

.astro-offerings-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.astro-offer-card {
    background: var(--ref-bg-card);
    border: 1px solid var(--ref-border-gold);
    border-radius: 12px;
    padding: 22px 18px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.astro-offer-card:hover {
    transform: translateY(-5px);
    border-color: var(--ref-gold-primary);
    box-shadow: 0 10px 30px rgba(190, 158, 77, 0.12);
}

.astro-offer-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(190, 158, 77, 0.1);
    border: 1px solid var(--ref-border-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ref-gold-bright);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.astro-offer-info h4 {
    font-size: 0.98rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 4px;
    line-height: 1.3;
}

.astro-offer-info p {
    font-size: 0.78rem;
    color: var(--ref-text-sub);
    line-height: 1.45;
    margin-bottom: 10px;
}

.astro-offer-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ref-gold-bright);
    text-decoration: none;
    transition: gap 0.2s ease;
}

.astro-offer-link:hover {
    gap: 9px;
    color: #ffffff;
}

/* -------------------------------------------------------------
   4. HOW ASTROLOGY CONSULTATION WORKS
   ------------------------------------------------------------- */
.astro-steps-section {
    padding: 80px 0 90px;
    background: radial-gradient(circle at 50% 20%, #2f5546 0%, #2b4f41 70%, #264638 100%) !important;
}

.astro-steps-track {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    max-width: 1050px;
    margin: 0 auto;
}

.astro-step-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
}

.astro-step-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #f1f8f5;
    border: 1.5px solid var(--ref-gold-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.astro-step-num {
    font-family: var(--ref-font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ref-gold-bright);
}

.astro-step-icon-box {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(190, 158, 77, 0.08);
    border: 1px solid var(--ref-border-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ref-gold-bright);
    font-size: 1.2rem;
    margin-bottom: 14px;
}

.astro-step-name {
    font-size: 1.02rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 6px;
}

.astro-step-text {
    font-size: 0.8rem;
    color: var(--ref-text-sub);
    line-height: 1.45;
    margin: 0;
}

.astro-step-line {
    flex-grow: 1;
    height: 1px;
    border-top: 1px dashed rgba(190, 158, 77, 0.35);
    margin-top: 22px;
}

/* -------------------------------------------------------------
   5. READY TO UNLOCK BANNER
   ------------------------------------------------------------- */
.astro-unlock-banner-section {
    padding: 70px 0 90px;
    background: #2b4f41 !important;
}

.astro-unlock-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    min-height: 330px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ref-border-gold);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}

.astro-unlock-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: brightness(0.85);
}

.astro-unlock-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(36, 66, 52, 0.65) 0%, rgba(36, 66, 52, 0.35) 50%, rgba(36, 66, 52, 0.65) 100%);
}

.astro-unlock-content {
    position: relative;
    z-index: 2;
    padding: 50px 30px;
    max-width: 680px;
}

.astro-unlock-title {
    font-family: var(--ref-font-heading);
    font-size: 2.5rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 14px;
    line-height: 1.25;
}

.astro-unlock-sub {
    font-size: 1.05rem;
    color: #ffffff;
    margin-bottom: 28px;
    line-height: 1.6;
}

.astro-btn-unlock {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #be9e4d 0%, #a4843c 100%);
    color: #2b4f41 !important;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.95rem;
    padding: 13px 28px;
    border-radius: 6px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    box-shadow: 0 6px 20px rgba(190, 158, 77, 0.35);
}

.astro-btn-unlock:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(190, 158, 77, 0.5);
}

/* -------------------------------------------------------------
   6. RESPONSIVE BREAKPOINTS FOR ASTROLOGY PAGE
   ------------------------------------------------------------- */
@media (max-width: 1024px) {
    .astro-hero-container {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .astro-breadcrumb {
        justify-content: center;
    }
    .astro-title-dash {
        margin: 0 auto 22px;
    }
    .astro-hero-subtitle {
        margin: 0 auto 30px;
    }
    .astro-micro-trust-row {
        justify-content: center;
    }
    .astro-featured-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .astro-offerings-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .astro-hero-title {
        font-size: 2.3rem;
    }
    .astro-featured-grid {
        grid-template-columns: 1fr;
    }
    .astro-offerings-grid {
        grid-template-columns: 1fr;
    }
    .astro-steps-track {
        flex-direction: column;
        align-items: center;
        gap: 26px;
    }
    .astro-step-line {
        display: none;
    }
    .astro-unlock-title {
        font-size: 1.8rem;
    }
}

/* ==========================================================================
   CONSULTATION BOOKING PAGE SPECIFICATION (EXACT REFERENCE DESIGN MATCH)
   ========================================================================== */

.ref-consult-main {
    background-color: var(--ref-bg-dark);
    color: var(--ref-text-sub);
    overflow-x: hidden;
}

/* -------------------------------------------------------------
   1. HERO SECTION & STEPPER PROGRESS
   ------------------------------------------------------------- */
.ref-consult-hero {
    padding: 40px 0 60px;
    background: radial-gradient(circle at 75% 35%, #2d5341 0%, #234133 65%, #264638 100%);
    border-bottom: 1px solid rgba(190, 158, 77, 0.14);
}

.ref-consult-hero-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    align-items: center;
    gap: 40px;
}

.ref-cbreadcrumb {
    font-size: 0.82rem;
    color: #cbe2d7;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ref-cbreadcrumb a {
    color: #cbe2d7;
    text-decoration: none;
    transition: color 0.2s ease;
}

.ref-cbreadcrumb a:hover {
    color: var(--ref-gold-bright);
}

.ref-csep {
    color: rgba(190, 158, 77, 0.4);
}

.ref-ccurr {
    color: var(--ref-gold-bright);
    font-weight: 600;
}

.ref-chero-title {
    font-family: var(--ref-font-heading);
    font-size: 3.2rem;
    font-weight: 600;
    line-height: 1.2;
    color: #ffffff;
    margin-bottom: 10px;
}

.ref-chero-sub {
    font-size: 1.02rem;
    color: var(--ref-text-sub);
    margin-bottom: 34px;
}

/* Stepper Progress Bar */
.ref-stepper-track {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 600px;
}

.ref-step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    flex-shrink: 0;
}

.ref-step-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #f1f8f5;
    border: 1.5px solid rgba(190, 158, 77, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #cbe2d7;
    font-size: 1.05rem;
    transition: all 0.3s ease;
}

.ref-step-label {
    font-size: 0.74rem;
    color: #cbe2d7;
    font-weight: 600;
    white-space: nowrap;
    transition: color 0.3s ease;
}

.ref-step-item.active .ref-step-circle {
    background: linear-gradient(135deg, #be9e4d 0%, #a4843c 100%);
    color: #2b4f41;
    border-color: #be9e4d;
    box-shadow: 0 0 16px rgba(190, 158, 77, 0.5);
}

.ref-step-item.active .ref-step-label {
    color: var(--ref-gold-bright);
}

.ref-stepper-line {
    flex-grow: 1;
    height: 1px;
    border-top: 1px dashed rgba(190, 158, 77, 0.35);
    margin-bottom: 22px;
}

.ref-stepper-line.active {
    border-top: 1px solid var(--ref-gold-primary);
}

.ref-chero-right {
    display: flex;
    justify-content: center;
}

.ref-chero-wheel-box {
    position: relative;
    width: 380px;
    height: 380px;
    max-width: 100%;
}

.ref-chero-altar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 0 0 50px rgba(190, 158, 77, 0.3);
}

/* -------------------------------------------------------------
   2. MAIN BOOKING TWO-COLUMN LAYOUT
   ------------------------------------------------------------- */
.ref-booking-section {
    padding: 70px 0 90px;
    background: #2b4f41 !important;
}

.ref-booking-container {
    display: grid;
    grid-template-columns: 1.4fr 0.85fr;
    gap: 36px;
    align-items: flex-start;
}

.ref-step-meta-head {
    margin-bottom: 26px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(190, 158, 77, 0.14);
}

.ref-step-tag {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--ref-gold-primary);
    text-transform: uppercase;
    margin-bottom: 6px;
}

.ref-step-main-title {
    font-family: var(--ref-font-heading);
    font-size: 2.1rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 6px;
}

.ref-step-main-desc {
    font-size: 0.92rem;
    color: var(--ref-text-sub);
    margin: 0;
}

/* 10 Services Grid (4-Columns Desktop) */
.ref-service-selection-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 30px;
}

.ref-consult-card {
    background: var(--ref-bg-card);
    border: 1px solid var(--ref-border-gold);
    border-radius: 12px;
    padding: 20px 14px 16px;
    position: relative;
    cursor: pointer;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    display: flex;
    flex-direction: column;
}

.ref-consult-card:hover {
    transform: translateY(-4px);
    border-color: rgba(190, 158, 77, 0.5);
    background: var(--ref-bg-card-hover);
}

.ref-consult-card.selected {
    border-color: var(--ref-gold-primary);
    background: rgba(44, 82, 64, 0.85);
    box-shadow: 0 0 0 1px var(--ref-gold-primary), 0 8px 24px rgba(190, 158, 77, 0.2);
}

.ref-card-check {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--ref-gold-primary);
    color: #2b4f41;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.ref-consult-card.selected .ref-card-check {
    opacity: 1;
}

.ref-card-icon-frame {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(190, 158, 77, 0.1);
    border: 1px solid var(--ref-border-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ref-gold-bright);
    font-size: 1.15rem;
    margin-bottom: 14px;
}

.ref-card-title {
    font-size: 0.86rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 6px;
    line-height: 1.35;
    letter-spacing: 0.3px;
}

.ref-card-desc {
    font-size: 0.75rem;
    color: var(--ref-text-sub);
    line-height: 1.45;
    margin-bottom: 16px;
    flex-grow: 1;
}

.ref-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
    border-top: 1px solid rgba(190, 158, 77, 0.12);
}

.ref-card-fee {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ref-gold-bright);
}

.ref-card-dur {
    font-size: 0.72rem;
    color: #cbe2d7;
}

/* Micro-Trust Badges */
.ref-consult-trust-pills {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    background: rgba(38, 71, 56, 0.6);
    border: 1px solid rgba(190, 158, 77, 0.18);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 28px;
}

.ref-ctrust-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ref-ctrust-item i {
    font-size: 1.25rem;
    color: var(--ref-gold-bright);
    flex-shrink: 0;
}

.ref-ctrust-item strong {
    display: block;
    color: #ffffff;
    font-size: 0.86rem;
    margin-bottom: 2px;
}

.ref-ctrust-item span {
    font-size: 0.75rem;
    color: #cbe2d7;
    line-height: 1.35;
}

/* Continue Button */
.ref-step-cta-row {
    margin-top: 10px;
}

.ref-btn-block-continue {
    width: 100%;
    justify-content: center;
    padding: 14px 28px;
    font-size: 1.05rem;
}

.ref-sub-lock-note {
    font-size: 0.78rem;
    color: #cbe2d7;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* Step 2 Date/Time */
.ref-dt-picker-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 30px;
    background: var(--ref-bg-card);
    border: 1px solid var(--ref-border-gold);
    border-radius: 14px;
    padding: 24px;
}

.ref-form-label {
    display: block;
    font-size: 0.86rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 8px;
}

.ref-input-date,
.ref-input-text,
.ref-input-textarea {
    width: 100%;
    background: #ffffff;
    border: 1px solid rgba(190, 158, 77, 0.3);
    border-radius: 8px;
    color: #ffffff;
    padding: 11px 14px;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s ease;
}

.ref-input-date:focus,
.ref-input-text:focus,
.ref-input-textarea:focus {
    border-color: var(--ref-gold-primary);
    box-shadow: 0 0 8px rgba(190, 158, 77, 0.3);
}

.ref-slots-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ref-slot-pill {
    background: #f1f8f5;
    border: 1px solid rgba(190, 158, 77, 0.25);
    border-radius: 6px;
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 8px 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ref-slot-pill:hover {
    border-color: var(--ref-gold-primary);
    color: var(--ref-gold-bright);
}

.ref-slot-pill.selected {
    background: var(--ref-gold-primary);
    color: #2b4f41;
    border-color: var(--ref-gold-primary);
    font-weight: 700;
}

.ref-step-nav-buttons {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 24px;
}

/* Step 3 Client Inputs */
.ref-client-inputs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    background: var(--ref-bg-card);
    border: 1px solid var(--ref-border-gold);
    border-radius: 14px;
    padding: 24px;
    margin-bottom: 24px;
}

/* Step 4 Review Card */
.ref-final-review-card {
    background: var(--ref-bg-card);
    border: 1px solid var(--ref-border-gold);
    border-radius: 14px;
    padding: 24px;
    margin-bottom: 24px;
}

.ref-review-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid rgba(190, 158, 77, 0.12);
    font-size: 0.88rem;
}

.ref-review-row:last-child {
    border-bottom: none;
}

.ref-review-row span {
    color: var(--ref-text-sub);
}

.ref-review-row strong {
    color: #ffffff;
}

.ref-booking-alert {
    background: rgba(81, 150, 115, 0.15);
    border: 1px solid #22c55e;
    color: #a4d1ba;
    padding: 14px;
    border-radius: 8px;
    margin-bottom: 18px;
    font-size: 0.88rem;
}

.ref-btn-pay-now {
    flex-grow: 1;
    justify-content: center;
    padding: 14px 24px;
}

/* -------------------------------------------------------------
   3. RIGHT COLUMN BOOKING SUMMARY SIDEBAR
   ------------------------------------------------------------- */
.ref-booking-sidebar {
    position: sticky;
    top: 90px;
}

.ref-summary-box {
    background: rgba(37, 69, 54, 0.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--ref-border-gold);
    border-radius: 16px;
    padding: 26px 22px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    margin-bottom: 20px;
}

.ref-summary-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(190, 158, 77, 0.18);
    margin-bottom: 20px;
}

.ref-summary-header i {
    font-size: 1.25rem;
    color: var(--ref-gold-bright);
}

.ref-summary-header h3 {
    font-family: var(--ref-font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
}

.ref-sum-block {
    margin-bottom: 22px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(190, 158, 77, 0.12);
}

.ref-sum-label {
    display: block;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--ref-gold-primary);
    margin-bottom: 12px;
}

/* Mini Service Card */
.ref-sum-service-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(42, 77, 60, 0.6);
    border: 1px solid rgba(190, 158, 77, 0.2);
    border-radius: 8px;
    padding: 10px 12px;
}

.ref-sum-svc-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(190, 158, 77, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ref-gold-bright);
    font-size: 1rem;
    flex-shrink: 0;
}

.ref-sum-svc-info h4 {
    font-size: 0.88rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 2px;
}

.ref-sum-svc-meta {
    display: flex;
    gap: 8px;
    font-size: 0.75rem;
}

.ref-sum-fee {
    color: var(--ref-gold-bright);
    font-weight: 700;
}

.ref-sum-dur {
    color: #cbe2d7;
}

/* Astrologer Card */
.ref-sum-astro-card {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.ref-sum-astro-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--ref-gold-primary);
}

.ref-sum-astro-info h4 {
    font-size: 0.92rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 2px;
}

.ref-sum-astro-info p {
    font-size: 0.75rem;
    color: #cbe2d7;
    margin-bottom: 4px;
}

.ref-sum-rating {
    font-size: 0.75rem;
    color: #cea851;
    font-weight: 700;
}

.ref-sum-detail-line {
    display: flex;
    justify-content: space-between;
    font-size: 0.84rem;
    margin-bottom: 8px;
}

.ref-sum-detail-line span {
    color: var(--ref-text-sub);
}

.ref-sum-detail-line strong {
    color: #ffffff;
}

.ref-sum-divider {
    height: 1px;
    background: rgba(190, 158, 77, 0.18);
    margin: 12px 0;
}

.ref-sum-total-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffffff;
}

.ref-sum-grand-total {
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--ref-gold-bright);
}

/* Trust Checklist */
.ref-sum-trust-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ref-strust-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.ref-strust-item i {
    color: var(--ref-gold-bright);
    font-size: 0.92rem;
    margin-top: 2px;
    flex-shrink: 0;
}

.ref-strust-item strong {
    display: block;
    font-size: 0.82rem;
    color: #ffffff;
    line-height: 1.3;
}

.ref-strust-item span {
    font-size: 0.72rem;
    color: #cbe2d7;
}

/* Need Help Box */
.ref-need-help-card {
    background: radial-gradient(circle at 50% 30%, #305946 0%, #264737 80%);
    border: 1px solid var(--ref-border-gold);
    border-radius: 14px;
    padding: 22px 18px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.ref-nh-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(190, 158, 77, 0.12);
    border: 1px solid var(--ref-border-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ref-gold-bright);
    font-size: 1.1rem;
    margin: 0 auto 10px;
}

.ref-need-help-card h4 {
    font-family: var(--ref-font-heading);
    font-size: 1.1rem;
    color: #ffffff;
    margin-bottom: 4px;
}

.ref-need-help-card p {
    font-size: 0.78rem;
    color: #d8e7e0;
    margin-bottom: 14px;
}

.ref-btn-chat-wa {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #25d366;
    color: #ffffff !important;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.84rem;
    padding: 9px 20px;
    border-radius: 9999px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 14px rgba(87, 161, 124, 0.35);
}

.ref-btn-chat-wa:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(87, 161, 124, 0.5);
}

/* -------------------------------------------------------------
   4. RESPONSIVE BREAKPOINTS FOR CONSULTATION PAGE
   ------------------------------------------------------------- */
@media (max-width: 1100px) {
    .ref-service-selection-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .ref-booking-container {
        grid-template-columns: 1fr;
    }
    .ref-booking-sidebar {
        position: static;
        max-width: 550px;
        margin: 40px auto 0;
    }
}

@media (max-width: 860px) {
    .ref-consult-hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .ref-cbreadcrumb {
        justify-content: center;
    }
    .ref-stepper-track {
        margin: 0 auto;
    }
    .ref-chero-wheel-box {
        margin: 0 auto;
        width: 280px;
        height: 280px;
    }
    .ref-service-selection-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .ref-consult-trust-pills {
        grid-template-columns: 1fr;
    }
    .ref-dt-picker-box {
        grid-template-columns: 1fr;
    }
    .ref-client-inputs-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 500px) {
    .ref-service-selection-grid {
        grid-template-columns: 1fr;
    }
    .ref-chero-title {
        font-size: 2.2rem;
    }
    .ref-stepper-track {
        gap: 6px;
    }
    .ref-step-circle {
        width: 36px;
        height: 36px;
        font-size: 0.85rem;
    }
    .ref-step-label {
        font-size: 0.65rem;
    }
}

/* ==========================================================================
   SPIRITUAL SHOP CATALOG SPECIFICATION (EXACT REFERENCE DESIGN MATCH)
   ========================================================================== */

.ref-shop-main {
    background-color: var(--ref-bg-dark);
    color: var(--ref-text-sub);
    overflow-x: hidden;
}

/* -------------------------------------------------------------
   1. HERO BANNER
   ------------------------------------------------------------- */
.ref-shop-hero {
    padding: 50px 0 60px;
    background: radial-gradient(circle at 75% 35%, #2f5745 0%, #2b4f41 65%, #264638 100%);
    border-bottom: 1px solid rgba(190, 158, 77, 0.15);
}

.ref-shop-hero-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    align-items: center;
    gap: 40px;
}

.ref-shero-title {
    font-family: var(--ref-font-heading);
    font-size: 3.2rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 12px;
    line-height: 1.2;
}

.ref-shero-sub {
    font-size: 1.05rem;
    color: var(--ref-text-sub);
    max-width: 520px;
    line-height: 1.6;
    margin-bottom: 34px;
}

.ref-shero-trust-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.ref-strust-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(38, 71, 56, 0.7);
    border: 1px solid rgba(190, 158, 77, 0.22);
    border-radius: 9999px;
    padding: 8px 16px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #ffffff;
}

.ref-strust-pill i {
    color: var(--ref-gold-bright);
    font-size: 0.88rem;
}

.ref-shero-right {
    display: flex;
    justify-content: center;
}

.ref-shero-altar-box {
    position: relative;
    width: 100%;
    max-width: 480px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--ref-border-gold);
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.5);
}

.ref-shero-altar-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* -------------------------------------------------------------
   2. MAIN TWO-COLUMN SHOP LAYOUT
   ------------------------------------------------------------- */
.ref-shop-catalog-section {
    padding: 30px 0 90px;
    background: #2b4f41 !important;
}

.ref-sbreadcrumbs {
    font-size: 0.84rem;
    color: #cbe2d7;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ref-sbreadcrumbs a {
    color: #cbe2d7;
    text-decoration: none;
    transition: color 0.2s ease;
}

.ref-sbreadcrumbs a:hover {
    color: var(--ref-gold-bright);
}

.ref-ssep {
    color: rgba(190, 158, 77, 0.35);
}

.ref-scurr {
    color: var(--ref-gold-bright);
    font-weight: 600;
}

.ref-shop-grid-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 36px;
    align-items: flex-start;
    margin-bottom: 60px;
}

/* -------------------------------------------------------------
   3. LEFT SIDEBAR WIDGETS
   ------------------------------------------------------------- */
.ref-shop-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.ref-swidget {
    background: var(--ref-bg-card);
    border: 1px solid var(--ref-border-gold);
    border-radius: 14px;
    padding: 22px 20px;
    backdrop-filter: blur(10px);
}

.ref-swidget-title {
    font-family: var(--ref-font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(190, 158, 77, 0.15);
    letter-spacing: 0.5px;
}

.ref-scat-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ref-scat-list li {
    margin-bottom: 6px;
}

.ref-scat-list li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 12px;
    border-radius: 8px;
    color: #bed1c8;
    text-decoration: none;
    font-size: 0.86rem;
    transition: all 0.2s ease;
}

.ref-scat-list li a i {
    margin-right: 8px;
    color: var(--ref-gold-bright);
    font-size: 0.82rem;
    width: 16px;
}

.ref-scat-count {
    font-size: 0.76rem;
    color: #91b3a3;
    background: rgba(190, 158, 77, 0.08);
    padding: 2px 8px;
    border-radius: 9999px;
}

.ref-scat-list li.active a,
.ref-scat-list li a:hover {
    background: rgba(46, 85, 67, 0.8);
    color: var(--ref-gold-bright);
    border-left: 3px solid var(--ref-gold-primary);
}

.ref-scat-list li.active .ref-scat-count {
    background: var(--ref-gold-primary);
    color: #2b4f41;
    font-weight: 700;
}

/* Price Slider */
.ref-price-track-box {
    padding-top: 6px;
}

.ref-price-slider {
    position: relative;
    height: 6px;
    background: #2a4d3c;
    border-radius: 3px;
    margin: 14px 0 16px;
}

.ref-price-fill {
    position: absolute;
    left: 10%;
    right: 15%;
    height: 100%;
    background: linear-gradient(90deg, #be9e4d, #d0b16d);
    border-radius: 3px;
}

.ref-thumb {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--ref-gold-bright);
    border: 2px solid #2b4f41;
    cursor: pointer;
}

.ref-thumb.thumb-left { left: 10%; }
.ref-thumb.thumb-right { right: 15%; }

.ref-price-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.82rem;
    color: #ffffff;
    font-weight: 600;
    margin-bottom: 14px;
}

.ref-btn-filter-price {
    width: 100%;
    background: rgba(190, 158, 77, 0.12);
    border: 1px solid var(--ref-border-gold);
    color: var(--ref-gold-bright);
    font-weight: 600;
    font-size: 0.82rem;
    padding: 8px 14px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ref-btn-filter-price:hover {
    background: var(--ref-gold-primary);
    color: #2b4f41;
}

/* Popular Tags */
.ref-stags-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ref-stag-pill {
    background: rgba(190, 158, 77, 0.08);
    border: 1px solid rgba(190, 158, 77, 0.18);
    border-radius: 6px;
    padding: 5px 11px;
    font-size: 0.76rem;
    color: #bed1c8;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ref-stag-pill:hover {
    border-color: var(--ref-gold-primary);
    color: var(--ref-gold-bright);
    background: rgba(190, 158, 77, 0.15);
}

/* -------------------------------------------------------------
   4. RIGHT CATALOG AREA & TOP BAR
   ------------------------------------------------------------- */
.ref-catalog-top-bar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 30px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(190, 158, 77, 0.14);
    gap: 20px;
}

.ref-catalog-main-title {
    font-family: var(--ref-font-heading);
    font-size: 2.1rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 4px;
}

.ref-catalog-sub {
    font-size: 0.88rem;
    color: var(--ref-text-sub);
    margin-bottom: 6px;
}

.ref-catalog-count-note {
    font-size: 0.78rem;
    color: #91b3a3;
}

.ref-catalog-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ref-sort-select {
    background: #ffffff;
    border: 1px solid var(--ref-border-gold);
    border-radius: 8px;
    color: #ffffff;
    font-size: 0.84rem;
    padding: 9px 16px;
    outline: none;
    cursor: pointer;
}

.ref-view-toggles {
    display: flex;
    gap: 6px;
}

.ref-view-btn {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid var(--ref-border-gold);
    color: #91b3a3;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.ref-view-btn.active,
.ref-view-btn:hover {
    background: var(--ref-gold-primary);
    color: #2b4f41;
    border-color: var(--ref-gold-primary);
}

/* -------------------------------------------------------------
   5. PRODUCT GRID & CARDS
   ------------------------------------------------------------- */
.ref-products-catalog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 40px;
}

.ref-sprod-card {
    background: var(--ref-bg-card);
    border: 1px solid var(--ref-border-gold);
    border-radius: 14px;
    overflow: hidden;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.ref-sprod-card:hover {
    transform: translateY(-8px);
    border-color: var(--ref-gold-primary);
    box-shadow: 0 16px 40px rgba(190, 158, 77, 0.18);
}

.ref-sprod-img-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #f8fafc;
    overflow: hidden;
}

.ref-sprod-img-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.ref-sprod-card:hover .ref-sprod-img-frame img {
    transform: scale(1.08);
}

.ref-sprod-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 3px 10px;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 2;
}

.ref-sprod-badge.new {
    background: #73b496;
    color: #ffffff;
}

.ref-sprod-badge.sale {
    background: #dc2626;
    color: #ffffff;
}

.ref-sprod-wishlist-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(35, 66, 52, 0.7);
    border: 1px solid rgba(190, 158, 77, 0.3);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    cursor: pointer;
    z-index: 2;
    transition: all 0.2s ease;
}

.ref-sprod-wishlist-btn:hover {
    background: #ffffff;
    color: #ef4444;
}

.ref-sprod-details {
    padding: 20px 18px 22px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.ref-sprod-title {
    font-size: 0.96rem;
    font-weight: 700;
    margin-bottom: 6px;
    line-height: 1.35;
}

.ref-sprod-title a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.2s ease;
}

.ref-sprod-title a:hover {
    color: var(--ref-gold-bright);
}

.ref-sprod-rating-row {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    margin-bottom: 10px;
}

.ref-sprod-rating-row i {
    color: #cea851;
    font-size: 0.8rem;
}

.ref-srating-num {
    color: #ffffff;
    font-weight: 700;
}

.ref-sreviews-count {
    color: #91b3a3;
}

.ref-sprod-price-line {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.ref-scurr-price {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ref-gold-bright);
}

.ref-sold-price {
    font-size: 0.85rem;
    color: #64ac8a;
    text-decoration: line-through;
}

.ref-sprod-btn-view {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 6px;
    border: 1px solid var(--ref-border-gold);
    color: #ffffff;
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 600;
    transition: all 0.25s ease;
    width: 100%;
    text-align: center;
    margin-top: auto;
}

.ref-sprod-btn-view:hover {
    background: var(--ref-gold-primary);
    color: #2b4f41;
    border-color: var(--ref-gold-primary);
}

/* Pagination */
.ref-spagination-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.ref-page-num {
    width: 40px !important;
    height: 40px !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    border: 1.5px solid #be9e4d !important;
    color: #2d5244 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    transition: all 0.2s ease !important;
}

.ref-page-num.active,
.ref-page-num:hover {
    background: linear-gradient(135deg, #c4943c 0%, #d97706 100%) !important;
    color: #2b4f41 !important;
    border-color: #e6d6a2 !important;
    box-shadow: 0 4px 14px rgba(196, 148, 60, 0.45) !important;
    transform: translateY(-2px) !important;
}

/* -------------------------------------------------------------
   6. BOTTOM TRUST STRIP
   ------------------------------------------------------------- */
.ref-shop-bottom-trust-strip {
    background: rgba(37, 68, 53, 0.85);
    border: 1px solid var(--ref-border-gold);
    border-radius: 14px;
    padding: 24px 32px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}

.ref-sbtrust-item {
    display: flex;
    align-items: center;
    gap: 14px;
    border-right: 1px solid rgba(190, 158, 77, 0.14);
    padding-right: 12px;
}

.ref-sbtrust-item:last-child {
    border-right: none;
}

.ref-sbtrust-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(190, 158, 77, 0.1);
    border: 1.5px solid var(--ref-border-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ref-gold-bright);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.ref-sbtrust-item strong {
    display: block;
    font-size: 0.88rem;
    color: #ffffff;
    margin-bottom: 2px;
}

.ref-sbtrust-item span {
    font-size: 0.74rem;
    color: #cbe2d7;
}

/* -------------------------------------------------------------
   7. RESPONSIVE BREAKPOINTS FOR SHOP
   ------------------------------------------------------------- */
@media (max-width: 1024px) {
    .ref-shop-grid-layout {
        grid-template-columns: 1fr;
    }
    .ref-shop-hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .ref-shero-sub {
        margin: 0 auto 30px;
    }
    .ref-shero-trust-row {
        justify-content: center;
    }
    .ref-products-catalog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .ref-shop-bottom-trust-strip {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 650px) {
    .ref-shero-title {
        font-size: 2.3rem;
    }
    .ref-products-catalog-grid {
        grid-template-columns: 1fr;
    }
    .ref-catalog-top-bar {
        flex-direction: column;
        align-items: flex-start;
    }
    .ref-shop-bottom-trust-strip {
        grid-template-columns: 1fr;
    }
    .ref-sbtrust-item {
        border-right: none;
        border-bottom: 1px solid rgba(190, 158, 77, 0.14);
        padding-bottom: 12px;
    }
}

/* ==========================================================================
   CUSTOMER AUTHENTICATION SPECIFICATION (EXACT REFERENCE DESIGN MATCH)
   ========================================================================== */

.ref-auth-main {
    background-color: var(--ref-bg-dark);
    color: var(--ref-text-sub);
    padding: 30px 0 80px;
    overflow-x: hidden;
}

.ref-abreadcrumbs {
    font-size: 0.82rem;
    color: #cbe2d7;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ref-abreadcrumbs a {
    color: #cbe2d7;
    text-decoration: none;
    transition: color 0.2s ease;
}

.ref-abreadcrumbs a:hover {
    color: var(--ref-gold-bright);
}

.ref-asep {
    color: rgba(190, 158, 77, 0.35);
}

.ref-acurr {
    color: #ffffff;
}

/* -------------------------------------------------------------
   1. UNIFIED TWO-COLUMN AUTH LAYOUT
   ------------------------------------------------------------- */
.ref-auth-layout-grid {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 28px;
    align-items: stretch;
    margin-bottom: 30px;
}

/* -------------------------------------------------------------
   2. LEFT HERO PANEL
   ------------------------------------------------------------- */
.ref-auth-left-hero {
    background: rgba(37, 69, 54, 0.85);
    border: 1px solid var(--ref-border-gold);
    border-radius: 18px;
    padding: 30px 26px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

.ref-alhero-visual {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 24px;
    border: 1px solid rgba(190, 158, 77, 0.25);
}

.ref-alhero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ref-alhero-glow-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(37, 69, 54, 0.9) 100%);
}

.ref-alhero-tag {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--ref-gold-primary);
    text-transform: uppercase;
    margin-bottom: 8px;
}

.ref-alhero-title {
    font-family: var(--ref-font-heading);
    font-size: 2.1rem;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.25;
    margin-bottom: 12px;
}

.ref-gold-serif-italic {
    color: var(--ref-gold-bright);
    font-style: italic;
}

.ref-alhero-sub {
    font-size: 0.86rem;
    color: var(--ref-text-sub);
    line-height: 1.55;
    margin-bottom: 26px;
}

.ref-alhero-perks {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 28px;
}

.ref-aperk-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.ref-aperk-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(190, 158, 77, 0.1);
    border: 1px solid var(--ref-border-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ref-gold-bright);
    font-size: 0.95rem;
    flex-shrink: 0;
}

.ref-aperk-row h4 {
    font-size: 0.88rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 2px;
}

.ref-aperk-row p {
    font-size: 0.76rem;
    color: #cbe2d7;
    line-height: 1.4;
    margin: 0;
}

.ref-alhero-quote-box {
    background: rgba(42, 77, 60, 0.65);
    border: 1px solid rgba(190, 158, 77, 0.2);
    border-radius: 12px;
    padding: 16px 20px;
    margin-top: auto;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.ref-quote-mark {
    font-family: serif;
    font-size: 1.6rem;
    color: var(--ref-gold-bright);
    line-height: 1;
}

.ref-alhero-quote-box p {
    font-size: 0.82rem;
    font-style: italic;
    color: #d3e0da;
    line-height: 1.45;
    margin: 0;
}

/* -------------------------------------------------------------
   3. RIGHT DUAL AUTH PANEL
   ------------------------------------------------------------- */
.ref-auth-right-panel {
    background: rgba(37, 69, 54, 0.85);
    border: 1px solid var(--ref-border-gold);
    border-radius: 18px;
    padding: 24px 30px 32px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
}

/* Tabs Bar */
.ref-auth-tabs-bar {
    display: flex;
    gap: 30px;
    border-bottom: 1px solid rgba(190, 158, 77, 0.15);
    margin-bottom: 28px;
    padding-bottom: 8px;
}

.ref-atab-btn {
    background: none;
    border: none;
    color: #cbe2d7;
    font-size: 0.95rem;
    font-weight: 600;
    padding: 8px 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    transition: color 0.2s ease;
}

.ref-atab-btn:hover {
    color: #ffffff;
}

.ref-atab-btn.active {
    color: var(--ref-gold-bright);
}

.ref-atab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -9px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--ref-gold-primary);
}

/* Dual Column Forms */
.ref-auth-forms-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px;
}

.ref-auth-col-box {
    display: flex;
    flex-direction: column;
}

.ref-auth-forms-columns .ref-auth-col-box:first-child {
    border-right: 1px solid rgba(190, 158, 77, 0.14);
    padding-right: 36px;
}

.ref-acol-head {
    margin-bottom: 22px;
}

.ref-acol-title {
    font-family: var(--ref-font-heading);
    font-size: 1.55rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 4px;
}

.ref-acol-sub {
    font-size: 0.82rem;
    color: var(--ref-text-sub);
    margin: 0;
}

/* Form Fields */
.ref-form-field {
    margin-bottom: 16px;
}

.ref-field-label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 6px;
}

.ref-field-input-box {
    position: relative;
    display: flex;
    align-items: center;
}

.ref-input-icon {
    position: absolute;
    left: 14px;
    color: #5ca784;
    font-size: 0.9rem;
    pointer-events: none;
}

.ref-custom-input {
    width: 100%;
    background: #ffffff;
    border: 1px solid rgba(190, 158, 77, 0.28);
    border-radius: 8px;
    color: #ffffff;
    padding: 11px 14px 11px 40px;
    font-size: 0.88rem;
    outline: none;
    transition: border-color 0.2s ease;
}

.ref-custom-input:focus {
    border-color: var(--ref-gold-primary);
    box-shadow: 0 0 8px rgba(190, 158, 77, 0.3);
}

.ref-pass-toggle-btn {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    color: #5ca784;
    cursor: pointer;
    font-size: 0.9rem;
    padding: 4px;
}

.ref-pass-toggle-btn:hover {
    color: var(--ref-gold-bright);
}

.ref-form-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    margin-bottom: 18px;
}

.ref-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #bed1c8;
    cursor: pointer;
}

.ref-checkbox-label input {
    accent-color: var(--ref-gold-primary);
}

.ref-forgot-link {
    color: var(--ref-gold-bright);
    text-decoration: none;
    font-weight: 600;
}

.ref-forgot-link:hover {
    text-decoration: underline;
}

/* Password Checklist */
.ref-pass-checklist-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
    margin-bottom: 20px;
    padding: 10px 12px;
    background: rgba(36, 67, 52, 0.5);
    border-radius: 8px;
}

.ref-pchk-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.74rem;
    color: #6cb090;
    transition: color 0.2s ease;
}

.ref-pchk-item i {
    font-size: 0.8rem;
}

.ref-pchk-item.valid {
    color: #22c55e;
}

.ref-pchk-item.valid i {
    color: #22c55e;
}

/* Buttons */
.ref-btn-auth-submit {
    width: 100%;
    justify-content: center;
    padding: 12px 20px;
    font-size: 0.94rem;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
}

.ref-btn-purple-solid {
    background: linear-gradient(135deg, #73b496 0%, #5ba683 100%);
    color: #ffffff !important;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ref-btn-purple-solid:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(115, 180, 150, 0.45);
}

.ref-auth-divider {
    text-align: center;
    position: relative;
    margin: 16px 0;
}

.ref-auth-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(190, 158, 77, 0.15);
}

.ref-auth-divider span {
    position: relative;
    background: #264637;
    padding: 0 12px;
    font-size: 0.78rem;
    color: #5ca784;
}

.ref-btn-google-auth {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    background: #ffffff;
    border: 1px solid rgba(190, 158, 77, 0.25);
    border-radius: 8px;
    color: #ffffff;
    font-size: 0.86rem;
    font-weight: 600;
    padding: 10px 18px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.ref-btn-google-auth:hover {
    border-color: var(--ref-gold-primary);
    background: rgba(190, 158, 77, 0.1);
}

.ref-switch-note {
    text-align: center;
    font-size: 0.8rem;
    color: #cbe2d7;
    margin-top: 16px;
}

.ref-switch-note a {
    color: var(--ref-gold-bright);
    font-weight: 700;
    text-decoration: none;
}

.ref-terms-notice {
    font-size: 0.74rem;
    color: #6cb090;
    text-align: center;
    margin-top: 16px;
    line-height: 1.4;
}

.ref-terms-notice a {
    color: var(--ref-gold-bright);
    text-decoration: none;
}

/* OTP Step */
.ref-otp-inputs-row {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.ref-otp-box {
    width: 48px;
    height: 54px;
    background: #ffffff;
    border: 1.5px solid var(--ref-border-gold);
    border-radius: 8px;
    color: #ffffff;
    font-size: 1.4rem;
    font-weight: 700;
    text-align: center;
    outline: none;
}

.ref-otp-box:focus {
    border-color: var(--ref-gold-bright);
    box-shadow: 0 0 12px rgba(190, 158, 77, 0.4);
}

.ref-resend-link {
    background: none;
    border: none;
    color: var(--ref-gold-bright);
    font-weight: 700;
    font-size: 0.82rem;
    cursor: pointer;
    margin-left: 6px;
}

.ref-auth-alert {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 0.86rem;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ref-auth-alert.success {
    background: rgba(81, 150, 115, 0.15);
    border: 1px solid #22c55e;
    color: #a4d1ba;
}

.ref-auth-alert.error {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid #ef4444;
    color: #fca5a5;
}

/* -------------------------------------------------------------
   4. BOTTOM "Why Create an Account?" STRIP
   ------------------------------------------------------------- */
.ref-auth-why-strip {
    background: rgba(37, 68, 53, 0.85);
    border: 1px solid var(--ref-border-gold);
    border-radius: 14px;
    padding: 22px 28px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4);
}

.ref-why-eyebrow {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--ref-gold-bright);
    margin-bottom: 16px;
    letter-spacing: 0.5px;
}

.ref-why-four-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.ref-why-card {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ref-why-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(190, 158, 77, 0.1);
    border: 1px solid var(--ref-border-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ref-gold-bright);
    font-size: 0.95rem;
    flex-shrink: 0;
}

.ref-why-card strong {
    display: block;
    font-size: 0.84rem;
    color: #ffffff;
    margin-bottom: 2px;
}

.ref-why-card span {
    font-size: 0.74rem;
    color: #cbe2d7;
}

/* -------------------------------------------------------------
   5. RESPONSIVE BREAKPOINTS FOR AUTH
   ------------------------------------------------------------- */
@media (max-width: 1024px) {
    .ref-auth-layout-grid {
        grid-template-columns: 1fr;
    }
    .ref-why-four-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .ref-auth-forms-columns {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .ref-auth-forms-columns .ref-auth-col-box:first-child {
        border-right: none;
        padding-right: 0;
        border-bottom: 1px solid rgba(190, 158, 77, 0.14);
        padding-bottom: 30px;
    }
    .ref-why-four-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   SECURE CHECKOUT & PAYMENT SPECIFICATION (EXACT REFERENCE DESIGN MATCH)
   ========================================================================== */

.ref-chkout-main {
    background-color: var(--ref-bg-dark);
    color: var(--ref-text-sub);
    overflow-x: hidden;
}

/* -------------------------------------------------------------
   1. HERO HEADER & 6-STEP TRACKER
   ------------------------------------------------------------- */
.ref-chkout-hero {
    padding: 40px 0 50px;
    background: radial-gradient(circle at 75% 35%, #2e5543 0%, #2b4f41 65%, #264638 100%);
    border-bottom: 1px solid rgba(190, 158, 77, 0.14);
}

.ref-chkout-hero-grid {
    display: grid;
    grid-template-columns: 1.35fr 0.65fr;
    align-items: center;
    gap: 40px;
}

.ref-chero-main-title {
    font-family: var(--ref-font-heading);
    font-size: 3.1rem;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.2;
    margin-bottom: 8px;
}

.ref-chero-main-sub {
    font-size: 1.02rem;
    color: var(--ref-text-sub);
    margin-bottom: 14px;
}

.ref-back-to-booking {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ref-gold-bright);
    font-size: 0.86rem;
    font-weight: 600;
    text-decoration: none;
    margin-bottom: 30px;
    transition: transform 0.2s ease;
}

.ref-back-to-booking:hover {
    transform: translateX(-4px);
    color: #ffffff;
}

/* 6-Step Progress Bar */
.ref-stepper-six-track {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 680px;
}

.ref-sstep-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    flex-shrink: 0;
}

.ref-sstep-circle {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #f1f8f5;
    border: 1.5px solid rgba(190, 158, 77, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #cbe2d7;
    font-size: 0.95rem;
    font-weight: 700;
}

.ref-sstep-label {
    font-size: 0.72rem;
    color: #cbe2d7;
    font-weight: 600;
    white-space: nowrap;
}

.ref-sstep-item.completed .ref-sstep-circle {
    background: rgba(190, 158, 77, 0.15);
    border-color: var(--ref-gold-primary);
    color: var(--ref-gold-bright);
}

.ref-sstep-item.active .ref-sstep-circle {
    background: linear-gradient(135deg, #be9e4d 0%, #a4843c 100%);
    border-color: #be9e4d;
    color: #2b4f41;
    box-shadow: 0 0 16px rgba(190, 158, 77, 0.5);
}

.ref-sstep-item.active .ref-sstep-label {
    color: var(--ref-gold-bright);
    font-weight: 700;
}

.ref-sstep-line {
    flex-grow: 1;
    height: 1px;
    border-top: 1px dashed rgba(190, 158, 77, 0.35);
    margin-bottom: 20px;
}

.ref-sstep-line.completed,
.ref-sstep-line.active {
    border-top: 1px solid var(--ref-gold-primary);
}

.ref-chero-art-col {
    display: flex;
    justify-content: center;
}

.ref-chero-altar-frame {
    width: 320px;
    height: 320px;
    max-width: 100%;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 0 50px rgba(190, 158, 77, 0.35);
}

.ref-chero-altar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* -------------------------------------------------------------
   2. MAIN TWO-COLUMN CHECKOUT CONTENT
   ------------------------------------------------------------- */
.ref-chkout-content-wrap {
    padding: 50px 0 90px;
    background: #2b4f41 !important;
}

.ref-chkout-layout-grid {
    display: grid;
    grid-template-columns: 1.35fr 0.75fr;
    gap: 36px;
    align-items: flex-start;
}

/* -------------------------------------------------------------
   3. LEFT COLUMN: CHOOSE PAYMENT METHOD
   ------------------------------------------------------------- */
.ref-payment-methods-card {
    background: rgba(37, 69, 54, 0.85);
    border: 1px solid var(--ref-border-gold);
    border-radius: 16px;
    padding: 26px 28px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    margin-bottom: 24px;
}

.ref-pm-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(190, 158, 77, 0.16);
    margin-bottom: 24px;
}

.ref-pm-heading {
    font-family: var(--ref-font-heading);
    font-size: 1.5rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
}

.ref-ssl-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.76rem;
    font-weight: 600;
    color: #4ade80;
    background: rgba(81, 150, 115, 0.1);
    padding: 4px 12px;
    border-radius: 9999px;
    border: 1px solid rgba(81, 150, 115, 0.25);
}

/* Payment Sub-grid */
.ref-pm-body-grid {
    display: grid;
    grid-template-columns: 210px 1fr;
    gap: 28px;
}

/* Left Vertical Method Tabs */
.ref-pm-nav-tabs {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-right: 1px solid rgba(190, 158, 77, 0.14);
    padding-right: 20px;
}

.ref-pm-tab-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #ffffff;
    border: 1px solid rgba(190, 158, 77, 0.2);
    border-radius: 10px;
    padding: 12px 14px;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ref-pm-tab-btn:hover {
    border-color: var(--ref-gold-primary);
    background: rgba(42, 77, 60, 0.7);
}

.ref-pm-tab-btn.active {
    background: rgba(44, 82, 64, 0.9);
    border-color: var(--ref-gold-primary);
    border-left: 4px solid var(--ref-gold-primary);
    box-shadow: 0 4px 14px rgba(190, 158, 77, 0.15);
}

.ref-pm-tab-icon {
    font-size: 1.15rem;
    color: var(--ref-gold-bright);
    flex-shrink: 0;
}

.ref-pm-tab-text strong {
    display: block;
    font-size: 0.88rem;
    color: #ffffff;
    margin-bottom: 2px;
}

.ref-pm-tab-text span {
    font-size: 0.72rem;
    color: #cbe2d7;
}

/* Right Forms Container */
.ref-pm-forms-container {
    padding-left: 4px;
}

.ref-pm-tab-panel {
    display: none;
}

.ref-pm-tab-panel.active {
    display: block;
}

.ref-tab-inner-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 12px;
}

.ref-tab-inner-sub {
    font-size: 0.82rem;
    color: var(--ref-text-sub);
    margin-bottom: 16px;
}

.ref-card-brands-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.ref-accept-label {
    font-size: 0.76rem;
    color: #cbe2d7;
}

.ref-brand-pill {
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.ref-brand-pill.visa { background: #396a53; color: #ffffff; }
.ref-brand-pill.mc { background: #eb001b; color: #ffffff; }
.ref-brand-pill.rupay { background: #265e43; color: #ffffff; }
.ref-brand-pill.amex { background: #006fcf; color: #ffffff; }

/* Interactive Form Fields */
.ref-cfield-row {
    margin-bottom: 14px;
}

.ref-clabel {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 6px;
}

.ref-cinput-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.ref-cinput {
    width: 100%;
    background: #ffffff;
    border: 1px solid rgba(190, 158, 77, 0.28);
    border-radius: 8px;
    color: #ffffff;
    padding: 11px 14px;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s ease;
}

.ref-cinput:focus {
    border-color: var(--ref-gold-primary);
    box-shadow: 0 0 8px rgba(190, 158, 77, 0.3);
}

.ref-cinput-right-icon {
    position: absolute;
    right: 14px;
    color: #cbe2d7;
    font-size: 1.05rem;
}

.ref-cfield-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 14px;
}

.ref-cvv-label-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ref-cvv-hint {
    display: inline-flex;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(190, 158, 77, 0.2);
    color: var(--ref-gold-bright);
    font-size: 0.65rem;
    align-items: center;
    justify-content: center;
    cursor: help;
}

.ref-save-card-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.ref-save-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: #bed1c8;
    cursor: pointer;
}

.ref-save-check input {
    accent-color: var(--ref-gold-primary);
}

.ref-btn-pay-now-full {
    width: 100%;
    justify-content: space-between;
    padding: 14px 24px;
    font-size: 1.05rem;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(190, 158, 77, 0.4);
}

.ref-btn-fee-val {
    font-size: 1.15rem;
    font-weight: 800;
}

.ref-powered-cashfree {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.78rem;
    color: #cbe2d7;
    margin-top: 14px;
}

/* UPI Pill App Badges */
.ref-upi-apps-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.ref-upi-pill {
    background: rgba(190, 158, 77, 0.08);
    border: 1px solid rgba(190, 158, 77, 0.2);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 0.78rem;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Net Banking Grid */
.ref-banks-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 20px;
}

.ref-bank-item {
    background: #ffffff;
    border: 1px solid rgba(190, 158, 77, 0.22);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 0.82rem;
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.ref-bank-item:hover,
.ref-bank-item.selected {
    border-color: var(--ref-gold-primary);
    background: rgba(190, 158, 77, 0.15);
    color: var(--ref-gold-bright);
}

/* Wallets Radio */
.ref-wallets-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.ref-wallet-radio {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    border: 1px solid rgba(190, 158, 77, 0.2);
    border-radius: 8px;
    padding: 11px 14px;
    color: #ffffff;
    font-size: 0.86rem;
    cursor: pointer;
}

.ref-wallet-radio input {
    accent-color: var(--ref-gold-primary);
}

/* 3 Micro-Trust Points */
.ref-chkout-trust-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    background: rgba(38, 71, 56, 0.65);
    border: 1px solid rgba(190, 158, 77, 0.18);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 20px;
}

.ref-ctrust-col {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ref-ctrust-col i {
    font-size: 1.25rem;
    color: var(--ref-gold-bright);
    flex-shrink: 0;
}

.ref-ctrust-col strong {
    display: block;
    font-size: 0.84rem;
    color: #ffffff;
    margin-bottom: 2px;
}

.ref-ctrust-col span {
    font-size: 0.74rem;
    color: #cbe2d7;
    line-height: 1.35;
}

/* Important Note Box */
.ref-chkout-note-box {
    background: rgba(43, 80, 62, 0.6);
    border: 1px solid rgba(190, 158, 77, 0.22);
    border-radius: 12px;
    padding: 14px 18px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.ref-note-icon {
    color: #b8cdc3;
    font-size: 1.1rem;
    margin-top: 2px;
    flex-shrink: 0;
}

.ref-chkout-note-box strong {
    display: block;
    font-size: 0.84rem;
    color: #ffffff;
    margin-bottom: 2px;
}

.ref-chkout-note-box p {
    font-size: 0.78rem;
    color: #bed1c8;
    margin: 0;
}

/* -------------------------------------------------------------
   4. RIGHT COLUMN: BOOKING SUMMARY & WHY BOOK WITH US
   ------------------------------------------------------------- */
.ref-chkout-right-col {
    position: sticky;
    top: 90px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Card 1: Booking Summary */
.ref-bsummary-card {
    background: rgba(37, 69, 54, 0.88);
    border: 1px solid var(--ref-border-gold);
    border-radius: 16px;
    padding: 24px 22px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

.ref-bsummary-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(190, 158, 77, 0.16);
    margin-bottom: 18px;
}

.ref-bsummary-head i {
    font-size: 1.2rem;
    color: var(--ref-gold-bright);
}

.ref-bsummary-head h3 {
    font-family: var(--ref-font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
}

.ref-bsum-preview-row {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(42, 77, 60, 0.6);
    border: 1px solid rgba(190, 158, 77, 0.2);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 14px;
}

.ref-bsum-thumb {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 1.5px solid var(--ref-gold-primary);
}

.ref-bsum-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ref-bsum-meta h4 {
    font-size: 0.92rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 2px;
}

.ref-bsum-sub {
    display: block;
    font-size: 0.75rem;
    color: #cbe2d7;
    margin-bottom: 2px;
}

.ref-bsum-astro {
    display: block;
    font-size: 0.74rem;
    color: #ffffff;
}

.ref-bsum-astro strong {
    color: var(--ref-gold-bright);
}

.ref-bsum-details-strip {
    display: flex;
    justify-content: space-between;
    font-size: 0.78rem;
    color: #bed1c8;
    background: rgba(36, 67, 52, 0.6);
    padding: 8px 12px;
    border-radius: 6px;
    margin-bottom: 18px;
}

.ref-bsum-pricing-lines {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ref-bsum-line {
    display: flex;
    justify-content: space-between;
    font-size: 0.84rem;
}

.ref-bsum-line span {
    color: var(--ref-text-sub);
}

.ref-bsum-line strong {
    color: #ffffff;
}

.ref-bsum-div {
    height: 1px;
    background: rgba(190, 158, 77, 0.16);
    margin: 6px 0;
}

.ref-bsum-total-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffffff;
}

.ref-bsum-total-num {
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--ref-gold-bright);
}

/* Card 2: Why Book With Us? */
.ref-why-book-card {
    background: radial-gradient(circle at 80% 50%, #325c48 0%, #264738 80%);
    border: 1px solid var(--ref-border-gold);
    border-radius: 16px;
    padding: 22px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4);
}

.ref-wb-title {
    font-family: var(--ref-font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 12px;
}

.ref-wb-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ref-wb-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    color: #d3e0da;
}

.ref-wb-list li i {
    color: var(--ref-gold-bright);
    font-size: 0.8rem;
    flex-shrink: 0;
}

.ref-wb-right-crystal {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 1.5px solid rgba(190, 158, 77, 0.35);
    box-shadow: 0 0 16px rgba(190, 158, 77, 0.2);
}

.ref-wb-right-crystal img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* -------------------------------------------------------------
   5. RESPONSIVE BREAKPOINTS FOR CHECKOUT
   ------------------------------------------------------------- */
@media (max-width: 1024px) {
    .ref-chkout-layout-grid {
        grid-template-columns: 1fr;
    }
    .ref-chkout-right-col {
        position: static;
        max-width: 550px;
        margin: 30px auto 0;
    }
    .ref-chkout-hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .ref-back-to-booking {
        justify-content: center;
    }
    .ref-stepper-six-track {
        margin: 0 auto;
    }
    .ref-chero-altar-frame {
        width: 240px;
        height: 240px;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .ref-pm-body-grid {
        grid-template-columns: 1fr;
    }
    .ref-pm-nav-tabs {
        flex-direction: row;
        border-right: none;
        padding-right: 0;
        border-bottom: 1px solid rgba(190, 158, 77, 0.14);
        padding-bottom: 16px;
        overflow-x: auto;
    }
    .ref-chkout-trust-row {
        grid-template-columns: 1fr;
    }
    .ref-stepper-six-track {
        gap: 4px;
    }
    .ref-sstep-circle {
        width: 30px;
        height: 30px;
        font-size: 0.8rem;
    }
    .ref-sstep-label {
        font-size: 0.62rem;
    }
}

/* ==========================================================================
   MY ACCOUNT DASHBOARD SPECIFICATION (EXACT REFERENCE DESIGN MATCH)
   ========================================================================== */

.ref-dash-main {
    background-color: var(--ref-bg-dark);
    color: var(--ref-text-sub);
    padding: 30px 0 80px;
    overflow-x: hidden;
}

.ref-dash-layout-container {
    display: grid;
    grid-template-columns: 270px 1fr;
    gap: 28px;
    align-items: flex-start;
}

/* -------------------------------------------------------------
   1. LEFT SIDEBAR: PROFILE & NAVIGATION MENU
   ------------------------------------------------------------- */
.ref-dash-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ref-duser-card {
    background: rgba(37, 69, 54, 0.88);
    border: 1px solid var(--ref-border-gold);
    border-radius: 16px;
    padding: 22px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4);
}

.ref-davatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.ref-dcrown-badge {
    position: absolute;
    top: -6px;
    right: -4px;
    color: var(--ref-gold-bright);
    font-size: 0.75rem;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
    z-index: 2;
}

.ref-davatar-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #73b496 0%, #41785e 100%);
    border: 2px solid var(--ref-gold-primary);
    color: #ffffff;
    font-weight: 800;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 12px rgba(190, 158, 77, 0.3);
}

.ref-duser-meta {
    overflow: hidden;
}

.ref-dwelcome-sub {
    display: block;
    font-size: 0.74rem;
    color: #cbe2d7;
    margin-bottom: 2px;
}

.ref-duser-name {
    font-size: 0.96rem;
    font-weight: 700;
    color: var(--ref-gold-bright);
    margin: 0 0 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ref-duser-email {
    display: block;
    font-size: 0.72rem;
    color: #6db091;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Vertical Menu List */
.ref-dash-menu-list {
    list-style: none;
    padding: 10px 8px;
    margin: 0;
    background: rgba(37, 69, 54, 0.88);
    border: 1px solid var(--ref-border-gold);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4);
}

.ref-dash-menu-list li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    color: #bed1c8;
    text-decoration: none;
    font-size: 0.84rem;
    font-weight: 600;
    transition: all 0.2s ease;
}

.ref-dash-menu-list li a i {
    font-size: 0.9rem;
    color: #6db091;
    width: 18px;
    text-align: center;
    transition: color 0.2s ease;
}

.ref-dash-menu-list li.active a,
.ref-dash-menu-list li a:hover {
    background: linear-gradient(90deg, rgba(62, 115, 90, 0.5) 0%, rgba(91, 166, 131, 0.25) 100%);
    color: var(--ref-gold-bright);
    border-left: 3px solid var(--ref-gold-primary);
}

.ref-dash-menu-list li.active a i,
.ref-dash-menu-list li a:hover i {
    color: var(--ref-gold-bright);
}

.ref-dmenu-pill {
    margin-left: auto;
    background: #73b496;
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 9999px;
}

.ref-dash-logout-item a {
    color: #f87171 !important;
}

.ref-dash-logout-item a i {
    color: #f87171 !important;
}

/* Bottom Quote Box */
.ref-dash-quote-card {
    background: rgba(42, 77, 60, 0.7);
    border: 1px solid rgba(190, 158, 77, 0.22);
    border-radius: 14px;
    padding: 16px 18px;
    position: relative;
    overflow: hidden;
}

.ref-dquote-icon {
    font-family: serif;
    font-size: 1.8rem;
    color: var(--ref-gold-bright);
    line-height: 1;
    display: block;
    margin-bottom: 4px;
}

.ref-dash-quote-card p {
    font-size: 0.76rem;
    font-style: italic;
    color: #d3e0da;
    line-height: 1.45;
    margin: 0 0 10px;
}

.ref-dquote-crystal {
    width: 100%;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
}

.ref-dquote-crystal img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* -------------------------------------------------------------
   2. RIGHT MAIN CONTENT AREA
   ------------------------------------------------------------- */
.ref-dash-main-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Hero Header */
.ref-dhero-header {
    background: radial-gradient(circle at 75% 35%, #2e5543 0%, #2b4f41 65%, #264638 100%);
    border: 1px solid var(--ref-border-gold);
    border-radius: 16px;
    padding: 24px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4);
}

.ref-dhero-title {
    font-family: var(--ref-font-heading);
    font-size: 2.1rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 4px;
}

.ref-dhero-sub {
    font-size: 0.88rem;
    color: var(--ref-text-sub);
    margin: 0;
}

.ref-dhero-altar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 1.5px solid var(--ref-gold-primary);
    box-shadow: 0 0 20px rgba(190, 158, 77, 0.3);
}

.ref-dhero-altar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ROW 1: 4 Metric Cards */
.ref-dmetrics-four-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.ref-dmetric-card {
    background: rgba(37, 69, 54, 0.88);
    border: 1px solid var(--ref-border-gold);
    border-radius: 14px;
    padding: 18px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.ref-dmetric-card:hover {
    transform: translateY(-3px);
    border-color: var(--ref-gold-primary);
}

.ref-dm-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.ref-dm-icon.purple {
    background: rgba(115, 180, 150, 0.15);
    color: #b5cbc1;
    border: 1px solid rgba(115, 180, 150, 0.3);
}

.ref-dm-icon.gold {
    background: rgba(190, 158, 77, 0.12);
    color: var(--ref-gold-bright);
    border: 1px solid var(--ref-border-gold);
}

.ref-dm-data {
    display: flex;
    flex-direction: column;
}

.ref-dm-label {
    font-size: 0.74rem;
    color: #cbe2d7;
    margin-bottom: 2px;
}

.ref-dm-number {
    font-size: 1.45rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.2;
}

.ref-dm-link {
    font-size: 0.72rem;
    color: var(--ref-gold-bright);
    text-decoration: none;
    font-weight: 600;
    margin-top: 2px;
}

.ref-dm-link:hover {
    text-decoration: underline;
}

/* Panels Base Styling */
.ref-dpanel-card {
    background: rgba(37, 69, 54, 0.88);
    border: 1px solid var(--ref-border-gold);
    border-radius: 16px;
    padding: 22px 20px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4);
}

.ref-dpanel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(190, 158, 77, 0.14);
    margin-bottom: 18px;
}

.ref-dpanel-title {
    font-family: var(--ref-font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
}

.ref-dpanel-head-link {
    font-size: 0.76rem;
    color: var(--ref-gold-bright);
    font-weight: 600;
    text-decoration: none;
}

.ref-dpanel-head-link:hover {
    text-decoration: underline;
}

/* ROW 2: Upcoming Consultation & Recent Consultations */
.ref-dash-two-columns-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}

/* Upcoming Consultation Specifics */
.ref-dup-astro-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(42, 77, 60, 0.6);
    border: 1px solid rgba(190, 158, 77, 0.2);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 18px;
}

.ref-dup-profile {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ref-dup-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid var(--ref-gold-primary);
}

.ref-dup-name {
    font-size: 0.94rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 2px;
}

.ref-dup-title {
    display: block;
    font-size: 0.74rem;
    color: #cbe2d7;
    margin-bottom: 2px;
}

.ref-dup-rating {
    font-size: 0.74rem;
    color: #cea851;
    font-weight: 700;
}

/* Calendar Date Badge */
.ref-dup-calendar-badge {
    background: rgba(37, 68, 53, 0.9);
    border: 1px solid var(--ref-border-gold);
    border-radius: 8px;
    padding: 6px 14px;
    text-align: center;
    display: flex;
    flex-direction: column;
}

.ref-cal-month {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--ref-gold-primary);
}

.ref-cal-day {
    font-size: 1.4rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.1;
}

.ref-cal-dow {
    font-size: 0.62rem;
    color: #cbe2d7;
}

/* Upcoming Meta Grid */
.ref-dup-meta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    background: rgba(36, 67, 52, 0.5);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 20px;
}

.ref-dmeta-label {
    display: block;
    font-size: 0.72rem;
    color: #6db091;
    margin-bottom: 2px;
}

.ref-dmeta-val {
    font-size: 0.82rem;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ref-dup-buttons-row {
    display: flex;
    gap: 12px;
}

.ref-dup-btn {
    flex: 1;
    text-align: center;
    justify-content: center;
    padding: 10px 16px;
    font-size: 0.84rem;
}

/* Recent Consultations List */
.ref-drecent-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 18px;
}

.ref-drecent-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(42, 77, 60, 0.5);
    border: 1px solid rgba(190, 158, 77, 0.16);
    border-radius: 10px;
    padding: 10px 12px;
}

.ref-drec-thumb {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid var(--ref-border-gold);
}

.ref-drec-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ref-drec-info {
    flex-grow: 1;
}

.ref-drec-info h4 {
    font-size: 0.86rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 2px;
}

.ref-drec-info span {
    font-size: 0.72rem;
    color: #cbe2d7;
}

.ref-drec-status-col {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.ref-dstatus-pill {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 9999px;
}

.ref-dstatus-pill.completed,
.ref-dstatus-pill.delivered {
    background: rgba(81, 150, 115, 0.15);
    color: #4ade80;
    border: 1px solid rgba(81, 150, 115, 0.3);
}

.ref-drating-val {
    font-size: 0.72rem;
    color: #cea851;
    font-weight: 700;
}

.ref-dview-all-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--ref-border-gold);
    border-radius: 8px;
    color: var(--ref-gold-bright);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    padding: 9px 16px;
    transition: all 0.2s ease;
    width: 100%;
}

.ref-dview-all-btn:hover {
    background: var(--ref-gold-primary);
    color: #2b4f41;
}

/* ROW 3: Three Columns */
.ref-dash-three-columns-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 22px;
}

/* Recent Orders List */
.ref-dorder-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 18px;
}

.ref-dorder-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(42, 77, 60, 0.5);
    border: 1px solid rgba(190, 158, 77, 0.16);
    border-radius: 10px;
    padding: 10px 12px;
}

.ref-dorder-thumb {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid var(--ref-border-gold);
}

.ref-dorder-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ref-dorder-info {
    flex-grow: 1;
}

.ref-dorder-info h4 {
    font-size: 0.84rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 130px;
}

.ref-dorder-info span {
    font-size: 0.7rem;
    color: #cbe2d7;
}

.ref-dorder-price-col {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.ref-dorder-price-col strong {
    font-size: 0.84rem;
    color: var(--ref-gold-bright);
}

/* Quick Actions 2x2 Grid */
.ref-dqa-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
}

.ref-dqa-tile {
    background: rgba(42, 77, 60, 0.55);
    border: 1px solid rgba(190, 158, 77, 0.2);
    border-radius: 10px;
    padding: 16px 12px;
    text-align: center;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.ref-dqa-tile:hover {
    border-color: var(--ref-gold-primary);
    background: rgba(46, 85, 67, 0.8);
    transform: translateY(-2px);
}

.ref-dqa-tile i {
    font-size: 1.3rem;
    color: var(--ref-gold-bright);
}

.ref-dqa-tile span {
    font-size: 0.74rem;
    font-weight: 700;
    color: #ffffff;
}

.ref-dqa-profile-link {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(36, 67, 52, 0.5);
    border: 1px solid rgba(190, 158, 77, 0.16);
    border-radius: 8px;
    padding: 10px 14px;
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.ref-dqa-profile-link:hover {
    color: var(--ref-gold-bright);
    border-color: var(--ref-gold-primary);
}

/* Account Summary Details */
.ref-das-details-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 18px;
}

.ref-das-line {
    display: flex;
    justify-content: space-between;
    font-size: 0.78rem;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(190, 158, 77, 0.12);
}

.ref-das-line.address {
    flex-direction: column;
    gap: 4px;
    border-bottom: none;
}

.ref-das-label {
    color: #6db091;
}

.ref-das-val {
    color: #ffffff;
    font-weight: 600;
    text-align: right;
}

.ref-das-line.address .ref-das-val {
    text-align: left;
    line-height: 1.4;
    font-size: 0.76rem;
    color: #bed1c8;
}

/* ROW 4: 4 Trust Badges */
.ref-dash-trust-strip {
    background: rgba(37, 68, 53, 0.85);
    border: 1px solid var(--ref-border-gold);
    border-radius: 14px;
    padding: 20px 28px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4);
}

.ref-dtrust-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    border-right: 1px solid rgba(190, 158, 77, 0.14);
    padding-right: 12px;
}

.ref-dtrust-badge:last-child {
    border-right: none;
}

.ref-dtrust-badge i {
    font-size: 1.25rem;
    color: var(--ref-gold-bright);
    flex-shrink: 0;
}

.ref-dtrust-badge strong {
    display: block;
    font-size: 0.84rem;
    color: #ffffff;
    margin-bottom: 2px;
}

.ref-dtrust-badge span {
    font-size: 0.72rem;
    color: #cbe2d7;
}

/* -------------------------------------------------------------
   3. RESPONSIVE BREAKPOINTS FOR DASHBOARD
   ------------------------------------------------------------- */
@media (max-width: 1200px) {
    .ref-dash-three-columns-row {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 1024px) {
    .ref-dash-layout-container {
        grid-template-columns: 1fr;
    }
    .ref-dmetrics-four-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .ref-dash-two-columns-row {
        grid-template-columns: 1fr;
    }
    .ref-dash-trust-strip {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 650px) {
    .ref-dmetrics-four-grid {
        grid-template-columns: 1fr;
    }
    .ref-dash-three-columns-row {
        grid-template-columns: 1fr;
    }
    .ref-dup-astro-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .ref-dup-calendar-badge {
        width: 100%;
    }
    .ref-dash-trust-strip {
        grid-template-columns: 1fr;
    }
    .ref-dtrust-badge {
        border-right: none;
        border-bottom: 1px solid rgba(190, 158, 77, 0.14);
        padding-bottom: 12px;
    }
}

/* ==========================================================================
   ABOUT US PAGE SPECIFICATION (EXACT REFERENCE DESIGN MATCH)
   ========================================================================== */

.ref-about-main {
    background-color: var(--ref-bg-dark);
    color: var(--ref-text-sub);
    overflow-x: hidden;
}

/* -------------------------------------------------------------
   1. HERO SECTION: ABOUT ARIZONA OCCUL
   ------------------------------------------------------------- */
.ref-about-hero {
    padding: 30px 0 60px;
    background: radial-gradient(circle at 75% 35%, #2e5543 0%, #2b4f41 65%, #264638 100%);
    border-bottom: 1px solid rgba(190, 158, 77, 0.14);
}

.ref-about-hero-grid {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    align-items: center;
    gap: 40px;
}

.ref-abhero-title {
    font-family: var(--ref-font-heading);
    font-size: 3.3rem;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.2;
    margin-bottom: 14px;
}

.ref-abhero-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.ref-abhero-divider .ref-line {
    width: 60px;
    height: 1px;
    background: var(--ref-gold-primary);
}

.ref-abhero-divider i {
    color: var(--ref-gold-bright);
    font-size: 0.65rem;
}

.ref-abhero-tagline {
    font-family: var(--ref-font-heading);
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--ref-gold-bright);
    margin-bottom: 16px;
    letter-spacing: 0.5px;
}

.ref-abhero-desc {
    font-size: 1.02rem;
    color: var(--ref-text-sub);
    line-height: 1.7;
    max-width: 580px;
    margin-bottom: 28px;
}

.ref-btn-journey {
    padding: 11px 26px;
    font-size: 0.92rem;
}

.ref-abhero-right {
    display: flex;
    justify-content: center;
}

.ref-abhero-art-frame {
    width: 380px;
    height: 380px;
    max-width: 100%;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 0 50px rgba(190, 158, 77, 0.35);
}

.ref-abhero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* -------------------------------------------------------------
   2. SECTION 2: 4 CORE VALUES / PILLARS CARDS
   ------------------------------------------------------------- */
.ref-about-pillars-section {
    padding: 60px 0 40px;
    background: #2b4f41 !important;
}

.ref-pillars-four-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.ref-pillar-card {
    background: rgba(37, 69, 54, 0.85);
    border: 1px solid var(--ref-border-gold);
    border-radius: 16px;
    padding: 28px 22px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    display: flex;
    flex-direction: column;
}

.ref-pillar-card:hover {
    transform: translateY(-5px);
    border-color: var(--ref-gold-primary);
    box-shadow: 0 16px 40px rgba(190, 158, 77, 0.18);
}

.ref-pillar-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(190, 158, 77, 0.1);
    border: 1.5px solid var(--ref-border-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ref-gold-bright);
    font-size: 1.25rem;
    margin-bottom: 18px;
}

.ref-pillar-title {
    font-family: var(--ref-font-heading);
    font-size: 1.2rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 10px;
}

.ref-pillar-text {
    font-size: 0.86rem;
    color: var(--ref-text-sub);
    line-height: 1.55;
    margin: 0;
}

/* -------------------------------------------------------------
   3. SECTION 3: ANIMATED METRIC STAT COUNTERS (5 Metrics)
   ------------------------------------------------------------- */
.ref-about-stats-section {
    padding: 20px 0 50px;
    background: #2b4f41 !important;
}

.ref-about-stats-bar {
    background: rgba(37, 69, 54, 0.88);
    border: 1px solid var(--ref-border-gold);
    border-radius: 16px;
    padding: 26px 36px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
}

.ref-astat-item {
    display: flex;
    align-items: center;
    gap: 14px;
    border-right: 1px solid rgba(190, 158, 77, 0.14);
    padding-right: 14px;
}

.ref-astat-item:last-child {
    border-right: none;
}

.ref-astat-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(190, 158, 77, 0.1);
    border: 1.5px solid var(--ref-border-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ref-gold-bright);
    font-size: 1.15rem;
    flex-shrink: 0;
}

.ref-astat-num {
    display: block;
    font-size: 1.6rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.1;
    margin-bottom: 2px;
}

.ref-astat-label {
    font-size: 0.76rem;
    color: #cbe2d7;
    white-space: nowrap;
}

/* -------------------------------------------------------------
   4. SECTION 4: OUR STORY & WHY CHOOSE ARIZONA OCCUL
   ------------------------------------------------------------- */
.ref-about-story-section {
    padding: 20px 0 60px;
    background: #2b4f41 !important;
}

.ref-story-split-grid {
    display: grid;
    grid-template-columns: 1.35fr 0.75fr;
    gap: 26px;
    align-items: stretch;
}

/* Left Sub-Box: Our Story */
.ref-story-card {
    background: rgba(37, 69, 54, 0.88);
    border: 1px solid var(--ref-border-gold);
    border-radius: 18px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 240px 1fr;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
}

.ref-story-thumb-col {
    position: relative;
    height: 100%;
}

.ref-story-chart-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ref-story-text-col {
    padding: 30px 28px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ref-story-tag {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--ref-gold-primary);
    text-transform: uppercase;
    margin-bottom: 8px;
}

.ref-story-title {
    font-family: var(--ref-font-heading);
    font-size: 1.65rem;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.3;
    margin: 0 0 14px;
}

.ref-story-desc {
    font-size: 0.88rem;
    color: var(--ref-text-sub);
    line-height: 1.6;
    margin: 0 0 10px;
}

.ref-story-mantra-strip {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(190, 158, 77, 0.16);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--ref-gold-bright);
    font-weight: 600;
    flex-wrap: wrap;
}

.ref-story-mantra-strip .ref-star {
    color: rgba(190, 158, 77, 0.5);
    font-size: 0.7rem;
}

/* Right Sub-Box: Why Choose Arizona Occul? */
.ref-why-choose-card {
    background: radial-gradient(circle at 85% 85%, #335f4b 0%, #274939 75%);
    border: 1px solid var(--ref-border-gold);
    border-radius: 18px;
    padding: 30px 26px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.ref-why-choose-card::after {
    content: '🪷';
    position: absolute;
    bottom: -15px;
    right: -10px;
    font-size: 7rem;
    opacity: 0.08;
    pointer-events: none;
}

.ref-wcc-title {
    font-family: var(--ref-font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--ref-gold-bright);
    margin: 0 0 20px;
}

.ref-wcc-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ref-wcc-checklist li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.86rem;
    color: #ffffff;
}

.ref-wcc-checklist li i {
    color: var(--ref-gold-bright);
    font-size: 0.95rem;
    flex-shrink: 0;
}

/* Cosmic Footer Tagline */
.ref-about-cosmic-tagline {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--ref-gold-bright);
    letter-spacing: 0.5px;
}

.ref-tag-sep {
    color: rgba(190, 158, 77, 0.5);
    font-size: 0.75rem;
}

/* -------------------------------------------------------------
   5. RESPONSIVE BREAKPOINTS FOR ABOUT US
   ------------------------------------------------------------- */
@media (max-width: 1024px) {
    .ref-about-hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .ref-abhero-divider {
        justify-content: center;
    }
    .ref-abhero-desc {
        margin: 0 auto 28px;
    }
    .ref-abhero-art-frame {
        width: 280px;
        height: 280px;
        margin: 0 auto;
    }
    .ref-pillars-four-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .ref-about-stats-bar {
        grid-template-columns: repeat(3, 1fr);
    }
    .ref-story-split-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .ref-abhero-title {
        font-size: 2.4rem;
    }
    .ref-story-card {
        grid-template-columns: 1fr;
    }
    .ref-story-thumb-col {
        height: 200px;
    }
    .ref-about-stats-bar {
        grid-template-columns: 1fr;
    }
    .ref-astat-item {
        border-right: none;
        border-bottom: 1px solid rgba(190, 158, 77, 0.14);
        padding-bottom: 12px;
    }
}

@media (max-width: 500px) {
    .ref-pillars-four-grid {
        grid-template-columns: 1fr;
    }
    .ref-about-cosmic-tagline {
        flex-direction: column;
        gap: 6px;
    }
    .ref-tag-sep {
        display: none;
    }
}

/* ==========================================================================
   CONTACT US PAGE SPECIFICATION (EXACT REFERENCE DESIGN MATCH)
   ========================================================================== */

.ref-contact-main {
    background-color: var(--ref-bg-dark);
    color: var(--ref-text-sub);
    padding: 30px 0 80px;
    overflow-x: hidden;
}

.ref-cbreadcrumbs {
    font-size: 0.82rem;
    color: #cbe2d7;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ref-cbreadcrumbs a {
    color: #cbe2d7;
    text-decoration: none;
    transition: color 0.2s ease;
}

.ref-cbreadcrumbs a:hover {
    color: var(--ref-gold-bright);
}

.ref-csep {
    color: rgba(190, 158, 77, 0.35);
}

.ref-ccurr {
    color: var(--ref-gold-bright);
    font-weight: 600;
}

/* -------------------------------------------------------------
   1. TOP TWO-COLUMN GRID: HERO + SEND US A MESSAGE FORM
   ------------------------------------------------------------- */
.ref-contact-top-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 36px;
    align-items: flex-start;
    margin-bottom: 40px;
}

.ref-chead-title {
    font-family: var(--ref-font-heading);
    font-size: 3.3rem;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.2;
    margin-bottom: 12px;
}

.ref-chead-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.ref-chead-divider .ref-line {
    width: 50px;
    height: 1px;
    background: var(--ref-gold-primary);
}

.ref-chead-divider i {
    color: var(--ref-gold-bright);
    font-size: 0.65rem;
}

.ref-chead-tagline {
    font-family: var(--ref-font-heading);
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--ref-gold-bright);
    margin-bottom: 12px;
}

.ref-chead-desc {
    font-size: 0.96rem;
    color: var(--ref-text-sub);
    line-height: 1.65;
    margin-bottom: 24px;
    max-width: 540px;
}

/* Center Altar Artwork */
.ref-chead-altar-box {
    width: 260px;
    height: 260px;
    margin: 0 auto 28px;
    border-radius: 50%;
    overflow: hidden;
    border: 1.5px solid var(--ref-border-gold);
    box-shadow: 0 0 45px rgba(190, 158, 77, 0.3);
}

.ref-chead-altar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 4 Trust Badges in a Row */
.ref-chead-trust-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.ref-ctrust-item {
    background: rgba(37, 69, 54, 0.8);
    border: 1px solid rgba(190, 158, 77, 0.2);
    border-radius: 12px;
    padding: 16px 12px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.ref-ctrust-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(190, 158, 77, 0.1);
    border: 1.5px solid var(--ref-border-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ref-gold-bright);
    font-size: 1.05rem;
    margin-bottom: 2px;
}

.ref-ctrust-item strong {
    font-size: 0.82rem;
    color: #ffffff;
    display: block;
}

.ref-ctrust-item span {
    font-size: 0.7rem;
    color: #cbe2d7;
    line-height: 1.35;
}

/* Right Form Card */
.ref-cform-card {
    background: rgba(37, 69, 54, 0.88);
    border: 1px solid var(--ref-border-gold);
    border-radius: 18px;
    padding: 26px 28px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

.ref-cform-header {
    text-align: center;
    margin-bottom: 22px;
    position: relative;
}

.ref-cform-title {
    font-family: var(--ref-font-heading);
    font-size: 1.45rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 4px;
}

.ref-cform-title-decor {
    color: var(--ref-gold-bright);
    font-size: 0.85rem;
}

.ref-cform-row-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 14px;
}

.ref-cfield {
    margin-bottom: 14px;
}

.ref-clabel {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 6px;
}

.ref-cinput-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.ref-cicon {
    position: absolute;
    left: 14px;
    color: #5ca784;
    font-size: 0.88rem;
    pointer-events: none;
}

.ref-cicon-textarea {
    position: absolute;
    right: 14px;
    top: 14px;
    color: #5ca784;
    font-size: 0.84rem;
}

.ref-cinput {
    width: 100%;
    background: #ffffff;
    border: 1px solid rgba(190, 158, 77, 0.28);
    border-radius: 8px;
    color: #ffffff;
    padding: 10px 14px 10px 38px;
    font-size: 0.88rem;
    outline: none;
    transition: border-color 0.2s ease;
}

.ref-cinput:focus {
    border-color: var(--ref-gold-primary);
    box-shadow: 0 0 8px rgba(190, 158, 77, 0.3);
}

.ref-cselect {
    padding-left: 14px;
    cursor: pointer;
}

.ref-ctextarea {
    padding: 12px 38px 12px 14px;
    resize: vertical;
}

.ref-btn-send-msg {
    width: 100%;
    justify-content: center;
    padding: 12px 20px;
    font-size: 0.95rem;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(190, 158, 77, 0.35);
}

.ref-cform-divider {
    text-align: center;
    position: relative;
    margin: 16px 0;
}

.ref-cform-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(190, 158, 77, 0.15);
}

.ref-cform-divider span {
    position: relative;
    background: #264637;
    padding: 0 12px;
    font-size: 0.78rem;
    color: #5ca784;
}

.ref-btn-google-contact {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    background: #ffffff;
    border: 1px solid rgba(190, 158, 77, 0.25);
    border-radius: 8px;
    color: #ffffff;
    font-size: 0.86rem;
    font-weight: 600;
    padding: 10px 18px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.ref-btn-google-contact:hover {
    border-color: var(--ref-gold-primary);
    background: rgba(190, 158, 77, 0.1);
}

.ref-contact-alert {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 0.84rem;
    margin-bottom: 16px;
}

.ref-contact-alert.success {
    background: rgba(81, 150, 115, 0.15);
    border: 1px solid #22c55e;
    color: #a4d1ba;
}

.ref-contact-alert.error {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid #ef4444;
    color: #fca5a5;
}

/* -------------------------------------------------------------
   2. BOTTOM TWO-COLUMN GRID: GET IN TOUCH + QUICK HELP FAQ
   ------------------------------------------------------------- */
.ref-contact-bottom-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 36px;
    align-items: stretch;
    margin-bottom: 40px;
}

/* Left Sub-Grid */
.ref-git-outer-card {
    background: rgba(37, 69, 54, 0.88);
    border: 1px solid var(--ref-border-gold);
    border-radius: 18px;
    padding: 26px 28px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

.ref-git-title {
    font-family: var(--ref-font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 20px;
}

.ref-git-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 18px;
}

.ref-git-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(190, 158, 77, 0.1);
    border: 1.5px solid var(--ref-border-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ref-gold-bright);
    font-size: 1.05rem;
    flex-shrink: 0;
}

.ref-git-row strong {
    display: block;
    font-size: 0.88rem;
    color: #ffffff;
    margin-bottom: 2px;
}

.ref-git-row a {
    color: var(--ref-gold-bright);
    text-decoration: none;
    font-size: 0.84rem;
    display: block;
    margin-bottom: 2px;
}

.ref-git-row span,
.ref-git-row p {
    font-size: 0.74rem;
    color: #cbe2d7;
    margin: 0;
    line-height: 1.4;
}

/* Quote Sub-Card */
.ref-git-quote-card {
    background: radial-gradient(circle at 80% 50%, #325c48 0%, #264738 80%);
    border: 1px solid rgba(190, 158, 77, 0.25);
    border-radius: 14px;
    padding: 22px 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

.ref-git-quote-mark {
    font-family: serif;
    font-size: 2rem;
    color: var(--ref-gold-bright);
    line-height: 1;
}

.ref-git-quote-text {
    font-size: 0.86rem;
    font-style: italic;
    color: #ffffff;
    line-height: 1.55;
    margin: 0 0 16px;
}

.ref-git-altar-thumb {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    align-self: flex-end;
    border: 1.5px solid var(--ref-gold-primary);
    box-shadow: 0 0 16px rgba(190, 158, 77, 0.3);
}

.ref-git-altar-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Right Quick Help FAQ Card */
.ref-quick-help-card {
    background: rgba(37, 69, 54, 0.88);
    border: 1px solid var(--ref-border-gold);
    border-radius: 18px;
    padding: 26px 28px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.ref-qh-header {
    text-align: center;
    margin-bottom: 20px;
}

.ref-qh-title {
    font-family: var(--ref-font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 4px;
}

.ref-qh-accordion {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 22px;
}

.ref-qh-item {
    background: #ffffff;
    border: 1px solid rgba(190, 158, 77, 0.22);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.ref-qh-item:hover,
.ref-qh-item.active {
    border-color: var(--ref-gold-primary);
}

.ref-qh-question {
    width: 100%;
    background: none;
    border: none;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #ffffff;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
}

.ref-qh-qicon {
    color: var(--ref-gold-bright);
    font-size: 0.9rem;
    flex-shrink: 0;
}

.ref-qh-arr {
    margin-left: auto;
    color: #5ca784;
    font-size: 0.8rem;
    transition: transform 0.2s ease;
}

.ref-qh-item.active .ref-qh-arr {
    transform: rotate(90deg);
    color: var(--ref-gold-bright);
}

.ref-qh-answer {
    display: none;
    padding: 0 16px 14px 44px;
    font-size: 0.78rem;
    color: #cbe2d7;
    line-height: 1.5;
}

.ref-qh-item.active .ref-qh-answer {
    display: block;
}

.ref-qh-footer-row {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 14px;
    border-top: 1px solid rgba(190, 158, 77, 0.14);
}

.ref-qh-foot-text {
    font-size: 0.78rem;
    color: #cbe2d7;
}

.ref-qh-foot-text strong {
    color: #ffffff;
}

.ref-btn-view-faq {
    padding: 7px 18px;
    font-size: 0.8rem;
}

.ref-qh-crystal-bg {
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    overflow: hidden;
    opacity: 0.25;
    pointer-events: none;
}

.ref-qh-crystal-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* -------------------------------------------------------------
   3. BOTTOM 4 TRUST BADGES STRIP
   ------------------------------------------------------------- */
.ref-contact-trust-strip {
    background: rgba(37, 68, 53, 0.85);
    border: 1px solid var(--ref-border-gold);
    border-radius: 14px;
    padding: 20px 28px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4);
}

.ref-ctrust-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    border-right: 1px solid rgba(190, 158, 77, 0.14);
    padding-right: 12px;
}

.ref-ctrust-badge:last-child {
    border-right: none;
}

.ref-ctrust-badge i {
    font-size: 1.25rem;
    color: var(--ref-gold-bright);
    flex-shrink: 0;
}

.ref-ctrust-badge strong {
    display: block;
    font-size: 0.84rem;
    color: #ffffff;
    margin-bottom: 2px;
}

.ref-ctrust-badge span {
    font-size: 0.72rem;
    color: #cbe2d7;
}

/* -------------------------------------------------------------
   4. RESPONSIVE BREAKPOINTS FOR CONTACT US
   ------------------------------------------------------------- */
@media (max-width: 1024px) {
    .ref-contact-top-grid {
        grid-template-columns: 1fr;
    }
    .ref-contact-bottom-grid {
        grid-template-columns: 1fr;
    }
    .ref-contact-trust-strip {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .ref-chead-title {
        font-size: 2.4rem;
    }
    .ref-chead-trust-row {
        grid-template-columns: repeat(2, 1fr);
    }
    .ref-cform-row-two {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .ref-git-outer-card {
        grid-template-columns: 1fr;
    }
    .ref-contact-trust-strip {
        grid-template-columns: 1fr;
    }
    .ref-ctrust-badge {
        border-right: none;
        border-bottom: 1px solid rgba(190, 158, 77, 0.14);
        padding-bottom: 12px;
    }
}

/* ==========================================================================
   MASTER MOBILE RESPONSIVENESS OVERHAUL (100% MOBILE COMPATIBILITY)
   ========================================================================== */

/* 1. Global Viewport & Reset Enforcement */
html, body {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    position: relative;
    -webkit-text-size-adjust: 100%;
}

*, *::before, *::after {
    box-sizing: border-box !important;
}

.ref-site-root, .site-wrapper, #page {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
}

.container, .container-fluid {
    width: 100% !important;
    max-width: 1240px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
}

img, video, iframe, canvas {
    max-width: 100% !important;
    height: auto;
}

/* 2. Mobile Navigation & Drawer System */
@media (max-width: 1024px) {
    .ref-header {
        padding: 10px 0 !important;
    }
    .ref-header-container {
        gap: 12px !important;
        justify-content: space-between !important;
    }
    .ref-nav {
        display: none !important;
    }
    .mobile-menu-toggle {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 38px !important;
        height: 38px !important;
        border-radius: 8px !important;
        background: #ffffff !important;
        border: 1.5px solid #c2dbd0 !important;
        color: #2d5244 !important;
        font-size: 1.15rem !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
        transition: all 0.2s ease !important;
    }
    .mobile-menu-toggle:hover,
    .mobile-menu-toggle:active {
        background: #c2dbd0 !important;
        color: #2d5244 !important;
    }
    .ref-header-actions {
        gap: 10px !important;
    }
}

@media (max-width: 640px) {
    .ref-brand-titles .ref-brand-tag {
        display: none !important;
    }
    .ref-brand-name {
        font-size: 1rem !important;
        letter-spacing: 0.5px !important;
    }
    .ref-logo-img {
        height: 36px !important;
        max-height: 36px !important;
        max-width: 40px !important;
    }
    .ref-account-link span {
        display: none !important;
    }
    .ref-account-link {
        width: 36px !important;
        height: 36px !important;
        border-radius: 50% !important;
        background: #ffffff !important;
        border: 1.5px solid #c2dbd0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        color: #2d5244 !important;
    }
    .ref-header-btn-book {
        font-size: 0.78rem !important;
        padding: 8px 14px !important;
    }
}

@media (max-width: 480px) {
    .ref-header-btn-book {
        display: none !important;
    }
    .ref-logo-img {
        height: 32px !important;
        max-height: 32px !important;
        max-width: 36px !important;
    }
    .ref-brand-name {
        font-size: 0.92rem !important;
    }
}

/* Mobile Drawer & Overlay Styles */
.mobile-drawer-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(21, 47, 36, 0.45) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    z-index: 99998 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
}

.mobile-drawer-overlay.open,
.mobile-drawer-overlay.active {
    opacity: 1 !important;
    visibility: visible !important;
}

.mobile-drawer {
    position: fixed !important;
    top: 0 !important;
    right: -340px !important;
    width: min(320px, 86vw) !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: #f6f9f8 !important;
    border-left: 1.5px solid #c2dbd0 !important;
    z-index: 99999 !important;
    padding: 24px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    transition: right 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: -12px 0 40px rgba(21, 47, 36, 0.18) !important;
    overflow-y: auto !important;
}

.mobile-drawer.open,
.mobile-drawer.active {
    right: 0 !important;
}

.mobile-drawer-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid #c2dbd0 !important;
    margin-bottom: 20px !important;
}

.mobile-drawer-header .brand-name {
    font-family: 'Cinzel', serif !important;
    font-weight: 700 !important;
    color: #2d5244 !important;
    font-size: 1.1rem !important;
    display: block !important;
}

.mobile-drawer-header .brand-tagline {
    font-size: 0.65rem !important;
    color: #4d806a !important;
    display: block !important;
}

.mobile-drawer-close {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    border: 1px solid #c2dbd0 !important;
    color: #2d5244 !important;
    font-size: 1.4rem !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    transition: all 0.2s ease !important;
}

.mobile-drawer-close:hover {
    background: #c2dbd0 !important;
    color: #2d5244 !important;
}

.mobile-menu-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.mobile-menu-list li a {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 14px !important;
    border-radius: 8px !important;
    color: #2d5244 !important;
    text-decoration: none !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}

.mobile-menu-list li a i {
    width: 20px !important;
    color: #4d806a !important;
    text-align: center !important;
}

.mobile-menu-list li a:hover,
.mobile-menu-list li a:active {
    background: #edf3f0 !important;
    color: #2d5244 !important;
    border-left: 3px solid #4d806a !important;
}

.mobile-drawer-footer {
    margin-top: auto !important;
    padding-top: 20px !important;
    border-top: 1px solid #c2dbd0 !important;
}

/* 3. Hero Altar Frames & Circles Scaling */
@media (max-width: 991px) {
    .ref-chero-wheel-box,
    .ref-shero-altar-box,
    .ref-abhero-art-frame,
    .ref-chead-altar-box,
    .astro-altar-box,
    .altar-card,
    .ref-hero-altar-box,
    .hero-altar-box {
        width: min(280px, 80vw) !important;
        height: min(280px, 80vw) !important;
        max-width: 100% !important;
        margin: 20px auto 0 !important;
    }
}

/* 4. Consultation Page Mobile Adaptations */
@media (max-width: 991px) {
    .ref-consultation-hero-grid,
    .ref-con-layout-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
    .ref-service-selection-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 640px) {
    .ref-stepper-track {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 6px !important;
        padding: 14px 10px !important;
    }
    .ref-step-line {
        display: none !important;
    }
    .ref-step-circle {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.8rem !important;
        margin: 0 auto 6px !important;
    }
    .ref-step-label {
        font-size: 0.62rem !important;
        line-height: 1.15 !important;
        text-align: center !important;
    }
    .ref-chero-title {
        font-size: 2.2rem !important;
    }
}

@media (max-width: 500px) {
    .ref-service-card {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }
    .ref-sc-price-col {
        width: 100% !important;
        margin-top: 8px !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }
}

/* 5. Shop Page Mobile Adaptations */
@media (max-width: 991px) {
    .ref-shop-layout-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
    .ref-shop-filter-sidebar {
        margin-bottom: 20px !important;
    }
    .ref-shero-grid {
        grid-template-columns: 1fr !important;
        text-align: center !important;
    }
    .ref-shero-trust-bar {
        justify-content: center !important;
    }
}

@media (max-width: 768px) {
    .ref-products-catalog-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 14px !important;
    }
    .ref-shero-title {
        font-size: 2.3rem !important;
    }
}

@media (max-width: 480px) {
    .ref-products-catalog-grid {
        grid-template-columns: 1fr !important;
    }
    .ref-shero-trust-bar {
        flex-direction: column !important;
        gap: 8px !important;
    }
}

/* 6. Secure Checkout Page Mobile Adaptations */
@media (max-width: 991px) {
    .ref-chkout-layout-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
    .ref-checkout-hero-grid {
        grid-template-columns: 1fr !important;
        text-align: center !important;
    }
}

@media (max-width: 768px) {
    .ref-stepper-six-track {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 12px 8px !important;
        padding: 16px 10px !important;
    }
    .ref-sstep-line {
        display: none !important;
    }
    .ref-sstep-circle {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.8rem !important;
        margin: 0 auto 4px !important;
    }
    .ref-sstep-label {
        font-size: 0.65rem !important;
        line-height: 1.15 !important;
        text-align: center !important;
    }
    .ref-pm-body-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    .ref-pm-tabs-nav {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(190, 158, 77, 0.2) !important;
        padding-bottom: 10px !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 6px !important;
    }
    .ref-pm-tab-btn {
        flex-shrink: 0 !important;
        min-width: 100px !important;
        padding: 8px 12px !important;
        font-size: 0.76rem !important;
        border-left: none !important;
        border-bottom: 2px solid transparent !important;
    }
    .ref-pm-tab-btn.active {
        border-left: none !important;
        border-bottom: 2px solid var(--ref-gold-primary) !important;
    }
    .ref-chk-row-two {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }
    .ref-chkout-trust-row {
        grid-template-columns: 1fr !important;
    }
    .ref-chkout-trust-item {
        border-right: none !important;
        border-bottom: 1px solid rgba(190, 158, 77, 0.14) !important;
        padding-bottom: 10px !important;
    }
}

/* 7. Login & Register Page Mobile Adaptations */
@media (max-width: 991px) {
    .ref-auth-main-card {
        grid-template-columns: 1fr !important;
    }
    .ref-auth-hero-col {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .ref-auth-forms-columns {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }
    .ref-auth-forms-columns > div:first-child {
        border-right: none !important;
        border-bottom: 1px solid rgba(190, 158, 77, 0.2) !important;
        padding-right: 0 !important;
        padding-bottom: 28px !important;
    }
    .ref-auth-perks-strip {
        grid-template-columns: 1fr !important;
    }
    .ref-auth-perk-item {
        border-right: none !important;
        border-bottom: 1px solid rgba(190, 158, 77, 0.14) !important;
        padding-bottom: 14px !important;
    }
}

/* 8. My Account Dashboard Mobile Adaptations */
@media (max-width: 991px) {
    .ref-dash-layout-container {
        grid-template-columns: 1fr !important;
    }
    .ref-dash-sidebar {
        margin-bottom: 20px !important;
    }
    .ref-dhero-header {
        flex-direction: column !important;
        text-align: center !important;
        gap: 16px !important;
    }
}

@media (max-width: 640px) {
    .ref-dmetrics-four-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
    .ref-dash-two-columns-row,
    .ref-dash-three-columns-row {
        grid-template-columns: 1fr !important;
    }
    .ref-dup-astro-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }
    .ref-dup-calendar-badge {
        width: 100% !important;
    }
    .ref-dup-buttons-row {
        flex-direction: column !important;
    }
    .ref-dash-trust-strip {
        grid-template-columns: 1fr !important;
    }
    .ref-dtrust-badge {
        border-right: none !important;
        border-bottom: 1px solid rgba(190, 158, 77, 0.14) !important;
        padding-bottom: 10px !important;
    }
}

/* 9. About Us Page Mobile Adaptations */
@media (max-width: 991px) {
    .ref-about-hero-grid {
        grid-template-columns: 1fr !important;
        text-align: center !important;
    }
    .ref-abhero-divider {
        justify-content: center !important;
    }
    .ref-abhero-desc {
        margin: 0 auto 28px !important;
    }
    .ref-pillars-four-grid {
        grid-template-columns: 1fr 1fr !important;
    }
    .ref-about-stats-bar {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .ref-story-split-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 768px) {
    .ref-abhero-title {
        font-size: 2.3rem !important;
    }
    .ref-story-card {
        grid-template-columns: 1fr !important;
    }
    .ref-story-thumb-col {
        height: 200px !important;
    }
    .ref-about-stats-bar {
        grid-template-columns: 1fr 1fr !important;
    }
    .ref-astat-item {
        border-right: none !important;
        border-bottom: 1px solid rgba(190, 158, 77, 0.14) !important;
        padding-bottom: 12px !important;
    }
}

@media (max-width: 500px) {
    .ref-pillars-four-grid {
        grid-template-columns: 1fr !important;
    }
    .ref-about-stats-bar {
        grid-template-columns: 1fr !important;
    }
}

/* 10. Contact Us Page Mobile Adaptations */
@media (max-width: 991px) {
    .ref-contact-top-grid,
    .ref-contact-bottom-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 768px) {
    .ref-chead-title {
        font-size: 2.3rem !important;
    }
    .ref-chead-trust-row {
        grid-template-columns: 1fr 1fr !important;
    }
    .ref-cform-row-two {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }
    .ref-git-outer-card {
        grid-template-columns: 1fr !important;
    }
    .ref-contact-trust-strip {
        grid-template-columns: 1fr !important;
    }
    .ref-ctrust-badge {
        border-right: none !important;
        border-bottom: 1px solid rgba(190, 158, 77, 0.14) !important;
        padding-bottom: 12px !important;
    }
}

@media (max-width: 440px) {
    .ref-chead-trust-row {
        grid-template-columns: 1fr !important;
    }
}

/* 11. Footer Mobile Adaptations */
@media (max-width: 768px) {
    .ref-footer-grid {
        grid-template-columns: 1fr !important;
        gap: 26px !important;
    }
    .ref-bottom-inner {
        flex-direction: column !important;
        gap: 12px !important;
        text-align: center !important;
    }
    .ref-back-to-top {
        bottom: 20px !important;
        right: 20px !important;
        width: 42px !important;
        height: 42px !important;
    }
}

/* 12. iOS Safari Form Zoom Prevention */
@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="number"],
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* ==========================================================================
   LUXURY MOBILE APP BAR & AESTHETIC ENHANCEMENTS (NATIVE APP FEEL)
   ========================================================================== */

/* 1. Mobile Bottom Sticky Navigation Bar */
.mobile-bottom-nav {
    display: none;
}

@media (max-width: 991px) {
    body {
        padding-bottom: 74px !important;
    }

    .mobile-bottom-nav {
        display: flex !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 66px !important;
        background: rgba(36, 67, 52, 0.94) !important;
        backdrop-filter: blur(20px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
        border-top: 1px solid rgba(190, 158, 77, 0.3) !important;
        z-index: 99990 !important;
        box-shadow: 0 -8px 25px rgba(0, 0, 0, 0.6) !important;
        justify-content: space-around !important;
        align-items: center !important;
        padding: 0 8px !important;
    }

    .mob-nav-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 1 !important;
        height: 100% !important;
        text-decoration: none !important;
        color: #91b3a3 !important;
        transition: all 0.25s ease !important;
        position: relative !important;
    }

    .mob-nav-item i {
        font-size: 1.15rem !important;
        margin-bottom: 3px !important;
        transition: transform 0.25s ease, color 0.25s ease !important;
    }

    .mob-nav-item span {
        font-size: 0.68rem !important;
        font-weight: 600 !important;
        letter-spacing: 0.3px !important;
    }

    .mob-nav-item.active,
    .mob-nav-item:active {
        color: var(--ref-gold-bright) !important;
    }

    .mob-nav-item.active i {
        transform: translateY(-2px) scale(1.1) !important;
        color: var(--ref-gold-bright) !important;
        filter: drop-shadow(0 2px 8px rgba(190, 158, 77, 0.5)) !important;
    }

    /* Floating Center "Book Now" Button */
    .mob-nav-center-item {
        position: relative !important;
        top: -14px !important;
    }

    .mob-nav-center-circle {
        width: 48px !important;
        height: 48px !important;
        border-radius: 50% !important;
        background: linear-gradient(135deg, #be9e4d 0%, #d6c17e 50%, #a4843c 100%) !important;
        color: #2b4f41 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 1.25rem !important;
        border: 2px solid #2b4f41 !important;
        box-shadow: 0 4px 18px rgba(190, 158, 77, 0.6) !important;
        margin-bottom: 2px !important;
        animation: pulseGoldRing 2.6s infinite !important;
    }

    .mob-nav-center-circle i {
        color: #2b4f41 !important;
        margin-bottom: 0 !important;
    }

    .mob-nav-center-item span {
        color: var(--ref-gold-bright) !important;
        font-weight: 700 !important;
    }

    .mob-nav-wa i {
        color: #25d366 !important;
    }

    /* Floating Back to Top Adjust for Bottom Bar */
    .ref-back-to-top {
        bottom: 80px !important;
        right: 18px !important;
        width: 44px !important;
        height: 44px !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6) !important;
    }
}

@keyframes pulseGoldRing {
    0% {
        box-shadow: 0 0 0 0 rgba(190, 158, 77, 0.7), 0 4px 18px rgba(190, 158, 77, 0.5);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(190, 158, 77, 0), 0 4px 18px rgba(190, 158, 77, 0.5);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(190, 158, 77, 0), 0 4px 18px rgba(190, 158, 77, 0.5);
    }
}

/* 2. Mobile Visual Polish & Glassmorphic Glow */
@media (max-width: 768px) {
    /* Rich Headings */
    h1, .ref-hero-title, .astro-hero-title, .ref-chero-title, .ref-shero-title, .ref-abhero-title, .ref-chead-title {
        font-size: 2.1rem !important;
        line-height: 1.25 !important;
        letter-spacing: 0.5px !important;
        text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6) !important;
    }

    /* Luxury Card Glassmorphic Elevation */
    .ref-service-card,
    .ref-product-card,
    .ref-pillar-card,
    .ref-story-card,
    .ref-why-choose-card,
    .ref-cform-card,
    .ref-quick-help-card,
    .ref-git-outer-card,
    .ref-auth-form-box,
    .ref-dpanel-card {
        border: 1px solid rgba(190, 158, 77, 0.24) !important;
        background: linear-gradient(160deg, rgba(14, 30, 23, 0.92) 0%, rgba(36, 67, 53, 0.96) 100%) !important;
        backdrop-filter: blur(14px) !important;
        -webkit-backdrop-filter: blur(14px) !important;
        border-radius: 16px !important;
        padding: 20px 16px !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    }

    /* Primary Gold CTA Buttons with Shimmer */
    .ref-btn-gold-solid,
    .ref-header-btn-book,
    .btn-gold {
        background: linear-gradient(135deg, #be9e4d 0%, #d9c493 50%, #a4843c 100%) !important;
        color: #2b4f41 !important;
        font-weight: 700 !important;
        border-radius: 10px !important;
        box-shadow: 0 6px 20px rgba(190, 158, 77, 0.4) !important;
        letter-spacing: 0.5px !important;
        transition: transform 0.15s ease, box-shadow 0.15s ease !important;
    }

    .ref-btn-gold-solid:active,
    .ref-header-btn-book:active,
    .btn-gold:active {
        transform: scale(0.97) !important;
    }

    /* Outline Gold Buttons */
    .ref-btn-gold-outline {
        border: 1.5px solid var(--ref-gold-primary) !important;
        color: var(--ref-gold-bright) !important;
        border-radius: 10px !important;
        background: rgba(190, 158, 77, 0.08) !important;
    }

    /* Trust Badges on Mobile */
    .ref-trust-item,
    .ref-dtrust-badge,
    .ref-ctrust-badge,
    .ref-chkout-trust-item {
        background: rgba(39, 72, 57, 0.6) !important;
        border: 1px solid rgba(190, 158, 77, 0.18) !important;
        border-radius: 12px !important;
        padding: 12px 14px !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
    }

    /* Hero Zodiac Rotating Wheel on Mobile - Grand & Majestic */
    .ref-zodiac-wheel-wrapper {
        width: min(300px, 82vw) !important;
        height: min(300px, 82vw) !important;
        margin: 22px auto 0 !important;
    }

    .ref-zodiac-aura {
        width: min(340px, 92vw) !important;
        height: min(340px, 92vw) !important;
    }
}

/* 3. Horizontal Touch Scroll Category Pills Bar on Mobile */
.mobile-category-pill-strip {
    display: none;
}

@media (max-width: 991px) {
    .mobile-category-pill-strip {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 12px 16px !important;
        margin-bottom: 20px !important;
        scrollbar-width: none !important;
    }

    .mobile-category-pill-strip::-webkit-scrollbar {
        display: none !important;
    }

    .mob-pill-tag {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 8px 16px !important;
        border-radius: 9999px !important;
        background: rgba(42, 77, 60, 0.75) !important;
        border: 1px solid rgba(190, 158, 77, 0.25) !important;
        color: #ffffff !important;
        font-size: 0.78rem !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
        text-decoration: none !important;
        flex-shrink: 0 !important;
        transition: all 0.2s ease !important;
    }

    .mob-pill-tag:active,
    .mob-pill-tag.active {
        background: var(--ref-gold-primary) !important;
        color: #2b4f41 !important;
        border-color: var(--ref-gold-bright) !important;
    }
}

/* ==========================================================================
   MASTER MOBILE APP-GRADE EXPERIENCE (EVERY PAGE 100% ATTRACTIVE ON PHONES)
   ========================================================================== */

@media (max-width: 991px) {

    /* --- 1. GLOBAL MOBILE RESETS & PADDING REDUCTION --- */
    html, body, #page, .ref-site-root, .site-wrapper {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        position: relative !important;
        padding-bottom: 80px !important; /* Space for Mobile Bottom Nav */
    }

    *, *::before, *::after {
        box-sizing: border-box !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    .container, .container-fluid {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    /* Reduce excessive desktop section paddings */
    section, .site-main, .ref-hero-section, .astro-hero-section,
    .ref-consultation-hero, .ref-shop-hero, .ref-auth-main,
    .ref-checkout-hero, .ref-about-hero, .ref-about-pillars-section,
    .ref-about-stats-section, .ref-about-story-section, .ref-contact-main,
    .ref-dash-main, .ref-trust-section, .ref-services-section,
    .ref-products-section, .ref-testimonials-section, .ref-steps-section {
        padding-top: 24px !important;
        padding-bottom: 24px !important;
    }

    /* Heading scale for mobile screens */
    h1, .ref-hero-title, .astro-hero-title, .ref-chero-title, 
    .ref-shero-title, .ref-abhero-title, .ref-chead-title,
    .ref-dhero-title, .ref-checkout-title {
        font-size: 1.85rem !important;
        line-height: 1.25 !important;
        letter-spacing: 0.5px !important;
        margin-bottom: 10px !important;
        text-align: center !important;
    }

    .ref-hero-subtitle, .astro-hero-desc, .ref-chero-sub,
    .ref-shero-desc, .ref-abhero-desc, .ref-chead-desc,
    .ref-dhero-sub, .ref-checkout-sub {
        font-size: 0.86rem !important;
        line-height: 1.5 !important;
        margin-bottom: 16px !important;
        text-align: center !important;
    }

    .ref-hero-cta-group, .ref-abhero-divider, .ref-chead-divider {
        justify-content: center !important;
    }

    /* Home Page Hero Zodiac Wheel on Mobile - Grand & Majestic */
    .ref-zodiac-wheel-wrapper {
        width: min(300px, 82vw) !important;
        height: min(300px, 82vw) !important;
        max-width: 100% !important;
        margin: 22px auto 0 !important;
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .ref-zodiac-aura {
        position: absolute !important;
        width: min(340px, 92vw) !important;
        height: min(340px, 92vw) !important;
        border-radius: 50% !important;
        background: radial-gradient(circle, rgba(190, 158, 77, 0.35) 0%, rgba(65, 136, 105, 0.25) 50%, transparent 70%) !important;
        filter: blur(25px) !important;
        pointer-events: none !important;
    }

    /* Other Sub-Pages Altar Graphics on Mobile - Balanced & Elegant */
    .ref-chero-wheel-box,
    .ref-shero-altar-box,
    .ref-abhero-art-frame,
    .ref-chead-altar-box,
    .astro-altar-box,
    .altar-card,
    .ref-hero-altar-box,
    .hero-altar-box {
        width: min(250px, 75vw) !important;
        height: min(250px, 75vw) !important;
        max-width: 100% !important;
        margin: 18px auto 0 !important;
        box-shadow: 0 0 35px rgba(190, 158, 77, 0.3) !important;
    }

    .ref-dhero-altar {
        width: 80px !important;
        height: 80px !important;
        border-radius: 50% !important;
        margin: 0 auto !important;
    }

    .ref-zodiac-wheel-img,
    .ref-chero-altar-img,
    .ref-shero-altar-img,
    .ref-abhero-img,
    .ref-chead-altar-img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* --- 2. CONSULTATION PAGE (/consultation/) MOBILE MASTER LIST --- */
    .ref-stepper-track {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 4px !important;
        padding: 10px 8px !important;
        background: rgba(37, 69, 54, 0.9) !important;
        border-radius: 12px !important;
        margin-bottom: 20px !important;
    }
    .ref-step-line {
        display: none !important;
    }
    .ref-step-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    .ref-step-circle {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.75rem !important;
        margin-bottom: 4px !important;
    }
    .ref-step-label {
        font-size: 0.6rem !important;
        line-height: 1.15 !important;
        text-align: center !important;
    }

    /* Transform Service Cards into Compact Mobile App Touch Rows */
    .ref-service-selection-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    .ref-service-card {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        padding: 12px 14px !important;
        gap: 12px !important;
        border-radius: 14px !important;
        background: rgba(12, 26, 20, 0.88) !important;
        border: 1px solid rgba(190, 158, 77, 0.2) !important;
    }

    .ref-service-card.selected {
        border-color: var(--ref-gold-bright) !important;
        background: linear-gradient(135deg, rgba(62, 115, 90, 0.4) 0%, rgba(43, 80, 62, 0.95) 100%) !important;
        box-shadow: 0 4px 18px rgba(190, 158, 77, 0.25) !important;
    }

    .ref-sc-thumb {
        width: 46px !important;
        height: 46px !important;
        border-radius: 50% !important;
        flex-shrink: 0 !important;
        border: 1.5px solid var(--ref-gold-primary) !important;
    }

    .ref-sc-body {
        flex: 1 !important;
        min-width: 0 !important;
    }

    .ref-sc-title {
        font-size: 0.88rem !important;
        font-weight: 700 !important;
        margin: 0 0 2px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .ref-sc-desc {
        display: none !important;
    }

    .ref-sc-meta {
        font-size: 0.7rem !important;
        color: #cbe2d7 !important;
        display: flex !important;
        gap: 8px !important;
    }

    .ref-sc-price-col {
        flex-shrink: 0 !important;
        text-align: right !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        gap: 2px !important;
    }

    .ref-sc-price {
        font-size: 0.92rem !important;
        font-weight: 800 !important;
        color: var(--ref-gold-bright) !important;
    }

    .ref-sc-select-btn {
        font-size: 0.68rem !important;
        padding: 4px 10px !important;
        border-radius: 9999px !important;
        margin-top: 2px !important;
    }

    /* --- 3. SPIRITUAL SHOP (/shop/) MOBILE 2-COLUMN CATALOG --- */
    .ref-products-catalog-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    .ref-product-card {
        padding: 10px !important;
        border-radius: 14px !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .ref-product-thumb {
        height: 130px !important;
        border-radius: 10px !important;
        overflow: hidden !important;
        margin-bottom: 8px !important;
    }

    .ref-product-thumb img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .ref-product-title {
        font-size: 0.82rem !important;
        line-height: 1.3 !important;
        height: 34px !important;
        overflow: hidden !important;
        margin-bottom: 4px !important;
    }

    .ref-product-rating {
        font-size: 0.68rem !important;
        margin-bottom: 4px !important;
    }

    .ref-product-price-row {
        margin-top: auto !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding-top: 4px !important;
    }

    .ref-product-price {
        font-size: 0.92rem !important;
        font-weight: 800 !important;
    }

    .ref-btn-add-cart {
        padding: 6px 10px !important;
        font-size: 0.72rem !important;
        border-radius: 6px !important;
    }

    /* --- 4. SECURE CHECKOUT (/checkout/) MOBILE COMPACT WORKFLOW --- */
    .ref-stepper-six-track {
        display: flex !important;
        justify-content: space-between !important;
        overflow-x: auto !important;
        gap: 4px !important;
        padding: 10px 8px !important;
        border-radius: 12px !important;
        background: rgba(37, 69, 54, 0.9) !important;
    }
    .ref-sstep-line {
        display: none !important;
    }
    .ref-sstep-circle {
        width: 26px !important;
        height: 26px !important;
        font-size: 0.72rem !important;
        margin-bottom: 2px !important;
    }
    .ref-sstep-label {
        font-size: 0.58rem !important;
        line-height: 1.1 !important;
        text-align: center !important;
    }

    /* Horizontal Touch Pills for Payment Methods */
    .ref-pm-body-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
    }

    .ref-pm-tabs-nav {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        gap: 6px !important;
        padding-bottom: 8px !important;
        border-bottom: 1px solid rgba(190, 158, 77, 0.2) !important;
        border-right: none !important;
        scrollbar-width: none !important;
    }
    .ref-pm-tabs-nav::-webkit-scrollbar {
        display: none !important;
    }

    .ref-pm-tab-btn {
        flex-shrink: 0 !important;
        padding: 8px 14px !important;
        border-radius: 9999px !important;
        background: rgba(42, 77, 60, 0.75) !important;
        border: 1px solid rgba(190, 158, 77, 0.25) !important;
        font-size: 0.76rem !important;
        border-left: none !important;
    }

    .ref-pm-tab-btn.active {
        background: var(--ref-gold-primary) !important;
        color: #2b4f41 !important;
        font-weight: 700 !important;
        border-left: none !important;
    }

    /* --- 5. CUSTOMER LOGIN & REGISTER (/login/) CLEAN SINGLE FORM TAB --- */
    .ref-auth-main-card,
    .ref-auth-layout-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }

    .ref-auth-left-hero {
        display: none !important; /* Hide to avoid pushing form below fold on mobile */
    }

    .ref-auth-right-panel {
        width: 100% !important;
        padding: 16px 12px !important;
    }

    .ref-auth-tabs-bar {
        display: flex !important;
        width: 100% !important;
        margin-bottom: 18px !important;
        background: rgba(37, 68, 53, 0.8) !important;
        padding: 4px !important;
        border-radius: 12px !important;
        border: 1px solid rgba(190, 158, 77, 0.2) !important;
    }

    .ref-atab-btn {
        flex: 1 !important;
        padding: 10px 8px !important;
        font-size: 0.84rem !important;
        border-radius: 8px !important;
        text-align: center !important;
        justify-content: center !important;
    }

    .ref-auth-forms-columns {
        display: flex !important;
        flex-direction: column !important;
    }

    /* --- 6. MY ACCOUNT DASHBOARD (/my-account/) CLEAN APPS TILES --- */
    .ref-dash-layout-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }

    .ref-dmetrics-four-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .ref-dmetric-card {
        padding: 12px 10px !important;
        border-radius: 12px !important;
        gap: 10px !important;
    }

    .ref-dm-icon {
        width: 36px !important;
        height: 36px !important;
        font-size: 1rem !important;
    }

    .ref-dm-number {
        font-size: 1.25rem !important;
    }

    .ref-dash-two-columns-row,
    .ref-dash-three-columns-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }

    .ref-dup-astro-row {
        flex-direction: row !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 10px 12px !important;
    }

    .ref-dup-avatar {
        width: 40px !important;
        height: 40px !important;
    }

    .ref-dup-meta-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        padding: 10px 12px !important;
    }

    .ref-dqa-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .ref-dqa-tile {
        padding: 12px 8px !important;
    }

    .ref-dqa-tile i {
        font-size: 1.15rem !important;
    }

    /* --- 7. ABOUT US & CONTACT US TOUCH ACCORDIONS --- */
    .ref-pillars-four-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    .ref-pillar-card {
        padding: 16px 12px !important;
    }

    .ref-about-stats-bar {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        padding: 16px 14px !important;
    }

    .ref-story-card {
        display: flex !important;
        flex-direction: column !important;
    }

    .ref-story-thumb-col {
        height: 160px !important;
    }

    .ref-contact-top-grid,
    .ref-contact-bottom-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 18px !important;
    }

    .ref-chead-trust-row {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .ref-git-outer-card {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }

    .ref-cform-row-two {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }

    /* --- 8. INPUTS & FORM TOUCH TARGETS (NO AUTO-ZOOM) --- */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="number"],
    select,
    textarea {
        font-size: 16px !important;
        height: 46px !important;
        border-radius: 10px !important;
    }

    textarea {
        height: 100px !important;
    }

    button, .ref-btn-gold-solid, .btn, .ref-btn-gold-outline {
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        touch-action: manipulation !important;
    }
}

/* ==========================================================================
   UNIVERSAL MOBILE RESPONSIVE ENGINE (ALL 8+ PAGES 100% OPERATIONAL ON PHONES)
   ========================================================================== */

@media (max-width: 991px) {

    /* 1. Global Viewport & Container Containment */
    html, body, #page, .ref-site-root, .site-wrapper, main, section, footer, header {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        position: relative !important;
    }

    .container, .container-fluid {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    /* 2. SPIRITUAL SHOP (/shop/) - FIX 280px FIXED SIDEBAR GRID BREAKING ON MOBILE */
    .ref-shop-grid-layout,
    .ref-shop-layout-grid,
    .screen3-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        width: 100% !important;
    }

    .ref-shop-sidebar {
        width: 100% !important;
        order: 2 !important; /* Move filter sidebar below products on mobile so users see products first! */
        margin-top: 14px !important;
    }

    /* Keep Categories widget on mobile, hide bulky widgets */
    .ref-shop-sidebar .ref-swidget:not(:first-child) {
        display: none !important;
    }

    .ref-shop-catalog-area {
        width: 100% !important;
        order: 1 !important;
    }

    .ref-catalog-top-bar {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }

    .ref-catalog-actions {
        width: 100% !important;
        display: flex !important;
        justify-content: space-between !important;
    }

    .ref-sort-select {
        flex: 1 !important;
        max-width: 220px !important;
    }

    /* 2-Column Product Catalog on Mobile */
    .ref-products-catalog-grid,
    .screen3-product-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .ref-sprod-card {
        width: 100% !important;
        padding: 10px !important;
        border-radius: 12px !important;
        display: flex !important;
        flex-direction: column !important;
        box-sizing: border-box !important;
    }

    .ref-sprod-img-frame {
        height: 130px !important;
        width: 100% !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        margin-bottom: 8px !important;
    }

    .ref-sprod-img-frame img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .ref-sprod-title {
        font-size: 0.84rem !important;
        line-height: 1.4 !important;
        height: 2.8em !important;
        max-height: 2.8em !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        margin-bottom: 6px !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
    }

    .ref-sprod-rating-row {
        font-size: 0.68rem !important;
        margin-bottom: 4px !important;
    }

    .ref-sprod-price-line {
        font-size: 0.88rem !important;
        font-weight: 700 !important;
        margin-bottom: 8px !important;
    }

    .ref-sprod-btn-view {
        width: 100% !important;
        padding: 6px 10px !important;
        font-size: 0.72rem !important;
        border-radius: 6px !important;
        text-align: center !important;
        justify-content: center !important;
        margin-top: auto !important;
    }

    .ref-shop-bottom-trust-strip {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    /* 3. CONSULTATION (/consultation/) - TOUCH ROW CARDS */
    .ref-booking-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        width: 100% !important;
    }

    .ref-booking-left-col,
    .ref-booking-right-sidebar {
        width: 100% !important;
    }

    .ref-service-selection-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .ref-consult-card {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        padding: 12px 14px !important;
        gap: 12px !important;
        border-radius: 14px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .ref-card-icon-frame {
        width: 44px !important;
        height: 44px !important;
        border-radius: 50% !important;
        flex-shrink: 0 !important;
    }

    .ref-card-title {
        font-size: 0.88rem !important;
        margin: 0 0 2px !important;
    }

    .ref-card-desc {
        display: none !important;
    }

    .ref-card-footer {
        margin-left: auto !important;
        text-align: right !important;
        flex-shrink: 0 !important;
    }

    .ref-dt-picker-box {
        flex-direction: column !important;
        gap: 14px !important;
    }

    .ref-slots-wrap {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .ref-slot-pill {
        padding: 8px 6px !important;
        font-size: 0.72rem !important;
        text-align: center !important;
    }

    .ref-client-inputs-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    /* 4. CHECKOUT (/checkout/) - HORIZONTAL PAYMENT TABS & COMPACT STEPS */
    .ref-checkout-layout-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }

    .ref-pm-body-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
    }

    .ref-pm-tabs-nav {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        gap: 6px !important;
        padding-bottom: 8px !important;
        border-bottom: 1px solid rgba(190, 158, 77, 0.2) !important;
        border-right: none !important;
    }

    .ref-bsum-sidebar-card {
        width: 100% !important;
    }

    /* 5. MY ACCOUNT (/my-account/) - COMPACT STATS & FULL WIDTH USER PROFILE */
    .ref-dash-layout-container,
    .screen6-account-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        width: 100% !important;
    }

    .ref-dash-sidebar-col {
        width: 100% !important;
    }

    .ref-dmetrics-four-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .ref-dash-two-columns-row,
    .ref-dash-three-columns-row,
    .s6-summary-tiles-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }

    .ref-dash-trust-strip,
    .s4-trust-badges-row,
    .screen4-bottom-cards {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    /* 6. ABOUT US & CONTACT US - 2X2 GRIDS & COMPACT STORY */
    .ref-pillars-four-grid,
    .why-four-grid,
    .ref-why-four-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    .ref-about-stats-bar {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .ref-story-split-grid,
    .ref-story-card,
    .ref-contact-top-grid,
    .ref-contact-bottom-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }

    .ref-chead-trust-row,
    .ref-contact-trust-strip {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    /* 7. HOMEPAGE & ASTROLOGY SERVICE GRIDS */
    .ref-trust-bar,
    .trust-four-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .ref-services-grid,
    .services-modern-grid,
    .astro-offerings-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
    }

    .ref-products-grid,
    .product-cards-four-grid,
    .astro-featured-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    .ref-testimonials-grid,
    .testimonial-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    /* 8. FOOTER COLUMNS ON MOBILE */
    .ref-footer-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }

    .ref-footer-brand-col,
    .ref-footer-col {
        width: 100% !important;
    }
}






/* ==========================================================================
   41. MASTER SOFT PASTEL GREEN LUXURY THEME
   Palette: Soothing Pastel Green (#edf3f0), Mint Mist (#eff5f2),
            Crisp Pure White (#ffffff), Deep Castleton Green (#2d5244)
   ========================================================================== */

/* Universal Background Overrides across EVERY Single Page, Section & Layout Container */
html,
body,
#page,
.site,
.site-content,
.site-main,
.ref-site-root,
.ref-main-wrapper,
.astro-main-wrapper,
.ref-services-section,
.ref-how-it-works-section,
.ref-clarity-banner-section,
.ref-collection-section,
.ref-testimonials-section,
.astro-featured-section,
.astro-more-section,
.astro-steps-section,
.astro-unlock-banner-section,
.ref-booking-section,
.ref-shop-catalog-section,
.ref-chkout-content-wrap,
.ref-about-pillars-section,
.ref-about-stats-section,
.ref-about-story-section,
.ref-trust-section,
.ref-steps-section,
.ref-auth-main,
.ref-contact-main,
.ref-dash-main,
.ref-dash-main-content,
.ref-products-section,
.ref-dash-layout-container,
.ref-page,
.ref-section,
.ref-services-page,
.ref-consult-page,
.ref-shop-page,
.ref-auth-page,
.ref-checkout-page,
.ref-account-page,
.ref-about-page,
.ref-contact-page,
.services-section,
.featured-products,
.why-choose,
.testimonials-section,
.woocommerce,
.woocommerce-page,
.entry-content,
.arizona-container {
    background-color: #edf3f0 !important;
    background: radial-gradient(circle at 50% 20%, #f6f9f8 0%, #edf3f0 60%, #e1ece7 100%) !important;
    color: #24342d !important;
}

/* ==========================================================
   RICH SPIRITUAL LUXURY HERO BANNERS
   Deep Emerald Sanctuary + Celestial Gold Radiance (Color Fix)
   ========================================================== */
.astro-hero-section,
.ref-consult-hero,
.ref-consultation-hero,
.ref-shop-hero,
.ref-about-hero,
.ref-checkout-hero,
.ref-chkout-hero,
.ref-contact-hero,
.ref-auth-hero,
.ref-dash-hero,
.consult-hero-wrap,
.services-hero,
.account-hero,
.checkout-hero,
.about-hero,
.contact-hero,
.shop-hero-sec {
    background: radial-gradient(circle at 75% 35%, #1c3c2f 0%, #2d5244 45%, #2b4f41 100%) !important;
    background-color: #2d5244 !important;
    color: #ffffff !important;
    border-bottom: 2px solid rgba(196, 148, 60, 0.3) !important;
    position: relative !important;
    overflow: hidden !important;
}

.astro-hero-section::before,
.ref-consult-hero::before,
.ref-consultation-hero::before,
.ref-shop-hero::before,
.ref-about-hero::before,
.ref-chkout-hero::before {
    content: '' !important;
    position: absolute !important;
    top: -10% !important;
    right: 5% !important;
    width: 600px !important;
    height: 600px !important;
    background: radial-gradient(circle, rgba(196, 148, 60, 0.16) 0%, rgba(65, 136, 105, 0.08) 50%, transparent 75%) !important;
    filter: blur(50px) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

.astro-hero-container,
.ref-consult-hero-grid,
.ref-abhero-grid,
.ref-chkout-hero-grid {
    position: relative !important;
    z-index: 2 !important;
}

/* Secondary Section Canvases */
.live-cosmic-canvas,
#servicesLiveCanvas,
#bannerLiveCanvas,
#ctaLiveCanvas,
.canvas-bg {
    opacity: 0.55 !important;
    pointer-events: none !important;
}

/* Headings: Deep Castleton Green (#2d5244) for High Contrast Luxury */
h1, h2, h3, h4, h5, h6,
.heading-title,
.ref-hero-title,
.astro-hero-title,
.ref-sec-title,
.ref-card-title,
.ref-product-name,
.brand-name,
.ref-brand-name,
.ref-step-title,
.ref-auth-title,
.ref-about-title,
.ref-contact-title,
.ref-summary-title,
.ref-price-title,
.service-title,
.testimonial-author-name,
.wp-block-heading,
.woocommerce-products-header__title,
.woocommerce-loop-product__title,
.product_title {
    color: #2d5244 !important;
    font-family: 'Cinzel', serif !important;
    font-weight: 700 !important;
    text-shadow: none !important;
}

/* Ensure Hero Text and Dark Card Headings remain brilliant Gold / White */
.ref-about-hero .ref-abhero-title {
    color: #ffffff !important;
}
.ref-about-hero .ref-abhero-tagline {
    color: #c4943c !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5) !important;
}
.ref-about-hero .ref-abhero-desc {
    color: #e2e8f0 !important;
}
.ref-pillar-card .ref-pillar-title {
    color: #c4943c !important;
}
.ref-pillar-card .ref-pillar-text {
    color: #cbd5e1 !important;
}

/* Elegant Green / Gold Accent Text */
.gold-gradient,
.ref-gold-highlight,
.gold-text,
.gradient-text {
    background: linear-gradient(135deg, #2d5244 0%, #2d5244 50%, #265642 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    display: inline-block !important;
    font-style: italic !important;
    filter: none !important;
}

.heading-gold-line {
    background: linear-gradient(90deg, transparent, #c2dbd0, #2d5244, #c2dbd0, transparent) !important;
    height: 3px !important;
    width: 80px !important;
    margin: 16px auto !important;
    border-radius: 2px !important;
}

/* Subtitles & Body Descriptions: Deep Forest Slate (#24342d & #33453e) for Light Backgrounds */
body p:not(.ref-footer-bio):not(.site-footer p):not(.ref-hero-subtitle):not(.ref-chero-sub):not(.astro-hero-subtitle):not(.ref-abhero-desc):not(.ref-chero-main-sub):not(.ref-pillar-text):not(.ref-story-desc):not(.ref-clarity-sub):not(.ref-git-quote-text):not(.ref-pillar-card p):not(.ref-story-card p):not(.ref-clarity-banner-card p):not(.ref-why-choose-card p):not(.ref-git-outer-card p):not(.ref-git-contact-info p):not(.ref-cform-card p):not(.ref-payment-methods-card p):not(.ref-bsummary-card p):not(.s4-reviews-section *):not(.s4-rev-content *):not(.s4-trust-item *):not(.s4-form-inner-card *),
body label:not(.ref-footer *):not(.site-footer *):not(.ref-payment-methods-card label):not(.ref-cform-card label):not(.ref-clabel):not(.s4-reviews-section *):not(.s4-form-inner-card *),
.ref-sec-desc,
.ref-hero-desc,
.ref-card-desc,
.ref-trust-text,
.ref-trust-desc,
.testimonial-text,
.ref-faq-ans,
.text-muted,
.description,
.woocommerce-breadcrumb {
    color: #24342d !important;
    text-shadow: none !important;
}

/* Dark Cards & Reviews Section Celestial Light Text */
body .ref-pillar-card p,
body p.ref-pillar-text,
body .ref-story-card p,
body p.ref-story-desc,
body .ref-why-choose-card p,
body .ref-why-choose-card li span,
body .ref-clarity-banner-card p,
body p.ref-clarity-sub,
body .ref-git-outer-card p,
body p.ref-git-quote-text,
body .ref-git-row div span,
body .ref-git-row div p,
body .ref-payment-methods-card label,
body .ref-bsummary-card span,
body .ref-bsum-line span,
body .ref-bsum-sub,
body .s4-reviews-section p,
body .s4-rev-content p,
body p.s4-rev-subheading,
body p.s4-form-desc,
body .s4-trust-item p,
body .s4-score-count,
body .s4-bar-pct {
    color: #ddeee6 !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4) !important;
}

body .s4-rev-content p {
    color: #f1f5f9 !important;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
}

body .s4-reviews-section label,
body label.s4-form-label {
    color: #ffffff !important;
    font-weight: 700 !important;
}

.ref-sec-desc,
.heading-sub,
.ref-hero-desc {
    color: #33453e !important;
}

/* Eyebrows, Badges & Small Tags: Pastel Mint Pill with Castleton Green text */
.gold-eyebrow,
.ref-sec-eyebrow,
.ref-card-badge,
.ref-badge,
.wc-badge {
    background: #c2dbd0 !important;
    color: #2d5244 !important;
    border: 1px solid #a4d1ba !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    border-radius: 9999px !important;
    padding: 4px 14px !important;
    box-shadow: 0 2px 10px rgba(21, 47, 36, 0.12) !important;
}

/* Top Announcement Bar */
.arizona-top-bar {
    background: #e5efea !important;
    border-bottom: 1px solid #c2dbd0 !important;
    color: #24342d !important;
}

.arizona-top-bar a,
.top-link {
    color: #2d5244 !important;
}

.arizona-top-bar a:hover,
.top-link:hover {
    color: #4d806a !important;
}

.top-wa {
    color: #2d5244 !important;
    font-weight: 700 !important;
}

/* Sticky Main Navigation Header: Crisp Frosted Mint-White */
.site-header,
#masthead,
.ref-header {
    background: rgba(246, 249, 248, 0.96) !important;
    border-bottom: 1px solid rgba(194, 219, 208, 0.6) !important;
    box-shadow: 0 4px 20px rgba(21, 47, 36, 0.08) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}

.brand-name,
.ref-brand-name {
    color: #2d5244 !important;
    text-shadow: none !important;
}

.brand-tagline,
.ref-brand-tag {
    color: #4d806a !important;
}

.main-navigation .nav-menu a,
.ref-nav-menu > li > a {
    color: #2d5244 !important;
    font-weight: 600 !important;
}

.main-navigation .nav-menu a:hover,
.main-navigation .nav-menu .current-menu-item a,
.ref-nav-menu > li > a:hover,
.ref-nav-menu > li.current-menu-item > a {
    color: #4d806a !important;
    text-shadow: none !important;
}

.tool-btn {
    background: #ffffff !important;
    border: 1.5px solid #c2dbd0 !important;
    color: #2d5244 !important;
}

.tool-btn:hover {
    background: #c2dbd0 !important;
    border-color: #4d806a !important;
    color: #2d5244 !important;
}

.cart-count-badge {
    background: #2d5244 !important;
    color: #ffffff !important;
    font-weight: 800 !important;
}

.mobile-menu-toggle {
    color: #2d5244 !important;
}

/* Cards & Surfaces: Crisp Pure White (#ffffff) with Soft Mint Borders */
.ref-service-card,
.ref-consult-card,
.ref-product-card,
.ref-sprod-card,
.ref-card,
.prod-master-card,
.why-master-card,
.service-master-card,
.testimonial-card,
.ref-auth-box,
.ref-summary-box,
.ref-checkout-card,
.ref-account-card,
.ref-contact-card,
.ref-trust-card,
.ref-trust-bar,
.ref-contact-form-wrap,
.ref-contact-info-card,
.ref-about-story-card,
.ref-stepper-card,
.ref-step-panel,
.astro-feat-card,
.astro-offer-card,
.astro-unlock-card,
.auth-card,
.auth-card-wrapper,
.ref-dash-stat,
.ref-dash-order,
.ref-dash-tab-panel,
.ref-dash-account,
.ref-dash-sidebar,
.woocommerce-product-gallery,
.entry-summary,
.s4-description-panel,
.product,
li.product,
.woocommerce ul.products li.product {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1.5px solid #d4e7de !important;
    box-shadow: 0 10px 30px rgba(21, 47, 36, 0.07) !important;
    border-radius: 16px !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.ref-service-card:hover,
.ref-consult-card:hover,
.ref-product-card:hover,
.ref-sprod-card:hover,
.ref-card:hover,
.prod-master-card:hover,
.why-master-card:hover,
.service-master-card:hover,
.testimonial-card:hover,
.product:hover,
li.product:hover,
.woocommerce ul.products li.product:hover {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-color: #c2dbd0 !important;
    box-shadow: 0 16px 40px rgba(21, 47, 36, 0.12) !important;
    transform: translateY(-3px) !important;
}

/* Primary CTAs: Deep Castleton Green with Crisp White text */
.btn-gold,
.btn-primary,
.ref-btn-gold,
.ref-btn-gold-solid,
.woocommerce-Button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.ref-hero-btn-primary,
.ref-hero-btn,
.button.alt,
.single_add_to_cart_button,
.add_to_cart_button,
button[name="add-to-cart"],
.checkout-button,
#place_order {
    background: linear-gradient(135deg, #2d5244 0%, #3a6454 50%, #2d5244 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 9999px !important;
    font-weight: 700 !important;
    box-shadow: 0 6px 20px rgba(21, 47, 36, 0.25) !important;
    transition: all 0.25s ease !important;
}

.btn-gold:hover,
.btn-primary:hover,
.ref-btn-gold:hover,
.ref-btn-gold-solid:hover,
.woocommerce-Button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.ref-hero-btn-primary:hover,
.button.alt:hover,
.single_add_to_cart_button:hover,
.add_to_cart_button:hover,
button[name="add-to-cart"]:hover,
.checkout-button:hover,
#place_order:hover {
    background: linear-gradient(135deg, #3a6454 0%, #2d5244 100%) !important;
    color: #c2dbd0 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 28px rgba(21, 47, 36, 0.35) !important;
}

/* Secondary Buttons */
.btn-secondary,
.ref-hero-btn-secondary,
.ref-btn-outline {
    background: #ffffff !important;
    color: #2d5244 !important;
    border: 1.5px solid #2d5244 !important;
    border-radius: 9999px !important;
    font-weight: 600 !important;
}

.btn-secondary:hover,
.ref-hero-btn-secondary:hover,
.ref-btn-outline:hover {
    background: #c2dbd0 !important;
    border-color: #2d5244 !important;
    color: #2d5244 !important;
}

/* Price Display */
.price,
.ref-sprod-price,
.woocommerce-Price-amount,
.amount {
    color: #2d5244 !important;
    font-weight: 800 !important;
}

.price del,
.price del .woocommerce-Price-amount {
    color: #6b7280 !important;
    text-decoration: line-through !important;
    opacity: 0.75 !important;
}

.price ins,
.price ins .woocommerce-Price-amount {
    color: #2d5244 !important;
    text-decoration: none !important;
}

/* Footer: Deep Castleton Grounding Sanctuary (#1f3a2f) */
.site-footer,
#colophon,
.ref-footer,
.astro-footer {
    background-color: #1f3a2f !important;
    background: #1f3a2f !important;
    border-top: 1px solid rgba(194, 219, 208, 0.25) !important;
    color: #e2efe9 !important;
}

.ref-footer p,
.ref-footer span,
.ref-footer li {
    color: #b5c5bd !important;
}

.ref-footer a {
    color: #b5c5bd !important;
}

.ref-footer a:hover {
    color: #c2dbd0 !important;
}

.ref-footer h3,
.ref-footer h4,
.ref-footer-title {
    color: #ffffff !important;
}

/* Mobile Bottom Navigation Bar */
.ref-mobile-app-bar,
.mobile-bottom-nav {
    background: rgba(246, 249, 248, 0.97) !important;
    border-top: 1px solid #c2dbd0 !important;
    box-shadow: 0 -4px 20px rgba(21, 47, 36, 0.08) !important;
}

.ref-mob-nav-item span {
    color: #2d5244 !important;
}

.ref-mob-nav-item.active span,
.ref-mob-nav-item:hover span {
    color: #4d806a !important;
}

.ref-mob-nav-item svg {
    stroke: #2d5244 !important;
}

.ref-mob-nav-item.active svg,
.ref-mob-nav-item:hover svg {
    stroke: #4d806a !important;
}

/* Consultation Stepper & Form Controls */
.ref-stepper-item.active .ref-step-circle {
    background: #2d5244 !important;
    color: #ffffff !important;
    border-color: #2d5244 !important;
}

.ref-stepper-item.completed .ref-step-circle {
    background: #c2dbd0 !important;
    color: #2d5244 !important;
    border-color: #418869 !important;
}

.form-control,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
textarea,
select {
    background: #ffffff !important;
    border: 1.5px solid #c2dbd0 !important;
    color: #24342d !important;
    border-radius: 8px !important;
}

input:focus,
textarea:focus,
select:focus {
    border-color: #2d5244 !important;
    box-shadow: 0 0 0 3px rgba(194, 219, 208, 0.4) !important;
    outline: none !important;
}


/* ==========================================================================
   42. MASTER HIGH-CONTRAST BUTTONS & CARDS SUITE (PASTEL GREEN THEME)
   ========================================================================== */

/* --- Shop Product Card --- */
.ref-sprod-card {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1.5px solid #d4e7de !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 0 8px 24px rgba(21, 47, 36, 0.07) !important;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease, border-color 0.28s ease !important;
}

.ref-sprod-card:hover {
    transform: translateY(-5px) !important;
    border-color: #c2dbd0 !important;
    box-shadow: 0 16px 36px rgba(21, 47, 36, 0.13) !important;
}

.ref-sprod-img-frame {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    background: #f6f9f8 !important;
    background-color: #f6f9f8 !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.ref-sprod-img-frame img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.4s ease !important;
}

.ref-sprod-card:hover .ref-sprod-img-frame img {
    transform: scale(1.06) !important;
}

.ref-sprod-badge {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    padding: 4px 12px !important;
    border-radius: 9999px !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    z-index: 2 !important;
}

.ref-sprod-badge.new {
    background: #418869 !important;
    color: #ffffff !important;
}

.ref-sprod-badge.sale {
    background: #2d5244 !important;
    color: #c2dbd0 !important;
    border: 1px solid #a4d1ba !important;
}

.ref-sprod-wishlist-btn {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1.5px solid #c2dbd0 !important;
    color: #2d5244 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.9rem !important;
    cursor: pointer !important;
    z-index: 2 !important;
    transition: all 0.2s ease !important;
}

.ref-sprod-wishlist-btn:hover {
    background: #ef4444 !important;
    border-color: #ef4444 !important;
    color: #ffffff !important;
}

.ref-sprod-details {
    padding: 18px 16px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    background: #ffffff !important;
}

.ref-sprod-title {
    font-size: 0.96rem !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;
    line-height: 1.4 !important;
}

.ref-sprod-title a {
    color: #2d5244 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.ref-sprod-title a:hover {
    color: #4d806a !important;
}

.ref-sprod-rating-row {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 0.8rem !important;
    margin-bottom: 10px !important;
}

.ref-sprod-rating-row i {
    color: #c4943c !important;
    font-size: 0.85rem !important;
}

.ref-srating-num {
    color: #2d5244 !important;
    font-weight: 700 !important;
}

.ref-sreviews-count {
    color: #51645c !important;
}

.ref-sprod-price-line {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 16px !important;
}

.ref-scurr-price {
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    color: #2d5244 !important;
}

.ref-sold-price {
    font-size: 0.9rem !important;
    color: #6b7280 !important;
    text-decoration: line-through !important;
}

/* Shop 'View Product' Button */
.ref-sprod-btn-view {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 11px 20px !important;
    border-radius: 9999px !important;
    background: linear-gradient(135deg, #2d5244 0%, #3a6454 50%, #2d5244 100%) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(21, 47, 36, 0.22) !important;
    transition: all 0.25s ease !important;
    width: 100% !important;
    text-align: center !important;
    margin-top: auto !important;
    cursor: pointer !important;
}

.ref-sprod-btn-view:hover {
    background: linear-gradient(135deg, #3a6454 0%, #2d5244 100%) !important;
    color: #c2dbd0 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(21, 47, 36, 0.35) !important;
}

/* --- Single Product Page Buttons & Quantity --- */
.s4-purchase-row {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 24px !important;
    flex-wrap: wrap !important;
}

.qty-selector {
    display: inline-flex !important;
    align-items: center !important;
    border: 1.5px solid #c2dbd0 !important;
    border-radius: 9999px !important;
    background: #ffffff !important;
    padding: 2px 8px !important;
}

.qty-btn {
    width: 34px !important;
    height: 42px !important;
    border: none !important;
    background: transparent !important;
    color: #2d5244 !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.qty-btn:hover {
    color: #4d806a !important;
}

.qty-val {
    width: 44px !important;
    border: none !important;
    background: transparent !important;
    color: #2d5244 !important;
    font-weight: 700 !important;
    text-align: center !important;
    font-size: 1.05rem !important;
    outline: none !important;
}

/* Add to Cart Button (Primary Emerald) */
.btn-s4-cart,
.btn-gold.btn-s4-cart {
    background: linear-gradient(135deg, #2d5244 0%, #3a6454 50%, #2d5244 100%) !important;
    color: #ffffff !important;
    padding: 14px 30px !important;
    border-radius: 9999px !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    border: none !important;
    box-shadow: 0 6px 20px rgba(21, 47, 36, 0.25) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    transition: all 0.25s ease !important;
}

.btn-s4-cart:hover,
.btn-gold.btn-s4-cart:hover {
    background: linear-gradient(135deg, #3a6454 0%, #2d5244 100%) !important;
    color: #c2dbd0 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 28px rgba(21, 47, 36, 0.35) !important;
}

/* Buy Now Button (Glowing Mint Green Pill) */
.btn-s4-buy,
.btn-purple-pill,
[data-buy-now] {
    background: #c2dbd0 !important;
    background-color: #c2dbd0 !important;
    color: #2d5244 !important;
    padding: 14px 30px !important;
    border-radius: 9999px !important;
    font-weight: 800 !important;
    font-size: 0.95rem !important;
    border: 1.5px solid #4d806a !important;
    box-shadow: 0 4px 16px rgba(194, 219, 208, 0.55) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    transition: all 0.25s ease !important;
}

.btn-s4-buy:hover,
.btn-purple-pill:hover,
[data-buy-now]:hover {
    background: #b0d1c2 !important;
    background-color: #b0d1c2 !important;
    color: #1f3a2f !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(194, 219, 208, 0.8) !important;
}

/* Single Product Badges & Guarantees */
.s4-trust-badges-row {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 12px !important;
    padding: 16px !important;
    background: #ffffff !important;
    border: 1.5px solid #d4e7de !important;
    border-radius: 16px !important;
    margin-bottom: 24px !important;
    text-align: center !important;
    box-shadow: 0 4px 16px rgba(21, 47, 36, 0.05) !important;
}

.t-badge .t-icon {
    font-size: 1.3rem !important;
    color: #4d806a !important;
    margin-bottom: 4px !important;
}

.t-badge span {
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    color: #2d5244 !important;
    display: block !important;
}

.screen4-bottom-cards {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
    padding-top: 40px !important;
    border-top: 1.5px solid #d4e7de !important;
}

.bottom-guarantee-card {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 16px !important;
    border: 1.5px solid #d4e7de !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: 0 4px 14px rgba(21, 47, 36, 0.05) !important;
}

.bottom-guarantee-card .g-icon {
    font-size: 1.6rem !important;
    color: #4d806a !important;
}

.bottom-guarantee-card strong {
    font-size: 0.95rem !important;
    color: #2d5244 !important;
    display: block !important;
}

.bottom-guarantee-card span {
    font-size: 0.8rem !important;
    color: #51645c !important;
}

/* --- Cart & Checkout Buttons --- */
.btn-checkout-gold,
.checkout-button {
    background: linear-gradient(135deg, #2d5244 0%, #3a6454 50%, #2d5244 100%) !important;
    color: #ffffff !important;
    border-radius: 9999px !important;
    padding: 15px 30px !important;
    font-weight: 700 !important;
    font-size: 1.05rem !important;
    width: 100% !important;
    display: block !important;
    text-align: center !important;
    box-shadow: 0 6px 20px rgba(21, 47, 36, 0.25) !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
}

.btn-checkout-gold:hover,
.checkout-button:hover {
    background: linear-gradient(135deg, #3a6454 0%, #2d5244 100%) !important;
    color: #c2dbd0 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 28px rgba(21, 47, 36, 0.35) !important;
}

.btn-order-whatsapp {
    background: #25d366 !important;
    color: #ffffff !important;
    padding: 14px !important;
    font-size: 1rem !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    border-radius: 9999px !important;
    font-weight: 700 !important;
    box-shadow: 0 6px 18px rgba(87, 161, 124, 0.3) !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
}

.btn-order-whatsapp:hover {
    background: #4c906e !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 24px rgba(87, 161, 124, 0.45) !important;
}

.btn-apply-coupon {
    background: #2d5244 !important;
    color: #ffffff !important;
    border: none !important;
    padding: 10px 20px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.btn-apply-coupon:hover {
    background: #3a6454 !important;
    color: #c2dbd0 !important;
}

/* Global Button Hover Elevation */
.btn:hover,
button:hover {
    cursor: pointer;
}

/* ==========================================================================
   MASTER FULL-SITE UI POLISH & ARCHITECTURAL LOCK
   Palette: Pastel Green (#edf3f0), Mint (#c2dbd0), Pure White (#ffffff),
            Castleton Green (#2d5244), Deep Sanctuary (#1f3a2f)
   ========================================================================== */

/* -------------------------------------------------------------
   1. HEADER NAVIGATION (DESKTOP & MOBILE STRICT SEPARATION)
   ------------------------------------------------------------- */
.ref-header {
    background: rgba(246, 249, 248, 0.98) !important;
    border-bottom: 1.5px solid #c2dbd0 !important;
    box-shadow: 0 4px 20px rgba(21, 47, 36, 0.06) !important;
    padding: 10px 0 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

.ref-header-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    flex-wrap: nowrap !important;
    box-sizing: border-box !important;
}

.ref-branding,
.site-branding {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}

.ref-branding .ref-logo-link,
.ref-logo-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    text-decoration: none !important;
    flex-shrink: 0 !important;
}

.ref-logo-img,
img.ref-logo-img {
    height: 40px !important;
    max-height: 40px !important;
    width: auto !important;
    max-width: 44px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

.ref-brand-titles {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    line-height: 1.15 !important;
}

.ref-brand-name {
    font-family: 'Cinzel', serif !important;
    font-size: 1.12rem !important;
    font-weight: 700 !important;
    color: #2d5244 !important;
    letter-spacing: 0.8px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    display: block !important;
}

.ref-brand-tag {
    font-size: 0.65rem !important;
    font-weight: 500 !important;
    color: #4d806a !important;
    letter-spacing: 0.3px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    display: block !important;
}

/* Desktop Header Navigation */
@media (min-width: 1025px) {
    .ref-nav {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 1 1 auto !important;
        margin: 0 16px !important;
    }

    .ref-nav-menu {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 20px !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        flex-wrap: nowrap !important;
    }

    .ref-nav-menu > li {
        margin: 0 !important;
        padding: 0 !important;
    }

    .ref-nav-menu > li > a {
        color: #2d5244 !important;
        font-size: 0.90rem !important;
        font-weight: 600 !important;
        letter-spacing: 0.2px !important;
        padding: 6px 4px !important;
        white-space: nowrap !important;
        display: inline-block !important;
        text-decoration: none !important;
        transition: color 0.2s ease !important;
    }

    .ref-nav-menu > li > a:hover,
    .ref-nav-menu > li.current-menu-item > a {
        color: #4d806a !important;
    }

    .ref-header-actions {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        flex-shrink: 0 !important;
    }

    .mobile-menu-toggle {
        display: none !important;
    }
}

/* Mobile & Tablet Header Navigation */
@media (max-width: 1024px) {
    .ref-nav {
        display: none !important;
    }

    .ref-header-container {
        gap: 10px !important;
        padding: 0 16px !important;
    }

    .mobile-menu-toggle {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 38px !important;
        height: 38px !important;
        border-radius: 8px !important;
        background: #ffffff !important;
        border: 1.5px solid #c2dbd0 !important;
        color: #2d5244 !important;
        font-size: 1.15rem !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
    }

    .mobile-menu-toggle:hover {
        background: #c2dbd0 !important;
        color: #2d5244 !important;
    }

    .ref-header-actions {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        flex-shrink: 0 !important;
    }
}

@media (max-width: 640px) {
    .ref-brand-titles .ref-brand-tag {
        display: none !important;
    }

    .ref-brand-name {
        font-size: 1rem !important;
        letter-spacing: 0.4px !important;
    }

    .ref-logo-img,
    img.ref-logo-img {
        height: 34px !important;
        max-height: 34px !important;
        max-width: 38px !important;
    }

    .ref-header-btn-book {
        display: none !important;
    }

    .ref-account-link span {
        display: none !important;
    }

    .ref-account-link {
        width: 36px !important;
        height: 36px !important;
        border-radius: 50% !important;
        background: #ffffff !important;
        border: 1.5px solid #c2dbd0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        color: #2d5244 !important;
    }
}

/* -------------------------------------------------------------
   2. MASTER 5-COLUMN FOOTER SYSTEM
   ------------------------------------------------------------- */
.site-footer.ref-footer,
.ref-footer {
    background: #1f3a2f !important;
    background-color: #1f3a2f !important;
    color: #edf3f0 !important;
    padding: 60px 0 24px !important;
    margin-top: 60px !important;
    border-top: 2px solid rgba(194, 219, 208, 0.25) !important;
    position: relative !important;
    box-sizing: border-box !important;
}

.ref-footer-grid {
    display: grid !important;
    grid-template-columns: 2fr 1.2fr 1.2fr 1.2fr 1.4fr !important;
    gap: 36px !important;
    margin-bottom: 48px !important;
    box-sizing: border-box !important;
}

.ref-footer-col {
    display: flex !important;
    flex-direction: column !important;
}

.ref-footer-brand {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
}

.ref-footer-logo,
img.ref-footer-logo {
    height: 42px !important;
    max-height: 42px !important;
    width: auto !important;
    max-width: 48px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

.ref-footer-brand-text {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    line-height: 1.2 !important;
}

.ref-footer-name {
    font-family: 'Cinzel', serif !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    letter-spacing: 1px !important;
}

.ref-footer-tagline {
    font-size: 0.68rem !important;
    color: #c2dbd0 !important;
    letter-spacing: 0.3px !important;
    line-height: 1.25 !important;
}

.ref-footer-bio {
    color: #d4e7de !important;
    font-size: 0.88rem !important;
    line-height: 1.6 !important;
    margin-bottom: 20px !important;
    max-width: 320px !important;
}

.ref-footer-socials {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.ref-footer-socials a {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: rgba(194, 219, 208, 0.12) !important;
    border: 1px solid rgba(194, 219, 208, 0.3) !important;
    color: #c2dbd0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.95rem !important;
    transition: all 0.25s ease !important;
    text-decoration: none !important;
}

.ref-footer-socials a:hover {
    background: #c2dbd0 !important;
    color: #2d5244 !important;
    transform: translateY(-2px) !important;
}

.ref-col-title {
    font-family: 'Cinzel', serif !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    letter-spacing: 1px !important;
    margin-bottom: 18px !important;
    text-transform: uppercase !important;
}

.ref-col-links {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.ref-col-links li a {
    color: #d4e7de !important;
    font-size: 0.88rem !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    display: inline-block !important;
}

.ref-col-links li a:hover {
    color: #c2dbd0 !important;
    transform: translateX(4px) !important;
}

.ref-contact-row {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    color: #d4e7de !important;
    font-size: 0.88rem !important;
    margin-bottom: 12px !important;
    line-height: 1.5 !important;
}

.ref-contact-row i {
    color: #c2dbd0 !important;
    font-size: 1rem !important;
    margin-top: 3px !important;
    flex-shrink: 0 !important;
}

.ref-contact-row a {
    color: #d4e7de !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.ref-contact-row a:hover {
    color: #c2dbd0 !important;
}

.ref-footer-bottom {
    border-top: 1px solid rgba(194, 219, 208, 0.15) !important;
    padding-top: 22px !important;
}

.ref-bottom-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    color: #95ada2 !important;
    font-size: 0.82rem !important;
}

.ref-bottom-links {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.ref-bottom-links a {
    color: #95ada2 !important;
    text-decoration: none !important;
}

.ref-bottom-links a:hover {
    color: #c2dbd0 !important;
}

@media (max-width: 1024px) {
    .ref-footer-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 30px !important;
    }
}

@media (max-width: 640px) {
    .ref-footer-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
    .ref-bottom-inner {
        flex-direction: column !important;
        text-align: center !important;
    }
}

/* -------------------------------------------------------------
   3. SINGLE PRODUCT 2-COLUMN SHOWCASE (SCREEN 4)
   ------------------------------------------------------------- */
.screen4-product-page {
    padding: 30px 0 60px !important;
    background: #edf3f0 !important;
}

.s4-breadcrumbs {
    padding: 0 0 20px !important;
    font-size: 0.88rem !important;
    color: #51645c !important;
}

.s4-breadcrumbs a {
    color: #2d5244 !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}

.s4-breadcrumbs a:hover {
    color: #4d806a !important;
}

.screen4-showcase-grid {
    display: grid !important;
    grid-template-columns: 1fr 1.15fr !important;
    gap: 40px !important;
    align-items: start !important;
    margin: 0 auto 50px !important;
    background: #ffffff !important;
    padding: 36px !important;
    border-radius: 20px !important;
    border: 1.5px solid #d4e7de !important;
    box-shadow: 0 10px 30px rgba(21, 47, 36, 0.06) !important;
    box-sizing: border-box !important;
}

.s4-gallery-col {
    display: flex !important;
    gap: 16px !important;
    position: sticky !important;
    top: 90px !important;
}

.s4-thumb-strip {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 76px !important;
    flex-shrink: 0 !important;
}

.s4-thumb-strip .thumb-box {
    width: 72px !important;
    height: 72px !important;
    border-radius: 12px !important;
    border: 1.5px solid #d4e7de !important;
    overflow: hidden !important;
    background: #f6f9f8 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.s4-thumb-strip .thumb-box.active,
.s4-thumb-strip .thumb-box:hover {
    border-color: #4d806a !important;
    transform: scale(1.04) !important;
}

.s4-thumb-strip .thumb-box img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.s4-main-image-frame {
    flex: 1 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    background: #f6f9f8 !important;
    border: 1.5px solid #d4e7de !important;
    aspect-ratio: 1 / 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
}

.s4-main-img,
.s4-main-image-frame img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    max-height: 480px !important;
    padding: 14px !important;
    display: block !important;
}

.s4-details-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}

.s4-title {
    font-family: 'Cinzel', serif !important;
    font-size: clamp(1.6rem, 2.4vw, 2.2rem) !important;
    font-weight: 700 !important;
    color: #2d5244 !important;
    line-height: 1.25 !important;
}

.s4-rating-bar {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

.s4-rating-bar .stars {
    color: #c4943c !important;
    font-size: 1rem !important;
    letter-spacing: 2px !important;
}

.s4-rating-bar .rev-text {
    font-size: 0.88rem !important;
    color: #51645c !important;
}

.s4-rating-bar .stock-badge {
    background: #edf3f0 !important;
    color: #4d806a !important;
    padding: 4px 12px !important;
    border-radius: 9999px !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    border: 1px solid #c2dbd0 !important;
}

.s4-price-box {
    display: flex !important;
    align-items: baseline !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
    padding: 12px 0 !important;
    border-top: 1px solid #edf3f0 !important;
    border-bottom: 1px solid #edf3f0 !important;
}

.s4-current-price {
    font-size: 2.1rem !important;
    font-weight: 800 !important;
    color: #2d5244 !important;
}

.s4-old-price {
    font-size: 1.25rem !important;
    text-decoration: line-through !important;
    color: #95ada2 !important;
}

.s4-save-pill {
    background: #c2dbd0 !important;
    color: #2d5244 !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
}

.s4-short-desc {
    color: #24342d !important;
    font-size: 0.95rem !important;
    line-height: 1.65 !important;
}

.s4-trust-badges-row {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 10px !important;
    padding: 10px 0 !important;
}

.s4-trust-badges-row .t-badge {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 6px !important;
    padding: 10px 8px !important;
    background: #f6f9f8 !important;
    border: 1.5px solid #d4e7de !important;
    border-radius: 12px !important;
}

.s4-trust-badges-row .t-icon {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    border: 1px solid #c2dbd0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #4d806a !important;
    font-size: 0.95rem !important;
}

.s4-trust-badges-row .t-badge span {
    font-size: 0.74rem !important;
    font-weight: 600 !important;
    color: #2d5244 !important;
}

.s4-purchase-row {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
    margin: 10px 0 !important;
}

.qty-selector {
    display: inline-flex !important;
    align-items: center !important;
    background: #f6f9f8 !important;
    border: 1.5px solid #c2dbd0 !important;
    border-radius: 9999px !important;
    overflow: hidden !important;
}

.qty-btn {
    width: 38px !important;
    height: 44px !important;
    border: none !important;
    background: transparent !important;
    color: #2d5244 !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.qty-val {
    width: 44px !important;
    text-align: center !important;
    border: none !important;
    background: transparent !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #2d5244 !important;
}

.btn-s4-cart {
    flex: 1 !important;
    min-width: 140px !important;
    height: 44px !important;
    background: linear-gradient(135deg, #2d5244 0%, #3a6454 100%) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border-radius: 9999px !important;
    border: none !important;
    cursor: pointer !important;
    text-align: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-shadow: 0 6px 18px rgba(21, 47, 36, 0.2) !important;
    transition: all 0.25s ease !important;
}

.btn-s4-cart:hover {
    background: linear-gradient(135deg, #3a6454 0%, #2d5244 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(21, 47, 36, 0.3) !important;
}

.btn-s4-buy {
    flex: 1 !important;
    min-width: 140px !important;
    height: 44px !important;
    background: #c2dbd0 !important;
    color: #2d5244 !important;
    font-weight: 800 !important;
    border-radius: 9999px !important;
    border: 1.5px solid #4d806a !important;
    cursor: pointer !important;
    text-align: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-shadow: 0 4px 14px rgba(194, 219, 208, 0.4) !important;
    transition: all 0.25s ease !important;
}

.btn-s4-buy:hover {
    background: #a4d1ba !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(194, 219, 208, 0.6) !important;
}

@media (max-width: 900px) {
    .screen4-showcase-grid {
        grid-template-columns: 1fr !important;
        padding: 20px !important;
    }
    .s4-gallery-col {
        position: static !important;
        flex-direction: column-reverse !important;
    }
    .s4-thumb-strip {
        flex-direction: row !important;
        width: 100% !important;
        overflow-x: auto !important;
    }
}

/* -------------------------------------------------------------
   4. SHOP HERO & CATALOG OVERHAUL
   ------------------------------------------------------------- */
.ref-strust-pill {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1.5px solid #c2dbd0 !important;
    color: #2d5244 !important;
    font-weight: 600 !important;
    border-radius: 9999px !important;
    padding: 8px 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: 0 4px 12px rgba(21, 47, 36, 0.05) !important;
    font-size: 0.88rem !important;
}

.ref-strust-pill i {
    color: #4d806a !important;
    font-size: 1rem !important;
}

.ref-swidget {
    background: #ffffff !important;
    border: 1.5px solid #d4e7de !important;
    border-radius: 16px !important;
    padding: 22px 20px !important;
    box-shadow: 0 6px 20px rgba(21, 47, 36, 0.05) !important;
}

.ref-swidget-title {
    font-family: 'Cinzel', serif !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #2d5244 !important;
    margin-bottom: 18px !important;
    padding-bottom: 12px !important;
    border-bottom: 1.5px solid #edf3f0 !important;
    letter-spacing: 0.5px !important;
}

.ref-scat-list li a {
    color: #2d5244 !important;
    font-weight: 500 !important;
    font-size: 0.88rem !important;
    border-radius: 8px !important;
    padding: 9px 12px !important;
}

.ref-scat-list li a i {
    color: #4d806a !important;
}

.ref-scat-count {
    background: #edf3f0 !important;
    color: #4d806a !important;
    font-weight: 700 !important;
}

.ref-scat-list li.active a,
.ref-scat-list li a:hover {
    background: #2d5244 !important;
    color: #ffffff !important;
    border-left: 3.5px solid #418869 !important;
}

.ref-scat-list li.active a span,
.ref-scat-list li.active a span *,
.ref-scat-list li a:hover span,
.ref-scat-list li a:hover span * {
    color: #ffffff !important;
    font-weight: 800 !important;
}

.ref-scat-list li.active a i,
.ref-scat-list li a:hover i {
    color: #c4943c !important;
}

.ref-scat-list li.active .ref-scat-count {
    background: #f1f8f5 !important;
    color: #2d5244 !important;
    font-weight: 800 !important;
    border: 1px solid #418869 !important;
}

/* Product Badges (Sale / New) - Radiant Celestial Gold */
.ref-sprod-badge.sale,
.onsale,
span.onsale,
.woocommerce span.onsale,
.woocommerce-page span.onsale,
.woocommerce ul.products li.product .onsale,
.ref-shop-grid .onsale {
    background: linear-gradient(135deg, #c4943c 0%, #d97706 100%) !important;
    color: #2b4f41 !important;
    font-weight: 800 !important;
    font-size: 0.76rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    padding: 5px 12px !important;
    border-radius: 9999px !important;
    border: 1.5px solid #e6d6a2 !important;
    box-shadow: 0 4px 14px rgba(196, 148, 60, 0.45) !important;
    z-index: 10 !important;
}

/* -------------------------------------------------------------
   5. CONSULTATION BOOKING SUMMARY REFINEMENT
   ------------------------------------------------------------- */
.ref-summary-box,
.booking-summary {
    background: #ffffff !important;
    border: 1.5px solid #d4e7de !important;
    border-radius: 16px !important;
    padding: 24px !important;
    box-shadow: 0 8px 24px rgba(21, 47, 36, 0.06) !important;
}

.ref-summary-box .ref-summary-title,
.booking-summary h3 {
    font-family: 'Cinzel', serif !important;
    color: #2d5244 !important;
    font-weight: 700 !important;
    border-bottom: 1.5px solid #edf3f0 !important;
    padding-bottom: 12px !important;
    margin-bottom: 16px !important;
}

.ref-summary-box .ref-selected-service,
.booking-summary .selected-item {
    background: #f6f9f8 !important;
    border: 1.5px solid #c2dbd0 !important;
    border-radius: 12px !important;
    padding: 14px !important;
    color: #2d5244 !important;
}

.ref-summary-box .ref-selected-service strong,
.booking-summary .selected-item strong {
    color: #2d5244 !important;
    font-size: 1rem !important;
    display: block !important;
}

.ref-summary-box .ref-selected-service span,
.booking-summary .selected-item span {
    color: #4d806a !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
}

/* -------------------------------------------------------------
   6. MOBILE BOTTOM STICKY BAR & SAFE AREA
   ------------------------------------------------------------- */
@media (max-width: 768px) {
    body {
        padding-bottom: 75px !important;
    }

    .mobile-bottom-nav {
        background: #ffffff !important;
        border-top: 1px solid #c2dbd0 !important;
        box-shadow: 0 -4px 20px rgba(21, 47, 36, 0.08) !important;
        z-index: 99990 !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 60px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-around !important;
    }

    .mob-nav-item {
        color: #51645c !important;
        text-decoration: none !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.7rem !important;
        font-weight: 500 !important;
        gap: 3px !important;
        flex: 1 !important;
    }

    .mob-nav-item i {
        font-size: 1.1rem !important;
    }

    .mob-nav-item.active {
        color: #4d806a !important;
        font-weight: 700 !important;
    }

    .mob-nav-center-item .mob-nav-center-circle {
        width: 48px !important;
        height: 48px !important;
        border-radius: 50% !important;
        background: linear-gradient(135deg, #2d5244 0%, #3a6454 100%) !important;
        color: #c2dbd0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 1.25rem !important;
        margin-top: -18px !important;
        box-shadow: 0 4px 14px rgba(21, 47, 36, 0.35) !important;
        border: 2px solid #ffffff !important;
    }

    .mob-nav-wa {
        color: #25d366 !important;
    }
}

/* ==========================================================================
   7. DEFINITIVE ZERO-OVERFLOW & HIGH-CONTRAST SYSTEM LOCK
   ========================================================================== */

/* Universal Overflow & Layout Lock */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
}

*, *::before, *::after {
    box-sizing: border-box !important;
}

/* Mobile Service Grids & Carousel Containment */
@media (max-width: 991px) {
    .ref-carousel-container,
    .ref-services-grid,
    .services-modern-grid,
    .astro-offerings-grid,
    .ref-service-card,
    .ref-trust-bar,
    .trust-four-grid,
    .ref-products-grid,
    .ref-testimonials-grid {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .ref-services-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }

    .ref-service-card {
        padding: 24px 18px !important;
    }

    .ref-carousel-arrow {
        display: none !important;
    }

    /* Force Header Actions & Hamburger to pin cleanly on mobile */
    .ref-header-container {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 16px !important;
        box-sizing: border-box !important;
    }

    .ref-branding {
        flex: 0 1 auto !important;
        max-width: calc(100% - 90px) !important;
    }

    .ref-header-actions {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        flex-shrink: 0 !important;
        margin-left: auto !important;
    }

    .mobile-menu-toggle {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 38px !important;
        height: 38px !important;
        border-radius: 8px !important;
        background: #ffffff !important;
        border: 1.5px solid #c2dbd0 !important;
        color: #2d5244 !important;
        font-size: 1.15rem !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
    }
}

/* Consultation Booking Summary Card Polish */
.ref-summary-box,
.booking-summary {
    background: #ffffff !important;
    border: 1.5px solid #d4e7de !important;
    border-radius: 16px !important;
    padding: 24px !important;
    box-shadow: 0 8px 24px rgba(21, 47, 36, 0.06) !important;
}

.ref-summary-header h3,
.booking-summary h3 {
    font-family: 'Cinzel', serif !important;
    color: #2d5244 !important;
    font-weight: 700 !important;
    border-bottom: 1.5px solid #edf3f0 !important;
    padding-bottom: 12px !important;
    margin-bottom: 16px !important;
}

.ref-sum-label {
    color: #4d806a !important;
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    margin-bottom: 8px !important;
}

.ref-sum-service-card,
.booking-summary .selected-item {
    background: #f6f9f8 !important;
    border: 1.5px solid #c2dbd0 !important;
    border-radius: 12px !important;
    padding: 12px 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.ref-sum-svc-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    border: 1.5px solid #c2dbd0 !important;
    color: #4d806a !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1rem !important;
    flex-shrink: 0 !important;
}

.ref-sum-svc-info h4,
#sumTitle {
    color: #2d5244 !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    margin: 0 0 2px !important;
}

.ref-sum-svc-meta {
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
}

.ref-sum-fee,
#sumFee {
    color: #2d5244 !important;
    font-weight: 800 !important;
    font-size: 0.92rem !important;
}

.ref-sum-dur,
#sumDuration {
    color: #4d806a !important;
    font-weight: 600 !important;
    font-size: 0.8rem !important;
}

.ref-sum-astro-card {
    background: #f6f9f8 !important;
    border: 1.5px solid #c2dbd0 !important;
    border-radius: 12px !important;
    padding: 12px 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.ref-sum-astro-info h4 {
    color: #2d5244 !important;
    font-weight: 700 !important;
    margin: 0 !important;
}

.ref-sum-astro-info p {
    color: #51645c !important;
    font-size: 0.8rem !important;
    margin: 2px 0 0 !important;
}

.ref-sum-rating {
    color: #c4943c !important;
    font-weight: 600 !important;
    font-size: 0.78rem !important;
}

.ref-sum-detail-line {
    display: flex !important;
    justify-content: space-between !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid #edf3f0 !important;
    color: #51645c !important;
    font-size: 0.86rem !important;
}

.ref-sum-detail-line strong {
    color: #2d5244 !important;
}

/* Shop Category Active Item Contrast */
.ref-scat-list li.active a,
.ref-scat-list li.active a:hover,
.ref-scat-list li.active a:focus {
    background: #2d5244 !important;
    color: #ffffff !important;
    border-left: 3px solid #418869 !important;
}

.ref-scat-list li.active a *,
.ref-scat-list li.active a span,
.ref-scat-list li.active a span * {
    color: #ffffff !important;
    font-weight: 700 !important;
}

.ref-scat-list li.active a i,
.ref-scat-list li.active a span i {
    color: #c2dbd0 !important;
}

.ref-scat-list li.active .ref-scat-count {
    background: #c2dbd0 !important;
    color: #2d5244 !important;
    font-weight: 800 !important;
}

/* Product Sale Badge Radiant Celestial Gold */
.woocommerce span.onsale,
.woocommerce-page span.onsale,
.onsale,
span.onsale,
.ref-sprod-badge.sale,
span.ref-sprod-badge.sale,
.s3-badge,
.sale-badge {
    background: linear-gradient(135deg, #c4943c 0%, #d97706 100%) !important;
    color: #2b4f41 !important;
    font-weight: 800 !important;
    font-size: 0.72rem !important;
    line-height: 1 !important;
    padding: 5px 12px !important;
    border-radius: 9999px !important;
    border: 1.5px solid #e6d6a2 !important;
    box-shadow: 0 4px 14px rgba(196, 148, 60, 0.45) !important;
    display: inline-block !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    z-index: 5 !important;
}

/* ==========================================================
   FOOTER LUXURY CONTRAST & TYPOGRAPHY (#1f3a2f Deep Sanctuary)
   ========================================================== */
.site-footer,
.site-footer.ref-footer,
#colophon.site-footer {
    background: #1f3a2f !important;
    color: #d4e7de !important;
    border-top: 1px solid rgba(194, 219, 208, 0.2) !important;
}

.site-footer *,
.ref-footer * {
    text-shadow: none !important;
}

.site-footer .ref-footer-name,
.ref-footer .ref-footer-name,
span.ref-footer-name {
    color: #ffffff !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    display: block !important;
}

.site-footer .ref-footer-tagline,
.ref-footer .ref-footer-tagline,
span.ref-footer-tagline {
    color: #c2dbd0 !important;
    font-size: 0.76rem !important;
    line-height: 1.4 !important;
    display: block !important;
    opacity: 0.9 !important;
}

.site-footer .ref-footer-bio,
.ref-footer .ref-footer-bio,
p.ref-footer-bio {
    color: #d4e7de !important;
    font-size: 0.88rem !important;
    line-height: 1.6 !important;
    margin: 14px 0 18px !important;
    opacity: 0.95 !important;
}

.site-footer .ref-col-title,
.ref-footer .ref-col-title,
h4.ref-col-title {
    color: #ffffff !important;
    font-family: var(--font-heading, 'Cinzel', serif) !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    margin-bottom: 18px !important;
}

.site-footer .ref-col-links li a,
.ref-footer .ref-col-links li a {
    color: #d4e7de !important;
    font-size: 0.86rem !important;
    transition: color 0.2s ease !important;
}

.site-footer .ref-col-links li a:hover,
.ref-footer .ref-col-links li a:hover {
    color: #ffffff !important;
    text-decoration: underline !important;
}

.site-footer .ref-contact-row,
.ref-footer .ref-contact-row {
    color: #d4e7de !important;
    font-size: 0.86rem !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
}

.site-footer .ref-contact-row a,
.ref-footer .ref-contact-row a {
    color: #ffffff !important;
    font-weight: 600 !important;
}

.site-footer .ref-contact-row i,
.ref-footer .ref-contact-row i {
    color: #418869 !important;
    font-size: 1rem !important;
    margin-top: 3px !important;
}

.site-footer .ref-contact-row span,
.ref-footer .ref-contact-row span {
    color: #d4e7de !important;
    font-size: 0.84rem !important;
    line-height: 1.4 !important;
}

.site-footer .ref-footer-socials a,
.ref-footer .ref-footer-socials a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: rgba(194, 219, 208, 0.15) !important;
    color: #ffffff !important;
    font-size: 0.9rem !important;
    border: 1px solid rgba(194, 219, 208, 0.3) !important;
    transition: all 0.2s ease !important;
}

.site-footer .ref-footer-socials a i,
.ref-footer .ref-footer-socials a i {
    color: #ffffff !important;
}

.site-footer .ref-footer-socials a:hover,
.ref-footer .ref-footer-socials a:hover {
    background: #4d806a !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
}

.site-footer .ref-footer-bottom,
.ref-footer .ref-footer-bottom {
    border-top: 1px solid rgba(194, 219, 208, 0.12) !important;
    padding: 20px 0 !important;
    margin-top: 40px !important;
}

.site-footer .ref-bottom-inner p,
.ref-footer .ref-bottom-inner p {
    color: #b2cec1 !important;
    font-size: 0.82rem !important;
    margin: 0 !important;
}

.site-footer .ref-bottom-links a,
.ref-footer .ref-bottom-links a {
    color: #b2cec1 !important;
    font-size: 0.82rem !important;
}

.site-footer .ref-bottom-links a:hover,
.ref-footer .ref-bottom-links a:hover {
    color: #ffffff !important;
}

/* ==========================================================
   CASTLETON SANCTUARY COSMIC HERO SECTION
   Deep Luxury Green Palette: #264638 to #183026 with Solar Gold Aura
   ========================================================== */
.ref-hero-section {
    position: relative !important;
    padding: 75px 0 95px !important;
    overflow: hidden !important;
    background-color: #2b4f41 !important;
    background: radial-gradient(circle at 75% 38%, #1d3a2e 0%, #2b4f41 45%, #264638 100%) !important;
    border-bottom: 1px solid rgba(194, 219, 208, 0.2) !important;
}

.ref-hero-section * {
    text-shadow: none !important;
}

.ref-hero-cosmic-bg,
.astro-hero-bg {
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 1 !important;
    opacity: 0.95 !important;
    overflow: hidden !important;
}

.ref-hero-section .ref-live-canvas,
.astro-hero-section .astro-live-canvas,
.ref-consult-hero .ref-live-canvas,
.ref-about-hero .ref-live-canvas,
.ref-live-canvas,
.astro-live-canvas,
#cosmicLiveCanvas,
#astroLiveCanvas,
#consultLiveCanvas,
#aboutLiveCanvas {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0.92 !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* Atmospheric Cosmic Nebula Glows */
.ref-nebula-glow {
    position: absolute !important;
    border-radius: 50% !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

.ref-nebula-1 {
    top: -50px !important;
    left: -80px !important;
    width: 480px !important;
    height: 480px !important;
    background: radial-gradient(circle, rgba(65, 136, 105, 0.25) 0%, transparent 70%) !important;
    filter: blur(65px) !important;
}

.ref-nebula-2 {
    bottom: -30px !important;
    right: 12% !important;
    width: 520px !important;
    height: 520px !important;
    background: radial-gradient(circle, rgba(196, 148, 60, 0.25) 0%, rgba(65, 136, 105, 0.15) 45%, transparent 75%) !important;
    filter: blur(75px) !important;
}

/* Hero Typography */
.ref-hero-section .ref-hero-title {
    font-family: var(--font-heading, 'Cinzel', serif) !important;
    font-size: 3.3rem !important;
    font-weight: 700 !important;
    line-height: 1.18 !important;
    color: #ffffff !important;
    margin-bottom: 22px !important;
    letter-spacing: 0.5px !important;
    text-shadow: 0 2px 25px rgba(10, 22, 17, 0.8) !important;
}

.ref-hero-section .ref-gold-highlight,
.ref-hero-section span.ref-gold-highlight {
    background: none !important;
    -webkit-background-clip: border-box !important;
    -webkit-text-fill-color: #cea851 !important;
    color: #cea851 !important;
    font-style: italic !important;
    font-weight: 700 !important;
    display: inline-block !important;
    text-shadow: 0 0 30px rgba(206, 168, 81, 0.7) !important;
}

.ref-hero-section .ref-hero-subtitle,
.ref-hero-section p.ref-hero-subtitle {
    font-size: 1.05rem !important;
    color: #ddeee6 !important;
    line-height: 1.7 !important;
    max-width: 520px !important;
    margin-bottom: 34px !important;
    text-shadow: 0 1px 12px rgba(10, 22, 17, 0.8) !important;
    opacity: 0.95 !important;
}

/* Primary CTA: Radiant Divine Gold Button */
.ref-hero-section .ref-btn-gold-solid {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: linear-gradient(135deg, #be9e4d 0%, #c4943c 100%) !important;
    color: #1f3a2f !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    font-size: 0.96rem !important;
    padding: 14px 28px !important;
    border-radius: 8px !important;
    box-shadow: 0 6px 25px rgba(196, 148, 60, 0.45) !important;
    transition: all 0.28s ease !important;
    border: none !important;
}

.ref-hero-section .ref-btn-gold-solid:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 32px rgba(196, 148, 60, 0.65) !important;
    color: #1f3a2f !important;
}

/* Secondary CTA: Crisp Glassmorphism Button */
.ref-hero-section .ref-btn-gold-outline {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: rgba(194, 219, 208, 0.12) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 0.96rem !important;
    padding: 13px 26px !important;
    border-radius: 8px !important;
    border: 1.5px solid #a4d1ba !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    box-shadow: 0 4px 18px rgba(21, 47, 36, 0.3) !important;
    transition: all 0.28s ease !important;
}

.ref-hero-section .ref-btn-gold-outline i {
    color: #cea851 !important;
}

.ref-hero-section .ref-btn-gold-outline:hover {
    background: rgba(194, 219, 208, 0.25) !important;
    border-color: #ffffff !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 24px rgba(164, 209, 186, 0.35) !important;
}

/* Sacred Zodiac Horoscope Wheel & Glowing Solar Aura */
.ref-zodiac-wheel-wrapper {
    position: relative !important;
    width: 440px !important;
    height: 440px !important;
    max-width: 100% !important;
}

.ref-zodiac-aura {
    position: absolute !important;
    inset: -30px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(196, 148, 60, 0.5) 0%, rgba(65, 136, 105, 0.35) 45%, rgba(16, 34, 27, 0.8) 70%, transparent 85%) !important;
    filter: blur(35px) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

.ref-zodiac-wheel-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    box-shadow: 0 0 60px rgba(196, 148, 60, 0.45), 0 0 25px rgba(65, 136, 105, 0.35) !important;
    border: 2px solid rgba(190, 158, 77, 0.45) !important;
    position: relative !important;
    z-index: 2 !important;
}

/* Mobile Responsiveness for Hero */
@media (max-width: 991px) {
    .ref-hero-section {
        padding: 50px 0 70px !important;
        text-align: center !important;
    }
    .ref-hero-container {
        grid-template-columns: 1fr !important;
        gap: 36px !important;
    }
    .ref-hero-title {
        font-size: 2.2rem !important;
    }
    .ref-hero-subtitle {
        margin: 0 auto 28px !important;
    }
    .ref-hero-cta-group {
        justify-content: center !important;
    }
    .ref-zodiac-wheel-wrapper {
        width: 310px !important;
        height: 310px !important;
        margin: 0 auto !important;
    }
}

/* ==========================================================
   MEDITATING ZODIAC WHEEL COMPONENT
   Outer Celestial Wheel Spins Continuously | Center Buddha Stays Still
   ========================================================== */
.ref-meditating-wheel-wrapper,
.ref-chero-wheel-box,
.ref-abhero-art-frame,
.ref-chead-altar-box,
.ref-alhero-visual,
.ref-chero-altar-frame {
    position: relative !important;
    display: inline-block !important;
    width: 380px !important;
    height: 380px !important;
    max-width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    overflow: visible !important;
}

/* Outer Rotating Zodiac Wheel */
.ref-meditating-wheel-wrapper .ref-wheel-rotator,
.ref-chero-wheel-box .ref-wheel-rotator,
.ref-abhero-art-frame .ref-wheel-rotator,
.ref-chead-altar-box .ref-wheel-rotator,
.ref-alhero-visual .ref-wheel-rotator,
.ref-chero-altar-frame .ref-wheel-rotator,
.ref-wheel-rotator {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    box-shadow: 0 0 50px rgba(196, 148, 60, 0.4), 0 0 25px rgba(65, 136, 105, 0.3) !important;
    border: 2px solid rgba(190, 158, 77, 0.45) !important;
    animation: spinSlow 90s linear infinite !important;
    z-index: 2 !important;
    pointer-events: none !important;
    position: relative !important;
}

/* Center Stationary Meditating Buddha */
.ref-meditating-wheel-wrapper .ref-buddha-static,
.ref-chero-wheel-box .ref-buddha-static,
.ref-abhero-art-frame .ref-buddha-static,
.ref-chead-altar-box .ref-buddha-static,
.ref-alhero-visual .ref-buddha-static,
.ref-chero-altar-frame .ref-buddha-static,
.ref-buddha-static {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    z-index: 4 !important;
    pointer-events: none !important;
    transform: none !important;
    animation: buddhaAuraPulse 5s ease-in-out infinite !important;
}

@keyframes buddhaAuraPulse {
    0%, 100% {
        filter: drop-shadow(0 0 18px rgba(196, 148, 60, 0.45)) drop-shadow(0 0 6px rgba(255, 255, 255, 0.35));
    }
    50% {
        filter: drop-shadow(0 0 32px rgba(196, 148, 60, 0.75)) drop-shadow(0 0 14px rgba(65, 136, 105, 0.5));
    }
}

@media (max-width: 991px) {
    .ref-meditating-wheel-wrapper,
    .ref-chero-wheel-box,
    .ref-abhero-art-frame,
    .ref-chead-altar-box,
    .ref-alhero-visual,
    .ref-chero-altar-frame {
        width: 290px !important;
        height: 290px !important;
        margin: 0 auto !important;
    }
}

/* ==========================================================
   COLOR FIX: HERO TYPOGRAPHY, BADGES, STEPPER & RADIANT AURAS
   Direct Fix for User Request: "colur add karo"
   ========================================================== */

/* 1. Hero Titles & Radiant Celestial Gold Highlights */
.astro-hero-title,
.ref-chero-title,
.ref-abhero-title,
.ref-chero-main-title {
    color: #ffffff !important;
    font-family: var(--ref-font-heading, 'Cinzel', serif) !important;
    letter-spacing: 0.5px !important;
}

.astro-gold-highlight,
.ref-gold-highlight {
    background: linear-gradient(135deg, #e6d6a2 0%, #c4943c 50%, #d97706 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 0 20px rgba(196, 148, 60, 0.45)) !important;
    display: inline-block !important;
    font-weight: 700 !important;
}

.astro-title-dash,
.ref-title-dash {
    width: 65px !important;
    height: 3px !important;
    background: linear-gradient(90deg, #c4943c, #418869, transparent) !important;
    margin: 12px 0 16px !important;
    border-radius: 2px !important;
    display: block !important;
}

.astro-hero-subtitle,
.ref-chero-sub,
.ref-abhero-desc,
.ref-chero-main-sub {
    color: #ddeee6 !important;
    font-size: 1.05rem !important;
    line-height: 1.65 !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45) !important;
}

.astro-breadcrumb,
.ref-cbreadcrumb {
    color: #b2ccc0 !important;
    font-size: 0.84rem !important;
}

.astro-breadcrumb a,
.ref-cbreadcrumb a {
    color: #b2ccc0 !important;
    text-decoration: none !important;
}

.astro-breadcrumb a:hover,
.ref-cbreadcrumb a:hover {
    color: #c4943c !important;
}

.astro-bc-sep,
.ref-csep {
    color: rgba(196, 148, 60, 0.5) !important;
    margin: 0 4px !important;
}

.astro-bc-curr,
.ref-ccurr {
    color: #c4943c !important;
    font-weight: 600 !important;
}

/* 2. Astrology Hero: 3 Micro-Trust Badges (Rich Emerald & Gold Glassmorphism) */
.astro-micro-trust-row {
    display: flex !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
    margin-top: 24px !important;
}

.astro-micro-badge {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: rgba(19, 39, 30, 0.8) !important;
    border: 1px solid rgba(196, 148, 60, 0.35) !important;
    border-radius: 10px !important;
    padding: 10px 16px !important;
    backdrop-filter: blur(8px) !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3), inset 0 0 12px rgba(65, 136, 105, 0.1) !important;
    transition: all 0.3s ease !important;
}

.astro-micro-badge:hover {
    border-color: #c4943c !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(196, 148, 60, 0.25) !important;
}

.astro-badge-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: rgba(196, 148, 60, 0.18) !important;
    border: 1.5px solid #c4943c !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #cea851 !important;
    font-size: 0.95rem !important;
    box-shadow: 0 0 10px rgba(196, 148, 60, 0.4) !important;
    flex-shrink: 0 !important;
}

.astro-badge-text strong {
    display: block !important;
    color: #ffffff !important;
    font-size: 0.86rem !important;
    font-weight: 700 !important;
}

.astro-badge-text span {
    color: #bdddce !important;
    font-size: 0.73rem !important;
}

/* 3. Consultation Hero: Stepper Progress Track */
.ref-stepper-track {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    max-width: 600px !important;
    margin-top: 24px !important;
}

.ref-step-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
}

.ref-step-circle {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: rgba(25, 54, 42, 0.75) !important;
    border: 1.5px solid rgba(196, 148, 60, 0.45) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #cea851 !important;
    font-size: 1.05rem !important;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.3s ease !important;
}

.ref-step-label {
    font-size: 0.74rem !important;
    color: #ddeee6 !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
}

.ref-step-item.active .ref-step-circle {
    background: linear-gradient(135deg, #c4943c 0%, #d97706 100%) !important;
    color: #2b4f41 !important;
    border-color: #e6d6a2 !important;
    box-shadow: 0 0 20px rgba(196, 148, 60, 0.65) !important;
    transform: scale(1.08) !important;
}

.ref-step-item.active .ref-step-label {
    color: #cea851 !important;
    font-weight: 700 !important;
    text-shadow: 0 0 10px rgba(196, 148, 60, 0.4) !important;
}

.ref-step-item.completed .ref-step-circle {
    background: linear-gradient(135deg, #418869 0%, #4d806a 100%) !important;
    color: #ffffff !important;
    border-color: #58af89 !important;
    box-shadow: 0 0 16px rgba(65, 136, 105, 0.5) !important;
}

.ref-step-item.completed .ref-step-label {
    color: #91c4ad !important;
}

.ref-stepper-line {
    flex-grow: 1 !important;
    height: 1px !important;
    border-top: 1.5px dashed rgba(196, 148, 60, 0.45) !important;
    margin-bottom: 22px !important;
}

.ref-stepper-line.active {
    border-top: 2px solid #c4943c !important;
    box-shadow: 0 0 8px rgba(196, 148, 60, 0.5) !important;
}

/* 4. Astrological Wheels and Radiant Cosmic Auras */
.astro-wheel-img,
.ref-wheel-rotator {
    box-shadow: 0 0 55px rgba(196, 148, 60, 0.45), 0 0 25px rgba(65, 136, 105, 0.35) !important;
    border: 2px solid rgba(196, 148, 60, 0.55) !important;
}

.astro-wheel-halo,
.ref-zodiac-aura {
    position: absolute !important;
    inset: -15px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(196, 148, 60, 0.22) 0%, rgba(65, 136, 105, 0.12) 50%, transparent 70%) !important;
    filter: blur(25px) !important;
    pointer-events: none !important;
}

/* ==========================================================
   SPIRITUAL SHOP HERO CONTRAST FIX
   ========================================================== */
.ref-shero-title {
    color: #ffffff !important;
    font-family: var(--ref-font-heading, 'Cinzel', serif) !important;
    font-weight: 700 !important;
    text-shadow: 0 2px 15px rgba(0, 0, 0, 0.6) !important;
}

.ref-shero-sub {
    color: #ddeee6 !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4) !important;
}

/* ==========================================================
   MASTER MOBILE UI SYSTEM OVERHAUL (@media max-width: 768px)
   ========================================================== */
@media (max-width: 768px) {
    /* 1. Global Viewport & Bottom App Bar Spacing */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        width: 100% !important;
        padding-bottom: 82px !important;
        box-sizing: border-box !important;
    }

    .site-footer,
    .ref-footer {
        padding-bottom: 95px !important;
    }

    .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box !important;
    }

    /* Prevent Typography Overflow */
    h1, h2, h3, h4, h5, h6,
    .ref-hero-title,
    .astro-hero-title,
    .ref-chero-title,
    .ref-shero-title,
    .ref-abhero-title,
    .ref-chead-title {
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }

    /* 2. Mobile Bottom Sticky App Bar Luxury Theme */
    .mobile-bottom-nav {
        display: flex !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 66px !important;
        background: rgba(10, 19, 15, 0.96) !important;
        backdrop-filter: blur(20px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
        border-top: 1.5px solid rgba(190, 158, 77, 0.35) !important;
        z-index: 99990 !important;
        box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.5) !important;
        justify-content: space-around !important;
        align-items: center !important;
        padding: 0 8px !important;
    }

    .mob-nav-item {
        color: #b2ccc0 !important;
    }

    .mob-nav-item.active,
    .mob-nav-item:active {
        color: #cea851 !important;
    }

    .mob-nav-center-circle {
        background: linear-gradient(135deg, #be9e4d 0%, #c4943c 100%) !important;
        border: 2px solid #2b4f41 !important;
        box-shadow: 0 4px 18px rgba(196, 148, 60, 0.6) !important;
    }

    /* Hide Mobile Bottom Bar on Authentication Screens */
    body.page-template-arizona-auth,
    body.page-template-arizona-auth-php,
    body.page-id-20,
    body.page-template-page-login,
    body.page-template-page-register,
    body.page-template-page-auth,
    body.woocommerce-account {
        padding-bottom: 20px !important;
    }

    .page-template-arizona-auth .mobile-bottom-nav,
    .page-template-arizona-auth-php .mobile-bottom-nav,
    .page-id-20 .mobile-bottom-nav,
    .page-template-page-login .mobile-bottom-nav,
    .page-template-page-register .mobile-bottom-nav,
    .page-template-page-auth .mobile-bottom-nav,
    .woocommerce-account .mobile-bottom-nav {
        display: none !important;
    }

    .amazon-auth-box {
        width: 100% !important;
        max-width: 360px !important;
        margin: 20px auto 40px !important;
        padding: 24px 20px !important;
    }

    /* 3. Homepage Hero on Mobile */
    .ref-hero-section {
        padding: 25px 0 35px !important;
    }

    .ref-hero-container,
    .ref-hero-grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 16px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .ref-hero-left,
    .ref-hero-text-col {
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
    }

    .ref-hero-section .ref-hero-title br {
        display: none !important;
    }

    .ref-hero-section .ref-hero-title,
    .ref-hero-container .ref-hero-title,
    .ref-hero-left .ref-hero-title,
    h1.ref-hero-title {
        font-size: 1.75rem !important;
        line-height: 1.25 !important;
        margin-bottom: 12px !important;
        letter-spacing: 0.3px !important;
        text-align: center !important;
    }

    .ref-hero-desc,
    .ref-hero-subtitle {
        font-size: 0.9rem !important;
        line-height: 1.55 !important;
        margin: 0 auto 18px !important;
        max-width: 100% !important;
        color: #ddeee6 !important;
        text-align: center !important;
    }

    .ref-hero-cta-group,
    .ref-hero-ctas {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 320px !important;
        margin: 0 auto 20px !important;
    }

    .ref-hero-cta-group a,
    .ref-hero-cta-group .ref-btn-gold-solid,
    .ref-hero-cta-group .ref-btn-gold-outline,
    .ref-hero-ctas a,
    .ref-hero-ctas .ref-btn-primary,
    .ref-hero-ctas .ref-btn-gold-outline {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
        padding: 12px 20px !important;
        font-size: 0.92rem !important;
        box-sizing: border-box !important;
    }

    .ref-hero-right,
    .ref-hero-wheel-wrapper,
    .ref-zodiac-wheel-img,
    .ref-hero-visual-col,
    .ref-hero-wheel-frame,
    .ref-zodiac-wheel-rotator {
        width: 210px !important;
        height: 210px !important;
        margin: 10px auto 0 !important;
    }

    /* 4. Consultation Page Hero & Stepper Fix on Mobile */
    .ref-consult-hero {
        padding: 25px 0 35px !important;
        overflow: hidden !important;
        width: 100% !important;
    }

    .ref-consult-hero-grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 16px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .ref-chero-left {
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
    }

    .ref-cbreadcrumb {
        justify-content: center !important;
        flex-wrap: wrap !important;
        font-size: 0.78rem !important;
        margin-bottom: 10px !important;
    }

    .ref-chero-title {
        font-size: 1.85rem !important;
        line-height: 1.25 !important;
        margin-bottom: 10px !important;
        word-break: break-word !important;
    }

    .ref-title-dash {
        margin: 8px auto 14px !important;
    }

    .ref-chero-sub {
        font-size: 0.88rem !important;
        line-height: 1.5 !important;
        max-width: 100% !important;
        margin: 0 auto 16px !important;
        color: #ddeee6 !important;
    }

    .ref-stepper-track {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        max-width: 360px !important;
        margin: 14px auto !important;
        padding: 0 4px !important;
        box-sizing: border-box !important;
    }

    .ref-step-item {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        align-items: center !important;
        text-align: center !important;
        gap: 4px !important;
    }

    .ref-step-circle {
        width: 34px !important;
        height: 34px !important;
        font-size: 0.85rem !important;
    }

    .ref-step-label {
        font-size: 0.62rem !important;
        white-space: normal !important;
        line-height: 1.15 !important;
        max-width: 65px !important;
        text-align: center !important;
    }

    .ref-stepper-line {
        flex: 1 !important;
        min-width: 10px !important;
        margin-bottom: 16px !important;
    }

    .ref-chero-right,
    .ref-chero-wheel-box,
    .ref-chero-right .ref-meditating-wheel-wrapper {
        width: 210px !important;
        height: 210px !important;
        margin: 15px auto 0 !important;
    }

    .ref-chero-right img {
        max-width: 210px !important;
        max-height: 210px !important;
    }

    .ref-service-selection-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .ref-consult-main-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    /* 5. Astrology Hero on Mobile */
    .astro-hero-section {
        padding: 25px 0 35px !important;
    }

    .astro-hero-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 16px !important;
        width: 100% !important;
    }

    .astro-hero-left {
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
    }

    .astro-breadcrumb {
        justify-content: center !important;
        margin-bottom: 10px !important;
        font-size: 0.78rem !important;
    }

    .astro-hero-section .astro-hero-title,
    .astro-hero-container .astro-hero-title,
    .astro-hero-left .astro-hero-title,
    h1.astro-hero-title {
        font-size: 1.75rem !important;
        line-height: 1.25 !important;
        margin-bottom: 10px !important;
        word-break: break-word !important;
        text-align: center !important;
    }

    .astro-title-dash {
        margin: 8px auto 14px !important;
    }

    .astro-hero-subtitle {
        font-size: 0.88rem !important;
        line-height: 1.5 !important;
        max-width: 100% !important;
        margin: 0 auto 16px !important;
        color: #ddeee6 !important;
    }

    .astro-micro-trust-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 320px !important;
        margin: 12px auto 0 !important;
    }

    .astro-micro-badge {
        padding: 8px 12px !important;
        gap: 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        text-align: left !important;
    }

    .astro-badge-icon {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.85rem !important;
        flex-shrink: 0 !important;
    }

    .astro-badge-text strong {
        font-size: 0.82rem !important;
    }

    .astro-badge-text span {
        font-size: 0.72rem !important;
    }

    .astro-hero-right,
    .astro-wheel-frame,
    .astro-wheel-img {
        width: 220px !important;
        height: 220px !important;
        margin: 15px auto 0 !important;
    }

    .astro-featured-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        width: 100% !important;
    }

    /* 6. Spiritual Shop on Mobile */
    .ref-shop-hero {
        padding: 25px 0 35px !important;
        text-align: center !important;
    }

    .ref-shop-hero-grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 16px !important;
    }

    .ref-shero-left {
        width: 100% !important;
        text-align: center !important;
    }

    .ref-shero-title {
        color: #ffffff !important;
        font-size: 2rem !important;
        line-height: 1.25 !important;
        margin-bottom: 10px !important;
    }

    .ref-shero-sub {
        color: #ddeee6 !important;
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
        margin: 0 auto 16px !important;
        max-width: 100% !important;
    }

    .ref-shero-trust-row {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 350px !important;
        margin: 12px auto 0 !important;
    }

    .ref-strust-pill {
        padding: 8px 10px !important;
        font-size: 0.74rem !important;
        justify-content: center !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .ref-shero-right,
    .ref-shero-altar-box,
    .ref-shero-altar-img {
        max-width: 210px !important;
        margin: 12px auto 0 !important;
    }

    .ref-shop-catalog-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    /* 7. About Us & Contact Pages on Mobile */
    .ref-about-hero-grid,
    .ref-contact-top-grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 16px !important;
    }

    .ref-abhero-left,
    .ref-chead-left-col {
        width: 100% !important;
        text-align: center !important;
    }

    .ref-abhero-title,
    .ref-chead-title {
        font-size: 1.85rem !important;
        line-height: 1.25 !important;
    }

    .ref-abhero-tagline,
    .ref-chead-tagline {
        font-size: 1.15rem !important;
        color: #c4943c !important;
    }

    .ref-abhero-desc,
    .ref-chead-desc {
        font-size: 0.9rem !important;
        line-height: 1.55 !important;
        max-width: 100% !important;
        margin: 0 auto 16px !important;
    }

    .ref-pillars-four-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .ref-chead-altar-box,
    .ref-abhero-art-frame,
    .ref-abhero-img {
        max-width: 210px !important;
        max-height: 210px !important;
        margin: 15px auto !important;
    }

    /* 8. Single Product Page on Mobile */
    .single-product-container,
    .ref-product-main-grid {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
        padding: 10px 0 !important;
    }

    .single-product-summary .product_title,
    .ref-product-title {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
    }

    .single_add_to_cart_button,
    .ref-btn-buynow {
        width: 100% !important;
        height: 48px !important;
        font-size: 0.98rem !important;
        justify-content: center !important;
        border-radius: 12px !important;
    }

    /* 9. Mobile Drawer Styling */
    .mobile-drawer {
        background: #2b4f41 !important;
        border-left: 1px solid rgba(190, 158, 77, 0.3) !important;
    }

    .mobile-drawer-header .brand-name {
        color: #ffffff !important;
    }

    .mobile-drawer-header .brand-tagline {
        color: #c4943c !important;
    }

    .mobile-menu-list a {
        color: #e2e8f0 !important;
        font-size: 1rem !important;
        padding: 12px 16px !important;
    }

    .mobile-menu-list a:hover,
    .mobile-menu-list li.current-menu-item a {
        color: #cea851 !important;
        background: rgba(196, 148, 60, 0.12) !important;
    }
}

/* ==========================================================
   GLOBAL COLOR VISIBILITY & CONTRAST MASTER OVERHAUL
   (Fixing invisible text, sale badges, cards, forms, buttons)
   ========================================================== */

/* 1. UNIVERSAL RADIANT CELESTIAL GOLD SALE BADGES */
.woocommerce span.onsale,
.woocommerce-page span.onsale,
.onsale,
span.onsale,
.ref-sprod-badge.sale,
span.ref-sprod-badge.sale,
.s3-badge,
.sale-badge,
.ref-sprod-badge:not(.new) {
    background: linear-gradient(135deg, #c4943c 0%, #d97706 100%) !important;
    color: #2b4f41 !important;
    font-weight: 800 !important;
    font-size: 0.72rem !important;
    line-height: 1 !important;
    padding: 5px 12px !important;
    border-radius: 9999px !important;
    border: 1.5px solid #e6d6a2 !important;
    box-shadow: 0 4px 14px rgba(196, 148, 60, 0.45) !important;
    display: inline-block !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    z-index: 5 !important;
}

/* 2. SAVINGS & STOCK STATUS PILLS */
.s4-save-pill,
.save-pill,
.you-save-badge,
.saving-tag {
    background: #f1f8f5 !important;
    color: #2d5244 !important;
    border: 1.5px solid #418869 !important;
    padding: 5px 14px !important;
    border-radius: 9999px !important;
    font-size: 0.84rem !important;
    font-weight: 800 !important;
    display: inline-flex !important;
    align-items: center !important;
    box-shadow: 0 2px 8px rgba(65, 136, 105, 0.18) !important;
    margin-left: 8px !important;
    vertical-align: middle !important;
}

.stock-badge,
.in-stock-badge {
    background: #f1f8f5 !important;
    color: #2d5244 !important;
    border: 1.5px solid #418869 !important;
    padding: 5px 14px !important;
    border-radius: 9999px !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.stock-badge i,
.in-stock-badge i {
    color: #418869 !important;
}

/* 3. PRODUCT PRICES: CURRENT PRICE VS STRIKETHROUGH REGULAR PRICE */
.s4-current-price,
.ref-scurr-price,
ins .amount,
.sale-price,
.current-price {
    color: #2d5244 !important;
    font-weight: 800 !important;
}

.s4-old-price,
del,
del .amount,
.regular-price,
.ref-sprod-card del,
.ref-sprod-price-line del {
    color: #64748b !important;
    text-decoration: line-through !important;
    font-weight: 500 !important;
    opacity: 0.85 !important;
    margin-left: 8px !important;
}

/* 4. FORM INPUTS & TEXTAREAS (Preventing White-on-White Invisible Typing) */
.ref-cinput,
.ref-cselect,
.ref-ctextarea,
.ref-interactive-pay-form input,
.ref-cform-body input,
.ref-cform-body textarea,
.ref-cform-body select,
input[type="text"]:not(.qty):not(.s4-qty-input),
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"]:not(.qty):not(.s4-qty-input),
textarea,
select {
    background: #ffffff !important;
    color: #2d5244 !important;
    border: 1.5px solid #d4e7de !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 0.92rem !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.ref-cinput:focus,
.ref-cselect:focus,
.ref-ctextarea:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
    border-color: #4d806a !important;
    box-shadow: 0 0 0 3px rgba(47, 108, 82, 0.15) !important;
    color: #2d5244 !important;
    outline: none !important;
}

.ref-cinput::placeholder,
.ref-ctextarea::placeholder,
input::placeholder,
textarea::placeholder {
    color: #64748b !important;
    opacity: 1 !important;
    font-weight: 400 !important;
}

/* 5. ASTROLOGY SERVICE CARDS (/astrology/ and /services/) */
.astro-feat-card {
    background: #ffffff !important;
    border: 1.5px solid #d4e7de !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 24px rgba(21, 47, 36, 0.06) !important;
}

.astro-feat-title {
    color: #2d5244 !important;
    font-weight: 700 !important;
}

.astro-feat-desc {
    color: #33453e !important;
    line-height: 1.6 !important;
}

.astro-feat-points li {
    color: #24342d !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
}

.astro-feat-points li i {
    color: #c4943c !important;
}

.astro-btn-card {
    background: #2d5244 !important;
    color: #ffffff !important;
    border: 1.5px solid #2d5244 !important;
    font-weight: 700 !important;
    font-size: 0.88rem !important;
    box-shadow: 0 4px 14px rgba(21, 47, 36, 0.2) !important;
    border-radius: 8px !important;
    padding: 10px 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
}

.astro-btn-card:hover {
    background: linear-gradient(135deg, #be9e4d 0%, #c4943c 100%) !important;
    color: #2b4f41 !important;
    border-color: #be9e4d !important;
    box-shadow: 0 4px 15px rgba(190, 158, 77, 0.4) !important;
}

/* 6. ABOUT US PAGE DARK CARDS CONTENT VISIBILITY (/about-us/) */
.ref-pillar-card {
    background: #294c3c !important;
    border: 1px solid rgba(190, 158, 77, 0.35) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
}

.ref-pillar-title {
    color: #cea851 !important;
    font-weight: 700 !important;
}

.ref-pillar-text {
    color: #ddeee6 !important;
    line-height: 1.6 !important;
    font-size: 0.88rem !important;
}

.ref-story-card {
    background: #294c3c !important;
    border: 1px solid rgba(190, 158, 77, 0.35) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
}

.ref-story-tag {
    color: #cea851 !important;
    font-weight: 700 !important;
}

.ref-story-title {
    color: #ffffff !important;
    font-weight: 700 !important;
}

.ref-story-desc {
    color: #ddeee6 !important;
    line-height: 1.65 !important;
}

.ref-why-choose-card {
    background: #294c3c !important;
    border: 1px solid rgba(190, 158, 77, 0.35) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
}

.ref-wcc-title {
    color: #ffffff !important;
    font-weight: 700 !important;
}

.ref-wcc-checklist li span {
    color: #ddeee6 !important;
    font-weight: 600 !important;
}

.ref-wcc-checklist li i {
    color: #c4943c !important;
}

/* 7. CONTACT US PAGE VISIBILITY (/contact/) */
.ref-git-title,
.ref-qh-title,
.ref-chead-title {
    color: #ffffff !important;
    font-weight: 700 !important;
}

.ref-git-row strong {
    color: #cea851 !important;
    font-weight: 700 !important;
}

.ref-git-row a {
    color: #ddeee6 !important;
    text-decoration: none !important;
}

.ref-git-row a:hover {
    color: #c4943c !important;
}

.ref-git-row span,
.ref-git-row p {
    color: #b2ccc0 !important;
}

.ref-git-quote-text {
    color: #ddeee6 !important;
    font-style: italic !important;
    line-height: 1.6 !important;
}

/* Quick Help FAQ accordion questions */
.ref-qh-item {
    background: #ffffff !important;
    border: 1.5px solid #d4e7de !important;
    border-radius: 10px !important;
}

.ref-qh-question {
    color: #2d5244 !important;
    font-weight: 700 !important;
    font-size: 0.88rem !important;
}

.ref-qh-question span {
    color: #2d5244 !important;
    font-weight: 700 !important;
}

.ref-qh-question .ref-qh-qicon {
    color: #d97706 !important;
}

.ref-qh-question .ref-qh-arr {
    color: #2d5244 !important;
}

.ref-qh-answer p {
    color: #24342d !important;
    line-height: 1.6 !important;
}

/* 8. HOMEPAGE CTA COSMIC BANNER */
.ref-clarity-banner-card {
    border: 1.5px solid rgba(190, 158, 77, 0.4) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4) !important;
}

.ref-clarity-heading {
    color: #ffffff !important;
    font-family: var(--ref-font-heading, 'Cinzel', serif) !important;
    font-weight: 700 !important;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.8) !important;
}

.ref-clarity-sub {
    color: #ddeee6 !important;
    font-weight: 500 !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7) !important;
}

/* 9. CONSULTATION BOOKING SUMMARY BOX & SERVICE DURATION */
.ref-strust-item strong {
    color: #2d5244 !important;
    font-weight: 700 !important;
    display: block !important;
    margin-bottom: 2px !important;
}

.ref-strust-item span {
    color: #33453e !important;
    font-weight: 500 !important;
    font-size: 0.78rem !important;
}

.ref-strust-item i {
    color: #d97706 !important;
}

.ref-card-dur {
    font-size: 0.74rem !important;
    color: #2d5244 !important;
    font-weight: 700 !important;
    background: #ebf2ef !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    border: 1px solid #d4e7de !important;
    display: inline-block !important;
}

/* 10. SINGLE PRODUCT TRUST BADGES, BUTTONS & SHARE ROW */
.s4-trust-badges-row .t-badge {
    background: #ffffff !important;
    border: 1.5px solid #d4e7de !important;
    border-radius: 12px !important;
    padding: 12px 8px !important;
    box-shadow: 0 2px 8px rgba(21, 47, 36, 0.05) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
}

.s4-trust-badges-row .t-badge i,
.s4-trust-badges-row .t-badge .t-icon {
    color: #2d5244 !important;
    font-size: 1.2rem !important;
}

.s4-trust-badges-row .t-badge span {
    color: #2d5244 !important;
    font-weight: 700 !important;
    font-size: 0.78rem !important;
    line-height: 1.2 !important;
}

.s4-add-to-cart-btn {
    background: #2d5244 !important;
    color: #ffffff !important;
    border: 1.5px solid #2d5244 !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 14px rgba(21, 47, 36, 0.25) !important;
}

.s4-buy-now-btn {
    background: linear-gradient(135deg, #be9e4d 0%, #c4943c 100%) !important;
    color: #2b4f41 !important;
    border: 1.5px solid #e6d6a2 !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 16px rgba(190, 158, 77, 0.4) !important;
}

.s4-share-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-top: 14px !important;
    color: #2d5244 !important;
    font-weight: 700 !important;
    font-size: 0.88rem !important;
}

.s4-share-row a,
.s4-wishlist-inline {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    border: 1px solid #d4e7de !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #2d5244 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.s4-share-row a:hover,
.s4-wishlist-inline:hover {
    background: #2d5244 !important;
    color: #ffffff !important;
    border-color: #2d5244 !important;
    transform: translateY(-2px) !important;
}

/* 11. CART PAGE LUXURY CONTRAST & TYPOGRAPHY */
.screen5-cart-page {
    background-color: #edf3f0 !important;
    background: radial-gradient(circle at 50% 20%, #f6f9f8 0%, #edf3f0 60%, #e1ece7 100%) !important;
    padding: 40px 0 80px !important;
}

.s5-cart-heading {
    color: #2d5244 !important;
    font-family: var(--ref-font-heading, 'Cinzel', serif) !important;
    font-size: 2.2rem !important;
    font-weight: 700 !important;
    margin-bottom: 28px !important;
}

.s5-cart-heading .count-tag {
    color: #4d806a !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
}

.s5-cart-table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: #ffffff !important;
    border-radius: 16px !important;
    border: 1.5px solid #d4e7de !important;
    overflow: hidden !important;
    box-shadow: 0 8px 24px rgba(21, 47, 36, 0.06) !important;
    margin-bottom: 24px !important;
}

.s5-cart-table th {
    background: #edf3f0 !important;
    color: #2d5244 !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 14px 16px !important;
    border-bottom: 1.5px solid #d4e7de !important;
}

.s5-cart-table td {
    padding: 18px 16px !important;
    border-bottom: 1px solid #edf3f0 !important;
    color: #24342d !important;
    font-size: 0.95rem !important;
    vertical-align: middle !important;
}

.s5-cart-table tr:last-child td {
    border-bottom: none !important;
}

.s5-order-summary-card {
    background: #ffffff !important;
    border: 1.5px solid #d4e7de !important;
    border-radius: 16px !important;
    padding: 24px !important;
    box-shadow: 0 8px 24px rgba(21, 47, 36, 0.06) !important;
}

.s5-order-summary-card .summary-title {
    color: #2d5244 !important;
    font-family: var(--ref-font-heading, 'Cinzel', serif) !important;
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    margin-bottom: 18px !important;
}

.s5-order-summary-card .summary-line {
    color: #24342d !important;
    display: flex !important;
    justify-content: space-between !important;
    font-size: 0.95rem !important;
    margin-bottom: 12px !important;
}

.s5-order-summary-card .summary-total-line {
    color: #2d5244 !important;
    display: flex !important;
    justify-content: space-between !important;
    font-size: 1.3rem !important;
    font-weight: 800 !important;
    margin-top: 16px !important;
    padding-top: 14px !important;
    border-top: 1.5px solid #d4e7de !important;
}

.btn-apply-coupon {
    background: #2d5244 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    border: none !important;
    padding: 10px 20px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.btn-apply-coupon:hover {
    background: #4d806a !important;
}

.btn-checkout-gold {
    background: linear-gradient(135deg, #be9e4d 0%, #c4943c 100%) !important;
    color: #2b4f41 !important;
    font-weight: 800 !important;
    font-size: 1.05rem !important;
    border-radius: 9999px !important;
    border: none !important;
    padding: 14px 28px !important;
    box-shadow: 0 4px 15px rgba(190, 158, 77, 0.4) !important;
    cursor: pointer !important;
    display: block !important;
    text-align: center !important;
    text-decoration: none !important;
}

/* 12. CHECKOUT ORDER REVIEW & PAYMENT CONTRAST */
.ref-payment-methods-card {
    background: rgba(37, 69, 54, 0.92) !important;
    border: 1px solid rgba(190, 158, 77, 0.35) !important;
}

.ref-pm-heading {
    color: #ffffff !important;
    font-weight: 700 !important;
}

.ref-clabel {
    color: #ffffff !important;
    font-weight: 600 !important;
}

.ref-bsummary-card {
    background: rgba(37, 69, 54, 0.92) !important;
    border: 1px solid rgba(190, 158, 77, 0.35) !important;
}

.ref-bsummary-head h3 {
    color: #ffffff !important;
    font-weight: 700 !important;
}

.ref-bsum-meta h4 {
    color: #ffffff !important;
    font-weight: 700 !important;
}

.ref-bsum-sub {
    color: #cbe2d7 !important;
}

.ref-bsum-line span {
    color: #d4e7de !important;
}

.ref-bsum-line strong {
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* 13. GLOBAL STAR RATINGS */
.fa-star,
.star-rating,
.star-rating span::before,
.ref-sprod-rating-row i,
.s4-stars i,
.rating-stars i,
.ref-srating-row i {
    color: #c4943c !important;
}

/* ==========================================================================
   14. SINGLE PRODUCT CUSTOMER REVIEWS & RATINGS SYSTEM
   ========================================================================== */

/* Top Rating Bar Clickable Jump Link */
.s4-rating-bar a.s4-rev-jump {
    color: #2d5244 !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
    cursor: pointer !important;
    transition: color 0.2s ease !important;
}

.s4-rating-bar a.s4-rev-jump:hover {
    color: #d97706 !important;
}

/* Reviews Main Container */
.s4-reviews-section {
    background: linear-gradient(180deg, rgba(16, 37, 28, 0.96) 0%, rgba(10, 22, 17, 0.98) 100%) !important;
    border: 1.5px solid rgba(190, 158, 77, 0.3) !important;
    border-radius: 20px !important;
    padding: 38px 40px !important;
    margin: 45px 0 35px 0 !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.45) !important;
    position: relative !important;
    overflow: hidden !important;
    color: #ffffff !important;
}

.s4-reviews-container {
    max-width: 100% !important;
}

/* Section Header */
.s4-rev-header-wrap {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
    gap: 24px !important;
    margin-bottom: 28px !important;
    flex-wrap: wrap !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding-bottom: 20px !important;
}

.s4-rev-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 14px !important;
    background: rgba(196, 148, 60, 0.15) !important;
    border: 1px solid #c4943c !important;
    border-radius: 30px !important;
    color: #cea851 !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 8px !important;
}

.s4-rev-main-heading {
    font-family: 'Cinzel', serif !important;
    font-size: 2rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin: 0 0 6px !important;
    line-height: 1.2 !important;
}

.s4-rev-subheading {
    color: #ddeee6 !important;
    font-size: 0.95rem !important;
    margin: 0 !important;
}

.s4-write-btn {
    padding: 12px 28px !important;
    border-radius: 50px !important;
    font-weight: 800 !important;
    font-size: 0.95rem !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: linear-gradient(135deg, #c4943c 0%, #d97706 100%) !important;
    color: #2b4f41 !important;
    border: 1.5px solid #e6d6a2 !important;
    box-shadow: 0 4px 14px rgba(196, 148, 60, 0.4) !important;
    transition: all 0.25s ease !important;
    text-decoration: none !important;
}

.s4-write-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(196, 148, 60, 0.6) !important;
}

/* Stats Breakdown Card */
.s4-rev-stats-card {
    display: grid !important;
    grid-template-columns: 240px 1.4fr 1fr !important;
    gap: 28px !important;
    background: rgba(8, 15, 12, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 16px !important;
    padding: 26px !important;
    margin-bottom: 32px !important;
    align-items: center !important;
}

.s4-rev-score-col {
    text-align: center !important;
    border-right: 1px solid rgba(255, 255, 255, 0.12) !important;
    padding-right: 20px !important;
}

.s4-score-number {
    font-size: 3.6rem !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    line-height: 1 !important;
    font-family: 'Cinzel', serif !important;
    margin-bottom: 6px !important;
}

.s4-score-stars {
    color: #c4943c !important;
    font-size: 1.25rem !important;
    margin-bottom: 8px !important;
    letter-spacing: 3px !important;
}

.s4-score-count {
    color: #ddeee6 !important;
    font-size: 0.85rem !important;
    display: block !important;
    margin-bottom: 12px !important;
    font-weight: 500 !important;
}

.s4-score-guarantee {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 0.76rem !important;
    color: #418869 !important;
    font-weight: 700 !important;
    background: rgba(65, 136, 105, 0.15) !important;
    padding: 4px 12px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(65, 136, 105, 0.35) !important;
}

.s4-rev-breakdown-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    border-right: 1px solid rgba(255, 255, 255, 0.12) !important;
    padding-right: 24px !important;
}

.s4-bar-row {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-size: 0.88rem !important;
}

.s4-bar-label {
    min-width: 48px !important;
    color: #c4943c !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 0.85rem !important;
}

.s4-bar-track {
    flex: 1 !important;
    height: 10px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    position: relative !important;
}

.s4-bar-fill {
    height: 100% !important;
    background: linear-gradient(90deg, #c4943c, #cea851) !important;
    border-radius: 10px !important;
    transition: width 0.6s ease !important;
}

.s4-bar-pct {
    min-width: 75px !important;
    text-align: right !important;
    color: #ddeee6 !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
}

.s4-rev-trust-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

.s4-trust-item {
    display: flex !important;
    gap: 12px !important;
    align-items: flex-start !important;
}

.s4-trust-item i {
    color: #c4943c !important;
    font-size: 1.3rem !important;
    margin-top: 3px !important;
}

.s4-trust-item strong {
    display: block !important;
    color: #ffffff !important;
    font-size: 0.88rem !important;
    margin-bottom: 2px !important;
}

.s4-trust-item p {
    margin: 0 !important;
    color: #ddeee6 !important;
    font-size: 0.78rem !important;
    line-height: 1.4 !important;
}

/* Interactive Review Form Box */
.s4-review-form-box {
    margin-bottom: 32px !important;
}

.s4-form-inner-card {
    background: #0c1813 !important;
    border: 1.5px solid #be9e4d !important;
    border-radius: 16px !important;
    padding: 30px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
    animation: fadeInReview 0.35s ease-out !important;
}

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

.s4-form-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    margin-bottom: 22px !important;
    border-bottom: 1px solid rgba(255,255,255,0.12) !important;
    padding-bottom: 16px !important;
}

.s4-form-title {
    color: #ffffff !important;
    font-family: 'Cinzel', serif !important;
    font-size: 1.4rem !important;
    margin: 0 0 4px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.s4-form-title i {
    color: #c4943c !important;
}

.s4-form-desc {
    color: #ddeee6 !important;
    font-size: 0.9rem !important;
    margin: 0 !important;
}

.s4-form-close-btn {
    background: rgba(255,255,255,0.1) !important;
    border: none !important;
    color: #ffffff !important;
    font-size: 1.1rem !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.s4-form-close-btn:hover {
    background: rgba(239, 68, 68, 0.25) !important;
    color: #fca5a5 !important;
}

/* Star Selector */
.s4-star-selector-row {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
    margin-top: 6px !important;
}

.s4-star-picker {
    display: flex !important;
    gap: 10px !important;
    font-size: 1.8rem !important;
    cursor: pointer !important;
}

.s4-picker-star {
    color: rgba(255, 255, 255, 0.25) !important;
    transition: transform 0.15s ease, color 0.15s ease !important;
}

.s4-picker-star.active,
.s4-picker-star.hovered {
    color: #c4943c !important;
}

/* The global ".fa-star" rule paints every star gold; the picker stars must follow their own state */
.s4-star-picker .s4-picker-star i {
    color: rgba(255, 255, 255, 0.25) !important;
}

.s4-star-picker .s4-picker-star.active i,
.s4-star-picker .s4-picker-star.hovered i {
    color: #c4943c !important;
}

@media (hover: hover) {
    .s4-picker-star:hover {
        transform: scale(1.25) !important;
    }
}

.s4-star-feedback-badge {
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    color: #cea851 !important;
    background: rgba(196, 148, 60, 0.15) !important;
    padding: 5px 14px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(196, 148, 60, 0.35) !important;
}

/* Form Inputs */
.s4-form-group {
    margin-bottom: 18px !important;
}

.s4-form-label {
    color: #ffffff !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;
    display: block !important;
}

.s4-form-label .req {
    color: #ef4444 !important;
}

.s4-form-input,
.s4-form-textarea {
    width: 100% !important;
    background: #ffffff !important;
    color: #2d5244 !important;
    border: 1.5px solid #bdddce !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    outline: none !important;
    font-family: inherit !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.s4-form-input:focus,
.s4-form-textarea:focus {
    border-color: #418869 !important;
    box-shadow: 0 0 0 3px rgba(65, 136, 105, 0.25) !important;
}

.s4-form-row-2col {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
}

.s4-logged-in-notice {
    background: rgba(65, 136, 105, 0.15) !important;
    border: 1px solid rgba(65, 136, 105, 0.3) !important;
    color: #ddeee6 !important;
    padding: 10px 14px !important;
    border-radius: 8px !important;
    font-size: 0.88rem !important;
    margin-bottom: 18px !important;
}

/* Feedback Box */
.s4-form-feedback {
    padding: 12px 18px !important;
    border-radius: 8px !important;
    margin: 16px 0 !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
}

.s4-form-feedback.success {
    background: #f1f8f5 !important;
    color: #2d5244 !important;
    border: 1.5px solid #418869 !important;
}

.s4-form-feedback.error {
    background: #fef2f2 !important;
    color: #991b1b !important;
    border: 1.5px solid #ef4444 !important;
}

/* Submit Button */
.s4-submit-review-btn {
    padding: 12px 32px !important;
    font-size: 0.98rem !important;
    font-weight: 800 !important;
    border-radius: 50px !important;
    cursor: pointer !important;
    background: linear-gradient(135deg, #c4943c 0%, #d97706 100%) !important;
    color: #2b4f41 !important;
    border: 1.5px solid #e6d6a2 !important;
    box-shadow: 0 4px 14px rgba(196, 148, 60, 0.4) !important;
    transition: all 0.25s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.s4-submit-review-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(196, 148, 60, 0.6) !important;
}

.s4-submit-review-btn:disabled {
    opacity: 0.7 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* Reviews Feed */
.s4-reviews-feed-wrap {
    margin-top: 25px !important;
}

.s4-feed-title {
    color: #ffffff !important;
    font-family: 'Cinzel', serif !important;
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    margin-bottom: 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.s4-feed-title i {
    color: #c4943c !important;
}

.s4-review-item-card {
    background: rgba(8, 15, 12, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 14px !important;
    padding: 22px 24px !important;
    margin-bottom: 16px !important;
    transition: all 0.25s ease !important;
}

.s4-review-item-card:hover {
    border-color: rgba(190, 158, 77, 0.45) !important;
    transform: translateY(-2px) !important;
}

.s4-review-item-card.new-review-card {
    border-color: #418869 !important;
    background: rgba(14, 30, 23, 0.9) !important;
    animation: highlightNewRev 1.5s ease-out !important;
}

@keyframes highlightNewRev {
    from { box-shadow: 0 0 25px rgba(65, 136, 105, 0.6); }
    to { box-shadow: none; }
}

.s4-rev-top-bar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 12px !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
}

.s4-rev-author-info {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
}

.s4-rev-avatar {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #1c3c2f, #2d5244) !important;
    border: 1.5px solid #be9e4d !important;
    color: #cea851 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 800 !important;
    font-size: 1rem !important;
    font-family: 'Cinzel', serif !important;
    flex-shrink: 0 !important;
}

.s4-rev-author-name {
    font-weight: 700 !important;
    color: #ffffff !important;
    font-size: 1rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

.s4-rev-verified-pill {
    background: #f1f8f5 !important;
    color: #2d5244 !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    padding: 2px 8px !important;
    border-radius: 12px !important;
    border: 1px solid #418869 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.s4-rev-date {
    color: #94a3b8 !important;
    font-size: 0.8rem !important;
    margin-top: 2px !important;
}

.s4-rev-stars {
    color: #c4943c !important;
    font-size: 0.95rem !important;
    letter-spacing: 2px !important;
}

.s4-rev-stars .empty {
    color: rgba(255,255,255,0.2) !important;
}

.s4-rev-content {
    color: #e2e8f0 !important;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
}

.s4-rev-content p {
    color: #e2e8f0 !important;
    margin: 0 !important;
}

/* Mobile Responsiveness for Reviews */
@media (max-width: 900px) {
    .s4-reviews-section {
        padding: 26px 18px !important;
        margin: 35px 0 25px 0 !important;
    }

    .s4-rev-header-wrap {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 16px !important;
    }

    .s4-rev-main-heading {
        font-size: 1.6rem !important;
    }

    .s4-rev-stats-card {
        grid-template-columns: 1fr !important;
        gap: 22px !important;
        padding: 20px !important;
    }

    .s4-rev-score-col {
        border-right: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        padding-right: 0 !important;
        padding-bottom: 18px !important;
    }

    .s4-rev-breakdown-col {
        border-right: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        padding-right: 0 !important;
        padding-bottom: 18px !important;
    }

    .s4-form-row-2col {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .s4-form-inner-card {
        padding: 20px 16px !important;
    }

    .s4-star-picker {
        font-size: 1.5rem !important;
        gap: 8px !important;
    }
}

/* ==========================================================================
   HIGH-CONTRAST LUXURY OVERHAUL: SHOP TRUST STRIP & CONTACT US PAGE
   ========================================================================== */

/* 1. Shop Page Bottom Trust Strip */
.ref-shop-bottom-trust-strip {
    background: linear-gradient(135deg, #1f3a2f 0%, #2f5546 100%) !important;
    border: 1.5px solid #be9e4d !important;
    border-radius: 16px !important;
    padding: 24px 32px !important;
    box-shadow: 0 14px 40px rgba(12, 26, 20, 0.35) !important;
}

.ref-sbtrust-item {
    border-right: 1px solid rgba(190, 158, 77, 0.25) !important;
}

.ref-sbtrust-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: rgba(190, 158, 77, 0.15) !important;
    border: 1.5px solid #c4943c !important;
    color: #c4943c !important;
    box-shadow: 0 0 14px rgba(196, 148, 60, 0.25) !important;
}

.ref-sbtrust-item strong {
    color: #ffffff !important;
    font-size: 0.94rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    margin-bottom: 4px !important;
    display: block !important;
}

.ref-sbtrust-item span {
    color: #ddeee6 !important;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    display: block !important;
    line-height: 1.4 !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

/* 2. Contact Page Hero & Title */
.ref-chead-title {
    font-family: var(--ref-font-heading) !important;
    font-size: 3.3rem !important;
    font-weight: 700 !important;
    color: #2d5244 !important;
    line-height: 1.2 !important;
    margin-bottom: 12px !important;
    text-shadow: none !important;
}

.ref-chead-divider .ref-line {
    background: #be9e4d !important;
}

.ref-chead-divider i {
    color: #c4943c !important;
}

.ref-chead-tagline {
    color: #b45309 !important;
    font-weight: 700 !important;
}

.ref-chead-desc {
    color: #24342d !important;
    font-weight: 500 !important;
}

/* 3. Contact Form Card */
.ref-cform-card {
    background: linear-gradient(135deg, #1f3a2f 0%, #2f5546 100%) !important;
    border: 1.5px solid #be9e4d !important;
    border-radius: 18px !important;
    box-shadow: 0 16px 40px rgba(12, 26, 20, 0.4) !important;
}

.ref-cform-title {
    color: #ffffff !important;
    font-family: 'Cinzel', serif !important;
    font-size: 1.7rem !important;
    font-weight: 700 !important;
    text-shadow: none !important;
}

.ref-cform-title-decor {
    color: #c4943c !important;
}

.ref-clabel {
    color: #ddeee6 !important;
    font-weight: 600 !important;
}

.ref-csubmit-btn {
    background: linear-gradient(135deg, #c4943c 0%, #d97706 100%) !important;
    color: #2b4f41 !important;
    font-weight: 800 !important;
    border: 1px solid #e6d6a2 !important;
    box-shadow: 0 4px 15px rgba(196, 148, 60, 0.4) !important;
}

.ref-csubmit-btn:hover {
    background: linear-gradient(135deg, #cea851 0%, #c4943c 100%) !important;
    transform: translateY(-2px) !important;
}

/* 4. Contact Page Micro-Trust Badges */
.ref-ctrust-item {
    background: linear-gradient(135deg, #1f3a2f 0%, #2f5546 100%) !important;
    border: 1.5px solid #be9e4d !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 24px rgba(12, 26, 20, 0.25) !important;
}

.ref-ctrust-icon {
    background: rgba(190, 158, 77, 0.15) !important;
    border: 1.5px solid #c4943c !important;
    color: #c4943c !important;
}

.ref-ctrust-item strong {
    color: #ffffff !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
}

.ref-ctrust-item span {
    color: #ddeee6 !important;
    font-size: 0.76rem !important;
    font-weight: 500 !important;
    opacity: 1 !important;
    line-height: 1.35 !important;
}

/* 5. Contact Page Lower Cards (Get In Touch, Quick Help FAQ, Bottom Badges) */
.ref-git-card,
.ref-git-quote-card,
.ref-quick-help-card {
    background: linear-gradient(135deg, #1f3a2f 0%, #2f5546 100%) !important;
    border: 1.5px solid #be9e4d !important;
    box-shadow: 0 12px 36px rgba(12, 26, 20, 0.3) !important;
}

.ref-git-title,
.ref-qh-title {
    color: #ffffff !important;
    font-family: 'Cinzel', serif !important;
}

.ref-git-row strong {
    color: #ffffff !important;
}

.ref-git-row span,
.ref-git-row p {
    color: #ddeee6 !important;
}

.ref-git-row a {
    color: #d7ba72 !important;
}

.ref-git-quote-text {
    color: #e2e8f0 !important;
    font-style: italic !important;
}

.ref-qh-question {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(190, 158, 77, 0.2) !important;
}

.ref-qh-question span {
    color: #ffffff !important;
}

.ref-qh-qicon,
.ref-qh-arr {
    color: #c4943c !important;
}

.ref-qh-answer p {
    color: #ddeee6 !important;
}

.ref-contact-trust-strip {
    background: linear-gradient(135deg, #1f3a2f 0%, #2f5546 100%) !important;
    border: 1.5px solid #be9e4d !important;
    border-radius: 16px !important;
}

.ref-ctrust-badge strong {
    color: #ffffff !important;
}

.ref-ctrust-badge span {
    color: #ddeee6 !important;
}

.ref-ctrust-badge i {
    color: #c4943c !important;
}

@media (max-width: 900px) {
    .ref-chead-title {
        font-size: 2.1rem !important;
    }
}