/* ==========================================================================
   WHITE MOON — shop templates in the "Grown by light" system:
   collection grid + filters, catalogue cards, product page, cart, search.
   Works on the legacy wm-* markup through overrides, so commerce wiring
   (variant picker, add to bag, facets, cart drawer) is untouched.
   ========================================================================== */

/* ---- legacy buttons → moon buttons --------------------------------------------- */
.m-body .wm-btn { border-radius: 0; font: 600 var(--t-12)/1 var(--f-ui); letter-spacing: var(--track-label); text-transform: uppercase; min-height: 52px; }
.m-body .wm-btn--solid { background: var(--midnight); color: var(--moon); box-shadow: none; }
.m-body .wm-btn--solid:hover { background: var(--ink); color: var(--moon); }
.m-body .wm-btn--outline { border: 1px solid rgb(11 15 26 / .35); color: var(--midnight); }
.m-body .wm-btn--outline:hover { background: var(--midnight); color: var(--moon); border-color: var(--midnight); transform: none; }
.m-body .wm-btn--gold { background: var(--midnight); color: var(--moon); }

/* ---- collection layout ------------------------------------------------------------ */
.m-body .wm-collection { padding-top: 0; }
.m-body .wm-fbar { position: sticky; top: var(--head-h); z-index: 20; background: rgb(247 246 242 / .96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--hair-light); margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); }
.m-body .wm-fbar__btn, .m-body .wm-fbar__mobile, .m-body .wm-fbar__sort select, .m-body .wm-fbar select { border-radius: 0; font-family: var(--f-ui); font-size: 13px; min-height: 44px; border-color: var(--hair-light); background: transparent; color: var(--midnight); }
.m-body .wm-fbar__count { font: 600 11px/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--muted-light); }
.m-body .wm-collection__body { margin-top: 40px; }
@media (min-width: 1100px) {
  /* filters move into a sticky sidebar beside the grid */
  .m-body .wm-collection__body { display: grid; grid-template-columns: 248px 1fr; gap: 56px; align-items: start; }
  .m-body .wm-collection__body:has(.m-empty) { display: block; }
  .m-body .wm-collection__body:has(.m-empty) .wm-facets { display: none; }
  .m-body .wm-collection__body .wm-facets { position: sticky; top: calc(var(--head-h) + 88px); inset: auto; z-index: 1; width: auto; max-height: calc(100vh - var(--head-h) - 110px); padding: 0; background: transparent; box-shadow: none; transform: none; overflow: auto; scrollbar-width: thin; }
  .m-body .wm-collection__body .wm-facets__head { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid var(--midnight); }
  .m-body .wm-collection__body .wm-facets__close { display: none; }
  .m-body .wm-facets__scrim { display: none !important; }
  .m-body .wm-fbar__group, .m-body .wm-fbar__swatches, .m-body .wm-fbar__price, .m-body .wm-fbar__mobile { display: none !important; }
}
.m-body .wm-facets__title { font: 300 26px/1 var(--f-display); color: var(--midnight); margin: 0; }
.m-body .wm-facet { border-bottom: 1px solid var(--hair-light); }
.m-body .wm-facet__summary { font: 600 11px/1 var(--f-ui); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--midnight); padding: 18px 0; min-height: 44px; }
.m-body .wm-facet__opt { font-size: 14px; color: var(--graphite); min-height: 36px; }
.m-body .wm-facet__count { color: var(--muted-light); }
.m-body .wm-facet__box, .m-body .wm-fbar__box { border-radius: 0; border-color: rgb(42 47 58 / .4); }

.m-body .wm-collection__grid { gap: 40px 24px; }
@media (max-width: 749px) { .m-body .wm-collection__grid { gap: 28px 12px; } }

/* editorial tile — spans two columns, every eighth product */
.m-edit { grid-column: span 2; }
.m-edit__tile { position: relative; display: block; height: 100%; min-height: 420px; overflow: hidden; color: var(--moon); text-decoration: none; background: var(--midnight); }
.m-edit__tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); opacity: .85; }
.m-edit__tile:hover img { transform: scale(1.04); }
.m-edit__tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(11 15 26 / .85), rgb(11 15 26 / 0) 60%); }
.m-edit__copy { position: absolute; z-index: 1; left: 32px; right: 32px; bottom: 32px; display: grid; gap: 10px; }
.m-edit__copy .m-label { color: var(--glow); }
.m-edit__title { font: 300 var(--t-40)/1.05 var(--f-display); letter-spacing: -.02em; }
.m-edit__cta { font: 600 11px/1 var(--f-ui); letter-spacing: var(--track-label); text-transform: uppercase; }
@media (max-width: 749px) { .m-edit__tile { min-height: 300px; } .m-edit__copy { left: 20px; right: 20px; bottom: 20px; } }

/* empty collection: curated preview */
.m-empty { padding: 24px 0 32px; }
.m-empty__head { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 64px; align-items: end; padding-bottom: 48px; margin-bottom: 48px; border-bottom: 1px solid var(--hair-light); }
.m-empty__head .m-label { grid-column: 1 / -1; color: var(--muted-light); display: inline-flex; align-items: center; }
.m-empty__head .m-label .m-crescent { width: 14px; height: 14px; color: #6E5C33; }
.m-empty__head .m-h3 { margin: 0; color: var(--midnight); }
.m-empty__head .m-lead { margin: 0 0 20px; }
.m-empty__ctas { grid-column: 2; display: flex; gap: 12px; flex-wrap: wrap; }
.m-empty__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px 24px; }
@media (max-width: 989px) { .m-empty__head { grid-template-columns: 1fr; } .m-empty__ctas { grid-column: 1; } .m-empty__grid { grid-template-columns: repeat(2, 1fr); gap: 28px 12px; } }
@media (max-width: 549px) { .m-empty__ctas .m-btn { width: 100%; } }

/* ---- catalogue product card (snippets/card-product) ------------------------------- */
.m-body .wm-pcard { background: transparent; border: 0; box-shadow: none; }
.m-body .wm-pcard__media { background: var(--pearl); border: 0; border-radius: 0; aspect-ratio: 1; }
.m-body .wm-pcard__slide img { transition: transform 1.4s var(--ease); }
.m-body .wm-pcard:hover .wm-pcard__slide img { transform: scale(1.04); }
.m-body .m-fallback { display: grid; place-items: center; height: 100%; position: relative; overflow: hidden; }
.m-body .m-fallback img { width: 76%; height: 76%; object-fit: contain; mix-blend-mode: multiply; }
.m-body .m-fallback::after { content: ""; position: absolute; inset: -20% -60%; background: linear-gradient(105deg, transparent 40%, rgb(255 255 255 / .35) 50%, transparent 60%); transform: translateX(-70%); pointer-events: none; }
.m-body .wm-pcard:hover .m-fallback::after { animation: m-sweep 1.4s var(--ease) forwards; }
.m-body .wm-pcard__ribbon { left: 12px; right: auto; top: 12px; background: var(--moon); color: var(--midnight); font: 600 10px/1 var(--f-ui); letter-spacing: .14em; padding: 7px 10px; border-radius: 0; }
.m-body .wm-pcard__body { padding: 16px 0 0; background: transparent; border: 0; }
.m-body .wm-pcard__title { font: 400 19px/1.3 var(--f-display); color: var(--midnight); letter-spacing: -.005em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.m-body .wm-pcard__price { margin-top: 8px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.m-body .wm-pcard__price-k { display: none; }
.m-body .wm-pcard__amt { font: 600 15px/1.3 var(--f-ui); color: var(--midnight); }
.m-body .wm-pcard__was { font: 400 13px/1.3 var(--f-ui); color: var(--muted-light); }
.m-body .wm-pcard__ends { display: none; }
.m-body .wm-pcard__swatches { margin-top: 8px; }
.m-body .wm-pcard__sw { width: 16px; height: 16px; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .12); }
.m-body .wm-pcard__sw.is-selected { outline: 1px solid var(--midnight); outline-offset: 3px; }

/* ---- pagination ---------------------------------------------------------------------- */
.m-body .pagination a, .m-body .pagination span { font-family: var(--f-ui); }

/* ---- PDP ------------------------------------------------------------------------------ */
.m-body .wm-pdp { padding-top: 32px; }
.m-body .wm-pdp__crumbs { font-size: 12.5px; color: var(--muted-light); }
.m-body .wm-pdp__title { font: 300 var(--t-56)/1.04 var(--f-display); letter-spacing: -.02em; color: var(--midnight); }
.m-body .wm-pdp__price { align-items: baseline; }
.m-body .wm-pdp__price-now { font: 300 34px/1 var(--f-display); color: var(--midnight); letter-spacing: -.01em; }
.m-body .wm-pdp__price-was { font: 400 15px/1 var(--f-ui); color: var(--muted-light); }
.m-body .wm-pdp__save { background: var(--midnight); color: var(--glow); border-radius: 0; font: 600 10.5px/1 var(--f-ui); letter-spacing: .14em; padding: 7px 10px; }
.m-body .wm-pdp__price-note, .m-body .wm-pdp__excerpt { color: var(--graphite); font-size: 14px; }
.m-body .wm-opt-row__label, .m-body .wm-variant legend, .m-body .wm-variants legend { font: 600 11px/1 var(--f-ui); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--midnight); }
.m-body .wm-pdp__info input[type="radio"] + label, .m-body .wm-variant__opt, .m-body .wm-variant label { border-radius: 0; }
.m-body .wm-pdp__add, .m-body .wm-pdp__choose-setting { min-height: 56px; }
.m-body .wm-pdp__trust { border-top-color: var(--hair-light); }
.m-trust-ic { display: inline-grid; place-items: center; width: 20px; height: 20px; color: #6E5C33; flex: none; }
.m-trust-ic svg { width: 18px; height: 18px; }

.m-pdp-extra { display: grid; gap: 16px; margin-top: 16px; }
.m-pdp-extra .m-btn svg { width: 16px; height: 16px; }
.m-pdp-ship { display: flex; align-items: center; gap: 10px; margin: 4px 0 0; font-size: 13.5px; color: var(--graphite); }
.m-pdp-ship svg { width: 18px; height: 18px; color: #6E5C33; flex: none; }
.m-pdp-ship b { font-weight: 600; color: var(--midnight); }
.m-cert { background: var(--midnight); color: var(--moon); padding: 24px; margin-top: 8px; }
.m-cert__head { display: flex; gap: 16px; align-items: center; padding-bottom: 18px; border-bottom: 1px solid var(--hair-dark); }
.m-cert__seal { width: 48px; height: 48px; border: 1px solid rgb(217 203 163 / .45); border-radius: 50%; display: grid; place-items: center; flex: none; }
.m-cert__seal .m-crescent { width: 22px; height: 22px; }
.m-cert .m-label { color: var(--glow); }
.m-cert__title { margin: 4px 0 0; font: 300 20px/1.25 var(--f-display); }
.m-cert__grid { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; }
.m-cert__grid div { padding: 16px 0 4px; }
.m-cert__grid div + div { padding-left: 14px; border-left: 1px solid var(--hair-dark); }
.m-cert__grid dt { font: 600 10px/1 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--silver); }
.m-cert__grid dd { margin: 8px 0 0; font: 300 20px/1.1 var(--f-display); color: var(--moon); }
.m-cert__note { margin: 12px 0 0; font-size: 12px; color: var(--silver); }
.m-promises { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--hair-light); border-bottom: 1px solid var(--hair-light); }
.m-promises li { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 6px; text-align: center; font: 600 10.5px/1.3 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--midnight); }
.m-promises li + li { border-left: 1px solid var(--hair-light); }
.m-promises svg { width: 22px; height: 22px; color: #6E5C33; }
@media (max-width: 549px) { .m-cert__grid { grid-template-columns: 1fr 1fr; } .m-cert__grid div:nth-child(3) { border-left: 0; padding-left: 0; } }

/* fallback gallery */
.m-gal { display: grid; gap: 12px; }
.m-gal__stage { position: relative; aspect-ratio: 1; background: var(--pearl); overflow: hidden; }
.m-gal__stage::before { content: ""; position: absolute; inset: 0; background: radial-gradient(48% 48% at 50% 50%, #FFFFFF, transparent 72%); }
.m-gal__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s var(--ease), transform .4s var(--ease); }
.m-gal__img.is-on { opacity: 1; }
.m-gal__img.is-packshot { object-fit: contain; padding: 14%; mix-blend-mode: multiply; }
.m-gal__stage.is-zoom .m-gal__img.is-on { transform: scale(1.6); }
.m-gal__360 { background: var(--midnight); }
.m-gal__360 img { width: 100%; height: 100%; object-fit: cover; }
.m-gal__360-badge { position: absolute; left: 16px; bottom: 16px; padding: 8px 12px; background: rgb(11 15 26 / .7); color: var(--moon); font: 600 10.5px/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; }
.m-gal__note { position: absolute; right: 16px; top: 16px; z-index: 2; font: 500 11px/1 var(--f-ui); letter-spacing: .06em; color: var(--muted-light); background: rgb(247 246 242 / .8); padding: 6px 10px; }
.m-gal__thumbs { display: grid; grid-template-columns: repeat(3, 96px); gap: 12px; }
.m-gal__thumb { position: relative; padding: 0; border: 1px solid transparent; background: var(--pearl); cursor: pointer; aspect-ratio: 1; overflow: hidden; }
.m-gal__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.m-gal__thumb img.is-packshot { object-fit: contain; padding: 14%; mix-blend-mode: multiply; }
.m-gal__thumb span { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px; background: rgb(247 246 242 / .9); font: 600 9.5px/1.2 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--midnight); }
.m-gal__thumb.is-on { border-color: var(--midnight); }
@media (max-width: 549px) { .m-gal__thumbs { grid-template-columns: repeat(3, 1fr); } .m-gal__note { display: none; } }

/* accordions */
.m-body .wm-acc { border-color: var(--hair-light); }
.m-body .wm-acc__summary { font: 600 11px/1 var(--f-ui); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--midnight); min-height: 56px; }

/* sticky mobile add-to-bag */
.m-body .wm-pdp__sticky { background: rgb(11 15 26 / .96); color: var(--moon); border-top: 1px solid var(--hair-dark); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.m-body .wm-pdp__sticky-title { font: 300 18px/1.2 var(--f-display); }
.m-body .wm-pdp__sticky-price { color: var(--glow); font-weight: 600; }
.m-body .wm-pdp__sticky .wm-btn--solid { background: var(--moon); color: var(--midnight); }

/* PDP editorial sections (specs / highlights / 4Cs) */
.m-body .wm-specs, .m-body .wm-hl, .m-body .wm-fourcs { background: var(--moon); }
.m-body .wm-specs h2, .m-body .wm-hl h2, .m-body .wm-fourcs h2 { font-weight: 300; color: var(--midnight); }
.m-body .wm-hl__card, .m-body .wm-fourcs__card, .m-body [class*="wm-hl__item"], .m-body [class*="wm-fourcs__item"] { border-radius: 0; box-shadow: none; }

/* ---- cart / drawers -------------------------------------------------------------------- */
.m-body .wm-cart-drawer, .m-body [data-wm-cart] { font-family: var(--f-ui); }
.m-body [data-wm-cart] h2, .m-body [data-wm-cart] .wm-drawer__title { font: 300 28px/1.1 var(--f-display); color: var(--midnight); }

/* ---- round-3 ------------------------------------------------------------------------ */
.m-body .m-crumbs a { color: var(--silver); }
.m-body .m-crumbs a:hover { color: var(--moon); }
.m-body .m-edit__tile { color: var(--moon); }
/* specs: hairlines, not a white box */
.m-body .wm-specs [class*="__card"], .m-body .wm-specs [class*="__panel"], .m-body .wm-specs [class*="__box"] { background: transparent; border: 0; border-top: 1px solid var(--midnight); box-shadow: none; }
/* 7 empty cart: hairline frame, not a white box */
.m-body .wm-cartpage__empty { background: transparent; border: 1px solid var(--hair-light); box-shadow: none; }
.m-body .wm-cartpage__empty p { font: 300 28px/1.2 var(--f-display); color: var(--midnight); }
/* 8 catalogue sale ribbon: quiet, not a discount sticker */
.m-body .wm-pcard__ribbon { background: transparent; color: var(--muted-light); padding: 0; left: 14px; top: 14px; font-size: 10px; }
/* 9 search field */
.m-body .wm-search-page input[type="search"], .m-body form[action*="search"] input[type="search"] { border-radius: 0; }
/* ---- round-5 ------------------------------------------------------------------------- */
.m-body .wm-collection:has(.m-empty) .wm-fbar { display: none; }
/* trust bar → the ink proof strip of the homepage */
.m-body .wm-trust { background: var(--ink); color: var(--moon); border: 0; }
.m-body .wm-trust__icon { color: var(--glow); }
.m-body .wm-trust__title { font: 300 19px/1.2 var(--f-display); letter-spacing: -.005em; text-transform: none; color: var(--moon); }
.m-body .wm-trust__text, .m-body .wm-trust__caption { color: var(--silver); }
/* style guide: hairline grid, no white cards */
.m-body .wm-guide__grid { gap: 0; border-top: 1px solid var(--hair-light); border-left: 1px solid var(--hair-light); }
.m-body .wm-guide__card { background: transparent; border: 0; border-right: 1px solid var(--hair-light); border-bottom: 1px solid var(--hair-light); box-shadow: none; transition: background .5s var(--ease); }
.m-body .wm-guide__card:hover { background: var(--pearl); }
.m-body .wm-guide__icon { color: #6E5C33; }
.m-body .wm-guide__title { font-weight: 300; color: var(--midnight); }
.m-body .wm-guide__text, .m-body .wm-guide__lede { color: var(--graphite); }
.m-body .wm-guide__cta { color: var(--midnight); font: 600 11px/1 var(--f-ui); letter-spacing: var(--track-label); }
.m-body .wm-guide__kicker { color: var(--muted-light); }
/* PDP highlight + 4Cs cards: same hairline treatment */
.m-body [class*="wm-hl__card"], .m-body [class*="wm-fourcs__card"], .m-body .wm-hl li, .m-body .wm-fourcs li { background: transparent; box-shadow: none; }
.m-body .wm-hl__grid, .m-body .wm-fourcs__grid { gap: 0; border-top: 1px solid var(--hair-light); border-left: 1px solid var(--hair-light); }
.m-body .wm-hl__item, .m-body .wm-fourcs__card { background: transparent; border: 0; border-right: 1px solid var(--hair-light); border-bottom: 1px solid var(--hair-light); box-shadow: none; }
.m-body .wm-hl__icon, .m-body .wm-fourcs__icon { color: #6E5C33; }
.m-body .wm-hl__title, .m-body .wm-fourcs__name, .m-body .wm-hl__heading { font-weight: 300; color: var(--midnight); }
.m-body .wm-hl__text, .m-body .wm-fourcs__note, .m-body .wm-hl__intro, .m-body .wm-fourcs__intro { color: var(--graphite); }
.m-body .wm-hl__kicker, .m-body .wm-fourcs__kicker { color: var(--muted-light); }

/* ---- round 6 ------------------------------------------------------------------------ */
.m-body .wm-pdp__title { font-size: clamp(30px, 2.9vw, 42px); line-height: 1.12; }
/* the off-canvas filter drawer's shadow leaked onto the left edge of the page */
.m-body .wm-facets:not([data-state="open"]) { box-shadow: none; }
/* fancy-colour stones: tint the stand-in stone, keep its white ground white */
.m-tint-green img { filter: sepia(.9) saturate(2.6) hue-rotate(68deg) brightness(1.06) contrast(1.05); }
.m-tint-blue img { filter: sepia(.9) saturate(3) hue-rotate(168deg) brightness(1.04) contrast(1.05); }
.m-tint-pink img { filter: sepia(.75) saturate(2.4) hue-rotate(292deg) brightness(1.08) contrast(1.04); }
.m-tint-yellow img { filter: sepia(.95) saturate(2.2) hue-rotate(-8deg) brightness(1.08) contrast(1.04); }
/* tint: only the stand-in stone, softer, whites stay white */
.m-tint-green img, .m-tint-blue img, .m-tint-pink img, .m-tint-yellow img { filter: none; }
.m-tint-green .is-packshot, .m-fallback.m-tint-green img { filter: sepia(.45) saturate(1.7) hue-rotate(75deg) brightness(1.06); }
.m-tint-blue .is-packshot, .m-fallback.m-tint-blue img { filter: sepia(.45) saturate(1.8) hue-rotate(170deg) brightness(1.05); }
.m-tint-pink .is-packshot, .m-fallback.m-tint-pink img { filter: sepia(.4) saturate(1.6) hue-rotate(295deg) brightness(1.08); }
.m-tint-yellow .is-packshot, .m-fallback.m-tint-yellow img { filter: sepia(.55) saturate(1.5) hue-rotate(-6deg) brightness(1.08); }