/* ═══════════════════════════════════════════════════════════════════
   SELECTION PRADA NOIR · Theme v11.1
   Gold · Platinum · Diamond Black
   Cormorant Garamond + Montserrat
═══════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Montserrat:wght@200;300;400;500&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── CSS variables (defaults, overridden by plugin inline CSS) ── */
:root {
  --sp-bg:        #050505;
  --sp-panel:     #0C0B09;
  --sp-text:      #EDE0C4;
  --sp-muted:     #A09070;
  --sp-gold:      #C9A84C;
  --sp-gold2:     #E8C96A;
  --sp-platinum:  #D0D0D0;
  --sp-border:    #1E1C18;
  --sp-nav-bg:    #020202;
  --sp-nav-text:  #C9A84C;
  --sp-nav-hover: #F0D070;
  --sp-nav-font:  13px;
  --sp-nav-h:     80px;
  --sp-serif:     'Cormorant Garamond', Georgia, serif;
  --sp-sans:      'Montserrat', 'Helvetica Neue', sans-serif;
  --sp-ease:      cubic-bezier(0.22, 0.68, 0, 1.2);
  --sp-silk:      cubic-bezier(0.4, 0, 0.2, 1);
  --sp-hero-pt:   24px;
  --sp-hero-pb:   80px;
  --sp-hero-bg:   #050505;
  --sp-hero-cw:   50%;
  --sp-hero-iw:   50%;
  --sp-btn-bg:    #C9A84C;
  --sp-btn-text:  #050505;
  --sp-btn-hover: #E8C96A;
  --sp-btn-size:  13px;
  --sp-btn-radius:999px;
  --sp-btn-ghost-text:   #EDE0C4;
  --sp-btn-ghost-border: rgba(201,168,76,0.4);
  --sp-btn-ghost-hover:  rgba(201,168,76,0.1);
  --sp-img-w:        480px;
  --sp-img-h:        680px;
  --sp-img-scale:    100;
  --sp-img-sx:       0px;
  --sp-img-sy:       0px;
  --sp-img-fit:      cover;
  --sp-img-pos:      center top;
  --sp-hero-col-l:   52%;
  --sp-hero-col-r:   48%;
  --sp-hero-col-gap: 0px;
  --sp-feat-icon: #C9A84C;
  --sp-feat-title:#EDE0C4;
  --sp-feat-text: #A09070;
  --sp-feat-bg:   #0C0B09;
  --sp-feat-border: rgba(201,168,76,0.18);
  --sp-card-min:  280px;
  --sp-card-gap:  28px;
  --sp-card-photo-h: 380px;
  --sp-card-bg:   #0C0B09;
  --sp-card-name-color: #EDE0C4;
  --sp-card-meta-color: #C9A84C;
  --sp-card-bio-color:  #A09070;
  --sp-card-name-size:  22px;
  --sp-card-radius:     0px;
  --sp-footer-bg:  #020202;
  --sp-footer-text:#606060;
  --sp-footer-gold:#C9A84C;
  --sp-home-logo-top:    18px;
  --sp-home-logo-bottom: 28px;
  --sp-logo-home-w: 360px;
  --sp-logo-nav-w:  220px;
}

/* ── Base ─────────────────────────────────────────────────── */
body.spn-body {
  background: var(--sp-bg);
  color: var(--sp-text);
  font-family: var(--sp-sans);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }

/* ═══════════════════════════════════════════════════════════
   HEADER / NAV
═══════════════════════════════════════════════════════════ */
.spn-header {
  position: sticky; top: 0; z-index: 9999;
  height: var(--sp-nav-h);
  padding: 0 clamp(20px, 4vw, 52px);
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(2,2,2,0.94);
  border-bottom: 1px solid rgba(201,168,76,0.16);
  backdrop-filter: blur(20px);
  transition: height 0.3s var(--sp-silk), background 0.3s;
}
.spn-header.is-scrolled {
  height: calc(var(--sp-nav-h) - 16px);
  background: rgba(2,2,2,0.98);
}

/* Brand */
.spn-brand { display: flex; align-items: center; gap: 10px; }
.spn-brand-mark {
  color: var(--sp-gold);
  font-size: 14px;
  transition: transform 0.5s var(--sp-ease);
}
.spn-brand:hover .spn-brand-mark { transform: rotate(45deg); }
.spn-brand-name {
  font-family: var(--sp-serif);
  font-size: 22px; font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--sp-gold);
  white-space: nowrap;
}
.spn-logo-img {
  height: calc(var(--sp-nav-h) - 26px);
  width: auto; object-fit: contain;
}

/* Nav */
.spn-nav { display: flex; align-items: center; gap: 26px; }
.spn-nav-list { list-style: none; display: flex; gap: 22px; }
.spn-nav-list a, .spn-nav-link {
  font-family: var(--sp-sans);
  font-size: var(--sp-nav-font);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sp-nav-text); opacity: 0.72;
  transition: opacity 0.2s, color 0.2s;
}
.spn-nav-list a:hover, .spn-nav-link:hover { opacity: 1; color: var(--sp-nav-hover); }
.spn-nav-btn {
  font-family: var(--sp-sans);
  font-size: 9px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--sp-gold);
  border: 1px solid rgba(201,168,76,0.4);
  padding: 9px 20px;
  transition: all 0.25s;
  white-space: nowrap;
}
.spn-nav-btn:hover { background: var(--sp-gold); color: #050505; border-color: var(--sp-gold); }

/* Language */
.spn-lang {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--sp-sans); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(201,168,76,0.4);
}
.spn-lang a { transition: color 0.2s; }
.spn-lang a.is-on, .spn-lang a:hover { color: var(--sp-gold); }

/* Hamburger */
.spn-hamburger {
  display: none;
  flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 6px;
}
.spn-hamburger span {
  display: block; width: 22px; height: 1px;
  background: var(--sp-gold);
  transition: all 0.3s;
}
.spn-hamburger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.spn-hamburger.is-open span:nth-child(2) { opacity: 0; }
.spn-hamburger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ═══════════════════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════════════════ */
.spn-hero {
  min-height: 100svh;
  padding: var(--sp-hero-pt) clamp(20px,5vw,80px) var(--sp-hero-pb);
  background: var(--sp-hero-bg);
  display: grid;
  grid-template-columns: var(--sp-hero-col-l, 52%) var(--sp-hero-col-r, 48%);
  column-gap: var(--sp-hero-col-gap, 0px);
  align-items: flex-start;
  position: relative;
  overflow: hidden;
}

/* Ambient gold glow */
.spn-hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 55% 45% at 75% 42%, rgba(201,168,76,0.055) 0%, transparent 68%),
    radial-gradient(ellipse 35% 55% at 18% 58%, rgba(201,168,76,0.028) 0%, transparent 62%);
  pointer-events: none; z-index: 0;
}

/* Gold particles */
.spn-particles { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.spn-pt {
  position: absolute;
  background: var(--sp-gold);
  border-radius: 50%;
  opacity: 0;
  animation: spn-float var(--dur, 7s) var(--dl, 0s) infinite ease-in-out;
}
@keyframes spn-float {
  0%,100% { opacity:0; transform: translateY(0) scale(0.4); }
  50%      { opacity: var(--op,0.4); transform: translateY(-44px) scale(1); }
}
/* 22 particle positions */
.spn-pt-0  {left:7%;  top:62%; width:3px;height:3px;--dur:7s;  --dl:0s;   --op:0.38}
.spn-pt-1  {left:13%; top:28%; width:2px;height:2px;--dur:9s;  --dl:1.2s; --op:0.28}
.spn-pt-2  {left:21%; top:74%; width:3px;height:3px;--dur:6s;  --dl:0.5s; --op:0.32}
.spn-pt-3  {left:34%; top:18%; width:2px;height:2px;--dur:8.5s;--dl:2.1s; --op:0.22}
.spn-pt-4  {left:44%; top:84%; width:4px;height:4px;--dur:7s;  --dl:0.8s; --op:0.38}
.spn-pt-5  {left:54%; top:14%; width:2px;height:2px;--dur:10s; --dl:1.5s; --op:0.28}
.spn-pt-6  {left:61%; top:72%; width:3px;height:3px;--dur:6.5s;--dl:0.3s; --op:0.42}
.spn-pt-7  {left:71%; top:38%; width:2px;height:2px;--dur:8s;  --dl:2.5s; --op:0.28}
.spn-pt-8  {left:79%; top:82%; width:3px;height:3px;--dur:7.5s;--dl:1s;   --op:0.38}
.spn-pt-9  {left:88%; top:22%; width:2px;height:2px;--dur:9s;  --dl:0.7s; --op:0.24}
.spn-pt-10 {left:4%;  top:44%; width:3px;height:3px;--dur:6s;  --dl:3s;   --op:0.32}
.spn-pt-11 {left:29%; top:54%; width:2px;height:2px;--dur:8.5s;--dl:1.8s; --op:0.2}
.spn-pt-12 {left:50%; top:48%; width:4px;height:4px;--dur:7s;  --dl:0.4s; --op:0.28}
.spn-pt-13 {left:65%; top:90%; width:2px;height:2px;--dur:9.5s;--dl:2.2s; --op:0.22}
.spn-pt-14 {left:74%; top:9%;  width:3px;height:3px;--dur:6.5s;--dl:1.3s; --op:0.38}
.spn-pt-15 {left:41%; top:34%; width:2px;height:2px;--dur:7.5s;--dl:0.9s; --op:0.28}
.spn-pt-16 {left:17%; top:88%; width:2px;height:2px;--dur:8s;  --dl:3.5s; --op:0.22}
.spn-pt-17 {left:92%; top:54%; width:3px;height:3px;--dur:6s;  --dl:1.6s; --op:0.32}
.spn-pt-18 {left:38%; top:68%; width:2px;height:2px;--dur:9s;  --dl:0.6s; --op:0.2}
.spn-pt-19 {left:58%; top:32%; width:3px;height:3px;--dur:7.5s;--dl:2.8s; --op:0.3}
.spn-pt-20 {left:82%; top:60%; width:2px;height:2px;--dur:8s;  --dl:1.4s; --op:0.24}
.spn-pt-21 {left:96%; top:40%; width:3px;height:3px;--dur:6.5s;--dl:0.2s; --op:0.32}

/* ── Copy side ───────────────────────────────────────────── */
.spn-hero-copy {
  position: relative; z-index: 2;
  padding-left: clamp(16px, 3vw, 72px);
  transform: translate(var(--sp-hero-cx, 0px), var(--sp-hero-cy, 0px));
  animation: spn-fade-up 0.9s 0.1s both;
}

@keyframes spn-fade-up {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

.spn-home-logo {
  margin-top: 0;
  margin-bottom: 20px;
}
.spn-home-logo img {
  width: var(--sp-logo-home-w);
  max-width: min(85vw, 580px);
  height: auto;
  display: block;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.65));
}
/* Text logo fallback — shown when no logo image is uploaded */
.spn-logo-text {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--sp-serif);
  font-size: clamp(32px, 5vw, 62px);
  font-weight: 300;
  letter-spacing: 0.08em;
  color: var(--sp-gold);
  line-height: 1;
}
.spn-logo-mark {
  font-size: 0.5em;
  opacity: 0.7;
}

.spn-eyebrow {
  display: flex; align-items: center; gap: 11px;
  font-family: var(--sp-sans);
  font-size: 9px; font-weight: 500;
  letter-spacing: 0.38em; text-transform: uppercase;
  color: var(--sp-gold);
  margin-bottom: 18px;
}
.spn-eyebrow-gem { font-size: 9px; opacity: 0.7; }

.spn-hero-copy h1 {
  font-family: var(--sp-serif);
  font-size: clamp(40px, 6.5vw, 100px);
  font-weight: 300;
  line-height: 0.90; letter-spacing: -0.02em;
  color: var(--sp-hero-title-color, #F0D070);
  margin-bottom: 22px;
  max-width: 660px;
}

.spn-hero-lead {
  font-family: var(--sp-sans);
  font-size: var(--sp-hero-text-size, 18px);
  font-weight: 300; line-height: 1.78;
  color: var(--sp-hero-sub-color, #EDE0C4);
  max-width: 520px; margin-bottom: 38px;
  opacity: 0.82;
  letter-spacing: 0.02em;
}

/* Buttons */
.spn-hero-btns { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 42px; }

.spn-btn-gold {
  display: inline-flex; align-items: center; gap: 9px;
  background: linear-gradient(135deg, var(--sp-btn-bg), var(--sp-btn-hover), var(--sp-btn-bg));
  background-size: 200% 100%;
  color: var(--sp-btn-text);
  border: 1px solid var(--sp-btn-bg);
  padding: 15px 30px;
  font-family: var(--sp-sans);
  font-size: var(--sp-btn-size); font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  border-radius: var(--sp-btn-radius);
  transition: background-position 0.5s, box-shadow 0.3s, transform 0.2s;
  position: relative; overflow: hidden;
}
.spn-btn-icon { font-size: 9px; transition: transform 0.4s var(--sp-ease); }
.spn-btn-gold:hover {
  background-position: 100% 0;
  box-shadow: 0 8px 30px rgba(201,168,76,0.38), 0 2px 8px rgba(0,0,0,0.4);
  transform: translateY(-2px);
}
.spn-btn-gold:hover .spn-btn-icon { transform: rotate(45deg); }

.spn-btn-ghost {
  display: inline-flex; align-items: center;
  color: var(--sp-btn-ghost-text);
  border: 1px solid var(--sp-btn-ghost-border);
  padding: 14px 28px;
  font-family: var(--sp-sans);
  font-size: var(--sp-btn-size); font-weight: 300;
  letter-spacing: 0.16em; text-transform: uppercase;
  border-radius: var(--sp-btn-radius);
  transition: all 0.3s;
}
.spn-btn-ghost:hover {
  background: var(--sp-btn-ghost-hover);
  border-color: rgba(201,168,76,0.7);
  color: var(--sp-gold);
}

/* Diamond rule */
.spn-rule {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 28px;
}
.spn-rule span:first-child, .spn-rule span:last-child {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,168,76,0.32));
}
.spn-rule span:last-child {
  background: linear-gradient(270deg, transparent, rgba(201,168,76,0.32));
}
.spn-rule-gem { font-size: 9px; color: rgba(201,168,76,0.5); flex-shrink: 0; }

/* Trust row */
.spn-trust-row { display: flex; gap: 22px; flex-wrap: wrap; }
.spn-trust-item {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--sp-sans);
  font-size: 9.5px; letter-spacing: 0.11em; text-transform: uppercase;
  color: rgba(237,224,196,0.38);
}
.spn-trust-gem { color: var(--sp-gold); opacity: 0.58; font-size: 10px; }

/* ── Scene side (image) ──────────────────────────────────── */
.spn-hero-scene {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0;
  overflow: hidden;       /* stop image escaping its column */
  min-width: 0;           /* allow grid column to shrink */
  animation: spn-fade-in 1.1s 0.25s both;
}
@keyframes spn-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.spn-scene-inner {
  position: relative;
  width: var(--sp-img-w, 480px);
  max-width: 100%;       /* never wider than column */
  min-width: 0;
  flex-shrink: 1;
  overflow: hidden;
  transform:
    translate(var(--sp-img-sx, 0px), var(--sp-img-sy, 0px))
    scale(calc(var(--sp-img-scale, 100) / 100));
  transform-origin: top left;
}

/* Image — sized by CSS vars from admin settings */
.spn-scene-img {
  display: block;
  width: 100%;
  height: var(--sp-img-h, 680px);
  object-fit: var(--sp-img-fit, cover);
  object-position: var(--sp-img-pos, center top);
}

/* Placeholder when no image uploaded */
.spn-scene-placeholder {
  width: 100%;
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed rgba(201,168,76,0.25);
  background: rgba(201,168,76,0.03);
}
.spn-placeholder-inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.spn-placeholder-gem {
  font-size: 28px;
  color: rgba(201,168,76,0.3);
}
.spn-placeholder-inner p {
  font-family: var(--sp-sans);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: rgba(201,168,76,0.35);
  line-height: 1.7;
}
.spn-placeholder-inner strong {
  color: rgba(201,168,76,0.55);
  font-weight: 400;
}

/* ═══════════════════════════════════════════════════════════
   FEATURE PILLARS
═══════════════════════════════════════════════════════════ */
.spn-pillars {
  padding: 72px clamp(20px, 5vw, 80px);
  background: var(--sp-feat-bg);
  border-top: 1px solid rgba(201,168,76,0.1);
  border-bottom: 1px solid rgba(201,168,76,0.1);
  position: relative;
}
.spn-pillars::before {
  content: '';
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 220px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--sp-gold), transparent);
}

.spn-pillars-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  max-width: 1440px; margin: 0 auto;
}

.spn-pillar {
  padding: 36px 28px 32px;
  background: var(--sp-feat-bg);
  border: 1px solid var(--sp-feat-border);
  text-align: center;
  position: relative;
  transition: transform 0.32s var(--sp-silk), border-color 0.32s;
  overflow: hidden;
}
.spn-pillar::before {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 0; background: var(--sp-gold);
  transition: height 0.4s var(--sp-silk);
}
.spn-pillar:hover { transform: translateY(-5px); border-color: rgba(201,168,76,0.36); }
.spn-pillar:hover::before { height: 2px; }
.spn-pillar-gem { font-size: 18px; color: var(--sp-feat-icon); margin-bottom: 18px; display: block; transition: transform 0.4s var(--sp-ease); }
.spn-pillar:hover .spn-pillar-gem { transform: scale(1.18); }
.spn-pillar h3 {
  font-family: var(--sp-serif);
  font-size: 1.2rem; font-weight: 400;
  color: var(--sp-feat-title);
  margin-bottom: 10px; letter-spacing: 0.02em;
}
.spn-pillar p {
  font-family: var(--sp-sans);
  font-size: 12px; font-weight: 300; line-height: 1.75;
  color: var(--sp-feat-text); letter-spacing: 0.04em;
}
.spn-pillar-line {
  width: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--sp-gold), transparent);
  margin: 18px auto 0;
  transition: width 0.5s var(--sp-silk);
}
.spn-pillar:hover .spn-pillar-line { width: 60px; }

/* ═══════════════════════════════════════════════════════════
   MEMBER SHOWCASE
═══════════════════════════════════════════════════════════ */
.spn-showcase {
  padding: 80px clamp(20px, 5vw, 80px) 100px;
  background: var(--sp-bg);
}

.spn-section-hd {
  text-align: center; margin-bottom: 56px;
}
.spn-section-eyebrow {
  display: block;
  font-family: var(--sp-sans);
  font-size: 9px; letter-spacing: 0.38em; text-transform: uppercase;
  color: var(--sp-gold); opacity: 0.72; margin-bottom: 14px;
}
.spn-section-hd h2 {
  font-family: var(--sp-serif);
  font-size: clamp(30px, 4vw, 56px);
  font-weight: 300; color: var(--sp-text);
  margin-bottom: 12px; line-height: 1.04;
}
.spn-section-hd p {
  font-family: var(--sp-sans);
  font-size: 14px; font-weight: 300; line-height: 1.75;
  color: var(--sp-muted); max-width: 480px; margin: 0 auto;
  letter-spacing: 0.04em;
}

.spn-showcase-footer { text-align: center; margin-top: 52px; }

/* ═══════════════════════════════════════════════════════════
   INNER PAGES
═══════════════════════════════════════════════════════════ */

.spn-page.is-wide { max-width: none; width: 100%; padding-left: 28px; padding-right: 28px; }
.spn-entry {
  background: rgba(12,11,9,0.55);
  border: 1px solid rgba(201,168,76,0.12);
  border-top: 2px solid rgba(201,168,76,0.3);
  padding: 38px 42px;
}
.spn-page.is-wide .spn-entry { background: transparent; border: 0; padding: 0; }
.spn-entry h1 {
  font-family: var(--sp-serif);
  font-size: clamp(28px, 4vw, 56px); font-weight: 300;
  color: var(--sp-text); margin-bottom: 18px;
}
.spn-entry p { font-size: 16px; line-height: 1.8; color: var(--sp-muted); }

/* ═══════════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════════ */
.spn-footer {
  background: var(--sp-footer-bg);
  border-top: 1px solid rgba(201,168,76,0.12);
  padding: 44px 48px;
  position: relative;
}
.spn-footer::before {
  content: '';
  position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
  width: 180px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--sp-footer-gold), transparent);
}
.spn-footer-inner {
  max-width: 1440px; margin: 0 auto; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.spn-footer-brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--sp-serif);
  font-size: 18px; font-weight: 300;
  color: var(--sp-footer-gold); letter-spacing: 0.06em;
}
.spn-footer-mark { font-size: 11px; }
.spn-footer-copy {
  font-family: var(--sp-sans);
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sp-footer-text);
}
.spn-footer-diamonds {
  font-size: 9px; color: rgba(201,168,76,0.2); letter-spacing: 0.32em;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════ */

/*
 * TABLET & MOBILE  (≤ 1100px)
 * Override the CSS vars that control the hero layout.
 * Because the plugin outputs these into :root and the media
 * query overrides :root vars, NO inline styles can interfere.
 */
@media (max-width: 1100px) {

  /* Stack hero to single column */
  .spn-hero {
    grid-template-columns: 1fr !important; /* override CSS var-driven grid */
    min-height: auto;
    padding-bottom: 0;
    align-items: start;
  }

  /* Text column: comfortable side padding */
  .spn-hero-copy {
    padding-left: clamp(16px, 5vw, 40px);
    padding-right: clamp(16px, 5vw, 40px);
    padding-bottom: 28px;
  }

  /* Image column: full width, after text */
  .spn-hero-scene {
    width: 100%;
    justify-content: center;
  }

  /* Image container: full width, reset desktop size/transform */
  .spn-scene-inner {
    width: 100% !important;    /* override CSS var --sp-img-w */
    max-width: 100%;
    transform: none !important; /* cancel shift & scale */
  }

  /* Image itself: full width, proportional height */
  .spn-scene-img {
    width: 100% !important;
    height: 65vw !important;   /* proportional to viewport */
    max-height: 540px !important;
    object-fit: cover !important;
    object-position: center top !important;
  }

  .spn-pillars-grid { grid-template-columns: repeat(2, 1fr); }
}

/* MOBILE NAV (≤ 900px) */
@media (max-width: 900px) {
  .spn-nav {
    display: none;
    position: fixed; inset: 0; top: var(--sp-nav-h, 80px);
    flex-direction: column; justify-content: flex-start;
    padding: 32px 24px; gap: 20px;
    background: rgba(2,2,2,0.98); z-index: 9998;
  }
  .spn-nav.is-open { display: flex; }
  .spn-hamburger   { display: flex; }
  .spn-hero-copy h1 { font-size: clamp(28px, 8vw, 52px); }
  .spn-pillars     { padding: 40px 16px; }
  .spn-showcase    { padding: 40px 16px 60px; }
  .spn-footer      { padding: 28px 20px; }
}

/* SMALL PHONES (≤ 600px) */
@media (max-width: 600px) {
  .spn-hero-btns   { flex-direction: column; align-items: flex-start; }
  .spn-trust-row   { flex-direction: column; gap: 10px; }
  .spn-pillars-grid { grid-template-columns: 1fr; }
  .spn-scene-img   { height: 80vw !important; max-height: 420px !important; }
}

/* ═══════════════════════════════════════════════════════════
   SELECTION PRADA CASINO STRIPE FIX v11.21
   Safer version:
   - Casino page only.
   - Removes theme page wrapper dark panel/spacing.
   - Does NOT hide theme nav.
   - Does NOT hide casino navigation links.
   - Forces Back to Lobby / Back to Slot Machines links visible.
═══════════════════════════════════════════════════════════ */

/* Casino shortcode page: remove only the theme's dark page wrapper/panel */
body:has(.svgcp-app) .spn-main,
body:has(.svgcp-app) .spn-page,
body:has(.svgcp-app) .spn-entry {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  margin-top: 0 !important;
}

/* Keep the casino full width, but do not hide anything */
body:has(.svgcp-app) .spn-page,
body:has(.svgcp-app) .spn-entry {
  width: 100% !important;
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Reduce top wrapper spacing only. Keep normal bottom spacing untouched. */
body:has(.svgcp-app) .spn-entry {
  padding-top: 0 !important;
}

/* IMPORTANT: keep the real Selection Prada header and menu visible */
body:has(.svgcp-app) .spn-header,
body:has(.svgcp-app) .spn-nav,
body:has(.svgcp-app) .spn-nav-list,
body:has(.svgcp-app) .spn-nav-link,
body:has(.svgcp-app) .spn-nav-btn,
body:has(.svgcp-app) .spn-hamburger {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Do not force-hide the closed mobile nav in this version.
   The theme's original mobile behavior stays in control. */

/* Restore/keep casino navigation links visible */
body:has(.svgcp-app) .svgcp-mobile-slots-back-lobby,
body:has(.svgcp-app) .svgcp-slot-lobby-back,
body:has(.svgcp-app) .svgcp-mobile-back-to-lobby,
body:has(.svgcp-app) .svgcp-back-to-lobby,
body:has(.svgcp-app) .svgcp-anchor-slot-back,
body:has(.svgcp-app) a[href*="#star-vegas-lobby"],
body:has(.svgcp-app) a[href*="svgcp_page=slots"],
body:has(.svgcp-app) a[href*="svgcp_slot"] {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  overflow: visible !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 10000 !important;
}

/* Keep slot grid visible */
body:has(.svgcp-app) .svgcp-slot-grid {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Keep single slot game sections available */
body:has(.svgcp-app) .svgcp-anchor-slot-section {
  max-height: none !important;
}

/* Casino app starts cleanly below theme header */
body:has(.svgcp-app) .svgcp-app,
body:has(.svgcp-app) #star-vegas-lobby,
body:has(.svgcp-app) #star-vegas-slots {
  margin-top: 0 !important;
  position: relative !important;
  z-index: 1 !important;
}

/* END SELECTION PRADA CASINO STRIPE FIX v11.21 ═══════════ */