/* Moonlit — home sections. Geometry from Figma 19:6176 (desktop) / 19:10381 (mobile). */

/* ---------------------------------------------------------------- hero / cinema */
.ml-hero { position: relative; height: clamp(760px, 61.111vw, 880px); min-height: 560px; overflow: hidden; background: #0a0d14; color: var(--ml-inverse); }
.ml-hero__shots { position: absolute; inset: 0; }
.ml-hero__shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.02); transition: opacity 1.4s ease-in-out; }
.ml-hero__shot.is-on { opacity: 1; animation: ml-kb 6.4s linear forwards; }
/* 31 Oct (user sent moonlit-hero-colour-package.zip): the hero slides show their own colour — the shared .ml-tone-mono grayscale stays for every other image; overlay, zoom and timing unchanged */
.ml-hero__shot.ml-tone-mono { filter: none; }
@keyframes ml-kb { from { transform: scale(1.02); } to { transform: scale(1.12); } }
.ml-hero__top { position: absolute; left: 0; right: 0; top: 0; height: 220px; background: linear-gradient(180deg, rgba(8,10,20,.7) 0%, rgba(8,10,20,0) 100%); pointer-events: none; }
.ml-hero__bot { position: absolute; left: 0; right: 0; bottom: 0; height: 55%; background: linear-gradient(180deg, rgba(8,10,20,0) 0%, rgba(8,10,20,.75) 100%); pointer-events: none; }
.ml-hero__copy { position: absolute; left: 50%; bottom: 110px; width: min(674px, calc(100% - 32px)); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; animation: ml-rise 1.4s ease-out .3s both; }
@keyframes ml-rise { from { opacity: 0; transform: translate(-50%, 40px); } to { opacity: 1; transform: translate(-50%, 0); } }
.ml-hero__eb { font-weight: 600; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--ml-lunar); }
.ml-hero__sub { font-size: clamp(15px, 1.250vw, 18px); opacity: .9; }
.ml-hero__ctas { display: flex; gap: 20px; padding-top: 16px; flex-wrap: wrap; justify-content: center; }
.ml-hero__ctas .ml-btn { min-width: 250px; }
.ml-hero__pause { position: absolute; right: 40px; bottom: 40px; width: 40px; height: 40px; border-radius: 20px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.5); color: var(--ml-inverse); display: inline-flex; align-items: center; justify-content: center; }
.ml-hero__pl { display: none; } .ml-hero__pause[aria-pressed='true'] .ml-hero__pp { display: none; } .ml-hero__pause[aria-pressed='true'] .ml-hero__pl { display: block; }
.ml-hero__pp, .ml-hero__pl { display: inline-flex; }
.ml-hero__film { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255,255,255,.18); }
.ml-hero__film i { display: block; height: 100%; width: 0; background: var(--ml-lunar); transition: width .3s linear; }
@media (max-width: 767px) {
  .ml-hero__copy { bottom: 16px; gap: 12px; }
  .ml-hero__ctas { flex-direction: column; width: 300px; gap: 10px; padding-top: 10px; }
  .ml-hero__ctas .ml-btn { min-width: 0; width: 100%; }
  .ml-hero__pause { right: 16px; bottom: 16px; }
  .ml-hero__pause { display: none; }
}

/* ---------------------------------------------------------------- tonight's deals */
.ml-deals { padding-block: clamp(48px, 6.667vw, 96px); overflow: hidden; }
.ml-deals__head .ml-shead { padding-right: 0; }
.ml-deals__track { gap: 20px; padding-left: max(var(--ml-gutter), calc((100vw - var(--ml-max)) / 2 + var(--ml-gutter))); padding-right: 20px; scroll-padding-left: max(var(--ml-gutter), calc((100vw - var(--ml-max)) / 2 + var(--ml-gutter))); }
.ml-tile { position: relative; display: block; flex: 0 0 300px; width: 300px; height: 400px; overflow: hidden; background: var(--ml-midnight); color: var(--ml-inverse); }
.ml-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease-out; }
.ml-tile:hover img { transform: scale(1.09); }
.ml-tile::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 240px; background: linear-gradient(180deg, rgba(14,22,38,0) 0%, rgba(14,22,38,.85) 100%); pointer-events: none; }
.ml-tile__b { position: absolute; left: 24px; right: 24px; bottom: 24px; z-index: 1; display: flex; flex-direction: column; gap: 6px; }
.ml-tile__t { color: var(--ml-inverse); }
.ml-tile__go { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 767px) {
  .ml-deals__track { gap: 12px; }
  .ml-tile { flex-basis: 240px; width: 240px; height: 300px; }
  .ml-tile::after { height: 180px; }
  .ml-tile__b { left: 18px; right: 18px; bottom: 18px; }
}

/* ---------------------------------------------------------------- the collections marquee */
.ml-phases { background: var(--ml-mist); padding-block: clamp(48px, 6.667vw, 96px) clamp(56px, 6.667vw, 96px); overflow: hidden; }
.ml-phases .ml-shead { margin-bottom: clamp(24px, 3.056vw, 44px); }
.ml-marq { overflow: hidden; }
.ml-marq__strip { display: flex; width: max-content; animation: ml-marq 62s linear infinite; }
.ml-marq:hover .ml-marq__strip { animation-play-state: paused; }
.ml-marq__set { display: flex; gap: 36px; padding-right: 36px; }
@keyframes ml-marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ml-ph-t { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 210px; flex: 0 0 210px; color: var(--ml-text); }
.ml-ph-t__box { position: relative; display: block; width: 100%; height: 230px; overflow: hidden; background: var(--ml-mist); }
.ml-ph-t__box img { width: 100%; height: 236px; object-fit: contain; mix-blend-mode: multiply; transition: transform .7s ease-in-out; }
.ml-ph-t:hover .ml-ph-t__box img { transform: translateY(-6px); }
.ml-ph-t__shine { position: absolute; top: -15%; left: -170%; width: 98%; height: 160%; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.7), rgba(255,255,255,0)); transform: rotate(-22deg); transition: left .7s ease-in-out; pointer-events: none; }
.ml-ph-t:hover .ml-ph-t__shine { left: 125%; }
.ml-ph-t__n { font-family: var(--ml-display); font-weight: 400; font-size: 24px; line-height: 1.2; text-align: center; }
.ml-ph-t__ul { display: block; width: 0; height: 2px; background: var(--ml-lunar); transition: width .7s ease-in-out; }
.ml-ph-t:hover .ml-ph-t__ul { width: 44px; }
@media (max-width: 767px) {
  .ml-marq__set { gap: 20px; padding-right: 20px; }
  .ml-ph-t { width: 150px; flex-basis: 150px; }
  .ml-ph-t__box { height: 170px; }
  .ml-ph-t__box img { height: 176px; }
  .ml-ph-t__n { font-size: 20px; }
}

/* ---------------------------------------------------------------- build your ring */
.ml-build { padding-block: clamp(48px, 6.667vw, 96px); }
.ml-build__in { display: grid; grid-template-columns: minmax(0, 870fr) minmax(0, 434fr); gap: 24px; align-items: start; }
.ml-bcard { position: relative; height: 620px; overflow: hidden; color: var(--ml-inverse); background: var(--ml-midnight); }
.ml-bcard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease-out; }
.ml-bcard:hover .ml-bcard__img { transform: scale(1.06); }
.ml-bcard__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14,22,38,.92) 0%, rgba(14,22,38,.2) 75%, rgba(14,22,38,0) 100%); }
.ml-bcard__b { position: absolute; left: 56px; bottom: 62px; z-index: 1; display: flex; flex-direction: column; gap: 20px; max-width: 440px; }
.ml-bcard__h { font-family: var(--ml-display); font-weight: 300; font-size: clamp(34px, 3.611vw, 52px); line-height: 1.04; letter-spacing: -0.01em; }
.ml-bcard__h i { color: var(--ml-moon); }
.ml-bcard__steps { display: flex; flex-direction: column; gap: 12px; }
.ml-bcard__steps li { display: flex; gap: 12px; }
.ml-bcard__a { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.ml-pcard { display: flex; flex-direction: column; gap: 18px; padding-bottom: 32px; }
/* Figma 'Preset': the photo sits on a warm cream ground (#efe7dc); the store's white product photo is
   multiplied into it, and the text runs on the page with no card around it */
.ml-pcard__m { height: 400px; background: #efe7dc; }
.ml-pcard__m img { transition: transform .35s ease-out; object-fit: contain; padding: 8%; mix-blend-mode: multiply; }
.ml-pcard:hover .ml-pcard__m img { transform: scale(1.07); }
.ml-pcard__b { display: flex; flex-direction: column; gap: 10px; padding: 4px 28px 0; }
.ml-pcard__t { color: var(--ml-text); }
.ml-pcard .ml-link { align-self: flex-start; margin-top: 4px; }
@media (max-width: 1023px) { .ml-bcard__b { left: 32px; bottom: 40px; } }
/* 3 Nov (RESPONSIVE, tablet): at 768-1023 the 870:434 split left the preset card ~240px wide (its title in three
   lines, its link in two). The build card now spans the row and the preset card sits under it, photo beside text. */
@media (min-width: 768px) and (max-width: 1023px) {
  .ml-build__in { grid-template-columns: 1fr; gap: 20px; }
  .ml-bcard { height: 540px; }
  .ml-pcard { flex-direction: row; align-items: center; gap: 32px; padding-bottom: 0; }
  .ml-pcard__m { flex: 0 0 46%; height: 320px; }
  .ml-pcard__b { padding: 0 24px 0 0; }
}
@media (max-width: 767px) {
  .ml-build__in { grid-template-columns: 1fr; gap: 16px; }
  .ml-bcard { height: 520px; }
  .ml-bcard__shade { background: linear-gradient(180deg, rgba(14,22,38,.1) 0%, rgba(14,22,38,.95) 100%); }
  .ml-bcard__b { left: 16px; right: 16px; bottom: 24px; gap: 14px; }
  .ml-pcard__m { height: 300px; }
  .ml-pcard__b { padding: 4px 20px 0; }
  .ml-pcard { padding-bottom: 24px; }
}

/* ---------------------------------------------------------------- eclipse */
.ml-ecl { background: var(--ml-midnight); color: var(--ml-inverse); overflow: hidden; }
.ml-ecl__in { display: flex; align-items: center; gap: 96px; max-width: var(--ml-max); margin-inline: auto; padding: 110px var(--ml-gutter) 110px 140px; }
.ml-ecl__art { position: relative; flex: 0 0 460px; width: 460px; height: 460px; }
.ml-ecl__corona { position: absolute; inset: -25%; border-radius: 50%; background: radial-gradient(circle, rgba(207,173,110,.45) 55%, rgba(207,173,110,.08) 75%, rgba(207,173,110,0) 100%); animation: ml-corona 8.6s ease-in-out infinite; }
.ml-ecl__disc { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; background: var(--ml-night); border: 1.5px solid rgba(207,173,110,.9); box-shadow: 0 0 34px rgba(242,209,140,.75); animation: ml-rim 8.6s ease-in-out infinite; }
.ml-ecl__disc > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* the store's white product photo as the moon: centred and slightly inset, a soft shade toward the rim */
.ml-ecl__disc:has(.ml-ecl__pimg) { background: radial-gradient(circle at 50% 45%, #fbfaf6 0%, #e9e4d4 64%, #b9b3a2 100%); }
.ml-ecl__disc > .ml-ecl__pimg { object-fit: contain; padding: 16%; mix-blend-mode: multiply; filter: saturate(.85); }
.ml-ecl__cur { position: absolute; top: 0; bottom: 0; width: 50%; background: var(--ml-midnight); overflow: hidden; }
.ml-ecl__cur--l { left: 0; animation: ml-cur-l 8.6s ease-in-out infinite; }
.ml-ecl__cur--r { right: 0; animation: ml-cur-r 8.6s ease-in-out infinite; }
.ml-ecl__stars { position: absolute; top: 0; width: 200%; height: 100%; }
.ml-ecl__cur--r .ml-ecl__stars { right: 0; }
.ml-ecl__stars i { position: absolute; border-radius: 50%; background: var(--ml-moon); }
.ml-ecl__mark { position: absolute; top: 50%; width: 83px; height: 83px; margin-top: -41.5px; color: var(--ml-inverse); filter: drop-shadow(0 0 16px rgba(207,173,110,.5)); }
.ml-ecl__cur--l .ml-ecl__mark { right: -41.5px; }
.ml-ecl__cur--r .ml-ecl__mark { left: -41.5px; }
.ml-ecl__seam { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--ml-lunar); }
.ml-ecl__cur--l .ml-ecl__seam { right: 0; } .ml-ecl__cur--r .ml-ecl__seam { left: 0; }
.ml-ecl__spark { position: absolute; left: 361px; top: 35px; color: #fff7e6; filter: drop-shadow(0 0 14px #ffebb8); }
.ml-ecl__spark svg path { fill: #fff7e6; }
@keyframes ml-cur-l { 0%, 9% { transform: translateX(0); } 36%, 73% { transform: translateX(-102%); } 100% { transform: translateX(0); } }
@keyframes ml-cur-r { 0%, 9% { transform: translateX(0); } 36%, 73% { transform: translateX(102%); } 100% { transform: translateX(0); } }
@keyframes ml-corona { 0%, 9% { transform: scale(1); opacity: 1; } 36%, 73% { transform: scale(.81); opacity: .55; } 100% { transform: scale(1); opacity: 1; } }
@keyframes ml-rim { 0%, 9% { border-color: rgba(207,173,110,.9); box-shadow: 0 0 34px rgba(242,209,140,.75); } 36%, 73% { border-color: rgba(207,173,110,.45); box-shadow: 0 0 20px rgba(207,173,110,.2); } 100% { border-color: rgba(207,173,110,.9); box-shadow: 0 0 34px rgba(242,209,140,.75); } }
.ml-ecl__b { display: flex; flex-direction: column; gap: 22px; max-width: 688px; }
.ml-ecl__h i { color: var(--ml-moon); }
.ml-ecl__t { opacity: .78; }
@media (max-width: 1023px) { .ml-ecl__in { gap: 48px; padding-left: var(--ml-gutter); } .ml-ecl__art { flex-basis: 340px; width: 340px; height: 340px; } .ml-ecl__spark { left: 260px; top: 20px; } }
@media (max-width: 767px) {
  .ml-ecl__in { flex-direction: column; align-items: stretch; gap: 28px; padding: 56px var(--ml-gutter); }
  .ml-ecl__art { align-self: center; flex-basis: auto; width: 300px; height: 300px; }
  .ml-ecl__mark { transform: scale(.66); }
  .ml-ecl__spark { left: 235px; top: 22px; transform: scale(.66); }
  .ml-ecl__b { gap: 16px; }
}

/* ---------------------------------------------------------------- best sellers */
.ml-best__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 36px; }
.ml-best__head .ml-shead { margin-bottom: 0; }
.ml-best__tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.ml-best__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.ml-best__all { display: flex; justify-content: center; margin-top: 36px; }
/* 31 Oct responsive pass: at tablet widths the 4th best seller was hidden (3 columns) — 2 x 2 keeps all four */
@media (max-width: 1023px) { .ml-best__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .ml-best__head { flex-direction: column; align-items: flex-start; margin-bottom: 20px; }
  .ml-best__grid { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; margin-right: calc(var(--ml-gutter) * -1); padding-right: var(--ml-gutter); }
  .ml-best__grid::-webkit-scrollbar { display: none; }
  .ml-best__grid > li { flex: 0 0 175px; display: block !important; }
  .ml-best__all { justify-content: flex-start; margin-top: 20px; }
}

/* ---------------------------------------------------------------- generic rail (PDP, bag) */
.ml-railsec { padding: 0 0 clamp(56px, 6.667vw, 96px); }
.ml-railsec__h { margin-bottom: 36px; }
@media (max-width: 767px) { .ml-railsec__h { margin-bottom: 20px; } }

/* ---------------------------------------------------------------- moonlit moments */
.ml-mom { padding-bottom: clamp(56px, 7.639vw, 110px); overflow: hidden; }
.ml-mom__track { gap: 20px; }
.ml-mom__i { display: flex; flex-direction: column; gap: 14px; width: 316px; flex: 0 0 316px; }
.ml-mom__m { display: block; height: 400px; overflow: hidden; background: var(--ml-image); }
.ml-mom__m img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease-out; }
.ml-mom__i:hover .ml-mom__m img { transform: scale(1.08); }
.ml-mom__q { font-family: var(--ml-display); font-style: italic; font-size: 22px; line-height: 1.25; transition: color .35s ease-out; }
.ml-mom__i:hover .ml-mom__q { color: var(--ml-accent); }
.ml-mom__w { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; color: var(--ml-accent); }
/* store titles are long ('Round Diamond Tennis Necklace with Three-Prong…'): one line, like the Figma's */
.ml-mom__wt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-mom__w svg { flex: 0 0 auto; }
@media (max-width: 767px) {
  .ml-mom__track { gap: 12px; margin-right: calc(var(--ml-gutter) * -1); padding-right: var(--ml-gutter); }
  .ml-mom__i { width: 260px; flex-basis: 260px; }
  .ml-mom__m { height: 320px; }
  .ml-mom__q { font-size: 19px; }
}

/* ---------------------------------------------------------------- home try-on */
.ml-try { display: grid; grid-template-columns: minmax(0, 800fr) minmax(0, 640fr); background: var(--ml-indigo); color: var(--ml-inverse); min-height: 620px; }
.ml-try__b { display: flex; flex-direction: column; justify-content: center; gap: 24px; padding: 96px 80px 96px max(var(--ml-gutter), calc((100vw - var(--ml-max)) / 2 + var(--ml-gutter))); }
.ml-try__h { font-family: var(--ml-display); font-weight: 300; font-size: clamp(40px, 4.444vw, 64px); line-height: 1; letter-spacing: -0.015em; }
.ml-try__h i { color: var(--ml-moon); }
.ml-try__t { opacity: .8; max-width: 664px; }
.ml-try__f { display: flex; flex-wrap: wrap; gap: 16px; }
.ml-try__f li { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid rgba(255,255,255,.25); border-radius: 99px; }
.ml-try__f svg { color: var(--ml-moon); }
.ml-try__a { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.ml-try__m, .ml-appt__m { position: relative; overflow: hidden; }
.ml-try__m img, .ml-appt__m img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ml-drift { animation: ml-drift 14s ease-in-out infinite alternate; }
@keyframes ml-drift { from { transform: scale(1); } to { transform: scale(1.08) translate(-1%, -1%); } }

/* ---------------------------------------------------------------- appointment */
.ml-appt { display: grid; grid-template-columns: 1fr 1fr; min-height: 600px; }
.ml-appt__b { display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: 0 96px; background: var(--ml-white); }
.ml-appt__h { font-family: var(--ml-display); font-weight: 300; font-size: clamp(34px, 3.611vw, 52px); line-height: 1.04; letter-spacing: -0.01em; }
.ml-appt__h i { color: var(--ml-accent); }
.ml-appt__b .ml-body { max-width: 528px; }
.ml-appt__who { display: flex; align-items: center; gap: 12px; }
.ml-appt__av { display: flex; }
.ml-appt__av img { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--ml-white); object-fit: cover; }
.ml-appt__av img + img { margin-left: -10px; }
.ml-appt__wt { display: flex; flex-direction: column; gap: 2px; }
.ml-appt__wt .ml-caption { display: inline-flex; align-items: center; gap: 6px; }
.ml-appt__a { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
@media (max-width: 1023px) { .ml-try__b { padding: 72px 40px 72px var(--ml-gutter); } .ml-appt__b { padding: 56px 40px; } }
@media (max-width: 767px) {
  .ml-try, .ml-appt { grid-template-columns: 1fr; min-height: 0; }
  .ml-try__b { padding: 48px var(--ml-gutter); gap: 16px; }
  .ml-try__f { gap: 10px; }
  .ml-try__m { height: 340px; }
  .ml-appt__m { height: 300px; }
  .ml-appt__b { padding: 40px var(--ml-gutter) 56px; gap: 16px; }
}

/* ---------------------------------------------------------------- reviews */
.ml-rev__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 40px; }
.ml-rev__head .ml-shead { margin-bottom: 0; }
.ml-rev__agg { display: flex; align-items: center; gap: 14px; }
.ml-rev__n { font-family: var(--ml-display); font-weight: 300; font-size: clamp(48px, 4.444vw, 64px); line-height: .9; }
.ml-rev__s { display: flex; flex-direction: column; gap: 4px; }
.ml-rev__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.ml-rcard { display: flex; flex-direction: column; gap: 16px; padding: 28px; background: var(--ml-white); border: 1px solid var(--ml-line); transition: border-color .35s ease-out, box-shadow .35s ease-out; }
.ml-rcard:hover { border-color: var(--ml-lunar); box-shadow: 0 14px 30px rgba(77,102,178,.2); }
.ml-rcard__q { font-family: var(--ml-display); font-style: italic; font-size: 21px; line-height: 1.25; }
.ml-rcard__by { display: flex; align-items: center; gap: 12px; }
.ml-rcard__by > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.ml-rcard__by em { font-style: normal; }
.ml-rcard__i { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 99px; background: var(--ml-indigo); color: var(--ml-moon); font-family: var(--ml-display); font-weight: 500; font-size: 18px; flex: 0 0 auto; }
.ml-rev__all { margin-top: 40px; }
@media (max-width: 1023px) { .ml-rev__cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) {
  .ml-rev__head { flex-direction: column; align-items: flex-start; margin-bottom: 20px; }
  .ml-rev__cards { grid-template-columns: 1fr; gap: 12px; }
  .ml-rev__all { margin-top: 20px; }
}

/* ---------------------------------------------------------------- promise strip */
.ml-trust { padding-bottom: clamp(48px, 5.556vw, 80px); }
.ml-trust__s { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: var(--ml-mist); }
.ml-trust__s a { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 90px; padding: 24px 20px; }
.ml-trust__s svg { color: var(--ml-icon); flex: 0 0 auto; transition: color .35s ease-out; }
.ml-trust__s a:hover svg { color: var(--ml-lunar); }
.ml-trust__s span { display: flex; flex-direction: column; gap: 2px; }
.ml-trust__s em { font-style: normal; }
/* 3 Nov (RESPONSIVE): five items in one row are ~190px each at 1024, so every label broke into three lines; the
   three-column layout now runs to 1199. A four-item strip keeps one row of four from 1024 up. */
@media (max-width: 1199px) { .ml-trust__s { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .ml-trust__s--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .ml-trust__s { grid-template-columns: 1fr; padding: 8px 18px; }
  .ml-trust__s li + li a { border-top: 1px solid var(--ml-line); }
  .ml-trust__s a { justify-content: flex-start; min-height: 45px; padding: 12px 0; gap: 14px; }
  .ml-trust__s svg { width: 20px; height: 20px; }
  .ml-trust__s span { flex-direction: row; flex-wrap: wrap; column-gap: 14px; }
}

/* Shop by category — "Moon Arch" (user's pick of three options, 30 Oct): arch-topped photos, five in a row; a swipe row
   on tablet and phone. It sits between the hero and the deals, whose own top padding makes the gap below it. */
.ml-cats { padding-top: clamp(48px, 6.667vw, 96px); }
.ml-cats__row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
.ml-cats__a { display: flex; flex-direction: column; gap: 18px; color: var(--ml-text); text-decoration: none; }
.ml-cats__a:focus-visible { outline: 2px solid var(--ml-accent); outline-offset: 4px; }
.ml-cats__m { display: block; aspect-ratio: 18 / 25; overflow: hidden; border-radius: 999px 999px 0 0; background: var(--ml-image); }
.ml-cats__m img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.ml-cats__f { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ml-cats__t { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ml-cats__n { font-size: 10px; font-weight: 600; letter-spacing: .2em; color: var(--ml-text-2); }
.ml-cats__h { font-family: var(--ml-display); font-size: clamp(20px, 1.667vw, 26px); font-weight: 400; line-height: 1.1; white-space: nowrap; }   /* every name on one line, so the five rows line up */
.ml-cats__go { flex: 0 0 40px; width: 40px; height: 40px; border: 1px solid var(--ml-line); border-radius: 50%; display: grid; place-items: center; transition: color .3s ease, border-color .3s ease; }
@media (hover: hover) {
  .ml-cats__a:hover .ml-cats__m img { transform: scale(1.05); }
  .ml-cats__a:hover .ml-cats__go { color: var(--ml-accent); border-color: var(--ml-accent); }
}
@media (max-width: 1023px) {
  .ml-cats__row { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--ml-gutter)); padding-inline: var(--ml-gutter); scroll-padding-inline: var(--ml-gutter); scrollbar-width: none; }
  .ml-cats__row::-webkit-scrollbar { display: none; }
  .ml-cats__i { flex: 0 0 30%; scroll-snap-align: start; }
  .ml-cats__h { font-size: 20px; }
}
@media (max-width: 767px) {
  .ml-cats__i { flex-basis: 62%; }
  .ml-cats__h { font-size: 22px; }
  .ml-cats__go { flex-basis: 36px; width: 36px; height: 36px; }
}

/* 30 Oct (the user's asset pack): the preset card's theme photo fills the box like a photograph, not like a product still */
.ml-pcard__m img.ml-pcard__art { width: 100%; height: 100%; object-fit: cover; padding: 0; mix-blend-mode: normal; }
/* 31 Oct responsive pass: "The Harvest Sale Is / On" left one word alone on phones — balance the headline's lines */
@media (max-width: 767px) { .ml-hero__h { text-wrap: balance; } }