/* The store - on the website, in the app and in the admin's phone preview (2026-10-08).

   The product grid, the item page and the gift cards are the website's markup and class
   names, moved here from the website's base.css so all three surfaces load one sheet and
   the six themes, written against .product-grid / .product-card / .single-product, dress
   them everywhere. The website loads this just before base.css, so the website's own
   page framing there (the open page, the four-across grid on a desktop) still refines it.

   A phone - the app, the preview - is .store without .is-wide: the screen owns its own
   scrolling, and the category rail is a bar. Every color comes from the theme tokens;
   the fallbacks are what the screen looks like before a theme loads, not a second design. */

.store {
    display: flex;
    flex-direction: column;
    min-height: 0;
    color: var(--wx-ink, #fff);
    font-family: var(--wx-font-body, system-ui, -apple-system, "Segoe UI", sans-serif);
}

.store:not(.is-wide) { background: var(--wx-ground, #111); }

/* ---------- a phone: the screen scrolls itself ---------- */

/* min-height:0 lets the list shrink inside .chrome-body and own its scrolling, the same
   arrangement the feed uses. 14px at the sides is the app's inset. */
.store:not(.is-wide) > .scrollable-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    padding: 12px 14px 28px;
}

/* Two to a row, with room between them for a theme's offset shadow - the app's home
   does the same (Frank, 2026-10-08). */
.store:not(.is-wide) .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 12px;
    padding: 0 0 6px;
}

.store:not(.is-wide) .product-grid .product-info .desc { display: none; }
.store:not(.is-wide) .product-grid .product-purchase { flex-wrap: wrap; font-size: 0.9rem; }
.store:not(.is-wide) .product-grid .product-card { padding-bottom: 10px; }
.store:not(.is-wide) .product-grid :is(.product-info, .product-rewards, .product-purchase) { padding-left: 8px; padding-right: 8px; }

/* The website's store on a phone, the same way (2026-10-08) - its 250px minimum left one
   product filling the screen. */
@media (max-width: 560px) {
    .store.is-wide .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; padding: 0 0 6px; }
    .store.is-wide .product-grid .product-info .desc { display: none; }
    .store.is-wide .product-grid .product-purchase { flex-wrap: wrap; font-size: 0.9rem; }
    .store.is-wide .product-grid .product-card { padding-bottom: 10px; }
    .store.is-wide .product-grid :is(.product-info, .product-rewards, .product-purchase) { padding-left: 8px; padding-right: 8px; }
}

.store-detail:not(.is-wide) {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* The item page on a phone is the screen, not a box on one. */
.store-detail:not(.is-wide) .single-product {
    margin: 0;
    padding: 0 14px 28px;
    border: none;
    border-radius: 0;
    background: none;
    gap: 12px;
}

.store-detail:not(.is-wide) .product-image-gallery { max-width: none; flex: 1 1 100%; }
.store-detail:not(.is-wide) .product-details-section { flex: 1 1 100%; padding: 0; }

.store-more { margin-top: var(--wx-s4, 16px); }

/* ---------- moved from the website's base.css (2026-10-08) ---------- */

/* ---- product detail ---------------------------------------------------- */

.single-product {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    max-width: var(--wx-shell);
    margin: 20px auto 15px;
    background-color: var(--wx-surface);
    border: 1px solid var(--wx-line);
    border-radius: var(--wx-radius);
    padding: 20px;
    gap: 20px;
}

.product-image-gallery {
    position: relative;
    width: 100%;
    max-width: 600px;
    flex: 1;
}

.product-image-gallery .carousel {
    display: flex;
    transition: transform 0.5s ease-in-out;
    overflow: hidden;
}

.product-image-gallery .carousel-item {
    min-width: 100%;
    text-align: center;
}

.product-image-gallery .carousel-item img {
    width: 100%;
    height: auto;
    border-radius: var(--wx-radius);
}

/* "Sold out" and friends - a warning, so it reads from the semantic token
   rather than the brand color. */
.product-image-gallery .overlay-text,
.product-grid .product-image .overlay-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-15deg);
    background-color: var(--wx-bad);
    color: #fff;
    font-size: 1rem;
    font-weight: bold;
    text-align: center;
    padding: 5px 10px;
    border-radius: var(--wx-radius);
    z-index: 2;
    pointer-events: none;
}

/* No picture, or one that won't load: a square with an image icon, so the card keeps
   its shape. */
.product-grid .product-noimage,
.product-image-gallery .product-noimage {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--wx-ground);
    color: var(--wx-muted-dim);
    font-size: 2rem;
    border-radius: var(--wx-radius);
}

.product-grid .product-noimage[hidden] { display: none; }

.product-image-gallery .product-noimage { font-size: 3rem; }

.members-tag.is-on-card {
    margin: 2px 0 4px;
}

.product-image-gallery .carousel-controls {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
}

.product-image-gallery .carousel-control {
    background-color: rgba(0, 0, 0, 0.5);
    border: none;
    color: #fff;
    padding: 10px;
    cursor: pointer;
    border-radius: 50%;
    font-size: 1.5rem;
    transition: background-color 0.3s;
}

.product-image-gallery .carousel-control:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.product-details-section {
    flex: 1;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.product-details-section .product-name {
    font-family: var(--wx-font-display);
    font-size: 1.5rem;
    font-weight: bold;
    text-transform: capitalize;
    color: var(--wx-ink);
}

.product-details-section .product-description {
    font-size: 1rem;
    color: var(--wx-muted);
    line-height: 1.5;
}

.product-details-section .product-purchase {
    justify-content: flex-end;
    display: flex;
    gap: 10px;
    font-size: 1rem;
    color: var(--wx-good);
    font-weight: bold;
}

.product-details-section .product-purchase .points,
.product-details-section .product-purchase .price {
    display: flex;
    align-items: center;
    gap: 5px;
}

.product-details-section .product-purchase .plus {
    flex: 0;
    text-align: center;
}

.product-details-section .product-discount {
    background-color: var(--wx-ground);
    text-align: center;
    border: 1px dashed var(--wx-line);
    padding: 10px;
    border-radius: var(--wx-radius);
    font-size: 0.9rem;
    color: var(--wx-muted);
}

.product-details-section .product-variants,
.product-details-section .product-modifiers {
    background-color: var(--wx-surface);
    padding: 10px;
    border: 1px solid var(--wx-line);
    border-radius: var(--wx-radius);
    font-size: 0.9rem;
}

.product-details-section .product-variants label {
    font-weight: bold;
    color: var(--wx-ink);
}

/* The option groups, and the note under them about price and stock, each with room
   of their own - a label ran straight on from the row of buttons above it. */
.product-details-section .product-variants {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.product-details-section .product-option label {
    display: block;
    margin-bottom: 6px;
}

.product-details-section .product-variants .alert { margin: 0; }

.product-details-section .product-modifiers input[type="checkbox"] {
    margin-right: 10px;
    accent-color: var(--wx-signal);
}

.product-details-section .product-checkout {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}

.product-details-section .product-checkout .count {
    flex: 0.6;
    text-align: left;
}

.product-description ul,
.product-info ul {
    margin-left: 0;
    padding-left: 10px;
}

.product-description li,
.product-info li {
    display: list-item;
    border: none;
    background-color: transparent;
    box-shadow: none;
    padding: 0;
    margin: 5px;
    font-size: 0.75rem;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2px;
    padding: 2px;
}

.product-grid .product-card {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
    margin: 0 auto;
    padding: 0;
    background: var(--wx-surface);
    border-radius: var(--wx-radius);
    border: 1px solid var(--wx-line);
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.product-grid .product-card:hover {
    border-color: var(--wx-signal);
}

.product-grid .product-image {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
}

.product-grid .product-image img {
    max-width: 100%;
    height: auto;
    border-radius: var(--wx-radius);
    margin-bottom: 2px;
    display: block;
    width: 100%;
}

.product-grid .product-info {
    padding: 0 5px;
    font-size: 0.9rem;
    text-align: left;
}

.product-grid .name {
    font-family: var(--wx-font-display);
    font-weight: bold;
    color: var(--wx-ink);
}

.product-grid .desc {
    color: var(--wx-muted);
}

.product-grid .product-purchase {
    width: 100%;
    margin-top: auto;
    display: flex;
    font-size: 1rem;
    color: var(--wx-good);
    font-weight: bold;
    justify-content: space-between;
    font-family: var(--wx-font-data);
}

.product-grid .product-purchase.single-item {
    justify-content: flex-end;
}

.product-grid .product-purchase .points {
    text-align: left;
    padding: 0 5px;
}

.product-grid .product-purchase .plus {
    flex: 1;
    text-align: center;
}

.product-grid .product-purchase .price {
    text-align: right;
    padding: 0 5px;
}

/* ---- rewards ----------------------------------------------------------- */

/* Points and entries are currency, so they are gold in every theme - a brand
   color that happened to be gold would make them invisible. */
.product-rewards,
.product-details-section .product-rewards,
.product-grid .product-rewards {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    font-weight: bold;
    color: var(--wx-coin);
    gap: 5px;
}

.product-rewards {
    flex: 2;
}

.product-grid .product-rewards {
    width: 100%;
    font-size: 1rem;
}

.product-details-section .product-rewards .entries,
.product-details-section .product-rewards .tokens {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* The icon, the count and the word each get a space - the markup runs them together. */
.product-grid .product-rewards .entries {
    display: flex;
    align-items: center;
    gap: 5px;
    text-align: left;
    padding-left: 5px;
}

.product-grid .product-rewards .tokens {
    padding: 0 5px;
}

/* Points and entries in the secondary color, like every other balance; the plus
   between two prices is just punctuation. */
.product-rewards .entries .fas,
.product-purchase .points .fas { color: var(--wx-coin); }
.product-purchase .plus .fas { color: var(--wx-muted); }


/* ---- option picker ----------------------------------------------------- */

/* Variant chips. Radios rather than a list box: one size, one color. The
   input is hidden and the label is the chip, so the browser still gives us the
   group, arrow keys and focus. */
.wx-optionpick {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.wx-optionpick label {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border: 1px solid var(--wx-line);
    border-radius: var(--wx-radius);
    background: var(--wx-surface);
    color: var(--wx-ink);
    white-space: nowrap;
    cursor: pointer;
}

.wx-optionpick input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.wx-optionpick label:hover {
    border-color: var(--wx-muted-dim);
}

.wx-optionpick label.is-on {
    border-color: var(--wx-signal);
    background: var(--wx-signal);
    color: var(--wx-signal-ink);
}

.wx-optionpick label:has(input:focus-visible) {
    outline: 2px solid var(--wx-signal);
    outline-offset: 2px;
}

/* ── The store's category rail ──────────────────────────────────────────────────

   The same shape the app carries across the top of its store, so the two surfaces are
   navigated the same way.

   On a phone it scrolls sideways: a dozen categories should cost one row, not four, and
   a thumb is already used to pushing a row along. On a wide screen there is nothing to
   push and nothing telling you there is more, so anything that does not fit would simply
   be invisible - Gift Cards and Membership sat off the right edge of a seven-category
   rail that way. Above the phone width it wraps instead. */

.store-rail {
    display: flex;
    gap: 8px;
    align-items: center;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 14px 0 6px;
}

.store-rail::-webkit-scrollbar { display: none; }

@media (min-width: 768px) {
    .store-rail {
        flex-wrap: wrap;
        overflow-x: visible;
        row-gap: 10px;
    }
}

/* ---- gift cards --------------------------------------------------------------
   Lifted out of a style tag inside GiftCards.razor. In the markup it could not reach
   the partner's theme and nothing could override it, so the one page in the store
   reached from the rail was also the one that looked like somebody else's site.

   Sized and spaced like the store grid around it: the same surface, the same line, the
   same radius, and the buttons built from .store-rail-item's own shape so a row of
   amounts reads as the same furniture as a row of categories. */
.gift-page {
    max-width: 640px;
    margin: 0 auto;
    padding: 18px 16px 48px;
    display: grid;
    gap: 18px;
}

.gift-title {
    margin: 0;
    font-family: var(--wx-font-display, inherit);
    font-size: 1.6rem;
    letter-spacing: .01em;
}

.gift-lede { margin: 0; opacity: .8; line-height: 1.5; }

/* Every amount the same size, whether or not it has a price and entries under it -
   a row of buttons that match, not one that steps. */
.gift-amounts { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }

.gift-amount {
    padding: 12px 20px;
    border: 1px solid var(--wx-line, #d2dadf);
    border-radius: 10px;
    background: var(--wx-surface, #fff);
    color: inherit;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .12s ease;
}

.gift-amount:hover { border-color: var(--wx-signal, #e5841e); }

.gift-amount.is-selected {
    border-color: var(--wx-signal, #e5841e);
    box-shadow: inset 0 0 0 1px var(--wx-signal, #e5841e);
}

.gift-amount { display: grid; gap: 2px; justify-items: center; align-content: start; }
.gift-amount-price { font-size: 0.85rem; font-weight: 600; color: var(--wx-signal, #e5841e); }
.gift-amount-earn { font-size: 0.75rem; opacity: .75; }

.gift-label { display: grid; gap: 6px; font-weight: 600; }

.gift-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }

.gift-intro,
.gift-form { display: grid; gap: 18px; align-content: start; }

/* The card as it would look - only where there is room for it beside the form. */
.gift-card-art { display: none; }

@media (min-width: 900px) {
    /* A desktop: the card and what it is on the left, choosing one on the right -
       not the phone's single column stranded in the middle of a wide page. */
    .gift-page {
        max-width: 1100px;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 48px;
        padding-top: 28px;
    }

    .gift-card-art {
        position: relative;
        display: grid;
        grid-template-rows: auto 1fr auto;
        aspect-ratio: 1.586;            /* a bank card's proportions */
        padding: 26px 28px;
        border-radius: 18px;
        border: 1px solid var(--wx-line, #2c2c2c);
        background:
            radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--wx-signal, #e5841e) 38%, transparent), transparent 60%),
            linear-gradient(135deg, var(--wx-surface-2, #1b1b1b), var(--wx-surface, #111));
        box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
        overflow: hidden;
    }

    .gift-card-logo { max-height: 52px; max-width: 60%; object-fit: contain; justify-self: start; }

    .gift-card-name {
        font-family: var(--wx-font-display, inherit);
        font-size: 1.5rem;
        font-weight: 700;
    }

    .gift-card-kind {
        align-self: end;
        font-size: .8rem;
        letter-spacing: .14em;
        text-transform: uppercase;
        opacity: .75;
    }

    .gift-card-face {
        position: absolute;
        right: 28px;
        bottom: 20px;
        font-family: var(--wx-font-display, inherit);
        font-size: 3.2rem;
        font-weight: 800;
        line-height: 1;
        color: var(--wx-signal, #e5841e);
    }
}

.single-product {
    background: transparent;
    border: none;
    padding: 0;
}

.product-details-section .product-purchase { justify-content: flex-start; }

/* ---------- the category rail on a phone: a bar ---------- */

.store:not(.is-wide) > .store-rail {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 10px 14px;
    /* The rail scrolls sideways; the page must not. A phone swipes it; with a mouse
       there is nothing to swipe, so rails.js makes it draggable. */
    cursor: grab;
    background: var(--wx-surface, #1b1b1b);
    border-bottom: 1px solid var(--wx-line, #2c2c2c);
}

.store-rail.is-dragging {
    cursor: grabbing;
    user-select: none;
}
.store-rail.is-dragging img { pointer-events: none; }

.store-rail img {
    /* See home.css: the native image drag has to be off before a press turns into a
       scroll, not after. */
    -webkit-user-drag: none;
    user-select: none;
}

/* ---------- the rest of the item page ---------- */

/* A product card is a link on the website: it reads as the card, not as a link. */
a.product-card,
a.product-card:hover {
    color: inherit;
    text-decoration: none;
}

.product-card.is-inert { cursor: default; }

/* Quantity, then the two buttons - side by side and the same size, below the quantity
   when there isn't room for all three on one line. */
.product-details-section .product-checkout { flex-wrap: wrap; gap: 12px; }
.item-buy-btns { display: flex; gap: 8px; flex: 1 1 320px; justify-content: flex-end; }
.item-buy-btns button { flex: 1 1 0; white-space: nowrap; }

/* Two buttons side by side on a phone: "View Cart (1)" may not fit on one line at that
   width, so the words wrap inside the button rather than pushing it off the edge. */
@media (max-width: 480px) {
    .item-buy-btns button { white-space: normal; line-height: 1.2; padding-left: 8px; padding-right: 8px; }
}

.add-problem { margin-top: 8px; }
.item-members-only { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 4px 0 10px; color: var(--wx-muted); }

.product-details-section .product-modifier p { margin: 2px 0 8px 24px; color: var(--wx-muted); font-size: 0.85rem; }

/* Borders and padding inside the size, as the website (Bootstrap) has it everywhere.
   The app and the preview don't load Bootstrap, so a card at height: 100% with a theme's
   3px border and bottom padding spilled into the gap under it, and a full-width price
   row with side padding ran off the card (2026-10-08). */
:is(.store, .store-detail, .wx-home) :is(.product-grid, .single-product),
:is(.store, .store-detail, .wx-home) :is(.product-grid, .single-product) * {
    box-sizing: border-box;
}