/**
 * "How it works" step navigator — used on template product pages and anywhere
 * the [how-it-works] shortcode is placed. Content is global (Products →
 * Template settings).
 */

.mm-steps {
  --mm-ink: var(--wp--preset--color--mm-hero, #3a3e35);
  --mm-label: #a5a096;
  --mm-body: #57544c;
  box-sizing: border-box;
  width: 100%;
  padding-block: clamp(40px, 6vh, 64px) clamp(56px, 9vh, 96px);
}
/* On the product page it is a full-width section beside the rail; placed with
   the shortcode it takes the width and padding of whatever holds it. */
.mm-product--template .mm-steps {
  width: auto;                                               /* fills what the rail margin leaves */
  margin-right: var(--mm-rail);
  padding-inline: clamp(24px, 4vw, 56px) clamp(30px, 4vw, 72px);
}
.mm-steps__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: clamp(28px, 4.5vh, 48px);
}
.mm-steps__script {
  font-family: "Mistgak Signature", var(--mm-font);
  font-size: clamp(30px, 2.4vw, 36px);
  line-height: 1;
  color: var(--wp--preset--color--mm-clay, #bc8c78);
}
.mm-steps__heading {
  margin: 10px 0 0;
  font-size: clamp(26px, 3vw, 44px);
  font-weight: 200;
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: var(--mm-ink);
}
.mm-steps__counter { display: flex; align-items: baseline; gap: 8px; }
/* Same size/leading as the heading beside it, so the two baselines line up. */
.mm-steps__num { font-size: clamp(26px, 3vw, 44px); font-weight: 200; line-height: 1.06; color: var(--mm-ink); }
.mm-steps__of { font-size: 12px; letter-spacing: 0.16em; color: var(--mm-label); }

.mm-steps__panel {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(260px, 0.85fr);
  gap: clamp(24px, 4vw, 60px);
  align-items: start;
  min-height: clamp(150px, 20vh, 190px);            /* switching steps never jumps the layout */
}
.mm-steps__panel[hidden] { display: none; }
.mm-steps__title { margin: 0; font-size: clamp(21px, 2.1vw, 30px); font-weight: 300; line-height: 1.15; color: var(--mm-ink); }
.mm-steps__body { margin: 0; font-size: clamp(14.5px, 1.15vw, 16.5px); line-height: 1.8; color: var(--mm-body); text-wrap: pretty; }

.mm-steps__nav {
  display: flex;
  gap: clamp(6px, 1vw, 14px);
  margin-top: clamp(30px, 5vh, 54px);
}
.mm-steps__item {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 0 0;
  border: 0;
  border-top: 1px solid rgba(58, 62, 53, 0.18);   /* ahead */
  border-radius: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.3s ease;
}
.mm-steps__dot {
  width: 7px;
  height: 7px;
  margin-top: -23.5px;                             /* straddles the rule */
  border-radius: 50%;
  background: #c9c6be;
  transition: width 0.3s ease, height 0.3s ease, margin 0.3s ease, background-color 0.3s ease;
}
.mm-steps__label {
  font-family: var(--mm-font);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--mm-label);
  transition: color 0.3s ease;
}
.mm-steps__item.is-past,
.mm-steps__item.is-active { border-top-color: var(--mm-ink); }
.mm-steps__item.is-past .mm-steps__dot { background: var(--mm-ink); }
.mm-steps__item.is-active .mm-steps__dot { width: 11px; height: 11px; margin-top: -25.5px; background: var(--wp--preset--color--mm-clay, #bc8c78); }
.mm-steps__item.is-active .mm-steps__label,
.mm-steps__item:hover .mm-steps__label,
.mm-steps__item:focus-visible .mm-steps__label { color: var(--mm-ink); }

@media (max-width: 767px) {
  .mm-steps__panel { grid-template-columns: 1fr; gap: 12px; min-height: 0; }
  /* The row scrolls sideways: padding keeps the dots (which sit above the rule)
     inside the scroll box, and the edge that has more fades out. */
  .mm-steps__nav { overflow-x: auto; padding: 8px 0 6px; scrollbar-width: none; scroll-snap-type: x proximity; }
  .mm-steps__nav::-webkit-scrollbar { display: none; }
  .mm-steps__nav.can-right { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); }
  .mm-steps__nav.can-left { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 56px), transparent); }
  .mm-steps__nav.can-left.can-right { -webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 56px), transparent); }
  .mm-steps__item { min-width: 96px; scroll-snap-align: start; }
}