/* =========================================================
   Metta Pic v49 — Home header hide-until-scroll · horizontal banners
   ========================================================= */

/* ---- HEADER base: always black, white text/icons/logo ---- */
.site-header,
#siteHeader {
  background: #0a0a0a !important;
  background-color: #0a0a0a !important;
  color: #ffffff !important;
  border-bottom: 1px solid #1e1e1e !important;
  transition: transform .3s ease, opacity .3s ease, background .2s ease !important;
  z-index: 1000 !important;
}
.site-header .brand strong,
.site-header .brand small,
.site-header .desktop-nav a,
.site-header .desktop-nav a:hover,
.site-header .desktop-nav a.active {
  color: #ffffff !important;
}
.site-header .desktop-nav a:after { background: #ffffff !important; }
.site-header .brand-logo {
  filter: brightness(0) invert(1) !important;
  height: 30px !important;
  max-height: 30px !important;
  max-width: 100px !important;
  width: auto !important;
}
.site-header .header-cart,
.site-header .header-icon,
.site-header .menu-toggle {
  color: #ffffff !important;
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.2) !important;
}
.site-header .menu-toggle span { background: #ffffff !important; }
.site-header .header-cart svg,
.site-header .header-icon svg {
  stroke: #ffffff !important;
  color: #ffffff !important;
}
.site-header .mp-cart-count,
.site-header .cart-count {
  background: #ffffff !important;
  color: #000000 !important;
}
.site-header .nav-menu {
  background: #111 !important;
  border: 1px solid #333 !important;
}
.site-header .nav-menu a { color: #eee !important; }

/* HOME: hide header until scrolled */
body.mp-home .site-header {
  transform: translateY(-110%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
body.mp-home .site-header.scrolled {
  transform: translateY(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  background: #0a0a0a !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.4) !important;
}

/* OTHER pages: always visible black header */
body:not(.mp-home) .site-header {
  transform: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Hero: full bleed under where header would be */
body.mp-home section.mp-hero2 {
  padding-top: 48px !important;
}

/* ---- HORIZONTAL CENTERED BANNERS ---- */
.mp-cat-strip {
  background: #fff !important;
  padding: 48px 0 56px !important;
}
.mp-section-head-center {
  text-align: center !important;
  margin-bottom: 28px !important;
}
.mp-section-head-center h2 { color: #111 !important; }
.mp-section-head-center p { color: #666 !important; margin: 0 auto !important; }

.mp-cat-banners-row {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 14px !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
}
.mp-cat-banner {
  flex: 0 1 calc(33.333% - 14px) !important;
  max-width: 340px !important;
  min-width: 200px !important;
  display: block !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  border: 1px solid #eee !important;
  background: #f5f5f5 !important;
  line-height: 0 !important;
  text-decoration: none !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
}
.mp-cat-banner:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.1) !important;
}
.mp-cat-banner img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: cover !important;
  filter: none !important;
  opacity: 1 !important;
}
@media (max-width: 900px) {
  .mp-cat-banner {
    flex: 0 1 calc(50% - 10px) !important;
    max-width: none !important;
  }
}
@media (max-width: 520px) {
  .mp-cat-banner {
    flex: 0 1 100% !important;
  }
}

/* Legacy tiles hide */
.mp-cat-tile-body, .mp-cat-tile-bg { display: none !important; }

/* ---- Variants required UI ---- */
.mp-req { color: #c00; font-weight: 900; }
.mp-var-required-msg {
  display: none;
  background: #fff0f0;
  color: #a00;
  border: 1px solid #f0c0c0;
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 700;
}
.mp-bl-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.mp-bl-choice {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1.5px solid #ddd;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: #111;
  transition: .15s ease;
}
.mp-bl-choice input { accent-color: #000; width: 16px; height: 16px; }
.mp-bl-choice:has(input:checked) {
  border-color: #000;
  background: #000;
  color: #fff;
}
.mp-bl-choice em {
  font-style: normal;
  font-size: 11px;
  opacity: .8;
  margin-right: 4px;
}
.mp-var-label .mp-req { margin-right: 4px; }

/* Color label required star */
.mp-var-block .mp-var-label { position: relative; }