/* ========================================
   IMPORTS
======================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@500;600;700&display=swap');

/* ========================================
   LEGAL PAGES - FIX OVERLAP
======================================== */
/* Give legal pages proper spacing */
.legal-page {
    padding: 140px 0 60px;
    min-height: 100vh;
    background: #0a0a0a;
}

.legal-content {
    max-width: 820px;
    margin: 0 auto;
    background: rgba(20, 20, 20, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 16px;
    padding: 48px 56px;
}

/* Breadcrumb */
.legal-breadcrumb {
    font-size: 14px;
    color: #666666;
    margin-bottom: 20px;
}

    .legal-breadcrumb a {
        color: #888888;
        text-decoration: none;
        transition: color 0.3s ease;
    }

        .legal-breadcrumb a:hover {
            color: #cc0000;
        }

    .legal-breadcrumb .separator {
        margin: 0 8px;
        color: #444444;
    }

    .legal-breadcrumb span:last-child {
        color: #cccccc;
    }

.legal-content h1 {
    font-size: 36px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 20px;
}

.legal-content p {
    color: #cccccc;
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 16px;
}

.legal-content h2 {
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
    margin-top: 32px;
    margin-bottom: 12px;
}

.legal-content ul {
    color: #cccccc;
    font-size: 15px;
    line-height: 1.8;
    padding-left: 24px;
    margin-bottom: 16px;
}

    .legal-content ul li {
        margin-bottom: 6px;
    }

.legal-content a {
    color: #cc0000;
    text-decoration: none;
}

    .legal-content a:hover {
        text-decoration: underline;
    }

.legal-content strong {
    color: #ffffff;
}

/* Responsive */
@media (max-width: 768px) {
    .legal-content {
        padding: 32px 20px;
    }

        .legal-content h1 {
            font-size: 28px;
        }

        .legal-content h2 {
            font-size: 20px;
        }
}

/* ========================================
   LEGAL PAGES (Terms, Privacy, Refund)
======================================== */
.legal-page {
    padding: 140px 0 60px;
}

.legal-content {
    max-width: 820px;
    margin: 0 auto;
    background: rgba(20, 20, 20, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 16px;
    padding: 48px 56px;
}

    .legal-content h1 {
        font-size: 36px;
        font-weight: 800;
        color: #ffffff;
        margin-bottom: 4px;
    }

    .legal-content .legal-date {
        color: #666666;
        font-size: 14px;
        margin-bottom: 32px;
    }

    .legal-content p {
        color: #cccccc;
        font-size: 15px;
        line-height: 1.8;
        margin-bottom: 16px;
    }

    .legal-content h2 {
        font-size: 22px;
        font-weight: 700;
        color: #ffffff;
        margin-top: 32px;
        margin-bottom: 12px;
    }

    .legal-content h3 {
        font-size: 18px;
        font-weight: 600;
        color: #ffffff;
        margin-top: 20px;
        margin-bottom: 8px;
    }

    .legal-content ul,
    .legal-content ol {
        color: #cccccc;
        font-size: 15px;
        line-height: 1.8;
        padding-left: 24px;
        margin-bottom: 16px;
    }

        .legal-content ul li,
        .legal-content ol li {
            margin-bottom: 6px;
        }

    .legal-content a {
        color: #cc0000;
        text-decoration: none;
    }

        .legal-content a:hover {
            text-decoration: underline;
        }

    .legal-content strong {
        color: #ffffff;
    }

/* Responsive */
@media (max-width: 768px) {
    .legal-content {
        padding: 32px 20px;
    }

        .legal-content h1 {
            font-size: 28px;
        }

        .legal-content h2 {
            font-size: 20px;
        }
}

/* ========================================
   CART ITEM ICONS
======================================== */
.cart-item-icon-img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    display: block;
    image-rendering: auto;
}

/* ========================================
   SHOWCASE CUSTOM ICONS
======================================== */
.showcase-header .showcase-icon-img {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: block;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.showcase-card:hover .showcase-icon-img {
    transform: scale(1.1);
}

/* If using SVG icons, ensure they inherit color from the parent */
.showcase-header .showcase-icon-img path {
    stroke: currentColor;
}

/* Responsive */
@media (max-width: 768px) {
    .showcase-header .showcase-icon-img {
        width: 20px;
        height: 20px;
    }
}

/* ========================================
   CUSTOM CART ICON
======================================== */
.nav-cart .cart-icon-img {
    width: 22px;
    height: 22px;
    display: block;
    transition: transform 0.3s ease;
}

.nav-cart:hover .cart-icon-img {
    transform: scale(1.1);
}

/* If using SVG, ensure it inherits color */
.nav-cart .cart-icon-img svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Responsive */
@media (max-width: 768px) {
    .nav-cart .cart-icon-img {
        width: 18px;
        height: 18px;
    }
}

/* ========================================
   LANGUAGE BUTTON
======================================== */
.lang-li {
    margin-left: 4px;
}

.lang-btn {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: #888888;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Inter', sans-serif;
}

    .lang-btn:hover {
        background: rgba(204, 0, 0, 0.08);
        border-color: rgba(204, 0, 0, 0.15);
        color: #ffffff;
    }

    .lang-btn .lang-flag {
        font-size: 16px;
        line-height: 1;
    }

    .lang-btn .lang-code {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.5px;
    }

/* Responsive */
@media (max-width: 768px) {
    .lang-btn {
        padding: 4px 10px;
        font-size: 12px;
    }

        .lang-btn .lang-flag {
            font-size: 14px;
        }

        .lang-btn .lang-code {
            font-size: 10px;
        }
}

/* ========================================
   CART PAGE
======================================== */
.cart-page {
    padding: 140px 0 60px;
}

.cart-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

    .cart-page-header h1 {
        font-size: 28px;
        font-weight: 700;
        color: #ffffff;
    }

.cart-page-count {
    font-size: 14px;
    color: #888888;
}

.cart-page-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 40px;
    align-items: start;
}

/* Cart Items List */
.cart-items-list {
    min-height: 200px;
}

.cart-empty {
    text-align: center;
    padding: 60px 20px;
    background: rgba(20, 20, 20, 0.4);
    border-radius: 12px;
    border: 1px dashed rgba(255, 255, 255, 0.04);
}

.cart-empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.3;
}

.cart-empty h3 {
    font-size: 18px;
    color: #ffffff;
    margin-bottom: 8px;
}

.cart-empty p {
    font-size: 14px;
    color: #666666;
    margin-bottom: 20px;
}

.cart-empty .btn-primary {
    padding: 12px 32px;
    font-size: 14px;
}

/* Cart Item */
.cart-item-row {
    display: flex;
    align-items: center;
    padding: 16px;
    background: rgba(20, 20, 20, 0.4);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.03);
    margin-bottom: 12px;
    transition: all 0.3s ease;
}

    .cart-item-row:hover {
        border-color: rgba(204, 0, 0, 0.1);
    }

.cart-item-icon {
    width: 48px;
    height: 48px;
    margin-right: 14px;
    border: 1px solid rgba(255, 255, 255, 0.065);
    border-radius: 11px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 8px 24px rgba(0, 0, 0, 0.16);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 48px;
    overflow: hidden;
}

.cart-item-info {
    flex: 1;
}

.cart-item-name {
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
}

.cart-item-variant {
    font-size: 12px;
    color: #666666;
}

.cart-item-price {
    font-size: 16px;
    font-weight: 700;
    color: #cc0000;
    margin: 0 16px;
}

.cart-item-quantity {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 6px;
    padding: 4px 8px;
}

    .cart-item-quantity button {
        background: none;
        border: none;
        color: #888888;
        font-size: 18px;
        cursor: pointer;
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        transition: all 0.3s ease;
    }

        .cart-item-quantity button:hover {
            color: #ffffff;
            background: rgba(255, 255, 255, 0.04);
        }

    .cart-item-quantity span {
        font-size: 14px;
        font-weight: 600;
        color: #ffffff;
        min-width: 24px;
        text-align: center;
    }

.cart-item-remove {
    background: none;
    border: none;
    color: #666666;
    cursor: pointer;
    font-size: 18px;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

    .cart-item-remove:hover {
        color: #cc0000;
        background: rgba(204, 0, 0, 0.06);
    }

/* Cart Summary */
.cart-summary {
    position: sticky;
    top: 120px;
}

.cart-summary-card {
    background: rgba(20, 20, 20, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 16px;
    padding: 28px 24px;
}

    .cart-summary-card h3 {
        font-size: 16px;
        font-weight: 600;
        color: #ffffff;
        margin-bottom: 16px;
    }

.cart-summary-items {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.cart-empty-summary {
    font-size: 13px;
    color: #666666;
    text-align: center;
    padding: 8px 0;
}

.cart-summary-item {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 13px;
    color: #aaaaaa;
}

    .cart-summary-item .summary-item-price {
        color: #ffffff;
        font-weight: 500;
    }

/* Discount code */
.cart-discount-box {
    margin: 0 0 18px;
    padding: 16px 0 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.045);
}

.cart-discount-box label {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 10px;
    color: #c9c9ce;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.01em;
}

.cart-discount-box label::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #d40000;
    box-shadow: 0 0 10px rgba(212, 0, 0, 0.55);
    flex: 0 0 auto;
}

.cart-discount-input-row {
    display: flex;
    align-items: stretch;
    width: 100%;
    padding: 4px;
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 12px;
    background:
        linear-gradient(180deg, rgba(18, 18, 20, 0.98), rgba(8, 8, 10, 0.98));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.035),
        0 8px 22px rgba(0, 0, 0, 0.16);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.cart-discount-input-row:hover {
    border-color: rgba(255, 255, 255, 0.12);
}

.cart-discount-input-row:focus-within {
    border-color: rgba(218, 0, 0, 0.68);
    background: linear-gradient(180deg, rgba(21, 17, 18, 0.99), rgba(9, 8, 9, 0.99));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 0 0 3px rgba(204, 0, 0, 0.075),
        0 10px 26px rgba(0, 0, 0, 0.18);
}

.cart-discount-input-row input {
    width: 100%;
    min-width: 0;
    height: 46px;
    padding: 0 13px;
    border: 0;
    border-radius: 8px;
    outline: none;
    background: transparent;
    color: #ffffff;
    font: inherit;
    font-size: 13px;
    font-weight: 650;
    letter-spacing: 0.045em;
    text-transform: uppercase;
    caret-color: #ef2020;
    appearance: none;
}

.cart-discount-input-row input::placeholder {
    color: #5f6067;
    font-weight: 600;
    letter-spacing: 0.04em;
    opacity: 1;
}

.cart-discount-input-row button {
    height: 46px;
    min-width: 102px;
    padding: 0 16px;
    border: 1px solid rgba(229, 0, 0, 0.38);
    border-radius: 9px;
    background: linear-gradient(180deg, rgba(190, 8, 8, 0.28), rgba(110, 0, 0, 0.18));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
    color: #f6f6f7;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.cart-discount-input-row button:hover:not(:disabled) {
    border-color: rgba(255, 20, 20, 0.64);
    background: linear-gradient(180deg, rgba(220, 10, 10, 0.40), rgba(135, 0, 0, 0.26));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 5px 16px rgba(178, 0, 0, 0.12);
}

.cart-discount-input-row button:active:not(:disabled) {
    transform: translateY(1px);
}

.cart-discount-input-row button:disabled {
    cursor: wait;
    opacity: 0.58;
}

.cart-discount-status {
    min-height: 0;
    margin-top: 0;
    overflow: hidden;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.45;
    color: #85858b;
    transition: margin-top 0.2s ease;
}

.cart-discount-status:not(:empty) {
    min-height: 18px;
    margin-top: 9px;
}

.cart-discount-status.success {
    color: #5bdd96;
}

.cart-discount-status.error {
    color: #ff7474;
}

.cart-discount-breakdown {
    margin: -4px 0 14px;
    padding: 11px 12px;
    border: 1px solid rgba(255, 255, 255, 0.055);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.026), rgba(255, 255, 255, 0.014));
}

.cart-discount-breakdown[hidden] {
    display: none !important;
}

.cart-discount-breakdown > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
    color: #93939a;
    font-size: 12px;
}

.cart-discount-breakdown strong {
    color: #ececef;
    font-weight: 700;
}

.cart-discount-breakdown .discount-saved-row strong {
    color: #5bdd96;
}

.cart-summary-total {
    display: flex;
    justify-content: space-between;
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    padding: 12px 0;
}

    .cart-summary-total span:last-child {
        color: #cc0000;
    }

.cart-checkout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    background: #cc0000;
    color: #ffffff;
    border: none;
    padding: 14px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 4px;
}

    .cart-checkout-btn:hover {
        background: #ff0000;
        box-shadow: 0 8px 30px rgba(204, 0, 0, 0.3);
    }

.cart-continue-shopping {
    display: block;
    text-align: center;
    font-size: 13px;
    color: #666666;
    margin-top: 14px;
    transition: color 0.3s ease;
}

    .cart-continue-shopping:hover {
        color: #cc0000;
    }

/* ========================================
   RESPONSIVE CART
======================================== */
@media (max-width: 992px) {
    .cart-page-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .cart-summary {
        position: static;
    }

    .cart-item-row {
        flex-wrap: wrap;
        gap: 10px;
    }

    .cart-item-price {
        margin-left: auto;
    }
}

@media (max-width: 768px) {
    .cart-page {
        padding: 110px 0 40px;
    }

    .cart-page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .cart-item-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .cart-item-price {
        margin-left: 0;
    }
}

/* ========================================
   RESET & BASE
======================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    /* Keep in-page anchors clear of the fixed navigation bar. */
    scroll-padding-top: 82px;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #0a0a0a;
    color: #e0e0e0;
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

::selection {
    background: #cc0000;
    color: #ffffff;
}

a {
    text-decoration: none;
    color: inherit;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ========================================
   BACKGROUND - PERFORMANCE OPTIMIZED
======================================== */
.animated-bg {
    position: fixed;
    inset: 0;
    z-index: -3;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 18%, rgba(204, 0, 0, 0.09), transparent 31%),
        radial-gradient(circle at 82% 78%, rgba(150, 0, 0, 0.07), transparent 29%),
        linear-gradient(180deg, #0b0b0c 0%, #080808 100%);
    contain: strict;
}

.animated-bg::before,
.animated-bg::after {
    content: '';
    position: absolute;
    inset: -8%;
    pointer-events: none;
    will-change: transform, opacity;
}

.animated-bg::before {
    background:
        radial-gradient(ellipse at 28% 30%, rgba(255, 45, 45, 0.055) 0%, rgba(204, 0, 0, 0.025) 24%, transparent 48%),
        radial-gradient(ellipse at 72% 66%, rgba(180, 0, 0, 0.045) 0%, transparent 44%);
    opacity: 0.8;
    animation: ambientDrift 24s ease-in-out infinite alternate;
}

.animated-bg::after {
    background:
        radial-gradient(ellipse at 56% 42%, rgba(255, 255, 255, 0.012) 0%, transparent 30%),
        radial-gradient(ellipse at 43% 74%, rgba(220, 0, 0, 0.035) 0%, transparent 42%);
    opacity: 0.7;
    animation: ambientDriftReverse 30s ease-in-out infinite alternate;
}

.orb {
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    z-index: -2;
    opacity: 0.16;
    will-change: transform, opacity;
    contain: strict;
}

.orb::after {
    content: '';
    position: absolute;
    inset: 21%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 120, 120, 0.16) 0%, rgba(255, 45, 45, 0.05) 35%, transparent 72%);
}

.orb-1 {
    width: 500px;
    height: 500px;
    top: -155px;
    left: -135px;
    background: radial-gradient(circle, rgba(255, 70, 70, 0.44) 0%, rgba(204, 0, 0, 0.17) 32%, rgba(145, 0, 0, 0.055) 54%, transparent 72%);
    animation: orbFloatOne 26s ease-in-out infinite, orbPulse 10s ease-in-out infinite;
}

.orb-2 {
    width: 430px;
    height: 430px;
    right: -120px;
    bottom: -115px;
    background: radial-gradient(circle, rgba(225, 45, 45, 0.36) 0%, rgba(153, 0, 0, 0.15) 34%, rgba(120, 0, 0, 0.04) 56%, transparent 74%);
    animation: orbFloatTwo 31s ease-in-out infinite, orbPulse 12s ease-in-out infinite -3s;
}

.orb-3 {
    width: 330px;
    height: 330px;
    top: 48%;
    left: 52%;
    background: radial-gradient(circle, rgba(255, 55, 55, 0.31) 0%, rgba(204, 0, 0, 0.12) 36%, rgba(140, 0, 0, 0.035) 57%, transparent 74%);
    animation: orbFloatThree 28s ease-in-out infinite, orbPulse 11s ease-in-out infinite -5s;
}

@keyframes orbFloatOne {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    35% { transform: translate3d(60px, 36px, 0) scale(1.06); }
    70% { transform: translate3d(16px, 76px, 0) scale(0.97); }
}

@keyframes orbFloatTwo {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    30% { transform: translate3d(-46px, -68px, 0) scale(1.05); }
    65% { transform: translate3d(-88px, -18px, 0) scale(0.96); }
}

@keyframes orbFloatThree {
    0%, 100% { transform: translate3d(-50%, -50%, 0) scale(1); }
    33% { transform: translate3d(calc(-50% + 34px), calc(-50% - 46px), 0) scale(1.06); }
    66% { transform: translate3d(calc(-50% - 42px), calc(-50% + 30px), 0) scale(0.94); }
}

@keyframes orbPulse {
    0%, 100% { opacity: 0.12; }
    50% { opacity: 0.18; }
}

@keyframes ambientDrift {
    0% { transform: translate3d(-1.5%, -1%, 0) scale(1); }
    100% { transform: translate3d(1.5%, 1.5%, 0) scale(1.025); }
}

@keyframes ambientDriftReverse {
    0% { transform: translate3d(1%, 1.5%, 0) scale(1.015); }
    100% { transform: translate3d(-1.5%, -1%, 0) scale(0.99); }
}

@media (max-width: 768px) {
    .orb { opacity: 0.14; }
    .orb-1 { width: 360px; height: 360px; }
    .orb-2 { width: 300px; height: 300px; }
    .orb-3 { width: 240px; height: 240px; }
}

@media (prefers-reduced-motion: reduce) {
    .animated-bg::before,
    .animated-bg::after,
    .orb { animation: none !important; }
}

/* ========================================
   NAVIGATION
======================================== */
.navbar {
    background: rgba(10, 10, 10, 0.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    padding: 16px 0;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    transition: all 0.3s ease;
}

    .navbar.scrolled {
        background: rgba(10, 10, 10, 0.97);
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
    }

    .navbar .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

.nav-brand a {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.logo-img {
    height: 32px;
    width: auto;
    transition: transform 0.3s ease;
}

    .logo-img:hover {
        transform: scale(1.05);
    }

.logo-text {
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 3px;
    color: #ffffff;
    transition: color 0.3s ease;
}

    .logo-text:hover {
        color: #cc0000;
    }

.nav-menu {
    display: flex;
    list-style: none;
    gap: 32px;
    align-items: center;
}

    .nav-menu a {
        color: #888888;
        font-size: 14px;
        font-weight: 500;
        transition: all 0.3s ease;
        position: relative;
        padding: 4px 0;
        letter-spacing: 0.3px;
    }

        .nav-menu a::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 2px;
            background: #cc0000;
            transition: width 0.3s ease;
        }

        .nav-menu a:hover::after, .nav-menu a.active::after {
            width: 100%;
        }

        .nav-menu a:hover, .nav-menu a.active {
            color: #ffffff;
        }

.nav-cta {
    background: #cc0000;
    color: #ffffff !important;
    padding: 8px 24px !important;
    border-radius: 6px;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    font-size: 13px !important;
    letter-spacing: 0.3px !important;
}

    .nav-cta::after {
        display: none !important;
    }

    .nav-cta:hover {
        background: #ff0000;
        transform: scale(1.02);
        box-shadow: 0 0 30px rgba(204, 0, 0, 0.25);
        color: #ffffff !important;
    }

.hamburger {
    display: none;
    background: none;
    border: none;
    color: #ffffff;
    font-size: 24px;
    cursor: pointer;
}

/* ========================================
   NAV CART ICON
======================================== */
.nav-cart {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888888;
    transition: color 0.3s ease;
    padding: 4px 0;
}

    .nav-cart:hover {
        color: #ffffff;
    }

    .nav-cart .cart-icon {
        font-size: 22px;
    }

    .nav-cart .cart-badge {
        position: absolute;
        top: -6px;
        right: -10px;
        background: #cc0000;
        color: #ffffff;
        font-size: 10px;
        font-weight: 700;
        min-width: 18px;
        height: 18px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 4px;
        font-family: 'Inter', sans-serif;
        transition: transform 0.3s ease;
    }

    .nav-cart:hover .cart-badge {
        transform: scale(1.1);
    }

    .nav-cart .cart-badge.empty {
        display: none;
    }

/* ========================================
   HERO
======================================== */
.hero {
    padding: 160px 0 80px;
    text-align: center;
}

.hero-badge {
    display: inline-block;
    background: rgba(204, 0, 0, 0.08);
    border: 1px solid rgba(204, 0, 0, 0.12);
    color: #cc0000;
    padding: 6px 20px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 24px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.hero-content h1 {
    font-size: 56px;
    font-weight: 800;
    margin-bottom: 16px;
    line-height: 1.15;
    color: #ffffff;
    letter-spacing: -0.5px;
}

    .hero-content h1 .highlight {
        color: #cc0000;
    }

.hero-content p {
    font-size: 18px;
    color: #888888;
    max-width: 560px;
    margin: 0 auto 36px;
    font-weight: 400;
    line-height: 1.7;
}

.hero-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 56px;
}

.btn-primary {
    background: #cc0000;
    color: #ffffff;
    padding: 14px 40px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 15px;
    transition: all 0.3s ease;
    display: inline-block;
}

    .btn-primary:hover {
        background: #ff0000;
        transform: translateY(-2px);
        box-shadow: 0 10px 40px rgba(204, 0, 0, 0.2);
    }

.btn-secondary {
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
    padding: 14px 40px;
    border-radius: 6px;
    font-weight: 500;
    font-size: 15px;
    transition: all 0.3s ease;
    display: inline-block;
}

    .btn-secondary:hover {
        border-color: #cc0000;
        color: #cc0000;
        transform: translateY(-2px);
    }

.hero-stats {
    display: flex;
    justify-content: center;
    gap: 60px;
}

.stat {
    text-align: center;
}

.stat-number {
    display: block;
    font-size: 30px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 2px;
    font-variant-numeric: tabular-nums;
}

.stat-label {
    font-size: 13px;
    color: #666666;
    font-weight: 400;
}

/* ========================================
   PRODUCTS
======================================== */
.products-page {
    padding: 80px 0 60px;
}

    .products-page h1 {
        font-size: 36px;
        font-weight: 700;
        text-align: center;
        color: #ffffff;
        margin-bottom: 8px;
        letter-spacing: -0.5px;
    }

    .products-page .section-subtitle {
        text-align: center;
        color: #666666;
        margin-bottom: 40px;
        font-size: 16px;
        font-weight: 400;
    }

.product-tabs {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: #888888;
    padding: 12px 28px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Inter', sans-serif;
}

    .tab-btn:hover {
        background: rgba(204, 0, 0, 0.06);
        color: #ffffff;
    }

    .tab-btn.active {
        background: rgba(204, 0, 0, 0.12);
        border-color: rgba(204, 0, 0, 0.2);
        color: #cc0000;
    }

.tab-icon {
    margin-right: 6px;
}

.tab-content {
    display: none;
}

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

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 24px;
}

.product-card {
    background: rgba(20, 20, 20, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    padding: 24px 20px;
    text-align: center;
    transition: all 0.3s ease;
    cursor: default;
}

    .product-card:hover {
        transform: translateY(-4px);
        border-color: rgba(204, 0, 0, 0.2);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
    }

.product-image-wrapper {
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    overflow: hidden;
}

.product-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    width: 80px;
    height: 60px;
}

.bundle-icons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.bundle-icon-img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    opacity: 0.8;
}

.product-card h3 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 4px;
    color: #ffffff;
}

.product-desc {
    font-size: 12px;
    color: #666666;
    margin-bottom: 12px;
}

.price {
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 12px;
}

.badge {
    display: inline-block;
    padding: 2px 12px;
    border-radius: 50px;
    font-size: 10px;
    font-weight: 600;
    margin-bottom: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .badge.instant {
        background: rgba(204, 0, 0, 0.08);
        color: #cc0000;
        border: 1px solid rgba(204, 0, 0, 0.1);
    }

    .badge.featured {
        background: rgba(255, 215, 0, 0.1);
        color: #ffd700;
        border: 1px solid rgba(255, 215, 0, 0.15);
    }

.btn-view {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(204, 0, 0, 0.08);
    color: #cc0000;
    border: 1px solid rgba(204, 0, 0, 0.1);
    padding: 10px 0;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    font-size: 13px;
    text-decoration: none;
}

    .btn-view .btn-icon {
        transition: transform 0.3s ease;
    }

    .btn-view:hover {
        background: #cc0000;
        color: #ffffff;
        border-color: #cc0000;
        box-shadow: 0 4px 20px rgba(204, 0, 0, 0.2);
    }

        .btn-view:hover .btn-icon {
            transform: scale(1.1);
        }

/* ========================================
   PRODUCT PAGE
======================================== */
.product-page {
    padding: 120px 0 60px;
}

.product-page-grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 40px;
    align-items: start;
}

.product-page-info .back-link {
    color: #888888;
    font-size: 14px;
    transition: color 0.3s ease;
    display: inline-block;
    margin-bottom: 20px;
}

    .product-page-info .back-link:hover {
        color: #cc0000;
    }

.product-page-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(204, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(204, 0, 0, 0.1);
    margin-bottom: 16px;
}

    .product-page-icon .product-page-img {
        width: 44px;
        height: 44px;
        object-fit: contain;
    }

.product-page-info h1 {
    font-size: 32px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 4px;
}

.product-page-rating {
    font-size: 14px;
    color: #ffd700;
    margin-bottom: 16px;
}

.product-page-description p {
    color: #aaaaaa;
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 16px;
}

.product-features {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.feature-tag {
    background: rgba(255, 255, 255, 0.04);
    color: #cccccc;
    padding: 4px 14px;
    border-radius: 50px;
    font-size: 12px;
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.bundle-includes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.bundle-item {
    background: rgba(204, 0, 0, 0.06);
    color: #cc0000;
    padding: 6px 16px;
    border-radius: 6px;
    font-size: 13px;
    border: 1px solid rgba(204, 0, 0, 0.06);
}

.bundle-icons-large {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.bundle-icon-img-large {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.product-page-details {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.detail-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 14px;
}

.detail-label {
    color: #666666;
}

.detail-value {
    color: #cccccc;
}

.product-page-variants {
    margin: 20px 0;
}

    .product-page-variants h3 {
        font-size: 16px;
        font-weight: 600;
        color: #ffffff;
        margin-bottom: 12px;
    }

    .product-page-variants .variant-options {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .product-page-variants .variant-option {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 16px;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.3s ease;
    }

        .product-page-variants .variant-option:hover {
            background: rgba(204, 0, 0, 0.04);
            border-color: rgba(204, 0, 0, 0.12);
        }

        .product-page-variants .variant-option.selected {
            background: rgba(204, 0, 0, 0.08);
            border-color: #cc0000;
            box-shadow: 0 0 20px rgba(204, 0, 0, 0.05);
        }

        .product-page-variants .variant-option .variant-info {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .product-page-variants .variant-option .variant-name {
            font-size: 14px;
            font-weight: 600;
            color: #ffffff;
        }

        .product-page-variants .variant-option .variant-desc {
            font-size: 12px;
            color: #666666;
        }

        .product-page-variants .variant-option .variant-price {
            font-size: 16px;
            font-weight: 700;
            color: #cc0000;
        }

        .product-page-variants .variant-option .variant-check {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 2px solid rgba(255, 255, 255, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }

        .product-page-variants .variant-option.selected .variant-check {
            border-color: #cc0000;
            background: #cc0000;
        }

.product-page-variants .variant-option.selected .variant-check::after {
                content: '✓';
                color: #ffffff;
                font-size: 12px;
            }

.product-page-order {
    position: sticky;
    top: 120px;
}

.order-summary-card {
    background: rgba(20, 20, 20, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 16px;
    padding: 28px 24px;
}

    .order-summary-card h3 {
        font-size: 18px;
        font-weight: 700;
        color: #ffffff;
        margin-bottom: 16px;
    }

.order-selection {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    margin-bottom: 12px;
}

.order-product {
    color: #888888;
    font-size: 14px;
}

.order-variant {
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
}

.order-price-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 14px;
    color: #888888;
}

.order-total-row {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    margin-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
}

    .order-total-row span:last-child {
        color: #cc0000;
    }

.order-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
}

.order-buy-now {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #cc0000;
    color: #ffffff;
    border: none;
    padding: 14px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .order-buy-now:hover {
        background: #ff0000;
        box-shadow: 0 8px 30px rgba(204, 0, 0, 0.3);
    }

.order-add-cart {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #ffffff;
    padding: 14px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .order-add-cart:hover {
        background: rgba(255, 255, 255, 0.12);
    }

.order-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

    .order-info span {
        font-size: 12px;
        color: #666666;
    }

/* ========================================
   FEATURES SHOWCASE
======================================== */
.features-showcase {
    padding: 80px 0;
    border-top: 1px solid rgba(255,255,255,0.03);
    border-bottom: 1px solid rgba(255,255,255,0.03);
}

    .features-showcase h2 {
        font-size: 36px;
        font-weight: 700;
        text-align: center;
        color: #ffffff;
        margin-bottom: 8px;
        letter-spacing: -0.5px;
    }

        .features-showcase h2 .highlight {
            color: #cc0000;
        }

    .features-showcase .section-subtitle {
        text-align: center;
        color: #666666;
        margin-bottom: 48px;
        font-size: 16px;
        font-weight: 400;
    }

.showcase-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    perspective: 1200px;
}

.showcase-card {
    --card-accent: 204, 0, 0;
    min-height: 330px;
    background:
        linear-gradient(145deg, rgba(23, 23, 25, 0.88), rgba(12, 12, 13, 0.78)),
        rgba(18, 18, 18, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.055);
    border-radius: 18px;
    padding: 26px;
    transition: transform 0.45s cubic-bezier(.2,.8,.2,1), border-color 0.35s ease, box-shadow 0.45s ease;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.025),
        0 18px 55px rgba(0,0,0,0.22);
}

.showcase-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    z-index: -2;
    border-radius: inherit;
    background:
        radial-gradient(520px circle at 0% 0%, rgba(var(--card-accent), 0.13), transparent 42%),
        radial-gradient(380px circle at 100% 100%, rgba(var(--card-accent), 0.065), transparent 48%);
    opacity: 0.72;
    transition: opacity 0.4s ease;
}

.showcase-card::after {
    content: '';
    position: absolute;
    z-index: -1;
    width: 48%;
    height: 180%;
    top: -40%;
    left: -68%;
    transform: translate3d(0, 0, 0) rotate(18deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.028), transparent);
    animation: showcaseSheen 10s ease-in-out infinite;
    will-change: transform, opacity;
    pointer-events: none;
}

.showcase-card:nth-child(2)::after { animation-delay: -2.2s; }
.showcase-card:nth-child(3)::after { animation-delay: -4.4s; }
.showcase-card:nth-child(4)::after { animation-delay: -6.6s; }

.showcase-card:hover {
    transform: translateY(-6px);
    border-color: rgba(var(--card-accent), 0.22);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.035),
        0 24px 70px rgba(0,0,0,0.34),
        0 0 34px rgba(var(--card-accent), 0.055);
}

.showcase-card:hover::before {
    opacity: 1;
}

@keyframes showcaseSheen {
    0%, 64% { transform: translate3d(0, 0, 0) rotate(18deg); opacity: 0; }
    70% { opacity: 1; }
    84% { transform: translate3d(410%, 0, 0) rotate(18deg); opacity: 0.9; }
    100% { transform: translate3d(410%, 0, 0) rotate(18deg); opacity: 0; }
}

.showcase-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    position: relative;
}

.showcase-header::after {
    content: '';
    width: 34px;
    height: 1px;
    margin-left: auto;
    background: linear-gradient(90deg, rgba(var(--card-accent), .45), transparent);
}

.showcase-header .showcase-icon-img {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 0 12px rgba(var(--card-accent), 0.18));
    transition: transform 0.4s cubic-bezier(.2,.8,.2,1), filter 0.4s ease;
}

.showcase-card:hover .showcase-icon-img {
    transform: translateY(-1px) scale(1.08);
    filter: drop-shadow(0 0 18px rgba(var(--card-accent), 0.32));
}

.showcase-header h3 {
    font-size: 16px;
    font-weight: 650;
    color: #ffffff;
    letter-spacing: -0.15px;
}

.showcase-desc {
    max-width: 92%;
    font-size: 13px;
    color: #898989;
    margin-bottom: 18px;
    line-height: 1.65;
}

.exodia-email-delivery {
    padding: 12px 0 4px;
}

.email-animation {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 14px;
    background: rgba(255,255,255,0.02);
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.03);
    margin-bottom: 12px;
    position: relative;
}

.email-icon {
    font-size: 32px;
    transition: all 0.5s ease;
    flex-shrink: 0;
}

    .email-icon.sent {
        animation: emailFly 0.8s ease;
    }

@keyframes emailFly {
    0% {
        transform: scale(1) rotate(0deg);
    }

    30% {
        transform: scale(1.3) rotate(-10deg);
    }

    60% {
        transform: scale(0.9) rotate(5deg);
    }

    100% {
        transform: scale(1) rotate(0deg);
    }
}

.email-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid rgba(204,0,0,0.08);
    opacity: 0;
    pointer-events: none;
}

    .email-pulse.active {
        opacity: 1;
        animation: emailPulse 1.2s ease-out infinite;
    }

@keyframes emailPulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scale(1.8);
        opacity: 0;
    }
}

.email-status {
    font-size: 13px;
    color: #888888;
    font-weight: 500;
    transition: all 0.3s ease;
    flex: 1;
}

    .email-status.processing {
        color: #cc0000;
    }

    .email-status.done {
        color: #00cc66;
    }

.email-progress {
    margin-bottom: 10px;
}

.email-bar-track {
    width: 100%;
    height: 4px;
    background: rgba(255,255,255,0.04);
    border-radius: 4px;
    overflow: hidden;
}

.email-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #660000, #cc0000);
    border-radius: 4px;
    transition: width 0.15s linear;
}

.email-bar-info {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #666666;
    margin-top: 4px;
}

.email-step {
    color: #888888;
    transition: all 0.3s ease;
}

    .email-step.done {
        color: #00cc66;
    }

.email-percent {
    font-weight: 600;
    color: #ffffff;
    transition: all 0.3s ease;
}

    .email-percent.done {
        color: #00cc66;
    }

.email-details {
    background: rgba(255,255,255,0.02);
    border-radius: 8px;
    padding: 10px 14px;
    border: 1px solid rgba(255,255,255,0.03);
}

.email-row {
    display: flex;
    justify-content: space-between;
    padding: 3px 0;
    font-size: 12px;
}

.email-label {
    color: #666666;
}

.email-value {
    color: #aaaaaa;
}

    .email-value.done {
        color: #00cc66;
    }

.exodia-order {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 8px;
    padding: 14px 16px;
    margin: 10px 0 10px;
}

.order-head {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 600;
    color: #666666;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    margin-bottom: 8px;
}

.order-badge {
    color: #00cc66;
    font-size: 10px;
}

.order-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #888888;
    padding: 3px 0;
}

.order-total {
    display: flex;
    justify-content: space-between;
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    padding-top: 8px;
    margin-top: 4px;
    border-top: 1px solid rgba(255,255,255,0.04);
}

    .order-total span:last-child {
        color: #cc0000;
    }

.exodia-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(204,0,0,0.03);
    border-radius: 6px;
    border-left: 2px solid #cc0000;
    margin-top: 2px;
}

    .exodia-note .note-check {
        color: #00cc66;
        font-size: 14px;
        font-weight: 700;
        flex-shrink: 0;
        margin-top: 1px;
    }

    .exodia-note span:last-child {
        font-size: 12px;
        color: #888888;
        line-height: 1.5;
    }

.exodia-chat {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 10px;
    overflow: hidden;
    margin: 8px 0 4px;
}

.chat-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.03);
    font-size: 12px;
    color: #00cc66;
    font-weight: 500;
}

.chat-response-time {
    font-size: 10px;
    color: #666666;
    font-weight: 400;
    margin-left: auto;
}

.chat-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00cc66;
    animation: dotPulse 1.5s ease-in-out infinite;
}

@keyframes dotPulse {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}

.chat-body {
    padding: 10px 14px;
    min-height: 90px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.chat-bubble {
    opacity: 0;
    transform: translateY(6px);
    transition: all 0.5s ease;
    max-width: 85%;
}

    .chat-bubble.active {
        opacity: 1;
        transform: translateY(0);
    }

    .chat-bubble.received .chat-agent {
        font-size: 10px;
        font-weight: 600;
        color: #cc0000;
        display: block;
        margin-bottom: 1px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .chat-bubble.received {
        align-self: flex-start;
    }

        .chat-bubble.received p {
            background: rgba(255,255,255,0.03);
            padding: 8px 14px;
            border-radius: 8px;
            font-size: 12px;
            color: #cccccc;
            border: 1px solid rgba(255,255,255,0.03);
        }

    .chat-bubble.sent {
        align-self: flex-end;
    }

        .chat-bubble.sent p {
            background: rgba(204,0,0,0.06);
            padding: 8px 14px;
            border-radius: 8px;
            font-size: 12px;
            color: #ffffff;
            border: 1px solid rgba(204,0,0,0.06);
        }

    .chat-bubble .chat-id {
        font-size: 10px;
        color: #444444;
        display: block;
        margin-top: 2px;
    }

.chat-typing-indicator {
    display: flex;
    gap: 4px;
    padding: 4px 0;
    opacity: 0;
    transition: all 0.3s ease;
    align-self: flex-start;
}

    .chat-typing-indicator.active {
        opacity: 1;
    }

    .chat-typing-indicator span {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #666666;
        animation: typingBounce 1.4s ease-in-out infinite;
    }

        .chat-typing-indicator span:nth-child(2) {
            animation-delay: 0.2s;
        }

        .chat-typing-indicator span:nth-child(3) {
            animation-delay: 0.4s;
        }

@keyframes typingBounce {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.3;
    }

    30% {
        transform: translateY(-6px);
        opacity: 1;
    }
}

.exodia-payment-container {
    padding: 4px 0;
}

.payment-security {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    background: rgba(255,255,255,0.02);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.03);
    margin-bottom: 12px;
}

.security-shield {
    font-size: 24px;
    transition: all 0.5s ease;
    flex-shrink: 0;
}

    .security-shield.secure {
        animation: shieldSecure 1.5s ease-in-out infinite;
    }

@keyframes shieldSecure {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 0px rgba(204,0,0,0));
    }

    50% {
        transform: scale(1.1);
        filter: drop-shadow(0 0 20px rgba(204,0,0,0.2));
    }
}

.security-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.security-status {
    font-size: 13px;
    color: #888888;
    font-weight: 500;
    transition: all 0.3s ease;
}

    .security-status.done {
        color: #00cc66;
    }

    .security-status.processing {
        color: #cc0000;
    }

.security-level {
    font-size: 11px;
    color: #666666;
    transition: all 0.3s ease;
}

    .security-level.done {
        color: #00cc66;
    }

.payment-gateway-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin: 8px 0 10px;
}

.gateway-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 4px;
    background: rgba(255,255,255,0.02);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.03);
    transition: all 0.4s ease;
    opacity: 0.2;
    cursor: default;
}

    .gateway-item.active {
        opacity: 1;
        border-color: rgba(204,0,0,0.15);
        background: rgba(204,0,0,0.04);
        transform: scale(1.05);
        box-shadow: 0 0 20px rgba(204,0,0,0.05);
    }

    .gateway-item .gw-logo {
        width: 32px;
        height: 24px;
        object-fit: contain;
        display: block;
        filter: grayscale(100%) brightness(0.5);
        transition: all 0.4s ease;
    }

    .gateway-item.active .gw-logo {
        filter: grayscale(0%) brightness(1);
    }

    .gateway-item .gw-name {
        font-size: 7px;
        text-transform: uppercase;
        color: #555555;
        letter-spacing: 0.5px;
        font-weight: 600;
    }

    .gateway-item.active .gw-name {
        color: #aaaaaa;
    }

.payment-ssl-badge {
    display: inline-block;
    background: rgba(204,0,0,0.06);
    color: #cc0000;
    font-size: 10px;
    font-weight: 600;
    padding: 4px 16px;
    border-radius: 4px;
    border: 1px solid rgba(204,0,0,0.06);
    letter-spacing: 0.5px;
    margin-top: 4px;
}


/* ========================================
   SHOWCASE V2 - PREMIUM INNER PANELS
======================================== */
.exodia-email-delivery,
.exodia-payment-container {
    position: relative;
}

.email-animation,
.exodia-order,
.exodia-chat,
.payment-security,
.email-details,
.gateway-item {
    background: linear-gradient(145deg, rgba(255,255,255,0.032), rgba(255,255,255,0.012));
    border-color: rgba(255,255,255,0.055);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.018);
}

.email-animation,
.payment-security {
    border-radius: 12px;
    padding: 13px 14px;
}

.email-icon,
.security-shield {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #ef3b3b;
    background: linear-gradient(145deg, rgba(204,0,0,0.14), rgba(204,0,0,0.045));
    border: 1px solid rgba(230, 36, 36, 0.15);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 0 24px rgba(204,0,0,0.07);
    flex: 0 0 42px;
}

.email-icon svg,
.security-shield svg {
    width: 22px;
    height: 22px;
}

.email-icon.sent {
    animation: emailFly 0.8s cubic-bezier(.2,.8,.2,1);
    color: #50df8a;
    border-color: rgba(80,223,138,.18);
    background: linear-gradient(145deg, rgba(80,223,138,.12), rgba(80,223,138,.035));
}

.email-pulse {
    top: 50%;
    left: 35px;
    width: 42px;
    height: 42px;
    border-color: rgba(204,0,0,.18);
}

.email-bar-track {
    height: 5px;
    background: rgba(255,255,255,0.045);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.35);
}

.email-bar-fill {
    background: linear-gradient(90deg, #7d0505, #db1919, #ff5555);
    box-shadow: 0 0 12px rgba(204,0,0,.22);
}

.email-details {
    border-radius: 10px;
    padding: 11px 13px;
}

.email-row + .email-row {
    border-top: 1px solid rgba(255,255,255,.025);
}

.email-row {
    padding: 5px 0;
}

.email-value {
    max-width: 62%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
}

.exodia-order {
    position: relative;
    border-radius: 12px;
    padding: 15px 16px;
    overflow: hidden;
}

.exodia-order::after {
    content: '';
    position: absolute;
    left: 12px;
    right: 12px;
    top: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(204,0,0,.4), transparent);
    animation: orderGlow 4s ease-in-out infinite;
}

@keyframes orderGlow {
    0%, 100% { opacity: .25; transform: scaleX(.55); }
    50% { opacity: 1; transform: scaleX(1); }
}

.order-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(0,204,102,.06);
    border: 1px solid rgba(0,204,102,.10);
    animation: liveBadgePulse 2.4s ease-in-out infinite;
}

@keyframes liveBadgePulse {
    0%, 100% { box-shadow: 0 0 0 rgba(0,204,102,0); }
    50% { box-shadow: 0 0 14px rgba(0,204,102,.09); }
}

.order-row {
    padding: 5px 0;
}

.order-total {
    padding-top: 10px;
    margin-top: 6px;
}

.order-total span:last-child {
    color: #f13a3a;
    text-shadow: 0 0 18px rgba(204,0,0,.16);
}

.exodia-note {
    border: 1px solid rgba(204,0,0,.08);
    border-left: 2px solid rgba(230,32,32,.8);
    border-radius: 9px;
    background: linear-gradient(90deg, rgba(204,0,0,.045), rgba(204,0,0,.012));
    padding: 9px 11px;
}

.exodia-chat {
    border-radius: 12px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.018);
}

.chat-head {
    padding: 11px 14px;
    background: rgba(255,255,255,.012);
}

.chat-dot {
    box-shadow: 0 0 0 4px rgba(0,204,102,.045), 0 0 12px rgba(0,204,102,.18);
}

.chat-body {
    min-height: 118px;
    padding: 12px 14px;
    gap: 7px;
}

.chat-bubble.received p,
.chat-bubble.sent p {
    padding: 8px 12px;
    border-radius: 10px;
    line-height: 1.45;
}

.chat-bubble.received p {
    background: rgba(255,255,255,.035);
}

.chat-bubble.sent p {
    background: linear-gradient(135deg, rgba(204,0,0,.13), rgba(204,0,0,.055));
    border-color: rgba(204,0,0,.11);
    box-shadow: 0 6px 20px rgba(0,0,0,.08);
}

.payment-security {
    position: relative;
    overflow: hidden;
}

.payment-security::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 30%, rgba(204,0,0,.035), transparent 70%);
    transform: translateX(-100%);
    animation: securityScan 4.8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes securityScan {
    0%, 35% { transform: translateX(-100%); opacity: 0; }
    45% { opacity: 1; }
    75%, 100% { transform: translateX(100%); opacity: 0; }
}

.security-shield.secure {
    animation: shieldSecure 2.2s ease-in-out infinite;
    color: #50df8a;
    border-color: rgba(80,223,138,.16);
    background: linear-gradient(145deg, rgba(80,223,138,.11), rgba(80,223,138,.03));
}

.payment-gateway-grid {
    gap: 7px;
}

.gateway-item {
    min-height: 58px;
    border-radius: 10px;
    opacity: .28;
    transform: translateY(0);
}

.gateway-item.active {
    opacity: 1;
    border-color: rgba(204,0,0,.16);
    background: linear-gradient(145deg, rgba(204,0,0,.065), rgba(255,255,255,.018));
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,.16), 0 0 18px rgba(204,0,0,.045);
}

.payment-ssl-badge {
    border-radius: 999px;
    padding: 5px 11px;
    color: #d93a3a;
    background: rgba(204,0,0,.045);
    border-color: rgba(204,0,0,.09);
}

@media (max-width: 768px) {
    .showcase-card {
        min-height: auto;
        border-radius: 16px;
    }

    .showcase-card::after {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .showcase-card::after,
    .exodia-order::after,
    .order-badge,
    .payment-security::after {
        animation: none !important;
    }
}

/* ========================================
   HOW IT WORKS - CLEAN & WORKING
======================================== */
.how-it-works {
    padding: 80px 0;
    background: rgba(10, 10, 10, 0.4);
}

    .how-it-works h2 {
        font-size: 36px;
        font-weight: 700;
        text-align: center;
        color: #ffffff;
        margin-bottom: 8px;
        letter-spacing: -0.5px;
    }

        .how-it-works h2 .highlight {
            color: #cc0000;
        }

    .how-it-works .section-subtitle {
        text-align: center;
        color: #888888;
        margin-bottom: 48px;
        font-size: 16px;
        font-weight: 400;
    }

.how-it-works-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.how-step {
    background: rgba(20, 20, 20, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 16px;
    padding: 30px 24px 24px;
    text-align: center;
    transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
    position: relative;
}

    .how-step:hover {
        border-color: rgba(204, 0, 0, 0.12);
        transform: translateY(-4px);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
    }

    .how-step::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent, #cc0000, transparent);
        opacity: 0;
        transition: opacity 0.4s ease;
    }

    .how-step:hover::before {
        opacity: 1;
    }

.step-number {
    font-size: 32px;
    font-weight: 800;
    color: rgba(204, 0, 0, 0.12);
    margin-bottom: 12px;
    letter-spacing: 1px;
    font-variant-numeric: tabular-nums;
}

.how-step:hover .step-number {
    color: rgba(204, 0, 0, 0.2);
}

.step-content h3 {
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 4px;
}

.step-content p {
    font-size: 14px;
    color: #888888;
    margin-bottom: 16px;
}

.step-progress {
    margin-bottom: 10px;
}

.step-progress-track {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 4px;
    overflow: hidden;
}

.step-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #660000, #cc0000);
    border-radius: 4px;
    transition: width 0.15s linear;
}

.step-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    color: #888888;
    font-weight: 500;
    min-height: 28px;
    transition: all 0.4s ease;
}

    .step-status .status-spinner {
        display: inline-block;
        font-size: 14px;
    }

    .step-status.processing {
        color: #cc0000;
    }

        .step-status.processing .status-spinner {
            animation: spinSpinner 1s linear infinite;
        }

    .step-status.done {
        color: #00cc66;
    }

        .step-status.done .status-spinner {
            animation: none;
        }

@keyframes spinSpinner {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.step-check {
    font-size: 13px;
    color: #00cc66;
    font-weight: 500;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.5s ease;
}

    .step-check.visible {
        opacity: 1;
        max-height: 30px;
        margin-top: 4px;
    }

/* ========================================
   REVIEWS
======================================== */
.reviews-section {
    padding: 80px 0;
    border-top: 1px solid rgba(255,255,255,0.03);
    border-bottom: 1px solid rgba(255,255,255,0.03);
}

    .reviews-section h2 {
        text-align: center;
        font-size: 36px;
        font-weight: 700;
        color: #ffffff;
        margin-bottom: 8px;
        letter-spacing: -0.5px;
    }

    .reviews-section .section-subtitle {
        text-align: center;
        color: #888888;
        margin-bottom: 40px;
        font-size: 16px;
        font-weight: 400;
    }

.review-stats {
    text-align: center;
    margin-bottom: 40px;
}

    .review-stats .big-number {
        font-size: 42px;
        font-weight: 700;
        color: #ffffff;
        display: block;
    }

    .review-stats .stars {
        font-size: 24px;
        color: #ffd700;
        letter-spacing: 4px;
    }

    .review-stats p {
        font-size: 14px;
        color: #666666;
        margin-top: 4px;
    }

.reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.review-card {
    background: rgba(20,20,20,0.4);
    border: 1px solid rgba(255,255,255,0.03);
    border-radius: 12px;
    padding: 20px;
    transition: all 0.3s ease;
}

    .review-card:hover {
        border-color: rgba(204,0,0,0.1);
    }

.review-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.review-name {
    font-weight: 600;
    font-size: 14px;
    color: #ffffff;
}

.review-date {
    font-size: 12px;
    color: #444444;
}

.review-rating {
    color: #ffd700;
    font-size: 14px;
    letter-spacing: 2px;
    margin-bottom: 4px;
}

.review-product {
    font-size: 12px;
    color: #444444;
    display: block;
    margin-bottom: 8px;
}

.review-text {
    font-size: 14px;
    color: #999999;
    line-height: 1.6;
}

/* ========================================
   FAQ
======================================== */
.faq-section {
    padding: 80px 0;
}

    .faq-section h2 {
        text-align: center;
        font-size: 36px;
        font-weight: 700;
        color: #ffffff;
        margin-bottom: 8px;
        letter-spacing: -0.5px;
    }

    .faq-section .section-subtitle {
        text-align: center;
        color: #888888;
        margin-bottom: 40px;
        font-size: 16px;
        font-weight: 400;
    }

.faq-grid {
    max-width: 720px;
    margin: 0 auto;
}

.faq-item {
    border-bottom: 1px solid rgba(255,255,255,0.04);
    overflow: hidden;
}

.faq-question {
    padding: 18px 0;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
}

    .faq-question:hover {
        color: #cc0000;
    }

    .faq-question h3 {
        font-size: 15px;
        font-weight: 500;
        color: #ffffff;
    }

.faq-toggle {
    color: #666666;
    font-size: 20px;
    font-weight: 300;
    transition: transform 0.3s ease;
}

.faq-item.active .faq-toggle {
    transform: rotate(45deg);
    color: #cc0000;
}

.faq-answer {
    padding: 0 0 18px;
    color: #888888;
    line-height: 1.7;
    display: none;
    font-size: 14px;
}

    .faq-answer.active {
        display: block;
    }

    .faq-answer a {
        color: #cc0000;
    }


@media (max-width: 420px) {
    .cart-discount-input-row {
        padding: 3px;
    }

    .cart-discount-input-row input {
        padding: 0 10px;
        font-size: 12px;
    }

    .cart-discount-input-row button {
        min-width: 88px;
        padding: 0 12px;
        font-size: 11.5px;
    }
}

/* ========================================
   FOOTER
======================================== */
footer {
    background: rgba(10,10,10,0.95);
    border-top: 1px solid rgba(255,255,255,0.03);
    padding: 60px 0 24px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 40px;
}

.footer-brand h3 {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 2px;
    margin-bottom: 8px;
}

.footer-brand p {
    font-size: 14px;
    color: #666666;
}

.footer-links h4 {
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 12px;
}

.footer-links ul {
    list-style: none;
}

    .footer-links ul li {
        margin-bottom: 6px;
    }

        .footer-links ul li a {
            font-size: 13px;
            color: #666666;
            transition: all 0.3s ease;
        }

            .footer-links ul li a:hover {
                color: #cc0000;
            }

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.03);
    padding-top: 20px;
    text-align: center;
    font-size: 12px;
    color: #444444;
}

/* ========================================
   RESPONSIVE
======================================== */
@media (max-width: 992px) {
    .hero-content h1 {
        font-size: 40px;
    }

    .showcase-grid {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    .reviews-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .product-page-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .product-page-order {
        position: static;
    }

    .how-it-works-grid {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .hamburger {
        display: block;
    }

    .nav-menu {
        display: none;
        flex-direction: column;
        background: rgba(10,10,10,0.98);
        padding: 20px;
        position: absolute;
        top: 68px;
        left: 0;
        width: 100%;
        gap: 12px;
        border-bottom: 1px solid rgba(255,255,255,0.04);
    }

        .nav-menu.active {
            display: flex;
        }

    .hero-content h1 {
        font-size: 30px;
    }

    .hero-stats {
        gap: 30px;
        flex-wrap: wrap;
    }

    .stat-number {
        font-size: 24px;
    }

    .showcase-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .reviews-grid {
        grid-template-columns: 1fr;
    }

    .product-grid {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .product-tabs {
        flex-direction: column;
        align-items: stretch;
    }

    .tab-btn {
        text-align: center;
        justify-content: center;
    }

    .how-it-works-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .how-step {
        padding: 24px 20px;
    }

    .step-number {
        font-size: 28px;
    }

    .product-page {
        padding: 100px 0 40px;
    }

    .product-page-info h1 {
        font-size: 26px;
    }
}

@media (max-width: 480px) {
    .hero-content h1 {
        font-size: 26px;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }

    .btn-primary, .btn-secondary {
        width: 100%;
        text-align: center;
    }

    .showcase-card {
        padding: 16px;
    }

    .payment-gateway-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 4px;
    }

    .gateway-item {
        padding: 6px 2px;
    }

        .gateway-item .gw-icon {
            font-size: 14px;
        }

        .gateway-item .gw-name {
            font-size: 6px;
        }

    .how-step {
        padding: 20px 16px;
    }

    .step-content h3 {
        font-size: 16px;
    }
}


/* ========================================
   PERFORMANCE GUARDS
======================================== */
.features-showcase.animations-paused .showcase-card::after,
.features-showcase.animations-paused .email-pulse,
.features-showcase.animations-paused .chat-typing-indicator span,
.features-showcase.animations-paused .security-shield,
.how-it-works.animations-paused .status-spinner {
    animation-play-state: paused !important;
}

.products-page,
.how-it-works,
.reviews-section,
.faq-section,
footer {
    content-visibility: auto;
    contain-intrinsic-size: 1px 800px;
}

.showcase-card,
.product-card,
.how-step,
.review-card,
.faq-item {
    contain: layout paint;
}

body.performance-scrolling .showcase-card {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.025), 0 12px 35px rgba(0,0,0,0.18);
}

@media (max-width: 768px) {
    .navbar {
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }

    .showcase-card {
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.02), 0 12px 36px rgba(0,0,0,0.18);
    }
}


/* ========================================
   EXODIA VISUAL UPGRADE — PREMIUM PASS
   Lightweight overrides: transform/opacity only for motion
======================================== */

:root {
    --ex-red: #d20a0a;
    --ex-red-bright: #ff2929;
    --ex-surface: rgba(18, 18, 20, 0.72);
    --ex-line: rgba(255, 255, 255, 0.065);
    --ex-muted: #8a8a90;
}

.hero-content h1,
.features-showcase h2,
.products-page h1,
.how-it-works h2,
.reviews-section h2,
.faq-section h2,
.product-page-info h1,
.legal-content h1,
.footer-brand h3 {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
}

/* Stronger section rhythm without extra DOM or heavy filters */
.features-showcase,
.products-page,
.how-it-works,
.reviews-section,
.faq-section {
    position: relative;
}

.features-showcase::before,
.products-page::before,
.how-it-works::before,
.reviews-section::before,
.faq-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: min(920px, 76vw);
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, rgba(204,0,0,0.24), rgba(255,255,255,0.08), rgba(204,0,0,0.24), transparent);
    opacity: .7;
    pointer-events: none;
}

/* HERO */
.hero {
    padding: 150px 0 94px;
    text-align: left;
    min-height: 760px;
    display: flex;
    align-items: center;
}

.hero .container {
    width: 100%;
}

.hero-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(390px, .95fr);
    gap: 72px;
    align-items: center;
}

.hero-content {
    max-width: 660px;
}

.hero-badge {
    position: relative;
    overflow: hidden;
    background: rgba(204, 0, 0, 0.07);
    border-color: rgba(255, 60, 60, 0.18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}

.hero-content h1 {
    font-size: clamp(48px, 5.2vw, 72px);
    line-height: 1.02;
    letter-spacing: -2.6px;
    max-width: 680px;
    margin-bottom: 24px;
    text-wrap: balance;
}

.hero-content h1 .highlight {
    color: #ed1717;
    text-shadow: 0 0 34px rgba(204,0,0,.15);
}

.hero-content p {
    margin: 0 0 34px;
    max-width: 600px;
    color: #96969c;
    font-size: 17px;
}

.hero-buttons {
    justify-content: flex-start;
    margin-bottom: 48px;
}

.hero .btn-primary,
.hero .btn-secondary {
    min-width: 164px;
    text-align: center;
    border-radius: 9px;
}

.hero .btn-primary {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #d70b0b, #a90000);
    box-shadow: 0 12px 30px rgba(204,0,0,.14), inset 0 1px 0 rgba(255,255,255,.14);
}

.hero .btn-primary::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.14) 48%, transparent 72%);
    transform: translateX(-125%);
    transition: transform .55s ease;
}

.hero .btn-primary:hover::after {
    transform: translateX(125%);
}

.hero .btn-secondary {
    background: rgba(255,255,255,.025);
    border-color: rgba(255,255,255,.09);
}

.hero-stats {
    justify-content: flex-start;
    gap: 0;
    border-top: 1px solid rgba(255,255,255,.055);
    padding-top: 24px;
    max-width: 580px;
}

.hero-stats .stat {
    min-width: 0;
    flex: 1;
    text-align: left;
    padding-right: 28px;
}

.hero-stats .stat + .stat {
    border-left: 1px solid rgba(255,255,255,.055);
    padding-left: 28px;
}

.hero-stats .stat-number {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 26px;
    letter-spacing: -.8px;
}

.hero-visual {
    position: relative;
    min-height: 490px;
    display: grid;
    place-items: center;
    isolation: isolate;
}

.hero-visual::before {
    content: '';
    position: absolute;
    width: 390px;
    height: 390px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(202,0,0,.15), rgba(202,0,0,.045) 45%, transparent 70%);
    z-index: -2;
    transform: translate3d(12px, -8px, 0);
}

.hero-glow-ring {
    position: absolute;
    border: 1px solid rgba(204,0,0,.09);
    border-radius: 50%;
    z-index: -1;
    pointer-events: none;
}

.hero-glow-ring-one {
    width: 410px;
    height: 410px;
    animation: heroRingDrift 18s ease-in-out infinite alternate;
}

.hero-glow-ring-two {
    width: 320px;
    height: 320px;
    border-color: rgba(255,255,255,.045);
    animation: heroRingDriftReverse 22s ease-in-out infinite alternate;
}

.hero-dashboard {
    width: min(100%, 465px);
    position: relative;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.09);
    background: linear-gradient(145deg, rgba(22,22,25,.94), rgba(11,11,13,.96));
    box-shadow: 0 28px 80px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.055), 0 0 0 1px rgba(204,0,0,.02);
    padding: 18px;
    transform: perspective(900px) rotateY(-4deg) rotateX(1deg);
    transition: transform .45s ease, border-color .45s ease;
    contain: layout paint;
}

.hero-dashboard:hover {
    transform: perspective(900px) rotateY(-1deg) rotateX(0) translateY(-3px);
    border-color: rgba(204,0,0,.2);
}

.hero-dashboard::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(115deg, rgba(255,255,255,.035), transparent 28%, transparent 72%, rgba(204,0,0,.035));
    pointer-events: none;
}

.hero-dashboard-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 2px 2px 16px;
    border-bottom: 1px solid rgba(255,255,255,.055);
}

.hero-dashboard-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hero-dashboard-mark {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    overflow: hidden;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 8px 22px rgba(204,0,0,.12);
}

.hero-dashboard-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.hero-dashboard-brand strong,
.hero-dashboard-brand span {
    display: block;
}

.hero-dashboard-brand strong {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 12px;
    letter-spacing: 1.6px;
}

.hero-dashboard-brand div > span {
    color: #666a70;
    font-size: 10px;
    margin-top: 2px;
}

.hero-preview-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #8f9399;
    font-size: 10px;
    border: 1px solid rgba(255,255,255,.06);
    background: rgba(255,255,255,.025);
    border-radius: 99px;
    padding: 6px 9px;
}

.hero-preview-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #28ca72;
    box-shadow: 0 0 0 3px rgba(40,202,114,.10);
}

.hero-preview-order {
    margin-top: 16px;
    padding: 16px;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 14px;
    background: rgba(255,255,255,.018);
}

.hero-preview-order-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #62656b;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .7px;
    margin-bottom: 15px;
}

.hero-preview-order-head strong {
    color: #777b82;
    font-size: 9px;
    font-weight: 600;
}

.hero-preview-product {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    align-items: center;
    gap: 12px;
}

.hero-preview-product-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: #111216;
    border: 1px solid rgba(255,255,255,.06);
}

.hero-preview-product-icon img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.hero-preview-product-copy strong,
.hero-preview-product-copy span {
    display: block;
}

.hero-preview-product-copy strong {
    font-size: 13px;
    color: #fff;
    margin-bottom: 2px;
}

.hero-preview-product-copy span {
    font-size: 10px;
    color: #656970;
}

.hero-preview-price {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 15px;
    color: #fff;
}

.hero-preview-progress {
    margin-top: 17px;
}

.hero-preview-progress-line {
    height: 4px;
    overflow: hidden;
    border-radius: 10px;
    background: rgba(255,255,255,.045);
}

.hero-preview-progress-line span {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #7b0000, #dd1111, #ff3c3c);
    transform-origin: left;
    animation: heroDeliveryBar 5s ease-in-out infinite;
}

.hero-preview-delivered {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 7px;
    color: #9da1a7;
    font-size: 10px;
}

.hero-preview-check {
    width: 17px;
    height: 17px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(40,202,114,.10);
    border: 1px solid rgba(40,202,114,.18);
    color: #38d782;
    font-size: 10px;
}

.hero-mini-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 10px;
}

.hero-mini-feature {
    min-height: 74px;
    padding: 11px;
    border: 1px solid rgba(255,255,255,.05);
    border-radius: 11px;
    background: rgba(255,255,255,.014);
    color: #73777e;
    font-size: 9px;
    line-height: 1.35;
}

.hero-mini-icon {
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    border-radius: 7px;
    margin-bottom: 8px;
    color: #d51a1a;
    background: rgba(204,0,0,.07);
    border: 1px solid rgba(204,0,0,.10);
}

.hero-mini-icon svg {
    width: 14px;
    height: 14px;
}

.hero-float-logo {
    position: absolute;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(14,14,16,.94);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 16px 34px rgba(0,0,0,.30);
    z-index: 2;
    pointer-events: none;
}

.hero-float-logo img {
    width: 29px;
    height: 29px;
    object-fit: contain;
}

.hero-float-logo-netflix {
    top: 54px;
    right: 10px;
    animation: heroFloatA 7s ease-in-out infinite;
}

.hero-float-logo-discord {
    left: 0;
    bottom: 72px;
    animation: heroFloatB 8.5s ease-in-out infinite;
}

@keyframes heroFloatA {
    0%,100% { transform: translate3d(0,0,0) rotate(2deg); }
    50% { transform: translate3d(0,-10px,0) rotate(-2deg); }
}

@keyframes heroFloatB {
    0%,100% { transform: translate3d(0,0,0) rotate(-3deg); }
    50% { transform: translate3d(7px,-8px,0) rotate(2deg); }
}

@keyframes heroRingDrift {
    from { transform: translate3d(-8px, 4px, 0) scale(.98); }
    to { transform: translate3d(10px, -8px, 0) scale(1.02); }
}

@keyframes heroRingDriftReverse {
    from { transform: translate3d(7px, -5px, 0) scale(1.02); }
    to { transform: translate3d(-8px, 8px, 0) scale(.97); }
}

@keyframes heroDeliveryBar {
    0% { transform: scaleX(.08); opacity: .65; }
    65%, 88% { transform: scaleX(1); opacity: 1; }
    100% { transform: scaleX(1); opacity: .75; }
}

/* PRODUCTS */
.products-page {
    padding-top: 96px;
}

.products-page h1,
.reviews-section h2,
.faq-section h2 {
    letter-spacing: -1.2px;
}

.product-grid {
    gap: 18px;
}

.product-card {
    position: relative;
    overflow: hidden;
    min-height: 292px;
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    padding: 22px;
    background: linear-gradient(155deg, rgba(23,23,25,.72), rgba(14,14,16,.72));
    border-color: rgba(255,255,255,.06);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.018);
    transition: transform .32s ease, border-color .32s ease, box-shadow .32s ease;
}

.product-card::before {
    content: '';
    position: absolute;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    top: -115px;
    left: 50%;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(204,0,0,.11), transparent 68%);
    opacity: .28;
    transition: opacity .32s ease, transform .32s ease;
    pointer-events: none;
}

.product-card:hover {
    transform: translateY(-5px);
    border-color: rgba(210,10,10,.22);
    box-shadow: 0 18px 48px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.035);
}

.product-card:hover::before {
    opacity: .8;
    transform: translateX(-50%) scale(1.08);
}

.product-card--spotlight {
    border-color: rgba(204,0,0,.16);
    background: linear-gradient(155deg, rgba(30,18,20,.84), rgba(14,14,16,.76) 48%);
}

.product-card--spotlight::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid rgba(255,40,40,.06);
    pointer-events: none;
}

.product-ribbon {
    position: absolute;
    top: 13px;
    right: 13px;
    z-index: 3;
    border-radius: 99px;
    padding: 5px 9px;
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: #ff8c8c;
    background: rgba(204,0,0,.10);
    border: 1px solid rgba(255,60,60,.14);
}

.product-image-wrapper {
    height: 94px;
    border-radius: 11px;
    margin-bottom: 16px;
    background: linear-gradient(145deg, rgba(255,255,255,.028), rgba(255,255,255,.012));
    border: 1px solid rgba(255,255,255,.035);
}

.product-img,
.bundle-icons {
    transition: transform .32s ease;
}

.product-card:hover .product-img,
.product-card:hover .bundle-icons {
    transform: translateY(-3px) scale(1.045);
}

.product-card h3 {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 16px;
    letter-spacing: -.25px;
}

.product-desc {
    min-height: 34px;
    color: #73747a;
    line-height: 1.45;
}

.price {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 24px;
    margin-top: auto;
}

.btn-view {
    border-radius: 9px;
    transition: transform .28s ease, background .28s ease, border-color .28s ease, color .28s ease;
}

.product-card:hover .btn-view {
    transform: translateY(-1px);
}

.product-card--spotlight .btn-view {
    border-color: rgba(204,0,0,.16);
    background: rgba(204,0,0,.055);
}

/* REVIEWS */
.reviews-section {
    background: linear-gradient(180deg, transparent, rgba(255,255,255,.008) 50%, transparent);
}

.review-stats {
    width: fit-content;
    margin: 0 auto 42px;
    padding: 12px 22px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.055);
    background: rgba(255,255,255,.018);
}

.review-stats .big-number {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 38px;
    line-height: 1;
    margin-bottom: 5px;
}

.reviews-grid {
    gap: 16px;
}

.review-card {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    padding: 20px;
    min-height: 190px;
    background: linear-gradient(150deg, rgba(24,24,27,.58), rgba(14,14,16,.58));
    border-color: rgba(255,255,255,.055);
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.review-card::after {
    content: '“';
    position: absolute;
    right: 15px;
    bottom: -21px;
    font-family: Georgia, serif;
    font-size: 92px;
    line-height: 1;
    color: rgba(204,0,0,.055);
    pointer-events: none;
}

.review-card:hover {
    transform: translateY(-3px);
    border-color: rgba(204,0,0,.15);
    box-shadow: 0 16px 38px rgba(0,0,0,.18);
}

.review-header {
    margin-bottom: 12px;
    align-items: flex-start;
}

.review-author {
    display: flex;
    align-items: center;
    gap: 10px;
}

.review-avatar {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .3px;
    color: #d7d7dc;
    background: linear-gradient(145deg, rgba(204,0,0,.12), rgba(255,255,255,.035));
    border: 1px solid rgba(255,255,255,.065);
}

.review-author-copy {
    min-width: 0;
}

.review-name,
.review-source {
    display: block;
}

.review-name {
    font-size: 13px;
}

.review-source {
    margin-top: 2px;
    color: #54575d;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .55px;
}

.review-date {
    padding-top: 3px;
    color: #4f5258;
    white-space: nowrap;
}

.review-rating {
    margin-bottom: 8px;
    color: #f1c84a;
    font-size: 12px;
}

.review-product {
    width: fit-content;
    padding: 4px 7px;
    border-radius: 6px;
    color: #7b7e84;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.04);
    margin-bottom: 10px;
}

.review-text {
    position: relative;
    z-index: 1;
    color: #a0a1a6;
    line-height: 1.65;
}

/* PRODUCT PAGE TRUST ROW — consistent icon language, no emoji dependency */
.order-info {
    gap: 8px;
}

.order-info span {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #73767c;
}

.order-info span::before {
    content: '';
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    border-radius: 5px;
    border: 1px solid rgba(204,0,0,.13);
    background: radial-gradient(circle at 50% 50%, rgba(204,0,0,.12), rgba(204,0,0,.035));
}

/* FOOTER */
footer {
    position: relative;
    overflow: hidden;
    padding-top: 68px;
    background: linear-gradient(180deg, rgba(10,10,11,.94), #080809);
    border-top-color: rgba(255,255,255,.045);
}

footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: min(720px, 70vw);
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, rgba(204,0,0,.5), transparent);
    box-shadow: 0 0 24px rgba(204,0,0,.18);
}

footer::after {
    content: '';
    position: absolute;
    left: -100px;
    bottom: -180px;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(204,0,0,.06), transparent 68%);
    pointer-events: none;
}

.footer-grid {
    grid-template-columns: minmax(280px, 2fr) 1fr 1fr;
    gap: 64px;
}

.footer-brand h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 21px;
    letter-spacing: 2.5px;
}

.footer-brand h3::before {
    content: 'E';
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    font-size: 14px;
    letter-spacing: 0;
    background: linear-gradient(145deg, #d20a0a, #780000);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 9px 25px rgba(204,0,0,.12);
}

.footer-brand p {
    max-width: 320px;
    color: #717279;
    line-height: 1.65;
}

.footer-links h4 {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .9px;
    color: #a1a2a7;
}

.footer-links ul li {
    margin-bottom: 9px;
}

.footer-links ul li a {
    color: #686a70;
}

.footer-links a[href*="discord.gg"] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    margin-top: 1px;
    border-radius: 8px;
    color: #d7d7dc;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.055);
}

.footer-links a[href*="discord.gg"]::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #28ca72;
    box-shadow: 0 0 0 3px rgba(40,202,114,.08);
}

.footer-links a[href*="discord.gg"]:hover {
    color: #fff;
    border-color: rgba(204,0,0,.18);
    background: rgba(204,0,0,.045);
}

.footer-bottom {
    color: #4c4e53;
    border-top-color: rgba(255,255,255,.045);
}

/* Responsive visual pass */
@media (max-width: 1050px) {
    .hero {
        min-height: auto;
        padding-top: 140px;
    }

    .hero-shell {
        grid-template-columns: 1fr;
        gap: 54px;
    }

    .hero-content {
        max-width: 760px;
        margin: 0 auto;
        text-align: center;
    }

    .hero-content p {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-buttons,
    .hero-stats {
        justify-content: center;
        margin-left: auto;
        margin-right: auto;
    }

    .hero-stats .stat {
        text-align: center;
    }

    .hero-visual {
        min-height: 440px;
    }
}

@media (max-width: 768px) {
    .hero {
        padding: 126px 0 72px;
    }

    .hero-content h1 {
        font-size: clamp(40px, 12vw, 54px);
        letter-spacing: -1.8px;
    }

    .hero-visual {
        min-height: 390px;
    }

    .hero-dashboard {
        width: calc(100% - 26px);
        transform: none;
        padding: 14px;
    }

    .hero-dashboard:hover {
        transform: translateY(-2px);
    }

    .hero-glow-ring-one { width: 330px; height: 330px; }
    .hero-glow-ring-two { width: 260px; height: 260px; }
    .hero-float-logo { width: 42px; height: 42px; }
    .hero-float-logo img { width: 25px; height: 25px; }
    .hero-float-logo-netflix { right: 0; top: 36px; }
    .hero-float-logo-discord { left: 0; bottom: 48px; }

    .hero-stats {
        width: 100%;
        gap: 0;
    }

    .hero-stats .stat {
        padding: 0 10px;
    }

    .hero-stats .stat + .stat {
        padding-left: 10px;
    }

    .hero-stats .stat-number {
        font-size: 21px;
    }

    .hero-stats .stat-label {
        font-size: 10px;
    }

    .product-card {
        min-height: 280px;
    }

    .review-card {
        min-height: 0;
    }

    .footer-grid {
        gap: 30px;
    }
}

@media (max-width: 520px) {
    .hero-mini-features {
        grid-template-columns: 1fr 1fr;
    }

    .hero-mini-feature:last-child {
        grid-column: 1 / -1;
        min-height: 58px;
    }

    .hero-preview-product {
        grid-template-columns: 38px 1fr auto;
    }

    .hero-preview-product-icon {
        width: 38px;
        height: 38px;
    }

    .hero-float-logo {
        display: none;
    }

    .review-date {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-glow-ring,
    .hero-float-logo,
    .hero-preview-progress-line span,
    .hero .btn-primary::after {
        animation: none !important;
        transition: none !important;
    }
}


/* ========================================
   PRODUCT PAGE REDESIGN — PREMIUM PASS
======================================== */
.product-page {
    position: relative;
    padding: 126px 0 92px;
    isolation: isolate;
}

.product-page::before {
    content: '';
    position: absolute;
    top: 86px;
    left: 50%;
    width: min(1120px, 88vw);
    height: 440px;
    transform: translateX(-50%);
    background:
        radial-gradient(circle at 22% 20%, rgba(204,0,0,.085), transparent 34%),
        radial-gradient(circle at 82% 54%, rgba(204,0,0,.045), transparent 32%);
    pointer-events: none;
    z-index: -1;
}

.product-page-grid {
    grid-template-columns: minmax(0, 1fr) 390px;
    gap: 34px;
    align-items: start;
}

.product-page-info {
    position: relative;
    overflow: hidden;
    padding: 32px;
    border-radius: 24px;
    background:
        linear-gradient(145deg, rgba(20,20,22,.88), rgba(12,12,13,.82)),
        radial-gradient(circle at 0 0, rgba(204,0,0,.07), transparent 35%);
    border: 1px solid rgba(255,255,255,.065);
    box-shadow: 0 24px 70px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.025);
}

.product-page-info::before {
    content: '';
    position: absolute;
    top: 0;
    left: 9%;
    right: 9%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(204,0,0,.58), transparent);
    box-shadow: 0 0 24px rgba(204,0,0,.14);
}

.product-page-info .back-link {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 11px;
    margin-bottom: 18px;
    border-radius: 9px;
    color: #777980;
    font-size: 12px;
    font-weight: 600;
    background: rgba(255,255,255,.022);
    border: 1px solid rgba(255,255,255,.045);
}

.product-page-info .back-link:hover {
    color: #fff;
    border-color: rgba(204,0,0,.22);
    background: rgba(204,0,0,.055);
    transform: translateX(-2px);
}

.product-kicker {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 18px;
    color: #8c8e95;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .75px;
    text-transform: uppercase;
}

.product-kicker-dot,
.availability-dot,
.order-ready-dot {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: #2fd37e;
    box-shadow: 0 0 0 4px rgba(47,211,126,.07), 0 0 14px rgba(47,211,126,.18);
}

.product-heading-row {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid rgba(255,255,255,.055);
}

.product-page-icon {
    width: 92px;
    height: 92px;
    flex: 0 0 92px;
    margin: 0;
    border-radius: 22px;
    background:
        linear-gradient(145deg, rgba(204,0,0,.12), rgba(30,10,10,.44)),
        rgba(255,255,255,.025);
    border: 1px solid rgba(204,0,0,.18);
    box-shadow: 0 15px 40px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.04);
}

.product-page-icon .product-page-img {
    width: 50px;
    height: 50px;
    filter: drop-shadow(0 8px 18px rgba(0,0,0,.24));
}

.bundle-icons-large {
    gap: 8px;
}

.bundle-icon-img-large {
    width: 34px;
    height: 34px;
}

.product-heading-copy {
    min-width: 0;
}

.product-availability {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 8px;
    margin-bottom: 7px;
    border-radius: 999px;
    color: #8b8e94;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .45px;
    text-transform: uppercase;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.045);
}

.product-page-info h1 {
    margin: 0 0 7px;
    color: #fff;
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: clamp(32px, 4vw, 46px);
    line-height: 1.02;
    letter-spacing: -1.5px;
}

.product-page-rating {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    color: #e6b84d;
    font-size: 12px;
    letter-spacing: .2px;
}

.product-page-description {
    padding: 0;
}

.product-page-description p {
    max-width: 720px;
    margin-bottom: 22px;
    color: #9a9ca2;
    font-size: 15px;
    line-height: 1.8;
}

.product-section-label,
.product-details-heading,
.product-page-variants h3 {
    margin: 0 0 12px;
    color: #d6d7dc;
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .65px;
    text-transform: uppercase;
}

.product-features,
.bundle-includes {
    gap: 8px;
    margin-bottom: 24px;
}

.feature-tag,
.bundle-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 6px 12px 6px 27px;
    border-radius: 9px;
    color: #aeb0b5;
    font-size: 11px;
    font-weight: 600;
    background: rgba(255,255,255,.026);
    border: 1px solid rgba(255,255,255,.052);
}

.feature-tag::before,
.bundle-item::before {
    content: '';
    position: absolute;
    left: 11px;
    width: 6px;
    height: 6px;
    border-radius: 2px;
    background: #b80c0c;
    box-shadow: 0 0 10px rgba(204,0,0,.18);
}

.product-page-variants {
    margin: 28px 0 24px;
    padding: 20px;
    border-radius: 16px;
    background: rgba(7,7,8,.28);
    border: 1px solid rgba(255,255,255,.05);
}

.product-page-variants .variant-options {
    gap: 9px;
}

.product-page-variants .variant-option {
    min-height: 66px;
    padding: 13px 14px;
    border-radius: 12px;
    background: rgba(255,255,255,.022);
    border-color: rgba(255,255,255,.055);
    transition: transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease;
}

.product-page-variants .variant-option:hover {
    transform: translateY(-1px);
    background: rgba(255,255,255,.035);
    border-color: rgba(204,0,0,.18);
}

.product-page-variants .variant-option.selected {
    background: linear-gradient(90deg, rgba(204,0,0,.10), rgba(204,0,0,.035));
    border-color: rgba(204,0,0,.48);
    box-shadow: inset 3px 0 0 #c20b0b, 0 8px 24px rgba(0,0,0,.12);
}

.product-page-variants .variant-option .variant-name {
    font-size: 13px;
    letter-spacing: -.1px;
}

.product-page-variants .variant-option .variant-desc {
    color: #6e7076;
    font-size: 11px;
}

.product-page-variants .variant-option .variant-price {
    margin-left: auto;
    padding-left: 18px;
    color: #f0f0f2;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 16px;
}

.product-page-variants .variant-option .variant-check {
    width: 19px;
    height: 19px;
    margin-left: 12px;
    border-width: 1px;
}

.product-page-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 9px;
    margin-top: 26px;
    padding: 20px;
    border: 1px solid rgba(255,255,255,.05);
    border-radius: 16px;
    background: rgba(7,7,8,.26);
}

.product-details-heading {
    grid-column: 1 / -1;
    margin-bottom: 2px;
}

.detail-row {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    min-height: 68px;
    padding: 12px 13px;
    border-radius: 11px;
    font-size: 12px;
    background: rgba(255,255,255,.022);
    border: 1px solid rgba(255,255,255,.04);
}

.detail-label {
    color: #666970;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .55px;
    text-transform: uppercase;
}

.detail-value {
    overflow-wrap: anywhere;
    color: #d4d5d9;
    font-size: 12px;
    font-weight: 600;
}

.product-page-order {
    top: 104px;
}

.order-summary-card {
    position: relative;
    overflow: hidden;
    padding: 22px;
    border-radius: 22px;
    background:
        linear-gradient(150deg, rgba(23,23,25,.96), rgba(11,11,12,.94));
    border: 1px solid rgba(255,255,255,.075);
    box-shadow: 0 28px 80px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.025);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.order-summary-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 13%;
    right: 13%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(204,0,0,.75), transparent);
    box-shadow: 0 0 22px rgba(204,0,0,.18);
}

.order-summary-card::after {
    content: '';
    position: absolute;
    width: 190px;
    height: 190px;
    right: -95px;
    top: -100px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(204,0,0,.075), transparent 68%);
    pointer-events: none;
}

.order-card-brandbar {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid rgba(255,255,255,.055);
}

.order-card-brand {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.order-card-product-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: rgba(204,0,0,.07);
    border: 1px solid rgba(204,0,0,.13);
}

.order-card-product-icon img {
    width: 23px;
    height: 23px;
    object-fit: contain;
}

.order-card-brand-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.order-card-brand-copy span {
    color: #52545a;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1px;
}

.order-card-brand-copy strong {
    max-width: 170px;
    overflow: hidden;
    color: #d9dade;
    font-size: 11px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-ready {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-radius: 999px;
    color: #777a80;
    font-size: 9px;
    font-weight: 700;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.05);
}

.order-summary-card h3 {
    position: relative;
    z-index: 1;
    margin-bottom: 16px;
    color: #f0f0f2;
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 17px;
    letter-spacing: -.3px;
}

.order-selection {
    position: relative;
    z-index: 1;
    padding: 13px;
    margin-bottom: 14px;
    border: 1px solid rgba(255,255,255,.05);
    border-radius: 11px;
    background: rgba(255,255,255,.022);
}

.order-product {
    color: #777980;
    font-size: 11px;
}

.order-variant {
    max-width: 55%;
    overflow: hidden;
    color: #e5e5e8;
    font-size: 11px;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-price-row {
    padding: 5px 2px;
    color: #72747a;
    font-size: 11px;
}

.order-total-row {
    align-items: end;
    padding: 17px 2px 12px;
    margin-top: 10px;
    border-top-color: rgba(255,255,255,.055);
    color: #a9abb0;
    font-size: 12px;
}

.order-total-row span:last-child {
    color: #fff;
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 30px;
    line-height: 1;
    letter-spacing: -1px;
}

.order-buttons {
    gap: 9px;
    margin-top: 12px;
}

.order-buy-now,
.order-add-cart {
    min-height: 48px;
    border-radius: 11px;
    font-size: 13px;
    transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.order-buy-now {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #d10c0c, #a80000);
    box-shadow: 0 10px 24px rgba(204,0,0,.12);
}

.order-buy-now:hover {
    transform: translateY(-1px);
    background: linear-gradient(135deg, #e21212, #ba0000);
    box-shadow: 0 13px 28px rgba(204,0,0,.19);
}

.order-buy-now svg {
    transition: transform .2s ease;
}

.order-buy-now:hover svg {
    transform: translateX(2px);
}

.order-add-cart {
    background: rgba(255,255,255,.028);
    border-color: rgba(255,255,255,.065);
}

.order-add-cart:hover {
    transform: translateY(-1px);
    background: rgba(255,255,255,.05);
    border-color: rgba(255,255,255,.11);
}

.order-info {
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
    margin-top: 18px;
    padding-top: 16px;
}

.order-info-item {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 33px;
    padding: 7px 9px;
    border-radius: 9px;
    background: rgba(255,255,255,.018);
    border: 1px solid rgba(255,255,255,.035);
    color: #73757b;
    font-size: 10px;
}

.order-info-icon {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    color: #a80d0d;
    background: rgba(204,0,0,.055);
    border: 1px solid rgba(204,0,0,.09);
}

.order-info-icon svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.order-support-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 9px;
    padding: 10px 11px;
    border-radius: 9px;
    color: #73757b;
    font-size: 10px;
    font-weight: 600;
    border: 1px solid transparent;
    transition: color .2s ease, border-color .2s ease, background .2s ease;
}

.order-support-link:hover {
    color: #d8d9dd;
    background: rgba(204,0,0,.035);
    border-color: rgba(204,0,0,.11);
}

@media (max-width: 1050px) {
    .product-page-grid {
        grid-template-columns: minmax(0,1fr) 350px;
        gap: 24px;
    }
}

@media (max-width: 900px) {
    .product-page-grid {
        grid-template-columns: 1fr;
    }

    .product-page-order {
        position: static;
    }

    .order-summary-card {
        max-width: none;
    }
}

@media (max-width: 640px) {
    .product-page {
        padding: 104px 0 56px;
    }

    .product-page::before {
        top: 72px;
        height: 300px;
    }

    .product-page-info {
        padding: 20px;
        border-radius: 18px;
    }

    .product-heading-row {
        align-items: flex-start;
        gap: 14px;
        padding-bottom: 20px;
        margin-bottom: 20px;
    }

    .product-page-icon {
        width: 70px;
        height: 70px;
        flex-basis: 70px;
        border-radius: 17px;
    }

    .product-page-icon .product-page-img {
        width: 39px;
        height: 39px;
    }

    .bundle-icon-img-large {
        width: 25px;
        height: 25px;
    }

    .product-page-info h1 {
        font-size: clamp(27px, 9vw, 36px);
        letter-spacing: -1px;
    }

    .product-availability {
        display: none;
    }

    .product-page-details {
        grid-template-columns: 1fr 1fr;
        padding: 14px;
    }

    .product-page-variants {
        padding: 14px;
    }

    .product-page-variants .variant-option {
        min-height: 62px;
        padding: 11px 12px;
    }

    .product-page-variants .variant-option .variant-desc {
        max-width: 155px;
    }

    .order-summary-card {
        padding: 18px;
        border-radius: 18px;
    }
}

/* Merchant-controlled game delivery choices and direct cart quantities. */
.game-variant-picker { margin-top: 18px; }
.game-variant-picker .variant-option.is-price-pending {
    cursor: not-allowed;
    opacity: .58;
    filter: saturate(.7);
}
.game-variant-picker .variant-option.is-price-pending:hover {
    transform: none;
    border-color: rgba(255,255,255,.06);
    box-shadow: none;
}
.game-variant-picker .variant-option.is-price-pending .variant-price { color: #8d8f96; font-size: 12px; }
.game-variant-picker .variant-option .variant-info { flex: 1 1 0; min-width: 0; }
.game-variant-picker .variant-option .variant-price { flex: 0 0 auto; white-space: nowrap; }
.game-variant-picker .variant-option .variant-check { flex: 0 0 auto; }
.cart-item-quantity-input {
    width: 48px;
    min-height: 30px;
    padding: 4px 3px;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 7px;
    background: rgba(0,0,0,.16);
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    appearance: textfield;
}
.cart-item-quantity-input::-webkit-outer-spin-button,
.cart-item-quantity-input::-webkit-inner-spin-button { margin: 0; appearance: none; }
.cart-item-quantity-input:focus { outline: 2px solid rgba(226,23,23,.56); outline-offset: 1px; }
@media (max-width: 640px) {
    .product-page-variants .variant-options { grid-template-columns: 1fr; }
    .product-page-variants.game-variant-picker .variant-options { grid-template-columns: 1fr; }
    .product-page-variants.game-variant-picker .variant-option { flex-wrap: nowrap; }
    .cart-item-quantity { gap: 4px; padding: 3px 4px; }
    .cart-item-quantity-input { width: 43px; }
}

.reviews-empty { grid-column: 1 / -1; padding: 34px 20px; border: 1px solid rgba(255,255,255,.07); border-radius: 14px; color: #858890; text-align: center; background: rgba(255,255,255,.018); }
.review-page { padding: 130px 0 80px; min-height: calc(100vh - 70px); }
.review-card-shell { width: min(100% - 32px, 650px); margin: 0 auto; padding: 36px; border: 1px solid rgba(255,255,255,.08); border-radius: 22px; background: linear-gradient(145deg, rgba(17,17,20,.94), rgba(10,10,12,.86)); box-shadow: 0 28px 80px rgba(0,0,0,.26); }
.review-page-kicker { color: #ee555b; font-size: 10px; font-weight: 800; letter-spacing: 1.6px; }
.review-card-shell h1 { margin: 10px 0 9px; color: #fff; font-size: clamp(27px, 5vw, 40px); letter-spacing: -.8px; }
.review-page-lead { margin: 0 0 24px; color: #9a9da5; line-height: 1.65; }
.review-order-note { margin-bottom: 22px; padding: 10px 12px; border: 1px solid rgba(255,255,255,.07); border-radius: 9px; color: #c7c9ce; font-size: 12px; background: rgba(255,255,255,.025); }
.review-field { display: grid; gap: 8px; margin-top: 16px; color: #bbbfc6; font-size: 12px; font-weight: 700; }
.review-field input, .review-field textarea, .review-field select { width: 100%; box-sizing: border-box; padding: 12px 13px; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; color: #fff; background: rgba(0,0,0,.22); font: inherit; font-size: 14px; font-weight: 500; }
.review-field textarea { min-height: 132px; resize: vertical; line-height: 1.55; }
.review-field input:focus, .review-field textarea:focus, .review-field select:focus { outline: 2px solid rgba(226,23,23,.56); outline-offset: 1px; }
.review-rating-field { margin: 18px 0 0; padding: 0; border: 0; }
.review-rating-field legend { margin-bottom: 8px; color: #bbbfc6; font-size: 12px; font-weight: 700; }
.review-stars-input { display: flex; gap: 4px; }
.review-stars-input button { padding: 0 2px; border: 0; color: #575b63; background: none; font-size: 31px; line-height: 1; cursor: pointer; transition: color .16s ease, transform .16s ease; }
.review-stars-input button:hover, .review-stars-input button.is-selected { color: #f0b94f; transform: translateY(-1px); }
.review-form-status { min-height: 20px; margin: 16px 0 0; color: #8acba3; font-size: 12px; line-height: 1.5; }
.review-form-status.is-error { color: #ff888e; }
.review-submit-btn, .review-back-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 47px; padding: 0 19px; border: 1px solid #a82f36; border-radius: 10px; color: #fff; background: linear-gradient(135deg, #e33a43, #a91f28); font: inherit; font-size: 13px; font-weight: 800; text-decoration: none; cursor: pointer; }
.review-submit-btn:hover, .review-back-btn:hover { filter: brightness(1.08); }
.review-submit-btn:disabled { opacity: .6; cursor: wait; }
.review-success { text-align: center; }
.review-success-icon { display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 14px; border: 1px solid rgba(88,214,141,.3); border-radius: 50%; color: #8eeab1; background: rgba(88,214,141,.1); font-size: 25px; font-weight: 800; }
.review-success h2 { margin: 0; color: #fff; font-size: 23px; }
.review-success p { margin: 10px 0 22px; color: #989ba4; }
@media (max-width: 640px) { .review-page { padding-top: 105px; } .review-card-shell { width: min(100% - 24px, 650px); padding: 25px 18px; border-radius: 18px; } }

@media (max-width: 430px) {
    .product-page-info {
        padding: 17px;
    }

    .product-heading-row {
        flex-direction: column;
    }

    .product-page-icon {
        width: 64px;
        height: 64px;
        flex-basis: 64px;
    }

    .product-page-details {
        grid-template-columns: 1fr;
    }

    .product-page-variants .variant-option {
        flex-wrap: wrap;
    }

    .product-page-variants .variant-option .variant-price {
        margin-left: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .product-page-info .back-link,
    .product-page-variants .variant-option,
    .order-buy-now,
    .order-add-cart,
    .order-buy-now svg,
    .order-support-link {
        transition: none !important;
    }
}


/* =====================================================
   GAMES PLATFORM TAB + IN-PAGE LIBRARY MODAL
   ===================================================== */
.games-platform-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    max-width: 920px;
    margin: 0 auto;
}

.game-platform-card {
    position: relative;
    overflow: hidden;
    min-height: 330px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 20px;
    padding: 26px;
    background: linear-gradient(155deg, rgba(24,24,27,.9), rgba(12,12,14,.88));
    color: #fff;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 20px 48px rgba(0,0,0,.18);
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.game-platform-card::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.025) 50%, transparent 78%);
    transform: translateX(-110%);
    transition: transform .7s ease;
}

.game-platform-card:hover {
    transform: translateY(-6px);
    border-color: rgba(215,20,20,.27);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 26px 64px rgba(0,0,0,.32);
}

.game-platform-card:hover::after { transform: translateX(110%); }

.game-platform-glow {
    position: absolute;
    width: 260px;
    height: 260px;
    right: -125px;
    top: -120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(204,0,0,.22), transparent 67%);
    opacity: .55;
    pointer-events: none;
}

.game-platform-card--microsoft .game-platform-glow {
    background: radial-gradient(circle, rgba(255,255,255,.11), transparent 68%);
}

.game-platform-topline {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #74747b;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.15px;
    text-transform: uppercase;
}

.game-platform-count {
    padding: 6px 9px;
    border-radius: 999px;
    color: #aaaab1;
    border: 1px solid rgba(255,255,255,.07);
    background: rgba(255,255,255,.025);
    letter-spacing: .3px;
}

.game-platform-icon {
    position: relative;
    z-index: 2;
    width: 88px;
    height: 88px;
    margin: 34px 0 25px;
    border-radius: 22px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 14px 36px rgba(0,0,0,.26);
}

.game-platform-img { width: 52px; height: 52px; object-fit: contain; }

.ms-logo {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 4px;
    width: 48px;
    height: 48px;
}
.ms-logo span { display: block; background: #f0f0f2; border-radius: 1px; }

.game-platform-copy { position: relative; z-index: 2; }
.game-platform-copy h3 {
    margin: 0 0 9px;
    color: #fff;
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 25px;
    letter-spacing: -.65px;
}
.game-platform-copy p {
    margin: 0;
    max-width: 390px;
    color: #828289;
    font-size: 13px;
    line-height: 1.7;
}

.game-platform-open {
    position: absolute;
    z-index: 2;
    left: 26px;
    right: 26px;
    bottom: 23px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #d9d9dd;
    font-size: 12px;
    font-weight: 750;
    transition: color .25s ease;
}
.game-platform-card:hover .game-platform-open { color: #f04747; }

body.game-modal-open {
    overflow: hidden;
    overscroll-behavior: none;
}
.game-library-modal[hidden] { display: none !important; }
.game-library-modal {
    position: fixed !important;
    z-index: 100000;
    inset: 0 !important;
    width: 100vw;
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(20px, 4vw, 48px);
    background: rgba(2,2,3,.88);
    opacity: 0;
    overflow: hidden;
    isolation: isolate;
    overscroll-behavior: contain;
    transition: opacity .18s ease;
}
.game-library-modal::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 38%, rgba(204,0,0,.075), transparent 36%),
        linear-gradient(to bottom, rgba(255,255,255,.012), transparent 30%);
}
.game-library-modal.is-open { opacity: 1; }

.game-library-dialog {
    position: relative;
    z-index: 1;
    width: min(1040px, calc(100vw - 48px));
    height: min(720px, calc(100dvh - 96px));
    max-height: 720px;
    min-height: 500px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.085);
    border-radius: 20px;
    background: linear-gradient(160deg, #141416 0%, #0c0c0e 58%, #09090b 100%);
    box-shadow:
        0 35px 110px rgba(0,0,0,.72),
        0 0 0 1px rgba(204,0,0,.025),
        inset 0 1px 0 rgba(255,255,255,.035);
    transform: translateY(14px) scale(.985);
    transform-origin: center;
    transition: transform .22s cubic-bezier(.2,.75,.25,1);
}
.game-library-modal.is-open .game-library-dialog { transform: translateY(0) scale(1); }

.game-library-header {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 22px;
    padding: 24px 26px 15px;
}
.game-library-kicker {
    display: block;
    margin-bottom: 6px;
    color: #cf2929;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 1.7px;
}
.game-library-header h3 {
    margin: 0 0 4px;
    color: #fff;
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 25px;
    line-height: 1.08;
    letter-spacing: -.65px;
}
.game-library-header p { margin: 0; color: #74747b; font-size: 11px; }
.game-library-close {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.035);
    color: #a3a3aa;
    cursor: pointer;
    transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.game-library-close:hover {
    transform: rotate(3deg);
    background: rgba(204,0,0,.12);
    border-color: rgba(204,0,0,.25);
    color: #fff;
}

.game-library-toolbar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 26px 16px;
    border-bottom: 1px solid rgba(255,255,255,.055);
}
.game-library-search-wrap {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    height: 40px;
    padding: 0 13px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.075);
    background: rgba(255,255,255,.026);
    color: #64646b;
    transition: border-color .2s ease, background .2s ease;
}
.game-library-search-wrap:focus-within {
    border-color: rgba(204,0,0,.34);
    background: rgba(255,255,255,.034);
}
.game-library-search-wrap input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: #efeff1;
    font: 500 12px 'Inter', sans-serif;
}
.game-library-search-wrap input::placeholder { color: #5b5b62; }
.game-library-platform-pill {
    flex: 0 0 auto;
    min-width: 76px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(204,0,0,.18);
    background: rgba(204,0,0,.07);
    color: #cfcfd3;
    font-size: 10px;
    font-weight: 760;
    text-align: center;
}

.game-library-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 18px 26px 26px;
    scrollbar-width: thin;
    scrollbar-color: rgba(204,0,0,.42) rgba(255,255,255,.025);
    overscroll-behavior: contain;
}
.game-library-scroll::-webkit-scrollbar { width: 7px; }
.game-library-scroll::-webkit-scrollbar-track {
    background: rgba(255,255,255,.02);
    border-radius: 999px;
}
.game-library-scroll::-webkit-scrollbar-thumb {
    background: rgba(204,0,0,.38);
    border-radius: 999px;
}
.game-library-scroll::-webkit-scrollbar-thumb:hover { background: rgba(204,0,0,.55); }
.game-library-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.game-list-card {
    min-width: 0;
    display: grid;
    grid-template-columns: 42px minmax(0,1fr);
    gap: 11px;
    align-items: center;
    padding: 12px;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 13px;
    background: rgba(255,255,255,.021);
    transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.game-list-card:hover {
    transform: translateY(-2px);
    border-color: rgba(204,0,0,.2);
    background: rgba(204,0,0,.035);
}
.game-list-card[hidden],
.game-list-card.is-filtered-out {
    display: none !important;
}
.game-list-mark {
    position: relative;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 10px;
    background: linear-gradient(145deg, rgba(204,0,0,.19), rgba(204,0,0,.05));
    border: 1px solid rgba(204,0,0,.13);
    color: #e9e9ec;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .25px;
}

.game-list-mark.has-image {
    background: rgba(6, 6, 8, 0.9);
    border-color: rgba(255,255,255,.08);
}

.game-list-thumb {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}
.game-list-copy { min-width: 0; }
.game-list-platform {
    display: block;
    margin-bottom: 2px;
    color: #68686f;
    font-size: 7.5px;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: .8px;
}
.game-list-copy h4 {
    margin: 0 0 4px;
    overflow: hidden;
    color: #e8e8eb;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.game-list-price { color: #8b8b92; font-size: 8.5px; }
.game-list-view {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1px;
    padding-top: 9px;
    border-top: 1px solid rgba(255,255,255,.045);
    color: #a7a7ae;
    font-size: 8.5px;
    font-weight: 750;
    text-decoration: none;
    transition: color .2s ease;
}
.game-list-view:hover { color: #e43a3a; }
.game-library-empty { padding: 45px 12px; text-align: center; color: #6f6f76; font-size: 13px; }

@media (max-width: 900px) {
    .game-library-modal { padding: 28px 18px; }
    .game-library-dialog {
        width: min(760px, 100%);
        height: min(760px, calc(100dvh - 56px));
        max-height: calc(100dvh - 56px);
        min-height: 0;
    }
    .game-library-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 600px) {
    .game-library-modal {
        padding: 12px;
        align-items: center;
    }
    .game-library-dialog {
        width: 100%;
        height: calc(100dvh - 24px);
        max-height: calc(100dvh - 24px);
        min-height: 0;
        border-radius: 17px;
    }
    .game-library-header { padding: 19px 17px 13px; }
    .game-library-header h3 { font-size: 22px; }
    .game-library-toolbar { padding: 0 17px 13px; }
    .game-library-platform-pill { display: none; }
    .game-library-scroll { padding: 13px 17px 20px; }
    .game-library-grid { grid-template-columns: 1fr; }
    .game-list-copy h4 { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
    .game-platform-card, .game-platform-card::after, .game-library-modal, .game-library-dialog, .game-list-card { transition: none !important; }
}

/* Game product pages awaiting confirmed prices */
.game-product-mark {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    border-radius: inherit;
    background: linear-gradient(145deg, rgba(204,0,0,.2), rgba(204,0,0,.055));
    color: #fff;
    font-size: 23px;
    font-weight: 850;
    letter-spacing: .5px;
}
.game-pending-dot { background: #d58b29 !important; box-shadow: 0 0 0 4px rgba(213,139,41,.08), 0 0 16px rgba(213,139,41,.28) !important; }
.game-platform-detail { display: inline-flex; align-items: center; gap: 8px; }
.game-platform-detail img { width: 16px; height: 16px; object-fit: contain; }
.game-platform-detail .ms-logo { width: 15px; height: 15px; gap: 1.5px; }
.game-tba-price { color: #ececef !important; font-size: 21px !important; }
.game-disabled-purchase {
    width: 100%;
    min-height: 48px;
    border: 1px solid rgba(255,255,255,.065);
    border-radius: 10px;
    background: rgba(255,255,255,.025);
    color: #707077;
    font: 700 11px 'Inter', sans-serif;
    cursor: not-allowed;
}
.game-purchase-note { margin: 11px 0 0; color: #66666d; font-size: 10px; line-height: 1.55; text-align: center; }
.game-support-cta {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 10px;
    border: 1px solid rgba(204,0,0,.18);
    background: rgba(204,0,0,.085);
    color: #e4e4e7;
    text-decoration: none;
    font-size: 11px;
    font-weight: 750;
    transition: border-color .2s ease, background .2s ease;
}
.game-support-cta:hover { border-color: rgba(204,0,0,.32); background: rgba(204,0,0,.13); }

@media (max-width: 900px) {
    .games-platform-grid { grid-template-columns: 1fr; max-width: 620px; }
}
@media (max-width: 600px) {
    .game-platform-card { min-height: 310px; padding: 22px; }
    .game-platform-open { left: 22px; right: 22px; }
}
@media (prefers-reduced-motion: reduce) {
    .game-platform-card, .game-platform-card::after, .game-library-modal, .game-library-dialog, .game-list-card { transition: none !important; }
}


/* ============================================================
   EXODIA GAME PRODUCT ARTWORK — wide transparent title graphics
   ============================================================ */
.game-product-page .game-artwork-stage {
    position: relative;
    isolation: isolate;
    width: 100%;
    aspect-ratio: 16 / 7;
    min-height: 0;
    margin: 0 0 24px;
    padding: 0;
    display: block;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 20px;
    background: #0d0d0f;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 20px 55px rgba(0,0,0,.22);
}
.game-product-page .game-artwork-stage::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(0,0,0,0) 48%, rgba(0,0,0,.28) 100%),
        linear-gradient(90deg, rgba(204,0,0,.035), transparent 18%, transparent 82%, rgba(204,0,0,.035));
}
.game-product-page .game-artwork-stage::after {
    content: '';
    position: absolute;
    z-index: 4;
    left: 10%;
    right: 10%;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(204,0,0,.55), transparent);
    box-shadow: 0 0 24px rgba(204,0,0,.18);
    pointer-events: none;
}
.game-title-art {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    filter: none;
    transform: translateZ(0) scale(1.002);
}
.game-artwork-platform {
    position: absolute;
    z-index: 5;
    right: 15px;
    bottom: 13px;
    padding: 6px 9px;
    border: 1px solid rgba(255,255,255,.055);
    border-radius: 999px;
    background: rgba(7,7,8,.68);
    color: #777980;
    font-size: 9px;
    font-weight: 750;
    letter-spacing: .55px;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
}
.game-artwork-fallback {
    display: none;
    width: 112px;
    height: 112px;
    place-items: center;
    border: 1px solid rgba(204,0,0,.18);
    border-radius: 26px;
    background: linear-gradient(145deg, rgba(204,0,0,.18), rgba(204,0,0,.045));
    color: #f4f4f5;
    font-family: 'Space Grotesk','Inter',sans-serif;
    font-size: 30px;
    font-weight: 850;
    letter-spacing: .5px;
    box-shadow: 0 18px 42px rgba(0,0,0,.26);
}
.game-artwork-stage.art-missing .game-title-art { display: none; }
.game-artwork-stage.art-missing .game-artwork-fallback { display: grid; }
.game-product-heading {
    display: flex;
    align-items: flex-start;
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid rgba(255,255,255,.055);
}
.game-product-heading .product-heading-copy { width: 100%; }
.game-product-page .game-product-heading h1 {
    max-width: 820px;
    font-size: clamp(34px, 4.4vw, 50px);
}

@media (max-width: 900px) {
    .game-product-page .game-artwork-stage {
        aspect-ratio: 16 / 8;
        border-radius: 18px;
    }
}
@media (max-width: 600px) {
    .game-product-page .game-artwork-stage {
        aspect-ratio: 16 / 9;
        border-radius: 16px;
    }
    .game-artwork-fallback { width: 86px; height: 86px; border-radius: 20px; font-size: 24px; }
    .game-artwork-platform { right: 11px; bottom: 10px; font-size: 8px; }
    .game-product-page .game-product-heading h1 { font-size: clamp(30px, 9vw, 40px); }
}


/* ============================================================
   GAME PRODUCT PLATFORM ICON — centered in order brand tile
   ============================================================ */
.order-card-product-icon.game-platform-detail {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0;
}
.order-card-product-icon.game-platform-detail > img {
    display: block;
    width: 21px;
    height: 21px;
    margin: 0;
    object-fit: contain;
}
.order-card-product-icon.game-platform-detail > .ms-logo {
    display: grid;
    width: 18px;
    height: 18px;
    margin: 0;
    gap: 2px;
    flex: 0 0 auto;
}


/* ============================================================
   EXODIA AVAILABILITY + DISCORD CLAIM FULFILLMENT
   ============================================================ */
.product-availability,
.order-ready,
.product-stock-chip { transition: border-color .2s ease, background .2s ease, color .2s ease; }

.product-availability.status-available,
.order-ready.status-available,
.product-stock-chip.status-available {
    border-color: rgba(47,211,126,.14);
    background: rgba(47,211,126,.045);
}
.product-availability.status-limited,
.order-ready.status-limited,
.product-stock-chip.status-limited {
    border-color: rgba(224,155,49,.18);
    background: rgba(224,155,49,.055);
}
.product-availability.status-unavailable,
.order-ready.status-unavailable,
.product-stock-chip.status-unavailable {
    border-color: rgba(222,68,68,.2);
    background: rgba(222,68,68,.055);
}
.product-availability.status-limited .availability-dot,
.order-ready.status-limited .order-ready-dot,
.status-limited .product-stock-dot {
    background: #dfa03c;
    box-shadow: 0 0 0 4px rgba(223,160,60,.07), 0 0 12px rgba(223,160,60,.18);
}
.product-availability.status-unavailable .availability-dot,
.order-ready.status-unavailable .order-ready-dot,
.status-unavailable .product-stock-dot {
    background: #db4949;
    box-shadow: 0 0 0 4px rgba(219,73,73,.07), 0 0 12px rgba(219,73,73,.16);
}

.fulfillment-notice {
    display: grid;
    grid-template-columns: 42px minmax(0,1fr);
    gap: 13px;
    align-items: start;
    margin: 18px 0 4px;
    padding: 14px 15px;
    border: 1px solid rgba(204,0,0,.12);
    border-radius: 13px;
    background: linear-gradient(115deg, rgba(204,0,0,.055), rgba(255,255,255,.018));
}
.fulfillment-notice-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    border: 1px solid rgba(204,0,0,.15);
    background: rgba(204,0,0,.075);
}
.fulfillment-notice-icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: #d64a4a;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.fulfillment-notice strong {
    display: block;
    margin: 1px 0 5px;
    color: #e3e3e6;
    font: 700 12px 'Space Grotesk','Inter',sans-serif;
}
.fulfillment-notice p {
    margin: 0;
    max-width: none;
    color: #85878e;
    font-size: 11px;
    line-height: 1.65;
}

.product-stock-chip {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 8px 0 0;
    padding: 5px 8px;
    border: 1px solid rgba(47,211,126,.13);
    border-radius: 999px;
    color: #81848a;
    background: rgba(47,211,126,.04);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .25px;
}
.product-stock-dot {
    width: 5px;
    height: 5px;
    flex: 0 0 5px;
    border-radius: 50%;
    background: #2fd37e;
    box-shadow: 0 0 9px rgba(47,211,126,.24);
}
.order-buy-now.is-unavailable,
.order-add-cart.is-unavailable {
    opacity: .42;
    cursor: not-allowed;
    filter: saturate(.45);
}

/* ============================================================
   LOADING STATES
   ============================================================ */
.site-loader {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: grid;
    place-items: center;
    background: rgba(5,5,6,.965);
    opacity: 1;
    visibility: visible;
    transition: opacity .32s ease, visibility .32s ease;
}
.site-loader[hidden] { display: none !important; }
.site-loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.site-loader-inner {
    width: min(260px, calc(100vw - 48px));
    display: grid;
    justify-items: center;
    gap: 13px;
}
.site-loader-logo {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(204,0,0,.2);
    border-radius: 15px;
    background: rgba(204,0,0,.06);
    box-shadow: 0 0 34px rgba(204,0,0,.08);
}
.site-loader-logo img { width: 30px; height: 30px; object-fit: contain; }
.site-loader-track {
    width: 100%;
    height: 3px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.045);
}
.site-loader-track span {
    display: block;
    width: 42%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent, #c41616, #ef3a3a, transparent);
    animation: exodiaLoaderSlide 1.05s ease-in-out infinite;
}
.site-loader-label {
    color: #666870;
    font-size: 9px;
    font-weight: 750;
    letter-spacing: 1.3px;
    text-transform: uppercase;
}
@keyframes exodiaLoaderSlide {
    from { transform: translateX(-115%); }
    to { transform: translateX(340%); }
}

.order-buy-now.is-loading,
.order-add-cart.is-loading,
.cart-checkout-btn.is-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}
.order-buy-now.is-loading svg,
.order-add-cart.is-loading svg { opacity: 0; }
.order-buy-now.is-loading::after,
.order-add-cart.is-loading::after,
.cart-checkout-btn.is-loading::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 17px;
    height: 17px;
    margin: -9px 0 0 -9px;
    border: 2px solid rgba(255,255,255,.18);
    border-top-color: rgba(255,255,255,.9);
    border-radius: 50%;
    animation: exodiaSpin .7s linear infinite;
}
@keyframes exodiaSpin { to { transform: rotate(360deg); } }

.game-artwork-stage.is-loading {
    background:
        linear-gradient(105deg, #0d0d0f 20%, #151518 36%, #0d0d0f 52%) 0 0 / 220% 100%;
    animation: gameArtworkSkeleton 1.25s linear infinite;
}
.game-artwork-stage.is-loading .game-title-art { opacity: .16; }
@keyframes gameArtworkSkeleton { to { background-position: -120% 0; } }

/* ============================================================
   CUSTOM ERROR PAGES
   ============================================================ */
.error-page-body { min-height: 100dvh; overflow-x: hidden; }
.error-shell {
    width: min(900px, calc(100% - 32px));
    min-height: 100dvh;
    margin: 0 auto;
    padding: 34px 0;
    display: grid;
    grid-template-rows: auto 1fr;
}
.error-brand {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: #e6e6e9;
    font: 750 14px 'Space Grotesk','Inter',sans-serif;
    letter-spacing: 2px;
    text-decoration: none;
}
.error-brand img { width: 27px; height: 27px; object-fit: contain; }
.error-card {
    position: relative;
    align-self: center;
    overflow: hidden;
    padding: clamp(30px, 6vw, 64px);
    border: 1px solid rgba(255,255,255,.065);
    border-radius: 26px;
    background: linear-gradient(145deg, rgba(20,20,22,.9), rgba(9,9,10,.91));
    box-shadow: 0 30px 90px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.03);
}
.error-card::before {
    content: '';
    position: absolute;
    left: 10%; right: 10%; top: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(204,0,0,.7), transparent);
    box-shadow: 0 0 26px rgba(204,0,0,.18);
}
.error-code {
    position: absolute;
    right: clamp(22px, 5vw, 56px);
    top: clamp(18px, 4vw, 44px);
    color: rgba(204,0,0,.065);
    font: 800 clamp(80px, 18vw, 180px)/.8 'Space Grotesk','Inter',sans-serif;
    letter-spacing: -9px;
    user-select: none;
}
.error-kicker {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 13px;
    color: #75777e;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.2px;
}
.error-kicker span { width: 6px; height: 6px; border-radius: 50%; background: #c61616; box-shadow: 0 0 12px rgba(204,0,0,.32); }
.error-card h1 {
    position: relative;
    z-index: 1;
    max-width: 600px;
    margin: 0 0 13px;
    color: #f1f1f3;
    font: 700 clamp(34px, 7vw, 64px)/.98 'Space Grotesk','Inter',sans-serif;
    letter-spacing: -2.3px;
}
.error-card > p {
    position: relative;
    z-index: 1;
    max-width: 560px;
    margin: 0 0 28px;
    color: #83858c;
    font-size: 14px;
    line-height: 1.7;
}
.error-actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.error-actions .btn-primary,
.error-actions .btn-secondary,
.error-support {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 17px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 11px;
    font-weight: 750;
}
.error-support { color: #888b92; border: 1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.025); }
.error-support:hover { color: #fff; border-color: rgba(204,0,0,.18); }

/* ============================================================
   MOBILE-SPECIFIC POLISH
   ============================================================ */
@media (max-width: 768px) {
    html { scroll-padding-top: 78px; }
    body { overflow-x: hidden; }
    .product-page { padding-top: 92px; padding-bottom: 58px; }
    .product-page .container { width: min(100%, 100%); padding-left: 12px; padding-right: 12px; }
    .product-page-info { padding: 20px; border-radius: 19px; }
    .product-page-info .back-link { margin-bottom: 14px; }
    .product-kicker { margin-bottom: 14px; font-size: 9px; letter-spacing: .55px; }
    .product-heading-row { gap: 14px; padding-bottom: 19px; margin-bottom: 19px; align-items: flex-start; }
    .product-page-icon { width: 72px; height: 72px; flex-basis: 72px; border-radius: 18px; }
    .product-page-icon .product-page-img { width: 40px; height: 40px; }
    .product-page-info h1 { font-size: clamp(28px, 9vw, 38px); letter-spacing: -1.1px; }
    .product-page-rating { font-size: 10.5px; }
    .product-page-description p { font-size: 13px; line-height: 1.7; }
    .product-features, .bundle-includes { gap: 6px; }
    .feature-tag, .bundle-item { min-height: 32px; padding-top: 5px; padding-bottom: 5px; font-size: 10px; }
    .fulfillment-notice { grid-template-columns: 36px minmax(0,1fr); gap: 11px; padding: 12px; }
    .fulfillment-notice-icon { width: 36px; height: 36px; border-radius: 9px; }
    .fulfillment-notice-icon svg { width: 18px; height: 18px; }
    .product-page-variants { margin: 20px 0; padding: 14px; }
    .product-page-variants .variant-option { min-height: 62px; padding: 11px 12px; }
    .product-page-details { grid-template-columns: 1fr; gap: 7px; margin-top: 20px; padding: 14px; }
    .detail-row { min-height: 58px; padding: 10px 11px; }
    .product-page-order { position: static !important; top: auto !important; margin-top: 14px; }
    .order-summary-card { padding: 18px; border-radius: 19px; }
    .order-card-brandbar { gap: 8px; padding-bottom: 15px; margin-bottom: 15px; }
    .order-card-brand-copy strong { max-width: 135px; }
    .order-ready { flex-shrink: 0; font-size: 8px; }
    .order-buttons { gap: 9px; }
    .order-buy-now, .order-add-cart, .game-support-cta, .game-disabled-purchase { min-height: 50px; }
    .game-product-page .game-artwork-stage { margin-bottom: 18px; }
    .game-product-heading { padding-bottom: 19px; margin-bottom: 19px; }
    .game-library-modal { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
    .game-library-search input { font-size: 16px; } /* avoids iOS input zoom */
    .game-list-card { grid-template-columns: 48px minmax(0,1fr); gap: 12px; padding: 12px; }
    .game-list-mark { width: 48px; height: 48px; }
    .game-list-copy h4 { font-size: 12px; }
    .game-list-view { min-height: 30px; align-items: flex-end; }
    .toast { left: 12px !important; right: 12px !important; bottom: max(12px, env(safe-area-inset-bottom)) !important; text-align: center; }
    .error-shell { width: min(100% - 24px, 900px); padding: 18px 0; }
    .error-card { border-radius: 20px; }
    .error-code { opacity: .85; }
}

@media (max-width: 480px) {
    .product-page-info { padding: 16px; }
    .product-heading-row { display: grid; grid-template-columns: 60px minmax(0,1fr); gap: 12px; }
    .product-page-icon { width: 60px; height: 60px; flex-basis: 60px; border-radius: 15px; }
    .product-page-icon .product-page-img { width: 34px; height: 34px; }
    .product-availability { white-space: normal; line-height: 1.35; }
    .product-page-variants .variant-option { align-items: center; }
    .product-page-variants .variant-option .variant-price { padding-left: 8px; font-size: 14px; }
    .order-card-brand-copy span { font-size: 7px; }
    .order-card-brand-copy strong { max-width: 115px; font-size: 10px; }
    .game-library-header h3 { font-size: 20px; }
    .game-library-header p { font-size: 10px; }
    .game-artwork-platform { right: 9px; bottom: 8px; }
    .error-card { padding: 28px 20px; }
    .error-code { right: 16px; top: 20px; font-size: 82px; }
    .error-actions { display: grid; grid-template-columns: 1fr; }
    .error-actions .btn-primary, .error-actions .btn-secondary, .error-support { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .site-loader-track span,
    .order-buy-now.is-loading::after,
    .order-add-cart.is-loading::after,
    .cart-checkout-btn.is-loading::after,
    .game-artwork-stage.is-loading { animation: none !important; }
}


/* ============================================================
   EXODIA BRAND LOGO — favicon/footer consistency
   ============================================================ */
.footer-brand h3::before {
    display: none !important;
    content: none !important;
}

.footer-logo {
    width: 34px;
    height: 34px;
    display: block;
    flex: 0 0 34px;
    object-fit: contain;
    object-position: center;
}

@media (max-width: 600px) {
    .footer-logo {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
    }
}

/* ============================================================
   EXODIA MICRO POLISH — storefront refinement v1
   ============================================================ */

/* Product cards: tighter rhythm, calmer accents, clearer actions */
.product-grid {
    gap: 16px;
}

.product-card {
    min-height: 286px;
    padding: 20px;
    border-radius: 15px;
}

.product-card:hover {
    transform: translateY(-4px);
    border-color: rgba(210, 20, 20, .20);
    box-shadow: 0 16px 42px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.035);
}

.product-card--spotlight {
    border-color: rgba(204,0,0,.14);
    background: linear-gradient(155deg, rgba(28,18,20,.80), rgba(14,14,16,.76) 50%);
}

.product-ribbon {
    top: 12px;
    right: 12px;
    min-height: 21px;
    display: inline-flex;
    align-items: center;
    padding: 0 9px;
    color: #e68a8a;
    background: rgba(204,0,0,.075);
    border-color: rgba(255,70,70,.13);
    letter-spacing: .62px;
}

.product-image-wrapper {
    height: 88px;
    margin-bottom: 14px;
    border-radius: 10px;
    border-color: rgba(255,255,255,.04);
    background: linear-gradient(145deg, rgba(255,255,255,.025), rgba(255,255,255,.010));
}

.product-card h3 {
    margin: 0 0 5px;
    font-size: 15.5px;
    line-height: 1.25;
}

.product-desc {
    min-height: 32px;
    margin: 0 0 13px;
    font-size: 11px;
    line-height: 1.5;
    color: #77787f;
}

.price {
    margin: auto 0 11px;
    font-size: 23px;
    line-height: 1.1;
    letter-spacing: -.4px;
}

.badge {
    min-height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    margin: 0 0 11px;
    padding: 0 10px;
    font-size: 8px;
    font-weight: 750;
    letter-spacing: .62px;
    line-height: 1;
}

.badge.instant {
    color: #d64040;
    background: rgba(204,0,0,.065);
    border-color: rgba(204,0,0,.12);
}

.badge.featured {
    color: #d5bd77;
    background: rgba(183,145,42,.075);
    border-color: rgba(205,169,66,.17);
}

.btn-view {
    width: 100%;
    min-height: 40px;
    padding: 0 14px;
    gap: 7px;
    border-radius: 9px;
    color: #d9d9dd;
    background: rgba(204,0,0,.052);
    border: 1px solid rgba(204,0,0,.13);
    font-size: 11px;
    font-weight: 700;
}

.btn-view .btn-icon {
    width: 15px;
    height: 15px;
    opacity: .82;
}

.product-card:hover .btn-view,
.btn-view:hover {
    transform: translateY(-1px);
    color: #fff;
    background: rgba(204,0,0,.095);
    border-color: rgba(224,26,26,.22);
}

/* Consistent keyboard focus without adding visual noise for mouse users */
.btn-view:focus-visible,
.tab-btn:focus-visible,
.game-platform-card:focus-visible,
.game-library-close:focus-visible,
.game-list-view:focus-visible,
.game-library-search-wrap input:focus-visible {
    outline: 2px solid rgba(239,58,58,.82);
    outline-offset: 3px;
}

/* Availability chip: readable but secondary */
.availability-badge,
.product-availability {
    letter-spacing: .35px;
}

/* Game platform cards: denser, equal visual weight, stronger CTA */
.games-platform-grid {
    gap: 18px;
    max-width: 900px;
}

.game-platform-card {
    min-height: 292px;
    padding: 23px;
    border-radius: 18px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 16px 42px rgba(0,0,0,.17);
}

.game-platform-card:hover {
    transform: translateY(-4px);
    border-color: rgba(215,20,20,.23);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 22px 54px rgba(0,0,0,.29);
}

.game-platform-glow {
    width: 230px;
    height: 230px;
    right: -120px;
    top: -120px;
    opacity: .30;
    transition: opacity .3s ease, transform .3s ease;
}

.game-platform-card--microsoft .game-platform-glow {
    opacity: .22;
}

.game-platform-card:hover .game-platform-glow {
    opacity: .55;
    transform: scale(1.04);
}

.game-platform-topline {
    font-size: 9px;
    letter-spacing: 1.05px;
}

.game-platform-count {
    min-height: 25px;
    display: inline-flex;
    align-items: center;
    padding: 0 9px;
    color: #a5a5ac;
    background: rgba(255,255,255,.022);
    border-color: rgba(255,255,255,.075);
}

.game-platform-icon {
    width: 80px;
    height: 80px;
    margin: 27px 0 20px;
    border-radius: 19px;
}

.game-platform-img {
    width: 48px;
    height: 48px;
}

.game-platform-icon .ms-logo {
    width: 44px;
    height: 44px;
}

.game-platform-copy h3 {
    margin-bottom: 7px;
    font-size: 23px;
    line-height: 1.12;
}

.game-platform-copy p {
    max-width: 370px;
    font-size: 12px;
    line-height: 1.58;
    color: #7b7c83;
}

.game-platform-open {
    left: 23px;
    right: 23px;
    bottom: 19px;
    min-height: 39px;
    padding: 0 12px;
    border-radius: 10px;
    color: #d5d5d9;
    background: rgba(255,255,255,.022);
    border: 1px solid rgba(255,255,255,.055);
    transition: color .22s ease, background .22s ease, border-color .22s ease, transform .22s ease;
}

.game-platform-open > span:last-child,
.game-platform-open > [aria-hidden="true"] {
    font-size: 15px;
    transition: transform .22s ease;
}

.game-platform-card:hover .game-platform-open {
    color: #f1f1f3;
    background: rgba(204,0,0,.07);
    border-color: rgba(204,0,0,.15);
}

.game-platform-card:hover .game-platform-open > [aria-hidden="true"] {
    transform: translateX(3px);
}

/* Game library modal: slightly cleaner controls/cards */
.game-library-search-wrap {
    min-height: 42px;
    border-radius: 10px;
}

.game-library-search-wrap:focus-within {
    border-color: rgba(220,34,34,.25);
    box-shadow: 0 0 0 3px rgba(204,0,0,.045);
}

.game-library-platform-pill {
    min-height: 32px;
    padding-inline: 12px;
}

.game-list-card {
    border-radius: 12px;
    border-color: rgba(255,255,255,.055);
    background: rgba(255,255,255,.017);
}

.game-list-card:hover {
    border-color: rgba(204,0,0,.14);
    background: rgba(204,0,0,.025);
}

.game-list-view {
    min-height: 29px;
    color: #9b9ca2;
}

.game-list-view:hover {
    color: #f05a5a;
}

/* Tabs feel more like one control and less like three detached buttons */
.product-tabs {
    gap: 6px;
}

.tab-btn {
    min-height: 42px;
    border-radius: 10px;
}

/* Fine mobile rhythm */
@media (max-width: 768px) {
    .product-grid { gap: 12px; }
    .product-card {
        min-height: 272px;
        padding: 17px;
        border-radius: 14px;
    }
    .product-image-wrapper {
        height: 82px;
        margin-bottom: 12px;
    }
    .product-card h3 { font-size: 15px; }
    .product-desc { min-height: 30px; margin-bottom: 11px; }
    .price { font-size: 22px; margin-bottom: 10px; }
    .badge { margin-bottom: 10px; }
    .btn-view { min-height: 42px; }

    .games-platform-grid { gap: 13px; }
    .game-platform-card {
        min-height: 270px;
        padding: 20px;
    }
    .game-platform-icon {
        width: 72px;
        height: 72px;
        margin: 23px 0 18px;
        border-radius: 17px;
    }
    .game-platform-img { width: 43px; height: 43px; }
    .game-platform-icon .ms-logo { width: 40px; height: 40px; }
    .game-platform-copy h3 { font-size: 21px; }
    .game-platform-copy p { font-size: 11.5px; line-height: 1.55; }
    .game-platform-open {
        left: 20px;
        right: 20px;
        bottom: 17px;
        min-height: 40px;
    }
}

@media (max-width: 480px) {
    .product-card { min-height: 264px; }
    .product-ribbon { top: 10px; right: 10px; }
    .game-platform-card { min-height: 260px; }
    .game-platform-topline { gap: 8px; }
    .game-platform-count { min-height: 23px; padding-inline: 8px; }
}


/* ============================================================
   EXODIA SCROLL PERFORMANCE FIX — anchor/navigation smoothness
   ============================================================ */

/* A fixed backdrop blur forces the browser to re-sample everything moving
   underneath the navbar every frame. The darker solid surface looks nearly
   identical and is substantially cheaper while scrolling. */
.navbar {
    background: rgba(10, 10, 10, 0.965);
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: background-color .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.navbar.scrolled {
    background: rgba(10, 10, 10, 0.985);
}

/* Pause purely decorative background/demo motion for the short period in
   which the page is actively moving. It resumes automatically when scrolling
   settles, so the settled page still looks animated. */
body.performance-scrolling .animated-bg::before,
body.performance-scrolling .animated-bg::after,
body.performance-scrolling .orb,
body.performance-scrolling .features-showcase .email-pulse,
body.performance-scrolling .features-showcase .chat-dot,
body.performance-scrolling .features-showcase .chat-typing-indicator span,
body.performance-scrolling .features-showcase .security-shield,
body.performance-scrolling .features-showcase .payment-security::after,
body.performance-scrolling .how-it-works .status-spinner {
    animation-play-state: paused !important;
}

body.performance-scrolling .features-showcase .showcase-card,
body.performance-scrolling .features-showcase .email-icon,
body.performance-scrolling .features-showcase .email-bar-fill,
body.performance-scrolling .features-showcase .chat-bubble,
body.performance-scrolling .features-showcase .gateway-item,
body.performance-scrolling .features-showcase .gateway-item .gw-logo,
body.performance-scrolling .how-it-works .step-progress-fill {
    transition: none !important;
}

/* Restrict transitions to compositor-friendly properties instead of `all`. */
.showcase-card {
    transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease, background-color .24s ease;
}

.gateway-item {
    transition: transform .22s ease, opacity .22s ease, border-color .22s ease, background-color .22s ease, box-shadow .22s ease;
}

/* CSS filters on every gateway logo are unnecessary GPU work. Opacity keeps
   the same inactive/active visual hierarchy with a cheaper render path. */
.gateway-item .gw-logo {
    filter: none !important;
    opacity: .44;
    transition: opacity .22s ease, transform .22s ease !important;
}

.gateway-item.active .gw-logo {
    filter: none !important;
    opacity: 1;
}

/* Replace the animated drop-shadow filter with transform/opacity only. */
@keyframes shieldSecure {
    0%, 100% {
        transform: scale(1);
        opacity: .92;
    }
    50% {
        transform: scale(1.065);
        opacity: 1;
    }
}

/* Keep paint from spilling outside the animated feature section. */
.features-showcase {
    contain: paint style;
}

@media (max-width: 768px) {
    .navbar {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}


/* ============================================================
   EXODIA CHROMIUM PERFORMANCE PATCH
   Keeps the interactive showcase demos intact while avoiding
   Chrome-specific layout/paint/compositor hotspots.
   ============================================================ */

/* The grid never uses 3D rotation. Removing perspective avoids creating an
   unnecessary 3D compositing context around four animated cards in Chromium. */
html.chromium-performance .features-showcase .showcase-grid {
    perspective: none;
}

/* Bound layout/paint invalidation to the section. */
html.chromium-performance .features-showcase {
    contain: layout paint style;
    isolation: isolate;
}

/* The large card sheen creates four oversized continuously composited layers
   in Chrome. The real demo animations remain enabled; only this decorative
   sweep is suppressed on Chromium. */
html.chromium-performance .features-showcase .showcase-card::after {
    animation: none !important;
    opacity: 0 !important;
    will-change: auto !important;
}

/* Width animation forces repeated layout/paint. Chromium gets the identical
   progress movement through scaleX, which stays on the compositor. */
html.chromium-performance .features-showcase .email-bar-fill {
    width: 100% !important;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .15s linear !important;
    will-change: transform;
    backface-visibility: hidden;
}

/* Promote only the elements that actually move. Avoid promoting whole cards. */
html.chromium-performance .features-showcase .email-icon,
html.chromium-performance .features-showcase .email-pulse,
html.chromium-performance .features-showcase .chat-bubble,
html.chromium-performance .features-showcase .chat-typing-indicator span,
html.chromium-performance .features-showcase .security-shield,
html.chromium-performance .features-showcase .payment-security::after {
    will-change: transform, opacity;
    backface-visibility: hidden;
}

/* Box-shadow interpolation is a paint operation in Chromium. The final active
   shadow is still shown, but it no longer has to be repainted between frames. */
html.chromium-performance .features-showcase .gateway-item {
    transition: transform .22s ease, opacity .22s ease, border-color .22s ease, background-color .22s ease !important;
    will-change: transform, opacity;
}

/* This badge's animated box-shadow repaints continuously; preserve the live
   badge itself and stop only the paint-heavy glow pulse in Chromium. */
html.chromium-performance .features-showcase .order-badge {
    animation: none !important;
    box-shadow: 0 0 10px rgba(0,204,102,.055);
}

/* While the feature demos are visible, spend Chrome's compositor budget on
   those demos instead of the page-wide ambient orbs behind the section. */
html.chromium-performance.feature-showcase-visible .animated-bg::before,
html.chromium-performance.feature-showcase-visible .animated-bg::after,
html.chromium-performance.feature-showcase-visible .orb {
    animation-play-state: paused !important;
}


/* ========================================
   FLOATING DISCORD SUPPORT
======================================== */
.discord-float {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 140;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px 12px 12px;
    border-radius: 18px;
    text-decoration: none;
    background: rgba(14, 16, 23, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.3);
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
    max-width: calc(100vw - 32px);
}

.discord-float:hover {
    transform: translateY(-2px);
    border-color: rgba(88, 101, 242, 0.34);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.36);
}

.discord-float-icon {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: linear-gradient(135deg, #5865f2, #7a84ff);
    color: #ffffff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.discord-float-icon svg {
    width: 24px;
    height: 24px;
}

.discord-float-copy {
    min-width: 0;
}

.discord-float-copy strong,
.discord-float-copy span {
    display: block;
}

.discord-float-copy strong {
    color: #ffffff;
    font-size: 14px;
    line-height: 1.2;
}

.discord-float-copy span {
    margin-top: 2px;
    color: #adb4c7;
    font-size: 12px;
    line-height: 1.25;
}

@media (max-width: 640px) {
    .discord-float {
        left: 12px;
        right: 12px;
        bottom: 12px;
        width: auto;
        justify-content: flex-start;
    }
}


/* ========================================
   FEATURE CARDS V2 — DISCORD CLAIM + PAYMENTS
   Based on the approved second mockup direction.
======================================== */
.features-showcase .feature-card-v2 {
    overflow: hidden;
    background:
        radial-gradient(circle at 0 0, rgba(118, 0, 0, .11), transparent 36%),
        linear-gradient(155deg, rgba(19, 18, 20, .98), rgba(11, 11, 13, .98));
    border-color: rgba(255,255,255,.075);
}

.features-showcase .feature-card-v2::after {
    content: '';
    position: absolute;
    top: 32px;
    right: 26px;
    width: 26px;
    height: 1px;
    background: linear-gradient(90deg, #e31520, transparent);
    opacity: .7;
    pointer-events: none;
}

.features-showcase .feature-card-v2 .showcase-header {
    gap: 11px;
    align-items: center;
    margin-bottom: 6px;
}

.features-showcase .feature-card-v2 .showcase-header h3 {
    font-size: 16px;
    letter-spacing: -.015em;
}

.features-showcase .feature-card-v2 .showcase-desc {
    max-width: 94%;
    color: #9699a2;
    line-height: 1.55;
    margin-bottom: 13px;
}

.features-showcase .feature-header-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    flex: 0 0 34px;
    border-radius: 10px;
    color: #f04449;
    background: linear-gradient(145deg, rgba(204,0,0,.16), rgba(204,0,0,.035));
    border: 1px solid rgba(239,49,55,.16);
}

.features-showcase .feature-header-icon img {
    width: 19px;
    height: 19px;
    object-fit: contain;
}

.features-showcase .feature-header-icon--discord img {
    width: 21px;
    height: 21px;
}

/* Discord claim */
.features-showcase .claim-showcase-v2 {
    padding: 0;
}

.features-showcase .claim-status-banner {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 76px;
    gap: 15px;
    margin: 0 0 12px;
    padding: 13px 15px;
    overflow: hidden;
    border-radius: 13px;
    background:
        radial-gradient(circle at 100% 50%, rgba(139,0,0,.12), transparent 42%),
        linear-gradient(100deg, rgba(255,255,255,.035), rgba(255,255,255,.014));
    border: 1px solid rgba(255,255,255,.075);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}

.features-showcase .claim-status-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    box-shadow: inset 0 0 26px rgba(180,0,0,.025);
}

.features-showcase .claim-status-banner .email-icon {
    position: relative;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 50%;
    color: #ff4148;
    background: rgba(145,0,0,.09);
    border: 1px solid rgba(233,40,47,.22);
}

.features-showcase .claim-status-banner .email-icon svg {
    width: 22px;
    height: 22px;
    position: relative;
    z-index: 2;
}

.features-showcase .claim-status-banner .email-pulse {
    top: 50%;
    left: 50%;
    width: 48px;
    height: 48px;
    border-color: rgba(227,21,32,.16);
}

.features-showcase .claim-status-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.features-showcase .claim-status-kicker {
    color: #696c75;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .15em;
}

.features-showcase .claim-status-banner .email-status {
    font-size: 15px;
    line-height: 1.25;
    font-weight: 700;
    color: #f13a42;
}

.features-showcase .claim-status-banner .email-status.done {
    color: #34d17c;
}

.features-showcase .claim-progress-v2 {
    margin: 0 3px 12px;
}

.features-showcase .claim-progress-v2 .email-bar-info {
    align-items: center;
    margin: 0 0 7px;
    font-size: 10px;
}

.features-showcase .claim-progress-v2 .email-step {
    color: #8d9099;
    font-weight: 500;
}

.features-showcase .claim-progress-v2 .email-percent {
    color: #f2f3f5;
    font-size: 11px;
    font-weight: 800;
}

.features-showcase .claim-progress-v2 .email-bar-track {
    height: 4px;
    background: rgba(255,255,255,.045);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.3);
}

.features-showcase .claim-progress-v2 .email-bar-fill {
    background: linear-gradient(90deg, #bf0c15, #ff3540 70%, #ff6870);
    box-shadow: 0 0 9px rgba(255,42,52,.16);
}

.features-showcase .claim-details-v2 {
    padding: 0 14px;
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(255,255,255,.025), rgba(255,255,255,.012));
    border: 1px solid rgba(255,255,255,.065);
}

.features-showcase .claim-details-v2 .email-row {
    min-height: 38px;
    display: grid;
    grid-template-columns: 30px 1fr auto;
    gap: 9px;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,.045);
}

.features-showcase .claim-details-v2 .email-row:last-child {
    border-bottom: 0;
}

.features-showcase .claim-row-icon {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #80838c;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.06);
}

.features-showcase .claim-row-icon svg {
    width: 15px;
    height: 15px;
}

.features-showcase .claim-row-icon--status {
    color: #ff3b43;
    background: rgba(190,0,0,.07);
    border-color: rgba(230,30,38,.13);
}

.features-showcase .claim-status-spinner {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 2px dotted currentColor;
    animation: claimStatusSpin 2.2s linear infinite;
}

@keyframes claimStatusSpin { to { transform: rotate(360deg); } }

.features-showcase .claim-details-v2 .email-label {
    color: #7f828b;
    font-size: 10px;
}

.features-showcase .claim-details-v2 .email-value {
    color: #d7d8dc;
    font-size: 10px;
    font-weight: 600;
    text-align: right;
}

.features-showcase .claim-details-v2 .email-value.done {
    color: #34d17c;
}

/* Secure payments */
.features-showcase .payment-showcase-v2 {
    padding: 0;
}

.features-showcase .payment-security-v2 {
    position: relative;
    min-height: 59px;
    gap: 10px;
    margin: 0 0 10px;
    padding: 10px 12px;
    overflow: hidden;
    border-radius: 12px;
    background:
        radial-gradient(circle at 100% 50%, rgba(160,0,0,.12), transparent 48%),
        linear-gradient(100deg, rgba(255,255,255,.032), rgba(255,255,255,.012));
    border: 1px solid rgba(255,255,255,.07);
}

.features-showcase .payment-security-v2::after {
    display: none !important;
}

.features-showcase .payment-security-v2 .security-shield {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 10px;
    color: #ff3b43;
    background: rgba(180,0,0,.09);
    border: 1px solid rgba(230,30,38,.15);
}

.features-showcase .payment-security-v2 .security-shield svg {
    width: 18px;
    height: 18px;
}

.features-showcase .payment-live-dot {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: #ff3d46;
    box-shadow: 0 0 7px rgba(255,50,60,.26);
}

.features-showcase .payment-security-v2 .security-info {
    position: relative;
    z-index: 2;
    min-width: 0;
}

.features-showcase .payment-security-v2 .security-status {
    font-size: 11px;
    color: #dfdfe2;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.features-showcase .payment-security-v2 .security-status.processing {
    color: #ff3f47;
}

.features-showcase .payment-security-v2 .security-status.done {
    color: #38d47e;
}

.features-showcase .payment-security-v2 .security-level {
    display: none;
}

.features-showcase .payment-network-art {
    position: absolute;
    right: -6px;
    top: 0;
    width: 120px;
    height: 100%;
    opacity: .28;
    pointer-events: none;
    background-image:
        linear-gradient(30deg, transparent 48%, rgba(193,15,24,.19) 49%, rgba(193,15,24,.19) 51%, transparent 52%),
        linear-gradient(-30deg, transparent 48%, rgba(193,15,24,.14) 49%, rgba(193,15,24,.14) 51%, transparent 52%);
    background-size: 28px 20px;
    mask-image: linear-gradient(90deg, transparent, #000 36%);
}

.features-showcase .payment-gateway-grid--icons {
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 7px;
    margin: 0 0 10px;
}

.features-showcase .payment-gateway-grid--icons .gateway-item {
    min-height: 57px;
    padding: 8px;
    display: grid;
    place-items: center;
    opacity: .3;
    border-radius: 11px;
    background: linear-gradient(145deg, rgba(255,255,255,.032), rgba(255,255,255,.012));
    border: 1px solid rgba(255,255,255,.055);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.016);
}

.features-showcase .payment-gateway-grid--icons .gateway-item.active {
    opacity: 1;
    border-color: rgba(217,25,34,.16);
    background: linear-gradient(145deg, rgba(140,0,0,.065), rgba(255,255,255,.016));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 0 12px rgba(173,0,0,.035);
}

.features-showcase .payment-gateway-grid--icons .gw-logo {
    width: 42px;
    height: 28px;
    max-width: 78%;
    object-fit: contain;
    filter: grayscale(100%) brightness(.62);
    opacity: .7;
}

.features-showcase .payment-gateway-grid--icons .gateway-item.active .gw-logo {
    filter: none;
    opacity: 1;
}

.features-showcase .payment-gateway-grid--icons [data-gw="mastercard"] .gw-logo,
.features-showcase .payment-gateway-grid--icons [data-gw="bitcoin"] .gw-logo,
.features-showcase .payment-gateway-grid--icons [data-gw="litecoin"] .gw-logo,
.features-showcase .payment-gateway-grid--icons [data-gw="ethereum"] .gw-logo {
    width: 34px;
    height: 34px;
}

.features-showcase .payment-ssl-badge-v2 {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 6px 10px;
    border-radius: 999px;
    color: #9a9da5;
    background: rgba(255,255,255,.018);
    border: 1px solid rgba(255,255,255,.055);
    font-size: 8px;
    letter-spacing: .015em;
}

.features-showcase .payment-ssl-badge-v2 .ssl-mini-shield {
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    color: #ff3b43;
    background: rgba(190,0,0,.08);
    border: 1px solid rgba(230,30,38,.12);
    font-size: 10px;
    font-weight: 800;
}

.features-showcase .payment-ssl-badge-v2 .ssl-dot {
    color: #d82029;
}

/* Keep Chromium's smoother path and avoid adding expensive paint animations. */
html.chromium-performance .features-showcase .claim-status-spinner {
    will-change: transform;
}

html.chromium-performance .features-showcase .payment-network-art {
    transform: translateZ(0);
    backface-visibility: hidden;
}

@media (max-width: 560px) {
    .features-showcase .claim-details-v2 .email-row {
        grid-template-columns: 28px 1fr auto;
        gap: 7px;
    }

    .features-showcase .payment-gateway-grid--icons {
        grid-template-columns: repeat(4, minmax(0,1fr));
        gap: 5px;
    }

    .features-showcase .payment-gateway-grid--icons .gateway-item {
        min-height: 52px;
        padding: 6px;
    }

    .features-showcase .payment-gateway-grid--icons .gw-logo {
        width: 36px;
        height: 25px;
    }
}

/* ========================================
   FEATURE CARDS V2 — COLOR MATCH + STATUS FIX
======================================== */

/* Make No Hidden Fees + 24/7 Live Support match the same visual treatment
   as Discord Claim Fulfillment and Secure Payments. */
.features-showcase .showcase-card.exodia-summary,
.features-showcase .showcase-card.exodia-wave {
    overflow: hidden;
    background:
        radial-gradient(circle at 0 0, rgba(118, 0, 0, .11), transparent 36%),
        linear-gradient(155deg, rgba(19, 18, 20, .98), rgba(11, 11, 13, .98));
    border-color: rgba(255,255,255,.075);
}

.features-showcase .showcase-card.exodia-summary::after,
.features-showcase .showcase-card.exodia-wave::after {
    content: '';
    position: absolute;
    top: 32px;
    right: 26px;
    width: 26px;
    height: 1px;
    background: linear-gradient(90deg, #e31520, transparent);
    opacity: .7;
    pointer-events: none;
}

.features-showcase .showcase-card.exodia-summary .showcase-header,
.features-showcase .showcase-card.exodia-wave .showcase-header {
    gap: 11px;
    align-items: center;
    margin-bottom: 6px;
}

.features-showcase .showcase-card.exodia-summary .showcase-header h3,
.features-showcase .showcase-card.exodia-wave .showcase-header h3 {
    font-size: 16px;
    letter-spacing: -.015em;
}

.features-showcase .showcase-card.exodia-summary .showcase-desc,
.features-showcase .showcase-card.exodia-wave .showcase-desc {
    max-width: 94%;
    color: #9699a2;
    line-height: 1.55;
    margin-bottom: 13px;
}

.features-showcase .showcase-card.exodia-summary .showcase-icon-img,
.features-showcase .showcase-card.exodia-wave .showcase-icon-img {
    width: 34px;
    height: 34px;
    padding: 7px;
    border-radius: 10px;
    object-fit: contain;
    background: linear-gradient(145deg, rgba(204,0,0,.16), rgba(204,0,0,.035));
    border: 1px solid rgba(239,49,55,.16);
    box-sizing: border-box;
}

/* Give the status row more room and stop awkward cutoffs. */
.features-showcase .claim-details-v2 .email-row {
    grid-template-columns: 30px 58px minmax(0, 1fr);
}

.features-showcase .claim-details-v2 .email-value {
    min-width: 0;
    max-width: none;
    justify-self: end;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Status icon morphs from red loader to green check when complete. */
.features-showcase .claim-row-icon--status.done {
    color: #34d17c;
    background: rgba(52,209,124,.09);
    border-color: rgba(52,209,124,.18);
}

.features-showcase .claim-status-check {
    display: inline-grid;
    place-items: center;
    width: 15px;
    height: 15px;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
}

@media (max-width: 560px) {
    .features-showcase .claim-details-v2 .email-row {
        grid-template-columns: 28px 54px minmax(0, 1fr);
        gap: 7px;
    }

    .features-showcase .claim-details-v2 .email-value {
        font-size: 10px;
    }
}

/* ========================================
   GAME PLATFORM CARDS — REDESIGN V2
   Clean layout: no overlapping copy / CTA.
======================================== */
.games-platform-grid {
    max-width: 980px;
    gap: 20px;
    align-items: stretch;
}

.game-platform-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 342px;
    padding: 26px;
    overflow: hidden;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.075);
    background:
        radial-gradient(circle at 100% 0%, rgba(112,0,0,.10), transparent 34%),
        linear-gradient(155deg, rgba(20,20,23,.98), rgba(10,10,12,.98));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.03),
        0 18px 44px rgba(0,0,0,.20);
    transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease;
}

.game-platform-card--microsoft {
    background:
        radial-gradient(circle at 100% 0%, rgba(112,0,0,.08), transparent 34%),
        linear-gradient(155deg, rgba(20,20,23,.98), rgba(10,10,12,.98));
}

.game-platform-card:hover {
    transform: translateY(-3px);
    border-color: rgba(221,35,42,.28);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.045),
        0 24px 54px rgba(0,0,0,.28),
        0 0 0 1px rgba(190,0,0,.025);
}

.game-platform-card::after {
    opacity: .42;
}

.game-platform-glow {
    width: 210px;
    height: 210px;
    top: -105px;
    right: -100px;
    opacity: .28;
    background: radial-gradient(circle, rgba(186,0,0,.16), transparent 68%);
}

.game-platform-card--microsoft .game-platform-glow {
    background: radial-gradient(circle, rgba(186,0,0,.12), transparent 68%);
    opacity: .24;
}

.game-platform-topline {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    color: #747780;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.35px;
    line-height: 1;
}

.game-platform-count {
    min-height: 28px;
    padding: 0 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: #d4d5da;
    font-size: 9px;
    line-height: 1;
    letter-spacing: .35px;
    border: 1px solid rgba(221,35,42,.20);
    background: rgba(105,0,0,.06);
}

.game-platform-icon {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    width: 82px;
    height: 82px;
    margin: 28px 0 20px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.085);
    background:
        radial-gradient(circle at 50% 100%, rgba(170,0,0,.08), transparent 54%),
        linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.045),
        0 14px 30px rgba(0,0,0,.24),
        0 8px 24px rgba(120,0,0,.045);
}

.game-platform-img {
    width: 49px;
    height: 49px;
}

.game-platform-icon .ms-logo {
    width: 44px;
    height: 44px;
    gap: 4px;
}

.game-platform-copy {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    min-width: 0;
}

.game-platform-copy h3 {
    margin: 0 0 9px;
    font-size: clamp(22px, 2.1vw, 27px);
    line-height: 1.12;
    letter-spacing: -.72px;
    color: #f6f6f8;
}

.game-platform-copy p {
    margin: 0;
    max-width: 400px;
    min-height: 42px;
    color: #858790;
    font-size: 12.5px;
    line-height: 1.62;
}

/* Critical fix: CTA participates in document flow instead of being absolute. */
.game-platform-open {
    position: relative;
    z-index: 2;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    min-height: 48px;
    margin-top: auto;
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 auto;
    border-radius: 12px;
    color: #ececf0;
    font-size: 12px;
    font-weight: 750;
    background: linear-gradient(90deg, rgba(115,0,0,.095), rgba(62,0,0,.065));
    border: 1px solid rgba(213,28,36,.20);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.018);
    transition: color .22s ease, background .22s ease, border-color .22s ease, transform .22s ease;
}

.game-platform-open > [aria-hidden="true"] {
    color: #ef3d45;
    font-size: 18px;
    line-height: 1;
}

.game-platform-card:hover .game-platform-open {
    color: #fff;
    background: linear-gradient(90deg, rgba(153,0,0,.13), rgba(82,0,0,.085));
    border-color: rgba(235,43,51,.31);
}

.game-platform-card:hover .game-platform-open > [aria-hidden="true"] {
    transform: translateX(3px);
}

/* Preserve the previous claim-card text fix in this consolidated patch. */
.features-showcase .claim-details-v2 .email-value {
    max-width: none;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .games-platform-grid {
        grid-template-columns: 1fr;
        max-width: 560px;
        gap: 14px;
    }

    .game-platform-card {
        min-height: 326px;
        padding: 22px;
    }

    .game-platform-icon {
        width: 76px;
        height: 76px;
        margin: 24px 0 18px;
        border-radius: 18px;
    }

    .game-platform-img { width: 45px; height: 45px; }
    .game-platform-icon .ms-logo { width: 41px; height: 41px; }

    .game-platform-copy h3 {
        font-size: 23px;
    }

    .game-platform-copy p {
        min-height: 0;
        font-size: 12px;
        margin-bottom: 22px;
    }

    .game-platform-open {
        min-height: 46px;
    }
}

@media (max-width: 480px) {
    .game-platform-card {
        min-height: 312px;
        padding: 19px;
        border-radius: 18px;
    }

    .game-platform-topline {
        letter-spacing: 1.05px;
    }

    .game-platform-count {
        min-height: 26px;
        padding-inline: 9px;
    }

    .game-platform-icon {
        margin-top: 21px;
    }
}


/* =====================================================
   EXODIA PRODUCT STORE — PREMIUM V2
   2026-09-04
   Refines product pages only. No checkout/payment logic.
   ===================================================== */

.product-page .container {
    max-width: 1180px;
}

.product-page-grid {
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 30px;
}

.product-page-info {
    padding: 36px;
    border-radius: 26px;
    background:
        radial-gradient(circle at 82% 0%, rgba(213, 18, 18, .065), transparent 28%),
        linear-gradient(148deg, rgba(20,20,22,.95), rgba(10,10,12,.93));
    border-color: rgba(255,255,255,.075);
    box-shadow:
        0 32px 90px rgba(0,0,0,.34),
        inset 0 1px 0 rgba(255,255,255,.032);
}

.product-page-info::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(115deg, rgba(255,255,255,.018), transparent 22%, transparent 78%, rgba(204,0,0,.025));
}

.product-heading-row {
    position: relative;
    z-index: 1;
    gap: 22px;
    padding: 4px 0 28px;
    margin-bottom: 27px;
}

.product-page-icon {
    position: relative;
    width: 96px;
    height: 96px;
    flex-basis: 96px;
    border-radius: 24px;
    background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.055), transparent 42%),
        linear-gradient(145deg, rgba(189,11,11,.15), rgba(33,9,9,.52));
    border-color: rgba(224, 28, 28, .22);
    box-shadow:
        0 18px 45px rgba(0,0,0,.30),
        inset 0 1px 0 rgba(255,255,255,.055),
        inset 0 -18px 32px rgba(0,0,0,.11);
}

.product-page-icon::after {
    content: '';
    position: absolute;
    inset: 7px;
    border: 1px solid rgba(255,255,255,.035);
    border-radius: 18px;
    pointer-events: none;
}

.product-page-info h1 {
    max-width: 720px;
    font-size: clamp(36px, 4.25vw, 50px);
    line-height: .98;
    letter-spacing: -1.8px;
    text-wrap: balance;
}

.product-availability,
.order-ready {
    transition: border-color .2s ease, color .2s ease, background .2s ease;
}

.product-availability.status-available,
.order-ready.status-available {
    color: #9ce9b9;
    background: rgba(67, 192, 116, .065);
    border-color: rgba(78, 211, 131, .18);
}

.product-availability.status-limited,
.order-ready.status-limited {
    color: #c2c4ca;
    background: rgba(255,255,255,.028);
    border-color: rgba(255,255,255,.06);
}

.product-availability.status-unavailable,
.order-ready.status-unavailable {
    color: #ff9e9e;
    background: rgba(255,66,66,.055);
    border-color: rgba(255,79,79,.17);
}

.product-page-description p {
    max-width: 760px;
    color: #a1a3aa;
    font-size: 15px;
    line-height: 1.85;
}

.product-features,
.bundle-includes {
    margin-bottom: 0;
}

.feature-tag,
.bundle-item {
    min-height: 36px;
    padding: 7px 12px 7px 28px;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(255,255,255,.032), rgba(255,255,255,.018));
    border-color: rgba(255,255,255,.06);
}

.product-page-variants {
    margin: 30px 0 18px;
    padding: 22px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(8,8,10,.57), rgba(8,8,10,.32));
    border-color: rgba(255,255,255,.06);
}

.product-page-variants .variant-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.product-page-variants .variant-option {
    position: relative;
    min-width: 0;
    min-height: 82px;
    padding: 15px 14px;
    border-radius: 13px;
    background: linear-gradient(145deg, rgba(255,255,255,.028), rgba(255,255,255,.014));
}

.product-page-variants .variant-option:hover {
    transform: translateY(-2px);
    border-color: rgba(204,0,0,.26);
    box-shadow: 0 12px 28px rgba(0,0,0,.17);
}

.product-page-variants .variant-option.selected {
    transform: translateY(-1px);
    background:
        radial-gradient(circle at 100% 0%, rgba(213,18,18,.08), transparent 44%),
        linear-gradient(145deg, rgba(204,0,0,.105), rgba(204,0,0,.035));
    border-color: rgba(226, 23, 23, .52);
    box-shadow:
        inset 3px 0 0 #d10b0b,
        0 14px 32px rgba(0,0,0,.16),
        0 0 0 1px rgba(204,0,0,.035);
}

.product-page-variants .variant-option .variant-info {
    min-width: 0;
    padding-right: 7px;
}

.product-page-variants .variant-option .variant-name {
    font-size: 13px;
    font-weight: 700;
}

.product-page-variants .variant-option .variant-desc {
    margin-top: 3px;
    color: #74767c;
    line-height: 1.35;
}

.product-page-variants .variant-option .variant-price {
    align-self: flex-start;
    padding-left: 10px;
    color: #fff;
    font-size: 17px;
    letter-spacing: -.35px;
}

.product-page .variant-delivery-status {
    width: fit-content;
    max-width: 100%;
    margin-top: 8px !important;
    padding: 5px 7px !important;
    border-radius: 7px !important;
    font-size: 9.5px !important;
    font-weight: 750 !important;
    white-space: normal;
}

.fulfillment-notice {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin: 18px 0 0;
    padding: 15px 16px;
    border-radius: 14px;
    color: #9c9ea5;
    background: linear-gradient(145deg, rgba(255,255,255,.025), rgba(255,255,255,.014));
    border: 1px solid rgba(255,255,255,.052);
    transition: border-color .2s ease, background .2s ease;
}

.fulfillment-notice-mark {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: rgba(204,0,0,.055);
    border: 1px solid rgba(204,0,0,.10);
}

.fulfillment-notice-mark span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #b80d0d;
    box-shadow: 0 0 0 5px rgba(204,0,0,.06), 0 0 16px rgba(204,0,0,.16);
}

.fulfillment-notice-copy {
    min-width: 0;
}

.fulfillment-notice strong {
    display: block;
    margin: 1px 0 5px;
    color: #e7e8eb;
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 12px;
    letter-spacing: -.1px;
}

.fulfillment-notice p {
    margin: 0;
    color: #74767d;
    font-size: 11px;
    line-height: 1.6;
}

.fulfillment-notice[data-delivery-state="instant"] {
    background: linear-gradient(145deg, rgba(61,186,111,.07), rgba(61,186,111,.022));
    border-color: rgba(79,211,132,.16);
}

.fulfillment-notice[data-delivery-state="instant"] .fulfillment-notice-mark {
    background: rgba(61,186,111,.065);
    border-color: rgba(79,211,132,.14);
}

.fulfillment-notice[data-delivery-state="instant"] .fulfillment-notice-mark span {
    background: #49ca80;
    box-shadow: 0 0 0 5px rgba(73,202,128,.06), 0 0 16px rgba(73,202,128,.15);
}

.fulfillment-notice[data-delivery-state="unavailable"] {
    background: rgba(255,72,72,.035);
    border-color: rgba(255,72,72,.14);
}

.product-page-details {
    gap: 10px;
    margin-top: 20px;
    padding: 22px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(8,8,10,.48), rgba(8,8,10,.28));
    border-color: rgba(255,255,255,.06);
}

.detail-row {
    min-height: 74px;
    padding: 13px 14px;
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(255,255,255,.026), rgba(255,255,255,.014));
    border-color: rgba(255,255,255,.045);
}

.detail-value {
    color: #e0e1e4;
    font-size: 12.5px;
}

.product-page-order {
    top: 96px;
}

.order-summary-card {
    padding: 24px;
    border-radius: 24px;
    background:
        radial-gradient(circle at 90% -5%, rgba(204,0,0,.08), transparent 28%),
        linear-gradient(155deg, rgba(24,24,27,.975), rgba(10,10,12,.965));
    border-color: rgba(255,255,255,.085);
    box-shadow:
        0 36px 90px rgba(0,0,0,.42),
        inset 0 1px 0 rgba(255,255,255,.035);
}

.order-card-brandbar {
    padding-bottom: 19px;
    margin-bottom: 20px;
}

.order-card-brand-copy strong {
    max-width: 195px;
    color: #f0f0f2;
    font-size: 11.5px;
}

.order-summary-card h3 {
    margin-bottom: 14px;
    font-size: 18px;
}

.order-selection {
    min-height: 52px;
    align-items: center;
    padding: 13px 14px;
    background: linear-gradient(145deg, rgba(255,255,255,.03), rgba(255,255,255,.016));
}

.order-total-row {
    padding: 19px 2px 14px;
}

.order-total-row span:last-child {
    font-size: 34px;
    letter-spacing: -1.25px;
}

.order-buy-now,
.order-add-cart {
    min-height: 52px;
    border-radius: 12px;
}

.order-buy-now {
    background: linear-gradient(135deg, #dc1010, #a90000);
    box-shadow: 0 14px 30px rgba(190,0,0,.16), inset 0 1px 0 rgba(255,255,255,.10);
}

.order-buy-now:hover {
    transform: translateY(-2px);
    box-shadow: 0 17px 36px rgba(204,0,0,.22), inset 0 1px 0 rgba(255,255,255,.12);
}

.order-info {
    gap: 8px;
    margin-top: 19px;
}

.order-info-item {
    min-height: 36px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(255,255,255,.02);
    border-color: rgba(255,255,255,.04);
}

.order-support-link {
    margin-top: 11px;
    padding: 11px 12px;
    border-radius: 10px;
    border-color: rgba(255,255,255,.045);
    background: rgba(255,255,255,.014);
}

.order-support-link:hover {
    border-color: rgba(204,0,0,.16);
    background: rgba(204,0,0,.045);
}

.game-product-page .order-summary-card,
.game-product-page .product-page-info {
    border-color: rgba(255,255,255,.08);
}

@media (max-width: 1080px) {
    .product-page-grid {
        grid-template-columns: minmax(0, 1fr) 370px;
        gap: 24px;
    }
}

@media (max-width: 900px) {
    .product-page-grid {
        grid-template-columns: 1fr;
    }
    .product-page-order {
        position: static;
    }
}

@media (max-width: 700px) {
    .product-page-info {
        padding: 22px;
        border-radius: 20px;
    }
    .product-page-variants .variant-options {
        grid-template-columns: 1fr;
    }
    .product-heading-row {
        gap: 16px;
    }
    .product-page-icon {
        width: 74px;
        height: 74px;
        flex-basis: 74px;
        border-radius: 18px;
    }
    .product-page-info h1 {
        font-size: clamp(29px, 9vw, 39px);
    }
}

@media (max-width: 460px) {
    .product-page {
        padding-top: 96px;
    }
    .product-page-info {
        padding: 17px;
    }
    .product-heading-row {
        flex-direction: column;
    }
    .product-page-details {
        grid-template-columns: 1fr;
        padding: 14px;
    }
    .order-summary-card {
        padding: 18px;
        border-radius: 19px;
    }
    .order-total-row span:last-child {
        font-size: 30px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .product-page-variants .variant-option,
    .order-buy-now,
    .order-add-cart,
    .fulfillment-notice,
    .order-support-link {
        transition: none !important;
    }
}

/* ============================================================
   RUST PRODUCT PAGE — PREMIUM FLAGSHIP TEMPLATE (V6)
   Scoped to Rust so the design can be reviewed before rollout.
   ============================================================ */
.rust-premium-page {
    --rust-accent: #d33a25;
    --rust-accent-soft: rgba(211,58,37,.12);
    --rust-border: rgba(255,255,255,.065);
    --rust-panel: rgba(13,13,15,.72);
}

.rust-premium-page .product-page-grid {
    grid-template-columns: minmax(0, 1fr) 382px;
    gap: 30px;
}

.rust-premium-page .rust-premium-main {
    padding: 28px;
    background:
        radial-gradient(circle at 92% 3%, rgba(211,58,37,.075), transparent 26%),
        linear-gradient(145deg, rgba(18,18,20,.94), rgba(10,10,11,.90));
}

.rust-premium-page .rust-artwork-stage {
    margin-bottom: 0;
    border-radius: 18px;
    border-color: rgba(255,255,255,.085);
    box-shadow: 0 26px 72px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.035);
}

.rust-premium-page .rust-artwork-stage::before {
    background:
        linear-gradient(180deg, rgba(0,0,0,.02) 32%, rgba(0,0,0,.42) 100%),
        linear-gradient(90deg, rgba(211,58,37,.06), transparent 23%, transparent 78%, rgba(211,58,37,.04));
}

.rust-artwork-topline {
    position: absolute;
    z-index: 6;
    top: 14px;
    left: 14px;
    display: flex;
    align-items: center;
    gap: 7px;
}

.rust-artwork-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 29px;
    padding: 0 10px;
    border-radius: 999px;
    color: #e9e9eb;
    font-size: 9px;
    font-weight: 750;
    letter-spacing: .45px;
    text-transform: uppercase;
    background: rgba(7,7,8,.68);
    border: 1px solid rgba(255,255,255,.09);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.rust-artwork-chip img {
    width: 13px;
    height: 13px;
    object-fit: contain;
}

.rust-artwork-chip-muted { color: #92949b; }

.rust-title-block {
    display: grid;
    grid-template-columns: minmax(0,1fr) 76px;
    gap: 22px;
    align-items: center;
    padding: 25px 2px 23px;
    border-bottom: 1px solid rgba(255,255,255,.055);
}

.rust-title-copy { min-width: 0; }

.rust-premium-page .rust-title-block h1 {
    margin: 0 0 9px;
    font-size: clamp(38px, 5vw, 54px);
    letter-spacing: -1.8px;
}

.rust-lead {
    max-width: 690px;
    margin: 0;
    color: #96989f;
    font-size: 14px;
    line-height: 1.75;
}

.rust-title-mark {
    width: 70px;
    height: 70px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background:
        radial-gradient(circle at 38% 25%, rgba(211,58,37,.16), transparent 48%),
        rgba(255,255,255,.022);
    border: 1px solid rgba(211,58,37,.14);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 16px 34px rgba(0,0,0,.18);
}

.rust-title-mark img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.rust-value-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 9px;
    padding: 22px 0 2px;
}

.rust-value-card {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 66px;
    padding: 11px 12px;
    border-radius: 13px;
    background: rgba(255,255,255,.021);
    border: 1px solid rgba(255,255,255,.052);
}

.rust-value-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #c74735;
    background: rgba(211,58,37,.07);
    border: 1px solid rgba(211,58,37,.11);
}

.rust-value-icon img,
.rust-value-icon svg {
    width: 17px;
    height: 17px;
    object-fit: contain;
}

.rust-value-icon svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.rust-value-card > div:last-child {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.rust-value-card strong {
    color: #e2e3e6;
    font-size: 11px;
    font-weight: 750;
}

.rust-value-card span {
    overflow: hidden;
    color: #696b72;
    font-size: 9px;
    line-height: 1.35;
    text-overflow: ellipsis;
}

.rust-section {
    margin-top: 25px;
    padding: 21px;
    border-radius: 17px;
    background: rgba(7,7,8,.30);
    border: 1px solid rgba(255,255,255,.05);
}

.rust-section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 17px;
}

.rust-section-head.compact { margin-bottom: 14px; }

.rust-section-head h2 {
    margin: 3px 0 0;
    color: #ececef;
    font-family: 'Space Grotesk','Inter',sans-serif;
    font-size: 19px;
    line-height: 1.15;
    letter-spacing: -.45px;
}

.rust-section-head > p {
    max-width: 330px;
    margin: 0;
    color: #6d6f76;
    font-size: 10px;
    line-height: 1.55;
    text-align: right;
}

.rust-section-kicker {
    color: #a74437;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: 1.05px;
}

.rust-steps {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 9px;
}

.rust-step {
    position: relative;
    min-width: 0;
    min-height: 125px;
    padding: 14px;
    overflow: hidden;
    border-radius: 13px;
    background: linear-gradient(145deg, rgba(255,255,255,.025), rgba(255,255,255,.012));
    border: 1px solid rgba(255,255,255,.045);
}

.rust-step::after {
    content: '';
    position: absolute;
    width: 68px;
    height: 68px;
    right: -32px;
    bottom: -34px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(211,58,37,.08), transparent 68%);
}

.rust-step-number {
    display: inline-flex;
    margin-bottom: 19px;
    color: #9e3f33;
    font-family: 'Space Grotesk','Inter',sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .7px;
}

.rust-step strong {
    display: block;
    margin-bottom: 6px;
    color: #dfe0e3;
    font-size: 11px;
    font-weight: 750;
}

.rust-step p {
    margin: 0;
    color: #686a70;
    font-size: 9px;
    line-height: 1.55;
}

.rust-premium-page .rust-detail-grid {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.rust-premium-page .rust-detail-grid .detail-row {
    min-height: 66px;
    background: rgba(255,255,255,.019);
}

.rust-faq-list {
    display: grid;
    gap: 7px;
}

.rust-faq-list details {
    border-radius: 11px;
    background: rgba(255,255,255,.018);
    border: 1px solid rgba(255,255,255,.045);
    transition: border-color .2s ease, background .2s ease;
}

.rust-faq-list details[open] {
    background: rgba(255,255,255,.027);
    border-color: rgba(211,58,37,.14);
}

.rust-faq-list summary {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 13px;
    cursor: pointer;
    list-style: none;
    color: #d7d8dc;
    font-size: 10px;
    font-weight: 700;
}

.rust-faq-list summary::-webkit-details-marker { display: none; }

.rust-faq-plus {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    color: #8f9198;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.04);
    font-size: 14px;
    line-height: 1;
    transition: transform .2s ease, color .2s ease;
}

.rust-faq-list details[open] .rust-faq-plus {
    color: #c64b3b;
    transform: rotate(45deg);
}

.rust-faq-list details > p {
    margin: 0;
    padding: 0 13px 14px;
    color: #6f7178;
    font-size: 10px;
    line-height: 1.65;
}

.rust-premium-order { top: 102px; }

.rust-order-card {
    padding: 20px;
    border-radius: 22px;
    background:
        radial-gradient(circle at 92% 2%, rgba(211,58,37,.07), transparent 25%),
        linear-gradient(155deg, rgba(22,22,24,.98), rgba(10,10,11,.97));
}

.rust-order-icon {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
    background: rgba(211,58,37,.075);
    border-color: rgba(211,58,37,.13);
}

.rust-order-icon img {
    width: 31px;
    height: 31px;
}

.rust-order-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 13px;
}

.rust-order-heading h3 {
    margin: 2px 0 0;
    font-size: 22px;
    letter-spacing: -.65px;
}

.rust-order-eyebrow {
    color: #53555b;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: 1px;
}

.rust-order-platform {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-radius: 8px;
    color: #8d8f95;
    font-size: 9px;
    font-weight: 700;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.045);
}

.rust-order-platform img { width: 13px; height: 13px; object-fit: contain; }

.rust-order-product-preview {
    display: grid;
    grid-template-columns: 42px minmax(0,1fr) auto;
    gap: 10px;
    align-items: center;
    min-height: 62px;
    margin-bottom: 10px;
    padding: 9px 10px;
    border-radius: 12px;
    background: rgba(255,255,255,.024);
    border: 1px solid rgba(255,255,255,.05);
}

.rust-order-preview-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(211,58,37,.07);
    border: 1px solid rgba(211,58,37,.10);
}

.rust-order-preview-icon img { width: 31px; height: 31px; object-fit: contain; }

.rust-order-preview-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.rust-order-preview-copy strong { color: #dfe0e3; font-size: 11px; }
.rust-order-preview-copy span { color: #5e6066; font-size: 8px; }

.rust-order-preview-price {
    color: #ededf0 !important;
    font-family: 'Space Grotesk','Inter',sans-serif;
    font-size: 14px !important;
    font-weight: 750;
}

.rust-order-selection {
    min-height: 0;
    padding: 9px 10px;
    margin-bottom: 8px;
    background: transparent;
    border-style: dashed;
    border-color: rgba(255,255,255,.045);
}

.rust-premium-page .order-price-row {
    min-height: 29px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.rust-premium-page .order-price-row span:last-child {
    color: #aaabb0 !important;
    font-size: 11px !important;
}

.rust-premium-page .order-total-row {
    margin-top: 7px;
    padding-top: 14px;
}

.rust-premium-page .order-buy-now {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 52px;
    background: linear-gradient(135deg, #d83b25, #aa2416);
    box-shadow: 0 13px 28px rgba(154,39,25,.16);
}

.rust-premium-page .order-buy-now:hover {
    background: linear-gradient(135deg, #e5472f, #bb2a19);
    box-shadow: 0 16px 34px rgba(170,44,27,.22);
}

.rust-premium-page .order-buy-now svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.rust-premium-page .order-add-cart { min-height: 46px; }

.rust-premium-page .game-purchase-note {
    margin: 10px 5px 0;
    color: #5e6066;
    font-size: 9px;
}

.rust-order-info {
    gap: 6px;
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px solid rgba(255,255,255,.045);
}

.rust-order-info .order-info-item {
    min-height: 35px;
    background: transparent;
    border-color: transparent;
    padding: 5px 2px;
}

.rust-order-support {
    margin-top: 9px;
    padding: 11px 12px;
    background: rgba(211,58,37,.035);
    border-color: rgba(211,58,37,.08);
}

.rust-order-support > span:first-child {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rust-order-support strong {
    color: #a7a9af;
    font-size: 9px;
    font-weight: 750;
}

.rust-order-support small {
    color: #55575d;
    font-size: 8px;
}

@media (max-width: 1050px) {
    .rust-premium-page .product-page-grid { grid-template-columns: minmax(0,1fr) 350px; gap: 22px; }
    .rust-value-grid { grid-template-columns: 1fr; }
    .rust-value-card span { white-space: normal; }
}

@media (max-width: 900px) {
    .rust-premium-page .product-page-grid { grid-template-columns: 1fr; }
    .rust-premium-order { position: static; }
    .rust-value-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (max-width: 700px) {
    .rust-premium-page .rust-premium-main { padding: 19px; }
    .rust-title-block { grid-template-columns: 1fr 58px; gap: 14px; padding: 21px 1px 20px; }
    .rust-title-mark { width: 56px; height: 56px; border-radius: 15px; }
    .rust-title-mark img { width: 39px; height: 39px; }
    .rust-value-grid { grid-template-columns: 1fr; }
    .rust-section { padding: 16px; }
    .rust-section-head { align-items: flex-start; flex-direction: column; gap: 7px; }
    .rust-section-head > p { max-width: none; text-align: left; }
    .rust-steps { grid-template-columns: 1fr; }
    .rust-step { min-height: 104px; }
}

@media (max-width: 480px) {
    .rust-artwork-topline { top: 9px; left: 9px; }
    .rust-artwork-chip { min-height: 25px; padding: 0 8px; font-size: 8px; }
    .rust-artwork-chip-muted { display: none; }
    .rust-title-block { grid-template-columns: 1fr; }
    .rust-title-mark { display: none; }
    .rust-premium-page .rust-title-block h1 { font-size: 38px; }
    .rust-lead { font-size: 12px; line-height: 1.65; }
    .rust-order-product-preview { grid-template-columns: 38px minmax(0,1fr) auto; }
    .rust-order-preview-icon { width: 38px; height: 38px; }
    .rust-order-preview-icon img { width: 28px; height: 28px; }
}

@media (prefers-reduced-motion: reduce) {
    .rust-faq-list details,
    .rust-faq-plus { transition: none !important; }
}
.rust-premium-page .game-artwork-platform { display: none; }

/* Storefront clarity: keep the Exodia palette and improve reading contrast. */
.products-page h2 {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: clamp(2rem, 4vw, 2.75rem);
    line-height: 1.15;
    text-align: center;
    color: #f7f7fa;
    margin: 0 0 16px;
}

.nav-cart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 12px;
    background: rgba(255,255,255,.045);
}

.nav-cart .cart-icon-img {
    width: 24px;
    height: 24px;
    opacity: 1;
    filter: brightness(0) invert(1);
}

.hero-content > p, .section-subtitle, .product-description,
.product-page-description > p, .rust-premium-page .rust-lead,
.fulfillment-notice-copy p, .game-platform-card p {
    color: #b6b7c0;
    font-size: 1rem;
    line-height: 1.65;
}

.product-card > p:not(.price), .variant-desc,
.detail-label, .detail-value, .order-variant,
.order-price-row, .cart-item-variant, .cart-continue-shopping,
.rust-value-card span, .rust-step p, .rust-section-head > p,
.rust-faq-list p, .rust-order-note, .rust-order-support small,
.order-info-item, .footer-brand p, .footer-links a {
    color: #b2b3bc;
    font-size: .875rem;
    line-height: 1.55;
}

.rust-order-support strong, .variant-name,
.order-support-link, .cart-summary-item, .cart-discount-box label {
    font-size: .875rem;
    line-height: 1.45;
}

.cart-item-price, .cart-summary-total > span:last-child {
    color: #f7f7fa;
}

.cart-item-name, .cart-summary-item > span:first-child {
    overflow-wrap: anywhere;
    min-width: 0;
}

.game-list-copy h4 { font-size: 1rem; line-height: 1.35; }
.game-list-price { color: #c1c2cb; font-size: .875rem; line-height: 1.45; }
.game-list-view { min-height: 44px; font-size: .875rem; color: #e4e4ec; }
.game-list-platform, .game-library-platform-pill { font-size: .75rem; color: #a6a8b3; }
.game-library-header p { font-size: .875rem; color: #b2b3bc; }
.game-library-search-wrap input { font-size: 1rem; color: #f4f4f7; min-height: 44px; }
.game-library-search-wrap input::placeholder { color: #9295a3; }
.game-list-mark { width: 52px; height: 52px; }
.game-list-mark .game-list-thumb { width: 100%; height: 100%; object-fit: contain; }
.game-list-card { min-width: 0; grid-template-columns: 52px minmax(0,1fr); }
.game-list-copy { min-width: 0; }
.game-list-copy h4 { overflow-wrap: anywhere; }
.game-list-card[data-catalog-group="upcoming"] .game-list-price { color: #a5a7b2; }
.game-catalog-heading {
    grid-column: 1 / -1;
    margin: 12px 0 0;
    padding: 4px 0 10px;
    color: #e8e8ef;
    font-size: 1rem;
    font-weight: 650;
    letter-spacing: normal;
    border-bottom: 1px solid rgba(255,255,255,.12);
}
.game-catalog-heading[hidden] { display: none; }
.game-library-empty { font-size: 1rem; color: #b2b3bc; }

.game-library-modal, .game-library-dialog { max-height: 100dvh; }
.game-library-scroll { overscroll-behavior: contain; }
:is(a, button, input, .variant-option):focus-visible {
    outline: 2px solid #ff7777;
    outline-offset: 4px;
}

@media (max-width: 700px) {
    .game-library-grid { grid-template-columns: 1fr; }
    .game-list-card { padding: 16px; }
    .variant-options .variant-option { min-width: 0; }
    .variant-info { min-width: 0; }
    .variant-desc { white-space: normal; }
    .rust-premium-page .rust-lead { font-size: 1rem; }
}

/* Final game-option layout: keep the label column independent from price. */
.game-variant-picker .variant-option {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    grid-template-areas: "info price" "info check";
    column-gap: 10px;
    align-items: start;
}
.game-variant-picker .variant-option .variant-info {
    grid-area: info;
    min-width: 0;
    padding-right: 0;
}
.game-variant-picker .variant-option .variant-price {
    grid-area: price;
    align-self: start;
    justify-self: end;
    min-width: max-content;
    margin: 0;
    padding-left: 0;
    white-space: nowrap;
}
.game-variant-picker .variant-option .variant-check {
    grid-area: check;
    align-self: end;
    justify-self: end;
    margin: 14px 0 0;
}
@media (max-width: 700px) {
    .product-page-variants.game-variant-picker .variant-options {
        grid-template-columns: 1fr !important;
    }
}

/* Long translated labels (especially "Aktyvavimo raktas") must never
   overflow into the price column on narrow cards. */
.game-variant-picker .variant-option .variant-name,
.game-variant-picker .variant-option .variant-desc {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}
@media (max-width: 700px) {
    .game-variant-picker .variant-option {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        grid-template-areas: "info info" "price check";
        row-gap: 8px;
    }
    .game-variant-picker .variant-option .variant-info {
        grid-area: info;
        max-width: 100%;
    }
    .game-variant-picker .variant-option .variant-price {
        grid-area: price;
        align-self: end;
        justify-self: start;
        margin: 0;
        padding-left: 0;
    }
    .game-variant-picker .variant-option .variant-check {
        grid-area: check;
        align-self: end;
        justify-self: end;
        margin: 0;
    }
}

/* Premium game delivery cards: use the sidebar width instead of squeezing
   two cards together.  The title, description, price and selector each get
   a predictable visual zone, so long Lithuanian labels stay readable. */
.game-variant-picker {
    margin: 24px 0 20px;
    padding: 22px;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 20px;
    background:
        radial-gradient(circle at 100% 0%, rgba(211,58,37,.075), transparent 33%),
        linear-gradient(145deg, rgba(17,17,20,.92), rgba(8,8,10,.78));
    box-shadow: 0 18px 38px rgba(0,0,0,.18);
}
.game-variant-picker > h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    color: #f7f7fa;
    font-size: clamp(18px, 2.1vw, 22px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.35px;
}
.game-variant-picker > h3::before {
    content: '';
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #e33a43;
    box-shadow: 0 0 0 4px rgba(227,58,67,.10), 0 0 16px rgba(227,58,67,.42);
}
.game-variant-picker .variant-options {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px;
}
.game-variant-picker .variant-option {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 1fr auto;
    grid-template-areas: "info price" "info check";
    align-items: start;
    column-gap: 18px;
    min-height: 104px;
    padding: 17px 18px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 16px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.042), rgba(255,255,255,.015)),
        rgba(8,8,10,.58);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
    transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.game-variant-picker .variant-option:hover {
    transform: translateY(-2px);
    border-color: rgba(227,58,67,.34);
    background:
        linear-gradient(135deg, rgba(227,58,67,.075), rgba(255,255,255,.018)),
        rgba(8,8,10,.64);
    box-shadow: 0 13px 28px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.035);
}
.game-variant-picker .variant-option.selected {
    transform: none;
    border-color: rgba(227,58,67,.72);
    background:
        radial-gradient(circle at 0% 50%, rgba(227,58,67,.13), transparent 48%),
        linear-gradient(135deg, rgba(227,58,67,.12), rgba(255,255,255,.018)),
        rgba(8,8,10,.64);
    box-shadow: inset 3px 0 0 #e33a43, 0 14px 30px rgba(0,0,0,.2);
}
.game-variant-picker .variant-option .variant-info {
    grid-area: info;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: stretch;
    min-width: 0;
    padding: 0;
}
.game-variant-picker .variant-option .variant-name {
    display: block;
    max-width: 100%;
    color: #f7f7fa;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.2px;
    overflow-wrap: anywhere;
}
.game-variant-picker .variant-option .variant-desc {
    display: block;
    max-width: 36ch;
    margin-top: 6px;
    color: #a7a9b1;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
    overflow-wrap: anywhere;
}
.game-variant-picker .variant-option .variant-price {
    grid-area: price;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: start;
    justify-self: end;
    min-width: 74px;
    min-height: 34px;
    margin: 0;
    padding: 5px 11px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 10px;
    color: #fff;
    background: rgba(255,255,255,.065);
    font-size: 16px;
    font-weight: 850;
    line-height: 1;
    letter-spacing: -.15px;
    white-space: nowrap;
}
.game-variant-picker .variant-option.selected .variant-price {
    border-color: rgba(227,58,67,.56);
    background: linear-gradient(135deg, rgba(227,58,67,.23), rgba(169,31,40,.14));
}
.game-variant-picker .variant-option .variant-check {
    grid-area: check;
    align-self: end;
    justify-self: end;
    width: 22px;
    height: 22px;
    margin: 12px 1px 0 0;
    border: 1px solid rgba(255,255,255,.17);
    background: rgba(0,0,0,.12);
}
.game-variant-picker .variant-option.selected .variant-check {
    border-color: #e33a43;
    background: #e33a43;
    box-shadow: 0 0 0 4px rgba(227,58,67,.11), 0 0 15px rgba(227,58,67,.28);
}
.game-variant-picker .variant-option .variant-delivery-status {
    max-width: 100%;
    margin-top: 9px !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
}
@media (max-width: 700px) {
    .game-variant-picker {
        margin-top: 20px;
        padding: 16px;
        border-radius: 17px;
    }
    .game-variant-picker > h3 {
        margin-bottom: 14px;
        font-size: 18px;
    }
    .game-variant-picker .variant-option {
        column-gap: 12px;
        min-height: 102px;
        padding: 16px;
    }
}
@media (max-width: 380px) {
    .game-variant-picker .variant-option {
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 10px;
        padding: 14px;
    }
    .game-variant-picker .variant-option .variant-name { font-size: 16px; }
    .game-variant-picker .variant-option .variant-desc { font-size: 12px; }
    .game-variant-picker .variant-option .variant-price {
        min-width: 68px;
        padding-inline: 9px;
        font-size: 15px;
    }
}

/* ===== Reviews directory ===== */
.reviews-actions{display:flex;justify-content:center;margin-top:32px}
.reviews-view-all-btn{
    position:relative;
    isolation:isolate;
    display:inline-flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    min-width:230px;
    min-height:54px;
    padding:7px 8px 7px 20px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.105);
    border-radius:14px;
    color:#f6f6f8;
    background:
        radial-gradient(130% 170% at 0% 0%,rgba(211,11,18,.18),transparent 53%),
        linear-gradient(180deg,rgba(24,24,27,.96),rgba(13,13,15,.98));
    box-shadow:0 12px 34px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.035);
    text-decoration:none;
    transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease,background .22s ease;
}
.reviews-view-all-btn::before{
    content:"";
    position:absolute;
    z-index:-1;
    inset:-1px;
    background:linear-gradient(110deg,transparent 24%,rgba(255,255,255,.055) 47%,transparent 70%);
    transform:translateX(-115%);
    transition:transform .48s ease;
}
.reviews-view-all-copy{font-size:12px;font-weight:800;letter-spacing:.08px;white-space:nowrap}
.reviews-view-all-icon{
    width:38px;
    height:38px;
    flex:0 0 38px;
    display:grid;
    place-items:center;
    border:1px solid rgba(224,42,49,.28);
    border-radius:10px;
    color:#ff5a60;
    background:linear-gradient(145deg,rgba(211,11,18,.18),rgba(211,11,18,.07));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
    transition:transform .22s ease,color .22s ease,border-color .22s ease,background .22s ease;
}
.reviews-view-all-icon svg{width:18px;height:18px}
.reviews-view-all-btn:hover{
    transform:translateY(-2px);
    border-color:rgba(229,54,61,.42);
    background:
        radial-gradient(130% 170% at 0% 0%,rgba(211,11,18,.25),transparent 55%),
        linear-gradient(180deg,rgba(27,27,30,.98),rgba(14,14,16,.99));
    box-shadow:0 16px 42px rgba(0,0,0,.38),0 0 0 1px rgba(211,11,18,.045),inset 0 1px 0 rgba(255,255,255,.05);
}
.reviews-view-all-btn:hover::before{transform:translateX(115%)}
.reviews-view-all-btn:hover .reviews-view-all-icon{transform:translateX(2px);color:#fff;border-color:rgba(239,63,70,.5);background:linear-gradient(145deg,rgba(211,11,18,.32),rgba(211,11,18,.13))}
.reviews-view-all-btn:focus-visible{outline:2px solid rgba(238,58,66,.72);outline-offset:3px}
@media(max-width:520px){.reviews-view-all-btn{width:min(100%,270px);min-height:52px}}
.all-reviews-page{min-height:70vh;padding:132px 0 76px}
.all-reviews-hero{max-width:760px;margin:0 auto 34px;text-align:center}
.all-reviews-hero h1{margin:10px 0 10px;color:#fff;font-family:'Space Grotesk','Inter',sans-serif;font-size:clamp(32px,6vw,54px);letter-spacing:-1.4px}
.all-reviews-hero>p{margin:0 auto;color:#92959d;line-height:1.65;max-width:620px}
.all-review-summary{display:inline-flex;align-items:center;gap:18px;margin-top:24px;padding:13px 17px;border:1px solid rgba(255,255,255,.065);border-radius:13px;background:rgba(255,255,255,.018);text-align:left}
.all-review-summary>div{display:flex;align-items:center;gap:10px}.all-review-summary strong{font-family:'Space Grotesk',sans-serif;font-size:28px;color:#fff}.all-review-summary .stars{color:#f1c84a;letter-spacing:1px}.all-review-summary p{margin:0;color:#70737b;font-size:11px}
.all-reviews-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:14px;padding:15px;border:1px solid rgba(255,255,255,.055);border-radius:14px;background:rgba(255,255,255,.016)}
.all-reviews-controls label{display:grid;gap:7px;color:#73767e;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.6px}
.all-reviews-controls select{width:100%;padding:11px 12px;border:1px solid rgba(255,255,255,.075);border-radius:9px;background:#0b0b0d;color:#d7d7dc;font:600 11px Inter,sans-serif;outline:none}
.all-reviews-controls select:focus{border-color:rgba(211,11,18,.38)}
.all-reviews-result-line{display:flex;justify-content:flex-end;margin:0 2px 13px;color:#666970;font-size:10px}
.all-reviews-grid{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:24px}
.reviews-pagination{display:flex;align-items:center;justify-content:center;gap:14px;margin:30px 0 12px}
.reviews-pagination[hidden]{display:none!important}.reviews-pagination button{min-width:96px;padding:10px 13px;border:1px solid rgba(255,255,255,.08);border-radius:9px;background:rgba(255,255,255,.02);color:#d0d0d5;font:700 10px Inter,sans-serif;cursor:pointer}.reviews-pagination button:hover:not(:disabled){border-color:rgba(211,11,18,.35);background:rgba(211,11,18,.055)}.reviews-pagination button:disabled{opacity:.35;cursor:not-allowed}.reviews-pagination span{min-width:66px;text-align:center;color:#777a81;font-size:10px;font-weight:700}
.all-reviews-back-wrap{display:flex;justify-content:center;margin-top:20px}
@media(max-width:900px){.all-reviews-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.all-reviews-page{padding-top:108px}.all-reviews-controls{grid-template-columns:1fr}.all-reviews-grid{grid-template-columns:1fr}.all-review-summary{display:grid;gap:5px;text-align:center}.all-review-summary>div{justify-content:center}.all-reviews-result-line{justify-content:center}.reviews-pagination{gap:8px}.reviews-pagination button{min-width:82px}}

/* ===== Admin-managed product catalog (Batch 11) ===== */
.managed-product-banner{
    position:relative;
    width:100%;
    aspect-ratio:16/7;
    margin:0 0 22px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.075);
    border-radius:18px;
    background:rgba(255,255,255,.018);
    box-shadow:0 20px 60px rgba(0,0,0,.28);
}
.managed-product-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 58%,rgba(6,6,8,.48));pointer-events:none}
.managed-product-banner img{display:block;width:100%;height:100%;object-fit:cover}
.variant-option.is-price-pending{opacity:.58;cursor:not-allowed}
.variant-option.is-price-pending:hover{transform:none;border-color:rgba(255,255,255,.08);box-shadow:none}
.variant-option.is-price-pending .variant-price{color:#888b93;font-size:12px}
.managed-catalog-card[hidden],.managed-game-card[hidden]{display:none!important}
.managed-view-icon{display:inline-grid;place-items:center;width:16px;height:16px;font-size:13px;line-height:1}
@media(max-width:680px){.managed-product-banner{aspect-ratio:16/9;border-radius:14px;margin-bottom:17px}}
.product-stock-chip.status-catalog,.product-availability.status-catalog,.order-ready.status-catalog{border-color:rgba(255,255,255,.12);color:#9a9da5;background:rgba(255,255,255,.035)}
.product-stock-chip.status-catalog .product-stock-dot{background:#777b84;box-shadow:none}


/* Batch 12: language selector dropdown */
.lang-dropdown { position: relative; }
.lang-btn::after { content: '⌄'; font-size: 11px; margin-left: 2px; opacity: .7; transition: transform .18s ease; }
.lang-btn[aria-expanded="true"]::after { transform: rotate(180deg); }
.lang-menu { position: absolute; top: calc(100% + 10px); right: 0; z-index: 1200; min-width: 190px; padding: 7px; border-radius: 12px; border: 1px solid rgba(255,255,255,.1); background: rgba(13,13,16,.98); box-shadow: 0 18px 50px rgba(0,0,0,.48); opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98); transform-origin: top right; transition: opacity .16s ease, transform .16s ease, visibility .16s; backdrop-filter: blur(18px); }
.lang-menu.open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.lang-option { width: 100%; display: grid; grid-template-columns: 25px 1fr auto; align-items: center; gap: 9px; padding: 10px 11px; border: 0; border-radius: 8px; background: transparent; color: #ddd; font: inherit; text-align: left; cursor: pointer; }
.lang-option:hover, .lang-option.active { background: rgba(204,0,0,.13); color: #fff; }
.lang-option strong { font-size: 10px; letter-spacing: .08em; color: #777; }
.lang-option.active strong { color: #e24a4a; }
@media (max-width: 768px) { .lang-menu { right: 0; min-width: 176px; } }