/* ============================================================================
   Partner storefront - structure.

   This file lays the site out and owns no colors, no typefaces and no corner
   radii of its own. Every one of those comes from a token in the theme
   contract (WinWrxCore/Models/PartnerTheme.cs), which a theme stylesheet sets
   and a partner then overrides. Put a literal color in here and it becomes the
   one thing a partner cannot change, so don't.

   Load order in Partner/Layout/MainLayout.razor:
       base.css  ->  themes/<key>.css  ->  inline partner overrides
   ========================================================================== */

/* ---- reset ------------------------------------------------------------- */

body, h1, h2, h3, h4, h5, p, ul, li, a {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--wx-font-body);
    line-height: 1.6;
    color: var(--wx-ink);
    background-color: var(--wx-ground);
    margin: 0;
    /* Themes are designed as a pair; telling the browser which one is showing
       gets form controls and scrollbars to match rather than fight. */
    color-scheme: var(--wx-color-scheme, light);

    /* A column the height of the window at least, so on a short page the footer sits
       at the foot of the window rather than halfway up it (see footer). */
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

h1, h2, h3, h4, h5 {
    font-family: var(--wx-font-display);
    color: var(--wx-ink);
    text-wrap: balance;
}

img {
    max-width: 100%;
}

/* ---- shell ------------------------------------------------------------- */

/* The site's own header, by class. A bare `header` here also dressed every other
   header on the page - a game's title row got the site's border and its z-index of
   1000, drew a second line under the first and sat over the account menu. */
header.site-header {
    background: var(--wx-surface);
    border-bottom: 1px solid var(--wx-line);
    z-index: 1000;
}

header .container,
footer .container {
    max-width: var(--wx-shell);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header .logo {
    flex: 0 0 auto;
    text-align: left;
    padding: 5px 0;
}

header .logo img {
    max-height: 50px;
    display: block;
    margin: 0;
}

header nav {
    flex: 1;
    text-align: center;
}

header nav ul,
footer nav ul {
    list-style: none;
    display: inline-flex;
    gap: 20px;
    margin: 0;
    padding: 0;
}

header nav ul li a {
    text-decoration: none;
    color: var(--wx-ink);
    font-weight: bold;
    padding: 5px 10px;
    border-radius: var(--wx-radius);
    transition: background 0.3s, color 0.3s;
}

header nav ul li a:hover,
header nav ul li a.active {
    background: var(--wx-signal);
    color: var(--wx-signal-ink);
    text-decoration: none;
}

/* A guest's Join: the one link that is a reminder, so it wears the signal color
   all the time rather than only on hover. See MainLayout. */
header nav ul li a.is-join {
    background: var(--wx-signal);
    color: var(--wx-signal-ink);
}

main {
    padding: 10px 20px 20px;
    background: var(--wx-surface);
    margin: 20px auto;
    /* A flex item with auto margins shrinks to its content; this keeps the frame the
       shell's width. */
    width: 100%;
    box-sizing: border-box;
    max-width: var(--wx-shell);
    box-shadow: var(--wx-shadow, 0 2px 5px rgba(0, 0, 0, 0.1));
    border-radius: var(--wx-radius);
}

footer {
    background: var(--wx-ground-deep);
    color: var(--wx-ink);
    text-align: center;
    padding: 15px 20px;
    /* Pushed to the foot of the window when the page is shorter than it; main's own
       bottom margin is the gap otherwise. */
    margin-top: auto;
}

footer nav ul li a {
    text-decoration: none;
    color: var(--wx-ink);
    font-weight: bold;
    padding: 5px 10px;
    border-radius: var(--wx-radius);
    transition: background 0.3s, color 0.3s;
}

footer nav ul li a:hover,
footer nav ul li a.active {
    background: var(--wx-signal);
    color: var(--wx-signal-ink);
    text-decoration: none;
}

/* A link is one pill, never two lines of one. */
footer nav ul li a { display: inline-block; white-space: nowrap; }

/* On a phone the links and the copyright line stack, centered, instead of sharing a row
   that squeezed each link onto two lines (2026-10-20). */
@media (max-width: 699px) {
    footer .container {
        flex-direction: column;
        gap: 10px;
    }

    footer nav ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px 4px;
    }

    footer .container > p {
        margin: 0;
        font-size: 0.85rem;
        color: var(--wx-muted);
        line-height: 1.5;
    }
}

/* ---- links and buttons ------------------------------------------------- */

a {
    color: var(--wx-muted);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--wx-ink);
    text-decoration: underline;
}

a:active,
a:focus {
    color: var(--wx-muted-dim);
}

/* Keyboard focus stays visible everywhere; a theme may restyle the ring
   through the tokens but cannot remove it. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--wx-signal);
    outline-offset: 2px;
}

/* The website's own buttons - .btn, and a bare <button> with no class of its own.
   A button that has a class is a shared component's, and that component owns its
   look (ui.css): styling every <button> here repainted the app's rows, cards and links
   as filled buttons, and every theme's case and letter-spacing came along with it. */
.btn, button:not([class]) {
    background-color: var(--wx-signal);
    color: var(--wx-signal-ink);
    font-family: var(--wx-font-body);
    font-weight: bold;
    padding: 10px 20px;
    border: none;
    border-radius: var(--wx-radius);
    cursor: pointer;
    transition: background 0.3s, color 0.3s, transform 0.2s;
}

.btn:hover, button:not([class]):hover {
    background-color: var(--wx-signal);
    color: var(--wx-signal-ink);
    filter: brightness(1.1);
}

.btn:active, button:not([class]):active {
    transform: scale(0.99);
    filter: none;
}

/* Disabled is the button's own look at half strength - never a different color.
   Repainting it in the second surface color with dim text made a disabled Save or
   Continue nearly invisible against a dark theme, and it outranked every button
   class's own look. */
button:disabled, .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    filter: none;
    transform: none;
}

/* ---- product grid ------------------------------------------------------ */

/* The checkout pages are a stack of collapsible panels, not a grid of
   products. They used to say class="product-grid" to borrow the section
   heading, which was harmless only while that grid was scoped to an ancestor
   they did not have - the moment it was not, the whole page laid itself out in
   250px columns. */
.checkout-panels {
    display: grid;
    /* One column that can never be wider than the page. Left to size itself, the column
       grew to its widest child's natural width - Profile's form made it 580px on a 390px
       phone and the whole page scrolled sideways. */
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
}

/* An account room's top (RoomHead): the title sits in the back row on a phone, the
   way the app draws a room, and in the header bar on a wide screen. */
.room-nav .room-title { display: none; }

/* Back to the account hub: a phone's way round only - see RoomHead. */
@media (min-width: 900px) {
    .room-nav .wx-back.is-hub-back { display: none; }
}
@media (max-width: 899px) {
    .room-nav .room-title { display: block; }
    .display-header.room-bar { display: none; }
}

.display-header {
    padding: 5px;
    margin-bottom: 5px;
    align-content: center;
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-start;
    height: 100%;
    width: 100%;
    border: 1px solid var(--wx-line);
    border-radius: var(--wx-radius);
    background-color: var(--wx-surface-2);
    color: var(--wx-ink);
}

.display-header .name {
    /* Authored in sentence case; the header bar is a heading, and this is where a
       heading is set in capitals (design spec: themes may uppercase headings only). */
    text-transform: uppercase;
    flex: 1;
    min-width: 0;
    text-align: left;
    padding-left: 5px;
    color: inherit;
    /* A long section name in capitals, in a wide display face, wraps rather than
       pushing the page sideways on a phone ("Redeem Points for Giveaway Entries"). */
    overflow-wrap: anywhere;
}

.display-header .count {
    flex: 0 0 auto;
    white-space: nowrap;
    text-align: right;
    padding-right: 5px;
    color: inherit;
}

.container .points {
    /* Balances are the secondary color everywhere - see ThemeTokens.Coin. */
    color: var(--wx-coin);
    font-weight: bold;
}

/* ---- cart -------------------------------------------------------------- */

.cart-items {
    max-height: 525px;
    overflow-y: auto;
    border: 1px solid var(--wx-line);
    border-radius: var(--wx-radius);
    background-color: var(--wx-surface);
}

.cart-item {
    padding: 10px 0;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
}

.cart-item-border {
    border-bottom: 1px solid var(--wx-line);
}

.cart-item-image {
    max-width: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    text-align: center;
}

.cart-item-image img {
    width: 125px;
    height: 125px;
    object-fit: cover;
    border: 1px solid var(--wx-line);
    border-radius: var(--wx-radius);
}

.cart-item-actions {
    padding-top: 10px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.cart-item-details {
    display: flex;
    max-width: 400px;
    flex-direction: column;
    justify-content: flex-start;
    flex: 2;
    gap: 5px;
    padding: 5px 0;
}

.cart-item-details h5 {
    margin: 0;
    font-size: 1rem;
    font-weight: bold;
    line-height: 1.2;
}

.cart-item-details p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--wx-muted);
}

.cart-item-pricing {
    padding-right: 25px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    flex: 1;
    text-align: right;
    gap: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cart-item-pricing p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.2;
}

.empty-cart {
    text-align: center;
    color: var(--wx-muted);
}

.cart-edit-button {
    min-width: 250px;
}

.subtotal-container {
    display: flex;
    justify-content: flex-end;
}

.pricing-content {
    margin-top: auto;
}

.cart-footer {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
}

.cart-footer-edit {
    padding-top: 10px;
    flex: 0 0 200px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.cart-footer-rewards {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    margin: 0;
}

.cart-footer-rewards .product-rewards {
    padding-top: 20px;
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--wx-coin);
    font-weight: bold;
}

.cart-footer-rewards .product-rewards .entries {
    padding-left: 50px;
}

.cart-footer-rewards .product-rewards .tokens {
    padding-left: 25px;
}

.cart-footer-total {
    flex: 0 0 250px;
    text-align: right;
    display: flex;
    flex-direction: column;
    white-space: nowrap;
    margin-top: auto;
    padding-right: 10px;
}

.order-note {
    flex: 1;
}

.order-note textarea {
    width: 100%;
    background: var(--wx-surface);
    color: var(--wx-ink);
    border: 1px solid var(--wx-line);
    border-radius: var(--wx-radius);
    font-family: var(--wx-font-body);
    padding: 8px;
}

.cart-summary {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.cart-actions button {
    margin-top: 15px;
    margin-left: 10px;
}

/* ---- checkout ---------------------------------------------------------- */

.payment-cart-footer {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    padding: 0 12px;
}

.payment-cart-footer-edit-delivery {
    padding-top: 10px;
    flex: 0 0 200px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.payment-cart-footer-edit-delivery button {
    width: 200px;
}

.payment-cart-footer-delivery-address {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    margin: 0;
    padding-left: 45px;
    line-height: 1.2;
}

.payment-cart-footer-total {
    flex: 0 0 250px;
    text-align: right;
    display: flex;
    flex-direction: column;
    padding-right: 10px;
}

/* An outline button: the payment methods are a choice, not the commit, so they
   do not take the brand fill that the confirm button gets. */
.payment-btn {
    flex: 1;
    min-width: 120px;
    background-color: var(--wx-surface);
    color: var(--wx-ink);
    border: 1px solid var(--wx-line);
    font-weight: bold;
    padding: 10px 15px;
    text-align: center;
    border-radius: var(--wx-radius);
    transition: all 0.2s ease-in-out;
}

.payment-btn:hover {
    color: var(--wx-ink);
    background-color: var(--wx-surface-2);
    border-color: var(--wx-signal);
    filter: none;
}

.payment-btn i {
    margin-right: 5px;
}

.subtotal {
    display: flex;
    flex-direction: column;
}

.subtotal-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.subtotal-item h5 {
    margin: 0;
    text-align: right;
    font-size: 1rem;
}

.subtotal-title {
    text-align: left;
    font-size: 0.75rem;
}

.subtotal-amount {
    text-align: right;
    font-size: 0.75rem;
    font-weight: normal;
    font-family: var(--wx-font-data);
    font-variant-numeric: tabular-nums;
}

.subtotal-divider {
    border-top: 1px solid var(--wx-line);
    width: 250px;
    padding: 5px 25px 5px 0;
}

.subtotal .subtotal-item:last-child {
    font-size: 0.75rem;
    font-weight: bold;
}

/* ---- points slider ----------------------------------------------------- */

.slider-wrapper {
    padding: 25px 0 35px 10px;
    display: flex;
    align-items: center;
    flex-grow: 1;
    position: relative;
    width: 70%;
}

.slider-max-value {
    margin-left: 20px;
    font-size: 0.8rem;
    white-space: nowrap;
    cursor: pointer;
    font-weight: bold;
}

.slider-values {
    text-align: center;
    white-space: nowrap;
    padding-right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30%;
    min-width: 250px;
    gap: 15px;
    margin-left: 20px;
}

/* The balance falling as the slider moves - a second, quieter line under the
   redeem figure, so the number being chosen stays the loud one. */
.slider-balance {
    display: block;
    font-size: 0.8rem;
    color: var(--wx-muted);
    margin-top: 3px;
}

.slider-balance strong {
    color: var(--wx-coin);
    font-family: var(--wx-font-data);
    font-variant-numeric: tabular-nums;
}

/* ---- spinner ----------------------------------------------------------- */

@keyframes rolling {
    0% { transform: translateY(-25px); }
    100% { transform: translateY(20px); }
}

.spinning i {
    animation: slide-down 0.5s ease-out, rolling 0.1s linear infinite;
}

.stopped i {
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    .spinning i {
        animation: none;
    }

    * {
        transition-duration: 0.01ms !important;
    }
}

/* ---- responsive -------------------------------------------------------- */

@media (max-width: 768px) {
    nav ul {
        flex-direction: column;
        gap: 10px;
    }

    header.site-header {
        flex-wrap: wrap;
    }

    header .container {
        flex-direction: column;
        align-items: center;
    }

    main {
        margin: 10px;
        padding: 15px;
        width: auto;
    }

    .slider-wrapper,
    .slider-values {
        width: 100%;
        min-width: 0;
    }

    .cart-footer,
    .payment-cart-footer {
        flex-wrap: wrap;
        gap: 10px;
    }
}

/* ---- order confirmation ------------------------------------------------- */

.wx-thanks {
    background: var(--wx-surface);
    border: 1px solid var(--wx-line);
    border-radius: var(--wx-radius);
    padding: var(--wx-pad);
    display: grid;
    gap: 6px;
}

.wx-thanks h2 {
    margin: 0;
    font-size: 1.5rem;
    line-height: 1.15;
}

.wx-thanks p { margin: 0; color: var(--wx-muted); }

/* An order that looks paid but took no money should be impossible to miss. */
.wx-test-notice {
    margin-top: 6px !important;
    padding: 7px 11px;
    border-radius: var(--wx-radius);
    background: var(--wx-coin-soft);
    color: var(--wx-coin) !important;
    font-size: 0.84rem;
    font-weight: 700;
}

.wx-earned {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
}

.wx-earned-cell {
    display: grid;
    gap: 2px;
    padding: 13px 15px;
    background: var(--wx-surface);
    border: 1px solid var(--wx-line);
    border-radius: var(--wx-radius);
}

/* The running balance is the quieter one - what was just earned is the news. */
.wx-earned-cell.is-balance { background: var(--wx-surface-2); }

.wx-earned-n {
    font-family: var(--wx-font-data);
    font-variant-numeric: tabular-nums;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.05;
    color: var(--wx-coin);
}

.wx-earned-l {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--wx-muted-dim);
}

.wx-earned-sub { font-size: 0.76rem; color: var(--wx-muted); }

.wx-receipt {
    display: grid;
    gap: 5px;
    background: var(--wx-surface);
    border: 1px solid var(--wx-line);
    border-radius: var(--wx-radius);
    padding: var(--wx-pad);
}

.wx-receipt-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    font-size: 0.88rem;
    color: var(--wx-muted);
    min-width: 0;
}

.wx-receipt-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.wx-receipt-amt {
    flex: 0 0 auto;
    font-family: var(--wx-font-data);
    font-variant-numeric: tabular-nums;
}

.wx-receipt-row.is-total {
    color: var(--wx-ink);
    font-weight: 700;
    font-size: 1rem;
    padding-top: 4px;
}

.wx-thanks-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 4px;
}

/* A failure placing the order sits with the button that caused it. */
.wx-order-error {
    margin: 0 0 8px;
    color: var(--wx-bad);
    font-size: 0.88rem;
    font-weight: 600;
}

/* Legal text at a reading width: a policy set across a monitor is 200 characters a
   line. The same column the official rules use (giveaways.css .wx-rules-page). */
.wx-reading {
    max-width: 760px;
    margin: 0 auto;
    padding: 10px;
}

/* The standing agreement, above both halves of a policy. Set apart so it reads as the
   sentence that matters rather than as the first paragraph of the document. Uses the
   theme's own tokens so it belongs to whichever partner is wearing it. */
.wx-policy-notice {
    margin: 0 0 16px;
    padding: 12px 14px;
    border-left: 3px solid var(--wx-signal, #888);
    background: var(--wx-surface, rgba(128, 128, 128, 0.08));
    color: var(--wx-ink, inherit);
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Choosing a face on the storefront. The marks themselves come from the WinWrxUI
   stylesheet, so this is only the panel around them.

   A row: the face, then what you can do to it. Stacked it took the whole top of the
   profile page and pushed the form below the fold. */
.wx-avatar-panel {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    border: 1px solid var(--wx-line);
    border-radius: var(--wx-radius);
    background: var(--wx-surface);
}

/* min-width:0 is what lets the scroller inside actually scroll - without it this
   column grows to its content and the row overflows the panel instead. */
.wx-avatar-controls {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.wx-avatar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* On a narrow screen the face goes back above the controls - side by side there leaves
   neither enough room. */
@media (max-width: 560px) {
    .wx-avatar-panel { flex-direction: column; }
}

/* The upload control is a label wrapping a file input and the other is a button, so
   they need telling to be the same shape. A shared width keeps them a pair rather than
   two controls that happen to sit together. */
.wx-avatar-btn {
    min-width: 10.5rem;
    margin-bottom: 0;
    text-align: center;
}

/* Shown when an address has no partner behind it. Deliberately plain: there is no
   partner, so there is no branding to wear. */
.wx-nohost {
    max-width: 34rem;
    margin: 4rem auto;
    padding: 0 1.5rem;
    text-align: center;
}

.wx-nohost h1 {
    font-size: 1.5rem;
    margin-bottom: .75rem;
}

/* ── The account menu ───────────────────────────────────────────────────────────

   Profile and Sign Out used to be two more words in the header row, which is most of what
   made it wrap. They hang off the customer icon now, which sits last in the row the way it
   does in the phone app.

   Built on <details>: this layout renders statically, so there is no circuit behind the
   header to run a click handler. The browser opens and closes it by itself, and it is
   keyboard-reachable without any help.

   Note for anyone adding to the header later - the storefront loads base.css, layouts.css
   and a theme, NOT wwwroot/css/partner.css. That file is not linked from anywhere. */

/* The cart: the app's bag, with the count as a badge that is there only when the cart
   has something in it. [hidden] is spelled out because the display rule would
   otherwise beat it, and wxHeader.setCartCount flips it without a reload. */
header nav ul li.cart-link a { display: inline-flex; align-items: center; gap: 5px; }
/* The bag only once there is something in it, as in the app: an empty bag leads to a
   disappointment. wxHeader.js keeps the badge's hidden in step with the cart; the cart
   page itself keeps its icon, lit. */
header nav ul li.cart-link:has(.cart-link-n[hidden]):not(:has(a.active)) { display: none; }
header nav ul li.cart-link .cart-link-n {
    min-width: 18px;
    padding: 2px 5px;
    border-radius: 9px;
    background: var(--wx-signal);
    color: var(--wx-signal-ink);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}
header nav ul li.cart-link a:hover .cart-link-n,
header nav ul li.cart-link a.active .cart-link-n { background: var(--wx-signal-ink); color: var(--wx-signal); }
header nav ul li.cart-link .cart-link-n[hidden] { display: none; }

header nav ul li.account-menu { position: relative; }
header nav ul li.account-menu details { position: relative; }

/* One icon, two behaviors. On a desktop it is the dropdown; on a phone it is a link to
   the account hub, the same screen the app's account tab draws. The layouts' own
   breakpoint (899px) decides which. */
header nav ul li.account-link a {
    display: block;
    padding: 5px 10px;
    border-radius: var(--wx-radius);
    color: var(--wx-ink);
    font-size: 1.3rem;
    line-height: 1;
}

header nav ul li.account-link a:hover { background: var(--wx-signal); color: var(--wx-signal-ink); }
header nav ul li.account-link a.active:not(:hover),
header nav ul li.account-menu details:not([open]) > summary.active:not(:hover) { color: var(--wx-signal); }

@media (min-width: 900px) { header nav ul li.account-link { display: none; } }
@media (max-width: 899px) { header nav ul li.account-menu { display: none; } }

header nav ul li.account-menu summary {
    /* display:block is what removes the disclosure triangle. list-style alone does not,
       and the two vendor rules below only cover half the browsers between them - so all
       three, because a stray ">" beside the icon survives for months. */
    display: block;
    list-style: none;
    cursor: pointer;

    padding: 5px 10px;
    border-radius: var(--wx-radius);
    color: var(--wx-ink);
    font-size: 1.3rem;
    line-height: 1;
}

header nav ul li.account-menu summary::-webkit-details-marker { display: none; }
header nav ul li.account-menu summary::marker { content: ""; }

header nav ul li.account-menu summary:hover,
header nav ul li.account-menu[open] summary,
header nav ul li.account-menu details[open] summary {
    background: var(--wx-signal);
    color: var(--wx-signal-ink);
}

/* Floats over the page rather than taking a place in the row. Without this the list is
   laid out inline like every other <ul> in this header, which is what pushed the header
   taller and put "My Profile" and "Sign Out" on a second line. */
header nav ul li.account-menu .account-menu-list {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1200;

    display: block;
    min-width: 170px;
    margin: 0;
    padding: 6px;
    list-style: none;

    background: var(--wx-surface);
    border: 1px solid var(--wx-line);
    border-radius: var(--wx-radius);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
    text-align: left;
}

header nav ul li.account-menu .account-menu-list li { display: block; }

header nav ul li.account-menu .account-menu-list a {
    display: block;
    padding: 9px 12px;
    white-space: nowrap;
    font-weight: 600;
}

/* ---- a return, under the line it is about ------------------------------- */

.wx-return {
    margin: 2px 0 10px;
    padding: 10px 12px;
    border-left: 3px solid var(--wx-line);
    background: var(--wx-surface);
    font-size: 0.85rem;
    color: var(--wx-muted);
    display: grid;
    gap: 8px;
}

.wx-return strong { color: var(--wx-ink); }
.wx-return.is-waiting { border-left-color: var(--wx-warn); }
.wx-return.is-approved { border-left-color: var(--wx-good); }
.wx-return.is-declined { border-left-color: var(--wx-bad); }
.wx-return.is-done { border-left-color: var(--wx-signal); }
.wx-return-sub { display: block; font-size: 0.8rem; color: var(--wx-muted-dim); }

.wx-return-ask { margin: -4px 0 8px; }

.wx-linkbtn {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--wx-signal);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.wx-return-label { font-weight: 600; color: var(--wx-ink); }

.wx-return-in {
    width: 100%;
    font: inherit;
    font-size: 0.9rem;
    color: var(--wx-ink);
    background: var(--wx-ground);
    border: 1px solid var(--wx-line);
    border-radius: var(--wx-radius);
    padding: 8px 10px;
}

.wx-return-in:focus { outline: 2px solid var(--wx-signal); outline-offset: 1px; }
textarea.wx-return-in { resize: vertical; }

.wx-return-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.wx-return-flag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--wx-signal-ink);
    background: var(--wx-warn);
    border-radius: var(--wx-radius);
}

/* ---- messages: the support thread ---------------------------------------- */

.wx-thread { display: grid; gap: 10px; margin: 0 0 16px; }
.wx-msg {
    max-width: 88%;
    padding: 10px 12px;
    border-left: 3px solid var(--wx-line);
    background: var(--wx-surface);
    font-size: 0.88rem;
    color: var(--wx-ink);
}
.wx-msg.is-me { justify-self: end; border-left: 0; border-right: 3px solid var(--wx-signal); }
.wx-msg-head { display: flex; gap: 10px; align-items: baseline; margin-bottom: 4px; font-size: 0.8rem; color: var(--wx-muted); }
.wx-msg-head b { color: var(--wx-ink); }
.wx-msg-body { white-space: pre-wrap; line-height: 1.5; }
.wx-receipt-name .sub { display: block; font-size: 0.78rem; color: var(--wx-muted-dim); }

.wx-msg-pics { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.wx-msg-pics img { width: 110px; height: 110px; object-fit: cover; border: 1px solid var(--wx-line); display: block; }

/* ---- get the app ------------------------------------------------------- */

/* The strip in the footer and the card on the account page - see GetTheApp.razor. Both
   point at the one smart link; the QR carries the partner code. On a phone the QR is
   useless (it is the phone you would scan with) and the badges are the whole point, so
   the QR goes and the badges stay. */
.wx-getapp {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    text-align: left;
}

.wx-getapp.is-strip {
    max-width: var(--wx-shell);
    margin: 0 auto 16px;
    padding: 16px 20px;
    border: 1px solid var(--wx-line);
    border-radius: var(--wx-radius);
    background: var(--wx-surface);
}

.wx-getapp.is-card {
    margin: 16px 0 0;
    padding: 18px 16px;
    border: 1px solid var(--wx-line);
    border-radius: var(--wx-radius);
    background: var(--wx-surface);
}

.wx-getapp-words { flex: 1; min-width: 0; }

.wx-getapp-words h3 {
    margin: 0 0 4px;
    font-family: var(--wx-font-display, inherit);
    font-size: 1.05rem;
}

.wx-getapp-words p {
    margin: 0 0 10px;
    color: var(--wx-muted);
    font-size: 0.9rem;
}

/* The code to type, in the data face so letters and digits read unambiguously. */
.wx-getapp-code { font-family: var(--wx-font-data, ui-monospace, monospace); color: var(--wx-ink); letter-spacing: 0.04em; }

.wx-getapp-badges { display: flex; gap: 10px; flex-wrap: wrap; }

.wx-getapp-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 14px;
    border: 1px solid var(--wx-line);
    border-radius: 10px;
    background: #000;
    color: #fff;
    text-decoration: none;
    line-height: 1.1;
    font-weight: 700;
}

.wx-getapp-badge i { font-size: 1.4rem; }

.wx-getapp-badge small {
    display: block;
    font-size: 0.6rem;
    font-weight: 400;
    color: #bbb;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.wx-getapp-badge:hover { border-color: var(--wx-signal); color: #fff; }

/* The badges and the QR are buttons, not text links: no underline from the site's link
   hover (or a theme's) on their words. */
.wx-getapp a.wx-getapp-badge, .wx-getapp a.wx-getapp-badge:hover, .wx-getapp a.wx-getapp-badge *,
.wx-getapp a.wx-getapp-qr, .wx-getapp a.wx-getapp-qr:hover, .wx-getapp a.wx-getapp-qr * { text-decoration: none; }

.wx-getapp-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: var(--wx-muted);
    font-size: 0.75rem;
    text-decoration: none;
}

.wx-getapp-qr img {
    display: block;
    padding: 6px;
    background: #fff;
    border-radius: 10px;
}

@media (max-width: 899px) {
    .wx-getapp-qr { display: none; }
}

/* ---- phone: the app's title bar and tab bar ---------------------------------

   At phone widths the website wears the app's frame. The header becomes a slim title
   bar - logo, balances, cart, account - and the section links move to a tab bar fixed
   along the bottom with the app's icons in the app's order (see AppChrome and
   .chrome-tabs in WinWrxUI's streams.css). Last in the file so it wins over the older
   column-stacking rules above. */

.wx-tabbar { display: none; }

@media (max-width: 768px) {
    header {
        position: sticky;
        top: 0;
    }

    header .container {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        /* The logo lines up with the page's content (25px in), not tight to the edge;
           the right is less, since the account link's own padding insets its icon. */
        padding: 0 16px 0 24px;
        padding-top: env(safe-area-inset-top);
    }

    header .logo img { max-height: 34px; }

    header nav {
        flex: 0 1 auto;
        min-width: 0;
        text-align: right;
    }

    header nav ul {
        flex-direction: row;
        align-items: center;
        gap: 4px;
    }

    header nav ul li.nav-section { display: none; }

    /* An item's picture above its details, not squeezed beside them - both columns
       are flex: 1, which beat Bootstrap's widths and kept them on one line. */
    .product-image-gallery,
    .product-details-section {
        flex: 1 1 100%;
        max-width: 100%;
    }

    header nav ul li a { padding: 5px 8px; }

    header nav ul li.points {
        white-space: nowrap;
        font-size: 0.9rem;
        font-weight: 600;
    }

    .balance-label { display: none; }

    /* Room at the foot of every page for the bar, and for the home indicator under it. */
    body { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }

    .wx-tabbar {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
        background: var(--wx-surface);
        border-top: 1px solid var(--wx-line);
        padding-bottom: env(safe-area-inset-bottom);
    }

    .wx-tab {
        display: flex;
        align-items: center;
        justify-content: center;
        /* 52px clears the usual minimum touch target on a small phone. */
        min-height: 52px;
        color: var(--wx-ink);
        font-size: 1.2rem;
        text-decoration: none;
    }

    .wx-tab.active { color: var(--wx-signal); }
}

/* Printing a receipt: the receipt, not the site around it. */
@media print {
    header,
    footer,
    nav.wx-tabbar,
    .wx-nav,
    .wx-thanks-actions,
    .return-form {
        display: none !important;
    }

    body { padding: 0 !important; background: #fff !important; }
    main { margin: 0 !important; box-shadow: none !important; }
}

/* ============================================================================
   The home page on the page (2026-10-07).

   What every theme now shares, so each theme's own file is left with its
   personality - masthead, cover, section titles, cards - rather than repeating the
   same repairs five times:

   - The home page leaves the framed box every other page sits in and runs on the
     theme's own ground, wider, with room between sections.
   - Sections take the height they need. The short and tall boxes left a band of
     empty page under any section with less in it than its box; every card the
     partner asked for is shown, since nothing is cut off at a box's foot.
   - The header carries the logo, so the cover doesn't repeat it, and the tagline
     becomes the cover's headline.
   - Products in a home section share the width; one product on its own is a
     feature rather than a lonely card; the store section's own bar inside a home
     section (which said the section's name twice) is dropped.
   - Pictures ease forward a touch on hover, unless the visitor turned motion off.

   Phones keep the app's look: the side-by-side arrangements start at 900px.
   ========================================================================== */

main:has(> .wx-home) {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding-top: 0;
}

@media (min-width: 900px) {
    main:has(> .wx-home) {
        max-width: max(1240px, var(--wx-shell));
        padding: 28px 32px 64px;
        margin-top: 0;
    }

    .wx-home { --wx-mod-gap: 64px; }

    /* .wx-home first: layouts.css comes after this file and sets the two heights at
       the same specificity, so a plain .wx-mod[data-height] lost to it. */
    .wx-home .wx-mod[data-height] { height: auto; }
    .wx-home .wx-layout-row { align-items: start; }
}

/* ---- products in a home section ------------------------------------------ */

.wx-band .product-grid > .display-header { display: none; }

/* .wx-home .wx-mod: layouts.css (later, and as specific) sets narrow columns for a
   tall module's products, which left three products at the left of an empty row. */
.wx-home .wx-mod .wx-band .product-grid {
    gap: 28px 24px;
    padding: 0;
    /* Four across at full width, whatever the count: a picture stays a picture's size,
       and a short row ends early rather than stretching three into posters. */
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.wx-band .product-grid .product-purchase { justify-content: flex-start; gap: 10px; }

/* On a phone, two to a row, as the app's home and the store do (2026-10-08) - a 240px
   minimum left one product filling the screen. */
@media (max-width: 560px) {
    .wx-home .wx-mod .wx-band .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; padding: 0 0 6px; }
    .wx-home .wx-band .product-grid .product-info .desc { display: none; }
    .wx-home .wx-band .product-grid .product-purchase { flex-wrap: wrap; font-size: 0.9rem; }
    .wx-home .wx-band .product-grid .product-card { padding-bottom: 10px; }
    .wx-home .wx-band .product-grid :is(.product-info, .product-rewards, .product-purchase) { padding-left: 8px; padding-right: 8px; }
}

@media (min-width: 900px) {
    .wx-home .wx-mod .wx-band .product-grid:not(:has(.product-card ~ .product-card)) { grid-template-columns: minmax(0, 1fr); }

    .wx-band .product-grid:not(:has(.product-card ~ .product-card)) .product-card {
        display: grid;
        grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
        column-gap: 44px;
        align-content: center;
        margin: 0;
        width: 100%;
    }

    /* The picture down the left for the card's whole height; the rest stacks beside it. */
    .wx-band .product-grid:not(:has(.product-card ~ .product-card)) .product-card > * { grid-column: 2; }
    .wx-band .product-grid:not(:has(.product-card ~ .product-card)) .product-card > .product-image { grid-column: 1; grid-row: 1 / span 6; }
    .wx-band .product-grid:not(:has(.product-card ~ .product-card)) .product-card > :nth-child(2) { align-self: end; }
    .wx-band .product-grid:not(:has(.product-card ~ .product-card)) .name { font-size: 1.8rem; }
}

/* ---- pictures ease forward ------------------------------------------------- */

:is(.wx-band .product-image, .wx-post-shot, .wx-tile-shot, .wx-gcard-shot, .wx-pin-shot) { overflow: hidden; }

:is(.wx-band .product-image, .wx-post-shot, .wx-tile-shot, .wx-gcard-shot, .wx-pin-shot) img {
    transition: transform 600ms cubic-bezier(.2, .7, .2, 1);
}

: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 {
    transform: scale(1.035);
}

@media (prefers-reduced-motion: reduce) {
    :is(.wx-band .product-image, .wx-post-shot, .wx-tile-shot, .wx-gcard-shot, .wx-pin-shot) img { transition: none; transform: none !important; }
}

/* ---- the section pages on the page --------------------------------------------
   Store, giveaways, streams and games leave the framed box too, the way the home page
   does: their cards are what is framed, so a second frame around all of them only
   made the page look boxed in. Pages with forms - checkout, the account rooms, a
   single giveaway's entry - keep theirs. */

main:has(.store-rail),
main:has(> .gw-page-host),
main:has(> .feed-page-host),
main:has(.games-rail) {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    border: none;
}

@media (min-width: 900px) {
    main:has(.store-rail),
    main:has(> .gw-page-host),
    main:has(> .feed-page-host),
    main:has(.games-rail) {
        max-width: max(1240px, var(--wx-shell));
        padding: 28px 32px 64px;
    }

    /* Three giveaways across where there is room, not two. */
    .gw.is-wide .gw-cards { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }

    /* The store's grid the home page's: four across, room between. */
    .scrollable-content > .product-grid { gap: 28px 24px; padding: 0; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}

/* ---- one product, one giveaway (2026-10-07) -------------------------------------
   The item page and a single giveaway's page as product pages rather than forms: off
   the framed box, the picture large on the left, the name set big, the price where
   the eye goes after it. Each theme dresses these in its own file ("one product, one
   giveaway"). Phones keep the app's stacked page. */

main:has(.single-product) {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    border: none;
}

@media (min-width: 900px) {
    main:has(.single-product) {
        max-width: max(1240px, var(--wx-shell));
        padding: 28px 32px 64px;
    }

    .single-product {
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
        gap: 56px;
        max-width: none;
        margin-top: 12px;
    }

    /* Bootstrap's col-lg-6 gives each half a fixed width; the grid decides now. */
    .single-product > .product-image-gallery,
    .single-product > .product-details-section { width: auto; max-width: none; padding: 0; }

    .product-details-section { gap: 18px; padding-top: 8px; }

    .product-details-section .product-name,
    .product-details-section .product-name h3 {
        font-size: clamp(2rem, 3.4vw, 3.1rem);
        line-height: 1.04;
        margin: 0;
    }

    .product-details-section .product-description { font-size: 1.05rem; max-width: 52ch; }
    .product-details-section .product-purchase { font-size: 1.5rem; }

    .gw.is-wide .gw-detail-name { font-size: clamp(2rem, 3.4vw, 3.1rem); line-height: 1.04; }
    .gw.is-wide .gw-text { font-size: 1.05rem; max-width: 60ch; }
    .gw.is-wide .gw-prize { font-size: 1.3rem; }
}

/* The website's streams and games pages set their cards in columns with little or no
   space between rows, which only showed once a theme drew them as cards: they touched.
   main first: streams.css and games.css load inside the page, after this file. */
@media (min-width: 900px) {
    main .feed.is-wide .feed-scroll,
    main .post.is-wide .post-scroll,
    main .games.is-wide .games-body.is-list { row-gap: 22px; }
}

/* The same gap under the header on every page as the home page has above its cover
   (Frank, 2026-10-07): the page's own top padding only, no margin above the page and no
   padding at the top of the first row of filters or the back link. main first: the
   screens' own stylesheets load after this one. */
@media (min-width: 900px) {
    main:has(.store-rail, > .gw-page-host, > .feed-page-host, .games-rail, .single-product) {
        margin-top: 0;
        padding-top: 28px;
    }

    main :is(.feed-rail, .games-rail, .store-rail, .gw-rail) { padding-top: 0; margin-top: 0; }
    main :is(.gw-detail, .scrollable-content) > .wx-nav { padding-top: 0; margin-top: 0; }
    main .gw-scroll { padding-top: 0; }
}

/* The account rooms: on a wide screen the room's title bar is the first thing under the
   header, where a section page's filters are. The back row above it shows nothing there
   (its title is in the bar, its way back to the hub is a phone's), so it gives up its
   room unless it holds a real back link - a message's way back to Messages. */
@media (min-width: 900px) {
    .room-nav:not(:has(.wx-back:not(.is-hub-back))) { display: none; }

    main:has(.room-bar) { margin-top: 18px; padding-top: 10px; }

    /* The cart's back link where the filters sit on the store page. */
    main .cart-page-host { padding-top: 0; }
}

/* One post: room between Previous/Next and the post, and between the post and View Full
   Post - they touched once a theme drew the post as a card. */
@media (min-width: 900px) {
    main .post.is-wide .post-main .feed-post { margin: 18px 0 22px; }
}

/* The account rooms have no title bar on a wide screen (Frank, 2026-10-07): the account
   menu and the store's Membership chip already say where you are, and the room starts
   where a section page's filters do. A phone keeps the app's title in the back row. */
@media (min-width: 900px) {
    .display-header.room-bar { display: none; }
}

/* "Powered By winwrx" in the footer's line: a link, quietly. */
footer .wx-powered { color: inherit; font-weight: 700; text-decoration: none; }

/* The contact page's fields (Bootstrap's floating labels) in the theme's colors. They
   were Bootstrap's white boxes with the theme's ink on the labels - on a dark theme,
   near-white on white (Frank, 2026-10-07). */
.contact-page .form-control,
.contact-page .form-select {
    background-color: var(--wx-surface);
    color: var(--wx-ink);
    border-color: var(--wx-line);
}

.contact-page .form-control:focus {
    background-color: var(--wx-surface);
    color: var(--wx-ink);
    border-color: var(--wx-signal);
    box-shadow: 0 0 0 3px var(--wx-signal-soft);
}

.contact-page .form-floating > label { color: var(--wx-muted); }

/* The strip Bootstrap paints behind a floated label, the field's own color. */
.contact-page .form-floating > .form-control:focus ~ label::after,
.contact-page .form-floating > .form-control:not(:placeholder-shown) ~ label::after,
.contact-page .form-floating > .form-select ~ label::after { background-color: var(--wx-surface); }

.contact-page select.form-control option { background: var(--wx-surface); color: var(--wx-ink); }

/* Pictures: room under the floated label, and the theme's button rather than a white one. */
.contact-page .form-floating > input[type="file"].form-control { height: auto; padding-top: 1.9rem; padding-bottom: 0.6rem; }
.contact-page input[type="file"]::file-selector-button {
    background: var(--wx-surface-2);
    color: var(--wx-ink);
    border: 1px solid var(--wx-line);
    border-radius: var(--wx-radius-control);
    margin-right: 12px;
}

/* The header logo is a link home; it looks like the logo, nothing more. */
header.site-header .logo-home { display: inline-flex; align-items: center; height: 100%; text-decoration: none; }