/** Shopify CDN: Minification failed

Line 1379:11 Expected identifier but found whitespace
Line 1379:20 Unexpected ";"

**/
/* ============================================================
   Homepage sections, collection, PDP, reviews, content pages
   ============================================================ */

/* ---------- Hero ---------- */
.lm-hero { position: relative; width: 100%; height: 100vh; min-height: 680px; overflow: hidden; }
.lm-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--lm-hero-focus, 50% 50%); }
.lm-hero__scrim { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(28,30,28,0.55) 0%, rgba(28,30,28,0.28) 38%, rgba(28,30,28,0) 62%); }
.lm-hero__text { position: absolute; left: 0; top: 0; height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 0 var(--lm-side-pad); max-width: 620px; }
.lm-hero__eyebrow { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: #EDE6DC; margin-bottom: 22px; font-weight: 500; }
.lm-hero__heading { font-family: var(--lm-serif); font-size: 72px; line-height: 1.1; color: #FFFFFF; font-weight: 500; margin: 0 0 26px; }
.lm-hero__body { font-size: 16px; line-height: 1.7; color: var(--lm-bg-panel); max-width: 420px; margin-bottom: 38px; font-weight: 300; }
@media (max-width: 1139px) and (min-width: 860px) { .lm-hero__heading { font-size: 58px; } }
@media (max-width: 859px) {
  .lm-hero { height: 86vh; min-height: 560px; }
  .lm-hero__text { padding: 0 24px; max-width: 100%; }
  .lm-hero__heading { font-size: 42px; }
}

/* ---------- About hero ---------- */
.lm-about-hero { position: relative; width: 100%; height: 60vh; min-height: 420px; max-height: 620px; overflow: hidden; }
.lm-about-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lm-about-hero__scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(28,30,28,0.55) 0%, rgba(28,30,28,0.05) 55%); }
.lm-about-hero__text { position: absolute; left: 0; bottom: 0; width: 100%; padding: 0 var(--lm-side-pad) 40px; }
.lm-about-hero__title { font-family: var(--lm-serif); font-size: 52px; line-height: 1.1; color: #FFFFFF; font-weight: 500; margin: 0; }
@media (max-width: 859px) {
  .lm-about-hero { height: 48vh; min-height: 320px; }
  .lm-about-hero__text { padding: 0 24px 28px; }
  .lm-about-hero__title { font-size: 36px; }
}

/* ---------- Sale explainer (PDP) ---------- */
.lm-bundle { padding: 56px var(--lm-side-pad); background: var(--lm-bg); border-top: 1px solid var(--lm-border); }
.lm-bundle__title { font-family: var(--lm-serif); font-size: 26px; color: var(--lm-ink); font-weight: 500; margin-bottom: 24px; text-align: center; }
.lm-bundle__row { display: flex; align-items: flex-start; justify-content: center; flex-wrap: wrap; gap: 48px; }
.lm-bundle__summary { margin-left: 8px; }
.lm-bundle__items { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.lm-bundle__plus { font-size: 22px; color: var(--lm-text-3); margin-top: 60px; }
.lm-bundle__card { width: 140px; }
.lm-bundle__imgwrap { position: relative; width: 100%; aspect-ratio: 4/5; background: var(--lm-border); border-radius: 6px; overflow: hidden; margin-bottom: 8px; }
.lm-bundle__imgwrap a { display: block; width: 100%; height: 100%; }
.lm-bundle__imgwrap img { width: 100%; height: 100%; object-fit: cover; }
.lm-bundle__check {
  position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid #FFFFFF; background: var(--lm-border); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.lm-bundle__check.is-checked { background: var(--lm-brand); }
.lm-bundle__name { font-size: 13px; font-weight: 600; color: var(--lm-ink); margin-bottom: 2px; display: block; }
.lm-bundle__price { font-size: 13px; color: var(--lm-brand); font-weight: 600; }
.lm-bundle__summary {
  text-align: center; border: 1px solid var(--lm-border); border-radius: 10px;
  padding: 24px 28px; min-width: 240px; display: flex; flex-direction: column; align-items: stretch;
}
.lm-bundle__summary-label { font-size: 12.5px; color: var(--lm-text-3); margin-bottom: 4px; }
.lm-bundle__summary-priceline { display: flex; align-items: baseline; justify-content: center; gap: 8px; }
.lm-bundle__summary-price { font-family: var(--lm-serif); font-size: 28px; color: var(--lm-ink); font-weight: 500; }
.lm-bundle__summary-compare { font-size: 15px; color: var(--lm-text-3); text-decoration: line-through; }
.lm-bundle__summary-save { font-size: 12px; color: var(--lm-sale-green); font-weight: 600; margin: 4px 0 14px; }
.lm-bundle__summary .lm-btn-primary,
.lm-bundle__summary .lm-btn-outline { width: 100%; border-radius: 8px; }
.lm-bundle__summary .lm-btn-primary { margin-bottom: 10px; }
@media (max-width: 859px) {
  .lm-bundle { padding: 40px 24px; }
  .lm-bundle__row { flex-direction: column; align-items: center; }
  .lm-bundle__summary { text-align: center; width: 100%; }
  .lm-bundle__card { width: 100px; }
}
@media (max-width: 767px) {
  .lm-bundle__items { flex-direction: column; align-items: stretch; width: 100%; gap: 0; }
  .lm-bundle__plus { display: none; }
  .lm-bundle__card {
    width: 100%; display: grid; grid-template-columns: 64px 1fr;
    column-gap: 12px; row-gap: 2px; align-items: center; text-align: left;
    padding: 14px 0; border-bottom: 1px solid var(--lm-border);
  }
  .lm-bundle__imgwrap { grid-row: 1 / span 3; margin-bottom: 0; width: 64px; height: 80px; }
  .lm-bundle__variant { width: 100%; }
}

.lm-sale-explainer { display: flex; gap: 0; background: var(--lm-bg-alt); }
.lm-sale-explainer__imgwrap { flex: 1 1 50%; min-height: 380px; }
.lm-sale-explainer__imgwrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lm-sale-explainer__card { flex: 1 1 50%; padding: 64px var(--lm-side-pad); display: flex; flex-direction: column; justify-content: center; }
.lm-sale-explainer__title { font-family: var(--lm-serif); font-size: 36px; color: var(--lm-ink); font-weight: 500; margin: 0 0 14px; }
.lm-sale-explainer__body { font-size: 14.5px; line-height: 1.75; color: var(--lm-text-2); font-weight: 300; margin: 0 0 24px; }
.lm-sale-explainer__tiers { border: 1px solid var(--lm-border); border-radius: 6px; overflow: hidden; margin-bottom: 20px; }
.lm-sale-explainer__tier { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; font-size: 14px; color: var(--lm-text-body); background: var(--lm-bg-alt); }
.lm-sale-explainer__tier + .lm-sale-explainer__tier { border-top: 1px solid var(--lm-border); }
.lm-sale-explainer__tier-value { font-weight: 600; color: var(--lm-text-body); }
.lm-sale-explainer__tier--highlight { background: var(--lm-brand); color: #FFFFFF; font-weight: 600; border-top-color: var(--lm-brand); }
.lm-sale-explainer__tier--highlight .lm-sale-explainer__tier-value { color: #FFFFFF; }
.lm-sale-explainer__footnote { font-size: 12.5px; line-height: 1.7; color: var(--lm-text-3); font-weight: 300; margin: 0; }
@media (max-width: 859px) {
  .lm-sale-explainer { flex-direction: column; }
  .lm-sale-explainer__imgwrap { flex: 0 0 auto; min-height: 0; aspect-ratio: 4/3; }
  .lm-sale-explainer__card { flex: 0 0 auto; justify-content: flex-start; padding: 28px 24px; }
}
.lm-sale-explainer--tiersonly { justify-content: center; padding: 32px var(--lm-side-pad); }
.lm-sale-explainer--tiersonly .lm-sale-explainer__card { flex: 0 1 560px; padding: 0; justify-content: flex-start; }
.lm-sale-explainer--tiersonly .lm-sale-explainer__tiers { margin-bottom: 0; }
@media (max-width: 859px) {
  .lm-sale-explainer--tiersonly { flex-direction: row; padding: 16px; }
  .lm-sale-explainer--tiersonly .lm-sale-explainer__card { flex: 1 1 auto; }
  .lm-sale-explainer--tiersonly .lm-sale-explainer__tier { padding: 10px 12px; font-size: 12.5px; }
}

/* ---------- Benefits bar ---------- */
.lm-benefits { background: var(--lm-bg-alt); border-top: 1px solid var(--lm-border); border-bottom: 1px solid var(--lm-border); display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; padding: 36px var(--lm-side-pad); }
.lm-benefit { display: flex; align-items: center; gap: 14px; justify-content: center; }
.lm-benefit__icon { width: 26px; height: 26px; color: var(--lm-brand); flex-shrink: 0; }
.lm-benefit__label { font-size: 13px; letter-spacing: 0.03em; color: var(--lm-ink); font-weight: 500; }
@media (max-width: 859px) {
  .lm-benefits { gap: 8px; padding: 28px 16px; }
  .lm-benefit { flex-direction: column; text-align: center; gap: 8px; }
}

/* ---------- Category tiles ---------- */
.lm-cats { background: var(--lm-bg-alt); padding: 72px var(--lm-side-pad); }
.lm-cats__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.lm-cat-tile { position: relative; display: block; aspect-ratio: 3/4; overflow: hidden; background: var(--lm-border); }
.lm-cat-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lm-cat-tile__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(28,30,28,0.3) 0%, rgba(28,30,28,0) 30%, rgba(28,30,28,0.55) 100%); }
.lm-cat-tile__label { position: absolute; top: 18px; left: 18px; font-family: var(--lm-serif); font-size: 24px; color: var(--lm-bg-alt); font-weight: 500; text-transform: capitalize; }
.lm-cat-tile__btn { position: absolute; left: 18px; bottom: 18px; border: 1px solid rgba(251,250,248,0.8); color: var(--lm-bg-alt); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; padding: 9px 16px; border-radius: var(--lm-radius-pill); font-weight: 500; }
@media (max-width: 859px) {
  .lm-cats { padding: 48px 24px; }
  .lm-cats__grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .lm-cat-tile__label { font-size: 20px; }
}

/* ---------- Editorial ---------- */
.lm-editorial { position: relative; width: 100%; height: 640px; overflow: hidden; }
.lm-editorial img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lm-editorial__scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(28,30,28,0.55) 0%, rgba(28,30,28,0.05) 55%); }
.lm-editorial__text { position: absolute; left: 0; bottom: 0; padding: 64px var(--lm-side-pad); }
.lm-editorial__heading { font-family: var(--lm-serif); font-size: 48px; color: var(--lm-bg-alt); font-weight: 500; margin: 0 0 22px; max-width: 560px; line-height: 1.15; }
.lm-editorial__cta { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lm-bg-alt); font-weight: 500; border-bottom: 1px solid var(--lm-bg-alt); padding-bottom: 4px; }
.lm-editorial__cta:hover { color: var(--lm-bg-alt); }
@media (max-width: 859px) {
  .lm-editorial { height: 480px; }
  .lm-editorial__text { padding: 32px 24px; }
  .lm-editorial__heading { font-size: 30px; }
}

/* ---------- About ---------- */
.lm-about { background: var(--lm-bg); padding: 120px var(--lm-side-pad); }
.lm-about__row { display: flex; flex-direction: row; gap: 90px; align-items: center; }
.lm-about__imgwrap { flex: 0 0 46%; width: 46%; aspect-ratio: 4/5; overflow: hidden; background: var(--lm-border); }
.lm-about__imgwrap img { width: 100%; height: 100%; object-fit: cover; }
.lm-about__text { flex: 1 1 auto; max-width: 480px; }
.lm-about__heading { font-family: var(--lm-serif); font-size: 44px; color: var(--lm-ink); font-weight: 500; margin: 0 0 24px; }
.lm-about__para { font-size: 15.5px; line-height: 1.85; color: var(--lm-text-body); margin-bottom: 20px; font-weight: 300; }
.lm-about__link { font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--lm-brand); font-weight: 500; border-bottom: 1px solid var(--lm-brand); padding-bottom: 3px; }
@media (max-width: 859px) {
  .lm-about { padding: 72px var(--lm-side-pad); }
  .lm-about__row { flex-direction: column; gap: 40px; }
  .lm-about__imgwrap { flex: none; width: 100%; }
  .lm-about__heading { font-size: 32px; }
}

/* ---------- UGC reviews ---------- */
.lm-ugc { background: var(--lm-bg); padding: 110px var(--lm-side-pad); }
.lm-ugc__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
.lm-ugc-card { background: var(--lm-bg-alt); border: 1px solid var(--lm-border); padding: 28px; }
.lm-ugc-card__stars { color: var(--lm-gold); font-size: 14px; letter-spacing: 0.04em; margin-bottom: 14px; }
.lm-ugc-card__quote { font-size: 14.5px; line-height: 1.75; color: var(--lm-text-body); margin: 0 0 22px; font-weight: 300; }
.lm-ugc-card__reviewer { display: flex; align-items: center; gap: 10px; }
.lm-ugc-card__avatar { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.lm-ugc-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.lm-ugc-card__name { font-size: 13.5px; font-weight: 600; color: var(--lm-ink); }
.lm-ugc-card__loc { font-size: 12px; color: var(--lm-text-3); }
.lm-ugc-card__divider { height: 1px; background: var(--lm-border); margin: 20px 0; }
.lm-ugc-card__product { display: flex; align-items: center; gap: 14px; }
.lm-ugc-card__thumb { width: 56px; height: 68px; flex-shrink: 0; overflow: hidden; background: var(--lm-border); }
.lm-ugc-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.lm-ugc-card__pname { font-size: 13.5px; color: var(--lm-ink); font-weight: 500; margin-bottom: 4px; }
.lm-ugc-card__price { font-size: 13.5px; color: var(--lm-brand); font-weight: 600; }
.lm-ugc-card__compare { font-size: 12px; color: var(--lm-text-3); text-decoration: line-through; margin-left: 8px; }
@media (max-width: 859px) { .lm-ugc { padding: 72px 24px; } .lm-ugc__grid { grid-template-columns: 1fr; gap: 20px; } }

/* ---------- Newsletter ---------- */
.lm-newsletter { background: var(--lm-brand-dark); padding: 96px 64px; }
.lm-newsletter__inner { max-width: 440px; margin: 0 auto; text-align: center; padding: 0 24px; }
.lm-newsletter__rule { width: 32px; height: 1px; background: var(--lm-text-warm-gray); margin: 0 auto 26px; }
.lm-newsletter__heading { font-family: var(--lm-serif); font-style: italic; font-size: 30px; color: var(--lm-bg-alt); font-weight: 500; margin: 0 0 12px; }
.lm-newsletter__body { font-size: 13.5px; color: var(--lm-footer-muted); margin: 0 0 36px; line-height: 1.7; font-weight: 300; }
.lm-newsletter__form { display: flex; align-items: flex-end; gap: 16px; justify-content: center; }
/* Target the inputs via the section too, so styling survives even if Shopify's
   {% form %} wrapper renders without the expected class. */
.lm-newsletter__form input[type="email"],
.lm-newsletter input[type="email"] {
  flex: 1; min-width: 180px; padding: 9px 2px; background: transparent;
  border: none; border-bottom: 1px solid #7A6656; border-radius: 0;
  color: var(--lm-bg-alt); font-size: 13.5px; font-family: var(--lm-sans);
  outline: none; -webkit-appearance: none; appearance: none;
}
.lm-newsletter__form input::placeholder,
.lm-newsletter input[type="email"]::placeholder { color: #A6937F; }
.lm-newsletter input[type="hidden"] { display: none; }
.lm-newsletter__btn { background: none; border: none; border-bottom: 1px solid var(--lm-bg-alt); color: var(--lm-bg-alt); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; padding: 0 0 9px; cursor: pointer; white-space: nowrap; transition: opacity 0.3s ease; }
.lm-newsletter__btn:hover { opacity: 0.7; }
.lm-newsletter__success { color: var(--lm-bg-alt); font-size: 14px; letter-spacing: 0.04em; }
@media (max-width: 859px) { .lm-newsletter { padding: 64px 24px; } }

/* ---------- Assurances ---------- */
.lm-assurance { background: var(--lm-bg); padding: 80px var(--lm-side-pad); border-bottom: 1px solid var(--lm-border); }
.lm-assurance__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 48px; max-width: 1100px; margin: 0 auto; text-align: center; }
.lm-assurance__item { padding: 0 8px; }
.lm-assurance__title { font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lm-ink); font-weight: 700; margin-bottom: 14px; }
.lm-assurance__body { font-size: 14px; line-height: 1.8; color: var(--lm-text-2); font-weight: 300; margin: 0; }
@media (max-width: 859px) { .lm-assurance { padding: 56px 24px; } .lm-assurance__grid { grid-template-columns: 1fr; gap: 36px; } }

/* ---------- Trust / "Loved by 10,000+" testimonial carousel ---------- */
.lm-trust { background: var(--lm-bg-alt); padding: 90px var(--lm-side-pad); border-top: 1px solid var(--lm-border); }
.lm-trust__grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px; align-items: center; }
.lm-trust__stars { color: var(--lm-gold); font-size: 20px; letter-spacing: 0.08em; margin-bottom: 10px; }
.lm-trust__heading { font-family: var(--lm-serif); font-size: 38px; color: var(--lm-ink); font-weight: 500; margin: 0 0 14px; line-height: 1.15; }
.lm-trust__count { font-size: 13px; color: var(--lm-text-3); font-weight: 600; }
.lm-trust__right { position: relative; }
.lm-trust__quotemark { font-family: var(--lm-serif); font-size: 60px; color: var(--lm-border); line-height: 1; margin-bottom: 8px; }
.lm-trust__body-row { display: flex; gap: 24px; }
.lm-trust__dots { display: flex; flex-direction: column; gap: 10px; padding-top: 6px; }
.lm-trust__dot { width: 8px; height: 8px; border-radius: 50%; border: none; background: var(--lm-border); cursor: pointer; padding: 0; }
.lm-trust__dot.is-active { background: var(--lm-brand); }
.lm-trust__slides { position: relative; flex: 1; min-height: 180px; }
.lm-trust__slide { display: none; }
.lm-trust__slide.is-active { display: block; }
.lm-trust__quote-headline { font-family: var(--lm-serif); font-size: 24px; color: var(--lm-ink); font-weight: 500; margin: 0 0 12px; }
.lm-trust__quote-body { font-size: 14.5px; color: var(--lm-text-2); line-height: 1.75; margin: 0 0 16px; font-weight: 300; }
.lm-trust__author { font-size: 13px; color: var(--lm-ink); font-weight: 600; margin-bottom: 8px; }
@media (max-width: 859px) {
  .lm-trust { padding: 56px 24px; }
  .lm-trust__grid { grid-template-columns: 1fr; gap: 32px; text-align: center; }
  .lm-trust__heading { font-size: 28px; }
  .lm-trust__body-row { flex-direction: column-reverse; gap: 16px; }
  .lm-trust__dots { flex-direction: row; justify-content: center; }
}

/* ---------- Breadcrumb ---------- */
.lm-breadcrumb { display: flex; align-items: center; gap: 8px; padding: 14px var(--lm-side-pad); font-size: 12.5px; color: var(--lm-text-3); background: var(--lm-bg); }
.lm-breadcrumb a { color: var(--lm-text-3); }
.lm-breadcrumb a:hover { color: var(--lm-brand); }
.lm-breadcrumb__current { color: var(--lm-ink); }
/* Hidden on phones only: the announcement bar, sale marquee and header already
   take 141px before anything else, and the crumb pushed the product photo down
   to 184px. It stays on desktop, where the room is there and it aids
   navigation. */
@media (max-width: 859px) { .lm-breadcrumb { display: none; } }

/* ---------- Collection ---------- */
.lm-collection { background: var(--lm-bg); padding: 28px var(--lm-side-pad) 90px; }
.lm-collection__head { margin-bottom: 18px; }
.lm-collection__head--withtiers { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.lm-collection__head-text { flex: 1 1 auto; }
.lm-collection__head-tiers { flex: 0 0 360px; margin-bottom: 0; }
@media (max-width: 859px) {
  .lm-collection__head--withtiers { flex-direction: column; align-items: stretch; gap: 18px; }
  .lm-collection__head-tiers { flex: none; }
}
.lm-collection__title { font-family: var(--lm-serif); font-size: 46px; color: var(--lm-ink); font-weight: 500; margin: 0 0 4px; }
.lm-collection__desc { font-size: 14.5px; color: var(--lm-text-2); max-width: 640px; line-height: 1.7; font-weight: 300; }
.lm-collection__toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 14px 0; border-top: 1px solid var(--lm-border); border-bottom: 1px solid var(--lm-border); margin-bottom: 28px; }
.lm-collection__count { font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lm-text-3); font-weight: 600; }
.lm-collection__controls { display: flex; align-items: center; gap: 12px; }
.lm-select { padding: 10px 16px; border: 1px solid var(--lm-border); background: #FFFFFF; border-radius: var(--lm-radius-pill); font-family: var(--lm-sans); font-size: 13px; color: var(--lm-ink); cursor: pointer; }
.lm-promo-tile { grid-column: span 1; position: relative; display: flex; flex-direction: column; justify-content: space-between; background: var(--lm-brand); border-radius: var(--lm-radius-card); overflow: hidden; padding: 28px 22px; color: var(--lm-bg-alt); }
.lm-promo-tile__content { overflow: hidden; }
@media (max-width: 859px) { .lm-promo-tile { min-height: 320px; padding: 18px; } .lm-promo-tile__title { font-size: 20px !important; } }
.lm-promo-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.5; }
.lm-promo-tile__content { position: relative; z-index: 2; }
.lm-promo-tile__eyebrow { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 10px; opacity: 0.9; }
.lm-promo-tile__title { font-family: var(--lm-serif); font-size: 28px; font-style: italic; font-weight: 500; margin: 0 0 14px; line-height: 1.15; }
.lm-promo-tile__bullets { display: flex; flex-direction: column; gap: 9px; margin-top: 20px; }
.lm-promo-tile__bullet { display: flex; align-items: center; gap: 11px; text-align: left; background: rgba(255,255,255,0.95); color: var(--lm-brand); border-radius: var(--lm-radius-pill); padding: 10px 18px; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; line-height: 1.3; }
.lm-promo-tile__bullet-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lm-promo-tile__bullet-text { min-width: 0; }
@media (max-width: 859px) { .lm-promo-tile__bullet { font-size: 11px; padding: 8px 14px; gap: 9px; } }
.lm-promo-tile__link { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--lm-bg-alt); border-bottom: 1px solid var(--lm-bg-alt); padding-bottom: 3px; display: inline-block; }
.lm-collection__empty { padding: 80px 0; text-align: center; color: var(--lm-text-3); }
.lm-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 56px; }
.lm-pagination a, .lm-pagination span { padding: 10px 16px; border: 1px solid var(--lm-border); border-radius: var(--lm-radius-pill); font-size: 13px; color: var(--lm-ink); }
.lm-pagination .lm-current { background: var(--lm-brand); color: var(--lm-bg-alt); border-color: var(--lm-brand); }

/* ---------- PDP ---------- */
.lm-pdp {
  display: flex; flex-direction: row; gap: 56px;
  padding: 0 var(--lm-side-pad) 120px; align-items: flex-start;
}
.lm-pdp__media {
  flex: 1 1 58%; width: 58%; min-width: 0;
  position: sticky; top: 110px;
}
.lm-gallery {
  width: 100%; display: flex; flex-direction: row;
  align-items: flex-start; gap: 16px;
}
.lm-gallery__thumbcol { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 76px; flex-shrink: 0; min-height: 0; }
.lm-gallery__thumbscroll { width: 100%; height: 22px; border-radius: 6px; background: var(--lm-bg-alt); border: 1px solid var(--lm-border); cursor: pointer; display: none; align-items: center; justify-content: center; flex-shrink: 0; color: var(--lm-text-2); }
.lm-gallery__thumbscroll:hover { background: var(--lm-border); }
.lm-gallery__thumbscroll.is-needed { display: flex; }
.lm-gallery__thumbs { display: flex; flex-direction: column; gap: 10px; width: 100%; flex: 1 1 auto; min-height: 0; overflow-y: hidden; scroll-behavior: smooth; }
.lm-gallery__thumb { width: 100%; aspect-ratio: 4/5; overflow: hidden; border: 1px solid var(--lm-border); background: var(--lm-border); border-radius: 4px; cursor: pointer; padding: 0; flex-shrink: 0; }
.lm-gallery__thumb.is-active { border-color: var(--lm-brand); }
.lm-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
/* The 4/5 ratio still sets the width, but the height is capped to what fits
   under the header so the whole photo is visible without scrolling. `contain`
   rather than `cover`, because once the cap bites the box is shorter than the
   ratio and `cover` would crop the top and bottom off the garment. */
/* Transparent, not a tinted panel: photos vary in ratio, so `contain` leaves
   space at the sides of the narrow ones. Against the page background that
   space reads as breathing room; against a tinted box it reads as a border
   drawn around the product. */
.lm-gallery__main { position: relative; flex: 1; height: calc(100vh - 190px); max-height: 760px; min-height: 380px; overflow: hidden; background: transparent; }
.lm-gallery__main img { width: 100%; height: 100%; object-fit: contain; }
.lm-gallery__mobile { display: none; }
.lm-gallery__nav { position: absolute; top: 50%; right: 16px; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.9); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--lm-shadow-float); }

.lm-info-col { flex: 1 1 42%; width: 42%; }
.lm-info { position: sticky; top: 110px; }
.lm-purchased-row { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
/* flex-shrink: 0 on both. Without it the cluster was squeezed from 74px to 52px
   on a narrow column, so the avatars piled onto each other and crowded the text
   beside them. */
.lm-avatar-cluster { display: flex; flex: 0 0 auto; }
.lm-avatar-cluster img { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 2px solid var(--lm-bg); margin-left: -8px; }
.lm-avatar-cluster img:first-child { margin-left: 0; }
.lm-purchased-text { font-size: 12.5px; color: var(--lm-text-2); line-height: 1.5; }
.lm-purchased-text strong { color: var(--lm-ink); }
.lm-pdp__title { font-family: var(--lm-serif); font-size: 32px; color: var(--lm-ink); font-weight: 500; margin: 0 0 16px; }
.lm-pdp__reviews-link { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; }
.lm-pdp__stars { color: var(--lm-gold); font-size: 15px; letter-spacing: 0.05em; }
.lm-pdp__review-count { font-size: 13px; color: var(--lm-text-2); text-decoration: underline; }
.lm-pdp__rating-word { color: var(--lm-ink); font-weight: 600; }
.lm-pdp__review-sep { color: var(--lm-border); margin: 0 1px; }
.lm-pdp__pricerow { display: flex; align-items: baseline; gap: 12px; margin-bottom: 22px; }
.lm-pdp__price { font-size: 24px; color: var(--lm-ink); font-weight: 500; }
.lm-pdp__compare { font-size: 16px; color: var(--lm-text-tertiary); text-decoration: line-through; }
.lm-pdp__save {
  font-size: 11.5px; font-weight: 600; color: var(--lm-brand-dark);
  background: #EFE7DC; padding: 4px 10px; letter-spacing: 0.02em; white-space: nowrap;
}
.lm-pdp__highlights { display: flex; flex-direction: column; gap: 13px; margin-bottom: 28px; }
.lm-pdp__highlight { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 500; line-height: 1.35; color: var(--lm-ink); }
.lm-pdp__check { width: 24px; height: 24px; border-radius: 50%; background: var(--lm-brand); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lm-pdp__check svg { width: 15px; height: 15px; }
.lm-divider { height: 1px; background: var(--lm-border); margin: 26px 0; }
.lm-option-label { display: flex; align-items: center; justify-content: flex-start; gap: 10px; margin-bottom: 12px; }
.lm-option-label__name { font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--lm-text-2); font-weight: 600; }
.lm-size-guide { font-size: 12px; color: var(--lm-brand); text-decoration: underline; background: none; border: none; padding: 0; font-family: inherit; cursor: pointer; }

.lm-sizechart-modal { width: 640px; text-align: left; }
.lm-sizechart-modal__title { font-family: var(--lm-serif); font-size: 24px; color: var(--lm-ink); font-weight: 500; margin: 0 0 4px; }
.lm-sizechart-modal__unit { font-size: 12.5px; color: var(--lm-text-3); margin: 0 0 18px; }
.lm-sizechart-modal__note { font-size: 13px; font-weight: 600; color: var(--lm-ink); text-align: center; margin: 16px 0 0; line-height: 1.5; }
.lm-sizechart-modal__scroll { overflow-x: auto; }

/* ---------- The chart ----------
   Boxed cells make a spreadsheet. A jeweller's chart is set as a list: one
   hairline under each row, no vertical rules at all, column headings in small
   gold caps over a slightly firmer gold line, and the size itself in the serif
   so the eye lands on it first. Nothing decorative — only the grid removed. */
.lm-sizechart-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 14px; }
.lm-sizechart-table th,
.lm-sizechart-table td {
  padding: 13px 14px;
  text-align: center;
  border: 0;
  border-bottom: 1px solid var(--lm-border);
  /* Headings wrap at every width. Held on one line, "Inside diameter
     (inches)" pushed the third column past the edge of the panel: it scrolled,
     but nothing on screen said so, so the column simply looked missing. */
  white-space: normal;
}
.lm-sizechart-table tbody td,
.lm-sizechart-table tbody th { white-space: nowrap; }
.lm-sizechart-table thead th {
  background: none;
  font-family: var(--lm-sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lm-gold);
  padding-bottom: 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--lm-gold) 45%, transparent);
}
.lm-sizechart-table tbody th,
.lm-sizechart-table tbody td:first-child {
  background: none;
  font-family: var(--lm-serif);
  /* Cormorant sets old-style figures by default: the 1 drops to x-height and
     reads as a letter, so "11" looks like "ıı". Lining figures keep every
     digit the same height, which is the whole point of a size column. */
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
  font-size: 18px;
  font-weight: 500;
  color: var(--lm-ink);
}
.lm-sizechart-table tbody td { color: var(--lm-text-body); font-weight: 400; }
.lm-sizechart-table tbody tr:last-child th,
.lm-sizechart-table tbody tr:last-child td { border-bottom: 0; }

/* Phones and tablets. `white-space: normal` is the important one: headings like
   "Inside diameter (inches)" were held on one line, which forced the table wider
   than its box, so the last column fell outside with no sign it was there. */
@media (max-width: 859px) {
  .lm-sizechart-modal { padding: 22px 16px; }
  .lm-sizechart-table { font-size: 13px; }
  .lm-sizechart-table th, .lm-sizechart-table td { padding: 11px 6px; }
  .lm-sizechart-table thead th { font-size: 9.5px; letter-spacing: 0.1em; }
  .lm-sizechart-table tbody th, .lm-sizechart-table tbody td:first-child { font-size: 16px; }
}
.lm-swatch-row { display: flex; gap: 10px; margin-bottom: 26px; flex-wrap: wrap; }
.lm-swatch-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--lm-border); background: none; cursor: pointer; padding: 3px; display: flex; align-items: center; justify-content: center; }
.lm-swatch-btn.is-active { border: 2px solid var(--lm-ink); }
.lm-swatch-btn span { width: 100%; height: 100%; border-radius: 50%; display: block; }

.lm-swatch-photo {
  width: 68px; border: 1px solid var(--lm-border); border-radius: 8px; background: var(--lm-bg-alt);
  cursor: pointer; padding: 4px; display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.lm-swatch-photo.is-active { border: 2px solid var(--lm-ink); }
.lm-swatch-photo__img {
  width: 100%; aspect-ratio: 3/4; border-radius: 5px; background-size: cover; background-position: center top;
}
.lm-swatch-photo__name {
  font-size: 10px; color: var(--lm-text-2); text-align: center; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
/* A variant photo is a portrait shot of the piece, so the swatch box is 3/4.
   The birthstone crops come from one sheet of twelve rings lying on their
   side: wider than tall, and in a portrait box each would float in a field of
   empty background. These get a box the shape of the photograph instead, and
   room for the name to wrap - "January - Red Garnet" does not fit on one
   line at this width and an ellipsis would hide which stone it is. */
.lm-swatch-photo--wide { width: 82px; }
.lm-swatch-photo--wide .lm-swatch-photo__img { aspect-ratio: 3 / 2; background-position: center; }
.lm-swatch-photo--wide .lm-swatch-photo__name { white-space: normal; line-height: 1.25; }
.lm-size-row { display: flex; gap: 10px; margin-bottom: 26px; flex-wrap: wrap; }
.lm-size-btn { min-width: 48px; padding: 12px 16px; border: 1px solid var(--lm-border); background: #FFFFFF; cursor: pointer; font-family: var(--lm-sans); font-size: 13px; color: var(--lm-ink); border-radius: 6px; }
.lm-size-btn.is-active { border-color: var(--lm-brand); background: var(--lm-brand); color: #FFFFFF; }
.lm-size-btn:disabled { opacity: 0.4; cursor: not-allowed; text-decoration: line-through; }
.lm-pdp__app-block:empty { display: none; }
@media (max-width: 767px) {
  .lm-swatch-row {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; margin-bottom: 6px;
  }
  .lm-swatch-row::-webkit-scrollbar { display: none; }
  .lm-swatch-row .lm-swatch-btn, .lm-swatch-row .lm-swatch-photo { flex-shrink: 0; }
  .lm-size-row { flex-wrap: wrap; }
  .lm-size-btn { min-width: 0; flex: 1 1 calc(25% - 8px); padding: 12px 8px; }
  .lm-qty-row { margin-bottom: 18px; }
  .lm-qty-selector button { width: 34px; height: 34px; font-size: 15px; }
  .lm-qty-selector input, .lm-qty-selector input[type="number"] { width: 32px; font-size: 13px; }
}
.lm-scroll-track {
  display: none; height: 3px; background: var(--lm-border); border-radius: 2px;
  margin: 0 0 20px; position: relative; overflow: hidden;
}
.lm-scroll-thumb { position: absolute; top: 0; left: 0; height: 100%; background: var(--lm-brand); border-radius: 2px; }
@media (max-width: 767px) { .lm-scroll-track.is-needed { display: block; } }
.lm-stockline {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin-bottom: 10px; color: var(--lm-text-2); font-size: 14px; font-style: italic;
}
.lm-stockline[hidden] { display: none; }
.lm-stockline strong { font-style: italic; font-weight: 700; color: var(--lm-ink); margin: 0 2px; }
.lm-cta-row { display: flex; gap: 12px; margin-bottom: 24px; }
.lm-pdp__custom-liquid { margin-bottom: 24px; }
.lm-pdp__custom-liquid:empty { display: none; margin: 0; }
.lm-add-to-cart { flex: 1; background: var(--lm-brand); color: #FFFFFF; border: none; padding: 18px; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; cursor: pointer; border-radius: 6px; font-family: var(--lm-sans); transition: background 0.3s ease; }
.lm-add-to-cart:hover { background: var(--lm-brand-dark); }
.lm-qty-row { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.lm-qty-selector { display: inline-flex; align-items: center; border: 1px solid var(--lm-border); border-radius: 6px; }
.lm-qty-selector button { width: 44px; height: 44px; background: none; border: none; cursor: pointer; font-size: 18px; color: var(--lm-ink); }
.lm-qty-selector input,
.lm-qty-selector input[type="number"] {
  width: 48px; text-align: center; border: none; outline: none;
  font-size: 14px; font-family: var(--lm-sans); background: none;
  color: var(--lm-ink); -moz-appearance: textfield;
}
.lm-qty-selector input::-webkit-outer-spin-button,
.lm-qty-selector input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Proof row: each item is its own bordered tile (not one wrapping card) */
.lm-proof-card { padding: 10px 0 4px; margin-bottom: 26px; }
.lm-proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.lm-proof-item {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 6px; border: 1px solid var(--lm-border); border-radius: 8px;
  background: var(--lm-bg-alt); padding: 18px 12px;
}
.lm-proof-icon { display: flex; flex-shrink: 0; }
.lm-proof-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #6B9A5C;
  flex-shrink: 0; animation: lm-stock-pulse 1.8s infinite;
}
@keyframes lm-stock-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}
.lm-proof-item__value { font-size: 13.5px; font-weight: 600; color: var(--lm-ink); }
/* Amber rather than red: urgent enough to catch the eye in the proof row,
   without reading as an error state. Declared after the base rule so it wins
   without needing !important. */
.lm-proof-item__value--low { color: #C2661C; }
.lm-proof-dot--low { background: #C2661C; }
.lm-proof-item__label { font-size: 12px; color: var(--lm-text-3); }

.lm-pdp-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; max-width: 1200px; margin: 0 auto; padding: 48px var(--lm-side-pad); border-top: 1px solid var(--lm-border); }
.lm-pdp-trust__item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; font-size: 12px; color: var(--lm-text-2); font-weight: 500; }
@media (max-width: 859px) { .lm-pdp-trust { grid-template-columns: repeat(2, 1fr); gap: 20px; padding: 32px 24px; } }

.lm-pdp-faq { max-width: 760px; margin: 0 auto; padding: 64px var(--lm-side-pad); }
.lm-pdp-faq__title { font-family: var(--lm-serif); font-size: 30px; color: var(--lm-ink); font-weight: 500; text-align: center; margin: 0 0 28px; }
@media (max-width: 859px) { .lm-pdp-faq { padding: 48px 24px; } .lm-pdp-faq__title { font-size: 24px; } }
@media (max-width: 859px) {
  .lm-proof-card { padding: 8px 0 4px; }
  .lm-proof-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .lm-proof-item { padding: 10px 6px; gap: 4px; }
  .lm-proof-item__value { font-size: 11.5px; }
  .lm-proof-item__label { font-size: 10px; }
}

/* Sticky add-to-cart bar */
.lm-sticky-add { position: fixed; top: var(--lm-header-h, 118px); left: 0; right: 0; background: var(--lm-bg-alt); border-bottom: 1px solid var(--lm-border); padding: 14px var(--lm-side-pad); display: flex; align-items: center; justify-content: flex-end; gap: 16px; z-index: 95; transform: translateY(-120%); transition: transform 0.3s ease; box-shadow: 0 4px 20px rgba(28,30,28,0.08); }
.lm-sticky-add.is-visible { transform: translateY(0); }
.lm-sticky-add__info { display: flex; align-items: center; gap: 14px; margin-right: auto; }
.lm-sticky-add__img { width: 44px; height: 54px; border-radius: 4px; overflow: hidden; background: var(--lm-border); }
.lm-sticky-add__img img { width: 100%; height: 100%; object-fit: cover; }
.lm-sticky-add__name { font-size: 14px; font-weight: 500; color: var(--lm-ink); }
.lm-sticky-add__price { font-size: 13px; color: var(--lm-brand); }
.lm-sticky-add__btn { background: var(--lm-brand); color: #FFFFFF; border: none; padding: 14px 32px; font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; cursor: pointer; border-radius: 6px; white-space: nowrap; }
.lm-sticky-add__options { display: flex; gap: 8px; }
.lm-sticky-add__select { border: none; border-bottom: 1px solid var(--lm-text-3); background: transparent; border-radius: 0; padding: 4px 16px 4px 0; font-size: 12.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--lm-ink); cursor: pointer; }
@media (max-width: 859px) {
  /* Docked to the bottom on phones, within thumb reach, instead of clamped
     under the header where it covers the product the moment it appears. It
     slides down out of view rather than up. */
  .lm-sticky-add {
    top: auto; bottom: 0; border-bottom: none; border-top: 1px solid var(--lm-border);
    transform: translateY(120%); box-shadow: 0 -4px 20px rgba(28,30,28,0.10);
    gap: 10px;
    padding: 10px var(--lm-side-pad) calc(10px + env(safe-area-inset-bottom, 0px));
    /* Above the live chat bubble, which otherwise floats over the Add button
       and cuts the label in half. The chat is reachable everywhere else. */
    z-index: 2147483000;
  }
  .lm-sticky-add__info { display: none; }
  .lm-sticky-add__options { display: flex; flex: 1; gap: 6px; min-width: 0; }
  .lm-sticky-add__select { flex: 1; min-width: 0; font-size: 11px; padding: 4px 4px; }
  .lm-sticky-add__btn { flex: 1.1; padding: 12px 14px; white-space: normal; }
}

.lm-pdp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; max-width: 1100px; margin: 0 auto; padding: 56px var(--lm-side-pad); text-align: center; }
.lm-pdp-stats__num { font-family: var(--lm-serif); font-size: 34px; color: var(--lm-ink); font-weight: 500; }
.lm-pdp-stats__label { font-size: 12.5px; color: var(--lm-text-3); margin-top: 6px; }
@media (max-width: 859px) { .lm-pdp-stats { grid-template-columns: repeat(2, 1fr); gap: 28px; padding: 40px 24px; } .lm-pdp-stats__num { font-size: 26px; } }

/* Accordion */
.lm-accordions { border-top: 1px solid var(--lm-border); }
.lm-accordion { border-bottom: 1px solid var(--lm-border); }
.lm-accordion__head { width: 100%; position: relative; display: flex; align-items: center; justify-content: center; text-align: center; padding: 19px 34px; background: none; border: none; cursor: pointer; font-family: var(--lm-sans); font-size: 12px; font-weight: 500; letter-spacing: 0.18em; color: var(--lm-brand); text-transform: uppercase; }
.lm-accordion__icon { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: flex; color: var(--lm-brand); transition: transform 0.3s ease; }
.lm-accordion.is-open .lm-accordion__icon { transform: translateY(-50%) rotate(180deg); }
/* The one promise on this page a large shop cannot copy, so it gets a block
   of its own rather than a centred line of grey text. */
.lm-service-row {
  display: flex; align-items: flex-start; gap: 14px; position: relative;
  margin: 20px 0 4px; padding: 16px 18px 16px 20px;
  border: 1px solid color-mix(in srgb, var(--lm-gold) 30%, transparent);
  border-radius: 10px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--lm-gold) 7%, var(--lm-bg-panel)) 0%,
    var(--lm-bg-panel) 100%);
  overflow: hidden; text-align: left; cursor: default;
}
.lm-service-row::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--lm-gold); }
.lm-service-row__icon {
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 30px; width: 30px; height: 30px; margin-top: 1px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--lm-gold) 45%, transparent);
  background: color-mix(in srgb, var(--lm-gold) 10%, transparent);
  color: var(--lm-gold);
}
.lm-service-row__icon svg { width: 16px; height: 16px; }
.lm-service-row__body { flex: 1 1 auto; min-width: 0; }
.lm-service-row__title {
  font-family: var(--lm-serif); font-size: 19px; font-weight: 500;
  letter-spacing: 0; text-transform: none; color: var(--lm-ink); line-height: 1.3;
}
.lm-service-row__text { font-size: 15px; line-height: 1.65; color: var(--lm-text-body); font-weight: 400; margin-top: 6px; text-align: left; }
.lm-service-row__text p { margin: 0; }
.lm-service-row__text p { margin: 0; }
.lm-accordion__body { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.lm-accordion.is-open .lm-accordion__body { max-height: 1200px; }
.lm-accordion__inner { padding: 0 0 24px; font-size: 14px; line-height: 1.8; color: var(--lm-text-2); font-weight: 300; }

.lm-pdp-shipping { max-width: 760px; margin: 0 auto; padding: 8px var(--lm-side-pad) 24px; }
.lm-accordion--standalone .lm-accordion__head { font-size: 16px; }
@media (max-width: 859px) { .lm-pdp-shipping { padding: 8px 24px 18px; } }
.lm-fit-stats { display: flex; gap: 16px; margin-top: 20px; }
.lm-fit-stat { flex: 1; background: var(--lm-bg-alt); border: 1px solid var(--lm-border); border-radius: var(--lm-radius-card); padding: 18px; text-align: center; }
.lm-fit-stat__num { font-family: var(--lm-serif); font-size: 32px; color: var(--lm-brand); font-weight: 600; }
.lm-fit-stat__label { font-size: 12px; color: var(--lm-text-3); margin-top: 4px; line-height: 1.4; }
.lm-readmore-btn { background: none; border: none; color: var(--lm-brand); font-size: 13px; cursor: pointer; text-decoration: underline; padding: 8px 0 0; font-family: var(--lm-sans); }
.lm-clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

@media (max-width: 859px) {
  .lm-pdp { flex-direction: column; gap: 32px; padding: 0 24px 32px; }
  /* Swipe carousel replaces the thumbnail rail on phones. Slides are 84% wide
     and snap to centre, so the previous and next photo stay visible at the
     edges — that peek is the whole point, it is what says "swipe me". */
  .lm-gallery__thumbcol, .lm-gallery__main { display: none; }
  /* Stock line pulled up onto the SIZE row (moved there by initMobileOrder).
     SIZE and the count sit together on the left, Size Guide stays hard right. */
  .lm-option-label--with-stock { flex-wrap: wrap; row-gap: 4px; }
  .lm-option-label--with-stock .lm-option-label__name { order: 1; }
  .lm-option-label--with-stock .lm-stockline {
    order: 2; margin-right: auto; margin-bottom: 0; margin-left: 14px;
    justify-content: flex-start; gap: 5px; font-size: 13px; min-width: 0;
  }
  .lm-option-label--with-stock .lm-stockline svg { width: 14px; height: 14px; flex: none; }
  .lm-option-label--with-stock .lm-size-guide { order: 3; }

  .lm-gallery__mobile { display: block; width: 100%; }
  /* The 8% side padding is what lets the first and last slide sit centred.
     Without it the track starts flush left, so slide one could only ever show
     a neighbour on its right. Slides are 100% of the padded content box, which
     works out to the same 84% of the gallery as before. */
  .lm-gallery__slides {
    display: flex; align-items: flex-start; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 2px;
    padding-inline: 8%;
  }
  .lm-gallery__slides::-webkit-scrollbar { display: none; }
  /* One fixed ratio for every slide. Your photos are a mix of 4:5 studio shots
     and 9:16 model shots, so a track that sizes to the tallest left a block of
     empty space under the shorter ones — that was the gap under the image. */
  .lm-gallery__slide { flex: 0 0 100%; scroll-snap-align: center; border-radius: 4px; overflow: hidden; background: var(--lm-bg-alt); aspect-ratio: 4/5; }
  .lm-gallery__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .lm-gallery__dots { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
  .lm-gallery__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lm-border); border: none; padding: 0; }
  .lm-gallery__dot.is-active { background: var(--lm-brand); }
  .lm-gallery__counter { font-size: 12px; color: var(--lm-text-3); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
  .lm-pdp__media { flex: none; width: 100%; position: static; }
  .lm-gallery { flex: none; width: 100%; flex-direction: column-reverse; align-items: stretch; gap: 12px; position: static; }
  .lm-gallery__main { width: 100%; aspect-ratio: 4/5; }
  .lm-gallery__thumbcol { aspect-ratio: auto; width: 100%; flex-direction: row; align-items: center; gap: 4px; height: auto; }
  .lm-gallery__thumbscroll { width: 20px; height: 40px; flex-shrink: 0; }
  .lm-gallery__thumbscroll svg { transform: rotate(-90deg); }
  .lm-gallery__thumbscroll[data-thumb-scroll-down] svg { transform: rotate(90deg); }
  .lm-gallery__thumbs { display: flex; flex-direction: row; gap: 6px; width: auto; flex: 1 1 auto; min-width: 0; overflow-x: hidden; overflow-y: visible; }
  .lm-gallery__thumbs [data-thumb] { flex: 0 0 calc((100% - 30px) / 6); }
  /* Title, price and rating move above the photo on phones. The price used to
     land at 793px on an 812px screen — just out of sight — so a shopper had to
     scroll before learning what the item costs, which is the whole argument on
     a discounted store. `display: contents` dissolves the two wrapper divs so
     their children become flex items of .lm-pdp and can be ordered directly. */
  /* Restored: these two were lost in an earlier edit, which left the info
     column at its desktop 42% — 137px of a 375px screen. That is what made the
     page look half missing with enormous gaps, because every block below the
     gallery was wrapping inside a narrow strip. */
  .lm-info-col { flex: none; width: 100%; }
  .lm-info { position: static; }

  /* The title, rating and price are physically moved above the gallery by
     theme.js on phones. An earlier attempt used `display: contents` on the two
     wrapper divs plus `order`, which worked for ordering but turned every block
     on the page into a flex item — flex items refuse to shrink below their
     content, so the description ran off the screen, and a single flex gap
     started applying between a dozen blocks instead of two. Moving three nodes
     leaves every wrapper, width and margin exactly as the theme intended. */
  .lm-pdp__title { font-size: 23px; line-height: 1.25; margin-bottom: 6px; }
  .lm-pdp--reordered .lm-pdp__title,
  .lm-pdp--reordered .lm-pdp__reviews-link,
  .lm-pdp--reordered .lm-pdp__pricerow { width: 100%; }
  /* The column's 32px gap was written for two children. With the three moved
     blocks it applies five times, so spacing is set per block instead. */
  .lm-pdp--reordered { gap: 0; }
  .lm-pdp--reordered .lm-pdp__title { margin-bottom: 6px; }
  .lm-pdp--reordered .lm-pdp__reviews-link { display: block; margin-bottom: 12px; }
  .lm-pdp--reordered .lm-pdp__pricerow { margin-bottom: 16px; }
  .lm-pdp--reordered .lm-gallery { margin-bottom: 20px; }
  .lm-pdp > * { min-width: 0; }
  .lm-pdp__title { font-size: 26px; }
}

/* ---------- Customer photo marquee ---------- */
.lm-marquee-wrap { padding: 4px 0 24px; }
.lm-marquee__title {
  font-family: var(--lm-serif); font-size: 17px; color: var(--lm-ink);
  font-weight: 500; margin-bottom: 12px;
}
.lm-marquee__mask { overflow: hidden; width: 100%; }
.lm-marquee__track {
  --lm-marquee-item: 140px;
  --lm-marquee-gap: 8px;
  --lm-marquee-count: 5; /* number of unique photos */
  display: flex; gap: var(--lm-marquee-gap); width: max-content;
  animation: lm-marquee-scroll 22s linear infinite;
}
.lm-marquee-wrap:hover .lm-marquee__track { animation-play-state: paused; }
.lm-marquee__item {
  width: var(--lm-marquee-item); height: 175px; flex-shrink: 0;
  overflow: hidden; background: var(--lm-border);
}
.lm-marquee__item img { width: 100%; height: 100%; object-fit: cover; }

/* Shift by exactly one full set (items + the gap that follows each) so the
   duplicated second set lands pixel-perfectly where the first began. */
@keyframes lm-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--lm-marquee-count) * (var(--lm-marquee-item) + var(--lm-marquee-gap)))); }
}
@media (prefers-reduced-motion: reduce) {
  .lm-marquee__track { animation: none; }
  .lm-marquee__mask { overflow-x: auto; }
}

/* ---------- Reviews (inline + drawer) ---------- */
.lm-reviews__head { text-align: center; margin-bottom: 40px; }
.lm-eyebrow--center { text-align: center; }
.lm-reviews__title {
  font-family: var(--lm-serif); font-size: 36px; color: var(--lm-ink);
  font-weight: 500; margin: 0 0 40px; text-align: center;
}
@media (max-width: 859px) { .lm-reviews__title { font-size: 28px; } }
@media (max-width: 767px) {
  .lm-reviews__head { margin-bottom: 20px; }
  .lm-reviews__title { margin-bottom: 20px; }
}
.lm-reviews { background: var(--lm-bg-alt); padding: 90px var(--lm-side-pad); border-top: 1px solid var(--lm-border); }
.lm-reviews__app { max-width: 1100px; margin: 0 auto; }
.lm-reviews__placeholder { max-width: 1100px; margin: 0 auto; }
.lm-reviews__summary { display: flex; gap: 48px; align-items: center; justify-content: center; flex-wrap: wrap; padding-bottom: 40px; border-bottom: 1px solid var(--lm-border); margin-bottom: 40px; }
.lm-reviews__score { text-align: center; }
.lm-reviews__score-num { font-family: var(--lm-serif); font-size: 56px; color: var(--lm-ink); font-weight: 600; line-height: 1; }
.lm-reviews__score-stars { color: var(--lm-gold); font-size: 18px; margin: 8px 0; }
.lm-stars-partial { position: relative; display: inline-block; line-height: 1; white-space: nowrap; }
.lm-stars-partial__base { color: var(--lm-border); }
.lm-stars-partial__fill { position: absolute; top: 0; left: 0; overflow: hidden; white-space: nowrap; color: var(--lm-gold); }
.lm-reviews__score-count { font-size: 13px; color: var(--lm-text-3); }
.lm-reviews__bars { flex: 1; min-width: 320px; max-width: 420px; display: flex; flex-direction: column; gap: 12px; }
.lm-reviews__bar-row { display: flex; align-items: center; gap: 14px; font-size: 13.5px; color: var(--lm-text-2); }
.lm-reviews__bar-track { flex: 1; height: 12px; background: var(--lm-border); border-radius: 6px; overflow: hidden; }
.lm-reviews__bar-fill { display: block; height: 100%; background: var(--lm-gold); }
.lm-reviews__bar-count { min-width: 24px; text-align: right; color: var(--lm-text-3); }
.lm-reviews__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
.lm-reviews__grid[data-reviews-inline-grid] > *:nth-child(n+5) { display: none; }
@media (max-width: 767px) {
  .lm-reviews { padding: 48px var(--lm-side-pad); }
  .lm-reviews__summary { gap: 20px; padding-bottom: 20px; margin-bottom: 24px; }
  .lm-reviews__score-num { font-size: 40px; }
  .lm-reviews__score-stars { font-size: 15px; margin: 4px 0; }
  .lm-reviews__bars { min-width: 0; width: 100%; gap: 8px; }
  .lm-reviews__bar-row { gap: 8px; font-size: 12px; }
  .lm-reviews__bar-track { height: 8px; }
}
.lm-reviews__controls { display: flex; gap: 10px; margin-bottom: 32px; flex-wrap: wrap; align-items: center; }
.lm-reviews__controls .lm-reviews-drawer__search { flex: 1; min-width: 200px; }
.lm-reviews__sort { display: flex; align-items: center; gap: 6px; border: 1px solid var(--lm-border); border-radius: var(--lm-radius-pill); padding: 10px 16px; font-size: 13px; color: var(--lm-ink); background: none; cursor: pointer; font-family: var(--lm-sans); }
.lm-review-card {
  background: #FFFFFF; border: 1px solid var(--lm-border); border-radius: 10px;
  padding: 20px; box-shadow: 0 1px 3px rgba(28,30,28, 0.05);
}
.lm-review-card__header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.lm-review-card__avatar {
  width: 34px; height: 34px; border-radius: 50%; color: #FFFFFF;
  font-size: 13px; font-weight: 600; display: flex; align-items: center;
  justify-content: center; flex-shrink: 0;
}
.lm-review-card__avatar-img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
/* Portrait, and not clickable: customer photos are people wearing the item,
   which a landscape crop cuts off at the knees. No zoom either — the card is
   proof, not a gallery. */
.lm-review-card__photo {
  width: 100%; max-width: 170px; aspect-ratio: 3/4; height: auto; object-fit: cover; border-radius: 8px;
  margin-top: 10px; display: block; border: 1px solid var(--lm-border);
}

.lm-photo-lightbox-backdrop { z-index: 500; }
.lm-photo-lightbox {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -46%); z-index: 501;
  opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}
.lm-photo-lightbox.is-open { opacity: 1; visibility: visible; transform: translate(-50%, -50%); }
.lm-photo-lightbox img { display: block; max-width: 90vw; max-height: 85vh; border-radius: var(--lm-radius-panel); box-shadow: var(--lm-shadow-modal); }
.lm-photo-lightbox .lm-modal__close { position: fixed; top: 24px; right: 28px; color: #FFFFFF; font-size: 32px; }
.lm-review-card__avatar--anon { background: var(--lm-border); color: var(--lm-text-3); font-size: 16px; }
.lm-reviews-drawer__summary {
  text-align: center; padding-bottom: 24px; margin-bottom: 20px; border-bottom: 1px solid var(--lm-border);
}
.lm-reviews-drawer__summary .lm-reviews__score-num { font-family: var(--lm-serif); font-size: 36px; color: var(--lm-ink); }
.lm-reviews-drawer__summary .lm-reviews__score-stars { color: var(--lm-gold); font-size: 15px; margin: 4px 0; }
.lm-reviews-drawer__summary .lm-reviews__score-count { font-size: 13px; color: var(--lm-text-3); margin-bottom: 16px; }
.lm-review-card__name { font-size: 13.5px; font-weight: 600; color: var(--lm-ink); }
.lm-review-card__date { font-size: 11.5px; color: var(--lm-text-3); }
.lm-review-card__date { font-size: 11.5px; color: var(--lm-text-3); margin-top: 2px; }
.lm-review-card__badgerow {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 12px;
}
.lm-review-card__verified {
  font-size: 11px; color: var(--lm-text-body); display: flex; align-items: center; gap: 4px;
}
.lm-review-card__stars { color: var(--lm-gold); font-size: 12px; letter-spacing: 0.03em; }
.lm-review-card__text {
  font-size: 13.5px; line-height: 1.6; color: var(--lm-text-body); margin: 0; font-weight: 300;
}
.lm-review-card__seemore {
  color: var(--lm-text-3); font-weight: 500; cursor: pointer; text-decoration: underline;
  background: none; border: none; padding: 0; font-size: 13px; margin-top: 4px; display: none;
}
.lm-review-card__seemore.is-visible { display: inline-block; }
.lm-reviews__actions { display: flex; gap: 12px; justify-content: center; margin-top: 40px; }
.lm-btn-outline { border: 1px solid var(--lm-brand); background: none; color: var(--lm-brand); padding: 14px 28px; font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; cursor: pointer; border-radius: var(--lm-radius-pill); font-family: var(--lm-sans); }
.lm-btn-outline:hover { background: var(--lm-brand); color: var(--lm-bg-alt); }
@media (max-width: 1099px) { .lm-reviews__grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 859px) { .lm-reviews { padding: 64px 24px; } .lm-reviews__grid { grid-template-columns: 1fr; } }

/* ---------- Reviews drawer ---------- */
.lm-reviews-drawer__toolbar { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.lm-reviews-drawer__filterrow { margin-bottom: 20px; }
.lm-reviews-drawer__filterrow .lm-select { width: 100%; }
.lm-reviews-drawer__search { flex: 1; min-width: 160px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--lm-border); border-radius: var(--lm-radius-pill); padding: 10px 16px; color: var(--lm-text-3); }
.lm-reviews-drawer__search input { border: none; outline: none; background: none; font-size: 13px; color: var(--lm-ink); font-family: var(--lm-sans); width: 100%; }
.lm-reviews-drawer__item { padding: 18px 0; border-bottom: 1px solid var(--lm-border); }
.lm-reviews-drawer__stars { color: var(--lm-gold); font-size: 13px; margin-bottom: 8px; }
.lm-reviews-drawer__text { font-size: 13.5px; line-height: 1.7; color: var(--lm-text-body); margin: 0 0 10px; font-weight: 300; }
.lm-reviews-drawer__empty { text-align: center; color: var(--lm-text-3); font-size: 13px; padding: 40px 0; }

/* Reviews drawer */
.lm-reviews-drawer { position: fixed; top: 0; right: 0; height: 100%; width: 560px; max-width: 96vw; background: var(--lm-bg-alt); z-index: 351; box-shadow: var(--lm-shadow-modal); transform: translateX(100%); transition: transform 0.35s ease; display: flex; flex-direction: column; }
.lm-reviews-drawer.is-open { transform: translateX(0); }

/* Write review modal */
.lm-modal-backdrop { position: fixed; inset: 0; background: rgba(28,30,28,0.4); z-index: 360; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; }
.lm-modal-backdrop.is-open { opacity: 1; visibility: visible; }
.lm-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -46%); background: var(--lm-bg-alt); border-radius: var(--lm-radius-panel); box-shadow: var(--lm-shadow-modal); z-index: 361; width: 440px; max-width: 92vw; padding: 32px; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease; }
.lm-modal.is-open { opacity: 1; visibility: visible; transform: translate(-50%, -50%); }
.lm-modal__close { position: absolute; top: 18px; right: 18px; background: none; border: none; font-size: 24px; color: var(--lm-text-3); cursor: pointer; }
.lm-modal__title { font-family: var(--lm-serif); font-size: 26px; color: var(--lm-ink); font-weight: 500; margin: 0 0 20px; }

.lm-cart-modal { text-align: left; }
.lm-cart-modal__head { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.lm-cart-modal__img { width: 64px; height: 64px; border-radius: 8px; overflow: hidden; background: var(--lm-border); flex-shrink: 0; }
.lm-cart-modal__img img { width: 100%; height: 100%; object-fit: cover; }
.lm-cart-modal__title { font-family: var(--lm-serif); font-size: 22px; color: var(--lm-ink); font-weight: 500; }
.lm-cart-modal__group { margin-bottom: 20px; }
.lm-cart-modal__label { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--lm-text-2); margin-bottom: 10px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
/* The same Size Guide that sits beside the size on the product page, so
   nobody has to leave the cart to look a measurement up. It opens the chart
   in this window, over the options, with a way back. */
.lm-cart-modal__guide {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 11.5px; font-weight: 500; letter-spacing: 0.04em;
  text-transform: none; color: var(--lm-brand); text-decoration: underline;
  text-underline-offset: 3px; flex-shrink: 0;
}
.lm-cart-modal__wacht { text-align: center; color: var(--lm-text-3); font-size: 13px; padding: 24px 0; }
/* Lifted out of the product page, so it arrives with that page's own classes
   and only needs room to breathe and somewhere to scroll. */
.lm-cart-modal__chart { max-height: 50vh; overflow-y: auto; }
.lm-cart-modal__chart .lm-sizechart-modal__title { font-family: var(--lm-serif); font-size: 20px; color: var(--lm-ink); font-weight: 500; margin: 0 0 14px; }
/* A swatch in here is a control in a row of controls, not a card in a grid:
   the product page can spare 82px for one, a 380px drawer cannot. */
.lm-cart-modal__row .lm-swatch-photo--wide { width: 74px; }
.lm-cart-modal__row { display: flex; gap: 10px; flex-wrap: wrap; }
.lm-cart-modal__opt { margin-bottom: 0; }
.lm-cart-modal__actions { display: flex; gap: 12px; margin-top: 8px; }
.lm-cart-modal__actions .lm-btn-primary,
.lm-cart-modal__actions .lm-btn-secondary { flex: 1; border-radius: 6px; padding: 15px 20px; }
/* Single action, so it takes the full width of the dialog. */
.lm-cart-modal__actions .lm-btn-primary:only-child { width: 100%; }
.lm-star-picker { display: flex; gap: 6px; margin-bottom: 20px; }
.lm-star-picker button { background: none; border: none; font-size: 30px; color: var(--lm-border); cursor: pointer; padding: 0; line-height: 1; }
.lm-star-picker button.is-lit { color: var(--lm-gold); }
.lm-textarea { width: 100%; min-height: 100px; padding: 13px 16px; border: 1px solid var(--lm-border); background: #FFFFFF; font-family: var(--lm-sans); font-size: 14px; color: var(--lm-ink); border-radius: 6px; outline: none; resize: vertical; margin-bottom: 14px; }

/* ---------- Related / recently viewed ---------- */
.lm-carousel-section { background: var(--lm-bg); padding: 56px var(--lm-side-pad); }
.lm-carousel { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
@media (max-width: 1139px) { .lm-carousel { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 859px) { .lm-carousel { grid-template-columns: 1fr; } .lm-carousel-section { padding: 56px 24px; } }

/* ---------- Content pages (About / Contact / generic) ---------- */
.lm-page { background: var(--lm-bg); padding: 90px var(--lm-side-pad); }
.lm-page__inner { max-width: 760px; margin: 0 auto; }
.lm-page__title { font-family: var(--lm-serif); font-size: 46px; color: var(--lm-ink); font-weight: 500; margin: 0 0 28px; }
.lm-rte { font-size: 15.5px; line-height: 1.85; color: var(--lm-text-body); font-weight: 300; }
.lm-rte h2 { font-family: var(--lm-serif); font-size: 30px; color: var(--lm-ink); font-weight: 500; margin: 40px 0 16px; }
.lm-rte h3 { font-family: var(--lm-serif); font-size: 22px; color: var(--lm-ink); font-weight: 500; margin: 28px 0 12px; }
.lm-rte a { border-bottom: 1px solid var(--lm-brand); }
.lm-rte img { border-radius: var(--lm-radius-card); margin: 20px 0; }
@media (max-width: 859px) { .lm-page { padding: 56px 24px; } .lm-page__title { font-size: 34px; } }


/* ---------- Contact page ---------- */
.lm-contact-intro { padding: 20px var(--lm-side-pad) 64px; max-width: 720px; }
.lm-contact-faq-jump { display: inline-block; margin-top: 20px; font-size: 14px; color: var(--lm-ink); border-bottom: 1px solid var(--lm-brand); }
.lm-contact-layout {
  display: flex; flex-direction: row; gap: 64px;
  padding: 0 var(--lm-side-pad) 100px; align-items: flex-start;
}
.lm-contact-form-col { flex: 1 1 60%; }
.lm-contact-info-col { flex: 0 0 300px; }
.lm-contact-form { display: flex; flex-direction: column; gap: 20px; }
.lm-form-row { display: flex; gap: 20px; }
.lm-field { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.lm-label { font-size: 13px; color: var(--lm-brand); font-weight: 500; }
.lm-optional { color: var(--lm-text-3); font-weight: 400; }
.lm-contact-form .lm-input,
.lm-contact-form .lm-textarea {
  padding: 14px 16px; border: 1px solid var(--lm-border); background: var(--lm-bg-alt);
  color: var(--lm-ink); font-size: 14.5px; font-family: var(--lm-sans);
  outline: none; border-radius: 0; width: 100%;
}
.lm-contact-form .lm-textarea { resize: vertical; min-height: 140px; }
.lm-contact-form .lm-input:focus,
.lm-contact-form .lm-textarea:focus { border-color: var(--lm-brand); }
.lm-success-box {
  background: var(--lm-success-bg, #DCF0D6); border: 1px solid var(--lm-sale-green);
  padding: 20px; color: var(--lm-ink);
}
.lm-success-box__title { font-weight: 600; margin-bottom: 6px; }
.lm-form-errors { color: var(--lm-strike); font-size: 13.5px; }

.lm-contact-card {
  background: var(--lm-bg-alt); border: 1px solid var(--lm-border);
  padding: 28px; display: flex; flex-direction: column; gap: 22px;
}
.lm-contact-card__label {
  font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--lm-text-3); font-weight: 600; margin-bottom: 6px;
}
.lm-contact-card__value { font-size: 14.5px; color: var(--lm-ink); }

.lm-contact-trust { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; background: var(--lm-bg-alt); border: 1px solid var(--lm-border); padding: 24px; margin-top: 20px; }
.lm-contact-trust__item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; font-size: 11.5px; font-weight: 600; color: var(--lm-text-2); }

.lm-faq { background: var(--lm-bg-alt); padding: 100px var(--lm-side-pad); border-top: 1px solid var(--lm-border); scroll-margin-top: 90px; }
.lm-faq__inner { max-width: 780px; margin: 0 auto; }
.lm-faq__title {
  font-family: var(--lm-serif); font-size: 36px; color: var(--lm-ink);
  font-weight: 500; margin: 0 0 40px; text-align: center;
}
@media (max-width: 859px) {
  .lm-contact-intro { padding: 20px 24px 48px; }
  .lm-contact-layout { flex-direction: column; gap: 40px; padding: 0 24px 72px; }
  .lm-contact-info-col { flex: none; width: 100%; }
  .lm-form-row { flex-direction: column; gap: 20px; }
  .lm-faq { padding: 64px 24px; }
  .lm-faq__title { font-size: 28px; }
}


/* ---------- About page chapters ---------- */
.lm-chapter { padding: 90px var(--lm-side-pad); border-top: 1px solid var(--lm-border); }
.lm-chapter--light { background: var(--lm-bg-alt); }
.lm-chapter--alt { background: var(--lm-bg); }
.lm-chapter__inner { max-width: 680px; margin: 0 auto; }
.lm-chapter__heading {
  font-family: var(--lm-serif); font-size: 32px; color: var(--lm-ink);
  font-weight: 500; margin: 0 0 20px; line-height: 1.25;
}
.lm-signature { background: var(--lm-brand-dark); padding: 100px var(--lm-side-pad); text-align: center; }
.lm-signature__body { font-size: 15px; line-height: 1.8; color: var(--lm-text-on-dark-muted, #C9BCAE); max-width: 640px; margin: 0 auto 36px; font-weight: 300; }
.lm-signature__label { font-size: 14px; color: var(--lm-footer-muted); margin: 0 0 10px; }
.lm-signature__name {
  font-family: var(--lm-serif); font-style: italic; font-size: 34px;
  color: var(--lm-bg-alt); margin: 0; font-weight: 500;
}
.lm-about-cta {
  background: var(--lm-bg-alt); border-top: 1px solid var(--lm-border);
  padding: 90px var(--lm-side-pad); text-align: center;
}
.lm-about-cta__heading {
  font-family: var(--lm-serif); font-size: 34px; color: var(--lm-ink);
  font-weight: 500; margin: 0 0 28px;
}
@media (max-width: 859px) {
  .lm-chapter { padding: 56px 24px; }
  .lm-chapter__heading { font-size: 26px; }
  .lm-signature { padding: 56px 24px; }
  .lm-about-cta { padding: 56px 24px; }
  .lm-about-cta__heading { font-size: 26px; }
}


/* ---------- Farewell story (The Final Chapter) ---------- */
/* Colours come from the section's own settings via the inline custom
   properties, so a merchant can run this block light or dark without a
   second section. The fallbacks keep it readable if either is cleared. */
.lm-farewell {
  background: var(--lm-farewell-bg, var(--lm-ink));
  color: var(--lm-farewell-fg, var(--lm-bg));
  padding: clamp(56px, 4vw + 40px, 112px) var(--lm-side-pad);
}
.lm-farewell__inner { display: flex; flex-direction: column; gap: 40px; }
.lm-farewell--with-image .lm-farewell__inner {
  display: grid;
  grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  gap: clamp(32px, 4vw, 72px);
  align-items: center;
}
.lm-farewell__media { margin: 0; }
/* The photograph fills its column rather than keeping its own shape: a wide
   banner dropped in here rendered as a thin strip floating in white space.
   The focus point comes from the section so the crop can be steered. */
.lm-farewell__media img {
  width: 100%; display: block;
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
  object-position: var(--lm-farewell-focus, 50% 50%);
  border-radius: var(--lm-radius-xs);
}
.lm-farewell__caption {
  margin-top: 12px; font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; opacity: 0.65;
}
.lm-farewell__text { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.lm-farewell__eyebrow {
  margin: 0; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 500; opacity: 0.72;
}
.lm-farewell__heading {
  font-family: var(--lm-serif); font-weight: 500;
  font-size: clamp(30px, 2.2vw + 20px, 46px); line-height: 1.15;
  margin: 0; max-width: 18ch; text-wrap: balance;
}
.lm-farewell__body { font-size: 16px; line-height: 1.8; max-width: 58ch; opacity: 0.86; }
.lm-farewell__body p { margin: 0 0 1em; }
.lm-farewell__body p:last-child { margin-bottom: 0; }
.lm-farewell__date {
  margin: 0; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
  padding-top: 18px; border-top: 1px solid currentColor; align-self: stretch;
}
.lm-farewell__date time { font-weight: 600; }
.lm-farewell__signature {
  margin: 0; font-family: var(--lm-serif); font-size: 22px; line-height: 1.3;
}
.lm-farewell__role {
  display: block; font-family: var(--lm-sans); font-size: 12px;
  letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.6; margin-top: 6px;
}
/* The shared primary button is ink-on-light; inside this block the ground is
   usually dark, so it inverts to sit on it. */
.lm-farewell__cta {
  background: var(--lm-farewell-fg, var(--lm-bg));
  color: var(--lm-farewell-bg, var(--lm-ink));
}
.lm-farewell__cta:hover {
  background: var(--lm-farewell-fg, var(--lm-bg));
  color: var(--lm-farewell-bg, var(--lm-ink));
  opacity: 0.88;
}
@media (max-width: 859px) {
  .lm-farewell--with-image .lm-farewell__inner { grid-template-columns: minmax(0, 1fr); }
  .lm-farewell__heading { max-width: none; }
}

/* ---------- Zero pricing and the shipping disclosure ----------
   A piece priced at zero leads with the word, not the number. The struck
   original beside it is what carries the meaning, so it grows rather than
   shrinking into the usual small grey. */
.lm-card__price--free,
.lm-pdp__price--free { color: var(--lm-ink); letter-spacing: 0.01em; }
.lm-card__pricerow--free .lm-card__compare,
.lm-pdp__pricerow--free .lm-pdp__compare { font-size: 1em; opacity: 0.7; }
.lm-card__shipnote {
  margin: 4px 0 0; font-size: 11.5px; letter-spacing: 0.04em;
  color: var(--lm-text-3); text-transform: none;
}

.lm-shipnotice {
  display: flex; align-items: center; gap: 10px;
  margin: 14px 0 20px; padding: 11px 14px;
  border: 1px solid var(--lm-border); border-radius: var(--lm-radius-sm);
  background: var(--lm-bg-alt);
}
.lm-shipnotice__icon { display: flex; color: var(--lm-gold); flex: none; }
.lm-shipnotice__text { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; }
.lm-shipnotice__fee { font-size: 15px; font-weight: 600; color: var(--lm-ink); }
.lm-shipnotice__caption { font-size: 12.5px; color: var(--lm-text-2); }
.lm-shipnotice--compact { margin: 0; padding: 8px 11px; }
.lm-shipnotice--compact .lm-shipnotice__fee { font-size: 13.5px; }
.lm-shipnotice--compact .lm-shipnotice__caption { font-size: 11.5px; }

/* ---------- Collection filters on a phone ----------
   Desktop keeps the inline selects. Below 860px they move into a sheet that
   rises from the bottom edge, because a row of dropdowns squeezed onto a
   375px screen is unusable and the reference has no filtering at all. */
.lm-filterbar { display: none; }
@media (max-width: 859px) {
  .lm-collection__controls { display: none; }
  .lm-filterbar {
    display: flex; gap: 10px; align-items: center;
  }
  .lm-filterbar__btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 10px 16px; border: 1px solid var(--lm-ink); background: transparent;
    color: var(--lm-ink); font-family: var(--lm-sans); font-size: 12px;
    letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
    border-radius: var(--lm-radius-pill);
  }
  .lm-filterbar__count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
    background: var(--lm-ink); color: var(--lm-bg); font-size: 10px; font-weight: 700;
  }

  .lm-filtersheet-backdrop {
    position: fixed; inset: 0; background: rgba(28,30,28,0.45);
    opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease;
    z-index: 300;
  }
  .lm-filtersheet-backdrop.is-open { opacity: 1; visibility: visible; }
  .lm-filtersheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 301;
    background: var(--lm-bg); border-radius: 14px 14px 0 0;
    padding: 8px 20px calc(20px + env(safe-area-inset-bottom));
    max-height: 82vh; overflow-y: auto;
    transform: translateY(101%); transition: transform 0.3s ease;
    box-shadow: var(--lm-shadow-modal);
  }
  .lm-filtersheet.is-open { transform: translateY(0); }
  .lm-filtersheet__grip {
    width: 38px; height: 4px; border-radius: 2px; background: var(--lm-divider);
    margin: 6px auto 14px;
  }
  .lm-filtersheet__head {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: 12px; border-bottom: 1px solid var(--lm-border); margin-bottom: 16px;
  }
  .lm-filtersheet__title {
    font-family: var(--lm-serif); font-size: 22px; margin: 0; color: var(--lm-ink);
  }
  .lm-filtersheet__close {
    background: none; border: none; font-size: 26px; line-height: 1;
    color: var(--lm-ink); cursor: pointer; padding: 0 4px;
  }
  .lm-filtersheet__group { margin-bottom: 18px; }
  .lm-filtersheet__label {
    display: block; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--lm-text-3); font-weight: 600; margin-bottom: 8px;
  }
  .lm-filtersheet .lm-select { width: 100%; }
  .lm-filtersheet__actions { display: flex; gap: 10px; padding-top: 6px; }
  .lm-filtersheet__actions > * { flex: 1; }
}

/* The shipping charge is the amount actually being paid on a free-piece
   order, so it reads at full strength rather than as a muted aside. */
.lm-cart-shipfee { color: var(--lm-ink); }
.lm-cart-shipfee span:last-child { font-weight: 600; }

/* ---------- Jewelry gallery: thumbnails under the photo ----------
   A vertical rail suits a full-length garment shot. A ring is photographed
   square, so the rail leaves a tall empty column beside it — the strip goes
   underneath instead, which is also what the reference does. */
@media (min-width: 860px) {
  .lm-gallery--jewelry { flex-direction: column; align-items: stretch; gap: 12px; }
  .lm-gallery--jewelry .lm-gallery__main {
    order: 1; width: 100%; height: auto; max-height: none; min-height: 0;
    aspect-ratio: 1 / 1; background: var(--lm-bg-alt); border-radius: var(--lm-radius-xs);
  }
  .lm-gallery--jewelry .lm-gallery__main img { object-fit: cover; }
  .lm-gallery--jewelry .lm-gallery__thumbcol {
    order: 2; width: 100%; flex-direction: row; align-items: center; gap: 10px;
  }
  .lm-gallery--jewelry .lm-gallery__thumbs {
    flex-direction: row; gap: 10px; overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none; flex: 1 1 auto;
  }
  .lm-gallery--jewelry .lm-gallery__thumbs::-webkit-scrollbar { display: none; }
  .lm-gallery--jewelry .lm-gallery__thumb {
    width: 88px; flex: 0 0 88px; aspect-ratio: 1 / 1; background: var(--lm-bg-alt);
  }
  .lm-gallery--jewelry .lm-gallery__thumb img { object-fit: cover; }
  .lm-gallery--jewelry .lm-gallery__thumb.is-active { border-color: var(--lm-ink); border-width: 1.5px; }
  /* The scroll control was a full-width bar above a vertical column; here it is
     a round arrow at the end of the strip. */
  .lm-gallery--jewelry .lm-gallery__thumbscroll {
    width: 30px; height: 30px; border-radius: 50%; flex: 0 0 30px;
  }
}
/* ---------- Jewelry gallery: the mosaic ----------
   Every photo on screen at once. With the strip, the second, third and fourth
   photo were on the page but at 88px nobody looked at them. Almost every piece
   here has three or four photos, which fit in one column without a strip at
   all. Phones keep the swipe carousel; this is a desktop layout. */
.lm-gallery__mosaic { display: none; }

@media (min-width: 860px) {
  .lm-gallery--jewelry .lm-gallery__thumbcol,
  .lm-gallery--jewelry .lm-gallery__main { display: none; }

  .lm-gallery--jewelry .lm-gallery__mosaic {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%;
  }
  .lm-gallery__tile {
    margin: 0; aspect-ratio: 1 / 1; overflow: hidden;
    background: var(--lm-bg-alt); border-radius: var(--lm-radius-xs);
  }
  .lm-gallery__tile img { width: 100%; height: 100%; object-fit: cover; display: block; }

  /* The opening shot carries the piece, so it gets the full width. With an
     even number of photos the closing one does too, otherwise the grid ends on
     a half-empty row. */
  .lm-gallery__tile:first-child { grid-column: 1 / -1; }
  .lm-gallery__tile:last-child:nth-child(even) { grid-column: 1 / -1; }

  /* The photos follow you down instead of ending halfway, which otherwise
     leaves a tall empty block on the left while the text beside them runs on.
     The offset comes from JS, because a mosaic taller than the window has to
     stick to the BOTTOM of the window (a negative offset) or its last photos
     could never be scrolled to. 110px is the header, and the fallback for a
     page where the script has not run yet. */
  .lm-pdp__media--mosaic { position: sticky; top: var(--lm-media-top, 110px); align-self: flex-start; }
}


/* ---------- Price row: the amount saved, not a percentage ----------
   "SAVE $165.00" is the number the shopper cares about when the piece itself
   is free; "Save 100%" restates what the $0 already said. */
.lm-pdp__save {
  background: var(--lm-sale-green); color: #FFFFFF;
  padding: 5px 10px; border-radius: 3px; font-size: 12px;
  font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.lm-pdp__pricerow--free .lm-pdp__price--free { color: var(--lm-sale-green); }

/* ---------- Stock bar ----------
   Driven by real inventory. Rendered only where the merchant tracks it, so
   there is no invented number anywhere on the page. */
.lm-stockbar { margin: 16px 0 20px; }
.lm-stockbar__row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.lm-stockbar__dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--lm-strike); flex: none;
}
.lm-stockbar--low .lm-stockbar__dot { background: #C2661C; }
.lm-stockbar__text { font-size: 14px; color: var(--lm-ink); }
.lm-stockbar__text strong { font-weight: 700; }
.lm-stockbar__track {
  height: 3px; border-radius: 2px; background: var(--lm-border); overflow: hidden;
}
.lm-stockbar__fill { height: 100%; background: var(--lm-ink); border-radius: 2px; }
.lm-stockbar--low .lm-stockbar__fill { background: #C2661C; }

/* ---------- Statement band ----------
   Sits under a photographic hero and carries the message the hero no longer
   has to. Narrow measure and generous space either side: one thought, read
   in a second. */
.lm-statement {
  background: var(--lm-statement-bg, var(--lm-bg-alt));
  color: var(--lm-statement-fg, var(--lm-ink));
  padding: clamp(34px, 2.5vw + 24px, 60px) var(--lm-side-pad);
  border-bottom: 1px solid var(--lm-border);
}
.lm-statement__inner {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 12px;
}
.lm-statement__eyebrow {
  margin: 0; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 600; opacity: 0.6;
}
.lm-statement__heading {
  font-family: var(--lm-serif); font-weight: 500; margin: 0;
  font-size: clamp(24px, 1.6vw + 18px, 36px); line-height: 1.2;
  max-width: 22ch; text-wrap: balance;
}
.lm-statement__body {
  margin: 0; font-size: 15px; line-height: 1.75; max-width: 60ch; opacity: 0.82;
}
.lm-statement__cta {
  margin-top: 4px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 600; color: inherit; border-bottom: 1px solid currentColor; padding-bottom: 3px;
}

/* On a light ground the block needs an edge of its own, or it merges with
   the sections either side of it. */
.lm-farewell { border-block: 1px solid var(--lm-border); }

/* ---------- Statement without a heading ----------
   The reference runs this block as an eyebrow over a single paragraph at a
   narrow measure — one thought, about 140px tall. With no heading the body
   carries the block, so it takes the size the heading would have had. */
.lm-statement__inner:not(:has(.lm-statement__heading)) .lm-statement__body {
  font-size: 15.5px; line-height: 1.85; max-width: 78ch;
}
.lm-statement { border-bottom: 0; }

/* ---------- Text and image: photo left, prose right ----------
   Matches the reference proportions — the photo takes a little under half and
   the text column runs beside it rather than under it. */
.lm-farewell--with-image .lm-farewell__inner {
  grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
}
.lm-farewell__heading { max-width: 20ch; }

/* One line under the Add to Cart, sized to be glanced at rather than read. */
.lm-pdp__undercta {
  margin: 10px 0 0; text-align: center;
  font-size: 12px; letter-spacing: 0.05em; color: var(--lm-text-3);
}

/* ---------- Variant options as bordered boxes ----------
   The active state is a darker border on the same ground, not a filled block.
   A filled swatch shouts louder than the Add to Cart directly beneath it and
   competes for the eye at exactly the wrong moment. */
.lm-size-btn {
  min-width: 74px;
  padding: 14px 20px;
  border-radius: 2px;
  border: 1px solid var(--lm-border);
  background: var(--lm-bg-alt);
  font-size: 14px;
  letter-spacing: 0.01em;
  transition: border-color 0.18s ease;
}
.lm-size-btn:hover:not(:disabled) { border-color: var(--lm-text-3); }
.lm-size-btn.is-active {
  border: 1.5px solid var(--lm-ink);
  background: var(--lm-bg-alt);
  color: var(--lm-ink);
  font-weight: 600;
}
.lm-size-row { gap: 10px; }
.lm-option-label__name { letter-spacing: 0.16em; font-size: 12px; }

/* ---------- Add to Cart ----------
   Full width, brand navy, letterspaced caps. It is the one place on the page
   that should be unmistakably a button. */
.lm-add-to-cart {
  width: 100%;
  padding: 19px 24px;
  border-radius: 2px;
  background: var(--lm-brand);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.lm-add-to-cart:hover:not(:disabled) { background: var(--lm-brand-dark); }
.lm-cta-row { gap: 10px; align-items: stretch; }

/* ---------- Accordions as bordered panels ----------
   The reference boxes each one and centres the heading. Boxed, they read as
   things you can open; as bare rules they read as dividers. */
.lm-accordions {
  margin-top: 26px;
  border: 1px solid var(--lm-border);
  border-radius: 2px;
  background: var(--lm-bg-alt);
}
.lm-accordion { border: 0; border-bottom: 1px solid var(--lm-border); border-radius: 0; }
.lm-accordion:last-child { border-bottom: 0; }
.lm-accordion__head {
  letter-spacing: 0.16em;
  padding: 18px 44px;
}
.lm-accordion__icon { right: 18px; }
.lm-accordion__inner { padding: 0 20px 20px; }
.lm-service-row { padding: 18px 20px 22px; }

/* The heart sits on the photo, so the Add to Cart gets the whole column. */
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--lm-border);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--lm-shadow-float);
}
.lm-cta-row .lm-add-to-cart { flex: 1 1 100%; }

/* ---------- Store rating strip ----------
   Sits above the product title. Solid star tiles rather than outlines: at
   13px an outlined star turns to mush, and the block of colour is what reads
   from a distance. */
.lm-ratingstrip {
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 10px; color: var(--lm-text-2); font-size: 13.5px;
}
a.lm-ratingstrip:hover { color: var(--lm-ink); }
.lm-ratingstrip__stars { display: inline-flex; gap: 2px; }
.lm-ratingstrip__star {
  display: inline-flex; align-items: center; justify-content: center;
  width: 19px; height: 19px; border-radius: 2px;
  background: var(--lm-border); color: #FFFFFF; font-size: 12px; line-height: 1;
}
.lm-ratingstrip__star.is-full { background: var(--lm-sale-green-bright, #2F8F3B); }
/* The last tile is filled by the fraction the score actually earns -- 70%
   for a 4.7 -- instead of snapping to a half. A fixed half made 4.6, 4.7 and
   4.8 render identically, so the figure beside them read as decoration. */
.lm-ratingstrip__star.is-partial {
  background: linear-gradient(90deg,
    var(--lm-sale-green-bright, #2F8F3B) var(--lm-star-fill, 50%),
    var(--lm-border) var(--lm-star-fill, 50%));
}
.lm-ratingstrip__score { font-weight: 700; color: var(--lm-ink); }
.lm-ratingstrip__sep { color: var(--lm-border); }
a.lm-ratingstrip .lm-ratingstrip__count { text-decoration: underline; text-underline-offset: 2px; }

/* Merchant notice under the buy block. Colours come from the section so it
   can be a warning, a reassurance, or anything between. */
/* A note from the shop, not a warning light. It sat on pink with red text —
   the colours of an error message, in a column that is otherwise cream, ink
   and gold. Same materials as the rest of the boutique now, with the lead-in
   in gold caps so it still reads as something worth stopping for. The two
   colour settings still override, for anyone who wants the old alarm back. */
.lm-pdp__notice {
  position: relative;
  margin: 18px 0 0;
  padding: 15px 18px 15px 20px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--lm-sale-green) 26%, transparent);
  background: var(--lm-notice-bg, var(--lm-bg-panel));
  color: var(--lm-notice-fg, var(--lm-text-body));
  font-size: 14px; line-height: 1.65; text-align: left;
  overflow: hidden;
}
.lm-pdp__notice::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--lm-sale-green);
}
.lm-pdp__notice p { margin: 0 0 0.6em; }
.lm-pdp__notice p:last-child { margin-bottom: 0; }
.lm-pdp__notice-title {
  display: block; margin-bottom: 4px;
  font-family: var(--lm-sans); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--lm-sale-green);
}

/* The title is set in caps like the reference — at this size a jewelry name
   reads as a label rather than a sentence, and it holds the column. */
.lm-pdp__title {
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-family: var(--lm-sans);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.3;
}

/* ---------- Square product cards ----------
   Jewelry is photographed square. A 4:5 portrait frame built for a garment
   crops a ring's shot top and bottom and leaves the piece small in the
   middle of the card. Tied to the same setting as the product gallery so
   the two never disagree. */
.lm-card--square .lm-card__imgwrap { aspect-ratio: 1 / 1; background: var(--lm-bg-alt); }

/* ---------- Card price: the labels the reference uses ----------
   "Regular price" struck through, then the sale price, reads as a receipt
   line rather than as two numbers the shopper has to interpret. */
.lm-card__pricerow--free { flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.lm-card__pricelabel {
  display: block; width: 100%;
  font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--lm-text-3); margin-bottom: -2px;
}
.lm-card__savebadge {
  display: inline-block; margin-top: 6px;
  background: var(--lm-sale-green); color: #FFFFFF;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; padding: 4px 8px; border-radius: 2px;
}

/* ---------- Collection banner ----------
   Full-bleed image with the title over it. The scrim is a gradient from the
   bottom rather than a flat wash, so the photograph stays a photograph and
   only the type gets the contrast it needs. */
.lm-collbanner {
  position: relative; width: 100%; height: var(--lm-collbanner-h, 420px);
  overflow: hidden; background: var(--lm-bg-alt);
}
.lm-collbanner__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lm-collbanner__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(41,41,41,.55) 0%, rgba(41,41,41,.15) 45%, rgba(41,41,41,0) 75%);
}
.lm-collbanner__text {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0 var(--lm-side-pad) clamp(24px, 3vw, 44px);
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
}
.lm-collbanner__eyebrow {
  margin: 0; color: #FFFFFF; opacity: .85;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600;
}
.lm-collbanner__heading {
  margin: 0; color: #FFFFFF; font-family: var(--lm-serif); font-weight: 500;
  font-size: clamp(30px, 3vw + 16px, 52px); line-height: 1.1;
}
@media (max-width: 859px) {
  .lm-collbanner { height: min(var(--lm-collbanner-h, 420px), 46vh); }
}

/* Editor-only placeholder for the collection banner. Never rendered on the
   live store, so it can afford to explain itself. */
.lm-collbanner--empty {
  display: flex; align-items: center; justify-content: center;
  background: var(--lm-bg-alt); border: 1px dashed var(--lm-rule, var(--lm-border));
}
.lm-collbanner__hint {
  text-align: center; max-width: 46ch; padding: 24px;
  display: flex; flex-direction: column; gap: 8px;
}
.lm-collbanner__hint-title {
  margin: 0; font-family: var(--lm-serif); font-size: 22px; color: var(--lm-ink);
}
.lm-collbanner__hint-body {
  margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--lm-text-2);
}

/* The count sits as plain sentence case above the grid, the way the reference
   has it — set in caps it competed with the section heading above it. */
.lm-collection__count {
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
  color: var(--lm-ink);
}

/* ---------- Product card: centred, the way the reference sets it ----------
   With the rating line and the shipping note gone the card carries two
   things, and two things centre better than they align left — the block
   reads as a caption under the photograph rather than a column of data. */
.lm-card__info {
  text-align: center;
  align-items: center;
  gap: 8px;
}
.lm-card__name {
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 13px;
  font-family: var(--lm-sans);
  font-weight: 500;
}
.lm-card__pricerow { justify-content: center; gap: 9px; }
/* The struck price leads: you read what it was, then what it costs. At the
   same size as the price it would compete, so it stays a step quieter. */
.lm-card__pricerow--free .lm-card__compare { font-size: 0.95em; opacity: 1; }
.lm-card__savebadge { display: none; }

/* The struck price carries the sale colour and the live price stays charcoal,
   the way the reference sets it: the eye is drawn to what was given up, not
   to the zero. Burgundy is the only place on the card it appears, which is
   what keeps it working as an accent. */
.lm-card__compare { color: var(--lm-sale-green); text-decoration-color: currentColor; }
.lm-card__pricerow--free .lm-card__price--free { color: var(--lm-ink); font-weight: 600; }

/* ---------- Collection banner: whole image ----------
   The band drops its fixed height and takes the picture's own proportions,
   so nothing is cropped and nothing is letterboxed. Height and focal point
   stop applying — there is no crop left for them to steer. */
.lm-collbanner--full { height: auto; }
.lm-collbanner--full .lm-collbanner__img {
  height: auto;
  object-fit: contain;
  object-position: center center;
}
/* Text over an uncropped image sits in its own band underneath rather than on
   top: a photograph shown whole is usually shown whole because of what is in
   it, and covering the bottom third would defeat that. */
.lm-collbanner--full .lm-collbanner__scrim { display: none; }
.lm-collbanner--full .lm-collbanner__text {
  position: static;
  padding: 18px var(--lm-side-pad) 0;
  color: var(--lm-ink);
}
.lm-collbanner--full .lm-collbanner__heading { color: var(--lm-ink); }
.lm-collbanner--full .lm-collbanner__eyebrow { color: var(--lm-text-2); }

/* The signature is set in the serif, a little larger than the body and left
   loose: it is the one line on the page written by a hand rather than a shop,
   and setting it in the same sans as everything else would flatten that. */
.lm-statement__signature {
  margin: 6px 0 0;
  font-family: var(--lm-serif);
  font-size: 19px;
  line-height: 1.5;
  color: var(--lm-ink);
}
/* Consecutive paragraphs in the note sit closer than section spacing would
   put them — they are one thought continuing, not two blocks. */
.lm-statement__body + .lm-statement__body { margin-top: -2px; }

/* ---------- Featured products as a wrapping grid ----------
   The scrolling row suits a long tail you browse sideways. A short, curated
   set reads better as a block you take in at once — four across, wrapping to
   a second row. Cards size to the track rather than a fixed width, so the
   row fills the container instead of leaving a gap at the end. */
.lm-product-slider--grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px 20px;
  overflow: visible;
  scroll-snap-type: none;
}
.lm-product-slider--grid .lm-card { flex: none; width: auto; }
.lm-slider-wrap--grid .lm-slider-arrow { display: none; }

@media (max-width: 1023px) {
  .lm-product-slider--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 859px) {
  /* Two across on a phone: at four the ring itself is smaller than the badge
     sitting on it. */
  .lm-product-slider--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; }
}

/* ---------- Assurances: icon, heading, sentence ----------
   Three columns on a wide screen, generous air between them, everything
   centred under its own drawing. The heading is the serif in caps with wide
   tracking — at this size it reads as a label on a card rather than a
   sentence, which is what the row is: three small promises, not a paragraph. */
.lm-assurance__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 72px);
  align-items: start;
}
.lm-assurance__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}
.lm-assurance__icon {
  display: block;
  width: 58px;
  height: 58px;
  color: var(--lm-ink);
}
.lm-assurance__icon svg { width: 100%; height: 100%; display: block; }
.lm-assurance__title {
  font-family: var(--lm-serif);
  font-size: clamp(19px, 1vw + 15px, 24px);
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--lm-ink);
  line-height: 1.25;
}
.lm-assurance__body {
  margin: 0;
  font-family: var(--lm-serif);
  font-size: 16px;
  line-height: 1.7;
  color: var(--lm-text-body);
  max-width: 34ch;
}
@media (max-width: 859px) {
  /* Stacked rather than squeezed: three columns on a phone leaves each
     sentence four words wide. */
  .lm-assurance__grid { grid-template-columns: minmax(0, 1fr); gap: 38px; }
  .lm-assurance__icon { width: 48px; height: 48px; }
}

/* The three headings wrap to different line counts — "14 Day Returns" fits on
   one line where the other two need two — which left each sentence starting
   at a different height. Reserving two lines for every heading lands all
   three bodies on the same baseline, and the row reads as a row. */
.lm-assurance__title {
  min-height: calc(2 * 1.25em);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
/* The block itself is centred in the page and capped, so the columns sit
   evenly either side of the middle rather than drifting wide. */
.lm-assurance__grid { max-width: 1140px; margin-inline: auto; }

/* The name at the foot of the letter, in a script face. Only the name —
   setting "With love," in a script too would make the whole sign-off
   decorative, and then nothing stands out from anything else. Larger than
   the line above it because a script runs optically smaller at the same
   point size, and it sits on the same baseline rather than floating. */
.lm-statement__name {
  font-family: 'Parisienne', 'Cormorant Garamond', cursive;
  font-size: 1.9em;
  line-height: 1;
  display: inline-block;
  margin-top: 6px;
  color: var(--lm-ink);
}

/* Drawn rather than typed. As a Unicode glyph the heart took whatever line
   weight the font gave it, and there is no way to thin that down; as a path
   the stroke is a number we choose. Kept at the size it had — it is the
   weight that was heavy, not the scale. */
.lm-statement__heart {
  width: 0.62em;
  height: 0.62em;
  display: inline-block;
  vertical-align: 0.28em;
  margin-left: 0.14em;
  color: var(--lm-ink);
}

/* ---------- Testimonials ----------
   A row you push sideways with a thumb. Cards keep a fixed width so the one
   at the edge is visibly cut — that overhang is what tells anyone there is
   more to the right, and it does the job a row of dots never quite does. */
.lm-testi {
  background: var(--lm-bg);
  padding: clamp(48px, 5vw, 84px) 0;
  border-top: 1px solid var(--lm-border);
}
.lm-testi__heading {
  margin: 0 0 clamp(24px, 3vw, 40px);
  padding-inline: var(--lm-side-pad);
  text-align: center;
  font-family: var(--lm-sans);
  font-size: clamp(20px, 1.4vw + 15px, 28px);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--lm-ink);
}
.lm-testi__scroll {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Side padding inside the scroller, so the first card starts in line with
     the page and the last one can still reach the edge. */
  padding: 4px var(--lm-side-pad) 8px;
}
.lm-testi__scroll::-webkit-scrollbar { display: none; }

.lm-testi__card {
  flex: 0 0 258px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 18px 18px 22px;
  background: var(--lm-bg-alt);
  border: 1px solid var(--lm-border);
  border-radius: 10px;
  text-align: center;
}
.lm-testi__imgwrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 8px;
  background: var(--lm-bg-panel);
}
.lm-testi__imgwrap img { width: 100%; height: 100%; object-fit: cover; display: block; }

.lm-testi__stars { display: flex; gap: 2px; }
.lm-testi__star { color: var(--lm-gold); font-size: 15px; line-height: 1; }
.lm-testi__star.is-empty { color: var(--lm-border); }

.lm-testi__quote {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--lm-text-body);
}
.lm-testi__name {
  margin: auto 0 0;
  padding-top: 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--lm-ink);
}

@media (max-width: 859px) {
  /* Narrower cards so two edges show at once — on a phone the overhang is the
     only affordance there is. */
  .lm-testi__card { flex-basis: 76vw; max-width: 300px; }
  .lm-testi__scroll { gap: 14px; padding-inline: 24px; }
}

/* ---------- Cart tip ----------
   Warm fill rather than a bordered white box: at this point in the drawer a
   neutral outline reads as a system notice, and this is meant to sound like
   Lucy. Cream ground, the gold from the rest of the shop on the icon and the
   label, and the heading in the serif so it belongs to the same voice. The
   gold rail down the left edge is what makes it catch the eye without
   shouting at the line item above it. */
.lm-carttip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 8px 0 0;
  padding: 16px 16px 16px 20px;
  border: 1px solid color-mix(in srgb, var(--lm-gold) 32%, transparent);
  border-radius: 10px;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--lm-gold) 7%, var(--lm-bg-panel)) 0%,
      var(--lm-bg-panel) 100%);
  overflow: hidden;
}
.lm-carttip::before {
  content: "";
  position: absolute; inset: 0 auto 0 0;
  width: 3px;
  background: var(--lm-gold);
}
.lm-carttip__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.lm-carttip__eyebrow {
  display: flex; align-items: center; gap: 7px; margin: 0;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--lm-gold);
}
.lm-carttip__icon {
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 24px; width: 24px; height: 24px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--lm-gold) 45%, transparent);
  background: color-mix(in srgb, var(--lm-gold) 10%, transparent);
}
.lm-carttip__icon svg { width: 13px; height: 13px; }
.lm-carttip__heading {
  margin: 0;
  font-family: var(--lm-serif);
  font-size: 19px; font-weight: 500; line-height: 1.3;
  color: var(--lm-ink);
}
.lm-carttip__body { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--lm-text-2); }
.lm-carttip__img {
  flex: 0 0 84px; width: 84px; height: 84px;
  border-radius: 10px; overflow: hidden;
  background: var(--lm-bg-alt);
  border: 1px solid color-mix(in srgb, var(--lm-gold) 28%, transparent);
  box-shadow: 0 2px 6px rgba(41,41,41,.10);
}
.lm-carttip__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 420px) {
  /* Below this the drawer itself is about 340px wide; an 84px picture leaves
     the heading four words to a line. */
  .lm-carttip { gap: 12px; padding: 14px; }
  .lm-carttip__img { flex: 0 0 64px; width: 64px; height: 64px; }
  .lm-carttip__heading { font-size: 17px; }
}

@media (max-width: 859px) {
  /* Five ring sizes at the desktop width need 410px and wrap to a second row
     on a 375px screen, pushing the buy button down by the height of a whole
     row. Narrower here: they still clear the 44px touch target. */
  .lm-size-btn { min-width: 56px; padding: 12px 14px; font-size: 13.5px; }
  .lm-size-row { gap: 8px; }
  /* The shipping notice is read once; it does not need desktop breathing room
     directly above the button it explains. */
  .lm-shipnotice { margin: 12px 0 14px; padding: 9px 12px; }
  .lm-shipnotice__fee { font-size: 14px; }
  .lm-shipnotice__caption { font-size: 11.5px; }
}

/* ---------- Buy block, compact ----------
   Everything above the button tightened so the whole decision fits in one
   view. The reference gets there by keeping each row to its own line height
   rather than padding rows apart, and by letting the icons be marks beside
   the text instead of filled discs competing with it. */
.lm-pdp__title { font-size: 26px; margin-bottom: 10px; }
.lm-pdp__reviews-link { margin-bottom: 12px; }
.lm-pdp__pricerow { margin-bottom: 18px; }
.lm-pdp__price { font-size: 30px; font-weight: 600; }

/* Icons as outlines in the brand colour, sized to the text. A filled disc at
   24px reads as a bullet point the eye has to get past; an outline at 17px
   reads as a mark belonging to the line. */
.lm-pdp__highlights { gap: 9px; margin-bottom: 20px; }
.lm-pdp__highlight { gap: 10px; font-size: 14.5px; font-weight: 400; align-items: center; }
.lm-pdp__check {
  width: 17px; height: 17px; border-radius: 0;
  background: none; color: var(--lm-brand); flex-shrink: 0;
}
.lm-pdp__check svg { width: 17px; height: 17px; }

/* Five ring sizes across one row at any desktop width: the labels set the
   width, so the row is a grid of equal tracks rather than five buttons each
   as wide as its own text. */
@media (min-width: 860px) {
  /* auto-fit rather than five fixed tracks: a label like "10 (UK T)" needs
     about 66px, and forcing five across a narrow column broke every label
     onto two lines. This fits as many as the column allows and wraps the
     rest, so the text stays on one line whatever the width. */
  .lm-size-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(68px, 1fr));
    gap: 8px;
  }
  .lm-size-btn {
    min-width: 0; padding: 13px 8px; font-size: 13px;
    text-align: center; white-space: nowrap;
  }
}
.lm-option-label { margin-bottom: 9px; }
.lm-cta-row { margin-bottom: 14px; }

/* The product section began flush against the category strip: no top padding
   at all, so the photograph touched the rule above it and the rating strip
   sat on the same line as the last thing in the header. Both wanted the same
   fix — room at the top of the section. */
.lm-pdp { padding-top: clamp(28px, 3vw, 52px); }

/* The closing note under the payment icons. Set at reading width and a little
   quieter than the buy block above it — someone who has scrolled past the
   button is reading rather than scanning. */
.lm-pdp__closingnote {
  margin-top: 18px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--lm-text-body);
}
.lm-pdp__closingnote p { margin: 0 0 1em; }
.lm-pdp__closingnote p:last-child { margin-bottom: 0; }
.lm-pdp__closingnote strong { color: var(--lm-ink); font-weight: 600; }

/* ---------- Review cards ----------
   Trustpilot's own shape: solid green star tiles, a verified mark, a headline
   in caps, then the message. Tiles rather than glyph stars because at 14px an
   outlined star turns to mush and the block of colour is what reads across
   the page. */
.lm-revcards {
  background: var(--lm-bg);
  padding: clamp(32px, 3vw, 56px) var(--lm-side-pad) clamp(40px, 4vw, 72px);
}
.lm-revcards__heading {
  margin: 0 0 24px; text-align: center;
  font-family: var(--lm-sans); font-weight: 700;
  font-size: clamp(18px, 1.2vw + 14px, 24px);
  letter-spacing: 0.02em; text-transform: uppercase; color: var(--lm-ink);
}
.lm-revcards__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  max-width: 1140px;
  margin-inline: auto;
}
.lm-revcard {
  display: flex; flex-direction: column; gap: 10px;
  padding: 18px 20px 20px;
  background: var(--lm-revcard-bg, #F4F4F4);
  border-radius: 0;
}
.lm-revcard__top { display: flex; align-items: center; gap: 10px; }
.lm-revcard__stars { display: inline-flex; gap: 2px; }
.lm-revcard__top { margin-bottom: 2px; }
.lm-revcard__star {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 0;
  background: #00B67A; color: #FFFFFF; font-size: 11px; line-height: 1;
}
.lm-revcard__star.is-empty { background: var(--lm-border); }
.lm-revcard__verified {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; color: var(--lm-text-2);
}
.lm-revcard__verified svg { width: 15px; height: 15px; color: #9B9B9B; }
.lm-revcard__headline {
  margin: 0; font-size: 13.5px; font-weight: 700;
  letter-spacing: 0.02em; text-transform: uppercase; color: var(--lm-ink);
}
.lm-revcard__body {
  margin: 0; font-size: 14px; line-height: 1.6; color: var(--lm-text-body);
}
.lm-revcard__by {
  margin: auto 0 0; padding-top: 6px;
  font-size: 13px; color: var(--lm-text-2);
}
.lm-revcard__by strong { color: var(--lm-ink); font-weight: 700; }

@media (max-width: 859px) {
  .lm-revcards__grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}

/* ---------- Review slider inside the product column ----------
   Same width as the accordion stack above. One card fills the column with a
   sliver of the next showing, because a slider that shows exactly one card
   gives the reader no reason to believe there is a second. */
.lm-revslider { margin-top: 20px; }
.lm-revslider__track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.lm-revslider__track::-webkit-scrollbar { display: none; }
.lm-revslider__track .lm-revcard {
  flex: 0 0 calc(50% - 8px);
  scroll-snap-align: start;
}
.lm-revslider__nav {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin-top: 14px;
}
.lm-revslider__arrow {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0;
  background: none; cursor: pointer;
  border: 1px solid var(--lm-border); border-radius: 50%;
  color: var(--lm-brand);
  transition: background 0.2s ease, opacity 0.2s ease;
}
.lm-revslider__arrow svg { width: 15px; height: 15px; }
.lm-revslider__arrow:hover { background: var(--lm-bg-alt); }
.lm-revslider__arrow[disabled] { opacity: 0.3; cursor: default; }
.lm-revslider__dots { display: flex; align-items: center; gap: 7px; }
.lm-revslider__dot {
  width: 7px; height: 7px; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer;
  background: var(--lm-border);
  transition: background 0.2s ease;
}
.lm-revslider__dot.is-active { background: var(--lm-brand); }
@media (max-width: 749px) {
  .lm-revslider__track { gap: 12px; }
  .lm-revslider__track .lm-revcard { flex: 0 0 86%; }
}

/* ---------- Image under the product photos ----------
   No fixed aspect ratio: the picture keeps its own proportions, so a
   portrait shot is not cropped to a letterbox on the way in. */
.lm-colimg { margin: 24px 0 0; }
.lm-colimg img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
}
.lm-colimg__caption {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--lm-text-2);
  text-align: center;
}

/* ---------- Promise row: icon in a gold ring, caps title, one sentence ----------
   Four across with a hairline between them; the ring around the icon is the
   only drawn shape, so the row stays quiet under whatever sits above it.
   The shop name closes the row in the same gold, spaced like a label. */
.lm-promise {
  /* A shade lighter than the page, so the band reads as its own surface
     instead of running into whatever sits above it. */
  background: var(--lm-bg-alt);
  padding: 56px var(--lm-side-pad) 44px;
  border-top: 1px solid var(--lm-border);
  border-bottom: 1px solid var(--lm-border);
}
.lm-promise__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 1280px;
  margin: 0 auto;
}
.lm-promise__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 6px 24px 28px;
  border-left: 1px solid var(--lm-border);
}
.lm-promise__item:first-child { border-left: 0; }
.lm-promise__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1.5px solid var(--lm-gold);
  color: var(--lm-gold);
  margin-bottom: 8px;
}
.lm-promise__icon svg { width: 34px; height: 34px; display: block; }
.lm-promise__title {
  margin: 0;
  font-family: var(--lm-sans);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lm-brand);
  line-height: 1.3;
}
.lm-promise__body {
  margin: 0;
  font-family: var(--lm-sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--lm-text-2);
  max-width: 30ch;
}
.lm-promise__mark {
  margin: 24px 0 0;
  text-align: center;
  font-family: var(--lm-serif);
  font-size: 15px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--lm-gold);
}
@media (max-width: 859px) {
  .lm-promise { padding: 44px 20px 36px; }
  .lm-promise__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 8px; }
  .lm-promise__item { padding: 6px 14px 24px; border-left: 0; }
  .lm-promise__item:nth-child(even) { border-left: 1px solid var(--lm-border); }
}
@media (max-width: 480px) {
  .lm-promise__grid { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .lm-promise__item,
  .lm-promise__item:nth-child(even) { border-left: 0; border-top: 1px solid var(--lm-border); padding-top: 24px; }
  /* The first promise had no rule above it and only 6px of air, so it stood
     18px shorter than the other three. It keeps the missing divider -- the
     section already draws a line there -- but takes the same spacing. */
  .lm-promise__item:first-child { border-top: 0; padding-top: 24px; }
}

/* The size row when the buy button has just pointed at it: a brief gold ring
   so the eye lands where it was sent, gone again after a moment. Suppressed
   for anyone who asked their system to reduce motion — the ring still shows,
   it simply does not fade. */
.lm-option-attention {
  animation: lm-option-attention 1.8s ease-out 1;
  border-radius: 8px;
}
@keyframes lm-option-attention {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--lm-gold) 70%, transparent); }
  40%  { box-shadow: 0 0 0 5px color-mix(in srgb, var(--lm-gold) 32%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--lm-gold) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .lm-option-attention { animation: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--lm-gold) 45%, transparent); }
}
.lm-add-to-cart.is-awaiting-option,
.lm-sticky-add__btn.is-awaiting-option { opacity: .82; }

/* ---------- Size guide on a piece with no size option ----------
   A bracelet or a necklace has no option row for the link to sit in, so it
   gets a line of its own just above the buy button. Right-aligned, where the
   same link sits when it does share a row with the size label. */
.lm-size-guide-row { margin: 0 0 12px; text-align: right; }
.lm-size-guide-row .lm-size-guide { font-size: 12.5px; }


/* ---------- A product row with its heading centred ----------
   The reference centres the title and sets View All as an outlined button
   underneath it, rather than a link tucked against the right edge. On a
   product page that reads as an invitation; the left-aligned version reads as
   a shelf label, which is right on the home page and wrong here. */
.lm-section--centered .lm-section-header {
  display: block;
  text-align: center;
}
.lm-section--centered .lm-section-title { margin-bottom: 14px; }
.lm-section--centered .lm-slider-controls { justify-content: center; }
.lm-section--centered .lm-view-all {
  display: inline-block;
  padding: 11px 26px;
  border: 1px solid var(--lm-border);
  border-radius: 2px;
  font-family: var(--lm-sans);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--lm-brand);
  background: var(--lm-bg-alt);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.lm-section--centered .lm-view-all:hover {
  border-color: var(--lm-gold);
  color: var(--lm-ink);
}

/* ---------- The farewell on a phone: photograph first, then the letter ----
   The stacking rule for this block sits in a media query further up, but an
   unconditional rule below it set the two columns again, so it never applied:
   the last one wins. On a 375px screen that left the prose in a 165px column
   at nineteen characters a line, and the section ran to 1317px — a letter
   read through a letterbox.

   This sits last on purpose, so nothing further down can undo it again. */
@media (max-width: 859px) {
  .lm-farewell--with-image .lm-farewell__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .lm-farewell__heading { max-width: none; }
  .lm-farewell__body { max-width: none; }
}

/* ====================================================================
   PHONE: everything visible, everything reachable, everything readable
   --------------------------------------------------------------------
   Measured at 375px. The category strip hid 207px of itself off the
   right edge, so two of six categories could not be seen at all; thirty
   five controls were under the 44px a fingertip needs, some as small as
   15px; and body text sat at 12–13.5px. This shop is read by women in
   their thirties and older, largely on a phone.

   Last in the file on purpose. Nothing here applies above 859px.
   ==================================================================== */
@media (max-width: 859px) {

  /* --- Categories: wrap onto a second line instead of running off --- */
  .lm-strip__scroll {
    overflow-x: visible;
    flex-wrap: wrap;
    justify-content: center;
    /* The desktop spacing left only two labels per row and pushed the strip
       to 158px. Tightened until three fit, which is two rows instead of
       three without shrinking the lettering. */
    gap: 6px;
    padding-left: 12px;
    padding-right: 12px;
  }
  .lm-strip__link {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    font-size: 12.5px;
  }

  /* --- Header controls a fingertip can actually hit --- */
  .lm-icon-btn,
  .lm-hamburger {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .lm-logo { display: inline-flex; align-items: center; min-height: 44px; }
  .lm-localize__select { min-height: 44px; font-size: 14px; }

  /* --- Reading sizes --- */
  /* Both of these lose to more specific rules in chrome.css, so they are
     matched at the same weight rather than shouted over. */
  .lm-announce--stacked .lm-announce__msg { font-size: 14.5px; }
  .lm-mobile-menu__utility .lm-mobile-menu__sub { font-size: 15px !important; }
  .lm-announce__sub { font-size: 13px; }
  .lm-card__name { font-size: 14.5px; }
  .lm-testi__quote { font-size: 15.5px; line-height: 1.65; }
  .lm-farewell__role { font-size: 13px; }
  .lm-footer__blurb { font-size: 15px; line-height: 1.7; }
  /* flex, not inline-flex. Inline made the seven links run together as one
     unbroken line of text -- FAQContactTrack your orderShipping policy -- and
     each one shrank to the width of its own words. They are list items; they
     each get their own row, and the 40px is the height a thumb needs. */
  .lm-footer__link { font-size: 14.5px; min-height: 40px; display: flex; align-items: center; width: 100%; }
  .lm-search-dropdown__label { font-size: 12px; }
  .lm-search-dropdown__item { font-size: 15px; }
  .lm-cart-empty__text { font-size: 14.5px; }
  .lm-view-all { min-height: 44px; display: inline-flex; align-items: center; }

  /* The ones a thumb has to find in a hurry: closing a drawer, adding a
     piece, and the button the whole home page points at. */
  .lm-modal__close,
  .lm-drawer__close {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .lm-cart-upsell__addbtn { min-height: 44px; }
  .lm-btn-primary { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

  /* Product page. A dot of six pixels is a target you aim at, not one you
     hit: the dot keeps its size and the reachable area grows around it. */
  .lm-gallery__dot,
  .lm-revslider__dot {
    position: relative;
  }
  .lm-gallery__dot::after,
  .lm-revslider__dot::after {
    content: ;
    position: absolute;
    top: 50%; left: 50%;
    width: 44px; height: 44px;
    transform: translate(-50%, -50%);
  }
  .lm-size-guide { min-height: 44px; display: inline-flex; align-items: center; }
  .lm-sticky-add__select { min-height: 44px; font-size: 15px; }
  .lm-sticky-add__btn { min-height: 48px; font-size: 14px; }
  .lm-revslider__arrow { min-width: 44px; min-height: 44px; }

  /* Lines that carry a promise should not be the smallest type on the page. */
  .lm-pdp__undercta { font-size: 13.5px; }
  .lm-farewell__eyebrow { font-size: 13px; }
  .lm-revcard__headline { font-size: 14.5px; }
}

/* The centred style's View All sits under the row it refers to. */
.lm-section--centered .lm-section-footer { margin-top: 26px; text-align: center; }
.lm-section--centered .lm-section-title { margin-bottom: 0; }

/* ---------- A way out under the questions ----------
   Centred under the accordion list: one quiet line, then the button. In the
   brand blue rather than the black of the reference, so it belongs to the
   same page as every other button here. */
.lm-pdp-faq__cta { margin-top: 26px; text-align: center; }
.lm-pdp-faq__ctatext {
  margin: 0 0 14px;
  font-size: 14.5px;
  color: var(--lm-text-2);
}
.lm-pdp-faq__ctabtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 30px;
}
@media (max-width: 859px) {
  .lm-pdp-faq__cta { margin-top: 22px; }
  .lm-pdp-faq__ctatext { font-size: 14px; }
}

/* ---------- Which size, which finish: say it twice ----------
   The chosen tile was marked only by a 1.5px darker border on the same
   background — a difference of a hair's width, on a shop read largely by
   women in their fifties and older. The chosen one is now filled, and the
   value is spelled out beside the option name as well, so nobody has to
   work it out from a tile at all. */
.lm-size-btn.is-active {
  border: 2px solid var(--lm-brand);
  background: var(--lm-brand);
  color: #FFFFFF;
  font-weight: 600;
}
.lm-size-btn.is-active:hover:not(:disabled) { border-color: var(--lm-brand); }

.lm-option-label__value {
  color: var(--lm-ink);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
}
.lm-option-label__value.is-chosen { color: var(--lm-brand); }

@media (max-width: 859px) {
  .lm-option-label__value { font-size: 14px; }
}

/* ---------- Testimonials on a wide screen: one row, none of them halved ----
   Six cards at a fixed 258px came to 1776px in a 1425px window, so the sixth
   was sliced down the middle. They now share the width equally and all six
   fit on the single row the design always intended.

   Below 1200px there is not enough room to do that without squeezing the
   quote into a letterbox, so the phone and the smaller laptop keep the
   scroller, where the overhanging card is the only sign there is more. */
@media (min-width: 1200px) {
  .lm-testi__scroll {
    overflow-x: visible;
    scroll-snap-type: none;
    gap: 12px;
    padding-inline: 32px;
  }
  .lm-testi__card {
    flex: 1 1 0;
    min-width: 0;
    scroll-snap-align: none;
    /* Tighter on every side, so the width that is left goes to the words
       rather than to air around them. */
    gap: 10px;
    padding: 14px 12px 16px;
  }
  .lm-testi__quote { font-size: 15px; line-height: 1.55; }
  .lm-testi__star { font-size: 13px; }
  .lm-testi__name { font-size: 11px; letter-spacing: 0.07em; }
}

/* The centred row's cards sit centred too, the way You May Also Love below it
   already does — four cards starting hard against the left margin under a
   centred heading read as two different blocks. 'safe center' falls back to
   the left edge if the row ever holds more cards than fit, so the first one
   can still be reached. */
.lm-section--centered .lm-product-slider {
  justify-content: center;
  justify-content: safe center;
}

/* ---------- The second photograph, on hover ----------
   First image: the piece on its own. Second: the piece being worn. Resting
   the pointer on a card answers "how does it look on" without a click.

   Behind `hover: hover` and `pointer: fine`, so a phone or a tablet never
   triggers it — a touch would otherwise flip the image on the way to a tap
   and leave it stuck there. Anyone who has asked for less motion gets the
   swap without the fade. */
.lm-card__hoverimg {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .lm-card__hoverimg { transition: opacity 0.35s ease; }
  .lm-card:hover .lm-card__hoverimg,
  .lm-card__imglink:focus-visible .lm-card__hoverimg { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .lm-card__hoverimg { transition: none; }
}

/* ---------- The seam under Lucy's signature ----------
   The statement block ends with 60px of air and the row of pieces below it
   opens with 64px, and the two stack: 124px of nothing between "Lucy" and
   "Pieces That Tell A Story". Halved on both sides of this one seam —
   every other block keeps the spacing it has. */
.lm-statement { padding-bottom: 30px; }
[id$="__statement"] + [id^="shopify-section"] .lm-section--compact { padding-top: 30px; }

/* ---------- Size Guide, easier to find on a wide screen ----------
   It was a 12px underlined word in the brand blue, the quietest thing in the
   option row and easy to miss beside the size tiles. On desktop it becomes a
   small outlined control with a ruler beside it: still secondary to the
   sizes themselves, but visibly something you can press. The phone keeps the
   plain link, where the 44px tap area already carries it. */
@media (min-width: 860px) {
  .lm-size-guide {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-decoration: none;
    border: 1px solid color-mix(in srgb, var(--lm-brand) 35%, transparent);
    border-radius: 999px;
    background: var(--lm-bg-alt);
    transition: border-color 0.2s ease, background 0.2s ease;
  }
  .lm-size-guide::before {
    content: "";
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    background: currentColor;
    -webkit-mask: var(--lm-icon-ruler) center / contain no-repeat;
    mask: var(--lm-icon-ruler) center / contain no-repeat;
  }
  .lm-size-guide:hover {
    border-color: var(--lm-brand);
    background: var(--lm-bg-panel);
  }
}
:root {
  --lm-icon-ruler: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='8' width='20' height='8' rx='1.5'/%3E%3Cpath d='M6 8v3M10 8v4M14 8v3M18 8v4'/%3E%3C/svg%3E");
}

/* ---------- Four cards, one full row ----------
   Four 200px cards centred in a 1297px row left a third of the width empty
   on either side, with the arrows stranded out at the edges. On a wide
   screen the cards share the row instead. Capped at 320px so a row that
   ever holds fewer than four does not blow them up. */
@media (min-width: 860px) {
  /* Any scrolling row, wherever it sits. The homepage block carries neither of
     the two classes below, so its four cards stayed 200px wide and huddled
     against the left of a 1257px row with a third of it empty - while the
     grid of eight directly above filled the same width. */
  .lm-product-slider--slider > .lm-card,
  .lm-carousel-section .lm-product-slider > .lm-card,
  .lm-section--centered .lm-product-slider > .lm-card {
    /* Grow to fill the row when there are few pieces, but never below 240px:
       seven cards squeezed to 145px each filled the width and left nothing
       to scroll, so the arrows had no work to do. Past that width the row
       overflows and runs in a circle, which is the point of the arrows. */
    flex: 1 0 240px;
    min-width: 240px;
    max-width: 320px;
  }
}

/* You May Also Love was the last heading still sitting left while every
   other section title on the page is centred. Same treatment; this class
   belongs to that one section. */
.lm-carousel-section .lm-section-header {
  display: block;
  text-align: center;
}

/* ---------- Category circles ----------
   A round photograph reads as a thing you can have; the word under it only
   names it. They sit in one centred row on a desktop and slide sideways on a
   phone, so five categories never stack into a block that pushes the pieces
   off the screen. The ring is the same hairline as the cards, so the row
   belongs to the grid underneath it. */
.lm-catcircles { padding: 26px 24px 8px; }
.lm-catcircles__heading {
  font-family: var(--lm-serif); font-size: 22px; font-weight: 500;
  color: var(--lm-ink); text-align: center; margin: 0 0 18px;
}
.lm-catcircles__row {
  display: flex; justify-content: center; align-items: flex-start;
  gap: 38px; flex-wrap: wrap;
}
.lm-catcircle {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-decoration: none; width: 120px; flex: 0 0 auto;
}
.lm-catcircle__img {
  width: 120px; height: 120px; border-radius: 50%; overflow: hidden;
  background: var(--lm-bg-alt); border: 1px solid var(--lm-border);
  display: block; transition: transform .18s ease, box-shadow .18s ease;
}
.lm-catcircle__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lm-catcircle__label {
  font-size: 14px; color: var(--lm-text-2); text-align: center; line-height: 1.3;
}
.lm-catcircle:hover .lm-catcircle__img {
  transform: translateY(-2px); box-shadow: 0 4px 14px rgba(41,41,41, 0.12);
}
.lm-catcircle:hover .lm-catcircle__label { color: var(--lm-ink); }
.lm-catcircle:focus-visible .lm-catcircle__img { outline: 2px solid var(--lm-brand); outline-offset: 3px; }
@media (max-width: 859px) {
  /* Sideways rather than wrapped: a second row of circles costs another 140px
     before the first piece is in sight. The edge of the next one showing is
     what says there are more. */
  .lm-catcircles { padding: 18px 0 4px; }
  .lm-catcircles__row {
    flex-wrap: nowrap; justify-content: flex-start; gap: 20px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding-inline: 20px; scrollbar-width: none;
  }
  .lm-catcircles__row::-webkit-scrollbar { display: none; }
  .lm-catcircle { width: 88px; }
  .lm-catcircle__img { width: 88px; height: 88px; }
  .lm-catcircle__label { font-size: 13px; }
}