/*
Theme Name: MegMakesMe
Theme URI: https://megmakes.me/
Author: Megan
Author URI: https://megmakes.me/
Description: A lightweight, hand-coded classic theme for megmakes.me. Full block-editor support, theme.json-driven design tokens, no framework — just clean templates to build on.
Version: 0.37.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: megmakesme
*/

/* -------------------------------------------------------------
   Design tokens (colors, fonts, spacing) live in theme.json.
   Brand: Sage (primary) + Clay (accent) on warm-greige neutrals,
   Poppins Light throughout. This file holds layout + components.
   ------------------------------------------------------------- */

:root {
  --mm-maxw: 46rem;      /* comfortable reading measure   */
  --mm-maxw-wide: 72rem; /* wide container for full rows  */
  --mm-font: var(--wp--preset--font-family--poppins, "Poppins", system-ui, sans-serif);
}

*,
*::before,
*::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--mm-font);
  font-weight: 300;
  font-size: var(--wp--preset--font-size--medium, 1.125rem);
  line-height: 1.65;
  color: var(--wp--preset--color--mm-ink, #26251d);
  background: var(--wp--preset--color--mm-base, #f2f1ee);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--mm-font);
  font-weight: 300;
  line-height: 1.2;
  color: var(--wp--preset--color--mm-heading, #3f4239);
  margin: 0 0 0.5em;
}

/* Keep emphasis readable without pulling an un-loaded 700 weight. */
strong, b { font-weight: 400; }   /* the site's body is 300, so "bold" is the same regular weight as the ticker word */

/* The editor "Highlight" format uses <mark>, whose browser default is a bright
   yellow background + black text. Reset it so a highlight with only a text
   colour (and no background) inherits cleanly. An explicit background set in the
   editor is an inline style and still wins over this. */
mark {
  background-color: transparent;
  color: inherit;
}

/* --- Typewriter ticker ([home-ticker] token) ---------------- */
.mm-ticker { white-space: nowrap; }
.mm-ticker__word {
  color: var(--wp--preset--color--mm-blush, #d6b1a1);
  font-weight: 400;
}
.mm-ticker__caret {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 0.12em;
  vertical-align: -0.12em;
  background: currentColor;
  animation: mm-caret-blink 1s steps(1) infinite;
}
@keyframes mm-caret-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mm-ticker__caret { animation: none; } }

/* --- Two-paths scroll stage (homepage) ---------------------- */
/* Only active once JS has wrapped the blocks (body.mm-tp-active); until then
   the intro + panels sit in normal flow, so no-JS/mobile degrade gracefully. */
.mm-tp { position: relative; }
.mm-tp-active .mm-tp {
  height: 200vh;                    /* scroll driver (100vh scrub range) */
  width: 100vw;                     /* break out of the constrained content width */
  max-width: none;
  margin-left: calc(50% - 50vw);    /* full-bleed, transform-free (keeps sticky working) */
}
.mm-tp__stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }

.mm-tp-active .mm-tp-intro {
  position: absolute;
  inset: 0;
  z-index: 1;
  height: 100%;
  margin: 0;
}
.mm-tp-active .mm-tp-panels {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex !important; /* override Spectra's grid layout */
  margin: 0 !important;
  min-height: 0;
  pointer-events: none;
}
.mm-tp-active .mm-tp-creative,
.mm-tp-active .mm-tp-clay {
  flex: 1 1 50% !important;
  height: 100% !important;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  will-change: transform;
  pointer-events: auto;
  transition: flex-basis 0.5s cubic-bezier(0.7, 0, 0.2, 1);
}

/* Panel content fades in as one unit once the panels have covered the stage.
   Pure opacity (no vertical shift) so nothing drifts or looks off-centre mid-reveal. */
.mm-tp-active .mm-tp-creative > *,
.mm-tp-active .mm-tp-clay > * {
  opacity: 0;
  transition: opacity 0.45s ease 0.05s;
}
.mm-tp.is-revealed .mm-tp-creative > *,
.mm-tp.is-revealed .mm-tp-clay > * {
  opacity: 1;
}

/* Scroll hint: clickable (plays the whole reveal); fades once the scrub begins. */
.mm-tp-active .mm-tp-hint { transition: opacity 0.3s ease; cursor: pointer; width: fit-content; }
.mm-tp.is-scrolled .mm-tp-hint { opacity: 0; pointer-events: none; }

/* Once revealed, hovering a panel widens it (design: choose a path). */
@media (hover: hover) {
  .mm-tp.is-revealed .mm-tp-panels:hover .mm-tp-creative,
  .mm-tp.is-revealed .mm-tp-panels:hover .mm-tp-clay { flex-basis: 44% !important; }
  .mm-tp.is-revealed .mm-tp-creative:hover,
  .mm-tp.is-revealed .mm-tp-clay:hover { flex-basis: 58% !important; }
}

a {
  color: var(--wp--preset--color--mm-ink, #26251d);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--wp--preset--color--mm-sage, #8c9082);
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
a:hover, a:focus {
  color: var(--wp--preset--color--mm-clay, #bc8c78);
  text-decoration-color: currentColor;
}

img { max-width: 100%; height: auto; }

/* --- Layout container --------------------------------------- */
.mm-container {
  width: 100%;
  max-width: var(--mm-maxw-wide);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}

.mm-content { max-width: var(--mm-maxw); margin-inline: auto; }

/* --- Site header -------------------------------------------- */
.site-header {
  background: var(--wp--preset--color--mm-base, #f2f1ee);
  border-bottom: 1px solid var(--wp--preset--color--mm-line, #e1dfd9);
}
.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.25rem;
}
.site-title { font-size: 1.5rem; font-weight: 500; margin: 0; }
.site-title a { color: var(--wp--preset--color--mm-heading, #3f4239); text-decoration: none; }
.site-description { margin: 0; color: var(--wp--preset--color--mm-muted, #6e6c62); font-size: 0.95rem; }

/* --- Navigation --------------------------------------------- */
.main-navigation ul { list-style: none; display: flex; flex-wrap: wrap; gap: 1.25rem; margin: 0; padding: 0; }
.main-navigation a { text-decoration: none; color: var(--wp--preset--color--mm-ink, #26251d); }
.main-navigation a:hover,
.main-navigation .current-menu-item > a { color: var(--wp--preset--color--mm-clay, #bc8c78); }

/* --- Main / entries ----------------------------------------- */
.site-main { padding-block: clamp(2rem, 6vw, 4rem); }
.entry { margin-block-end: clamp(2rem, 5vw, 3.5rem); }
.entry-title { font-size: clamp(1.6rem, 4vw, 2.4rem); }
.entry-title a { color: var(--wp--preset--color--mm-heading, #3f4239); text-decoration: none; }
.entry-title a:hover { color: var(--wp--preset--color--mm-clay, #bc8c78); }
.entry-meta { color: var(--wp--preset--color--mm-muted, #6e6c62); font-size: 0.9rem; margin-block-end: 1rem; }
.entry-content > * { margin-block: 0 1.25rem; }

/* --- Footer ------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--wp--preset--color--mm-line, #e1dfd9);
  padding-block: 2rem;
  color: var(--wp--preset--color--mm-muted, #6e6c62);
  font-size: 0.9rem;
}
.site-footer a { color: var(--wp--preset--color--mm-muted, #6e6c62); }

/* --- Utility ------------------------------------------------ */
.screen-reader-text {
  border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
  height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute;
}
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; }
.skip-link:focus { left: 0; padding: 0.75rem 1rem; background: var(--wp--preset--color--mm-surface, #fff); }

/* --- Buttons (Sage primary; Clay on hover) ------------------ */
.button,
.wp-block-button__link {
  display: inline-block;
  padding: 0.6em 1.4em;
  font-family: var(--mm-font);
  font-weight: 500;
  background: var(--wp--preset--color--mm-sage, #8c9082);
  color: var(--wp--preset--color--mm-ink, #26251d);
  border: 0;
  border-radius: 8px;
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.button:hover,
.button:focus,
.wp-block-button__link:hover,
.wp-block-button__link:focus {
  background: var(--wp--preset--color--mm-clay, #bc8c78);
  color: var(--wp--preset--color--mm-ink, #26251d);
}

/* --- Menu toggle (hamburger) -------------------------------- */
.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.2rem;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--wp--preset--color--mm-ink, #26251d);
  font-family: var(--mm-font);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.menu-toggle__bars { display: inline-flex; flex-direction: column; gap: 5px; }
.menu-toggle__bars span {
  display: block;
  width: 24px;
  height: 2px;
  background: currentColor;
}
.menu-toggle:hover,
.menu-toggle:focus-visible { color: var(--wp--preset--color--mm-clay, #bc8c78); }

/* Headings never show link styling: a linked heading looks exactly like a
   heading (no underline, heading colour) — including any inline underline the
   editor wraps around the text. Hover gives the only cue. */
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
.wp-block-heading a,
.wp-block-post-title a {
  color: inherit !important;
  text-decoration: none !important;
}
h1 a *, h2 a *, h3 a *, h4 a *, h5 a *, h6 a *,
.wp-block-heading a *,
.wp-block-post-title a * { text-decoration: none !important; }
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover,
.wp-block-heading a:hover,
.wp-block-post-title a:hover,
h1 a:focus-visible, h2 a:focus-visible, h3 a:focus-visible, h4 a:focus-visible, h5 a:focus-visible, h6 a:focus-visible,
.wp-block-heading a:focus-visible,
.wp-block-post-title a:focus-visible { color: var(--wp--preset--color--mm-clay, #bc8c78) !important; }

/* Links inside the two-paths panels (e.g. the linked "clay" / "creative" script
   labels) carry no underline — neither the theme's link underline nor an
   inline underline the editor may have added to the text. */
.mm-tp a,
.mm-tp a *,
.mm-tp-panels a,
.mm-tp-panels a * { text-decoration: none !important; } /* .mm-tp is added by the desktop reveal script; phones only have .mm-tp-panels */

/* Script-font labels (italic = Mistgak) that are links read like headings:
   no underline, including an inline underline from the editor. */
em a, em a *,
a em, a em * { text-decoration: none !important; }

/* --- Gravity Forms (newsletter sign-up etc.) in the site's styling ------
   Label visually hidden (the field's placeholder carries it — set one in the
   form, main.js falls back to "Your email"), pill input, pill button. --- */
.gform_wrapper form {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}
.gform_wrapper .gform_body { flex: 1 1 240px; }
.gform_wrapper .gform_fields { gap: 10px; }
.gform_wrapper .gfield_label,
.gform_wrapper .gform-field-label {                          /* screen-reader only */
  position: absolute !important;
  width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.gform_wrapper .ginput_container input[type="email"],
.gform_wrapper .ginput_container input[type="text"] {
  width: 100%;
  min-height: 0;
  padding: 13px 22px !important;
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  border-radius: 999px !important;
  background: var(--wp--preset--color--mm-surface, #fff) !important;
  color: var(--wp--preset--color--mm-hero, #3a3e35) !important;
  font-family: var(--mm-font) !important;
  font-weight: 300;
  font-size: 14px !important;
  line-height: 1.4 !important;
  box-shadow: none !important;
}
.gform_wrapper .ginput_container input::placeholder { color: #a5a096; opacity: 1; }
.gform_wrapper .ginput_container input:focus { outline: 2px solid var(--wp--preset--color--mm-hero, #3a3e35); outline-offset: 2px; }
.gform_wrapper .gform_footer { margin: 0 !important; padding: 0 !important; flex: none; }
.gform_wrapper .gform_button,
.gform_wrapper .gform-button,
.gform_wrapper button[type="submit"],
.gform_wrapper input[type="submit"] {                        /* the site pill (product bar button) — footer or inline position */
  display: inline-block;
  margin: 0 !important;
  padding: 14px 30px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--wp--preset--color--mm-hero, #3a3e35) !important;
  color: #fff !important;
  font-family: var(--mm-font) !important;
  font-weight: 300 !important;
  font-size: 13px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase;
  line-height: 1.4 !important;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
/* Hover goes light (bone + ink text) rather than clay, so it still reads on a clay section. */
.gform_wrapper .gform_button:hover,
.gform_wrapper .gform_button:focus-visible,
.gform_wrapper .gform-button:hover,
.gform_wrapper .gform-button:focus-visible,
.gform_wrapper button[type="submit"]:hover,
.gform_wrapper button[type="submit"]:focus-visible,
.gform_wrapper input[type="submit"]:hover,
.gform_wrapper input[type="submit"]:focus-visible {
  background: var(--wp--preset--color--mm-base, #f2f1ee) !important;
  color: var(--wp--preset--color--mm-hero, #3a3e35) !important;
}
.gform_wrapper .gfield--type-submit { align-self: center; }
.gform_wrapper .gform_validation_errors,
.gform_wrapper .validation_message { font-family: var(--mm-font); }

/* Field and button share one height, and sit on one row when the submit
   button is placed inline with the fields. */
.gform_wrapper .ginput_container input[type="email"],
.gform_wrapper .ginput_container input[type="text"],
.gform_wrapper .gform_button,
.gform_wrapper .gform-button,
.gform_wrapper button[type="submit"],
.gform_wrapper input[type="submit"] {
  box-sizing: border-box !important;
  height: 46px !important;
  min-height: 46px !important;
  padding-block: 0 !important;
  line-height: 44px !important;
}
.gform_wrapper .gform_fields:has(> .gfield--type-submit) {
  display: flex !important;
  align-items: center;
  gap: 10px;
}
.gform_wrapper .gform_fields:has(> .gfield--type-submit) > .gfield { margin: 0; }
.gform_wrapper .gform_fields:has(> .gfield--type-submit) > .gfield:not(.gfield--type-submit) { flex: 1 1 200px; min-width: 0; }
.gform_wrapper .gform_fields:has(> .gfield--type-submit) > .gfield--type-submit { flex: none; }

/* --- Sign-up band: a Spectra grid row holding [script + heading] and a form.
   Text stays on one line beside the form; the form column is only as wide as
   the form. Stacks on small screens. --- */
.wp-block-spectra-container.is-layout-grid:has(.gform_wrapper) {
  --mm-rail-w: clamp(58px, 7vw, 84px);
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center;
  column-gap: clamp(24px, 4vw, 56px);
}
.wp-block-spectra-container.is-layout-grid:has(.gform_wrapper) .gform_wrapper { width: clamp(300px, 34vw, 460px); max-width: 100%; }
.wp-block-spectra-container.is-layout-grid:has(.gform_wrapper) .wp-block-group.is-nowrap {
  align-items: baseline;
  gap: clamp(14px, 1.8vw, 26px);
}
.wp-block-spectra-container.is-layout-grid:has(.gform_wrapper) .wp-block-group.is-nowrap > * {
  margin: 0;
  white-space: nowrap;
  font-size: clamp(18px, 2.1vw, 34px) !important;           /* scales so the line always fits beside the form */
  line-height: 1.3 !important;
}
/* the script label reads small at the same size as Poppins — give it a bit more */
.wp-block-spectra-container.is-layout-grid:has(.gform_wrapper) .wp-block-group.is-nowrap > :has(em) { font-size: clamp(24px, 2.7vw, 44px) !important; }
@media (max-width: 900px) {
  .wp-block-spectra-container.is-layout-grid:has(.gform_wrapper) { grid-template-columns: minmax(0, 1fr) !important; row-gap: 24px; }
  .wp-block-spectra-container.is-layout-grid:has(.gform_wrapper) .gform_wrapper { width: 100%; }
  .wp-block-spectra-container.is-layout-grid:has(.gform_wrapper) .wp-block-group.is-nowrap { flex-wrap: wrap; }
  .wp-block-spectra-container.is-layout-grid:has(.gform_wrapper) .wp-block-group.is-nowrap > * { white-space: normal; font-size: clamp(20px, 5.5vw, 28px) !important; }
}

/* Hover clips on product tiles (shop grid + Product Collection block): the
   clip fades in over the photo while the tile is hovered (main.js). */
/* Spectra accordion: the toggle icon sits at the far right and is the site's
   arrow (as on the buttons), pointing down when closed and up when open. */
.wp-block-spectra-accordion-child-header { gap: 16px; }
.wp-block-spectra-accordion-child-header > .wp-block-spectra-accordion-child-header-icon { order: 2; margin-left: auto !important; flex: none; width: 14px; height: 14px; }   /* Spectra zeroes child margins per block id */
.wp-block-spectra-accordion-child-header-icon > span { display: none !important; }   /* Spectra's own icons */
.wp-block-spectra-accordion-child-header-icon::before {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: rotate(90deg);
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.wp-block-spectra-accordion-child-header.is-active .wp-block-spectra-accordion-child-header-icon::before,
.wp-block-spectra-accordion-child-header[aria-expanded="true"] .wp-block-spectra-accordion-child-header-icon::before { transform: rotate(-90deg); }

/* Responsive defaults for the Spectra pages (no per-block mobile settings needed).
   Phones: every Spectra grid stacks to one column and sections use the logo's 24px
   side margin. Tablets: grids of four or more items go to two columns.
   Add the class "mm-keep-grid" to a container to keep its own columns, or
   "mm-keep-row" to keep a horizontal row as one line. */
@media (max-width: 767px) {
  .wp-site-blocks .wp-block-spectra-container.is-layout-grid:not(.mm-keep-grid):not(.mm-tp-panels) { grid-template-columns: minmax(0, 1fr) !important; row-gap: min(var(--mm-grid-row-gap, 28px), 28px) !important; } /* desktop column gaps would leave big holes between stacked rows */
  .wp-site-blocks .wp-block-spectra-container.is-layout-grid:not(.mm-keep-grid):not(.mm-tp-panels) > * { grid-column: auto !important; grid-row: auto !important; }
  .wp-site-blocks .spectra-is-root-container:not(.mm-tp-panels),
  .mm-page-section { padding-left: 24px !important; padding-right: 24px !important; }
  /* rows: "label left, action right" rows stack; any other row wraps instead of squeezing */
  .wp-site-blocks .wp-block-spectra-container.is-horizontal.is-content-justification-space-between:not(.mm-keep-row) { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; }
  .wp-site-blocks .wp-block-spectra-container.is-horizontal.is-nowrap:not(.mm-keep-row),
  .wp-site-blocks .wp-block-group.is-layout-flex.is-nowrap:not(.is-vertical):not(.mm-keep-row) { flex-wrap: wrap !important; }
  /* a right-aligned column (e.g. the button side of a band) lines up on the left once stacked */
  .wp-site-blocks .is-layout-grid:not(.mm-keep-grid):not(.mm-tp-panels) .wp-block-spectra-container.is-vertical.is-content-justification-right { align-items: flex-start !important; }
  .wp-site-blocks .is-layout-grid:not(.mm-keep-grid):not(.mm-tp-panels) .wp-block-spectra-container.is-horizontal.is-content-justification-right { justify-content: flex-start !important; }
  .wp-site-blocks .is-layout-grid:not(.mm-keep-grid):not(.mm-tp-panels) .is-content-justification-right .wp-block-spectra-buttons { justify-content: flex-start !important; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .wp-site-blocks .wp-block-spectra-container.is-layout-grid:not(.mm-keep-grid):not(.mm-tp-panels):has(> :nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .wp-site-blocks .wp-block-spectra-container.is-layout-grid:not(.mm-keep-grid):not(.mm-tp-panels):has(> :nth-child(4)) > * { grid-column: auto !important; }
}

/* .mm-cards - a Spectra grid of cards that share borders on desktop (each card
   draws top/left/bottom, the last one the right). Once they stack, every card
   gets its own right edge. */
@media (max-width: 767px) {
  .mm-cards > * { border-right: 1px solid var(--wp--preset--color--mm-line, #e1dfd9) !important; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .mm-cards > :nth-child(even) { border-right: 1px solid var(--wp--preset--color--mm-line, #e1dfd9) !important; }
  .mm-cards > :nth-child(n+3) { border-top: 0 !important; }
}

/* .mm-process - a Spectra Tabs block styled as the numbered process stepper
   (Websites page "My process"): steps listed down the left, the active one
   dark; the step's panel on the right with Previous / Next (added by main.js).
   Tab labels start with an italic number, e.g. "<em>01</em> Wireframes". */
/* grid: every panel sits in the same cell, so the box is always as tall as the
   longest step - headings stay at the top and Previous / Next at the bottom */
.mm-process.wp-block-spectra-tabs {
  display: grid !important;
  grid-template-columns: clamp(260px, 28vw, 360px) minmax(0, 1fr);
  align-items: start;
  align-self: stretch;
  width: 100% !important;              /* runs to the section's content edge */
  gap: clamp(32px, 5vw, 64px);
}
.mm-process .wp-block-spectra-tabs-child-tab-wrapper {
  grid-column: 1;
  grid-row: 1;
  width: auto !important;
  display: flex;
  flex-direction: column;
  gap: 0 !important;
  border-top: 1px solid var(--wp--preset--color--mm-hero, #3a3e35);
}
.mm-process .wp-block-spectra-tabs-child-tab-button {
  width: 100%;
  justify-content: flex-start !important;
  margin: 0 !important;
  padding: 10px 16px !important;
  border: 0 !important;
  border-bottom: 1px solid #c9c6bd !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--wp--preset--color--mm-hero, #3a3e35) !important;
  font-size: 16px !important;
  font-weight: 300;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-align: left;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.mm-process .wp-block-spectra-tabs-child-tab-button .spectra-button__link { justify-content: flex-start; align-items: baseline; gap: 14px; }
.mm-process .wp-block-spectra-tabs-child-tab-button em { flex: none; min-width: 36px; font-size: 30px; line-height: 1.1; color: var(--wp--preset--color--mm-sage, #8c9082); transition: color 0.2s ease; }
.mm-process .wp-block-spectra-tabs-child-tab-button br { display: none; }
.mm-process .wp-block-spectra-tabs-child-tab-button:hover,
.mm-process .wp-block-spectra-tabs-child-tab-button:focus-visible { background: rgba(58, 62, 53, 0.06) !important; }
.mm-process .wp-block-spectra-tabs-child-tab-button.spectra-block-is-active { background: var(--wp--preset--color--mm-hero, #3a3e35) !important; color: #fff !important; }
.mm-process .wp-block-spectra-tabs-child-tab-button.spectra-block-is-active em { color: #c9cdbf; }
.mm-process .wp-block-spectra-tabs-child-tabpanel {
  grid-column: 2;
  grid-row: 1;
  align-self: stretch;
  width: auto !important;
  min-width: 0;
  min-height: 420px;
  display: flex !important;
  flex-direction: column !important;
  padding: clamp(28px, 4vw, 44px) clamp(24px, 4vw, 48px);
  border: 0 !important;
  background: var(--wp--preset--color--mm-base, #f2f1ee) !important;
}
.mm-process .wp-block-spectra-tabs-child-tabpanel[hidden] { display: flex !important; visibility: hidden; pointer-events: none; } /* still takes up room, so all panels share the tallest height */
.mm-process .wp-block-spectra-tabs-child-tabpanel > .wp-block-spectra-container { display: flex !important; flex-direction: column !important; justify-content: flex-start !important; gap: 16px; flex: 1 1 auto !important; } /* fills the panel, so Previous / Next (margin-top:auto) sits at the bottom */
.mm-process .wp-block-spectra-tabs-child-tabpanel :is(p, h3) { margin: 0; max-width: 640px; }
.mm-process .mm-process__n { line-height: 1; }
.mm-process .wp-block-spectra-tabs-child-tabpanel h3 { font-size: clamp(24px, 2.2vw, 30px); font-weight: 300; line-height: 1.2; color: var(--wp--preset--color--mm-hero, #3a3e35); }
.mm-process .wp-block-spectra-tabs-child-tabpanel p:not(.mm-process__n):not(.mm-step-tag) { font-size: 16px; line-height: 1.75; color: #57544c; }
.mm-process .mm-step-tag {
  align-self: flex-start;
  padding: 6px 14px;
  border: 1px solid var(--wp--preset--color--mm-sage, #8c9082);
  border-radius: 300px;
  font-size: 10.5px !important;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--wp--preset--color--mm-hero, #3a3e35);
}
.mm-process__nav { display: flex; gap: 24px; margin-top: auto !important; padding-top: 24px; } /* the flex layout zeroes child margins */
.mm-process__nav button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--wp--preset--color--mm-hero, #3a3e35);
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.2s ease;
}
.mm-process__nav button:hover,
.mm-process__nav button:focus-visible { color: var(--wp--preset--color--mm-sage, #8c9082); }
@media (max-width: 900px) {
  .mm-process.wp-block-spectra-tabs { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .mm-process .wp-block-spectra-tabs-child-tabpanel { grid-column: 1; grid-row: 2; min-height: 0; }
}

/* Utility: a core Group with the class "mm-page-section" gets the same side
   padding as the Spectra sections (and clears the rail), for pages built
   from core blocks. */
.mm-page-section { padding-inline: var(--wp--preset--spacing--70, 3.38rem); } /* same side padding as the Spectra page sections */
@media (min-width: 768px) { body.mm-landing:not(.mm-rail-solid) .mm-page-section { padding-right: max(var(--wp--preset--spacing--70, 3.38rem), calc(var(--mm-rail-w) + 10px)); } }

/* Utility: add the class "mm-vcenter" (Advanced → Additional CSS class) to a
   Spectra row or grid container to centre each cell's content vertically -
   Spectra stretches the cells but leaves what is inside them at the top. */
/* .mm-btn-reveal - add to a Spectra button (Advanced → Additional CSS class).
   Colours stay whatever the button is set to in Spectra; this only handles the
   reveal. At rest: no background and no left padding, so the text lines up with
   the copy above. On hover: the button's Spectra background (its hover
   background if set, else its normal one) fades in and the left padding grows
   back. main.js reads each button's settings into --mm-reveal-* and adds
   .is-reveal, so without JS the button simply shows as set in Spectra. In a
   vertical container the button also drops to the bottom. */
a.wp-block-spectra-button.is-reveal {
  background-color: transparent !important;
  padding-left: 0 !important;
  transition: background-color 0.3s ease, color 0.3s ease, padding-left 0.3s ease !important;
}
a.wp-block-spectra-button.is-reveal:is(:hover, :focus-visible) {
  background-color: var(--mm-reveal-bg-hover, var(--mm-reveal-bg, transparent)) !important;
  padding-left: var(--mm-reveal-pad, 20px) !important;
}
.wp-block-spectra-container.is-vertical > :is(.wp-block-spectra-buttons:has(> a.mm-btn-reveal), .mm-btn-reveal) { margin-top: auto !important; }

.mm-vcenter { align-items: center !important; }
.mm-vcenter > .wp-block-spectra-container.is-vertical { justify-content: center !important; }

/* Embeds (YouTube etc.) in a Spectra container: the container start-aligns its
   children, and an embed has no width of its own (its 16:9 box comes from its
   width), so it collapsed to nothing. Fill the column. */
.wp-block-spectra-container > .wp-block-embed { width: 100%; align-self: stretch; }

.mm-tile__clip {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.mm-tile__clip.is-playing { opacity: 1; }

/* Scroll hints on landing pages (main.js makes them glide to the next section). */
.mm-scroll-hint { width: fit-content; cursor: pointer; transition: opacity 0.3s ease; }
body.is-scrolled .mm-scroll-hint { opacity: 0; pointer-events: none; }

/* --- Landing pages: sections keep their content clear of the rail ----
   Spectra gives every root container the same side padding (--mm-section-pad
   mirrors that setting). On the right, the padding grows to the rail width
   + 10px when that is bigger, so buttons, forms and text never sit under the
   fixed rail; backgrounds still run edge to edge. --- */
:root { --mm-rail-w: clamp(58px, 7vw, 84px); --mm-section-pad: 5.28vw; }
@media (min-width: 768px) {
  /* Solid rail ("Transparent menu bar" unticked): the page itself stops at the
     rail, so every section keeps the padding set in Spectra (measured from the
     rail's edge) and nothing can sit underneath it. */
  body.mm-landing.mm-rail-solid .wp-site-blocks { padding-right: var(--mm-rail-w); }
  /* Transparent rail: sections run edge to edge under it, so the right padding
     grows to clear it. Sections meant to run under the rail - the homepage
     panels, or any section given the class "mm-under-rail" - keep their own. */
  body.mm-landing:not(.mm-rail-solid) .wp-site-blocks .spectra-is-root-container:not(.mm-under-rail):not(.mm-tp-panels) {
    padding-right: max(var(--mm-section-pad), calc(var(--mm-rail-w) + 10px)) !important;
  }
}

/* --- Fixed site chrome: logo (top-left) + right rail -------- */
.mm-chrome,
.mm-rail {
  position: fixed;
  z-index: 900;
  color: var(--wp--preset--color--mm-hero, #3a3e35); /* dark by default (light pages) */
  pointer-events: none;                              /* only children are clickable */
  transition: opacity 0.25s ease;
}
/* Dark-hero templates (homepage etc.) render the chrome in a light tone. */
body.mm-chrome-invert .mm-chrome,
body.mm-chrome-invert .mm-rail {
  color: var(--wp--preset--color--mm-base, #f2f1ee);
}
.admin-bar .mm-chrome,
.admin-bar .mm-rail { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .mm-chrome,
  .admin-bar .mm-rail { top: 46px; }
}

/* Logo, top-left. */
.mm-chrome {
  inset: 0 0 auto 0;
  /* Top: WordPress "Medium" spacing preset. Sides: the page sections' gutter,
     so the logo lines up with the content below it. */
  padding: var(--wp--preset--spacing--50, 1.5rem) clamp(24px, 4vw, 56px);
}
.mm-chrome .mm-logo { pointer-events: auto; }
.mm-logo { display: inline-flex; color: inherit; }
.mm-logo:hover,
.mm-logo:focus,
.mm-logo:focus-visible { color: inherit; } /* no hover tint on the logo */
.mm-logo__svg { width: clamp(104px, 12vw, 124px); height: auto; display: block; }
/* Once a page is scrolled the fixed logo gets out of the way of the content
   passing under it: it disappears on every page except the homepage, where it
   stays solid (body.mm-logo-hide, see the `megmakesme_dim_logo` filter). */
.mm-logo { transition: opacity 0.3s ease; }
body.is-scrolled.mm-logo-hide .mm-logo { opacity: 0; pointer-events: none; }

/* Right rail: menu trigger, divider line, vertical social links. */
.mm-rail {
  top: 0;
  right: 0;
  bottom: 0;
  width: clamp(58px, 7vw, 84px);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: var(--wp--preset--spacing--50, 1.5rem); /* same Medium preset as the logo's chrome, so the hamburger stays level with it */
  background: var(--wp--preset--color--mm-base, #f2f1ee); /* solid: page sections stop at margin-right var(--mm-rail) */
}
body.mm-chrome-invert .mm-rail { background: transparent; transition: background-color 0.3s ease, color 0.3s ease, opacity 0.25s ease; }  /* landing pages: rail floats over the hero */
body.mm-chrome-invert .mm-chrome { transition: color 0.3s ease, opacity 0.25s ease; }
/* Landing pages other than the homepage: once the hero has scrolled away the
   chrome turns into the solid bone rail + dark logo used on the theme pages. */
body.mm-chrome-invert.is-past-hero:not(.home) .mm-rail,
body.mm-chrome-invert.mm-rail-solid .mm-rail {                /* default; pages can tick "Transparent menu bar" */
  background: var(--wp--preset--color--mm-base, #f2f1ee);
  color: var(--wp--preset--color--mm-hero, #3a3e35);
}
body.mm-chrome-invert.is-past-hero:not(.home) .mm-chrome { color: var(--wp--preset--color--mm-hero, #3a3e35); }
.mm-rail > * { pointer-events: auto; }

.mm-rail .menu-toggle { color: inherit; padding: 0; gap: 0; }
.mm-rail .menu-toggle:hover,
.mm-rail .menu-toggle:focus-visible { color: inherit; opacity: 0.6; }

.mm-rail__line {
  flex: 1 1 auto;
  width: 1px;
  min-height: 40px;
  margin-block: clamp(1.25rem, 4vh, 2.5rem);
  background: currentColor;
  opacity: 0.4;
}

.mm-rail__social-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1rem, 3vh, 1.75rem);
}
.mm-rail__social-list a,
.mm-rail__templates a {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  color: inherit;
  text-decoration: none;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  opacity: 0.82;
  transition: opacity 0.2s ease, color 0.2s ease;
}
.mm-rail__social-list a:hover,
.mm-rail__social-list a:focus-visible {
  opacity: 1;
  color: var(--wp--preset--color--mm-blush, #d6b1a1); /* blush stays legible over the clay panel */
}
/* Inside pages: single "pottery templates" link; hover simply darkens to the
   full chrome colour (design: #57544C → #3A3E35) rather than tinting. */
.mm-rail__templates { display: flex; align-items: center; }
.mm-rail__templates a { letter-spacing: 0.32em; opacity: 0.78; }
.mm-rail__templates a:hover,
.mm-rail__templates a:focus-visible { opacity: 1; color: inherit; }

/* Shop pages: cart icon + count at the foot of the rail. The count span is a
   Woo cart fragment, so ajax add-to-cart updates it in place. */
.mm-rail__cart {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 22px;
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.mm-rail__cart:hover,
.mm-rail__cart:focus-visible { color: inherit; opacity: 0.6; }
.mm-rail__cart-icon { width: 19px; height: 19px; display: block; }
.mm-rail__cart--auto.is-empty { display: none; }                 /* off the shop pages, only while something is in the cart */
.mm-rail__cart-count { font-size: 11px; font-weight: 500; letter-spacing: 0.04em; line-height: 1; }

/* Hide all chrome while the menu overlay is open (it has its own ✕). */
body.mm-menu-open .mm-chrome,
body.mm-menu-open .mm-rail { opacity: 0; pointer-events: none; }

/* --- Mobile chrome refinements (< 768px; two-paths animation is off here) --- */
@media (max-width: 767px) {
  /* The two "paths" stack full-width instead of two cramped, clipped columns. */
  .mm-tp-panels { grid-template-columns: 1fr !important; }

  /* Rail collapses to just the hamburger — the divider + vertical social links
     overlap the stacked content and are already in the slide-out menu. */
  .mm-rail__line,
  .mm-rail__social,
  .mm-rail__templates,
  .mm-rail__cart { display: none; }
  .mm-rail { bottom: auto; }
  /* No bone square behind the hamburger on phones - just the icon, with a
     56px tap area centred on it (same visual spot). */
  .mm-rail,
  body.mm-chrome-invert.mm-rail-solid .mm-rail,
  body.mm-chrome-invert.is-past-hero:not(.home) .mm-rail { background: transparent; }
  .mm-rail .menu-toggle { width: 56px; height: 56px; margin: -20px 0; justify-content: center; }

  /* Logo scrolls away with the hero rather than floating over content below;
     the hamburger stays fixed for menu access. */
  .mm-chrome { position: absolute; }
  .mm-logo__svg { width: 92px; }
}

/* Classic templates clear the fixed logo (top) and rail (right). Blank
   page-builder pages overlay their own full-bleed hero and get no offset. */
.site-main {
  padding-top: clamp(4.5rem, 9vh, 6rem);
  padding-right: clamp(58px, 7vw, 84px);
}

/* --- Slide-out menu overlay --------------------------------- */
body.mm-menu-open { overflow: hidden; }

.mm-menu {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--wp--preset--color--mm-hero, #3a3e35);
  color: var(--wp--preset--color--mm-surface, #fff);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0.35s;
  overflow-y: auto;
}
.mm-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.mm-menu__inner {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1.5rem, 4vh, 2.75rem);
  padding-block: clamp(4rem, 12vh, 7rem);
}

.mm-menu__close {
  position: absolute;
  top: clamp(1.25rem, 3vh, 2rem);
  right: clamp(1.25rem, 4vw, 2.5rem);
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%; /* a true circle — the one place radius is allowed */
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.mm-menu__close:hover,
.mm-menu__close:focus-visible {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.75);
}

.mm-menu__prompt {
  margin: 0;
  font-family: "Mistgak Signature", var(--mm-font);
  font-style: normal;
  color: var(--wp--preset--color--mm-blush, #d6b1a1);
  font-size: clamp(30px, 3.2vw, 34px);
  line-height: 1.1;
}

.mm-menu__list,
.mm-menu__social-list { list-style: none; margin: 0; padding: 0; }

.mm-menu__list { display: flex; flex-direction: column; gap: clamp(0.4rem, 1.4vh, 1rem); }
.mm-menu__list a {
  display: inline-block;
  font-family: var(--mm-font);
  font-weight: 300;
  font-size: clamp(2rem, 6vw, 4rem);
  line-height: 1.08;
  color: var(--wp--preset--color--mm-surface, #fff);
  text-decoration: none;
  transition: color 0.2s ease;
}
.mm-menu__list a:hover,
.mm-menu__list a:focus-visible,
.mm-menu__list .current-menu-item > a { color: var(--wp--preset--color--mm-blush, #d6b1a1); }

.mm-menu__social-list { display: flex; flex-wrap: wrap; gap: clamp(1rem, 3vw, 2rem); margin-top: clamp(1rem, 3vh, 2rem); }
.mm-menu__social-list a {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  transition: color 0.2s ease;
}
.mm-menu__social-list a:hover,
.mm-menu__social-list a:focus-visible { color: var(--wp--preset--color--mm-surface, #fff); }

.mm-menu__empty { margin: 0; color: rgba(255, 255, 255, 0.72); font-size: 1rem; max-width: 34ch; }
.mm-menu__empty a { color: var(--wp--preset--color--mm-blush, #d6b1a1); }

/* Split overlay (top-level items with sub-items become homepage-style panels) */
.mm-menu--split {
  --mm-rail-w: clamp(58px, 7vw, 84px);              /* same as the rail, so ✕ and cart sit where the hamburger and cart do */
  --mm-menu-pad-x: clamp(24px, 5vw, 72px);
  --mm-menu-line: rgba(255, 255, 255, 0.32);
  display: flex;
  flex-direction: column;
}
.mm-menu__split { flex: 1 0 auto; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.mm-menu__col {
  display: flex;
  align-items: flex-start; /* same top line in every column so the titles align */
  padding: clamp(110px, 21vh, 230px) var(--mm-menu-pad-x) clamp(48px, 8vh, 88px);
  background: var(--wp--preset--color--mm-hero, #3a3e35);
}
.mm-menu__col:nth-child(1) { background: var(--wp--preset--color--mm-sage, #8c9082); }
.mm-menu__col:nth-child(2) { background: var(--wp--preset--color--mm-clay, #bc8c78); }
.mm-menu__col--creative { background: var(--wp--preset--color--mm-sage, #8c9082); }
.mm-menu__col--clay { background: var(--wp--preset--color--mm-clay, #bc8c78); }
.mm-menu__col-inner { width: 100%; max-width: 480px; }

/* the panels' content rises in, one after the other */
.mm-menu--split .mm-menu__col-inner { opacity: 0; transform: translateY(14px); transition: opacity 0.45s ease, transform 0.45s ease; }
.mm-menu--split.is-open .mm-menu__col-inner { opacity: 1; transform: none; transition-delay: calc(0.08s + var(--mm-col-i, 0) * 0.08s); }

.mm-menu--split .mm-menu__prompt {
  position: absolute;
  top: clamp(1.6rem, 4vh, 2.6rem);
  left: var(--mm-menu-pad-x);
  z-index: 2;
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(22px, 2.3vw, 28px);
}
.mm-menu__script {
  margin: 0 0 clamp(8px, 1.4vh, 14px);
  font-family: "Mistgak Signature", var(--mm-font);
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1.1;
  color: var(--wp--preset--color--mm-surface, #fff);
}
.mm-menu__title,
.mm-menu__title:hover,
.mm-menu__title:focus-visible {
  display: inline-block;
  font-family: var(--mm-font);
  font-weight: 300;
  font-size: clamp(1.75rem, 2.9vw, 2.75rem);
  line-height: 1.15;
  color: var(--wp--preset--color--mm-surface, #fff);  /* never the global clay link hover - it vanishes on the clay panel */
  text-decoration: none;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}
.mm-menu__title { transition: opacity 0.2s ease; }
.mm-menu__title:hover,
.mm-menu__title:focus-visible { opacity: 0.78; }
.mm-menu__desc {
  margin: clamp(10px, 1.8vh, 16px) 0 0;
  max-width: 40ch;
  font-size: clamp(14px, 1.1vw, 15.5px);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.9);
}
.mm-menu__sub { list-style: none; margin: clamp(22px, 4vh, 38px) 0 0; padding: 0; border-top: 1px solid var(--mm-menu-line); }
.mm-menu__sub li { border-bottom: 1px solid var(--mm-menu-line); }
.mm-menu__sub a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(11px, 1.7vh, 15px) 0;
  font-family: var(--mm-font);
  font-weight: 300;
  font-size: clamp(1rem, 1.25vw, 1.2rem);
  line-height: 1.2;
  color: var(--wp--preset--color--mm-surface, #fff);
  text-decoration: none;
  transition: color 0.2s ease;
}
.mm-menu__arrow {
  flex: none;
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0.55;
  transform: translateX(-6px);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
/* hover: text stays white and nudges right, the arrow comes forward and slides in.
   Current page: arrow shown, a touch heavier. */
.mm-menu__sub a > span { transition: transform 0.25s ease; }
.mm-menu__sub a:hover,
.mm-menu__sub a:focus-visible { color: var(--wp--preset--color--mm-surface, #fff); }
.mm-menu__sub a:hover > span,
.mm-menu__sub a:focus-visible > span { transform: translateX(8px); }
.mm-menu__sub a:hover .mm-menu__arrow,
.mm-menu__sub a:focus-visible .mm-menu__arrow,
.mm-menu__sub a.is-current .mm-menu__arrow { opacity: 1; transform: none; }
.mm-menu__sub a.is-current { color: var(--wp--preset--color--mm-surface, #fff); font-weight: 400; }

/* Clay texture at 10% over the coloured blocks (menu columns + homepage panels).
   One image spans all the blocks: each block's layer is N blocks wide and shifted
   left by its index, so the halves line up instead of repeating. Stacked (phone)
   layouts give each block its own copy. */
.mm-menu__col { position: relative; overflow: hidden; }
.mm-menu__col::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--mm-col-i, 0) * -100%);
  width: calc(var(--mm-col-n, 1) * 100%);
  background: url("assets/images/clay-texture.jpg") center / cover no-repeat;
  opacity: 0.1;
  pointer-events: none;
  z-index: 0;
}
.mm-menu__col-inner { position: relative; z-index: 1; }
@media (max-width: 760px) { .mm-menu__col::after { left: 0; width: 100%; } }

.mm-tp-panels > .wp-block-spectra-container { overflow: hidden; }
.mm-tp-panels > .wp-block-spectra-container::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 200%;
  background: url("assets/images/clay-texture.jpg") center / cover no-repeat;
  opacity: 0.1;
  pointer-events: none;
  z-index: 0;
}
.mm-tp-panels > .wp-block-spectra-container:nth-child(2)::after { left: -100%; }
/* the texture holds still while the colour blocks slide over it (main.js sets --mm-tp-shift to each block's slide) */
.mm-tp-panels > .wp-block-spectra-container::after { transform: translateY(calc(-1 * var(--mm-tp-shift, 0%))); }
.mm-tp-panels > .wp-block-spectra-container > * { z-index: 1; }

/* Bone rail on the right, mirroring the site rail: ✕ on the hamburger's spot,
   the line, My account + socials written vertically, cart at the foot. */
.mm-menu--split .mm-menu__split { margin-right: var(--mm-rail-w); }
.mm-menu__rail {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  width: var(--mm-rail-w);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1rem, 3vh, 1.75rem);
  padding-block: var(--wp--preset--spacing--50, 1.5rem);
  background: var(--wp--preset--color--mm-base, #f2f1ee);
  color: var(--wp--preset--color--mm-hero, #3a3e35);
}
.admin-bar .mm-menu__rail { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar .mm-menu__rail { top: 46px; } }
.mm-menu__rail .mm-rail__line { margin-block: 0; }
/* 42px circle centred where the 16px-tall hamburger sits: pull it up by 21 - 8 */
.mm-menu--split .mm-menu__close {
  position: static;
  flex: none;
  margin: -13px 0 0;
  border-color: rgba(58, 62, 53, 0.35);
  background: transparent;
  color: inherit;
}
.mm-menu--split .mm-menu__close:hover,
.mm-menu--split .mm-menu__close:focus-visible { background: rgba(58, 62, 53, 0.08); border-color: rgba(58, 62, 53, 0.7); }
.mm-menu__rail .mm-rail__social-list a { color: inherit; }
.mm-menu__rail .mm-rail__social-list a:hover,
.mm-menu__rail .mm-rail__social-list a:focus-visible,
.mm-menu__rail .mm-rail__social-list a.is-current { opacity: 1; color: var(--wp--preset--color--mm-clay, #bc8c78); }
/* account icon + cart read as one group at the foot of the rail; the menu always shows the cart (the site rail hides it on phones / when empty) */
.mm-menu__foot { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.mm-menu__rail .mm-rail__cart { display: flex !important; margin-top: 0; }
.mm-menu__account { display: block; color: inherit; transition: color 0.2s ease; }
.mm-menu__account svg { display: block; width: 20px; height: 20px; }
.mm-menu__account:hover,
.mm-menu__account:focus-visible,
.mm-menu__account.is-current { color: var(--wp--preset--color--mm-clay, #bc8c78); }

/* small print: Contact · Terms · Privacy, © + ABN - along the foot of the columns */
.mm-menu__small {
  position: absolute;
  left: 0;
  right: var(--mm-rail-w);
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 28px;
  padding: 0 var(--mm-menu-pad-x) clamp(18px, 3vh, 28px);
  color: rgba(255, 255, 255, 0.72);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.6;
}
.mm-menu__small ul { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; padding: 0; list-style: none; }
.mm-menu__small p { margin: 0; }
.mm-menu__small a { color: inherit; text-decoration: none; transition: color 0.2s ease; }
.mm-menu__small a:hover,
.mm-menu__small a:focus-visible { color: #fff; }
.mm-menu--split .mm-menu__small { opacity: 0; transition: opacity 0.45s ease; }
.mm-menu--split.is-open .mm-menu__small { opacity: 1; transition-delay: 0.3s; }

@media (max-width: 760px) {
  .mm-menu__small { position: static; margin-right: var(--mm-rail-w); flex-direction: column; align-items: flex-start; padding: 24px var(--mm-menu-pad-x) 32px; background: var(--wp--preset--color--mm-hero, #3a3e35); }
  .mm-menu__split { grid-auto-flow: row; grid-auto-rows: auto; }
  .mm-menu__col { padding: 32px var(--mm-menu-pad-x) 40px; }
  .mm-menu__col:first-child { padding-top: clamp(84px, 14vh, 110px); }
  .mm-menu--split .mm-menu__prompt { font-size: 22px; }
}

/* Reduced-motion: skip the slide/fade transition. */
@media (prefers-reduced-motion: reduce) {
  .mm-menu, .mm-menu.is-open { transition: none; transform: none; }
  .mm-menu--split .mm-menu__col-inner { transition: none; transform: none; opacity: 1; }
  .mm-menu--split .mm-menu__small { transition: none; opacity: 1; }
}

/* ------------------------------------------------------------------
 * Terms page (.mm-terms group): a readable column of legal text, with
 * the Creative / Clay pill switch main.js builds above the sets (same
 * look as the pricing size switch).
 * ---------------------------------------------------------------- */
.mm-terms { padding-block: clamp(48px, 8vh, 88px); }
.mm-terms > * { max-width: 760px; margin-inline: auto !important; }
.mm-terms__switch { display: flex; flex-wrap: wrap; width: max-content; max-width: 100%; gap: 4px; padding: 4px; border-radius: 300px; background: #e6e4de; margin-bottom: clamp(32px, 5vh, 48px) !important; }
.mm-terms__switch button { padding: 10px 22px; border: 0; border-radius: 300px; background: transparent; color: var(--wp--preset--color--mm-hero, #3a3e35); font: inherit; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.3; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; }
.mm-terms__switch button:hover,
.mm-terms__switch button:focus-visible { background: rgba(58, 62, 53, 0.08); }
.mm-terms__switch button.is-active { background: var(--wp--preset--color--mm-hero, #3a3e35); color: #fff; }
.mm-terms__set[hidden] { display: none !important; }
.mm-terms__set { scroll-margin-top: 120px; color: #57544c; font-size: 15px; line-height: 1.7; }
.mm-terms__set h2 { margin: 0 0 12px; font-size: clamp(28px, 2.8vw, 40px); font-weight: 200; line-height: 1.1; color: var(--wp--preset--color--mm-hero, #3a3e35); }
.mm-terms__set h3 { margin: 36px 0 8px; font-size: 13px; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; color: var(--wp--preset--color--mm-hero, #3a3e35); }
.mm-terms__set p,
.mm-terms__set ul { margin-block: 0 14px; }
.mm-terms__set ul { padding-left: 1.2em; }
.mm-terms__set li { margin-bottom: 4px; }
.mm-terms__set a { color: var(--wp--preset--color--mm-hero, #3a3e35); text-decoration: underline; text-underline-offset: 3px; }
.mm-terms__set .mm-terms__intro { padding-bottom: 20px; border-bottom: 1px solid var(--wp--preset--color--mm-hero, #3a3e35); margin-bottom: 8px; }

/* ------------------------------------------------------------------
 * Contact page (.mm-contact group): details on the left, the form on the
 * right; stacks on tablets/phones.
 * ---------------------------------------------------------------- */
.mm-contact {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
  padding-block: clamp(56px, 10vh, 104px);
}
.mm-contact > * { margin: 0 !important; }
.mm-contact__info h2 { margin: 0 0 18px; font-size: clamp(30px, 3vw, 40px); font-weight: 200; line-height: 1.12; color: var(--wp--preset--color--mm-hero, #3a3e35); text-wrap: pretty; }
.mm-contact__info p { margin: 0 0 14px; color: #57544c; font-size: 16px; line-height: 1.7; text-wrap: pretty; }
.mm-contact__info .mm-contact__label { margin: 32px 0 6px; font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: #57544c; }
.mm-contact__info a { color: var(--wp--preset--color--mm-hero, #3a3e35); }
.mm-contact__social a { margin-right: 18px; }
@media (max-width: 900px) {
  .mm-contact { grid-template-columns: minmax(0, 1fr); }
}

/* --- Forms with the CSS class "mm-form" (the Contact form): visible labels,
   fields on a white ground, the topic choices as pills, the site button.
   Overrides the one-line newsletter styling above. --- */
.gform_wrapper.mm-form_wrapper form { display: block; }
.gform_wrapper.mm-form_wrapper .gform_fields { display: grid !important; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 22px 16px; }
.gform_wrapper.mm-form_wrapper .gfield { grid-column: 1 / -1; margin: 0; min-width: 0; }
.gform_wrapper.mm-form_wrapper .gfield--width-half { grid-column: span 6; }
@media (max-width: 600px) { .gform_wrapper.mm-form_wrapper .gfield--width-half { grid-column: 1 / -1; } }
/* (!important: Gravity Forms' own stylesheet loads after the theme's) */
.gform_wrapper.mm-form_wrapper .gfield_label,
.gform_wrapper.mm-form_wrapper .gform-field-label--type-sub,
.gform_wrapper.mm-form_wrapper legend.gfield_label {
  position: static !important;
  width: auto !important; height: auto !important; overflow: visible !important; clip: auto !important; white-space: normal !important;
  display: block !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  font-family: var(--mm-font) !important;
  font-size: 10.5px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase;
  color: #57544c !important;
}
.gform_wrapper.mm-form_wrapper .gfield_required,
.gform_wrapper.mm-form_wrapper .gform_required_legend { display: none !important; } /* optional fields say "optional" in their label instead */
/* the choice labels share .gform-field-label with the newsletter's hidden labels - bring them back */
.gform_wrapper.mm-form_wrapper .gform-field-label--type-inline { position: static !important; width: auto !important; height: auto !important; overflow: visible !important; clip: auto !important; white-space: nowrap !important; }
.gform_wrapper.mm-form_wrapper .ginput_container input[type="text"],
.gform_wrapper.mm-form_wrapper .ginput_container input[type="email"],
.gform_wrapper.mm-form_wrapper .ginput_container textarea {
  width: 100%;
  border: 1px solid #dcdad4 !important;
  background: #fff !important;
  color: var(--wp--preset--color--mm-hero, #3a3e35) !important;
  font-family: var(--mm-font) !important;
  font-weight: 300;
  font-size: 15px !important;
  box-shadow: none !important;
}
.gform_wrapper.mm-form_wrapper .ginput_container textarea { min-height: 180px; padding: 16px 22px !important; border-radius: 22px !important; line-height: 1.6 !important; resize: vertical; }
.gform_wrapper.mm-form_wrapper .ginput_container input:focus,
.gform_wrapper.mm-form_wrapper .ginput_container textarea:focus { outline: 2px solid var(--wp--preset--color--mm-hero, #3a3e35); outline-offset: 2px; }

/* radio / checkbox choices as pills */
.gform_wrapper.mm-form_wrapper .gfield_radio,
.gform_wrapper.mm-form_wrapper .gfield_checkbox { display: flex; flex-wrap: wrap; gap: 8px; }
.gform_wrapper.mm-form_wrapper .gchoice { position: relative; margin: 0; }
.gform_wrapper.mm-form_wrapper .gchoice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.gform_wrapper.mm-form_wrapper .gchoice label {
  display: inline-block !important;
  max-width: none !important;               /* GF caps it at 100% - 32px, which clips the text */
  margin: 0 !important;
  padding: 9px 18px !important;
  border: 1px solid #dcdad4;
  border-radius: 300px;
  background: #fff;
  color: var(--wp--preset--color--mm-hero, #3a3e35);
  font-family: var(--mm-font);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.3;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.gform_wrapper.mm-form_wrapper .gchoice:hover label { border-color: var(--wp--preset--color--mm-hero, #3a3e35); }
.gform_wrapper.mm-form_wrapper .gchoice:has(input:checked) label { border-color: var(--wp--preset--color--mm-hero, #3a3e35); background: var(--wp--preset--color--mm-hero, #3a3e35); color: #fff; }
.gform_wrapper.mm-form_wrapper .gchoice:has(input:focus-visible) label { outline: 2px solid var(--wp--preset--color--mm-hero, #3a3e35); outline-offset: 2px; }

/* the submit matches the site's Spectra buttons (see .mm-pkgs__btn) */
.gform_wrapper.mm-form_wrapper .gform_footer { margin-top: 28px !important; }
.gform_wrapper.mm-form_wrapper button.mm-form__submit {
  display: inline-flex;
  align-items: center;
  gap: 30px;
  height: auto !important;
  min-height: 0 !important;
  padding: 5px 20px !important;
  border-radius: 300px !important;
  background: var(--wp--preset--color--mm-hero, #3a3e35) !important;
  color: #fff !important;
  font-size: var(--wp--preset--font-size--small, 0.9rem) !important;
  font-weight: 200 !important;
  letter-spacing: 2px !important;
  line-height: 1.6 !important;
}
.gform_wrapper.mm-form_wrapper button.mm-form__submit::after { content: ""; flex: none; width: 10px; height: 10px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z'/%3E%3C/svg%3E") center / contain no-repeat; }
.gform_wrapper.mm-form_wrapper button.mm-form__submit:hover,
.gform_wrapper.mm-form_wrapper button.mm-form__submit:focus-visible { background: var(--wp--preset--color--mm-sage, #8c9082) !important; color: #fff !important; }
.gform_wrapper.mm-form_wrapper .gfield_validation_message,
.gform_wrapper.mm-form_wrapper .validation_message { margin-top: 6px; padding: 0; border: 0; background: none; color: #a4553f; font-size: 13px; }
.gform_wrapper.mm-form_wrapper .gform_validation_errors { border-radius: 18px; }
.gform_confirmation_message { color: inherit; font-size: 18px; font-weight: 300; line-height: 1.6; } /* white on the clay newsletter band */
.mm-contact .gform_confirmation_message { color: var(--wp--preset--color--mm-hero, #3a3e35); }

/* Newsletter band (synced pattern "Newsletter sign-up (clay)", class mm-newsletter-band): when it follows a
   clay CTA band, a fine light line keeps the two from reading as one block. */
.mm-cta + .mm-newsletter-band { border-top: 1px solid rgba(255, 255, 255, 0.28) !important; }

/* ------------------------------------------------------------------
 * CTA bands: give the band's root container the class "mm-cta" (Spectra →
 * Advanced → Additional CSS class). On phones everything in it stacks and
 * centres: script, heading, text, buttons.
 * ---------------------------------------------------------------- */
@media (max-width: 767px) {
  .mm-cta,
  .mm-cta .wp-block-spectra-container,
  .mm-cta .wp-block-group { text-align: center; }
  .mm-cta.is-layout-grid,
  .mm-cta .is-layout-grid { grid-template-columns: minmax(0, 1fr) !important; justify-items: center; }
  .mm-cta.is-layout-flex,
  .mm-cta .is-layout-flex { flex-direction: column !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: center !important; }
  .mm-cta .is-layout-flex > *,
  .mm-cta .is-layout-grid > * { margin-inline: auto !important; }
  .mm-cta .is-layout-flex:not(.wp-block-spectra-buttons) { row-gap: 14px; }
  .mm-cta .wp-block-spectra-buttons,
  .mm-cta .wp-block-buttons { justify-content: center !important; }
  .mm-cta .wp-block-heading,
  .mm-cta p { text-align: center !important; white-space: normal !important; }
}

/* ------------------------------------------------------------------
 * List rows ("mm-list-row" on a two-column title | description grid, e.g.
 * "Everything you need to make it"): once stacked on phones the title sits
 * right on its description, with the space between rows instead.
 * ---------------------------------------------------------------- */
@media (max-width: 767px) {
  .wp-site-blocks .wp-block-spectra-container.mm-list-row.is-layout-grid:not(.mm-keep-grid):not(.mm-tp-panels) { row-gap: 4px !important; padding-block: 16px !important; margin-top: 0 !important; } /* beats the phone grid default */
}

/* Buttons with no hover colour set in Spectra get one (main.js picks clay or
   ink, whichever reads against the button and its section). */
a.mm-hover-auto { transition: background-color 0.25s ease, color 0.25s ease; }
a.mm-hover-auto:hover,
a.mm-hover-auto:focus-visible { background-color: var(--mm-hover-bg) !important; color: #fff !important; }

/* Process tabs on phones/tablets: each step's panel opens right under its own
   tab (accordion-style), so the content isn't stranded below the list. The
   tab list "dissolves" (display: contents) and tabs + panels interleave by
   order: tab n, then panel n. */
@media (max-width: 900px) {
  .mm-process.wp-block-spectra-tabs { display: flex !important; flex-direction: column; gap: 0; border-top: 1px solid var(--wp--preset--color--mm-hero, #3a3e35); }
  .mm-process .wp-block-spectra-tabs-child-tab-wrapper { display: contents !important; }
  .mm-process .wp-block-spectra-tabs-child-tabpanel { min-height: 0; margin: 0 0 8px; }
  .mm-process .wp-block-spectra-tabs-child-tabpanel[hidden] { display: none !important; }
  .mm-process .wp-block-spectra-tabs-child-tab-wrapper > :nth-child(1) { order: 2; }
  .mm-process > .wp-block-spectra-tabs-child-tabpanel:nth-child(2) { order: 3; }
  .mm-process .wp-block-spectra-tabs-child-tab-wrapper > :nth-child(2) { order: 4; }
  .mm-process > .wp-block-spectra-tabs-child-tabpanel:nth-child(3) { order: 5; }
  .mm-process .wp-block-spectra-tabs-child-tab-wrapper > :nth-child(3) { order: 6; }
  .mm-process > .wp-block-spectra-tabs-child-tabpanel:nth-child(4) { order: 7; }
  .mm-process .wp-block-spectra-tabs-child-tab-wrapper > :nth-child(4) { order: 8; }
  .mm-process > .wp-block-spectra-tabs-child-tabpanel:nth-child(5) { order: 9; }
  .mm-process .wp-block-spectra-tabs-child-tab-wrapper > :nth-child(5) { order: 10; }
  .mm-process > .wp-block-spectra-tabs-child-tabpanel:nth-child(6) { order: 11; }
  .mm-process .wp-block-spectra-tabs-child-tab-wrapper > :nth-child(6) { order: 12; }
  .mm-process > .wp-block-spectra-tabs-child-tabpanel:nth-child(7) { order: 13; }
  .mm-process .wp-block-spectra-tabs-child-tab-wrapper > :nth-child(7) { order: 14; }
  .mm-process > .wp-block-spectra-tabs-child-tabpanel:nth-child(8) { order: 15; }
  .mm-process .wp-block-spectra-tabs-child-tab-wrapper > :nth-child(8) { order: 16; }
  .mm-process > .wp-block-spectra-tabs-child-tabpanel:nth-child(9) { order: 17; }
  .mm-process .wp-block-spectra-tabs-child-tab-wrapper > :nth-child(9) { order: 18; }
  .mm-process > .wp-block-spectra-tabs-child-tabpanel:nth-child(10) { order: 19; }
  .mm-process .wp-block-spectra-tabs-child-tab-wrapper > :nth-child(10) { order: 20; }
  .mm-process > .wp-block-spectra-tabs-child-tabpanel:nth-child(11) { order: 21; }
  .mm-process .wp-block-spectra-tabs-child-tab-wrapper > :nth-child(11) { order: 22; }
  .mm-process > .wp-block-spectra-tabs-child-tabpanel:nth-child(12) { order: 23; }
  .mm-process .wp-block-spectra-tabs-child-tab-wrapper > :nth-child(12) { order: 24; }
  .mm-process > .wp-block-spectra-tabs-child-tabpanel:nth-child(13) { order: 25; }
  .mm-process .wp-block-spectra-tabs-child-tab-wrapper > :nth-child(13) { order: 26; }
  .mm-process > .wp-block-spectra-tabs-child-tabpanel:nth-child(14) { order: 27; }
  .mm-process .wp-block-spectra-tabs-child-tab-wrapper > :nth-child(14) { order: 28; }
  .mm-process > .wp-block-spectra-tabs-child-tabpanel:nth-child(15) { order: 29; }
  .mm-process .wp-block-spectra-tabs-child-tab-wrapper > :nth-child(15) { order: 30; }
  .mm-process > .wp-block-spectra-tabs-child-tabpanel:nth-child(16) { order: 31; }
  .mm-process .wp-block-spectra-tabs-child-tab-wrapper > :nth-child(16) { order: 32; }
  .mm-process > .wp-block-spectra-tabs-child-tabpanel:nth-child(17) { order: 33; }
  .mm-process .wp-block-spectra-tabs-child-tab-wrapper > :nth-child(17) { order: 34; }
  .mm-process > .wp-block-spectra-tabs-child-tabpanel:nth-child(18) { order: 35; }
  .mm-process .wp-block-spectra-tabs-child-tab-wrapper > :nth-child(18) { order: 36; }
  .mm-process > .wp-block-spectra-tabs-child-tabpanel:nth-child(19) { order: 37; }
  .mm-process .wp-block-spectra-tabs-child-tab-wrapper > :nth-child(19) { order: 38; }
  .mm-process > .wp-block-spectra-tabs-child-tabpanel:nth-child(20) { order: 39; }
  .mm-process .wp-block-spectra-tabs-child-tab-wrapper > :nth-child(20) { order: 40; }
  .mm-process > .wp-block-spectra-tabs-child-tabpanel:nth-child(21) { order: 41; }
}

/* Rows of badges (a no-wrap row holding only images, e.g. the Wix partner badges)
   stay in a row on phones, at badge size. */
@media (max-width: 767px) {
  .wp-site-blocks .is-nowrap:not(:has(> :not(figure.wp-block-image))) { flex-wrap: nowrap !important; gap: 14px !important; }
  .wp-site-blocks .is-nowrap:not(:has(> :not(figure.wp-block-image))) > figure.wp-block-image { flex: 0 1 88px; width: auto !important; max-width: 88px; margin: 0; }
  .wp-site-blocks .is-nowrap:not(:has(> :not(figure.wp-block-image))) > figure.wp-block-image img { width: 100% !important; height: auto !important; }
}