/* Product bindings for the shared Mall shell. Field layout belongs to Mall CSS. */
.m2j-site [hidden] { display: none !important; }
.m2j-site button, .m2j-site input, .m2j-site select { font: inherit; }
.m2j-site a { color: var(--cyan); }
.m2j-site :focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.m2j-site .skip-link { position: fixed; z-index: 300; left: 1rem; top: -6rem; padding: .75rem 1rem; border-radius: .5rem; background: var(--surface-strong); }
.m2j-site .skip-link:focus { top: 1rem; }
.m2j-site .mall-shell { height: 100vh; height: 100dvh; min-height: 0; padding: .5rem max(1rem, var(--safe-right)) calc(5.8rem + var(--safe-bottom)) max(1rem, var(--safe-left)); }
.m2j-site .mall-header { margin-bottom: .3rem; padding-top: max(.5rem, var(--safe-top)); gap: .75rem; flex-direction: row; align-items: center; }
.m2j-site .mall-self-anchor { min-width: 0; }
.m2j-site .mall-user-handle { max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m2j-site .mall-main { overflow: hidden; }
.m2j-site .mall-tile-field-wrapper { min-height: 0; }
.m2j-brand-group { display: flex; align-items: center; gap: 1.1rem; min-width: 0; }
.m2j-site .mall-brand-minimal { color: var(--text-dim); gap: .45rem; opacity: 1; font-size: .75rem; min-height: 44px; }
.m2j-title { font-size: clamp(1.05rem, 2.5vw, 1.3rem); letter-spacing: -.04em; margin: 0; white-space: nowrap; }
.m2j-title span { color: var(--cyan); }
.m2j-account { font-size: .76rem; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; gap: .35rem; }
.m2j-field-toolbar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex: 0 0 auto; padding: .2rem 0 .35rem; }
.m2j-field-toolbar p { margin: 0; font-size: .91rem; font-weight: 600; }
.m2j-field-toolbar #areaGrouping { font-size: .7rem; color: var(--text-muted); }
.m2j-field-toolbar .mall-projection-chip { color: var(--text); min-width: 6rem; }
.m2j-field-directions { display: flex; justify-content: space-between; gap: .75rem; margin: .15rem 0 .55rem; font-size: .7rem; color: var(--text-dim); flex: 0 0 auto; }
.m2j-source-line { margin: .65rem 0 0; font-size: .68rem; line-height: 1.5; color: var(--text-muted); flex: 0 0 auto; }
.m2j-source-line span { margin: 0 .3rem; }
.m2j-reddog-caption { font-size: .68rem; color: var(--text-dim); margin-right: .1rem; }
.m2j-site .red-dog-anchor { flex-direction: row; align-items: center; gap: .8rem; }
.m2j-site .red-dog-btn { width: 56px; height: 56px; }
.m2j-site .red-dog-btn img { width: 35px; }
.m2j-empty-state { padding: 2rem 1rem; border: 1px solid var(--border); border-radius: 1rem; margin-top: .5rem; line-height: 1.6; }
.m2j-empty-state h2 { font-size: 1.2rem; margin-top: 0; }
.m2j-empty-state p { color: var(--text-dim); }
.m2j-search-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .2rem 0 1rem; }
.m2j-search-heading h2 { font-size: 1.4rem; margin: .25rem 0 0; }
.m2j-eyebrow { font-size: .64rem; letter-spacing: .12em; color: var(--text-muted); }
.m2j-close { background: transparent; border: 1px solid var(--border); border-radius: 50%; width: 44px; height: 44px; color: var(--text); font-size: 1.5rem !important; cursor: pointer; flex-shrink: 0; }
.m2j-search-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
.m2j-search-form > label { display: flex; flex-direction: column; gap: .4rem; font-size: .76rem; color: var(--text-dim); min-width: 0; }
.m2j-search-form input:not([type="checkbox"]), .m2j-search-form select { width: 100%; min-width: 0; min-height: 46px; padding: .65rem .6rem; color: var(--text); background: #191924; border: 1px solid rgba(255,255,255,.14); border-radius: .5rem; font-size: .86rem; }
.m2j-search-form input::placeholder { color: var(--text-muted); }
.m2j-full-width { grid-column: 1 / -1; }
.m2j-filter-toggles { display: flex; flex-direction: column; gap: .35rem; }
.m2j-filter-toggles label { display: flex; align-items: center; gap: .5rem; min-height: 36px; font-size: .8rem; }
.m2j-filter-toggles input { accent-color: var(--cyan); width: 18px; height: 18px; }
.m2j-filter-help { margin: 0; font-size: .7rem; line-height: 1.6; color: var(--text-muted); }
.m2j-search-actions { display: flex; justify-content: space-between; gap: .75rem; align-items: center; }
.m2j-button { padding: .7rem 1.1rem; border: 1px solid rgba(77,226,212,.45); color: var(--text); background: rgba(77,226,212,.12); border-radius: .6rem; min-height: 44px; cursor: pointer; }
.m2j-text-button { color: var(--text-dim); background: none; border: 0; padding: .65rem .25rem; min-height: 44px; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
#filterResultCount { margin: 0; font-size: .75rem; color: var(--text-dim); }
.m2j-collection-info { margin-top: 1.3rem; border-top: 1px solid var(--border); }
.m2j-collection-info details { padding: .85rem 0; border-bottom: 1px solid var(--border); font-size: .78rem; line-height: 1.7; }
.m2j-collection-info summary { cursor: pointer; color: var(--text-dim); }
.m2j-collection-info p { color: var(--text-muted); }
@media (max-width: 480px) {
  .m2j-site .mall-shell { padding-left: max(.7rem, var(--safe-left)); padding-right: max(.7rem, var(--safe-right)); }
  .m2j-brand-group { gap: .7rem; }
  .m2j-site .mall-brand-minimal span { display: none; }
  .m2j-account { font-size: .68rem; }
  .m2j-site .mall-user-handle { display: none; }
  .m2j-field-directions { font-size: .65rem; gap: .4rem; }
  .m2j-source-line { font-size: .62rem; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .m2j-site .mall-shell { padding-bottom: calc(4.2rem + var(--safe-bottom)); }
  .m2j-site .mall-header { margin: 0; padding-top: var(--safe-top); }
  .m2j-field-directions { margin-bottom: .2rem; }
  .m2j-site .red-dog-btn { width: 44px; height: 44px; }
  .m2j-site .red-dog-btn img { width: 28px; }
  .m2j-source-line { margin-top: .2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .m2j-site *, .m2j-site *::before, .m2j-site *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation: none !important; }
}
