/* ============================================================
   Metta Pic v14.2 — FORCE NAVY everywhere
   Overrides remaining pure-black UI from older CSS layers
   ============================================================ */

:root {
  --mp-navy: #07152f;
  --mp-orange: #ff6b35;
  --black: #07152f;
  --ink: #07152f;
}

/* ---- Soft orange side glow (random sections) ---- */
body.mp-theme::before,
body.mp-home::before {
  content: '';
  position: fixed;
  top: 18%;
  right: -80px;
  width: 180px;
  height: 280px;
  background: radial-gradient(ellipse at center, rgba(255,107,53,0.09) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
body.mp-theme::after {
  content: '';
  position: fixed;
  bottom: 12%;
  left: -70px;
  width: 160px;
  height: 240px;
  background: radial-gradient(ellipse at center, rgba(255,107,53,0.07) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
main, .site-header, footer, .mp-qck-sheet { position: relative; z-index: 1; }

/* ---- HEADER floating pill — light bar + navy ends ---- */
body .site-header,
body[data-page="home"] .site-header,
body[data-page="inner"] .site-header,
body:not([data-page="home"]) .site-header,
body:not([data-page="home"]) .site-header.scrolled,
body .site-header.scrolled {
  position: fixed !important;
  top: 14px !important;
  left: 20px !important;
  right: 20px !important;
  width: auto !important;
  max-width: calc(100% - 40px) !important;
  margin: 0 auto !important;
  height: auto !important;
  background: #f0f2f6 !important;
  color: #07152f !important;
  border: none !important;
  border-radius: 999px !important;
  box-shadow: 0 10px 36px rgba(7,21,47,0.12) !important;
  backdrop-filter: blur(12px) !important;
  z-index: 9999 !important;
}
body .site-header .header-inner {
  height: 58px !important;
  padding: 0 8px 0 16px !important;
  max-width: none !important;
}
/* logo side navy pill end */
body .site-header .brand {
  background: #07152f !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 6px 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-left: 4px !important;
}
body .site-header .brand strong,
body .site-header .brand small { color: #fff !important; }
body .site-header .brand-logo {
  filter: brightness(0) invert(1) !important;
  max-height: 28px !important;
}
/* nav links navy */
body .site-header .desktop-nav a {
  color: #07152f !important;
  font-weight: 700 !important;
  font-size: 13px !important;
}
body .site-header .desktop-nav a:hover,
body .site-header .desktop-nav a.active {
  color: #ff6b35 !important;
}
/* action cluster — navy rounded ends */
body .site-header .header-actions {
  background: #07152f !important;
  border-radius: 999px !important;
  padding: 4px 6px !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}
body .site-header .header-actions a,
body .site-header .header-actions button,
body .site-header .header-cart,
body .site-header .header-icon,
body .site-header .header-login-btn,
body .site-header .menu-toggle {
  background: transparent !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
}
body .site-header .header-actions svg,
body .site-header .header-cart svg,
body .site-header .header-icon svg {
  stroke: #fff !important;
  color: #fff !important;
}
body .site-header .menu-toggle span {
  background: #fff !important;
}
body .site-header .cart-count,
body .site-header .mp-cart-count {
  background: #ff6b35 !important;
  color: #fff !important;
  border: 2px solid #07152f !important;
}
/* dropdown menus */
.nav-dropdown-menu,
.desktop-nav .sub-menu,
.mp-nav-dropdown {
  background: #07152f !important;
  border-radius: 16px !important;
  border: none !important;
  box-shadow: 0 16px 40px rgba(7,21,47,0.3) !important;
}
.nav-dropdown-menu a,
.desktop-nav .sub-menu a {
  color: rgba(255,255,255,.85) !important;
}
.nav-dropdown-menu a:hover {
  color: #ff6b35 !important;
  background: rgba(255,255,255,.06) !important;
}

/* search overlay navy not pure black */
.mp-search-overlay,
.mp-search-modal,
.mp-search-panel,
#mpSearchOverlay {
  background: rgba(7,21,47,0.96) !important;
}

/* ---- FORCE all #111 / black UI → navy ---- */
.mp-variants .mp-size-item:has(input:checked),
.mp-variants .mp-size-item.is-active,
.mp-size-item input:checked + .mp-size-box,
.mp-size-item.is-active .mp-size-box,
.mp-variants .mp-bl-choice:has(input:checked),
.mp-bl-choice input:checked + span,
.mp-variants .mp-bl-choice.is-active,
.mp-option-choice input:checked + .mp-option-box,
.mp-size-chip input:checked + .mp-option-box {
  background: #07152f !important;
  border-color: #07152f !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(7,21,47,0.22) !important;
}
.mp-size-box,
.mp-bl-choice span,
.mp-option-box {
  box-shadow: none !important;
  border: 1.5px solid #d5dce8 !important;
  background: #fff !important;
  color: #07152f !important;
  border-radius: 14px !important;
}
.mp-color-dot.is-active {
  border-color: transparent !important;
  background: var(--swatch, #07152f) !important;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--swatch, #07152f) !important;
}

/* Final price bar — navy, smaller type */
.mp-variants .mp-var-total,
.mp-var-total,
#mpVariantTotal {
  background: #07152f !important;
  color: #fff !important;
}
.mp-variants .mp-var-total {
  padding: 10px 14px !important;
  border-radius: 14px !important;
  margin-top: 12px !important;
}
.mp-variants .mp-var-total span {
  color: rgba(255,255,255,.7) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}
.mp-variants .mp-var-total strong,
#mpVariantTotal {
  font-size: 15px !important;
  font-weight: 900 !important;
  color: #fff !important;
  letter-spacing: -0.01em !important;
}

/* Sticky floating price — compact */
.mp-sticky-price {
  background: #fff !important;
  border-top: 1px solid #e2e8f0 !important;
  box-shadow: 0 -8px 28px rgba(7,21,47,0.1) !important;
  padding: 0 !important;
}
.mp-sticky-price-inner {
  padding: 8px 12px !important;
  gap: 10px !important;
  max-width: 520px !important;
}
.mp-sticky-price-inner > span {
  font-size: 11px !important;
  color: #6b7a94 !important;
  font-weight: 700 !important;
}
#mpStickyPriceVal,
.mp-sticky-price strong {
  font-size: 14px !important;
  font-weight: 900 !important;
  color: #07152f !important;
}
.mp-sticky-buy {
  padding: 8px 14px !important;
  font-size: 12px !important;
  border-radius: 10px !important;
  background: #07152f !important;
  min-height: 36px !important;
}
.mp-sticky-buy:hover { background: #ff6b35 !important; }

/* Price typing colors */
.mp-price-typing.mp-price-up { color: #16a34a !important; }
.mp-price-typing.mp-price-down { color: #dc2626 !important; }
.mp-var-total .mp-price-typing.mp-price-up,
#mpVariantTotal.mp-price-typing.mp-price-up { color: #4ade80 !important; }
.mp-var-total .mp-price-typing.mp-price-down,
#mpVariantTotal.mp-price-typing.mp-price-down { color: #f87171 !important; }

/* Product title smaller */
.mp-single-info h1,
.single-product .product_title,
.mp-single-product h1 {
  font-size: 26px !important;
  line-height: 1.35 !important;
  color: #07152f !important;
  font-weight: 900 !important;
}
@media (max-width: 768px) {
  .mp-single-info h1,
  .single-product .product_title { font-size: 22px !important; }
}

/* Buy button navy */
.single_add_to_cart_button,
.mp-buy-now,
button.single_add_to_cart_button {
  background: #07152f !important;
  color: #fff !important;
  border-radius: 14px !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  padding: 14px 20px !important;
  box-shadow: 0 8px 24px rgba(7,21,47,0.2) !important;
}
.single_add_to_cart_button:hover {
  background: #ff6b35 !important;
}

/* Custom order / dark boxes → navy */
.mp-custom-order-box,
.mp-product-custom-cta,
[class*="custom-order"],
.mp-final-box,
.mp-cta-dark,
.mp-about-cta-box,
section.mp-cta,
.mp-home-cta,
.mp-final-cta .mp-final-box {
  background: #07152f !important;
  color: #fff !important;
  border-color: #07152f !important;
}

/* Tabs product page */
.mp-product-tabs .is-active,
.mp-tab-btn.is-active {
  background: #07152f !important;
  color: #fff !important;
}

/* FAQ icons */
.faq-item summary::before,
.mp-faq-item .icon {
  background: #07152f !important;
  color: #fff !important;
}

/* Footer already navy — reinforce */
.site-footer,
footer.site-footer,
.footer-main {
  background: #07152f !important;
}
.footer-bottom {
  background: #050e1f !important;
}

/* Hero gradient prettier + subtle pattern */
.mp-hero2 .mp-hero-overlay {
  background:
    radial-gradient(ellipse 80% 60% at 90% 20%, rgba(255,107,53,0.18) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 10% 80%, rgba(255,107,53,0.08) 0%, transparent 50%),
    repeating-linear-gradient(
      125deg,
      transparent 0,
      transparent 18px,
      rgba(255,255,255,0.012) 18px,
      rgba(255,255,255,0.012) 19px
    ),
    linear-gradient(145deg, rgba(7,21,47,0.94) 0%, rgba(7,21,47,0.78) 48%, rgba(12,31,69,0.88) 100%) !important;
}
.mp-hero2 {
  background: #07152f !important;
}

/* Page hero */
.mp-page-hero {
  background:
    radial-gradient(ellipse 60% 50% at 100% 0%, rgba(255,107,53,0.15) 0%, transparent 50%),
    linear-gradient(145deg, #07152f 0%, #0c1f45 60%, #122a55 100%) !important;
}

/* Dark CTA sections on home (from screenshots) */
.mp-home-dark,
.mp-section-dark,
section[style*="background:#0"],
section[style*="background: #0"],
.mp-idea-cta,
.mp-wall-cta {
  background: #07152f !important;
}

/* Buttons in dark sections */
.mp-home-dark .btn,
.mp-wall-cta .btn,
.mp-final-box .btn {
  background: #122a55 !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
}
.mp-home-dark .btn:hover,
.mp-wall-cta .btn:hover {
  background: #ff6b35 !important;
  border-color: #ff6b35 !important;
}

/* Mobile */
@media (max-width: 900px) {
  body .site-header {
    top: 8px !important;
    left: 10px !important;
    right: 10px !important;
    max-width: calc(100% - 20px) !important;
  }
  body .site-header .header-inner { height: 52px !important; }
  body .site-header .brand { padding: 4px 10px !important; }
  .mp-page-hero { padding-top: 86px !important; }
  .mp-hero2 { padding-top: 76px !important; }
}

/* Kill leftover pure black backgrounds */
[style*="background:#111"],
[style*="background: #111"],
[style*="background:#0a0a0a"],
[style*="background:#090909"],
[style*="background:#0b0b0b"] {
  background-color: #07152f !important;
}


/* ===== COLOR DOTS MUST KEEP THEIR SWATCH COLOR WHEN SELECTED ===== */
.mp-color-dot,
button.mp-color-dot,
.mp-variants .mp-color-dot {
  background: var(--swatch, #07152f) !important;
  background-color: var(--swatch, #07152f) !important;
}
.mp-color-dot.is-active,
button.mp-color-dot.is-active,
.mp-variants .mp-color-dot.is-active {
  background: var(--swatch, #07152f) !important;
  background-color: var(--swatch, #07152f) !important;
  border-color: transparent !important;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--swatch, #07152f) !important;
  transform: scale(1.1);
  color: inherit !important;
}