/* MessMate home page, additions of 4 Nov 2026: verified reviews, the before/after carousel, and the scroll animations.
   Effects use the individual `translate` and `scale` properties so they never fight the transforms other rules set. */

/* ---------- reviews ---------- */
.mm-review__top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.mm-vf{display:inline-flex;align-items:center;gap:5px;padding:5px 11px 5px 8px;border-radius:99px;background:var(--mm-pine-tint);color:var(--mm-pine-2);font:600 12px/1 var(--mm-sans);letter-spacing:.02em;white-space:nowrap}
.mm-vf .mm-ic{width:14px;height:14px;stroke-width:2.6}
/* every review card the same height and the same shape, so the row reads as one set */
.mm-revcar__track{align-items:stretch}
.mm-revcar__track > .mm-review{display:flex;flex-direction:column;min-height:272px}
.mm-revcar__track > .mm-review blockquote{flex:1 1 auto}
.mm-revcar__track > .mm-review figcaption{margin-top:auto}
@media (max-width:520px){.mm-revcar__track > .mm-review{min-height:296px}}
.mm-revcar__foot{justify-content:flex-end}
.mm-revcar__dots{display:flex;gap:7px;margin-right:auto}
.mm-revcar__dots i{width:8px;height:8px;border-radius:50%;background:var(--mm-line);transition:width .35s var(--mm-ease),background .3s}
.mm-revcar__dots i.is-on{width:26px;border-radius:8px;background:var(--mm-pine)}

/* ---------- before / after ---------- */
.mm-ba{position:relative}
.mm-ba__track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;
  margin:0 calc(var(--mm-pad) * -1);padding:4px var(--mm-pad) 22px}
.mm-ba__track::-webkit-scrollbar{display:none}
.mm-ba__slide{flex:0 0 min(640px,88vw);scroll-snap-align:start;margin:0;background:var(--mm-paper);border:1px solid var(--mm-line);border-radius:26px;padding:14px 14px 20px;box-shadow:var(--mm-shadow)}
.mm-ba__pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mm-ba__pane{position:relative;margin:0;border-radius:16px;overflow:hidden;aspect-ratio:300/220;background:var(--mm-oat)}
.mm-ba__pane img,.mm-ba__pane svg{display:block;width:100%;height:100%;object-fit:cover}
.mm-ba__tag{position:absolute;left:10px;top:10px;padding:6px 11px;border-radius:99px;font:600 11.5px/1 var(--mm-sans);letter-spacing:.1em;text-transform:uppercase;background:rgba(36,33,29,.78);color:#fff}
.mm-ba__pane--after .mm-ba__tag{background:var(--mm-pine);}
.mm-ba__cap{padding:16px 8px 0}
.mm-ba__cap h3{margin:0;font:600 21px/1.2 var(--mm-display);color:var(--mm-ink);letter-spacing:-.01em}
.mm-ba__cap p{margin:6px 0 0;font-size:15px;line-height:1.5;color:var(--mm-ink-2)}
.mm-ba__note{margin:6px 0 0;text-align:center;font-size:13px;color:var(--mm-ink-3)}
/* photo pairs are portrait-ish, so their panes follow the pictures; they are labelled as illustrative images */
.mm-ba__pane:has(img){aspect-ratio:941/828}
.mm-ba:has(.mm-ba__pane img)::after{content:"Illustrative before-and-after images.";display:block;margin-top:6px;text-align:center;font-size:13px;color:var(--mm-ink-3)}
.mm-ba__foot{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:2px}
.mm-ba__foot .mm-revcar__dots{margin-right:0}
.mm-ba__foot .mm-revnav{margin-left:auto}
@media (max-width:520px){.mm-ba__tag{left:7px;top:7px;padding:5px 9px;font-size:10.5px}.mm-ba__cap h3{font-size:19px}}

/* the drawings' colours */
.ba-wall{fill:#F6F0E6}.ba-floor{fill:#E4D6BF}.ba-skirt{fill:#D8C7AA}
.ba-bowl{fill:#8FA3B8}.ba-rim{fill:#B7C5D4}
.ba-k{fill:#B5702F}
.ba-guard{fill:var(--mm-pine);fill-opacity:.82}.ba-guard-line{stroke:#fff;stroke-opacity:.5;stroke-width:2;fill:none}.ba-stud{fill:#fff;fill-opacity:.85}
.ba-trail{fill:none;stroke:#B5702F;stroke-opacity:.45;stroke-width:2;stroke-dasharray:3 6;stroke-linecap:round}
.ba-water{fill:#7FB4D8}.ba-w{fill:#7FB4D8}.ba-puddle{fill-opacity:.55}
.ba-stain{fill:#9CC3DD;fill-opacity:.55;stroke:#9CC3DD;stroke-opacity:.55}

/* ---------- real photographs in the fitting steps ----------
   The photographs are square, white-background shots, so they are shown whole on white (contain) rather than
   cropped to fill a wide box, which cut the hand and the strap off. */
.mm-step3__art--photo{margin:0;overflow:hidden;background:#fff}
.mm-step3__art--photo img{display:block;width:100%;height:100%;aspect-ratio:1/1;object-fit:contain}

/* ---------- words rise into headlines ---------- */
@media (prefers-reduced-motion:no-preference){
  .mm-js .mm-wd{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
  .mm-js .mm-wd > span{display:inline-block;translate:0 108%;transition:translate .8s var(--mm-ease);transition-delay:calc(var(--i,0) * 55ms);animation:mmWdFail 0s 3.5s forwards}
  .mm-js .is-words-in .mm-wd > span{translate:0 0;animation:none}
  @keyframes mmWdFail{to{translate:0 0}}

}

/* ---------- scroll-driven effects (run off the scroll position itself) ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion:no-preference){
    .mm-buy__media img{animation:mmExZoom linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
    .mm-step3__art{animation:mmExRise linear both;animation-timeline:view();animation-range:entry 0% entry 80%}
    .mm-step3__n{animation:mmExPop linear both;animation-timeline:view();animation-range:entry 10% entry 90%}
    .mm-ba__slide{animation:mmExRise linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
    .mm-fitcard,.mm-measure{animation:mmExRise linear both;animation-timeline:view();animation-range:entry 0% entry 75%}
    .mm-cta__glow{animation:mmExDrift linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    .mm-ticker{animation:mmExFade linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
    .mm-stage__copy{animation:mmExLeave linear both;animation-timeline:view();animation-range:exit 0% exit 75%}
    .mm-foot__base{animation:mmExFade linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
  }
}
@keyframes mmExZoom{from{scale:1.12}to{scale:1}}
@keyframes mmExRise{from{opacity:0;translate:0 44px}to{opacity:1;translate:0 0}}
@keyframes mmExPop{from{scale:.5;opacity:0}to{scale:1;opacity:1}}
@keyframes mmExDrift{from{translate:0 40px}to{translate:0 -40px}}
@keyframes mmExFade{from{opacity:0}to{opacity:1}}
@keyframes mmExLeave{from{opacity:1;translate:0 0}to{opacity:.1;translate:0 -36px}}

/* =====================================================================================================
   Photo, review and desktop fixes (4 Nov 2026, afternoon).
   1. Shop product photos, at every size: the whole product shows inside its box on plain white, and nothing is
      printed on top of a photograph (the card labels over the pictures are gone).
   2. Review cards ease in as they slide into view and lift on hover.
   3. Everything inside @media (min-width: 861px) is for desktops and laptops only. Phones are untouched.
   ===================================================================================================== */

/* ---------- shop photos: fit the box, white background, nothing on top ---------- */
.mm-buy__media{background:#fff;border-bottom:1px solid var(--mm-line)}
.mm-buy__media img{object-fit:contain;box-sizing:border-box;padding:5%;mix-blend-mode:multiply}   /* a near-white photo background melts into the white box */
.mm-buy:hover .mm-buy__media img{transform:scale(1.025)}
.mm-buy__tag{display:none}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion:no-preference){.mm-buy__media img{animation:none}}
}

/* ---------- reviews: cards ease in as they slide into view, and lift on hover ---------- */
@supports (animation-timeline: view(inline)) {
  .mm-revcar__track > .mm-review{animation:mmRevIn linear both;animation-timeline:view(inline);animation-range:entry 0% entry 85%}
}
@keyframes mmRevIn{from{opacity:.15;scale:.94;translate:0 22px}to{opacity:1;scale:1;translate:0 0}}
.mm-revcar__track > .mm-review{transition:box-shadow .3s var(--mm-ease),border-color .3s var(--mm-ease)}
.mm-revcar__track > .mm-review:hover{border-color:color-mix(in srgb,var(--mm-pine) 40%,var(--mm-line));box-shadow:0 22px 44px -30px rgba(36,33,29,.55)}
.mm-vf .mm-ic{animation:mmVfPop .7s var(--mm-ease) both}
@keyframes mmVfPop{0%{scale:.3;opacity:0}70%{scale:1.25;opacity:1}100%{scale:1}}
@keyframes mmStageFade{from{opacity:0}to{opacity:1}}

@media (min-width:861px){

  /* ---------- opening stage ----------
     The copy block spans the whole stage and sat on top of the colour picker, so on a computer the clicks landed on
     the text block and never reached the swatches. The block now lets clicks fall through; only its links catch them. */
  .mm-stage__copy{pointer-events:none}
  .mm-stage__copy a,.mm-stage__copy button{pointer-events:auto}
  .mm-stage__pick{bottom:26px;gap:10px}
  .mm-stage__pickl{font-size:10.5px;letter-spacing:.26em}
  .mm-stage__sw{gap:12px;padding:10px 14px;background:rgba(10,14,6,.56);border-color:rgba(255,255,255,.22);box-shadow:0 18px 40px -18px rgba(0,0,0,.7)}
  .mm-swatch--lg{width:38px;height:38px;transition:transform .25s var(--mm-ease),box-shadow .25s var(--mm-ease);cursor:pointer}
  .mm-swatch--lg:hover{transform:translateY(-3px) scale(1.06)}
  .mm-stage__cap{font-size:13.5px;font-weight:600;letter-spacing:.01em}

  /* The stage's words come in with a fade even when the computer asks for reduced motion (Windows turns animation
     effects off on many machines, and the page then looked frozen next to the phone). Opacity only, no movement. */
  @media (prefers-reduced-motion:reduce){
    .mm-stage__eyebrow,.mm-stage__word,.mm-stage__lede,.mm-stage__ctas,.mm-stage__meta{animation:mmStageFade .9s ease both}
    .mm-stage__word{animation-delay:.15s}
    .mm-stage__lede{animation-delay:.35s}
    .mm-stage__ctas{animation-delay:.5s}
    .mm-stage__meta{animation-delay:.6s}
  }

  /* ---------- find your fit: one column, three tidy rows ---------- */
  .mm-find{gap:22px;max-width:800px;margin-inline:auto}
  .mm-find__qs{grid-template-columns:1fr;gap:14px}
  .mm-fq{padding:20px 24px 22px;border-radius:20px}
  .mm-fq legend{font-size:17px;gap:12px}
  .mm-fq legend i{width:26px;height:26px;flex-basis:26px;font-size:13px}
  .mm-fopts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px}
  .mm-fopt span{display:grid;place-items:center;min-height:54px;padding:10px 14px;border-radius:14px;text-align:center;font-size:14.5px;line-height:1.3;background:var(--mm-paper)}
  .mm-fopt input:checked + span{box-shadow:0 8px 18px -10px rgba(36,33,29,.6)}
  .mm-find__out{max-width:none;margin-top:2px}

  /* ---------- the demo's product bar ---------- */
  .mm3d--hero .mm3d__top{width:100%}
  .mm3d__chips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;width:min(100%,560px);padding:5px;border-radius:18px;overflow:visible;
    background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.9);box-shadow:0 14px 34px -18px rgba(36,33,29,.45),inset 0 1px 0 rgba(255,255,255,.8)}
  .mm3d__chips button{display:grid;place-items:center;min-height:48px;padding:6px 10px;border-radius:14px;font:600 13.5px/1.15 var(--mm-sans);text-align:center;white-space:normal;text-wrap:balance;letter-spacing:.005em;
    transition:background .25s var(--mm-ease),color .25s var(--mm-ease),box-shadow .25s var(--mm-ease),transform .25s var(--mm-ease)}
  .mm3d__chips button:hover{background:rgba(255,255,255,.95);transform:translateY(-1px)}
  .mm3d__chips button[aria-pressed="true"]{background:var(--mm-pine);color:#fff;box-shadow:0 10px 20px -10px rgba(36,33,29,.65);transform:none}
  .mm3d__swatches{gap:10px}
  .mm3d__cap{font-weight:600}
}