/* ============================================================================
   Caden Scoots - a private theme (2026-11-10), written for one creator: offered to
   the partner with the handle CADEN and nobody else (PartnerTheme.Owner).

   Their own site (a Shopify "Savor" store) is the brief: a near-black bar with the
   hand-lettered white logo, a white page, one royal blue for everything you press,
   Montserrat everywhere with the headlines in its heaviest weight and all capitals,
   square corners on buttons and pictures alike, and bands that run edge to edge -
   a dark photo, then plain white, then dark again. Our modules wear that: a module's
   Background (Plain / Dark / Photo, home.css) is what gives the page its rhythm, and
   this file makes the Hero and every Dark or Photo band in a one-column row run the
   full width of the window, the way theirs do.

   Light-first, so :root is the light palette and dark is the override.
   ========================================================================== */

:root {
    --wx-color-scheme: light;

    --wx-ground: #FFFFFF;
    --wx-ground-deep: #F2F2F2;
    --wx-surface: #FFFFFF;
    --wx-surface-2: #F3F3F3;
    --wx-line: #D9D9D9;
    --wx-line-soft: #EAEAEA;

    --wx-ink: #000000;
    /* A home module set to a Dark or Photo background - see ThemeTokens.BandDark.
       Their header and footer's own near-black. */
    --wx-band-dark: #1B1B1B;
    --wx-band-dark-ink: #FFFFFF;
    --wx-muted: #474747;
    --wx-muted-dim: #767676;

    /* Their royal blue: every button, the announcement bar, the shop's filter bar. */
    --wx-signal: #013A80;
    --wx-signal-ink: #FFFFFF;
    --wx-signal-soft: rgba(1, 58, 128, 0.09);

    --wx-coin: #013A80;
    --wx-coin-ink: #FFFFFF;
    --wx-coin-soft: rgba(1, 58, 128, 0.1);
    --wx-good: #1E7A46;
    --wx-warn: #9A6700;
    --wx-bad: #C4231B;

    /* Square everything - buttons, pictures, chips. */
    --wx-radius: 0px;
    --wx-radius-sm: 0px;
    --wx-radius-control: 0px;
    --wx-radius-pill: 0px;
    --wx-pad: 22px;
    --wx-shell: 1280px;

    --wx-shadow: none;
    --wx-elev-1: 0 1px 2px rgba(0, 0, 0, 0.14);
    --wx-elev-2: 0 14px 34px rgba(0, 0, 0, 0.3);

    --wx-on-image: #FFFFFF;
    --wx-scrim: rgba(0, 0, 0, 0.5);
    --wx-patron: #8b5cf6;
    --wx-patron-soft: rgba(139, 92, 246, 0.16);

    /* The Spin to Win wheel in his colors: royal blue and black wedges, the top prize
       his bright blue, nothing a light gray, white figures, a blue rim, silver hub. */
    --wx-wheel-1: #013A80;
    --wx-wheel-2: #1B1B1B;
    --wx-wheel-top: #4C86DA;
    --wx-wheel-none: #C9CDD3;
    --wx-wheel-ink: #FFFFFF;
    --wx-wheel-rim: #013A80;
    --wx-wheel-spoke: #0E0E0E;
    --wx-wheel-hub: #C9CDD3;

    --wx-font-display: "Montserrat", "Arial Black", system-ui, sans-serif;
    --wx-font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
    --wx-font-data: "Roboto Mono", ui-monospace, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --wx-color-scheme: dark;

        --wx-ground: #0F0F0F;
        --wx-ground-deep: #080808;
        --wx-surface: #161616;
        --wx-surface-2: #1F1F1F;
        --wx-line: #2E2E2E;
        --wx-line-soft: #242424;

        --wx-ink: #FFFFFF;
        /* A home module set to a Dark or Photo background - see ThemeTokens.BandDark. */
        --wx-band-dark: #000000;
        --wx-band-dark-ink: #FFFFFF;
        --wx-muted: #B4B4B4;
        --wx-muted-dim: #808080;

        /* The royal blue is too dark to press on black; a lighter cut of it. */
        --wx-signal: #4C86DA;
        --wx-signal-ink: #FFFFFF;
        --wx-signal-soft: rgba(76, 134, 218, 0.14);

        --wx-coin: #6E9FE6;
        --wx-coin-ink: #08111F;
        --wx-good: #45B57A;
        --wx-bad: #EE6A5F;
    }
}

:root[data-theme="dark"] {
    --wx-color-scheme: dark;

    --wx-ground: #0F0F0F;
    --wx-ground-deep: #080808;
    --wx-surface: #161616;
    --wx-surface-2: #1F1F1F;
    --wx-line: #2E2E2E;
    --wx-line-soft: #242424;

    --wx-ink: #FFFFFF;
    /* A home module set to a Dark or Photo background - see ThemeTokens.BandDark. */
    --wx-band-dark: #000000;
    --wx-band-dark-ink: #FFFFFF;
    --wx-muted: #B4B4B4;
    --wx-muted-dim: #808080;

    --wx-signal: #4C86DA;
    --wx-signal-ink: #FFFFFF;
    --wx-signal-soft: rgba(76, 134, 218, 0.14);

    --wx-coin: #6E9FE6;
    --wx-coin-ink: #08111F;
    --wx-good: #45B57A;
    --wx-bad: #EE6A5F;
}

/* ---- the lettering --------------------------------------------------------------
   Montserrat throughout; headlines in Black (900), all capitals, set tight. */

h1, h2, h3,
.wx-band-head h2,
.wx-hero-tag,
.wx-hero-name,
.display-header {
    font-family: var(--wx-font-display);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.01em;
}

/* Buttons: square, capitals, the blue. */
.wx-btn,
.btn,
button.wx-btn {
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}

/* ---- the bar --------------------------------------------------------------------
   Near-black, the white logo on the left, the links in capitals in the middle, the
   bag and the account on the right. */

header.site-header {
    background: var(--wx-band-dark);
    border-bottom: none;
    color: var(--wx-band-dark-ink);
}

header.site-header nav ul li a {
    color: var(--wx-band-dark-ink);
    text-transform: uppercase;
    font-weight: 800;
    font-size: 0.86rem;
    letter-spacing: 0.02em;
    border-radius: 0;
    padding: 6px 2px;
}

header.site-header nav ul li a:hover,
header.site-header nav ul li a.active {
    background: transparent;
    color: var(--wx-band-dark-ink);
    box-shadow: inset 0 -2px 0 var(--wx-band-dark-ink);
}

header.site-header nav ul li a.is-join {
    background: var(--wx-signal);
    color: var(--wx-signal-ink);
    padding: 6px 12px;
    box-shadow: none;
}

header.site-header nav ul li.account-link a,
header.site-header nav ul li.account-menu summary { color: var(--wx-band-dark-ink); }

/* The account icon on hover, or with its menu open: no blue square behind it - the
   circle turns the header's light blue and the person in it white (Frank, 2026-11-10).
   The icon is a circle with the person cut out, so the white is a disc behind it,
   showing through the cut. */
header.site-header nav ul li.account-menu summary:hover,
header.site-header nav ul li.account-menu details[open] summary,
header.site-header nav ul li.account-link a:hover {
    background: transparent;
    box-shadow: none;
}

header.site-header nav ul li.account-menu summary:hover i,
header.site-header nav ul li.account-menu details[open] summary i,
header.site-header nav ul li.account-link a:hover i {
    color: #8DB4F0;
    border-radius: 50%;
    background: radial-gradient(circle, #FFFFFF 0 62%, transparent 63%);
}

/* The account dropdown hangs off the bar on a light panel, so its links take the page's
   ink, not the bar's white (Frank, 2026-11-10: the names were white on white). */
header.site-header nav ul li.account-menu .account-menu-list a {
    color: var(--wx-ink);
    padding: 9px 12px;
    box-shadow: none;
}

header.site-header nav ul li.account-menu .account-menu-list a:hover,
header.site-header nav ul li.account-menu .account-menu-list a.active {
    background: var(--wx-surface-2);
    color: var(--wx-ink);
    box-shadow: none;
}

@media (min-width: 900px) {
    header.site-header .container { padding: 16px 28px; }
    header.site-header .logo img { max-height: 40px; }

    /* The section links centered between the logo and the icons. */
    header.site-header nav { text-align: left; }
    header.site-header nav ul { display: flex; width: 100%; gap: 26px; align-items: center; }
    header.site-header nav ul li.nav-section:first-child { margin-left: auto; }
    /* From the last section link, not the bag: the bag hides while the cart is empty. */
    header.site-header nav ul li.nav-section:not(:has(~ li.nav-section)) { margin-right: auto; }
}

/* ---- the page ------------------------------------------------------------------- */

main {
    background: var(--wx-ground);
    border: none;
    box-shadow: none;
}

footer {
    background: var(--wx-band-dark);
    color: var(--wx-band-dark-ink);
    padding: 36px 20px;
}

footer nav ul li a {
    color: var(--wx-band-dark-ink);
    text-transform: uppercase;
    font-size: 0.8rem;
    font-weight: 700;
}

footer nav ul li a:hover,
footer nav ul li a.active {
    background: transparent;
    color: var(--wx-band-dark-ink);
    text-decoration: underline;
    text-underline-offset: 4px;
}

footer .container > p { color: color-mix(in srgb, var(--wx-band-dark-ink) 70%, var(--wx-band-dark)); }

/* The footer is a dark band too, so what sits in it (the app's badges and code) takes
   the band's colors rather than a white box. */
footer {
    --wx-surface: color-mix(in srgb, var(--wx-band-dark-ink) 7%, var(--wx-band-dark));
    --wx-surface-2: color-mix(in srgb, var(--wx-band-dark-ink) 12%, var(--wx-band-dark));
    --wx-line: color-mix(in srgb, var(--wx-band-dark-ink) 20%, var(--wx-band-dark));
    --wx-ink: var(--wx-band-dark-ink);
    --wx-muted: color-mix(in srgb, var(--wx-band-dark-ink) 70%, var(--wx-band-dark));
}

/* ---- the home page ---------------------------------------------------------------
   Edge to edge on the website: the hero and every Dark or Photo band in a one-column
   row reach both sides of the window, their contents staying on the page's column.
   A band in a narrower column keeps to it. */

html { overflow-x: clip; }

.wx-home.is-wide .wx-layout-row[data-shape="one"] .wx-mod:is([data-module="Hero"], [data-bg="dark"], [data-bg="photo"]) {
    margin-inline: calc(50% - 50vw);
    padding-inline: calc(50vw - 50%);
    border-radius: 0;
}

/* The hero's picture is the band itself: it reaches the edges, with nothing around it. */
.wx-home.is-wide .wx-layout-row[data-shape="one"] .wx-mod[data-module="Hero"] { padding-inline: 0; }

/* Two dark bands in a row meet, the way theirs do, instead of leaving a strip of white
   page between them - a hero (its photo edge to edge) counting as one. */
.wx-home.is-wide .wx-layout-row:has(> .wx-slot > .wx-mod:is([data-bg="dark"], [data-bg="photo"], [data-module="Hero"]))
    + .wx-layout-row:has(> .wx-slot > .wx-mod:is([data-bg="dark"], [data-bg="photo"], [data-module="Hero"])) {
    margin-top: calc(var(--wx-mod-gap) * -1);
}

/* On a dark band the royal blue is too dark to read as text; labels take a lighter cut
   of it. Buttons keep the blue - white on it reads. */
.wx-mod:is([data-bg="dark"], [data-bg="photo"]) {
    --wx-coin: #8DB4F0;
    --wx-coin-soft: rgba(141, 180, 240, 0.16);
}

/* The labels and icons that are blue on the page. */
.wx-mod:is([data-bg="dark"], [data-bg="photo"]) :is(.wx-earn-k, .wx-perks i) { color: var(--wx-coin); }

/* A page that ends on a dark band runs straight into the footer. */
main:has(> .wx-home > .wx-layout-row:last-child .wx-mod:is([data-bg="dark"], [data-bg="photo"])) { padding-bottom: 0; margin-bottom: 0; }

/* Fewer, larger cards in a full-width row: four across, not seven thumbnails. */
.wx-home.is-wide .wx-layout-row[data-shape="one"] :is(.wx-posts, .wx-tiles) {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 28px 20px;
}

/* The dark bands need room above and below; their contents keep the page's width. */
.wx-home.is-wide .wx-mod:is([data-bg="dark"], [data-bg="photo"]) {
    padding-block: 56px;
}

.wx-home.is-wide:not(.is-page) .wx-layout-row:first-child:has(.wx-hero, .wx-mod[data-bg="dark"], .wx-mod[data-bg="photo"]) { margin-top: -28px; }

/* Section headings: large black capitals, the link to the rest a blue button. */
.wx-band { gap: 26px; }

.wx-band-head {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    align-items: center;
    color: var(--wx-ink);
}

.wx-band-head h2 {
    font-size: clamp(1.6rem, 3.4vw, 2.7rem);
    line-height: 1.02;
    white-space: normal;
}

.wx-band-more {
    background: var(--wx-signal);
    color: var(--wx-signal-ink);
    opacity: 1;
    padding: 11px 22px;
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none;
}

.wx-band-more:hover {
    color: var(--wx-signal-ink);
    text-decoration: none;
    filter: brightness(1.15);
}

.wx-band-aside {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--wx-muted);
}

/* The hero: their full-bleed photo with the headline huge, white and centered. */
.wx-hero {
    border-radius: 0;
    min-height: 420px;
    place-items: center;
    text-align: center;
}

.wx-hero.has-image .wx-hero-in {
    background: none;
    max-width: 62rem;
}

.wx-hero.has-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.45));
    pointer-events: none;
}

.wx-hero .wx-hero-in { position: relative; z-index: 1; }

.wx-hero-tag,
.wx-hero.has-image .wx-hero-tag {
    font-size: clamp(2.6rem, 6.4vw, 5.2rem);
    line-height: 0.98;
    color: var(--wx-on-image);
    max-width: 14ch;
    margin-inline: auto;
}

.wx-hero:not(.has-image) .wx-hero-tag { color: var(--wx-ink); }

@media (min-width: 900px) {
    .wx-home.is-wide .wx-mod[data-module="Hero"] .wx-hero { min-height: 600px; }
}

/* Cards: no boxes - the picture square on a light gray, the name in capitals under it. */
.wx-band .product-grid .product-card,
.wx-post,
.wx-tile,
.wx-gcard,
.wx-winner,
.wx-card.gw-card,
.games-card,
.product-grid .product-card {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.wx-band .product-grid .product-image,
.wx-post-shot,
.wx-tile-shot,
.wx-gcard-shot,
.wx-pin-shot,
.gw-card-media,
.games-card-media,
.feed-post-media {
    border-radius: 0;
    background: var(--wx-surface-2);
}

.wx-band .product-grid .product-image img,
.product-grid .product-image img { border-radius: 0; margin: 0; }

.wx-band .product-grid .product-info,
.wx-post-in,
.wx-tile-in,
.wx-gcard-in { padding: 12px 0 0; }

.wx-post-head { padding-inline: 0; }

:is(.wx-band .product-grid .name, .product-grid .name, .wx-tile-in h3, .wx-post-in h3, .gw-card-name, .games-card-title) {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0;
}

.wx-post-in h3 { font-size: 0.9rem; }

:is(.wx-band .product-card, .wx-post, .wx-tile, .wx-gcard, .wx-gfeature):hover :is(.product-image, .wx-post-shot, .wx-tile-shot, .wx-gcard-shot, .wx-pin-shot) img {
    filter: brightness(0.92);
}

/* The giveaway, and anything pinned: their "photo beside text" band. */
.wx-pin,
a.wx-gfeature {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    gap: 40px;
}

a.wx-gfeature:hover,
a.wx-gfeature:focus-visible { border-color: transparent; }

.wx-pin-in { padding: 0; align-content: center; }

.wx-pin-in h2 {
    font-size: clamp(1.9rem, 3.6vw, 3rem);
    line-height: 1;
}

.wx-pin-flag {
    background: var(--wx-signal);
    color: var(--wx-signal-ink);
    border-radius: 0;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.04em;
}

/* Join, the balances, the app: on the band, not in a box. */
.wx-points,
.wx-promo,
.wx-textblock {
    border: none;
    border-radius: 0;
    background: var(--wx-surface-2);
}

.wx-mod:is([data-bg="dark"], [data-bg="photo"]) .wx-points { background: transparent; padding: 0; }

.wx-earn-k { text-transform: uppercase; font-weight: 800; }

/* ---- the other pages, and the app --------------------------------------------------
   The store, giveaways, streams and games pages, and the same screens in the app and
   the admin's phone preview - which load this file too. */

.display-header {
    background: transparent;
    border: none;
    color: var(--wx-ink);
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    padding: 18px 0 8px;
}

/* Filters: capitals, square, the one you're on in blue. */
.wx-chip {
    border-radius: 0;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.03em;
}

.wx-chip.is-selected {
    background: var(--wx-signal);
    border-color: var(--wx-signal);
    color: var(--wx-signal-ink);
}

.wx-caption.gw-section,
.home-heading {
    font-family: var(--wx-font-display);
    font-weight: 900;
    text-transform: uppercase;
    color: var(--wx-ink);
}

/* The app's own bar wears the website's: near-black, the white logo on it. */
.chrome-top {
    background: var(--wx-band-dark);
    color: var(--wx-band-dark-ink);
    border-bottom: none;
}

.chrome-top :is(a, button, .wx-icon-btn) { color: var(--wx-band-dark-ink); }

/* ---- one product, one giveaway ----------------------------------------------------- */

:is(.product-image-gallery .carousel, .gw-detail-media) { border-radius: 0; }

:is(.product-details-section .product-name, .product-details-section .product-name h3, .gw-detail-name) {
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.01em;
}

.gw-enter { border-radius: 0; }

/* ---- the announcement bar, the hero's button, the scrolling words ------------------ */

.wx-announce { font-size: 0.82rem; letter-spacing: 0.04em; font-weight: 800; }

.wx-hero-line,
.wx-hero.has-image .wx-hero-line {
    text-transform: uppercase;
    font-weight: 500;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
    max-width: 30rem;
    margin-inline: auto;
}

.wx-hero-btn { padding: 14px 28px; font-size: 0.95rem; }

/* Their LIMITED STOCK! strip: white Black capitals on a dark band. */
.wx-marquee { padding: 22px 0; }
.wx-marquee-word { font-weight: 900; font-size: clamp(1.4rem, 2.6vw, 2.1rem); letter-spacing: -0.01em; }

.wx-home.is-wide .wx-mod[data-module="Marquee"]:is([data-bg="dark"], [data-bg="photo"]) { padding-block: 0; }

/* The words run from one side of the window to the other, not just across the column. */
.wx-home.is-wide .wx-layout-row[data-shape="one"] .wx-mod[data-module="Marquee"] { padding-inline: 0; }

/* A strip in a dark band touching the hero or a band above it, as theirs does. */
.wx-home.is-wide .wx-layout-row:has(> .wx-slot > .wx-mod[data-module="Hero"])
    + .wx-layout-row:has(> .wx-slot > .wx-mod[data-module="Marquee"]) {
    margin-top: calc(var(--wx-mod-gap) * -1);
}

/* ---- his pages and questions ------------------------------------------------------ */

.wx-page-title { font-weight: 900; text-transform: uppercase; font-size: clamp(2rem, 4.6vw, 3.4rem); }

.wx-question summary {
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.02em;
    font-size: 0.95rem;
}

.wx-questions { border-top-color: var(--wx-ink); }
.wx-question { border-bottom-color: var(--wx-ink); }

/* Footer: the email in capitals, the icons white, the line between dim. */
footer .wx-foot-more { border-bottom-color: color-mix(in srgb, var(--wx-band-dark-ink) 18%, var(--wx-band-dark)); }
.wx-foot-email { text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.03em; }
footer ul.wx-socials a:hover { color: var(--wx-band-dark-ink); opacity: 0.75; }

/* The balances in the black bar: his royal blue is too dark to read on it, so the bar's
   points and entries take a lighter cut of it, as a dark band's labels do. */
header.site-header,
.chrome-top {
    --wx-coin: #8DB4F0;
    --wx-coin-soft: rgba(141, 180, 240, 0.16);
}

/* The store: room between the category buttons and the items under them. */
.store-rail { margin-bottom: 22px; }

/* His logo in place of ours (Frank, 2026-11-10): on the default fan pictures, over the
   same eight preset colors; on the Scratch & Win covering and coin; as the watermark on
   the Higher or Lower cards; and on a games-feed win with no face. Cut square from his
   white logo, with a navy copy for light grounds (cadenscoots/). "html" in front so these
   outrank the game sheets whichever loads last. */
html .wx-avatar-mark {
    background-image: url("cadenscoots/mark-white.png"), var(--wx-preset);
    background-position: center, center;
    background-size: 80%, cover;
}

html .wx-house-mark,
html .hl-mark {
    background-image: url("cadenscoots/mark-navy.png");
}

html .sb-coin-face {
    width: 80%;
    height: 80%;
    background-image: url("cadenscoots/mark-navy.png");
}

html .gwf-face.is-default {
    content: url("cadenscoots/mark-white.png");
    padding: 4px;
    background: var(--wx-band-dark, #0E0E0E);
}

/* The face-down deck in Higher or Lower carries his white logo, so its back is dark. */
html .hl-card.is-deck {
    background: var(--wx-band-dark, #1B1B1B);
    border-color: var(--wx-band-dark, #1B1B1B);
}

/* The giveaway band's smaller giveaways, under the Grand (Frank, 2026-11-10): his cards
   have no boxes, so these floated. Here they are tickets - a light card inside a thin
   blue edge, the days left as a small tag - plainly the lesser draws beside the big one.
   A thin solid line, not dashes (Frank, 2026-11-10). */
.wx-home-gw .wx-card.gw-card {
    padding: 10px;
    background: var(--wx-surface-2);
    border: 1px solid var(--wx-signal);
    border-radius: 0;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.wx-home-gw .wx-card.gw-card:hover {
    background: var(--wx-surface);
    box-shadow: inset 0 0 0 1px var(--wx-signal);
}

.wx-home-gw .gw-card > :last-child { padding-bottom: 0; }

.wx-home-gw .gw-timing.is-open {
    justify-self: start;
    align-self: start;
    width: max-content;
    padding: 3px 8px;
    background: var(--wx-signal);
    color: var(--wx-signal-ink);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Over a photo, the Grand's words sit on a dark panel so they read whatever is behind
   them, and the weekly cards' line is the header's light blue - his navy disappears on
   dark (Frank, 2026-11-10). */
.wx-mod[data-bg="photo"] .wx-gfeature {
    background: rgba(14, 14, 14, 0.86);
}

.wx-mod[data-bg="photo"] .wx-gfeature .wx-pin-in {
    padding: 24px 28px;
}

/* White cards, wherever they sit, with the page's dark words on them - and the prize
   picture whole, at its own 16:9, so the grill beside the prize is not cut off
   (Frank, 2026-11-10). Colors spelled out: inside a dark or photo band the tokens
   are the band's light-on-dark ones. */
.wx-home-gw .wx-card.gw-card,
.wx-home-gw .wx-card.gw-card:hover {
    background: #FFFFFF;
    color: #0E0E0E;
}

.wx-home-gw .gw-card {
    grid-template-columns: 168px minmax(0, 1fr);
}

.wx-home-gw .gw-card-media {
    align-self: start;
    min-height: 0;
    aspect-ratio: 16 / 9;
    background: #F2F2F2;
}

.wx-home-gw .gw-card-media img { object-fit: contain; }

.wx-home-gw .gw-card-name { color: #0E0E0E; }
.wx-home-gw .gw-card-prize { color: #4A4A4A; }

/* Weekly Giveaways sits close over its cards: 18px, half what his band's gap gave it. */
.wx-gw-others-h + .wx-home-gw { margin-top: -8px; }

/* The streak and the balances: one band in his blue, edge to edge, so the row reads as
   its own thing between the white store band and the black stream band (Frank,
   2026-11-10). The palette inside is mixed for the blue the way a dark band's is, and the
   brand blue that would vanish on it - the day count, the lit dots, the numbers - takes
   the header's light blue. */
.wx-home .wx-layout-row:has(.wx-mod:is([data-module="Streak"], [data-module="Points"])) {
    --wx-band-blue: #013A80;
    --wx-ground: var(--wx-band-blue);
    --wx-surface: color-mix(in srgb, #FFFFFF 9%, var(--wx-band-blue));
    --wx-surface-2: color-mix(in srgb, #FFFFFF 14%, var(--wx-band-blue));
    --wx-line: color-mix(in srgb, #FFFFFF 26%, var(--wx-band-blue));
    --wx-line-soft: color-mix(in srgb, #FFFFFF 16%, var(--wx-band-blue));
    --wx-ink: #FFFFFF;
    --wx-muted: color-mix(in srgb, #FFFFFF 80%, var(--wx-band-blue));
    --wx-muted-dim: color-mix(in srgb, #FFFFFF 60%, var(--wx-band-blue));
    --wx-signal: #8DB4F0;
    --wx-signal-ink: #08111F;
    --wx-coin: #8DB4F0;
    --wx-coin-soft: rgba(141, 180, 240, 0.16);
    color-scheme: dark;

    padding: 40px 20px;
    background: var(--wx-band-blue);
    color: var(--wx-ink);
}

.wx-home .wx-layout-row:has(.wx-mod:is([data-module="Streak"], [data-module="Points"])) :is(.wx-band-head h2, .wx-earn-k, .wx-perks i, .wx-perks b) {
    color: var(--wx-ink);
}

.wx-home .wx-layout-row:has(.wx-mod:is([data-module="Streak"], [data-module="Points"])) .wx-points {
    background: transparent;
    padding: 0;
}

.wx-home .wx-layout-row:has(.wx-mod:is([data-module="Streak"], [data-module="Points"])) .wx-btn {
    background: #FFFFFF;
    color: var(--wx-band-blue);
}

.wx-home.is-wide .wx-layout-row:has(.wx-mod:is([data-module="Streak"], [data-module="Points"])) {
    margin-inline: calc(50% - 50vw);
    padding: 56px calc(50vw - 50%);
}

/* It meets a dark band after it the way two dark bands meet. */
.wx-home.is-wide .wx-layout-row:has(.wx-mod:is([data-module="Streak"], [data-module="Points"]))
    + .wx-layout-row:has(> .wx-slot > .wx-mod:is([data-bg="dark"], [data-bg="photo"], [data-module="Hero"])) {
    margin-top: calc(var(--wx-mod-gap) * -1);
}

.wx-home .wx-layout-row:has(.wx-mod[data-module="Streak"]) .vs-done { color: #FFFFFF; }

/* The streak and the balances the same height, side by side (Frank, 2026-11-10): each
   fills its half, and the three counts stack down the right, each with its icon, sharing
   the height between them. */
.wx-home.is-wide .wx-layout-row:has(.wx-mod[data-module="Streak"]):has(.wx-mod[data-module="Points"]) {
    align-items: stretch;
}

.wx-home.is-wide .wx-layout-row:has(.wx-mod[data-module="Streak"]):has(.wx-mod[data-module="Points"]) > .wx-slot,
.wx-home.is-wide .wx-layout-row:has(.wx-mod[data-module="Streak"]):has(.wx-mod[data-module="Points"]) .wx-mod,
.wx-home.is-wide .wx-layout-row:has(.wx-mod[data-module="Streak"]):has(.wx-mod[data-module="Points"]) .wx-band {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.wx-home.is-wide .wx-layout-row:has(.wx-mod[data-module="Streak"]):has(.wx-mod[data-module="Points"]) :is(.vs, .wx-points, .wx-tally) {
    flex: 1 1 auto;
}

.wx-home .wx-layout-row:has(.wx-mod[data-module="Points"]) .wx-tally {
    flex-direction: column;
    flex-wrap: nowrap;
}

.wx-home .wx-layout-row:has(.wx-mod[data-module="Points"]) .wx-tally-cell {
    flex: 1 1 0;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-content: center;
    column-gap: 14px;
}

.wx-home .wx-layout-row:has(.wx-mod[data-module="Points"]) .wx-tally-i {
    display: block;
    grid-row: 1 / span 2;
    align-self: center;
    justify-self: center;
    font-size: 1.5rem;
    color: var(--wx-coin);
}

.wx-home .wx-layout-row:has(.wx-mod[data-module="Points"]) .wx-tally-n { grid-column: 2; }
.wx-home .wx-layout-row:has(.wx-mod[data-module="Points"]) .wx-tally-l { grid-column: 2; }

/* The streak spread down its half: the count at the top, the days in the middle, what it
   has earned at the foot - level with the three counts beside it. */
.wx-home.is-wide .wx-layout-row:has(.wx-mod[data-module="Streak"]):has(.wx-mod[data-module="Points"]) .vs {
    align-content: space-between;
    padding: 20px 22px;
}

.wx-home .wx-layout-row:has(.wx-mod[data-module="Streak"]) .vs-dot { max-width: 42px; }

/* A store band of one product, across the page, says what it is: the item's own words
   under its name, over the price (Frank, 2026-11-10 - Finish Your Build). A tall band
   hides them so many cards fit; one card has the room. */
.wx-home.is-wide .wx-layout-row[data-shape="one"] .wx-mod[data-module="Store"] .product-grid:has(> .product-card:only-child) .product-info .desc {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    white-space: pre-line;
    max-width: 60ch;
    margin-top: 8px;
    line-height: 1.5;
}

/* How to Earn on a card of its own in the blue band, a lighter cut of the blue. */
.wx-home .wx-layout-row:has(.wx-mod[data-module="Points"]) .wx-earn-wrap {
    padding: 20px 22px;
    background: var(--wx-surface-2);
    border: 1px solid var(--wx-line);
}

/* Join Now stands a little apart from the list above it. */
.wx-points-cta .wx-btn { margin-top: 14px; }

/* A store band on a photo: its one product on a dark panel, so the words read whatever
   is behind them - as the Grand's do on the giveaways (Frank, 2026-11-10). */
.wx-mod[data-bg="photo"] .product-grid:has(> .product-card:only-child) > .product-card {
    padding: 20px;
    background: rgba(14, 14, 14, 0.86);
}

.wx-mod[data-bg="photo"] .product-grid .product-info .desc { color: #D6D6D6; }

/* And meets a dark or photo band before it, with no strip of white page between. */
.wx-home.is-wide .wx-layout-row:has(> .wx-slot > .wx-mod:is([data-bg="dark"], [data-bg="photo"], [data-module="Hero"]))
    + .wx-layout-row:has(.wx-mod:is([data-module="Streak"], [data-module="Points"])) {
    margin-top: calc(var(--wx-mod-gap) * -1);
}