/* Prevent WordPress admin bar from covering fixed header */
html.wp-toolbar .luxury-header { top: 32px; }
@media screen and (max-width: 782px) {
  html.wp-toolbar .luxury-header { top: 46px; }
}

/* Global Uppercase Headings Across All Pages (Matching Home Page Display Header Style) */
.ms-about-hero-title,
.ms-section-title,
.ms-story-heading,
.ms-insights-title,
.ms-post-title,
.ms-sidebar-title,
.ms-cta-title,
.ms-rfq-title,
.ms-page-title,
.mzst-brand-title,
.radian-hero-title,
.radian-title,
.mzst-title,
.mzst-headline,
.mzst-card-title,
.ms-journey-heading,
.ms-journey-title,
h1.ms-about-hero-title,
h1.ms-post-title,
h2.ms-insights-title,
h2.ms-section-title {
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
}

/* Make sure Elementor containers don't add double padding */
.elementor-section.elementor-section-boxed > .elementor-container {
  max-width: 1400px;
}

/* Restore Default Compact Charcoal Pill Header Menu on Scroll */
.luxury-header.scrolled {
    background-color: transparent !important;
    padding-top: var(--sticky-header-padding-top, 0px) !important;
}

/* Ensure logo link is always visible on desktop scrolled state and transitions smoothly */
.luxury-header.header-dark .logo-link {
    display: grid !important;
}

/* Force container layout settings to override theme center-snapping */
.luxury-header.header-dark .header-container,
.luxury-header.scrolled .header-container {
    justify-content: space-between !important;
    border-radius: 23px !important; /* Preserves default capsule border-radius */
    height: var(--sticky-capsule-height, 48px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: var(--sticky-capsule-margin-top, 10px) !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    
    /* Symmetrical CSS transitions targeting individual layout properties cleanly to prevent visual flashes */
    transition: width 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                min-width 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                max-width 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                height 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                padding 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                border-radius 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                margin 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Desktop scrolled container width */
@media (min-width: 1440px) {
  .luxury-header.header-dark .header-container,
  .luxury-header.scrolled .header-container {
      width: var(--sticky-capsule-width, 48%) !important;
      min-width: var(--sticky-capsule-min-width, 600px) !important;
      max-width: var(--sticky-capsule-max-width, 700px) !important;
      padding: 0 15px !important;
      transform: translateX(0) !important;
	}
}
@media (min-width: 1024px) {
	 .luxury-header.header-dark .header-container,
  .luxury-header.scrolled .header-container {
      width: var(--sticky-capsule-width, 48%) !important;
      min-width: var(--sticky-capsule-min-width, 600px) !important;
      max-width: var(--sticky-capsule-max-width, 700px) !important;
      padding: 0 15px !important;
      transform: translateX(0) !important;
	}
 
  .luxury-header.scrolled .nav-link-desktop {
      font-size: 13px !important;
      letter-spacing: 0.08em !important;
      white-space: nowrap !important;
  }
  /* Prevent logo and menu overlap in scrolled state */
  .luxury-header.scrolled .logo-link {
      flex-shrink: 0 !important;
  }
  .luxury-header.scrolled .header-right-group,
  .luxury-header.scrolled .header-pill,
  .luxury-header.scrolled .nav-actions {
      display: flex !important;
      justify-content: flex-end !important;
      flex-grow: 1 !important;
      min-width: 0 !important;
  }
}

/* Mobile/Tablet scrolled container width & symmetrical centering */
@media (max-width: 1023px) {
  .luxury-header.header-dark .header-container,
  .luxury-header.scrolled .header-container {
      width: auto !important;
      min-width: 0 !important;
      max-width: calc(100vw - 90px) !important;
      padding-left: 16px !important;
      padding-right: 16px !important;
      left: 50% !important;
      transform: translateX(calc(-50% - 27px)) !important;
  }
  /* Show logo in mobile sticky header */
  .luxury-header.scrolled .logo-link {
      display: grid !important; /* Overrides the hide rule in theme-toggle.css */
      margin-right: 1rem !important;
      flex-shrink: 0 !important;
  }
  .luxury-header.scrolled .logo-link .logo-image-sticky {
      display: block !important;
      max-width: 70px !important; /* Compact sticky logo for mobile screen size */
      width: auto !important;
      height: 38px !important;
      opacity: 1 !important;
      visibility: visible !important;
  }
  .luxury-header.scrolled .logo-link .logo-text-wrapper {
      max-width: 0 !important;
      opacity: 0 !important;
      visibility: hidden !important;
  }
  /* Keep mobile menu toggle aligned to the right */
  .luxury-header.scrolled .header-right-group,
  .luxury-header.scrolled .header-pill,
  .luxury-header.scrolled .nav-actions {
      display: flex !important;
      justify-content: flex-end !important;
      flex-grow: 1 !important;
      min-width: 0 !important;
  }
}

/* ── Sticky Header Scrolled State: Toggle Button Floating Outside Menu Pill (Img 2) ── */
.luxury-header.scrolled .nav-actions,
.scrolled .nav-actions {
    position: relative !important;
}

.luxury-header.scrolled .ms-theme-toggle-btn,
.scrolled .ms-theme-toggle-btn {
    position: absolute !important;
    left: calc(100% + 14px) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    z-index: 9999 !important;
}

.luxury-header.scrolled .ms-theme-toggle-btn:hover,
.scrolled .ms-theme-toggle-btn:hover {
    transform: translateY(-50%) scale(1.08) !important;
}

/* Fix WP captions */
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 0.85rem; color: var(--color-text-secondary); }

/* Remove WP block library styles that may conflict */
.wp-block-image { margin: 0; }

/* Ensure the home main has no top padding (hero handles it) */
.ms-home-main { margin: 0; padding: 0; }

/* Fix admin bar colour to match theme */
#wpadminbar { background: var(--color-forest) !important; }
#wpadminbar a { color: var(--color-gold) !important; }

/* Ensure product showcase slides that use placeholder images look right */
.showcase-slide-img[src*="placehold.co"] {
  opacity: 0.85;
  filter: sepia(10%);
}

/* Ensure the origins visual container has a minimum height */
.origins-visual { min-height: 400px; }

/* Prevent Elementor padding on full-width sections */
.elementor-section.elementor-section-stretched { padding: 0; }

/* Contact form in CTA section */
.cta-sec .contact-form {
  background: rgba(253, 252, 247, 0.8);
  border: 1px solid var(--color-border);
  padding: 3rem;
  border-radius: 4px;
  backdrop-filter: blur(10px);
  max-width: 700px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Elementor Transparent Wrapper Fix for Custom Theme Sections */
.ms-home-main .elementor-section,
.ms-home-main .elementor-column,
.ms-home-main .elementor-widget-wrap,
.ms-home-main .elementor-widget,
.ms-home-main .elementor-container {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}


/* Ensure GSAP pin spacers and fixed children don't get clipped or stack incorrectly */
.ms-home-main .elementor-widget-wrap,
.ms-home-main .elementor-widget {
    overflow: visible !important;
}

.capabilities-sec {
    position: relative !important;
    width: 100% !important;
}
.cap-pin-container {
    position: relative;
    height: 100vh !important;
    width: 100% !important;
    overflow: hidden !important;
}

/* Section stacking — removed to prevent overlap conflicts */

/* Fix Unified Hero text layer centering */
.hsf-text-layer.hero-content {
    max-width: 1400px;
    margin: 0 auto;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
}

/* =========================================================
   MS — EDITORIAL ARCHIVE (Tailwind CDN Port in use)
========================================================= */

/* --- HEADER OVERRIDES MIGRATED FROM THEME.CSS --- */

.luxury-header {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  z-index: 999;
  background: transparent;
  padding-top: 1rem;
  /* We use CSS variable for sticky bg */
  --sticky-bg: rgba(0, 0, 0, 0.95);
  transition: background-color 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* On inner pages, start with a solid full-width background to prevent text overlap */
body:not(.home) .luxury-header {
  background-color: var(--sticky-bg);
}
/* When scrolling on inner pages, fade out the full-width background so the pill can take over */
body:not(.home) .luxury-header.scrolled {
  background-color: transparent;
}
.header-container {
/*   width: 100% !important; */
  min-width: 0 !important;
  max-width: 1400px !important;
  margin: 0.5rem auto 0 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  position: relative !important;
  box-sizing: border-box !important;
  background-color: transparent !important;
  height: 65px !important;
  border-radius: 50px !important;
  
  /* Explicit default padding values for smooth morph interpolation */
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
  padding-left: 2.5rem !important;
  padding-right: 2.5rem !important;
  
  transform: translateX(0) !important;
  transform-origin: top center !important;
  
  /* Symmetrical CSS transitions targeting individual layout properties cleanly to prevent visual flashes */
  transition: width 0.45s ease-in-out,
              min-width 0.45s ease-in-out,
              max-width 0.45s ease-in-out,
              height 0.45s ease-in-out,
              padding 0.45s ease-in-out,
              border-radius 0.45s ease-in-out,
              transform 0.45s ease-in-out,
              margin 0.45s ease-in-out !important;
}

@media (min-width: 1024px) {
  .header-container {
    max-width: 1400px !important;
    transform: translateX(0) !important;
  }
}

@media (max-width: 1023px) {
  .header-container {
    width: calc(100% - 2rem) !important;
    max-width: 100% !important;
    transform: translateX(0) !important;
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    border-radius: 40px !important;
  }
}

/* Background Pill built using a pseudo-element, only active when scrolled */
.header-container::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  border-radius: 23px !important;
  background-color: #3d3935 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -1 !important;
  box-shadow: none !important;
  transform: none !important;
  
  /* Smooth CSS transition damping with transform included - fade out immediately on scroll up to prevent stretching artifacts */
  transition: opacity 0.08s ease-in-out,
              transform 0.45s ease-in-out,
              box-shadow 0.08s ease-in-out !important;
}

/* Scrolled state enqueued to display background cleanly with class trigger */
.luxury-header.scrolled .header-container::before {
  opacity: 1 !important;
  transform: none !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
  
  /* Snappy ease-out on scroll down */
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.logo-link {
  text-decoration: none !important;
  color: var(--color-beige) !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-items: center !important;
  position: relative !important;
  min-height: 40px !important;
  transform: none !important;
  opacity: 1 !important;
  
  /* Gentler transition on scroll up */
  transition: all 0.45s ease-in-out !important;
}

.luxury-header.scrolled .logo-link {
  /* Responsive transition on scroll down */
  transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Stack default logo and sticky logo in the same grid cell to avoid side-by-side pushing */
.logo-link .logo-text-wrapper,
.logo-link .logo-image-sticky {
  grid-area: 1 / 1 !important;
  justify-self: start !important;
  align-self: center !important;
}

/* Normal state styling */
.logo-link .logo-text-wrapper {
  max-width: 250px !important;
  opacity: 1 !important;
  visibility: visible !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  
  /* Gentler transition on scroll up */
  transition: max-width 0.45s ease-in-out,
              opacity 0.45s ease-in-out,
              visibility 0.45s ease-in-out !important;
}

.logo-link .logo-image-sticky {
  display: block !important;
  max-width: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  height: var(--sticky-logo-height, 38px) !important;
  width: auto !important;
  margin: 0 !important;
  overflow: hidden !important;
  
  /* Gentler transition on scroll up */
  transition: max-width 0.45s ease-in-out,
              opacity 0.45s ease-in-out,
              visibility 0.45s ease-in-out !important;
}

/* Scrolled state: Hide the normal text logo and show the sticky SVG logo */
.luxury-header.scrolled .logo-link .logo-text-wrapper {
  max-width: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  
  /* Responsive transition on scroll down */
  transition: max-width 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.luxury-header.scrolled .logo-link .logo-image-sticky {
  max-width: 80px !important; /* Reduced from 100px to prevent overlap in compact scrolled state */
  opacity: 1 !important;
  visibility: visible !important;
  
  /* Responsive transition on scroll down */
  transition: max-width 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.logo-text-large,
.logo-text-sub {
  transition: color 0.15s ease !important;
}

/* Cross-fade on nav-actions background color dynamically using scrolled class state */
.luxury-header .nav-actions {
  background-color: #3d3935 !important;
  border-radius: 16px !important;
  padding: 0.45rem 1rem 0.45rem 0.45rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  position: relative !important;
  
  /* Gentler transition on scroll up */
  transition: background-color 0.45s ease-in-out,
              border-radius 0.45s ease-in-out !important;
}

.luxury-header.header-dark .nav-actions,
.luxury-header.scrolled .nav-actions {
  background-color: transparent !important;
  border-radius: 23px !important;
  
  /* Responsive transition on scroll down */
  transition: background-color 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              border-radius 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
	padding: 0 !important;
}

/* Override default theme long transitions on buttons and desktop links */
.luxury-header .menu-toggle,
.luxury-header .nav-link-desktop {
  transition: background 0.15s ease, color 0.15s ease, border 0.15s ease !important;
}
.default-logo {
  display: flex;
  flex-direction: column;
}

/* Duplicate Scrolled state rules removed to prevent transitions fighting */
.logo-text-large {
  font-family: var(--font-display);

}
/* =====================================================
   SHOWCASE HORIZONTAL SCROLL — Base CSS
   Required for MSHorizontalScroll.js to work correctly
===================================================== */
#showcase-horizontal {
  width: 100%;
  overflow: hidden;
  position: relative;
}

#showcase-track {
  display: flex;
  gap: 2vw;
  padding: 0 5vw;
  will-change: transform;
}

.showcase-header {
  max-width: 1400px;
  margin: 0 auto;
  padding: 6rem 2rem 3rem;
}

.showcase-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--color-forest);
}

.showcase-slide {
  flex-shrink: 0;
  width: clamp(280px, 35vw, 450px);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  background: var(--color-bg);
}

.showcase-slide-img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.showcase-slide:hover .showcase-slide-img {
  transform: scale(1.04);
}

.showcase-slide-info {
  padding: 1.5rem;
}

.showcase-slide-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-forest);
  margin-bottom: 0.5rem;
}

.showcase-slide-cat {
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-gold);
  display: block;
  margin-bottom: 1rem;
}



/* =====================================================
   TARGETED BUG FIX: Capabilities Full-Screen Pinning
===================================================== */
.capabilities-sec {
    position: relative !important;
    width: 100% !important;
    background-color: #F8F8F6 !important;
    z-index: 20 !important;
}

.cap-pin-container {
    position: relative;
    height: 100vh !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

.cap-text-wrapper {
    position: relative !important;
    width: 90% !important;
    max-width: 1300px !important;
    margin: 0 auto !important;
    text-align: center !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.cap-statement {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 100% !important;
    font-family: var(--font-display) !important;
    font-size: clamp(32px, 4.5vw, 68px) !important;
    font-weight: 500 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    color: #B8B8B8 !important;
    margin: 0 !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
}

.cap-char {
    display: inline !important;
    will-change: color !important;
}

/* =====================================================
   TARGETED BUG FIX: Trade Excellence Stacked Cards
===================================================== */
.trade-excellence-sec,
section#trade-excellence-section,
.elementor-widget-ms_trade_excellence,
.elementor-widget-ms_trade_excellence .elementor-widget-container {
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.trade-pin-container,
#trade-pin-container,
.trade-cards-stack,
#trade-cards-stack {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.elementor-widget-ms_trade_excellence .trade-card,
.elementor-widget-container .trade-card,
section#trade-excellence-section .trade-card,
#trade-pin-container .trade-card,
.trade-cards-stack .trade-card,
.trade-card {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    box-shadow: 0 -10px 40px rgba(0,0,0,0.4) !important;
}

#trade-card-1 { z-index: 10 !important; }
#trade-card-2 { z-index: 20 !important; }
#trade-card-3 { z-index: 30 !important; }
#trade-card-4 { z-index: 40 !important; }

/* =====================================================
   Journey Section — Fix heading top gap
===================================================== */
.journey-header-static {
    top: 15vh !important;
}

.journey-track-container {
    align-items: flex-start !important;
    padding-top: 31vh !important;
}

/* =====================================================
   TARGETED BUG FIX: Block background scroll on mega menu
===================================================== */
@media (min-width: 1024px) {
  body.ms-menu-active,
  html.ms-menu-active {
      overflow: hidden !important;
      height: 100% !important;
  }
  .mega-menu {
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch !important;
  }
}

@media (max-width: 1023px) {
  body.ms-menu-active {
      position: fixed !important;
      width: 100% !important;
      height: 100% !important;
      overflow: hidden !important;
  }
}

/* ── Mobile Form Layout Fix (Home, RFQ, Contact, Careers) ── */
@media screen and (max-width: 768px) {
    .ms-rfq-form-container,
    .ms-cp-form-card,
    .ms-cr-form-card,
    .ms-cr-form-right .ms-rfq-form-container,
    .ms-cp-form-right .ms-rfq-form-container {
        padding: 24px 16px !important;
        border-radius: 16px !important;
    }

    .ms-rfq-form-grid,
    .ms-cp-form-grid,
    .ms-cr-form-grid,
    .ms-inquiry-grid,
    .ms-rfq-inquiry-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .ms-form-group,
    .ms-rfq-form-grid .ms-form-group,
    .ms-cp-form-grid .ms-form-group,
    .ms-cr-form-grid .ms-form-group {
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }

    .ms-input-icon-wrapper,
    .ms-textarea-wrapper,
    .ms-select-wrapper {
        width: 100% !important;
    }

    .ms-input-icon-wrapper input,
    .ms-input-icon-wrapper select,
    .ms-textarea-wrapper textarea {
        font-size: 13px !important;
        padding-left: 42px !important;
        padding-right: 14px !important;
    }
}

@media screen and (max-width: 480px) {
    .ms-rfq-form-container,
    .ms-cp-form-card,
    .ms-cr-form-card,
    .ms-cr-form-right .ms-rfq-form-container,
    .ms-cp-form-right .ms-rfq-form-container {
        padding: 20px 14px !important;
        border-radius: 14px !important;
    }
}

/* Sticky Product Category Navigation Bar */
.ms-category-bar-wrapper,
#ms-category-bar-wrapper,
div.ms-category-bar-wrapper {
    position: sticky !important;
    position: -webkit-sticky !important;
    top: 100px !important;
    z-index: 999999 !important;
    box-sizing: border-box !important;
    padding: 10px 14px !important;
}

.ms-category-bar,
#ms-category-pills {
    padding: 0 !important;
    margin: 0 !important;
}

.ms-category-bar-wrapper.is-sticky,
#ms-category-bar-wrapper.is-sticky,
div.ms-category-bar-wrapper.is-sticky {
    width: calc(100% - 4rem) !important;
    max-width: calc(1400px - 4rem) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    left: 0 !important;
    right: 0 !important;
}

body.admin-bar .ms-category-bar-wrapper,
body.admin-bar #ms-category-bar-wrapper,
body.admin-bar div.ms-category-bar-wrapper {
    top: 132px !important;
}

@media (max-width: 1023px) {
    .ms-category-bar-wrapper,
    #ms-category-bar-wrapper,
    div.ms-category-bar-wrapper {
        top: 90px !important;
        z-index: 999999 !important;
    }
    .ms-category-bar-wrapper.is-sticky,
    #ms-category-bar-wrapper.is-sticky,
    div.ms-category-bar-wrapper.is-sticky {
        width: calc(100% - 2rem) !important;
        max-width: none !important;
    }
    body.admin-bar .ms-category-bar-wrapper,
    body.admin-bar #ms-category-bar-wrapper,
    body.admin-bar div.ms-category-bar-wrapper {
        top: 122px !important;
    }
}

/* Ensure Elementor sections/containers don't clip sticky category bar */
.elementor-page-products1 .elementor-section,
.elementor-page-products1 .elementor-container,
.elementor-page-products1 .elementor-widget-container,
.page-id-products1 .elementor-section,
.page-id-products1 .elementor-container,
.page-id-products1 .elementor-widget-container,
.ms-catalogue-page .elementor-section,
.ms-catalogue-page .elementor-container,
div[class*="catalogue"] .elementor-section {
    overflow: visible !important;
}

/* Unblock CSS transform trapping on catalogue parent container for sticky navigation */
.ms-catalogue-content,
.ms-catalogue-page .ms-catalogue-content,
.ms-catalogue-content.fade-up,
div.ms-catalogue-content,
.ms-intro-row {
    transform: none !important;
    perspective: none !important;
    filter: none !important;
}

/* Subtle luxury light shadow for search bar and category filter bar in Light Theme */
html:not([data-theme="dark"]) .ms-search-container,
html:not([data-theme="dark"]) .ms-category-bar-wrapper,
html:not([data-theme="dark"]) .ms-insights-search-wrapper,
html:not([data-theme="dark"]) .ms-insights-search-pill,
html[data-theme="light"] .ms-search-container,
html[data-theme="light"] .ms-category-bar-wrapper,
html[data-theme="light"] .ms-insights-search-wrapper,
html[data-theme="light"] .ms-insights-search-pill {
/*     box-shadow: 0 6px 24px rgba(0, 0, 0, 0.04) !important; */
}

/* Mega Menu Right Panel Preview Box — Dark Mode #191919 Background */
html[data-theme="dark"] .preview-default-content,
html[data-theme="dark"] .light-preview,
html[data-theme="dark"] body .preview-default-content,
html[data-theme="dark"] body .light-preview,
html[data-theme="dark"] body.elementor-page div.elementor-element .preview-default-content,
html[data-theme="dark"] body div.elementor-element.elementor-element .preview-default-content,
html[data-theme="dark"] body [data-elementor-id] .preview-default-content {
    background: #191919 !important;
    background-color: #191919 !important;
    border: 1px solid #282828 !important;
    border-color: #282828 !important;
}

html[data-theme="dark"] .preview-badge,
html[data-theme="dark"] body .preview-badge,
html[data-theme="dark"] body.elementor-page div.elementor-element .preview-badge,
html[data-theme="dark"] body div.elementor-element.elementor-element .preview-badge {
    background: #121211 !important;
    background-color: #121211 !important;
    color: #E2E8F0 !important;
    border: 1px solid #282828 !important;
}

/* ── Global Trade Network Map Section — Dark Mode ── */
html[data-theme="dark"] .ms-network-sec,
html[data-theme="dark"] #network,
html[data-theme="dark"] .elementor-widget-ms_global_network,
html[data-theme="dark"] body.elementor-page div.elementor-element div.elementor-widget-container .ms-network-sec,
html[data-theme="dark"] body div.elementor-element.elementor-element div.elementor-widget-container .ms-network-sec {
    background: #0B0D11 !important;
    background-color: #0B0D11 !important;
    padding-top: 0 !important;
    padding-bottom: 70px !important;
}

html[data-theme="dark"] .ms-network-sec::before {
    opacity: 0.15 !important;
}

html[data-theme="dark"] .ms-network-title {
    color: #FFFFFF !important;
}

html[data-theme="dark"] .ms-network-desc {
    color: #CCCCCC !important;
}

html[data-theme="dark"] .ms-network-label {
    color: #C8A15A !important;
}

html[data-theme="dark"] .ms-network-bg-img {
    filter: invert(1) hue-rotate(180deg) brightness(1.2) opacity(0.85) !important;
}

html[data-theme="dark"] .ms-network-node-label,
html[data-theme="dark"] .ms-network-hub-label {
    fill: #FFFFFF !important;
    color: #FFFFFF !important;
}

html[data-theme="dark"] .ms-network-pin-circle {
    fill: #191919 !important;
    stroke: #C8A15A !important;
}

/* ── FAQ Section — Dark Mode Top Padding Removal ── */
html[data-theme="dark"] .ms-faq-section,
html[data-theme="dark"] #faq,
html[data-theme="dark"] .elementor-widget-ms_faq,
html[data-theme="dark"] body.elementor-page div.elementor-element div.elementor-widget-container .ms-faq-section,
html[data-theme="dark"] body div.elementor-element.elementor-element div.elementor-widget-container .ms-faq-section {
    padding-top: 0 !important;
}

/* ── Vertical Scroll Navigation Indicator — Dark Mode ── */
html[data-theme="dark"] .ms-nav-line,
html[data-theme="dark"] .ms-vertical-nav .ms-nav-line {
    background-color: rgba(255, 255, 255, 0.25) !important;
}

html[data-theme="dark"] .ms-nav-line.active,
html[data-theme="dark"] .ms-nav-line:hover,
html[data-theme="dark"] .ms-vertical-nav .ms-nav-line.active,
html[data-theme="dark"] .ms-vertical-nav .ms-nav-line:hover {
    background-color: #C9A15A !important;
}

html[data-theme="dark"] .ms-nav-line::before,
html[data-theme="dark"] .ms-vertical-nav .ms-nav-line::before {
    background: #191919 !important;
    color: #FFFFFF !important;
    border: 1px solid #333333 !important;
}

/* ── Single Product Detail Page — Dark Mode (Zero White Flash) ── */
html[data-theme="dark"] .ms-single-product-page,
html[data-theme="dark"] body.single-ms_commodity {
    background-color: #0B0D11 !important;
    background: #0B0D11 !important;
}

html[data-theme="dark"] .ms-single-product-card {
    background-color: #12141A !important;
    background: #12141A !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5) !important;
    color: #FFFFFF !important;
}

html[data-theme="dark"] .ms-single-product-title,
html[data-theme="dark"] .ms-single-product-card h1,
html[data-theme="dark"] .ms-single-product-card h2,
html[data-theme="dark"] .ms-single-product-card h3,
html[data-theme="dark"] .ms-single-product-card h4 {
    color: #FFFFFF !important;
}

html[data-theme="dark"] .ms-info-row,
html[data-theme="dark"] .ms-spec-row,
html[data-theme="dark"] .ms-variants-wrapper,
html[data-theme="dark"] .ms-single-info {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .ms-info-label,
html[data-theme="dark"] .ms-info-value,
html[data-theme="dark"] .ms-product-description,
html[data-theme="dark"] .ms-single-desc {
    color: #E2E8F0 !important;
}

html[data-theme="dark"] .ms-type-btn,
html[data-theme="dark"] .ms-grade-chip,
html[data-theme="dark"] .ms-cat-dropdown-menu {
    background-color: #1B1E26 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #E2E8F0 !important;
}

html[data-theme="dark"] .ms-type-btn:hover,
html[data-theme="dark"] .ms-grade-chip:hover {
    border-color: #C8A15A !important;
    color: #C8A15A !important;
}

html[data-theme="dark"] .ms-main-image-wrapper {
    background-color: #1B1E26 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* --- Desktop Mega Menu Dropdown Update --- */
.mega-menu-dropdown-parent { position: relative; }
.mega-menu-submenu {
  display: none;
  list-style: none;
  padding: 0;
  margin-top: 1.5rem;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.mega-menu-dropdown-parent.is-open .mega-menu-submenu {
  display: grid;
}
.mega-menu-dropdown-parent.is-open .dropdown-icon {
  transform: rotate(180deg);
}
.mega-menu-subitem {
  font-size: 1rem !important;
  font-weight: 500 !important;
  padding: 10px 16px !important;
  color: var(--color-text-primary, #333) !important;
  background-color: transparent;
  border: 1px solid var(--color-border, #e0e0e0);
  border-radius: 30px;
  text-align: center;
  transition: all 0.3s ease;
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
.mega-menu-subitem::before {
  display: none;
}
.mega-menu-subitem:hover {
  color: var(--color-gold) !important;
  border-color: var(--color-gold);
  transform: translateY(-2px) !important;
  background-color: rgba(200, 161, 90, 0.05);
}

.mobile-only-link {
  display: none;
}

/* --- Mobile Header Styling Adjustments --- */
@media screen and (max-width: 1024px) {
  .mobile-only-link {
    display: list-item;
  }
  .mega-menu-submenu {
    grid-template-columns: 1fr;
    gap: 8px;
    padding-left: 10px;
  }
  .mega-menu-subitem {
    border: none;
    border-radius: 0;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    width: 100% !important;
    padding: 10px !important;
    font-size: 1.5rem !important;
    background-color: transparent !important;
    white-space: normal !important;
  }
  .mega-menu-subitem:hover {
    transform: translateX(10px) !important;
  }

  /* Hide preview panel completely on mobile */
  #menu-preview-container {
    display: none !important;
  }
  
  /* Restructure scroll: Outer menu locked, inner content scrolls below sticky header */
  .mega-menu {
    overflow: hidden !important; /* Outer container locked */
  }
  .menu-backdrop {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }
  .menu-content {
    position: absolute !important;
    top: 100px !important; /* Push down to clear logo and menu toggle */
    left: 0 !important;
    width: 100% !important;
    height: calc(100% - 100px) !important;
    overflow-y: auto !important; /* Content area scrolls natively */
    -webkit-overflow-scrolling: touch !important;
    display: block !important;
    padding: 20px 1.5rem 120px 1.5rem !important;
    box-sizing: border-box !important;
  }
  .menu-grid {
    display: block !important;
    height: auto !important;
    flex: none !important;
  }
  .mega-menu-item {
    font-size: 1.5rem !important;
  }

  
  .header-right-group {
    gap: 8px !important; /* Reduced gap between menu pill and theme toggle */
  }
  .logo-link img {
    height: 50px !important; /* Converted to correct height for mobile viewports */
    width: auto !important;
    max-width: 120px !important;
    object-fit: contain !important;
  }
  .luxury-header .nav-links-wrapper {
    display: none !important; /* Completely remove desktop links on mobile */
  }
  .nav-actions {
    padding: 0.45rem !important; /* Symmetric padding around menu toggle on mobile */
    gap: 0 !important; /* Remove gap since menu toggle is the only child */
  }
  .menu-text {
    font-size: 0.7rem !important;
  }
  .menu-icon-luxury {
    width: 28px !important;
  }
  .logo-text-large { font-size: 1.4rem !important; }
  .logo-text-sub { font-size: 0.5rem !important; }

  /* Remove drop shadows from header containers on mobile */
  .luxury-header.scrolled .header-container::before,
  .header-container::before,
  .luxury-header .header-container,
  .luxury-header.scrolled .header-container {
    box-shadow: none !important;
  }

  /* Duplicate translate removed to prevent transitions fighting */
}

/* ── Force Light Mode Menu Toggle Button Colors (Light background with dark text) ── */
html[data-theme="light"] .luxury-header .menu-toggle {
    background: rgba(253, 252, 247, 0.95) !important; /* Matches Light Theme Background */
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}
html[data-theme="light"] .luxury-header .menu-text {
    color: #040404 !important;
}
html[data-theme="light"] .luxury-header .menu-icon-luxury .icon-line {
    background: #040404 !important;
}

/* Hover States in Light Mode */
html[data-theme="light"] .luxury-header .menu-toggle:hover {
    background: rgba(253, 252, 247, 1) !important;
    
}
html[data-theme="light"] .luxury-header .menu-toggle:hover .menu-text {
    color: #040404 !important ; /* Gold accent color */
}
html[data-theme="light"] .luxury-header .menu-toggle:hover .menu-icon-luxury .icon-line {
    background: #040404 !important;
}

/* ── Searchable Country Select & Manual Location Input Styles ── */
/* ── Searchable Country Select & Manual Location Input Styles ── */

/* 1. Scrollable Dropdown List (Max Height 280px) */
.ms-custom-select-options,
.ms-cp-custom-select-options {
    max-height: 280px !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
}

/* 2. Sticky Top Search Box Container */
.ms-select-search-box {
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 8px 10px;
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
}

html[data-theme="dark"] .ms-select-search-box {
    background: #191919;
    border-bottom-color: #282828;
}

/* 3. Search Typeahead Input Field Styling */
.ms-select-search-input {
    width: 100%;
    padding: 8px 12px;
    font-size: 13px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    background: #f9fafb;
    color: #111827;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ms-select-search-input:focus {
    border-color: #c89b5e;
    box-shadow: 0 0 0 2px rgba(200, 155, 94, 0.2);
}

html[data-theme="dark"] .ms-select-search-input {
    background: #262626;
    border-color: #333333;
    color: #ffffff;
}

/* 4. Slide-Down Animation for "Other Location" Manual Input */
.ms-other-country-wrapper {
    animation: msSlideDown 0.3s ease-out forwards;
}

@keyframes msSlideDown {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 5. Force Hide Filtered-Out Non-Matching Country Options */
.ms-custom-option.is-hidden,
.ms-cp-custom-option.is-hidden {
    display: none !important;
}

.ms-custom-select-options,
.ms-cp-custom-select-options {
    display: flex !important;
    flex-direction: column !important;
}

/* History Timeline Content Cards Instant Responsive Activation (Zero Lag/Delay) */
.ms-content-card {
    opacity: 0.25 !important;
    transition: opacity 0.15s ease-out !important;
}

.ms-content-card.active {
    opacity: 1 !important;
}

/* Compact Non-Overlapping Sourcing Card Boxes for 14 Global Origins Map */
.gn-sourcing-card {
    position: absolute !important;
    transform: translate(-50%, -50%) !important;
    z-index: 10 !important;
    transition: transform 0.25s ease, z-index 0.25s ease !important;
}

.gn-sourcing-card:hover {
    z-index: 99 !important;
    transform: translate(-50%, -55%) !important;
}

.gn-card-box {
    background: rgba(10, 14, 20, 0.95) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(200, 161, 90, 0.45) !important;
    border-radius: 8px !important;
    padding: 6px 10px !important;
    min-width: 100px !important;
    max-width: 145px !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.85) !important;
}

.gn-sourcing-card:hover .gn-card-box {
    border-color: #C8A15A !important;
    box-shadow: 0 12px 30px rgba(200, 161, 90, 0.35) !important;
    background: rgba(16, 20, 28, 0.98) !important;
}

.gn-country-name {
    font-size: 10.5px !important;
    font-weight: 800 !important;
    letter-spacing: 1.2px !important;
    color: #FFFFFF !important;
    margin-bottom: 3px !important;
}

.gn-commodity-list {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.gn-commodity-list li {
    font-size: 9.5px !important;
    line-height: 1.35 !important;
    color: #CCCCCC !important;
    white-space: nowrap !important;
}

.gn-dot-map-bg-img,
img.gn-dot-map-bg-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: fill !important;
    display: block !important;
}

.gn-map-overlay-svg,
svg.gn-map-overlay-svg {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
    z-index: 5 !important;
}

/* Perfectly Round CSS Geographic Pin Dots for Global Network Map (Zero Oval Distortion) */
.gn-pin-dot {
    position: absolute !important;
    width: 14px !important;
    height: 14px !important;
    transform: translate(-50%, -50%) !important;
    pointer-events: none !important;
    z-index: 8 !important;
}

.gn-pin-halo {
    position: absolute !important;
    inset: 0 !important;
    border-radius: 50% !important;
    background: rgba(200, 161, 90, 0.4) !important;
    box-shadow: 0 0 8px rgba(200, 161, 90, 0.6) !important;
    animation: pinPulseHalo 2.5s infinite ease-in-out !important;
}

.gn-pin-core {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #FFDF9E !important;
    transform: translate(-50%, -50%) !important;
    box-shadow: 0 0 6px #FFDF9E !important;
}

@keyframes pinPulseHalo {
    0%, 100% { transform: scale(1); opacity: 0.4; }
    50% { transform: scale(1.6); opacity: 0.15; }
}

/* Right Side Warehouse Specifications Checkmarks -> Pure White (#FFFFFF) */
.gn-check-icon,
.gn-wh-info-panel .gn-check-icon,
.gn-wh-specs .gn-check-icon,
.gn-wh-info-panel svg,
.gn-wh-specs svg,
.gn-wh-specs li svg {
    color: #FFFFFF !important;
    stroke: #FFFFFF !important;
}

/* Both Warehouse Navigation Arrow Buttons -> Identical Circle Border, Background & White Icon Color */
.gn-wh-nav-btn,
button.gn-wh-nav-btn,
.gn-wh-nav-btn.prev,
.gn-wh-nav-btn.next,
#gnwhPrevBtn,
#gnwhNextBtn {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: rgba(200, 161, 90, 0.15) !important;
    border: 1px solid rgba(200, 161, 90, 0.5) !important;
    color: #FFFFFF !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.gn-wh-nav-btn svg,
button.gn-wh-nav-btn svg,
.gn-wh-nav-btn.prev svg,
.gn-wh-nav-btn.next svg,
#gnwhPrevBtn svg,
#gnwhNextBtn svg {
    color: #FFFFFF !important;
    stroke: #FFFFFF !important;
}

.gn-wh-nav-btn:hover,
button.gn-wh-nav-btn:hover,
.gn-wh-nav-btn.prev:hover,
.gn-wh-nav-btn.next:hover {
    background: #C8A15A !important;
    border-color: #C8A15A !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 15px rgba(200, 161, 90, 0.4) !important;
}

.gn-wh-nav-btn:hover svg,
button.gn-wh-nav-btn:hover svg {
    stroke: #FFFFFF !important;
}