/* Maison Fern Hair Studio. The dark room: one green-black field, lit photographs, Newsreader only, one bronze action. */
.b-salons {
  --mf-bg: #101211; --mf-sf: #1a1d1b; --mf-sf2: #252926; --mf-ink: #ecedea; --mf-soft: #b3b5ae; --mf-acc: #c09a78; --mf-acc2: #d1ae8e; --mf-on: #101211;
  --mf-paper: #dcdfda; --mf-paper-soft: #4d4f4a;
  --mf-f: "Newsreader", Georgia, "Times New Roman", serif;
  --s-small: 1rem; --s-body: clamp(1.0625rem, 1rem + .25vw, 1.25rem); --s-lead: clamp(1.375rem, 1.1rem + 1vw, 2.125rem);
  --s-head: clamp(2.25rem, 1.2rem + 4vw, 5rem); --s-name: clamp(4.5rem, 18vw, 17rem);
  --mx: clamp(16px, 2.2vw, 32px); --sp: clamp(96px, 11vw, 176px); --r: 4px;
  --b-bg: var(--mf-bg); --b-ink: var(--mf-ink); --b-acc: var(--mf-acc); --b-soft: var(--mf-sf); --b-on: var(--mf-on); --b-d: var(--mf-f); --b-t: var(--mf-f);
  font-family: var(--mf-f); font-optical-sizing: auto;
}
body.b-salons { background: var(--mf-bg); color: var(--mf-ink); font: 400 var(--s-body)/1.55 var(--mf-f); scrollbar-color: var(--mf-sf2) var(--mf-bg); }
body.b-salons ::selection { background: var(--mf-acc); color: var(--mf-on); }
.b-salons :focus-visible { outline: 2px solid var(--mf-acc); outline-offset: 3px; }
.b-salons h1, .b-salons h2, .b-salons h3 { font-family: var(--mf-f); font-weight: 300; letter-spacing: -.03em; line-height: 1; text-wrap: balance; margin: 0; }
.b-salons h1, .b-salons h2 { font-size: var(--s-head); }
.b-salons h3 { font-size: var(--s-lead); font-weight: 400; letter-spacing: -.015em; line-height: 1.1; }
.b-salons p { margin: 0; }
.b-salons a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.b-salons img { display: block; max-width: 100%; }
.b-salons [hidden] { display: none !important; }
.b-salons .mf-soft { color: var(--mf-soft); }
.b-salons .mf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.b-salons .mf-sec { padding: var(--sp) var(--mx) 0; }
.b-salons .mf-sec--tight { padding-top: clamp(40px, 5vw, 72px); }
.b-salons .mf-lead { font-size: var(--s-lead); line-height: 1.25; letter-spacing: -.01em; max-width: 30em; }

/* buttons and links: one shape, small radius, one bronze fill */
.b-salons .mf-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px; border: 0; border-radius: var(--r); background: var(--mf-acc); color: var(--mf-on); font: 500 var(--s-small)/1.1 var(--mf-f); text-decoration: none; cursor: pointer; transition: background-color .2s, transform .15s; }
.b-salons .mf-btn:hover { background: var(--mf-acc2); } .b-salons .mf-btn:active { transform: scale(.98); }
.b-salons .mf-btn:disabled { background: var(--mf-sf2); color: var(--mf-soft); cursor: not-allowed; transform: none; }
.b-salons .mf-btn--line { background: var(--mf-sf2); color: var(--mf-ink); } .b-salons .mf-btn--line:hover { background: #2f342f; }
.b-salons .mf-btn--wide { width: 100%; }
.b-salons .mf-link { font-size: var(--s-small); text-decoration: underline; text-underline-offset: 5px; transition: color .2s; } .b-salons .mf-link:hover { color: var(--mf-acc2); }
.b-salons .mf-row-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 32px; }

/* header */
.b-salons .mf-top { position: relative; z-index: 6; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px var(--mx); }
.b-salons .mf-top--over { position: absolute; left: 0; right: 0; }
.b-salons .mf-top--over .mf-logo { visibility: hidden; }
.b-salons .mf-logo { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 1.5rem; font-weight: 400; letter-spacing: -.03em; text-decoration: none; }
.b-salons .mf-mark { flex: none; color: var(--mf-acc); }
.b-salons .mf-nav { display: flex; align-items: center; gap: 4px; font-size: var(--s-small); }
.b-salons .mf-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; text-decoration: none; transition: color .2s; }
.b-salons .mf-nav a:hover { color: var(--mf-acc2); } .b-salons .mf-nav a[aria-current] { text-decoration: underline; text-underline-offset: 7px; }
.b-salons .mf-nav .mf-nav__book { margin-left: 10px; padding: 0 20px; border-radius: var(--r); background: var(--mf-ink); color: var(--mf-on); }
.b-salons .mf-nav .mf-nav__book:hover { background: var(--mf-acc2); color: var(--mf-on); }
.b-salons .mf-menu { display: none; min-height: 44px; min-width: 64px; padding: 0 6px; border: 0; background: none; color: var(--mf-ink); font: 500 var(--s-small) var(--mf-f); text-decoration: underline; text-underline-offset: 6px; cursor: pointer; }

/* home hero: name under a photograph */
.b-salons .mf-hero { display: grid; grid-template-rows: auto auto auto; }
.b-salons .mf-hero__img { position: relative; height: 58svh; min-height: 340px; overflow: hidden; background: var(--mf-sf); }
.b-salons .mf-hero__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; filter: brightness(.82) contrast(1.05); }
.b-salons .mf-hero__row { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding: 24px var(--mx) 0; }
.b-salons .mf-hero__row p { max-width: 31ch; font-size: var(--s-body); }
.b-salons .mf-hero__name { font-size: var(--s-name); font-weight: 300; letter-spacing: -.055em; line-height: .85; white-space: nowrap; padding: clamp(24px, 4vw, 56px) var(--mx) 28px; margin-left: -.04em; transform-origin: 0 100%; }

.b-salons .mf-hero__img::after { content: ""; position: absolute; inset: 0 0 auto; height: 140px; background: linear-gradient(rgba(8, 9, 8, .55), rgba(8, 9, 8, 0)); pointer-events: none; } /* taste-skill-ignore: neutral scrim under the nav on the photo */
.b-salons .mf-about__facts b { white-space: nowrap; }

/* price menu with a level switch */
.b-salons section.mf-pm { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 24px; align-items: start; }
.b-salons .mf-pm__side { grid-column: 1 / 5; display: grid; gap: 20px; position: sticky; top: 24px; }
.b-salons .mf-pm__side h2 { font-size: var(--s-lead); font-weight: 400; }
.b-salons .mf-pm__img { width: 64%; aspect-ratio: 4 / 5; object-fit: cover; margin-top: 16px; filter: brightness(.9); }
.b-salons .mf-segs { display: flex; flex-wrap: wrap; gap: 6px; }
.b-salons .mf-seg { min-height: 44px; padding: 0 14px; border: 0; border-radius: var(--r); background: var(--mf-sf); color: var(--mf-ink); font: 400 var(--s-small) var(--mf-f); cursor: pointer; transition: background-color .2s, color .2s; }
.b-salons .mf-seg:hover { background: var(--mf-sf2); }
.b-salons .mf-seg[aria-pressed="true"] { background: var(--mf-ink); color: var(--mf-on); }
.b-salons .mf-pm__list { grid-column: 6 / 13; display: grid; grid-template-columns: 1fr 1fr; gap: 0 64px; }
.b-salons .mf-pm__col h3 { margin-top: 48px; } .b-salons .mf-pm__col h3:first-child { margin-top: 0; }
.b-salons .mf-pm__col ul { list-style: none; margin: 0; padding: 0; }
.b-salons .mf-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; margin-top: 22px; }
.b-salons .mf-row__n, .b-salons .mf-row__p { font-size: var(--s-body); line-height: 1.3; }
.b-salons .mf-row__p { font-variant-numeric: tabular-nums lining-nums; transition: opacity .25s; }
.b-salons .mf-row__p.is-swap { opacity: .2; }
.b-salons .mf-row__d { grid-column: 1 / -1; max-width: 36ch; font-size: var(--s-small); line-height: 1.45; color: var(--mf-soft); }
.b-salons .mf-pm__note { grid-column: 1 / -1; margin-top: 48px; max-width: 46ch; font-size: var(--s-small); color: var(--mf-soft); }
.b-salons .mf-pm__note a { color: var(--mf-ink); }

/* showcase: one frame, three distances */
.b-salons .mf-show { position: relative; height: 210vh; margin-top: var(--sp); }
.b-salons .mf-show__stage { position: sticky; top: 0; height: 100svh; display: grid; grid-template-columns: 1fr minmax(0, 30vw) 1fr; grid-template-rows: 1fr auto auto 1fr; gap: 0 32px; align-items: center; justify-items: center; padding: 24px var(--mx); overflow: hidden; }
.b-salons .mf-show__a, .b-salons .mf-show__b { grid-column: 1 / -1; font-size: var(--s-head); font-weight: 300; letter-spacing: -.045em; line-height: .95; text-align: center; }
.b-salons .mf-show__a { grid-row: 1; align-self: end; padding-bottom: 20px; }
.b-salons .mf-show__frame { grid-column: 2; grid-row: 2; width: 100%; aspect-ratio: 4 / 5; max-height: 58svh; overflow: hidden; background: var(--mf-sf); }
.b-salons .mf-show__frame img { width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 50%; transition: transform .9s cubic-bezier(.2, .7, .2, 1), transform-origin .9s cubic-bezier(.2, .7, .2, 1); }
.b-salons .mf-show[data-s="1"] .mf-show__frame img { transform: scale(1.8); transform-origin: 48% 8%; }
.b-salons .mf-show[data-s="2"] .mf-show__frame img { transform: scale(2.6); transform-origin: 55% 92%; }
.b-salons .mf-show__b { grid-row: 3; padding-top: 20px; opacity: 0; transform: translateY(18px); transition: opacity .6s, transform .6s cubic-bezier(.2, .7, .2, 1); }
.b-salons .mf-show[data-s="1"] .mf-show__b, .b-salons .mf-show[data-s="2"] .mf-show__b { opacity: 1; transform: none; }
.b-salons .mf-show__cap { grid-column: 3; grid-row: 2; justify-self: start; align-self: start; max-width: 26ch; font-size: var(--s-body); transition: opacity .4s; }
.b-salons .mf-show__cap.is-swap { opacity: 0; }

/* the build section on home */
.b-salons .mf-build__h { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px 24px; align-items: end; margin-bottom: 40px; }
.b-salons .mf-build__h h2 { grid-column: 1 / 8; }
.b-salons .mf-build__h p { grid-column: 8 / 13; max-width: 40ch; }

/* ---------------- the appointment builder */
.b-salons .mf-bk { position: relative; background: var(--mf-sf); color: var(--mf-ink); font-family: var(--mf-f); font-size: var(--s-small); line-height: 1.45; padding: clamp(16px, 2.6vw, 36px); border-radius: var(--r); text-align: left; }
.b-salons .mf-bk *, .b-salons .mf-bk *::before { box-sizing: border-box; }
.b-salons .mf-bk__tabs { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0 0 28px; padding: 0; }
.b-salons .mf-bk__tabs li { padding-top: 12px; color: var(--mf-soft); border-top: 4px solid var(--mf-sf2); transition: border-color .3s, color .3s; }
.b-salons .mf-bk__tabs li.is-done, .b-salons .mf-bk__tabs li[aria-current] { color: var(--mf-ink); border-top-color: var(--mf-ink); }
.b-salons .mf-bk__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: clamp(20px, 3vw, 44px); align-items: start; }
.b-salons .mf-bk__main { min-width: 0; display: grid; gap: 28px; }
.b-salons .mf-bk__fallback { font-size: var(--s-body); }
.b-salons .mf-bk__g { display: grid; gap: 8px; }
.b-salons .mf-bk__gh { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.b-salons .mf-bk__gh h3 { font-size: var(--s-body); font-weight: 500; letter-spacing: 0; }
.b-salons .mf-bk__gh span { color: var(--mf-soft); }
.b-salons .mf-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; }
.b-salons .mf-opt { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 12px; min-height: 56px; padding: 10px 14px; border: 0; border-radius: var(--r); background: var(--mf-bg); color: var(--mf-ink); font: inherit; text-align: left; cursor: pointer; transition: background-color .18s, color .18s, transform .15s; }
.b-salons .mf-opt:hover { background: var(--mf-sf2); }
.b-salons .mf-opt:active { transform: scale(.985); }
.b-salons .mf-opt b { font-weight: 500; font-size: var(--s-small); }
.b-salons .mf-opt small { grid-column: 1; font-size: var(--s-small); color: var(--mf-soft); }
.b-salons .mf-opt i { grid-row: 1 / 3; grid-column: 2; font-style: normal; font-variant-numeric: tabular-nums; }
.b-salons .mf-opt[aria-pressed="true"] { background: var(--mf-ink); color: var(--mf-on); }
.b-salons .mf-opt[aria-pressed="true"] small { color: #3d403c; }
.b-salons .mf-opt:disabled { opacity: .45; cursor: not-allowed; }
.b-salons .mf-lvls3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.b-salons .mf-lvl { display: grid; gap: 2px; align-content: start; min-height: 96px; padding: 12px 14px; border: 0; border-radius: var(--r); background: var(--mf-bg); color: var(--mf-ink); font: inherit; text-align: left; cursor: pointer; transition: background-color .18s, transform .15s; }
.b-salons .mf-lvl:hover { background: var(--mf-sf2); } .b-salons .mf-lvl:active { transform: scale(.985); }
.b-salons .mf-lvl b { font-weight: 500; }
.b-salons .mf-lvl strong { font-weight: 400; font-size: var(--s-lead); letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.b-salons .mf-lvl span { color: var(--mf-soft); }
.b-salons .mf-lvl[aria-pressed="true"] { background: var(--mf-ink); color: var(--mf-on); } .b-salons .mf-lvl[aria-pressed="true"] span { color: #3d403c; }
.b-salons .mf-lvl:disabled { opacity: .4; cursor: not-allowed; }
.b-salons .mf-bk__note { color: var(--mf-soft); max-width: 60ch; }
.b-salons .mf-st { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 4px 16px; padding: 14px; border-radius: var(--r); background: var(--mf-bg); }
.b-salons .mf-st img { grid-row: 1 / 3; width: 72px; height: 72px; object-fit: cover; background: var(--mf-sf2); }
.b-salons .mf-st p b { font-weight: 500; font-size: var(--s-body); } .b-salons .mf-st p span { color: var(--mf-soft); }
.b-salons .mf-slots { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.b-salons .mf-slot { min-height: 44px; padding: 0 14px; border: 0; border-radius: var(--r); background: var(--mf-sf2); color: var(--mf-ink); font: inherit; font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color .18s, transform .15s; }
.b-salons .mf-slot:hover { background: #333832; } .b-salons .mf-slot:active { transform: scale(.97); }
.b-salons .mf-slot[aria-pressed="true"] { background: var(--mf-ink); color: var(--mf-on); }
.b-salons .mf-pol { display: grid; gap: 10px; padding: 18px; border-radius: var(--r); background: var(--mf-bg); }
.b-salons .mf-pol h3 { font-size: var(--s-body); font-weight: 500; letter-spacing: 0; }
.b-salons .mf-pol ul { margin: 0; padding-left: 1.1em; display: grid; gap: 6px; }
.b-salons .mf-pol strong { font-weight: 500; color: var(--mf-acc2); }
.b-salons .mf-field { display: grid; gap: 6px; }
.b-salons .mf-field span { font-size: var(--s-small); }
.b-salons .mf-field input, .b-salons .mf-field textarea { width: 100%; min-height: 50px; padding: 12px 14px; border: 1.5px solid #3a3f3a; border-radius: var(--r); background: var(--mf-bg); color: var(--mf-ink); font: 400 var(--s-small) var(--mf-f); caret-color: var(--mf-acc); transition: border-color .2s; }
.b-salons .mf-field input:focus, .b-salons .mf-field textarea:focus { border-color: var(--mf-acc); outline: none; }
.b-salons .mf-field input::placeholder, .b-salons .mf-field textarea::placeholder { color: #8d9089; }
.b-salons .mf-field input[type="date"] { color-scheme: dark; }
.b-salons .mf-fields2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.b-salons .mf-check { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; min-height: 44px; padding-top: 4px; cursor: pointer; }
.b-salons .mf-check input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--mf-acc); }
.b-salons .mf-bk__sum { position: sticky; top: 16px; display: grid; gap: 14px; padding: 20px; border-radius: var(--r); background: var(--mf-bg); }
.b-salons .mf-tk__h { font-size: var(--s-body); font-weight: 500; letter-spacing: 0; line-height: 1.3; }
.b-salons .mf-tk__h button { all: unset; cursor: pointer; } .b-salons .mf-tk__h button:focus-visible { outline: 2px solid var(--mf-acc); outline-offset: 3px; }
.b-salons .mf-tk { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.b-salons .mf-tk li { display: flex; justify-content: space-between; gap: 12px; }
.b-salons .mf-tk li span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.b-salons .mf-tk__empty { color: var(--mf-soft); }
.b-salons .mf-tk__tot { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 14px; border-top: 2px solid var(--mf-sf2); }
.b-salons .mf-tk__tot strong { font-size: var(--s-lead); font-weight: 400; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.b-salons .mf-tk__meta { display: grid; gap: 4px; color: var(--mf-soft); }
.b-salons .mf-tk__meta b { color: var(--mf-ink); font-weight: 500; }
.b-salons .mf-bk__act { display: grid; grid-template-columns: auto 1fr; gap: 8px; }
.b-salons .mf-bk__act .mf-btn:only-child { grid-column: 1 / -1; }
.b-salons .mf-done { display: grid; gap: 14px; }
.b-salons .mf-done h3 { font-size: var(--s-lead); }
.b-salons .mf-next { display: grid; gap: 12px; padding: 20px; border-radius: var(--r); background: var(--mf-ink); color: var(--mf-on); }
.b-salons .mf-next h4 { margin: 0; font: 400 var(--s-lead)/1.1 var(--mf-f); letter-spacing: -.02em; }
.b-salons .mf-next .mf-btn { background: var(--mf-on); color: var(--mf-ink); justify-self: start; } .b-salons .mf-next .mf-btn:hover { background: #2a2e2b; }
.b-salons .mf-bk button.mf-link { justify-self: start; min-height: 44px; padding: 0; border: 0; background: none; color: var(--mf-ink); font-family: var(--mf-f); cursor: pointer; }
.b-salons .mf-next .mf-link { justify-self: start; background: none; border: 0; padding: 8px 0; color: var(--mf-on); font-family: var(--mf-f); cursor: pointer; }
.b-salons .mf-next p.is-held { font-weight: 500; }

/* overlay */
.b-salons .mf-ov { position: fixed; inset: 0; z-index: 60; background: rgba(6, 7, 6, .76); opacity: 0; transition: opacity .3s; }
.b-salons .mf-ov.is-open { opacity: 1; }
.b-salons .mf-ov__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(1040px, 100%); overflow-y: auto; overscroll-behavior: contain; background: var(--mf-sf); box-shadow: -24px 0 60px rgba(0, 0, 0, .45); transform: translateX(40px); transition: transform .45s cubic-bezier(.2, .7, .2, 1); } /* taste-skill-ignore: floats (dialog, launcher, sticky bar, menu) */
.b-salons .mf-ov.is-open .mf-ov__panel { transform: none; }
.b-salons .mf-ov__bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px clamp(16px, 2.6vw, 36px) 0; }
.b-salons .mf-ov__t { font-size: var(--s-lead); letter-spacing: -.02em; }
.b-salons .mf-ov__x { min-height: 44px; padding: 0 16px; border: 0; border-radius: var(--r); background: var(--mf-sf2); color: var(--mf-ink); font: 500 var(--s-small) var(--mf-f); cursor: pointer; }
.b-salons .mf-ov__x:hover { background: #333832; }
.b-salons.mf-lock { overflow: hidden; }
.b-salons.mf-bk-in .dm-chatbtn, .b-salons.mf-lock .dm-chatbtn { opacity: 0; pointer-events: none; }
.b-salons .dm-chatbtn { transition: opacity .3s; }
.b-salons .dm-chatbtn > button { border-radius: var(--r); font-family: var(--mf-f); font-weight: 500; box-shadow: none; } /* taste-skill-ignore: removes the kit launcher shadow */
.b-salons .wc { border-radius: var(--r); } .b-salons .wc__opt { border-radius: var(--r); } .b-salons .wc__msg { border-radius: 10px; }

/* moments row */
.b-salons .mf-mo { overflow: hidden; padding-left: 0; padding-right: 0; }
.b-salons .mf-mo__top { display: flex; justify-content: space-between; align-items: end; gap: 16px; padding: 0 var(--mx); }
.b-salons .mf-mo__btns { display: flex; gap: 6px; }
.b-salons .mf-sq { width: 48px; height: 48px; border: 0; border-radius: var(--r); background: var(--mf-ink); color: var(--mf-on); font: 400 1.25rem var(--mf-f); cursor: pointer; transition: background-color .2s, transform .15s; }
.b-salons .mf-sq:hover { background: var(--mf-acc2); } .b-salons .mf-sq:active { transform: scale(.94); } .b-salons .mf-sq:disabled { background: var(--mf-sf2); color: var(--mf-soft); }
.b-salons .mf-mo__bar { height: 6px; margin: 28px var(--mx) 36px; background: var(--mf-sf2); }
.b-salons .mf-mo__bar i { display: block; height: 100%; background: var(--mf-ink); transform-origin: 0 50%; transform: scaleX(.2); transition: transform .2s; }
.b-salons .mf-mo__row { list-style: none; display: flex; gap: 32px; margin: 0; padding: 0 var(--mx) 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--mx); scrollbar-width: none; }
.b-salons .mf-mo__row::-webkit-scrollbar { display: none; }
.b-salons .mf-mo__c { flex: 0 0 300px; scroll-snap-align: start; display: flex; flex-direction: column; }
.b-salons .mf-mo__t { font-size: var(--s-body); font-weight: 500; }
.b-salons .mf-mo__d { margin-top: 8px; font-size: var(--s-small); color: var(--mf-soft); }
.b-salons .mf-mo__c img { margin-top: var(--gap); width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: brightness(.88); background: var(--mf-sf); }

/* about, portrait as drop cap */
.b-salons section.mf-about { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; padding-bottom: var(--sp); }
.b-salons .mf-about__facts { grid-column: 1 / 3; display: grid; gap: 22px; align-content: start; font-size: var(--s-small); color: var(--mf-soft); }
.b-salons .mf-about__facts b { display: block; color: var(--mf-ink); font-weight: 500; }
.b-salons .mf-about__txt { grid-column: 3 / 13; display: grid; gap: 1.2em; }
.b-salons .mf-about--c .mf-about__txt { grid-column: 2 / 12; }
.b-salons .mf-about__p { font-size: var(--s-lead); line-height: 1.22; letter-spacing: -.012em; max-width: 34em; }
.b-salons .mf-about__p b { font-weight: 400; }
.b-salons .mf-about__p a { color: var(--mf-ink); text-decoration: underline; }
.b-salons .mf-about__p.mf-soft { color: var(--mf-soft); }
.b-salons .mf-about__pic { float: left; width: 3.6em; height: 3.6em; margin: .18em .5em 0 0; object-fit: cover; background: var(--mf-sf); }

/* visit card on a photograph */
.b-salons .mf-visit { position: relative; min-height: 100svh; margin-top: 0; background: var(--mf-sf); }
.b-salons .mf-visit__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.85); }
.b-salons .mf-visit__card { position: absolute; top: 60px; right: 60px; width: 380px; display: grid; gap: 16px; padding: 32px 32px 0; overflow: hidden; border-radius: 8px; background: var(--mf-paper); color: var(--mf-on); font-size: var(--s-small); }
.b-salons .mf-visit__card h2 { font-size: var(--s-lead); font-weight: 300; }
.b-salons .mf-visit__card .mf-btn { margin: 8px -32px 0; width: calc(100% + 64px); border-radius: 0; background: var(--mf-on); color: var(--mf-ink); }
.b-salons .mf-visit__card .mf-btn:hover { background: #2a2e2b; }
.b-salons .mf-hours { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.b-salons .mf-hours li { display: flex; justify-content: space-between; gap: 16px; font-variant-numeric: tabular-nums; }

/* footer: inverted, wordmark below */
.b-salons .mf-foot { min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto auto; padding: 40px var(--mx) 24px; background: var(--mf-paper); color: var(--mf-on); }
.b-salons .mf-foot__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 24px; font-size: var(--s-small); }
.b-salons .mf-foot__h { font-weight: 500; margin-bottom: 10px; }
.b-salons .mf-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; color: var(--mf-paper-soft); }
.b-salons .mf-foot a { display: inline-block; padding: 3px 0; text-decoration: none; transition: color .2s; } .b-salons .mf-foot a:hover { color: var(--mf-on); text-decoration: underline; }
.b-salons .mf-foot__word { grid-row: 3; width: 100%; height: auto; margin-top: 48px; overflow: visible; transform-origin: 50% 100%; }
.b-salons .mf-foot__word text { font-family: var(--mf-f); font-weight: 300; font-size: 150px; letter-spacing: -.04em; fill: currentColor; }
.b-salons .mf-foot__legal { grid-row: 4; margin-top: 20px; font-size: var(--s-small); color: var(--mf-paper-soft); }

/* inner page heads */
.b-salons .mf-ph { padding-top: clamp(72px, 9vw, 140px); display: grid; gap: 24px; }
.b-salons .mf-ph h1 { max-width: 14ch; }
.b-salons .mf-ph--split { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: end; }
.b-salons .mf-ph--split h1 { grid-column: 1 / 8; } .b-salons .mf-ph--split .mf-lead { grid-column: 8 / 13; font-size: var(--s-body); line-height: 1.5; }
.b-salons .mf-ph--book h1 { max-width: none; }

/* price matrix (a real table) */
.b-salons .mf-mx { overflow-x: auto; }
.b-salons .mf-mx table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums lining-nums; }
.b-salons .mf-mx table + table { margin-top: 56px; }
.b-salons .mf-mx thead th:first-child { color: var(--mf-ink); font-size: var(--s-body); font-weight: 500; }
.b-salons .mf-mx__cap { padding-top: 18px; font-size: var(--s-small); color: var(--mf-soft); }
.b-salons .mf-mx caption { caption-side: bottom; text-align: left; padding-top: 18px; font-size: var(--s-small); color: var(--mf-soft); }
.b-salons .mf-mx th, .b-salons .mf-mx td { padding: 16px 12px; text-align: right; vertical-align: top; font-weight: 400; font-size: var(--s-body); }
.b-salons .mf-mx th:first-child { text-align: left; padding-left: 0; }
.b-salons .mf-mx thead th { font-size: var(--s-small); color: var(--mf-soft); padding-bottom: 10px; }
.b-salons .mf-mx tbody tr + tr th, .b-salons .mf-mx tbody tr + tr td { border-top: 1px solid #2a2e2b; }
.b-salons .mf-mx tbody th b { display: block; font-weight: 400; }
.b-salons .mf-mx tbody th span { display: block; font-size: var(--s-small); color: var(--mf-soft); }
.b-salons .mf-mx .mf-mx__g th { padding-top: 56px; font-size: var(--s-lead); letter-spacing: -.02em; }
.b-salons .mf-mx tbody:first-of-type .mf-mx__g th { padding-top: 24px; }
.b-salons .mf-mx tbody tr:not(.mf-mx__g):hover td, .b-salons .mf-mx tbody tr:not(.mf-mx__g):hover th { background: var(--mf-sf); }
.b-salons .mf-mx--path td, .b-salons .mf-mx--path th { text-align: left; font-size: var(--s-small); }
.b-salons .mf-mx--path tbody th { font-size: var(--s-lead); letter-spacing: -.02em; width: 22%; }
.b-salons .mf-mx--path td:last-child { width: 32%; }

/* matrix beside a picture */
.b-salons .mf-mxw { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: start; }
.b-salons .mf-mxw > img { grid-column: 1 / 5; position: sticky; top: 24px; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: brightness(.88); }
.b-salons .mf-mxw > div { grid-column: 5 / 13; }

/* levels list */
.b-salons .mf-lvls h2 { margin-bottom: 40px; }
.b-salons .mf-lvls__l { list-style: none; margin: 0; padding: 0; display: grid; gap: 48px; }
.b-salons .mf-lvls__l li { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px 24px; align-items: start; }
.b-salons .mf-lvls__f { grid-column: 1 / 6; grid-row: 2; display: flex; gap: 8px; } .b-salons .mf-lvls__f img { width: min(220px, 48%); height: auto; aspect-ratio: 1; object-fit: cover; filter: brightness(.92); }
.b-salons .mf-lvls__l h3 { grid-column: 1 / 6; font-size: var(--s-head); font-weight: 300; letter-spacing: -.04em; }
.b-salons .mf-lvls__l p { grid-column: 7 / 13; grid-row: 1 / 3; max-width: 44ch; padding-top: .6em; }

/* color quote */
.b-salons .mf-quote__h { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px 24px; align-items: end; margin-bottom: 40px; }
.b-salons .mf-quote__h h2 { grid-column: 1 / 8; } .b-salons .mf-quote__h p { grid-column: 8 / 13; max-width: 40ch; }
.b-salons .mf-cq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(20px, 3vw, 48px); align-items: start; font-size: var(--s-small); }
.b-salons .mf-cq__drop { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r); background: var(--mf-sf); cursor: pointer; transition: background-color .2s; }
.b-salons .mf-cq__drop:hover { background: var(--mf-sf2); }
.b-salons .mf-cq__drop:focus-within { outline: 2px solid var(--mf-acc); outline-offset: 3px; }
.b-salons .mf-cq__drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.b-salons .mf-cq__ph { display: grid; gap: 8px; max-width: 26ch; padding: 24px; text-align: center; pointer-events: none; }
.b-salons .mf-cq__drop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.b-salons .mf-cq__read { margin-top: 12px; color: var(--mf-soft); }
.b-salons .mf-cq__qs, .b-salons .mf-match__qs { display: grid; gap: 24px; }
.b-salons .mf-q { margin: 0; padding: 0; border: 0; min-width: 0; }
.b-salons .mf-q legend { padding: 0; margin-bottom: 10px; font-size: var(--s-body); font-weight: 500; }
.b-salons .mf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.b-salons .mf-chip { min-height: 44px; padding: 0 16px; border: 0; border-radius: var(--r); background: var(--mf-sf); color: var(--mf-ink); font: 400 var(--s-small) var(--mf-f); cursor: pointer; transition: background-color .18s, color .18s, transform .15s; }
.b-salons .mf-chip:hover { background: var(--mf-sf2); } .b-salons .mf-chip:active { transform: scale(.97); }
.b-salons .mf-chip[aria-pressed="true"] { background: var(--mf-ink); color: var(--mf-on); }
.b-salons .mf-cq__out { display: grid; gap: 12px; padding: 24px; border-radius: var(--r); background: var(--mf-sf); }
.b-salons .mf-cq__range { font-size: var(--s-head); font-weight: 300; letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums lining-nums; }
.b-salons .mf-cq__lv { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.b-salons .mf-cq__lv span b { font-weight: 500; }
.b-salons .mf-cq__out .mf-btn { justify-self: start; margin-top: 6px; }

/* matcher */
.b-salons .mf-match { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(20px, 3vw, 48px); align-items: start; font-size: var(--s-small); }
.b-salons .mf-match__out { display: grid; gap: 12px; }
.b-salons .mf-res { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 6px 20px; padding: 16px; border-radius: var(--r); background: var(--mf-sf); }
.b-salons .mf-res img { grid-row: 1 / 6; width: 140px; height: 140px; object-fit: cover; background: var(--mf-sf2); }
.b-salons .mf-res h3 { font-size: var(--s-lead); }
.b-salons .mf-res p span { color: var(--mf-soft); }
.b-salons .mf-res .mf-btn { justify-self: start; margin-top: 6px; }
.b-salons .mf-res--top { background: var(--mf-sf2); }

/* profiles */
.b-salons .mf-profs { display: grid; gap: clamp(72px, 9vw, 140px); padding-bottom: var(--sp); }
.b-salons .mf-prof { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: start; }
.b-salons .mf-prof > img { grid-column: 1 / 6; width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--mf-sf); filter: brightness(.92); }
.b-salons .mf-prof:nth-of-type(even) > img { grid-column: 8 / 13; grid-row: 1; }
.b-salons .mf-prof__t { grid-column: 7 / 13; display: grid; gap: 14px; justify-items: start; max-width: 44ch; padding-top: 8px; }
.b-salons .mf-prof:nth-of-type(even) .mf-prof__t { grid-column: 1 / 7; grid-row: 1; }
.b-salons .mf-prof__lv { color: var(--mf-acc2); }
.b-salons .mf-prof__k { margin-top: 8px; font-weight: 500; }
.b-salons .mf-prof__slots { display: flex; flex-wrap: wrap; gap: 6px; }
.b-salons .mf-prof__slots span.mf-tag { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: var(--r); background: var(--mf-sf); font-size: var(--s-small); font-variant-numeric: tabular-nums; }

/* wide image with text */
.b-salons .mf-wide-img { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: end; padding-bottom: var(--sp); }
.b-salons .mf-wide-img > img { grid-column: 1 / 7; width: 100%; aspect-ratio: 4 / 5; max-height: 86svh; object-fit: cover; filter: brightness(.88); background: var(--mf-sf); }
.b-salons .mf-wide-img > div { grid-column: 8 / 13; display: grid; gap: 18px; max-width: 42ch; }
.b-salons .mf-wide-img h2 { font-size: var(--s-lead); font-weight: 400; }
.b-salons .mf-wide-img--r > img { grid-column: 7 / 13; grid-row: 1; } .b-salons .mf-wide-img--r > div { grid-column: 1 / 6; grid-row: 1; }
.b-salons .mf-list { margin: 0; padding-left: 1.1em; display: grid; gap: 10px; }

/* first visit list */
.b-salons .mf-first { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: start; }
.b-salons .mf-first > img { grid-column: 1 / 6; position: sticky; top: 24px; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: brightness(.88); }
.b-salons .mf-first__l { grid-column: 7 / 13; margin: 0; padding-left: 1.4em; display: grid; gap: 40px; font-size: var(--s-lead); line-height: 1.25; letter-spacing: -.01em; }
.b-salons .mf-first__l li::marker { color: var(--mf-acc); font-variant-numeric: tabular-nums; }
.b-salons .mf-first__l b { display: block; font-weight: 400; } .b-salons .mf-first__l li { color: var(--mf-soft); font-size: var(--s-body); line-height: 1.5; }
.b-salons .mf-first__l li b { color: var(--mf-ink); font-size: var(--s-lead); line-height: 1.2; margin-bottom: 8px; }

/* policies table */
.b-salons .mf-faq { display: grid; gap: clamp(56px, 6vw, 84px); padding-bottom: var(--sp); }
.b-salons .mf-faq__r { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px 24px; align-items: baseline; }
.b-salons .mf-faq__r h2, .b-salons .mf-faq__r h3 { grid-column: 1 / 7; font-size: var(--s-lead); font-weight: 400; letter-spacing: -.02em; line-height: 1.1; }
.b-salons .mf-faq__r h2 { color: var(--mf-soft); }
.b-salons .mf-faq__r p { grid-column: 8 / 13; max-width: 40ch; }

/* gift card */
.b-salons .mf-gift { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(24px, 4vw, 64px); align-items: start; font-size: var(--s-small); }
.b-salons .mf-gift__form { display: grid; gap: 20px; }
.b-salons .mf-gift__form .mf-btn { justify-self: start; }
.b-salons .mf-gift__done { padding: 14px 16px; border-radius: var(--r); background: var(--mf-sf); }
.b-salons .mf-gift__card { margin: 0; position: sticky; top: 24px; display: grid; gap: 14px; }
.b-salons .mf-gift__card figcaption { color: var(--mf-soft); }
.b-salons .mf-gc { aspect-ratio: 1.586; display: grid; grid-template-rows: auto 1fr auto auto auto; gap: 6px; padding: clamp(20px, 3vw, 36px); border-radius: 10px; background: var(--mf-acc); color: var(--mf-on); overflow: hidden; }
.b-salons .mf-gc__logo { display: flex; align-items: center; gap: 8px; font-size: var(--s-body); } .b-salons .mf-gc .mf-mark { color: var(--mf-on); }
.b-salons .mf-gc__amt { align-self: center; font-size: var(--s-head); font-weight: 300; letter-spacing: -.05em; line-height: 1; font-variant-numeric: lining-nums; }
.b-salons .mf-gc__to { font-size: var(--s-body); font-weight: 500; }
.b-salons .mf-gc__note { max-width: 40ch; overflow-wrap: anywhere; }
.b-salons .mf-gc__from { min-height: 1.4em; }
.b-salons .mf-terms h2 { font-size: var(--s-lead); font-weight: 400; margin-bottom: 32px; }
.b-salons .mf-terms__c { columns: 2 22em; column-gap: 64px; padding-bottom: var(--sp); }
.b-salons .mf-terms__c p { break-inside: avoid; margin-bottom: 1.2em; max-width: 42ch; }
.b-salons .mf-terms__c b { font-weight: 500; }

/* book page side */
.b-salons .mf-bookside { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px 24px; padding-bottom: var(--sp); }
.b-salons .mf-bookside > div { display: grid; gap: 16px; align-content: start; }
.b-salons .mf-bookside > div:first-child { grid-column: 1 / 6; } .b-salons .mf-bookside > div:last-child { grid-column: 7 / 13; }
.b-salons .mf-bookside h2 { font-size: var(--s-lead); font-weight: 400; }
.b-salons .mf-wait { font-size: var(--s-small); }
.b-salons .mf-wait .mf-btn { justify-self: start; }
.b-salons .mf-wait__done { padding: 14px 16px; border-radius: var(--r); background: var(--mf-sf); }

/* motion: scaling wordmark, slow drift on the hero picture */
@media (prefers-reduced-motion: no-preference) {
  .b-salons .mf-hero__img img { animation: mfDrift 16s cubic-bezier(.2, .7, .2, 1) both; }
  @keyframes mfDrift { from { transform: scale(1.07); } to { transform: scale(1); } }
  @supports (animation-timeline: view()) {
    .b-salons .mf-hero__name { animation: mfShrink linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
    @keyframes mfShrink { to { transform: scale(.93); } }
    .b-salons .mf-foot__word { animation: mfGrow linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
    @keyframes mfGrow { from { transform: scale(.94); } to { transform: none; } }
  }
}
@media (prefers-reduced-motion: reduce) {
  .b-salons .mf-show { height: auto; } .b-salons .mf-show__stage { position: relative; height: auto; min-height: 0; padding-block: 24px; }
  .b-salons .mf-show__b { opacity: 1; transform: none; } .b-salons .mf-show__frame img, .b-salons .mf-ov, .b-salons .mf-ov__panel { transition: none; }
}

/* tablet and phone: their own compositions */
@media (max-width: 1100px) {
  .b-salons section.mf-pm { grid-template-columns: 1fr; gap: 40px; }
  .b-salons .mf-pm__side { grid-column: 1; position: static; grid-template-columns: minmax(0, 1fr) 160px; align-items: start; gap: 16px 24px; }
  .b-salons .mf-pm__side > :not(img) { grid-column: 1; }
  .b-salons .mf-pm__img { grid-column: 2; grid-row: 1 / span 3; width: 160px; margin: 0; align-self: start; }
  .b-salons .mf-pm__list { grid-column: 1; }
  .b-salons .mf-bk__grid { grid-template-columns: 1fr; }
  .b-salons .mf-bk__sum { position: sticky; top: auto; bottom: 0; z-index: 2; box-shadow: 0 -16px 32px rgba(0, 0, 0, .35); } /* taste-skill-ignore: floats (dialog, launcher, sticky bar, menu) */
}
@media (max-width: 820px) {
  .b-salons .mf-nav { position: absolute; top: 100%; left: 0; right: 0; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--mx) 16px; background: var(--mf-sf); box-shadow: 0 20px 40px rgba(0, 0, 0, .4); } /* taste-skill-ignore: floats (dialog, launcher, sticky bar, menu) */
  .b-salons .mf-nav.is-open { display: flex; }
  .b-salons .mf-nav a { min-height: 52px; padding: 0; font-size: var(--s-body); }
  .b-salons .mf-nav .mf-nav__book { margin: 8px 0 0; justify-content: center; }
  .b-salons .mf-menu { display: inline-flex; align-items: center; margin-left: auto; }
  .b-salons .mf-hero__img { height: 50svh; }
  .b-salons .mf-hero__row { flex-direction: column; gap: 18px; padding-top: 20px; }
  .b-salons .mf-hero__row p { font-size: var(--s-small); }
  .b-salons .mf-hero__name { white-space: normal; font-size: 23vw; padding-top: 24px; padding-bottom: 16px; }
  .b-salons .mf-pm__list { grid-template-columns: 1fr; }
  .b-salons .mf-pm__col + .mf-pm__col h3:first-child { margin-top: 48px; }
  .b-salons .mf-pm__side { grid-template-columns: 1fr; } .b-salons .mf-pm__img { display: none; }
  .b-salons .mf-show__stage { grid-template-columns: 1fr; grid-template-rows: 1fr auto auto auto 1fr; gap: 0; }
  .b-salons .mf-show__a { grid-row: 1; font-size: 13vw; }
  .b-salons .mf-show__frame { grid-column: 1; grid-row: 2; width: 70vw; max-height: 52svh; }
  .b-salons .mf-show__b { grid-row: 3; font-size: 13vw; }
  .b-salons .mf-show__cap { grid-column: 1; grid-row: 4; justify-self: center; text-align: center; margin-top: 16px; font-size: var(--s-small); }
  .b-salons .mf-build__h, .b-salons .mf-quote__h, .b-salons .mf-ph--split { grid-template-columns: 1fr; }
  .b-salons .mf-build__h > *, .b-salons .mf-quote__h > *, .b-salons .mf-ph--split > * { grid-column: 1 !important; }
  .b-salons .mf-ph--split .mf-lead { font-size: var(--s-lead); line-height: 1.25; }
  .b-salons .mf-mo__btns { display: none; }
  .b-salons .mf-mo__row { gap: 16px; } .b-salons .mf-mo__c { flex-basis: 72vw; } .b-salons .mf-mo__c img { margin-top: calc(var(--gap) * .4); }
  .b-salons section.mf-about { grid-template-columns: 1fr; }
  .b-salons .mf-about__facts { grid-column: 1; grid-row: 2; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; font-size: var(--s-small); }
  .b-salons .mf-about__txt, .b-salons .mf-about--c .mf-about__txt { grid-column: 1; }
  .b-salons .mf-about__p { font-size: 1.375rem; line-height: 1.25; } .b-salons .mf-about__pic { width: 110px; height: 110px; }
  .b-salons .mf-visit { min-height: 0; display: grid; }
  .b-salons .mf-visit__img { position: static; height: 70svh; }
  .b-salons .mf-visit__card { position: relative; top: auto; right: auto; width: auto; margin: -80px 16px 0; padding: 24px 24px 0; }
  .b-salons .mf-visit__card .mf-btn { margin: 8px -24px 0; width: calc(100% + 48px); min-height: 56px; }
  .b-salons .mf-foot__cols { grid-template-columns: 1fr 1fr; gap: 32px 16px; }
  .b-salons .mf-foot { min-height: 0; } .b-salons .mf-foot__word { margin-top: 20svh; }
  .b-salons .mf-mxw, .b-salons .mf-lvls__l li, .b-salons .mf-faq__r, .b-salons .mf-first, .b-salons .mf-prof, .b-salons .mf-wide-img, .b-salons .mf-bookside { grid-template-columns: 1fr; }
  .b-salons .mf-mxw > div, .b-salons .mf-lvls__l li > *, .b-salons .mf-faq__r > *, .b-salons .mf-first > *, .b-salons .mf-prof > *, .b-salons .mf-prof__t, .b-salons .mf-wide-img > *, .b-salons .mf-bookside > div { grid-column: 1 !important; grid-row: auto !important; }
  .b-salons .mf-faq__r h3, .b-salons .mf-faq__r h2 { font-size: 1.5rem; }
  .b-salons .mf-first > img { position: static; width: 70%; }
  .b-salons .mf-mxw > img { display: none; } .b-salons .mf-lvls__l p { padding-top: 0; } .b-salons .mf-lvls__f img { width: 46%; }
  .b-salons .mf-first__l { gap: 28px; }
  .b-salons .mf-cq, .b-salons .mf-match, .b-salons .mf-gift { grid-template-columns: 1fr; }
  .b-salons .mf-cq__drop { aspect-ratio: 4 / 3; }
  .b-salons .mf-gift__card { position: static; order: -1; }
  .b-salons .mf-res { grid-template-columns: 88px minmax(0, 1fr); gap: 4px 14px; } .b-salons .mf-res img { width: 88px; height: 88px; grid-row: 1 / 3; }
  .b-salons .mf-res > :not(img):not(h3):not(.mf-res__lv) { grid-column: 1 / -1; }
  .b-salons .mf-mx th, .b-salons .mf-mx td { padding: 12px 6px; font-size: var(--s-small); }
  .b-salons .mf-mx thead th { font-size: .875rem; }
  .b-salons .mf-mx .mf-mx__g th { font-size: 1.5rem; }
  .b-salons .mf-mx--path tbody th { font-size: 1.25rem; }
  .b-salons .mf-lvls__l h3 { font-size: 2.75rem; }
}
@media (max-width: 560px) {
  .b-salons .mf-opts { grid-template-columns: 1fr; }
  .b-salons .mf-lvls3 { grid-template-columns: 1fr; } .b-salons .mf-lvl { min-height: 0; grid-template-columns: 1fr auto; align-items: baseline; } .b-salons .mf-lvl span { grid-column: 1 / -1; }
  .b-salons .mf-fields2 { grid-template-columns: 1fr; }
  .b-salons .mf-bk { padding: 16px 12px; }
  .b-salons .mf-bk__tabs { font-size: .875rem; }
  .b-salons .mf-bk__sum { padding: 14px; gap: 10px; }
  .b-salons .mf-tk__tot strong, .b-salons .mf-lvl strong { font-size: 1.1875rem; font-weight: 500; letter-spacing: 0; }
  .b-salons .mf-bk__sum .mf-tk { display: none; } .b-salons .mf-bk__sum.is-open .mf-tk { display: grid; }
  .b-salons .mf-st { grid-template-columns: 56px minmax(0, 1fr); padding: 12px; } .b-salons .mf-st img { width: 56px; height: 56px; }
  .b-salons .mf-slots { grid-column: 1 / -1; }
}