/* Design direction: mostly black & white. Color is a scarce resource spent only on
   things that should pull the eye — products, balance/profile, the brand mark, the
   one primary CTA gradient — everything else (surfaces, secondary text, chrome)
   stays neutral gray so the colored elements actually pop. */
:root {
    --bg-dark: #09090b;
    --card-bg: rgba(255, 255, 255, 0.035);
    --card-border: rgba(255, 255, 255, 0.09);
    --primary: #3b82f6;
    --accent-purple: #8b5cf6;
    --accent-pink: #ec4899;
    --success: #10b981;
    --text-main: #f4f4f5;
    --text-muted: #8b8b93;
    --panda: #b5502e;
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Inter', -apple-system, sans-serif; }
/* Deliberately no overflow-x:hidden on html/body: setting it on either forces that
   element's overflow-y to compute as 'auto', which breaks the normal body->viewport
   scroll propagation and makes window.scrollTo/sticky positioning misbehave. Nothing
   in this layout actually overflows horizontally, so it isn't needed. */
html { scroll-behavior: smooth; }

body {
    background-color: var(--bg-dark);
    color: var(--text-main);
    min-height: 100vh;
}


/* ---------------------------------------------------------------------- */
/* Topbar — brand + search + account menu, with a second row of category  */
/* nav buttons (each a dropdown of that section's products, GAMIVO-style).*/
/* ---------------------------------------------------------------------- */
.topbar {
    position: sticky; top: 0; z-index: 20;
    background: #0c0c0e;
    border-bottom: 1px solid var(--card-border);
}
.topbar-inner {
    display: flex; align-items: center; gap: 20px;
    padding: 14px 24px;
    max-width: 1900px; margin: 0 auto;
}
.brand { font-weight: 800; font-size: 1.05rem; display: flex; align-items: center; gap: 10px; cursor: pointer; flex-shrink: 0; }
.brand-mascot-mini { width: 32px; height: 32px; display: inline-block; flex-shrink: 0; }
.panda-mini { width: 100%; height: 100%; object-fit: cover; border-radius: 9px; }
.brand-name-accent { color: var(--primary); }

.topbar-search {
    flex: 1; max-width: 460px; display: flex; align-items: center; gap: 10px;
    background: rgba(255,255,255,0.05); border: 1px solid var(--card-border); border-radius: 12px;
    padding: 9px 14px; color: var(--text-muted); cursor: text;
    transition: border-color 0.2s;
}
.topbar-search:focus-within { border-color: var(--primary); color: #fff; }
.topbar-search svg { width: 17px; height: 17px; flex-shrink: 0; }
.topbar-search input {
    background: transparent; border: none; outline: none; color: #fff; font-size: 0.9rem; width: 100%;
}
.topbar-search input::placeholder { color: var(--text-muted); }

.auth-area { display: flex; align-items: center; gap: 8px; }
.account-avatar { font-size: 1.1rem; line-height: 1; }
.account-name { font-weight: 600; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.88rem; }
.account-balance { color: var(--primary); font-weight: 700; font-size: 0.88rem; }

.account-menu { position: relative; flex-shrink: 0; margin-left: auto; }
.account-trigger {
    display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.05);
    border: 1px solid var(--card-border); border-radius: 12px; padding: 8px 12px;
    color: var(--text-main); cursor: pointer; transition: border-color 0.15s;
}
.account-trigger:hover { border-color: rgba(59,130,246,0.4); }
.account-chevron { width: 14px; height: 14px; color: var(--text-muted); transition: transform 0.15s; }
.account-menu.open .account-chevron { transform: rotate(180deg); }

.account-dropdown {
    position: absolute; top: calc(100% + 8px); right: 0;
    background: #131316; border: 1px solid var(--card-border); border-radius: 12px;
    padding: 6px; min-width: 200px; z-index: 30;
    display: none; flex-direction: column; gap: 2px;
    box-shadow: 0 12px 28px rgba(0,0,0,0.5);
}
.account-menu.open .account-dropdown { display: flex; }

.dropdown-item {
    display: block; width: 100%; text-align: left; background: transparent; border: none;
    color: var(--text-main); font-size: 0.85rem; font-weight: 600; text-decoration: none;
    padding: 9px 10px; border-radius: 8px; cursor: pointer; transition: background 0.15s;
}
.dropdown-item:hover { background: rgba(255,255,255,0.06); }
.dropdown-item-danger { color: #f87171; }

/* Capped so content doesn't stretch edge-to-edge into unusably wide rows on
   27"/24" monitors — .category-hero below still reaches this container's own
   edges exactly as before (its coordinate mapping is relative to .page, not
   the raw viewport), so nothing about tile positioning changes on screens
   under this width. */
.page { max-width: 1900px; margin: 0 auto; padding: 24px 20px 48px; position: relative; z-index: 2; }

.tab-content { display: none; }
.tab-content.active { display: block; }

@media (max-width: 860px) {
    .topbar-inner { padding: 12px 16px; flex-wrap: wrap; }
    .topbar-search { order: 3; max-width: none; flex-basis: 100%; }
    .page { padding: 20px 16px 40px; }
}

/* ---------------------------------------------------------------------- */
/* Category hero tiles — first thing on landing. Admin positions each tile */
/* in pixels on a 1200-units-wide design canvas (CATEGORY_TILE_CANVAS in   */
/* app/services/catalog.py); webshop.js converts pos_x/pos_y/width_px/     */
/* height_px into percentages of this container. X=0/width=1200 now maps  */
/* to the true edges of the browser window (full-bleed — breaks out of    */
/* .page's own side padding via negative margins below), not a            */
/* max-width:1200px box centered with empty margins on wide screens; the  */
/* "1200" is just the coordinate scale admin designs at, unrelated to the */
/* container's actual rendered pixel width on any given screen. The       */
/* container's aspect-ratio is set inline by loadCategoryTiles() to fit   */
/* the tallest tile's actual bottom edge rather than the full canvas      */
/* height, so small default tiles don't leave a huge empty gap.           */
/* Border look (none/solid/dashed) is still a separate per-tile toggle.   */
/* ---------------------------------------------------------------------- */
.category-hero {
    position: relative; margin: 0 -20px 28px; width: calc(100% + 40px);
    aspect-ratio: 1200 / 360; /* fallback until JS sets the real one */
}
@media (max-width: 860px) {
    .category-hero { margin: 0 -16px 28px; width: calc(100% + 32px); }
}
/* Shared by every admin-positioned element on the canvas — the 3 category
   tiles AND the login/register card (.auth-gate) — so all 4 use the exact
   same pos_x/pos_y/width_px/height_px -> % pipeline in webshop.js. */
.canvas-tile { position: absolute; }
.category-tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.02); border-radius: 16px; overflow: hidden;
    color: var(--text-main); cursor: pointer; transition: background 0.15s, box-shadow 0.15s;
    /* % padding always resolves against the container's WIDTH (both axes) —
       clamped in px so a short/thin tile doesn't get top+bottom padding that
       alone exceeds its own height and forces the box taller than configured. */
    gap: clamp(4px, 3%, 14px); padding: clamp(6px, 6%, 20px);
}
/* Wide, short tiles (height well under half their width) lay the icon and
   label side by side instead of stacked, since a column layout has almost
   no vertical room to work with. Toggled from loadCategoryTiles() based on
   each tile's own width_px/height_px. */
.category-tile.category-tile-wide { flex-direction: row; }
.category-tile:hover { background: rgba(59,130,246,0.06); box-shadow: 0 0 0 1px rgba(59,130,246,0.35) inset; }
.category-tile svg { width: 25%; height: auto; max-width: 56px; opacity: 0.85; }
.category-tile-img { width: 55%; max-width: 70%; aspect-ratio: 1 / 1; border-radius: 12px; object-fit: cover; }
/* Pixel-precise image placement within the tile (set inline by
   loadCategoryTiles() when the admin has configured img_x/y/width/height) —
   overrides the default auto-centered sizing above. */
.category-tile-img.category-tile-img-custom { position: absolute; max-width: none; aspect-ratio: auto; }
.category-tile span { font-weight: 700; font-size: clamp(0.68rem, 2.1vw, 0.95rem); text-align: center; }

/* Border presets — default is borderless (see complaint about dashed look).
   Shared with .auth-gate so the login card gets the same toggle. */
.canvas-tile[data-border="none"] { border: none; }
.canvas-tile[data-border="solid"] { border: 1px solid var(--card-border); }
.canvas-tile[data-border="dashed"] { border: 2px dashed var(--card-border); }
.canvas-tile[data-border="solid"]:hover,
.canvas-tile[data-border="dashed"]:hover { border-color: rgba(59,130,246,0.5); }

/* ---------------------------------------------------------------------- */
/* Spotlight row — one big promo card + two stacked cards (GAME PRIME hero)*/
/* ---------------------------------------------------------------------- */
.spotlight-row { display: grid; grid-template-columns: 1.7fr 1fr; gap: 16px; margin-bottom: 28px; }
.spotlight-side { display: flex; flex-direction: column; gap: 16px; }

.spotlight-card {
    position: relative; border-radius: 14px; overflow: hidden; cursor: pointer;
    border: 1px solid var(--card-border);
    transition: border-color 0.15s ease;
}
.spotlight-card:hover { border-color: rgba(59,130,246,0.4); }

.spotlight-main {
    padding: 32px 28px; min-height: 220px; display: flex; flex-direction: column; justify-content: center;
    background: #131316;
    border-color: rgba(59,130,246,0.3);
}
.spotlight-tag {
    align-self: flex-start; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px;
    padding: 5px 12px; border-radius: 20px; background: rgba(59,130,246,0.18); color: #93c5fd;
    border: 1px solid rgba(59,130,246,0.4); margin-bottom: 14px;
}
.spotlight-main h2 { font-size: 1.7rem; font-weight: 900; margin-bottom: 8px; max-width: 380px; }
.spotlight-main p { color: var(--text-muted); margin-bottom: 18px; max-width: 360px; }
.spotlight-cta { flex: none; display: inline-flex; }

.spotlight-small {
    flex: 1; padding: 18px 20px;
    background: #131316;
}
.spotlight-small.spotlight-ref { border-color: rgba(139,92,246,0.35); }
.spotlight-small h3 { font-size: 1rem; margin-bottom: 6px; }
.spotlight-small p { color: var(--text-muted); font-size: 0.85rem; margin-bottom: 10px; }
.spotlight-link { color: var(--primary); font-weight: 700; font-size: 0.85rem; }

/* ---------------------------------------------------------------------- */
/* Featured Games — horizontal-scroll strip of cover-art cards            */
/* ---------------------------------------------------------------------- */
.featured-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 14px; }
.featured-head h2 { font-size: 1.2rem; font-weight: 800; margin-bottom: 2px; }
.featured-arrows { display: flex; gap: 6px; }
.featured-arrows button {
    width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--card-border);
    background: rgba(255,255,255,0.05); color: var(--text-main); font-size: 1.1rem; cursor: pointer;
    transition: all 0.2s;
}
.featured-arrows button:hover { border-color: var(--primary); background: rgba(59,130,246,0.15); }

.featured-games-row {
    display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 32px;
    scroll-snap-type: x proximity; scrollbar-width: thin;
}
.featured-games-row .product-card { flex: 0 0 190px; scroll-snap-align: start; }

/* ---------------------------------------------------------------------- */
/* Scroll-reveal (scrollmation)                                            */
/* ---------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22,1,0.36,1); }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ---------------------------------------------------------------------- */
/* Cards / buttons / forms                                                 */
/* ---------------------------------------------------------------------- */
.card {
    background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 18px;
    padding: 22px; margin-bottom: 18px;
}

/* Positioned/sized by the admin like any other canvas-tile (see
   .canvas-tile above) instead of being a fixed-width card centered above
   the tiles — background/padding/border replicate the old .card look since
   this no longer gets that class. overflow-y:auto is a safety net in case
   the admin sizes it too short for the form to fit. */
.auth-gate {
    background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 18px;
    padding: clamp(14px, 5%, 28px); text-align: center; overflow-y: auto;
    display: flex; flex-direction: column; justify-content: center;
}
.auth-gate h1 { font-size: 1.4rem; margin-bottom: 8px; }
.muted { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 16px; }
.google-btn-container { display: flex; justify-content: center; margin-bottom: 16px; }
.divider { display: flex; align-items: center; color: var(--text-muted); font-size: 0.8rem; margin: 16px 0; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--card-border); }
.divider span { padding: 0 10px; }

.auth-form { display: flex; flex-direction: column; gap: 10px; }
.auth-form input, #productQty, #productLogin, #productGuestEmail, #payoutAmount, #payoutDetails, #nicknameInput {
    background: rgba(0,0,0,0.4); border: 1px solid var(--card-border); border-radius: 12px;
    padding: 12px 14px; color: #fff; font-size: 0.95rem; width: 100%;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.auth-form input:focus, #productQty:focus, #productLogin:focus, #productGuestEmail:focus, #payoutAmount:focus, #payoutDetails:focus, #nicknameInput:focus {
    outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(59,130,246,0.2);
}

.nickname-row { display: flex; gap: 10px; }
.nickname-row #nicknameInput { flex: 1; }
.nickname-row .btn { flex-shrink: 0; }

.toggle-row {
    display: flex; align-items: center; gap: 12px; margin-top: 16px; cursor: pointer;
    font-size: 0.9rem; user-select: none;
}
.toggle-switch { position: relative; display: inline-flex; flex-shrink: 0; }
.toggle-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle-track {
    width: 42px; height: 24px; border-radius: 999px; background: rgba(255,255,255,0.12);
    border: 1px solid var(--card-border); transition: background 0.2s; display: block;
}
.toggle-thumb {
    display: block; width: 18px; height: 18px; border-radius: 50%; background: #fff;
    margin: 2px; transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.toggle-switch input:checked + .toggle-track { background: var(--primary); }
.toggle-switch input:checked + .toggle-track .toggle-thumb { transform: translateX(18px); }
.toggle-switch input:focus-visible + .toggle-track { box-shadow: 0 0 0 3px rgba(59,130,246,0.3); }
.auth-form-actions { display: flex; gap: 10px; margin-top: 4px; }
.error-text { color: var(--accent-pink); font-size: 0.85rem; margin-top: 8px; min-height: 1.2em; }

.btn {
    border: none; border-radius: 10px; padding: 12px 18px; font-weight: 700; cursor: pointer; font-size: 0.9rem;
    flex: 1; transition: filter 0.15s;
}
.btn:hover { filter: brightness(1.1); }
.btn-primary { background: linear-gradient(135deg, var(--primary), var(--accent-purple)); color: #fff; }
.btn-secondary { background: rgba(255,255,255,0.08); color: var(--text-main); }

/* ---------------------------------------------------------------------- */
/* Catalog grid — product cards                                           */
/* ---------------------------------------------------------------------- */
.catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(206px, 1fr)); gap: 14px; }

/* Card anatomy follows the ggsel reference: a product image on top (that image
   IS the color — a real per-product picture, supplied per product), then plain
   text below on the same neutral dark surface as the rest of the site. Nothing
   is drawn over the image itself except the small section badge, so a card with
   no real art yet stays a flat neutral tile rather than a synthetic gradient. */
.product-card {
    /* Slightly more opaque than the site-wide --card-bg glass tint — this card holds
       real text/buttons a buyer needs to read, not just a decorative surface, and the
       ambient community-wall name animation behind it showed through at --card-bg's
       usual near-zero opacity. */
    background: rgba(18, 18, 22, 0.92); border: 1px solid var(--card-border); border-radius: 12px;
    padding: 0; overflow: hidden; cursor: pointer;
    display: flex; flex-direction: column;
    transition: border-color 0.15s ease;
}
.product-card:hover { border-color: rgba(59,130,246,0.4); }

.product-card-art {
    aspect-ratio: 1 / 1; position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: #16161a;
}
.product-card.has-art .product-card-art {
    background-image: var(--art-url);
    background-size: cover;
    background-position: center;
}

/* No real photo yet — a small, dim category glyph instead of a bare tile. */
.cat-watermark {
    width: 40px; height: 40px; color: var(--text-muted); opacity: 0.6;
}
.cat-watermark svg { width: 100%; height: 100%; }

.product-card-badge {
    position: absolute; top: 8px; left: 8px; z-index: 2;
    font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
    padding: 3px 9px; border-radius: 20px;
    background: rgba(9, 9, 11, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.14); color: var(--text-main);
}

.product-card-body { padding: 14px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.product-card h3 { font-size: 0.92rem; line-height: 1.3; margin-bottom: 2px; }
.product-card .cat-label { color: var(--text-muted); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.5px; }
.product-card-subtitle {
    color: var(--text-muted); font-size: 0.78rem; line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    margin-bottom: 4px;
}
.product-card-footer {
    margin-top: auto; padding-top: 8px;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.product-card .card-price-hint { color: var(--text-main); font-weight: 800; font-size: 0.95rem; }
.product-card-cta {
    flex-shrink: 0; color: var(--primary); font-weight: 700; font-size: 0.78rem;
    padding: 5px 10px; border-radius: 8px; background: rgba(59,130,246,0.14);
}

.referral-hero h2 { font-size: 1.3rem; margin-bottom: 8px; }
.referral-hero p { color: var(--text-muted); margin-bottom: 14px; }
.ref-link-row { display: flex; gap: 8px; }
.ref-link-row input { flex: 1; background: rgba(0,0,0,0.4); border: 1px solid var(--card-border); border-radius: 10px; padding: 10px; color: #fff; }

.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
.stat-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 16px; padding: 18px; text-align: center; }
.stat-num { display: block; font-size: 1.4rem; font-weight: 800; color: var(--primary); }
.stat-lbl { color: var(--text-muted); font-size: 0.8rem; }

/* ---------------------------------------------------------------------- */
/* Order history                                                           */
/* ---------------------------------------------------------------------- */
.order-history-list { display: flex; flex-direction: column; gap: 10px; }
.order-row {
    display: flex; justify-content: space-between; align-items: center; gap: 14px;
    padding: 12px 0; border-bottom: 1px solid var(--card-border);
}
.order-row:last-child { border-bottom: none; }
.order-row-title { font-weight: 700; font-size: 0.9rem; }
.order-row-meta { color: var(--text-muted); font-size: 0.76rem; margin-top: 2px; }
.order-row-right { text-align: right; flex-shrink: 0; }
.order-row-price { display: block; font-weight: 800; margin-top: 2px; }
.order-status { font-size: 0.72rem; font-weight: 700; padding: 2px 8px; border-radius: 20px; }
.order-status-success { background: rgba(16,185,129,0.15); color: #34d399; }
.order-status-paid, .order-status-processing { background: rgba(59,130,246,0.15); color: #60a5fa; }
.order-status-pending { background: rgba(255,255,255,0.08); color: var(--text-muted); }
.order-status-failed, .order-status-cancelled { background: rgba(239,68,68,0.15); color: #f87171; }
.order-status-refunded { background: rgba(139,92,246,0.15); color: #a78bfa; }

/* ---------------------------------------------------------------------- */
/* Product detail "page" — slides in over the catalog                     */
/* ---------------------------------------------------------------------- */
.product-view {
    position: fixed; inset: 0; z-index: 40; background: var(--bg-dark);
    overflow-y: auto;
    transform: translateY(100%); opacity: 0; pointer-events: none;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s;
}
.product-view.open { transform: translateY(0); opacity: 1; pointer-events: auto; }

.product-view-inner { max-width: 1080px; margin: 0 auto; padding: 20px 20px 60px; }
.btn-back {
    background: none; border: none; color: var(--text-muted); font-size: 0.9rem; cursor: pointer;
    padding: 10px 0; margin-bottom: 10px; transition: color 0.2s, transform 0.2s;
}
.btn-back:hover { color: #fff; transform: translateX(-4px); }

/* Image left / info right on desktop (single column on mobile), per the
   reference product-page layout the user provided. */
.product-view-grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 860px) {
    .product-view-grid { grid-template-columns: minmax(0, 460px) 1fr; align-items: start; }
    .product-gallery { position: sticky; top: 20px; }
}

.product-hero {
    aspect-ratio: 1 / 1; border-radius: 20px; position: relative; overflow: hidden;
    background: #16161a; border: 1px solid var(--card-border);
}
.product-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.product-hero-watermark {
    position: absolute; inset: 0; z-index: 1; align-items: center; justify-content: center;
    color: #fff; opacity: 0.32;
}
.product-hero-watermark svg { width: 96px; height: 96px; }

.product-cat-label { color: var(--text-muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 6px; }
.product-info h1 { font-size: 1.6rem; margin-bottom: 14px; }

.product-price { font-size: 1.5rem; font-weight: 800; color: var(--primary); margin-bottom: 20px; }

.product-variant-select {
    width: 100%; background: rgba(0,0,0,0.4); border: 1.5px solid var(--card-border); border-radius: 12px;
    padding: 14px 16px; color: #fff; font-size: 0.95rem; margin-bottom: 16px; cursor: pointer;
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2394a3b8'><path d='M5.5 7.5l4.5 5 4.5-5z'/></svg>");
    background-repeat: no-repeat; background-position: right 14px center;
    transition: border-color 0.2s;
}
.product-variant-select:focus { outline: none; border-color: var(--primary); }
.product-variant-select option { background: #121826; color: #fff; }

.product-variant-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.product-variant-option {
    display: flex; align-items: center; justify-content: space-between;
    background: rgba(255,255,255,0.04); border: 1.5px solid var(--card-border); border-radius: 12px;
    padding: 12px 16px; cursor: pointer; transition: all 0.2s;
}
.product-variant-option:hover { border-color: rgba(59,130,246,0.5); }
.product-variant-option.selected { border-color: var(--primary); background: rgba(59,130,246,0.12); }
.product-variant-option .v-label { font-size: 0.9rem; }
.product-variant-option .v-price { color: var(--primary); font-weight: 700; }

.product-qty-row, .product-login-row { margin-bottom: 16px; }
.product-qty-row label, .product-login-row label { display: block; font-size: 0.8rem; margin-bottom: 6px; }

.product-payment-method-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.product-payment-method-row > label { font-size: 0.8rem; }
.product-payment-method-options { display: flex; gap: 8px; flex-wrap: wrap; }
.payment-method-btn {
    flex: 1; min-width: 90px; padding: 10px 12px; border-radius: 10px;
    border: 1px solid var(--card-border); background: rgba(255,255,255,0.03);
    color: var(--text-main); font-size: 0.85rem; font-weight: 600; cursor: pointer;
    transition: all 0.15s;
}
.payment-method-btn:hover { border-color: rgba(59,130,246,0.5); }
.payment-method-btn.active { border-color: var(--primary); background: rgba(59,130,246,0.12); color: var(--primary); }
.payment-method-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.payment-method-btn:disabled:hover { border-color: var(--card-border); }
.soon-badge { font-size: 0.65rem; font-weight: 700; margin-left: 4px; padding: 2px 6px; border-radius: 6px; background: rgba(139,92,246,0.2); color: #c4b5fd; }

.product-buy-row { margin-top: 4px; margin-bottom: 6px; }
.product-buy-row .btn { width: 100%; padding: 14px 16px; font-size: 0.98rem; }

.product-description {
    color: var(--text-muted); font-size: 0.9rem; line-height: 1.6; white-space: pre-line;
    margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--card-border);
}

/* ---------------------------------------------------------------------- */
/* Product comments                                                        */
/* ---------------------------------------------------------------------- */
.product-comments { max-width: 1080px; margin: 28px auto 0; padding-top: 20px; border-top: 1px solid var(--card-border); }
.product-comments h3 { font-size: 1rem; margin-bottom: 14px; }

.comment-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.comment-item { padding-bottom: 12px; border-bottom: 1px solid var(--card-border); }
.comment-item:last-child { border-bottom: none; padding-bottom: 0; }
.comment-item-head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.comment-item-author { font-weight: 700; font-size: 0.85rem; }
.comment-item-date { color: var(--text-muted); font-size: 0.75rem; }
.comment-item-text { font-size: 0.88rem; line-height: 1.5; color: var(--text-main); }

.comment-form { display: flex; gap: 10px; align-items: flex-start; }
.comment-form textarea {
    flex: 1; background: rgba(0,0,0,0.4); border: 1px solid var(--card-border); border-radius: 10px;
    padding: 10px 12px; color: #fff; font-size: 0.88rem; font-family: inherit; resize: vertical;
    transition: border-color 0.2s;
}
.comment-form textarea:focus { outline: none; border-color: var(--primary); }
.comment-form .btn { flex: none; }

/* Ambient sitewide background — bouncing nickname plaques behind every tab/page,
   independent of which catalog section is open. Sits below .topbar (z-index:20) and
   .page (z-index:2) so real content always stays on top and clickable. */
.community-wall-bg {
    position: fixed; inset: 0; z-index: 1; overflow: hidden; pointer-events: none;
}

/* Bouncing DVD-logo-style nicknames — text only, no plaque/box, like the classic
   screensaver wordmark. Position/rotation driven every frame by JS via `transform`.
   Dimmed since this is decoration behind real content, not a focal UI element. */
.community-wall-entry {
    position: absolute; top: 0; left: 0; will-change: transform; opacity: 0.22;
    display: flex; flex-direction: column; align-items: center; gap: 0; padding: 4px;
}
.community-wall-entry .plaque-name {
    font-family: 'Baloo 2', 'Poppins', sans-serif;
    font-weight: 800; font-size: 1.9rem; letter-spacing: 0.01em;
    color: hsl(var(--plaque-hue), 90%, 65%);
    /* Glow kept small — product cards sit above this layer but their background is
       near-transparent (--card-bg), so a wide/bright blur bled through card text
       and buttons whenever a bouncing name passed behind one. */
    text-shadow: 0 0 6px hsl(var(--plaque-hue), 90%, 55%, 0.35), 0 2px 4px rgba(0,0,0,0.5);
}
.community-wall-entry .role-badge {
    font-size: 0.6rem; font-weight: 700; opacity: 0.75; text-transform: uppercase;
    letter-spacing: 0.1em; color: hsl(var(--plaque-hue), 60%, 80%);
}
.community-wall-entry.role-founder .plaque-name { color: #ffffff; text-shadow: 0 0 20px rgba(255,255,255,0.5), 0 2px 4px rgba(0,0,0,0.5); }
.community-wall-entry.role-partner .plaque-name { color: #a78bfa; text-shadow: 0 0 18px rgba(167,139,250,0.6), 0 2px 4px rgba(0,0,0,0.5); }

.vpn-pickup-panel {
    margin-top: 20px; padding: 20px; border-radius: 16px;
    background: var(--card-bg); border: 1px solid var(--card-border); text-align: center;
}
.vpn-qr { width: 200px; height: 200px; border-radius: 12px; margin: 0 auto 16px; display: block; background: #fff; padding: 8px; }

.toast {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
    background: #18181b; color: #fff; padding: 12px 20px; border-radius: 12px;
    border: 1px solid var(--card-border); border-left: 3px solid var(--primary);
    font-weight: 600; opacity: 0; pointer-events: none; transition: all 0.3s; z-index: 60;
    box-shadow: 0 12px 28px rgba(0,0,0,0.5);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 600px) {
    .spotlight-row { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    /* 2-up grid instead of 1 huge full-width card per row — a single
       206px+ column made every mobile card ~440px tall (near a full
       screen each), which made browsing feel broken/endless. */
    .catalog-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .product-card-body { padding: 10px; gap: 2px; }
    .product-card h3 { font-size: 0.82rem; }
    .product-card-subtitle { font-size: 0.72rem; -webkit-line-clamp: 1; }
    .product-card .card-price-hint { font-size: 0.85rem; }
    .product-card-cta { font-size: 0.7rem; padding: 4px 8px; }
    /* Price + CTA no longer fit on one line at ~166px card width — stack them. */
    .product-card-footer { flex-direction: column; align-items: flex-start; gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* Compliance legal footer */
.app-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 20px 12px;
    margin: 24px auto 0;
    max-width: 1200px;
    border-top: 1px solid var(--card-border);
    font-size: 0.78rem;
    color: var(--text-muted);
}

.footer-links a {
    color: #60a5fa;
    text-decoration: none;
    font-weight: 600;
}

.footer-links a:hover { text-decoration: underline; }

/* Payment agreement checkbox above the "Оплатить" button */
.product-agreement-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 10px 0;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.product-agreement-row input[type="checkbox"] {
    margin-top: 2px;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    accent-color: var(--accent-purple);
    cursor: pointer;
}

.product-agreement-row label { cursor: pointer; }
.product-agreement-row a { color: #60a5fa; text-decoration: none; }
.product-agreement-row a:hover { text-decoration: underline; }

.btn-buy-ripple:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.promo-input-row { display: flex; gap: 8px; }
.promo-input-row input { flex: 1; text-transform: uppercase; }
.promo-input-row .btn { flex-shrink: 0; }
.promo-msg { font-size: 0.78rem; margin-top: 6px; min-height: 1em; }
.promo-msg.ok { color: var(--success); }
.promo-msg.err { color: #f87171; }
#productPromo {
    background: rgba(0,0,0,0.4); border: 1px solid var(--card-border); border-radius: 12px;
    padding: 12px 14px; color: #fff; font-size: 0.95rem; width: 100%;
}
#productPromo:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(59,130,246,0.2); }