@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Playfair+Display:ital,wght@0,600;1,600&family=Space+Mono:wght@400;700&family=Outfit:wght@400;600;700&display=swap');

/* ==========================================================================
   themes.css - Dynamic Themes & UI Overhauls
   ========================================================================== */

/* --------------------------------------------------------------------------
   THEME 1 - Midnight Elegance (Ultra-Premium Dark Mode)
   -------------------------------------------------------------------------- */
body.theme-1 { --ink: #ffffff; --ivory: #111111; --ivory-2: #1a1a1a; --theme-surface: var(--ivory); --maroon: #555555; --maroon-dark: #333333; --marigold: #aaaaaa; background: var(--ivory); color: var(--ink); }
body.theme-1 h1, body.theme-1 h2, body.theme-1 h3, body.theme-1 .display { font-family: 'Playfair Display', serif; font-weight: 400; letter-spacing: 1px; }
body.theme-1 header { background: rgba(5,5,5,0.8); backdrop-filter: blur(20px); border-bottom: 1px solid rgba(212, 175, 55, 0.2); }
body.theme-1 .card { border-radius: 4px; border: 1px solid rgba(212, 175, 55, 0.3); background: #0a0a0a; padding: 0; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.8) !important; transition: all 0.4s ease; }
body.theme-1 .card img { border-radius: 4px 4px 0 0; }
body.theme-1 .card .card-body { background: #0a0a0a; color: #fff; padding: 20px; text-align: center; border-top: 1px solid rgba(212, 175, 55, 0.1); }
body.theme-1 .card:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(212, 175, 55, 0.15) !important; border-color: rgba(212, 175, 55, 0.8); }
body.theme-1 .btn-primary, body.theme-1 .card .add-btn { border-radius: 2px; background: transparent; border: 1px solid #d4af37; color: #d4af37; text-transform: uppercase; letter-spacing: 2px; font-weight: 400; transition: all 0.3s; }
body.theme-1 .btn-primary:hover, body.theme-1 .card .add-btn:hover { background: #d4af37; color: #000; box-shadow: 0 0 20px rgba(212, 175, 55, 0.4); }
body.theme-1 .hero-visual { border-radius: 4px; border: 1px solid rgba(212, 175, 55, 0.3); height: 75vh; }
body.theme-1 .slide-overlay { background: linear-gradient(to top, rgba(5,5,5,0.9) 0%, transparent 100%) !important; color: #d4af37 !important; align-items: center !important; justify-content: flex-end !important; padding: 60px !important; }
body.theme-1 .slide-overlay h3 { font-size: 3.5rem !important; letter-spacing: 2px !important; }
body.theme-1 footer { background-color: #040e16 !important; border-top: 1px solid rgba(212,175,55,0.1); }
body.theme-1 footer p, body.theme-1 footer li, body.theme-1 footer .foot-bottom, body.theme-1 footer .logo { color: rgba(255,255,255,0.6) !important; }


/* Mandala/motif border is default-theme only - hide it on all custom themes */
body[class*="theme-"] .motif-border { display: none !important; }

/* Contact page luxury bg is default-theme only — hide it on all custom themes and revert text colors */
body[class*="theme-"] .luxury-bg-layer { display: none !important; }
body[class*="theme-"] .luxury-contact-header h1 { color: var(--ink) !important; text-shadow: none; }
body[class*="theme-"] .luxury-contact-header p { color: var(--ink) !important; text-shadow: none; }
body[class*="theme-"] .luxury-contact-header .eyebrow { color: var(--maroon) !important; }
body[class*="theme-"] .luxury-contact-main { color: var(--ink) !important; }
/* Elegant animated separator line replacing motif in custom themes */
body[class*="theme-"] .motif-border-replaced {
  display: block;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--maroon) 30%, var(--marigold) 50%, var(--maroon) 70%, transparent 100%);
  background-size: 200% 100%;
  animation: shimmerLine 3s ease-in-out infinite;
  opacity: 0.6;
  margin: 0;
}
@keyframes shimmerLine {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

/* --------------------------------------------------------------------------
   THEME 2 - Sharp & Professional (Chevron Motif)
   -------------------------------------------------------------------------- */
body.theme-2 {
  --ink: #15120a; --ivory: #f5f4ef; --ivory-2: #ebeae2; --theme-surface: var(--ivory);
  --maroon: #b2a760; --maroon-dark: #978e51; --marigold: #a4be79;
  --peacock: #c2d2a3; --blush: #e8e6df; --muted: #78756d;
  --radius: 24px; --shadow: 0 10px 30px rgba(21, 18, 10, 0.05);
  font-family: 'Inter', sans-serif;
}
body.theme-2 h1, body.theme-2 h2, body.theme-2 h3, body.theme-2 .display { font-family: 'Playfair Display', serif; }
body.theme-2 .card { border: 1px solid #e0dfda; border-radius: 24px; transition: all 0.2s ease-in-out; box-shadow: 0 20px 45px -15px rgba(178,167,96,0.3) !important; }
body.theme-2 .card:active { box-shadow: 0 10px 30px -10px rgba(178,167,96,0.3), 0 40px 80px -15px rgba(178,167,96,0.55) !important; transform: translateY(-6px); border-color: var(--maroon); }
@media (hover: hover) { body.theme-2 .card:hover { box-shadow: 0 10px 30px -10px rgba(178,167,96,0.3), 0 40px 80px -15px rgba(178,167,96,0.55) !important; transform: translateY(-6px); border-color: var(--maroon); } }
body.theme-2 .btn-primary { border-radius: 24px; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 700; }
/* T2 Layout: Boxed strict grid */
body.theme-2 .hero-visual { max-width: 1400px; margin: 20px auto; border: 1px solid #e0dfda; border-radius: 24px; height: 60vh; }
body.theme-2 .slide-overlay { background: rgba(21, 18, 10, 0.85) !important; width: 400px !important; inset: auto 40px 40px auto !important; height: auto !important; border-radius: 24px; justify-content: flex-start !important; padding: 30px !important; }

/* --------------------------------------------------------------------------
   THEME 3 - Soft & Bubbly (Dots Motif)
   -------------------------------------------------------------------------- */
body.theme-3 {
  --ink: #090a07; --ivory: #f2f2ec; --ivory-2: #e6e6df; --theme-surface: var(--ivory);
  --maroon: #989d6f; --maroon-dark: #7f835b; --marigold: #a793b6;
  --peacock: #b0b8c9; --blush: #e1e3de; --muted: #696b65;
  --radius: 30px; --shadow: 0 12px 40px rgba(9, 10, 7, 0.06);
  font-family: 'Outfit', sans-serif;
}
body.theme-3 h1, body.theme-3 h2, body.theme-3 h3, body.theme-3 .display { font-family: 'Outfit', sans-serif; font-weight: 700; }
body.theme-3 .card { transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); padding-bottom: 24px; box-shadow: 0 25px 55px -15px rgba(167,147,182,0.4) !important; }
body.theme-3 .card img { border-radius: 20px 20px 8px 8px; }
body.theme-3 .card:active { transform: translateY(-8px) scale(1.02); box-shadow: 0 10px 30px -10px rgba(167,147,182,0.5), 0 45px 100px -20px rgba(167,147,182,0.75) !important; }
@media (hover: hover) { body.theme-3 .card:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 10px 30px -10px rgba(167,147,182,0.5), 0 45px 100px -20px rgba(167,147,182,0.75) !important; } }
body.theme-3 .card .add-btn { position: absolute; right: 15px; bottom: 15px; border-radius: 50%; width: 45px; height: 45px; font-size: 0; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
body.theme-3 .card .add-btn::after { content: '+'; font-size: 24px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
body.theme-3 .btn-primary { border-radius: 50px; font-weight: 600; }
/* T3 Layout: Floating soft bubble */
body.theme-3 .hero-visual { max-width: 95%; margin: 30px auto; border-radius: 40px; overflow: hidden; height: 65vh; box-shadow: 0 20px 50px rgba(9, 10, 7, 0.15); }
body.theme-3 .slide-overlay { align-items: center !important; justify-content: center !important; text-align: center !important; background: linear-gradient(to top, rgba(9,10,7,0.6), transparent) !important; }
body.theme-3 .slide-overlay h3 { font-size: 3.5rem !important; }

/* --------------------------------------------------------------------------
   THEME 4 - Minimalist (Solid Thin Line)
   -------------------------------------------------------------------------- */
body.theme-4 {
  --ink: #150f11; --ivory: #f5f0f2; --ivory-2: #e8e1e4; --theme-surface: var(--ivory);
  --maroon: #9d797f; --maroon-dark: #83656a; --marigold: #94b19f;
  --peacock: #b7c5b0; --blush: #e6dfe1; --muted: #736b6d;
  --radius: 4px; --shadow: none;
  font-family: 'Inter', sans-serif;
}
body.theme-4 h1, body.theme-4 h2, body.theme-4 h3, body.theme-4 .display { font-family: 'Inter', sans-serif; font-weight: 700; letter-spacing: -1px; }
body.theme-4 header { background: transparent; backdrop-filter: none; border-bottom: 1px solid var(--ivory-2); }
body.theme-4 .card { border: 1px solid transparent; background: transparent; transition: opacity 0.3s; padding: 0; box-shadow: 0 20px 45px -15px rgba(21,15,17,0.2) !important; }
body.theme-4 .card img { border-radius: 24px 24px 0 0; }
body.theme-4 .card:active { opacity: 1; transform: translateY(-6px); box-shadow: 0 10px 30px -10px rgba(21,15,17,0.3), 0 40px 80px -15px rgba(21,15,17,0.45) !important; }
@media (hover: hover) { body.theme-4 .card:hover { opacity: 1; transform: translateY(-6px); box-shadow: 0 10px 30px -10px rgba(21,15,17,0.3), 0 40px 80px -15px rgba(21,15,17,0.45) !important; } }
body.theme-4 .card .add-btn { background: transparent; color: var(--ink); box-shadow: none; padding: 0; border-bottom: 1px solid var(--ink); border-radius: 24px; font-weight: bold; text-transform: uppercase; font-size: 0.75rem; }
body.theme-4 .card .add-btn:hover { background: transparent; color: var(--maroon); border-color: var(--maroon); }
body.theme-4 .card .price { font-weight: normal; color: var(--muted); }
body.theme-4 .btn-primary { border-radius: 24px; border: 1px solid var(--ink); background: transparent; color: var(--ink); box-shadow: none; }
body.theme-4 .btn-primary:hover { background: var(--ink); color: var(--ivory); }
/* T4 Layout: Split Screen & Sparse Grid */
body.theme-4 .hero-visual { height: 70vh; margin-top: 40px; }
body.theme-4 .slide-overlay { inset: 0 !important; background: linear-gradient(to top, rgba(234, 237, 231, 0.9) 0%, transparent 70%) !important; justify-content: flex-end !important; padding: 40px !important; color: var(--ink) !important; }
body.theme-4 .slide-overlay h3 { color: var(--ink) !important; font-size: 3.5rem !important; text-shadow: none !important; letter-spacing: -2px !important; }
body.theme-4 .slide-overlay p { color: var(--muted) !important; text-shadow: none !important; font-size: 1.1rem !important; }
body.theme-4 .hero-slide img { width: 50% !important; left: 50% !important; }
body.theme-4 .grid { grid-template-columns: repeat(3, 1fr) !important; gap: 60px !important; }
body.theme-4 .card img { filter: grayscale(100%); transition: filter 0.3s; }
body.theme-4 .card:hover img { filter: grayscale(0%); }
body.theme-4 .card .card-body { text-align: center; align-items: center; }

/* --------------------------------------------------------------------------
   THEME 5 - Neo-brutalism (Checker Motif)
   -------------------------------------------------------------------------- */
body.theme-5 { --ink: #000; --ivory: #fff; --ivory-2: #f4f4f5; --theme-surface: var(--ivory); --maroon: #52525b; --maroon-dark: #27272a; --marigold: #a1a1aa; background: var(--ivory); color: var(--ink); }
body.theme-5 h1, body.theme-5 h2, body.theme-5 h3, body.theme-5 .display { font-family: 'Inter', sans-serif; font-weight: 900; text-transform: uppercase; letter-spacing: -2px; }
body.theme-5 .card { border-radius: 24px; border: none; box-shadow: none !important; background: transparent; padding: 0; overflow: hidden; transition: transform 0.3s; }
body.theme-5 .card img { border-radius: 24px 24px 0 0; width: 100%; aspect-ratio: 3/4; object-fit: cover; transition: filter 0.3s; }
body.theme-5 .card .card-body { padding: 20px 0; background: transparent; text-align: left; display: flex; flex-direction: column; align-items: flex-start; }
body.theme-5 .card:hover { transform: translateY(-10px); }
body.theme-5 .card:hover img { filter: contrast(1.1) grayscale(0.2); }
body.theme-5 .btn-primary, body.theme-5 .card .add-btn { border-radius: 30px; border: 2px solid #000; background: #000; color: #fff; font-weight: 900; text-transform: uppercase; box-shadow: none; transition: all 0.3s; }
body.theme-5 .btn-primary:hover, body.theme-5 .card .add-btn:hover { background: var(--ivory); color: #000; }
body.theme-5 header { background: var(--ivory); border-bottom: 2px solid #000; backdrop-filter: none; }
body.theme-5 .hero-visual { border-radius: 24px; border: 4px solid #000; height: 75vh; }
body.theme-5 .slide-overlay { background: transparent !important; color: #000 !important; align-items: flex-start !important; justify-content: flex-end !important; padding: 40px !important; text-shadow: none !important; }
body.theme-5 .slide-overlay h3 { color: #000 !important; font-size: 4rem !important; font-weight: 900; line-height: 1; margin-bottom: 20px; background: var(--ivory); padding: 10px 20px; border: 2px solid #000; }
body.theme-5 .slide-overlay p { display: none; }

/* --------------------------------------------------------------------------
   THEME 6 - Elegant Float (Diamond Motif)
   -------------------------------------------------------------------------- */
body.theme-6 {
  --ink: #090a09; --ivory: #f2f6f4; --ivory-2: #e4ebe7; --theme-surface: var(--ivory);
  --maroon: #51b977; --maroon-dark: #439b63; --marigold: #4aea85;
  --peacock: #8ae3ab; --blush: #dcf0e4; --muted: #646b65;
  --radius: 12px; --shadow: 0 20px 40px rgba(81, 185, 119, 0.15);
}
body.theme-6 .card { transition: transform 0.5s ease, box-shadow 0.5s ease; border-bottom: 3px solid transparent; background: rgba(255,255,255,0.7); backdrop-filter: blur(10px); box-shadow: 0 25px 55px -15px rgba(81, 185, 119, 0.3) !important; }
body.theme-6 .card:active { transform: translateY(-12px); box-shadow: 0 10px 30px -10px rgba(81, 185, 119, 0.4), 0 45px 95px -15px rgba(81, 185, 119, 0.6) !important; border-bottom: 3px solid var(--maroon); }
@media (hover: hover) { body.theme-6 .card:hover { transform: translateY(-12px); box-shadow: 0 10px 30px -10px rgba(81, 185, 119, 0.4), 0 45px 95px -15px rgba(81, 185, 119, 0.6) !important; border-bottom: 3px solid var(--maroon); } }
body.theme-6 header { background: rgba(248, 250, 249, 0.6); backdrop-filter: blur(12px); border-bottom: none; }
/* T6 Layout: Elegant Glass Float */
body.theme-6 .hero-visual { height: 80vh; max-width: 1400px; margin: 40px auto; border-radius: 20px; }
body.theme-6 .slide-overlay { inset: auto 40px 40px 40px !important; height: auto !important; background: rgba(255,255,255,0.2) !important; backdrop-filter: blur(20px); border-radius: 20px; border: 1px solid rgba(255,255,255,0.4); justify-content: center !important; align-items: center !important; text-align: center !important; padding: 40px !important; }
body.theme-6 .slide-overlay h3 { font-size: 2.5rem !important; }


body.theme-7 .btn-primary, body.theme-7 .card .add-btn {
  border-radius: 50px; background: linear-gradient(90deg, #ff007f, #8a2be2); border: none; color: #fff; font-weight: 700; text-transform: uppercase;
  box-shadow: 0 10px 20px rgba(138, 43, 226, 0.3); transition: all 0.3s;
}
body.theme-7 .btn-primary:hover, body.theme-7 .card .add-btn:hover { box-shadow: 0 15px 30px rgba(255, 0, 127, 0.5); transform: scale(1.05); }
body.theme-7 .hero-visual { border-radius: 30px; box-shadow: 0 0 80px rgba(138, 43, 226, 0.2); border: 1px solid rgba(255,255,255,0.1); }
body.theme-7 .slide-overlay { background: linear-gradient(to top, rgba(10,10,12,0.9), transparent) !important; color: #fff !important; }
body.theme-7 footer { background-color: #0b0514 !important; border-top: 1px solid rgba(255,255,255,0.05); }
body.theme-7 footer p, body.theme-7 footer li, body.theme-7 footer .foot-bottom, body.theme-7 footer .logo { color: rgba(255,255,255,0.6) !important; }


/* --------------------------------------------------------------------------
   THEME 8 - Dreamy (Scallop Motif)
   -------------------------------------------------------------------------- */
body.theme-8 {
  --ink: #12140f; --ivory: #f2f4f0; --ivory-2: #e4e8e1; --theme-surface: var(--ivory);
  --maroon: #899274; --maroon-dark: #727a60; --marigold: #a096ad;
  --peacock: #adb4bf; --blush: #dfdcd7; --muted: #6e7368;
  --radius: 20px; --shadow: 0 10px 30px rgba(137, 146, 116, 0.1);
  font-family: 'Outfit', sans-serif;
}
body.theme-8 h1, body.theme-8 h2, body.theme-8 h3, body.theme-8 .display { font-family: 'Playfair Display', serif; font-style: italic; }
body.theme-8 .card { transition: all 0.4s ease; border-radius: 20px; overflow: hidden; background: var(--ivory); box-shadow: 0 25px 55px -15px rgba(137, 146, 116, 0.35) !important; }
body.theme-8 .card img { border-radius: 20px 20px 0 0; }
body.theme-8 .card:active { transform: scale(1.02) rotate(1deg) translateY(-4px); box-shadow: 0 10px 30px -10px rgba(137, 146, 116, 0.4), 0 45px 100px -15px rgba(137, 146, 116, 0.6) !important; }
@media (hover: hover) { body.theme-8 .card:hover { transform: scale(1.02) rotate(1deg) translateY(-4px); box-shadow: 0 10px 30px -10px rgba(137, 146, 116, 0.4), 0 45px 100px -15px rgba(137, 146, 116, 0.6) !important; } }
body.theme-8 .btn-primary { border-radius: 30px; box-shadow: 0 4px 10px rgba(137, 146, 116, 0.4); text-transform: capitalize; font-family: 'Playfair Display', serif; font-style: italic; font-size: 1.1rem; }
body.theme-8 .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(137, 146, 116, 0.5); }
/* T8 Layout: Dreamy Portrait */
body.theme-8 .hero-visual { height: 90vh; }
body.theme-8 .slide-overlay { background: linear-gradient(to top, rgba(18,20,15,0.7) 0%, transparent 80%) !important; justify-content: flex-end !important; align-items: center !important; text-align: center !important; padding-bottom: 60px !important; }
body.theme-8 .slide-overlay h3 { font-size: 5rem !important; font-style: italic !important; font-weight: 400 !important; letter-spacing: 2px !important; }

/* ==========================================================================
   MODERN ANIMATION & UI SYSTEM
   Global scroll reveals, cinematic hero, micro-interactions, per-theme nav
   ========================================================================== */

/* --------------------------------------------------------------------------
   HIDE MOTIF BORDERS GLOBALLY - replaced by clean geometry & animation
   -------------------------------------------------------------------------- */
/* Motif borders hidden on all custom themes - only default theme keeps mandala */
/* (the block above already has: body[class*="theme-"] .motif-border { display: none !important; }) */

/* Animated drift keyframe kept for future use */
@keyframes motifDrift {
  from { background-position-x: 0; }
  to   { background-position-x: 200px; }
}

/* --------------------------------------------------------------------------
   SCROLL REVEAL SYSTEM
   -------------------------------------------------------------------------- */
.reveal-hidden {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-hidden.reveal-visible { opacity: 1; transform: translateY(0); }
/* Reveal delays for the grid to create a cascade effect */
.reveal-hidden:nth-child(1) { transition-delay: 0.0s; }
.reveal-hidden:nth-child(2) { transition-delay: 0.07s; }
.reveal-hidden:nth-child(3) { transition-delay: 0.14s; }
.reveal-hidden:nth-child(4) { transition-delay: 0.21s; }
.reveal-hidden:nth-child(5) { transition-delay: 0.28s; }
.reveal-hidden:nth-child(6) { transition-delay: 0.35s; }
.reveal-hidden:nth-child(7) { transition-delay: 0.42s; }
.reveal-hidden:nth-child(8) { transition-delay: 0.49s; }

/* --------------------------------------------------------------------------
   MOBILE RESPONSIVE OVERRIDES FOR THEMES
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* Global theme safeguards for mobile banners/sliders */
  body[class*="theme-"] .slide-overlay h3 { font-size: 2.2rem !important; line-height: 1.1 !important; margin-bottom: 12px !important; padding: 0 !important; }
  body[class*="theme-"] .slide-overlay p { font-size: 1rem !important; margin-bottom: 16px !important; padding: 0 !important; }
  body[class*="theme-"] .slide-overlay { padding: 24px !important; justify-content: flex-end !important; }

  /* Theme 1 */
  body.theme-1 .slide-overlay { padding-bottom: 40px !important; }
  
  /* Theme 2 */
  body.theme-2 .slide-overlay { width: auto !important; inset: 0 !important; }

  /* Theme 4 */
  body.theme-4 .grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
  body.theme-4 .hero-slide img { width: 100% !important; left: 0 !important; }
  body.theme-4 .slide-overlay { inset: 0 !important; background: linear-gradient(to top, rgba(234, 237, 231, 0.95) 0%, transparent 60%) !important; justify-content: flex-end !important; padding: 24px !important; }
  body.theme-4 .hero-visual { height: 50vh; }

  /* Theme 5 */
  body.theme-5 .slide-overlay h3 { font-size: 2.4rem !important; padding: 8px 12px !important; }
  
  
}

@media (max-width: 600px) {
  body.theme-4 .grid { gap: 12px !important; }
  body.theme-7 .grid { gap: 8px !important; }
}
@media (max-width: 380px) {
  body.theme-4 .grid { gap: 8px !important; }
}

/* Safe micro-interaction - never lets buttons go invisible */
body[class*="theme-"] .hero::before { display: none !important; }
body[class*="theme-"] button:active,
body[class*="theme-"] .add-btn:active,
body[class*="theme-"] .primary-btn:active,
body[class*="theme-"] [class*="btn"]:active {
  transform: translateY(1px) scale(0.97);
  opacity: 1 !important;
  filter: brightness(0.88);
}

/* --------------------------------------------------------------------------
   PER-THEME GLASS NAV - each theme tints the frosted glass differently
   -------------------------------------------------------------------------- */
body.theme-1 header { background: rgba(10,10,12,0.82); border-bottom: 1px solid rgba(212,175,55,0.12); }
body.theme-2 header { background: rgba(253,253,251,0.82); border-bottom: 1px solid rgba(178,167,96,0.18); }
body.theme-3 header { background: rgba(250,250,248,0.84); border-bottom: 1px solid rgba(167,147,182,0.2); border-radius: 0 0 24px 24px; }
body.theme-4 header { background: rgba(255,255,255,0.90); backdrop-filter: blur(24px) saturate(120%); -webkit-backdrop-filter: blur(24px) saturate(120%); border-bottom: 1px solid rgba(21,15,17,0.05); box-shadow: none; }
body.theme-5 header { background: var(--ivory) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-bottom: 3px solid var(--ink) !important; box-shadow: none !important; }
body.theme-5 header::after { display: none; }
body.theme-6 header { background: rgba(248,250,249,0.68); border-bottom: 1px solid rgba(81,185,119,0.2); box-shadow: 0 8px 32px rgba(81,185,119,0.08); }
body.theme-7 header { background: rgba(13,10,10,0.90) !important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255,255,255,0.06); box-shadow: none; }



body.theme-8 header { background: rgba(247,248,246,0.78); border-bottom: 1px solid rgba(137,146,116,0.18); }

/* --------------------------------------------------------------------------
   THEME 8 - Cinematic hero: slow continuous zoom
   -------------------------------------------------------------------------- */
@keyframes cinematicZoom { from { transform: scale(1); } to { transform: scale(1.08); } }
body.theme-8 .hero-slide.active img { animation: cinematicZoom 18s ease-in-out infinite alternate; }
body.theme-8 .hero-slide.active > div[style*="background-image"] { animation: cinematicZoom 18s ease-in-out infinite alternate; }

/* --------------------------------------------------------------------------
   THEME 6 - Levitating / breathing cards
   -------------------------------------------------------------------------- */
@keyframes levitate {
  0%, 100% { transform: translateY(0);  box-shadow: 0 10px 30px rgba(81,185,119,0.10); }
  50%       { transform: translateY(-7px); box-shadow: 0 24px 48px rgba(81,185,119,0.20); }
}
body.theme-6 .card { animation: levitate 4s ease-in-out infinite; }
body.theme-6 .card:nth-child(2) { animation-delay: 0.5s; }
body.theme-6 .card:nth-child(3) { animation-delay: 1.0s; }
body.theme-6 .card:nth-child(4) { animation-delay: 1.5s; }
body.theme-6 .card:hover { animation-play-state: paused; }

/* --------------------------------------------------------------------------
   THEME 5 - Aggressive tilt on hover
   -------------------------------------------------------------------------- */
body.theme-5 .card { transition: transform 0.12s ease, background 0.12s ease !important; }
body.theme-5 .card:hover { transform: translate(-4px,-4px) skewX(-1deg) !important; box-shadow: 6px 6px 0 var(--ink) !important; background: var(--marigold) !important; }

/* --------------------------------------------------------------------------
   THEME 4 - Slow dramatic colour reveal
   -------------------------------------------------------------------------- */
body.theme-4 .card img { transition: filter 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1) !important; filter: grayscale(100%) brightness(0.88); }
body.theme-4 .card:hover img { filter: grayscale(0%) brightness(1) !important; transform: scale(1.04) !important; }

/* --------------------------------------------------------------------------
   THEME 3 - Bouncy pop + warm glow
   -------------------------------------------------------------------------- */
@keyframes bouncePop { 0% { transform: scale(1); } 45% { transform: scale(1.07); } 70% { transform: scale(0.98); } 100% { transform: scale(1.04); } }
body.theme-3 .card:hover { animation: bouncePop 0.45s cubic-bezier(0.34,1.56,0.64,1) forwards; box-shadow: 0 30px 60px -15px rgba(167,147,182,0.6) !important; }

/* --------------------------------------------------------------------------
   THEME 1 - Smooth lift with warm shadow bloom
   -------------------------------------------------------------------------- */
body.theme-1 .card { transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), box-shadow 0.35s cubic-bezier(0.22,1,0.36,1) !important; }
body.theme-1 .card:hover { transform: translateY(-8px) !important; box-shadow: 0 25px 60px -10px rgba(172,100,89,0.45) !important; }

/* --------------------------------------------------------------------------
   GLOBAL HERO SLIDE - text elements cascade in on active slide
   -------------------------------------------------------------------------- */
@keyframes fadeSlideUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
.hero-slide.active .slide-overlay > * { animation: fadeSlideUp 0.85s cubic-bezier(0.22,1,0.36,1) both; }
.hero-slide.active .slide-overlay > *:nth-child(2) { animation-delay: 0.15s; }
.hero-slide.active .slide-overlay > *:nth-child(3) { animation-delay: 0.28s; }
.hero-slide.active .slide-overlay > *:nth-child(4) { animation-delay: 0.40s; }

/* --------------------------------------------------------------------------
   SECTION HEADERS - animated underline reveal on scroll
   -------------------------------------------------------------------------- */
.section-head h2::after {
  content: '';
  display: block;
  width: 0;
  height: 3px;
  background: var(--maroon);
  margin-top: 8px;
  transition: width 0.7s cubic-bezier(0.22,1,0.36,1) 0.3s;
  border-radius: 2px;
}
.section-head.reveal-visible h2::after { width: 56px; }

/* ==========================================================================
   THEME 9: ORGANIC LIQUID
   ========================================================================== */
body.theme-9 {
  --ivory: #f0f4f2;
  --ivory-2: #e1e9e5;
  --ink: #0f1412;
  --maroon: #698f7e;
  --maroon-dark: #4b6d5c;
  --marigold: #adc1b7;
}
body.theme-9 {
  font-family: 'Outfit', sans-serif;
}
body.theme-9 h1, body.theme-9 h2, body.theme-9 h3, body.theme-9 .display { font-family: 'Outfit', sans-serif; font-weight: 500; letter-spacing: -1px; }

/* T9 UI specific */
body.theme-9 .btn-primary { border-radius: 40px; }
body.theme-9 .slide-overlay { align-items: flex-start !important; justify-content: flex-end !important; text-align: left !important; padding: 60px 40px !important; }
body.theme-9 header { background: rgba(240, 244, 242, 0.8); backdrop-filter: blur(15px); border-bottom: none; }














/* --------------------------------------------------------------------------
   THEME 7 - Liquid Glass (Ethereal Pearl / Light Neutral)
   -------------------------------------------------------------------------- */
body.theme-7 { 
  --ink: #1e1e24; 
  --ivory: #F9FAFA; 
  --theme-surface: rgba(255, 255, 255, 0.4); 
  --maroon: #2C3A47; 
  --peacock: #1e1e24;
  --muted: #4B5563;
  --marigold: #D3C9C1; --theme-footer-text: var(--ink); 
  background: radial-gradient(120% 120% at 50% -10%, #FFFFFF 0%, #E8ECEE 100%);
  color: var(--ink); 
}
body.theme-7 h1, body.theme-7 h2, body.theme-7 h3, body.theme-7 .display { 
  font-family: 'Outfit', sans-serif; 
  font-weight: 300; 
  letter-spacing: -0.02em; 
}
body.theme-7 .card, body.theme-7 .cat-card {
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 20px 40px rgba(0,0,0,0.03), inset 0 2px 2px rgba(255,255,255,1) !important;
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, box-shadow;
}
body.theme-7 .card:hover, body.theme-7 .cat-card:hover { 
  transform: translateY(-8px) scale(1.02); 
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.05), inset 0 2px 3px rgba(255, 255, 255, 1) !important; 
  border: 1px solid rgba(255, 255, 255, 1);
}
body.theme-7 .modal {
  background: rgba(255, 255, 255, 0.50);
  backdrop-filter: blur(40px) saturate(200%);
  -webkit-backdrop-filter: blur(40px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, 1);
  box-shadow: 0 30px 60px rgba(0,0,0,0.08), inset 0 2px 5px rgba(255,255,255,1) !important;
  color: #333 !important;
}
body.theme-7 .modal h2, 
body.theme-7 .modal .price, 
body.theme-7 .modal .old-price,
body.theme-7 .modal p, 
body.theme-7 .modal .meta,
body.theme-7 .modal .eyebrow,
body.theme-7 .modal label,
body.theme-7 .modal .val,
body.theme-7 .modal .variant-btn,
body.theme-7 .modal .stock-note,
body.theme-7 .modal div[style*="color:var(--maroon)"] { 
  color: #1e1e24 !important; 
  font-weight: 700 !important;
}
body.theme-7 .modal .variant-btn.active {
  color: #ffffff !important;
}
body.theme-7 .modal .description-box,
body.theme-7 .modal .delivery-return-box,
body.theme-7 .modal .delivery-box {
  background: rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  box-shadow: inset 0 1px 4px rgba(255, 255, 255, 0.3) !important;
}
body.theme-7 .card .card-body { 
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255, 255, 255, 0.4);
  padding: 24px; text-align: center; color: var(--ink); 
}
body.theme-7 .fig { color: var(--ink); }
body.theme-7 .fig .lbl { color: #555; font-weight: 500; }
body.theme-7 .fig .num { color: #222; }
body.theme-7 .btn-primary, body.theme-7 .card .add-btn {
  border-radius: 30px; 
  background: rgba(120, 125, 130, 0.4); 
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.3); 
  color: var(--ink); 
  font-weight: 700; 
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); 
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
body.theme-7 .btn-primary:hover, body.theme-7 .card .add-btn:hover { 
  background: rgba(120, 125, 130, 0.65);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); 
  transform: translateY(-3px) scale(1.02);
}
body.theme-7 .hero-visual { 
  border-radius: 40px; 
  box-shadow: 0 20px 80px rgba(0, 0, 0, 0.04); 
  border: 1px solid rgba(255,255,255,0.6); 
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(30px);
}
body.theme-7 .slide-overlay { 
  background: transparent !important; 
  color: var(--ink) !important; 
  align-items: flex-start !important;
  justify-content: flex-end !important;
  text-align: left !important;
  padding: 40px !important;
  text-shadow: 0 4px 15px rgba(255,255,255,0.8), 0 0 30px rgba(255,255,255,0.6) !important;
}
body.theme-7 header {
  background: rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: blur(30px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.8) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
}
body.theme-7 .user-menu-popover,
body.theme-7 .notif-dropdown {
  background: rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: blur(30px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08) !important;
}
body.theme-7 .bottom-nav-item {
  color: var(--muted) !important;
  font-weight: 700 !important;
}
body.theme-7 .bottom-nav-item svg {
  stroke-width: 2.5 !important;
}
body.theme-7 .bottom-nav-item.active {
  color: var(--ink) !important;
}
body.theme-7 footer { 
  background-color: transparent !important; 
  backdrop-filter: blur(40px) saturate(180%);
  border-top: 1px solid rgba(255,255,255,0.5); 
}



/* Heavy image filters removed for better scroll performance */



/* Bulletproof Footer Text Visibility for Theme 7 */
body.theme-7 footer, 
body.theme-7 footer p, 
body.theme-7 footer li, 
body.theme-7 footer a, 
body.theme-7 footer h4, 
body.theme-7 footer .foot-bottom, 
body.theme-7 footer .logo,
body.theme-7 footer .logo span {
  color: #1e1e24 !important;
}



/* Theme 7 specific fix for page banners (Shop/About/Contact) */
body.theme-7 .page-banner:not(.banner-image-active) {
  background: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5) !important;
}


/* ==========================================================================
   CONTACT PAGE OVERRIDES FOR CUSTOM THEMES
   ========================================================================== */
body[class*="theme-"] .glass-btn-submit {
  background: var(--maroon);
  color: var(--ivory);
  border-color: var(--marigold);
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
body[class*="theme-"] .glass-btn-submit:hover {
  background: var(--maroon-dark);
}
body[class*="theme-"] .glass-pill-card,
body[class*="theme-"] .pearl-form-container {
  background: color-mix(in srgb, var(--ivory-2) 80%, transparent) !important;
  border-color: color-mix(in srgb, var(--marigold) 30%, transparent) !important;
  color: var(--ink) !important;
}
body[class*="theme-"] .glass-pill-card.info-pill h4 {
  color: var(--maroon) !important;
}
body[class*="theme-"] .glass-pill-card.info-pill:hover {
  background: var(--ivory-2) !important;
}