/* Moonlit — the product card, section heads, option rows, cart lines, empty states.
   Card geometry: Figma Card/Product 310x444 (image 310x340) desktop · Card/Product Mobile 175x277
   (image 175x192). Hover (Figma State=Hover, 0.35s ease-out): alt photo in at 1.04, moonbeam sweep,
   quick bar rises 28px into the image, name → text/accent. */

/* ---------------------------------------------------------------- section head */
.ml-shead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 36px; }
.ml-shead__t { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ml-shead__a { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.ml-shead--c { justify-content: center; text-align: center; }
.ml-shead--c .ml-shead__t { align-items: center; }
.ml-flip { transform: rotate(180deg); }
@media (max-width: 767px) {
  .ml-shead { margin-bottom: 20px; }
  .ml-shead__t { gap: 8px; }
  /* 31 Oct responsive pass: the rail arrows stay on phones too (they were hidden; swiping still works) */
  .ml-shead__a .ml-arrow { width: 40px; height: 40px; }
}

/* ---------------------------------------------------------------- product card */
.ml-card { position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ml-card__m { position: relative; overflow: hidden; }
.ml-card__img { display: block; }
.ml-card__i { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .35s ease-out, transform .35s ease-out; }
.ml-card__i--alt { opacity: 0; }
.ml-card__beam {
  position: absolute; top: -20%; left: -150%; width: 112%; height: 168%; pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.45) 50%, rgba(255,255,255,0) 100%);
  transform: rotate(-20deg); transition: left .7s ease-in-out;
}
.ml-card:hover .ml-card__beam { left: 60%; }
/* 31 Oct (group B, card hover): the second photo is a desktop hover only — on touch a tap left :hover stuck on the card and the
   first photo hidden. A second photo still loading after a metal swatch pick (data-ml-alt-wait) is never shown: the new first
   photo stays instead of a blank (mlt-cardswap.js). */
@media (hover: hover) and (pointer: fine) {
  .ml-card:hover .ml-card__i--alt:not([data-ml-alt-wait]) { opacity: 1; transform: scale(1.04); }
  .ml-card:hover .ml-card__img:has(.ml-card__i--alt:not([data-ml-alt-wait])) .ml-card__i:not(.ml-card__i--alt) { opacity: 0; }
}
.ml-card__badge {
  position: absolute; top: 14px; left: 14px; z-index: 2; padding: 5px 10px;
  background: var(--ml-sale); color: var(--ml-inverse);
}
.ml-card__w {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
  color: var(--ml-text); transition: color .2s ease, transform .2s ease;
}
.ml-card__w:hover { color: var(--ml-accent); transform: scale(1.08); }
.ml-card__w[aria-pressed='true'] { color: var(--ml-accent); }
.ml-card__w[aria-pressed='true'] svg path { fill: currentColor; }
.ml-card__q {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 26px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--ml-midnight); color: var(--ml-inverse);
  transform: translateY(100%); transition: transform .35s ease-out;
}
.ml-card:hover .ml-card__q, .ml-card__q:focus-visible { transform: none; }
.ml-card__b { display: flex; flex-direction: column; gap: 5px; }
.ml-card__e { color: var(--ml-accent); }
.ml-card__t {
  font-family: var(--ml-display); font-weight: 400; font-size: 21px; line-height: 1.15; color: var(--ml-text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  /* CARD-TITLE (card-title-two-lines.md, Harsh 4 Nov): at most 2 lines + "…" at every width, and a 2-line box for a
     short name so the dots and price sit level across a row. 2 x the name's own line-height (1.15). */
  line-clamp: 2; text-overflow: ellipsis; overflow-wrap: anywhere; min-height: calc(2 * 1.15em);
  transition: color .35s ease-out;
}
.ml-card:hover .ml-card__t { color: var(--ml-accent); }
.ml-card__mt { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ml-card__dots { display: flex; gap: 6px; }
.ml-card__pur { white-space: nowrap; }

/* metal dot: 18px ring frame, 12px fill; selected = 1px border/strong ring (Figma Card "Metals") */
.ml-mt { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 99px; border: 1px solid transparent; transition: border-color .2s ease; }
.ml-mt i { display: block; width: 12px; height: 12px; border-radius: 99px; background: var(--ml-metal-white); }
.ml-mt:hover { border-color: var(--ml-line); }
.ml-mt.is-on, .ml-mt[aria-current='true'] { border-color: var(--ml-line-strong); }
.ml-mt--white i { background: var(--ml-metal-white); }
.ml-mt--yellow i { background: var(--ml-metal-yellow); }
.ml-mt--rose i { background: var(--ml-metal-rose); }
.ml-mt--platinum i { background: var(--ml-metal-platinum); }
.ml-mt--silver i { background: var(--ml-metal-silver); }

/* PDP metal swatch (Figma "Metal · n": 37x54 tile, 22px disc + caption) */
.ml-sw { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 6px 4px; min-width: 37px; background: var(--ml-white); border: 1px solid var(--ml-line); border-radius: 4px; transition: border-color .35s ease-out; }
.ml-sw i { width: 22px; height: 22px; border-radius: 99px; background: var(--ml-metal-white); }
.ml-sw:hover { border-color: var(--ml-icon); }
.ml-sw.is-on, .ml-sw[aria-current='true'] { border: 1.5px solid var(--ml-line-strong); }
.ml-sw--yellow i { background: var(--ml-metal-yellow); }
.ml-sw--rose i { background: var(--ml-metal-rose); }
.ml-sw--platinum i { background: var(--ml-metal-platinum); }
.ml-sw--silver i { background: var(--ml-metal-silver); }

/* grid: 4-up (310 + 24 gaps) desktop, 3-up tablet, 2-up phone (Figma Collection Mobile) */
.ml-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px 24px; }
@media (max-width: 1023px) { .ml-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 20px; } }
@media (max-width: 767px) {
  .ml-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 8px; }
  .ml-card { gap: 8px; }
  .ml-card__b { gap: 3px; }
  .ml-card__t { font-size: 17px; }
  .ml-card__badge { top: 8px; left: 8px; padding: 4px 7px; }
  .ml-card__w { top: 8px; right: 8px; width: 16px; height: 16px; }
  .ml-card__w svg { width: 16px; height: 16px; }
  .ml-card__q { display: none; }
  .ml-card .ml-price-was { font-size: 11px; font-weight: 500; letter-spacing: .08em; }
  .ml-card .ml-price-save, .ml-card__pur { display: none; }
  .ml-mt { width: 14px; height: 14px; }
  .ml-mt i { width: 10px; height: 10px; }
}

/* rail of cards (home best sellers, related, pairs well) */
.ml-cards-rail { gap: 24px; }
.ml-cards-rail > * { width: calc((100% - 72px) / 4); min-width: 260px; }
@media (max-width: 767px) { .ml-cards-rail { gap: 12px; } .ml-cards-rail > * { width: 175px; min-width: 175px; } }

/* ---------------------------------------------------------------- option rows (PDP / builder) */
.ml-opt { display: flex; flex-direction: column; gap: 12px; }
.ml-opt__h { display: flex; align-items: baseline; gap: 8px; }
.ml-opt__h .ml-label { color: var(--ml-text); }
.ml-opt__v { color: var(--ml-text-2) !important; }
.ml-swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.ml-pills { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- cart lines (drawer + page) */
.ml-lines { display: flex; flex-direction: column; }
.ml-line { display: grid; grid-template-columns: 84px 1fr auto; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--ml-line); }
.ml-line__m { width: 84px; aspect-ratio: 84 / 100; }
.ml-line__b { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ml-line__t { font-family: var(--ml-display); font-weight: 400; font-size: 19px; line-height: 1.1; }
.ml-line__p { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.ml-line__p .ml-price { font-size: 13px; line-height: 1.55; }
.ml-line__x { font-weight: 500; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ml-text-2); }
.ml-line__x:hover { color: var(--ml-sale); }
.ml-qty { display: inline-flex; align-items: center; gap: 16px; padding: 6px 12px; border: 1px solid var(--ml-line); width: max-content; }
.ml-qty__b { width: 18px; height: 22px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; color: var(--ml-text); }
.ml-qty__b:hover { color: var(--ml-accent); }
.ml-qty__n { min-width: 8px; text-align: center; font-size: 13px; }

.ml-sum { display: flex; flex-direction: column; gap: 12px; }
.ml-sum__row { display: flex; align-items: baseline; justify-content: space-between; }
.ml-sum__v { font-family: var(--ml-display); font-size: 28px; line-height: 1; }
.ml-sum__note { color: var(--ml-accent); }
.ml-sum__view { align-self: center; }

.ml-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 72px 24px; }
.ml-wlist { display: flex; flex-direction: column; }
.ml-wlist li { display: flex; align-items: center; gap: 14px; padding: 14px 24px; border-bottom: 1px solid var(--ml-line); }
.ml-wlist a { display: flex; align-items: center; gap: 14px; flex: 1 1 auto; min-width: 0; }
.ml-wlist .ml-media { width: 56px; flex: 0 0 56px; }
.ml-wlist__t { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ml-wlist__t strong { font-family: var(--ml-display); font-weight: 400; font-size: 17px; }
.ml-wlist__t em { font-style: normal; font-weight: 600; font-size: 13px; }

/* ---------------------------------------------------------------- floating controls */
.ml-skip { position: absolute; left: -9999px; }
.ml-skip:focus { left: 16px; top: 16px; z-index: 200; background: var(--ml-midnight); color: var(--ml-inverse); padding: 10px 16px; }
.ml-call {
  position: fixed; left: 20px; bottom: 20px; z-index: 70;
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px;
  background: var(--ml-midnight); color: var(--ml-inverse); border-radius: 99px;
}
.ml-call:hover { background: var(--ml-indigo); }
/* 30 Oct (user, screenshot): back-to-top sits right above "Call now" on the left, same left edge, 12px apart
   (Call now is 44px tall: 20 + 44 + 12 = 76) — no longer on the right beside the chat bubble */
.ml-top-btn {
  position: fixed; left: 20px; bottom: 20px; z-index: 70; /* CONTACT-HIDDEN call button: was bottom 76px (above Call now) */
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--ml-midnight); color: var(--ml-inverse); border-radius: 99px;
}
.ml-top-btn svg { transform: rotate(-90deg); }
.ml-top-btn:hover { background: var(--ml-indigo); }
/* CONTACT-HIDDEN call button — restore with the real number: @media (min-width: 768px) { .ml-top-btn { bottom: 72px; } }   Call now is 40px tall here: 20 + 40 + 12 */
@media (max-width: 767px) { .ml-call span { display: none; } .ml-call { padding: 13px; } }

/* ---------------------------------------------------------------- card metal swap (PHASE B, card-metal-swap.md)
   While the other metal's data is on its way the photo dims and shimmers and the name/price go
   quiet; the new photo only appears once loaded, so no card shows one metal under another's name. */
.ml-card.is-swapping .ml-card__i, .ml-card.is-swapping .ml-card__i--alt { opacity: .5; }
.ml-card.is-swapping .ml-card__img::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.55) 50%, transparent 80%);
  background-size: 220% 100%; animation: ml-shimmer 1.1s linear infinite;
}
.ml-card.is-swapping .ml-card__t, .ml-card.is-swapping .ml-pricebox { opacity: .45; }
@keyframes ml-shimmer { from { background-position: 180% 0; } to { background-position: -80% 0; } }

/* ---------------------------------------------------------------- ring-builder line: the chosen diamond as a round inset
   (playbook F3) on the setting's photo — bag drawer, bag page, builder step 3 (--lg) */
.ml-stone { position: absolute; right: 6%; bottom: 6%; width: 40%; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  background: var(--ml-white); border: 2px solid var(--ml-white); box-shadow: 0 0 0 1px var(--ml-line), 0 4px 12px rgba(14, 22, 38, .14); }
.ml-stone > img { width: 100%; height: 100%; object-fit: cover; }
.ml-stone--lg { width: 22%; min-width: 72px; max-width: 150px; right: 4%; bottom: 4%; z-index: 2; border-width: 3px; }
.ml-stone[hidden] { display: none; }