/* ================================================================
   SPELLBOUND SECRETS — Design System
   Child theme of Hello Elementor
   ================================================================
   Layers:
   1.  Reset overrides for Hello/Elementor defaults
   2.  Typography system
   3.  Global layout & body
   4.  Navigation (Hello header override)
   5.  Hero & page headers
   6.  Elementor widget overrides
   7.  Cards, buttons, ornaments
   8.  Blog / post components
   9.  Scroll animations & particles
   10. Utility classes (use in Elementor → Advanced → CSS Classes)
   ================================================================ */

/* ── 1. RESET HELLO'S DEFAULTS ────────────────────────────────── */
*,*::before,*::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body.sbs-mystical {
    background-color: var(--sbs-void) !important;
    color: var(--sbs-text) !important;
    font-family: var(--font-body) !important;
    font-size: 18px;
    line-height: 1.75;
    overflow-x: hidden;
}

/* Kill Hello's white flashes */
.elementor-section,
.elementor-container,
.e-container,
.e-con {
    position: relative;
}

/* Default section backgrounds dark */
.elementor-section.elementor-section-boxed > .elementor-container {
    max-width: 1200px;
}

/* ── 2. TYPOGRAPHY ─────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.elementor-widget-heading .elementor-heading-title {
    font-family: var(--font-heading) !important;
    font-weight: 400 !important;
    letter-spacing: .06em;
    line-height: 1.2;
    color: var(--sbs-parchment) !important;
}

/* Display / hero headings */
.sbs-display,
.elementor-widget-heading .elementor-heading-title.sbs-display {
    font-family: var(--font-display) !important;
    letter-spacing: .08em;
}

/* Script accent headings */
.sbs-script,
.elementor-widget-heading .elementor-heading-title.sbs-script {
    font-family: var(--font-script) !important;
    font-weight: 400 !important;
    color: var(--sbs-gold-light) !important;
    letter-spacing: .03em;
    font-size: 1.6em;
    line-height: 1.2;
}

/* Body / paragraph */
p,
.elementor-widget-text-editor p,
.elementor-text-editor p {
    font-family: var(--font-body) !important;
    color: var(--sbs-text) !important;
    line-height: 1.8;
}

/* Eyebrow / label text */
.sbs-eyebrow {
    font-family: var(--font-ui) !important;
    font-size: .68rem !important;
    letter-spacing: .45em !important;
    text-transform: uppercase !important;
    color: var(--sbs-gold) !important;
    opacity: .85;
    display: block;
    margin-bottom: .8rem;
}

/* Links */
a {
    color: var(--sbs-gold);
    text-decoration: none;
    transition: color .25s;
}
a:hover { color: var(--sbs-gold-light); }

/* ── 3. GLOBAL LAYOUT ──────────────────────────────────────────── */

/* Atmospheric void background with subtle radial gradient */
body.sbs-mystical::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 100% 60% at 15% 0%,   rgba(46,31,68,.5)  0%, transparent 55%),
        radial-gradient(ellipse 80%  50% at 85% 100%, rgba(19,16,30,.8)  0%, transparent 60%),
        radial-gradient(ellipse 60%  40% at 50% 50%,  rgba(6,4,10,0)     0%, transparent 100%);
}

/* Particle canvas (injected by JS) */
#sbs-starfield {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: .5;
}

/* Ensure Elementor sections sit above the background */
.elementor-section,
.e-con,
.elementor-widget-wrap {
    position: relative;
    z-index: 1;
}

/* Section padding defaults */
.elementor-section,
.e-con {
    padding: var(--section-pad) 0 !important;
}
.elementor-section.no-pad,
.e-con.no-pad { padding: 0 !important; }
.elementor-section.pad-sm { padding: 3rem 0 !important; }
.elementor-section.pad-lg { padding: 9rem 0 !important; }

/* ── 4. NAVIGATION (Hello Elementor header) ───────────────────── */

/* The Hello theme renders a <header> with class .site-header */
.site-header,
header.elementor-location-header {
    background: rgba(6,4,10,.0) !important;
    border-bottom: 1px solid transparent !important;
    position: fixed !important;
    top: 0; left: 0; right: 0;
    z-index: 999 !important;
    transition: background .35s, border-color .35s, backdrop-filter .35s !important;
    backdrop-filter: blur(0px);
}

/* Scrolled state — added by JS */
.site-header.sbs-scrolled,
header.elementor-location-header.sbs-scrolled {
    background: rgba(6,4,10,.96) !important;
    border-bottom-color: var(--sbs-border) !important;
    backdrop-filter: blur(12px) !important;
}

/* Logo text */
.site-title a,
.elementor-nav-menu .elementor-site-title a,
.site-branding .site-title a {
    font-family: var(--font-display) !important;
    font-size: 1.3rem !important;
    letter-spacing: .12em !important;
    color: var(--sbs-parchment) !important;
    transition: color .25s;
}
.site-title a:hover { color: var(--sbs-gold) !important; }

/* Logo image size — keeps custom logos from being enormous */
.site-logo img,
.elementor-widget-site-logo img,
.custom-logo {
    max-height: 52px !important;
    width: auto !important;
    display: block;
}

/* Nav menu links */
.main-navigation a,
.elementor-nav-menu a,
.elementor-nav-menu--main .elementor-item {
    font-family: var(--font-ui) !important;
    font-size: .72rem !important;
    letter-spacing: .22em !important;
    text-transform: uppercase !important;
    color: rgba(212,200,232,.8) !important;
    transition: color .25s !important;
    padding: .5rem 1rem !important;
}

.main-navigation a:hover,
.elementor-nav-menu a:hover,
.elementor-nav-menu--main .elementor-item:hover,
.elementor-nav-menu--main .elementor-item.elementor-item-active {
    color: var(--sbs-gold) !important;
}

/* Nav underline indicator */
.elementor-nav-menu--main .elementor-item::after {
    content: '';
    display: block;
    height: 1px;
    background: var(--sbs-gold);
    transform: scaleX(0);
    transition: transform .3s var(--ease);
    transform-origin: center;
    margin-top: 2px;
}
.elementor-nav-menu--main .elementor-item:hover::after,
.elementor-nav-menu--main .elementor-item.elementor-item-active::after {
    transform: scaleX(1);
}

/* Dropdown */
.elementor-nav-menu .sub-menu,
.main-navigation .sub-menu {
    background: rgba(6,4,10,.97) !important;
    border: 1px solid var(--sbs-border) !important;
    backdrop-filter: blur(8px) !important;
    box-shadow: 0 8px 40px rgba(0,0,0,.6) !important;
    border-radius: 0 !important;
}
.elementor-nav-menu .sub-menu a,
.main-navigation .sub-menu a {
    font-size: .68rem !important;
    padding: .7rem 1.2rem !important;
    border-bottom: 1px solid rgba(201,146,42,.08) !important;
    transition: color .2s, padding-left .2s !important;
}
.elementor-nav-menu .sub-menu a:hover,
.main-navigation .sub-menu a:hover {
    padding-left: 1.6rem !important;
    color: var(--sbs-gold) !important;
}

/* Mobile hamburger */
.elementor-menu-toggle {
    color: var(--sbs-parchment) !important;
}

/* ── 5. PAGE HERO AREAS ────────────────────────────────────────── */

/* Push content below fixed nav */
.elementor-page,
.site-main,
.site-content {
    padding-top: 0;
}

/* Hero section with full-viewport image */
.sbs-hero {
    min-height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Dark overlay on hero images — use as Elementor section overlay */
.sbs-hero-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(6,4,10,.3) 0%,
        rgba(6,4,10,.55) 60%,
        rgba(6,4,10,.85) 100%
    );
    z-index: 1;
    pointer-events: none;
}
.sbs-hero-overlay .elementor-container,
.sbs-hero-overlay .e-con-inner {
    position: relative;
    z-index: 2;
}

/* Moon orb decoration — add class to an image widget */
.sbs-moon-orb img {
    border-radius: 50% !important;
    box-shadow:
        0 0 60px rgba(107,75,138,.5),
        0 0 120px rgba(46,31,68,.4),
        0 0 200px rgba(46,31,68,.2) !important;
    animation: sbs-moon-breathe 7s ease-in-out infinite !important;
}
@keyframes sbs-moon-breathe {
    0%,100% { box-shadow: 0 0 60px rgba(107,75,138,.5), 0 0 120px rgba(46,31,68,.4), 0 0 200px rgba(46,31,68,.2); }
    50%      { box-shadow: 0 0 90px rgba(107,75,138,.65), 0 0 160px rgba(46,31,68,.5), 0 0 260px rgba(46,31,68,.3); }
}

/* Page title banners */
.sbs-page-banner {
    background: linear-gradient(to bottom, var(--sbs-shadow), var(--sbs-abyss)) !important;
    border-bottom: 1px solid var(--sbs-border) !important;
    padding: 8rem 0 4rem !important;
    text-align: center;
}

/* ── 6. ELEMENTOR WIDGET OVERRIDES ─────────────────────────────── */

/* ── Text Editor ── */
.elementor-widget-text-editor {
    font-family: var(--font-body) !important;
    color: var(--sbs-text) !important;
    font-size: 1rem;
    line-height: 1.8;
}

/* ── Image ── */
.elementor-widget-image img {
    transition: transform .6s var(--ease), filter .4s !important;
}
.sbs-hover-lift:hover img {
    transform: translateY(-4px) !important;
}
.sbs-hover-glow:hover img {
    filter: brightness(1.05) drop-shadow(0 0 20px rgba(201,146,42,.3)) !important;
}

/* ── Divider ── */
.elementor-divider-separator {
    border-color: var(--sbs-border) !important;
}
.sbs-gold-divider .elementor-divider-separator {
    border-color: var(--sbs-gold) !important;
    opacity: .4;
}

/* ── Icon ── */
.elementor-icon i,
.elementor-icon svg {
    color: var(--sbs-gold) !important;
    fill: var(--sbs-gold) !important;
    transition: color .25s, transform .3s !important;
}
.elementor-widget-icon-box:hover .elementor-icon i {
    transform: scale(1.1) !important;
}

/* ── Icon Box (feature cards) ── */
.elementor-icon-box-title {
    font-family: var(--font-heading) !important;
    color: var(--sbs-parchment) !important;
    letter-spacing: .06em;
}
.elementor-icon-box-description {
    font-family: var(--font-body) !important;
    color: var(--sbs-text) !important;
    opacity: .8;
}

/* ── Testimonials ── */
.elementor-testimonial__content {
    font-family: var(--font-body) !important;
    font-style: italic !important;
    color: var(--sbs-text) !important;
    font-size: 1.05rem !important;
    line-height: 1.85 !important;
}
.elementor-testimonial__name {
    font-family: var(--font-ui) !important;
    font-size: .68rem !important;
    letter-spacing: .22em !important;
    text-transform: uppercase !important;
    color: var(--sbs-gold) !important;
}

/* ── Posts / Blog ── */
.elementor-post__title a {
    font-family: var(--font-heading) !important;
    color: var(--sbs-parchment) !important;
    transition: color .25s !important;
}
.elementor-post__title a:hover { color: var(--sbs-gold) !important; }
.elementor-post__excerpt p { color: var(--sbs-text) !important; opacity: .8; font-family: var(--font-body) !important; }
.elementor-post__meta-data { font-family: var(--font-ui) !important; font-size: .65rem !important; letter-spacing: .18em !important; text-transform: uppercase !important; color: var(--sbs-gold) !important; opacity: .7; }

/* ── Counter ── */
.elementor-counter-number-wrapper { font-family: var(--font-heading) !important; color: var(--sbs-gold) !important; }
.elementor-counter-title { font-family: var(--font-ui) !important; font-size: .72rem !important; letter-spacing: .2em !important; text-transform: uppercase !important; color: var(--sbs-text-dim) !important; }

/* ── Accordion / Toggle ── */
.elementor-accordion .elementor-tab-title {
    font-family: var(--font-heading) !important;
    color: var(--sbs-parchment) !important;
    border-bottom: 1px solid var(--sbs-border) !important;
    background: var(--sbs-abyss) !important;
    padding: 1rem 1.5rem !important;
    transition: color .25s !important;
}
.elementor-accordion .elementor-tab-title.elementor-active,
.elementor-accordion .elementor-tab-title:hover { color: var(--sbs-gold) !important; }
.elementor-accordion .elementor-tab-title .elementor-accordion-icon { color: var(--sbs-gold) !important; }
.elementor-accordion .elementor-tab-content {
    background: var(--sbs-shadow) !important;
    border-bottom: 1px solid var(--sbs-border) !important;
    font-family: var(--font-body) !important;
    color: var(--sbs-text) !important;
    padding: 1.2rem 1.5rem !important;
    line-height: 1.8 !important;
}

/* ── Tabs ── */
.elementor-tabs .elementor-tab-title {
    font-family: var(--font-ui) !important;
    font-size: .7rem !important;
    letter-spacing: .2em !important;
    text-transform: uppercase !important;
    color: var(--sbs-text-dim) !important;
    border: 1px solid transparent !important;
    transition: all .25s !important;
    background: transparent !important;
}
.elementor-tabs .elementor-tab-title.elementor-active,
.elementor-tabs .elementor-tab-title:hover {
    color: var(--sbs-gold) !important;
    border-color: var(--sbs-border) !important;
    background: rgba(201,146,42,.05) !important;
}
.elementor-tabs .elementor-tab-content { font-family: var(--font-body) !important; color: var(--sbs-text) !important; }

/* ── Progress Bar ── */
.elementor-progress-bar { background: var(--sbs-gold) !important; }
.elementor-progress-wrapper { background: var(--sbs-dusk) !important; }

/* ── Social Icons ── */
.elementor-social-icon {
    background: var(--sbs-dusk) !important;
    border: 1px solid var(--sbs-border) !important;
    transition: all .25s !important;
}
.elementor-social-icon:hover {
    background: rgba(201,146,42,.15) !important;
    border-color: var(--sbs-gold) !important;
    transform: translateY(-2px);
}
.elementor-social-icon i { color: var(--sbs-parchment) !important; }

/* ── Forms ── */
.elementor-form .elementor-field-group label,
.elementor-form .elementor-field-label {
    font-family: var(--font-ui) !important;
    font-size: .68rem !important;
    letter-spacing: .18em !important;
    text-transform: uppercase !important;
    color: var(--sbs-text-dim) !important;
    margin-bottom: .4rem !important;
    display: block !important;
}
.elementor-form input[type="text"],
.elementor-form input[type="email"],
.elementor-form input[type="tel"],
.elementor-form input[type="number"],
.elementor-form textarea,
.elementor-form select,
.elementor-field-group .elementor-field {
    background: var(--sbs-abyss) !important;
    border: 1px solid var(--sbs-border) !important;
    color: var(--sbs-parchment) !important;
    font-family: var(--font-body) !important;
    font-size: .95rem !important;
    padding: .8rem 1.1rem !important;
    outline: none !important;
    border-radius: 0 !important;
    transition: border-color .25s !important;
    width: 100% !important;
}
.elementor-form input:focus,
.elementor-form textarea:focus {
    border-color: var(--sbs-border-mid) !important;
    box-shadow: 0 0 12px var(--sbs-gold-glow) !important;
}
.elementor-form input::placeholder,
.elementor-form textarea::placeholder { color: var(--sbs-text-muted) !important; font-style: italic; }

.elementor-button,
.elementor-form .e-form__buttons .elementor-button,
button.elementor-button {
    font-family: var(--font-ui) !important;
    font-size: .7rem !important;
    letter-spacing: .25em !important;
    text-transform: uppercase !important;
    border-radius: 0 !important;
    transition: all .3s !important;
    cursor: pointer !important;
}
.elementor-button.elementor-button-primary,
.elementor-button[style*="background"],
button.elementor-button {
    background: var(--sbs-gold) !important;
    color: var(--sbs-void) !important;
    border: 1px solid var(--sbs-gold) !important;
    padding: .9rem 2.5rem !important;
}
.elementor-button:hover {
    background: var(--sbs-gold-light) !important;
    box-shadow: 0 6px 24px var(--sbs-gold-glow) !important;
    transform: translateY(-1px) !important;
}

/* ── 7. CARDS / SECTIONS / ORNAMENTS ─────────────────────────────*/

/* --- Dark card ---
   Apply class "sbs-card" to an Elementor Column or Section */
.sbs-card,
.elementor-column.sbs-card > .elementor-widget-wrap,
.e-con.sbs-card {
    background: var(--sbs-abyss) !important;
    border: 1px solid var(--sbs-border) !important;
    padding: var(--card-pad) !important;
    transition: border-color .3s, transform .3s !important;
}
.sbs-card:hover {
    border-color: var(--sbs-border-mid) !important;
}
.sbs-card-lift:hover {
    transform: translateY(-4px) !important;
}

/* --- Plum card --- */
.sbs-card-plum,
.elementor-column.sbs-card-plum > .elementor-widget-wrap {
    background: var(--sbs-shadow) !important;
    border: 1px solid var(--sbs-border) !important;
}

/* --- Gold border top accent --- */
.sbs-gold-top::before {
    content: '';
    display: block;
    height: 2px;
    background: linear-gradient(to right, transparent, var(--sbs-gold), transparent);
    margin-bottom: 1.5rem;
}

/* --- Ornamental divider --- */
.sbs-ornament {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    opacity: .55;
    margin: 1rem 0 !important;
}
.sbs-ornament::before,
.sbs-ornament::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--sbs-gold));
}
.sbs-ornament::after {
    background: linear-gradient(to left, transparent, var(--sbs-gold));
}
.sbs-ornament-text {
    font-family: var(--font-heading) !important;
    color: var(--sbs-gold) !important;
    font-size: .65rem !important;
    letter-spacing: .35em !important;
}

/* --- Gold horizontal rule --- */
.sbs-gold-rule {
    width: 60px;
    height: 1px;
    background: var(--sbs-gold);
    opacity: .5;
    margin: 1.2rem auto;
}

/* --- Sections with atmospheric glow --- */
.sbs-glow-plum {
    background: linear-gradient(to bottom, transparent, rgba(46,31,68,.25), transparent) !important;
}
.sbs-glow-gold {
    background: linear-gradient(to bottom, transparent, rgba(201,146,42,.06), transparent) !important;
}
.sbs-bg-void     { background: var(--sbs-void)   !important; }
.sbs-bg-abyss    { background: var(--sbs-abyss)  !important; }
.sbs-bg-shadow   { background: var(--sbs-shadow) !important; }
.sbs-bg-dusk     { background: var(--sbs-dusk)   !important; }

/* --- Moon phase strip decoration --- */
.sbs-moon-phases {
    display: flex !important;
    gap: 1rem !important;
    justify-content: center !important;
    align-items: center !important;
    opacity: .35;
}
.sbs-moon-phases span {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid var(--sbs-gold);
}

/* ── 8. BLOG / POST COMPONENTS ─────────────────────────────────── */

.sbs-post-card {
    background: var(--sbs-abyss);
    border: 1px solid var(--sbs-border);
    overflow: hidden;
    transition: border-color .3s, transform .3s;
}
.sbs-post-card:hover {
    border-color: var(--sbs-border-mid);
    transform: translateY(-3px);
}
.sbs-post-card img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    transition: transform .6s var(--ease);
}
.sbs-post-card:hover img { transform: scale(1.04); }
.sbs-post-card-body { padding: 1.5rem; }
.sbs-post-meta {
    font-family: var(--font-ui);
    font-size: .6rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--sbs-gold);
    opacity: .7;
    margin-bottom: .5rem;
    display: block;
}

/* ── Standard WordPress post content (non-Elementor pages) ── */
.entry-content { color: var(--sbs-text); font-family: var(--font-body); line-height: 1.85; }
.entry-content h1,.entry-content h2,.entry-content h3 { color: var(--sbs-parchment); font-family: var(--font-heading); margin-top: 2.5rem; margin-bottom: 1rem; }
.entry-content p { margin-bottom: 1.4rem; }
.entry-content a { color: var(--sbs-gold); border-bottom: 1px solid transparent; transition: border-color .25s; }
.entry-content a:hover { border-color: var(--sbs-gold); }
.entry-content blockquote { border-left: 2px solid var(--sbs-gold); padding: 1rem 1.5rem; margin: 1.5rem 0; background: var(--sbs-shadow); font-style: italic; color: rgba(212,200,232,.8); }
.entry-content img { border: 1px solid var(--sbs-border); }
.entry-content hr { border: none; border-top: 1px solid var(--sbs-border); margin: 2.5rem 0; }

/* ── 9. ANIMATION UTILITIES ────────────────────────────────────── */

/* Reveal on scroll — add class, JS adds .sbs-visible */
.sbs-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.sbs-reveal.sbs-visible {
    opacity: 1;
    transform: translateY(0);
}
.sbs-reveal-delay-1 { transition-delay: .1s !important; }
.sbs-reveal-delay-2 { transition-delay: .2s !important; }
.sbs-reveal-delay-3 { transition-delay: .3s !important; }
.sbs-reveal-delay-4 { transition-delay: .4s !important; }

/* Floating / breathe animation */
.sbs-float {
    animation: sbsFloat 6s ease-in-out infinite;
}
@keyframes sbsFloat {
    0%,100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}

/* Slow rotation (pentagram, orbits) */
.sbs-spin-slow { animation: sbsSpin 30s linear infinite; }
@keyframes sbsSpin { to { transform: rotate(360deg); } }

/* Gold shimmer on text */
.sbs-shimmer {
    background: linear-gradient(90deg, var(--sbs-gold) 0%, var(--sbs-gold-light) 50%, var(--sbs-gold) 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: sbsShimmer 3s linear infinite;
}
@keyframes sbsShimmer { to { background-position: 200% center; } }

/* Page fade in */
.elementor-page { animation: sbsFadeIn .5s ease; }
@keyframes sbsFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ── 10. UTILITY CLASSES ────────────────────────────────────────── */

/* Text colours */
.sbs-text-gold     { color: var(--sbs-gold)      !important; }
.sbs-text-gold2    { color: var(--sbs-gold-light) !important; }
.sbs-text-parchment{ color: var(--sbs-parchment)  !important; }
.sbs-text-mist     { color: var(--sbs-mist)       !important; }
.sbs-text-muted    { color: var(--sbs-text-dim)   !important; }

/* Text align */
.sbs-text-center { text-align: center !important; }
.sbs-text-left   { text-align: left   !important; }

/* Borders */
.sbs-border-top    { border-top:    1px solid var(--sbs-border) !important; }
.sbs-border-bottom { border-bottom: 1px solid var(--sbs-border) !important; }
.sbs-border-gold   { border:        1px solid var(--sbs-border-mid) !important; }

/* Full bleed image */
.sbs-img-cover img { width: 100% !important; height: 100% !important; object-fit: cover !important; }

/* ── BUTTON VARIANTS ───────────────────────────────────────────── */

/* Primary gold button */
.sbs-btn-gold .elementor-button {
    background: var(--sbs-gold) !important;
    color: var(--sbs-void) !important;
    border: 1px solid var(--sbs-gold) !important;
    font-family: var(--font-ui) !important;
    font-size: .7rem !important;
    letter-spacing: .25em !important;
    text-transform: uppercase !important;
    border-radius: 0 !important;
    padding: 1rem 2.8rem !important;
    transition: all .3s !important;
}
.sbs-btn-gold .elementor-button:hover {
    background: var(--sbs-gold-light) !important;
    box-shadow: 0 8px 30px var(--sbs-gold-glow) !important;
    transform: translateY(-2px) !important;
}

/* Ghost / outline button */
.sbs-btn-ghost .elementor-button {
    background: transparent !important;
    color: var(--sbs-gold) !important;
    border: 1px solid var(--sbs-border-mid) !important;
    font-family: var(--font-ui) !important;
    font-size: .7rem !important;
    letter-spacing: .25em !important;
    text-transform: uppercase !important;
    border-radius: 0 !important;
    padding: .9rem 2.5rem !important;
    transition: all .3s !important;
}
.sbs-btn-ghost .elementor-button:hover {
    background: rgba(201,146,42,.08) !important;
    border-color: var(--sbs-gold) !important;
    color: var(--sbs-gold-light) !important;
}

/* Dark / plum button */
.sbs-btn-dark .elementor-button {
    background: var(--sbs-dusk) !important;
    color: var(--sbs-parchment) !important;
    border: 1px solid var(--sbs-border) !important;
    font-family: var(--font-ui) !important;
    font-size: .7rem !important;
    letter-spacing: .22em !important;
    text-transform: uppercase !important;
    border-radius: 0 !important;
    padding: .9rem 2.2rem !important;
    transition: all .3s !important;
}
.sbs-btn-dark .elementor-button:hover {
    border-color: var(--sbs-border-mid) !important;
    color: var(--sbs-gold) !important;
}

/* ── PERKS STRIP (replicating current site section) ────────────── */
.sbs-perks-strip {
    background: var(--sbs-shadow) !important;
    border-top:    1px solid var(--sbs-border) !important;
    border-bottom: 1px solid var(--sbs-border) !important;
    padding: 2rem 0 !important;
}
.sbs-perk-item { text-align: center; }
.sbs-perk-item .elementor-icon { margin-bottom: .8rem !important; }
.sbs-perk-item .elementor-icon i { color: var(--sbs-gold) !important; font-size: 1.5rem !important; }
.sbs-perk-title {
    font-family: var(--font-ui) !important;
    font-size: .68rem !important;
    letter-spacing: .2em !important;
    text-transform: uppercase !important;
    color: var(--sbs-parchment) !important;
    margin-bottom: .3rem !important;
    display: block;
}
.sbs-perk-desc {
    font-family: var(--font-body) !important;
    font-size: .85rem !important;
    color: var(--sbs-text-dim) !important;
}

/* ── NEWSLETTER (current site has a signup section) ────────────── */
.sbs-newsletter {
    background: var(--sbs-plum) !important;
    border: 1px solid var(--sbs-border) !important;
    padding: 4rem !important;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.sbs-newsletter::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(201,146,42,.08) 0%, transparent 70%);
    pointer-events: none;
}

/* ── FOOTER ────────────────────────────────────────────────────── */
.site-footer,
footer.elementor-location-footer {
    background: var(--sbs-void) !important;
    border-top: 1px solid var(--sbs-border) !important;
    color: var(--sbs-text-dim) !important;
}
.site-footer a { color: var(--sbs-text-dim) !important; transition: color .25s !important; }
.site-footer a:hover { color: var(--sbs-gold) !important; }
.site-footer .elementor-heading-title { color: var(--sbs-parchment) !important; font-size: .78rem !important; letter-spacing: .22em !important; text-transform: uppercase !important; margin-bottom: 1.2rem !important; }

/* ── ACCESSIBILITY ─────────────────────────────────────────────── */
:focus-visible { outline: 2px solid var(--sbs-gold) !important; outline-offset: 3px !important; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

/* ── RESPONSIVE ────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    :root { --section-pad: 4rem; }
}
@media (max-width: 768px) {
    :root { --section-pad: 3rem; --card-pad: 1.5rem; }
    .sbs-newsletter { padding: 2.5rem 1.5rem !important; }
    body.sbs-mystical { font-size: 16px; }
}
@media (max-width: 480px) {
    body.sbs-mystical { font-size: 15px; }
}