/* ===== merged from former site-theme.css; kept before Figma overrides ===== */
/* Marry Me global warm canvas + quiet carousel controls. */
:root { --mm-page-bg: #FBFAF7; }

html, body { background-color: var(--mm-page-bg) !important; }

body.product-detail-page,
.er-page-container,
.product-detail-page .presentation-wrapper,
.mm-content-page,
.mm-library-page,
.mm-commerce-shell,
.mm-checkout-page,
.mm-track-shell,
.mm-online-order-shell {
  background-color: var(--mm-page-bg) !important;
}

.slider-arrow {
  background-color: transparent !important;
}
/* Marry Me — Figma Make inspired editorial system */
:root {
  --mm-bg: #F4EFE8;
  --mm-card: #EEE8DF;
  --mm-line: #D4C8BC;
  --mm-muted: #7A6E65;
  --mm-ink: #2F2924;
  --mm-teal: #0B6B63;
  --mm-teal-deep: #064F4A;
  --mm-soft-teal: #DDE9E5;
  --mm-gold: #B8905A;
  --mm-display: "Fraunces", serif;
  --mm-body: "Instrument Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mm-max: 1280px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: var(--mm-line) transparent; }
html, body { margin: 0; background: var(--mm-bg) !important; color: var(--mm-ink) !important; }
body {
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0;
}
body, button, input, select, textarea { font-family: var(--mm-body) !important; }
h1, h2, h3, h4, h5, h6,
.er-title, .presentation-title, .product-name, .section-title,
.home-reviews-heading h2, .mm-content-page h1, .mm-content-page h2,
.mm-editorial-title, .mm-cta-title, .mm-craft-title {
  font-family: var(--mm-display) !important;
  font-weight: 300 !important;
}
a { color: inherit; }
::selection { background: var(--mm-teal); color: var(--mm-bg); }

/* ---------- Header ---------- */
.main-floating-nav,
.main-floating-nav.mm-static-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 30000 !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 64px !important;
  margin: 0 !important;
  padding: 0 clamp(18px, 4vw, 52px) !important;
  display: grid !important;
  grid-template-columns: max-content 1fr max-content !important;
  align-items: center !important;
  gap: clamp(18px, 2.7vw, 38px) !important;
  background: rgba(244,239,232,.96) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--mm-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: blur(10px) !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.main-floating-nav.mm-static-header > .nav-brand,
.main-floating-nav.mm-static-header > .nav-list,
.main-floating-nav.mm-static-header > .mm-nav-utilities { visibility: visible !important; opacity: 1 !important; }
.nav-brand { display: inline-flex !important; align-items: center !important; padding: 0 !important; text-decoration: none !important; transform: none !important; }
.nav-brand-tagline { display: none !important; }
.nav-brand-name { display: inline-flex !important; align-items: baseline !important; color: var(--mm-teal) !important; white-space: nowrap; line-height: 1 !important; }



.nav-list { justify-self: center !important; display: flex !important; align-items: center !important; gap: clamp(18px,2.5vw,38px) !important; margin: 0 !important; padding: 0 !important; list-style: none !important; }
.nav-item { position: relative !important; }
.nav-item > a, .nav-link-row > a, .mm-nav-custom {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 64px !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  color: var(--mm-muted) !important;
  font-family: var(--mm-body) !important;
  font-size: .66rem !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: .15em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: color .2s ease !important;
}
.nav-item > a:hover, .nav-link-row > a:hover, .mm-nav-custom:hover,
.nav-item.active > a, .nav-item.active .nav-link-row > a { color: var(--mm-teal) !important; }
.nav-item > a::after, .nav-link-row > a::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 1px !important;
  background: var(--mm-teal) !important;
  transform: scaleX(0) !important;
  transform-origin: left center !important;
  transition: transform .22s ease !important;
}
.nav-item:hover > a::after, .nav-item:focus-within > a::after,
.nav-item:hover .nav-link-row > a::after, .nav-item:focus-within .nav-link-row > a::after { transform: scaleX(1) !important; }
.nav-dropdown-toggle {
  display: grid !important;
  place-items: center !important;
  width: 28px !important;
  height: 34px !important;
  margin-left: 5px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--mm-muted) !important;
  cursor: pointer !important;
}
.nav-dropdown-toggle:hover,
.nav-dropdown-toggle:focus-visible { color: var(--mm-teal) !important; }
.dropdown-menu {
  top: calc(100% - 1px) !important;
  left: -18px !important;
  width: 315px !important;
  padding: 12px 18px 14px !important;
  border: 1px solid var(--mm-line) !important;
  border-radius: 0 !important;
  background: #FFFDF9 !important;
  box-shadow: 0 14px 34px rgba(47,41,36,.11) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(8px) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.dropdown-menu a {
  display: block !important;
  padding: 10px 0 !important;
  color: #51463F !important;
  font-size: .66rem !important;
  font-weight: 500 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.dropdown-menu a:hover,
.dropdown-menu a:focus-visible,
.dropdown-menu a.is-active { color: var(--mm-teal) !important; background: transparent !important; }

@media (min-width: 981px) {
  .main-floating-nav.mm-static-header .nav-item.dropdown:hover > .dropdown-menu,
  .main-floating-nav.mm-static-header .nav-item.dropdown:focus-within > .dropdown-menu,
  .main-floating-nav.mm-static-header .nav-item.dropdown.open > .dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }
}
.mm-nav-utilities { justify-self: end !important; display: flex !important; align-items: center !important; gap: clamp(12px,1.8vw,22px) !important; white-space: nowrap !important; }
.mm-nav-utility {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  color: var(--mm-muted) !important;
  font-size: .64rem !important;
  font-weight: 500 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  cursor: pointer !important;
}
.mm-nav-utility:hover { color: var(--mm-teal) !important; }
.nav-cart { display: none !important; }
.mobile-menu-btn { border: 0 !important; background: none !important; box-shadow: none !important; color: var(--mm-ink) !important; }

/* ---------- Home: hero ---------- */
.hero-section.mm-figma-hero {
  max-width: var(--mm-max) !important;
  margin: 0 auto !important;
  padding: clamp(52px,7vw,96px) clamp(22px,4vw,52px) clamp(42px,5vw,72px) !important;
  background: transparent !important;
  min-height: 0 !important;
}
.mm-hero-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(34px,6vw,80px); align-items: end; }
.mm-hero-copy { padding-bottom: clamp(0px,2vw,28px); }
.mm-kicker { margin: 0 0 22px; color: var(--mm-teal); font-size: .65rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }
.mm-hero-title { margin: 0 0 26px; color: var(--mm-ink) !important; font-family: var(--mm-display) !important; font-size: clamp(3.4rem,6.6vw,7rem); font-weight: 300 !important; line-height: .95; letter-spacing: -.035em; }
.mm-hero-title em { font-family: inherit !important; font-weight: 300 !important; }
.mm-hero-text { max-width: 420px; margin: 0 0 34px; color: var(--mm-muted); font-size: .95rem; line-height: 1.75; }
.mm-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.mm-btn-primary, .mm-btn-secondary {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  border-radius: 0;
  text-decoration: none;
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.mm-btn-primary { background: var(--mm-teal) !important; color: #FFFDF9 !important; border: 1px solid var(--mm-teal) !important; }
.mm-btn-primary:hover, .mm-btn-primary:focus-visible { background: var(--mm-teal-deep) !important; color: #FFFDF9 !important; border-color: var(--mm-teal-deep) !important; }
.mm-btn-secondary { background: transparent !important; color: var(--mm-ink) !important; border: 1px solid var(--mm-line) !important; }
.mm-btn-secondary:hover, .mm-btn-secondary:focus-visible { background: var(--mm-card) !important; color: var(--mm-ink) !important; }
.mm-hero-media { position: relative; }
.mm-hero-media::before { content: ""; position: absolute; inset: -22px 0 auto -18px; height: calc(100% - 30px); background: var(--mm-card); z-index: 0; }
.mm-hero-media img { position: relative; z-index: 1; width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; background: var(--mm-card); }
.mm-hero-badge { position: absolute; left: 18px; bottom: 18px; z-index: 2; padding: 11px 14px; background: rgba(244,239,232,.92); backdrop-filter: blur(8px); }
.mm-hero-badge small { display: block; margin-bottom: 3px; color: var(--mm-teal); font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; }
.mm-hero-badge span { color: var(--mm-ink); font-size: .72rem; }
.mm-marquee { overflow: hidden; border-top: 1px solid var(--mm-line); border-bottom: 1px solid var(--mm-line); padding: 11px 0; margin: 0 0 24px; }
.mm-marquee-track { width: max-content; white-space: nowrap; color: var(--mm-muted); font-size: .58rem; letter-spacing: .2em; text-transform: uppercase; animation: mmMarquee 32s linear infinite; }
@keyframes mmMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Home: collection cards ---------- */
.collection-section { max-width: var(--mm-max) !important; margin: 0 auto !important; padding: clamp(56px,7vw,96px) clamp(22px,4vw,52px) !important; background: transparent !important; }
.collection-header { position: relative !important; display: flex !important; align-items: end !important; justify-content: space-between !important; gap: 20px !important; margin: 0 0 38px !important; padding-top: 24px !important; text-align: left !important; }
.collection-header .section-label { display: none !important; }
.collection-header .section-title { margin: 0 !important; color: var(--mm-ink) !important; font-size: clamp(2.4rem,4.5vw,4.4rem) !important; line-height: 1 !important; letter-spacing: -.025em !important; text-transform: none !important; }
.collection-header .title-underline { display: none !important; }
.collection-header::before { content: "Explore"; display: block; position: absolute; top: 0; left: 0; margin: 0; color: var(--mm-teal); font-size: .6rem; line-height: 1; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }
.collection-grid { display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: clamp(18px,2.4vw,30px) !important; margin: 0 !important; }
.collection-item { min-width: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; }
.collection-item:first-child { grid-column: span 2; }
.collection-link { display: flex !important; flex-direction: column !important; text-decoration: none !important; }
.collection-link img { width: 100% !important; aspect-ratio: 4/5 !important; object-fit: cover !important; display: block !important; background: var(--mm-card) !important; border: 0 !important; border-radius: 0 !important; transition: transform .65s ease !important; }
.collection-item:first-child .collection-link img { aspect-ratio: 16/10 !important; }
.collection-link { overflow: visible !important; }
.collection-link:hover img { transform: scale(1.015) !important; }
.collection-label { position: static !important; padding: 13px 0 0 !important; background: transparent !important; color: var(--mm-ink) !important; font-family: var(--mm-display) !important; font-size: 1rem !important; font-weight: 300 !important; letter-spacing: .015em !important; text-align: left !important; transform: none !important; }

/* ---------- Home: craftsmanship, editorial, CTA ---------- */
.mm-craftsmanship {
  margin: 0 !important;
  padding: clamp(64px,8vw,112px) clamp(22px,6vw,84px) !important;
  background: #0F675F !important;
  color: #FFFDF9 !important;
}
.mm-craft-grid { max-width: var(--mm-max); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(50px,8vw,116px); align-items: center; }
.mm-craft-kicker { color: #D7E9E4 !important; font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; }
.mm-craft-title { margin: 18px 0 22px; color: #FFFDF9 !important; font-size: clamp(3rem,5.2vw,5.8rem); line-height: .94; letter-spacing: -.03em; }
.mm-craft-title em { color: #FFFDF9 !important; font-family: inherit !important; }
.mm-craft-copy { max-width: 520px; margin: 0; color: rgba(255,253,249,.82) !important; font-size: .9rem; line-height: 1.8; }
.mm-craft-links { border-top: 1px solid rgba(255,253,249,.28); }
.mm-craft-links a {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 19px 0; border-bottom: 1px solid rgba(255,253,249,.28);
  color: #FFFDF9 !important; text-decoration: none;
  transition: background .2s ease, padding .2s ease;
}
.mm-craft-links a strong { color: #FFFDF9 !important; font-size: .78rem; font-weight: 500; letter-spacing: .02em; }
.mm-craft-links a small { display: block; margin-top: 4px; color: rgba(255,253,249,.72) !important; font-size: .63rem; letter-spacing: .04em; }
.mm-craft-links a span { color: #D7E9E4 !important; font-size: 1.25rem; transition: transform .2s ease; }
.mm-craft-links a:hover, .mm-craft-links a:focus-visible { background: rgba(255,255,255,.055); padding-left: 10px; padding-right: 10px; }
.mm-craft-links a:hover span, .mm-craft-links a:focus-visible span { transform: translateX(4px); }
.mm-editorial { max-width: var(--mm-max); margin: 0 auto; padding: clamp(72px,9vw,128px) clamp(22px,4vw,52px); display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(38px,7vw,96px); align-items: center; }
.mm-editorial-media { position: relative; }
.mm-editorial-media > img:first-child { width: 100%; aspect-ratio: 5/6; object-fit: cover; display: block; background: var(--mm-card); }
.mm-editorial-inset { position: absolute; right: clamp(-20px,-2vw,-8px); bottom: -28px; width: clamp(120px,17vw,210px); aspect-ratio: 1; object-fit: cover; border: 10px solid var(--mm-bg); background: var(--mm-card); }
.mm-editorial-copy .mm-kicker { margin-bottom: 18px; }
.mm-editorial-title { margin: 0 0 22px; color: var(--mm-ink) !important; font-size: clamp(2.7rem,4.7vw,5rem); line-height: 1.02; letter-spacing: -.025em; }
.mm-editorial-title em { font-family: inherit !important; }
.mm-editorial-copy p:not(.mm-kicker) { max-width: 500px; color: var(--mm-muted); font-size: .9rem; line-height: 1.8; }
.mm-editorial-link { display: inline-block; margin-top: 22px; padding-bottom: 3px; border-bottom: 1px solid var(--mm-ink); color: var(--mm-ink); text-decoration: none; font-size: .64rem; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; }
.mm-contact-cta { border-top: 1px solid var(--mm-line); border-bottom: 1px solid var(--mm-line); background: var(--mm-card); padding: clamp(56px,7vw,88px) 22px; text-align: center; }
.mm-contact-cta-inner { max-width: 760px; margin: auto; }
.mm-contact-cta .mm-kicker { margin-bottom: 15px; }
.mm-cta-title { margin: 0 0 16px; color: var(--mm-ink) !important; font-size: clamp(2.5rem,4.4vw,4.7rem); line-height: 1; }
.mm-contact-cta p { margin: 0 auto 28px; max-width: 610px; color: var(--mm-muted); font-size: .9rem; line-height: 1.7; }

/* ---------- Customer reviews ---------- */
.home-reviews-section { background: var(--mm-bg) !important; border: 0 !important; padding: clamp(68px,8vw,108px) 0 !important; }
.home-reviews-shell { max-width: var(--mm-max) !important; padding: 0 clamp(22px,4vw,52px) !important; }
.home-reviews-eyebrow { color: var(--mm-teal) !important; font-size: .6rem !important; letter-spacing: .2em !important; }
.home-reviews-heading h2 { color: var(--mm-ink) !important; font-size: clamp(2.3rem,4vw,4rem) !important; letter-spacing: -.02em !important; text-transform: none !important; }
.home-reviews-underline { display: none !important; }
.home-reviews-summary, .home-reviews-note { color: var(--mm-muted) !important; }
.home-review-card { border: 1px solid var(--mm-line) !important; background: transparent !important; border-radius: 0 !important; box-shadow: none !important; }
.home-reviews-arrow { border: 0 !important; background: transparent !important; color: var(--mm-teal) !important; box-shadow: none !important; }

/* ---------- Footer ---------- */
.luxury-footer { margin: 0 !important; padding: 54px 0 28px !important; background: var(--mm-bg) !important; color: var(--mm-ink) !important; border-top: 1px solid var(--mm-line) !important; box-shadow: none !important; }
.footer-container { max-width: var(--mm-max) !important; margin: 0 auto !important; padding: 0 clamp(22px,4vw,52px) !important; gap: clamp(30px,5vw,72px) !important; }
.footer-heading { color: var(--mm-ink) !important; font-family: var(--mm-body) !important; font-size: .62rem !important; font-weight: 500 !important; letter-spacing: .16em !important; }
.footer-links a, .footer-text, .footer-text a, .footer-badges, .social-links a { color: var(--mm-muted) !important; font-size: .76rem !important; line-height: 1.75 !important; text-decoration: none !important; }
.footer-links a:hover, .footer-text a:hover, .social-links a:hover { color: var(--mm-teal) !important; }
.footer-map iframe { filter: grayscale(.5) sepia(.1); border-radius: 0 !important; }
.footer-badges span { background: transparent !important; border: 0 !important; color: var(--mm-muted) !important; }

/* ---------- Collection / catalog page system ---------- */
.er-page-container, .mm-content-page, .presentation-wrapper,
.mm-library-page, .mm-commerce-shell, .mm-checkout-page, .mm-track-shell, .mm-online-order-shell {
  background: var(--mm-bg) !important;
  color: var(--mm-ink) !important;
}
.er-page-container, .presentation-wrapper { max-width: var(--mm-max) !important; margin: 0 auto !important; padding-left: clamp(22px,4vw,52px) !important; padding-right: clamp(22px,4vw,52px) !important; }
.back-btn, .breadcrumb {
  background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; backdrop-filter: none !important;
}
.back-btn { display: inline-flex !important; width: auto !important; margin: 22px 0 34px !important; padding: 0 !important; color: var(--mm-muted) !important; font-size: .62rem !important; font-weight: 500 !important; letter-spacing: .16em !important; text-transform: uppercase !important; text-decoration: none !important; }
.back-btn:hover { color: var(--mm-teal) !important; transform: none !important; }
.breadcrumb { margin: 18px 0 0 !important; padding: 0 !important; }
.breadcrumb, .breadcrumb a, .breadcrumb span { color: var(--mm-muted) !important; font-size: .6rem !important; font-weight: 400 !important; letter-spacing: .14em !important; text-transform: uppercase !important; }
.category-header, .er-header { background: transparent !important; border: 0 !important; box-shadow: none !important; text-align: left !important; }
.er-header { padding-top: 16px !important; }
.er-title, .category-header .er-title { margin: 0 0 16px !important; color: var(--mm-ink) !important; font-size: clamp(2.8rem,5vw,5.8rem) !important; line-height: .96 !important; letter-spacing: -.025em !important; text-align: left !important; text-transform: none !important; }
.er-subtitle { max-width: 550px; color: var(--mm-muted) !important; font-size: .9rem !important; line-height: 1.7 !important; text-align: left !important; }
.choose-diamond-header { margin: 56px 0 26px !important; justify-content: flex-start !important; }
.choose-diamond-header .horizontal-line { display: none !important; }
.choose-diamond-header h2 { color: var(--mm-teal) !important; font-family: var(--mm-body) !important; font-size: .62rem !important; font-weight: 500 !important; letter-spacing: .2em !important; text-transform: uppercase !important; }
.diamond-choices { display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: 24px !important; }
.vertical-divider { display: none !important; }
.choice-card { overflow: visible !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
.choice-card img { width: 100% !important; aspect-ratio: 4/5 !important; object-fit: cover !important; background: var(--mm-card) !important; border-radius: 0 !important; }
.choice-card .card-content { padding: 16px 0 0 !important; text-align: left !important; }
.choice-card h3 { margin: 0 0 8px !important; color: var(--mm-ink) !important; font-family: var(--mm-display) !important; font-size: 1.45rem !important; font-weight: 300 !important; letter-spacing: 0 !important; text-transform: none !important; }
.choice-card .star-accent { display: none !important; }
.choice-card p { color: var(--mm-muted) !important; font-size: .78rem !important; line-height: 1.65 !important; }
.explore-btn { display: inline-block !important; margin-top: 10px !important; padding: 0 0 3px !important; border: 0 !important; border-bottom: 1px solid var(--mm-ink) !important; background: transparent !important; color: var(--mm-ink) !important; font-size: .6rem !important; font-weight: 500 !important; letter-spacing: .14em !important; text-transform: uppercase !important; text-decoration: none !important; }





.mm-category-tabs { position: sticky; top: 64px; z-index: 1200; margin: 26px 0 0; border-top: 1px solid var(--mm-line); border-bottom: 1px solid var(--mm-line); background: rgba(244,239,232,.96); backdrop-filter: blur(8px); }
.mm-category-tabs-inner { max-width: var(--mm-max); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; overflow: hidden; }
.mm-category-primary { display: flex; align-items: center; overflow-x: auto; scrollbar-width: none; }
.mm-category-primary::-webkit-scrollbar { display: none; }
.mm-category-primary a { position: relative; flex: 0 0 auto; height: 48px; display: inline-flex; align-items: center; padding: 0 15px; color: var(--mm-muted); text-decoration: none; font-size: .6rem; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; }
.mm-category-primary a:hover, .mm-category-primary a.is-active { color: var(--mm-ink); }
.mm-category-primary a.is-active::after { content: ""; position: absolute; bottom: 0; left: 15px; right: 15px; height: 1px; background: var(--mm-teal); }
.mm-ring-subnav { display: flex; gap: 14px; align-items: center; padding-right: 2px; white-space: nowrap; }
.mm-ring-subnav a { color: var(--mm-muted); text-decoration: none; font-size: .55rem; letter-spacing: .12em; text-transform: uppercase; }
.mm-ring-subnav a:hover, .mm-ring-subnav a.is-active { color: var(--mm-teal); }

.toolbar-container { margin: 26px 0 0 !important; padding: 16px 0 !important; background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--mm-line) !important; border-radius: 0 !important; box-shadow: none !important; }
.filter-group { gap: 18px !important; }
.filter-wrapper { gap: 6px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
.filter-label { margin: 0 !important; color: var(--mm-muted) !important; font-size: .57rem !important; font-weight: 500 !important; letter-spacing: .14em !important; }
.luxury-filter, .price-input, .search-container, #ring-search {
  border: 1px solid var(--mm-line) !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; color: var(--mm-ink) !important;
}
.luxury-filter, .price-input, #ring-search { min-height: 40px !important; padding: 0 12px !important; font-size: .72rem !important; }
.search-container { border: 0 !important; }
.search-icon { color: var(--mm-teal) !important; }

.product-grid { display: grid !important; grid-template-columns: repeat(4,minmax(0,1fr)) !important; gap: clamp(24px,2.5vw,34px) !important; max-width: var(--mm-max) !important; margin: 42px auto 80px !important; padding: 0 !important; }
.wedding-bands-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; max-width: 980px !important; }
.product-item { min-width: 0 !important; flex: none !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; text-align: left !important; transform: none !important; }
.product-item:hover { box-shadow: none !important; transform: none !important; }
.product-item .product-name { margin: 0 0 10px !important; color: var(--mm-ink) !important; font-size: 1.05rem !important; line-height: 1.2 !important; letter-spacing: .01em !important; text-transform: none !important; text-align: left !important; }
.carousel-container, .image-slider { background: var(--mm-card) !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
.image-slider { margin: 0 !important; }
.image-slider .product-image { width: 100% !important; max-width: 100% !important; height: auto !important; aspect-ratio: 3/4 !important; object-fit: contain !important; padding: 8px !important; margin: 0 !important; mix-blend-mode: multiply !important; opacity: 1 !important; filter: none !important; }
.slider-arrow {
  width: 22px !important;
  height: 22px !important;
  min-width: 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(255,253,249,.7) !important;
  box-shadow: 0 2px 7px rgba(31,41,46,.1) !important;
  color: var(--mm-teal) !important;
  font-size: .68rem !important;
  line-height: 1 !important;
  opacity: .65 !important;
  backdrop-filter: blur(3px);
  transition: background .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease, opacity .16s ease !important;
}
.slider-arrow:hover, .slider-arrow:focus-visible, .slider-arrow:active {
  color: #fff !important;
  background: var(--mm-teal) !important;
  box-shadow: 0 5px 14px rgba(11,107,99,.32) !important;
  opacity: 1 !important;
  transform: translateY(-50%) scale(1.08) !important;
}
.prev-arrow { left: 4px !important; } .next-arrow { right: 4px !important; }
.slider-dots { margin: 10px 0 12px !important; }
.dot { width: 4px !important; height: 4px !important; background: var(--mm-line) !important; }
.dot.active { background: var(--mm-teal) !important; }
.pair-card-pricing, .engagement-card-pricing { margin: 0 !important; padding: 10px 0 0 !important; border: 0 !important; border-top: 1px solid var(--mm-line) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
.pair-card-title { color: var(--mm-muted) !important; font-size: .52rem !important; letter-spacing: .13em !important; }
.pair-card-row { padding: 4px 0 !important; border: 0 !important; color: var(--mm-muted) !important; font-size: .66rem !important; }
.pair-card-row strong { color: var(--mm-ink) !important; font-weight: 400 !important; }
.pair-card-note { display: none !important; }
.view-details-btn { width: 100% !important; margin: 12px 0 0 !important; padding: 11px 0 !important; border: 1px solid var(--mm-line) !important; border-radius: 0 !important; background: transparent !important; color: var(--mm-ink) !important; font-family: var(--mm-body) !important; font-size: .58rem !important; font-weight: 500 !important; letter-spacing: .16em !important; text-transform: uppercase !important; text-align: center !important; }
.view-details-btn:hover { background: var(--mm-teal) !important; border-color: var(--mm-teal) !important; color: var(--mm-bg) !important; }

/* ---------- Product details ---------- */
.product-detail-page .presentation-wrapper { padding-top: 0 !important; padding-bottom: 76px !important; }
.product-detail-page .presentation-content { display: grid !important; grid-template-columns: minmax(0,1.25fr) minmax(340px,.75fr) !important; gap: clamp(38px,6vw,82px) !important; align-items: start !important; }
.product-detail-page .presentation-right { order: 1 !important; position: relative !important; top: auto !important; display: block !important; align-items: stretch !important; justify-content: flex-start !important; }
.product-detail-page .presentation-left { order: 2 !important; min-width: 0 !important; padding-top: 8px !important; }
.product-detail-page .presentation-right .editorial-img,
.product-detail-page #ring-image, .product-detail-page #main-image {
  width: 100% !important; max-width: none !important; max-height: none !important; aspect-ratio: 4/5 !important; object-fit: contain !important; display: block !important; padding: clamp(12px,2vw,28px) !important; background: var(--mm-card) !important;
  mix-blend-mode: normal !important;
  filter: none !important;
  opacity: 1 !important;
}
/* Wedding band detail photos are wide bride+groom pairs (600x300, 2:1), not
   the portrait/square shots the 4/5 box above was sized for, and the base
   .editorial-img rule (css/price.css) anchors content bottom-right, which on
   a box this much taller than the photo pushed the rings off the bottom of
   the screen. Match the box to the photo and center it. */
.product-detail-page.mm-wedding-template .presentation-right .editorial-img,
.product-detail-page.mm-wedding-template #ring-image,
.product-detail-page.mm-wedding-template #main-image {
  aspect-ratio: 3 / 2 !important;
  object-position: center !important;
}
.product-detail-page .presentation-title { margin: 0 0 12px !important; color: var(--mm-ink) !important; font-size: clamp(2.5rem,4vw,4.5rem) !important; line-height: .98 !important; letter-spacing: -.025em !important; text-align: left !important; text-transform: none !important; }
.dynamic-variant-selector, .design-selector, .metal-selector { margin: 20px 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; }
.dynamic-variant-label, .design-label, .metal-label { color: var(--mm-muted) !important; font-size: .58rem !important; font-weight: 500 !important; letter-spacing: .14em !important; text-transform: uppercase !important; }
.dynamic-variant-buttons, .design-buttons { display: flex !important; flex-wrap: wrap !important; gap: 7px !important; }
.dynamic-variant-buttons button, .design-btn { min-height: 38px !important; padding: 0 12px !important; border: 1px solid var(--mm-line) !important; border-radius: 0 !important; background: transparent !important; color: var(--mm-ink) !important; font-size: .62rem !important; box-shadow: none !important; }
.dynamic-variant-buttons button.active, .design-btn.active { border-color: var(--mm-teal) !important; background: var(--mm-teal) !important; color: var(--mm-bg) !important; }
.swatches { gap: 8px !important; }
.swatch { width: 30px !important; height: 30px !important; border: 1px solid var(--mm-line) !important; box-shadow: none !important; }
.swatch.active { outline: 1px solid var(--mm-teal) !important; outline-offset: 3px !important; }
.mm-broken-image { width: 100% !important; aspect-ratio: 3/4 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 6px; padding: 14px; text-align: center; background: repeating-linear-gradient(135deg, #f3ede3, #f3ede3 10px, #ece3d4 10px, #ece3d4 20px); border: 1px dashed #c8b99a; box-sizing: border-box; }
.mm-broken-image-icon { font-size: 1.4rem; opacity: .55; }
.mm-broken-image-name { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: .68rem; font-weight: 700; color: #6b5a3f; word-break: break-all; }
.mm-broken-image-note { font-size: .6rem; color: #9a8b6d; text-transform: uppercase; letter-spacing: .05em; }

/* Thumbnail rail is only 70px wide - full filename + note text doesn't fit,
   so missing-photo slots there just show the icon (tap/hover reveals the
   name via the title attribute set alongside). */
.mm-product-thumb .mm-broken-image {
  aspect-ratio: auto !important;
  height: 100% !important;
  padding: 4px !important;
  gap: 0 !important;
}
.mm-product-thumb .mm-broken-image-name,
.mm-product-thumb .mm-broken-image-note {
  display: none !important;
}
.mm-product-thumb .mm-broken-image-icon {
  font-size: 1rem;
}
.mm-card-swatches { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 10px 0 2px; }
.mm-card-swatch { width: 17px; height: 17px; padding: 0; border-radius: 50%; cursor: pointer; box-shadow: none; transition: transform 160ms ease, outline-color 160ms ease; }
.mm-card-swatch:hover { transform: scale(1.15); }
.mm-card-swatch.active { outline: 1px solid var(--mm-teal); outline-offset: 2px; }
.mm-card-swatch.white-gold { background-color: #ffffff; border: 1px solid #dcd6cd; }
.mm-card-swatch.yellow-gold { background-color: #d4af37; border: 1px solid rgba(0,0,0,.08); }
.mm-card-swatch.rose-gold { background-color: #b76e79; border: 1px solid rgba(0,0,0,.08); }
@media (prefers-reduced-motion: reduce) { .mm-card-swatch { transition: none !important; } .mm-card-swatch:hover { transform: none !important; } }
.ring-price, .pair-price-summary, .individual-price { margin: 24px 0 0 !important; padding: 16px 0 !important; border: 0 !important; border-top: 1px solid var(--mm-line) !important; border-bottom: 1px solid var(--mm-line) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
.price-header, .price-row, .pair-price-line { border: 0 !important; background: transparent !important; color: var(--mm-muted) !important; }
.price-header { padding-bottom: 10px !important; }
.price-label, .tier-name, .pair-price-heading { color: var(--mm-muted) !important; font-size: .58rem !important; letter-spacing: .13em !important; text-transform: uppercase !important; }
.srp-amount, .tier-amount, .pair-price-line strong { color: var(--mm-ink) !important; font-weight: 400 !important; }
.tier-saving { color: var(--mm-teal) !important; }
.stock-status { color: var(--mm-teal) !important; }
.price-disclaimer { color: var(--mm-muted) !important; font-size: .65rem !important; line-height: 1.5 !important; }
.mm-product-accordions { margin: 28px 0 0 !important; border-top: 1px solid var(--mm-line) !important; }
.mm-accordion { border-bottom: 1px solid var(--mm-line) !important; }
.mm-accordion summary { list-style: none !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 20px !important; padding: 16px 0 !important; color: var(--mm-ink) !important; font-size: .6rem !important; font-weight: 500 !important; letter-spacing: .15em !important; text-transform: uppercase !important; cursor: pointer !important; }
.mm-accordion summary::-webkit-details-marker { display: none !important; }
.mm-accordion summary::after { content: "+"; color: var(--mm-muted); font-size: 1rem; font-weight: 300; transition: transform .2s ease; }
.mm-accordion[open] summary::after { transform: rotate(45deg); }
.mm-accordion-content { padding: 0 0 18px; color: var(--mm-muted); font-size: .76rem; line-height: 1.75; }
.mm-accordion-content p { margin: 0 0 8px; }
.mm-accordion-content ul { margin: 0; padding: 0; list-style: none; }
.mm-accordion-content li { display: flex; gap: 8px; margin: 6px 0; }
.mm-accordion-content li::before { content: "—"; color: var(--mm-teal); }
.product-detail-page.mm-accordion-ready .ring-specs,
.product-detail-page.mm-accordion-ready .basic-specs,
.product-detail-page.mm-accordion-ready .stone-specs,
.product-detail-page.mm-accordion-ready .dual-description-container { display: none !important; }
.mm-product-meta { margin: 0 0 8px; color: var(--mm-teal); font-size: .58rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }

/* ---------- Search ---------- */



.mm-search-top { display: flex; align-items: center; gap: 18px; border-bottom: 1px solid var(--mm-line); }
.mm-search-input {
  flex: 1;
}
.mm-search-close {
  cursor: pointer;
}
.mm-search-results {
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 0 28px;
}
.mm-search-results a { display: flex; align-items: center; justify-content: space-between; padding: 15px 0; border-bottom: 1px solid var(--mm-line); color: var(--mm-muted); text-decoration: none; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; }
.mm-search-results a:hover { color: var(--mm-teal); }

/* ---------- Content / utility pages ---------- */
.mm-content-page { max-width: 1040px !important; margin: 0 auto !important; padding: 70px 24px 100px !important; }
.mm-content-page h1 { margin: 0 0 16px !important; color: var(--mm-ink) !important; font-size: clamp(3rem,5vw,5.6rem) !important; line-height: .95 !important; letter-spacing: -.03em !important; }
.mm-content-page .lead { max-width: 620px; color: var(--mm-muted) !important; line-height: 1.75 !important; }
.mm-content-card { margin-top: 26px !important; padding: 24px 0 !important; border: 0 !important; border-top: 1px solid var(--mm-line) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
.mm-content-card h2 { color: var(--mm-ink) !important; font-size: 1.7rem !important; }
.mm-content-card a { color: var(--mm-teal) !important; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .nav-list { gap: 18px !important; }
  .mm-nav-utilities { gap: 12px !important; }
  .product-grid { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
}
@media (max-width: 980px) {
  .main-floating-nav, .main-floating-nav.mm-static-header { grid-template-columns: max-content 1fr max-content !important; min-height: 60px !important; }
  .nav-list { display: none !important; position: absolute !important; top: 60px !important; left: 0 !important; right: 0 !important; padding: 18px 22px 28px !important; background: var(--mm-bg) !important; border-bottom: 1px solid var(--mm-line) !important; }
  .nav-list.open, .nav-list.active, .nav-list.is-open, .nav-list.mobile-active { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 0 !important; }
  .nav-list .nav-item > a, .nav-list .nav-link-row > a, .nav-list .mm-nav-custom { width: 100% !important; min-height: 44px !important; justify-content: flex-start !important; }
  .dropdown-menu { position: static !important; width: 100% !important; display: none !important; padding: 0 0 10px 14px !important; border: 0 !important; }
  .nav-item.open > .dropdown-menu { display: block !important; }
  .mobile-menu-btn { display: inline-flex !important; justify-self: center !important; }
  .mm-mobile-menu-label { font-size: .6rem !important; letter-spacing: .13em !important; text-transform: uppercase !important; }
  .mm-nav-utility { font-size: 0 !important; }
  .mm-nav-utility[data-mm-search-btn]::before { content: "⌕"; font-size: 1.2rem; }
  .mm-bag-text { display: none !important; }
  .mm-bag-count { font-size: .72rem !important; }
  .mm-category-tabs { top: 60px; }
  .mm-category-tabs-inner { display: block; }
  .mm-ring-subnav { padding: 0 15px 12px; overflow-x: auto; }
  .mm-hero-grid, .mm-craft-grid, .mm-editorial { grid-template-columns: 1fr; }
  .mm-hero-copy { order: 2; }
  .mm-hero-media { order: 1; }
  .collection-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .collection-item:first-child { grid-column: span 2; }
  .product-detail-page .presentation-content { grid-template-columns: 1fr !important; }
  .product-detail-page .presentation-right { order: 1 !important; }
  .product-detail-page .presentation-left { order: 2 !important; }
  .diamond-choices {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 18px 12px !important;
  }
}
@media (max-width: 720px) {
  .main-floating-nav, .main-floating-nav.mm-static-header { padding: 0 14px !important; gap: 10px !important; }
.mm-nav-utilities { gap: 10px !important; }
  .mm-nav-utility[data-mm-search-btn] { display: none !important; }
  .mm-figma-hero { padding-top: 32px !important; }
  .mm-hero-title { font-size: clamp(3rem,16vw,4.7rem); }
  .mm-hero-media::before { inset: -12px 12px auto -10px; }
  .collection-grid {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 18px 12px !important;
  }
  .collection-item:first-child { grid-column: auto !important; }
  .collection-item:first-child .collection-link img,
  .collection-link img {
    aspect-ratio: 4/5 !important;
    width: 100% !important;
  }
  .collection-label {
    padding-top: 8px !important;
    font-size: .72rem !important;
    line-height: 1.25 !important;
    text-align: center !important;
  }
  .mm-editorial-inset { right: -8px; bottom: -22px; width: 120px; border-width: 7px; }
  .product-grid, .wedding-bands-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 22px 12px !important; }
  .product-item .product-name { font-size: .9rem !important; }
  .image-slider .product-image { aspect-ratio: 1/1.25 !important; padding: 2px !important; }
  .pair-card-row { font-size: .58rem !important; }
  .view-details-btn { font-size: .52rem !important; }
  .toolbar-container { align-items: stretch !important; gap: 14px !important; }
  .filter-group { width: 100% !important; overflow-x: auto !important; flex-wrap: nowrap !important; }
  .search-container { width: 100% !important; }
  
  .mm-search-results { grid-template-columns: 1fr; }
  .footer-container { grid-template-columns: 1fr !important; }
}
@media (max-width: 420px) {
  .product-grid, .wedding-bands-grid { grid-template-columns: 1fr 1fr !important; }
  .mm-category-primary a { padding: 0 11px; }
  .mm-ring-subnav { gap: 11px; }
}

/* Keep wedding-band product pages compact: pair pricing remains visible, detailed bride/groom specs live in the accordion. */
body.mm-wedding-template.mm-accordion-ready #ring-details { display: none !important; }

/* ---------- All collections landing page ---------- */
.mm-collections-page { max-width: var(--mm-max); margin: 0 auto; padding: 0 clamp(22px,4vw,52px) 100px; }
.mm-collections-hero { padding: 24px 0 48px; border-bottom: 1px solid var(--mm-line); }
.mm-collections-hero .back-btn { margin-bottom: 44px !important; }
.mm-collections-hero h1 { margin: 0 0 18px; color: var(--mm-ink); font-family: var(--mm-display) !important; font-size: clamp(3.8rem,7vw,7.4rem); font-weight: 300; line-height: .92; letter-spacing: -.04em; }
.mm-collections-hero > p:last-child { max-width: 560px; margin: 0; color: var(--mm-muted); font-size: .9rem; line-height: 1.75; }
.mm-collections-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 30px 22px; padding: 52px 0 76px; }
.mm-collection-tile { display: block; min-width: 0; color: inherit; text-decoration: none; }
.mm-collection-tile-wide { grid-column: span 2; }
.mm-collection-tile img { width: 100%; aspect-ratio: 4/5; display: block; object-fit: cover; background: var(--mm-card); transition: transform .6s ease; }
.mm-collection-tile-wide img { aspect-ratio: 16/10; }
.mm-collection-tile:hover img { transform: scale(1.012); }
.mm-collection-tile > div { padding-top: 14px; }
.mm-collection-tile span { color: var(--mm-teal); font-size: .57rem; font-weight: 500; letter-spacing: .17em; text-transform: uppercase; }
.mm-collection-tile h2 { margin: 5px 0 5px; color: var(--mm-ink); font-family: var(--mm-display) !important; font-size: 1.55rem; font-weight: 300; }
.mm-collection-tile p { margin: 0; color: var(--mm-muted); font-size: .72rem; line-height: 1.55; }
.mm-collection-stone-links { padding: 58px clamp(22px,5vw,70px); background: #0F675F !important; color: #FFFDF9 !important; }
.mm-collection-stone-links .mm-kicker { color: #D7E9E4 !important; }
.mm-collection-stone-links > div { margin-top: 24px; border-top: 1px solid rgba(244,239,232,.22); }
.mm-collection-stone-links a { display:flex;align-items:center;justify-content:space-between;padding:18px 0;border-bottom:1px solid rgba(255,253,249,.28);color:#FFFDF9 !important;text-decoration:none;font-size:.75rem;letter-spacing:.08em; }
.mm-collection-stone-links a span { color: #C9DED8; font-size: 1.15rem; }
@media(max-width:900px){.mm-collections-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.mm-collection-tile-wide{grid-column:span 2}}
@media(max-width:620px){.mm-collections-grid{grid-template-columns:1fr}.mm-collection-tile-wide{grid-column:auto}.mm-collection-tile-wide img,.mm-collection-tile img{aspect-ratio:4/5}}

/* =========================================================
   HEADER COMPACTNESS + LEGACY UTILITY CLEANUP
   Keep the Figma-style header on one row and prevent older
   commerce/enhancement scripts from creating duplicate hearts.
   ========================================================= */
@media (min-width: 1181px) {
  .main-floating-nav.mm-static-header {
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    grid-template-columns: max-content minmax(420px, 1fr) max-content !important;
    grid-template-rows: 58px !important;
    grid-auto-rows: 0 !important;
    align-items: center !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .main-floating-nav.mm-static-header > .nav-brand {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: center !important;
  }

  .main-floating-nav.mm-static-header > .nav-list {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: center !important;
  }

  .main-floating-nav.mm-static-header > .mm-nav-utilities {
    grid-column: 3 !important;
    grid-row: 1 !important;
    align-self: center !important;
    justify-self: end !important;
  }

  .main-floating-nav.mm-static-header .nav-item > a,
  .main-floating-nav.mm-static-header .nav-link-row > a,
  .main-floating-nav.mm-static-header .mm-nav-custom {
    min-height: 58px !important;
  }


  .main-floating-nav.mm-static-header > .mobile-menu-btn {
    display: none !important;
  }
}

/* Legacy controls are replaced by SEARCH / ♡ FAVORITES / BAG (0). */
.main-floating-nav.mm-static-header > .nav-utility-icons,
.main-floating-nav.mm-static-header > .nav-wishlist,
.main-floating-nav.mm-static-header > .nav-cart {
  display: none !important;
}


/* =========================================================
   TWO-IMAGE COLLECTION TRANSITION + THREE-IMAGE PRODUCT GALLERY
   Desktop catalog: image 1 fades to image 2 on hover.
   Mobile catalog: the same two images remain swipeable.
   Product detail: up to three recorded product images appear as a
   vertical thumbnail rail on desktop and a swipe carousel on mobile.
   ========================================================= */
@media (min-width: 721px) {
  .product-item .carousel-container {
    position: relative !important;
    overflow: hidden !important;
  }
  .product-item .image-slider {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    aspect-ratio: 3 / 4 !important;
    overflow: hidden !important;
    scroll-behavior: auto !important;
  }
  .product-item .image-slider .product-image {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    opacity: 0 !important;
    transform: scale(1.012) !important;
    transition: opacity .5s cubic-bezier(.2,.65,.25,1), transform .7s cubic-bezier(.2,.65,.25,1) !important;
    pointer-events: none !important;
  }
  .product-item .image-slider .product-image:first-child {
    opacity: 1 !important;
    transform: scale(1) !important;
  }
  .product-item:hover .image-slider .product-image:first-child {
    opacity: 0 !important;
    transform: scale(1.012) !important;
  }
  .product-item:hover .image-slider .product-image:nth-child(2) {
    opacity: 1 !important;
    transform: scale(1) !important;
  }
  .product-item .slider-arrow,
  .product-item .slider-dots {
    display: none !important;
  }
}

@media (max-width: 720px) {
  .product-item .carousel-container {
    position: relative !important;
    overflow: hidden !important;
  }
  .product-item .image-slider {
    display: flex !important;
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .product-item .image-slider::-webkit-scrollbar { display: none !important; }
  .product-item .image-slider .product-image {
    position: relative !important;
    inset: auto !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1.25 !important;
    object-fit: contain !important;
    opacity: 1 !important;
    transform: none !important;
    scroll-snap-align: start !important;
    pointer-events: auto !important;
  }
  .product-item .slider-arrow { display: block !important; }
  .product-item .slider-dots { display: flex !important; }
}

/* Product detail gallery */
.product-detail-page .mm-product-gallery {
  display: grid !important;
  grid-template-columns: 70px minmax(0, 1fr) !important;
  gap: 14px !important;
  width: 100% !important;
  align-items: center !important;
}
.product-detail-page .mm-product-thumbs {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
.product-detail-page .mm-product-thumb {
  display: block !important;
  width: 70px !important;
  aspect-ratio: 1 / 1.12 !important;
  padding: 0 !important;
  border: 1px solid transparent !important;
  border-radius: 0 !important;
  background: var(--mm-card) !important;
  overflow: hidden !important;
  cursor: pointer !important;
}
.product-detail-page .mm-product-thumb.is-active {
  border-color: var(--mm-ink) !important;
}
.product-detail-page .mm-product-thumb img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  padding: 4px !important;
  object-fit: contain !important;
  mix-blend-mode: normal !important;
  filter: none !important;
  opacity: 1 !important;
}
.product-detail-page .mm-product-stage {
  min-width: 0 !important;
  width: 100% !important;
}
.product-detail-page .mm-product-stage > #ring-image,
.product-detail-page .mm-product-stage > #main-image,
.product-detail-page .mm-product-stage > .editorial-img {
  margin: 0 !important;
  transform: none !important;
}
.product-detail-page .mm-product-mobile-track,
.product-detail-page .mm-product-mobile-dots {
  display: none !important;
}
.product-detail-page .image-metal-container {
  width: 100% !important;
  max-width: none !important;
}

@media (max-width: 980px) {
  .product-detail-page .mm-product-gallery {
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    align-items: center !important;
  }
  .product-detail-page .mm-product-thumbs {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  .product-detail-page .mm-product-thumb {
    width: 58px !important;
    height: 68px !important;
  }
  .product-detail-page .mm-product-stage > #ring-image,
  .product-detail-page .mm-product-stage > #main-image,
  .product-detail-page .mm-product-stage > .editorial-img {
    display: block !important;
  }
  .product-detail-page .mm-product-mobile-track {
    display: none !important;
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    background: var(--mm-card) !important;
  }
  .product-detail-page .mm-product-mobile-track::-webkit-scrollbar {
    display: none !important;
  }
  .product-detail-page .mm-product-mobile-image {
    flex: 0 0 100% !important;
    width: 100% !important;
    aspect-ratio: 4 / 5 !important;
    padding: clamp(10px, 3vw, 20px) !important;
    object-fit: contain !important;
    scroll-snap-align: start !important;
    mix-blend-mode: normal !important;
    filter: none !important;
    opacity: 1 !important;
  }
  .product-detail-page .mm-product-mobile-dots {
    display: none !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 12px 0 2px !important;
  }
  .product-detail-page .mm-product-mobile-dot {
    width: 5px !important;
    height: 5px !important;
    min-width: 5px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: var(--mm-line) !important;
    cursor: pointer !important;
  }
  .product-detail-page .mm-product-mobile-dot.is-active {
    background: var(--mm-teal) !important;
  }
}


/* =========================================================
   MINIMAL FIGMA-STYLE CATALOG CARD
   One selling price, no SRP/Card/Cash breakdown on collection cards.
   VIEW PIECE becomes an image action strip on desktop.
   ========================================================= */
.product-item .mm-legacy-card-pricing {
  display: none !important;
}
.product-item .mm-card-info {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 14px !important;
  margin-top: 12px !important;
}
.product-item .mm-card-info .product-name {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  font-family: var(--mm-display) !important;
  font-size: 1rem !important;
  line-height: 1.15 !important;
  font-weight: 400 !important;
  letter-spacing: -.01em !important;
  text-transform: none !important;
}
.product-item .mm-card-price {
  flex: 0 0 auto !important;
  color: var(--mm-ink) !important;
  font-family: var(--mm-body) !important;
  font-size: .82rem !important;
  line-height: 1 !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}
.product-item .mm-card-meta {
  margin-top: 5px !important;
  color: var(--mm-muted) !important;
  font-family: var(--mm-body) !important;
  font-size: .52rem !important;
  line-height: 1.25 !important;
  font-weight: 500 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
}
.product-item .carousel-container {
  position: relative !important;
}
.product-item .view-details-btn.mm-view-piece {
  position: absolute !important;
  z-index: 8 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 14px 12px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--mm-teal-deep) !important;
  color: var(--mm-bg) !important;
  font-family: var(--mm-body) !important;
  font-size: .56rem !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  letter-spacing: .19em !important;
  text-align: center !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
}
@media (min-width: 721px) {
  .product-item .view-details-btn.mm-view-piece {
    opacity: 0 !important;
    transform: translateY(100%) !important;
    transition: opacity .25s ease, transform .32s cubic-bezier(.2,.65,.25,1) !important;
  }
  .product-item:hover .view-details-btn.mm-view-piece,
  .product-item:focus-within .view-details-btn.mm-view-piece {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
}
@media (max-width: 720px) {
  .product-item .view-details-btn.mm-view-piece {
    opacity: 1 !important;
    transform: none !important;
    padding: 12px 10px !important;
  }
  /* Wedding-band cards use a shorter 3:2 image box on mobile (matching the
     wide bride+groom photos), so this always-visible overlay bar — sized for
     the taller 1:1.25 boxes other categories use — covered a much bigger
     share of the image. Shrink it to keep it proportionate. */
  .wedding-bands-grid .product-item .view-details-btn.mm-view-piece {
    padding: 6px 10px !important;
    font-size: 0.48rem !important;
    letter-spacing: 0.14em !important;
  }
  .product-item .mm-card-info {
    margin-top: 10px !important;
  }
  .product-item .mm-card-info .product-name {
    font-size: .92rem !important;
  }
  .product-item .mm-card-price {
    font-size: .76rem !important;
  }
}


/* Product action: desktop hover/focus, touch-visible on tablet/mobile. */
@media (hover: hover) and (min-width: 981px) {
  .product-item:hover .view-details-btn,
  .product-item:focus-within .view-details-btn,
  .product-item:hover .view-details-btn.mm-view-piece,
  .product-item:focus-within .view-details-btn.mm-view-piece {
    background: var(--mm-teal) !important;
    border-color: var(--mm-teal) !important;
    color: #FFFDF9 !important;
  }
}
@media (hover: none), (max-width: 980px) {
  .product-item .view-details-btn.mm-view-piece {
    opacity: 1 !important;
    transform: none !important;
    background: var(--mm-teal) !important;
    border-color: var(--mm-teal) !important;
    color: #FFFDF9 !important;
  }
}


/* =========================================================
   FIGMA CATALOG GRID REFINEMENT
   Three editorial columns on desktop with taller image frames,
   quieter text rhythm, and more breathing room between products.
   ========================================================= */
@media (min-width: 1101px) {
  .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    max-width: 1120px !important;
    gap: 54px 28px !important;
    margin: 50px auto 104px !important;
  }
  .wedding-bands-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 920px !important;
    gap: 54px 32px !important;
  }
}

@media (min-width: 721px) {
  .product-item .carousel-container,
  .product-item .image-slider {
    aspect-ratio: 3 / 4 !important;
  }
  /* Wedding band photos are wide bride+groom pairs (600x300, 2:1), not the
     portrait/square shots the 3/4 box above was sized for — that box left
     ~60% dead space under the rings. Match the box to the actual photo shape. */
  .wedding-bands-grid .product-item .carousel-container,
  .wedding-bands-grid .product-item .image-slider {
    aspect-ratio: 3 / 2 !important;
  }
  .product-item .image-slider .product-image {
    padding: 10px !important;
  }
  .product-item .mm-card-info {
    margin-top: 14px !important;
    gap: 18px !important;
  }
  .product-item .mm-card-info .product-name {
    font-size: 1.02rem !important;
    line-height: 1.18 !important;
  }
  .product-item .mm-card-price {
    font-size: .84rem !important;
  }
  .product-item .mm-card-meta {
    margin-top: 6px !important;
    font-size: .53rem !important;
    line-height: 1.35 !important;
  }
}

@media (min-width: 721px) and (max-width: 1100px) {
  .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 42px 20px !important;
    margin: 44px auto 88px !important;
  }
}

@media (max-width: 720px) {
  .product-grid,
  .wedding-bands-grid {
    gap: 30px 12px !important;
    margin-top: 30px !important;
    margin-bottom: 72px !important;
  }
  .product-item .image-slider .product-image {
    aspect-ratio: 3 / 4 !important;
  }
  .wedding-bands-grid .product-item .image-slider .product-image {
    aspect-ratio: 3 / 2 !important;
    padding: 11px !important;
  }
  /* The ring photo otherwise touches the image box's left/right edges (a 2:1
     photo filling a 3:2 box), leaving the slider arrows — pinned to those
     same edges — with nothing but ring metal to sit on. The padding above
     gives them a real gap; this keeps them a lighter, less obstructive
     presence over what photo they do still cross. */
  .wedding-bands-grid .product-item .slider-arrow {
    opacity: 0.45 !important;
  }
  .wedding-bands-grid .product-item .slider-arrow:hover,
  .wedding-bands-grid .product-item .slider-arrow:focus-visible,
  .wedding-bands-grid .product-item .slider-arrow:active {
    opacity: 1 !important;
  }
  .product-item .mm-card-info {
    align-items: flex-start !important;
    gap: 8px !important;
  }
  .product-item .mm-card-meta {
    margin-top: 5px !important;
  }
}


/* =========================================================
   CATALOG IMAGE TRANSITION
   Desktop: exclusive Image 1 -> Image 3 swap when available;
   two-image products use Image 1 -> Image 2. No opacity crossfade,
   so two jewelry photos can never appear ghosted at the same time.
   ========================================================= */
@media (min-width: 721px) {
  .product-item .carousel-container {
    overflow: hidden !important;
  }
  .product-item .image-slider {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    scroll-snap-type: none !important;
  }
  .product-item .image-slider .product-image {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: scale(1.012) !important;
    transition: transform .55s cubic-bezier(.2,.65,.25,1) !important;
    pointer-events: none !important;
  }
  .product-item .image-slider .product-image:first-child {
    opacity: 1 !important;
    visibility: visible !important;
    transform: scale(1) !important;
  }
  .product-item .image-slider .product-image.mm-catalog-hover-image {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: scale(1.012) !important;
  }
  .product-item:hover .image-slider .product-image:first-child,
  .product-item:focus-within .image-slider .product-image:first-child {
    opacity: 0 !important;
    visibility: hidden !important;
  }
  .product-item:hover .image-slider .product-image.mm-catalog-hover-image,
  .product-item:focus-within .image-slider .product-image.mm-catalog-hover-image {
    opacity: 1 !important;
    visibility: visible !important;
    transform: scale(1) !important;
  }
  .product-item .slider-arrow,
  .product-item .slider-dots {
    display: none !important;
  }
}

@media (max-width: 720px) {
  .product-item .image-slider {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important;
  }
  .product-item .image-slider::-webkit-scrollbar {
    display: none !important;
  }
  .product-item .image-slider .product-image {
    position: static !important;
    inset: auto !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    height: auto !important;
    opacity: 1 !important;
    transform: none !important;
    scroll-snap-align: start !important;
  }
}

/* =========================================================
   QUICK BROWSE DESKTOP FIT FIX
   Keep every engagement filter, including Sort, inside panel.
   ========================================================= */
@media (min-width: 1181px) {
  .mm-catalog-tools.mm-catalog-tools--engagement-filters {
    box-sizing: border-box !important;
    grid-template-columns: minmax(155px, .72fr) minmax(0, 5.28fr) !important;
  }

  .mm-catalog-tools--engagement-filters .mm-catalog-tools-controls {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    grid-template-columns:
      minmax(0, 1.55fr)
      minmax(0, .92fr)
      minmax(0, .92fr)
      minmax(0, .88fr)
      minmax(0, .88fr)
      minmax(0, 1.18fr)
      minmax(0, .98fr) !important;
    gap: 10px !important;
  }

  .mm-catalog-tools--engagement-filters .mm-catalog-tools-controls > *,
  .mm-catalog-tools--engagement-filters .mm-quick-search,
  .mm-catalog-tools--engagement-filters .mm-shape-block,
  .mm-catalog-tools--engagement-filters .mm-carat-control,
  .mm-catalog-tools--engagement-filters .mm-clarity-control,
  .mm-catalog-tools--engagement-filters .mm-color-control,
  .mm-catalog-tools--engagement-filters .mm-budget-control,
  .mm-catalog-tools--engagement-filters .mm-sort-control {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .mm-catalog-tools--engagement-filters select,
  .mm-catalog-tools--engagement-filters input,
  .mm-catalog-tools--engagement-filters .mm-input-shell,
  .mm-catalog-tools--engagement-filters .mm-budget-input-shell {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

/* =========================================================
   CATALOG HERO + FILTER RHYTHM
   Align the collection heading, tab navigation and Quick Browse
   panel into one calm editorial flow.
   ========================================================= */
.er-page-container {
  padding-top: 0 !important;
}

.er-page-container > .back-btn {
  margin-top: 22px !important;
  margin-bottom: 30px !important;
}

.er-page-container > .category-header {
  max-width: 1040px !important;
  margin: 0 0 30px !important;
  padding: 0 !important;
}

.er-page-container > .category-header .er-title {
  max-width: 1000px !important;
  margin: 0 !important;
  line-height: .94 !important;
}

.er-page-container > .mm-category-tabs {
  margin-top: 0 !important;
}

.er-page-container .mm-category-tabs-inner {
  min-height: 50px !important;
}

.er-page-container .mm-category-primary a {
  height: 50px !important;
}

.er-page-container .mm-catalog-tools,
.er-page-container .mm-catalog-tools.mm-catalog-tools--budget,
.er-page-container .mm-catalog-tools.mm-catalog-tools--engagement-filters {
  width: 100% !important;
  max-width: 100% !important;
  margin: 26px 0 46px !important;
  padding: 18px 20px 16px !important;
  border-radius: 16px !important;
}

.er-page-container .mm-catalog-tools-heading {
  padding: 1px 0 2px !important;
}

.er-page-container .mm-catalog-tools-title {
  margin-bottom: 1px !important;
}

.er-page-container .mm-catalog-tools-subtitle {
  line-height: 1.4 !important;
}

.er-page-container .mm-catalog-tools-controls {
  align-items: end !important;
}

.er-page-container .mm-control-label {
  margin-bottom: 7px !important;
}

.er-page-container .mm-input-shell,
.er-page-container .mm-budget-input-shell,
.er-page-container .mm-catalog-tools select {
  min-height: 41px !important;
}

.er-page-container .mm-budget-feedback {
  margin-top: 3px !important;
  line-height: 1.35 !important;
}

.er-page-container .product-grid,
.er-page-container #auto-product-grid {
  margin-top: 0 !important;
}

@media (max-width: 1180px) {
  .er-page-container > .category-header {
    margin-bottom: 24px !important;
  }
  .er-page-container .mm-catalog-tools,
  .er-page-container .mm-catalog-tools.mm-catalog-tools--budget,
  .er-page-container .mm-catalog-tools.mm-catalog-tools--engagement-filters {
    margin: 22px 0 38px !important;
    padding: 17px 18px 15px !important;
  }
}

@media (max-width: 720px) {
  .er-page-container > .back-btn {
    margin-top: 18px !important;
    margin-bottom: 22px !important;
  }
  .er-page-container > .category-header {
    margin-bottom: 20px !important;
  }
  .er-page-container > .category-header .er-title {
    font-size: clamp(2.4rem, 13vw, 4rem) !important;
    line-height: .96 !important;
  }
  .er-page-container > .mm-category-tabs {
    margin-left: calc(-1 * clamp(22px,4vw,52px)) !important;
    margin-right: calc(-1 * clamp(22px,4vw,52px)) !important;
    padding-left: clamp(12px,4vw,20px) !important;
    padding-right: clamp(12px,4vw,20px) !important;
  }
  .er-page-container .mm-catalog-tools,
  .er-page-container .mm-catalog-tools.mm-catalog-tools--budget,
  .er-page-container .mm-catalog-tools.mm-catalog-tools--engagement-filters {
    width: 100% !important;
    margin: 18px 0 30px !important;
    padding: 14px !important;
    border-radius: 14px !important;
  }
}


/* =========================================================
   PRODUCT DETAIL PURCHASE RESTORE — desktop showroom layout
   Metal selector sits beneath title; Add to Bag + Wishlist stay in-page.
   ========================================================= */
.product-detail-page .mm-title-metal {
  display: block !important;
  color: var(--mm-muted) !important;
  font-family: var(--mm-font) !important;
}

.product-detail-page .mm-title-metal #current-metal,
.product-detail-page .mm-title-metal #page-metal {
  text-transform: uppercase !important;
}

/* =========================================================
   PRODUCT DETAIL RESPONSIVE SYSTEM V13
   One source of truth for desktop, tablet, and mobile.
   ========================================================= */

/* Back must always be clickable and must sit above gallery layers. */
.product-detail-page .back-btn {
  position: relative !important;
  z-index: 300 !important;
  pointer-events: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  width: max-content !important;
  cursor: pointer !important;
}

/* Metal color belongs directly below the product name, across all templates. */
.product-detail-page .presentation-left > .mm-title-metal,
.product-detail-page .product-info > .mm-title-metal,
.product-detail-page .product-details > .mm-title-metal {
  display: flex !important;
  position: static !important;
  inset: auto !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  width: 100% !important;
  max-width: none !important;
  margin: 10px 0 22px !important;
  padding: 0 !important;
  text-align: left !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
}
.product-detail-page .mm-title-metal.metal-label {
  display: block !important;
}
.product-detail-page .mm-title-metal .metal-label,
.product-detail-page .mm-title-metal.metal-label {
  margin: 0 0 10px !important;
  color: var(--mm-muted) !important;
  font-family: var(--mm-font) !important;
  font-size: .60rem !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
  letter-spacing: .15em !important;
  text-align: left !important;
  text-transform: uppercase !important;
  white-space: normal !important;
}
.product-detail-page .mm-title-metal #current-metal,
.product-detail-page .mm-title-metal #page-metal {
  color: var(--mm-teal) !important;
  font-weight: 500 !important;
}
.product-detail-page .mm-title-metal .swatches {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin: 0 !important;
}
.product-detail-page .mm-title-metal .swatch {
  flex: 0 0 auto !important;
  cursor: pointer !important;
}



/* Tablet: single-column showroom, comfortable controls, no floating duplicates. */
@media (min-width: 701px) and (max-width: 980px) {
  body.product-detail-page .presentation-wrapper {
    padding-left: clamp(24px, 5vw, 52px) !important;
    padding-right: clamp(24px, 5vw, 52px) !important;
  }
  body.product-detail-page .presentation-content {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 34px !important;
  }
  body.product-detail-page .presentation-right,
  body.product-detail-page .presentation-left {
    width: min(100%, 760px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  body.product-detail-page .presentation-right .editorial-img,
  body.product-detail-page #ring-image,
  body.product-detail-page #main-image {
    max-height: 68vh !important;
  }
  body.product-detail-page .mm-title-metal {
    margin-bottom: 20px !important;
  }
}



/* =========================================================
   SITE-WIDE QUICK SEARCH DRAWER
   Header SEARCH opens a Quick-Browse-style search bar that searches
   the generated Marry Me product index plus collections/pages.
   ========================================================= */
body.mm-search-open { overflow: hidden !important; }
.mm-search-overlay {
  position: fixed !important;
  inset: 58px 0 0 !important;
  z-index: 50000 !important;
  display: none !important;
  padding: 0 !important;
  background: rgba(48, 42, 36, .18) !important;
  backdrop-filter: blur(2px);
}
.mm-search-overlay.is-open { display: block !important; }
.mm-search-shell {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  background: var(--mm-bg) !important;
  border-top: 1px solid var(--mm-line) !important;
  border-bottom: 1px solid var(--mm-line) !important;
  box-shadow: 0 18px 42px rgba(48, 42, 36, .08) !important;
}
.mm-search-inner {
  width: min(1180px, calc(100% - 44px)) !important;
  max-height: calc(100vh - 92px) !important;
  margin: 0 auto !important;
  padding: 20px 0 24px !important;
  overflow-y: auto !important;
}
.mm-search-heading {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 24px !important;
  margin-bottom: 12px !important;
}
.mm-search-heading .mm-control-label {
  display: block !important;
  margin-bottom: 3px !important;
  color: var(--mm-ink) !important;
  font-size: .62rem !important;
  font-weight: 600 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
}
.mm-search-heading p {
  margin: 0 !important;
  color: var(--mm-muted) !important;
  font-size: .72rem !important;
  line-height: 1.45 !important;
}
.mm-search-close {
  flex: 0 0 auto !important;
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  border: 1px solid var(--mm-line) !important;
  border-radius: 50% !important;
  background: var(--mm-bg) !important;
  color: var(--mm-ink) !important;
  font-family: var(--mm-font) !important;
  font-size: 1.1rem !important;
  line-height: 1 !important;
}
.mm-site-search-field {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-height: 46px !important;
  padding: 0 14px !important;
  border: 1px solid var(--mm-line) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.34) !important;
  transition: border-color .2s ease, background-color .2s ease !important;
}
.mm-site-search-field:focus-within {
  border-color: var(--mm-teal) !important;
  background: rgba(255,255,255,.56) !important;
}
.mm-site-search-icon { color: var(--mm-teal) !important; font-size: 1rem !important; }
.mm-search-input {
  width: 100% !important;
  min-width: 0 !important;
  height: 44px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: var(--mm-ink) !important;
  font-family: var(--mm-font) !important;
  font-size: .82rem !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}
.mm-search-input::placeholder { color: var(--mm-muted) !important; opacity: .9 !important; }
.mm-search-esc {
  padding: 3px 6px !important;
  border: 1px solid var(--mm-line) !important;
  border-radius: 4px !important;
  background: transparent !important;
  color: var(--mm-muted) !important;
  font: 500 .52rem/1 var(--mm-font) !important;
  letter-spacing: .08em !important;
}
.mm-search-status {
  min-height: 18px !important;
  margin: 10px 2px 0 !important;
  color: var(--mm-muted) !important;
  font-size: .61rem !important;
  letter-spacing: .05em !important;
}
.mm-search-results {
  display: block !important;
  margin-top: 8px !important;
}
.mm-search-quick {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0,1fr)) !important;
  gap: 0 24px !important;
  border-top: 1px solid var(--mm-line) !important;
}
.mm-search-quick a,
.mm-search-page-links a {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  min-height: 43px !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--mm-line) !important;
  color: var(--mm-ink) !important;
  font-size: .61rem !important;
  letter-spacing: .10em !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
}
.mm-search-quick a:hover,
.mm-search-page-links a:hover { color: var(--mm-teal) !important; }
.mm-search-section { margin-top: 14px !important; }
.mm-search-section + .mm-search-section { margin-top: 24px !important; }
.mm-search-section-title {
  margin-bottom: 9px !important;
  color: var(--mm-muted) !important;
  font-size: .56rem !important;
  font-weight: 600 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
}
.mm-search-product-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap: 1px 22px !important;
  border-top: 1px solid var(--mm-line) !important;
}
.mm-search-product {
  display: grid !important;
  grid-template-columns: 68px minmax(0,1fr) auto !important;
  align-items: center !important;
  gap: 13px !important;
  min-width: 0 !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid var(--mm-line) !important;
  color: inherit !important;
  text-decoration: none !important;
}
.mm-search-product-image {
  display: grid !important;
  place-items: center !important;
  width: 68px !important;
  height: 68px !important;
  overflow: hidden !important;
  background: var(--mm-card) !important;
}
.mm-search-product-image img {
  width: 100% !important;
  height: 100% !important;
  padding: 5px !important;
  object-fit: contain !important;
  mix-blend-mode: normal !important;
}
.mm-search-product-copy { min-width: 0 !important; }
.mm-search-product-copy strong {
  display: block !important;
  overflow: hidden !important;
  color: var(--mm-ink) !important;
  font-family: var(--mm-display) !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.mm-search-product-copy small {
  display: block !important;
  margin-top: 4px !important;
  overflow: hidden !important;
  color: var(--mm-muted) !important;
  font-size: .55rem !important;
  letter-spacing: .09em !important;
  text-overflow: ellipsis !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}
.mm-search-product-price {
  color: var(--mm-ink) !important;
  font-size: .72rem !important;
  white-space: nowrap !important;
}
.mm-search-product:hover .mm-search-product-copy strong { color: var(--mm-teal) !important; }
.mm-search-page-links {
  display: grid !important;
  grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  gap: 0 24px !important;
  border-top: 1px solid var(--mm-line) !important;
}
.mm-search-empty {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  padding: 22px 0 !important;
  border-top: 1px solid var(--mm-line) !important;
  border-bottom: 1px solid var(--mm-line) !important;
}
.mm-search-empty strong { color: var(--mm-ink) !important; font-family: var(--mm-display) !important; font-size: 1.2rem !important; font-weight: 400 !important; }
.mm-search-empty span { color: var(--mm-muted) !important; font-size: .7rem !important; }

@media (max-width: 980px) {
  .mm-search-overlay { inset-top: 60px !important; inset: 60px 0 0 !important; }
  .mm-search-inner { width: min(100% - 32px, 860px) !important; max-height: calc(100vh - 76px) !important; }
  .mm-search-quick { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .mm-search-product-grid { grid-template-columns: 1fr !important; }
  .mm-search-page-links { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width: 720px) {
  /* Keep site-wide search reachable on phones while preserving a compact header. */
  .mm-nav-utility[data-mm-search-btn] {
    display: inline-grid !important;
    place-items: center !important;
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    overflow: hidden !important;
    color: transparent !important;
    font-size: 0 !important;
  }
  .mm-nav-utility[data-mm-search-btn]::before {
    content: "⌕" !important;
    color: var(--mm-ink) !important;
    font-size: 1rem !important;
    line-height: 1 !important;
  }
  .mm-search-inner { width: calc(100% - 24px) !important; padding: 16px 0 20px !important; }
  .mm-search-heading p { display: none !important; }
  .mm-site-search-field { min-height: 44px !important; padding: 0 12px !important; }
  .mm-search-esc { display: none !important; }
  .mm-search-quick { grid-template-columns: 1fr !important; }
  .mm-search-product { grid-template-columns: 58px minmax(0,1fr) auto !important; gap: 10px !important; }
  .mm-search-product-image { width: 58px !important; height: 58px !important; }
  .mm-search-product-copy strong { font-size: .92rem !important; }
  .mm-search-product-copy small { font-size: .50rem !important; }
  .mm-search-product-price { font-size: .64rem !important; }
  .mm-search-page-links { grid-template-columns: 1fr !important; }
}

/* =========================================================
   V20 COLLECTION NAVIGATION
   Group the desktop Collections menu and flatten catalog links into
   one separated, horizontally scrollable row on phones.
   ========================================================= */
.mm-collections-menu {
  width: 315px !important;
  padding: 10px 18px 14px !important;
}
.mm-nav-group,
.mm-nav-direct {
  border-bottom: 1px solid rgba(212,200,188,.72);
}
.mm-nav-direct:last-child { border-bottom: 0; }
.mm-nav-group-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) 34px;
  align-items: center;
  gap: 6px;
}
.dropdown-menu .mm-nav-group-row > a {
  min-width: 0;
  padding: 12px 0 !important;
  color: var(--mm-ink) !important;
  font-weight: 500 !important;
}
.mm-nav-subtoggle {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--mm-muted);
  cursor: pointer;
}
.mm-nav-subtoggle:hover,
.mm-nav-subtoggle:focus-visible { color: var(--mm-teal); }
.mm-nav-subtoggle svg {
  width: 15px;
  height: 15px;
  transition: transform .2s ease;
}
.mm-nav-group.is-open .mm-nav-subtoggle svg { transform: rotate(180deg); }
.mm-nav-submenu {
  display: none;
  margin: 0 0 9px;
  padding: 0 0 2px 14px;
  list-style: none;
  border-left: 1px solid var(--mm-line);
}
.mm-nav-group.is-open > .mm-nav-submenu { display: block; }
.dropdown-menu .mm-nav-submenu a {
  min-height: 0 !important;
  padding: 7px 0 7px 12px !important;
  color: var(--mm-muted) !important;
  font-size: .61rem !important;
  letter-spacing: .11em !important;
}
.dropdown-menu .mm-nav-submenu a:hover,
.dropdown-menu .mm-nav-submenu a.is-active { color: var(--mm-teal) !important; }

.mm-category-desktop { display: contents; }
.mm-category-mobile { display: none; }

@media (max-width: 980px) {
  .mm-collections-menu {
    width: 100% !important;
    padding: 6px 0 8px !important;
  }
  .mm-nav-group,
  .mm-nav-direct {
    border-bottom-color: rgba(212,200,188,.78);
  }
  .dropdown-menu .mm-nav-group-row > a,
  .dropdown-menu > .mm-nav-direct > a {
    padding: 12px 4px !important;
  }
  .mm-nav-submenu {
    margin: 0 0 8px 4px;
    padding-left: 13px;
  }
}

@media (max-width: 720px) {
  .mm-category-tabs {
    overflow: hidden !important;
  }
  .mm-category-tabs-inner {
    display: block !important;
    max-width: none !important;
    overflow: visible !important;
  }
  .mm-category-desktop { display: none !important; }
  .mm-category-mobile {
    display: flex !important;
    align-items: center;
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    padding: 0 2px;
  }
  .mm-category-mobile::-webkit-scrollbar { display: none; }
  .mm-category-mobile a {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 0 12px;
    color: var(--mm-muted);
    text-decoration: none;
    font-size: .56rem;
    font-weight: 500;
    letter-spacing: .115em;
    text-transform: uppercase;
    scroll-snap-align: start;
  }
  .mm-category-mobile a + a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 15px;
    bottom: 15px;
    width: 1px;
    background: var(--mm-line);
  }
  .mm-category-mobile a:hover,
  .mm-category-mobile a.is-active { color: var(--mm-teal); }
  .mm-category-mobile a.is-active::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 0;
    height: 1px;
    background: var(--mm-teal);
  }
}

/* V20: on phone/tablet nav, Collections has its own explicit expander. */
@media (max-width: 980px) {
  .main-floating-nav.mm-static-header .nav-link-row {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) 42px !important;
    align-items: center !important;
    width: 100% !important;
  }
  .main-floating-nav.mm-static-header .nav-dropdown-toggle {
    display: grid !important;
    place-items: center !important;
    width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    color: var(--mm-muted) !important;
  }
  .main-floating-nav.mm-static-header .nav-dropdown-toggle:hover,
  .main-floating-nav.mm-static-header .nav-dropdown-toggle:focus-visible {
    color: var(--mm-teal) !important;
  }
}


/* Responsive navigation reliability + opaque dropdowns. */
@media (max-width: 980px) {
  .main-floating-nav.mm-static-header .nav-list {
    background: #F8F3EC !important;
    box-shadow: 0 18px 34px rgba(47,41,36,.10) !important;
  }
  .main-floating-nav.mm-static-header .dropdown-menu,
  .main-floating-nav.mm-static-header .nav-item.dropdown:hover > .dropdown-menu,
  .main-floating-nav.mm-static-header .nav-item.dropdown:focus-within > .dropdown-menu {
    position: static !important;
    display: none !important;
    width: 100% !important;
    padding: 4px 0 10px 14px !important;
    border: 0 !important;
    background: #F8F3EC !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
  }
  .main-floating-nav.mm-static-header .nav-item.dropdown.open > .dropdown-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
  }
  .main-floating-nav.mm-static-header .dropdown-menu a,
  .main-floating-nav.mm-static-header .dropdown-menu .mm-nav-group-row > a,
  .main-floating-nav.mm-static-header .dropdown-menu > .mm-nav-direct > a {
    color: #51463F !important;
  }
  .main-floating-nav.mm-static-header .dropdown-menu .mm-nav-submenu a {
    color: #76685E !important;
  }
}

@media (max-width: 720px) {
  .mm-craftsmanship { padding: 56px 22px !important; }
  .mm-craft-grid { gap: 34px !important; }
  .mm-craft-title { font-size: clamp(2.8rem, 14vw, 4.4rem) !important; }
  .mm-craft-links a { padding: 16px 0; }
  .mm-btn-primary, .mm-btn-secondary { min-height: 44px; padding: 0 18px; }
}

/* =========================================================
   PRODUCT DETAIL IMAGE FIDELITY V4
   Product-detail photography must match the bright catalog source.
   Never use multiply blending on diamonds/metals.
   ========================================================= */
body.product-detail-page .presentation-right .editorial-img,
body.product-detail-page #ring-image,
body.product-detail-page #main-image,
body.product-detail-page .mm-product-stage img,
body.product-detail-page .mm-product-thumb img,
body.product-detail-page .mm-product-mobile-image {
  mix-blend-mode: normal !important;
  filter: none !important;
  opacity: 1 !important;
  image-rendering: auto !important;
}

/* =========================================================
   V23 MOBILE CHOICE CARDS — SINGLE SOURCE OF TRUTH
   Applies to Engagement "Choose Your Diamond" and
   Wedding Bands "Choose Your Style".
   ========================================================= */
@media (max-width: 768px) {
  .er-page-container .diamond-choices {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 18px 12px !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .er-page-container .vertical-divider {
    display: none !important;
  }

  .er-page-container .choice-card {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  .er-page-container .choice-card img {
    display: block !important;
    width: 100% !important;
    height: 150px !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    object-position: center !important;
    margin: 0 !important;
  }

  .er-page-container .choice-card .card-content {
    padding: 8px 0 0 !important;
    text-align: center !important;
  }

  .er-page-container .choice-card h3 {
    margin: 0 0 7px !important;
    font-family: var(--mm-display) !important;
    font-size: .82rem !important;
    line-height: 1.25 !important;
    font-weight: 400 !important;
    letter-spacing: .03em !important;
    text-align: center !important;
    text-transform: uppercase !important;
  }

  .er-page-container .choice-card .star-accent,
  .er-page-container .choice-card p {
    display: none !important;
  }

  .er-page-container .choice-card .explore-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 0 6px !important;
    border: 0 !important;
    background: var(--mm-teal) !important;
    color: #fff !important;
    font-size: .48rem !important;
    line-height: 1.1 !important;
    font-weight: 600 !important;
    letter-spacing: .09em !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    box-sizing: border-box !important;
  }

  .er-page-container .choose-diamond-header {
    margin-bottom: 16px !important;
  }
}

@media (max-width: 420px) {
  .er-page-container .diamond-choices {
    gap: 16px 10px !important;
  }

  .er-page-container .choice-card img {
    height: 132px !important;
  }

  .er-page-container .choice-card h3 {
    font-size: .72rem !important;
  }

  .er-page-container .choice-card .explore-btn {
    min-height: 32px !important;
    font-size: .44rem !important;
    letter-spacing: .07em !important;
  }
}


/* =========================================================
   V24 ENGAGEMENT MOBILE — CENTERED MOISSANITE
   Keep Lab Grown + Natural equal on row one, then center
   Moissanite beneath them at the exact same card width.
   Wedding Bands intentionally remains unchanged.
   ========================================================= */
@media (max-width: 768px) {
  .engagement-rings-page .diamond-choices > .choice-card:last-child {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    width: calc((100% - 12px) / 2) !important;
    max-width: none !important;
  }

  .engagement-rings-page .choice-card .card-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .engagement-rings-page .choice-card h3 {
    min-height: 2.5em !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

@media (max-width: 420px) {
  .engagement-rings-page .diamond-choices > .choice-card:last-child {
    width: calc((100% - 10px) / 2) !important;
  }
}


/* =========================================================
   V25 HEADER REFRESH — ICON UTILITIES ON DESKTOP
   + MOBILE HEADER WITH CENTERED BRAND
   Reference direction from user screenshots:
   - Desktop: search / favorite / bag as icons only
   - Mobile: menu + search on left area, brand centered,
     favorite + bag on the right.
   ========================================================= */

html body .main-floating-nav.mm-static-header .mm-nav-utilities {
  display: flex !important;
  align-items: center !important;
  justify-self: end !important;
  gap: 16px !important;
}

html body .main-floating-nav.mm-static-header .mm-nav-utility {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 1 !important;
  overflow: visible !important;
}

html body .main-floating-nav.mm-static-header .mm-nav-utility::before {
  color: var(--mm-ink) !important;
}

html body .main-floating-nav.mm-static-header .mm-nav-utility:hover::before,
html body .main-floating-nav.mm-static-header .mm-nav-utility:focus-visible::before {
  color: var(--mm-teal) !important;
}

html body .main-floating-nav.mm-static-header .mm-nav-utility[data-mm-search-btn]::before,
html body .main-floating-nav.mm-static-header .mm-nav-utility[href="cart.html"]::before {
  content: "" !important;
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  background: currentColor !important;
}

html body .main-floating-nav.mm-static-header .mm-nav-utility[data-mm-search-btn]::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='6.75' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M16.2 16.2L21 21' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='6.75' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M16.2 16.2L21 21' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat !important;
}

html body .main-floating-nav.mm-static-header .mm-bag-text {
  display: none !important;
}

html body .main-floating-nav.mm-static-header .mm-nav-utility[href="cart.html"]::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 8h10l-.75 11H7.75L7 8Z' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'/%3E%3Cpath d='M9.5 9V7.5a2.5 2.5 0 0 1 5 0V9' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 8h10l-.75 11H7.75L7 8Z' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'/%3E%3Cpath d='M9.5 9V7.5a2.5 2.5 0 0 1 5 0V9' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat !important;
}

/* ============================================================
   Wishlist + bag header icons — SINGLE SOURCE OF TRUTH.
   Every other declaration for .mm-wishlist-heart-text, .mm-wishlist-count,
   and .mm-bag-count has been removed from base.css, nav.css, enhancements.css
   and lab-grown.css. This is now the only place these are styled.

   Note: .mm-wishlist-count's *visibility* (display:flex/none) is owned by
   enhancements.js (it toggles inline style.display based on wishlist count) —
   this block intentionally does not set display for it, only appearance.
   .mm-bag-count has no such JS toggle, so it gets display set here directly.
   ============================================================ */
.mm-wishlist-heart-text {
  display: none !important;
}

html body .main-floating-nav.mm-static-header .mm-nav-utility.mm-wishlist-link::before {
  content: "" !important;
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  background: currentColor !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.5 12.572 12 20l-7.5-7.428A5 5 0 1 1 12 6.006a5 5 0 1 1 7.5 6.572Z' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.5 12.572 12 20l-7.5-7.428A5 5 0 1 1 12 6.006a5 5 0 1 1 7.5 6.572Z' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat !important;
}

html body .main-floating-nav.mm-static-header .mm-bag-count,
html body .main-floating-nav.mm-static-header .mm-wishlist-count {
  position: absolute !important;
  top: -4px !important;
  right: -6px !important;
  min-width: 16px !important;
  height: 16px !important;
  padding: 0 4px !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  background: #b89253 !important;
  color: #ffffff !important;
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}
html body .main-floating-nav.mm-static-header .mm-bag-count {
  display: flex !important;
}

@media (max-width: 720px) {
  html body .main-floating-nav.mm-static-header {
    top: 0 !important;
    width: 100% !important;
    min-height: 58px !important;
    height: 58px !important;
    margin: 0 0 14px !important;
    padding: 0 14px !important;
    grid-template-columns: 44px 1fr auto !important;
    gap: 0 !important;
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(92, 75, 65, 0.14) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: rgba(255, 255, 255, 0.98) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    backdrop-filter: blur(10px) !important;
  }

  html body .main-floating-nav.mm-static-header > .mobile-menu-btn {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    align-self: center !important;
    display: inline-flex !important;
    width: 44px !important;
    min-width: 44px !important;
    min-height: 58px !important;
    padding: 0 !important;
  }

  html body .main-floating-nav.mm-static-header .mm-mobile-menu-label {
    display: none !important;
  }

  html body .main-floating-nav.mm-static-header > .nav-brand {
    grid-column: auto !important;
    grid-row: auto !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    justify-content: center !important;
    gap: 0 !important;
    padding: 0 !important;
    z-index: 2 !important;
  }

  html body .main-floating-nav.mm-static-header .nav-brand-logo {
    display: none !important;
  }

  html body .main-floating-nav.mm-static-header .nav-brand-name {
    justify-content: center !important;
  }

  html body .main-floating-nav.mm-static-header .brand-fancy-m,
  html body .main-floating-nav.mm-static-header .brand-fancy-m-second {
    font-size: 2rem !important;
  }

  html body .main-floating-nav.mm-static-header .brand-rest {
    font-size: 0.78rem !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    top: -0.10em !important;
  }

  html body .main-floating-nav.mm-static-header > .mm-nav-utilities {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    gap: 12px !important;
  }

  html body .main-floating-nav.mm-static-header .mm-nav-utility[data-mm-search-btn] {
    position: absolute !important;
    left: 56px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }

  html body .main-floating-nav.mm-static-header > .nav-list {
    top: 58px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 14px 16px 22px !important;
    border-top: 1px solid rgba(92, 75, 65, 0.09) !important;
    background: rgba(255, 255, 255, 0.99) !important;
  }
}

@media (max-width: 420px) {
  html body .main-floating-nav.mm-static-header {
    padding: 0 12px !important;
  }

  html body .main-floating-nav.mm-static-header .mm-nav-utility[data-mm-search-btn] {
    left: 52px !important;
  }

  html body .main-floating-nav.mm-static-header .brand-fancy-m,
  html body .main-floating-nav.mm-static-header .brand-fancy-m-second {
    font-size: 1.82rem !important;
  }

  html body .main-floating-nav.mm-static-header .brand-rest {
    font-size: 0.72rem !important;
    letter-spacing: 0.12em !important;
  }
}


/* =========================================================
   V26 HEADER ICON COLOR TUNING
   User-selected direction:
   - Search icon: teal
   - Shopping bag icon: teal
   - Heart remains the elegant dark outline
   ========================================================= */

html body .main-floating-nav.mm-static-header
.mm-nav-utility[data-mm-search-btn]::before,
html body .main-floating-nav.mm-static-header
.mm-nav-utility[href="cart.html"]::before {
  color: var(--mm-teal, #0B6B63) !important;
}

html body .main-floating-nav.mm-static-header
.mm-nav-utility[data-mm-search-btn]:hover::before,
html body .main-floating-nav.mm-static-header
.mm-nav-utility[href="cart.html"]:hover::before,
html body .main-floating-nav.mm-static-header
.mm-nav-utility[data-mm-search-btn]:focus-visible::before,
html body .main-floating-nav.mm-static-header
.mm-nav-utility[href="cart.html"]:focus-visible::before {
  color: #084f49 !important;
}

/* Slightly cleaner, Flaticon-like thin line proportions */
html body .main-floating-nav.mm-static-header
.mm-nav-utility[data-mm-search-btn]::before {
  width: 23px !important;
  height: 23px !important;
}

html body .main-floating-nav.mm-static-header
.mm-nav-utility[href="cart.html"]::before {
  width: 23px !important;
  height: 23px !important;
}

/* =========================================================
   V28 MOBILE BRAND + BAG ICON
   - Force ARRY and E to display as real uppercase
   - Use uploaded custom bag SVG as the shopping bag icon
   (heart-specific sub-rules formerly here were dead code —
   removed; see the wishlist/bag single-source-of-truth block above)
   ========================================================= */

html body .main-floating-nav.mm-static-header .mm-nav-utility[href="cart.html"]::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23000000%22%20fill-rule%3D%22evenodd%22%20d%3D%22M8.921%207.293a.75.75%200%200%201%20.957.457a2.251%202.251%200%200%200%204.245%200a.75.75%200%201%201%201.414.5a3.751%203.751%200%200%201-7.073%200a.75.75%200%200%201%20.457-.957Zm3.44-1.793h-.722c-1.625%200-2.707.003-3.527.104c-.778.096-1.137.263-1.389.472c-.252.21-.482.531-.72%201.278c-.25.787-.452%201.85-.752%203.448c-.42%202.24-.702%203.761-.752%204.907c-.048%201.105.137%201.575.397%201.888c.26.313.687.581%201.782.737c1.135.162%202.683.166%204.962.166h.72c2.28%200%203.827-.004%204.962-.166c1.095-.156%201.522-.424%201.782-.737c.26-.314.445-.783.397-1.888c-.05-1.146-.332-2.667-.752-4.907c-.3-1.598-.501-2.66-.752-3.448c-.238-.747-.468-1.069-.72-1.278c-.252-.209-.61-.376-1.389-.472c-.82-.101-1.902-.104-3.527-.104Zm-6.596-.578c-1.11.922-1.403%202.483-1.988%205.604c-.823%204.389-1.235%206.583-.035%208.029C4.942%2020%207.174%2020%2011.639%2020h.722c4.465%200%206.698%200%207.898-1.445c1.2-1.446.788-3.64-.035-8.03c-.585-3.12-.878-4.681-1.989-5.603C17.125%204%2015.536%204%2012.361%204h-.722c-3.175%200-4.763%200-5.874.922Z%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E") center / 100% 100% no-repeat !important;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23000000%22%20fill-rule%3D%22evenodd%22%20d%3D%22M8.921%207.293a.75.75%200%200%201%20.957.457a2.251%202.251%200%200%200%204.245%200a.75.75%200%201%201%201.414.5a3.751%203.751%200%200%201-7.073%200a.75.75%200%200%201%20.457-.957Zm3.44-1.793h-.722c-1.625%200-2.707.003-3.527.104c-.778.096-1.137.263-1.389.472c-.252.21-.482.531-.72%201.278c-.25.787-.452%201.85-.752%203.448c-.42%202.24-.702%203.761-.752%204.907c-.048%201.105.137%201.575.397%201.888c.26.313.687.581%201.782.737c1.135.162%202.683.166%204.962.166h.72c2.28%200%203.827-.004%204.962-.166c1.095-.156%201.522-.424%201.782-.737c.26-.314.445-.783.397-1.888c-.05-1.146-.332-2.667-.752-4.907c-.3-1.598-.501-2.66-.752-3.448c-.238-.747-.468-1.069-.72-1.278c-.252-.209-.61-.376-1.389-.472c-.82-.101-1.902-.104-3.527-.104Zm-6.596-.578c-1.11.922-1.403%202.483-1.988%205.604c-.823%204.389-1.235%206.583-.035%208.029C4.942%2020%207.174%2020%2011.639%2020h.722c4.465%200%206.698%200%207.898-1.445c1.2-1.446.788-3.64-.035-8.03c-.585-3.12-.878-4.681-1.989-5.603C17.125%204%2015.536%204%2012.361%204h-.722c-3.175%200-4.763%200-5.874.922Z%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E") center / 100% 100% no-repeat !important;
  background: currentColor !important;
  width: 23px !important;
  height: 23px !important;
}

@media (max-width: 720px) {
  html body .main-floating-nav.mm-static-header .nav-brand-name {
    align-items: center !important;
  }

  html body .main-floating-nav.mm-static-header .brand-fancy-m,
  html body .main-floating-nav.mm-static-header .brand-fancy-m-second {
    font-size: 2rem !important;
    line-height: 1 !important;
    transform: translateY(0) !important;
  }

  html body .main-floating-nav.mm-static-header .brand-rest {
    display: inline-block !important;
    font-family: var(--mm-font-body, "Instrument Sans", sans-serif) !important;
    font-weight: 500 !important;
    font-size: 0.94rem !important;
    line-height: 1 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    font-variant: normal !important;
    font-feature-settings: "smcp" 0, "c2sc" 0 !important;
    position: static !important;
    top: auto !important;
    transform: none !important;
    vertical-align: middle !important;
    margin-top: 0 !important;
  }

  html body .main-floating-nav.mm-static-header .brand-fancy-m + .brand-rest {
    margin-left: 1px !important;
    margin-right: 3px !important;
  }

  html body .main-floating-nav.mm-static-header .brand-fancy-m-second + .brand-rest {
    margin-left: 1px !important;
  }
}

@media (max-width: 420px) {
  html body .main-floating-nav.mm-static-header .brand-fancy-m,
  html body .main-floating-nav.mm-static-header .brand-fancy-m-second {
    font-size: 1.86rem !important;
  }

  html body .main-floating-nav.mm-static-header .brand-rest {
    font-size: 0.86rem !important;
    letter-spacing: 0.06em !important;
  }
}


/* =========================================================
   V29 MOBILE BRAND LOWERCASE FIX
   - arry and e must remain lowercase on mobile
   - prevent uppercase/small-caps treatment
   - preserve heart size match and custom bag icon
   ========================================================= */
@media (max-width: 720px) {
  html body .main-floating-nav.mm-static-header .brand-rest {
    display: inline-block !important;
    font-family: var(--mm-font-body, "Instrument Sans", sans-serif) !important;
    font-weight: 500 !important;
    font-size: 0.94rem !important;
    line-height: 1 !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
    font-variant: normal !important;
    font-variant-caps: normal !important;
    font-feature-settings: "smcp" 0, "c2sc" 0 !important;
    position: static !important;
    top: auto !important;
    transform: none !important;
    vertical-align: middle !important;
  }
}

@media (max-width: 420px) {
  html body .main-floating-nav.mm-static-header .brand-rest {
    font-size: 0.86rem !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
  }
}


/* =========================================================
   V30 MOBILE BRAND VERTICAL ALIGNMENT
   Lower "arry" and "e" so they sit naturally beside the
   script capital M characters instead of floating too high.
   ========================================================= */
@media (max-width: 720px) {
  html body .main-floating-nav.mm-static-header .nav-brand-name {
    align-items: baseline !important;
  }

  html body .main-floating-nav.mm-static-header .brand-rest {
    position: relative !important;
    top: 0.18em !important;
    transform: none !important;
    vertical-align: baseline !important;
  }
}

@media (max-width: 420px) {
  html body .main-floating-nav.mm-static-header .brand-rest {
    top: 0.16em !important;
  }
}


/* =========================================================
   V31 PRODUCT DETAIL PRICING — MOBILE CLEANUP
   - Gives every product detail page the same calm pricing hierarchy.
   - Keeps price labels and amounts from colliding on narrow screens.
   - Accessory pages use .accessory-price so pricing stays visible even
     when product specs are moved into accordions.
   ========================================================= */

body.product-detail-page .accessory-price {
  display: block !important;
}

@media (max-width: 768px) {
  body.product-detail-page .ring-price,
  body.product-detail-page .accessory-price {
    width: 100% !important;
    margin: 20px 0 0 !important;
    padding: 18px 0 6px !important;
    border: 0 !important;
    border-top: 1px solid var(--mm-line) !important;
    border-bottom: 1px solid var(--mm-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    text-align: left !important;
    box-shadow: none !important;
  }

  body.product-detail-page .ring-price .price-header,
  body.product-detail-page .accessory-price .price-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 0 14px !important;
    text-align: left !important;
  }

  body.product-detail-page .ring-price .price-label,
  body.product-detail-page .accessory-price .price-label,
  body.product-detail-page .ring-price .tier-name,
  body.product-detail-page .accessory-price .tier-name {
    color: var(--mm-muted) !important;
    font-family: var(--mm-body) !important;
    font-size: .58rem !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    text-align: left !important;
  }

  body.product-detail-page .ring-price .srp-amount,
  body.product-detail-page .accessory-price .srp-amount {
    display: block !important;
    color: var(--mm-ink) !important;
    font-family: var(--mm-display) !important;
    font-size: 1.12rem !important;
    font-weight: 400 !important;
    line-height: 1.1 !important;
    letter-spacing: -.01em !important;
    text-decoration-thickness: 1px !important;
    text-decoration-color: rgba(81, 70, 63, .65) !important;
  }

  body.product-detail-page .ring-price .price-row,
  body.product-detail-page .accessory-price .price-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: start !important;
    justify-content: stretch !important;
    gap: 7px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 14px 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--mm-line) !important;
    text-align: left !important;
  }

  body.product-detail-page .ring-price .tier-amount,
  body.product-detail-page .accessory-price .tier-amount {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    min-width: 0 !important;
    color: var(--mm-ink) !important;
    font-family: var(--mm-display) !important;
    font-size: clamp(1.42rem, 7.2vw, 1.82rem) !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    letter-spacing: -.025em !important;
    white-space: normal !important;
  }

  body.product-detail-page .ring-price .tier-saving,
  body.product-detail-page .accessory-price .tier-saving {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 22px !important;
    margin: 0 !important;
    padding: 3px 7px !important;
    border-radius: 2px !important;
    background: rgba(13, 121, 110, .08) !important;
    color: var(--mm-teal) !important;
    font-family: var(--mm-body) !important;
    font-size: .58rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: .08em !important;
    white-space: nowrap !important;
  }

  /* Price.css previously forced stock status to a fixed 65px box on mobile.
     Let it breathe naturally after the new compact price stack. */
  body.product-detail-page .stock-status {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  body.product-detail-page .ring-price .stock-status-container {
    margin-top: 16px !important;
  }
}

/* ==========================================================
   MarryMe: Compact mobile pricing override
   Keeps the complete existing stylesheet and only tightens
   the product-detail pricing block on phones.
   ========================================================== */
@media (max-width: 768px) {
  body.product-detail-page .ring-price,
  body.product-detail-page .accessory-price {
    margin-top: 12px !important;
    padding-top: 10px !important;
    padding-bottom: 2px !important;
  }

  body.product-detail-page .ring-price .price-header,
  body.product-detail-page .accessory-price .price-header {
    gap: 2px !important;
    padding-bottom: 8px !important;
  }

  body.product-detail-page .ring-price .price-label,
  body.product-detail-page .accessory-price .price-label,
  body.product-detail-page .ring-price .tier-name,
  body.product-detail-page .accessory-price .tier-name {
    font-size: .54rem !important;
    line-height: 1.15 !important;
    letter-spacing: .11em !important;
  }

  body.product-detail-page .ring-price .srp-amount,
  body.product-detail-page .accessory-price .srp-amount {
    font-size: .96rem !important;
    line-height: 1.05 !important;
  }

  body.product-detail-page .ring-price .price-row,
  body.product-detail-page .accessory-price .price-row {
    grid-template-columns: minmax(92px, .85fr) minmax(0, 1.15fr) !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 0 !important;
  }

  body.product-detail-page .ring-price .tier-amount,
  body.product-detail-page .accessory-price .tier-amount {
    gap: 5px !important;
    font-size: 1.08rem !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
  }

  body.product-detail-page .ring-price .tier-saving,
  body.product-detail-page .accessory-price .tier-saving {
    min-height: 18px !important;
    padding: 2px 5px !important;
    font-size: .50rem !important;
    letter-spacing: .05em !important;
  }

  body.product-detail-page .ring-price .stock-status-container {
    margin-top: 10px !important;
  }
}

/* =========================================================
   V31 ENGAGEMENT MOBILE — RESTORE DIAMOND CHOICE WORDING
   Show the short descriptive copy under each diamond type
   while keeping the two-column mobile layout compact.
   ========================================================= */
@media (max-width: 768px) {
  .engagement-rings-page .choice-card .card-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    height: 100% !important;
  }

  .engagement-rings-page .choice-card p {
    display: block !important;
    flex: 1 1 auto !important;
    margin: 0 2px 9px !important;
    color: #81766d !important;
    font-family: var(--mm-sans) !important;
    font-size: .61rem !important;
    font-weight: 400 !important;
    line-height: 1.42 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
  }

  .engagement-rings-page .choice-card .explore-btn {
    margin-top: auto !important;
  }
}

@media (max-width: 420px) {
  .engagement-rings-page .choice-card p {
    margin-bottom: 8px !important;
    font-size: .57rem !important;
    line-height: 1.38 !important;
  }
}

/* =========================================================
   V32 ENGAGEMENT MOBILE — RESTORE EXPLORE BUTTONS
   V31 accidentally made .card-content height:100%, and the
   existing overflow:hidden on each card could clip the button.
   Keep descriptions visible, but let each card size naturally.
   ========================================================= */
@media (max-width: 768px) {
  .engagement-rings-page .choice-card {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
  }

  .engagement-rings-page .choice-card .card-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .engagement-rings-page .choice-card p {
    display: block !important;
    flex: 0 0 auto !important;
    margin: 0 2px 9px !important;
  }

  .engagement-rings-page .choice-card .explore-btn {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex: 0 0 auto !important;
    margin-top: auto !important;
    position: static !important;
  }
}

/* =========================================================
   V33 WEDDING BANDS MOBILE — RESTORE CARD DESCRIPTIONS
   Show the existing descriptions for Single Color, Two-Tone,
   His Ring and Her Ring while keeping Explore buttons visible.
   ========================================================= */
@media (max-width: 768px) {
  .wedding-bands-page .choice-card {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
  }

  .wedding-bands-page .choice-card .card-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .wedding-bands-page .choice-card p {
    display: block !important;
    flex: 0 0 auto !important;
    margin: 0 2px 9px !important;
    color: #81766d !important;
    font-family: var(--mm-sans) !important;
    font-size: .59rem !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
  }

  .wedding-bands-page .choice-card .explore-btn {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex: 0 0 auto !important;
    margin-top: auto !important;
    position: static !important;
  }
}

@media (max-width: 420px) {
  .wedding-bands-page .choice-card p {
    margin-bottom: 8px !important;
    font-size: .55rem !important;
    line-height: 1.36 !important;
  }
}

/* =========================================================
   V34 WEDDING BANDS MOBILE — BREATHING ROOM
   Adds intentional spacing between titles, descriptions,
   buttons, and the second card row without changing desktop.
   ========================================================= */
@media (max-width: 768px) {
  .wedding-bands-page .diamond-choices {
    row-gap: 24px !important;
  }

  .wedding-bands-page .diamond-choices + .diamond-choices {
    margin-top: 30px !important;
  }

  .wedding-bands-page .choice-card .card-content {
    padding-top: 10px !important;
  }

  .wedding-bands-page .choice-card h3 {
    margin-bottom: 8px !important;
  }

  .wedding-bands-page .choice-card p {
    margin: 0 5px 13px !important;
  }

  .wedding-bands-page .choice-card .explore-btn {
    margin-top: 4px !important;
  }
}

@media (max-width: 420px) {
  .wedding-bands-page .diamond-choices + .diamond-choices {
    margin-top: 26px !important;
  }

  .wedding-bands-page .choice-card p {
    margin: 0 4px 11px !important;
  }
}

/* =========================================================
   V35 WEDDING BANDS MOBILE — ALIGN EXPLORE BUTTONS
   Each pair of cards stretches to the same row height.
   The description may wrap differently, but the Explore
   buttons stay on the same baseline.
   ========================================================= */
@media (max-width: 768px) {
  .wedding-bands-page .diamond-choices {
    align-items: stretch !important;
  }

  .wedding-bands-page .diamond-choices > .choice-card {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  .wedding-bands-page .choice-card .card-content {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .wedding-bands-page .choice-card .explore-btn {
    margin-top: auto !important;
  }
}

/* =========================================================
   V36 EARRING PRODUCT — VARIANT SWITCH
   Shows multi-variant earrings as a compact selector directly
   below Metal Color and keeps the active option obvious.
   ========================================================= */
.product-detail-page .earring-variant-selector {
  width: 100% !important;
}

@media (max-width: 768px) {
  .product-detail-page .earring-variant-selector {
    margin: 2px 0 14px !important;
  }

  .product-detail-page .earring-variant-selector .dynamic-variant-label {
    display: block !important;
    margin: 0 0 7px !important;
    font-size: .54rem !important;
    letter-spacing: .12em !important;
  }

  .product-detail-page .earring-variant-selector .dynamic-variant-buttons {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .product-detail-page .earring-variant-selector .dynamic-variant-buttons button {
    width: 100% !important;
    min-height: 34px !important;
    padding: 5px 4px !important;
    font-size: .52rem !important;
    line-height: 1.15 !important;
    white-space: normal !important;
  }
}

@media (max-width: 360px) {
  .product-detail-page .earring-variant-selector .dynamic-variant-buttons {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   VARIANTS38 — VARIANT DEEP CLEAN
   Visible variant selectors stay visible after mobile/product
   enhancement scripts. [hidden] still wins when a selector
   genuinely has one or zero options.
   ========================================================= */
.product-detail-page .dynamic-variant-selector:not([hidden]),
.product-detail-page .design-selector:not([hidden]) {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

@media (max-width: 768px) {
  .product-detail-page .dynamic-variant-selector:not([hidden]) {
    width: 100% !important;
    margin: 8px 0 16px !important;
  }
  .product-detail-page .dynamic-variant-buttons {
    row-gap: 7px !important;
  }
}

/* =========================================================
   V37 CATALOG VARIANT SUBLABEL
   For products with multiple live variants, show the default
   variant name directly below the metal/color line. This uses
   the same area where a generic AVAILABLE badge used to sit.
   ========================================================= */
.product-item .mm-card-variant {
  margin-top: 4px !important;
  color: var(--mm-teal-deep) !important;
  font-family: var(--mm-body) !important;
  font-size: .50rem !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
}

@media (max-width: 720px) {
  .product-item .mm-card-variant {
    margin-top: 4px !important;
    font-size: .49rem !important;
    line-height: 1.28 !important;
  }
}

/* =========================================================
   V38 ALL CATALOGS MOBILE — PRICE UNDER PRODUCT NAME
   Applies to every storefront product card: engagement,
   wedding bands, his/her rings, earrings, necklaces,
   bracelets, and other catalog grids using .product-item.
   Desktop keeps the existing side-by-side title/price layout.
   ========================================================= */
@media (max-width: 720px) {
  .product-item .mm-card-info {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 3px !important;
    width: 100% !important;
  }

  .product-item .mm-card-info .product-name {
    display: block !important;
    width: 100% !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    line-height: 1.16 !important;
  }

  .product-item .mm-card-price {
    display: block !important;
    width: 100% !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    text-align: left !important;
  }

  .product-item .mm-card-meta {
    margin-top: 5px !important;
  }

  .product-item .mm-card-variant {
    margin-top: 3px !important;
  }
}



/* V33 - remove figma header hide conflict for wishlist */
.main-floating-nav.mm-static-header > .nav-utility-icons,
.main-floating-nav.mm-static-header > .nav-wishlist {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.main-floating-nav.mm-static-header .nav-utility-icons {
  align-items: center !important;
}

.main-floating-nav.mm-static-header .nav-wishlist {
  position: relative !important;
}

.main-floating-nav.mm-static-header .nav-wishlist svg {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  stroke: #0b746b !important;
}

.main-floating-nav.mm-static-header .nav-wishlist-count {
  display: flex !important;
}


/* =========================================================
   V37 — PREMIUM MOBILE NAVIGATION
   Icon-led rows, a solid filled pill for the active page,
   and smooth open/close + accordion motion for the phone
   and tablet menu panel. Desktop nav is untouched.
   ========================================================= */
@media (max-width: 980px) {
  html body .main-floating-nav.mm-static-header .nav-list {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 3px !important;
    padding: 14px 12px 16px !important;
    border-radius: 22px !important;
    border: 1px solid var(--mm-line) !important;
    background: #FBF8F2 !important;
    box-shadow: 0 20px 46px rgba(47, 41, 36, .16) !important;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(-10px) scale(.98) !important;
    transform-origin: top center;
    transition:
      opacity 260ms cubic-bezier(.22, 1, .36, 1) !important,
      transform 260ms cubic-bezier(.22, 1, .36, 1) !important,
      visibility 0s linear 260ms !important;
  }
  html body .main-floating-nav.mm-static-header .nav-list.mobile-active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
    transition:
      opacity 260ms cubic-bezier(.22, 1, .36, 1) !important,
      transform 260ms cubic-bezier(.22, 1, .36, 1) !important,
      visibility 0s !important;
  }

  /* Rows fade + slide in, staggered, when the panel opens */
  html body .main-floating-nav.mm-static-header .nav-list .nav-item {
    opacity: 0;
    transform: translateY(-6px);
  }
  html body .main-floating-nav.mm-static-header .nav-list.mobile-active .nav-item {
    animation: mmNavRowIn 340ms cubic-bezier(.22, 1, .36, 1) forwards;
  }
  html body .main-floating-nav.mm-static-header .nav-list.mobile-active .nav-item:nth-child(1) { animation-delay: 40ms; }
  html body .main-floating-nav.mm-static-header .nav-list.mobile-active .nav-item:nth-child(2) { animation-delay: 80ms; }
  html body .main-floating-nav.mm-static-header .nav-list.mobile-active .nav-item:nth-child(3) { animation-delay: 120ms; }
  html body .main-floating-nav.mm-static-header .nav-list.mobile-active .nav-item:nth-child(4) { animation-delay: 160ms; }
  @keyframes mmNavRowIn {
    to { opacity: 1; transform: translateY(0); }
  }

  /* Row chrome — icon + label, full pill, filled solid when active */
  html body .main-floating-nav.mm-static-header .nav-list .nav-item > a,
  html body .main-floating-nav.mm-static-header .nav-list .nav-link-row > a,
  html body .main-floating-nav.mm-static-header .nav-list .mm-nav-custom {
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    min-height: 48px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    color: var(--mm-ink) !important;
    font-weight: 600 !important;
    transition: background 200ms ease, color 200ms ease, box-shadow 200ms ease, transform 150ms ease !important;
  }
  html body .main-floating-nav.mm-static-header .nav-list .mm-nav-custom {
    width: 100% !important;
    background: none !important;
    border: 0 !important;
    text-align: left !important;
    cursor: pointer;
  }
  html body .main-floating-nav.mm-static-header .nav-list .nav-item > a:active,
  html body .main-floating-nav.mm-static-header .nav-list .nav-link-row > a:active,
  html body .main-floating-nav.mm-static-header .nav-list .mm-nav-custom:active {
    transform: scale(.985) !important;
  }
  html body .main-floating-nav.mm-static-header .nav-list .nav-item:not(.active) > a:hover,
  html body .main-floating-nav.mm-static-header .nav-list .nav-link-row:hover > a,
  html body .main-floating-nav.mm-static-header .nav-list .mm-nav-custom:hover {
    background: rgba(11, 107, 99, .08) !important;
  }

  /* Icon glyph, injected by nav.js */
  html body .main-floating-nav.mm-static-header .nav-list .mm-nav-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 18px;
    height: 18px;
    color: var(--mm-teal);
    opacity: .82;
    transition: color 200ms ease, opacity 200ms ease;
  }
  html body .main-floating-nav.mm-static-header .nav-list .mm-nav-icon svg {
    width: 100%;
    height: 100%;
    display: block;
  }

  /* Active page — solid filled pill, matching the premium reference */
  html body .main-floating-nav.mm-static-header .nav-list .nav-item.active > a,
  html body .main-floating-nav.mm-static-header .nav-list .nav-item.active .nav-link-row > a,
  html body .main-floating-nav.mm-static-header .nav-list a.is-active {
    background: var(--mm-teal) !important;
    color: #FBF8F2 !important;
    box-shadow: 0 8px 18px rgba(11, 107, 99, .3) !important;
  }
  html body .main-floating-nav.mm-static-header .nav-list .nav-item.active > a .mm-nav-icon,
  html body .main-floating-nav.mm-static-header .nav-list .nav-item.active .nav-link-row > a .mm-nav-icon,
  html body .main-floating-nav.mm-static-header .nav-list a.is-active .mm-nav-icon {
    color: #FBF8F2 !important;
    opacity: 1 !important;
  }

  /* Collections chevron — soft circular toggle that spins open */
  html body .main-floating-nav.mm-static-header .nav-dropdown-toggle {
    border-radius: 999px !important;
    transition: background 200ms ease, transform 280ms cubic-bezier(.22, 1, .36, 1) !important;
  }
  html body .main-floating-nav.mm-static-header .nav-item.dropdown.open .nav-dropdown-toggle {
    background: rgba(11, 107, 99, .12) !important;
    transform: rotate(180deg) !important;
  }

  /* Smooth accordion open for the Collections submenu */
  html body .main-floating-nav.mm-static-header .dropdown-menu {
    display: block !important;
    max-height: 0 !important;
    overflow: hidden !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    opacity: 0 !important;
    transition:
      max-height 380ms cubic-bezier(.22, 1, .36, 1) !important,
      opacity 220ms ease !important,
      padding 380ms cubic-bezier(.22, 1, .36, 1) !important;
  }
  html body .main-floating-nav.mm-static-header .nav-item.dropdown.open > .dropdown-menu {
    max-height: 560px !important;
    opacity: 1 !important;
    padding: 4px 0 10px 14px !important;
  }

  /* Nested group (Engagement Rings / Wedding Bands) smooth reveal */
  html body .main-floating-nav.mm-static-header .mm-nav-submenu {
    display: block !important;
    max-height: 0 !important;
    overflow: hidden !important;
    margin: 0 0 0 4px !important;
    transition: max-height 320ms cubic-bezier(.22, 1, .36, 1) !important, margin 320ms ease !important;
  }
  html body .main-floating-nav.mm-static-header .mm-nav-group.is-open > .mm-nav-submenu {
    max-height: 260px !important;
    margin: 0 0 8px 4px !important;
  }

  /* Icons inside the Collections submenu rows too */
  html body .main-floating-nav.mm-static-header .dropdown-menu .mm-nav-group-row > a,
  html body .main-floating-nav.mm-static-header .dropdown-menu > .mm-nav-direct > a {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }
  html body .main-floating-nav.mm-static-header .dropdown-menu .mm-nav-icon {
    width: 16px;
    height: 16px;
    color: var(--mm-gold);
    opacity: .95;
  }
}

@media (max-width: 980px) and (prefers-reduced-motion: reduce) {
  html body .main-floating-nav.mm-static-header .nav-list,
  html body .main-floating-nav.mm-static-header .nav-list .nav-item,
  html body .main-floating-nav.mm-static-header .nav-list.mobile-active .nav-item,
  html body .main-floating-nav.mm-static-header .dropdown-menu,
  html body .main-floating-nav.mm-static-header .mm-nav-submenu,
  html body .main-floating-nav.mm-static-header .nav-dropdown-toggle {
    animation: none !important;
    transition: none !important;
  }
  html body .main-floating-nav.mm-static-header .nav-list .nav-item {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* The injected nav icons only render inside the mobile panel above */
.mm-nav-icon { display: none; }