/* Moonlit — PDP. Figma 19:7620 (gallery 760 | info 512, gap 56, pb 96) / 19:11483 (mobile). */

.ml-pdp__crumb { padding-block: 20px; }
.ml-pdp__main { display: grid; grid-template-columns: minmax(0, 760fr) minmax(0, 512fr); gap: 56px; align-items: start; padding-bottom: 96px; }

/* ---------------------------------------------------------------- gallery */
.ml-pdp__gal { position: sticky; top: calc(var(--ml-header-sticky-h, 0px) + 24px); transition: top .2s ease; }
.ml-gal { display: flex; flex-direction: column; gap: 12px; }
.ml-gal__stage { position: relative; aspect-ratio: 760 / 620; overflow: hidden; background: var(--ml-image); }
.ml-gal__slide { position: absolute; inset: 0; opacity: 0; transition: opacity .35s ease; }
.ml-gal__slide.is-on { opacity: 1; }
.ml-gal__slide img, .ml-gal__slide video { width: 100%; height: 100%; object-fit: cover; }
.ml-gal__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,22,38,.55) 0%, rgba(14,22,38,.15) 100%); opacity: 0; transition: opacity .6s ease; pointer-events: none; }
.ml-gal__glints { position: absolute; inset: 0; pointer-events: none; }
.ml-gal__glints i { position: absolute; border-radius: 50%; background: #fff; box-shadow: 0 0 8px 2px rgba(255,255,255,.9); opacity: 0; transition: opacity .6s ease; }
.ml-gal__glints i:nth-child(1) { left: 51%; top: 30%; width: 8px; height: 8px; }
.ml-gal__glints i:nth-child(2) { left: 45.5%; top: 40%; width: 5px; height: 5px; }
.ml-gal__glints i:nth-child(3) { left: 59%; top: 41.5%; width: 6px; height: 6px; }
.ml-gal__glints i:nth-child(4) { left: 55%; top: 48.5%; width: 4px; height: 4px; }
.ml-gal.is-night .ml-gal__veil { opacity: 1; }
.ml-gal.is-night .ml-gal__glints i { opacity: 1; animation: ml-glint 2.4s ease-in-out infinite; }
.ml-gal.is-night .ml-gal__glints i:nth-child(2n) { animation-delay: 1.1s; }
@keyframes ml-glint { 0%, 100% { opacity: .2; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.2); } }
.ml-gal__badge { position: absolute; top: 20px; left: 20px; z-index: 2; padding: 5px 10px; background: var(--ml-sale); color: var(--ml-inverse); }
.ml-gal__light { position: absolute; left: 20px; bottom: 20px; z-index: 2; display: flex; padding: 4px; background: var(--ml-white); border-radius: 99px; box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.ml-gal__light button { display: inline-flex; align-items: center; gap: 6px; height: 31px; padding: 0 14px; border-radius: 99px; color: var(--ml-text-2); transition: background .3s ease, color .3s ease; }
.ml-gal__light button.is-on { background: var(--ml-midnight); color: var(--ml-inverse); }
.ml-gal__3db, .ml-gal__3dx { position: absolute; right: 20px; bottom: 20px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; height: 33px; padding: 0 14px; background: var(--ml-white); color: var(--ml-text); border-radius: 99px; }
.ml-gal__3db:hover, .ml-gal__3dx:hover { background: var(--ml-moon); }
/* PHASE B Try On sits left of the 3D pill (RPS §3) */
.ml-gal__try { position: absolute; right: 152px; bottom: 20px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; height: 33px; padding: 0 14px; background: var(--ml-midnight); color: var(--ml-inverse); border-radius: 99px; }
.ml-gal__try:hover { background: var(--ml-indigo); }
.ml-gal.is-3d .ml-gal__try { visibility: hidden; }
.ml-gal__cap { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); z-index: 1; white-space: nowrap; }
.ml-gal__3d { position: absolute; inset: 0; z-index: 2; background: var(--ml-image); }
.ml-gal__3d iframe { width: 100%; height: 100%; border: 0; }
.ml-gal.is-3d .ml-gal__light, .ml-gal.is-3d .ml-gal__cap, .ml-gal.is-3d .ml-gal__badge { visibility: hidden; }
.ml-gal__thumbs { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 24px) / 3); gap: 12px; overflow-x: auto; scrollbar-width: none; }
.ml-gal__thumbs::-webkit-scrollbar { display: none; }
.ml-gal__th { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--ml-image); border: 1px solid transparent; transition: border-color .3s ease; }
.ml-gal__th img { width: 100%; height: 100%; object-fit: cover; }
.ml-gal__th.is-on { border-color: var(--ml-line-strong); }
.ml-gal__play { position: absolute; inset: 0; display: grid; place-content: center; background: rgba(14,22,38,.3); color: var(--ml-inverse); }
.ml-gal__dots { display: none; }

@media (max-width: 1023px) {
  .ml-pdp__main { grid-template-columns: 1fr; gap: 32px; }
  .ml-pdp__gal { position: static; }
}
@media (max-width: 767px) {
  .ml-pdp__crumb { padding-block: 14px; }
  /* full-bleed photo: this grid is also .ml-wrap (its own gutter padding), so a negative margin alone only slid the
     photo left (0 → 343 of 375). No margin, no padding: the photo spans the screen, the info column keeps its gutter. (30 Oct) */
  .ml-pdp__main { margin-inline: 0; padding-inline: 0; gap: 24px; padding-bottom: 48px; }
  .ml-pdp__info { padding-inline: var(--ml-gutter); }
  .ml-gal__stage { aspect-ratio: 390 / 440; }
  .ml-gal__thumbs { display: none; }
  .ml-gal__dots { display: flex; justify-content: center; gap: 6px; }
  .ml-gal__dot { width: 6px; height: 3px; background: var(--ml-line); }
  .ml-gal__dot.is-on { width: 22px; background: var(--ml-text); }
  .ml-gal__cap { display: none; }
  .ml-gal__light { left: 16px; bottom: 16px; }
  .ml-gal__3db, .ml-gal__3dx { right: 16px; bottom: 16px; }
  .ml-gal__try { right: auto; left: 16px; bottom: 62px; }
}

/* ---------------------------------------------------------------- info (gap 22) */
.ml-pdp__info { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.ml-pdp__h { font-size: clamp(26px, 2.4vw, 36px); line-height: 1.12; }   /* 30 Oct (user: "text size thoda chota kar do"): was clamp(32px, 3.2vw, 46px) — long store titles ran to five lines */
.ml-pdp__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ml-rate { display: inline-flex; align-items: center; gap: 10px; }
.ml-pdp__price { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.ml-pricebox--lg { column-gap: 10px; }
.ml-pricebox--lg .ml-price { font-family: var(--ml-display); font-weight: 400; font-size: 40px; line-height: 1; }
.ml-pricebox--lg .ml-price-was, .ml-pricebox--lg .ml-price-save { font-size: 15px; line-height: 1.6; }
.ml-pdp__price > .ml-caption { padding-bottom: 4px; }
.ml-pdp__affirm { padding: 12px 14px; background: var(--ml-mist); }
.ml-pdp__affirm a { color: var(--ml-accent); }
.ml-gpnote { margin-top: -10px; }
.ml-pdp__opts { display: flex; flex-direction: column; gap: 22px; }

/* option rows — Label + value (text-2); tiles like Figma "Shape · Oval": 1px line, selected 1.5px strong */
.ml-opt__h .ml-label { color: var(--ml-text); }
.ml-opt__tiles { display: flex; gap: 8px; flex-wrap: wrap; }
.ml-otile { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 56px; padding: 9px 12px 7px; background: var(--ml-white); border: 1px solid var(--ml-line); color: var(--ml-text); transition: border-color .35s ease-out; }
.ml-otile:hover { border-color: var(--ml-icon); }
.ml-otile.is-on { border: 1.5px solid var(--ml-line-strong); }
.ml-otile__m { width: 40px; height: 40px; }
.ml-otile__m img { width: 100%; height: 100%; object-fit: cover; }
.ml-opt__guide { margin-left: auto; }
.ml-select { width: 100%; max-width: 400px; height: 48px; padding: 0 14px; border: 1px solid var(--ml-line); background: var(--ml-white); font-size: 13px; color: var(--ml-text); }
.ml-field { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--ml-line); background: var(--ml-white); color: var(--ml-text); font: inherit; font-size: 13px; }
.ml-field:focus-visible { outline: 1.5px solid var(--ml-lunar); outline-offset: -1px; }

/* CTAs */
.ml-pdp__add { display: flex; flex-direction: column; gap: 10px; }
.ml-pdp__cta2 { min-height: 50px; }
.ml-pdp__qrow { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 4px; }
.ml-pdp__qty { display: inline-flex; align-items: center; border: 1px solid var(--ml-line); background: var(--ml-white); }
.ml-pdp__qty .ml-qty__b { width: 44px; height: 44px; font-size: 18px; color: var(--ml-text); }
.ml-qty__i { width: 48px; height: 44px; border: 0; text-align: center; font: inherit; font-size: 14px; background: transparent; color: var(--ml-text); -moz-appearance: textfield; }
.ml-qty__i::-webkit-outer-spin-button, .ml-qty__i::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ml-pdp__err { color: var(--ml-sale); }

/* ships by */
.ml-pdp__ship { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--ml-line); }
.ml-pdp__ship > svg { color: var(--ml-icon); flex: 0 0 auto; }
.ml-pdp__ship strong, .ml-pdp__ship [data-ml-ship-by] { font-weight: 600; }

/* actions row */
.ml-pdp__acts { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.ml-pdp__act { display: inline-flex; align-items: center; gap: 6px; color: var(--ml-text); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: color .3s ease, text-decoration-color .3s ease; }
.ml-pdp__act:hover { color: var(--ml-accent); text-decoration-color: currentColor; }
.ml-pdp__act[aria-pressed='true'] { color: var(--ml-accent); }
.ml-pdp__act[aria-pressed='true'] svg path { fill: currentColor; }
.ml-pdp__rewards { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--ml-midnight); color: var(--ml-inverse); }
.ml-pdp__rewards svg { color: var(--ml-lunar); }

.ml-pdp__acc .ml-acc:first-child { border-top: 0; }
.ml-pdp__acc { border-top: 1px solid var(--ml-line); }
.ml-pdp__desc { margin-bottom: 14px; }
.ml-pdp__lead { margin: 0 0 18px; color: var(--ml-text-2); max-width: 60ch; }
.ml-opt__more { margin-top: 10px; }
.ml-help { margin: -6px 0 18px; }
.ml-help summary { cursor: pointer; list-style: none; display: inline-flex; min-height: 32px; align-items: center; }
.ml-help summary::-webkit-details-marker { display: none; }
.ml-help__b { padding: 12px 14px; margin-top: 6px; background: var(--ml-mist); }
.ml-help__b p { margin: 0 0 8px; } .ml-help__b p:last-child { margin: 0; }
.ml-pdp__desc p { margin: 0 0 10px; }

.ml-badges { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ml-badges li { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 12px 6px; background: var(--ml-mist); }
.ml-badges img { width: 28px; height: 28px; object-fit: contain; }
.ml-badges svg { color: var(--ml-icon); }
.ml-badges em { font-style: normal; color: var(--ml-text-2); }
@media (max-width: 1199px) { .ml-badges { grid-template-columns: repeat(2, 1fr); } }   /* 31 Oct responsive pass: at 1024 the buy column is ~344px — four columns broke every label into 3–4 lines */

.ml-specs { margin: 0; }
.ml-specs__r { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: 10px 0; border-bottom: 1px solid var(--ml-line); }
.ml-specs__r dt { color: var(--ml-text-2); }
.ml-specs__r dd { margin: 0; text-align: right; color: var(--ml-text); }

/* ---------------------------------------------------------------- matching band (mist, p64/56) */
.ml-pband { background: var(--ml-mist); }
.ml-pband__in { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding-block: 64px; }
.ml-pband__c { display: flex; flex-direction: column; gap: 10px; max-width: 718px; }
.ml-pband__h { font-family: var(--ml-display); font-weight: 300; font-size: clamp(28px, 2.8vw, 40px); line-height: 1.05; letter-spacing: -0.005em; }
.ml-pband__cards { display: flex; gap: 16px; flex: 0 0 auto; }
.ml-pband__card { display: flex; align-items: center; gap: 14px; padding: 12px; width: 280px; background: var(--ml-white); border: 1px solid var(--ml-line); transition: border-color .35s ease-out; }
.ml-pband__card:hover { border-color: var(--ml-lunar); }
.ml-pband__card .ml-media { width: 84px; height: 84px; flex: 0 0 84px; }
.ml-pband__t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ml-pband__t strong { font-family: var(--ml-display); font-weight: 400; font-size: 20px; line-height: 1.1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ml-pband__t em { font-style: normal; }
@media (max-width: 1023px) { .ml-pband__in { flex-direction: column; align-items: flex-start; } }
@media (max-width: 767px) {
  .ml-pband__in { padding-block: 48px; gap: 20px; }
  .ml-pband__cards { flex-direction: column; width: 100%; gap: 10px; }
  .ml-pband__card { width: 100%; }
}

/* ---------------------------------------------------------------- feature tiles */
.ml-pfeat { background: var(--ml-line); }
.ml-pfeat__g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; }
.ml-pfeat__g a { display: flex; flex-direction: column; gap: 10px; min-height: 173px; padding: 40px 32px; background: var(--ml-midnight); color: var(--ml-inverse); }
.ml-pfeat__g svg { color: var(--ml-lunar); }
.ml-pfeat__g strong { font-family: var(--ml-display); font-weight: 300; font-size: 26px; line-height: 1.1; }
.ml-pfeat__g span { color: var(--ml-muted-dark); }
.ml-pfeat__g > li { display: grid; }   /* 31 Oct responsive pass: at 1024 "Lab-grown & natural" wrapped and its tile grew to 221px while the others stayed at 173 — the <li> stretched but the <a> inside did not, so the grid's line colour showed under three tiles. As a grid child the link fills its cell. */
@media (max-width: 1023px) { .ml-pfeat__g { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) { .ml-pfeat__g { grid-template-columns: 1fr; } .ml-pfeat__g a { min-height: 0; padding: 32px 16px; } }

/* related rail spacing on the PDP */
.ml-rail-sec { padding-block: 0 96px; }
@media (max-width: 767px) { .ml-rail-sec { padding-block: 0 48px; } }

/* ---------------------------------------------------------------- mobile sticky bar */
.ml-stick { position: fixed; left: 0; right: 0; bottom: 0; z-index: 65; display: none; align-items: center; gap: 12px; padding: 10px 16px; background: var(--ml-white); border-top: 1px solid var(--ml-line); }
.ml-stick__t { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.ml-stick__n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-stick__b { flex: 0 0 auto; padding-inline: 22px; }
@media (max-width: 767px) { .ml-stick.is-on { display: flex; } body.ml-stick-on .ml-call { bottom: 84px; } body.ml-stick-on .ml-top-btn { bottom: 84px; /* CONTACT-HIDDEN call button: was 140px (above Call now) */ } }

/* ---------------------------------------------------------------- Try On */
.ml-tryon { position: fixed; inset: 0; z-index: 96; display: grid; place-items: center; padding: 20px; background: rgba(10,15,31,.72); }
.ml-tryon__box { position: relative; width: min(560px, 100%); background: var(--ml-white); padding: 18px; }
.ml-tryon__x { position: absolute; top: 10px; right: 10px; z-index: 1; }
.ml-tryon__f { aspect-ratio: 3 / 4; background: var(--ml-image); }
.ml-tryon__f iframe { width: 100%; height: 100%; border: 0; }
.ml-tryon__n { margin-top: 10px; text-align: center; }

/* ---------------------------------------------------------------- education / 4Cs (PHASE B sections) */
.ml-edu { padding-block: 84px; background: var(--ml-mist); }
.ml-edu__in { display: grid; gap: 40px; }
.ml-edu__h { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; margin-bottom: 40px; }
.ml-edu__c .ml-caption { color: var(--ml-accent); }
.ml-edu__g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.ml-edu__c { display: flex; flex-direction: column; gap: 10px; padding: 28px 24px; background: var(--ml-white); border: 1px solid var(--ml-line); }
.ml-4cs { padding-block: 84px; }
.ml-4cs__h { margin-bottom: 40px; }
.ml-4cs__g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-bottom: 28px; }
.ml-4cs__c { display: flex; flex-direction: column; gap: 8px; padding-top: 18px; border-top: 1px solid var(--ml-line-strong); }
.ml-4cs__k { color: var(--ml-accent); }
@media (max-width: 1023px) { .ml-edu__g, .ml-4cs__g { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) { .ml-edu, .ml-4cs { padding-block: 56px; } .ml-edu__g, .ml-4cs__g { grid-template-columns: 1fr; gap: 16px; } }

/* 3D / Try On branding (playbook C4): the viewer's own corner mark (bottom-left) sits under a Moonlit
   wordmark patch, and a loading cover hides the blank viewer until the model has had time to draw. */
.ml-tryon__f { position: relative; }   /* .ml-gal__3d is already absolute — leave it */
.ml-gal__3d .ml-3dbadge, .ml-tryon__f .ml-3dbadge {
  position: absolute; left: 0; bottom: 0; z-index: 3; display: flex; align-items: center; gap: 6px;
  min-width: 150px; height: 48px; padding: 0 14px; background: var(--ml-white); color: var(--ml-text);
  pointer-events: none;
}
.ml-3dbadge svg { width: 16px; height: 16px; }
.ml-3dbadge .ml-logo__word { font-family: var(--ml-display); font-size: 15px; letter-spacing: .06em; }

/* information column (playbook C6): description folded to four lines, Save ↔ Saved */
.ml-pdp__lead { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.ml-pdp__leadt { color: var(--ml-text-2); }
.ml-pdp__leadt p { margin: 0 0 10px; }
.ml-pdp__leadt > :last-child { margin-bottom: 0; }
.ml-pdp__lead.is-fold:not(.is-open) .ml-pdp__leadt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
.ml-pdp__lead.is-fold:not(.is-open) .ml-pdp__leadt p { display: inline; margin: 0; }
.ml-pdp__lead.is-fold:not(.is-open) .ml-pdp__leadt p + p::before { content: ' '; }
.ml-pdp__more { color: var(--ml-text); }
.ml-pdp__saved { display: none; }
.ml-pdp__act[aria-pressed='true'] .ml-pdp__save { display: none; }
.ml-pdp__act[aria-pressed='true'] .ml-pdp__saved { display: inline; }
.ml-rail-more { margin-top: 28px; text-align: center; }

/* playbook C3: one fixed photo box in the store's own photo shape. Every store photo is 1600×1200 (4:3) on white;
   the 760:620 box (390:440 on phones) with cover cut the sides off every piece, and the thumbnails were square crops
   on the image tint. Box, thumbnails and the 3D view share 4:3, white, the whole photo shown. */
.ml-gal__stage { aspect-ratio: 4 / 3; background: var(--ml-white); }
.ml-gal__slide img, .ml-gal__slide video { object-fit: contain; }
.ml-gal__th { aspect-ratio: 4 / 3; background: var(--ml-white); }
.ml-gal__th img { object-fit: contain; }
/* PDP video (pdp-video-autoplay-rule.md): the slide video sits like a photo; the thumb video is the video's own still */
.ml-gal__slide video { display: block; }
.ml-gal__th video { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; }
@media (max-width: 767px) { .ml-gal__stage { aspect-ratio: 4 / 3; } }
/* thumbnails as a small strip (user, 2026-10-23 "these images are too big"): each was a third of the gallery, ~245px
   wide, as big as a second photo. Now 96 × 72 (4:3), as many as fit, the row scrolls sideways when there are more. */
.ml-gal__thumbs { grid-auto-columns: 96px; gap: 10px; }
.ml-gal__th { border-color: var(--ml-line); }
.ml-gal__th:hover { border-color: var(--ml-icon); }
.ml-gal__th.is-on { border-color: var(--ml-line-strong); }
/* trust badges as the store has them (user, 2026-10-23): the store's own icon, 40px, and its title as written */
.ml-badges img { width: 40px; height: 40px; }
.ml-badges__t { font-size: 12px; line-height: 1.4; color: var(--ml-text); }

/* 30 Oct 2026 (user: "ye jo 3 button he vo card me he usko niche lelo"): the Daylight | Moonlight pill and the
   View in 3D / Photos / Try on buttons sit in a row UNDER the photo, not over it — same look, no longer absolute */
.ml-gal__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ml-gal__bar-r { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.ml-gal__bar .ml-gal__light, .ml-gal__bar .ml-gal__3db, .ml-gal__bar .ml-gal__3dx, .ml-gal__bar .ml-gal__try { position: static; }
.ml-gal__bar .ml-gal__light { box-shadow: none; border: 1px solid var(--ml-line); }
.ml-gal__bar .ml-gal__3db, .ml-gal__bar .ml-gal__3dx { border: 1px solid var(--ml-line); }
.ml-gal__bar [hidden] { display: none; }
/* phones: the PDP grid is pulled out by the gutter (full-bleed photo), so the row takes the gutter back */
@media (max-width: 767px) { .ml-gal__bar { padding-inline: var(--ml-gutter); } }

/* 30 Oct 2026 (user: "in dono ke bich me thodi space rakh do"): the midnight feature tiles and the promise strip
   under them were flush — the strip now keeps the same breathing room above it that it keeps below it */
.shopify-section:has(.ml-pfeat) + .shopify-section .ml-trust { padding-top: clamp(48px, 5.556vw, 80px); }

/* 30 Oct 2026 (user: "thodi design sahi ho sake to kar do", screenshot of the buy column): same look, even rhythm.
   Scoped to the PDP's info column, so the ring builder's selects and helpers stay as they are. */
.ml-pdp__info .ml-pdp__meta:not(:has(*)),                 /* no rating, no SKU: an empty row added a second 22px gap */
.ml-pdp__info .ml-pdp__opts > .ml-v1:empty { display: none; }   /* the picker's spare slot, empty here, did the same before Quantity */
.ml-pdp__info .ml-select { max-width: none; }              /* the length / size select spans the column like Add to bag */
.ml-pdp__info .ml-opt[data-ml-input] { position: relative; }
.ml-pdp__info .ml-opt[data-ml-input] > .ml-help { margin: 0; }
.ml-pdp__info .ml-opt[data-ml-input] > .ml-help > summary { position: absolute; top: -8px; right: 0; }   /* "Length guide" on the label's line */
.ml-pdp__info .ml-opt[data-ml-input] > .ml-help:not([open]) { display: contents; }
.ml-pdp__info .ml-opt[data-ml-input] > .ml-help > .ml-help__b { margin-top: 10px; }   /* clear of the link's underline */
@media (max-width: 1023px), (pointer: coarse) { .ml-pdp__info .ml-opt[data-ml-input] > .ml-help > summary { top: -14px; } }   /* 44px touch link, centred on the label */
.ml-pdp__info .ml-v1__g > .ml-opt__h + p.ml-muted { display: none; }   /* one value only: the label line already names it */
.ml-pdp__info .ml-pdp__qrow { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 4px; }   /* label over the stepper, like every option */

/* ---------------------------------------------------------------- phone PDP tidy (31 Oct, user's iPhone screenshots)
   1. Total diamond weight: 11 tiles wrapped 5 + 5 + 1 with a dead strip on the right → 6 equal columns, 2 rows.
   2. Quantity sat alone in a wide 58px box with Add to bag on the next line → stepper (54px) and Add to bag side by
      side, the "Quantity" label above both; a layout with no stepper (Choose this setting) keeps the full-width CTA.
   3. "Length guide": the 44px touch box put its underline ~20px below the words → the line sits under the words.
   4. Trust badges: five tall tiles in two columns left an orphan → tighter tiles, the odd last one spans the row. */
@media (max-width: 767px) {
  .ml-pdp__info .ml-wtiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
  .ml-pdp__info .ml-wtile { min-width: 0; min-height: 54px; padding: 6px 2px; }

  .ml-pdp__info .ml-pdp__add { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; row-gap: 12px; }
  .ml-pdp__info .ml-pdp__add > * { grid-column: 1 / -1; }
  .ml-pdp__info .ml-pdp__add > .ml-pdp__qrow { display: contents; }
  .ml-pdp__info .ml-pdp__qrow > .ml-label { grid-column: 1 / -1; }
  .ml-pdp__info .ml-pdp__qrow > .ml-pdp__qty { grid-column: 1; height: 54px; padding: 0; gap: 0; }
  .ml-pdp__info .ml-pdp__qty .ml-qty__b { width: 44px; height: 100%; }   /* 44px tap targets (responsive pass) */
  .ml-pdp__info .ml-pdp__qty .ml-qty__i { width: 44px; height: 100%; }
  .ml-pdp__info .ml-pdp__add > .ml-pdp__qrow + .ml-pdp__cta { grid-column: 2; }

}
@media (max-width: 1199px) {
  .ml-pdp__info .ml-badges { gap: 8px; }
  .ml-pdp__info .ml-badges li { padding: 14px 10px; gap: 8px; }
  .ml-pdp__info .ml-badges img { width: 32px; height: 32px; }
  .ml-pdp__info .ml-badges li:last-child:nth-child(odd) { grid-column: 1 / -1; flex-direction: row; justify-content: center; }
}
@media (max-width: 1023px), (pointer: coarse) {
  .ml-pdp__info .ml-opt[data-ml-input] > .ml-help > summary.ml-link::after { bottom: 9px; }
}

/* PDP-BUTTONS (2 Nov): quantity limits, ring-size toast, the chain Length guide dialog */
.ml-pdp__qty .ml-qty__b:disabled { opacity: .35; cursor: not-allowed; }
.ml-pdp__qx { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--ml-muted, #5b6478); margin-left: 4px; }
.ml-toast { position: fixed; left: 50%; bottom: 28px; z-index: 2147483000; transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
  max-width: calc(100vw - 32px); padding: 14px 22px; background: var(--ml-midnight); color: var(--ml-inverse);
  font: 500 12px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 10px 30px rgba(8, 11, 23, .25); transition: opacity .2s ease, transform .2s ease; }
.ml-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 767px) { .ml-toast { bottom: 92px; } }   /* above the sticky Add to bag bar */
html.ml-lg-lock { overflow: hidden; }
.ml-lg { width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); padding: 0; border: 0; background: var(--ml-white); color: var(--ml-text); overflow: auto; }
.ml-lg::backdrop { background: rgba(10, 15, 31, .55); }
.ml-lg__h { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px 12px; border-bottom: 1px solid var(--ml-line); }
.ml-lg__t { margin: 0; font-family: var(--ml-display); font-size: 26px; font-weight: 500; line-height: 1.1; }
.ml-lg__x { width: 44px; height: 44px; margin-right: -10px; }
.ml-lg__b { display: grid; grid-template-columns: 200px 1fr; gap: 20px; align-items: center; padding: 18px 20px; }
.ml-lg__fig { width: 100%; height: auto; display: block; }
.ml-lg__fig path { fill: none; stroke: var(--ml-line); stroke-width: 1.4; transition: stroke .15s ease; }
.ml-lg__fig .ml-lg__body { stroke: var(--ml-icon); stroke-width: 1.6; }
.ml-lg__fig path.is-on, .ml-lg__fig path.is-hover { stroke: var(--ml-accent); stroke-width: 2.4; }
.ml-lg__list { display: grid; gap: 6px; }
.ml-lg__o { display: grid; gap: 2px; width: 100%; min-height: 44px; padding: 8px 12px; text-align: left; background: var(--ml-white); border: 1px solid var(--ml-line); cursor: pointer; }
.ml-lg__o:hover { border-color: var(--ml-line-strong); }
.ml-lg__o[aria-pressed="true"] { background: var(--ml-mist); border-color: var(--ml-line); border-bottom-color: var(--ml-line-strong); }
.ml-lg__f { margin: 0; padding: 0 20px 18px; }
@media (max-width: 559px) { .ml-lg__b { grid-template-columns: 1fr; } .ml-lg__fig { max-width: 180px; margin: 0 auto; } }