/* ═══════════════════════════════════════════════════════════
   ROYAL DESIGN STUDIO — CASUAL SHOP STYLESHEET
   Colors: Royal Blue #1a3fe0 · Purple #7b2fff · Lavender #c4aaff · Gold #c9a84c
   ═══════════════════════════════════════════════════════════ */

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

:root {
  --bg:           #0a0614;
  --surface1:     #0f0a20;
  --surface2:     #160e2e;
  --surface3:     #1e1440;
  --border:       #2a1f52;
  --text:         #f0eeff;
  --text-muted:   #9988cc;
  --gold:         #c9a84c;
  --gold-dim:     #a07c30;
  --gold-glow:    rgba(201,168,76,.25);
  --purple:       #7b2fff;
  --purple-dim:   #5a1fcc;
  --purple-glow:  rgba(123,47,255,.25);
  --blue:         #1a3fe0;
  --blue-dim:     #1230b0;
  --blue-glow:    rgba(26,63,224,.25);
  --lavender:     #c4aaff;
  --lav-dim:      #a078ff;
  --accent:       #7b2fff;
  --green:        #2dce6c;
  --red:          #ff4757;
  --radius:       14px;
  --radius-sm:    8px;
  --shadow:       0 4px 30px rgba(0,0,0,.55);
  --sidebar-w:    250px;
  --mobile-bar-h: 56px;
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  display: flex;
}

img { max-width: 100%; display: block; }
button { cursor: pointer; font-family: inherit; }
textarea, input, select { font-family: inherit; font-size: inherit; }

/* ══════════════════════════════════════════════
   SIDEBAR
   ══════════════════════════════════════════════ */
.shop-sidebar {
  position: fixed;
  top: 0; left: 0;
  width: var(--sidebar-w);
  height: 100vh;
  background: linear-gradient(180deg, #0f0a22 0%, #100c26 100%);
  border-right: 1px solid rgba(123,47,255,.25);
  z-index: 300;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sidebar-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1rem .85rem 1rem;
  overflow-y: auto;
  gap: .05rem;
  scrollbar-width: none;
}
.sidebar-inner::-webkit-scrollbar { display: none; }

/* Logo */
.sidebar-logo-link {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  padding: .25rem .1rem .75rem;
  border-bottom: 1px solid rgba(123,47,255,.2);
  margin-bottom: .6rem;
  flex-shrink: 0;
}
.sidebar-logo-img {
  width: 100%;
  max-width: 180px;
  height: 90px;
  object-fit: contain;
  flex-shrink: 0;
}

/* Nav */
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  margin-bottom: .6rem;
}
.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  padding: .55rem .7rem;
  background: none;
  border: none;
  border-radius: 9px;
  color: var(--text-muted);
  font-size: .82rem;
  font-weight: 500;
  text-align: left;
  transition: background .15s, color .15s;
  position: relative;
}
.sidebar-nav-item:hover { background: rgba(123,47,255,.1); color: var(--lavender); }
.sidebar-nav-item.active {
  background: linear-gradient(90deg, rgba(123,47,255,.2), rgba(26,63,224,.1));
  color: var(--lavender);
  font-weight: 700;
  border-left: 2px solid var(--purple);
}
.sidebar-nav-item svg { flex-shrink: 0; }
.sidebar-badge {
  margin-left: auto;
  background: var(--gold);
  color: #000;
  font-size: .6rem;
  font-weight: 800;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

/* Shop controls */
.sidebar-shop-controls { display: flex; flex-direction: column; gap: 0; }
.sidebar-section-label {
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
  margin-bottom: .3rem;
  margin-top: .1rem;
  opacity: .7;
}

/* Collection buttons */
.sidebar-collection-btns { display: flex; gap: .35rem; margin-bottom: .1rem; }

/* ── Base state — each button has its own resting colour hint ── */
.collection-btn {
  flex: 1;
  padding: .4rem .3rem;
  border-radius: 8px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .03em;
  transition: all .18s ease;
  position: relative;
  overflow: hidden;
}

/* ALL — full-spectrum / everything */
.collection-btn:not(.casual):not(.luxe) {
  background: rgba(255,255,255,.04);
  border: 1.5px solid rgba(255,99,184,.2);
  color: rgba(255,133,208,.65);
}
.collection-btn:not(.casual):not(.luxe):hover {
  background: linear-gradient(120deg, rgba(255,0,110,.12), rgba(139,0,255,.1), rgba(0,127,255,.1));
  border-color: rgba(255,99,184,.55);
  color: #ff85d0;
  box-shadow: 0 0 12px rgba(255,0,110,.15), 0 0 24px rgba(139,0,255,.1);
}
.collection-btn:not(.casual):not(.luxe).active {
  background: linear-gradient(120deg, rgba(255,0,110,.22) 0%, rgba(139,0,255,.2) 50%, rgba(0,127,255,.18) 100%);
  border-color: rgba(255,99,184,.75);
  color: #ff85d0;
  box-shadow: 0 0 14px rgba(255,0,110,.25), 0 0 28px rgba(139,0,255,.15), inset 0 1px 0 rgba(255,133,208,.15);
  text-shadow: 0 0 10px rgba(255,0,110,.5);
}

/* CASUAL — fuchsia / candy-pink / violet-pink energy */
.collection-btn.casual {
  background: rgba(255,255,255,.04);
  border: 1.5px solid rgba(255,0,110,.18);
  color: rgba(255,110,199,.6);
}
.collection-btn.casual:hover {
  background: linear-gradient(135deg, rgba(255,0,110,.15), rgba(212,80,160,.12));
  border-color: rgba(255,0,110,.6);
  color: #ff6ec7;
  box-shadow: 0 0 14px rgba(255,0,110,.2), 0 0 28px rgba(212,80,160,.12);
}
.collection-btn.casual.active {
  background: linear-gradient(135deg, rgba(255,0,110,.28) 0%, rgba(212,80,160,.22) 60%, rgba(139,0,255,.15) 100%);
  border-color: rgba(255,0,110,.85);
  color: #ff6ec7;
  box-shadow: 0 0 16px rgba(255,0,110,.35), 0 0 32px rgba(212,80,160,.2), inset 0 1px 0 rgba(255,110,199,.2);
  text-shadow: 0 0 10px rgba(255,0,110,.6);
}

/* LUXE — gold shimmer */
.collection-btn.luxe {
  background: rgba(255,255,255,.04);
  border: 1.5px solid rgba(201,168,76,.2);
  color: rgba(201,168,76,.6);
}
.collection-btn.luxe:hover {
  background: linear-gradient(135deg, rgba(201,168,76,.15), rgba(255,215,120,.1));
  border-color: rgba(201,168,76,.65);
  color: var(--gold);
  box-shadow: 0 0 14px rgba(201,168,76,.2), 0 0 28px rgba(255,210,100,.1);
}
.collection-btn.luxe.active {
  background: linear-gradient(135deg, rgba(201,168,76,.25) 0%, rgba(255,215,120,.18) 60%, rgba(201,140,40,.2) 100%);
  border-color: rgba(201,168,76,.9);
  color: #f0d060;
  box-shadow: 0 0 16px rgba(201,168,76,.35), 0 0 32px rgba(255,210,100,.15), inset 0 1px 0 rgba(255,225,120,.2);
  text-shadow: 0 0 10px rgba(201,168,76,.55);
}

/* Filter pills */
.sidebar-filter-pills { display: flex; flex-direction: column; gap: .15rem; }
.filter-pill {
  display: block; width: 100%; text-align: left;
  padding: .28rem .55rem;
  background: none; border: none; border-radius: 6px;
  color: var(--text-muted); font-size: .78rem; font-weight: 500;
  transition: background .12s, color .12s;
}
.filter-pill:hover { background: rgba(123,47,255,.1); color: var(--lavender); }
.filter-pill.active { background: rgba(123,47,255,.12); color: var(--lavender); font-weight: 700; }

/* Search */
.sidebar-search {
  background: var(--surface2); border: 1px solid var(--border);
  color: var(--text); border-radius: 8px; padding: .38rem .65rem;
  font-size: .8rem; outline: none; width: 100%; transition: border-color .15s;
}
.sidebar-search:focus { border-color: var(--purple); }
.sidebar-search::placeholder { color: var(--text-muted); }

/* Sort */
.sidebar-sort {
  background: var(--surface2); border: 1px solid var(--border);
  color: var(--text); border-radius: 8px; padding: .38rem .6rem;
  font-size: .78rem; outline: none; cursor: pointer; width: 100%;
}

.sidebar-spacer { flex: 1; min-height: .5rem; }

/* Cart button */
.sidebar-cart-btn {
  display: flex; align-items: center; gap: .55rem; width: 100%;
  padding: .6rem .7rem;
  background: linear-gradient(90deg, rgba(123,47,255,.15), rgba(26,63,224,.1));
  border: 1px solid rgba(123,47,255,.3);
  border-radius: 9px; color: var(--lavender);
  font-size: .82rem; font-weight: 700;
  transition: border-color .15s, background .15s;
  margin-bottom: .3rem;
}
.sidebar-cart-btn:hover { border-color: var(--purple); background: rgba(123,47,255,.22); }
.sidebar-cart-count {
  margin-left: auto;
  background: var(--gold); color: #000;
  font-size: .62rem; font-weight: 800;
  min-width: 19px; height: 19px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; padding: 0 4px;
}

/* Account + staff */
.sidebar-account-btn { color: var(--text-muted); margin-bottom: .15rem; }
.sidebar-account-btn:hover { background: rgba(123,47,255,.1); color: var(--lavender); }
.sidebar-account-btn.active { background: rgba(123,47,255,.15); color: var(--lavender); font-weight: 700; border-left: 2px solid var(--purple); }
.sidebar-staff-link {
  display: flex; align-items: center; gap: .5rem;
  color: var(--text-muted); text-decoration: none;
  font-size: .7rem; font-weight: 500; padding: .4rem .5rem;
  border-radius: 7px; transition: color .15s, background .15s;
}
.sidebar-staff-link:hover { color: var(--lavender); background: rgba(123,47,255,.08); }

/* ══════════════════════════════════════════════
   MOBILE TOP BAR
   ══════════════════════════════════════════════ */
.mobile-topbar {
  display: none;
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--mobile-bar-h);
  background: rgba(10,6,20,.96);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(123,47,255,.2);
  z-index: 310;
  align-items: center;
  padding: 0 .85rem;
  gap: .6rem;
}
.hamburger-btn { background: none; border: none; display: flex; flex-direction: column; gap: 4px; padding: .3rem; }
.hamburger-btn span { display: block; width: 21px; height: 2px; background: var(--lavender); border-radius: 2px; transition: all .2s; }
.mobile-logo-link { display: flex; align-items: center; gap: .4rem; text-decoration: none; color: inherit; flex: 1; min-width: 0; }
.mobile-logo-img { height: 38px; width: auto; object-fit: contain; }
.mobile-acct-btn, .mobile-cart-btn {
  position: relative; background: rgba(123,47,255,.12);
  border: 1px solid rgba(123,47,255,.25); color: var(--lavender);
  border-radius: 9px; padding: .4rem .55rem;
  display: flex; align-items: center; flex-shrink: 0;
  transition: background .15s;
}
.mobile-acct-btn:hover, .mobile-cart-btn:hover { background: rgba(123,47,255,.22); }
.mobile-cart-btn .cart-count {
  position: absolute; top: -5px; right: -5px;
  background: var(--gold); color: #000;
  font-size: .6rem; font-weight: 800; min-width: 16px; height: 16px;
  border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 3px;
}

.sidebar-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.7); z-index: 299; backdrop-filter: blur(2px);
}
.sidebar-overlay.open { display: block; }

/* ══════════════════════════════════════════════
   MAIN CONTENT
   ══════════════════════════════════════════════ */
.shop-main { margin-left: var(--sidebar-w); flex: 1; min-width: 0; min-height: 100vh; display: flex; flex-direction: column; }
.view { display: none; flex: 1; }
.view.active { display: block; }

/* ══════════════════════════════════════════════
   ANNOUNCEMENT STRIP
   ══════════════════════════════════════════════ */
.announce-strip {
  background: linear-gradient(90deg, var(--purple), var(--blue));
  padding: .55rem 1.5rem;
  text-align: center;
  font-size: .82rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: .02em;
  position: relative;
  overflow: hidden;
}
.announce-strip::before {
  content: '✦  ★  ✦  ★  ✦  ★  ✦';
  position: absolute; left: -20px; top: 50%; transform: translateY(-50%);
  color: rgba(255,255,255,.15); font-size: .7rem; letter-spacing: .5em;
  white-space: nowrap; animation: marquee 12s linear infinite;
}
@keyframes marquee { to { transform: translate(-50%, -50%); } }

/* ══════════════════════════════════════════════
   CASUAL HERO
   ══════════════════════════════════════════════ */
/* ── Casual hero colour tokens ── */
:root {
  --fuchsia:       #ff006e;
  --ultra-pink:    #ff6ec7;
  --fuchsia-light: #ff85d0;
  --violet:        #8b00ff;
  --violet-pink:   #d450a0;
  --candy-pink:    #ff63b8;
  --cyan-blue:     #00bcd4;
  --electric-blue: #0066ff;
  --deep-sky:      #00bfff;
  --azure:         #007fff;
  --cerulean:      #2980b9;
}

/* ── Color filter chips ── */
.sidebar-color-list {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  padding: .1rem 0;
}
.color-chip {
  display: flex;
  align-items: center;
  gap: .3rem;
  padding: .28rem .6rem;
  border-radius: 20px;
  border: 1px solid var(--border);
  font-size: .72rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
  transition: border-color .15s, background .15s, color .15s;
  white-space: nowrap;
}
.color-chip input[type=checkbox] { display: none; }
.color-chip:hover {
  border-color: var(--accent);
  color: var(--text);
}
.color-chip:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--lavender);
}

/* ══════════════════════════════════════════════
   ALL HERO — cosmic nebula collision
   ══════════════════════════════════════════════ */
.all-hero {
  position: relative;
  background:
    radial-gradient(ellipse 65% 90% at -8% 50%,  rgba(255,0,110,.26)   0%, rgba(139,0,255,.16)  45%, transparent 70%),
    radial-gradient(ellipse 65% 90% at 108% 50%,  rgba(201,168,76,.2)   0%, rgba(255,165,0,.1)   45%, transparent 70%),
    radial-gradient(ellipse 80% 40% at 50%  110%, rgba(0,102,255,.18)   0%, rgba(0,191,255,.09)  50%, transparent 75%),
    radial-gradient(ellipse 50% 30% at 50%  -10%, rgba(212,80,160,.14)  0%, transparent 60%),
    linear-gradient(160deg, #040112 0%, #060520 35%, #060212 100%);
  overflow: hidden;
  padding: 4rem 2.5rem 5.5rem;
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Nebula blobs — large diffuse, no hard edges */
.all-nebula {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(60px);
}
.an1 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(255,0,110,.3) 0%, rgba(139,0,255,.15) 50%, transparent 75%);
  top: -120px; left: -100px;
  animation: nebulaFloat1 14s ease-in-out infinite alternate;
}
.an2 {
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(201,168,76,.25) 0%, rgba(255,165,0,.1) 50%, transparent 75%);
  top: -80px; right: -100px;
  animation: nebulaFloat2 16s ease-in-out infinite alternate;
}
.an3 {
  width: 420px; height: 300px;
  background: radial-gradient(ellipse, rgba(0,102,255,.22) 0%, rgba(0,191,255,.1) 55%, transparent 80%);
  bottom: -60px; left: 20%;
  filter: blur(50px);
  animation: nebulaFloat3 12s ease-in-out infinite alternate;
}
.an4 {
  width: 380px; height: 280px;
  background: radial-gradient(ellipse, rgba(212,80,160,.2) 0%, rgba(139,0,255,.12) 55%, transparent 80%);
  top: 30%; right: 5%;
  filter: blur(55px);
  animation: nebulaFloat4 18s ease-in-out infinite alternate;
}
@keyframes nebulaFloat1 { 0%{transform:translate(0,0) scale(1)}    100%{transform:translate(30px,20px) scale(1.1)} }
@keyframes nebulaFloat2 { 0%{transform:translate(0,0) scale(1)}    100%{transform:translate(-25px,15px) scale(1.08)} }
@keyframes nebulaFloat3 { 0%{transform:translate(0,0) scale(1)}    100%{transform:translate(20px,-15px) scale(1.06)} }
@keyframes nebulaFloat4 { 0%{transform:translate(0,0) scale(1)}    100%{transform:translate(-20px,25px) scale(1.09)} }

/* Light-ray streaks — thin, crisp, diagonal */
.all-ray {
  position: absolute;
  pointer-events: none;
  border-radius: 100px;
}
.ar1 {
  width: 110%; height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,99,184,.5) 30%, rgba(201,168,76,.4) 65%, transparent 100%);
  top: 35%; left: -5%;
  transform: rotate(-6deg);
  filter: blur(1px);
  animation: rayShift1 8s ease-in-out infinite alternate;
}
.ar2 {
  width: 90%; height: 1.5px;
  background: linear-gradient(90deg, transparent 5%, rgba(0,191,255,.5) 40%, rgba(139,0,255,.4) 70%, transparent 95%);
  top: 58%; left: 5%;
  transform: rotate(4deg);
  filter: blur(1px);
  animation: rayShift2 11s ease-in-out infinite alternate;
}
.ar3 {
  width: 70%; height: 1px;
  background: linear-gradient(90deg, transparent 10%, rgba(255,0,110,.6) 45%, rgba(255,99,184,.4) 75%, transparent 95%);
  top: 20%; right: 0;
  transform: rotate(-3deg);
  filter: blur(.5px);
  animation: rayShift3 9s ease-in-out infinite alternate;
}
@keyframes rayShift1 { 0%{opacity:.6;transform:rotate(-6deg) translateY(0)}  100%{opacity:1;transform:rotate(-4deg) translateY(-6px)} }
@keyframes rayShift2 { 0%{opacity:.5;transform:rotate(4deg) translateY(0)}   100%{opacity:.9;transform:rotate(6deg) translateY(5px)} }
@keyframes rayShift3 { 0%{opacity:.7;transform:rotate(-3deg) translateY(0)}  100%{opacity:1;transform:rotate(-1deg) translateY(-4px)} }

/* Stars */
.all-hero-stars { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ahstar { position: absolute; animation: starFloat 6s ease-in-out infinite alternate; }
.ah1 { top:8%;  left:6%;   color:#ff006e; font-size:1.4rem; animation-duration:7s;  animation-delay:0s; }
.ah2 { top:5%;  left:35%;  color:#c9a84c; font-size:.9rem;  animation-duration:5s;  animation-delay:.4s; }
.ah3 { top:15%; left:58%;  color:#ff63b8; font-size:1.2rem; animation-duration:8s;  animation-delay:.9s; }
.ah4 { top:4%;  right:12%; color:#f0d060; font-size:1.6rem; animation-duration:6s;  animation-delay:.2s; }
.ah5 { top:42%; right:6%;  color:#00bfff; font-size:.9rem;  animation-duration:9s;  animation-delay:1.4s; }
.ah6 { bottom:25%; left:8%; color:#d450a0; font-size:1.3rem; animation-duration:7s;  animation-delay:.7s; }
.ah7 { bottom:15%; left:45%;color:#c9a84c; font-size:1rem;  animation-duration:5s;  animation-delay:2s; }
.ah8 { bottom:20%; right:18%;color:#ff85d0;font-size:1.5rem; animation-duration:8s;  animation-delay:.1s; }

/* Inner layout */
.all-hero-inner {
  position: relative; z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}
.all-hero-eyebrow {
  font-size: .72rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .22em;
  margin-bottom: .7rem;
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  color: rgba(255,255,255,.5);
}
.all-hero-eyebrow::before { content: '✦'; color: #ff85d0; }
.all-hero-eyebrow::after  { content: '✦'; color: #f0d060; }
.all-hero-title {
  font-family: 'Bebas Neue', 'Inter', sans-serif;
  font-size: clamp(3.5rem, 7vw, 6.5rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .03em;
  color: #fff;
  margin-bottom: 1rem;
  text-shadow: 0 0 60px rgba(255,255,255,.08);
}
.all-accent-casual {
  background: linear-gradient(90deg, #ff006e, #ff63b8, #d450a0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 2px 14px rgba(255,0,110,.4));
}
.all-accent-luxe {
  background: linear-gradient(90deg, #c9a84c, #f0d060, #c9a84c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 2px 14px rgba(201,168,76,.45));
}
.all-hero-sub {
  font-size: 1rem; color: var(--text-muted);
  max-width: 440px; margin: 0 auto 1.75rem; line-height: 1.7;
}
.all-hero-actions { display: flex; gap: .75rem; flex-wrap: wrap; justify-content: center; }

/* Featured spotlight strip */
.all-featured-strip {
  margin-top: 2.25rem;
  width: 100%;
}
.all-featured-label {
  font-size: .65rem; font-weight: 800; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(255,255,255,.35);
  margin-bottom: .75rem;
}
.all-featured-list {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  justify-content: center;
}
.all-feat-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px;
  padding: .75rem 1rem;
  text-align: left;
  min-width: 160px;
  max-width: 220px;
  flex: 1;
  backdrop-filter: blur(6px);
  transition: border-color .2s, background .2s;
}
.all-feat-card:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.18);
}
.all-feat-badge {
  font-size: .62rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; border-radius: 20px;
  padding: .15rem .5rem; display: inline-block; margin-bottom: .4rem;
}
.all-feat-badge.casual { background: rgba(255,0,110,.2); color: #ff6ec7; border: 1px solid rgba(255,0,110,.3); }
.all-feat-badge.luxe   { background: rgba(201,168,76,.18); color: #f0d060; border: 1px solid rgba(201,168,76,.3); }
.all-feat-badge.all    { background: rgba(139,0,255,.2); color: #c4aaff; border: 1px solid rgba(139,0,255,.3); }
.all-feat-title { font-size: .88rem; font-weight: 700; color: #fff; margin-bottom: .25rem; }
.all-feat-desc  { font-size: .76rem; color: var(--text-muted); line-height: 1.5; }

/* Drip edge */
.all-drip-edge {
  position: absolute;
  bottom: -1px; left: 0; right: 0; height: 80px;
  pointer-events: none; z-index: 3;
}
.all-drip-edge svg { width: 100%; height: 100%; }

/* Mobile */
@media (max-width: 768px) {
  .all-hero { padding: 2.5rem 1.25rem 4.5rem; min-height: auto; }
  .all-feat-card { min-width: 140px; }
}

.casual-hero {
  position: relative;
  background:
    radial-gradient(ellipse 80% 60% at 20% 80%, rgba(139,0,255,.18) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 20%, rgba(0,102,255,.2) 0%, transparent 55%),
    radial-gradient(ellipse 70% 40% at 50% 50%, rgba(255,0,110,.08) 0%, transparent 65%),
    linear-gradient(145deg, #060214 0%, #0d0430 25%, #070b2e 55%, #050112 100%);
  overflow: hidden;
  padding: 4rem 2.5rem 5.5rem;
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── BIG PAINT SWOOSHES ── */
.swoosh {
  position: absolute;
  pointer-events: none;
  border-radius: 50% 30% 70% 40% / 40% 60% 30% 70%;
}

/* sw1 — giant fuchsia diagonal sweep, top-left to center-right */
.sw1 {
  width: 900px; height: 220px;
  background: linear-gradient(105deg, rgba(255,0,110,.55) 0%, rgba(212,80,160,.3) 50%, transparent 85%);
  top: -40px; left: -180px;
  transform: rotate(-18deg) skewX(-8deg);
  filter: blur(22px);
  border-radius: 40% 80% 60% 20% / 60% 30% 80% 40%;
  animation: swooshDrift1 9s ease-in-out infinite alternate;
}
/* sw2 — electric blue sweep, top-right angling down-left */
.sw2 {
  width: 850px; height: 200px;
  background: linear-gradient(260deg, rgba(0,102,255,.6) 0%, rgba(0,191,255,.3) 55%, transparent 85%);
  top: 30px; right: -200px;
  transform: rotate(14deg) skewX(5deg);
  filter: blur(18px);
  border-radius: 60% 20% 50% 70% / 30% 70% 40% 60%;
  animation: swooshDrift2 11s ease-in-out infinite alternate;
}
/* sw3 — candy pink / violet-pink mid-left blob swoosh */
.sw3 {
  width: 600px; height: 280px;
  background: radial-gradient(ellipse 70% 50% at 40% 50%, rgba(255,99,184,.5) 0%, rgba(139,0,255,.2) 60%, transparent 85%);
  top: 30%; left: -80px;
  transform: rotate(-30deg);
  filter: blur(30px);
  border-radius: 70% 30% 50% 60% / 50% 70% 30% 60%;
  animation: swooshDrift3 13s ease-in-out infinite alternate;
}
/* sw4 — deep sky / cerulean lower-right sweep */
.sw4 {
  width: 780px; height: 190px;
  background: linear-gradient(285deg, rgba(0,191,255,.5) 0%, rgba(41,128,185,.35) 50%, transparent 80%);
  bottom: 20px; right: -140px;
  transform: rotate(-22deg) skewX(6deg);
  filter: blur(20px);
  border-radius: 30% 70% 40% 60% / 60% 40% 70% 30%;
  animation: swooshDrift4 10s ease-in-out infinite alternate;
}
/* sw5 — violet thin crisp diagonal stripe, center-crossing */
.sw5 {
  width: 1100px; height: 90px;
  background: linear-gradient(100deg, transparent 5%, rgba(139,0,255,.5) 30%, rgba(212,80,160,.45) 60%, transparent 90%);
  top: 42%; left: -100px;
  transform: rotate(-12deg);
  filter: blur(8px);
  border-radius: 20% 80% 20% 80% / 80% 20% 80% 20%;
  animation: swooshDrift5 14s ease-in-out infinite alternate;
}
/* sw6 — ultra pink / fuchsia-light crisp diagonal, top-center */
.sw6 {
  width: 1000px; height: 75px;
  background: linear-gradient(95deg, transparent 5%, rgba(255,110,199,.55) 25%, rgba(255,133,208,.4) 60%, transparent 92%);
  top: 18%; left: -50px;
  transform: rotate(8deg);
  filter: blur(6px);
  border-radius: 80% 20% 80% 20% / 20% 80% 20% 80%;
  animation: swooshDrift6 8s ease-in-out infinite alternate;
}
/* sw7 — cyan blue bottom-left arc */
.sw7 {
  width: 550px; height: 260px;
  background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(0,188,212,.45) 0%, rgba(0,127,255,.2) 55%, transparent 80%);
  bottom: -40px; left: -60px;
  transform: rotate(20deg);
  filter: blur(28px);
  border-radius: 50% 60% 40% 70% / 70% 30% 60% 50%;
  animation: swooshDrift7 12s ease-in-out infinite alternate;
}
/* sw8 — azure / electric blue top-center large diffuse bloom */
.sw8 {
  width: 700px; height: 350px;
  background: radial-gradient(ellipse 65% 55% at 50% 45%, rgba(0,127,255,.22) 0%, rgba(0,102,255,.12) 55%, transparent 80%);
  top: -60px; left: 30%;
  transform: translateX(-50%) rotate(-5deg);
  filter: blur(50px);
  border-radius: 50%;
  animation: swooshDrift8 16s ease-in-out infinite alternate;
}
/* sw9 — fuchsia/violet-pink small crisp right-edge slash */
.sw9 {
  width: 420px; height: 60px;
  background: linear-gradient(110deg, transparent 10%, rgba(255,0,110,.6) 40%, rgba(139,0,255,.5) 70%, transparent 95%);
  top: 65%; right: 0;
  transform: rotate(-35deg);
  filter: blur(5px);
  border-radius: 30% 70% 50% 50% / 50% 50% 70% 30%;
  animation: swooshDrift9 7s ease-in-out infinite alternate;
}
/* sw10 — candy pink / cerulean bottom-center diffuse */
.sw10 {
  width: 600px; height: 200px;
  background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(255,99,184,.25) 0%, rgba(41,128,185,.2) 55%, transparent 80%);
  bottom: 40px; left: 25%;
  transform: rotate(10deg);
  filter: blur(35px);
  border-radius: 60% 40% 70% 30% / 40% 70% 30% 60%;
  animation: swooshDrift10 15s ease-in-out infinite alternate;
}

@keyframes swooshDrift1  { 0%{transform:rotate(-18deg) skewX(-8deg) scale(1)}   100%{transform:rotate(-14deg) skewX(-5deg) scale(1.06)} }
@keyframes swooshDrift2  { 0%{transform:rotate(14deg) skewX(5deg) scale(1)}      100%{transform:rotate(10deg) skewX(3deg) scale(1.08)} }
@keyframes swooshDrift3  { 0%{transform:rotate(-30deg) scale(1)}                 100%{transform:rotate(-24deg) scale(1.1)} }
@keyframes swooshDrift4  { 0%{transform:rotate(-22deg) skewX(6deg) scale(1)}     100%{transform:rotate(-18deg) skewX(4deg) scale(1.07)} }
@keyframes swooshDrift5  { 0%{transform:rotate(-12deg) translateY(0)}            100%{transform:rotate(-9deg) translateY(-8px)} }
@keyframes swooshDrift6  { 0%{transform:rotate(8deg) translateY(0)}              100%{transform:rotate(11deg) translateY(6px)} }
@keyframes swooshDrift7  { 0%{transform:rotate(20deg) scale(1)}                  100%{transform:rotate(16deg) scale(1.09)} }
@keyframes swooshDrift8  { 0%{transform:translateX(-50%) rotate(-5deg) scale(1)} 100%{transform:translateX(-50%) rotate(-2deg) scale(1.05)} }
@keyframes swooshDrift9  { 0%{transform:rotate(-35deg) translateX(0)}            100%{transform:rotate(-30deg) translateX(-12px)} }
@keyframes swooshDrift10 { 0%{transform:rotate(10deg) scale(1)}                  100%{transform:rotate(6deg) scale(1.06)} }

/* ── Crisp drip accents ── */
.paint-drip {
  position: absolute;
  border-radius: 0 0 50% 50%;
  pointer-events: none;
  top: 0;
}
.pd1 {
  width: 7px; height: 140px; left: 22%;
  background: linear-gradient(180deg, rgba(255,0,110,.8), rgba(255,99,184,.3), transparent);
  animation: drip 3.5s ease-in-out infinite alternate;
}
.pd2 {
  width: 5px; height: 100px; left: 48%;
  background: linear-gradient(180deg, rgba(0,102,255,.8), rgba(0,191,255,.3), transparent);
  animation: drip 4.5s ease-in-out infinite alternate-reverse;
}
.pd3 {
  width: 6px; height: 120px; left: 67%;
  background: linear-gradient(180deg, rgba(212,80,160,.9), rgba(139,0,255,.2), transparent);
  animation: drip 3s ease-in-out infinite alternate;
}
.pd4 {
  width: 4px; height: 85px; right: 20%;
  background: linear-gradient(180deg, rgba(0,188,212,.8), rgba(0,127,255,.2), transparent);
  animation: drip 5s ease-in-out infinite alternate-reverse;
}
@keyframes drip { 0% { height: 70px; opacity: .7; } 100% { height: 150px; opacity: 1; } }

/* ── Scattered stars — full new palette ── */
.hero-stars { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hstar {
  position: absolute;
  animation: starFloat 6s ease-in-out infinite alternate;
  font-size: 1rem;
}
.hstar.s1  { top:10%; left:7%;   color:#ff6ec7; font-size:1.5rem; animation-delay:0s;   animation-duration:7s; }
.hstar.s2  { top:6%;  left:24%;  color:#00bfff; font-size:.9rem;  animation-delay:.5s;  animation-duration:5s; }
.hstar.s3  { top:22%; left:52%;  color:#ff006e; font-size:1.2rem; animation-delay:1s;   animation-duration:8s; }
.hstar.s4  { top:4%;  right:16%; color:#8b00ff; font-size:1.7rem; animation-delay:.3s;  animation-duration:6s; }
.hstar.s5  { top:38%; right:7%;  color:#00bcd4; font-size:.9rem;  animation-delay:1.5s; animation-duration:9s; }
.hstar.s6  { bottom:28%; left:10%;  color:#ff63b8; font-size:1.3rem; animation-delay:.8s; animation-duration:7s; }
.hstar.s7  { bottom:18%; left:42%;  color:#0066ff; font-size:1rem;   animation-delay:2s;  animation-duration:5s; }
.hstar.s8  { bottom:12%; right:22%; color:#d450a0; font-size:1.6rem; animation-delay:.2s; animation-duration:8s; }
.hstar.s9  { top:58%; right:33%;   color:#ff85d0; font-size:.8rem;  animation-delay:1.2s;animation-duration:6s; }
.hstar.s10 { bottom:42%; left:62%; color:#007fff; font-size:1rem;   animation-delay:.6s; animation-duration:7s; }
@keyframes starFloat {
  0%   { transform: translateY(0) scale(1) rotate(0deg); opacity: .55; }
  100% { transform: translateY(-14px) scale(1.2) rotate(22deg); opacity: 1; }
}

/* ── Hero inner — fully centered ── */
.casual-hero-inner {
  position: relative; z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}
.casual-hero-logo-wrap {
  flex-shrink: 0;
  width: 240px;
  margin-bottom: 1.5rem;
  filter: drop-shadow(0 0 40px rgba(255,0,110,.45)) drop-shadow(0 0 80px rgba(139,0,255,.3));
  animation: logoPulse 4s ease-in-out infinite alternate;
}
@keyframes logoPulse {
  0%   { filter: drop-shadow(0 0 30px rgba(255,0,110,.35)) drop-shadow(0 0 60px rgba(0,102,255,.25)); }
  100% { filter: drop-shadow(0 0 60px rgba(255,0,110,.65)) drop-shadow(0 0 100px rgba(139,0,255,.5)); }
}
.casual-hero-logo { width: 100%; height: auto; }
.casual-hero-text { width: 100%; text-align: center; }
.casual-hero-eyebrow {
  font-size: .72rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .2em;
  color: var(--gold);
  margin-bottom: .65rem;
  display: flex; align-items: center; justify-content: center; gap: .5rem;
}
.casual-hero-eyebrow::before { content: '✦'; }
.casual-hero-title {
  font-family: 'Bebas Neue', 'Inter', sans-serif;
  font-size: clamp(3.5rem, 7vw, 6.5rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .03em;
  margin-bottom: 1rem;
  color: #fff;
  text-shadow: 0 0 50px rgba(255,133,208,.25), 0 0 80px rgba(0,191,255,.15);
}
.title-accent {
  display: block;
  background: linear-gradient(90deg, #ff006e, #ff63b8, #d450a0, #8b00ff, #007fff, #00bfff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 2px 16px rgba(255,0,110,.45));
}
.casual-hero-sub {
  font-size: 1rem; color: var(--text-muted); max-width: 480px;
  margin: 0 auto 1.75rem; line-height: 1.7;
}
.casual-hero-actions { display: flex; gap: .75rem; flex-wrap: wrap; justify-content: center; }

/* Hero drip edge */
.hero-drip-edge {
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 80px;
  pointer-events: none;
  z-index: 3;
}
.hero-drip-edge svg { width: 100%; height: 100%; }

/* ══════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════ */
.btn-casual-primary {
  background: linear-gradient(135deg, var(--purple), var(--blue));
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: .75rem 1.6rem;
  font-weight: 800;
  font-size: .9rem;
  letter-spacing: .02em;
  transition: transform .15s, box-shadow .15s;
  box-shadow: 0 4px 20px rgba(123,47,255,.35);
  display: inline-flex; align-items: center; gap: .5rem;
}
.btn-casual-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 28px rgba(123,47,255,.5); }
.btn-casual-primary:active { transform: scale(.97); }
.btn-casual-primary.full-width { width: 100%; justify-content: center; }
.btn-casual-primary.sm { padding: .45rem 1rem; font-size: .8rem; }
.btn-casual-ghost {
  background: transparent;
  border: 1px solid rgba(196,170,255,.3);
  color: var(--lavender);
  border-radius: 10px;
  padding: .75rem 1.6rem;
  font-weight: 600; font-size: .9rem;
  transition: border-color .15s, background .15s;
}
.btn-casual-ghost:hover { border-color: var(--purple); background: rgba(123,47,255,.1); }
.btn-casual-ghost.sm { padding: .4rem .9rem; font-size: .8rem; }
.btn-casual-ghost.full-width { width: 100%; }

/* Legacy compat */
.btn-primary { background: linear-gradient(135deg, var(--purple), var(--blue)); color: #fff; border: none; border-radius: 10px; padding: .7rem 1.5rem; font-weight: 800; font-size: .9rem; transition: transform .15s, box-shadow .15s; box-shadow: 0 4px 20px rgba(123,47,255,.3); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 28px rgba(123,47,255,.45); }
.btn-primary.full-width { width: 100%; }
.btn-ghost { background: transparent; border: 1px solid rgba(196,170,255,.3); color: var(--lavender); border-radius: 10px; padding: .7rem 1.5rem; font-weight: 600; font-size: .9rem; transition: border-color .15s, background .15s; }
.btn-ghost:hover { border-color: var(--purple); background: rgba(123,47,255,.1); }
.btn-ghost.sm { padding: .45rem .9rem; font-size: .82rem; }
.btn-outline-gold { background: transparent; border: 1px solid var(--gold); color: var(--gold); border-radius: 9px; padding: .55rem 1.1rem; font-weight: 600; font-size: .85rem; transition: background .15s; }
.btn-outline-gold:hover { background: rgba(201,168,76,.12); }

/* ══════════════════════════════════════════════
   PRODUCT GRID
   ══════════════════════════════════════════════ */
.products-section { padding: 1.75rem 2rem 2.5rem; }
.products-header {
  display: flex; align-items: baseline; gap: .75rem;
  margin-bottom: 1.25rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid rgba(123,47,255,.15);
}
.products-heading {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.8rem; letter-spacing: .05em; color: var(--lavender); font-weight: 400;
}
.products-count { font-size: .78rem; color: var(--text-muted); }
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1.1rem;
}
.products-loading {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  padding: 4rem 0; color: var(--text-muted);
}
.spinner {
  width: 32px; height: 32px;
  border: 3px solid var(--border);
  border-top-color: var(--purple);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.products-empty { padding: 4rem 1.5rem; text-align: center; color: var(--text-muted); }
.empty-icon { font-size: 2.5rem; margin-bottom: .75rem; opacity: .4; }
.products-empty h3 { font-size: 1.2rem; margin-bottom: .35rem; color: var(--text); }

/* Product Card */
.product-card {
  background: linear-gradient(145deg, var(--surface1), var(--surface2));
  border: 1px solid rgba(123,47,255,.18);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .2s, transform .2s, box-shadow .2s;
  cursor: pointer;
  display: flex; flex-direction: column;
  position: relative;
}
.product-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(123,47,255,.04), rgba(26,63,224,.02));
  pointer-events: none;
}
.product-card:hover {
  border-color: var(--purple);
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(123,47,255,.2), 0 2px 8px rgba(0,0,0,.4);
}
.product-img {
  background: linear-gradient(135deg, var(--surface2), var(--surface3));
  height: 220px;
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem; color: var(--text-muted);
  border-bottom: 1px solid rgba(123,47,255,.12);
  position: relative; overflow: hidden; user-select: none;
}
.product-img img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.product-img .product-icon { position: relative; z-index: 1; }
.product-badge {
  position: absolute; top: .6rem; left: .6rem;
  background: linear-gradient(135deg, var(--purple), var(--blue));
  color: #fff;
  font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  padding: .2rem .55rem; border-radius: 5px; z-index: 2;
}
.product-badge.luxe { background: linear-gradient(135deg, var(--gold), var(--gold-dim)); color: #000; }
.product-info { padding: .9rem; flex: 1; display: flex; flex-direction: column; gap: .3rem; }
.product-category { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--purple); }
.product-name { font-size: .92rem; font-weight: 700; line-height: 1.3; color: var(--text); }
.product-desc { font-size: .75rem; color: var(--text-muted); line-height: 1.5; flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.product-colors { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .1rem; }
.color-dot { width: 13px; height: 13px; border-radius: 50%; border: 1px solid rgba(255,255,255,.15); flex-shrink: 0; }
.color-label { font-size: .68rem; color: var(--text-muted); background: var(--surface3); padding: .1rem .4rem; border-radius: 4px; }
.product-footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: auto; padding-top: .6rem;
  border-top: 1px solid rgba(123,47,255,.12);
}
.product-price { font-size: 1.05rem; font-weight: 800; color: var(--gold); }
.product-price.free { color: var(--green); font-size: .85rem; }
.add-to-cart-btn {
  background: linear-gradient(135deg, var(--purple), var(--blue));
  color: #fff; border: none; border-radius: 7px;
  padding: .38rem .8rem; font-size: .76rem; font-weight: 700;
  transition: transform .12s, box-shadow .12s;
  box-shadow: 0 2px 10px rgba(123,47,255,.3);
}
.add-to-cart-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(123,47,255,.45); }

/* ══════════════════════════════════════════════
   SERVICES
   ══════════════════════════════════════════════ */
.services-section {
  background: linear-gradient(180deg, var(--surface1), var(--bg));
  border-top: 1px solid rgba(123,47,255,.15);
  padding: 3.5rem 2rem;
  position: relative; overflow: hidden;
}
.services-stars {
  display: flex; gap: 1.5rem; justify-content: center;
  margin-bottom: 1rem;
  font-size: 1rem; color: var(--gold); opacity: .5;
  animation: starsPulse 3s ease-in-out infinite alternate;
}
@keyframes starsPulse { 0% { opacity:.3; } 100% { opacity:.8; } }
.services-inner { max-width: 960px; margin: 0 auto; }
.section-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2.2rem; letter-spacing: .05em; font-weight: 400;
  margin-bottom: 1.75rem; text-align: center;
  background: linear-gradient(90deg, var(--lavender), var(--gold));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.1rem; }
.service-card {
  background: linear-gradient(145deg, var(--surface2), var(--surface3));
  border: 1px solid rgba(123,47,255,.2);
  border-radius: var(--radius); padding: 1.5rem; cursor: pointer;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.service-card:hover { border-color: var(--purple); transform: translateY(-2px); box-shadow: 0 6px 24px rgba(123,47,255,.15); }
.service-card.rewards-card { border-color: rgba(201,168,76,.2); }
.service-card.rewards-card:hover { border-color: var(--gold); box-shadow: 0 6px 24px rgba(201,168,76,.15); }
.service-icon { font-size: 1.5rem; color: var(--lavender); margin-bottom: .75rem; }
.service-card.rewards-card .service-icon { color: var(--gold); }
.service-card h3 { font-size: .95rem; font-weight: 700; margin-bottom: .5rem; }
.service-card p { font-size: .8rem; color: var(--text-muted); line-height: 1.55; margin-bottom: .75rem; }
.service-cta { font-size: .78rem; font-weight: 700; color: var(--lavender); }
.service-card.rewards-card .service-cta { color: var(--gold); }

/* ══════════════════════════════════════════════
   ANNOUNCEMENTS PAGE
   ══════════════════════════════════════════════ */
.announce-page { max-width: 780px; margin: 0 auto; padding: 3rem 2rem; }
.announce-page-header { margin-bottom: 2rem; text-align: center; }
.announce-stars {
  display: flex; gap: 1rem; justify-content: center;
  font-size: 1.1rem; margin-bottom: .75rem;
  animation: starsPulse 3s ease-in-out infinite alternate;
}
.announce-stars span:nth-child(1) { color: var(--gold); }
.announce-stars span:nth-child(2) { color: var(--lavender); }
.announce-stars span:nth-child(3) { color: var(--gold); }
.announce-list { display: flex; flex-direction: column; gap: 1rem; }
.announce-card {
  background: linear-gradient(145deg, var(--surface1), var(--surface2));
  border: 1px solid rgba(123,47,255,.2);
  border-radius: var(--radius);
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
  transition: border-color .2s, transform .2s;
}
.announce-card:hover { border-color: var(--purple); transform: translateX(3px); }
.announce-card.pinned { border-color: var(--gold); }
.announce-card.pinned::before {
  content: '📌 PINNED';
  position: absolute; top: .8rem; right: .8rem;
  font-size: .6rem; font-weight: 800; letter-spacing: .08em;
  color: var(--gold); background: rgba(201,168,76,.12);
  padding: .15rem .45rem; border-radius: 4px;
}
.announce-card-emoji { font-size: 1.75rem; margin-bottom: .5rem; }
.announce-card-title { font-size: 1rem; font-weight: 800; margin-bottom: .4rem; color: var(--text); }
.announce-card-body { font-size: .85rem; color: var(--text-muted); line-height: 1.65; white-space: pre-line; }
.announce-card-meta { font-size: .7rem; color: var(--text-muted); margin-top: .75rem; opacity: .7; }
.announce-empty { text-align: center; padding: 3rem 0; color: var(--text-muted); }
.announce-empty .empty-icon { font-size: 2rem; margin-bottom: .5rem; opacity: .4; }

/* ══════════════════════════════════════════════
   REWARDS PAGE
   ══════════════════════════════════════════════ */
.rewards-page { max-width: 780px; margin: 0 auto; padding: 3rem 2rem; position: relative; }
.rewards-stars { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.rewards-hero { text-align: center; margin-bottom: 2.5rem; }
.rewards-crown {
  font-size: 3rem; color: var(--gold);
  filter: drop-shadow(0 0 20px rgba(201,168,76,.5));
  display: block; margin-bottom: .5rem;
  animation: crownFloat 3s ease-in-out infinite alternate;
}
@keyframes crownFloat { 0% { transform: translateY(0); } 100% { transform: translateY(-8px); } }

.rewards-tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem; margin-bottom: 2rem;
}
.tier-card {
  border-radius: var(--radius);
  padding: 1.5rem 1rem;
  text-align: center;
  border: 1px solid transparent;
  transition: transform .2s, box-shadow .2s;
}
.tier-card:hover { transform: translateY(-3px); }
.tier-card.bronze {
  background: linear-gradient(145deg, #1a100a, #2a1808);
  border-color: #8b6340;
  box-shadow: 0 4px 20px rgba(139,99,64,.15);
}
.tier-card.silver {
  background: linear-gradient(145deg, #0f0f20, #1a1a30);
  border-color: rgba(196,170,255,.4);
  box-shadow: 0 4px 20px rgba(196,170,255,.1);
}
.tier-card.gold {
  background: linear-gradient(145deg, #1a1200, #2a1e00);
  border-color: var(--gold);
  box-shadow: 0 4px 20px rgba(201,168,76,.2);
}
.tier-crown { font-size: 2rem; margin-bottom: .4rem; }
.tier-card.bronze .tier-crown { color: #cd7f32; }
.tier-card.silver .tier-crown { color: var(--lavender); }
.tier-card.gold .tier-crown { color: var(--gold); }
.tier-name { font-size: .95rem; font-weight: 800; margin-bottom: .2rem; }
.tier-pts { font-size: .75rem; color: var(--text-muted); margin-bottom: .4rem; }
.tier-perk { font-size: .72rem; color: var(--text-muted); line-height: 1.4; }

.rewards-guest-state { margin-top: 1rem; }
.rewards-cta-box {
  text-align: center; margin-top: 1.5rem;
  padding: 2rem; border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(123,47,255,.1), rgba(26,63,224,.08));
  border: 1px solid rgba(123,47,255,.2);
}
.rewards-cta-box p { color: var(--text-muted); margin-bottom: 1rem; }

.rewards-balance-card {
  background: linear-gradient(135deg, rgba(123,47,255,.15), rgba(26,63,224,.1));
  border: 1px solid rgba(123,47,255,.3);
  border-radius: var(--radius);
  padding: 2rem;
  text-align: center;
  margin-bottom: 2rem;
  position: relative;
  overflow: hidden;
}
.rewards-balance-card::before {
  content: '✦ ★ ✦ ★ ✦ ★ ✦ ★ ✦ ★';
  position: absolute; bottom: .5rem; left: 0; right: 0;
  font-size: .6rem; color: rgba(196,170,255,.2);
  letter-spacing: .5em; text-align: center;
}
.rbc-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--text-muted); margin-bottom: .5rem; }
.rbc-points { font-family: 'Bebas Neue', sans-serif; font-size: 4rem; letter-spacing: .05em; color: var(--gold); line-height: 1; margin-bottom: .25rem; }
.rbc-tier { font-size: .85rem; font-weight: 700; color: var(--lavender); margin-bottom: 1.25rem; }
.rbc-bar-wrap { max-width: 300px; margin: 0 auto; }
.rbc-bar-track { background: var(--surface3); border-radius: 6px; height: 10px; overflow: hidden; margin-bottom: .3rem; }
.rbc-bar-fill { height: 100%; background: linear-gradient(90deg, var(--purple), var(--gold)); border-radius: 6px; transition: width .5s ease; }
.rbc-bar-labels { display: flex; justify-content: space-between; font-size: .7rem; color: var(--text-muted); }

.rewards-history-section { margin-top: 1.5rem; }
.rewards-history-title { font-size: 1rem; font-weight: 700; margin-bottom: .75rem; color: var(--lavender); }
.rewards-history-list { display: flex; flex-direction: column; gap: .5rem; }
.reward-hist-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: .6rem .9rem;
  background: var(--surface2); border-radius: 9px;
  border: 1px solid var(--border);
  font-size: .82rem;
}
.reward-hist-desc { color: var(--text-muted); }
.reward-hist-pts { font-weight: 800; color: var(--green); }
.reward-hist-pts.redeemed { color: var(--red); }

/* ══════════════════════════════════════════════
   ACCOUNT / AUTH
   ══════════════════════════════════════════════ */
.account-page { max-width: 720px; margin: 0 auto; padding: 3rem 2rem; }
.account-auth-card {
  background: linear-gradient(145deg, var(--surface1), var(--surface2));
  border: 1px solid rgba(123,47,255,.25);
  border-radius: 20px;
  padding: 2.5rem;
  box-shadow: 0 8px 40px rgba(123,47,255,.1);
}
.account-auth-logo {
  text-align: center;
  margin-bottom: 1.25rem;
}
.account-auth-logo img { width: 180px; height: auto; margin: 0 auto; }
.auth-tabs {
  display: flex; border-bottom: 1px solid rgba(123,47,255,.2);
  margin-bottom: 1.5rem;
}
.auth-tab {
  flex: 1; padding: .7rem; background: none; border: none;
  font-size: .88rem; font-weight: 700; color: var(--text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
.auth-tab.active { color: var(--lavender); border-bottom-color: var(--purple); }
.auth-form { display: flex; flex-direction: column; gap: .7rem; }

/* Logged-in profile */
.profile-header-card {
  background: linear-gradient(135deg, rgba(123,47,255,.15), rgba(26,63,224,.1));
  border: 1px solid rgba(123,47,255,.3);
  border-radius: 16px;
  padding: 1.5rem;
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.profile-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, var(--purple), var(--blue));
  display: flex; align-items: center; justify-content: center;
  font-family: 'Bebas Neue', sans-serif; font-size: 1.8rem;
  color: #fff; flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(123,47,255,.4);
}
.profile-header-info { flex: 1; min-width: 0; }
.profile-name { font-size: 1.15rem; font-weight: 800; }
.profile-email { font-size: .8rem; color: var(--text-muted); }
.profile-tier-badge {
  display: inline-block; margin-top: .3rem;
  background: rgba(201,168,76,.12); border: 1px solid rgba(201,168,76,.3);
  color: var(--gold); font-size: .68rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em;
  padding: .15rem .5rem; border-radius: 4px;
}
.profile-sections { display: flex; flex-direction: column; gap: 1rem; }
.profile-section {
  background: linear-gradient(145deg, var(--surface1), var(--surface2));
  border: 1px solid rgba(123,47,255,.18);
  border-radius: 14px;
  overflow: hidden;
}
.profile-section-title {
  display: flex; align-items: center; gap: .5rem;
  padding: .9rem 1.25rem;
  font-size: .82rem; font-weight: 700; color: var(--lavender);
  border-bottom: 1px solid rgba(123,47,255,.12);
  background: rgba(123,47,255,.05);
}
.profile-section-body { padding: 1.25rem; display: flex; flex-direction: column; gap: .65rem; }

.address-list, .payment-list { display: flex; flex-direction: column; gap: .5rem; }
.address-item, .payment-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: .65rem .9rem;
  background: var(--surface3); border-radius: 9px;
  border: 1px solid var(--border); font-size: .82rem;
}
.address-item-label, .payment-item-label { font-weight: 700; color: var(--lavender); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; }
.address-item-addr, .payment-item-info { font-size: .8rem; color: var(--text-muted); }
.address-item-actions, .payment-item-actions { display: flex; gap: .4rem; }
.btn-item-default { padding: .2rem .5rem; font-size: .7rem; font-weight: 700; background: rgba(201,168,76,.1); border: 1px solid rgba(201,168,76,.3); color: var(--gold); border-radius: 5px; cursor: pointer; transition: background .12s; }
.btn-item-default:hover { background: rgba(201,168,76,.2); }
.btn-item-delete { padding: .2rem .5rem; font-size: .7rem; background: rgba(255,71,87,.08); border: 1px solid rgba(255,71,87,.2); color: var(--red); border-radius: 5px; cursor: pointer; font-weight: 700; transition: background .12s; }
.btn-item-delete:hover { background: rgba(255,71,87,.18); }
.add-address-form, .add-payment-form { margin-top: .75rem; padding: 1rem; background: var(--surface3); border-radius: 10px; border: 1px solid var(--border); display: flex; flex-direction: column; gap: .6rem; }

.rewards-summary-section:hover { border-color: var(--gold); }
.rewards-mini-display { display: flex; align-items: baseline; gap: .75rem; margin-bottom: .4rem; }
.rmd-points { font-family: 'Bebas Neue', sans-serif; font-size: 2rem; color: var(--gold); letter-spacing: .05em; }
.rmd-label { font-size: .78rem; color: var(--lavender); font-weight: 700; }
.rmd-cta { font-size: .75rem; color: var(--text-muted); }

/* ══════════════════════════════════════════════
   FORM PAGES
   ══════════════════════════════════════════════ */
.form-page { max-width: 680px; margin: 0 auto; padding: 3rem 2rem; }
.form-page-header { margin-bottom: 2rem; }
.fp-eyebrow {
  font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .18em;
  color: var(--gold); margin-bottom: .5rem;
  display: flex; align-items: center; gap: .5rem;
}
.fp-eyebrow::before { content: '✦'; color: var(--lavender); }
.fp-title { font-family: 'Bebas Neue', sans-serif; font-size: 2.4rem; letter-spacing: .03em; font-weight: 400; margin-bottom: .6rem; }
.fp-sub { font-size: .92rem; color: var(--text-muted); line-height: 1.6; }

.styled-form { display: flex; flex-direction: column; gap: .75rem; }
.form-group { display: flex; flex-direction: column; gap: .28rem; }
.form-group label { font-size: .78rem; font-weight: 600; color: var(--text-muted); letter-spacing: .03em; }
.form-group input, .form-group select, .form-group textarea {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 9px; color: var(--text); padding: .6rem .85rem;
  font-size: .88rem; outline: none; transition: border-color .15s; resize: vertical;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--purple); }
.form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-muted); opacity: .7; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.form-grid-3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: .75rem; }
@media (max-width: 520px) { .form-grid-2, .form-grid-3 { grid-template-columns: 1fr; } }
.req { color: var(--red); }
.opt { color: var(--text-muted); font-weight: 400; }
.type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .45rem; }
.type-chip {
  display: flex; align-items: center; gap: .45rem;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 9px; padding: .5rem .75rem; cursor: pointer;
  transition: border-color .15s, background .15s;
  font-size: .8rem; font-weight: 500;
}
.type-chip input[type="radio"] { display: none; }
.type-chip:has(input:checked) {
  border-color: var(--purple);
  background: rgba(123,47,255,.12);
  color: var(--lavender); font-weight: 700;
}
.form-error {
  background: rgba(255,71,87,.08); border: 1px solid rgba(255,71,87,.25);
  border-radius: 8px; color: var(--red); font-size: .82rem; padding: .6rem .9rem;
}
.form-note { font-size: .73rem; color: var(--text-muted); text-align: center; line-height: 1.5; margin-top: .25rem; }

/* ══════════════════════════════════════════════
   CONFIRM
   ══════════════════════════════════════════════ */
.confirm-page { max-width: 500px; margin: 0 auto; padding: 5rem 2rem; text-align: center; }
.confirm-stars {
  display: flex; gap: 1.2rem; justify-content: center; margin-bottom: 1.5rem;
  font-size: 1.3rem;
  animation: starsPulse 3s ease-in-out infinite alternate;
}
.confirm-stars span:nth-child(odd) { color: var(--gold); }
.confirm-stars span:nth-child(even) { color: var(--lavender); }
.confirm-icon {
  width: 80px; height: 80px; border-radius: 50%;
  background: linear-gradient(135deg, rgba(123,47,255,.2), rgba(26,63,224,.15));
  border: 2px solid var(--purple);
  color: var(--lavender); font-size: 2.2rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.25rem;
  box-shadow: 0 0 30px rgba(123,47,255,.3);
}
.confirm-title { font-family: 'Bebas Neue', sans-serif; font-size: 2.5rem; letter-spacing: .05em; font-weight: 400; margin-bottom: .5rem; }
.confirm-sub { font-size: .95rem; color: var(--text-muted); margin-bottom: 1rem; }
.confirm-order-num {
  font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem; letter-spacing: .1em;
  color: var(--gold); margin-bottom: .75rem;
  background: rgba(201,168,76,.08); border: 1px solid rgba(201,168,76,.2);
  border-radius: 10px; padding: .5rem 1.5rem; display: inline-block;
}
.confirm-detail { font-size: .85rem; color: var(--text-muted); line-height: 1.65; margin-bottom: 1.5rem; }

/* ══════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════ */
.site-footer {
  background: var(--surface1);
  border-top: 1px solid rgba(123,47,255,.15);
  padding: 2.5rem 2rem 1.5rem;
  position: relative; overflow: hidden;
  margin-top: auto;
}
.footer-stars {
  display: flex; justify-content: center; gap: 1.5rem;
  margin-bottom: 1.5rem; font-size: 1rem;
  animation: starsPulse 3s ease-in-out infinite alternate;
}
.footer-stars span:nth-child(odd) { color: var(--gold); }
.footer-stars span:nth-child(even) { color: var(--lavender); }
.footer-inner { max-width: 960px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
.footer-brand { display: flex; align-items: center; gap: .75rem; }
.footer-logo { height: 50px; width: auto; }
.footer-name { font-size: .9rem; font-weight: 800; color: var(--lavender); }
.footer-tagline { font-size: .75rem; color: var(--text-muted); }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem .75rem; }
.footer-link {
  background: none; border: none; color: var(--text-muted); font-size: .8rem;
  cursor: pointer; text-decoration: none; padding: .2rem .4rem;
  border-radius: 5px; transition: color .15s;
}
.footer-link:hover { color: var(--lavender); }
.footer-copy { font-size: .72rem; color: var(--text-muted); opacity: .6; }

/* ══════════════════════════════════════════════
   CART DRAWER
   ══════════════════════════════════════════════ */
.cart-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.65); z-index: 400; backdrop-filter: blur(3px);
}
.cart-overlay.open { display: block; }
.cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 380px; max-width: 95vw;
  background: linear-gradient(180deg, var(--surface1), #0c0820);
  border-left: 1px solid rgba(123,47,255,.25);
  z-index: 401;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column;
}
.cart-drawer.open { transform: translateX(0); }
.cart-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem 1.25rem 1rem;
  border-bottom: 1px solid rgba(123,47,255,.15);
  flex-shrink: 0;
}
.cart-head h2 { font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem; letter-spacing: .05em; color: var(--lavender); font-weight: 400; }
.cart-close { background: none; border: none; color: var(--text-muted); font-size: 1.2rem; padding: .25rem; border-radius: 6px; transition: color .15s; }
.cart-close:hover { color: var(--red); }
.cart-body { flex: 1; overflow-y: auto; padding: .75rem 1rem; }
.cart-body::-webkit-scrollbar { width: 4px; }
.cart-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.cart-empty { display: flex; flex-direction: column; align-items: center; gap: .75rem; padding: 3rem 1rem; text-align: center; color: var(--text-muted); }
.cart-empty-icon { font-size: 2rem; opacity: .4; }
.cart-item {
  display: flex; gap: .75rem; padding: .75rem 0;
  border-bottom: 1px solid rgba(123,47,255,.1);
  align-items: flex-start;
}
.cart-item:last-child { border-bottom: none; }
.cart-item-thumb {
  width: 56px; height: 56px; border-radius: 9px; flex-shrink: 0;
  background: var(--surface3); display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; overflow: hidden; border: 1px solid var(--border);
}
.cart-item-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-name { font-size: .85rem; font-weight: 700; line-height: 1.3; margin-bottom: .2rem; }
.cart-item-meta { font-size: .72rem; color: var(--text-muted); margin-bottom: .4rem; }
.cart-item-controls { display: flex; align-items: center; gap: .4rem; }
.qty-btn {
  width: 24px; height: 24px; border-radius: 6px;
  background: var(--surface3); border: 1px solid var(--border);
  color: var(--text); font-size: .9rem; display: flex; align-items: center; justify-content: center;
  transition: border-color .12s;
}
.qty-btn:hover { border-color: var(--purple); }
.qty-display { font-size: .82rem; font-weight: 700; min-width: 20px; text-align: center; }
.cart-item-remove { font-size: .72rem; color: var(--red); background: none; border: none; padding: .15rem .35rem; border-radius: 4px; transition: background .12s; margin-left: .2rem; }
.cart-item-remove:hover { background: rgba(255,71,87,.1); }
.cart-item-price { font-size: .9rem; font-weight: 800; color: var(--gold); flex-shrink: 0; }
.cart-footer { padding: 1rem 1.25rem; border-top: 1px solid rgba(123,47,255,.15); flex-shrink: 0; }
.cart-total { display: flex; justify-content: space-between; align-items: center; margin-bottom: .35rem; font-weight: 700; }
.cart-total strong { font-size: 1.1rem; color: var(--gold); }
.cart-tax-note { font-size: .72rem; color: var(--text-muted); margin-bottom: .75rem; }

/* ══════════════════════════════════════════════
   PRODUCT MODAL
   ══════════════════════════════════════════════ */
.modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.75); z-index: 500; backdrop-filter: blur(4px);
  padding: 1.5rem;
  align-items: center; justify-content: center;
}
.modal-overlay.open { display: flex; }
.modal-box {
  background: linear-gradient(145deg, var(--surface1), #100c26);
  border: 1px solid rgba(123,47,255,.3);
  border-radius: 20px;
  width: 100%; max-width: 520px;
  max-height: 90vh; overflow-y: auto;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,.6), 0 0 40px rgba(123,47,255,.1);
  scrollbar-width: none;
}
.modal-box::-webkit-scrollbar { display: none; }
.modal-close {
  position: absolute; top: .85rem; right: .85rem;
  background: rgba(123,47,255,.12); border: 1px solid rgba(123,47,255,.2);
  color: var(--text-muted); font-size: 1rem;
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  z-index: 10; transition: background .15s, color .15s;
}
.modal-close:hover { background: rgba(255,71,87,.15); color: var(--red); }

.modal-product { padding: 1.5rem; }
.mp-top { display: flex; gap: 1rem; margin-bottom: 1.25rem; }
.mp-img {
  width: 80px; height: 80px; border-radius: 10px; flex-shrink: 0;
  background: var(--surface3); display: flex; align-items: center; justify-content: center;
  font-size: 2rem; overflow: hidden; border: 1px solid var(--border);
}
.mp-img img { width: 100%; height: 100%; object-fit: cover; }
.mp-photo { margin-bottom: 1rem; border-radius: 12px; overflow: hidden; max-height: 260px; border: 1px solid var(--border); }
.mp-photo img { width: 100%; height: 100%; object-fit: cover; }
.mp-cat { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--purple); margin-bottom: .2rem; }
.mp-name { font-size: 1.05rem; font-weight: 800; line-height: 1.3; margin-bottom: .25rem; }
.mp-price { font-size: 1.2rem; font-weight: 800; color: var(--gold); margin-bottom: .3rem; }
.mp-desc { font-size: .8rem; color: var(--text-muted); line-height: 1.55; }
.mp-section { margin-bottom: 1rem; }
.mp-section-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); margin-bottom: .45rem; }
.mp-colors, .mp-sizes { display: flex; flex-wrap: wrap; gap: .4rem; }
.mp-color-btn, .mp-size-btn {
  padding: .3rem .7rem; background: var(--surface2); border: 1px solid var(--border);
  border-radius: 7px; font-size: .8rem; color: var(--text-muted); cursor: pointer;
  transition: border-color .15s, background .15s;
}
.mp-color-btn.selected, .mp-size-btn.selected {
  border-color: var(--purple); background: rgba(123,47,255,.15); color: var(--lavender); font-weight: 700;
}
.mp-qty-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; }
.mp-qty-control { display: flex; align-items: center; gap: .5rem; }
.mp-qty-btn { width: 30px; height: 30px; background: var(--surface2); border: 1px solid var(--border); border-radius: 7px; font-size: 1.1rem; color: var(--text); display: flex; align-items: center; justify-content: center; transition: border-color .12s; }
.mp-qty-btn:hover { border-color: var(--purple); }
.mp-qty-num { font-weight: 800; min-width: 24px; text-align: center; }
.mp-stock { font-size: .78rem; color: var(--text-muted); }
.mp-error { color: var(--red); font-size: .8rem; margin-bottom: .5rem; }
.mp-add-btn { width: 100%; margin-top: .25rem; }

/* ══════════════════════════════════════════════
   CHECKOUT MODAL
   ══════════════════════════════════════════════ */
.checkout-modal {
  max-width: 920px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overflow-y: hidden !important;
}
.checkout-inner {
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.checkout-title { font-family: 'Bebas Neue', sans-serif; font-size: 1.8rem; letter-spacing: .05em; font-weight: 400; margin-bottom: 1.25rem; color: var(--lavender); flex-shrink: 0; }
.checkout-cols {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 2rem;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.checkout-left {
  overflow-y: auto;
  padding-right: .25rem;
  min-height: 0;
}
@media (max-width: 640px) {
  .checkout-cols { grid-template-columns: 1fr; overflow: visible; }
  .checkout-left { overflow: visible; }
  .checkout-modal { max-height: 95vh; }
}
.checkout-section-label { font-size: .82rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--lavender); margin-bottom: .75rem; }
.checkout-right {
  padding: 1.25rem;
  background: var(--surface2);
  border-radius: 12px;
  border: 1px solid rgba(123,47,255,.15);
  align-self: start;
  position: sticky;
  top: 0;
  overflow-y: auto;
  max-height: 100%;
}
.co-summary-item { display: flex; justify-content: space-between; align-items: flex-start; padding: .5rem 0; border-bottom: 1px solid var(--border); font-size: .82rem; gap: .5rem; }
.co-summary-item:last-child { border-bottom: none; }
.co-summary-name { font-weight: 700; }
.co-summary-meta { color: var(--text-muted); font-size: .75rem; }
.co-summary-price { color: var(--gold); font-weight: 700; flex-shrink: 0; }
.co-total-row { display: flex; justify-content: space-between; font-weight: 700; padding-top: .75rem; border-top: 1px solid var(--border); margin-top: .25rem; }
.co-total-row strong { color: var(--gold); font-size: 1.05rem; }
.saved-address-row { margin-bottom: .75rem; }
.co-rewards-note {
  margin-top: .75rem; padding: .6rem .85rem;
  background: rgba(201,168,76,.08); border: 1px solid rgba(201,168,76,.2);
  border-radius: 8px; font-size: .78rem; color: var(--gold);
}

/* ══════════════════════════════════════════════
   TOAST
   ══════════════════════════════════════════════ */
.shop-toast {
  position: fixed; bottom: 1.5rem; right: 1.5rem;
  background: var(--surface1); border: 1px solid rgba(123,47,255,.35);
  border-radius: 10px; padding: .75rem 1.1rem;
  font-size: .85rem; font-weight: 600; color: var(--text);
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
  transform: translateY(10px); opacity: 0;
  transition: transform .3s ease, opacity .3s ease;
  z-index: 999; max-width: 320px;
}
.shop-toast.show { transform: translateY(0); opacity: 1; }
.shop-toast.success { border-color: rgba(45,206,108,.4); color: var(--green); }
.shop-toast.error { border-color: rgba(255,71,87,.4); color: var(--red); }

/* ══════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════ */
@media (max-width: 768px) {
  body { display: block; }
  .shop-sidebar { transform: translateX(-100%); transition: transform .3s cubic-bezier(.4,0,.2,1); }
  .shop-sidebar.open { transform: translateX(0); }
  .shop-main { margin-left: 0; padding-top: var(--mobile-bar-h); }
  .mobile-topbar { display: flex; }
  .casual-hero { padding: 2.5rem 1.25rem 4.5rem; min-height: auto; }
  .casual-hero-logo-wrap { width: 180px; }
  .casual-hero-sub { max-width: 90%; }
  .swoosh { opacity: .8; }
  .pd3, .pd4 { display: none; }
  .products-section { padding: 1.25rem; }
  .product-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .75rem; }
  .product-img { height: 170px; }
  .services-section { padding: 2.5rem 1.25rem; }
  .announce-page, .rewards-page, .account-page, .form-page { padding: 2rem 1.25rem; }
  .account-auth-card { padding: 1.5rem; }
  .profile-header-card { gap: .75rem; }
}

@media (max-width: 480px) {
  .cart-drawer { width: 100%; }
  .checkout-modal { max-width: 100%; }
  .modal-overlay { padding: .75rem; }
  .casual-hero-title { font-size: 3rem; }
}

/* ══════════════════════════════════════════════════════════════
   LUXE MODE — CSS VARIABLE OVERRIDES
   ══════════════════════════════════════════════════════════════ */
/* ── CASUAL MODE — paint-splash background ── */
body.casual-mode {
  background-color: #08041a;
  background-image:
    radial-gradient(ellipse 700px 500px at  5% 10%, rgba(123, 47,255,.28) 0%, transparent 70%),
    radial-gradient(ellipse 500px 600px at 95% 18%, rgba( 26, 63,224,.26) 0%, transparent 65%),
    radial-gradient(ellipse 600px 400px at 70% 60%, rgba(123, 47,255,.18) 0%, transparent 65%),
    radial-gradient(ellipse 550px 450px at 15% 75%, rgba( 26, 63,224,.20) 0%, transparent 65%),
    radial-gradient(ellipse 400px 350px at 50% 38%, rgba(200, 40,230,.12) 0%, transparent 60%),
    radial-gradient(ellipse 300px 250px at 82% 88%, rgba( 60,120,255,.15) 0%, transparent 60%),
    radial-gradient(ellipse 250px 200px at 30% 50%, rgba(230, 30,180,.10) 0%, transparent 55%),
    linear-gradient(155deg, #08041a 0%, #0c0520 50%, #070418 100%);
  background-attachment: fixed;
}

/* ── LUXE MODE — damask-engraved velvet background ── */
body.luxe-mode {
  --bg:           #080818;
  --surface1:     #0c0c24;
  --surface2:     #101038;
  --surface3:     #16164e;
  --border:       rgba(201,168,76,.22);
  --text:         #f5f0e8;
  --text-muted:   #a8966e;
  --purple:       #c9a84c;
  --purple-dim:   #a07c30;
  --purple-glow:  rgba(201,168,76,.22);
  --lavender:     #e8d5a3;
  --lav-dim:      #c9a84c;
  --accent:       #c9a84c;
  background-color: #080818;
  background-image:
    repeating-linear-gradient( 45deg, rgba(201,168,76,.045) 0px, rgba(201,168,76,.045) 1px, transparent 1px, transparent 56px),
    repeating-linear-gradient(-45deg, rgba(201,168,76,.045) 0px, rgba(201,168,76,.045) 1px, transparent 1px, transparent 56px),
    repeating-linear-gradient( 90deg, rgba(201,168,76,.018) 0px, rgba(201,168,76,.018) 1px, transparent 1px, transparent 28px),
    repeating-linear-gradient(  0deg, rgba(201,168,76,.018) 0px, rgba(201,168,76,.018) 1px, transparent 1px, transparent 28px),
    radial-gradient(ellipse 80% 60% at 50% 0%,   rgba(201,168,76,.10) 0%, transparent 70%),
    radial-gradient(ellipse 60% 50% at 50% 100%, rgba( 26, 26,90, .35) 0%, transparent 70%),
    radial-gradient(ellipse 100% 80% at 50% 50%, rgba(  8,  8, 32,.80) 0%, transparent 100%),
    linear-gradient(170deg, #08081e 0%, #0c0c2a 45%, #08081a 100%);
  background-attachment: fixed;
  background-size:
    112px 112px,
    112px 112px,
    56px 56px,
    56px 56px,
    100% 60%,
    100% 60%,
    100% 100%,
    100% 100%;
}

/* ── Casual sidebar — show paint blobs behind it ── */
body.casual-mode .shop-sidebar {
  background: linear-gradient(180deg, rgba(8,4,26,.92) 0%, rgba(12,5,32,.94) 60%, rgba(8,4,22,.92) 100%);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
body.casual-mode .services-section {
  background: transparent;
}
body.casual-mode .service-card {
  background: linear-gradient(145deg, rgba(15,10,32,.85), rgba(22,14,48,.88));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ── Luxe sidebar — show damask grid behind it ── */
body.luxe-mode .shop-sidebar {
  background: linear-gradient(180deg, rgba(8,8,24,.95) 0%, rgba(12,12,40,.96) 60%, rgba(8,8,26,.95) 100%);
  border-right: 1px solid rgba(201,168,76,.18);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
body.luxe-mode .services-section {
  background: transparent;
}
body.luxe-mode .service-card {
  background: linear-gradient(145deg, rgba(12,12,36,.88), rgba(16,16,52,.90));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
body.luxe-mode .sidebar-logo-wrap { filter: drop-shadow(0 0 20px rgba(201,168,76,.4)); }
body.luxe-mode .sidebar-nav-item { color: #a8966e; }
body.luxe-mode .sidebar-nav-item:hover,
body.luxe-mode .sidebar-nav-item.active { background: rgba(201,168,76,.1); color: #e8d5a3; border-left-color: #c9a84c; }
body.luxe-mode .sidebar-section-label { color: rgba(201,168,76,.5); letter-spacing: .15em; }
body.luxe-mode .sidebar-divider { border-color: rgba(201,168,76,.15); }
body.luxe-mode .sidebar-cart-btn { background: linear-gradient(135deg, #c9a84c, #a07c30); color: #0c0c24; box-shadow: 0 4px 18px rgba(201,168,76,.3); }
body.luxe-mode .sidebar-cart-btn:hover { background: linear-gradient(135deg, #dbc06a, #c9a84c); }
body.luxe-mode .sidebar-signin-btn { border-color: rgba(201,168,76,.4); color: #c9a84c; }
body.luxe-mode .sidebar-signin-btn:hover { background: rgba(201,168,76,.1); }
body.luxe-mode .cart-badge { background: #c9a84c; color: #080818; }

/* Product cards luxe skin */
body.luxe-mode .product-card { border-color: rgba(201,168,76,.15); background: var(--surface1); }
body.luxe-mode .product-card:hover { border-color: rgba(201,168,76,.5); box-shadow: 0 8px 40px rgba(201,168,76,.15); transform: translateY(-4px); }
body.luxe-mode .product-img-overlay { background: linear-gradient(180deg, transparent 40%, rgba(8,8,24,.85)); }
body.luxe-mode .product-name { color: var(--text); }
body.luxe-mode .product-price, body.luxe-mode .product-sale-price { color: #c9a84c; }
body.luxe-mode .product-original-price { color: #6a5830; }
body.luxe-mode .add-to-cart-btn { background: linear-gradient(135deg, #c9a84c, #a07c30); color: #080818; font-weight: 700; }
body.luxe-mode .add-to-cart-btn:hover { background: linear-gradient(135deg, #dbc06a, #c9a84c); }
body.luxe-mode .product-badge { background: linear-gradient(135deg, #c9a84c, #a07c30); color: #080818; }
body.luxe-mode .section-heading { color: #c9a84c; letter-spacing: .06em; }
body.luxe-mode .section-heading::after { border-color: rgba(201,168,76,.4); }
body.luxe-mode .filter-pill { border-color: rgba(201,168,76,.25); color: #a8966e; }
body.luxe-mode .filter-pill:hover { border-color: #c9a84c; color: #c9a84c; }
body.luxe-mode .filter-pill.active { background: rgba(201,168,76,.15); border-color: #c9a84c; color: #c9a84c; }
body.luxe-mode .empty-products { color: #a8966e; }

/* Buttons & inputs */
body.luxe-mode .btn-primary { background: linear-gradient(135deg, #c9a84c, #a07c30); color: #080818; }
body.luxe-mode .btn-primary:hover { background: linear-gradient(135deg, #dbc06a, #c9a84c); }
body.luxe-mode input, body.luxe-mode select, body.luxe-mode textarea { border-color: rgba(201,168,76,.25); background: var(--surface2); color: var(--text); }
body.luxe-mode input:focus, body.luxe-mode select:focus, body.luxe-mode textarea:focus { border-color: #c9a84c; box-shadow: 0 0 0 3px rgba(201,168,76,.15); }

/* Footer */
body.luxe-mode .shop-footer { border-top-color: rgba(201,168,76,.2); }
body.luxe-mode .footer-link { color: #a8966e; }
body.luxe-mode .footer-link:hover { color: #c9a84c; }
body.luxe-mode .footer-copy { color: #5a4820; }

/* Collection buttons — luxe mode keeps the richer gold style from base */
body.luxe-mode .collection-btn.luxe.active {
  background: linear-gradient(135deg, rgba(201,168,76,.3) 0%, rgba(255,215,120,.2) 60%, rgba(201,140,40,.22) 100%);
  border-color: rgba(201,168,76,1);
  color: #f0d060;
  box-shadow: 0 0 18px rgba(201,168,76,.45), 0 0 36px rgba(255,210,100,.2), inset 0 1px 0 rgba(255,225,120,.25);
  text-shadow: 0 0 12px rgba(201,168,76,.7);
}

/* Mobile topbar */
body.luxe-mode .mobile-topbar { background: #080818; border-bottom-color: rgba(201,168,76,.18); }

/* Announce strip */
body.luxe-mode .announce-strip { background: linear-gradient(90deg, #a07c30, #c9a84c, #a07c30); color: #080818; }

/* ══════════════════════════════════════════════════════════════
   LUXE HERO
   ══════════════════════════════════════════════════════════════ */

/* Keyframes */
@keyframes luxeFloat {
  0%,100% { transform: translateY(0) rotate(0deg) scale(1); opacity: .55; }
  33%      { transform: translateY(-14px) rotate(15deg) scale(1.1); opacity: .9; }
  66%      { transform: translateY(6px) rotate(-8deg) scale(.9); opacity: .65; }
}
@keyframes luxeGlow {
  0%,100% { opacity: .35; transform: scale(1); }
  50%      { opacity: .6; transform: scale(1.08); }
}
@keyframes luxeShimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes luxeFadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes crownBob {
  0%,100% { transform: rotate(-1deg) translateY(0); }
  50%      { transform: rotate(1deg) translateY(-6px); }
}

.luxe-hero {
  position: relative;
  min-height: 520px;
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(201,168,76,.14) 0%, transparent 65%),
    radial-gradient(ellipse 60% 50% at 15% 80%, rgba(26,26,110,.6) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 85% 75%, rgba(90,30,180,.25) 0%, transparent 55%),
    linear-gradient(160deg, #08081a 0%, #0c0c30 40%, #080820 70%, #0a0816 100%);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4rem 3rem 5rem;
}

/* Floating diamond star particles */
.luxe-particles { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.lp {
  position: absolute;
  font-size: 1rem;
  color: #c9a84c;
  animation: luxeFloat linear infinite;
  line-height: 1;
}
.lp1  { left:  6%; top: 12%; font-size: .7rem;  animation-duration: 7s;  animation-delay: 0s;   opacity: .6; }
.lp2  { left: 18%; top: 72%; font-size: 1.1rem; animation-duration: 9s;  animation-delay: -2s;  opacity: .5; }
.lp3  { left: 30%; top: 22%; font-size: .6rem;  animation-duration: 11s; animation-delay: -4s;  opacity: .7; }
.lp4  { left: 45%; top: 80%; font-size: .8rem;  animation-duration: 8s;  animation-delay: -1s;  opacity: .45; }
.lp5  { left: 58%; top: 10%; font-size: 1.3rem; animation-duration: 13s; animation-delay: -6s;  opacity: .55; color: #e8d5a3; }
.lp6  { left: 70%; top: 65%; font-size: .75rem; animation-duration: 10s; animation-delay: -3s;  opacity: .6; }
.lp7  { left: 82%; top: 20%; font-size: .9rem;  animation-duration: 7.5s;animation-delay: -5s;  opacity: .5; }
.lp8  { left: 92%; top: 75%; font-size: .65rem; animation-duration: 12s; animation-delay: -1.5s;opacity: .65;}
.lp9  { left: 12%; top: 45%; font-size: 1rem;   animation-duration: 9.5s;animation-delay: -7s;  opacity: .4; color: #e8d5a3; }
.lp10 { left: 50%; top: 48%; font-size: .7rem;  animation-duration: 8.5s;animation-delay: -2.5s;opacity: .5; }
.lp11 { left: 76%; top: 42%; font-size: 1.2rem; animation-duration: 11s; animation-delay: -4.5s;opacity: .6; }
.lp12 { left: 35%; top: 58%; font-size: .8rem;  animation-duration: 14s; animation-delay: -8s;  opacity: .45;}

/* Ornate SVG corner decorations */
.luxe-corner {
  position: absolute;
  width: 100px;
  height: 100px;
  z-index: 2;
  opacity: .8;
}
.luxe-corner.tl { top: 0; left: 0; }
.luxe-corner.tr { top: 0; right: 0; transform: scaleX(-1); }

/* Gold radial glow */
.luxe-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,168,76,.12) 0%, transparent 70%);
  animation: luxeGlow 5s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

/* Hero inner layout */
.luxe-hero-inner {
  position: relative;
  z-index: 3;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 4rem;
}

/* Logo */
.luxe-logo-wrap {
  flex-shrink: 0;
  width: 280px;
  animation: crownBob 6s ease-in-out infinite;
  filter: drop-shadow(0 0 30px rgba(201,168,76,.5)) drop-shadow(0 0 60px rgba(201,168,76,.25));
}
.luxe-logo-img { width: 100%; height: auto; }

/* Text block */
.luxe-hero-text {
  flex: 1;
  min-width: 0;
  animation: luxeFadeUp .9s ease both;
}

/* Decorative gold divider */
.luxe-divider-top, .luxe-divider-bot {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .75rem;
}
.luxe-divider-bot { margin-top: .75rem; margin-bottom: 1.25rem; }
.ld-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,168,76,.6), transparent);
}
.ld-gem {
  color: #c9a84c;
  font-size: 1rem;
  animation: luxeFloat 4s ease-in-out infinite;
  text-shadow: 0 0 12px rgba(201,168,76,.8);
}
.ld-gem.small { font-size: .7rem; }

/* Eyebrow label */
.luxe-eyebrow {
  font-family: 'Cormorant Garamond', 'Garamond', 'Times New Roman', serif;
  font-size: .85rem;
  font-weight: 400;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: #c9a84c;
  margin-bottom: .6rem;
  opacity: .9;
}

/* Main title */
.luxe-title {
  font-family: 'Cormorant Garamond', 'Garamond', 'Times New Roman', serif;
  font-size: 3.8rem;
  font-weight: 700;
  line-height: 1.1;
  color: #f5f0e8;
  margin-bottom: .5rem;
  font-style: normal;
}
.luxe-title-em {
  font-style: italic;
  background: linear-gradient(110deg, #f0d060 0%, #c9a84c 30%, #e8d5a3 55%, #c9a84c 75%, #a07c30 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: luxeShimmer 4s linear infinite;
}

/* Sub text */
.luxe-sub {
  font-family: 'Cormorant Garamond', 'Garamond', 'Times New Roman', serif;
  font-size: 1.1rem;
  line-height: 1.7;
  color: #a8966e;
  max-width: 480px;
  font-style: italic;
}

/* CTA Buttons */
.luxe-hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: .25rem; }

.btn-luxe-primary {
  padding: .75rem 2rem;
  border-radius: 2px;
  border: none;
  background: linear-gradient(135deg, #c9a84c 0%, #a07c30 50%, #c9a84c 100%);
  background-size: 200% auto;
  color: #080818;
  font-family: 'Cormorant Garamond', 'Garamond', serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-position .4s, box-shadow .3s, transform .2s;
  box-shadow: 0 4px 24px rgba(201,168,76,.35);
  position: relative;
  overflow: hidden;
}
.btn-luxe-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 30%, rgba(255,255,255,.15) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform .5s;
}
.btn-luxe-primary:hover { background-position: right center; box-shadow: 0 6px 32px rgba(201,168,76,.55); transform: translateY(-2px); }
.btn-luxe-primary:hover::after { transform: translateX(100%); }

.btn-luxe-ghost {
  padding: .75rem 2rem;
  border-radius: 2px;
  border: 1px solid rgba(201,168,76,.5);
  background: transparent;
  color: #c9a84c;
  font-family: 'Cormorant Garamond', 'Garamond', serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .3s, background .3s, color .3s, transform .2s;
}
.btn-luxe-ghost:hover { border-color: #c9a84c; background: rgba(201,168,76,.1); color: #e8d5a3; transform: translateY(-2px); }

/* Elegant curtain bottom */
.luxe-curtain {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  pointer-events: none;
  z-index: 4;
}
.luxe-curtain svg { width: 100%; height: 100%; display: block; }

/* ── Products heading in luxe mode ── */
body.luxe-mode .products-section { background: var(--bg); }
body.luxe-mode .product-grid-header { border-bottom-color: rgba(201,168,76,.15); }

/* ══════════════════════════════════════════════
   RESPONSIVE — LUXE HERO
   ══════════════════════════════════════════════ */
@media (max-width: 900px) {
  .luxe-hero-inner { gap: 2.5rem; }
  .luxe-logo-wrap { width: 220px; }
  .luxe-title { font-size: 3rem; }
}
@media (max-width: 768px) {
  .luxe-hero { padding: 3rem 1.5rem 4.5rem; min-height: auto; }
  .luxe-hero-inner { flex-direction: column; text-align: center; gap: 2rem; }
  .luxe-logo-wrap { width: 200px; margin: 0 auto; }
  .luxe-sub { margin: 0 auto; }
  .luxe-hero-actions { justify-content: center; }
  .luxe-divider-top, .luxe-divider-bot { justify-content: center; }
}
@media (max-width: 480px) {
  .luxe-title { font-size: 2.4rem; }
  .luxe-logo-wrap { width: 160px; }
}

/* ══════════════════════════════════════════════
   SITE ANNOUNCEMENTS BAND (above spotlight)
   ══════════════════════════════════════════════ */
.shop-ann-band {
  background: linear-gradient(135deg,#1a0040 0%,#16002a 100%);
  border-bottom: 1px solid rgba(201,168,76,.18);
  padding: .7rem 1.5rem;
}
.shop-ann-band-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: .45rem;
}
.shop-ann-item {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  flex-wrap: wrap;
}
.shop-ann-badge {
  font-size: .62rem;
  font-weight: 800;
  padding: .15rem .5rem;
  border-radius: 20px;
  background: rgba(201,168,76,.18);
  color: #c9a84c;
  border: 1px solid rgba(201,168,76,.3);
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: .12rem;
}
.shop-ann-text { font-size: .82rem; color: #ddd; font-weight: 600; }
.shop-ann-body { font-size: .75rem; color: #aaa; margin-top: .1rem; }

/* ══════════════════════════════════════════════
   FEATURED SPOTLIGHT SECTION
   ══════════════════════════════════════════════ */
.spl-section {
  position: relative;
  overflow: hidden;
  background: #08050f;
  padding: 3.5rem 1.5rem 4rem;
}
/* Animated gold/silver glow border */
.spl-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,#c9a84c,#e8d5a0,#c0c0c0,#e8d5a0,#c9a84c,#a0a0a0,#c9a84c);
  background-size: 400% 100%;
  animation: spl-border-shift 5s linear infinite;
  -webkit-mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 2px;
  pointer-events: none;
  z-index: 0;
}
@keyframes spl-border-shift { 0%{background-position:0% 50%} 100%{background-position:400% 50%} }
/* Outer glow */
.spl-section::after {
  content: '';
  position: absolute;
  inset: -2px;
  box-shadow: 0 0 40px rgba(201,168,76,.18), 0 0 100px rgba(201,168,76,.08);
  pointer-events: none;
  z-index: 0;
}
/* Spotlight beam */
.spl-beam {
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 280px solid transparent;
  border-right: 280px solid transparent;
  border-top: 420px solid rgba(201,168,76,.04);
  pointer-events: none; z-index: 0;
}
/* Scattered stars */
.spl-stars { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.spl-stars span { position: absolute; color: rgba(201,168,76,.6); animation: spl-twinkle 3s ease-in-out infinite alternate; }
.spl-s1{top:8%;left:4%;font-size:.8rem;animation-delay:0s;}
.spl-s2{top:22%;left:10%;font-size:.55rem;animation-delay:.5s;}
.spl-s3{top:6%;right:6%;font-size:.85rem;animation-delay:.9s;}
.spl-s4{top:55%;left:2.5%;font-size:.5rem;animation-delay:1.3s;}
.spl-s5{top:72%;right:4%;font-size:.75rem;animation-delay:.7s;}
.spl-s6{top:38%;right:8%;font-size:.5rem;animation-delay:1.6s;}
.spl-s7{top:82%;left:14%;font-size:.6rem;animation-delay:.35s;}
.spl-s8{top:12%;left:38%;font-size:.45rem;animation-delay:1.1s;}
@keyframes spl-twinkle { 0%{opacity:.25;transform:scale(.75)} 100%{opacity:1;transform:scale(1.25)} }
/* Crown — positioned on top-right corner of the border */
.spl-crown {
  position: absolute; top: -16px; right: 20px;
  font-size: 2.2rem;
  filter: drop-shadow(0 0 10px rgba(201,168,76,.9)) drop-shadow(0 0 20px rgba(201,168,76,.5));
  z-index: 3; line-height: 1;
  animation: spl-crown-float 3s ease-in-out infinite;
}
@keyframes spl-crown-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
/* Spotlight lamp — top-left */
.spl-lamp {
  position: absolute; top: 14px; left: 18px;
  font-size: 1.4rem; opacity: .7; z-index: 2;
  transform: rotate(-35deg);
  animation: spl-lamp-sway 4s ease-in-out infinite;
}
@keyframes spl-lamp-sway { 0%,100%{transform:rotate(-35deg)} 50%{transform:rotate(-25deg)} }
/* Inner */
.spl-inner { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; }
/* Header */
.spl-head { text-align: center; margin-bottom: 2rem; }
.spl-eyebrow {
  font-size: .72rem; font-weight: 800; letter-spacing: .22em;
  text-transform: uppercase; color: #c9a84c; margin-bottom: .5rem;
}
.spl-title {
  font-size: clamp(1.5rem,3.5vw,2.2rem); font-weight: 900; color: #fff; margin: 0;
  text-shadow: 0 0 40px rgba(201,168,76,.5); letter-spacing: .05em;
}
/* Grid — asymmetric magazine layout */
.spl-grid {
  display: grid;
  grid-template-columns: 2fr 1.35fr;
  grid-template-rows: auto auto;
  gap: 1rem;
}
.spl-card[data-slot="1"] { grid-column: 1; grid-row: 1; }
.spl-card[data-slot="2"] { grid-column: 2; grid-row: 1; }
.spl-card[data-slot="3"] { grid-column: 1; grid-row: 2; }
.spl-card[data-slot="4"] { grid-column: 2; grid-row: 2; }
/* Cards */
.spl-card {
  position: relative; border-radius: 14px; overflow: hidden;
  background: #12102a;
  border: 1px solid rgba(201,168,76,.2);
  box-shadow: 0 4px 24px rgba(0,0,0,.45);
  transition: box-shadow .3s, transform .25s;
}
.spl-card:hover {
  box-shadow: 0 8px 40px rgba(0,0,0,.55), 0 0 20px rgba(201,168,76,.22);
  transform: translateY(-4px);
}
/* Number badge */
.spl-num {
  position: absolute; top: .65rem; left: .65rem; z-index: 3;
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg,#c9a84c,#e8d070);
  color: #1a0a00; font-size: .75rem; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(201,168,76,.7);
}
/* Image */
.spl-img-wrap { width: 100%; overflow: hidden; background: #0e0a20; }
.spl-card[data-slot="1"] .spl-img-wrap,
.spl-card[data-slot="3"] .spl-img-wrap { aspect-ratio: 16/9; }
.spl-card[data-slot="2"] .spl-img-wrap,
.spl-card[data-slot="4"] .spl-img-wrap { aspect-ratio: 4/5; }
.spl-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.spl-card:hover .spl-img { transform: scale(1.05); }
/* Card body */
.spl-card-body { padding: .85rem 1rem .95rem; }
.spl-card-title { font-size: .95rem; font-weight: 800; color: #fff; margin: 0 0 .25rem; line-height: 1.25; }
.spl-card-desc { font-size: .78rem; color: #bbb; margin: 0 0 .5rem; line-height: 1.45; }
.spl-card-price {
  display: inline-block; font-size: .82rem; font-weight: 700; color: #c9a84c;
  background: rgba(201,168,76,.12); border: 1px solid rgba(201,168,76,.28);
  padding: .2rem .65rem; border-radius: 20px;
}
@media (max-width: 620px) {
  .spl-grid { grid-template-columns: 1fr; }
  .spl-card[data-slot="1"],.spl-card[data-slot="2"],
  .spl-card[data-slot="3"],.spl-card[data-slot="4"] { grid-column: 1; grid-row: auto; }
  .spl-card[data-slot="2"] .spl-img-wrap,
  .spl-card[data-slot="4"] .spl-img-wrap { aspect-ratio: 16/9; }
}