/* ══ MTB FLOW BUTTON — the ONE stylesheet for every button (frame/button, frame/button-group) ══
   Carter 2026-11-01: "CLEAN. GLASS. MODERN. CINEMATIC."  Replaces K4 (the Ember-tint slab + the
   green/magenta aurora bloom on hover, read as cheesy).  Rendered by mtb_frame_button_html()
   (mtb-frame/includes/button.php); /demo4 gets this file through demo4.min.css (min-css.mjs).

   MATERIAL  clear frosted glass: translucent ink + backdrop blur, a crisp 1 px light hairline, a brighter
             top lip.  Bone type.  --r-ctl capsule (law D1).  Never a coloured glow, never a slab fill.
   PRIMARY   the same glass with an Ember hairline and an Ember-text arrow.  That is the whole accent.
   HOVER     a quiet brightness lift + a faint neutral inner light from the top lip; the arrow travels 3 px.
   PRESS     a settle: scale .98, the lift drops back.
   FOCUS     a two-tone ring (ink + Bone) that reads on any ground.
   PAPER     law D2: on Bone paper the glass stays dark and goes dense, so Bone type holds 4.5:1.
   Values: DESIGN.md (Ink #0A0A0A, Bone #EDE7D8, Ember text #FF7D11; --ease, --dur-*, --r-ctl).  The var()
   fallbacks repeat those tokens so the element also renders on pages without the /demo4 token mirror. */
.mf-btn,
html body.mf-flow :is(#place_order, .omtb-pb__add, .omtb-pc__checkout-btn, .omtb-cart__btn-checkout, .wc-proceed-to-checkout a.checkout-button, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce .woocommerce-Button, .woocommerce-message .button, .woocommerce-info .button, .woocommerce-error .button) {
  --mf-fill: rgba(18, 18, 18, .6);
  --mf-lift: rgba(237, 231, 216, 0);
  --mf-line: rgba(237, 231, 216, .24);
  --mf-lip: rgba(237, 231, 216, .16);
  --mf-drop: 0 10px 26px -16px rgba(0, 0, 0, .8);
  --mf-arrow: currentColor;
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: .8em;
  min-height: 44px; min-width: 44px; margin: 0; padding: 0 22px; box-sizing: border-box;
  border: 0; border-radius: var(--r-ctl, 999px); outline: none;
  background: linear-gradient(var(--mf-lift), var(--mf-lift)), var(--mf-fill);
  -webkit-backdrop-filter: blur(16px) saturate(1.35);
  backdrop-filter: blur(16px) saturate(1.35);
  box-shadow: inset 0 0 0 1px var(--mf-line), inset 0 1px 0 var(--mf-lip), var(--mf-drop);
  color: #EDE7D8; text-decoration: none; text-shadow: none;
  font: 600 12px/1 "Hanken Grotesk", var(--disp, system-ui), sans-serif;
  letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  cursor: pointer; -webkit-tap-highlight-color: transparent; filter: none; animation: none;
  transition: background var(--dur-m-out, 180ms) var(--ease, cubic-bezier(.16, 1, .3, 1)),
              box-shadow var(--dur-m-out, 180ms) var(--ease, cubic-bezier(.16, 1, .3, 1)),
              transform var(--dur-s-out, 120ms) var(--ease, cubic-bezier(.16, 1, .3, 1));
}
/* the inner light: a neutral wash pooled under the top lip, off at rest */
.mf-btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(70% 90% at 50% 0%, rgba(237, 231, 216, .14), rgba(237, 231, 216, 0) 70%);
  opacity: 0; transition: opacity var(--dur-m-out, 180ms) var(--ease, cubic-bezier(.16, 1, .3, 1));
}
.mf-btn__t { display: block; padding-left: .14em; text-box: trim-both cap alphabetic; }
.mf-btn__a {
  display: block; flex: 0 0 auto; width: 1.15em; height: .74em;
  background: var(--mf-arrow);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 14'%3E%3Cpath d='M0 7H20.2M14.2 1.1L20.2 7L14.2 12.9' fill='none' stroke='%23000' stroke-width='2.1' stroke-linejoin='miter' stroke-linecap='butt'/%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 22 14'%3E%3Cpath d='M0 7H20.2M14.2 1.1L20.2 7L14.2 12.9' fill='none' stroke='%23000' stroke-width='2.1' stroke-linejoin='miter' stroke-linecap='butt'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--dur-m-out, 180ms) var(--ease, cubic-bezier(.16, 1, .3, 1));
}
/* PRIMARY — an Ember hairline and an Ember arrow; the label stays Bone */
.mf-btn--primary, .mf-btn[aria-pressed="true"],
html body.mf-flow :is(#place_order, .omtb-pb__add, .omtb-pc__checkout-btn, .omtb-cart__btn-checkout, .wc-proceed-to-checkout a.checkout-button, .woocommerce-form-login__submit, .woocommerce-form-register__submit, .single_add_to_cart_button, .woocommerce-EditAccountForm .woocommerce-Button, .woocommerce-ResetPassword .woocommerce-Button) {
  --mf-line: rgba(255, 125, 17, .78);
  --mf-lip: rgba(255, 217, 176, .22);
  --mf-arrow: #FF7D11;
}
/* the label colour at two classes: a page's own `body.x a` link rule (0,1,2) must not recolour the element */
.mf-btn.mf-btn { color: #EDE7D8; }
/* SECONDARY = the base glass.  QUIET — frost without an edge at rest (still enough ink under the label for
   4.5:1 over a bright photo); the hairline arrives on hover */
.mf-btn--quiet { --mf-fill: rgba(18, 18, 18, .5); --mf-line: rgba(237, 231, 216, 0); --mf-lip: rgba(237, 231, 216, .08); --mf-drop: 0 0 0 0 rgba(0, 0, 0, 0); }
/* SIZE */
.mf-btn--lg { min-height: 52px; padding: 0 30px; font-size: 13px; gap: .9em; }
/* PAPER — dark glass, dense (law D2) */
.mf-btn--paper { --mf-fill: rgba(14, 14, 14, .88); --mf-line: rgba(237, 231, 216, .14); --mf-drop: 0 10px 24px -14px rgba(10, 10, 10, .45); }
.mf-btn--paper.mf-btn--primary { --mf-line: rgba(255, 125, 17, .8); }
.mf-btn--paper.mf-btn--quiet { --mf-fill: rgba(14, 14, 14, .82); }

/* HOVER (real hover devices only) */
@media (hover: hover) {
  .mf-btn:hover,
  html body.mf-flow :is(#place_order, .omtb-pb__add, .omtb-pc__checkout-btn, .omtb-cart__btn-checkout, .wc-proceed-to-checkout a.checkout-button, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce .woocommerce-Button, .woocommerce-message .button, .woocommerce-info .button, .woocommerce-error .button):hover {
    --mf-lift: rgba(237, 231, 216, .07);
    --mf-line: rgba(237, 231, 216, .4);
    --mf-lip: rgba(237, 231, 216, .26);
    color: #EDE7D8; filter: none; transform: none;
    transition: background var(--dur-m, 320ms) var(--ease, cubic-bezier(.16, 1, .3, 1)),
                box-shadow var(--dur-m, 320ms) var(--ease, cubic-bezier(.16, 1, .3, 1)),
                transform var(--dur-s, 180ms) var(--ease, cubic-bezier(.16, 1, .3, 1));
  }
  .mf-btn--primary:hover,
  html body.mf-flow :is(#place_order, .omtb-pb__add, .omtb-pc__checkout-btn, .omtb-cart__btn-checkout, .wc-proceed-to-checkout a.checkout-button, .woocommerce-form-login__submit, .woocommerce-form-register__submit, .single_add_to_cart_button, .woocommerce-EditAccountForm .woocommerce-Button, .woocommerce-ResetPassword .woocommerce-Button):hover { --mf-line: rgba(255, 125, 17, 1); --mf-lip: rgba(255, 217, 176, .34); }
  .mf-btn--quiet:hover { --mf-fill: rgba(18, 18, 18, .6); }
  .mf-btn:hover::after { opacity: 1; transition: opacity var(--dur-m, 320ms) var(--ease, cubic-bezier(.16, 1, .3, 1)); }
  .mf-btn:hover .mf-btn__a { transform: translateX(3px); transition: transform var(--dur-m, 320ms) var(--ease, cubic-bezier(.16, 1, .3, 1)); }
}
/* PRESS — a settle */
.mf-btn:active,
html body.mf-flow :is(#place_order, .omtb-pb__add, .omtb-pc__checkout-btn, .omtb-cart__btn-checkout, .wc-proceed-to-checkout a.checkout-button, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce .woocommerce-Button, .woocommerce-message .button, .woocommerce-info .button, .woocommerce-error .button):active {
  --mf-lift: rgba(237, 231, 216, .03);
  transform: scale(.98); transition-duration: var(--dur-s, 180ms);
}
.mf-btn:active::after { opacity: .5; }
/* FOCUS — a ring that reads on ink and on paper */
.mf-btn:focus { outline: none; }
.mf-btn:focus-visible,
html body.mf-flow :is(#place_order, .omtb-pb__add, .omtb-pc__checkout-btn, .omtb-cart__btn-checkout, .wc-proceed-to-checkout a.checkout-button, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce .woocommerce-Button, .woocommerce-message .button, .woocommerce-info .button, .woocommerce-error .button):focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--mf-line), inset 0 1px 0 var(--mf-lip), 0 0 0 2px #0A0A0A, 0 0 0 4px #EDE7D8;
}
.mf-btn:focus-visible::after { opacity: 1; }
.mf-btn:disabled, .mf-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }

/* GROUP — one row */
.mf-btn-group { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; max-width: 100%; }
.mf-btn-group--center { justify-content: center; }
.mf-btn-group--end { justify-content: flex-end; }

/* PHONE — tighter type and padding so a three-button row holds one line at 360+; secondaries drop
   their arrow inside a group */
@media (max-width: 600px) {
  .mf-btn { padding: 0 16px; font-size: 11px; letter-spacing: .12em; gap: .6em; }
  .mf-btn--lg { padding: 0 20px; font-size: 12px; }
  .mf-btn-group { gap: 6px; }
  .mf-btn-group > .mf-btn:not(.mf-btn--primary) { padding: 0 13px; }
  .mf-btn-group > .mf-btn:not(.mf-btn--primary) .mf-btn__a { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mf-btn, .mf-btn::after, .mf-btn__a { transition-property: background, box-shadow, opacity !important; }
  .mf-btn:active, .mf-btn:hover .mf-btn__a { transform: none !important; }
}

/* SHOP (mountainbaker only: body.mf-flow, added by openmtb-assistant).  The same element, by class, on
   the Woo / Print Studio buttons that are not blocks.  Every Woo `.button` takes the base glass; the form
   submits (Log in, Register, Add to cart, Save) and the checkout CTAs take the primary hairline
   (critic r1, 2026-11-02: Log in was a solid Ember slab).  The legacy shop sheets paint these Ember slabs
   with !important (site-repair.php), so the material properties are restated here at !important. */
html body.mf-flow :is(#place_order, .omtb-pb__add, .omtb-pc__checkout-btn, .omtb-cart__btn-checkout, .wc-proceed-to-checkout a.checkout-button, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce .woocommerce-Button, .woocommerce-message .button, .woocommerce-info .button, .woocommerce-error .button) {
  background: linear-gradient(var(--mf-lift), var(--mf-lift)), var(--mf-fill) !important;
  color: #EDE7D8 !important; border: 0 !important; border-radius: var(--r-ctl, 999px) !important;
  font-weight: 600 !important; font-size: 13px; padding: 0 24px; min-height: 48px;
}
html body.mf-flow #place_order { min-height: 52px; }
html body.mf-flow :is(.omtb-pc__checkout-btn, .omtb-cart__btn-checkout) svg { color: #FF7D11; }
/* the legacy checkout sheet's own :hover (Ember glow + 1 px rise) outranks the element's base rule — restate */
html body.mf-flow :is(#place_order, .omtb-pb__add, .omtb-pc__checkout-btn, .omtb-cart__btn-checkout, .wc-proceed-to-checkout a.checkout-button, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce .woocommerce-Button, .woocommerce-message .button, .woocommerce-info .button, .woocommerce-error .button):is(:hover, :focus, :active) {
  box-shadow: inset 0 0 0 1px var(--mf-line), inset 0 1px 0 var(--mf-lip), var(--mf-drop) !important; filter: none !important;
}
html body.mf-flow :is(#place_order, .omtb-pb__add, .omtb-pc__checkout-btn, .omtb-cart__btn-checkout, .wc-proceed-to-checkout a.checkout-button, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce .woocommerce-Button, .woocommerce-message .button, .woocommerce-info .button, .woocommerce-error .button):hover { transform: none !important; }
html body.mf-flow :is(#place_order, .omtb-pb__add, .omtb-pc__checkout-btn, .omtb-cart__btn-checkout, .wc-proceed-to-checkout a.checkout-button, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce .woocommerce-Button, .woocommerce-message .button, .woocommerce-info .button, .woocommerce-error .button):active { transform: scale(.98) !important; }