/* =========================================================
   MARRY ME — SHOPPING & CONCIERGE ENHANCEMENTS
   Shared across catalog, detail, cart, checkout, tablet/mobile
   ========================================================= */
:root {
  --mm-teal: #0b5e56;
  --mm-teal-dark: #084a45;
  --mm-gold: #c6a15b;
  --mm-ink: #5c4b41;
  --mm-muted: #806f64;
  --mm-cream: #f6ebd8;
  --mm-paper: #fffdf8;
  --mm-line: rgba(92, 75, 65, 0.16);
  --mm-shadow: 0 18px 46px rgba(73, 58, 48, 0.12);
}

/* ---- navbar utility icons ---- */

.nav-utility-icons {
  grid-column: 3;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}
.nav-utility-icons .nav-cart {
  grid-column: auto;
  grid-row: auto;
}
.nav-wishlist {
  position: relative;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(92,75,65,.12);
  border-radius: 50%;
  background: rgba(251,248,242,.9);
  color: var(--mm-ink);
  text-decoration: none;
  transition: 180ms ease;
}
.nav-wishlist:hover,
.nav-wishlist:focus-visible,
.nav-wishlist.is-active {
  color: var(--mm-gold);
  border-color: rgba(198,161,91,.48);
  background: #fff;
  transform: translateY(-1px);
}
.nav-wishlist svg {
  width: 20px;
  height: 20px;
}
.nav-wishlist-count {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 999px;
  background: var(--mm-gold);
  color: #fff;
  font-size: .62rem;
  font-weight: 700;
}

/* ---- catalog enhancements ---- */
.product-item {
  position: relative;
}

/*
  Keep Favorite + Compare inside the product image area.
  This prevents long product names from running underneath the icons.
*/


.mm-card-actions {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 14;
  display: flex;
  align-items: center;
  gap: 8px;
}

.mm-card-actions--media {
  top: 10px;
  right: 10px;
}

/* Rare fallback for a product card without an image carousel. */
.mm-card-actions--fallback {
  top: 10px;
  right: 10px;
}

.product-item:has(.mm-card-actions--fallback) .product-name {
  padding-left: 54px;
  padding-right: 54px;
}

.mm-icon-btn {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(92,75,65,.14);
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  color: var(--mm-ink);
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(73,58,48,.08);
  transition: 160ms ease;
}
.mm-icon-btn:hover,
.mm-icon-btn:focus-visible {
  color: var(--mm-gold);
  border-color: rgba(198,161,91,.5);
  transform: translateY(-1px);
}

/* Luxury saved/compare states */
.mm-icon-btn.is-active {
  color: var(--mm-gold);
  border-color: rgba(198,161,91,.7);
  background: linear-gradient(145deg, #fffaf0, #f7edd8);
  box-shadow: 0 8px 22px rgba(198,161,91,.22);
}
.mm-icon-btn.is-active[data-mm-compare] svg {
  stroke-width: 2.2;
}
.mm-icon-btn svg {
  width: 18px;
  height: 18px;
  pointer-events: none;
}
.mm-icon-btn.is-active[data-mm-favorite] svg {
  fill: currentColor;
}

.mm-catalog-tools {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto 24px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  border: 1px solid var(--mm-line);
  border-radius: 16px;
  background: rgba(255,255,255,.48);
}
.mm-catalog-tools-title {
  font-family: "Instrument Sans", sans-serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mm-ink);
}
.mm-catalog-tools-controls {
  display: flex;
  gap: 9px;
  align-items: center;
  flex-wrap: wrap;
}
.mm-catalog-tools select,
.mm-catalog-tools input {
  min-height: 38px;
  padding: 0 11px;
  border: 1px solid rgba(92,75,65,.19);
  border-radius: 10px;
  background: #fff;
  color: var(--mm-ink);
  font: 500 .78rem/1 "Instrument Sans", sans-serif;
}
.mm-shape-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.mm-filter-chip {
  min-height: 36px;
  padding: 0 11px;
  border: 1px solid rgba(92,75,65,.16);
  border-radius: 999px;
  background: #fff;
  color: var(--mm-ink);
  font: 600 .68rem/1 "Instrument Sans", sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}
.mm-filter-chip.is-active {
  background: var(--mm-teal);
  border-color: var(--mm-teal);
  color: #fff;
}
.mm-enhanced-hidden {
  display: none !important;
}

/* ---- compare tray ---- */
.mm-compare-tray {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 9997;
  transform: translateX(-50%);
  width: min(680px, calc(100% - 24px));
  padding: 10px 12px;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid rgba(198,161,91,.34);
  border-radius: 18px;
  background: rgba(255,255,255,.97);
  box-shadow: var(--mm-shadow);
  backdrop-filter: blur(14px);
}
.mm-compare-tray.is-visible {
  display: flex;
}
.mm-compare-tray strong {
  color: var(--mm-teal);
  font: 700 .82rem/1.2 "Instrument Sans", sans-serif;
}
.mm-compare-tray span {
  color: var(--mm-muted);
  font: 500 .73rem/1.3 "Instrument Sans", sans-serif;
}
.mm-compare-tray-actions {
  display: flex;
  gap: 8px;
}

/* ---- shared buttons ---- */
.mm-enh-btn,
.mm-enh-btn-secondary {
  min-height: 42px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  font: 700 .72rem/1 "Instrument Sans", sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: transform 170ms ease, box-shadow 170ms ease, background 200ms ease, border-color 200ms ease, color 200ms ease;
}
.mm-enh-btn {
  border: 1px solid var(--mm-teal);
  background: linear-gradient(155deg, var(--mm-teal), var(--mm-teal-dark));
  color: #fff;
  box-shadow: 0 5px 14px rgba(11,107,99,.2);
}
.mm-enh-btn:hover, .mm-enh-btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(11,107,99,.3);
  outline: none;
}
.mm-enh-btn:active { transform: translateY(0) scale(.97); box-shadow: 0 3px 8px rgba(11,107,99,.2); }
.mm-enh-btn-secondary {
  border: 1px solid rgba(92,75,65,.18);
  background: #fff;
  color: var(--mm-ink);
}
.mm-enh-btn-secondary:hover, .mm-enh-btn-secondary:focus-visible {
  color: #fff;
  background: linear-gradient(155deg, var(--mm-gold), #a3773f);
  border-color: #a3773f;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(184,144,90,.28);
  outline: none;
}
.mm-enh-btn-secondary:active { transform: translateY(0) scale(.97); box-shadow: 0 3px 8px rgba(184,144,90,.22); }

/* ---- product detail additions ---- */
.mm-detail-actions {
  margin: 18px 0 0;
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
}
.mm-detail-actions button {
  font: inherit;
}





.mm-thumb-gallery {
  width: min(500px, 100%);
  margin: 12px auto 0;
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.mm-thumb-btn {
  width: 50px;
  height: 50px;
  padding: 3px;
  border: 1px solid rgba(92,75,65,.15);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  overflow: hidden;
}
.mm-thumb-btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.mm-thumb-btn.is-current {
  border-color: var(--mm-gold);
  box-shadow: 0 0 0 1px rgba(198,161,91,.2);
}
#ring-image, #main-image, #page-image, .editorial-img {
  cursor: zoom-in;
}

/* ---- zoom ---- */
.mm-zoom-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(28,24,21,.88);
}
.mm-zoom-overlay.is-open {
  display: flex;
}
.mm-zoom-overlay img {
  max-width: min(92vw, 1100px);
  max-height: 88vh;
  object-fit: contain;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 25px 70px rgba(0,0,0,.3);
}
.mm-zoom-close {
  position: absolute;
  top: 18px;
  right: 20px;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  color: #fff;
  font-size: 24px;
  cursor: pointer;
}

/* ---- content sections ---- */
.mm-shop-section {
  width: min(1120px, calc(100% - 32px));
  margin: 42px auto;
  padding: 26px;
  border: 1px solid var(--mm-line);
  border-radius: 22px;
  background: rgba(255,255,255,.46);
}
.mm-shop-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.mm-shop-section h2 {
  margin: 0;
  color: var(--mm-teal);
  font-family: "Fraunces", serif;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 500;
}
.mm-shop-section .mm-kicker {
  margin: 0 0 5px;
  color: var(--mm-gold);
  font: 700 .68rem/1 "Instrument Sans", sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.mm-related-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
}
.mm-mini-product {
  display: block;
  padding: 12px;
  border: 1px solid var(--mm-line);
  border-radius: 14px;
  background: #fff;
  color: var(--mm-ink);
  text-decoration: none;
}
.mm-mini-product img, .mm-mini-placeholder {
  width: 100%;
  aspect-ratio: 1 / .78;
  object-fit: contain;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #faf7f0;
  color: var(--mm-gold);
  font: 700 1rem/1 "Instrument Sans", sans-serif;
}
.mm-mini-product h3 {
  margin: 11px 0 4px;
  font: 700 .78rem/1.3 "Instrument Sans", sans-serif;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.mm-mini-product p {
  margin: 0;
  color: var(--mm-muted);
  font: 500 .7rem/1.4 "Instrument Sans", sans-serif;
}

/* ---- reviews ---- */
.mm-review-summary {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.mm-stars {
  color: var(--mm-gold);
  letter-spacing: .12em;
  font-size: 1rem;
}
.mm-review-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}
.mm-review-card {
  padding: 14px;
  border: 1px solid var(--mm-line);
  border-radius: 13px;
  background: #fff;
}
.mm-review-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.mm-review-card strong {
  color: var(--mm-ink);
  font: 700 .78rem/1.3 "Instrument Sans", sans-serif;
}
.mm-review-card p {
  margin: 8px 0 0;
  color: var(--mm-muted);
  font: 400 .8rem/1.6 "Instrument Sans", sans-serif;
}
.mm-review-note {
  color: var(--mm-muted);
  font: 500 .72rem/1.55 "Instrument Sans", sans-serif;
}
.mm-review-form {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr 150px;
  gap: 10px;
}
.mm-review-form textarea {
  grid-column: 1 / -1;
  min-height: 92px;
  resize: vertical;
}
.mm-review-form input, .mm-review-form select, .mm-review-form textarea,
.mm-modal input, .mm-modal select, .mm-modal textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 12px;
  border: 1px solid rgba(92,75,65,.2);
  border-radius: 10px;
  background: #fff;
  color: var(--mm-ink);
  font: 500 .82rem/1.3 "Instrument Sans", sans-serif;
}

/* ---- service dock ---- */
.mm-service-dock {
  gap: 7px;
  flex-wrap: wrap;
}
.mm-service-dock button {
  box-shadow: 0 10px 28px rgba(73,58,48,.14);
}

/* ---- modal / size guide / concierge ---- */
.mm-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 13000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(28,24,21,.56);
  backdrop-filter: blur(6px);
}
.mm-modal-backdrop.is-open {
  display: flex;
}
.mm-modal {
  max-height: min(86vh, 780px);
  overflow-y: auto;
  border-radius: 22px;
  background: var(--mm-paper);
  box-shadow: 0 28px 80px rgba(0,0,0,.24);
  color: var(--mm-ink);
}
.mm-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}
.mm-modal-head h2 {
  margin: 0;
  color: var(--mm-teal);
  font-family: "Fraunces", serif;
  font-size: 2rem;
  font-weight: 500;
}
.mm-modal-head p {
  margin: 5px 0 0;
  color: var(--mm-muted);
  font: 500 .77rem/1.5 "Instrument Sans", sans-serif;
}
.mm-modal-close {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border: 1px solid var(--mm-line);
  border-radius: 50%;
  background: #fff;
  color: var(--mm-ink);
  font-size: 20px;
  cursor: pointer;
}
.mm-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}
.mm-field {
  display: grid;
  gap: 6px;
}
.mm-field.full {
  grid-column: 1 / -1;
}
.mm-field label {
  color: var(--mm-ink);
  font: 700 .7rem/1.2 "Instrument Sans", sans-serif;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.mm-modal textarea {
  min-height: 104px;
  resize: vertical;
}
.mm-form-footer {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.mm-form-status {
  color: var(--mm-teal);
  font: 600 .76rem/1.4 "Instrument Sans", sans-serif;
}
.mm-demo-note {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(198,161,91,.1);
  color: var(--mm-muted);
  font: 500 .7rem/1.5 "Instrument Sans", sans-serif;
}
.mm-size-table-wrap {
  overflow-x: auto;
}
.mm-size-table {
  width: 100%;
  border-collapse: collapse;
  font: 500 .76rem/1.35 "Instrument Sans", sans-serif;
}
.mm-size-table th, .mm-size-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--mm-line);
  text-align: left;
  white-space: nowrap;
}
.mm-size-table th {
  color: var(--mm-teal);
  font-weight: 700;
}
.mm-size-tip {
  margin-top: 14px;
  color: var(--mm-muted);
  font: 500 .75rem/1.6 "Instrument Sans", sans-serif;
}

/* ---- wishlist / compare pages ---- */
.mm-library-page {
  width: min(1180px, calc(100% - 32px));
  margin: 38px auto 70px;
}
.mm-library-head {
  margin-bottom: 22px;
  text-align: center;
}
.mm-library-head h1 {
  margin: 0;
  color: var(--mm-teal);
  font-family: "Fraunces", serif;
  font-size: clamp(2.2rem, 6vw, 4rem);
  font-weight: 500;
}
.mm-library-head p {
  color: var(--mm-muted);
  font: 500 .83rem/1.6 "Instrument Sans", sans-serif;
}
.mm-library-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
}
.mm-library-card {
  padding: 14px;
  border: 1px solid var(--mm-line);
  border-radius: 16px;
  background: #fff;
}
.mm-library-card img, .mm-library-placeholder {
  width: 100%;
  aspect-ratio: 1 / .8;
  object-fit: contain;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #faf7f0;
  color: var(--mm-gold);
}
.mm-library-card h2 {
  margin: 13px 0 4px;
  color: var(--mm-ink);
  font: 700 .9rem/1.35 "Instrument Sans", sans-serif;
  text-transform: uppercase;
}
.mm-library-card p {
  margin: 0 0 12px;
  color: var(--mm-muted);
  font: 500 .75rem/1.5 "Instrument Sans", sans-serif;
}
.mm-library-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.mm-empty-state {
  padding: 50px 24px;
  border: 1px dashed rgba(92,75,65,.22);
  border-radius: 18px;
  text-align: center;
  color: var(--mm-muted);
  font: 500 .84rem/1.7 "Instrument Sans", sans-serif;
}
.mm-compare-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--mm-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(31,41,46,.1);
}
.mm-compare-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
}
.mm-compare-table th, .mm-compare-table td {
  padding: 15px 16px;
  border-right: 1px solid var(--mm-line);
  border-bottom: 1px solid var(--mm-line);
  vertical-align: top;
  text-align: left;
  color: var(--mm-ink);
  font: 500 .78rem/1.45 "Instrument Sans", sans-serif;
  transition: background .15s ease;
}
.mm-compare-table tr:last-child th, .mm-compare-table tr:last-child td { border-bottom: 0; }
.mm-compare-table tr:nth-child(even) td { background: rgba(11,107,99,.035); }
.mm-compare-table td:hover { background: rgba(184,144,90,.08); }
.mm-compare-table th:first-child {
  width: 150px;
  background: linear-gradient(155deg, #0b6b63, #084a45);
  color: #fff;
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-right: 0;
}
.mm-compare-table img {
  width: 150px;
  height: 120px;
  object-fit: contain;
  display: block;
  margin: auto;
}

/* ---- mobile sticky purchase bar ---- */
.mm-mobile-buybar {
  position: fixed;
  z-index: 9994;
}
.mm-mobile-buybar-copy span {
  display: block;
  color: var(--mm-muted);
  font: 600 .62rem/1.2 "Instrument Sans", sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.mm-mobile-buybar-copy strong {
  display: block;
  margin-top: 3px;
  color: var(--mm-teal);
  font: 700 .88rem/1.2 "Instrument Sans", sans-serif;
}
.mm-mobile-buybar button {
  min-height: 42px;
}

/* ---- responsive ---- */
@media (max-width: 1180px) {
  .main-floating-nav { grid-template-columns: minmax(190px, auto) minmax(0,1fr) max-content !important; }
  .nav-utility-icons { gap: 5px; }
  .nav-wishlist, .nav-cart { width: 40px !important; height: 40px !important; }
  .mm-related-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 900px) {
  .main-floating-nav { grid-template-columns: minmax(160px, auto) minmax(0,1fr) max-content !important; }
  
  .mm-library-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 700px) {
  body.mm-has-mobile-buybar .mm-compare-tray { bottom: 78px; }
  body.mm-has-mobile-buybar .mm-service-dock { bottom: 132px; }
  .mm-catalog-tools { align-items: stretch; }
  .mm-catalog-tools-controls { width: 100%; }
  .mm-catalog-tools select { flex: 1; }
  .mm-shop-section { padding: 20px 15px; }
  .mm-review-form { grid-template-columns: 1fr; }
  .mm-review-form textarea { grid-column: auto; }
  .mm-form-grid { grid-template-columns: 1fr; }
  .mm-field.full { grid-column: auto; }
  .mm-service-dock { bottom: 82px; }
  .mm-mobile-buybar { display: grid; }
  body.mm-has-mobile-buybar { padding-bottom: 78px; }
}
@media (max-width: 520px) {
  .main-floating-nav { grid-template-columns: minmax(126px, auto) minmax(0,1fr) max-content !important; }
  .nav-wishlist { width: 36px !important; height: 36px !important; }
  .nav-wishlist svg { width: 17px; height: 17px; }
  .nav-utility-icons { gap: 4px; }
  
  .mm-service-dock { left: 9px; right: 9px; max-width: none; }
  .mm-service-dock .mm-enh-btn-secondary { flex: 1; min-height: 38px; padding: 0 10px; font-size: .62rem; }
  .mm-modal { padding: 19px 15px; border-radius: 18px; }
  .mm-shop-section-head { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 390px) {
  .main-floating-nav { grid-template-columns: minmax(116px, auto) minmax(0,1fr) max-content !important; }
}


/* =========================================================
   Product tools moved below Reviews
   ========================================================= */
.mm-post-review-tools {
  display: grid;
  gap: 22px;
}

.mm-post-review-tools .mm-detail-actions {
  margin: 0;
  justify-content: center;
}



/* =========================================================
   RELATED + RECENTLY VIEWED CAROUSELS
   ========================================================= */
.mm-carousel-section {
  overflow: hidden;
}

.mm-carousel-head {
  align-items: center;
}

.mm-carousel-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.mm-carousel-arrow {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(92, 75, 65, 0.16);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--mm-ink);
  font: 500 1.1rem/1 Arial, sans-serif;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(73, 58, 48, 0.06);
  transition: color 160ms ease,
    border-color 160ms ease,
    background 160ms ease,
    transform 160ms ease,
    opacity 160ms ease;
}

.mm-carousel-arrow:hover:not(:disabled),
.mm-carousel-arrow:focus-visible:not(:disabled) {
  color: #fff;
  border-color: var(--mm-gold);
  background: var(--mm-gold);
  transform: translateY(-1px);
}

.mm-carousel-arrow:disabled {
  opacity: 0.3;
  cursor: default;
}

.mm-carousel-static .mm-carousel-controls {
  opacity: 0.45;
}

.mm-carousel-viewport {
  width: 100%;
  overflow: hidden;
}

.mm-carousel-section .mm-related-grid.mm-carousel-track {
  display: flex;
  grid-template-columns: none;
  gap: 14px;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 2px 10px;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.mm-carousel-section .mm-related-grid.mm-carousel-track::-webkit-scrollbar {
  display: none;
}

.mm-carousel-section .mm-mini-product {
  flex: 0 0 calc((100% - 42px) / 4);
  min-width: 0;
  scroll-snap-align: start;
  scroll-snap-stop: normal;
  transition: transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}

.mm-carousel-section .mm-mini-product:hover {
  transform: translateY(-3px);
  border-color: rgba(198, 161, 91, 0.38);
  box-shadow: 0 12px 28px rgba(73, 58, 48, 0.09);
}

.mm-carousel-section .mm-mini-product img,
.mm-carousel-section .mm-mini-placeholder {
  aspect-ratio: 1 / 0.82;
}

@media (max-width: 900px) {
  .mm-carousel-section .mm-mini-product {
    flex-basis: calc((100% - 28px) / 3);
  }
}

@media (max-width: 680px) {
  .mm-carousel-section {
    padding-left: 18px;
    padding-right: 18px;
  }

  .mm-carousel-section .mm-mini-product {
    flex-basis: calc((100% - 14px) / 2);
  }

  .mm-carousel-arrow {
    width: 38px;
    height: 38px;
  }
}

@media (max-width: 520px) {
  .mm-carousel-section {
    width: calc(100% - 18px);
    margin-top: 30px;
    margin-bottom: 30px;
    padding: 19px 14px 16px;
    border-radius: 18px;
  }

  .mm-carousel-section .mm-shop-section-head {
    margin-bottom: 14px;
  }

  .mm-carousel-section .mm-shop-section-head h2 {
    font-size: 1.65rem;
  }

  .mm-carousel-section .mm-kicker {
    font-size: 0.61rem;
  }

  .mm-carousel-controls {
    gap: 6px;
  }

  .mm-carousel-arrow {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }

  /* One main card plus a small preview of the next card. */
  .mm-carousel-section .mm-mini-product {
    flex-basis: 84%;
  }

  .mm-carousel-section .mm-mini-product h3 {
    font-size: 0.8rem;
  }

  .mm-carousel-section .mm-mini-product p {
    font-size: 0.72rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mm-carousel-section .mm-related-grid.mm-carousel-track {
    scroll-behavior: auto;
  }
}

@media (max-width: 520px) {
  .mm-carousel-section .mm-shop-section-head {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
}


/* Product-page quick tools now live directly below Add to Cart / Buy Now. */
.mm-purchase-panel .mm-detail-actions {
  margin: 11px 0 0;
  border-top: 1px solid rgba(92,75,65,.12);
  justify-content: flex-start;
  gap: 7px;
}

.mm-purchase-panel .mm-detail-actions .mm-enh-btn-secondary {
  min-height: 36px;
  padding: 0 12px;
  font-size: .67rem;
  letter-spacing: .07em;
}

@media (max-width: 520px) {
  .mm-purchase-panel .mm-detail-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
  }

  .mm-purchase-panel .mm-detail-actions .mm-enh-btn-secondary:first-child {
    grid-column: 1 / -1;
  }
}

/* ---- production review database helpers ---- */
.mm-review-honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.mm-review-status {
  min-height: 1.25em;
  margin: 10px 0 2px;
  color: var(--mm-teal, #0b5e56);
  font: 600 .76rem/1.5 "Instrument Sans", sans-serif;
}

.mm-review-form button:disabled {
  opacity: .65;
  cursor: wait;
}

/* =========================================================
   MOBILE PURCHASE BAR + RELIABLE PRODUCT TOOLS
   ========================================================= */

/* Keep the three product tools above neighboring images/overlays and fully tappable. */
.mm-purchase-topbar,
.mm-purchase-panel,
.mm-detail-actions {
  position: relative;
  z-index: 30;
}

.mm-detail-actions {
  pointer-events: auto !important;
}

.mm-detail-actions .mm-enh-btn-secondary,
.mm-detail-actions button {
  position: relative;
  z-index: 31;
  pointer-events: auto !important;
  touch-action: manipulation;
  cursor: pointer;
}

/* Illustrated ring-size instructions. */
.mm-size-modal {
  width: min(760px, 100%);
}

.mm-size-visuals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 2px 0 18px;
}

.mm-size-step {
  padding: 12px;
  border: 1px solid var(--mm-line);
  border-radius: 14px;
  background: rgba(255, 255, 255, .7);
}

.mm-size-step-art {
  display: grid;
  place-items: center;
  min-height: 112px;
  margin-bottom: 8px;
  border-radius: 11px;
  background: #fbf6ed;
}

.mm-size-step-art svg {
  width: 100%;
  max-width: 180px;
  height: 108px;
  display: block;
}

.mm-size-step strong {
  display: block;
  margin-bottom: 4px;
  color: var(--mm-teal);
  font: 700 .78rem/1.3 "Instrument Sans", sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.mm-size-step span {
  display: block;
  color: var(--mm-muted);
  font: 500 .7rem/1.55 "Instrument Sans", sans-serif;
}

/* On phones the in-page purchase row disappears. The three tools remain. */
@media (max-width: 700px) {
  .mm-purchase-topbar .mm-purchase-panel > .mm-purchase-row,
  .mm-purchase-topbar .mm-purchase-panel > .mm-cart-toast {
    display: none !important;
  }

  .mm-purchase-topbar > .mm-purchase-panel {
    width: 100% !important;
    padding-top: 0 !important;
  }

  .mm-purchase-panel .mm-detail-actions {
    margin-top: 0 !important;
    padding-top: 10px !important;
  }

  .mm-mobile-buybar {
    grid-template-columns: 58px minmax(0, 1.25fr) minmax(82px, .8fr);
    gap: 7px;
    padding: 8px;
  }

  .mm-mobile-buybar-qty {
    display: grid;
    gap: 3px;
    min-width: 0;
    color: var(--mm-muted);
    font: 700 .56rem/1 "Instrument Sans", sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .mm-mobile-buybar-qty input {
    width: 100%;
    min-width: 0;
    height: 42px;
    padding: 0 8px;
    border: 1px solid rgba(92, 75, 65, .22);
    border-radius: 12px;
    background: #fffaf1;
    color: var(--mm-ink);
    font: 700 .9rem/1 "Instrument Sans", sans-serif;
    outline: none;
  }

  .mm-mobile-buybar-qty input:focus {
    border-color: var(--mm-gold);
    box-shadow: 0 0 0 3px rgba(198, 161, 91, .12);
  }

  .mm-mobile-buybar .mm-mobile-add-btn,
  .mm-mobile-buybar .mm-mobile-buy-btn {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 0 8px;
    white-space: nowrap;
    font-size: .62rem;
    letter-spacing: .055em;
  }

  .mm-size-visuals {
    grid-template-columns: 1fr;
  }

  .mm-size-step {
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr);
    column-gap: 12px;
    align-items: center;
  }

  .mm-size-step-art {
    grid-row: 1 / span 2;
    margin-bottom: 0;
    min-height: 92px;
  }

  .mm-size-step-art svg {
    height: 90px;
  }
}

@media (max-width: 390px) {
  .mm-mobile-buybar {
    left: 6px;
    right: 6px;
    bottom: 6px;
    grid-template-columns: 52px minmax(0, 1.15fr) minmax(74px, .85fr);
    gap: 5px;
    padding: 7px;
  }

  .mm-mobile-buybar .mm-mobile-add-btn,
  .mm-mobile-buybar .mm-mobile-buy-btn {
    padding: 0 6px;
    font-size: .57rem;
  }

  .mm-size-step {
    grid-template-columns: 96px minmax(0, 1fr);
  }
}

/* Extra stacking protection for engagement/wedding product presentations on touch screens. */
@media (max-width: 900px) {
  .presentation-right .mm-purchase-topbar,
  .image-metal-container .mm-purchase-topbar {
    position: relative !important;
    z-index: 80 !important;
    pointer-events: auto !important;
  }

  .presentation-right .mm-purchase-panel,
  .image-metal-container .mm-purchase-panel,
  .presentation-right .mm-detail-actions,
  .image-metal-container .mm-detail-actions {
    pointer-events: auto !important;
  }

  .presentation-right > img,
  .image-metal-container > img,
  .presentation-right .editorial-img,
  .image-metal-container .editorial-img {
    position: relative;
    z-index: 1;
  }
}

/* =========================================================
   RESPONSIVE PURCHASE SYSTEM V7 — SINGLE SOURCE OF TRUTH
   Desktop + tablet: controls live in the product information column.
   Phone: fixed Qty / Add to Cart / Buy Now bar + in-page product tools.
   ========================================================= */

/* Base purchase actions in the information column. */
body.product-detail-page .mm-purchase-panel {
  position: relative !important;
  z-index: 40 !important;
  display: block !important;
  width: 100% !important;
  margin: 24px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.product-detail-page .mm-purchase-panel > .mm-purchase-row {
  display: grid !important;
  grid-template-columns: auto 1fr 1fr !important;
  align-items: stretch !important;
  gap: 10px !important;
  width: 100% !important;
}

body.product-detail-page .mm-purchase-panel [data-mm-buy-now] {
  display: grid !important;
  place-items: center !important;
  min-height: 50px !important;
  border-radius: 0 !important;
  border-width: 1.5px !important;
  font-family: "Instrument Sans", sans-serif !important;
  font-size: .68rem !important;
  font-weight: 600 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
}

/* Phone keeps qty/Buy Now on the fixed bottom bar instead of the in-page row. */
body.product-detail-page.mm-has-mobile-buybar .mm-purchase-panel .mm-qty-wrap,
body.product-detail-page.mm-has-mobile-buybar .mm-purchase-panel [data-mm-buy-now] {
  display: none !important;
}

body.product-detail-page.mm-has-mobile-buybar .mm-purchase-panel > .mm-purchase-row {
  grid-template-columns: 1fr !important;
}

body.product-detail-page .mm-purchase-panel [data-mm-add-cart] {
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  min-height: 50px !important;
  padding: 0 18px !important;
  border: 1px solid var(--mm-teal, #0b6b63) !important;
  border-radius: 0 !important;
  background: linear-gradient(155deg, var(--mm-teal, #0b6b63), var(--mm-teal-dark, #084a45)) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(11,107,99,.22) !important;
  font-family: "Instrument Sans", sans-serif !important;
  font-size: .68rem !important;
  font-weight: 600 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  visibility: visible !important;
  opacity: 1 !important;
  transition: transform .18s ease, box-shadow .18s ease !important;
}

body.product-detail-page .mm-purchase-panel [data-mm-add-cart]:hover:not(:disabled) {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 26px rgba(11,107,99,.32) !important;
}

body.product-detail-page .mm-purchase-panel [data-mm-add-cart]:active:not(:disabled) {
  transform: translateY(0) scale(.98) !important;
  box-shadow: 0 4px 10px rgba(11,107,99,.22) !important;
}

body.product-detail-page .mm-purchase-panel [data-mm-add-cart]:disabled {
  border-color: #aaa5a1 !important;
  background: #aaa5a1 !important;
  color: #fff !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

body.product-detail-page .mm-purchase-panel > .mm-cart-toast {
  display: block !important;
  min-height: 0 !important;
  margin: 7px 0 0 !important;
}

/* Let the shape-morph states win over the panel's forced full-width,
   square, teal button chrome above, so the circle/track/pill stages
   of the Add to Cart animation actually render. */
body.product-detail-page .mm-purchase-panel [data-mm-add-cart].mm-atc-btn {
  display: inline-flex !important;
  border-radius: 999px !important;
}
body.product-detail-page .mm-purchase-panel [data-mm-add-cart].mm-atc-btn[data-state="cart"],
body.product-detail-page .mm-purchase-panel [data-mm-add-cart].mm-atc-btn[data-state="truck"] {
  width: 46px !important;
  min-height: 46px !important;
  padding: 0 !important;
  margin: 0 auto !important;
}
body.product-detail-page .mm-purchase-panel [data-mm-add-cart].mm-atc-btn[data-state="truck"] {
  width: 128px !important;
}
body.product-detail-page .mm-purchase-panel [data-mm-add-cart].mm-atc-btn[data-state="done"] {
  width: 100% !important;
  margin: 0 !important;
  background: var(--mm-success, #376e55) !important;
  border-color: var(--mm-success, #376e55) !important;
}

body.product-detail-page .mm-purchase-panel .mm-detail-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 9px !important;
  width: 100% !important;
  margin: 12px 0 0 !important;
  padding: 0 !important;
  pointer-events: auto !important;
}

body.product-detail-page .mm-purchase-panel .mm-detail-actions [data-mm-detail-favorite] {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  min-height: 48px !important;
  border: 1px solid var(--mm-line, #d4c8bc) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--mm-ink, #332b27) !important;
  font-size: .66rem !important;
  font-weight: 500 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  visibility: visible !important;
  opacity: 1 !important;
}

body.product-detail-page .mm-purchase-panel .mm-detail-actions [data-mm-size-guide],
body.product-detail-page .mm-purchase-panel .mm-detail-actions [data-mm-detail-compare] {
  min-height: 38px !important;
  border: 1px solid var(--mm-line, #d4c8bc) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--mm-ink, #332b27) !important;
  font-size: .58rem !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

/* Desktop and tablet never use the floating mobile purchase bar. */
@media (min-width: 701px) {
  body.product-detail-page .mm-mobile-buybar {
    display: none !important;
  }

  body.product-detail-page.mm-has-mobile-buybar {
    padding-bottom: 0 !important;
  }
}

/* Phone: purchase row lives in one fixed bottom bar. */
@media (max-width: 700px) {
  body.product-detail-page .mm-purchase-panel > .mm-purchase-row,
  body.product-detail-page .mm-purchase-panel > .mm-cart-toast {
    display: none !important;
  }

  body.product-detail-page .mm-purchase-panel {
    margin-top: 14px !important;
  }

  body.product-detail-page .mm-purchase-panel .mm-detail-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 7px !important;
    margin-top: 12px !important;
    padding-top: 12px !important;
    border-top: 1px solid rgba(92, 75, 65, .11) !important;
  }

  body.product-detail-page .mm-purchase-panel .mm-detail-actions [data-mm-detail-favorite] {
    grid-column: 1 / -1 !important;
  }

  body.product-detail-page .mm-mobile-buybar {
    position: fixed !important;
    z-index: 9994 !important;
    display: block !important;
    left: 8px !important;
    right: 8px !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    width: auto !important;
    padding: 7px !important;
    border: 1px solid rgba(92, 75, 65, .14) !important;
    border-radius: 16px !important;
    background: rgba(255, 252, 247, .98) !important;
    box-shadow: 0 14px 38px rgba(60, 45, 36, .18) !important;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }

  body.product-detail-page .mm-buybar-main {
    display: grid !important;
    grid-template-columns: 56px minmax(0, 1fr) minmax(82px, .86fr) !important;
    gap: 6px !important;
    align-items: stretch !important;
  }

  body.product-detail-page .mm-buybar-main:has(.mm-mobile-buy-btn[hidden]) .mm-mobile-add-btn {
    grid-column: span 2 !important;
  }

  body.product-detail-page .mm-mobile-buybar-qty {
    position: relative !important;
    display: block !important;
    min-width: 0 !important;
  }

  body.product-detail-page .mm-mobile-buybar-qty > span {
    position: absolute !important;
    z-index: 2 !important;
    top: 4px !important;
    left: 9px !important;
    color: #8b796d !important;
    font: 700 .44rem/1 "Instrument Sans", sans-serif !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    pointer-events: none !important;
  }

  body.product-detail-page .mm-mobile-buybar-qty input,
  body.product-detail-page .mm-mobile-buybar .mm-mobile-add-btn,
  body.product-detail-page .mm-mobile-buybar .mm-mobile-buy-btn {
    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    min-width: 0 !important;
    margin: 0 !important;
    border-radius: 10px !important;
  }

  body.product-detail-page .mm-mobile-buybar-qty input {
    padding: 12px 7px 2px !important;
    border: 1px solid rgba(92, 75, 65, .20) !important;
    background: #fff !important;
    text-align: center !important;
  }

  body.product-detail-page .mm-mobile-buybar .mm-mobile-add-btn {
    border: 1px solid var(--mm-teal, #0b6b63) !important;
    background: linear-gradient(155deg, var(--mm-teal, #0b6b63), var(--mm-teal-dark, #084a45)) !important;
    color: #fff !important;
    font-size: .57rem !important;
    box-shadow: 0 6px 14px rgba(11,107,99,.28) !important;
    transition: transform .15s ease, box-shadow .15s ease !important;
  }

  body.product-detail-page .mm-mobile-buybar .mm-mobile-buy-btn {
    border: 1.5px solid var(--mm-gold, #b8905a) !important;
    background: linear-gradient(155deg, var(--mm-gold, #b8905a), #a3773f) !important;
    color: #fff !important;
    font-size: .57rem !important;
    box-shadow: 0 6px 14px rgba(184,144,90,.3) !important;
    transition: transform .15s ease, box-shadow .15s ease !important;
  }

  body.product-detail-page .mm-mobile-buybar .mm-mobile-add-btn:active,
  body.product-detail-page .mm-mobile-buybar .mm-mobile-buy-btn:active {
    transform: scale(.96) !important;
    box-shadow: 0 3px 8px rgba(0,0,0,.18) !important;
  }

  body.product-detail-page .mm-buybar-tools {
    display: none !important;
  }

  body.product-detail-page.mm-has-mobile-buybar {
    padding-bottom: 72px !important;
  }

  body.product-detail-page.mm-has-mobile-buybar .mm-compare-tray {
    bottom: 78px !important;
  }

  body.product-detail-page.mm-has-mobile-buybar .mm-service-dock {
    bottom: 124px !important;
  }

  /* The chat/social launcher defaults to sitting flush with the viewport
     bottom (see .mm-social-widget in enhancements.css/premium-social-widget.css),
     which puts it right on top of the fixed Buy Now bar on product pages.
     Stack it above the assistance circle instead, clear of the bar. */
  body.product-detail-page.mm-has-mobile-buybar .mm-social-widget {
    bottom: 182px !important;
  }
}


/* =========================================================
   FINAL SIDE ASSISTANCE WIDGET
   One translucent circular trigger at the right edge.
   Desktop: hover/focus or click reveals Assistance + Custom Design.
   Touch devices: tap the circle to reveal the two actions.
   ========================================================= */
.mm-service-dock {
  position: fixed !important;
  left: auto !important;
  right: 18px !important;
  top: auto !important;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  transform: none !important;
  z-index: 11900 !important;
  width: 50px !important;
  max-width: none !important;
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}

.mm-service-toggle {
  position: relative;
  z-index: 2;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(198, 161, 91, .38);
  border-radius: 50%;
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: #0b5e56;
  cursor: pointer;
  opacity: .82;
  box-shadow: 0 10px 28px rgba(73, 58, 48, .14);
  transition: opacity 180ms ease,
    transform 180ms ease,
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.mm-service-toggle svg {
  width: 22px;
  height: 22px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mm-service-dock.is-open .mm-service-toggle {
  opacity: 1;
  transform: scale(1.04);
  background: rgba(255, 255, 255, .94);
  border-color: rgba(198, 161, 91, .62);
  box-shadow: 0 13px 32px rgba(73, 58, 48, .18);
}

.mm-service-menu {
  position: absolute;
  right: 70px;
  top: 50%;
  width: 192px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(92, 75, 65, .12);
  border-radius: 18px;
  background: rgba(255, 255, 255, .80);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 14px 34px rgba(73, 58, 48, .14);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(10px, -50%) scale(.98);
  transform-origin: right center;
  transition: opacity 170ms ease,
    visibility 170ms ease,
    transform 170ms ease;
}

.mm-service-dock.is-open .mm-service-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(0, -50%) scale(1);
}

@media (hover: hover) and (pointer: fine) {
  .mm-service-dock:hover .mm-service-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(0, -50%) scale(1);
  }
}

.mm-service-option {
  width: 100%;
  min-height: 56px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  padding: 10px 13px;
  border: 1px solid rgba(92, 75, 65, .10);
  border-radius: 13px;
  background: rgba(255, 252, 247, .86);
  color: #5c4b41;
  text-align: left;
  cursor: pointer;
  box-shadow: none !important;
  transition: transform 160ms ease,
    color 160ms ease,
    border-color 160ms ease,
    background 160ms ease;
}

.mm-service-option:hover,
.mm-service-option:focus-visible {
  transform: translateX(-2px);
  color: #0b5e56;
  border-color: rgba(198, 161, 91, .42);
  background: rgba(255, 255, 255, .96);
  outline: none;
}

.mm-service-option-title {
  font: 700 .72rem/1.2 "Instrument Sans", sans-serif;
  letter-spacing: .085em;
  text-transform: uppercase;
}

.mm-service-option-subtitle {
  color: #8b7666;
  font: 500 .62rem/1.35 "Instrument Sans", sans-serif;
  letter-spacing: .02em;
  text-transform: none;
}

/* Override all earlier purchase-bar rules that moved the old service pills. */
body.mm-has-mobile-buybar .mm-service-dock,
body.mm-has-mobile-buybar .mm-service-dock.mm-service-dock {
  left: auto !important;
  right: 16px !important;
  top: auto !important;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  transform: none !important;
}

@media (max-width: 700px) {
  .mm-service-dock,
  body.mm-has-mobile-buybar .mm-service-dock,
  body.mm-has-mobile-buybar .mm-service-dock.mm-service-dock {
    left: auto !important;
    right: 16px !important;
    top: auto !important;
    bottom: calc(82px + env(safe-area-inset-bottom)) !important;
    transform: none !important;
    width: 40px !important;
  }

  .mm-service-toggle {
    width: 40px;
    height: 40px;
  }

  .mm-service-toggle svg {
    width: 18px;
    height: 18px;
  }

  .mm-service-menu {
    right: 51px;
    top: 50%;
    width: min(184px, calc(100vw - 82px));
    padding: 7px;
    border-radius: 16px;
  }

  .mm-service-option {
    min-height: 52px;
    padding: 9px 12px;
  }

  .mm-service-option-title {
    font-size: .68rem;
  }

  .mm-service-option-subtitle {
    font-size: .59rem;
  }
}

@media (max-width: 390px) {
  .mm-service-dock,
  body.mm-has-mobile-buybar .mm-service-dock,
  body.mm-has-mobile-buybar .mm-service-dock.mm-service-dock {
    right: 16px !important;
    bottom: calc(124px + env(safe-area-inset-bottom)) !important;
    width: 40px !important;
  }

  .mm-service-toggle {
    width: 40px;
    height: 40px;
  }

  .mm-service-menu {
    right: 51px;
    width: min(184px, calc(100vw - 82px));
  }
}


/* Catalog card action placement: responsive polish. */
.mm-card-actions--media {
  top: 8px;
  right: 8px;
  gap: 6px;
}

.mm-card-actions--media .mm-icon-btn {
  width: 30px;
  height: 30px;
}

.mm-card-actions--media .mm-icon-btn svg {
  width: 14px;
  height: 14px;
}

/* Favorite/Compare row now sits above the product photo instead of
   overlaid on top of it (enhanceProductCards() in enhancements.js now
   inserts it right before .carousel-container, as a direct child of
   .product-item), so the piece itself stays fully visible. The actual
   static-row styling lives in the "PRODUCT CARD QUICK ACTIONS ABOVE
   PRODUCT NAME" block further down, which now matches for the same
   reason (it needed .mm-card-actions--title to be a direct child of
   .product-item, which it wasn't until this DOM change). */

@media (max-width: 700px) {
  .mm-card-actions--media {
    top: 7px;
    right: 7px;
    gap: 5px;
  }

  .mm-card-actions--media .mm-icon-btn {
    width: 27px;
    height: 27px;
  }

  .mm-card-actions--media .mm-icon-btn svg {
    width: 13px;
    height: 13px;
  }
}

/* =========================================================
   PRODUCT CARD TITLE ALIGNMENT
   Reserve the same two-line title area for every catalog card.
   A one-line name is vertically centered inside that space so
   every product image begins at the same height as two-line names.
   ========================================================= */
.product-grid .product-item > .product-name,
.catalog-grid .product-item > .product-name,
.products-grid .product-item > .product-name,
.product-item > .product-name {
  height: 2.55em !important;
  min-height: 2.55em !important;
  margin: 0 auto 20px !important;
  padding: 0 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1.14 !important;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

/* Keep the image/carousel aligned immediately after the title slot. */
.product-item > .product-name + .carousel-container {
  margin-top: 0 !important;
}

@media (max-width: 768px) {
  .product-grid .product-item > .product-name,
  .catalog-grid .product-item > .product-name,
  .products-grid .product-item > .product-name,
  .product-item > .product-name {
    height: 2.6em !important;
    min-height: 2.6em !important;
    margin-bottom: 14px !important;
    line-height: 1.15 !important;
  }
}


/* =========================================================
   PRODUCT CARD QUICK ACTIONS ABOVE PRODUCT NAME
   Keep Favorite / Compare in a dedicated row above the title,
   so they never overlap the name or change image alignment.
   ========================================================= */


.product-item > .mm-card-actions--title {
  position: static !important;
  width: 100%;
  min-height: 32px;
  margin: 0 0 6px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  transform: none !important;
}

.product-item > .mm-card-actions--title .mm-icon-btn {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-color: rgba(92,75,65,.1);
  box-shadow: 0 3px 10px rgba(73,58,48,.06);
}

.product-item > .mm-card-actions--title .mm-icon-btn svg {
  width: 13px;
  height: 13px;
}

@media (max-width: 768px) {
  .product-item > .mm-card-actions--title {
    min-height: 30px;
    margin-bottom: 5px !important;
  }

  .product-item > .mm-card-actions--title .mm-icon-btn {
    width: 26px;
    height: 26px;
    flex-basis: 26px;
  }

  .product-item > .mm-card-actions--title .mm-icon-btn svg {
    width: 12px;
    height: 12px;
  }
}

/* =========================================================
   QUICK BROWSE + BUDGET FINDER
   Replaces the older duplicate filter/search toolbar.
   ========================================================= */
.mm-legacy-toolbar-hidden {
  display: none !important;
}

.mm-catalog-tools.mm-catalog-tools--budget {
  width: min(1360px, calc(100% - 40px));
  margin: 26px auto 32px;
  padding: 18px 22px 14px;
  display: grid;
  grid-template-columns: minmax(180px, .8fr) minmax(0, 4.2fr);
  gap: 12px 20px;
  align-items: end;
  border: 1px solid rgba(92, 75, 65, 0.14);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.56);
  box-shadow: 0 10px 28px rgba(73, 58, 48, 0.045);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.mm-catalog-tools-heading {
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.mm-catalog-tools--budget .mm-catalog-tools-title {
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #5c4b41;
  font-weight: 700;
}

.mm-catalog-tools-subtitle {
  max-width: 280px;
  color: #8b796d;
  font: 400 .73rem/1.45 "Instrument Sans", sans-serif;
}

.mm-catalog-tools--budget .mm-catalog-tools-controls {
  display: grid;
  grid-template-columns: minmax(240px, 1.75fr) minmax(150px, .95fr) minmax(180px, 1.05fr) minmax(155px, .8fr);
  gap: 12px;
  align-items: end;
  min-width: 0;
}

.mm-control-label {
  display: block;
  margin: 0 0 6px 2px;
  color: #7b675b;
  font: 700 .62rem/1 "Instrument Sans", sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.mm-quick-search,
.mm-budget-control,
.mm-sort-control,
.mm-shape-block {
  min-width: 0;
}

.mm-input-shell,
.mm-budget-input-shell {
  min-height: 42px;
  display: flex;
  align-items: center;
  border: 1px solid rgba(92, 75, 65, 0.16);
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  overflow: hidden;
}

.mm-input-shell input,
.mm-budget-input-shell input {
  min-width: 0;
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 0 !important;
  outline: 0;
  background: transparent !important;
  box-shadow: none !important;
  color: #5c4b41;
  font: 500 .76rem/1 "Instrument Sans", sans-serif;
}

.mm-input-shell > span {
  padding-right: 13px;
  color: #a88751;
  font-size: 1rem;
}

.mm-budget-currency {
  padding-left: 13px;
  color: #a88751;
  font: 700 .78rem/1 "Instrument Sans", sans-serif;
}

.mm-budget-input-shell input {
  padding-left: 7px;
}

.mm-budget-clear {
  width: 30px;
  height: 30px;
  margin-right: 5px;
  border: 0;
  border-radius: 50%;
  background: rgba(198,161,91,.11);
  color: #7d6345;
  font-size: 1rem;
  cursor: pointer;
}

.mm-budget-clear[hidden] {
  display: none !important;
}

.mm-catalog-tools--budget select {
  width: 100%;
  min-height: 42px;
  padding: 0 34px 0 13px;
  border: 1px solid rgba(92, 75, 65, 0.16);
  border-radius: 12px;
  background-color: rgba(255,255,255,.9);
  color: #5c4b41;
  font: 500 .72rem/1 "Instrument Sans", sans-serif;
}

.mm-catalog-tools--budget .mm-shape-block select {
  border-radius: 999px;
}

.mm-control-hidden {
  display: none !important;
}

.mm-budget-feedback {
  grid-column: 2;
  min-height: 20px;
  padding: 1px 3px 0;
  color: #806d61;
  font: 500 .72rem/1.45 "Instrument Sans", sans-serif;
}

.mm-budget-feedback strong {
  color: #0b5e56;
  font-weight: 700;
}

.mm-budget-over-badge {
  width: fit-content;
  max-width: calc(100% - 24px);
  margin: 4px auto 10px;
  padding: 6px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(198,161,91,.28);
  border-radius: 999px;
  background: rgba(198,161,91,.09);
  color: #8d6b37;
  font: 700 .61rem/1 "Instrument Sans", sans-serif;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.mm-budget-near-match {
  position: relative;
}

@media (max-width: 1050px) {
  .mm-catalog-tools.mm-catalog-tools--budget {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .mm-catalog-tools--budget .mm-catalog-tools-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mm-budget-feedback {
    grid-column: 1;
  }
  .mm-catalog-tools-subtitle {
    max-width: none;
  }
}

@media (max-width: 650px) {
  .mm-catalog-tools.mm-catalog-tools--budget {
    width: calc(100% - 20px);
    margin: 18px auto 24px;
    padding: 15px 14px 13px;
    border-radius: 16px;
    gap: 13px;
  }
  .mm-catalog-tools--budget .mm-catalog-tools-controls {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .mm-budget-feedback {
    font-size: .69rem;
  }
}



/* Engagement-ring Quick Browse shape dropdown with illustrations */
.mm-shape-picker {
  position: relative;
}

.mm-shape-toggle {
  width: 100%;
  min-height: 42px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid rgba(92, 75, 65, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: #5c4b41;
  font: 500 .72rem/1 "Instrument Sans", sans-serif;
  cursor: pointer;
}

.mm-shape-toggle.is-open {
  border-color: rgba(11, 94, 86, 0.35);
  box-shadow: 0 0 0 3px rgba(11, 94, 86, 0.08);
}

.mm-shape-toggle-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mm-shape-toggle-caret {
  color: #a88751;
  font-size: .95rem;
}

.mm-shape-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: min(250px, calc(100vw - 24px));
  max-height: min(360px, 70vh);
  padding: 6px;
  overflow-y: auto;
  border: 1px solid rgba(92, 75, 65, 0.14);
  border-radius: 14px;
  background: rgba(255, 252, 248, 0.98);
  box-shadow: 0 18px 40px rgba(73, 58, 48, 0.13);
}

.mm-shape-panel-head,
.mm-shape-close {
  display: none !important;
}

.mm-shape-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
}

.mm-shape-option {
  min-height: 0;
  padding: 10px 12px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #4d4038;
  text-align: left;
  cursor: pointer;
  box-shadow: none;
  transition: background-color .16s ease, color .16s ease;
}

.mm-shape-option:hover {
  transform: none;
  background: rgba(198, 161, 91, 0.08);
  box-shadow: none;
}

.mm-shape-option.is-active {
  background: rgba(11, 94, 86, 0.08);
  color: #0b5e56;
  border-color: transparent;
  box-shadow: none;
}

.mm-shape-option-art {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 28px;
}

.mm-shape-option-art img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.mm-shape-option-label {
  color: inherit;
  font: 500 .76rem/1.2 "Instrument Sans", sans-serif;
  letter-spacing: .01em;
}

.mm-shape-fallback {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(198, 161, 91, 0.1);
  color: #a88751;
  font: 700 .78rem/1 "Instrument Sans", sans-serif;
}

.mm-shape-option--all {
  grid-column: auto;
}

@media (max-width: 650px) {
  .mm-shape-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: auto;
    width: min(250px, calc(100vw - 24px));
    max-height: 300px;
  }
}


/* =========================================================
   SHAPE DROPDOWN STACKING / CLICK FIX
   Keep the illustrated Shape menu above product-card favorite/compare
   buttons and images so every option remains clickable.
   ========================================================= */
.mm-catalog-tools.mm-catalog-tools--budget {
  position: relative !important;
  z-index: 1200 !important;
  overflow: visible !important;
  isolation: isolate;
}

.mm-catalog-tools-controls,
.mm-shape-picker {
  overflow: visible !important;
}

.mm-shape-picker {
  z-index: 1210 !important;
}

.mm-shape-panel {
  z-index: 5000 !important;
  pointer-events: auto !important;
  overflow-x: hidden;
}

.mm-shape-panel[hidden] {
  display: none !important;
}

.mm-shape-grid,
.mm-shape-option,
.mm-shape-option * {
  pointer-events: auto;
}

/* Product actions must stay below an open filter dropdown. */
.product-item,
.product-item .carousel-container,
.product-item > .mm-card-actions--title,
.product-item .mm-card-actions,
.product-item .mm-icon-btn {
  z-index: auto;
}

.product-grid,
#auto-product-grid {
  position: relative;
  z-index: 1;
}

/* =========================================================
   ENGAGEMENT QUICK BROWSE — Shape / Carat / Clarity / Color
   ========================================================= */
.mm-catalog-tools--engagement-filters {
  width: min(1480px, calc(100% - 24px));
  grid-template-columns: minmax(155px, .7fr) minmax(0, 5.3fr);
}

.mm-catalog-tools--engagement-filters .mm-catalog-tools-controls {
  grid-template-columns: minmax(190px, 1.45fr)
    minmax(120px, .82fr)
    minmax(126px, .82fr)
    minmax(128px, .76fr)
    minmax(118px, .70fr)
    minmax(160px, 1fr)
    minmax(140px, .9fr);
  gap: 10px;
}

.mm-catalog-tools--engagement-filters .mm-catalog-tools-subtitle {
  max-width: 190px;
}

.mm-catalog-tools--engagement-filters .mm-carat-control,
.mm-catalog-tools--engagement-filters .mm-clarity-control,
.mm-catalog-tools--engagement-filters .mm-color-control {
  min-width: 0;
}

.mm-catalog-tools--engagement-filters .mm-carat-control select,
.mm-catalog-tools--engagement-filters .mm-clarity-control select,
.mm-catalog-tools--engagement-filters .mm-color-control select {
  border-radius: 999px;
  padding-left: 12px;
  padding-right: 28px;
  font-size: .72rem;
}

/* Compact illustrated shape dropdown */
.mm-catalog-tools--engagement-filters .mm-shape-picker {
  position: relative;
  z-index: 1210 !important;
}

.mm-catalog-tools--engagement-filters .mm-shape-panel {
  top: calc(100% + 8px);
  width: 240px;
  max-height: 330px;
}

.mm-catalog-tools--engagement-filters .mm-shape-option {
  min-height: 42px;
  padding: 7px 10px;
  gap: 10px;
}

.mm-catalog-tools--engagement-filters .mm-shape-option-art,
.mm-catalog-tools--engagement-filters .mm-shape-option-art img,
.mm-catalog-tools--engagement-filters .mm-shape-fallback {
  width: 26px;
  height: 26px;
  flex-basis: 26px;
}

.mm-catalog-tools--engagement-filters .mm-shape-option-label {
  font-size: .73rem;
}

/* Keep product cards below every Quick Browse dropdown. */
.mm-catalog-tools--engagement-filters,
.mm-catalog-tools--engagement-filters .mm-catalog-tools-controls {
  position: relative;
  overflow: visible !important;
  z-index: 1200;
}

.mm-catalog-tools--engagement-filters .mm-shape-panel {
  z-index: 5000 !important;
}

@media (max-width: 1180px) {
  .mm-catalog-tools--engagement-filters {
    grid-template-columns: 1fr;
  }

  .mm-catalog-tools--engagement-filters .mm-catalog-tools-subtitle {
    max-width: none;
  }

  .mm-catalog-tools--engagement-filters .mm-catalog-tools-controls {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .mm-catalog-tools--engagement-filters .mm-budget-feedback {
    grid-column: 1;
  }
}

@media (max-width: 800px) {
  .mm-catalog-tools--engagement-filters .mm-catalog-tools-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .mm-catalog-tools--engagement-filters {
    width: calc(100% - 18px);
  }

  .mm-catalog-tools--engagement-filters .mm-catalog-tools-controls {
    grid-template-columns: 1fr;
  }

  .mm-catalog-tools--engagement-filters .mm-shape-panel {
    width: min(240px, calc(100vw - 36px));
  }
}


/* Custom design / appointment modal field polish */
.mm-modal {
  width: min(760px, 100%);
  padding: 28px;
}

.mm-modal .mm-form-grid {
  gap: 18px 20px;
}

.mm-modal .mm-field {
  min-width: 0;
  margin: 0;
  gap: 8px;
}

.mm-modal .mm-field label {
  margin: 0;
  color: #684c3b;
  font-size: .68rem;
  letter-spacing: .09em;
}

.mm-modal .mm-field input,
.mm-modal .mm-field select,
.mm-modal .mm-field textarea {
  box-sizing: border-box;
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 50px;
  padding: 13px 14px;
  border: 1px solid rgba(92, 75, 65, .18);
  border-radius: 12px;
  background: rgba(255, 253, 249, .96);
  color: var(--mm-ink);
  font: 500 .82rem/1.35 "Instrument Sans", sans-serif;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.mm-modal .mm-field input:hover,
.mm-modal .mm-field select:hover,
.mm-modal .mm-field textarea:hover {
  border-color: rgba(11, 94, 86, .28);
}

.mm-modal .mm-field input:focus,
.mm-modal .mm-field select:focus,
.mm-modal .mm-field textarea:focus {
  border-color: rgba(11, 94, 86, .62);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(11, 94, 86, .08);
}

.mm-modal .mm-field textarea {
  min-height: 132px;
  line-height: 1.55;
}

.mm-modal .mm-field input::placeholder,
.mm-modal .mm-field textarea::placeholder {
  color: #a19186;
  opacity: 1;
}

.mm-modal .mm-form-footer {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(92, 75, 65, .10);
}

@media (max-width: 700px) {
  .mm-modal {
    width: 100%;
    padding: 22px 18px;
  }
  .mm-modal .mm-form-grid {
    gap: 15px;
  }
}

@media (max-width: 520px) {
  .mm-modal {
    padding: 20px 16px;
  }
  .mm-modal .mm-field input,
  .mm-modal .mm-field select,
  .mm-modal .mm-field textarea {
    min-height: 48px;
    border-radius: 11px;
  }
}

/* Custom-design form: disabled shape/carat state when no stone is selected */
#mm-custom-modal .mm-field.is-disabled {
  opacity: .5;
}
#mm-custom-modal .mm-field.is-disabled input,
#mm-custom-modal .mm-field.is-disabled select {
  cursor: not-allowed;
  background: rgba(244, 239, 232, .8);
}

/* Custom Design: visual stone-shape selector using the supplied diamond images */
#mm-custom-modal .mm-custom-shape-field {
  position: relative;
}

#mm-custom-modal .mm-custom-shape-picker {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}

#mm-custom-modal .mm-custom-shape-option {
  appearance: none;
  -webkit-appearance: none;
  min-width: 0;
  min-height: 88px;
  padding: 10px 8px 9px;
  border: 1px solid rgba(92, 75, 65, .16);
  border-radius: 12px;
  background: rgba(255, 253, 249, .94);
  color: #5c4b41;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  font: 600 .68rem/1.2 "Instrument Sans", sans-serif;
  letter-spacing: .01em;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease, transform .16s ease;
}

#mm-custom-modal .mm-custom-shape-option:hover {
  border-color: rgba(11, 94, 86, .34);
  background: #fff;
  transform: translateY(-1px);
}

#mm-custom-modal .mm-custom-shape-option:focus-visible {
  outline: none;
  border-color: rgba(11, 94, 86, .62);
  box-shadow: 0 0 0 3px rgba(11, 94, 86, .09);
}

#mm-custom-modal .mm-custom-shape-option.is-active {
  border-color: rgba(11, 94, 86, .64);
  background: rgba(11, 94, 86, .055);
  color: #0b5e56;
  box-shadow: inset 0 0 0 1px rgba(11, 94, 86, .12);
}

#mm-custom-modal .mm-custom-shape-art {
  width: 56px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

#mm-custom-modal .mm-custom-shape-art img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

/* Tall cuts need a little more vertical room so their tips are never cropped. */
#mm-custom-modal .mm-custom-shape-option[data-mm-custom-shape="Oval"] .mm-custom-shape-art,
#mm-custom-modal .mm-custom-shape-option[data-mm-custom-shape="Marquise"] .mm-custom-shape-art,
#mm-custom-modal .mm-custom-shape-option[data-mm-custom-shape="Pear"] .mm-custom-shape-art {
  width: 50px;
  height: 66px;
}

#mm-custom-modal .mm-custom-shape-extras {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 9px;
}

#mm-custom-modal .mm-custom-shape-text-option {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(92, 75, 65, .16);
  border-radius: 999px;
  background: rgba(255, 253, 249, .94);
  color: #6d5b50;
  padding: 8px 12px;
  cursor: pointer;
  font: 600 .65rem/1 "Instrument Sans", sans-serif;
}

#mm-custom-modal .mm-custom-shape-text-option.is-active {
  border-color: rgba(11, 94, 86, .5);
  background: rgba(11, 94, 86, .06);
  color: #0b5e56;
}

#mm-custom-modal .mm-custom-shape-field.is-disabled .mm-custom-shape-option,
#mm-custom-modal .mm-custom-shape-field.is-disabled .mm-custom-shape-text-option {
  cursor: not-allowed;
  opacity: .55;
  transform: none;
}

@media (max-width: 620px) {
  #mm-custom-modal .mm-custom-shape-picker {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #mm-custom-modal .mm-custom-shape-option {
    min-height: 82px;
  }
}

/* =========================================================
   PRODUCT DETAIL — SHARED POSITIONING REFINEMENTS
   Shared by every product template to match the Her Ring layout:
   align Metal Color with the product title on desktop.
   ========================================================= */
body.product-detail-page .metal-label {
  white-space: nowrap !important;
}

@media (min-width: 769px) {
  body.product-detail-page .presentation-right .mm-purchase-topbar {
    position: absolute !important;
    top: 20px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    z-index: 12 !important;
  }

  body.product-detail-page .presentation-right .metal-selector {
    position: static !important;
    top: auto !important;
    right: auto !important;
    width: min(500px, 100%) !important;
    margin: 0 auto !important;
  }
}

@media (min-width: 701px) {
  .mm-service-dock,
  body.mm-has-mobile-buybar .mm-service-dock,
  body.mm-has-mobile-buybar .mm-service-dock.mm-service-dock {
    top: auto !important;
    bottom: 82px !important;
    transform: none !important;
  }
}

@media (min-width: 1041px) {
  .mm-buybar-tools {
    grid-template-columns: 150px 134px 100px !important;
    gap: 8px !important;
  }

  .mm-buybar-tool {
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 12px !important;
    border-radius: 12px !important;
    font-size: .60rem !important;
    letter-spacing: .045em !important;
  }
}

/* ---- review photo uploads + galleries ---- */
.mm-review-photo-field {
  grid-column: 1 / -1;
  display: grid;
  gap: 9px;
  /* The premium uploader card (css/mm-uploader.css) now provides the box. */
}
.mm-review-photo-input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.mm-review-photo-button {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 13px;
  border: 1px solid rgba(11,94,86,.3);
  border-radius: 999px;
  background: #fff;
  color: var(--mm-teal);
  font: 700 .72rem/1 "Instrument Sans", sans-serif;
  cursor: pointer;
}
.mm-review-photo-button:hover {
  border-color: var(--mm-teal);
}
.mm-review-photo-help {
  color: var(--mm-muted);
  font: 500 .68rem/1.5 "Instrument Sans", sans-serif;
}
.mm-review-photo-preview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
  gap: 8px;
}
.mm-review-photo-preview[hidden] {
  display: none;
}
.mm-review-photo-preview-item {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--mm-line);
  border-radius: 10px;
  background: var(--mm-card, #fffdf9);
  box-shadow: 0 6px 18px rgba(47,41,36,.06);
}
.mm-review-photo-preview-item img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  background: #f7f2ea;
}
.mm-review-photo-preview-item figcaption {
  display: grid;
  gap: 1px;
  padding: 6px 8px;
  min-width: 0;
}
.mm-review-photo-preview-name {
  font-size: .68rem;
  font-weight: 600;
  color: var(--mm-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mm-review-photo-preview-size { font-size: .62rem; color: var(--mm-muted); }
.mm-review-photo-preview-item button {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(28,24,21,.78);
  color: #fff;
  font: 700 18px/26px Arial, sans-serif;
  cursor: pointer;
}
.mm-review-images {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-bottom: 4px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}
.mm-review-image {
  flex: 0 0 118px;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--mm-line);
  border-radius: 10px;
  background: #f7f2ea;
}
.mm-review-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .2s ease;
}
.mm-review-image:hover img {
  transform: scale(1.03);
}
@media(max-width:600px){
  .mm-review-photo-field { grid-column: auto; }
  .mm-review-image { flex-basis: 98px; }
}

/* Review submit button: align full width with review fields */
.mm-review-form > button[type="submit"] {
  grid-column: 1 / -1;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

/* =========================================================
   RELATED PRODUCTS — editorial Figma treatment
   Desktop/tablet: two large static pieces, no box or arrows.
   Mobile: touch-swipe row with one large card plus a preview.
   ========================================================= */




.mm-shop-section[data-mm-section="related"] .mm-shop-section-head .mm-kicker {
  display: none;
}







.mm-shop-section[data-mm-section="related"] .mm-related-grid.mm-carousel-track {
  overflow: visible;
}

.mm-shop-section[data-mm-section="related"] .mm-mini-product {
  display: block;
}

.mm-shop-section[data-mm-section="related"] .mm-mini-product:hover {
  border-color: transparent;
}

.mm-shop-section[data-mm-section="related"] .mm-mini-product img,
.mm-shop-section[data-mm-section="related"] .mm-mini-placeholder {
  transition: opacity 180ms ease;
}



.mm-shop-section[data-mm-section="related"] .mm-mini-info {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-top: 11px;
}

.mm-shop-section[data-mm-section="related"] .mm-mini-copy {
  min-width: 0;
}



.mm-shop-section[data-mm-section="related"] .mm-mini-metal {
  display: block;
  margin-top: 4px;
  color: #9a7564;
  font-family: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: .61rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.mm-shop-section[data-mm-section="related"] .mm-mini-product p {
  flex: 0 0 auto;
  white-space: nowrap;
}

@media (max-width: 960px) {
  .mm-shop-section[data-mm-section="related"] {
    width: min(100% - 40px, 920px);
    margin-top: 60px;
    margin-bottom: 70px;
  }

  .mm-shop-section[data-mm-section="related"] .mm-related-grid.mm-carousel-track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
  }
}

@media (max-width: 680px) {
  .mm-shop-section[data-mm-section="related"] {
    width: 100%;
    margin: 48px 0 56px;
    padding: 0 0 0 18px;
  }

  .mm-shop-section[data-mm-section="related"] .mm-shop-section-head {
    margin: 0 18px 18px 0;
  }

  .mm-shop-section[data-mm-section="related"] .mm-carousel-viewport {
    overflow: hidden;
  }

  .mm-shop-section[data-mm-section="related"] .mm-related-grid.mm-carousel-track {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 18px 8px 0;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .mm-shop-section[data-mm-section="related"] .mm-related-grid.mm-carousel-track::-webkit-scrollbar {
    display: none;
  }

  .mm-shop-section[data-mm-section="related"] .mm-mini-product {
    flex: 0 0 82%;
    scroll-snap-align: start;
  }

  .mm-shop-section[data-mm-section="related"] .mm-mini-product img,
  .mm-shop-section[data-mm-section="related"] .mm-mini-placeholder {
    aspect-ratio: 3 / 4;
  }

  .mm-shop-section[data-mm-section="related"] .mm-mini-product h3 {
    font-size: .9rem;
  }

  .mm-shop-section[data-mm-section="related"] .mm-mini-product p {
    font-size: .84rem;
  }
}

/* =========================================================
   RELATED PRODUCTS V15 — show the whole jewelry piece.
   Keep the editorial layout, but never crop the product image.
   ========================================================= */
@media (min-width: 681px) {
  .mm-shop-section[data-mm-section="related"] .mm-related-grid.mm-carousel-track {
    grid-template-columns: repeat(2, minmax(0, 340px));
    gap: 26px;
  }

  .mm-shop-section[data-mm-section="related"] .mm-mini-product img,
  .mm-shop-section[data-mm-section="related"] .mm-mini-placeholder {
    width: 100%;
    height: clamp(330px, 30vw, 420px);
    aspect-ratio: auto;
    padding: clamp(18px, 2vw, 30px);
    box-sizing: border-box;
    object-fit: contain;
    object-position: center;
    background: #eee8df;
  }
}

@media (min-width: 681px) and (max-width: 960px) {
  .mm-shop-section[data-mm-section="related"] .mm-related-grid.mm-carousel-track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .mm-shop-section[data-mm-section="related"] .mm-mini-product img,
  .mm-shop-section[data-mm-section="related"] .mm-mini-placeholder {
    height: clamp(300px, 42vw, 390px);
    padding: 20px;
  }
}

@media (max-width: 680px) {
  .mm-shop-section[data-mm-section="related"] .mm-mini-product {
    flex-basis: 78%;
  }

  .mm-shop-section[data-mm-section="related"] .mm-mini-product img,
  .mm-shop-section[data-mm-section="related"] .mm-mini-placeholder {
    width: 100%;
    height: clamp(300px, 92vw, 390px);
    aspect-ratio: auto;
    padding: 18px;
    box-sizing: border-box;
    object-fit: contain;
    object-position: center;
    background: #eee8df;
  }
}


/* =========================================================
   RELATED PRODUCTS V16 — four-piece desktop edit + richer product photography.
   Desktop: 4 across. Tablet: 2 across. Mobile: swipe.
   Product imagery uses normal blending so metals/diamonds keep their true clarity.
   ========================================================= */
@media (min-width: 961px) {
  .mm-shop-section[data-mm-section="related"] .mm-related-grid.mm-carousel-track {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    max-width: 1190px;
  }

  .mm-shop-section[data-mm-section="related"] .mm-mini-product img,
  .mm-shop-section[data-mm-section="related"] .mm-mini-placeholder {
    height: clamp(260px, 23vw, 330px);
    padding: clamp(14px, 1.4vw, 22px);
  }
}



.mm-shop-section[data-mm-section="related"] .mm-mini-product:hover img {
  opacity: 1 !important;
  filter: contrast(1.08) saturate(1.05) brightness(1.02) !important;
}

/* Keep catalog and product-detail photography crisp instead of muddy on ivory/beige. */
.product-item .image-slider .product-image,
.product-detail-page .mm-product-thumb img,
.product-detail-page .mm-product-mobile-image,
.product-detail-page .mm-product-stage img {
  mix-blend-mode: normal !important;
  filter: contrast(1.055) saturate(1.035) brightness(1.01) !important;
}

@media (min-width: 681px) and (max-width: 960px) {
  .mm-shop-section[data-mm-section="related"] .mm-related-grid.mm-carousel-track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
}


/* =========================================================
   RELATED PRODUCTS V18 — clean single-row editorial slider.
   Desktop: 4 visible, horizontal slide for the rest.
   Tablet: 2 visible. Mobile: swipe with next-card preview.
   ========================================================= */

.mm-shop-section[data-mm-section="related"] {
  width: min(1190px, calc(100% - 48px));
  margin: 72px auto 82px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.mm-shop-section[data-mm-section="related"] .mm-shop-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 22px;
}



.mm-shop-section[data-mm-section="related"] .mm-shop-section-head h2 {
  margin: 0;
  color: #766c64;
  font-family: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: .72rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.mm-shop-section[data-mm-section="related"] .mm-carousel-controls {
  display: flex !important;
  align-items: center;
  gap: 8px;
  opacity: 1 !important;
}

.mm-shop-section[data-mm-section="related"] .mm-carousel-arrow {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(92,75,65,.18);
  background: #fff;
  color: #3a3430;
  box-shadow: none;
}

.mm-shop-section[data-mm-section="related"] .mm-carousel-arrow:hover:not(:disabled),
.mm-shop-section[data-mm-section="related"] .mm-carousel-arrow:focus-visible:not(:disabled) {
  color: #fff;
  background: #0b6b63;
  border-color: #0b6b63;
}

.mm-shop-section[data-mm-section="related"] .mm-carousel-viewport {
  width: 100%;
  overflow: hidden;
}

.mm-shop-section[data-mm-section="related"] .mm-related-grid.mm-carousel-track {
  display: flex !important;
  flex-wrap: nowrap !important;
  grid-template-columns: none !important;
  gap: 18px;
  width: 100%;
  max-width: none;
  overflow-x: auto !important;
  overflow-y: hidden;
  padding: 0 0 8px;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.mm-shop-section[data-mm-section="related"] .mm-related-grid.mm-carousel-track::-webkit-scrollbar {
  display: none;
}

.mm-shop-section[data-mm-section="related"] .mm-mini-product {
  flex: 0 0 calc((100% - 54px) / 4) !important;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  scroll-snap-align: start;
  color: var(--mm-ink);
  text-decoration: none;
}

.mm-shop-section[data-mm-section="related"] .mm-mini-product:hover {
  border: 0;
  box-shadow: none;
  transform: none;
}

.mm-shop-section[data-mm-section="related"] .mm-mini-product img,
.mm-shop-section[data-mm-section="related"] .mm-mini-placeholder {
  display: block;
  width: 100%;
  height: auto !important;
  aspect-ratio: 1 / 1.08 !important;
  padding: 18px !important;
  box-sizing: border-box;
  object-fit: contain !important;
  object-position: center;
  background: #f3eee7;
  border-radius: 0;
}

.mm-shop-section[data-mm-section="related"] .mm-mini-product img {
  mix-blend-mode: normal !important;
  filter: contrast(1.06) saturate(1.04) brightness(1.02) !important;
  opacity: 1 !important;
}

.mm-shop-section[data-mm-section="related"] .mm-mini-product h3 {
  margin: 11px 0 0;
  color: #302a26;
  font-family: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: .78rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: .015em;
  text-transform: uppercase;
}

.mm-shop-section[data-mm-section="related"] .mm-mini-product p {
  margin: 3px 0 0;
  color: #4c443f;
  font-family: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: .76rem;
  font-weight: 400;
  line-height: 1.3;
}

@media (max-width: 960px) {
  .mm-shop-section[data-mm-section="related"] {
    width: min(100% - 36px, 920px);
    margin-top: 58px;
    margin-bottom: 66px;
  }

  .mm-shop-section[data-mm-section="related"] .mm-mini-product {
    flex-basis: calc((100% - 18px) / 2) !important;
  }

  .mm-shop-section[data-mm-section="related"] .mm-mini-product img,
  .mm-shop-section[data-mm-section="related"] .mm-mini-placeholder {
    aspect-ratio: 1 / 1.04 !important;
    padding: 18px !important;
  }
}

@media (max-width: 680px) {
  .mm-shop-section[data-mm-section="related"] {
    width: 100%;
    margin: 48px 0 56px;
    padding-left: 18px;
  }

  .mm-shop-section[data-mm-section="related"] .mm-shop-section-head {
    margin-right: 18px;
    margin-bottom: 16px;
  }

  .mm-shop-section[data-mm-section="related"] .mm-carousel-controls {
    display: none !important;
  }

  .mm-shop-section[data-mm-section="related"] .mm-related-grid.mm-carousel-track {
    gap: 14px;
    padding-right: 18px;
  }

  .mm-shop-section[data-mm-section="related"] .mm-mini-product {
    flex-basis: 76% !important;
  }

  .mm-shop-section[data-mm-section="related"] .mm-mini-product img,
  .mm-shop-section[data-mm-section="related"] .mm-mini-placeholder {
    aspect-ratio: 1 / 1.08 !important;
    padding: 16px !important;
  }
}

/* =========================================================
   RING SIZE GUIDE V16 — TRUE-SCALE FLOW
   Single source of truth for ring sizing UI.
   ========================================================= */
[data-mm-size-guide] { position: relative !important; z-index: 100 !important; pointer-events: auto !important; touch-action: manipulation !important; cursor: pointer !important; }
#mm-size-modal.mm-modal-backdrop { position: fixed !important; inset: 0 !important; z-index: 60000 !important; display: none !important; place-items: center; padding: 14px; background: rgba(36,31,28,.57); pointer-events: none !important; }
#mm-size-modal.mm-modal-backdrop.is-open { display: grid !important; pointer-events: auto !important; }
#mm-size-modal .mm-modal { pointer-events: auto !important; }
.mm-size-modal-v16 { width: min(860px, calc(100vw - 28px)) !important; max-height: min(94vh, 980px) !important; overflow: auto; border-radius: 24px !important; background: #fffdf9; }
.mm-size-head-v16 { align-items: flex-start; gap: 18px; }
.mm-size-guide-kicker { display:block; margin-bottom:5px; color:var(--mm-teal); font:700 .62rem/1.1 "Instrument Sans",sans-serif; letter-spacing:.14em; text-transform:uppercase; }
.mm-size-pages,.mm-size-page.is-active { display:block; }
.mm-size-page[hidden] { display:none !important; }
.mm-size-choice-intro { padding:10px 0 18px; text-align:center; }
.mm-size-choice-intro p { margin:0; color:var(--mm-muted); font:500 .82rem/1.5 "Instrument Sans",sans-serif; }
.mm-size-choice-grid { display:grid; gap:12px; margin-bottom:12px; }
.mm-size-choice-button,.mm-size-primary-cta { min-height:48px; border:1px solid var(--mm-teal); background:var(--mm-teal); color:#fff; font:700 .67rem/1.2 "Instrument Sans",sans-serif; letter-spacing:.09em; text-transform:uppercase; cursor:pointer; }
.mm-size-choice-button { display:flex; justify-content:center; align-items:center; gap:10px; padding:0 18px; }
.mm-size-choice-icon { font-size:1rem; }
.mm-size-primary-cta { padding:0 22px; }
.mm-size-primary-cta:disabled { opacity:.4; cursor:not-allowed; }
.mm-size-secondary-link { min-height:43px; width:100%; border:1px solid var(--mm-line); background:#fff; color:var(--mm-ink); font:700 .62rem/1.2 "Instrument Sans",sans-serif; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; }
.mm-size-page-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
.mm-size-page-bar>span { color:var(--mm-ink); font:700 .61rem/1.2 "Instrument Sans",sans-serif; letter-spacing:.14em; text-transform:uppercase; }
.mm-size-back-link { border:0; padding:0; background:transparent; color:var(--mm-muted); font:700 .61rem/1.2 "Instrument Sans",sans-serif; letter-spacing:.06em; text-transform:uppercase; cursor:pointer; }
.mm-size-step-screen { display:grid; grid-template-columns:minmax(0,.9fr) minmax(330px,1.1fr); gap:28px; align-items:start; }
.mm-size-step-copy h3,.mm-needs-heading h3 { margin:0 0 10px; color:var(--mm-ink); font:500 clamp(1.55rem,3.8vw,2.25rem)/1.04 "Fraunces",serif; }
.mm-size-step-copy ul { display:grid; gap:9px; margin:0 0 14px; padding-left:18px; color:var(--mm-ink); font:500 .75rem/1.55 "Instrument Sans",sans-serif; }
.mm-size-step-hint { margin:0; color:var(--mm-muted); font:italic 500 .68rem/1.5 "Instrument Sans",sans-serif; }
.mm-size-step-stage { display:grid; gap:14px; min-width:0; }
.mm-size-next-actions { display:flex; justify-content:center; }
.mm-size-next-actions--wide .mm-size-primary-cta { width:100%; }

.mm-needs-heading { margin-bottom:18px; }
.mm-needs-heading>span { display:block; margin-bottom:5px; color:var(--mm-teal); font:700 .6rem/1.2 "Instrument Sans",sans-serif; letter-spacing:.12em; text-transform:uppercase; }
.mm-needs-heading p { margin:0; color:var(--mm-muted); font:500 .74rem/1.5 "Instrument Sans",sans-serif; }
.mm-needs-list { display:grid; gap:10px; margin-bottom:20px; }
.mm-needs-item { display:grid; grid-template-columns:38px 1fr; gap:12px; align-items:center; padding:13px 14px; border:1px solid var(--mm-line); background:#fff; }
.mm-needs-number { display:grid; place-items:center; width:32px; height:32px; border:1px solid var(--mm-line); border-radius:50%; color:var(--mm-teal); font:700 .67rem/1 "Instrument Sans",sans-serif; }
.mm-needs-item strong,.mm-needs-item span { display:block; }
.mm-needs-item strong { margin-bottom:3px; color:var(--mm-ink); font:600 .72rem/1.3 "Instrument Sans",sans-serif; }
.mm-needs-item span { color:var(--mm-muted); font:500 .66rem/1.45 "Instrument Sans",sans-serif; }

.mm-calibration-card-wrap { display:grid; place-items:center; min-height:430px; padding:18px; overflow:visible; border:1px solid var(--mm-line); background:#fbfaf7; }
.mm-calibration-card-v16 { position:relative; flex:none; border:2px solid #302923; border-radius:15px; background:#e7c3c6; box-sizing:border-box; overflow:hidden; }
.mm-calibration-edge-label { position:absolute; top:8px; left:50%; transform:translateX(-50%); padding:3px 6px; border-radius:99px; background:rgba(255,255,255,.83); color:#5b4e46; font:600 .58rem/1 "Instrument Sans",sans-serif; white-space:nowrap; }
.mm-calibration-chip { position:absolute; left:18%; top:24%; width:23%; height:14%; border-radius:7px; background:#e8cd70; }
.mm-calibration-lines { position:absolute; left:18%; right:16%; bottom:16%; display:grid; gap:7px; }
.mm-calibration-lines span { height:2px; background:rgba(65,47,47,.46); }
.mm-calibration-caption { display:grid; gap:3px; text-align:center; }
.mm-calibration-caption strong { color:var(--mm-ink); font:600 .69rem/1.3 "Instrument Sans",sans-serif; }
.mm-calibration-caption span,.mm-calibration-status { color:var(--mm-muted); font:500 .65rem/1.45 "Instrument Sans",sans-serif; }
.mm-scale-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px; align-items:center; color:var(--mm-muted); font:600 .58rem/1 "Instrument Sans",sans-serif; letter-spacing:.05em; text-transform:uppercase; }
.mm-scale-row input[type=range] { width:100%; accent-color:var(--mm-teal); }
.mm-calibration-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.mm-calibration-save,.mm-calibration-reset { min-height:38px; padding:0 14px; font:700 .6rem/1 "Instrument Sans",sans-serif; letter-spacing:.07em; text-transform:uppercase; cursor:pointer; }
.mm-calibration-save { border:1px solid var(--mm-teal); background:var(--mm-teal); color:#fff; }
.mm-calibration-reset { border:1px solid var(--mm-line); background:#fff; color:var(--mm-ink); }

.mm-ring-measure-wrap { position:relative; display:grid; place-items:center; min-height:350px; overflow:hidden; border:1px solid var(--mm-line); background:#fbfaf7; }
.mm-ring-circle-zone { display:grid; place-items:center; }
.mm-screen-ring-circle-v16 { display:grid; place-items:center; border:3px solid var(--mm-teal); border-radius:50%; background:rgba(11,107,99,.025); box-sizing:border-box; will-change:width,height,transform; }
.mm-ring-circle-text { color:var(--mm-muted); font:500 .74rem/1 "Instrument Sans",sans-serif; white-space:nowrap; }
.mm-ring-arrow { position:absolute; display:grid; place-items:center; width:36px; height:36px; border:1px solid var(--mm-line); border-radius:50%; background:#fff; color:var(--mm-ink); cursor:pointer; z-index:2; }
.mm-ring-arrow-up { top:14px; left:50%; transform:translateX(-50%); }
.mm-ring-arrow-down { bottom:14px; left:50%; transform:translateX(-50%); }
.mm-ring-arrow-left { left:14px; top:50%; transform:translateY(-50%); }
.mm-ring-arrow-right { right:14px; top:50%; transform:translateY(-50%); }
.mm-ring-scale-box { display:grid; gap:10px; padding:13px 14px; border:1px solid var(--mm-line); background:#fff; }
.mm-ring-scale-title { display:flex; justify-content:space-between; gap:10px; align-items:center; }
.mm-ring-scale-title strong { color:var(--mm-ink); font:600 .69rem/1.2 "Instrument Sans",sans-serif; }
.mm-ring-scale-title span { color:var(--mm-muted); font:500 .62rem/1.2 "Instrument Sans",sans-serif; }
.mm-ring-scale-row { grid-template-columns:34px auto minmax(0,1fr) auto 34px; }
.mm-ring-scale-row button { width:34px; height:34px; border:1px solid var(--mm-line); border-radius:50%; background:#fff; color:var(--mm-teal); font:600 1.05rem/1 "Instrument Sans",sans-serif; cursor:pointer; }
.mm-ring-current-mm { display:flex; justify-content:space-between; align-items:center; gap:10px; padding-top:8px; border-top:1px solid var(--mm-line); }
.mm-ring-current-mm span { color:var(--mm-muted); font:500 .62rem/1.3 "Instrument Sans",sans-serif; }
.mm-ring-current-mm strong { color:var(--mm-teal); font:600 .77rem/1 "Instrument Sans",sans-serif; }
.mm-screen-sizer-help-v16 { padding:10px 12px; border-left:3px solid var(--mm-gold); background:rgba(198,161,91,.08); color:var(--mm-muted); text-align:center; font:500 .67rem/1.45 "Instrument Sans",sans-serif; }

.mm-strip-visual { position:relative; display:grid; place-items:center; min-height:310px; border:1px solid var(--mm-line); background:#fbfaf7; }
.mm-strip-line { width:7px; min-height:160px; border-radius:999px; background:#efb8be; }
.mm-strip-length { position:absolute; left:calc(50% + 30px); top:50%; transform:translateY(-50%); color:var(--mm-muted); font:500 .8rem/1 "Instrument Sans",sans-serif; }
.mm-strip-control { display:grid; gap:6px; }
.mm-strip-control label { display:flex; justify-content:space-between; color:var(--mm-muted); font:600 .62rem/1.2 "Instrument Sans",sans-serif; letter-spacing:.06em; text-transform:uppercase; }
.mm-strip-control input { width:100%; min-height:44px; padding:0 12px; border:1px solid var(--mm-line); background:#fff; color:var(--mm-ink); font:500 .9rem/1 "Instrument Sans",sans-serif; }

.mm-size-result-page { display:grid; justify-items:center; gap:13px; padding:28px 18px 16px; text-align:center; }
.mm-size-result-kicker { color:var(--mm-teal); font:700 .61rem/1.2 "Instrument Sans",sans-serif; letter-spacing:.14em; text-transform:uppercase; }
.mm-size-result-value { color:var(--mm-teal); font:500 clamp(3rem,10vw,5.4rem)/.95 "Fraunces",serif; }
.mm-size-result-page>p { margin:0; color:var(--mm-muted); font:500 .73rem/1.5 "Instrument Sans",sans-serif; }
.mm-size-result-stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:min(100%,520px); border:1px solid var(--mm-line); background:#fff; }
.mm-size-result-stats>div { display:grid; gap:4px; padding:15px; }
.mm-size-result-stats>div+div { border-left:1px solid var(--mm-line); }
.mm-size-result-stats span { color:var(--mm-muted); font:600 .58rem/1.2 "Instrument Sans",sans-serif; letter-spacing:.08em; text-transform:uppercase; }
.mm-size-result-stats strong { color:var(--mm-ink); font:500 1.2rem/1.1 "Fraunces",serif; }
.mm-size-result-note { display:grid; gap:4px; width:min(100%,580px); padding:12px 14px; border-left:3px solid var(--mm-gold); background:rgba(198,161,91,.08); text-align:left; }
.mm-size-result-note strong { color:var(--mm-ink); font:600 .67rem/1.2 "Instrument Sans",sans-serif; }
.mm-size-result-note span { color:var(--mm-muted); font:500 .65rem/1.45 "Instrument Sans",sans-serif; }
.mm-size-result-actions { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; width:min(100%,620px); margin-top:3px; }
.mm-size-result-actions .mm-size-primary-cta,.mm-size-result-actions .mm-size-secondary-link { width:100%; }

.mm-size-table-wrap-v16 { max-height:min(58vh,540px); overflow:auto; border:1px solid var(--mm-line); border-radius:12px; }
.mm-size-table-wrap-v16 .mm-size-table { margin:0; }
.mm-size-table-wrap-v16 thead { position:sticky; top:0; z-index:2; }

@media(max-width:760px){
  .mm-size-modal-v16 { width:calc(100vw - 16px)!important; max-height:95vh!important; border-radius:18px!important; }
  .mm-size-step-screen { grid-template-columns:1fr; gap:18px; }
  .mm-calibration-card-wrap { min-height:390px; }
  .mm-ring-measure-wrap { min-height:330px; }
  .mm-size-result-actions { grid-template-columns:1fr; }
}
@media(max-width:480px){
  #mm-size-modal.mm-modal-backdrop { padding:6px; }
  .mm-size-modal-v16 { width:calc(100vw - 10px)!important; }
  .mm-size-page-bar { align-items:flex-start; flex-direction:column; }
  .mm-calibration-card-wrap { min-height:360px; padding:12px; }
  .mm-ring-scale-row { grid-template-columns:32px minmax(0,1fr) 32px; }
  .mm-ring-scale-row>span { display:none; }
  .mm-ring-arrow { width:34px; height:34px; }
  .mm-ring-arrow-left { left:9px; }.mm-ring-arrow-right { right:9px; }.mm-ring-arrow-up { top:9px; }.mm-ring-arrow-down { bottom:9px; }
  .mm-size-result-stats { grid-template-columns:1fr; }
  .mm-size-result-stats>div+div { border-left:0; border-top:1px solid var(--mm-line); }
}

/* =========================================================
   RING SIZE GUIDE V17 — ACCURACY HIERARCHY
   ========================================================= */
.mm-size-choice-button {
  position: relative;
  justify-content: flex-start;
  text-align: left;
}

.mm-size-choice-copy {
  display: grid;
  gap: 3px;
  flex: 1 1 auto;
}

.mm-size-choice-copy strong {
  color: inherit;
  font: 700 .68rem/1.25 "Instrument Sans", sans-serif;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.mm-size-choice-copy small {
  color: inherit;
  font: 500 .61rem/1.3 "Instrument Sans", sans-serif;
  letter-spacing: .02em;
  text-transform: none;
  opacity: .82;
}

.mm-size-choice-button--estimate {
  border-color: var(--mm-line);
  background: #fff;
  color: var(--mm-ink);
}

.mm-method-pill {
  flex: 0 0 auto;
  padding: 5px 7px;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 999px;
  color: #fff;
  font: 700 .52rem/1 "Instrument Sans", sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.mm-method-badge {
  display: inline-flex;
  width: fit-content;
  margin: 0 0 10px;
  padding: 6px 9px;
  border-radius: 999px;
  font: 700 .56rem/1 "Instrument Sans", sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.mm-method-badge--recommended {
  background: rgba(11,107,99,.10);
  color: var(--mm-teal);
}

.mm-method-badge--estimate {
  background: rgba(198,161,91,.13);
  color: #7b5f28;
}

@media (max-width: 520px) {
  .mm-size-choice-button {
    align-items: flex-start;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .mm-method-pill {
    margin-left: auto;
  }
}

/* =========================================================
   PRODUCT DETAIL BOTTOM ZONE V19
   Single owner for the final product-page sections.
   Order: You May Also Like -> Reviews -> Recently Viewed -> Trust Strip (absolute last).
   ========================================================= */
.mm-product-bottom-zone {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
}

.mm-product-bottom-zone > .mm-trust-strip,
.mm-product-bottom-zone > .mm-shop-section {
  position: relative;
}

.mm-product-bottom-zone > [data-mm-bottom-section="related"] {
  margin-bottom: 0;
}

body.product-detail-page .mm-product-bottom-zone:last-of-type {
  margin-bottom: 0;
}

/* =========================================================
   V39 RELATED PRODUCTS — SOFTER "YOU MAY ALSO LIKE" VISUALS
   Reduce the harsh bright image tile background on mobile and
   give the related-product cards a softer, more comfortable
   jewelry-editorial presentation.
   ========================================================= */
.mm-shop-section[data-mm-section="related"] .mm-mini-product img,
.mm-shop-section[data-mm-section="related"] .mm-mini-placeholder {
  background: #ece5db !important;
  border: 1px solid rgba(118, 108, 100, 0.10) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.50) !important;
}

@media (max-width: 680px) {
  .mm-shop-section[data-mm-section="related"] .mm-mini-product img,
  .mm-shop-section[data-mm-section="related"] .mm-mini-placeholder {
    background: #e9e1d6 !important;
    padding: 14px !important;
  }

  .mm-shop-section[data-mm-section="related"] .mm-mini-product h3 {
    margin-top: 10px !important;
  }

  .mm-shop-section[data-mm-section="related"] .mm-mini-product p {
    margin-top: 4px !important;
    color: #5c534d !important;
  }
}


/* FINAL FLOATING BUTTON ALIGNMENT PATCH */
/* Assistance and Social launchers now share the same corner system */
.mm-service-dock {
  right: 18px !important;
  top: auto !important;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px) + 60px) !important;
  transform: none !important;
  width: 50px !important;
  height: 50px !important;
}

.mm-service-toggle {
  width: 50px !important;
  height: 50px !important;
  opacity: 1 !important;
}

.mm-service-toggle svg {
  width: 21px !important;
  height: 21px !important;
}

/* Prevent overlap with Marry Me social launcher */
.mm-social-widget {
  right: 16px !important;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
}

@media (max-width: 640px) {
  .mm-service-dock {
    right: 16px !important;
    bottom: calc(124px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .mm-social-widget {
    right: 16px !important;
    bottom: calc(182px + env(safe-area-inset-bottom, 0px)) !important;
  }
}


/* v18 floating widget correction */
.mm-service-dock {
  top: auto !important;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  transform: none !important;
}
.mm-service-toggle {
  width: 50px !important;
  height: 50px !important;
}
@media (max-width:640px){
  .mm-service-dock {
    right: 16px !important;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
  }
}


/* MM SERVICE VISIBILITY V19 */
.mm-service-dock {
  visibility: visible !important;
  opacity: 1 !important;
}


/* FINAL ASSISTANCE ALIGNMENT V20 */
.mm-service-dock {
  right: 18px !important;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  top: auto !important;
  transform: none !important;
  width: 50px !important;
  height: 50px !important;
}
.mm-service-toggle {
  width: 50px !important;
  height: 50px !important;
}


/* ASSISTANCE FORCE RESTORE V21 */
.mm-service-dock {
  display: block !important;
  position: fixed !important;
  visibility: visible !important;
  opacity: 1 !important;
  right: 16px !important;
  bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
  left: auto !important;
  top: auto !important;
  width: 50px !important;
  height: 50px !important;
  z-index: 99998 !important;
  pointer-events: auto !important;
}

.mm-service-toggle {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 50px !important;
  height: 50px !important;
  pointer-events: auto !important;
}

@media (min-width: 701px) {
  .mm-service-dock {
    bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

@media (max-width: 640px) {
  .mm-service-dock {
    right: 16px !important;
    /* Same height as product-detail-page.mm-has-mobile-buybar below, so the
       icon doesn't jump position when navigating from a catalog page into
       a product page (which reserves space for the fixed Buy Now bar). */
    bottom: calc(124px + env(safe-area-inset-bottom, 0px)) !important;
  }
}


/* PREMIUM WISHLIST V25 */
.nav-wishlist {
  position: relative;
  color: #0b746b;
  transition: transform .25s ease, color .25s ease;
}

.nav-wishlist:hover {
  color: #b89253;
  transform: translateY(-2px);
}

.nav-wishlist svg {
  width: 22px;
  height: 22px;
}

.nav-wishlist-count {
  position: absolute;
  top: -8px;
  right: -10px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #b89253;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 4px 12px rgba(184,146,83,.35);
}

.mm-enh-btn-secondary[data-mm-detail-favorite] {
  border-color: rgba(11,116,107,.25);
  color: #0b746b;
  background: linear-gradient(180deg,#fffdf9,#f8f4ec);
  transition: all .25s ease;
}

.mm-enh-btn-secondary[data-mm-detail-favorite]:hover {
  border-color: #b89253;
  transform: translateY(-2px);
}

.mm-enh-btn-secondary[data-mm-detail-favorite].is-active {
  background: #0b746b;
  border-color: #0b746b;
  color: #fff;
  box-shadow: 0 10px 25px rgba(11,116,107,.25);
}

.mm-enh-btn-secondary[data-mm-detail-favorite].is-active::first-letter {
  color: #f4d38c;
}


/* Wishlist/bag badge + heart icon styling now lives in one place:
   css/figma-refresh.css (search "SINGLE SOURCE OF TRUTH"). Removed five
   layered patches here (V35/V38/V40/V41/V47) that all targeted classes
   never present in any page's HTML (.mm-nav-favorite, .mm-nav-heart-wrap,
   .nav-wishlist, .nav-utility-icons, .mm-wishlist-svg) or duplicated the
   live .mm-wishlist-link/.mm-wishlist-count/.mm-wishlist-heart-text rules.

/* Luxury saved-heart treatment */
.product-item .mm-icon-btn.is-active[data-mm-favorite] {
  background: rgba(198,161,91,.12);
  border-color: rgba(198,161,91,.75);
  color: #b8873c;
  box-shadow: 0 8px 22px rgba(184,135,60,.18);
}

.product-item .mm-icon-btn.is-active[data-mm-favorite] svg {
  fill: currentColor;
  stroke: currentColor;
}

.product-item .mm-icon-btn.is-active[data-mm-favorite]:hover {
  background: rgba(198,161,91,.18);
}

/* ---- Compact add-to-cart morph for the fixed mobile bar ----
   Reuses the same states/timeline as the in-page button (commerce.js
   drives both), but this button always stays the width of its grid
   track, so only the icon and color morph in place, no width slide. */
body.product-detail-page .mm-mobile-buybar .mm-mobile-add-btn.mm-atc-btn,
.mm-mobile-buybar .mm-mobile-add-btn.mm-atc-btn {
  width: 100% !important;
  min-width: 0 !important;
}
body.product-detail-page .mm-mobile-buybar .mm-mobile-add-btn.mm-atc-btn[data-state="cart"],
body.product-detail-page .mm-mobile-buybar .mm-mobile-add-btn.mm-atc-btn[data-state="truck"],
body.product-detail-page .mm-mobile-buybar .mm-mobile-add-btn.mm-atc-btn[data-state="done"],
.mm-mobile-buybar .mm-mobile-add-btn.mm-atc-btn[data-state="cart"],
.mm-mobile-buybar .mm-mobile-add-btn.mm-atc-btn[data-state="truck"],
.mm-mobile-buybar .mm-mobile-add-btn.mm-atc-btn[data-state="done"] {
  padding: 0 6px !important;
}
.mm-mobile-buybar .mm-mobile-add-btn.mm-atc-btn[data-state="done"] {
  background: var(--mm-success, #376e55) !important;
  border-color: var(--mm-success, #376e55) !important;
}

/* FLOATING CIRCLES — MOBILE SIZE, TRUE FINAL (placed last on purpose: the
   .mm-service-dock/.mm-social-widget block above has many equal-specificity
   50px declarations scattered through this file's history; being last in
   source order is what makes this one win the tie). */
@media (max-width: 700px) {
  .mm-service-dock,
  .mm-service-toggle {
    width: 40px !important;
    height: 40px !important;
  }
  .mm-service-toggle svg {
    width: 18px !important;
    height: 18px !important;
  }
  .mm-social-widget__toggle {
    width: 40px !important;
    height: 40px !important;
  }
  .mm-social-widget__toggle svg {
    width: 18px !important;
    height: 18px !important;
  }
  /* .mm-service-dock is a positioned wrapper the same size as the circle
     it holds; without this the 40px toggle sits centered inside the old
     50px box, throwing its right edge 5px out of line with the chat
     bubble below it. */
  .mm-service-menu {
    right: 51px !important;
  }
}

/* Fade the assistance/chat circles out while actively scrolling a catalog
   page (installFloatingFadeOnScroll() in enhancements.js toggles the class
   on <body>), so they don't sit over product photos while browsing. They
   fade back in ~500ms after scrolling stops. Never fades an open menu/panel
   away mid-interaction. */
.mm-service-dock,
.mm-social-widget {
  transition: opacity .25s ease;
}
body.mm-is-scrolling .mm-service-dock:not(.is-open),
body.mm-is-scrolling .mm-social-widget:not(.is-open) {
  opacity: .22 !important;
  pointer-events: none !important;
}

/* Fade-and-rise entrance the first time a card/section scrolls into view
   (installScrollReveal() in enhancements.js). The class is only ever added
   by JS right before observing, so if JS fails content just stays visible
   at its normal opacity instead of getting stuck hidden. */
.mm-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 600ms cubic-bezier(0, 0, .3, 1), transform 600ms cubic-bezier(0, 0, .3, 1);
}
.mm-reveal.mm-revealed {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .mm-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Whole-page entrance the moment a page opens (installPageEnter() in
   enhancements.js) — separate from .mm-reveal above, which only fires as
   something scrolls into view. Targets one content wrapper per page (main
   content root, not <body>, so fixed nav/floating buttons never inherit a
   transform and lose their fixed positioning). */
.mm-page-enter {
  opacity: 0;
  transform: translateY(14px);
}
.mm-page-enter.mm-page-entered {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 600ms cubic-bezier(0, 0, .3, 1), transform 600ms cubic-bezier(0, 0, .3, 1);
}
@media (prefers-reduced-motion: reduce) {
  .mm-page-enter {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Saved-to-wishlist moment: a quick heart bounce + a few gold sparks,
   same visual language as the Buy Now gem burst (commerce.css) so it reads
   as one signature "sparkle" motif rather than two unrelated animations.
   Only plays when a heart turns ON (heartBurst() in enhancements.js). */
.mm-heart-pop {
  position: relative;
  animation: mmHeartPop 480ms cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes mmHeartPop {
  0% { transform: scale(1); }
  35% { transform: scale(1.35); }
  60% { transform: scale(.92); }
  100% { transform: scale(1); }
}
.mm-heart-burst {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.mm-heart-spark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--mm-gold, #b8905a);
  opacity: 0;
}
.mm-heart-spark--a { animation: mmHeartSparkA 550ms ease-out forwards; }
.mm-heart-spark--b { animation: mmHeartSparkB 550ms ease-out 40ms forwards; }
.mm-heart-spark--c { animation: mmHeartSparkC 550ms ease-out 80ms forwards; }
.mm-heart-spark--d { animation: mmHeartSparkD 550ms ease-out 20ms forwards; }
@keyframes mmHeartSparkA {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% - 16px), calc(-50% - 16px)) scale(1); }
}
@keyframes mmHeartSparkB {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + 16px), calc(-50% - 16px)) scale(1); }
}
@keyframes mmHeartSparkC {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% - 16px), calc(-50% + 16px)) scale(1); }
}
@keyframes mmHeartSparkD {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + 16px), calc(-50% + 16px)) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .mm-heart-pop, .mm-heart-spark {
    animation: none !important;
  }
}