/* The page, brand header and photo wells use the homepage's theme-specific wash. */
body:is(.mg-catalog-profile, .mg-insta360, .mg-apex-compact)::before {
    content: "";
    background-image: var(--marketgrid-atmosphere);
}
.mg-insta360 .ip-hero, .mg-insta360 .ip-jump { background: transparent; }
.brand-strip, .brand-strip.apex-photo-strip,
.catalog-product .catalog-photo, .ip .ip-visual, .ip .ip-packshot {
    background: var(--bg);
    background-image: var(--marketgrid-atmosphere);
    border-color: var(--line);
}
.brand-strip::before { content: none; }
.brand-strip .brand-name h1, .brand-strip .brand-unit, .catalog-lineup a { color: var(--heading); }
.brand-strip .brand-copy > p { color: var(--text); }
.brand-strip .brand-actions :is(a:not(.mg-trustpilot), .secondary, .save-control) {
    background: var(--surface);
    border-color: var(--line);
    color: var(--heading);
}
.brand-strip .brand-actions .mg-trustpilot { color: var(--pink-ink); }

/* A small pool of light separates dark products from the dark surface. */
.catalog-product .catalog-photo::before, .ip .ip-visual::after, .ip .ip-packshot::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 40% 92% at 50% 52%, color-mix(in srgb, var(--muted) 20%, transparent), transparent 94%);
}
.ip .ip-visual::after { z-index: -1; background-position: right; }
.ip .ip-packshot > img { position: relative; }
.catalog-product .catalog-photo > img, .catalog-lineup img, .catalog-mark > img {
    background: transparent;
    mix-blend-mode: normal;
    mask-image: var(--studio-mask, none);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}
.catalog-lineup img { border-radius: 0; }
@media(min-width:681px) { .catalog-lineup img { height: 92px; } }
.catalog-lineup { align-items: center; padding-top: 0; }
.catalog-lineup a { align-self: center; display: grid; grid-template-rows: auto auto; align-items: center; padding-block: 6px; }
.catalog-lineup span { align-self: start; min-height: 2.6em; }
.catalog-product .catalog-photo { isolation: isolate; }
.catalog-product .catalog-facts > div { display: grid; grid-template-columns: minmax(72px, 32%) minmax(0,1fr); }

/* Retain the official marks. Only known monochrome wordmarks switch ink. */
.brand-strip .brand-name .catalog-mark, .brand-name .store-logo-plate,
.brand-strip.apex-photo-strip .apex-mark {
    background: transparent;
    border: 0;
    padding: 3px;
}
.brand-strip .store-logo-plate img { display: block; }
[data-theme="dark"] .store-logo-plate img,
[data-theme="dark"] .catalog-mark img:is([src$="/dji-usa.png"], [src$="/xtool.svg"], [src$="/native-funded-trading-plus.webp"], [src$="/native-the5ers.png"]) {
    filter: brightness(0) invert(1);
}
[data-theme="dark"] .catalog-mark img[src$="/rosaholics.svg"] { filter: brightness(0) invert(.94); }
[data-theme="dark"] .catalog-mark img[src$="/dr-jockers.png"] { filter: brightness(2); }
[data-theme="dark"] .catalog-mark img[src$="/native-fundingpips.svg"] { filter: brightness(3.2); }
[data-theme="dark"] .catalog-mark img[src$="/native-fundednext-futures.png"] { filter: invert(1) hue-rotate(180deg); }
[data-theme="light"] .catalog-mark img:is([src$="/ftmo.png"], [src$="/topstep.webp"], [src$="/native-blue-guardian-futures.png"], [src$="/native-take-profit-trader.svg"]),
[data-theme="light"] .brand-strip.apex-photo-strip .apex-mark { filter: brightness(0); }
[data-theme="light"] .catalog-mark img[src$="/native-e8-futures.png"] { filter: brightness(.42); }

/* The two-tone marks have separate lettering and symbols. Switch only the ink. */
.catalog-mark { position: relative; }
[data-theme="dark"] .catalog-mark:has(img[src$="/sihoo.png"]) {
    --wordmark: url("/marketgrid-logos/sihoo.png");
    --ink-start: 18%;
}
[data-theme="light"] :is(.catalog-mark,.catalog-photo):has(img[src$="/chartprime.svg"]) {
    --wordmark: url("/marketgrid-logos/chartprime.svg");
    --ink-start: 24%;
}
[data-theme="dark"] .catalog-mark:has(img[src$="/sihoo.png"])::after,
[data-theme="light"] :is(.catalog-mark,.catalog-photo):has(img[src$="/chartprime.svg"])::after {
    content: "";
    position: absolute;
    inset: 3px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent var(--ink-start), var(--heading) var(--ink-start));
    mask: var(--wordmark) center / contain no-repeat;
}
[data-theme="light"] .catalog-photo:has(img[src$="/chartprime.svg"])::after { inset: 8px 15%; }
[data-theme="light"] .catalog-workstation, [data-theme="light"] .apex-workstation {
    mask-image: linear-gradient(90deg, transparent, #000 34%);
}
@media(max-width:680px) {
    .catalog-lineup a { display: block; padding: 0; }
    [data-theme="light"] :is(.catalog-workstation, .apex-workstation) { mask-image: linear-gradient(180deg, transparent, #000 42%); }
}
