/* MessMate home page, phone fixes and the three-step fitting guide (Claude, 4 Nov 2026).
   Loaded after mm-home.css. Four things live here:
   1. the colours of the single-piece swatches. mm_swatch_style() paints a guard, bowl or mat swatch with --sw, but
      the shared .mm-swatch rule only reads --a/--b/--c (the three-way pie a set needs), so every single-piece
      swatch rendered blank. One rule reads --sw.
   2. the demo's product chips, wrapped onto two rows on a phone instead of running off the edge, and the
      regular-bowl / MessMate toggle taken out (the demo opens on the finished set; see index.php).
   3. "How to fit it" as three plain steps - measure, clip, attach - each with its own drawing. It replaces the
      scroll-pinned walk-through, which on a phone showed the first step and then an empty screen.
   4. the opening stage's colour picker on a phone. assets/mm-stage.css hangs it from the bottom edge of the 3D
      scene, but the shared .mm3d rule in messmate.css is overflow:hidden, which cut the picker off entirely (found
      by rendering the layout, not by reading it). The scene must let it show, and it needs a little more room
      under it than the stage file reserves. */

/* ---------- 1. swatches ---------- */
.mm-swatch[style*="--sw"] { background: var(--sw); }
.mm-buy__colors { gap: 10px; }
.mm-buy__colors .mm-swatch {
  width: 38px; height: 38px; border: 2px solid #fff;
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--mm-ink) 22%, transparent), 0 3px 8px rgba(36, 33, 29, .14);
}
.mm-buy__colors .mm-swatch[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--mm-ink), 0 5px 12px rgba(36, 33, 29, .22); transform: scale(1.06); }
/* a colour still drawn in 3D sits inside the card, on its own background, rather than filling it like a photograph */
.mm-buy__media img.is-render { object-fit: contain; padding: 5%; box-sizing: border-box; }

/* ---------- 2. the demo's chips ---------- */
.mm3d--hero .mm-seg { display: none; }
.mm3d--hero .mm3d__chips {
  flex-wrap: wrap; justify-content: center; overflow: visible; border-radius: 26px;
  max-width: min(100%, 430px); gap: 4px 6px;
}
.mm3d--hero .mm3d__chips button { min-height: 38px; padding: 0 14px; }

/* ---------- 3. three steps ---------- */
.mm-steps3 { list-style: none; margin: 38px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.mm-step3 {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--mm-paper); border: 1px solid var(--mm-line); border-radius: 24px;
}
.mm-step3__art { margin: 0; background: var(--mm-pine-tint); border-bottom: 1px solid var(--mm-line); }
.mm-step3__body { position: relative; padding: 22px 22px 24px; }
.mm-step3__n {
  display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 12px; border-radius: 50%;
  background: var(--mm-pine); color: #fff; font: 700 16px/1 var(--mm-sans);
}
.mm-step3 h3 { margin: 0 0 8px; font-family: var(--mm-display); font-size: 24px; line-height: 1.15; letter-spacing: -.01em; color: var(--mm-ink); }
.mm-step3 p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--mm-ink-2); }
.mm-step3 .mm-howto__cue { margin-top: 14px; }
.mm-steps3__foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin: 30px 0 0; font-size: 15px; color: var(--mm-ink-2); }
.mm-steps3__foot a { color: var(--mm-pine); font-weight: 600; }
.mm-steps3__video { max-width: 760px; margin: 30px auto 0; }
@media (max-width: 860px) {
  .mm-steps3 { grid-template-columns: 1fr; gap: 16px; margin-top: 28px; }
  .mm-step3 { flex-direction: row; align-items: stretch; }
  .mm-step3__art { flex: 0 0 42%; border-bottom: 0; border-right: 1px solid var(--mm-line); display: grid; place-items: center; }
  .mm-step3__body { padding: 18px 18px 20px; }
  .mm-step3 h3 { font-size: 21px; }
  .mm-step3 p { font-size: 14.5px; line-height: 1.55; }
}
@media (max-width: 520px) {
  .mm-step3 { flex-direction: column; }
  .mm-step3__art { flex: none; border-right: 0; border-bottom: 1px solid var(--mm-line); }
  .mm-step3__art .mm-art { max-height: 220px; }
}

/* the drawings */
.mm-art { display: block; width: 100%; height: auto; }
.mm-art .sh     { fill: rgba(36, 33, 29, .13); }
.mm-art .bowl   { fill: #9fd4bc; }
.mm-art .rim    { fill: #7fb89f; }
.mm-art .steel  { fill: #dfe3e6; }
.mm-art .steel2 { fill: #c7ccd0; }
.mm-art .wall   { fill: #ede3cd; stroke: #cfc3a8; stroke-width: 1.5; }
.mm-art .wall2  { fill: #f7f1e2; }
.mm-art .strap  { fill: #e0d4b8; stroke: #c3b690; stroke-width: 1.5; }
.mm-art .tongue1 { fill: #f4ecd8; stroke: #b9aa82; stroke-width: 1.5; }
.mm-art .tongue2 { fill: #d9ccae; stroke: #b9aa82; stroke-width: 1.5; }
.mm-art .stud   { fill: #b9aa82; stroke: #8f8159; stroke-width: 1.5; }
.mm-art .hole   { fill: #8f8159; }
.mm-art .tape rect { fill: var(--mm-clay); }
.mm-art .tape .tc { fill: color-mix(in srgb, var(--mm-clay) 70%, #000); }
.mm-art .tk     { stroke: rgba(255, 255, 255, .85); stroke-width: 1.6; fill: none; }
.mm-art .dim    { stroke: var(--mm-ink-2); stroke-width: 2; fill: none; stroke-linecap: round; }
.mm-art .chip   { fill: var(--mm-paper); stroke: var(--mm-line); stroke-width: 1.5; }
.mm-art .lbl    { fill: var(--mm-ink); font: 700 15px var(--mm-sans, system-ui); }
.mm-art .arr path { stroke: var(--mm-pine); stroke-width: 4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.mm-art .click  { stroke: var(--mm-clay); stroke-width: 3.5; fill: none; stroke-linecap: round; }
.mm-art .press  { stroke: var(--mm-pine); stroke-width: 4; fill: none; stroke-linecap: round; opacity: .55; }
.mm-art .ok circle { fill: var(--mm-pine); }
.mm-art .ok path { stroke: #fff; stroke-width: 4.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- 4. the stage's colour picker on a phone ---------- */
@media (max-width: 860px) {
  .mm-stage__scene { overflow: visible; margin-bottom: 138px; }
}