/* mm-beauty.css: the only stylesheet beauty.html links (BUILD-PLAN §4.1).
   The pre-redesign CSS is frozen in the `legacy` layer; every later layer wins over it whatever the
   specificity. `mm.reset` sits between legacy and the MadeMirror base so its blanket resets (font family,
   tracking, case) beat legacy rules but never beat a .mm-* component. Legacy !important rules still win:
   they are the [hidden] guards, the permission-screen hide list and the phone object-fit:cover, all wanted. */
@layer legacy, mm.reset, mm.tokens, mm.base, mm.store, mm.studio;
@import url("styles.css?v=20261001as") layer(legacy);
@import url("beauty-art.css?v=20261006mm1") layer(legacy);
@import url("beauty-layout.css?v=20261006mm1") layer(legacy);
@import url("mm-fonts.css?v=20261006mm1");
@import url("mm-tokens.css?v=20261007hw1");
@import url("mm-base.css?v=20261007hw1");
@import url("mm-store.css?v=20261009fs1") layer(mm.store);
@import url("mm-studio.css?v=20261009s2") layer(mm.studio);

@layer mm.reset {
  :where(body.beauty-store) :where(*) {
    font-family: var(--mm-f-display);
    font-stretch: 100%;
    letter-spacing: normal;
    text-transform: none;
  }
  :where(body.beauty-store) :where(button, input, select, textarea) { color: inherit; }
  :where(body.beauty-store) :where(a) { color: inherit; }
  :where(body.beauty-store) :where(h1, h2, h3, h4) { font-weight: 400; }
  /* legacy glyph spans inside buttons and links carried their own size, margin and float */
  :where(body.beauty-store) :where(button, a) > :where(span, b, em) { font-size: inherit; font-weight: inherit; margin: 0; float: none; max-width: none; line-height: inherit; }
  :where(body.beauty-store) :where(.button) > :where(span) { display: inline; }
}