/* ============================================
   MJIN LUXURY STORE - SAFE BAROQUE LUXURY THEME
   Antique Gold & Royal Black - SAFE VERSION
   ============================================ */

/* ============================================
   1. CSS VARIABLES
   ============================================ */

:root {
  --color-black-royal: #0A0A0A;
  --color-black-deep: #1A1A1A;
  --color-gold-antique: #C9A961;
  --color-gold-bright: #D4AF37;
  --color-white: #FFFFFF;
  --color-cream: #F5F1E8;
}

/* ============================================
   2. BODY & GLOBAL COLORS
   ============================================ */

body {
  background: linear-gradient(135deg, #0A0A0A 0%, #1A1A1A 25%, #2D2D2D 50%, #1A1A1A 75%, #0A0A0A 100%) !important;
  background-attachment: fixed !important;
  color: var(--color-white) !important;
  min-height: 100vh !important;
}

html {
  background: linear-gradient(135deg, #0A0A0A 0%, #1A1A1A 25%, #2D2D2D 50%, #1A1A1A 75%, #0A0A0A 100%) !important;
  background-attachment: fixed !important;
}

/* ============================================
   3. HEADER STYLING (COLORS ONLY)
   ============================================ */

.store-header {
  background-color: rgba(10, 10, 10, 0.95) !important;
  border-bottom-color: var(--color-gold-antique) !important;
}

.store-header,
.store-header * {
  color: var(--color-white) !important;
}

.store-header a {
  color: var(--color-gold-bright) !important;
}

.store-header button {
  color: var(--color-white) !important;
}

/* ============================================
   4. FOOTER STYLING (COLORS ONLY)
   ============================================ */

.store-footer {
  background: linear-gradient(180deg, #0F0F0F 0%, #1A1A1A 50%, #252525 100%) !important;
  border-top: 3px solid var(--color-gold-antique) !important;
  color: #D0D0D0 !important;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.8) !important;
}

.store-footer h3,
.store-footer h4,
.store-footer h5 {
  color: var(--color-gold-bright) !important;
}

.store-footer a {
  color: #D0D0D0 !important;
}

.store-footer a:hover {
  color: var(--color-gold-bright) !important;
}

/* ============================================
   5. MOBILE MENU (COLORS ONLY)
   ============================================ */

#mobile-menu,
.mobile-menu {
  background-color: rgba(10, 10, 10, 0.95) !important;
  border-top-color: var(--color-gold-antique) !important;
}

#mobile-menu a,
.mobile-menu a {
  color: var(--color-white) !important;
}

#mobile-menu a:hover,
.mobile-menu a:hover {
  color: var(--color-gold-bright) !important;
}

/* ============================================
   6. NAVIGATION (COLORS ONLY)
   ============================================ */

#mainnav a,
.main-nav a {
  color: var(--color-white) !important;
}

#mainnav a:hover,
.main-nav a:hover {
  color: var(--color-gold-bright) !important;
}

/* ============================================
   7. PRODUCT CARDS (COLORS ONLY)
   ============================================ */

custom-salla-product-card,
[class*="product-card"] {
  border-color: var(--color-gold-antique) !important;
  background-color: var(--color-black-deep) !important;
}

custom-salla-product-card:hover,
[class*="product-card"]:hover {
  border-color: var(--color-gold-bright) !important;
}

/* ============================================
   8. BUTTONS (COLORS ONLY)
   ============================================ */

button,
[role="button"],
.btn,
[class*="btn"] {
  background: linear-gradient(135deg, var(--color-gold-antique) 0%, var(--color-gold-bright) 100%) !important;
  color: var(--color-black-royal) !important;
  border-color: var(--color-gold-bright) !important;
}

button:hover,
[role="button"]:hover,
.btn:hover,
[class*="btn"]:hover {
  background: linear-gradient(135deg, var(--color-gold-bright) 0%, var(--color-gold-bright) 100%) !important;
}

/* ============================================
   9. TEXT COLORS
   ============================================ */

h1, h2, h3, h4, h5, h6 {
  color: var(--color-gold-bright) !important;
}

p, span, div, li {
  color: var(--color-cream) !important;
}

a {
  color: var(--color-gold-bright) !important;
}

/* ============================================
   10. ICONS & SVG
   ============================================ */

i, svg, [class*="icon"] {
  color: var(--color-white) !important;
}

i:hover, svg:hover, [class*="icon"]:hover {
  color: var(--color-gold-bright) !important;
}

/* ============================================
   11. INPUTS & FORMS
   ============================================ */

input,
textarea,
select {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(201, 169, 97, 0.3) !important;
  color: var(--color-white) !important;
}

input::placeholder,
textarea::placeholder {
  color: #A0A0A0 !important;
}

input:focus,
textarea:focus,
select:focus {
  background-color: rgba(255, 255, 255, 0.12) !important;
  border-color: var(--color-gold-bright) !important;
}

/* ============================================
   12. SECTIONS
   ============================================ */

section {
  background-color: transparent !important;
}

section h2,
section h3 {
  color: var(--color-gold-bright) !important;
}

/* ============================================
   13. BADGES & LABELS
   ============================================ */

[class*="badge"],
[class*="label"],
[class*="tag"] {
  background: linear-gradient(135deg, var(--color-gold-antique) 0%, var(--color-gold-bright) 100%) !important;
  color: var(--color-black-royal) !important;
  border-color: var(--color-gold-bright) !important;
}

/* ============================================
   14. SLIDERS & NAVIGATION BUTTONS
   ============================================ */

.swiper-button-prev,
.swiper-button-next {
  color: var(--color-gold-bright) !important;
  border-color: var(--color-gold-antique) !important;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
  color: var(--color-black-royal) !important;
  background: linear-gradient(135deg, var(--color-gold-antique) 0%, var(--color-gold-bright) 100%) !important;
}

/* ============================================
   15. INNER CONTAINERS - FOOTER
   ============================================ */

.store-footer__inner {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* ============================================
   16. MAIN NAVIGATION CONTAINER
   ============================================ */

.main-nav-container,
.main-nav-container.shadow-default,
.main-nav-container.bg-white {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: none !important;
}

.main-nav-container * {
  background-color: transparent !important;
  background-image: none !important;
}

/* ============================================
   17. SERVICES SECTION (s-block-our-services)
   ============================================ */

.s-block,
.s-block-our-services,
.s-block.s-block-our-services,
div[class*="s-block-our-services"],
section[class*="s-block-our-services"] {
  background: linear-gradient(135deg, rgba(10, 10, 10, 0.98) 0%, rgba(26, 26, 26, 0.98) 50%, rgba(10, 10, 10, 0.98) 100%) !important;
  background-color: transparent !important;
  background-image: linear-gradient(135deg, rgba(10, 10, 10, 0.98) 0%, rgba(26, 26, 26, 0.98) 50%, rgba(10, 10, 10, 0.98) 100%) !important;
  box-shadow: none !important;
  border: none !important;
  border-top: 1px solid rgba(201, 169, 97, 0.2) !important;
  border-bottom: 1px solid rgba(201, 169, 97, 0.2) !important;
}

.s-block-our-services,
.s-block.s-block-our-services {
  background: linear-gradient(135deg, rgba(10, 10, 10, 0.98) 0%, rgba(26, 26, 26, 0.98) 50%, rgba(10, 10, 10, 0.98) 100%) !important;
}

.s-block-our-services * {
  background-color: transparent !important;
  background-image: none !important;
}

.s-block-our-services h2,
.s-block-our-services h3,
.s-block-our-services h4,
.s-block-our-services h5,
.s-block-our-services h6 {
  color: var(--color-gold-bright) !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

.s-block-our-services p,
.s-block-our-services span,
.s-block-our-services li,
.s-block-our-services div {
  color: var(--color-cream) !important;
}

/* ============================================
   17. ENSURE TEXT VISIBILITY
   ============================================ */

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Force text to be visible */
.store-header,
.store-footer,
#mobile-menu,
main,
section {
  visibility: visible !important;
  opacity: 1 !important;
}