/* =========================================================
   Smart Commerce Unified Design System Overrides - V2
   Storefront: light / blue / premium black-gold accents
   Customer Area: dark / gold / blue secondary
========================================================= */

:root {
    --scp-primary: #2563eb;
    --scp-primary-hover: #1d4ed8;
    --scp-secondary: #0ea5e9;
    --scp-accent: #d4a24c;
    --scp-accent-strong: #b88324;
    --scp-gold: #d4a24c;
    --scp-gold-soft: #f7edd7;
    --scp-dark: #0b1120;
    --scp-dark-2: #111827;
    --scp-text: #0f172a;
    --scp-muted: #64748b;
    --scp-border: #e2e8f0;
    --scp-border-soft: #eef2f7;
    --scp-bg: #f8fafc;
    --scp-bg-soft: #eff6ff;
    --scp-card: #ffffff;
    --scp-success: #16a34a;
    --scp-warning: #f59e0b;
    --scp-danger: #dc2626;
    --scp-shadow-sm: 0 10px 28px rgba(15, 23, 42, 0.06);
    --scp-shadow-md: 0 18px 48px rgba(15, 23, 42, 0.09);
    --scp-shadow-lg: 0 28px 80px rgba(15, 23, 42, 0.14);
    --scp-radius-lg: 26px;
    --scp-radius-xl: 34px;
}

/* Reseller orders: product and customer fulfillment data */
.scp-reseller-order-products {
    display: grid;
    gap: 8px;
    min-width: 240px;
}

.scp-reseller-order-product {
    position: relative;
    overflow: hidden;
    padding: 12px 13px;
    border: 1px solid #bfdbfe;
    border-radius: 15px;
    background: linear-gradient(135deg, #eff6ff 0%, #fff 82%);
    box-shadow: 0 8px 20px rgba(37, 99, 235, .07);
}

.scp-reseller-order-product::before {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 4px;
    background: linear-gradient(180deg, #2563eb, #0ea5e9);
    content: '';
}

.scp-reseller-order-product__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.scp-reseller-order-product__head strong {
    color: #175cd3;
    font-size: .84rem;
    font-weight: 950;
    line-height: 1.55;
}

.scp-reseller-order-product__head small {
    flex: 0 0 auto;
    margin: 0 !important;
    padding: 3px 7px;
    border-radius: 999px;
    background: #eaf2ff;
    color: #175cd3 !important;
    font-weight: 900;
}

.scp-reseller-order-product__sku {
    display: block;
    margin-top: 7px;
    color: #64748b;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: .65rem;
    font-weight: 750;
    overflow-wrap: anywhere;
}

.scp-reseller-order-execution-groups {
    display: grid;
    gap: 8px;
    min-width: 230px;
}

.scp-reseller-order-execution-group {
    padding: 9px;
    border: 1px solid #a7f3d0;
    border-radius: 15px;
    background: linear-gradient(135deg, #ecfdf5, #fff);
    box-shadow: 0 8px 20px rgba(5, 150, 105, .07);
}

.scp-reseller-order-execution-product {
    display: block;
    margin-bottom: 7px;
    color: #047857;
    font-size: .68rem;
    font-weight: 900;
}

.scp-reseller-order-execution-list,
.scp-order-fulfillment-details {
    display: grid;
    gap: 7px;
    margin-top: 9px;
}

.scp-reseller-order-identifier,
.scp-order-fulfillment-details > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid #a7f3d0;
    border-radius: 10px;
    background: rgba(255, 255, 255, .84);
}

.scp-reseller-order-identifier b,
.scp-order-fulfillment-details span {
    color: #047857;
    font-size: .7rem;
    font-weight: 850;
    line-height: 1.4;
}

.scp-reseller-order-execution-empty {
    display: grid;
    min-height: 44px;
    place-items: center;
    border: 1px dashed #cbd5e1;
    border-radius: 13px;
    color: #94a3b8;
    background: #f8fafc;
    font-weight: 900;
}

.scp-reseller-order-identifier em,
.scp-order-fulfillment-details strong {
    color: #101828;
    font-size: .82rem;
    font-style: normal;
    font-weight: 950;
    overflow-wrap: anywhere;
    text-align: end;
}

@media (max-width: 850px) {
    .scp-reseller-data-table td.scp-reseller-order-products-cell {
        grid-template-columns: 1fr;
    }

    .scp-reseller-data-table td.scp-reseller-order-products-cell::before {
        padding-bottom: 2px;
    }

    .scp-reseller-order-products {
        min-width: 0;
    }

    .scp-reseller-order-execution-groups {
        min-width: 0;
    }
}

@media (max-width: 560px) {
    .scp-reseller-order-identifier,
    .scp-order-fulfillment-details > div {
        align-items: flex-start;
        flex-direction: column;
    }

    .scp-reseller-order-identifier em,
    .scp-order-fulfillment-details strong {
        width: 100%;
        font-size: .9rem;
        text-align: start;
    }
}

/* =========================================================
   Stage 129 - Reusable game purchase guide
========================================================= */
.scp-product-guide-open {
    overflow: hidden !important;
}

.scp-product-guide-modal[hidden],
.scp-product-guide-modal [hidden] {
    display: none !important;
}

.scp-product-guide-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 42px;
    border: 1px solid rgba(37, 99, 235, .24);
    border-radius: 14px;
    color: #1d4ed8;
    background: linear-gradient(135deg, rgba(239, 246, 255, .96), rgba(219, 234, 254, .78));
    padding: 9px 15px;
    font: inherit;
    font-size: 13px;
    font-weight: 950;
    line-height: 1.5;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(37, 99, 235, .09);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.scp-product-guide-trigger::before {
    content: "?";
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    margin-inline-end: 8px;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    font-size: 12px;
    font-weight: 1000;
}

.scp-product-guide-trigger:hover,
.scp-product-guide-trigger:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(37, 99, 235, .5);
    box-shadow: 0 14px 30px rgba(37, 99, 235, .16);
    outline: none;
}

.scp-quick-buy-form > .scp-product-guide-trigger {
    color: #dbeafe;
    border-color: rgba(96, 165, 250, .36);
    background: rgba(37, 99, 235, .15);
    box-shadow: none;
}

.scp-product-guide-modal {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: grid;
    width: 100%;
    height: 100%;
    height: 100dvh;
    place-items: center;
    padding: 20px;
}

.scp-product-guide-backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 16%, rgba(37, 99, 235, .32), transparent 36%),
        rgba(2, 6, 23, .76);
    backdrop-filter: blur(12px);
}

.scp-product-guide-dialog {
    position: relative;
    z-index: 1;
    width: min(900px, 100%);
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);
    display: grid;
    grid-template-columns: minmax(280px, .9fr) minmax(0, 1.1fr);
    overflow: auto;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 28px;
    color: #0f172a;
    background: #fff;
    box-shadow: 0 34px 90px rgba(2, 6, 23, .46);
    outline: none;
    animation: scpQuickBuyIn .22s ease-out;
}

.scp-product-guide-dialog:has(.scp-product-guide-media[hidden]) {
    grid-template-columns: minmax(0, 1fr);
    width: min(680px, 100%);
}

.scp-product-guide-close {
    position: absolute;
    z-index: 3;
    top: 16px;
    inset-inline-end: 16px;
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 1px solid rgba(15, 23, 42, .12);
    border-radius: 999px;
    color: #0f172a;
    background: rgba(255, 255, 255, .92);
    font-size: 27px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .12);
}

.scp-product-guide-media {
    min-height: 400px;
    overflow: hidden;
    background:
        radial-gradient(circle at 25% 25%, rgba(96, 165, 250, .3), transparent 38%),
        linear-gradient(145deg, #eff6ff, #dbeafe);
}

.scp-product-guide-media img {
    width: 100%;
    height: 100%;
    max-height: 620px;
    display: block;
    object-fit: contain;
}

.scp-product-guide-content {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
    padding: 56px 44px 44px;
}

.scp-product-guide-content h2 {
    margin: 0;
    padding-inline-end: 34px;
    color: #0f172a;
    font-size: clamp(24px, 4vw, 36px);
    font-weight: 1000;
    line-height: 1.3;
}

.scp-product-guide-body {
    color: #475569;
    font-size: 15px;
    font-weight: 700;
    line-height: 2;
}

.scp-product-guide-body p {
    margin: 0 0 12px;
}

.scp-product-guide-body p:last-child {
    margin-bottom: 0;
}

.scp-product-guide-list {
    display: grid;
    gap: 10px;
    margin: 4px 0 18px;
    padding-inline-start: 28px;
}

.scp-product-guide-list li {
    padding-inline-start: 7px;
}

.scp-product-guide-list li::marker {
    color: #2563eb;
    font-weight: 1000;
}

.scp-product-guide-list li:nth-child(even) {
    color: #334155;
}

.scp-product-guide-video {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 48px;
    border-radius: 15px;
    color: #fff;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    padding: 11px 20px;
    font-weight: 950;
    text-decoration: none;
    box-shadow: 0 16px 30px rgba(37, 99, 235, .22);
}

.scp-product-guide-video::after {
    content: "↗";
    margin-inline-start: 9px;
}

@media screen and (max-width: 700px) {
    .scp-product-guide-modal {
        align-items: end;
        padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom));
    }

    .scp-product-guide-dialog,
    .scp-product-guide-dialog:has(.scp-product-guide-media[hidden]) {
        width: 100%;
        max-height: calc(100dvh - max(16px, env(safe-area-inset-top) + env(safe-area-inset-bottom)));
        grid-template-columns: 1fr;
        border-radius: 24px;
    }

    .scp-product-guide-media {
        min-height: 0;
        height: min(260px, 34dvh);
    }

    .scp-product-guide-content {
        gap: 14px;
        padding: 30px 20px max(24px, env(safe-area-inset-bottom));
    }

    .scp-product-guide-content h2 {
        padding-inline-end: 34px;
        font-size: 23px;
    }

    .scp-product-guide-body {
        font-size: 14px;
        line-height: 1.85;
    }

    .scp-product-guide-video,
    .scp-product-guide-trigger {
        width: 100%;
    }
}

/* Configurable catalog page headers */
.scp-products-hero-inner.has-custom-image,
.scp-games-hero-card.has-custom-image {
    background:
        linear-gradient(110deg, rgba(7, 21, 47, .94) 0%, rgba(23, 37, 84, .80) 52%, rgba(29, 78, 216, .56) 100%),
        var(--scp-page-hero-image) center / cover no-repeat;
}

.scp-gift-cards-hero.has-custom-image {
    background:
        linear-gradient(110deg, rgba(17, 24, 39, .94) 0%, rgba(49, 46, 129, .78) 54%, rgba(126, 34, 206, .54) 100%),
        var(--scp-page-hero-image) center / cover no-repeat;
}

.scp-games-hero--without-page-hero {
    padding-top: 18px;
}

/* Reseller modal: keep overflow usable without showing native scrollbars. */
.scp-reseller-modal-overlay,
.scp-reseller-modal,
.scp-reseller-modal .scp-reseller-application-card,
.scp-reseller-modal .scp-reseller-application-intro,
.scp-reseller-modal .scp-reseller-application-form-wrap {
    overflow-x: hidden !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.scp-reseller-modal-overlay::-webkit-scrollbar,
.scp-reseller-modal::-webkit-scrollbar,
.scp-reseller-modal .scp-reseller-application-card::-webkit-scrollbar,
.scp-reseller-modal .scp-reseller-application-intro::-webkit-scrollbar,
.scp-reseller-modal .scp-reseller-application-form-wrap::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.scp-tiktok-qr {
    margin-top: 14px;
    padding: 18px;
    border: 1px solid rgba(37, 99, 235, .2);
    border-radius: 18px;
    background: linear-gradient(145deg, #fff, #f4f8ff);
    text-align: center;
}

.scp-tiktok-qr h3 {
    margin: 0 0 6px;
    color: #0f172a;
    font-size: 18px;
}

.scp-tiktok-qr p {
    max-width: 520px;
    margin: 0 auto 14px;
    color: #64748b;
    font-size: 13px;
    line-height: 1.75;
}

.scp-tiktok-qr-code {
    display: grid;
    min-height: 0;
    place-items: center;
}

.scp-tiktok-qr-code img {
    width: min(260px, 80vw);
    height: auto;
    padding: 10px;
    border: 1px solid #dbeafe;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .1);
}

.scp-tiktok-qr-profile {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px;
    border-radius: 14px;
    background: #ecfdf5;
    color: #047857;
}

.scp-tiktok-qr-profile-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
    text-align: start;
}

.scp-tiktok-qr-profile-copy span {
    max-width: 360px;
    color: #475569;
    font-size: 12px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.scp-tiktok-qr-profile-copy a {
    color: #2563eb;
    font-size: 12px;
    font-weight: 900;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.scp-tiktok-qr-profile img {
    width: 58px;
    height: 58px;
    border: 3px solid #fff;
    border-radius: 50%;
    object-fit: cover;
}

.scp-detail-tiktok-verification {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 14px;
    padding: 16px;
    border: 1px solid rgba(37, 99, 235, .2);
    border-radius: 18px;
    background: linear-gradient(135deg, #eff6ff, #ffffff);
}

.scp-detail-tiktok-verification > div {
    display: grid;
    gap: 4px;
}

.scp-detail-tiktok-verification strong {
    color: #0f172a;
    font-size: 14px;
    font-weight: 1000;
}

.scp-detail-tiktok-verification small {
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.6;
}

.scp-detail-tiktok-verify {
    flex: 0 0 auto;
    min-height: 44px;
    border: 0;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    padding: 10px 16px;
    font: inherit;
    font-size: 13px;
    font-weight: 950;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 12px 24px rgba(37, 99, 235, .2);
}

.scp-detail-tiktok-verify:disabled {
    cursor: wait;
    opacity: .65;
}

.scp-detail-tiktok-qr {
    width: 100%;
}

@media (max-width: 640px) {
    .scp-tiktok-qr {
        padding: 14px 10px;
        border-radius: 14px;
    }

    .scp-tiktok-qr-code img {
        width: min(220px, 72vw);
    }

    .scp-detail-tiktok-verification {
        align-items: stretch;
        flex-direction: column;
        padding: 14px;
    }

    .scp-detail-tiktok-verify {
        width: 100%;
        text-align: center;
    }
}

/* =========================================================
   Stage 146 - Guest login/register actions in mobile bottom bar
========================================================= */
.scp-mobile-guest-action {
    display: none !important;
}

.scp-mobile-auth-icon svg {
    width: 23px;
    height: 23px;
    display: block;
}

@media (max-width: 767px) {
    .scp-header-actions:not(:has(.scp-account-dropdown)) {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .scp-header-actions .scp-mobile-guest-action {
        display: flex !important;
    }

    .scp-header-actions .scp-mobile-register-action {
        color: #ffffff !important;
        background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
        box-shadow: 0 8px 18px rgba(37, 99, 235, .22) !important;
    }

    .scp-header-actions .scp-mobile-register-action:active {
        color: #ffffff !important;
        background: linear-gradient(135deg, #1d4ed8, #1e40af) !important;
    }

    .scp-header-actions .scp-mobile-auth-icon {
        display: grid !important;
        place-items: center !important;
    }
}

/* Stage 144: isolate the reseller plus button from legacy header rules. */
@media (min-width: 768px) {
    .scp-header-actions > .scp-reseller-quick-actions {
        position: relative !important;
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        flex: 0 0 40px !important;
        margin: 0 2px !important;
        align-self: center !important;
    }

    .scp-header-actions > .scp-reseller-quick-actions > summary {
        box-sizing: border-box !important;
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 0 2px !important;
        overflow: hidden !important;
        border: 1px solid #d8e1ee !important;
        border-radius: 50% !important;
        background: #ffffff !important;
        color: #172554 !important;
        box-shadow: 0 7px 18px rgba(15, 35, 75, .10) !important;
        line-height: 1 !important;
        transform: none !important;
    }

    .scp-header-actions > .scp-reseller-quick-actions > summary > span {
        width: auto !important;
        height: auto !important;
        display: block !important;
        margin: 0 !important;
        font-family: Arial, sans-serif !important;
        font-size: 25px !important;
        font-weight: 400 !important;
        line-height: 1 !important;
    }

    .scp-header-actions > .scp-reseller-quick-actions > summary > small {
        display: none !important;
    }

    .scp-header-actions > .scp-reseller-quick-actions > summary:hover,
    .scp-header-actions > .scp-reseller-quick-actions[open] > summary {
        border-color: #2563eb !important;
        background: #2563eb !important;
        color: #ffffff !important;
    }
}

@media (max-width: 767px) {
    .scp-header-actions > .scp-reseller-quick-actions {
        position: relative !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 55px !important;
        margin: 0 !important;
    }

    .scp-header-actions > .scp-reseller-quick-actions > summary > span {
        display: grid !important;
        place-items: center !important;
        width: 25px !important;
        height: 25px !important;
        margin: 0 !important;
        font-family: Arial, sans-serif !important;
        font-size: 23px !important;
        font-weight: 400 !important;
        line-height: 25px !important;
    }
}

/* Stage 143: reseller balance quick actions and credit requests */
.scp-reseller-quick-actions{position:relative;z-index:82}
.scp-reseller-quick-actions>summary{width:45px;height:45px;display:grid;place-items:center;list-style:none;border:1px solid #dce5f1;border-radius:50%;background:#fff;color:#172554;box-shadow:0 8px 22px rgba(15,35,75,.08);cursor:pointer;transition:.18s ease}
.scp-reseller-quick-actions>summary::-webkit-details-marker{display:none}.scp-reseller-quick-actions>summary:hover,.scp-reseller-quick-actions[open]>summary{color:#fff;background:linear-gradient(135deg,#2563eb,#172554);transform:translateY(-1px)}
.scp-reseller-quick-actions>summary>span{font-size:27px;font-weight:400;line-height:1}.scp-reseller-quick-actions>summary>small{display:none}
.scp-reseller-quick-menu{position:absolute;inset-block-start:calc(100% + 12px);inset-inline-start:0;width:270px;padding:9px;border:1px solid rgba(15,23,42,.1);border-radius:18px;background:#fff;box-shadow:0 24px 60px rgba(15,23,42,.2);animation:scp-account-menu-in .18s ease both}
.scp-reseller-quick-menu a{display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:10px;padding:10px;border-radius:13px;color:#172033;text-decoration:none}
.scp-reseller-quick-menu a:hover{background:#eff6ff;color:#1d4ed8}.scp-reseller-quick-menu a>span{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:#edf4ff;color:#1d4ed8;font-size:17px;font-weight:950}
.scp-reseller-quick-menu a div,.scp-reseller-quick-menu a strong,.scp-reseller-quick-menu a small{display:block;min-width:0}.scp-reseller-quick-menu a strong{font-size:.82rem}.scp-reseller-quick-menu a small{margin-top:3px;color:#667085;font-size:.67rem}
.scp-reseller-credit-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:22px;align-items:start}
.scp-reseller-credit-form{display:grid;gap:16px}.scp-reseller-credit-form label{display:grid;gap:7px;color:#344054;font-size:.82rem;font-weight:850}.scp-reseller-credit-form input,.scp-reseller-credit-form select,.scp-reseller-credit-form textarea{width:100%;border:1px solid #d9e2ef;border-radius:13px;background:#f8fafc;padding:12px 14px;color:#101828;font:inherit}.scp-reseller-credit-form input,.scp-reseller-credit-form select{min-height:48px}.scp-reseller-credit-form textarea{resize:vertical;line-height:1.6}.scp-reseller-credit-form label>small,.scp-reseller-credit-form+small{color:#b42318}
.scp-credit-money-input{position:relative}.scp-credit-money-input input{padding-inline-end:48px}.scp-credit-money-input b{position:absolute;inset-inline-end:16px;inset-block-start:50%;transform:translateY(-50%);color:#2563eb}
.scp-credit-terms{grid-template-columns:22px 1fr!important;align-items:start;padding:13px;border-radius:13px;background:#f1f5f9;line-height:1.65}.scp-credit-terms input{width:18px!important;height:18px!important;min-height:0!important;margin-top:2px;accent-color:#2563eb}
.scp-reseller-credit-pending{padding:13px 15px;border:1px solid #fedf89;border-radius:13px;background:#fffaeb;color:#93370d;font-size:.8rem;font-weight:800;line-height:1.6}
.scp-credit-history-card{padding:16px 0;border-block-end:1px solid #e8edf4}.scp-credit-history-card:last-child{border:0}.scp-credit-history-card header{display:flex;justify-content:space-between;align-items:center;gap:12px}.scp-credit-history-card header strong,.scp-credit-history-card header small{display:block}.scp-credit-history-card header small{margin-top:4px;color:#98a2b3;font-size:.69rem}.scp-credit-history-card dl{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:14px 0 0}.scp-credit-history-card dl>div{padding:10px;border-radius:11px;background:#f8fafc}.scp-credit-history-card dt{color:#667085;font-size:.67rem}.scp-credit-history-card dd{margin:4px 0 0;color:#101828;font-size:.78rem;font-weight:900}.scp-credit-history-card>p{margin:12px 0 0;padding:10px 12px;border-radius:10px;background:#eff6ff;color:#344054;font-size:.75rem;line-height:1.6}
@media(max-width:900px){.scp-reseller-credit-grid{grid-template-columns:1fr}}
@media(max-width:767px){.scp-header-actions:has(.scp-reseller-quick-actions){grid-template-columns:repeat(4,minmax(0,1fr))!important}.scp-header-actions .scp-reseller-quick-actions{width:auto!important;min-width:0!important}.scp-header-actions .scp-reseller-quick-actions>summary{width:100%!important;min-width:0!important;min-height:55px!important;height:55px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:3px!important;padding:5px 4px!important;border:0!important;border-radius:13px!important;background:transparent!important;box-shadow:none!important;color:#344054!important;transform:none!important}.scp-header-actions .scp-reseller-quick-actions[open]>summary{color:var(--scp-primary,#2563eb)!important;background:#eff6ff!important}.scp-reseller-quick-actions>summary>span{font-size:25px!important;line-height:25px!important}.scp-reseller-quick-actions>summary>small{display:block!important;max-width:100%;overflow:hidden;color:inherit;font-size:9px;font-weight:850;text-overflow:ellipsis;white-space:nowrap}.scp-reseller-quick-menu{position:fixed;inset-inline:14px;inset-block-start:auto;inset-block-end:calc(82px + env(safe-area-inset-bottom,0px));width:auto;z-index:160}.scp-credit-history-card dl{grid-template-columns:1fr}.scp-reseller-credit-form{gap:13px}}

/* Mobile featured/latest products: compact two-column visual catalog. */
.scp-home-showcase-mobile-link {
    display: none;
}

@media (max-width: 700px) {
    .scp-home-showcase-section .scp-section-heading {
        margin-bottom: 16px !important;
    }

    .scp-home-showcase-section .scp-section-heading p {
        display: none !important;
    }

    .scp-home-showcase-section .scp-home-showcase-grid,
    .scp-home-showcase-section .scp-home-showcase-grid.compact {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px 12px !important;
    }

    .scp-home-showcase-section .scp-home-showcase-card {
        position: relative !important;
        min-width: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
        border: 1px solid rgba(37, 99, 235, .14) !important;
        border-radius: 18px !important;
        background: #ffffff !important;
        box-shadow: 0 12px 28px rgba(15, 23, 42, .09) !important;
    }

    .scp-home-showcase-card .scp-home-showcase-mobile-link {
        position: absolute;
        inset: 0;
        z-index: 5;
        display: block;
    }

    .scp-home-showcase-card .scp-product-image {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 1 / 1 !important;
        padding: 10px !important;
        border-radius: 0 !important;
        background: linear-gradient(145deg, #eff6ff, #eef2ff) !important;
        box-sizing: border-box !important;
    }

    .scp-home-showcase-card .scp-product-image img {
        width: 100% !important;
        height: 100% !important;
        padding: 4px !important;
        border-radius: 12px !important;
        object-fit: contain !important;
        background: rgba(255, 255, 255, .72) !important;
        box-sizing: border-box !important;
    }

    .scp-home-showcase-card .scp-product-placeholder {
        width: 100% !important;
        height: 100% !important;
        display: grid !important;
        place-items: center !important;
        border-radius: 12px !important;
        font-size: 42px !important;
    }

    .scp-home-showcase-card .scp-product-badge {
        z-index: 6 !important;
        font-size: 10px !important;
    }

    .scp-home-showcase-card .scp-product-body {
        min-height: 62px !important;
        display: grid !important;
        place-items: center !important;
        gap: 9px !important;
        padding: 11px 8px 12px !important;
        background: #ffffff !important;
    }

    .scp-home-showcase-card .scp-product-body h3 {
        display: -webkit-box !important;
        overflow: hidden !important;
        margin: 0 !important;
        color: #172033 !important;
        font-size: 14px !important;
        font-weight: 850 !important;
        line-height: 1.4 !important;
        text-align: center !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
    }

    .scp-home-showcase-card .scp-product-brand,
    .scp-home-showcase-card .scp-product-card-rating,
    .scp-home-showcase-card .scp-stock-status,
    .scp-home-showcase-card .scp-product-price,
    .scp-home-showcase-card .scp-product-utility-row {
        display: none !important;
    }

    .scp-home-showcase-card .scp-product-actions {
        position: relative !important;
        z-index: 6 !important;
        width: 100% !important;
        display: block !important;
        margin-top: 2px !important;
    }

    .scp-home-showcase-card .scp-product-actions > a {
        display: none !important;
    }

    .scp-home-showcase-card .scp-card-cart-form,
    .scp-home-showcase-card .scp-card-cart-form button {
        width: 100% !important;
    }

    .scp-home-showcase-card .scp-card-cart-form button {
        min-height: 38px !important;
        padding: 8px 10px !important;
        border: 0 !important;
        border-radius: 11px !important;
        background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
        color: #ffffff !important;
        font-size: 12px !important;
        font-weight: 900 !important;
        box-shadow: 0 8px 18px rgba(37, 99, 235, .22) !important;
    }

    .scp-home-showcase-card .scp-card-cart-form button:disabled {
        background: #cbd5e1 !important;
        box-shadow: none !important;
    }
}

.scp-product-video-card {
    margin-top: 26px;
    display: grid;
    grid-template-columns: minmax(230px, .75fr) minmax(0, 1.5fr);
    align-items: center;
    gap: 24px;
    padding: 24px;
    border: 1px solid #dbe3ef;
    border-radius: 28px;
    background: linear-gradient(135deg, #07152d, #102d64);
    box-shadow: 0 24px 54px rgba(15, 23, 42, .14);
    overflow: hidden;
}

.scp-product-video-copy { color: #fff; }
.scp-product-video-copy span {
    display: inline-flex;
    padding: 6px 10px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    color: #fbbf24;
    font-size: 11px;
    font-weight: 900;
}
.scp-product-video-copy h2 { margin: 12px 0 8px; font-size: clamp(22px, 3vw, 34px); }
.scp-product-video-copy p { margin: 0; color: rgba(255, 255, 255, .72); line-height: 1.8; }
.scp-product-video-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 20px;
    background: #020617;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .3);
}
.scp-product-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media (max-width: 760px) {
    .scp-product-video-card { grid-template-columns: 1fr; padding: 16px; border-radius: 22px; }
}

/* Product gallery and variant configurator */
.scp-product-main-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity .18s ease, transform .25s ease;
}

.scp-product-thumbs {
    display: flex !important;
    flex-wrap: wrap;
    gap: 10px !important;
}

.scp-product-thumb {
    width: 72px !important;
    height: 72px !important;
    padding: 5px !important;
    border: 1px solid #dbe3ef !important;
    border-radius: 15px !important;
    background: #fff !important;
    cursor: pointer;
    overflow: hidden;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.scp-product-thumb:hover,
.scp-product-thumb.active {
    border-color: var(--scp-primary) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--scp-primary) 14%, transparent) !important;
    transform: translateY(-2px);
}

.scp-product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.scp-product-variants {
    display: grid;
    gap: 14px;
}

.scp-option-groups {
    display: grid;
    gap: 14px;
}

.scp-option-group {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.scp-option-group legend {
    margin-bottom: 8px;
    color: #475569;
    font-size: 12px;
    font-weight: 900;
}

.scp-option-values,
.scp-variant-list {
    display: flex !important;
    flex-wrap: wrap;
    gap: 9px !important;
}

.scp-option-value {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid #dbe3ef;
    border-radius: 13px;
    background: #fff;
    color: #334155;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

.scp-option-value i {
    width: 18px;
    height: 18px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--option-color, #cbd5e1);
    box-shadow: 0 0 0 1px #cbd5e1;
}

.scp-option-value:hover,
.scp-option-value.active {
    border-color: var(--scp-primary);
    background: #eff6ff;
    color: var(--scp-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--scp-primary) 10%, transparent);
}

.scp-variant-card {
    min-width: 145px !important;
    min-height: 76px !important;
    display: grid !important;
    gap: 3px !important;
    padding: 12px 14px !important;
    border: 1px solid #dbe3ef !important;
    border-radius: 15px !important;
    background: #fff !important;
    color: #0f172a !important;
    text-align: start !important;
    cursor: pointer;
    box-shadow: none !important;
}

.scp-variant-card:hover,
.scp-variant-card.active {
    border-color: var(--scp-primary) !important;
    background: linear-gradient(145deg, #eff6ff, #fff) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--scp-primary) 11%, transparent) !important;
}

.scp-variant-card:disabled {
    cursor: not-allowed;
    opacity: .5;
}

.scp-variant-card span { font-weight: 900; }
.scp-variant-card small { color: #64748b; font-size: 10px; }
.scp-variant-card strong { color: var(--scp-primary); font-size: 12px; }
.scp-variant-card em { color: #dc2626; font-size: 10px; font-style: normal; }

.scp-variant-selection-status {
    margin: 0;
    padding: 10px 12px;
    border-radius: 12px;
    background: #f8fafc;
    color: #64748b;
    font-size: 12px;
}

.scp-variant-selection-status strong { color: #0f172a; }

@media (max-width: 640px) {
    .scp-product-thumb {
        width: 60px !important;
        height: 60px !important;
    }

    .scp-variant-card {
        min-width: calc(50% - 5px) !important;
        flex: 1 1 calc(50% - 5px);
    }
}

/* Stage 150: keep cards clean and reveal the reseller price on hover/focus. */
.scp-reseller-price-reveal {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-block: 6px;
    outline: none;
}

.scp-reseller-price-reveal > .scp-product-price {
    margin: 0;
}

.scp-product-price:has(.scp-reseller-price-trigger) {
    position: relative;
}

.scp-reseller-price-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 4px 9px;
    color: #0369a1;
    background: #e0f2fe;
    border: 1px solid #7dd3fc;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 950;
    line-height: 1;
    white-space: nowrap;
    cursor: help;
    transition: opacity 160ms ease, transform 160ms ease;
}

.scp-reseller-hover-price {
    position: absolute;
    z-index: 8;
    inset-inline-end: 0;
    top: 50%;
    min-width: 118px;
    display: grid;
    gap: 2px;
    padding: 7px 10px;
    color: #ffffff;
    background: linear-gradient(135deg, #0f172a, #1e3a8a);
    border: 1px solid rgb(255 255 255 / 16%);
    border-radius: 11px;
    box-shadow: 0 10px 24px rgb(15 23 42 / 24%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-50%) scale(.92);
    transform-origin: center;
    transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
}

.scp-reseller-hover-price small {
    color: #bae6fd;
    font-size: 9px;
    font-weight: 850;
}

.scp-reseller-hover-price strong {
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 950;
    white-space: nowrap;
}

/* Product details: show the customer price and reveal the reseller price on hover/focus. */
.scp-detail-reseller-reveal {
    cursor: help;
    outline: none;
}

.scp-detail-reseller-reveal .scp-detail-reseller-trigger {
    border: 1px solid #7dd3fc;
    text-decoration: none;
}

.scp-detail-reseller-reveal .scp-detail-reseller-hover {
    inset-inline-end: 18px;
    top: 50%;
    text-decoration: none;
}

.scp-detail-reseller-reveal .scp-detail-reseller-hover b {
    color: #ffffff;
    font-size: 16px;
    font-weight: 950;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
}

.scp-detail-reseller-reveal:hover .scp-detail-reseller-trigger,
.scp-detail-reseller-reveal:focus .scp-detail-reseller-trigger,
.scp-detail-reseller-trigger:focus {
    opacity: 0;
    transform: scale(.92);
}

.scp-detail-reseller-reveal:hover .scp-detail-reseller-hover,
.scp-detail-reseller-reveal:focus .scp-detail-reseller-hover,
.scp-detail-reseller-trigger:focus + .scp-detail-reseller-hover,
.scp-detail-reseller-reveal.is-price-visible .scp-detail-reseller-hover {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) scale(1);
}

.scp-detail-reseller-reveal.is-price-visible .scp-detail-reseller-trigger {
    opacity: 0;
    transform: scale(.92);
}

@media (hover: none) {
    .scp-detail-reseller-reveal:hover .scp-detail-reseller-trigger {
        opacity: 1;
        transform: none;
    }

    .scp-detail-reseller-reveal:hover .scp-detail-reseller-hover {
        opacity: 0;
        visibility: hidden;
        transform: translateY(-50%) scale(.92);
    }

    .scp-detail-reseller-reveal:focus .scp-detail-reseller-trigger,
    .scp-detail-reseller-trigger:focus {
        opacity: 0;
        transform: scale(.92);
    }

    .scp-detail-reseller-reveal:focus .scp-detail-reseller-hover,
    .scp-detail-reseller-trigger:focus + .scp-detail-reseller-hover,
    .scp-detail-reseller-reveal.is-price-visible .scp-detail-reseller-hover {
        opacity: 1;
        visibility: visible;
        transform: translateY(-50%) scale(1);
    }

    .scp-detail-reseller-reveal.is-price-visible .scp-detail-reseller-trigger {
        opacity: 0;
        transform: scale(.92);
    }
}

.scp-product-card:hover .scp-reseller-price-trigger,
.scp-product-price:hover .scp-reseller-price-trigger,
.scp-variant-card:hover .scp-reseller-price-trigger,
.scp-reseller-price-reveal:hover .scp-reseller-price-trigger,
.scp-reseller-price-reveal:focus .scp-reseller-price-trigger,
.scp-reseller-price-trigger:focus {
    opacity: 0;
    transform: scale(.92);
}

.scp-product-card:hover .scp-reseller-hover-price,
.scp-product-price:hover .scp-reseller-hover-price,
.scp-variant-card:hover .scp-reseller-hover-price,
.scp-reseller-price-reveal:hover .scp-reseller-hover-price,
.scp-reseller-price-reveal:focus .scp-reseller-hover-price,
.scp-reseller-price-trigger:focus + .scp-reseller-hover-price {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) scale(1);
}

@media (hover: none) {
    .scp-reseller-price-trigger {
        cursor: pointer;
    }

    .scp-product-card:hover .scp-reseller-price-trigger,
    .scp-product-price:hover .scp-reseller-price-trigger,
    .scp-variant-card:hover .scp-reseller-price-trigger {
        opacity: 1;
        transform: none;
    }

    .scp-product-card:hover .scp-reseller-hover-price,
    .scp-product-price:hover .scp-reseller-hover-price,
    .scp-variant-card:hover .scp-reseller-hover-price {
        opacity: 0;
        visibility: hidden;
        transform: translateY(-50%) scale(.92);
    }

    .scp-reseller-price-trigger:focus + .scp-reseller-hover-price,
    .scp-reseller-price-reveal:focus .scp-reseller-hover-price {
        opacity: 1;
        visibility: visible;
        transform: translateY(-50%) scale(1);
    }
}

/* Seamless product loading instead of numbered pagination. */
.scp-infinite-scroll {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 72px;
    margin-top: 24px;
    color: #64748b;
    font-size: 13px;
    font-weight: 800;
}

.scp-infinite-scroll-spinner {
    width: 20px;
    height: 20px;
    border: 3px solid #dbeafe;
    border-top-color: #2563eb;
    border-radius: 999px;
    animation: scp-infinite-scroll-spin .8s linear infinite;
}

.scp-infinite-scroll:not(.is-loading) .scp-infinite-scroll-spinner {
    animation-play-state: paused;
}

.scp-infinite-scroll.has-error .scp-infinite-scroll-spinner {
    border-color: #fee2e2;
    border-top-color: #dc2626;
}

@keyframes scp-infinite-scroll-spin {
    to { transform: rotate(360deg); }
}

body.scp-storefront {
    background:
        radial-gradient(circle at top left, rgba(37, 99, 235, 0.045), transparent 32%),
        radial-gradient(circle at top right, rgba(212, 162, 76, 0.04), transparent 30%),
        var(--scp-bg);
    color: var(--scp-text);
}

/* Header: premium black/gold strip + clean blue storefront */
.scp-header {
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid var(--scp-border);
    box-shadow: 0 10px 32px rgba(15, 23, 42, 0.035);
}

.scp-topbar {
    background: linear-gradient(135deg, var(--scp-dark), #111827);
    color: rgba(255, 255, 255, 0.78);
    border-bottom: 1px solid rgba(212, 162, 76, 0.28);
    padding-inline: 14px;
    border-radius: 0 0 18px 18px;
}

.scp-language-switcher a {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.scp-language-switcher a.active {
    color: #111827;
    background: linear-gradient(135deg, #f7d37a, var(--scp-accent));
}

.scp-logo-mark {
    background: linear-gradient(135deg, var(--scp-primary), var(--scp-secondary));
    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.22);
}

.scp-search:focus-within,
.scp-field input:focus,
.scp-field select:focus,
.scp-field textarea:focus,
.scp-products-toolbar input:focus,
.scp-products-toolbar select:focus {
    border-color: var(--scp-primary);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.11);
}

.scp-search button,
.scp-products-toolbar button,
.scp-btn-small.primary,
.scp-detail-add-to-cart,
.scp-cart-checkout-button,
.scp-checkout-submit,
.scp-success-primary,
.scp-cart-empty-btn,
.scp-order-primary-btn,
.scp-track-submit,
.scp-history-view-btn {
    background: linear-gradient(135deg, var(--scp-primary), var(--scp-primary-hover));
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 14px 34px rgba(37, 99, 235, 0.18);
}

.scp-btn-small.primary:hover,
.scp-detail-add-to-cart:hover,
.scp-cart-checkout-button:hover,
.scp-checkout-submit:hover,
.scp-track-submit:hover,
.scp-history-view-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 42px rgba(37, 99, 235, 0.24);
}

.scp-btn-primary {
    background: #ffffff;
    color: var(--scp-dark);
}

.scp-btn-light {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #ffffff;
}

.scp-products-reset,
.scp-cart-continue-button,
.scp-checkout-back,
.scp-success-secondary,
.scp-order-secondary-btn,
.scp-detail-secondary-btn,
.scp-section-heading a,
.scp-link-more {
    background: var(--scp-bg-soft);
    color: var(--scp-primary);
    border-color: #bfdbfe;
}

/* Unified blue hero style for public storefront pages */
.scp-hero-content,
.scp-products-hero-inner,
.scp-cart-page-header,
.scp-checkout-header,
.scp-order-hero,
.scp-track-hero,
.scp-history-hero {
    background:
        radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.14), transparent 28%),
        radial-gradient(circle at 90% 20%, rgba(212, 162, 76, 0.18), transparent 34%),
        linear-gradient(135deg, var(--scp-dark) 0%, #172554 46%, var(--scp-primary) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: var(--scp-shadow-lg);
}

.scp-hero-layout .scp-hero-content {
    background:
        radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.14), transparent 28%),
        radial-gradient(circle at 90% 20%, rgba(212, 162, 76, 0.18), transparent 34%),
        linear-gradient(
            135deg,
            var(--scp-home-hero-bg-start, var(--scp-dark)) 0%,
            var(--scp-home-hero-bg-middle, #172554) 46%,
            var(--scp-home-hero-bg-end, var(--scp-primary)) 100%
        ) !important;
    font-family: var(--scp-home-hero-font, var(--scp-font-heading));
}

.scp-hero-layout .scp-hero-badge {
    background: var(--scp-home-hero-badge-bg, rgba(255, 255, 255, .13));
    color: var(--scp-home-hero-badge-text, #dbeafe);
    font-size: var(--scp-home-hero-badge-size, 13px);
}

.scp-hero-layout .scp-hero-content h1 {
    color: var(--scp-home-hero-title, #ffffff);
    font-size: var(--scp-home-hero-title-size, clamp(34px, 4vw, 58px));
}

.scp-hero-layout .scp-hero-content p {
    color: var(--scp-home-hero-text, #dbeafe);
    font-size: var(--scp-home-hero-text-size, 17px);
}

.scp-hero-layout .scp-btn {
    font-size: var(--scp-home-hero-button-size, 14px);
}

.scp-hero-layout .scp-btn-primary {
    background: var(--scp-home-hero-primary-bg, #ffffff);
    color: var(--scp-home-hero-primary-text, #111827);
}

.scp-hero-layout .scp-btn-light {
    background: var(--scp-home-hero-secondary-bg, rgba(255, 255, 255, .12));
    color: var(--scp-home-hero-secondary-text, #ffffff);
}

.scp-hero-layout .scp-hero-stats strong {
    color: var(--scp-home-hero-stats-number, #ffffff);
}

.scp-hero-layout .scp-hero-stats span {
    color: var(--scp-home-hero-stats-label, #c7d2fe);
}

.scp-hero-layout .scp-hero-showcase {
    background:
        radial-gradient(circle at 20% 20%, rgba(79, 70, 229, 0.25), transparent 30%),
        radial-gradient(circle at 85% 30%, rgba(219, 39, 119, 0.18), transparent 34%),
        var(--scp-home-hero-showcase-bg, #ffffff);
}

.scp-hero-layout .scp-showcase-card {
    background: var(--scp-home-hero-showcase-card-bg, rgba(255, 255, 255, .92));
}

.scp-hero-layout .scp-showcase-card span {
    color: var(--scp-home-hero-showcase-label, #64748b);
}

.scp-hero-layout .scp-showcase-card strong {
    color: var(--scp-home-hero-showcase-title, #0f172a);
}

.scp-hero-badge,
.scp-products-hero-inner .scp-hero-badge,
.scp-cart-page-badge,
.scp-checkout-badge,
.scp-order-badge,
.scp-track-badge,
.scp-history-badge {
    background: rgba(255, 255, 255, 0.13);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #dbeafe;
}

.scp-product-card,
.scp-category-card,
.scp-brand-card,
.scp-sidebar-card,
.scp-products-toolbar,
.scp-products-summary,
.scp-product-info,
.scp-product-gallery,
.scp-product-content-card,
.scp-cart-card,
.scp-cart-summary-card,
.scp-checkout-card,
.scp-checkout-summary,
.scp-order-card,
.scp-order-summary-card,
.scp-track-card,
.scp-history-table-card,
.scp-history-empty {
    background: var(--scp-card);
    border-color: var(--scp-border);
    box-shadow: var(--scp-shadow-sm);
}

.scp-product-card:hover,
.scp-category-card:hover {
    box-shadow: var(--scp-shadow-md);
}

.scp-product-image,
.scp-product-main-image {
    background:
        radial-gradient(circle at 30% 20%, rgba(37, 99, 235, 0.13), transparent 30%),
        radial-gradient(circle at 80% 30%, rgba(212, 162, 76, 0.10), transparent 32%),
        linear-gradient(135deg, #ffffff 0%, #eff6ff 54%, #f8fafc 100%);
}

.scp-product-brand,
.scp-product-detail-price strong,
.scp-products-summary strong,
.scp-cart-summary-total strong,
.scp-checkout-total strong,
.scp-success-details strong,
.scp-order-status-strip strong,
.scp-order-summary-total strong {
    color: var(--scp-primary);
}

.scp-product-type-badge,
.scp-product-meta-line span,
.scp-product-categories a,
.scp-category-icon,
.scp-cart-card-type,
.scp-checkout-card-head > span,
.scp-order-card-head span,
.scp-history-status {
    background: var(--scp-bg-soft);
    color: var(--scp-primary);
    border-color: #bfdbfe;
}

.scp-product-badge {
    background: linear-gradient(135deg, #dc2626, #ef4444);
}

/* Product reviews belong to storefront, so keep them light/blue with gold only for stars */
.scp-product-reviews-section {
    background:
        radial-gradient(circle at top left, rgba(37, 99, 235, 0.07), transparent 30%),
        radial-gradient(circle at top right, rgba(212, 162, 76, 0.055), transparent 28%),
        #ffffff;
    border: 1px solid var(--scp-border);
    box-shadow: var(--scp-shadow-md);
}

.scp-product-reviews-badge {
    background: var(--scp-bg-soft);
    color: var(--scp-primary);
    border-color: #bfdbfe;
}

.scp-product-review-form-card,
.scp-product-approved-reviews-card,
.scp-approved-review-item,
.scp-reviews-empty {
    background: #ffffff;
    border-color: var(--scp-border);
}

.scp-product-rating-summary,
.scp-product-approved-reviews-head span,
.scp-reviews-empty div {
    background: linear-gradient(135deg, var(--scp-dark), #172554);
}

.scp-rating-stars span.is-active,
.scp-product-rating-summary > strong,
.scp-product-approved-reviews-head span,
.scp-reviews-empty div {
    color: #f5b94c;
}

.scp-review-field input,
.scp-review-field textarea {
    border-color: var(--scp-border);
    background: #f8fafc;
}

.scp-review-field input:focus,
.scp-review-field textarea:focus {
    background: #ffffff;
    border-color: var(--scp-primary);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.11);
}

.scp-review-submit-btn {
    background: linear-gradient(135deg, var(--scp-primary), var(--scp-primary-hover));
    box-shadow: 0 16px 34px rgba(37, 99, 235, 0.18);
}

/* Footer: premium black/gold */
.scp-footer {
    background:
        radial-gradient(circle at 15% 10%, rgba(212, 162, 76, 0.16), transparent 28%),
        linear-gradient(135deg, #05070b, var(--scp-dark));
    border-top: 1px solid rgba(212, 162, 76, 0.22);
}

.scp-footer h3,
.scp-footer h4 {
    color: #f7d37a;
}

.scp-footer a:hover {
    color: #f7d37a;
}

/* Customer area: account + wishlist dark/gold, but consistent */
.scp-account-page,
.scp-wishlist-page {
    --account-bg: #05070b;
    --account-surface: #0f172a;
    --account-surface-2: #111827;
    --account-border: rgba(255, 255, 255, 0.10);
    --account-text: #f8fafc;
    --account-muted: #94a3b8;
    --account-gold: #f5b94c;
    --account-gold-2: #f97316;
    background:
        radial-gradient(circle at 12% 8%, rgba(245, 185, 76, 0.16), transparent 28%),
        radial-gradient(circle at 90% 10%, rgba(37, 99, 235, 0.11), transparent 34%),
        linear-gradient(135deg, #05070b 0%, #090b10 55%, #0b1120 100%);
}

.scp-account-hero,
.scp-wishlist-hero {
    background:
        radial-gradient(circle at 16% 20%, rgba(245, 185, 76, 0.17), transparent 30%),
        radial-gradient(circle at 92% 20%, rgba(37, 99, 235, 0.10), transparent 34%),
        linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(5, 7, 11, 0.98));
    border: 1px solid var(--account-border);
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.42);
}

.scp-account-badge,
.scp-wishlist-badge {
    background: rgba(245, 185, 76, 0.13);
    border-color: rgba(245, 185, 76, 0.28);
    color: #f7d37a;
}

.scp-account-hero h1 span,
.scp-wishlist-hero h1 {
    background: linear-gradient(135deg, #0f172a, #1d4ed8, #2563eb);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.scp-account-page .scp-account-hero h1 span {
    text-shadow: 0 10px 26px rgba(37, 99, 235, 0.16);
}

.scp-account-page :is(.scp-account-stat-card strong, .scp-reseller-summary-card strong, .scp-account-order-card strong, .scp-account-order-card small, .scp-account-latest-order strong, .scp-account-latest-order small, .scp-account-payment-status, .scp-account-order-card em) {
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: "lnum" 1, "tnum" 1;
}

.scp-account-primary-btn,
.scp-wishlist-empty-icon,
.scp-wishlist-remove-form button,
.scp-product-wishlist-form button,
.scp-account-avatar {
    background: linear-gradient(135deg, #f7d37a, var(--account-gold));
    color: #111827;
    box-shadow: 0 18px 40px rgba(245, 185, 76, 0.24);
}

.scp-account-secondary-btn {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.14);
}

.scp-account-profile-card,
.scp-wishlist-count-card {
    background: rgba(255, 255, 255, 0.075);
    border: 1px solid var(--account-border);
}

.scp-account-stat-card,
.scp-account-panel,
.scp-wishlist-card,
.scp-wishlist-empty {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), #f8fafc);
    border-color: rgba(226, 232, 240, 0.95);
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.26);
}

.scp-account-panel-head a,
.scp-account-actions-list a,
.scp-account-empty,
.scp-account-mini-empty {
    background: #f8fafc;
    border-color: var(--scp-border);
    color: var(--scp-text);
}

.scp-account-panel-head a:hover,
.scp-account-actions-list a:hover {
    border-color: rgba(245, 185, 76, 0.55);
    box-shadow: 0 10px 25px rgba(245, 185, 76, 0.10);
}

.scp-account-stat-icon,
.scp-account-view-order,
.scp-account-latest-order a,
.scp-wishlist-footer button,
.scp-wishlist-empty a {
    background: linear-gradient(135deg, var(--scp-dark), #111827);
    color: #ffffff;
}

.scp-account-order-card,
.scp-wishlist-image {
    background: #f8fafc;
    border-color: var(--scp-border);
}

.scp-account-order-card em {
    background: var(--scp-bg-soft);
    color: var(--scp-primary);
}

.scp-account-payment-status {
    background: #ecfdf5 !important;
    color: #166534 !important;
}

.scp-wishlist-placeholder {
    background: linear-gradient(135deg, var(--scp-dark), #111827);
    color: #f7d37a;
}

.scp-product-details-wishlist-form button,
.scp-product-details-wishlist-link {
    background: var(--scp-bg-soft);
    color: var(--scp-primary);
    border-color: #bfdbfe;
}

/* Status semantic colors */
.scp-status-pending,
.scp-history-status,
.scp-account-order-card em {
    background: #fffbeb;
    color: #b45309;
}

.scp-status-completed,
.scp-history-payment,
.scp-account-payment-status {
    background: #ecfdf5 !important;
    color: #166534 !important;
}

/* Pagination on dark pages */
.scp-wishlist-pagination nav,
.scp-wishlist-pagination div {
    color: #ffffff;
}

/* Wishlist page uses the storefront light theme */
.scp-wishlist-page {
    --account-bg: #f6f8fc;
    --account-surface: #ffffff;
    --account-surface-2: #eff6ff;
    --account-border: rgba(148, 163, 184, 0.22);
    --account-text: var(--scp-text);
    --account-muted: var(--scp-muted);
    --account-gold: var(--scp-primary);
    --account-gold-2: var(--scp-primary-hover);
    background:
        radial-gradient(circle at 10% 8%, rgba(37, 99, 235, 0.08), transparent 28%),
        radial-gradient(circle at 90% 12%, rgba(242, 201, 76, 0.12), transparent 30%),
        linear-gradient(180deg, #ffffff 0%, #f6f8fc 100%);
    color: var(--scp-text);
}

.scp-wishlist-page .scp-wishlist-hero {
    background:
        radial-gradient(circle at 14% 20%, rgba(37, 99, 235, 0.12), transparent 32%),
        linear-gradient(135deg, #ffffff 0%, #eff6ff 55%, #f8fafc 100%);
    border: 1px solid rgba(191, 219, 254, 0.9);
    box-shadow: 0 24px 70px rgba(37, 99, 235, 0.12);
}

.scp-wishlist-page .scp-wishlist-badge {
    background: rgba(37, 99, 235, 0.10);
    border-color: rgba(37, 99, 235, 0.18);
    color: var(--scp-primary);
}

.scp-wishlist-page .scp-wishlist-hero h1 {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    color: var(--scp-text);
}

.scp-wishlist-page .scp-wishlist-hero p {
    color: var(--scp-muted);
}

.scp-wishlist-page .scp-wishlist-count-card {
    background: rgba(255, 255, 255, 0.86);
    border-color: rgba(191, 219, 254, 0.85);
    box-shadow: 0 14px 34px rgba(37, 99, 235, 0.10);
}

.scp-wishlist-page .scp-wishlist-count-card span {
    color: var(--scp-muted);
}

.scp-wishlist-page .scp-wishlist-count-card strong {
    color: var(--scp-primary);
}

.scp-wishlist-page .scp-wishlist-card,
.scp-wishlist-page .scp-wishlist-empty {
    background: #ffffff;
    border-color: rgba(226, 232, 240, 0.95);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
}

.scp-wishlist-page .scp-wishlist-empty-icon,
.scp-wishlist-page .scp-wishlist-remove-form button {
    background: linear-gradient(135deg, #dbeafe, #ffffff);
    color: var(--scp-primary);
    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.12);
}

.scp-wishlist-page .scp-wishlist-placeholder {
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    color: var(--scp-primary);
}

.scp-wishlist-page .scp-wishlist-footer button,
.scp-wishlist-page .scp-wishlist-empty a {
    background: linear-gradient(135deg, var(--scp-primary), var(--scp-primary-hover));
    color: #ffffff;
    box-shadow: 0 14px 30px rgba(37, 99, 235, 0.18);
}

.scp-wishlist-page .scp-wishlist-pagination nav,
.scp-wishlist-page .scp-wishlist-pagination div {
    color: var(--scp-text);
}

@media (max-width: 700px) {
    .scp-topbar {
        border-radius: 0;
        padding-block: 8px;
    }

    .scp-main-header {
        gap: 14px;
    }
}

/* =========================================================
   Stage 132 - Unified game package product actions
========================================================= */
.scp-game-product-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.scp-game-product-actions .scp-btn-small {
    width: 100%;
    min-height: 44px;
}

.scp-game-product-utility-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 2px;
}

.scp-game-product-utility-row form { margin: 0; }

.scp-game-product-utility-row button,
.scp-game-product-utility-row a {
    width: 38px;
    height: 38px;
    display: inline-grid;
    place-items: center;
    border: 1px solid #dbe5f4;
    border-radius: 50%;
    background: #fff;
    color: #1d4ed8;
    font: inherit;
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.scp-game-product-utility-row button:hover,
.scp-game-product-utility-row a:hover {
    transform: translateY(-2px);
    border-color: #2563eb;
    background: #eff6ff;
}

@media (max-width: 480px) {
    .scp-game-product-actions { grid-template-columns: 1fr; }
}

/* =========================================================
   Stage 241 - Compact two-column game packages on mobile
========================================================= */
@media (max-width: 700px) {
    .scp-game-products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .scp-game-product-card {
        min-width: 0;
        border-radius: 18px;
        box-shadow: 0 12px 28px rgba(15, 23, 42, .08);
    }

    .scp-game-product-media {
        height: 128px;
        padding: 8px;
    }

    .scp-game-product-media img {
        max-width: 94%;
        max-height: 112px;
    }

    .scp-game-product-media strong {
        width: 54px;
        height: 54px;
        border-radius: 17px;
        font-size: 21px;
    }

    .scp-game-product-media .scp-product-badge {
        inset-block-start: 8px;
        inset-inline-end: 8px;
        padding: 5px 7px;
        font-size: 8px;
    }

    .scp-game-product-body {
        gap: 8px;
        padding: 11px;
    }

    .scp-game-product-body > span {
        overflow: hidden;
        font-size: 9px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .scp-game-product-body h3 {
        display: -webkit-box;
        min-height: 38px;
        overflow: hidden;
        font-size: 12px;
        line-height: 1.55;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .scp-game-package-list {
        gap: 4px;
    }

    .scp-game-package-list small {
        max-width: 100%;
        padding: 5px 6px;
        overflow: hidden;
        font-size: 9px;
        text-overflow: ellipsis;
    }

    .scp-game-package-list small:nth-child(n + 3) {
        display: none;
    }

    .scp-game-product-footer {
        align-items: center;
        flex-direction: row;
        min-height: 28px;
    }

    .scp-game-product-card .scp-product-price {
        min-width: 0;
        flex-wrap: wrap;
        gap: 3px;
    }

    .scp-game-product-card .scp-product-price strong {
        font-size: 14px;
    }

    .scp-game-product-card .scp-product-price span,
    .scp-game-product-card .scp-reseller-price-trigger {
        font-size: 8px;
    }

    .scp-game-product-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 5px;
    }

    .scp-game-product-actions .scp-btn-small {
        min-width: 0;
        min-height: 35px;
        padding: 5px 3px;
        border-radius: 10px;
        font-size: 9px;
        line-height: 1.25;
        text-align: center;
    }

    .scp-game-product-utility-row {
        justify-content: center;
        gap: 6px;
        padding-top: 0;
    }

    .scp-game-product-utility-row button,
    .scp-game-product-utility-row a {
        width: 31px;
        height: 31px;
        font-size: 14px;
    }
}


/* =========================================
   Product Card Rating Summary
========================================= */

.scp-product-card-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    min-height: 24px;
    flex-wrap: wrap;
}

.scp-product-card-stars {
    direction: ltr;
    display: inline-flex;
    align-items: center;
    gap: 1px;
    color: #cbd5e1;
    font-size: 14px;
    line-height: 1;
}

.scp-product-card-stars span.is-active {
    color: #f5b94c;
}

.scp-product-card-rating > span {
    color: var(--scp-muted);
    font-size: 11px;
    font-weight: 850;
}

/* =========================================
   Product Compare System
========================================= */

.scp-compare-page {
    padding: 44px 0 86px;
    background:
        radial-gradient(circle at top left, rgba(37, 99, 235, 0.07), transparent 30%),
        radial-gradient(circle at top right, rgba(212, 162, 76, 0.06), transparent 30%),
        var(--scp-bg);
    min-height: 100vh;
}

.scp-compare-hero {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: stretch;
    padding: 38px;
    border-radius: 34px;
    color: white;
    background:
        radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.14), transparent 28%),
        radial-gradient(circle at 90% 20%, rgba(212, 162, 76, 0.18), transparent 34%),
        linear-gradient(135deg, var(--scp-dark) 0%, #172554 46%, var(--scp-primary) 100%);
    box-shadow: var(--scp-shadow-lg);
    margin-bottom: 24px;
}

.scp-compare-badge {
    display: inline-grid;
    place-items: center;
    min-height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.13);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 950;
    margin-bottom: 14px;
}

.scp-compare-hero h1 {
    margin: 0;
    font-size: clamp(32px, 4vw, 56px);
    line-height: 1.08;
    letter-spacing: -0.05em;
    font-weight: 950;
}

.scp-compare-hero p {
    max-width: 780px;
    margin: 14px 0 0;
    color: rgba(255, 255, 255, 0.86);
    line-height: 1.85;
    font-size: 15px;
}

.scp-compare-count-card {
    width: 220px;
    min-width: 220px;
    border-radius: 26px;
    padding: 24px;
    background: rgba(255, 255, 255, 0.13);
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.scp-compare-count-card span {
    color: rgba(255, 255, 255, 0.76);
    font-size: 13px;
    font-weight: 850;
    margin-bottom: 8px;
}

.scp-compare-count-card strong {
    color: white;
    font-size: 38px;
    font-weight: 950;
}

.scp-compare-actions-top {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.scp-compare-actions-top a,
.scp-compare-actions-top button {
    min-height: 46px;
    border-radius: 16px;
    padding: 0 18px;
    display: inline-grid;
    place-items: center;
    border: 0;
    font-size: 13px;
    font-weight: 950;
    cursor: pointer;
}

.scp-compare-actions-top a {
    background: var(--scp-bg-soft);
    color: var(--scp-primary);
    border: 1px solid #bfdbfe;
}

.scp-compare-actions-top button {
    background: #fee2e2;
    color: #b91c1c;
}

.scp-compare-table-card {
    background: white;
    border: 1px solid var(--scp-border);
    border-radius: 30px;
    box-shadow: var(--scp-shadow-md);
    padding: 18px;
}

.scp-compare-table-wrap {
    overflow-x: auto;
    border-radius: 22px;
    border: 1px solid var(--scp-border-soft);
}

.scp-compare-table {
    width: 100%;
    min-width: 980px;
    border-collapse: collapse;
    background: white;
}

.scp-compare-table th,
.scp-compare-table td {
    min-width: 210px;
    padding: 16px;
    border-bottom: 1px solid var(--scp-border-soft);
    border-inline-end: 1px solid var(--scp-border-soft);
    vertical-align: top;
    text-align: center;
}

.scp-compare-table th:first-child,
.scp-compare-table td:first-child {
    min-width: 180px;
    position: sticky;
    inset-inline-start: 0;
    z-index: 2;
    background: #f8fafc;
    text-align: start;
}

.scp-compare-table thead th {
    background: #f8fafc;
}

.scp-compare-feature-name {
    color: var(--scp-text);
    font-size: 13px;
    font-weight: 950;
}

.scp-compare-product-head {
    position: relative;
    display: grid;
    gap: 12px;
    justify-items: center;
}

.scp-compare-product-head form {
    position: absolute;
    top: 0;
    inset-inline-end: 0;
}

.scp-compare-product-head button {
    width: 34px;
    height: 34px;
    border-radius: 13px;
    border: 0;
    background: #fee2e2;
    color: #b91c1c;
    font-size: 20px;
    font-weight: 950;
    cursor: pointer;
}

.scp-compare-product-image {
    width: 150px;
    height: 150px;
    border-radius: 24px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #ffffff, #eff6ff);
    border: 1px solid var(--scp-border);
    overflow: hidden;
    margin: 0 auto 10px;
}

.scp-compare-product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 14px;
}

.scp-compare-product-image span {
    width: 70px;
    height: 70px;
    border-radius: 22px;
    display: grid;
    place-items: center;
    background: var(--scp-primary);
    color: white;
    font-size: 30px;
    font-weight: 950;
}

.scp-compare-product-head strong {
    display: block;
    color: var(--scp-dark);
    font-size: 15px;
    font-weight: 950;
    line-height: 1.45;
}

.scp-compare-categories {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}

.scp-compare-categories span {
    display: inline-grid;
    place-items: center;
    min-height: 28px;
    border-radius: 999px;
    padding: 0 10px;
    background: var(--scp-bg-soft);
    color: var(--scp-primary);
    font-size: 11px;
    font-weight: 900;
}

.scp-compare-row-actions {
    display: grid;
    gap: 8px;
}

.scp-compare-row-actions a,
.scp-compare-row-actions button {
    min-height: 42px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    padding: 0 12px;
    border: 0;
    font-size: 12px;
    font-weight: 950;
    cursor: pointer;
}

.scp-compare-row-actions a {
    background: var(--scp-bg-soft);
    color: var(--scp-primary);
    border: 1px solid #bfdbfe;
}

.scp-compare-row-actions button {
    background: linear-gradient(135deg, var(--scp-primary), var(--scp-primary-hover));
    color: white;
}

.scp-compare-empty {
    background: white;
    border: 1px solid var(--scp-border);
    border-radius: 30px;
    padding: 54px 24px;
    text-align: center;
    box-shadow: var(--scp-shadow-md);
}

.scp-compare-empty div {
    width: 82px;
    height: 82px;
    border-radius: 28px;
    display: grid;
    place-items: center;
    margin: 0 auto 18px;
    background: var(--scp-bg-soft);
    color: var(--scp-primary);
    font-size: 38px;
    font-weight: 950;
}

.scp-compare-empty h2 {
    margin: 0;
    color: var(--scp-dark);
    font-size: 28px;
    font-weight: 950;
}

.scp-compare-empty p {
    max-width: 560px;
    margin: 12px auto 24px;
    color: var(--scp-muted);
    line-height: 1.8;
    font-weight: 800;
}

.scp-compare-empty a {
    min-height: 48px;
    display: inline-grid;
    place-items: center;
    border-radius: 17px;
    padding: 0 20px;
    background: linear-gradient(135deg, var(--scp-primary), var(--scp-primary-hover));
    color: white;
    font-size: 14px;
    font-weight: 950;
}

.scp-product-compare-form {
    position: absolute;
    top: 64px;
    inset-inline-end: 14px;
    z-index: 5;
}

.scp-product-compare-form button {
    width: 44px;
    height: 44px;
    border-radius: 16px;
    border: 0;
    display: grid;
    place-items: center;
    background: white;
    color: var(--scp-primary);
    border: 1px solid #bfdbfe;
    font-size: 19px;
    font-weight: 950;
    cursor: pointer;
    box-shadow: var(--scp-shadow-sm);
}

.scp-product-details-compare-form button {
    min-height: 52px;
    border-radius: 18px;
    padding: 0 18px;
    display: inline-grid;
    place-items: center;
    border: 1px solid #bfdbfe;
    background: var(--scp-bg-soft);
    color: var(--scp-primary);
    font-size: 14px;
    font-weight: 950;
    cursor: pointer;
}

@media (max-width: 800px) {
    .scp-compare-hero {
        flex-direction: column;
        padding: 26px 18px;
        border-radius: 26px;
    }

    .scp-compare-count-card {
        width: 100%;
        min-width: 0;
    }

    .scp-compare-table-card {
        padding: 12px;
        border-radius: 24px;
    }
}


/* =========================================
   Product Questions & Answers
========================================= */

.scp-product-questions-section {
    margin-top: 36px;
    padding: 34px;
    border-radius: 34px;
    background:
        radial-gradient(circle at top left, rgba(37, 99, 235, 0.07), transparent 30%),
        radial-gradient(circle at top right, rgba(212, 162, 76, 0.055), transparent 28%),
        #ffffff;
    border: 1px solid var(--scp-border);
    box-shadow: var(--scp-shadow-md);
}

.scp-product-questions-head {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: center;
    margin-bottom: 24px;
}

.scp-product-questions-badge {
    display: inline-grid;
    place-items: center;
    min-height: 32px;
    padding: 0 13px;
    border-radius: 999px;
    background: var(--scp-bg-soft);
    color: var(--scp-primary);
    border: 1px solid #bfdbfe;
    font-size: 12px;
    font-weight: 950;
    margin-bottom: 12px;
}

.scp-product-questions-head h2 {
    margin: 0;
    color: var(--scp-dark);
    font-size: clamp(26px, 3vw, 40px);
    font-weight: 950;
    letter-spacing: -0.045em;
}

.scp-product-questions-head p {
    max-width: 680px;
    margin: 10px 0 0;
    color: var(--scp-muted);
    line-height: 1.8;
    font-size: 14px;
    font-weight: 750;
}

.scp-product-questions-count {
    min-width: 190px;
    padding: 20px;
    border-radius: 26px;
    background: linear-gradient(135deg, var(--scp-dark), #172554);
    color: white;
    display: grid;
    place-items: center;
    text-align: center;
}

.scp-product-questions-count strong {
    font-size: 42px;
    font-weight: 950;
    color: #f5b94c;
}

.scp-product-questions-count span {
    color: rgba(255, 255, 255, 0.74);
    font-size: 12px;
    font-weight: 850;
}

.scp-product-questions-grid {
    display: grid;
    grid-template-columns: 420px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

.scp-product-question-form-card,
.scp-product-approved-questions-card {
    border-radius: 28px;
    background: #ffffff;
    border: 1px solid var(--scp-border);
    padding: 24px;
}

.scp-product-question-form-card h3,
.scp-product-approved-questions-card h3 {
    margin: 0;
    color: var(--scp-dark);
    font-size: 22px;
    font-weight: 950;
}

.scp-product-question-form-card p {
    margin: 10px 0 20px;
    color: var(--scp-muted);
    line-height: 1.75;
    font-size: 13px;
    font-weight: 800;
}

.scp-product-question-form {
    display: grid;
    gap: 14px;
}

.scp-question-field {
    display: grid;
    gap: 7px;
}

.scp-question-field label {
    color: #374151;
    font-size: 13px;
    font-weight: 950;
}

.scp-question-field input,
.scp-question-field textarea {
    width: 100%;
    border: 1px solid var(--scp-border);
    background: #f8fafc;
    border-radius: 17px;
    padding: 13px 14px;
    color: var(--scp-text);
    font-size: 14px;
    font-weight: 750;
    outline: none;
}

.scp-question-field input:focus,
.scp-question-field textarea:focus {
    background: #ffffff;
    border-color: var(--scp-primary);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.11);
}

.scp-question-field textarea {
    resize: vertical;
}

.scp-question-submit-btn {
    min-height: 50px;
    border: 0;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--scp-primary), var(--scp-primary-hover));
    color: white;
    font-size: 14px;
    font-weight: 950;
    cursor: pointer;
    box-shadow: 0 16px 34px rgba(37, 99, 235, 0.18);
}

.scp-product-approved-questions-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.scp-product-approved-questions-head span {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--scp-dark), #172554);
    color: #f5b94c;
    font-size: 14px;
    font-weight: 950;
}

.scp-approved-questions-list {
    display: grid;
    gap: 12px;
}

.scp-approved-question-item {
    padding: 16px;
    border-radius: 22px;
    background: #ffffff;
    border: 1px solid var(--scp-border);
}

.scp-approved-question-top {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    margin-bottom: 14px;
}

.scp-question-avatar {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #f7d37a, #d4a24c);
    color: #111827;
    font-size: 20px;
    font-weight: 950;
}

.scp-approved-question-top strong {
    display: block;
    color: var(--scp-dark);
    font-size: 14px;
    font-weight: 950;
    margin-bottom: 4px;
}

.scp-approved-question-top small {
    color: #94a3b8;
    font-size: 12px;
    font-weight: 850;
}

.scp-question-text,
.scp-answer-text {
    border-radius: 18px;
    padding: 14px;
    margin-top: 10px;
}

.scp-question-text {
    background: #f8fafc;
    border: 1px solid var(--scp-border);
}

.scp-answer-text {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
}

.scp-question-text span,
.scp-answer-text span {
    display: block;
    color: var(--scp-primary);
    font-size: 11px;
    font-weight: 950;
    margin-bottom: 7px;
}

.scp-question-text p,
.scp-answer-text p {
    margin: 0;
    color: #475569;
    line-height: 1.85;
    font-size: 13px;
    font-weight: 750;
}

.scp-answer-pending {
    margin-top: 10px;
    border-radius: 18px;
    padding: 13px;
    background: #fffbeb;
    color: #92400e;
    border: 1px solid #fde68a;
    font-size: 12px;
    font-weight: 900;
}

.scp-questions-empty {
    text-align: center;
    border-radius: 24px;
    padding: 34px 18px;
    background: white;
    border: 1px dashed #bfdbfe;
}

.scp-questions-empty div {
    width: 62px;
    height: 62px;
    border-radius: 22px;
    display: grid;
    place-items: center;
    margin: 0 auto 12px;
    background: linear-gradient(135deg, var(--scp-dark), #172554);
    color: #f5b94c;
    font-size: 28px;
    font-weight: 950;
}

.scp-questions-empty h4 {
    margin: 0;
    color: var(--scp-dark);
    font-size: 20px;
    font-weight: 950;
}

.scp-questions-empty p {
    max-width: 430px;
    margin: 10px auto 0;
    color: var(--scp-muted);
    line-height: 1.8;
    font-size: 13px;
    font-weight: 800;
}

@media (max-width: 980px) {
    .scp-product-questions-head {
        flex-direction: column;
        align-items: stretch;
    }

    .scp-product-questions-count {
        width: 100%;
    }

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

@media (max-width: 620px) {
    .scp-product-questions-section {
        padding: 22px 16px;
        border-radius: 26px;
    }

    .scp-product-question-form-card,
    .scp-product-approved-questions-card {
        padding: 18px;
        border-radius: 24px;
    }
}


/* =========================================
   Advanced Product Filters
========================================= */

.scp-products-toolbar {
    align-items: stretch;
}

.scp-price-filter {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    min-width: 220px;
}

.scp-price-filter input {
    width: 100%;
    min-height: 48px;
    border: 1px solid var(--scp-border);
    border-radius: 16px;
    background: #ffffff;
    color: var(--scp-text);
    padding: 0 13px;
    font-size: 13px;
    font-weight: 850;
    outline: none;
}

.scp-price-filter input:focus {
    border-color: var(--scp-primary);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.10);
}

.scp-filter-check {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 0 14px;
    border-radius: 16px;
    border: 1px solid var(--scp-border);
    background: #ffffff;
    color: var(--scp-text);
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
    white-space: nowrap;
}

.scp-filter-check input {
    width: 16px;
    height: 16px;
    accent-color: var(--scp-primary);
}

@media (max-width: 850px) {
    .scp-price-filter {
        grid-template-columns: 1fr;
        min-width: 100%;
    }

    .scp-filter-check {
        width: 100%;
        justify-content: center;
    }
}


/* =========================================
   Active Filters Bar
========================================= */

.scp-active-filters {
    margin-bottom: 18px;
    padding: 16px;
    border-radius: 22px;
    background: #ffffff;
    border: 1px solid var(--scp-border);
    box-shadow: var(--scp-shadow-sm);
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.scp-active-filters-title {
    color: var(--scp-dark);
    font-size: 13px;
    font-weight: 950;
}

.scp-active-filters-list {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}

.scp-active-filter-chip {
    min-height: 36px;
    padding: 0 12px;
    border-radius: 999px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: var(--scp-primary);
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
}

.scp-active-filter-chip strong {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: var(--scp-primary);
    color: #ffffff;
    font-size: 13px;
    line-height: 1;
}

.scp-active-filter-clear {
    min-height: 36px;
    padding: 0 13px;
    border-radius: 999px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #c2410c;
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 950;
    text-decoration: none;
}

.scp-active-filter-chip:hover,
.scp-active-filter-clear:hover {
    transform: translateY(-1px);
}

@media (max-width: 700px) {
    .scp-active-filters {
        align-items: stretch;
        flex-direction: column;
    }

    .scp-active-filters-list {
        width: 100%;
    }

    .scp-active-filter-chip,
    .scp-active-filter-clear {
        flex: 1;
        justify-content: center;
    }
}


/* =========================================
   Smart Product Badges
========================================= */

.scp-product-badges {
    position: absolute;
    top: 14px;
    inset-inline-start: 14px;
    z-index: 8;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    max-width: calc(100% - 28px);
}

.scp-smart-badge {
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 11px;
    font-weight: 950;
    line-height: 1;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.22);
}

.scp-smart-badge.sale {
    background: linear-gradient(135deg, #ef4444, #b91c1c);
}

.scp-smart-badge.new {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
}

.scp-smart-badge.featured {
    background: linear-gradient(135deg, #f5b94c, #b7791f);
    color: #111827;
}

.scp-smart-badge.digital {
    background: linear-gradient(135deg, #7c3aed, #5b21b6);
}

.scp-smart-badge.service {
    background: linear-gradient(135deg, #0891b2, #0e7490);
}

.scp-smart-badge.out-of-stock {
    background: linear-gradient(135deg, #111827, #374151);
}

.scp-smart-badge.top-rated {
    background: linear-gradient(135deg, #16a34a, #15803d);
}

.scp-product-main-image,
.scp-product-image {
    position: relative;
}

.scp-product-main-image .scp-product-badges {
    top: 18px;
    inset-inline-start: 18px;
}

.scp-product-main-image .scp-smart-badge {
    min-height: 32px;
    padding: 0 13px;
    font-size: 12px;
}

@media (max-width: 640px) {
    .scp-product-badges {
        top: 10px;
        inset-inline-start: 10px;
        gap: 5px;
    }

    .scp-smart-badge {
        min-height: 24px;
        padding: 0 8px;
        font-size: 10px;
    }
}


/* =========================================
   Stock Status System
========================================= */

.scp-stock-status {
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 30px;
    padding: 0 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 950;
    border: 1px solid transparent;
}

.scp-stock-status span {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    display: block;
}

.scp-stock-status.available {
    background: #ecfdf5;
    color: #047857;
    border-color: #a7f3d0;
}

.scp-stock-status.available span {
    background: #10b981;
}

.scp-stock-status.low {
    background: #fffbeb;
    color: #b45309;
    border-color: #fde68a;
}

.scp-stock-status.low span {
    background: #f59e0b;
}

.scp-stock-status.out {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fecaca;
}

.scp-stock-status.out span {
    background: #ef4444;
}

.scp-stock-status.unknown {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

.scp-stock-status.unknown span {
    background: #2563eb;
}

.scp-btn-small.primary:disabled,
.scp-detail-add-to-cart:disabled,
.scp-detail-buy-now:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    background: linear-gradient(135deg, #9ca3af, #6b7280) !important;
    box-shadow: none !important;
}

.scp-detail-purchase-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.scp-detail-purchase-actions .scp-detail-add-to-cart,
.scp-detail-purchase-actions .scp-detail-buy-now {
    width: 100%;
    min-height: 52px;
    border: 0;
    border-radius: 16px;
    color: #fff;
    font-weight: 950;
    cursor: pointer;
}

.scp-detail-buy-now {
    background: linear-gradient(135deg, #f59e0b, #f97316);
    box-shadow: 0 14px 28px rgba(249, 115, 22, .24);
}

@media (max-width: 560px) {
    .scp-detail-purchase-actions {
        grid-template-columns: 1fr;
    }
}

/* Homepage gift cards, aligned with the gaming recharge cards. */
.scp-gift-card-section {
    background:
        radial-gradient(circle at 88% 8%, rgba(168, 85, 247, .12), transparent 30%),
        radial-gradient(circle at 12% 82%, rgba(236, 72, 153, .10), transparent 28%),
        linear-gradient(180deg, #fff, #faf5ff);
}

.scp-gift-card-card {
    --scp-game-bg: linear-gradient(145deg, #312e81, #7e22ce 55%, #db2777);
    border-color: rgba(168, 85, 247, .28);
}

.scp-gift-card-grid {
    align-items: stretch;
}

.scp-gift-card-grid .scp-gift-card-card {
    isolation: isolate;
}

.scp-gift-card-grid .scp-gift-card-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(180deg, rgba(15, 6, 35, .16), rgba(15, 6, 35, .9));
    pointer-events: none;
}

.scp-gift-card-card:hover {
    border-color: rgba(168, 85, 247, .58);
    box-shadow: 0 28px 62px rgba(88, 28, 135, .22);
}

.scp-gift-card-card .scp-game-card-glow {
    background: radial-gradient(circle, rgba(217, 70, 239, .58), transparent 68%);
}

.scp-gift-card-card .scp-game-card-media img {
    padding: 4px;
    border-radius: 18px;
    object-fit: contain;
}

.scp-gift-card-card .scp-game-card-content,
.scp-gift-card-card > b,
.scp-gift-card-card .scp-game-card-glow,
.scp-gift-card-card .scp-game-card-media {
    z-index: 1;
}

html.scp-reseller-modal-open .scp-floating-whatsapp {
    display: none !important;
}

.scp-gift-card-price {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.scp-gift-card-price > span:last-of-type {
    padding: 5px 9px;
    border-radius: 999px;
    color: #fff;
    background: rgba(255, 255, 255, .15);
}

.scp-gift-category-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.scp-gift-category-card {
    min-height: 270px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px 18px;
    border: 1px solid rgba(148, 163, 184, .26);
    border-radius: 26px;
    background: linear-gradient(150deg, rgba(255, 255, 255, .98), rgba(250, 245, 255, .96));
    color: #172033;
    text-align: center;
    box-shadow: 0 14px 35px rgba(76, 29, 149, .07);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.scp-gift-category-card:hover {
    transform: translateY(-5px);
    border-color: rgba(147, 51, 234, .48);
    box-shadow: 0 24px 48px rgba(88, 28, 135, .16);
}

.scp-gift-category-icon {
    width: 82px;
    height: 82px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(168, 85, 247, .18);
    border-radius: 24px;
    background: linear-gradient(145deg, #f5f3ff, #fdf2f8);
    font-size: 42px;
    box-shadow: inset 0 0 0 5px rgba(255, 255, 255, .75);
}

.scp-gift-category-icon.has-image {
    padding: 8px;
    background: #fff;
}

.scp-gift-category-icon img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    border-radius: 16px;
}

.scp-gift-category-card h3 {
    margin: 4px 0 0;
    font-size: 19px;
    line-height: 1.35;
}

.scp-gift-category-card p {
    min-height: 38px;
    margin: 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.55;
}

.scp-gift-category-card small {
    color: #7e22ce;
    font-size: 12px;
    font-weight: 800;
}

.scp-gift-category-card b {
    margin-top: auto;
    color: #2563eb;
    font-size: 13px;
}

.scp-gift-cards-page {
    min-height: 70vh;
    padding: 34px 0 80px;
    background:
        radial-gradient(circle at 90% 10%, rgba(168, 85, 247, .12), transparent 28%),
        linear-gradient(180deg, #fff, #f8fafc);
}

.scp-gift-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    color: #64748b;
    font-size: 13px;
}

.scp-gift-breadcrumbs a:hover {
    color: #7e22ce;
}

.scp-gift-cards-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: clamp(28px, 5vw, 54px);
    border: 1px solid rgba(168, 85, 247, .18);
    border-radius: 34px;
    background: linear-gradient(135deg, #111827 0%, #312e81 54%, #7e22ce 100%);
    color: #fff;
    box-shadow: 0 30px 70px rgba(49, 46, 129, .22);
}

.scp-gift-cards-hero span {
    color: #d8b4fe;
    font-size: 13px;
    font-weight: 900;
}

.scp-gift-cards-hero h1 {
    margin: 8px 0 12px;
    font-size: clamp(32px, 5vw, 56px);
    line-height: 1.08;
}

.scp-gift-cards-hero p {
    max-width: 680px;
    margin: 0;
    color: #e2e8f0;
    line-height: 1.8;
}

.scp-gift-cards-hero-icon {
    flex: 0 0 auto;
    width: 112px;
    height: 112px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 32px;
    background: rgba(255, 255, 255, .12);
    font-size: 58px;
}

.scp-gift-cards-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin: 38px 0 22px;
}

.scp-gift-cards-heading h2 {
    margin: 0 0 6px;
    font-size: clamp(24px, 4vw, 34px);
}

.scp-gift-cards-heading p {
    margin: 0;
    color: #64748b;
}

.scp-gift-cards-heading > a,
.scp-gift-back-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 16px;
    border: 1px solid #c4b5fd;
    border-radius: 999px;
    color: #6d28d9;
    background: #fff;
    font-size: 13px;
    font-weight: 900;
}

.scp-gift-back-link {
    margin-top: 24px;
}

@media (max-width: 980px) {
    .scp-gift-category-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .scp-gift-category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .scp-gift-category-card {
        min-height: 225px;
        padding: 18px 12px;
        border-radius: 20px;
    }

    .scp-gift-category-icon {
        width: 66px;
        height: 66px;
        border-radius: 19px;
        font-size: 34px;
    }

    .scp-gift-category-card h3 {
        font-size: 15px;
    }

    .scp-gift-category-card p {
        min-height: 0;
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        font-size: 12px;
    }

    .scp-gift-cards-page {
        padding-top: 20px;
    }

    .scp-gift-cards-hero {
        padding: 26px 22px;
        border-radius: 26px;
    }

    .scp-gift-cards-hero-icon {
        width: 68px;
        height: 68px;
        border-radius: 20px;
        font-size: 36px;
    }

    .scp-gift-cards-heading {
        align-items: stretch;
        flex-direction: column;
        margin-top: 28px;
    }
}

@media (max-width: 420px) {
    .scp-gift-category-card {
        min-height: 210px;
    }

    .scp-gift-category-card small {
        display: none;
    }

    .scp-gift-cards-hero-icon {
        display: none;
    }
}


.money-ltr {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;
    white-space: nowrap;
    font-family: dejavusans, sans-serif;
}


/* =========================================================
   Stage 75 Storefront Mobile Header Final Polish
========================================================= */
.scp-header-action,
.scp-nav a,
.scp-search button {
    transition: transform .18s ease, box-shadow .18s ease, color .18s ease, background .18s ease;
}

.scp-header-action:hover {
    transform: translateY(-1px);
    box-shadow: var(--scp-shadow-sm);
}

.scp-nav::-webkit-scrollbar {
    height: 6px;
}

.scp-nav::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 999px;
}

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

    .scp-topbar {
        min-height: auto;
        gap: 10px;
        font-size: 12px;
    }

    .scp-main-header {
        min-height: auto;
        display: grid;
        grid-template-columns: 1fr;
        padding: 12px 0;
    }

    .scp-logo {
        justify-content: center;
        text-align: center;
    }

    .scp-search {
        width: 100%;
        height: 46px;
        border-radius: 16px;
    }

    .scp-search input {
        min-width: 0;
        font-size: 13px;
        padding-inline: 14px;
    }

    .scp-search button {
        padding-inline: 18px;
        min-width: 76px;
    }

    .scp-header-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .scp-header-action {
        min-width: 0;
        width: 100%;
        min-height: 48px;
        height: auto;
        border-radius: 15px;
    }

    .scp-header-action span {
        font-size: 16px;
    }

    .scp-header-action small {
        font-size: 10px;
    }

    .scp-nav {
        min-height: 46px;
        gap: 16px;
        padding: 0 2px 4px;
        scroll-snap-type: x proximity;
    }

    .scp-nav a,
    .scp-nav form button {
        font-size: 13px;
        scroll-snap-align: start;
        white-space: nowrap;
    }
}

@media (max-width: 420px) {
    .scp-header-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .scp-logo small {
        display: none;
    }
}


/* Stage 77 - Move logout from top nav to account quick actions */
.scp-account-logout-form {
    margin: 0;
}

.scp-account-actions-list .scp-account-logout-btn {
    width: 100%;
    min-height: 52px;
    border-radius: 18px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    font-size: 13px;
    font-weight: 950;
    cursor: pointer;
    font-family: inherit;
}

.scp-account-actions-list .scp-account-logout-btn span {
    width: 34px;
    height: 34px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: #ffffff;
}

.scp-account-actions-list .scp-account-logout-btn:hover {
    background: #fee2e2;
    border-color: #fca5a5;
}

@media (max-width: 700px) {
    .scp-account-actions-list .scp-account-logout-btn {
        justify-content: flex-start;
    }
}

/* =========================================================
   Stage 78: Multilingual Header Auth + Account Logout Fix
   Copy this block to the END of public/css/storefront/design-overrides.css
========================================================= */

.scp-header-auth-link small,
.scp-header-auth-primary small {
    font-weight: 950;
}

.scp-header-auth-primary {
    background: linear-gradient(135deg, #f7d37a, #d4a24c) !important;
    color: #111827 !important;
    border-color: rgba(212, 162, 76, 0.55) !important;
    box-shadow: 0 12px 26px rgba(212, 162, 76, 0.16);
}

.scp-header-auth-primary span,
.scp-header-auth-primary small {
    color: #111827 !important;
}

.scp-nav-login-link {
    color: var(--scp-primary) !important;
}

.scp-nav-register-link {
    min-height: 34px;
    padding: 0 13px;
    border-radius: 999px;
    background: linear-gradient(135deg, #f7d37a, #d4a24c);
    color: #111827 !important;
    display: inline-flex;
    align-items: center;
}

.scp-account-logout-form {
    margin: 0;
}

.scp-account-logout-action {
    width: 100%;
    min-height: 58px;
    border-radius: 18px;
    padding: 0 14px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    border: 1px solid #fecaca;
    background: #fff1f2;
    color: #991b1b;
    cursor: pointer;
    text-align: start;
    font: inherit;
}

.scp-account-logout-action span {
    width: 34px;
    height: 34px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: #ffffff;
}

.scp-account-logout-action strong {
    display: block;
    color: #991b1b;
    font-size: 13px;
    font-weight: 950;
}

.scp-account-logout-action small {
    display: block;
    color: #b91c1c;
    font-size: 11px;
    font-weight: 800;
    margin-top: 3px;
}

.scp-account-logout-action:hover {
    border-color: #fca5a5;
    background: #ffe4e6;
    transform: translateY(-1px);
}

@media (max-width: 1100px) {
    .scp-header-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
    }

    .scp-header-action {
        min-width: 0;
        width: 100%;
    }
}

@media (max-width: 640px) {
    .scp-header-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .scp-header-actions .scp-header-action:last-child {
        grid-column: 1 / -1;
    }

    .scp-nav-register-link {
        width: max-content;
    }
}


.scp-account-logout-action {
    display: grid !important;
    grid-template-columns: 42px 1fr !important;
    grid-template-rows: auto auto !important;
    column-gap: 12px !important;
    row-gap: 2px !important;
    align-items: center !important;
    min-height: 64px !important;
    padding: 12px 16px !important;
    text-align: start !important;
}

.scp-account-logout-action span {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 14px !important;
    display: grid !important;
    place-items: center !important;
    background: #ffffff !important;
    font-size: 16px !important;
}

.scp-account-logout-action strong {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: block !important;
    color: #991b1b !important;
    font-size: 14px !important;
    font-weight: 950 !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
}

.scp-account-logout-action small {
    grid-column: 2 !important;
    grid-row: 2 !important;
    display: block !important;
    color: #b91c1c !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
}

html[dir="rtl"] .scp-account-logout-action {
    text-align: right !important;
}

html[dir="ltr"] .scp-account-logout-action {
    text-align: left !important;
}



/* =========================================================
   Stage 79 - Storefront Settings + Dynamic Slider
   Copy this block to the end of public/css/storefront/design-overrides.css
========================================================= */

.scp-logo-image {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    object-fit: contain;
    background: #ffffff;
    border: 1px solid var(--scp-border, #e2e8f0);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
    padding: 5px;
}

.scp-dynamic-slider {
    display: grid;
    gap: 18px;
}

.scp-dynamic-slide {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
    gap: 28px;
    align-items: center;
    min-height: 430px;
    padding: clamp(24px, 4vw, 48px);
    border-radius: 38px;
    overflow: hidden;
    color: #ffffff;
    background:
        radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.14), transparent 28%),
        radial-gradient(circle at 90% 20%, color-mix(in srgb, var(--scp-accent, #d4a24c) 24%, transparent), transparent 34%),
        linear-gradient(135deg, var(--scp-dark, #0b1120) 0%, #172554 48%, var(--scp-primary, #2563eb) 100%);
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: var(--scp-shadow-lg, 0 28px 80px rgba(15, 23, 42, 0.14));
}

.scp-dynamic-slide-content {
    max-width: 760px;
}

.scp-dynamic-slide-content h1 {
    margin: 0;
    font-size: clamp(36px, 5vw, 76px);
    line-height: 1.05;
    font-weight: 950;
    letter-spacing: -0.06em;
}

.scp-dynamic-slide-content p {
    max-width: 680px;
    margin: 18px 0 0;
    color: rgba(255, 255, 255, 0.84);
    line-height: 1.9;
    font-size: 16px;
    font-weight: 700;
}

.scp-dynamic-slide-media {
    min-height: 300px;
    display: grid;
    place-items: center;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.11);
    border: 1px solid rgba(255, 255, 255, 0.15);
    overflow: hidden;
}

.scp-dynamic-slide-media img {
    width: 100%;
    height: 100%;
    max-height: 360px;
    object-fit: cover;
}

@media (max-width: 900px) {
    .scp-dynamic-slide {
        grid-template-columns: 1fr;
        min-height: auto;
        border-radius: 30px;
    }

    .scp-dynamic-slide-media {
        min-height: 220px;
    }
}

@media (max-width: 640px) {
    .scp-logo-image {
        width: 42px;
        height: 42px;
    }

    .scp-dynamic-slide {
        padding: 24px 18px;
        border-radius: 26px;
    }

    .scp-dynamic-slide-content h1 {
        font-size: 34px;
    }

    .scp-dynamic-slide-content p {
        font-size: 14px;
    }
}


/* =========================================================
   Stage 81: Storefront Dynamic Slider Autoplay
   Copy this block to the END of public/css/storefront/design-overrides.css
========================================================= */

.scp-dynamic-slider {
    position: relative;
    overflow: hidden;
    border-radius: 34px;
    min-height: 520px;
}

.scp-dynamic-slide {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
    gap: 34px;
    align-items: center;
    min-height: 520px;
    padding: 46px;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    inset: 0;
    transform: translateX(28px);
    transition: opacity .55s ease, transform .55s ease;
}

html[dir="rtl"] .scp-dynamic-slide {
    transform: translateX(-28px);
}

.scp-dynamic-slide.is-active {
    opacity: 1;
    pointer-events: auto;
    position: relative;
    transform: translateX(0);
}

.scp-dynamic-slide-content {
    position: relative;
    z-index: 3;
}

.scp-dynamic-slide-media {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
}

.scp-dynamic-slide-media img {
    width: 100%;
    max-height: 430px;
    object-fit: contain;
    border-radius: 30px;
    filter: drop-shadow(0 28px 55px rgba(0, 0, 0, .28));
}

.scp-slider-arrow {
    position: absolute;
    top: 50%;
    z-index: 10;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: rgba(15, 23, 42, .55);
    color: #ffffff;
    font-size: 34px;
    line-height: 1;
    cursor: pointer;
    transform: translateY(-50%);
    backdrop-filter: blur(12px);
    box-shadow: 0 16px 34px rgba(0, 0, 0, .20);
}

.scp-slider-arrow:hover {
    background: rgba(37, 99, 235, .85);
}

.scp-slider-prev {
    inset-inline-start: 18px;
}

.scp-slider-next {
    inset-inline-end: 18px;
}

.scp-slider-dots {
    position: absolute;
    z-index: 11;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 9px;
    align-items: center;
    justify-content: center;
}

.scp-slider-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    border: 0;
    background: rgba(255, 255, 255, .45);
    cursor: pointer;
    transition: width .2s ease, background .2s ease;
}

.scp-slider-dot.is-active {
    width: 34px;
    background: linear-gradient(135deg, #f7d37a, #d4a24c);
}

@media (max-width: 900px) {
    .scp-dynamic-slider {
        min-height: auto;
        border-radius: 28px;
    }

    .scp-dynamic-slide {
        grid-template-columns: 1fr;
        min-height: auto;
        padding: 34px 24px 76px;
        gap: 24px;
    }

    .scp-dynamic-slide-media img {
        max-height: 300px;
    }

    .scp-slider-arrow {
        top: auto;
        bottom: 18px;
        width: 40px;
        height: 40px;
        font-size: 28px;
        transform: none;
    }

    .scp-slider-prev {
        inset-inline-start: 18px;
    }

    .scp-slider-next {
        inset-inline-end: 18px;
    }

    .scp-slider-dots {
        bottom: 28px;
    }
}

@media (max-width: 540px) {
    .scp-dynamic-slide {
        padding: 26px 18px 82px;
    }

    .scp-dynamic-slide-media {
        order: -1;
    }

    .scp-dynamic-slide-media img {
        max-height: 230px;
    }
}

/* =========================================================
   Canonical responsive header and navigation
   Keep all mobile header/menu behavior in this final block.
========================================================= */
.scp-mobile-menu-toggle,
.scp-mobile-menu-head,
.scp-mobile-menu-backdrop {
    display: none !important;
}

@media (min-width: 1025px) {
    .scp-nav[data-scp-mobile-menu] {
        position: static !important;
        inset: auto !important;
        width: auto !important;
        height: auto !important;
        max-height: none !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 22px !important;
        padding: 0 !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        background: transparent !important;
        border: 0 !important;
        border-top: 1px solid #eef2f7 !important;
        box-shadow: none !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    .scp-nav[data-scp-mobile-menu] > a {
        width: auto !important;
        min-height: 48px !important;
        display: inline-flex !important;
        align-items: center !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        white-space: nowrap !important;
    }

    .scp-nav[data-scp-mobile-menu] > a::after {
        content: none !important;
        display: none !important;
    }
}

@media (max-width: 1024px) {
    .scp-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 9000 !important;
        background: rgba(255, 255, 255, .98) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: 0 8px 28px rgba(15, 23, 42, .08) !important;
    }

    .scp-header > .scp-container {
        width: min(100% - 24px, 1320px) !important;
    }

    .scp-topbar {
        min-height: 34px !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 10px !important;
        padding-inline: 10px !important;
        border-radius: 0 0 14px 14px !important;
        overflow: hidden !important;
    }

    .scp-topbar-text {
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: 11px !important;
    }

    .scp-language-switcher {
        flex: 0 0 auto !important;
    }

    .scp-language-switcher a {
        min-width: 29px !important;
        height: 26px !important;
        padding: 0 6px !important;
        font-size: 10px !important;
    }

    .scp-main-header {
        min-height: 0 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 46px !important;
        align-items: center !important;
        gap: 10px 12px !important;
        padding: 10px 0 12px !important;
    }

    .scp-logo {
        grid-column: 1 !important;
        grid-row: 1 !important;
        min-width: 0 !important;
        justify-content: flex-start !important;
        text-align: start !important;
        gap: 9px !important;
    }

    .scp-logo-mark,
    .scp-logo-image {
        width: 42px !important;
        height: 42px !important;
        flex: 0 0 42px !important;
        border-radius: 13px !important;
    }

    .scp-logo strong {
        display: block !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: 15px !important;
    }

    .scp-logo small {
        display: block !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: 10px !important;
    }

    .scp-mobile-menu-toggle {
        grid-column: 2 !important;
        grid-row: 1 !important;
        width: 46px !important;
        height: 46px !important;
        min-height: 46px !important;
        display: grid !important;
        place-items: center !important;
        padding: 0 !important;
        border: 1px solid rgba(255, 255, 255, .14) !important;
        border-radius: 14px !important;
        background: linear-gradient(145deg, var(--scp-dark), #172554) !important;
        color: #fff !important;
        box-shadow: 0 8px 20px rgba(15, 23, 42, .16) !important;
        cursor: pointer !important;
    }

    .scp-mobile-menu-icon {
        width: 20px !important;
        display: grid !important;
        gap: 4px !important;
    }

    .scp-mobile-menu-icon i {
        width: 20px !important;
        height: 2px !important;
        display: block !important;
        border-radius: 999px !important;
        background: currentColor !important;
        transition: transform .2s ease, opacity .2s ease !important;
    }

    .scp-mobile-menu-toggle small {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
    }

    .scp-mobile-menu-toggle[aria-expanded="true"] .scp-mobile-menu-icon i:nth-child(1) {
        transform: translateY(6px) rotate(45deg) !important;
    }

    .scp-mobile-menu-toggle[aria-expanded="true"] .scp-mobile-menu-icon i:nth-child(2) {
        opacity: 0 !important;
    }

    .scp-mobile-menu-toggle[aria-expanded="true"] .scp-mobile-menu-icon i:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg) !important;
    }

    .scp-search {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        width: 100% !important;
        height: 44px !important;
        order: initial !important;
        border-radius: 14px !important;
        box-shadow: none !important;
    }

    .scp-search input {
        min-width: 0 !important;
        font-size: 13px !important;
    }

    .scp-search button {
        min-width: 70px !important;
        padding-inline: 14px !important;
        font-size: 12px !important;
    }

    .scp-header-actions {
        grid-column: 1 / -1 !important;
        grid-row: 3 !important;
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
        order: initial !important;
    }

    .scp-header-action {
        width: 100% !important;
        min-width: 0 !important;
        height: 42px !important;
        min-height: 42px !important;
        grid-template-columns: auto auto !important;
        place-content: center !important;
        gap: 6px !important;
        border-radius: 13px !important;
        box-shadow: none !important;
    }

    .scp-header-action span {
        font-size: 16px !important;
    }

    .scp-header-action small {
        max-width: 82px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: 10px !important;
    }

    body.scp-mobile-menu-open {
        overflow: hidden !important;
        height: 100dvh !important;
        touch-action: none !important;
    }

    .scp-mobile-menu-backdrop {
        position: fixed !important;
        inset: 0 !important;
        z-index: 99990 !important;
        display: block !important;
        background: rgba(2, 6, 23, .56) !important;
        backdrop-filter: blur(2px) !important;
        -webkit-backdrop-filter: blur(2px) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: opacity .22s ease, visibility .22s ease !important;
    }

    .scp-mobile-menu-open .scp-mobile-menu-backdrop {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    .scp-nav[data-scp-mobile-menu] {
        position: fixed !important;
        inset-block: 0 !important;
        inset-inline-start: 0 !important;
        inset-inline-end: auto !important;
        z-index: 99999 !important;
        width: min(86vw, 360px) !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: none !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 4px !important;
        padding: max(18px, env(safe-area-inset-top)) 14px max(24px, env(safe-area-inset-bottom)) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        background: #fff !important;
        background-image: linear-gradient(180deg, #f8fbff 0, #fff 160px) !important;
        border: 0 !important;
        border-inline-end: 1px solid #e5e7eb !important;
        border-radius: 0 !important;
        box-shadow: 28px 0 70px rgba(2, 6, 23, .28) !important;
        transform: translateX(-104%) !important;
        opacity: 1 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: transform .24s ease, visibility .24s ease !important;
        scroll-snap-type: none !important;
    }

    html[dir="rtl"] .scp-nav[data-scp-mobile-menu] {
        inset-inline-start: auto !important;
        inset-inline-end: 0 !important;
        border-inline-start: 1px solid #e5e7eb !important;
        border-inline-end: 0 !important;
        box-shadow: -28px 0 70px rgba(2, 6, 23, .28) !important;
        transform: translateX(104%) !important;
    }

    .scp-mobile-menu-open .scp-nav[data-scp-mobile-menu],
    html[dir="rtl"] .scp-mobile-menu-open .scp-nav[data-scp-mobile-menu] {
        transform: translateX(0) !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    .scp-nav[data-scp-mobile-menu] .scp-mobile-menu-head {
        position: sticky !important;
        top: -18px !important;
        z-index: 3 !important;
        min-height: 64px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        margin: 0 0 8px !important;
        padding: 8px 2px 12px !important;
        border-bottom: 1px solid #e2e8f0 !important;
        background: rgba(248, 251, 255, .96) !important;
        backdrop-filter: blur(10px) !important;
    }

    .scp-nav[data-scp-mobile-menu] .scp-mobile-menu-head strong {
        color: #0f172a !important;
        font-size: 17px !important;
        font-weight: 900 !important;
    }

    .scp-nav[data-scp-mobile-menu] .scp-mobile-menu-head button {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        display: grid !important;
        place-items: center !important;
        padding: 0 !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 13px !important;
        background: #fff !important;
        color: #334155 !important;
        font-size: 25px !important;
        line-height: 1 !important;
        box-shadow: 0 4px 12px rgba(15, 23, 42, .06) !important;
    }

    .scp-nav[data-scp-mobile-menu] > a {
        width: 100% !important;
        min-height: 48px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        padding: 0 12px !important;
        border: 0 !important;
        border-bottom: 1px solid #eef2f7 !important;
        border-radius: 11px !important;
        background: transparent !important;
        color: #1e293b !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        text-decoration: none !important;
        box-shadow: none !important;
        white-space: normal !important;
        transform: none !important;
    }

    .scp-nav[data-scp-mobile-menu] > a:hover,
    .scp-nav[data-scp-mobile-menu] > a:focus-visible {
        background: #eff6ff !important;
        color: var(--scp-primary) !important;
        outline: none !important;
    }

    .scp-nav[data-scp-mobile-menu] > a::after {
        content: "\203A" !important;
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        display: grid !important;
        place-items: center !important;
        border-radius: 8px !important;
        background: #f1f5f9 !important;
        color: #64748b !important;
        font-size: 18px !important;
        font-weight: 800 !important;
    }

    html[dir="rtl"] .scp-nav[data-scp-mobile-menu] > a::after {
        content: "\2039" !important;
    }

    .scp-nav[data-scp-mobile-menu] > a.scp-nav-register-link {
        margin-top: 8px !important;
        border: 0 !important;
        background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
        color: #111827 !important;
    }

    .scp-nav[data-scp-mobile-menu] > a.scp-nav-login-link {
        background: #eff6ff !important;
        color: #1d4ed8 !important;
    }
}

@media (max-width: 420px) {
    .scp-header > .scp-container {
        width: calc(100% - 18px) !important;
    }

    .scp-header-action small {
        max-width: 66px !important;
    }

    .scp-nav[data-scp-mobile-menu] {
        width: min(90vw, 340px) !important;
        padding-inline: 12px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .scp-nav[data-scp-mobile-menu],
    .scp-mobile-menu-backdrop,
    .scp-mobile-menu-icon i {
        transition: none !important;
    }
}
/* =========================================================
   Stage 82: Trusted Brands Moving Carousel
   Copy this block to the END of public/css/storefront/design-overrides.css
========================================================= */

.scp-brand-carousel {
    position: relative;
    overflow: hidden;
    border-radius: 30px;
    padding: 8px 0;
    mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.scp-brand-carousel::before,
.scp-brand-carousel::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 90px;
    z-index: 2;
    pointer-events: none;
}

.scp-brand-carousel::before {
    inset-inline-start: 0;
    background: linear-gradient(to right, rgba(248, 250, 252, 1), rgba(248, 250, 252, 0));
}

html[dir="rtl"] .scp-brand-carousel::before {
    background: linear-gradient(to left, rgba(248, 250, 252, 1), rgba(248, 250, 252, 0));
}

.scp-brand-carousel::after {
    inset-inline-end: 0;
    background: linear-gradient(to left, rgba(248, 250, 252, 1), rgba(248, 250, 252, 0));
}

html[dir="rtl"] .scp-brand-carousel::after {
    background: linear-gradient(to right, rgba(248, 250, 252, 1), rgba(248, 250, 252, 0));
}

.scp-brand-track {
    display: flex;
    align-items: stretch;
    gap: 16px;
    width: max-content;
    animation: scpBrandMarquee 34s linear infinite;
    will-change: transform;
}

html[dir="rtl"] .scp-brand-track {
    animation-name: scpBrandMarqueeRtl;
}

.scp-brand-carousel:hover .scp-brand-track {
    animation-play-state: paused;
}

.scp-brand-carousel-card {
    width: 210px;
    min-width: 210px;
    min-height: 118px;
    display: grid;
    place-items: center;
    text-align: center;
    text-decoration: none;
}

.scp-brand-carousel-card strong {
    color: var(--scp-dark);
    font-size: 18px;
    font-weight: 950;
    line-height: 1.2;
}

.scp-brand-carousel-card img {
    max-width: 150px;
    max-height: 64px;
    object-fit: contain;
}

@keyframes scpBrandMarquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@keyframes scpBrandMarqueeRtl {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(50%);
    }
}

@media (max-width: 760px) {
    .scp-brand-carousel {
        border-radius: 24px;
        mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
    }

    .scp-brand-carousel::before,
    .scp-brand-carousel::after {
        width: 38px;
    }

    .scp-brand-track {
        gap: 10px;
        animation-duration: 24s;
    }

    .scp-brand-carousel-card {
        width: 155px;
        min-width: 155px;
        min-height: 92px;
        border-radius: 22px;
    }

    .scp-brand-carousel-card strong {
        font-size: 15px;
    }

    .scp-brand-carousel-card img {
        max-width: 115px;
        max-height: 48px;
    }
}


/* =========================================================
   Stage 84: Mobile Menu Overlay Fix
   Fixes menu transparency / product cards appearing above menu.
   Copy this block to the END of public/css/storefront/design-overrides.css
========================================================= */

@media (max-width: 1024px) {
    body.scp-mobile-menu-open {
        overflow: hidden !important;
        height: 100dvh !important;
        touch-action: none;
    }

    .scp-mobile-menu-backdrop {
        display: block !important;
        position: fixed !important;
        inset: 0 !important;
        z-index: 99990 !important;
        background: rgba(2, 6, 23, .68) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: opacity .22s ease, visibility .22s ease !important;
    }

    .scp-mobile-menu-open .scp-mobile-menu-backdrop {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    .scp-nav[data-scp-mobile-menu] {
        position: fixed !important;
        top: 0 !important;
        bottom: auto !important;
        inset-inline-start: 0 !important;
        inset-inline-end: auto !important;
        z-index: 99999 !important;
        width: min(88vw, 390px) !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        padding: 20px 18px 32px !important;
        box-sizing: border-box !important;
        background: #ffffff !important;
        background-image:
            radial-gradient(circle at 18% 0%, rgba(37, 99, 235, .08), transparent 32%),
            linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
        border: 0 !important;
        border-inline-end: 1px solid #e2e8f0 !important;
        box-shadow: 28px 0 80px rgba(2, 6, 23, .42) !important;
        transform: translateX(-108%) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: transform .24s ease, opacity .24s ease, visibility .24s ease !important;
        isolation: isolate !important;
    }

    html[dir="rtl"] .scp-nav[data-scp-mobile-menu] {
        inset-inline-start: auto !important;
        inset-inline-end: 0 !important;
        border-inline-end: 0 !important;
        border-inline-start: 1px solid #e2e8f0 !important;
        box-shadow: -28px 0 80px rgba(2, 6, 23, .42) !important;
        transform: translateX(108%) !important;
    }

    .scp-mobile-menu-open .scp-nav[data-scp-mobile-menu] {
        transform: translateX(0) !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    .scp-nav[data-scp-mobile-menu] * {
        position: relative !important;
        z-index: 2 !important;
    }

    .scp-nav[data-scp-mobile-menu] .scp-mobile-menu-head {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex: 0 0 auto !important;
        padding: 0 0 14px !important;
        margin: 0 0 8px !important;
        border-bottom: 1px solid #e5e7eb !important;
        background: transparent !important;
    }

    .scp-nav[data-scp-mobile-menu] .scp-mobile-menu-head strong {
        color: #0f172a !important;
        font-size: 18px !important;
        font-weight: 950 !important;
        line-height: 1.2 !important;
    }

    .scp-nav[data-scp-mobile-menu] .scp-mobile-menu-head button {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        border: 0 !important;
        border-radius: 16px !important;
        background: #fee2e2 !important;
        color: #dc2626 !important;
        font-size: 26px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        display: grid !important;
        place-items: center !important;
        cursor: pointer !important;
        box-shadow: none !important;
    }

    .scp-nav[data-scp-mobile-menu] > a {
        flex: 0 0 auto !important;
        width: 100% !important;
        min-height: 54px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 14px !important;
        padding: 0 16px !important;
        box-sizing: border-box !important;
        border-radius: 18px !important;
        border: 1px solid #e2e8f0 !important;
        background: #ffffff !important;
        color: #0f172a !important;
        font-size: 14px !important;
        font-weight: 950 !important;
        text-decoration: none !important;
        box-shadow: 0 10px 26px rgba(15, 23, 42, .06) !important;
        white-space: normal !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .scp-nav[data-scp-mobile-menu] > a::after {
        content: "›" !important;
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        border-radius: 11px !important;
        display: grid !important;
        place-items: center !important;
        background: #eff6ff !important;
        color: #2563eb !important;
        font-size: 18px !important;
        font-weight: 950 !important;
    }

    html[dir="rtl"] .scp-nav[data-scp-mobile-menu] > a::after {
        content: "‹" !important;
    }

    .scp-nav[data-scp-mobile-menu] > a:hover {
        background: #eff6ff !important;
        border-color: #bfdbfe !important;
    }

    .scp-nav[data-scp-mobile-menu] > a.scp-nav-register-link {
        background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
        color: #111827 !important;
        border-color: rgba(245, 158, 11, .55) !important;
    }

    .scp-nav[data-scp-mobile-menu] > a.scp-nav-login-link {
        background: #eff6ff !important;
        color: #1d4ed8 !important;
        border-color: #bfdbfe !important;
    }

    .scp-product-card,
    .scp-product-image,
    .scp-product-body,
    .scp-product-grid,
    .scp-section,
    .scp-hero-section {
        z-index: auto !important;
    }
}

@media (max-width: 540px) {
    .scp-nav[data-scp-mobile-menu] {
        width: min(92vw, 350px) !important;
        padding: 18px 14px 30px !important;
    }

    .scp-nav[data-scp-mobile-menu] > a {
        min-height: 52px !important;
        font-size: 13px !important;
        border-radius: 16px !important;
    }
}

/* Final cascade guard: unified mobile header/menu wins over legacy patches. */
@media (max-width: 1024px) {
    .scp-header {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(255, 255, 255, .98) !important;
        box-shadow: 0 8px 28px rgba(15, 23, 42, .08) !important;
    }

    .scp-header > .scp-container {
        width: min(100% - 24px, 1320px) !important;
    }

    .scp-topbar {
        min-height: 34px !important;
        flex-wrap: nowrap !important;
        gap: 10px !important;
        padding-inline: 10px !important;
        overflow: hidden !important;
    }

    .scp-topbar-text {
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: 11px !important;
    }

    .scp-language-switcher {
        flex: 0 0 auto !important;
    }

    .scp-language-switcher a {
        min-width: 29px !important;
        height: 26px !important;
        padding: 0 6px !important;
        font-size: 10px !important;
    }

    .scp-main-header {
        min-height: 0 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 46px !important;
        align-items: center !important;
        gap: 10px 12px !important;
        padding: 10px 0 12px !important;
    }

    .scp-logo {
        grid-column: 1 !important;
        grid-row: 1 !important;
        min-width: 0 !important;
        justify-content: flex-start !important;
        text-align: start !important;
        gap: 9px !important;
    }

    .scp-logo-mark,
    .scp-logo-image {
        width: 42px !important;
        height: 42px !important;
        flex: 0 0 42px !important;
        border-radius: 13px !important;
    }

    .scp-logo strong,
    .scp-logo small {
        display: block !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .scp-logo strong { font-size: 15px !important; }
    .scp-logo small { font-size: 10px !important; }

    .scp-mobile-menu-toggle {
        grid-column: 2 !important;
        grid-row: 1 !important;
        order: initial !important;
        width: 46px !important;
        height: 46px !important;
        min-height: 46px !important;
        display: grid !important;
        place-items: center !important;
        padding: 0 !important;
        border-radius: 14px !important;
    }

    .scp-mobile-menu-icon {
        width: 20px !important;
        display: grid !important;
        gap: 4px !important;
    }

    .scp-mobile-menu-icon i {
        width: 20px !important;
        height: 2px !important;
        display: block !important;
        border-radius: 999px !important;
        background: #fff !important;
    }

    .scp-mobile-menu-toggle small {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
    }

    .scp-search {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        order: initial !important;
        width: 100% !important;
        height: 44px !important;
        border-radius: 14px !important;
    }

    .scp-header-actions {
        grid-column: 1 / -1 !important;
        grid-row: 3 !important;
        order: initial !important;
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .scp-header-actions .scp-header-action,
    .scp-header-actions .scp-header-action:last-child {
        grid-column: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 42px !important;
        min-height: 42px !important;
        display: grid !important;
        grid-template-columns: auto auto !important;
        place-content: center !important;
        gap: 6px !important;
        border-radius: 13px !important;
        box-shadow: none !important;
    }

    .scp-header-action small {
        max-width: 82px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: 10px !important;
    }

    .scp-nav[data-scp-mobile-menu] {
        inset-block: 0 !important;
        width: min(86vw, 360px) !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: none !important;
        gap: 4px !important;
        padding: max(18px, env(safe-area-inset-top)) 14px max(24px, env(safe-area-inset-bottom)) !important;
        background: #fff !important;
        background-image: linear-gradient(180deg, #f8fbff 0, #fff 160px) !important;
        border-radius: 0 !important;
        visibility: hidden !important;
        transition: transform .24s ease, visibility .24s ease !important;
    }

    .scp-mobile-menu-open .scp-nav[data-scp-mobile-menu],
    html[dir="rtl"] .scp-mobile-menu-open .scp-nav[data-scp-mobile-menu] {
        transform: translateX(0) !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    .scp-nav[data-scp-mobile-menu] .scp-mobile-menu-head {
        min-height: 58px !important;
        padding: 4px 2px 10px !important;
        margin: 0 0 8px !important;
    }

    .scp-nav[data-scp-mobile-menu] > a {
        min-height: 48px !important;
        padding: 0 12px !important;
        border: 0 !important;
        border-bottom: 1px solid #eef2f7 !important;
        border-radius: 11px !important;
        background: transparent !important;
        color: #1e293b !important;
        font-size: 13px !important;
        box-shadow: none !important;
    }

    .scp-nav[data-scp-mobile-menu] > a::after {
        content: "\203A" !important;
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        border-radius: 8px !important;
        background: #f1f5f9 !important;
        color: #64748b !important;
    }

    html[dir="rtl"] .scp-nav[data-scp-mobile-menu] > a::after {
        content: "\2039" !important;
    }
}


/* =========================================================
   Stage 89: SAFE Mobile / iPad Menu Patch ONLY
   لا تستبدل storefront.css بهذا الكود.
   انسخ هذا البلوك فقط إلى آخر:
   public/css/storefront/design-overrides.css
========================================================= */

/* على الكمبيوتر نخفي عناصر منيو الموبايل تماماً */
.scp-mobile-menu-toggle,
.scp-mobile-menu-head,
.scp-mobile-menu-backdrop {
    display: none !important;
}

/* Desktop: القائمة العادية تبقى طبيعية */
@media (min-width: 1025px) {
    .scp-nav[data-scp-mobile-menu],
    .scp-nav {
        position: static !important;
        inset: auto !important;
        z-index: auto !important;
        width: auto !important;
        height: auto !important;
        max-height: none !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 22px !important;
        padding: 0 !important;
        background: transparent !important;
        border-inline: 0 !important;
        border-top: 1px solid #eef2f7 !important;
        box-shadow: none !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    .scp-nav .scp-mobile-menu-head {
        display: none !important;
    }

    .scp-nav a {
        width: auto !important;
        min-height: auto !important;
        display: inline-flex !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        white-space: nowrap !important;
    }

    .scp-nav a::after {
        content: none !important;
        display: none !important;
    }
}

/* Mobile + iPad: منيو جانبية احترافية */
@media (max-width: 0px) {
    .scp-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 9000 !important;
    }

    .scp-main-header {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding: 12px 0 !important;
    }

    .scp-logo {
        justify-content: center !important;
        text-align: center !important;
    }

    .scp-search {
        order: 2 !important;
        width: 100% !important;
        height: 46px !important;
        border-radius: 16px !important;
    }

    .scp-header-actions {
        order: 3 !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        width: 100% !important;
        gap: 10px !important;
    }

    .scp-header-action {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 50px !important;
        border-radius: 16px !important;
    }

    .scp-mobile-menu-toggle {
        order: 4 !important;
        width: 100% !important;
        min-height: 54px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 9px !important;
        border: 1px solid #dbeafe !important;
        border-radius: 18px !important;
        background: linear-gradient(135deg, var(--scp-dark), #172554) !important;
        color: #ffffff !important;
        box-shadow: 0 14px 32px rgba(15, 23, 42, .12) !important;
        cursor: pointer !important;
        font-family: inherit !important;
        font-weight: 950 !important;
    }

    .scp-mobile-menu-toggle span {
        width: 18px !important;
        height: 2px !important;
        border-radius: 999px !important;
        background: #ffffff !important;
        display: block !important;
    }

    .scp-mobile-menu-toggle small {
        font-size: 14px !important;
        color: #ffffff !important;
        font-weight: 950 !important;
    }

    body.scp-mobile-menu-open {
        overflow: hidden !important;
        height: 100dvh !important;
        touch-action: none !important;
    }

    .scp-mobile-menu-backdrop {
        display: block !important;
        position: fixed !important;
        inset: 0 !important;
        z-index: 99990 !important;
        background: rgba(2, 6, 23, .68) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: opacity .22s ease, visibility .22s ease !important;
    }

    .scp-mobile-menu-open .scp-mobile-menu-backdrop {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    .scp-nav[data-scp-mobile-menu] {
        position: fixed !important;
        top: 0 !important;
        bottom: auto !important;
        inset-inline-start: 0 !important;
        inset-inline-end: auto !important;
        z-index: 99999 !important;
        width: min(88vw, 390px) !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        overscroll-behavior: contain !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        padding: 20px 18px 32px !important;
        box-sizing: border-box !important;
        background: #ffffff !important;
        background-image:
            radial-gradient(circle at 18% 0%, rgba(37, 99, 235, .08), transparent 32%),
            linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
        border: 0 !important;
        border-inline-end: 1px solid #e2e8f0 !important;
        box-shadow: 28px 0 80px rgba(2, 6, 23, .42) !important;
        transform: translateX(-108%) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: transform .24s ease, opacity .24s ease, visibility .24s ease !important;
        isolation: isolate !important;
        scroll-snap-type: none !important;
    }

    html[dir="rtl"] .scp-nav[data-scp-mobile-menu] {
        inset-inline-start: auto !important;
        inset-inline-end: 0 !important;
        border-inline-end: 0 !important;
        border-inline-start: 1px solid #e2e8f0 !important;
        box-shadow: -28px 0 80px rgba(2, 6, 23, .42) !important;
        transform: translateX(108%) !important;
    }

    .scp-mobile-menu-open .scp-nav[data-scp-mobile-menu] {
        transform: translateX(0) !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    .scp-nav[data-scp-mobile-menu] .scp-mobile-menu-head {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex: 0 0 auto !important;
        padding: 0 0 14px !important;
        margin: 0 0 8px !important;
        border-bottom: 1px solid #e5e7eb !important;
        background: transparent !important;
    }

    .scp-nav[data-scp-mobile-menu] .scp-mobile-menu-head strong {
        color: #0f172a !important;
        font-size: 18px !important;
        font-weight: 950 !important;
        line-height: 1.2 !important;
    }

    .scp-nav[data-scp-mobile-menu] .scp-mobile-menu-head button {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        border: 0 !important;
        border-radius: 16px !important;
        background: #fee2e2 !important;
        color: #dc2626 !important;
        font-size: 26px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        display: grid !important;
        place-items: center !important;
        cursor: pointer !important;
        box-shadow: none !important;
    }

    .scp-nav[data-scp-mobile-menu] > a {
        flex: 0 0 auto !important;
        width: 100% !important;
        min-height: 54px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 14px !important;
        padding: 0 16px !important;
        box-sizing: border-box !important;
        border-radius: 18px !important;
        border: 1px solid #e2e8f0 !important;
        background: #ffffff !important;
        color: #0f172a !important;
        font-size: 14px !important;
        font-weight: 950 !important;
        text-decoration: none !important;
        box-shadow: 0 10px 26px rgba(15, 23, 42, .06) !important;
        white-space: normal !important;
        opacity: 1 !important;
        transform: none !important;
        scroll-snap-align: none !important;
    }

    .scp-nav[data-scp-mobile-menu] > a::after {
        content: "›" !important;
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        border-radius: 11px !important;
        display: grid !important;
        place-items: center !important;
        background: #eff6ff !important;
        color: #2563eb !important;
        font-size: 18px !important;
        font-weight: 950 !important;
    }

    html[dir="rtl"] .scp-nav[data-scp-mobile-menu] > a::after {
        content: "‹" !important;
    }

    .scp-product-card,
    .scp-product-image,
    .scp-product-body,
    .scp-product-grid,
    .scp-section,
    .scp-hero-section,
    .scp-dynamic-slider,
    .scp-dynamic-slide,
    .scp-brand-carousel {
        z-index: auto !important;
    }
}

@media (max-width: 0px) {
    .scp-header-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .scp-header-actions .scp-header-action:last-child {
        grid-column: 1 / -1 !important;
    }

    .scp-nav[data-scp-mobile-menu] {
        width: min(92vw, 350px) !important;
        padding: 18px 14px 30px !important;
    }

    .scp-nav[data-scp-mobile-menu] > a {
        min-height: 52px !important;
        font-size: 13px !important;
        border-radius: 16px !important;
    }
}

/* Mobile visibility must remain last because legacy desktop guards hide it. */
@media (max-width: 1024px) {
    .scp-mobile-menu-toggle {
        display: grid !important;
    }

    body.scp-storefront {
        overflow-x: hidden !important;
    }

    .scp-main-header {
        grid-template-columns: minmax(0, 1fr) 46px !important;
        grid-template-areas:
            "logo menu"
            "search search"
            "actions actions" !important;
        direction: ltr !important;
    }

    .scp-mobile-menu-toggle {
        grid-area: menu !important;
    }

    .scp-logo {
        grid-area: logo !important;
    }

    .scp-search {
        grid-area: search !important;
    }

    .scp-header-actions {
        grid-area: actions !important;
    }

    html[dir="rtl"] .scp-main-header > * {
        direction: rtl !important;
    }

    html[dir="rtl"] .scp-nav[data-scp-mobile-menu] {
        right: 0 !important;
        left: auto !important;
        transform: translateX(104%) !important;
    }

    html[dir="ltr"] .scp-nav[data-scp-mobile-menu] {
        left: 0 !important;
        right: auto !important;
        transform: translateX(-104%) !important;
    }

    html[dir="rtl"] .scp-mobile-menu-open .scp-nav[data-scp-mobile-menu],
    html[dir="ltr"] .scp-mobile-menu-open .scp-nav[data-scp-mobile-menu] {
        transform: translateX(0) !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    .scp-main-header > *,
    .scp-search {
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .scp-mobile-menu-toggle .scp-mobile-menu-icon {
        width: 20px !important;
        height: auto !important;
        display: grid !important;
        gap: 4px !important;
        background: transparent !important;
        border-radius: 0 !important;
    }

    .scp-logo > span:last-child {
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }
}


/* =========================================================
   Stage 91 - Products Filters Structure Fix
   Append this block to the END of:
   public/css/storefront/design-overrides.css
========================================================= */

/* The filter form must never force products into the toolbar grid */
.scp-products-filter-form {
    display: grid !important;
    grid-template-columns:
        minmax(220px, 1.6fr)
        minmax(145px, 1fr)
        minmax(145px, 1fr)
        minmax(145px, 1fr)
        minmax(145px, 1fr)
        auto
        auto !important;
    gap: 10px !important;
    align-items: start !important;
    overflow: visible !important;
}

.scp-products-filter-form > * {
    min-width: 0 !important;
    max-width: 100% !important;
}

.scp-products-filter-form .scp-products-search {
    min-width: 0 !important;
}

.scp-products-filter-form input,
.scp-products-filter-form select {
    width: 100% !important;
    min-width: 0 !important;
    height: 48px !important;
    box-sizing: border-box !important;
}

.scp-products-filter-form button,
.scp-products-filter-form .scp-products-reset {
    height: 48px !important;
    min-height: 48px !important;
    white-space: nowrap !important;
}

/* Price and option filters inside the filter form */
.scp-filter-blocks {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: minmax(260px, 340px) minmax(0, 1fr) !important;
    gap: 14px !important;
    align-items: start !important;
    width: 100% !important;
    margin-top: 4px !important;
}

.scp-filter-blocks .scp-sidebar-card {
    margin: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
}

.scp-price-range-group {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

.scp-price-range-group label,
.scp-option-filter {
    display: grid !important;
    gap: 7px !important;
    min-width: 0 !important;
}

.scp-price-range-group label span,
.scp-option-filter span {
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}

.scp-price-range-group input[type="range"] {
    width: 100% !important;
    height: auto !important;
}

.scp-price-range-group small {
    color: #0f172a !important;
    font-size: 12px !important;
    font-weight: 950 !important;
}

/* Products layout must be outside the filter form */
.scp-products-layout {
    display: grid !important;
    grid-template-columns: 290px minmax(0, 1fr) !important;
    gap: 24px !important;
    align-items: start !important;
    margin-top: 24px !important;
}

.scp-products-sidebar,
.scp-products-main,
.scp-products-main .scp-product-grid {
    min-width: 0 !important;
}

.scp-products-main .scp-product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

@media (max-width: 1450px) {
    .scp-products-filter-form {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    .scp-products-filter-form .scp-products-search {
        grid-column: span 2 !important;
    }

    .scp-filter-blocks {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 1100px) {
    .scp-products-filter-form {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        border-radius: 24px !important;
    }

    .scp-products-filter-form .scp-products-search {
        grid-column: 1 / -1 !important;
    }

    .scp-products-layout {
        grid-template-columns: 1fr !important;
    }

    .scp-products-sidebar {
        position: static !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .scp-products-main .scp-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 640px) {
    .scp-products-filter-form {
        grid-template-columns: 1fr !important;
        padding: 14px !important;
        gap: 9px !important;
    }

    .scp-products-filter-form .scp-products-search,
    .scp-products-filter-form button,
    .scp-products-filter-form .scp-products-reset,
    .scp-filter-blocks {
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }

    .scp-price-range-group,
    .scp-products-sidebar {
        grid-template-columns: 1fr !important;
    }

    .scp-products-main .scp-product-grid,
    .scp-product-grid {
        grid-template-columns: 1fr !important;
    }
}

.scp-category-icon {
    width: 100% !important;
    height: 142px !important;
    overflow: hidden !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
}

.scp-category-icon-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
}

.scp-category-icon span {
    display: grid !important;
    place-items: center !important;
    line-height: 1 !important;
    font-size: 58px !important;
}

.scp-reseller-portal-page {
    padding: 34px 0 70px;
    background: linear-gradient(180deg, #f7fbff 0%, #eef4fb 100%);
}

.scp-reseller-portal-hero,
.scp-reseller-panel,
.scp-reseller-form-section {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 20px 55px rgba(15, 23, 42, 0.08);
}

.scp-reseller-portal-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 28px;
    margin-bottom: 20px;
}

.scp-reseller-hero-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.scp-reseller-portal-hero span {
    display: inline-flex;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.10);
    color: #2563eb;
    font-size: 12px;
    font-weight: 900;
}

.scp-reseller-portal-hero h1,
.scp-reseller-panel h2,
.scp-reseller-form-section h2 {
    margin: 10px 0 8px;
    color: #0f172a;
    font-weight: 950;
}

.scp-reseller-portal-hero p,
.scp-reseller-panel-head p,
.scp-reseller-empty p {
    color: #64748b;
    margin: 0;
}

.scp-reseller-primary-action,
.scp-reseller-secondary-action,
.scp-reseller-empty a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff !important;
    font-weight: 900;
    text-decoration: none;
    box-shadow: 0 14px 30px rgba(37, 99, 235, 0.22);
    cursor: pointer;
}

.scp-reseller-secondary-action {
    background: #fff;
    color: #2563eb !important;
    border: 1px solid rgba(37, 99, 235, 0.18);
    box-shadow: none;
}

.scp-reseller-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.scp-reseller-wallet-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.scp-reseller-wallet-strip article {
    padding: 18px;
    border-radius: 22px;
    background: linear-gradient(135deg, #0f172a, #1d4ed8);
    color: #fff;
    box-shadow: 0 18px 45px rgba(37, 99, 235, 0.20);
}

.scp-reseller-wallet-strip span {
    display: block;
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
    font-weight: 900;
}

.scp-reseller-wallet-strip strong {
    display: block;
    margin-top: 8px;
    font-size: 24px;
    font-weight: 950;
}

.scp-reseller-catalog-filter {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 12px;
    padding: 18px;
    margin-bottom: 18px;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.07);
}

.scp-agent-orders-filter {
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
}

.scp-agent-orders-filter-advanced {
    grid-template-columns: 1.5fr repeat(5, minmax(140px, 1fr)) auto;
}

.scp-agent-orders-filter input,
.scp-agent-orders-filter select {
    width: 100%;
    min-height: 44px;
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 14px;
    background: #f8fafc;
    padding: 0 12px;
    color: #0f172a;
    font-weight: 800;
}

.scp-agent-orders-filter-actions {
    display: flex;
    align-items: end;
    gap: 10px;
}

.scp-agent-report-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: -4px 0 18px;
}

.scp-agent-report-summary article {
    padding: 18px;
    border: 1px solid rgba(37, 99, 235, 0.12);
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(239, 246, 255, 0.92));
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.07);
}

.scp-agent-report-summary span {
    display: block;
    color: #64748b;
    font-size: 12px;
    font-weight: 900;
}

.scp-agent-report-summary strong {
    display: block;
    margin-top: 8px;
    color: #0f172a;
    font-size: 24px;
    font-weight: 950;
}

.scp-reseller-catalog-filter label,
.scp-agent-purchase-form label {
    display: grid;
    gap: 7px;
    color: #475569;
    font-size: 12px;
    font-weight: 900;
}

.scp-reseller-catalog-filter input,
.scp-agent-purchase-form input,
.scp-agent-purchase-form select {
    width: 100%;
    min-height: 44px;
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 14px;
    background: #f8fafc;
    color: #0f172a;
    padding: 0 12px;
    font-weight: 800;
}

.scp-agent-catalog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.scp-agent-catalog-card {
    overflow: hidden;
    border-radius: 26px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.09);
}

.scp-agent-catalog-image {
    position: relative;
    aspect-ratio: 4 / 3;
    background: #eef4ff;
}

.scp-agent-catalog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.scp-agent-catalog-image span {
    position: absolute;
    top: 12px;
    inset-inline-start: 12px;
    padding: 7px 11px;
    border-radius: 999px;
    background: #fbbf24;
    color: #111827;
    font-size: 12px;
    font-weight: 950;
}

.scp-agent-profit-ribbon {
    position: absolute;
    inset-inline-end: 12px;
    bottom: 12px;
    display: grid;
    gap: 3px;
    min-width: 128px;
    padding: 10px 12px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.92), rgba(37, 99, 235, 0.88));
    color: #fff;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.26);
    font-size: 11px;
    font-weight: 950;
    text-align: center;
}

.scp-agent-profit-ribbon b {
    color: #fbbf24;
    font-size: 16px;
    line-height: 1;
}

.scp-agent-catalog-body {
    padding: 18px;
}

.scp-agent-catalog-body small {
    color: #2563eb;
    font-weight: 950;
}

.scp-agent-catalog-body h2 {
    margin: 8px 0 14px;
    color: #0f172a;
    font-size: 18px;
    font-weight: 950;
}

.scp-agent-main-price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    padding: 14px 16px;
    border-radius: 18px;
    background: linear-gradient(135deg, #1d4ed8, #2563eb);
    color: #fff;
    box-shadow: 0 16px 32px rgba(37, 99, 235, 0.22);
}

.scp-agent-main-price span {
    color: rgba(255, 255, 255, 0.84);
    font-size: 12px;
    font-weight: 950;
}

.scp-agent-main-price strong {
    color: #fff;
    font-size: 22px;
    font-weight: 950;
    white-space: nowrap;
}

.scp-agent-price-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.scp-agent-price-row div {
    padding: 12px;
    border-radius: 16px;
    background: #f8fafc;
}

.scp-agent-price-row span {
    display: block;
    color: #64748b;
    font-size: 11px;
    font-weight: 900;
}

.scp-agent-price-row strong {
    display: block;
    margin-top: 5px;
    color: #0f172a;
    font-size: 17px;
    font-weight: 950;
}

.scp-agent-purchase-form {
    display: grid;
    gap: 10px;
}

.scp-agent-purchase-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 10px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(245, 158, 11, 0.12));
    border: 1px solid rgba(37, 99, 235, 0.12);
}

.scp-agent-purchase-summary div {
    padding: 10px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.76);
}

.scp-agent-purchase-summary span {
    display: block;
    color: #64748b;
    font-size: 11px;
    font-weight: 900;
}

.scp-agent-purchase-summary strong {
    display: block;
    margin-top: 4px;
    color: #0f172a;
    font-size: 16px;
    font-weight: 950;
}

.scp-agent-variant-price-list {
    display: grid;
    gap: 8px;
    margin: 12px 0;
    padding: 12px;
    border-radius: 18px;
    background: #f8fafc;
    border: 1px solid rgba(15, 23, 42, 0.08);
}

.scp-agent-variant-price-list > span {
    color: #0f172a;
    font-size: 12px;
    font-weight: 950;
}

.scp-agent-variant-price-list div {
    display: grid;
    gap: 3px;
    padding: 9px 10px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid rgba(37, 99, 235, 0.08);
}

.scp-agent-variant-price-list strong {
    color: #0f172a;
    font-size: 13px;
    font-weight: 950;
}

.scp-agent-variant-price-list small,
.scp-agent-variant-price-list em {
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}

.scp-agent-catalog-view-action {
    display: flex;
    justify-content: center;
    margin-top: 12px;
    text-decoration: none;
}

.scp-agent-orders-list {
    display: grid;
    gap: 16px;
}

.scp-agent-order-card {
    padding: 18px;
    border-radius: 26px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
}

.scp-agent-order-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.scp-agent-order-head span,
.scp-agent-order-meta span,
.scp-agent-ledger-strip span {
    display: block;
    color: #64748b;
    font-size: 12px;
    font-weight: 900;
}

.scp-agent-order-head strong {
    display: block;
    margin-top: 4px;
    color: #0f172a;
    font-size: 20px;
    font-weight: 950;
}

.scp-agent-order-badges {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.scp-agent-order-meta,
.scp-agent-ledger-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.scp-agent-order-meta-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.scp-agent-order-meta div,
.scp-agent-ledger-strip div {
    padding: 12px;
    border-radius: 16px;
    background: #f8fafc;
}

.scp-agent-order-meta strong,
.scp-agent-ledger-strip strong {
    display: block;
    margin-top: 5px;
    color: #0f172a;
    font-weight: 950;
    word-break: break-word;
}

.scp-agent-order-items {
    display: grid;
    gap: 8px;
    margin-top: 14px;
}

.scp-agent-order-items div {
    display: grid;
    gap: 6px;
    padding: 12px;
    border-radius: 16px;
    background: rgba(37, 99, 235, 0.06);
}

.scp-agent-order-items .scp-agent-order-item-card {
    background: linear-gradient(135deg, rgba(239, 246, 255, 0.94), rgba(255, 255, 255, 0.96));
    border: 1px solid rgba(37, 99, 235, 0.10);
}

.scp-agent-order-item-title {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 !important;
    background: transparent !important;
}

.scp-agent-order-item-title em {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.12);
    color: #1d4ed8;
    font-size: 11px;
    font-style: normal;
    font-weight: 950;
    white-space: nowrap;
}

.scp-agent-item-detail-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px !important;
    padding: 0 !important;
    background: transparent !important;
}

.scp-agent-item-detail-grid span {
    display: grid !important;
    gap: 4px;
    padding: 10px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
}

.scp-agent-item-detail-grid b {
    color: #64748b;
    font-size: 11px;
    font-weight: 900;
}

.scp-agent-item-detail-grid strong {
    color: #0f172a;
    font-size: 13px;
    font-weight: 950;
    overflow-wrap: anywhere;
}

.scp-agent-order-items strong {
    color: #0f172a;
    font-weight: 950;
}

.scp-agent-order-items span {
    color: #64748b;
    font-size: 12px;
    font-weight: 900;
}

.scp-agent-order-items small {
    color: #2563eb;
    font-size: 12px;
    font-weight: 900;
}

.scp-agent-order-items .scp-agent-item-detail-grid span {
    color: inherit;
    font-size: inherit;
}

.scp-agent-actual-sale {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
    gap: 10px;
    align-items: end;
    margin-top: 10px;
    padding: 12px;
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 16px;
    background: rgba(236, 253, 245, 0.8);
}

.scp-agent-actual-sale label {
    display: grid;
    gap: 6px;
}

.scp-agent-actual-sale label span {
    color: #475569;
    font-size: 11px;
    font-weight: 900;
}

.scp-agent-actual-sale input {
    width: 100%;
    min-height: 42px;
    padding: 9px 11px;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    background: #fff;
    color: #0f172a;
    font-weight: 800;
}

.scp-agent-actual-sale button {
    min-height: 42px;
    padding: 9px 15px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, #047857, #10b981);
    color: #fff;
    font-weight: 950;
    cursor: pointer;
}

.scp-agent-actual-sale > strong {
    grid-column: 1 / -1;
    color: #047857;
}

.scp-agent-actual-sale > strong.is-loss {
    color: #b91c1c;
}

@media (max-width: 640px) {
    .scp-agent-actual-sale {
        grid-template-columns: 1fr;
    }

    .scp-agent-actual-sale button {
        width: 100%;
    }
}

.scp-game-topup-validation-note.is-verified {
    background: rgba(16, 185, 129, 0.12) !important;
    color: #047857 !important;
}

.scp-game-topup-validation-note.is-error {
    background: rgba(239, 68, 68, 0.12) !important;
    color: #b91c1c !important;
}

.scp-game-topup-verify-button {
    width: 100%;
    min-height: 46px;
    border: 0;
    border-radius: 16px;
    background: linear-gradient(135deg, #f59e0b, #facc15);
    color: #111827;
    font-weight: 950;
    cursor: pointer;
    box-shadow: 0 14px 28px rgba(245, 158, 11, 0.22);
}

.scp-game-topup-verify-button:disabled {
    opacity: 0.65;
    cursor: wait;
}

.scp-agent-ledger-strip {
    padding-top: 14px;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.scp-reseller-topup-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 18px;
}

.scp-reseller-topup-form {
    display: grid;
    gap: 14px;
}

.scp-reseller-topup-form label {
    display: grid;
    gap: 7px;
    color: #0f172a;
    font-size: 13px;
    font-weight: 900;
}

.scp-reseller-topup-form input,
.scp-reseller-topup-form select {
    width: 100%;
    min-height: 46px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 14px;
    background: #fff;
    padding: 0 13px;
    color: #0f172a;
    font-weight: 800;
}

.scp-reseller-topup-form small {
    color: #b91c1c;
    font-weight: 800;
}

.scp-reseller-topup-note {
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.12);
    color: #334155;
    font-size: 12px;
    font-weight: 850;
    line-height: 1.7;
}

.scp-reseller-stats-grid article {
    padding: 18px;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 16px 38px rgba(15, 23, 42, 0.07);
}

.scp-reseller-stats-grid span,
.scp-reseller-product-row span,
.scp-reseller-table small {
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}

.scp-reseller-stats-grid strong {
    display: block;
    margin-top: 8px;
    color: #0f172a;
    font-size: 24px;
    font-weight: 950;
}

.scp-agent-dashboard-sections {
    display: grid;
    gap: 22px;
    margin-bottom: 22px;
}

.scp-agent-dashboard-section {
    display: grid;
    gap: 12px;
}

.scp-agent-dashboard-section-head h2 {
    margin: 0;
    color: #0f172a;
    font-size: 22px;
    font-weight: 950;
}

.scp-agent-dashboard-card-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.scp-agent-dashboard-card {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    min-height: 128px;
    padding: 18px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.07);
    color: inherit;
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

a.scp-agent-dashboard-card:hover {
    transform: translateY(-3px);
    border-color: rgba(37, 99, 235, 0.22);
    box-shadow: 0 22px 50px rgba(37, 99, 235, 0.13);
}

.scp-agent-dashboard-card-icon {
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(245, 158, 11, 0.14));
    font-size: 26px;
}

.scp-agent-dashboard-card strong {
    display: block;
    color: #0f172a;
    font-size: 15px;
    font-weight: 950;
}

.scp-agent-dashboard-card small {
    display: block;
    margin-top: 5px;
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.55;
}

.scp-agent-dashboard-card em {
    display: inline-flex;
    margin-top: 10px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 13px;
    font-style: normal;
    font-weight: 950;
}

.scp-agent-dashboard-card-soon {
    opacity: 0.78;
}

.scp-agent-dashboard-card-soon em {
    background: #f1f5f9;
    color: #64748b;
}

.scp-agent-profile-pills {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.scp-agent-profile-pills em {
    display: inline-flex;
    padding: 7px 11px;
    border-radius: 999px;
    background: #f8fafc;
    border: 1px solid rgba(15, 23, 42, 0.08);
    color: #334155;
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
}

.scp-agent-dashboard-order-row {
    grid-template-columns: minmax(0, 1fr) minmax(120px, auto) auto auto;
}

.scp-agent-dashboard-order-row small {
    display: block;
    color: #64748b;
    font-size: 11px;
    font-weight: 900;
}

.scp-reseller-dashboard-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 22px;
}

.scp-agent-compact-list {
    display: grid;
    gap: 10px;
}

.scp-agent-compact-list article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    padding: 13px;
    border-radius: 18px;
    background: #f8fafc;
    border: 1px solid rgba(15, 23, 42, 0.06);
}

.scp-agent-compact-list strong,
.scp-agent-compact-list b {
    display: block;
    color: #0f172a;
    font-weight: 950;
}

.scp-agent-compact-list span {
    display: block;
    margin-top: 3px;
    color: #64748b;
    font-size: 12px;
    font-weight: 850;
}

.scp-agent-notification-list {
    display: grid;
    gap: 12px;
}

.scp-agent-notification-card {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 20px;
    background: #f8fafc;
    color: inherit;
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.scp-agent-notification-card:hover {
    transform: translateY(-2px);
    border-color: rgba(37, 99, 235, 0.22);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.10);
}

.scp-agent-notification-icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: #fff;
    font-size: 24px;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06);
}

.scp-agent-notification-card strong {
    display: block;
    color: #0f172a;
    font-weight: 950;
}

.scp-agent-notification-card p {
    margin: 5px 0;
    color: #64748b;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.65;
}

.scp-agent-notification-card small {
    color: #94a3b8;
    font-size: 12px;
    font-weight: 850;
}

.scp-agent-notification-card em {
    padding: 7px 10px;
    border-radius: 999px;
    background: #e2e8f0;
    color: #334155;
    font-size: 12px;
    font-style: normal;
    font-weight: 950;
    white-space: nowrap;
}

.scp-agent-notification-success em {
    background: rgba(34, 197, 94, 0.14);
    color: #15803d;
}

.scp-agent-notification-warning em {
    background: rgba(245, 158, 11, 0.16);
    color: #b45309;
}

.scp-agent-notification-danger em {
    background: rgba(239, 68, 68, 0.14);
    color: #b91c1c;
}

.scp-reseller-empty-compact {
    padding: 18px;
    min-height: auto;
}

.scp-reseller-panel {
    padding: 22px;
}

.scp-reseller-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

.scp-reseller-panel-head a {
    color: #2563eb;
    font-weight: 900;
    text-decoration: none;
}

.scp-reseller-product-list {
    display: grid;
    gap: 10px;
}

.scp-reseller-product-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-radius: 18px;
    background: #f8fafc;
}

.scp-reseller-product-row strong,
.scp-reseller-table strong {
    color: #0f172a;
    font-weight: 950;
}

.scp-reseller-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: #e2e8f0;
    color: #334155;
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
}

.scp-reseller-status-active {
    background: rgba(34, 197, 94, 0.14);
    color: #15803d;
}

.scp-reseller-status-pending_review {
    background: rgba(245, 158, 11, 0.16);
    color: #b45309;
}

.scp-reseller-status-rejected {
    background: rgba(239, 68, 68, 0.13);
    color: #b91c1c;
}

.scp-reseller-empty,
.scp-reseller-alert {
    padding: 20px;
    border-radius: 20px;
    background: #f8fafc;
    text-align: center;
}

.scp-reseller-alert {
    margin-bottom: 16px;
    background: rgba(34, 197, 94, 0.12);
    color: #15803d;
    font-weight: 900;
}

.scp-reseller-alert-error {
    background: rgba(239, 68, 68, 0.12);
    color: #b91c1c;
}

.scp-reseller-table-wrap {
    overflow-x: auto;
}

.scp-reseller-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px;
}

.scp-reseller-table th {
    color: #64748b;
    font-size: 12px;
    font-weight: 900;
    text-align: inherit;
}

.scp-reseller-table td {
    padding: 14px;
    background: #f8fafc;
}

.scp-reseller-table td:first-child {
    border-start-start-radius: 16px;
    border-end-start-radius: 16px;
}

.scp-reseller-table td:last-child {
    border-start-end-radius: 16px;
    border-end-end-radius: 16px;
}

.scp-reseller-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.scp-reseller-form-section {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 22px;
}

.scp-reseller-form-section h2,
.scp-reseller-form-section-full,
.scp-reseller-submit-row {
    grid-column: 1 / -1;
}

.scp-reseller-form label {
    display: grid;
    gap: 7px;
    color: #0f172a;
    font-size: 13px;
    font-weight: 900;
}

.scp-reseller-form input,
.scp-reseller-form select,
.scp-reseller-form textarea {
    width: 100%;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 14px;
    background: #fff;
    padding: 12px 13px;
    color: #0f172a;
    outline: none;
}

.scp-reseller-form small {
    color: #b91c1c;
    font-weight: 800;
}

.scp-reseller-submit-row {
    display: flex;
    justify-content: flex-end;
}

html[dir="rtl"] .scp-reseller-submit-row {
    justify-content: flex-start;
}

@media (max-width: 900px) {
    .scp-reseller-portal-hero,
    .scp-reseller-panel-head {
        flex-direction: column;
        align-items: stretch;
    }

    .scp-reseller-stats-grid,
    .scp-reseller-wallet-strip,
    .scp-agent-report-summary,
    .scp-agent-dashboard-card-grid,
    .scp-agent-catalog-grid,
    .scp-reseller-dashboard-split,
    .scp-agent-order-meta,
    .scp-agent-order-meta-5,
    .scp-agent-item-detail-grid,
    .scp-agent-ledger-strip,
    .scp-reseller-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .scp-reseller-stats-grid,
    .scp-reseller-wallet-strip,
    .scp-agent-report-summary,
    .scp-agent-dashboard-card-grid,
    .scp-agent-catalog-grid,
    .scp-reseller-dashboard-split,
    .scp-agent-order-meta,
    .scp-agent-order-meta-5,
    .scp-agent-ledger-strip,
    .scp-reseller-catalog-filter,
    .scp-agent-orders-filter,
    .scp-agent-orders-filter-advanced,
    .scp-agent-item-detail-grid,
    .scp-reseller-form,
    .scp-reseller-form-section,
    .scp-agent-dashboard-card,
    .scp-agent-compact-list article,
    .scp-agent-notification-card,
    .scp-reseller-product-row {
        grid-template-columns: 1fr;
    }

    .scp-reseller-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .scp-agent-orders-filter-actions {
        display: grid;
        align-items: stretch;
    }

    .scp-agent-price-row {
        grid-template-columns: 1fr;
    }

    .scp-agent-order-head,
    .scp-reseller-topup-grid,
    .scp-agent-order-items div {
        display: grid;
        grid-template-columns: 1fr;
    }

    .scp-agent-order-head,
    .scp-agent-order-items div {
        flex-direction: column;
        align-items: stretch;
    }

    .scp-reseller-submit-row,
    html[dir="rtl"] .scp-reseller-submit-row {
        justify-content: stretch;
    }
}

.scp-reseller-account-panel {
    border: 1px solid rgba(34, 197, 94, 0.22) !important;
    background:
        radial-gradient(circle at top left, rgba(34, 197, 94, 0.10), transparent 32%),
        linear-gradient(135deg, #ffffff 0%, #f8fbff 100%) !important;
}

.scp-reseller-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 7px 13px;
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.12);
    color: #15803d;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.scp-reseller-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.scp-reseller-summary-card {
    display: grid;
    gap: 7px;
    padding: 15px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

.scp-reseller-summary-card span {
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}

.scp-reseller-summary-card strong {
    color: #0f172a;
    font-size: 16px;
    font-weight: 950;
    word-break: break-word;
}

.scp-reseller-account-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 18px;
}

html[dir="rtl"] .scp-reseller-account-actions {
    justify-content: flex-start;
}

@media (max-width: 900px) {
    .scp-reseller-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .scp-reseller-summary-grid {
        grid-template-columns: 1fr;
    }

    .scp-reseller-account-actions,
    html[dir="rtl"] .scp-reseller-account-actions {
        justify-content: stretch;
    }

    .scp-reseller-account-actions .scp-account-primary-btn {
        width: 100%;
    }
}

.scp-topup-progress-card {
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid rgba(37, 99, 235, 0.14);
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(239, 246, 255, 0.96), rgba(255, 255, 255, 0.98));
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}

.scp-topup-progress-head,
.scp-topup-progress-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.scp-topup-progress-head strong {
    color: #0f172a;
    font-size: 0.98rem;
}

.scp-topup-progress-head p,
.scp-topup-progress-meta {
    margin: 0.25rem 0 0;
    color: #64748b;
    font-size: 0.82rem;
}

.scp-topup-progress-head > span {
    white-space: nowrap;
    border-radius: 999px;
    padding: 0.42rem 0.7rem;
    background: #dbeafe;
    color: #1d4ed8;
    font-weight: 900;
    font-size: 0.78rem;
}

.scp-topup-progress-card.is-processing .scp-topup-progress-head > span {
    background: #fef3c7;
    color: #b45309;
}

.scp-topup-progress-card.is-fulfilled .scp-topup-progress-head > span {
    background: #dcfce7;
    color: #15803d;
}

.scp-topup-progress-card.is-failed .scp-topup-progress-head > span {
    background: #fee2e2;
    color: #b91c1c;
}

.scp-topup-progress-track {
    position: relative;
    overflow: hidden;
    height: 0.7rem;
    margin: 0.9rem 0 0.65rem;
    border-radius: 999px;
    background: #e2e8f0;
}

.scp-topup-progress-track i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #2563eb, #60a5fa);
    transition: width 0.45s ease;
}

.scp-topup-progress-card.is-processing .scp-topup-progress-track i {
    background: linear-gradient(90deg, #f59e0b, #facc15);
}

.scp-topup-progress-card.is-fulfilled .scp-topup-progress-track i {
    background: linear-gradient(90deg, #16a34a, #86efac);
}

.scp-topup-progress-card.is-failed .scp-topup-progress-track i {
    background: linear-gradient(90deg, #dc2626, #fb7185);
}

.scp-topup-progress-details {
    align-items: stretch;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 0.9rem;
}

.scp-topup-progress-details > div {
    padding: 0.75rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(226, 232, 240, 0.9);
}

.scp-topup-progress-details .is-wide {
    grid-column: 1 / -1;
}

.scp-topup-progress-details small {
    display: block;
    color: #64748b;
    margin-bottom: 0.25rem;
}

.scp-topup-progress-details strong {
    color: #0f172a;
    overflow-wrap: anywhere;
}

@media (max-width: 640px) {
    .scp-topup-progress-head,
    .scp-topup-progress-meta {
        align-items: flex-start;
        flex-direction: column;
    }

    .scp-topup-progress-details {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   Stage 112 - Stable Dynamic Branding
   Keep storefront/admin branding dynamic without awkward wrapping.
========================================================= */
.scp-logo {
    min-width: 0 !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
}

.scp-logo-text {
    display: grid !important;
    min-width: 0 !important;
    max-width: 190px !important;
    line-height: 1.15 !important;
}

.scp-logo-text strong,
.scp-logo-text small {
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.scp-logo-text strong {
    font-size: clamp(14px, 1.15vw, 18px) !important;
}

.scp-logo-text small {
    font-size: clamp(10px, 0.85vw, 12px) !important;
}

.scp-logo-image,
.scp-logo-mark {
    flex: 0 0 auto !important;
}

.scp-admin-brand-logo {
    display: block;
    width: auto;
    max-width: 190px;
    height: 3rem;
    object-fit: contain;
}

.scp-admin-brand-fallback {
    width: 3rem;
    height: 3rem;
    border-radius: 1rem;
    display: inline-grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #2563eb, #38bdf8);
    font-size: 1.35rem;
    font-weight: 900;
    box-shadow: 0 16px 30px rgba(37, 99, 235, 0.25);
}

@media (max-width: 900px) {
    .scp-logo-text {
        max-width: 150px !important;
    }
}

@media (max-width: 640px) {
    .scp-logo-text {
        max-width: 122px !important;
    }
}

/* =========================================================
   Stage 113 - Storefront Slide Template: Gaming Split
   Midas-style wide promotional banner selectable per slide.
========================================================= */
.scp-dynamic-slide-gaming {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    min-height: 330px !important;
    padding: 0 !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at 12% 10%, rgba(56, 189, 248, .28), transparent 34%),
        linear-gradient(135deg, #10172d 0%, #111827 48%, #061024 100%) !important;
    border: 1px solid rgba(59, 130, 246, .22);
    box-shadow: 0 28px 80px rgba(2, 6, 23, .22);
}

.scp-gaming-slide-art {
    position: absolute;
    inset: 0;
    z-index: 1;
    min-height: 100%;
    overflow: hidden;
}

.scp-gaming-slide-art::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    width: 52%;
    background: linear-gradient(90deg, transparent 0%, rgba(14, 165, 233, .68) 42%, rgba(13, 85, 216, .98) 100%);
    clip-path: polygon(28% 0, 100% 0, 100% 100%, 0 100%);
    pointer-events: none;
}

html[dir="rtl"] .scp-gaming-slide-art::after {
    background: linear-gradient(270deg, transparent 0%, rgba(14, 165, 233, .68) 42%, rgba(13, 85, 216, .98) 100%);
    clip-path: polygon(0 0, 72% 0, 100% 100%, 0 100%);
    inset-inline-start: 0;
    inset-inline-end: auto;
}

.scp-gaming-slide-art img {
    width: 100%;
    height: 100%;
    min-height: 100%;
    object-fit: cover;
    object-position: center;
    filter: saturate(1.05) contrast(1.04);
}

.scp-gaming-slide-placeholder {
    height: 100%;
    min-height: 100%;
    display: grid;
    place-items: center;
    padding: 2rem;
    color: #fff;
    background: linear-gradient(135deg, rgba(59, 130, 246, .28), rgba(15, 23, 42, .92));
}

.scp-gaming-slide-content {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 330px;
    width: min(38%, 520px);
    padding: clamp(2rem, 4vw, 4.25rem);
    color: #fff;
    background:
        radial-gradient(circle at 98% 18%, rgba(251, 191, 36, .22), transparent 14%),
        linear-gradient(135deg, #07b9f2 0%, #0d73e8 52%, #0b55d8 100%);
}

.scp-gaming-slide-content::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: -92px;
    width: 130px;
    background: inherit;
    transform: skewX(-13deg);
    transform-origin: bottom;
    z-index: -1;
}

html[dir="rtl"] .scp-gaming-slide-content::before {
    inset-inline-start: auto;
    inset-inline-end: -92px;
    transform: skewX(13deg);
}

html[dir="rtl"] .scp-gaming-slide-content {
    inset-inline-start: 0;
    inset-inline-end: auto;
}

.scp-gaming-slide-content::after {
    content: "〰";
    position: absolute;
    inset-block-start: 2rem;
    inset-inline-end: 2rem;
    color: #f59e0b;
    font-size: 3rem;
    font-weight: 900;
    line-height: 1;
    opacity: .9;
}

.scp-gaming-slide-content span {
    width: fit-content;
    margin-bottom: 1rem;
    padding: .38rem .7rem;
    border-radius: .45rem;
    color: #075985;
    background: rgba(255, 255, 255, .9);
    font-size: var(--scp-slide-badge-size, .85rem);
    font-weight: 800;
}

.scp-gaming-slide-content h1 {
    max-width: 480px;
    margin: 0;
    color: #fff !important;
    font-size: var(--scp-slide-title-size, clamp(2rem, 3vw, 3.25rem)) !important;
    line-height: 1.18 !important;
    font-weight: 950 !important;
    text-shadow: 0 12px 32px rgba(2, 6, 23, .18);
}

.scp-gaming-slide-content p {
    max-width: 480px;
    margin: 1rem 0 0;
    color: rgba(255, 255, 255, .86) !important;
    font-size: var(--scp-slide-description-size, 1rem) !important;
}

.scp-gaming-slide-content a {
    width: fit-content;
    margin-top: 1.5rem;
    padding: .62rem 1.15rem;
    border-radius: 999px;
    color: #2563eb;
    background: #fff;
    font-size: var(--scp-slide-button-size, 1rem);
    font-weight: 900;
    box-shadow: 0 16px 36px rgba(2, 6, 23, .18);
    transition: transform .2s ease, box-shadow .2s ease;
}

.scp-dynamic-slide .scp-hero-badge {
    font-size: var(--scp-slide-badge-size, inherit) !important;
}

.scp-dynamic-slide .scp-dynamic-slide-content h1 {
    font-size: var(--scp-slide-title-size, clamp(2.25rem, 4.4vw, 4.8rem)) !important;
}

.scp-dynamic-slide .scp-dynamic-slide-content p {
    font-size: var(--scp-slide-description-size, 1.05rem) !important;
}

.scp-dynamic-slide .scp-hero-buttons a {
    font-size: var(--scp-slide-button-size, 1rem) !important;
}

.scp-gaming-slide-content a:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 42px rgba(2, 6, 23, .24);
}

@media (max-width: 900px) {
    .scp-dynamic-slide-gaming {
        min-height: 420px !important;
    }

    .scp-gaming-slide-art,
    .scp-gaming-slide-art img,
    .scp-gaming-slide-placeholder {
        min-height: 100%;
    }

    .scp-gaming-slide-art::after,
    .scp-gaming-slide-content::before {
        display: none;
    }

    .scp-gaming-slide-content {
        position: absolute;
        inset-inline: 0;
        inset-block-end: 0;
        inset-block-start: auto;
        width: 100%;
        min-height: auto;
        padding: 1.75rem;
        background: linear-gradient(180deg, transparent 0%, rgba(13, 85, 216, .95) 34%, rgba(7, 89, 190, .98) 100%);
    }

    .scp-gaming-slide-content::after {
        font-size: 2rem;
        inset-block-start: 1rem;
        inset-inline-end: 1rem;
    }
}

/* =========================================================
   Stage 115 - Clip gaming hero slider edges
   Keep the Midas-style banner flush inside its rounded frame.
========================================================= */
.scp-dynamic-slider:has(.scp-dynamic-slide-gaming) {
    overflow: hidden !important;
    isolation: isolate;
    contain: paint;
    box-shadow: 0 24px 56px rgba(15, 23, 42, .10);
    clip-path: inset(0 round 34px);
}

.scp-dynamic-slider:has(.scp-dynamic-slide-gaming) .scp-dynamic-slide-gaming {
    border: 0 !important;
    box-shadow: none !important;
    border-radius: inherit !important;
}

.scp-dynamic-slider:has(.scp-dynamic-slide-gaming) .scp-gaming-slide-art,
.scp-dynamic-slider:has(.scp-dynamic-slide-gaming) .scp-gaming-slide-art img,
.scp-dynamic-slider:has(.scp-dynamic-slide-gaming) .scp-gaming-slide-content {
    border-radius: 0 !important;
}

.scp-dynamic-slider:has(.scp-dynamic-slide-gaming) .scp-slider-prev {
    inset-inline-start: 16px;
}

.scp-dynamic-slider:has(.scp-dynamic-slide-gaming) .scp-slider-next {
    inset-inline-end: 16px;
}

@media (max-width: 900px) {
    .scp-dynamic-slider:has(.scp-dynamic-slide-gaming) {
        clip-path: inset(0 round 28px);
    }

    .scp-dynamic-slider:has(.scp-dynamic-slide-gaming) .scp-slider-prev {
        inset-inline-start: 14px;
    }

    .scp-dynamic-slider:has(.scp-dynamic-slide-gaming) .scp-slider-next {
        inset-inline-end: 14px;
    }
}

/* =========================================================
   Stage 116 - Mobile storefront media polish
   Cleaner language switcher + complete product/category images.
========================================================= */
@media (max-width: 700px) {
    .scp-topbar {
        min-height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 9px 0 10px !important;
        text-align: center !important;
    }

    .scp-topbar-text {
        order: 2 !important;
        width: 100% !important;
        max-width: 32rem !important;
        color: rgba(226, 232, 240, .92) !important;
        font-size: 11px !important;
        line-height: 1.45 !important;
        white-space: normal !important;
    }

    .scp-language-switcher {
        order: 1 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        width: auto !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 4px !important;
        border: 1px solid rgba(255, 255, 255, .10) !important;
        border-radius: 999px !important;
        background: rgba(255, 255, 255, .07) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08) !important;
    }

    .scp-language-switcher a {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        display: grid !important;
        place-items: center !important;
        padding: 0 !important;
        border-radius: 999px !important;
        color: #e5e7eb !important;
        background: rgba(15, 23, 42, .62) !important;
        font-size: 10.5px !important;
        font-weight: 950 !important;
        letter-spacing: .03em !important;
        line-height: 1 !important;
    }

    .scp-language-switcher a.active {
        color: #111827 !important;
        background: linear-gradient(135deg, #facc15, #f59e0b) !important;
        box-shadow: 0 8px 18px rgba(245, 158, 11, .26) !important;
    }

    .scp-product-grid,
    .scp-product-grid.compact {
        gap: 14px !important;
    }

    .scp-product-card {
        border-radius: 22px !important;
    }

    .scp-product-image {
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 4 / 3 !important;
        background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
    }

    .scp-product-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        object-position: center !important;
        padding: 10px !important;
        background: transparent !important;
    }

    .scp-category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    .scp-category-card {
        min-height: 0 !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        padding: 12px 10px 14px !important;
        border-radius: 18px !important;
        overflow: hidden !important;
    }

    .scp-category-icon {
        height: auto !important;
        aspect-ratio: 1 / .78 !important;
        width: 100% !important;
        padding: 8px !important;
        border-radius: 16px !important;
        background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%) !important;
        border: 1px solid #eef2f7 !important;
        font-size: 34px !important;
    }

    .scp-category-icon-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        object-position: center !important;
    }

    .scp-category-card h3 {
        font-size: 16px !important;
        line-height: 1.2 !important;
        letter-spacing: -.02em !important;
    }

    .scp-category-card p {
        max-width: 100% !important;
        font-size: 11px !important;
        line-height: 1.45 !important;
        -webkit-line-clamp: 2 !important;
    }

    .scp-category-cta {
        font-size: 12px !important;
    }
}

@media (max-width: 390px) {
    .scp-category-grid {
        gap: 10px !important;
    }

    .scp-category-card {
        padding: 10px 8px 12px !important;
        border-radius: 16px !important;
    }

    .scp-category-card h3 {
        font-size: 14px !important;
    }

    .scp-product-image {
        aspect-ratio: 1 / .86 !important;
    }
}

/* =========================================================
   Stage 132 - Flag-only language switchers
   Desktop flags live in the announcement bar; mobile flags stay in the drawer.
========================================================= */
.scp-desktop-language-flags,
.scp-mobile-language-flags {
    align-items: center;
    gap: 8px;
}

.scp-desktop-language-flags {
    display: inline-flex;
    flex: 0 0 auto;
}

.scp-mobile-language-flags {
    display: none;
}

.scp-desktop-language-flags a,
.scp-mobile-language-flags a {
    width: 40px;
    height: 30px;
    display: grid;
    place-items: center;
    flex: 0 0 40px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 9px;
    padding: 2px;
    color: inherit;
    background: rgba(255, 255, 255, .1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
    text-decoration: none;
    transition: transform .18s ease, border-color .18s ease, background-color .18s ease;
}

.scp-desktop-language-flags a:hover,
.scp-desktop-language-flags a:focus-visible,
.scp-mobile-language-flags a:hover,
.scp-mobile-language-flags a:focus-visible {
    border-color: rgba(255, 255, 255, .55);
    background: rgba(255, 255, 255, .18);
    transform: translateY(-2px);
}

.scp-language-flag-icon {
    display: block;
    width: 100%;
    height: 100%;
    font-size: 22px;
    line-height: 1;
}

.scp-language-flag-icon img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 6px;
    object-fit: cover;
}

.scp-language-flag-label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@media (max-width: 767px) {
    .scp-desktop-language-flags {
        display: none !important;
    }

    .scp-nav[data-scp-mobile-menu] > .scp-mobile-language-flags {
        width: 100%;
        display: flex;
        justify-content: center;
        gap: 12px;
        margin: 0 0 14px;
        padding: 12px;
        border: 1px solid #e2e8f0;
        border-radius: 18px;
        background: linear-gradient(135deg, #f8fafc, #eff6ff);
    }

    .scp-nav[data-scp-mobile-menu] > .scp-mobile-language-flags a {
        width: 48px;
        height: 36px;
        flex-basis: 48px;
        border-color: #dbeafe;
        border-radius: 11px;
        background: #ffffff;
        box-shadow: 0 8px 18px rgba(15, 23, 42, .08);
    }

    .scp-nav[data-scp-mobile-menu] > .scp-mobile-language-flags .scp-language-flag-icon {
        font-size: 25px;
    }
}

/* Stage 149: clear retail and reseller pricing everywhere in the storefront. */
.scp-price-pair {
    width: 100%;
    display: grid;
    gap: 6px;
    margin-block: 8px;
}

.scp-price-pair-row {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 12px;
    line-height: 1.2;
}

.scp-price-pair-row small {
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

.scp-price-pair-row b,
.scp-price-pair-row strong {
    font-size: 14px;
    font-weight: 950;
    white-space: nowrap;
}

.scp-price-pair-row.is-customer {
    color: #475569;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.scp-price-pair-row.is-reseller {
    color: #075985;
    background: linear-gradient(135deg, #ecfeff, #eff6ff);
    border: 1px solid #7dd3fc;
    box-shadow: 0 5px 14px rgb(14 165 233 / 10%);
}

.scp-price-pair.is-compact {
    gap: 4px;
    margin-block: 5px;
}

.scp-price-pair.is-compact .scp-price-pair-row {
    padding: 6px 8px;
    border-radius: 10px;
}

.scp-card-customer-price {
    flex-basis: 100%;
    color: #64748b;
    font-size: 11px;
    font-weight: 850;
    text-decoration: none !important;
}

.scp-product-price-note {
    color: #0369a1 !important;
    background: #e0f2fe;
    border: 1px solid #7dd3fc;
    border-radius: 999px;
    padding: 3px 7px;
    font-size: 10px;
    font-style: normal;
    font-weight: 950;
}

.scp-detail-customer-price {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 12px;
    color: #475569;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}

.scp-detail-customer-price small,
.scp-detail-customer-price b {
    font-weight: 900;
}

.scp-game-package-list small > .scp-price-pair {
    margin: 4px 0 0;
}

@media (max-width: 640px) {
    .scp-price-pair-row {
        padding: 7px 8px;
    }

    .scp-price-pair-row small {
        font-size: 10px;
    }

    .scp-price-pair-row b,
    .scp-price-pair-row strong {
        font-size: 12px;
    }
}

/* Stage 176: keep reseller pricing labels readable inside the dark quick-buy summary. */
.scp-quick-buy-summary .scp-price-pair {
    gap: 7px;
    margin-block: 10px;
}

.scp-quick-buy-summary .scp-price-pair-row {
    min-height: 38px;
    padding: 8px 12px;
    border-width: 1px;
    border-style: solid;
    box-shadow: 0 8px 18px rgba(2, 6, 23, .16);
}

.scp-quick-buy-summary .scp-price-pair-row small {
    margin: 0;
    color: #1e293b;
    font-size: 12px;
    font-weight: 950;
    opacity: 1;
}

.scp-quick-buy-summary .scp-price-pair-row b,
.scp-quick-buy-summary .scp-price-pair-row strong {
    color: #0f172a;
    font-size: 14px;
}

.scp-quick-buy-summary .scp-price-pair-row.is-customer {
    background: #fff7ed;
    border-color: #fdba74;
}

.scp-quick-buy-summary .scp-price-pair-row.is-customer small {
    color: #9a3412;
}

.scp-quick-buy-summary .scp-price-pair-row.is-reseller {
    background: #ecfeff;
    border-color: #38bdf8;
}

.scp-quick-buy-summary .scp-price-pair-row.is-reseller small,
.scp-quick-buy-summary .scp-price-pair-row.is-reseller strong {
    color: #075985;
}

@media (max-width: 640px) {
    .scp-quick-buy-summary .scp-price-pair-row {
        min-height: 36px;
        padding: 7px 10px;
    }

    .scp-quick-buy-summary .scp-price-pair-row small {
        font-size: 11px;
    }
}

/* Stage 148: clearly separate reseller wallet cash from approved loan credit. */
.scp-account-dropdown--reseller {
    min-width: 220px;
}

.scp-account-dropdown--reseller > summary {
    min-width: 220px;
}

.scp-account-dropdown--reseller .scp-account-dropdown-trigger > small {
    max-width: 190px;
    gap: 4px;
}

.scp-account-trigger-name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.scp-account-trigger-finance {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    direction: rtl;
}

html[dir="ltr"] .scp-account-trigger-finance {
    direction: ltr;
}

.scp-account-trigger-finance b {
    min-width: 0;
    padding: 3px 6px;
    border-radius: 999px;
    font-size: 9px !important;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.scp-account-trigger-finance b.is-wallet {
    color: #067647 !important;
    background: #ecfdf3;
}

.scp-account-trigger-finance b.is-credit {
    color: #175cd3 !important;
    background: #eff6ff;
}

.scp-account-dropdown--reseller .scp-account-dropdown-menu {
    width: min(360px, calc(100vw - 28px));
}

.scp-account-finance-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 8px 0 10px;
    padding: 9px;
    border: 1px solid #e4eaf4;
    border-radius: 16px;
    background: #f8fafc;
}

.scp-account-finance-summary article {
    position: relative;
    min-width: 0;
    min-height: 70px;
    display: grid;
    align-content: center;
    gap: 5px;
    padding: 10px;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 13px;
}

.scp-account-finance-summary article::before {
    content: "";
    position: absolute;
    inset-block: 9px;
    inset-inline-start: 0;
    width: 3px;
    border-radius: 999px;
    background: currentColor;
}

.scp-account-finance-summary article span,
.scp-account-finance-summary article strong {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
}

.scp-account-finance-summary article span {
    color: #667085;
    font-size: 10px;
    font-weight: 850;
    line-height: 1.35;
}

.scp-account-finance-summary article strong {
    color: inherit;
    font-size: 14px;
    font-weight: 950;
    direction: ltr;
    text-align: start;
}

.scp-account-finance-summary .is-wallet {
    color: #067647;
    border-color: #a6f4c5;
    background: #ecfdf3;
}

.scp-account-finance-summary .is-credit {
    color: #175cd3;
    border-color: #b2ccff;
    background: #eff6ff;
}

.scp-account-finance-summary .is-used {
    color: #b54708;
    border-color: #fedf89;
    background: #fffaeb;
}

.scp-account-finance-summary .is-power {
    color: #5925dc;
    border-color: #d9d6fe;
    background: #f4f3ff;
}

@media (max-width: 767px) {
    .scp-account-dropdown--reseller {
        min-width: 0;
    }

    .scp-account-dropdown--reseller > summary {
        min-width: 0;
    }

    .scp-account-dropdown--reseller .scp-account-dropdown-trigger > small {
        max-width: 100% !important;
    }

    .scp-account-trigger-finance {
        display: none;
    }

    .scp-account-dropdown--reseller .scp-account-dropdown-menu {
        width: auto;
    }
}

@media (max-width: 380px) {
    .scp-account-finance-summary {
        gap: 6px;
        padding: 7px;
    }

    .scp-account-finance-summary article {
        padding: 8px;
    }

    .scp-account-finance-summary article strong {
        font-size: 12px;
    }
}

/* =========================================================
   Stage 117 - Mobile slider controls + WhatsApp floating icon
   Keep carousel arrows tidy on phones and render a real WhatsApp mark.
========================================================= */
.scp-floating-whatsapp {
    color: #ffffff !important;
}

/* =========================================================
   Hierarchical category browser
========================================================= */
.scp-category-card-button {
    width: 100%;
    font: inherit;
    cursor: pointer;
}

.scp-modal-open {
    overflow: hidden;
}

.scp-category-browser[hidden],
.scp-category-browser-panel[hidden] {
    display: none !important;
}

.scp-category-browser {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: grid;
    place-items: center;
    padding: 24px;
}

.scp-category-browser-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    border: 0;
    background: rgba(2, 6, 23, .72);
    backdrop-filter: blur(10px);
    cursor: default;
}

.scp-category-browser-dialog {
    position: relative;
    width: min(920px, 100%);
    max-height: min(760px, calc(100vh - 48px));
    overflow: auto;
    border: 1px solid rgba(148, 163, 184, .28);
    border-radius: 30px;
    background: #fff;
    color: #0f172a;
    box-shadow: 0 35px 90px rgba(2, 6, 23, .35);
    animation: scp-category-browser-in .2s ease-out;
}

@keyframes scp-category-browser-in {
    from { opacity: 0; transform: translateY(14px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.scp-category-browser-header {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 28px;
    border-bottom: 1px solid #e5e7eb;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(14px);
}

.scp-category-browser-header span {
    color: #2563eb;
    font-size: 12px;
    font-weight: 900;
}

.scp-category-browser-header h3 {
    margin: 5px 0 0;
    font-size: clamp(24px, 4vw, 36px);
    line-height: 1.1;
}

.scp-category-browser-close {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: #fee2e2;
    color: #dc2626;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

.scp-category-browser-body {
    padding: 28px;
}

.scp-category-browser-help {
    margin: 0 0 20px;
    color: #64748b;
    font-size: 15px;
}

.scp-category-browser-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.scp-category-browser-item {
    min-height: 190px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 22px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    background: linear-gradient(145deg, #f8fafc, #fff);
    color: #0f172a;
    text-align: center;
    font: inherit;
    cursor: pointer;
    transition: .2s ease;
}

.scp-category-browser-item:hover {
    transform: translateY(-4px);
    border-color: #93c5fd;
    box-shadow: 0 18px 35px rgba(37, 99, 235, .12);
}

.scp-category-browser-item-icon {
    width: 76px;
    height: 76px;
    display: grid;
    place-items: center;
    border-radius: 22px;
    background: #eff6ff;
    font-size: 42px;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, .16);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7);
}

.scp-category-browser-item-icon.has-image {
    padding: 7px;
    background: linear-gradient(145deg, #ffffff, #f8fafc);
}

.scp-category-browser-item-icon img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    border-radius: 15px;
}

.scp-category-browser-item strong {
    font-size: 17px;
    line-height: 1.35;
}

.scp-category-browser-item small {
    color: #64748b;
    font-size: 12px;
}

@media (max-width: 760px) {
    .scp-category-browser {
        align-items: end;
        padding: 0;
    }

    .scp-category-browser-dialog {
        width: 100%;
        max-height: 88vh;
        border-radius: 26px 26px 0 0;
    }

    .scp-category-browser-header {
        padding: 18px 20px;
    }

    .scp-category-browser-body {
        padding: 20px;
    }

    .scp-category-browser-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .scp-category-browser-item {
        min-height: 150px;
        padding: 16px 10px;
        border-radius: 18px;
    }

    .scp-category-browser-item-icon {
        width: 60px;
        height: 60px;
        border-radius: 18px;
        font-size: 34px;
    }

    .scp-category-browser-item-icon.has-image {
        padding: 6px;
    }

    .scp-category-browser-item-icon img {
        border-radius: 12px;
    }

    .scp-category-browser-item strong {
        font-size: 14px;
    }
}

.scp-floating-whatsapp span {
    display: grid !important;
    place-items: center !important;
}

.scp-floating-whatsapp-icon {
    width: 31px !important;
    height: 31px !important;
    display: block !important;
}

@media (max-width: 700px) {
    .scp-dynamic-slider {
        overflow: hidden !important;
        isolation: isolate !important;
    }

    .scp-slider-arrow,
    .scp-dynamic-slider:has(.scp-dynamic-slide-gaming) .scp-slider-arrow {
        top: auto !important;
        bottom: 18px !important;
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        border-width: 1px !important;
        border-color: rgba(255, 255, 255, .28) !important;
        background: rgba(15, 23, 42, .58) !important;
        color: #ffffff !important;
        font-size: 26px !important;
        line-height: 1 !important;
        transform: none !important;
        box-shadow: 0 12px 26px rgba(2, 6, 23, .22) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
    }

    .scp-slider-prev,
    .scp-dynamic-slider:has(.scp-dynamic-slide-gaming) .scp-slider-prev {
        inset-inline-start: 14px !important;
    }

    .scp-slider-next,
    .scp-dynamic-slider:has(.scp-dynamic-slide-gaming) .scp-slider-next {
        inset-inline-end: 14px !important;
    }

    .scp-slider-dots {
        bottom: 29px !important;
        gap: 7px !important;
    }

    .scp-slider-dot {
        width: 9px !important;
        height: 9px !important;
    }

    .scp-slider-dot.is-active {
        width: 27px !important;
    }

    .scp-floating-whatsapp {
        left: 16px !important;
        bottom: 18px !important;
        width: 54px !important;
        height: 54px !important;
        z-index: 95 !important;
        background: linear-gradient(135deg, #25d366 0%, #16a34a 100%) !important;
        box-shadow: 0 16px 34px rgba(22, 163, 74, .34) !important;
    }

    .scp-floating-whatsapp-icon {
        width: 29px !important;
        height: 29px !important;
    }
}

@media (max-width: 390px) {
    .scp-slider-arrow,
    .scp-dynamic-slider:has(.scp-dynamic-slide-gaming) .scp-slider-arrow {
        bottom: 16px !important;
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        font-size: 24px !important;
    }

    .scp-slider-prev,
    .scp-dynamic-slider:has(.scp-dynamic-slide-gaming) .scp-slider-prev {
        inset-inline-start: 10px !important;
    }

    .scp-slider-next,
    .scp-dynamic-slider:has(.scp-dynamic-slide-gaming) .scp-slider-next {
        inset-inline-end: 10px !important;
    }
}

/* =========================================================
   Stage 118 - Mobile hero containment + menu language switcher
   Keep language controls inside the drawer and prevent slider edge overflow.
========================================================= */
.scp-mobile-language-panel {
    display: none;
}

@media (max-width: 700px) {
    html,
    body,
    .scp-storefront {
        max-width: 100%;
        overflow-x: hidden !important;
    }

    .scp-header .scp-topbar {
        padding: 12px 14px !important;
        border-radius: 0 0 18px 18px !important;
    }

    .scp-header .scp-topbar .scp-language-switcher {
        display: none !important;
    }

    .scp-header .scp-topbar-text {
        order: 1 !important;
        font-size: 12px !important;
    }

    .scp-mobile-language-panel {
        display: grid !important;
        gap: 10px !important;
        margin: 0 0 10px !important;
        padding: 14px !important;
        border: 1px solid rgba(148, 163, 184, .22) !important;
        border-radius: 20px !important;
        background: linear-gradient(135deg, rgba(37, 99, 235, .16), rgba(15, 23, 42, .06)) !important;
    }

    .scp-mobile-language-panel > span {
        color: #f8fafc !important;
        font-size: 13px !important;
        font-weight: 900 !important;
    }

    .scp-mobile-language-switcher {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(54px, 1fr)) !important;
        gap: 8px !important;
    }

    .scp-mobile-language-switcher a {
        display: grid !important;
        min-height: 42px !important;
        place-items: center !important;
        border: 1px solid rgba(255, 255, 255, .16) !important;
        border-radius: 14px !important;
        color: #e5e7eb !important;
        background: rgba(255, 255, 255, .08) !important;
        font-size: 12px !important;
        font-weight: 950 !important;
        text-decoration: none !important;
    }

    .scp-mobile-language-switcher a.active {
        color: #111827 !important;
        border-color: rgba(250, 204, 21, .7) !important;
        background: linear-gradient(135deg, #fde68a, #f59e0b) !important;
        box-shadow: 0 12px 24px rgba(245, 158, 11, .22) !important;
    }

    .scp-hero-section,
    .scp-dynamic-slider {
        width: min(100%, calc(100vw - 24px)) !important;
        max-width: calc(100vw - 24px) !important;
        margin-inline: auto !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        border-radius: 28px !important;
        clip-path: inset(0 round 28px) !important;
        contain: paint !important;
    }

    .scp-dynamic-slide,
    .scp-dynamic-slide-gaming {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        border-radius: 28px !important;
    }

    .scp-gaming-slide-art,
    .scp-gaming-slide-art img {
        width: 100% !important;
        max-width: 100% !important;
    }

    .scp-slider-arrow,
    .scp-dynamic-slider:has(.scp-dynamic-slide-gaming) .scp-slider-arrow {
        z-index: 8 !important;
        bottom: 16px !important;
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        border-radius: 999px !important;
        font-size: 22px !important;
        opacity: .92 !important;
    }

    .scp-slider-prev,
    .scp-dynamic-slider:has(.scp-dynamic-slide-gaming) .scp-slider-prev {
        inset-inline-start: 12px !important;
    }

    .scp-slider-next,
    .scp-dynamic-slider:has(.scp-dynamic-slide-gaming) .scp-slider-next {
        inset-inline-end: 12px !important;
    }

    .scp-slider-dots {
        bottom: 26px !important;
        z-index: 7 !important;
    }
}

@media (max-width: 390px) {
    .scp-hero-section,
    .scp-dynamic-slider {
        width: min(100%, calc(100vw - 16px)) !important;
        max-width: calc(100vw - 16px) !important;
        border-radius: 24px !important;
        clip-path: inset(0 round 24px) !important;
    }

    .scp-dynamic-slide,
    .scp-dynamic-slide-gaming {
        border-radius: 24px !important;
    }

    .scp-slider-prev,
    .scp-dynamic-slider:has(.scp-dynamic-slide-gaming) .scp-slider-prev {
        inset-inline-start: 9px !important;
    }

    .scp-slider-next,
    .scp-dynamic-slider:has(.scp-dynamic-slide-gaming) .scp-slider-next {
        inset-inline-end: 9px !important;
    }
}

/* =========================================================
   Stage 119 - iPhone hard guard for language + slider edge gap
   Uses container width instead of viewport math to avoid Safari side overflow.
========================================================= */
@media screen and (max-width: 767px) {
    .scp-header .scp-topbar {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 56px !important;
        padding: 12px 16px !important;
        overflow: hidden !important;
    }

    .scp-header .scp-topbar > .scp-language-switcher,
    .scp-topbar > .scp-language-switcher,
    header .scp-language-switcher:not(.scp-mobile-language-switcher) {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        max-width: 0 !important;
        max-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }

    .scp-header .scp-topbar-text {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        text-align: center !important;
    }

    .scp-mobile-language-panel {
        display: grid !important;
    }

    .scp-hero-section {
        padding-inline: 0 !important;
        margin-inline: auto !important;
        overflow: hidden !important;
    }

    .scp-hero-section,
    .scp-dynamic-slider,
    .scp-dynamic-slider:has(.scp-dynamic-slide-gaming) {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        transform: translateZ(0) !important;
        overflow: hidden !important;
        border-radius: 28px !important;
        clip-path: inset(0 0 0 0 round 28px) !important;
    }

    .scp-dynamic-slide,
    .scp-dynamic-slide-gaming,
    .scp-dynamic-slider:has(.scp-dynamic-slide-gaming) .scp-dynamic-slide-gaming {
        inset-inline: 0 !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .scp-gaming-slide-art {
        inset-inline: 0 !important;
    }

    .scp-slider-arrow,
    .scp-dynamic-slider:has(.scp-dynamic-slide-gaming) .scp-slider-arrow {
        top: auto !important;
        bottom: 16px !important;
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        font-size: 21px !important;
    }

    .scp-slider-prev,
    .scp-dynamic-slider:has(.scp-dynamic-slide-gaming) .scp-slider-prev,
    html[dir="rtl"] .scp-slider-prev,
    html[dir="rtl"] .scp-dynamic-slider:has(.scp-dynamic-slide-gaming) .scp-slider-prev {
        inset-inline-start: 14px !important;
        inset-inline-end: auto !important;
    }

    .scp-slider-next,
    .scp-dynamic-slider:has(.scp-dynamic-slide-gaming) .scp-slider-next,
    html[dir="rtl"] .scp-slider-next,
    html[dir="rtl"] .scp-dynamic-slider:has(.scp-dynamic-slide-gaming) .scp-slider-next {
        inset-inline-end: 14px !important;
        inset-inline-start: auto !important;
    }
}

/* =========================================================
   Stage 120 - Language placement final guard
   Remove topbar language duplication and style the nav/menu language block.
========================================================= */
.scp-header .scp-topbar > .scp-language-switcher,
.scp-topbar > .scp-language-switcher {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

.scp-nav[data-scp-mobile-menu] > .scp-mobile-language-panel {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-inline-start: auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.scp-nav[data-scp-mobile-menu] > .scp-mobile-language-panel > span {
    color: #1f2937 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
}

.scp-nav[data-scp-mobile-menu] > .scp-mobile-language-panel .scp-mobile-language-switcher {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
}

.scp-nav[data-scp-mobile-menu] > .scp-mobile-language-panel .scp-mobile-language-switcher a {
    display: grid !important;
    place-items: center !important;
    width: 30px !important;
    height: 30px !important;
    min-height: 0 !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 999px !important;
    color: #111827 !important;
    background: #ffffff !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    text-decoration: none !important;
}

.scp-nav[data-scp-mobile-menu] > .scp-mobile-language-panel .scp-mobile-language-switcher a.active {
    color: #111827 !important;
    border-color: rgba(245, 158, 11, .55) !important;
    background: linear-gradient(135deg, #fde68a, #f59e0b) !important;
}

@media screen and (max-width: 767px) {
    .scp-nav[data-scp-mobile-menu] > .scp-mobile-language-panel {
        display: grid !important;
        width: 100% !important;
        gap: 10px !important;
        margin: 0 0 10px !important;
        padding: 14px !important;
        border: 1px solid rgba(148, 163, 184, .22) !important;
        border-radius: 20px !important;
        background: linear-gradient(135deg, rgba(37, 99, 235, .16), rgba(15, 23, 42, .06)) !important;
    }

    .scp-nav[data-scp-mobile-menu] > .scp-mobile-language-panel > span {
        color: #f8fafc !important;
        font-size: 13px !important;
    }

    .scp-nav[data-scp-mobile-menu] > .scp-mobile-language-panel .scp-mobile-language-switcher {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(54px, 1fr)) !important;
        gap: 8px !important;
    }

    .scp-nav[data-scp-mobile-menu] > .scp-mobile-language-panel .scp-mobile-language-switcher a {
        width: auto !important;
        height: auto !important;
        min-height: 42px !important;
        border: 1px solid rgba(255, 255, 255, .16) !important;
        border-radius: 14px !important;
        color: #e5e7eb !important;
        background: rgba(255, 255, 255, .08) !important;
        font-size: 12px !important;
    }

    .scp-nav[data-scp-mobile-menu] > .scp-mobile-language-panel .scp-mobile-language-switcher a.active {
        color: #111827 !important;
        border-color: rgba(250, 204, 21, .7) !important;
        background: linear-gradient(135deg, #fde68a, #f59e0b) !important;
    }
}

/* =========================================================
   Stage 121 - Mobile drawer language readability
   Keep all language pills visible on the light mobile menu panel.
========================================================= */
@media screen and (max-width: 767px) {
    .scp-nav[data-scp-mobile-menu] > .scp-mobile-language-panel {
        background:
            linear-gradient(135deg, rgba(239, 246, 255, .98), rgba(255, 251, 235, .92)) !important;
        border-color: rgba(191, 219, 254, .9) !important;
        box-shadow: 0 14px 34px rgba(15, 23, 42, .08) !important;
    }

    .scp-nav[data-scp-mobile-menu] > .scp-mobile-language-panel > span {
        color: #0f172a !important;
        opacity: .9 !important;
    }

    .scp-nav[data-scp-mobile-menu] > .scp-mobile-language-panel .scp-mobile-language-switcher a {
        color: #0f172a !important;
        border-color: rgba(148, 163, 184, .32) !important;
        background: rgba(255, 255, 255, .82) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65) !important;
    }

    .scp-nav[data-scp-mobile-menu] > .scp-mobile-language-panel .scp-mobile-language-switcher a:hover,
    .scp-nav[data-scp-mobile-menu] > .scp-mobile-language-panel .scp-mobile-language-switcher a:focus-visible {
        color: #1d4ed8 !important;
        border-color: rgba(37, 99, 235, .35) !important;
        background: #ffffff !important;
    }

    .scp-nav[data-scp-mobile-menu] > .scp-mobile-language-panel .scp-mobile-language-switcher a.active {
        color: #111827 !important;
        border-color: rgba(245, 158, 11, .7) !important;
        background: linear-gradient(135deg, #fde68a, #f59e0b) !important;
        box-shadow: 0 12px 24px rgba(245, 158, 11, .24) !important;
    }
}

/* =========================================================
   Stage 122 - Storefront quick buy modal
========================================================= */
.scp-quick-buy-open {
    overflow: hidden !important;
}

.scp-quick-buy-modal[hidden] {
    display: none !important;
}

.scp-quick-buy-modal [hidden] {
    display: none !important;
}

.scp-quick-buy-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    height: 100dvh;
    display: grid;
    place-items: center;
    padding: 22px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.scp-quick-buy-modal::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.scp-quick-buy-backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 20%, rgba(37, 99, 235, .28), transparent 34%),
        rgba(2, 6, 23, .72);
    backdrop-filter: blur(12px);
}

.scp-quick-buy-dialog {
    position: relative;
    width: min(920px, 100%);
    display: grid;
    grid-template-columns: .84fr 1.16fr;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 28px;
    color: #f8fafc;
    background: #111827;
    box-shadow: 0 34px 90px rgba(2, 6, 23, .48);
    animation: scpQuickBuyIn .22s ease-out;
}

@media screen and (min-width: 768px) {
    .scp-quick-buy-dialog {
        height: auto;
        max-height: none;
    }

    .scp-quick-buy-panel {
        min-width: 0;
        min-height: 0;
    }

    .scp-quick-buy-main {
        overflow-x: hidden;
        overflow-y: visible;
    }

    .scp-quick-buy-actions {
        position: static;
        margin: 0;
        padding: 14px 0 0;
        border-top: 1px solid rgba(255, 255, 255, .12);
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
    }
}

@keyframes scpQuickBuyIn {
    from {
        opacity: 0;
        transform: translateY(18px) scale(.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.scp-quick-buy-close {
    position: absolute;
    top: 16px;
    inset-inline-end: 16px;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    color: #fff;
    background: rgba(15, 23, 42, .62);
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
}

.scp-quick-buy-panel {
    padding: 34px;
}

.scp-quick-buy-summary {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 28px;
    background:
        radial-gradient(circle at 22% 12%, rgba(59, 130, 246, .42), transparent 38%),
        linear-gradient(160deg, #0f172a, #1f2937 62%, #263244);
}

.scp-quick-buy-kicker {
    display: inline-flex;
    width: fit-content;
    margin-bottom: 12px;
    padding: 7px 12px;
    border-radius: 999px;
    color: #fde68a;
    background: rgba(245, 158, 11, .12);
    font-size: 12px;
    font-weight: 900;
}

.scp-quick-buy-price {
    display: block;
    color: #fff;
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 1000;
    letter-spacing: -.04em;
}

.scp-quick-buy-summary small {
    display: block;
    margin-top: 6px;
    color: #cbd5e1;
    font-weight: 800;
}

.scp-quick-buy-wallet-charge {
    margin-top: 10px;
    padding: 9px 12px;
    border: 1px solid rgba(125, 211, 252, .45);
    border-radius: 12px;
    background: rgba(14, 165, 233, .12);
    color: #dff5ff;
    font-size: 13px;
    font-weight: 900;
}

.scp-quick-buy-delivery {
    display: grid;
    gap: 12px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 20px;
    background: rgba(2, 6, 23, .34);
}

.scp-quick-buy-delivery span {
    color: #cbd5e1;
    font-weight: 900;
}

.scp-quick-buy-delivery strong {
    width: fit-content;
    padding: 8px 12px;
    border-radius: 999px;
    color: #166534;
    background: #dcfce7;
    font-size: 13px;
}

.scp-quick-buy-main {
    overflow: auto;
    background:
        radial-gradient(circle at 88% 0%, rgba(37, 99, 235, .16), transparent 28%),
        #1e293b;
}

.scp-quick-buy-loading,
.scp-quick-buy-guest {
    display: grid;
    min-height: 360px;
    place-items: center;
    text-align: center;
    color: #e2e8f0;
}

.scp-quick-buy-guest {
    align-content: center;
    gap: 16px;
}

.scp-quick-buy-guest h2 {
    margin: 0;
    color: #fff;
    font-size: 28px;
}

.scp-quick-buy-guest p {
    max-width: 360px;
    margin: 0;
    color: #cbd5e1;
    line-height: 1.8;
}

.scp-quick-buy-guest div,
.scp-quick-buy-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.scp-quick-buy-form {
    display: grid;
    gap: 18px;
}

.scp-quick-buy-product {
    display: grid;
    grid-template-columns: 92px 1fr;
    align-items: center;
    gap: 16px;
    padding-inline-end: 42px;
}

.scp-quick-buy-image {
    display: grid;
    place-items: center;
    width: 92px;
    height: 92px;
    overflow: hidden;
    border-radius: 22px;
    color: #bfdbfe;
    background: linear-gradient(135deg, #0f172a, #1d4ed8);
    font-size: 34px;
    font-weight: 1000;
}

.scp-quick-buy-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.scp-quick-buy-product span,
.scp-quick-buy-product small {
    color: #93c5fd;
    font-weight: 900;
}

.scp-quick-buy-product h2 {
    margin: 4px 0;
    color: #fff;
    font-size: clamp(22px, 4vw, 32px);
    line-height: 1.15;
}

.scp-quick-buy-variant,
.scp-quick-buy-field {
    display: grid;
    gap: 8px;
}

.scp-quick-buy-variant label,
.scp-quick-buy-field span {
    color: #e5e7eb;
    font-size: 13px;
    font-weight: 900;
}

.scp-quick-buy-field em {
    color: #fb7185;
    font-style: normal;
}

.scp-quick-buy-form input,
.scp-quick-buy-form select,
.scp-quick-buy-form textarea {
    width: 100%;
    border: 1px solid rgba(148, 163, 184, .2);
    border-radius: 16px;
    color: #f8fafc;
    background: rgba(15, 23, 42, .68);
    padding: 13px 14px;
    font: inherit;
    outline: none;
}

.scp-quick-buy-form input:focus,
.scp-quick-buy-form select:focus,
.scp-quick-buy-form textarea:focus {
    border-color: rgba(96, 165, 250, .9);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .18);
}

.scp-quick-buy-status {
    padding: 12px 14px;
    border-radius: 16px;
    color: #dbeafe;
    background: rgba(37, 99, 235, .12);
    font-weight: 800;
}

.scp-quick-buy-status.is-error {
    color: #fecaca;
    background: rgba(239, 68, 68, .15);
}

.scp-quick-buy-status.is-warn {
    color: #fde68a;
    background: rgba(245, 158, 11, .14);
}

.scp-quick-buy-status.is-success {
    color: #bbf7d0;
    background: rgba(34, 197, 94, .14);
}

.scp-quick-buy-verify {
    justify-self: start;
    border: 0;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    padding: 12px 18px;
    font-weight: 950;
    cursor: pointer;
}

.scp-quick-buy-quantity {
    display: inline-grid;
    grid-template-columns: 42px 74px 42px;
    gap: 8px;
    align-items: center;
    width: fit-content;
}

.scp-quick-buy-quantity button {
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 12px;
    color: #0f172a;
    background: #fff;
    font-size: 20px;
    font-weight: 1000;
    cursor: pointer;
}

.scp-quick-buy-quantity input {
    height: 42px;
    text-align: center;
    padding: 0;
}

.scp-quick-buy-submit,
.scp-quick-buy-primary,
.scp-quick-buy-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    border-radius: 15px;
    padding: 12px 20px;
    font-weight: 950;
    text-decoration: none;
}

.scp-quick-buy-submit,
.scp-quick-buy-primary {
    border: 0;
    color: #fff;
    background: linear-gradient(135deg, #f97316, #ea580c);
    cursor: pointer;
    box-shadow: 0 18px 30px rgba(234, 88, 12, .24);
}

.scp-quick-buy-submit:disabled,
.scp-quick-buy-verify:disabled,
.scp-quick-buy-secondary:disabled {
    cursor: not-allowed;
    opacity: .62;
    box-shadow: none;
}

.scp-quick-buy-secondary {
    border: 1px solid rgba(255, 255, 255, .16);
    color: #e2e8f0;
    background: rgba(255, 255, 255, .06);
    cursor: pointer;
}

.scp-quick-buy-details {
    flex: 0 0 100%;
    color: #bfdbfe;
    font-weight: 900;
    text-align: center;
    text-decoration: none;
}

.scp-quick-buy-details:hover {
    color: #fff;
}

@media screen and (max-width: 767px) {
    .scp-quick-buy-modal {
        align-items: start;
        padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom));
    }

    .scp-quick-buy-dialog {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        width: 100%;
        height: auto;
        max-height: none;
        border-radius: 24px;
        overflow: hidden;
    }

    .scp-quick-buy-panel {
        padding: 14px;
    }

    .scp-quick-buy-summary {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(140px, .9fr);
        align-items: center;
        gap: 10px;
        padding-inline-end: 56px;
    }

    .scp-quick-buy-price {
        font-size: clamp(28px, 9vw, 36px);
    }

    .scp-quick-buy-delivery {
        gap: 6px;
        padding: 10px;
        border-radius: 16px;
    }

    .scp-quick-buy-main {
        min-height: 0;
        overflow-x: hidden;
        overflow-y: visible;
    }

    .scp-quick-buy-form {
        gap: 12px;
    }

    .scp-quick-buy-loading,
    .scp-quick-buy-guest {
        min-height: 260px;
    }

    .scp-quick-buy-product {
        grid-template-columns: 64px 1fr;
        gap: 10px;
        padding-inline-end: 32px;
    }

    .scp-quick-buy-image {
        width: 64px;
        height: 64px;
        border-radius: 16px;
    }

    .scp-quick-buy-product h2 {
        font-size: clamp(19px, 6vw, 25px);
    }

    .scp-quick-buy-form input,
    .scp-quick-buy-form select,
    .scp-quick-buy-form textarea {
        padding: 11px 12px;
    }

    .scp-quick-buy-status {
        padding: 10px 12px;
        border-radius: 14px;
    }

    .scp-quick-buy-verify {
        padding: 10px 14px;
    }

    .scp-quick-buy-quantity {
        grid-template-columns: 38px 68px 38px;
    }

    .scp-quick-buy-quantity,
    .scp-quick-buy-quantity button,
    .scp-quick-buy-quantity input {
        height: 38px;
    }

    .scp-quick-buy-quantity button {
        width: 38px;
    }

    .scp-quick-buy-actions,
    .scp-quick-buy-guest div {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .scp-quick-buy-actions {
        position: static;
        gap: 8px;
        margin: 0 -14px -14px;
        padding: 10px 14px max(12px, env(safe-area-inset-bottom));
        border-top: 1px solid rgba(255, 255, 255, .12);
        background: rgba(15, 23, 42, .96);
        box-shadow: none;
        backdrop-filter: none;
    }

    .scp-quick-buy-primary,
    .scp-quick-buy-secondary {
        width: 100%;
    }

    .scp-quick-buy-actions .scp-quick-buy-submit,
    .scp-quick-buy-actions .scp-quick-buy-secondary {
        width: 100%;
        min-height: 42px;
        padding: 9px 11px;
    }

    .scp-quick-buy-actions .scp-quick-buy-details {
        grid-column: 1 / -1;
        padding-block: 2px;
    }
}

@media screen and (max-width: 380px), screen and (max-height: 680px) {
    .scp-quick-buy-summary {
        padding: 14px 58px 14px 14px;
    }

    [dir="rtl"] .scp-quick-buy-summary {
        padding: 14px 14px 14px 58px;
    }

    .scp-quick-buy-kicker {
        margin-bottom: 6px;
        padding: 5px 9px;
    }

    .scp-quick-buy-delivery {
        padding: 9px;
    }

    .scp-quick-buy-delivery strong {
        padding: 6px 8px;
        font-size: 11px;
    }

    .scp-quick-buy-panel.scp-quick-buy-main {
        padding: 14px;
    }
}

@media screen and (min-width: 768px) and (max-height: 820px) {
    .scp-quick-buy-modal {
        padding: 12px;
    }

    .scp-quick-buy-panel {
        padding: 24px;
    }

    .scp-quick-buy-summary {
        gap: 18px;
    }

    .scp-quick-buy-price {
        font-size: clamp(32px, 4vw, 46px);
    }

    .scp-quick-buy-delivery {
        gap: 8px;
        padding: 14px;
    }

    .scp-quick-buy-form {
        gap: 12px;
    }

    .scp-quick-buy-product {
        grid-template-columns: 74px 1fr;
        gap: 12px;
    }

    .scp-quick-buy-image {
        width: 74px;
        height: 74px;
        border-radius: 18px;
    }

    .scp-quick-buy-product h2 {
        font-size: clamp(21px, 3vw, 28px);
    }

    .scp-quick-buy-form input,
    .scp-quick-buy-form select,
    .scp-quick-buy-form textarea {
        padding: 11px 13px;
    }

    .scp-quick-buy-status {
        padding: 10px 13px;
    }

    .scp-quick-buy-verify {
        padding: 10px 16px;
    }

    .scp-quick-buy-quantity,
    .scp-quick-buy-quantity button,
    .scp-quick-buy-quantity input {
        height: 38px;
    }

    .scp-quick-buy-quantity {
        grid-template-columns: 38px 68px 38px;
    }

    .scp-quick-buy-quantity button {
        width: 38px;
    }

    .scp-quick-buy-submit,
    .scp-quick-buy-primary,
    .scp-quick-buy-secondary {
        min-height: 44px;
        padding: 10px 16px;
    }
}

/* =========================================================
   Stage 123 - Header language dropdown + icon-only product utilities
========================================================= */
.scp-header .scp-topbar .scp-language-switcher,
.scp-topbar > .scp-language-switcher {
    display: none !important;
}

.scp-language-dropdown {
    position: relative;
    z-index: 40;
}

.scp-language-dropdown summary {
    min-width: 74px;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    padding: 8px 12px;
    color: #111827;
    background: #fff;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .07);
    cursor: pointer;
    list-style: none;
}

.scp-language-dropdown summary::-webkit-details-marker {
    display: none;
}

.scp-language-dropdown summary::after {
    content: "⌄";
    color: #64748b;
    font-size: 13px;
    font-weight: 900;
}

.scp-language-flag {
    font-size: 20px;
    line-height: 1;
}

.scp-language-dropdown summary small {
    color: #111827;
    font-size: 12px;
    font-weight: 950;
}

.scp-language-dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    inset-inline-end: 0;
    min-width: 178px;
    display: grid;
    gap: 6px;
    padding: 8px;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 22px 48px rgba(15, 23, 42, .18);
}

.scp-language-dropdown:not([open]) .scp-language-dropdown-menu {
    display: none;
}

.scp-language-dropdown-menu a,
.scp-mobile-language-options a {
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 14px;
    padding: 10px 12px;
    color: #0f172a;
    text-decoration: none;
    font-weight: 900;
}

.scp-language-dropdown-menu a:hover,
.scp-language-dropdown-menu a.active,
.scp-mobile-language-options a:hover,
.scp-mobile-language-options a.active {
    color: #1d4ed8;
    background: #eff6ff;
}

.scp-language-dropdown-menu a span,
.scp-mobile-language-options a span {
    font-size: 22px;
    line-height: 1;
}

.scp-language-dropdown-menu a strong,
.scp-mobile-language-options a strong {
    font-size: 13px;
}

.scp-product-utility-form button span,
.scp-product-wishlist-form button span,
.scp-product-compare-form button span {
    display: none !important;
}

.scp-product-utility-form button,
.scp-product-wishlist-form button,
.scp-product-compare-form button {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    display: inline-grid !important;
    place-items: center !important;
    font-size: 18px !important;
    line-height: 1 !important;
}

.scp-mobile-language-panel .scp-mobile-language-switcher.scp-mobile-language-options {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.scp-mobile-language-panel .scp-mobile-language-switcher.scp-mobile-language-options a {
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    justify-content: flex-start !important;
    border: 1px solid #e5e7eb !important;
    background: #fff !important;
}

.scp-mobile-language-panel .scp-mobile-language-switcher.scp-mobile-language-options a.active {
    color: #111827 !important;
    background: linear-gradient(135deg, #fde68a, #fbbf24) !important;
    box-shadow: 0 10px 20px rgba(245, 158, 11, .18) !important;
}

.scp-mobile-language-dropdown {
    width: 100%;
}

.scp-mobile-language-dropdown summary {
    width: 100%;
    min-height: 58px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    padding: 11px 14px;
    color: #0f172a;
    background: #fff;
    cursor: pointer;
    list-style: none;
}

.scp-mobile-language-dropdown summary::-webkit-details-marker {
    display: none;
}

.scp-mobile-language-dropdown summary::after {
    content: "⌄";
    color: #64748b;
    font-weight: 950;
}

.scp-mobile-language-dropdown[open] summary::after {
    content: "⌃";
}

.scp-mobile-language-dropdown summary span {
    font-size: 24px;
}

.scp-mobile-language-dropdown summary strong {
    font-size: 14px;
    font-weight: 950;
}

.scp-mobile-language-dropdown summary small {
    color: #64748b;
    font-size: 12px;
    font-weight: 900;
}

.scp-mobile-language-dropdown .scp-mobile-language-options {
    display: grid !important;
    gap: 8px !important;
    margin-top: 8px;
    padding: 0;
}

.scp-mobile-language-dropdown .scp-mobile-language-options a {
    border: 1px solid #e5e7eb !important;
    background: #fff !important;
}

.scp-mobile-language-dropdown .scp-mobile-language-options a.active {
    color: #111827 !important;
    background: linear-gradient(135deg, #fde68a, #fbbf24) !important;
}

@media (max-width: 767px) {
    .scp-header-actions .scp-language-dropdown {
        display: none !important;
    }
}

/* =========================================================
   Stage 124 - Footer-only language selector
========================================================= */
.scp-footer-language-block {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 10px;
}

.scp-footer-language-block p {
    display: none;
}

.scp-footer-language-block h4 {
    margin: 0;
    color: #facc15;
    font-size: 13px;
    font-weight: 950;
    white-space: nowrap;
}

.scp-footer-language-options {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.scp-footer-language-options a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 999px;
    padding: 0;
    color: #e2e8f0;
    background: rgba(255, 255, 255, .09);
    text-decoration: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 10px 22px rgba(0, 0, 0, .16);
    transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.scp-footer-language-options a:hover,
.scp-footer-language-options a.active {
    transform: translateY(-2px);
    border-color: rgba(250, 204, 21, .46);
    color: #fff;
    background: rgba(250, 204, 21, .14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 14px 30px rgba(250, 204, 21, .16);
}

.scp-footer-language-options a span {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(15, 23, 42, .36);
    font-size: 17px;
    line-height: 1;
}

.scp-footer-language-options a span img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .45);
}

.scp-footer-language-options a strong {
    display: none;
}

/* =========================================================
   Stage 126 - Full background slider template
========================================================= */
.scp-dynamic-slider:has(.scp-dynamic-slide-full) {
    min-height: clamp(360px, 42vw, 560px);
    border-radius: clamp(24px, 3vw, 38px);
    background: #050816;
    isolation: isolate;
}

.scp-dynamic-slide-full,
.scp-dynamic-slider:has(.scp-dynamic-slide-full) .scp-dynamic-slide-full {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    min-height: clamp(360px, 42vw, 560px);
    padding: clamp(28px, 6vw, 82px);
    background:
        linear-gradient(90deg, rgba(2, 6, 23, .90) 0%, rgba(2, 6, 23, .58) 34%, rgba(2, 6, 23, .22) 62%, rgba(2, 6, 23, .84) 100%),
        var(--scp-full-slide-image),
        radial-gradient(circle at 50% 30%, rgba(37, 99, 235, .35), transparent 48%),
        #050816;
    background-size: cover;
    background-position: center;
    border-radius: inherit;
    overflow: hidden;
}

html[dir="rtl"] .scp-dynamic-slide-full,
html[dir="rtl"] .scp-dynamic-slider:has(.scp-dynamic-slide-full) .scp-dynamic-slide-full {
    background:
        linear-gradient(270deg, rgba(2, 6, 23, .90) 0%, rgba(2, 6, 23, .58) 34%, rgba(2, 6, 23, .22) 62%, rgba(2, 6, 23, .84) 100%),
        var(--scp-full-slide-image),
        radial-gradient(circle at 50% 30%, rgba(37, 99, 235, .35), transparent 48%),
        #050816;
    background-size: cover;
    background-position: center;
}

.scp-full-slide-backdrop {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(circle at 28% 30%, rgba(255, 255, 255, .12), transparent 18%),
        linear-gradient(180deg, transparent 50%, rgba(2, 6, 23, .52) 100%);
}

.scp-full-slide-content {
    position: relative;
    z-index: 2;
    width: min(540px, 100%);
    display: grid;
    gap: 16px;
    color: #fff;
}

.scp-dynamic-slide-full .scp-hero-badge {
    width: fit-content;
    margin: 0;
    color: #0f172a;
    background: rgba(255, 255, 255, .88);
    border-color: rgba(255, 255, 255, .48);
    backdrop-filter: blur(12px);
    font-size: var(--scp-slide-badge-size, 13px);
}

.scp-dynamic-slide-full h1 {
    margin: 0;
    max-width: 680px;
    color: #fff;
    font-size: var(--scp-slide-title-size, clamp(36px, 5vw, 72px));
    font-weight: 950;
    line-height: 1.02;
    letter-spacing: -.045em;
    text-shadow: 0 16px 38px rgba(0, 0, 0, .34);
}

.scp-dynamic-slide-full p {
    margin: 0;
    max-width: 560px;
    color: rgba(255, 255, 255, .86);
    font-size: var(--scp-slide-description-size, 17px);
    font-weight: 700;
    line-height: 1.8;
    text-shadow: 0 10px 26px rgba(0, 0, 0, .36);
}

.scp-dynamic-slide-full .scp-hero-buttons {
    margin-top: 8px;
}

.scp-dynamic-slide-full .scp-hero-buttons .scp-btn {
    font-size: var(--scp-slide-button-size, 14px);
}

.scp-dynamic-slide-full .scp-btn-primary {
    color: #0f172a;
    background: #fff;
    box-shadow: 0 18px 45px rgba(255, 255, 255, .16);
}

.scp-dynamic-slide-full .scp-btn-light {
    color: #fff;
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .26);
    backdrop-filter: blur(10px);
}

.scp-dynamic-slider:has(.scp-dynamic-slide-full) .scp-slider-arrow {
    background: rgba(15, 23, 42, .64);
    color: #fff;
    border-color: rgba(255, 255, 255, .18);
    backdrop-filter: blur(12px);
}

.scp-dynamic-slider:has(.scp-dynamic-slide-full) .scp-slider-dots {
    bottom: 22px;
}

@media (max-width: 767px) {
    .scp-dynamic-slider:has(.scp-dynamic-slide-full) {
        min-height: 520px;
        border-radius: 28px;
    }

    .scp-dynamic-slide-full,
    .scp-dynamic-slider:has(.scp-dynamic-slide-full) .scp-dynamic-slide-full,
    html[dir="rtl"] .scp-dynamic-slide-full,
    html[dir="rtl"] .scp-dynamic-slider:has(.scp-dynamic-slide-full) .scp-dynamic-slide-full {
        min-height: 520px;
        padding: 28px 22px 78px;
        align-items: end;
        background:
            linear-gradient(180deg, rgba(2, 6, 23, .14) 0%, rgba(37, 99, 235, .45) 42%, rgba(2, 6, 23, .84) 100%),
            var(--scp-full-slide-image),
            radial-gradient(circle at 50% 20%, rgba(37, 99, 235, .38), transparent 48%),
            #071225;
        background-size: cover;
        background-position: center;
    }

    .scp-full-slide-content {
        width: 100%;
        justify-items: center;
        text-align: center;
        gap: 13px;
    }

    .scp-dynamic-slide-full h1 {
        font-size: var(--scp-slide-title-size, clamp(34px, 10vw, 48px));
        line-height: 1.08;
    }

    .scp-dynamic-slide-full p {
        font-size: var(--scp-slide-description-size, 15px);
        line-height: 1.75;
    }

    .scp-dynamic-slide-full .scp-hero-buttons {
        justify-content: center;
    }

    .scp-dynamic-slider:has(.scp-dynamic-slide-full) .scp-slider-prev {
        inset-inline-start: 14px;
    }

    .scp-dynamic-slider:has(.scp-dynamic-slide-full) .scp-slider-next {
        inset-inline-end: 14px;
    }
}

/* =========================================================
   Stage 127 - Active slide alignment guard
   RTL had higher selector specificity than the active state and kept the
   slide translated by 28px, exposing the dark slider background on mobile.
========================================================= */
.scp-dynamic-slide.is-active,
html[dir="rtl"] .scp-dynamic-slide.is-active,
html[dir="ltr"] .scp-dynamic-slide.is-active {
    inset-inline: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
    transform: translateX(0) !important;
}

@media (max-width: 767px) {
    .scp-dynamic-slider,
    .scp-dynamic-slider:has(.scp-dynamic-slide-gaming),
    .scp-dynamic-slider:has(.scp-dynamic-slide-full) {
        background-clip: padding-box !important;
        overflow: hidden !important;
    }

    .scp-dynamic-slide.is-active,
    html[dir="rtl"] .scp-dynamic-slide.is-active,
    html[dir="ltr"] .scp-dynamic-slide.is-active {
        left: 0 !important;
        right: 0 !important;
        min-width: 100% !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 1200px) {
    .scp-footer-language-block {
        grid-column: span 2;
    }
}

@media (max-width: 700px) {
    .scp-footer-language-block {
        grid-column: 1 / -1;
        justify-content: center;
        padding-top: 4px;
    }

    .scp-footer-language-options {
        justify-content: center;
    }
}

/* =========================================================
   Stage 128 - Optional edge-to-edge storefront slider template
   Enabled only when an active slide uses the Full Width template.
========================================================= */
.scp-hero-section-full-width {
    width: 100%;
    max-width: none;
    padding-inline: 0 !important;
    overflow: hidden;
}

.scp-hero-section-full-width .scp-hero-container-full-width {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
    padding-inline: 0 !important;
}

.scp-dynamic-slider.scp-dynamic-slider-full-width {
    width: 100%;
    max-width: none;
    min-height: clamp(440px, 48vw, 720px);
    border-radius: 0;
    clip-path: none;
    box-shadow: none;
    background: #050816;
}

.scp-dynamic-slider-full-width .scp-dynamic-slide {
    min-height: clamp(440px, 48vw, 720px);
    border-radius: 0 !important;
}

.scp-dynamic-slider-full-width .scp-dynamic-slide-full-width {
    padding-block: clamp(48px, 7vw, 104px);
    padding-inline: max(24px, calc((100vw - 1320px) / 2 + 24px));
    background-position: center;
}

.scp-dynamic-slider-full-width .scp-dynamic-slide-full-width .scp-full-slide-content {
    width: min(620px, 100%);
}

.scp-dynamic-slider-full-width .scp-slider-prev {
    inset-inline-start: max(18px, calc((100vw - 1420px) / 2));
}

.scp-dynamic-slider-full-width .scp-slider-next {
    inset-inline-end: max(18px, calc((100vw - 1420px) / 2));
}

@media (max-width: 767px) {
    .scp-hero-section-full-width,
    .scp-hero-section-full-width .scp-hero-container-full-width,
    .scp-dynamic-slider.scp-dynamic-slider-full-width {
        width: 100% !important;
        max-width: 100% !important;
        margin-inline: 0 !important;
        border-radius: 0 !important;
        clip-path: none !important;
    }

    .scp-dynamic-slider.scp-dynamic-slider-full-width,
    .scp-dynamic-slider-full-width .scp-dynamic-slide {
        min-height: clamp(500px, 138vw, 680px);
    }

    .scp-dynamic-slider-full-width .scp-dynamic-slide-full-width {
        min-width: 100% !important;
        padding: 32px 20px 84px;
        border-radius: 0 !important;
        background-position: center;
    }

    .scp-dynamic-slider-full-width .scp-dynamic-slide-full-width .scp-full-slide-content {
        width: 100%;
        max-width: 560px;
        margin-inline: auto;
    }

    .scp-dynamic-slider-full-width .scp-slider-prev {
        inset-inline-start: 14px !important;
    }

    .scp-dynamic-slider-full-width .scp-slider-next {
        inset-inline-end: 14px !important;
    }
}

/* Wide image banner: the uploaded artwork is the slide, like large retail sites. */
.scp-dynamic-slider.scp-dynamic-slider-wide-image,
.scp-dynamic-slider-wide-image .scp-dynamic-slide-wide-image {
    min-height: clamp(280px, 32vw, 540px);
    background: #ffffff;
}

.scp-dynamic-slider-wide-image .scp-dynamic-slide-wide-image {
    display: block;
    padding: 0;
    overflow: hidden;
}

.scp-wide-image-slide-link,
.scp-wide-image-slide-link picture,
.scp-wide-image-slide-link img {
    display: block;
    width: 100%;
}

.scp-wide-image-slide-link {
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.scp-wide-image-slide-link picture {
    height: 100%;
}

.scp-wide-image-slide-link img {
    height: 100%;
    min-height: clamp(280px, 32vw, 540px);
    object-fit: cover;
    object-position: center;
}

.scp-wide-image-slide-placeholder {
    min-height: clamp(280px, 32vw, 540px);
    display: grid;
    place-content: center;
    gap: 10px;
    padding: 32px;
    text-align: center;
    color: #ffffff;
    background: linear-gradient(135deg, #0f172a, #2563eb);
}

.scp-wide-image-slide-placeholder strong {
    font-size: clamp(28px, 5vw, 64px);
}

.scp-wide-image-slide-placeholder span {
    font-size: 15px;
    font-weight: 800;
}

@media (max-width: 767px) {
    .scp-dynamic-slider.scp-dynamic-slider-wide-image,
    .scp-dynamic-slider-wide-image .scp-dynamic-slide-wide-image,
    .scp-wide-image-slide-link img,
    .scp-wide-image-slide-placeholder {
        min-height: clamp(360px, 118vw, 560px);
    }

    .scp-wide-image-slide-link img {
        object-position: center;
    }
}

/* =========================================================
   Stage 145 - Unified two-column mobile home catalogs
   Game top-ups, gift cards and best sellers match featured/latest cards.
========================================================= */
.scp-mobile-catalog-cover {
    display: none;
}

@media (max-width: 700px) {
    .scp-home-mobile-catalog-section .scp-section-heading {
        margin-bottom: 16px !important;
    }

    .scp-home-mobile-catalog-section .scp-section-heading p {
        display: none !important;
    }

    .scp-home-mobile-catalog-section .scp-home-mobile-catalog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px 12px !important;
    }

    .scp-home-mobile-catalog-section .scp-game-card,
    .scp-home-mobile-catalog-section .scp-gift-category-card {
        position: relative !important;
        min-width: 0 !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 1px solid rgba(37, 99, 235, .14) !important;
        border-radius: 18px !important;
        color: #172033 !important;
        background: #ffffff !important;
        box-shadow: 0 12px 28px rgba(15, 23, 42, .09) !important;
        transform: none !important;
    }

    .scp-home-mobile-catalog-section .scp-mobile-catalog-cover {
        width: 100% !important;
        aspect-ratio: 1 / 1 !important;
        display: grid !important;
        place-items: center !important;
        padding: 14px !important;
        overflow: hidden !important;
        background:
            linear-gradient(145deg, rgba(239, 246, 255, .78), rgba(238, 242, 255, .82)),
            var(--scp-mobile-catalog-bg, linear-gradient(145deg, #eff6ff, #eef2ff)) !important;
        background-position: center !important;
        background-size: cover !important;
        box-sizing: border-box !important;
    }

    .scp-home-mobile-catalog-section .scp-mobile-catalog-cover img {
        width: 72% !important;
        height: 72% !important;
        padding: 7px !important;
        border-radius: 20px !important;
        object-fit: contain !important;
        background: rgba(255, 255, 255, .88) !important;
        box-shadow: 0 12px 26px rgba(15, 23, 42, .13) !important;
        box-sizing: border-box !important;
    }

    .scp-home-mobile-catalog-section .scp-mobile-catalog-cover strong {
        width: 72% !important;
        height: 72% !important;
        display: grid !important;
        place-items: center !important;
        border-radius: 20px !important;
        color: #2563eb !important;
        background: rgba(255, 255, 255, .9) !important;
        font-size: 42px !important;
    }

    .scp-home-mobile-catalog-section .scp-game-card-glow,
    .scp-home-mobile-catalog-section .scp-game-card > .scp-game-card-media,
    .scp-home-mobile-catalog-section .scp-game-card-content > span,
    .scp-home-mobile-catalog-section .scp-game-card-content > p,
    .scp-home-mobile-catalog-section .scp-game-card-meta,
    .scp-home-mobile-catalog-section .scp-gift-category-card > p {
        display: none !important;
    }

    .scp-gift-card-grid .scp-gift-card-card::before {
        display: none !important;
    }

    .scp-home-mobile-catalog-section .scp-game-card-content {
        width: 100% !important;
        min-height: 62px !important;
        display: grid !important;
        place-items: center !important;
        padding: 11px 8px 4px !important;
        box-sizing: border-box !important;
    }

    .scp-home-mobile-catalog-section .scp-game-card-content h3,
    .scp-home-mobile-catalog-section .scp-gift-category-card h3 {
        display: -webkit-box !important;
        overflow: hidden !important;
        margin: 0 !important;
        color: #172033 !important;
        font-size: 14px !important;
        font-weight: 850 !important;
        line-height: 1.4 !important;
        text-align: center !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
    }

    .scp-home-mobile-catalog-section .scp-game-card > b {
        width: calc(100% - 16px) !important;
        min-height: 38px !important;
        display: grid !important;
        place-items: center !important;
        margin: 2px 8px 10px !important;
        padding: 7px 6px !important;
        border-radius: 11px !important;
        color: #ffffff !important;
        background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
        font-size: 11px !important;
        line-height: 1.25 !important;
        text-align: center !important;
        box-shadow: 0 8px 18px rgba(37, 99, 235, .22) !important;
        box-sizing: border-box !important;
    }

    .scp-home-mobile-catalog-section .scp-gift-category-card {
        justify-content: flex-start !important;
    }

    .scp-home-mobile-catalog-section .scp-gift-category-icon {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        display: grid !important;
        place-items: center !important;
        padding: 14px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: linear-gradient(145deg, #faf5ff, #eff6ff) !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
    }

    .scp-home-mobile-catalog-section .scp-gift-category-icon img {
        width: 78% !important;
        height: 78% !important;
        padding: 7px !important;
        border-radius: 18px !important;
        object-fit: contain !important;
        background: rgba(255, 255, 255, .9) !important;
        box-shadow: 0 12px 26px rgba(76, 29, 149, .12) !important;
        box-sizing: border-box !important;
    }

    .scp-home-mobile-catalog-section .scp-gift-category-card h3 {
        min-height: 62px !important;
        padding: 11px 8px 12px !important;
    }
}

/* =========================================================
   Stage 154 - Desktop home catalog showcase
   Wide artwork, floating icon and a clean VexaCard action area.
   Mobile keeps the existing compact two-column catalog.
========================================================= */
@media (min-width: 901px) {
    .scp-home-desktop-showcase-section .scp-home-mobile-catalog-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 20px !important;
    }

    .scp-home-desktop-showcase-section .scp-game-card {
        position: relative !important;
        isolation: isolate !important;
        min-width: 0 !important;
        min-height: 450px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 1px solid rgba(37, 99, 235, .13) !important;
        border-radius: 22px !important;
        color: #172033 !important;
        background: #ffffff !important;
        box-shadow: 0 16px 38px rgba(15, 23, 42, .10) !important;
        transform: translateY(0);
        transition:
            transform .24s ease,
            border-color .24s ease,
            box-shadow .24s ease !important;
    }

    .scp-home-desktop-showcase-section .scp-game-card::before,
    .scp-home-desktop-showcase-section .scp-gift-card-card::before {
        content: "" !important;
        position: absolute !important;
        inset: 0 0 auto !important;
        z-index: 0 !important;
        height: 180px !important;
        background:
            linear-gradient(180deg, rgba(3, 11, 31, .02), rgba(3, 11, 31, .20)),
            var(--scp-game-bg, linear-gradient(135deg, #12336d, #2563eb)) center / cover no-repeat !important;
        pointer-events: none !important;
    }

    .scp-home-desktop-showcase-section .scp-game-card::after {
        content: "" !important;
        position: absolute !important;
        inset: 177px 18px auto !important;
        z-index: 2 !important;
        height: 3px !important;
        border-radius: 999px !important;
        background: linear-gradient(90deg, transparent, #f5b82e, #2563eb, transparent) !important;
        opacity: .72 !important;
        pointer-events: none !important;
    }

    .scp-home-desktop-showcase-section .scp-game-card:hover {
        border-color: rgba(37, 99, 235, .34) !important;
        box-shadow: 0 24px 58px rgba(15, 23, 42, .16) !important;
        transform: translateY(-6px) !important;
    }

    .scp-home-desktop-showcase-section .scp-game-card-glow {
        display: none !important;
    }

    .scp-home-desktop-showcase-section .scp-game-card-media {
        position: absolute !important;
        inset: 135px auto auto 50% !important;
        z-index: 4 !important;
        width: 76px !important;
        height: 76px !important;
        display: grid !important;
        place-items: center !important;
        overflow: hidden !important;
        border: 6px solid #ffffff !important;
        border-radius: 21px !important;
        background: #ffffff !important;
        box-shadow: 0 13px 30px rgba(15, 23, 42, .20) !important;
        transform: translateX(-50%) !important;
    }

    .scp-home-desktop-showcase-section .scp-game-card-media img {
        width: 100% !important;
        height: 100% !important;
        padding: 0 !important;
        border-radius: 14px !important;
        object-fit: contain !important;
        background: #ffffff !important;
    }

    .scp-home-desktop-showcase-section .scp-game-card-media strong {
        color: #2563eb !important;
        font-size: 30px !important;
    }

    .scp-home-desktop-showcase-section .scp-game-card-content {
        position: relative !important;
        z-index: 3 !important;
        display: grid !important;
        gap: 9px !important;
        margin-top: 220px !important;
        padding: 0 18px !important;
    }

    .scp-home-desktop-showcase-section .scp-game-card-content > span {
        width: fit-content !important;
        padding: 6px 10px !important;
        border: 1px solid rgba(37, 99, 235, .10) !important;
        border-radius: 999px !important;
        color: #1d4ed8 !important;
        background: #eff6ff !important;
        font-size: 10px !important;
        font-weight: 900 !important;
    }

    .scp-home-desktop-showcase-section .scp-game-card-content h3 {
        min-height: 45px !important;
        display: -webkit-box !important;
        overflow: hidden !important;
        margin: 0 !important;
        color: #111827 !important;
        font-size: 17px !important;
        font-weight: 950 !important;
        line-height: 1.4 !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
    }

    .scp-home-desktop-showcase-section .scp-game-card-content p {
        min-height: 63px !important;
        display: -webkit-box !important;
        overflow: hidden !important;
        margin: 0 !important;
        color: #6b7280 !important;
        font-size: 12px !important;
        line-height: 1.75 !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 3 !important;
    }

    .scp-home-desktop-showcase-section .scp-game-card-meta {
        min-height: 25px !important;
        display: flex !important;
        gap: 6px !important;
    }

    .scp-home-desktop-showcase-section .scp-game-card-meta small {
        padding: 5px 8px !important;
        border: 1px solid rgba(245, 184, 46, .24) !important;
        border-radius: 999px !important;
        color: #8a5a00 !important;
        background: #fff8e6 !important;
        font-size: 10px !important;
        font-weight: 850 !important;
    }

    .scp-home-desktop-showcase-section .scp-game-card > b {
        position: relative !important;
        z-index: 3 !important;
        width: calc(100% - 32px) !important;
        min-height: 44px !important;
        display: grid !important;
        place-items: center !important;
        margin: auto 16px 16px !important;
        padding: 10px 12px !important;
        border-radius: 13px !important;
        color: #ffffff !important;
        background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
        font-size: 12px !important;
        font-weight: 950 !important;
        line-height: 1.3 !important;
        text-align: center !important;
        box-shadow: 0 11px 24px rgba(37, 99, 235, .25) !important;
        box-sizing: border-box !important;
    }

    .scp-home-desktop-showcase-section .scp-game-card:hover > b {
        background: linear-gradient(135deg, #1d4ed8, #12336d) !important;
        box-shadow: 0 14px 28px rgba(37, 99, 235, .32) !important;
    }
}

@media (min-width: 901px) and (max-width: 1160px) {
    .scp-home-desktop-showcase-section .scp-home-mobile-catalog-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

/* =========================================================
   Stage 128 - Compact mobile header
   The desktop announcement bar duplicates the logo tagline on phones.
========================================================= */
@media (max-width: 767px) {
    .scp-header .scp-topbar,
    .scp-header .scp-container > .scp-topbar {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        overflow: hidden !important;
    }

    .scp-header .scp-main-header {
        margin-top: 0 !important;
    }
}

/* =========================================================
   Stage 129 - Admin controlled storefront branding sizes
========================================================= */
.scp-logo-text {
    max-width: var(--scp-brand-text-width, 190px) !important;
}

.scp-logo-text strong {
    font-size: var(--scp-brand-name-size, clamp(14px, 1.15vw, 18px)) !important;
}

.scp-logo-text small {
    font-size: var(--scp-brand-tagline-size, clamp(10px, 0.85vw, 12px)) !important;
}

.scp-logo-image,
.scp-logo-mark {
    width: var(--scp-brand-logo-size, 54px) !important;
    height: var(--scp-brand-logo-size, 54px) !important;
}

@media (max-width: 767px) {
    .scp-logo-text {
        max-width: min(var(--scp-brand-text-width, 150px), 44vw) !important;
    }

    .scp-logo-image,
    .scp-logo-mark {
        width: var(--scp-brand-logo-mobile-size, var(--scp-brand-logo-size, 54px)) !important;
        height: var(--scp-brand-logo-mobile-size, var(--scp-brand-logo-size, 54px)) !important;
    }
}
/* Stage 130: Order support tickets */
.scp-support-center{margin:28px 0;padding:24px;border:1px solid #dbe4f0;border-radius:26px;background:#fff;box-shadow:0 18px 50px rgba(15,23,42,.08)}
.scp-support-head{display:flex;align-items:center;justify-content:space-between;gap:20px}.scp-support-head span{color:#2563eb;font-weight:800;font-size:.8rem}.scp-support-head h2{margin:5px 0;font-size:1.5rem;color:#0f172a}.scp-support-head p{margin:0;color:#64748b}
.scp-support-open-button,.scp-support-form button,.scp-support-reply button{border:0;border-radius:12px;padding:12px 18px;background:#2563eb;color:#fff;font-weight:800;cursor:pointer}.scp-support-form{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px;padding:20px;border-radius:18px;background:#f8fafc}.scp-support-form label{display:grid;gap:7px;font-weight:700;color:#334155}.scp-support-form .is-wide{grid-column:1/-1}.scp-support-form input,.scp-support-form select,.scp-support-form textarea,.scp-support-reply textarea{width:100%;box-sizing:border-box;border:1px solid #cbd5e1;border-radius:12px;padding:12px;background:#fff;color:#0f172a}.scp-support-form-actions{display:flex;gap:10px}.scp-support-form button.is-muted{background:#e2e8f0;color:#334155}
.scp-support-alert,.scp-support-empty{margin-top:18px;padding:14px 16px;border-radius:14px;background:#eff6ff;color:#1d4ed8}.scp-support-alert.is-success{background:#ecfdf5;color:#047857}.scp-support-alert.is-error{background:#fef2f2;color:#b91c1c}
.scp-support-ticket{margin-top:20px;padding:20px;border:1px solid #e2e8f0;border-radius:20px}.scp-support-ticket>header{display:flex;justify-content:space-between;gap:14px;align-items:start}.scp-support-ticket h3{margin:4px 0;color:#0f172a}.scp-support-ticket header small{color:#64748b}.scp-support-ticket header>span{padding:7px 11px;border-radius:999px;background:#dbeafe;color:#1d4ed8;font-weight:800;font-size:.78rem}.scp-support-ticket header>span.status-resolved,.scp-support-ticket header>span.status-closed{background:#dcfce7;color:#15803d}
.scp-support-thread{display:grid;gap:10px;margin-top:18px}.scp-support-message{max-width:80%;padding:13px 15px;border-radius:16px;background:#f1f5f9}.scp-support-message.is-staff{margin-inline-start:auto;background:#eff6ff}.scp-support-message p{margin:6px 0;white-space:pre-wrap}.scp-support-message time{font-size:.72rem;color:#64748b}.scp-support-reply{display:flex;gap:10px;align-items:end;margin-top:16px}.scp-support-reply textarea{flex:1}.scp-support-close{margin-top:10px;border:0;background:transparent;color:#64748b;text-decoration:underline;cursor:pointer}.scp-support-resolution{margin-top:15px;padding:14px;border-radius:14px;background:#ecfdf5;color:#065f46}
@media(max-width:700px){.scp-support-center{padding:16px;border-radius:20px}.scp-support-head{align-items:stretch;flex-direction:column}.scp-support-form{grid-template-columns:1fr;padding:14px}.scp-support-form label,.scp-support-form .is-wide{grid-column:1}.scp-support-message{max-width:92%}.scp-support-reply{align-items:stretch;flex-direction:column}.scp-support-open-button{width:100%}}

/* =========================================================
   Stage 131 - Complete storefront card images
   Keep category and product artwork fully visible on every viewport.
========================================================= */
.scp-category-card .scp-category-icon {
    display: grid !important;
    place-items: center !important;
    padding: 10px !important;
    box-sizing: border-box !important;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
}

.scp-category-card .scp-category-icon-image,
.scp-product-card .scp-product-image img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
    aspect-ratio: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
}

.scp-product-card .scp-product-image {
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
}

.scp-product-card .scp-product-image img {
    padding: 8px !important;
    box-sizing: border-box !important;
    background: transparent !important;
}

@media (max-width: 700px) {
    .scp-category-card .scp-category-icon {
        padding: 6px !important;
    }

    .scp-product-card .scp-product-image img {
        padding: 6px !important;
    }
}
/* Stage 138: reseller account menu and direction-safe catalog arrows */
.scp-account-dropdown{position:relative;min-width:116px;z-index:80}
.scp-account-dropdown>summary{list-style:none;width:100%;min-width:116px;padding-inline:11px;grid-template-columns:auto minmax(0,1fr) auto;gap:7px;cursor:pointer}
.scp-account-dropdown>summary::-webkit-details-marker{display:none}
.scp-account-dropdown-trigger small{max-width:128px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#172033!important;font-weight:900!important}
.scp-account-dropdown-trigger>i,.scp-account-dropdown-menu a>i,.scp-agent-catalog-view-action>i{width:7px;height:7px;display:inline-block;flex:0 0 auto;border-block-start:2px solid currentColor;border-inline-end:2px solid currentColor;transform:rotate(45deg);transition:transform .18s ease}
html[dir="rtl"] .scp-account-dropdown-trigger>i,html[dir="rtl"] .scp-account-dropdown-menu a>i,html[dir="rtl"] .scp-agent-catalog-view-action>i{transform:rotate(-135deg)}
.scp-account-dropdown[open] .scp-account-dropdown-trigger>i{transform:rotate(135deg)}
.scp-account-dropdown-menu{position:absolute;inset-block-start:calc(100% + 12px);inset-inline-start:0;width:min(310px,calc(100vw - 28px));padding:10px;border:1px solid rgba(15,23,42,.1);border-radius:20px;background:rgba(255,255,255,.98);box-shadow:0 24px 60px rgba(15,23,42,.18);animation:scp-account-menu-in .18s ease both}
@keyframes scp-account-menu-in{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:translateY(0)}}
.scp-account-dropdown-menu header{display:flex;align-items:center;gap:10px;padding:8px 9px 13px;margin-bottom:5px;border-bottom:1px solid #e8edf5}
.scp-account-dropdown-menu header>span{width:40px;height:40px;display:grid;place-items:center;border-radius:13px;background:linear-gradient(135deg,#2563eb,#172554);color:#fff;font-weight:950}
.scp-account-dropdown-menu header div{min-width:0}.scp-account-dropdown-menu header strong,.scp-account-dropdown-menu header small{display:block}.scp-account-dropdown-menu header strong{overflow:hidden;color:#0f172a;text-overflow:ellipsis;white-space:nowrap}.scp-account-dropdown-menu header small{margin-top:2px;color:#64748b;font-size:10px}
.scp-account-dropdown-menu a,.scp-account-dropdown-menu form button{width:100%;min-height:43px;display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:9px;padding:8px 10px;border:0;border-radius:12px;background:transparent;color:#263246;text-align:start;font:inherit;font-size:13px;font-weight:850;cursor:pointer}
.scp-account-dropdown-menu a:hover,.scp-account-dropdown-menu form button:hover{background:#eff6ff;color:#1d4ed8}.scp-account-dropdown-menu form{margin:5px 0 0;padding-top:5px;border-top:1px solid #e8edf5}.scp-account-dropdown-menu form button{color:#b91c1c}
.scp-agent-catalog-view-action{gap:10px}.scp-agent-catalog-view-action>i{width:8px;height:8px}

/* Stage 140: reseller price list, order tracking and quick objections */
.scp-reseller-table-filters{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:14px;padding:20px;margin:22px 0;background:#fff;border:1px solid #e4eaf4;border-radius:22px;box-shadow:0 14px 35px rgba(15,35,75,.06)}
.scp-reseller-table-filters label{display:grid;gap:7px}.scp-reseller-table-filters label>span{font-size:.76rem;font-weight:800;color:#667085}.scp-reseller-table-filters input,.scp-reseller-table-filters select,.scp-support-dialog input,.scp-support-dialog select,.scp-support-dialog textarea{width:100%;min-height:46px;border:1px solid #dbe3ef;border-radius:12px;background:#f8fafc;padding:10px 13px;color:#101828;font:inherit}.scp-filter-wide{grid-column:span 2}.scp-table-filter-actions{display:flex;align-items:end;gap:10px;grid-column:span 2}.scp-table-filter-actions>*{flex:1}
.scp-reseller-data-table-wrap{overflow:auto;background:#fff;border:1px solid #e2e8f0;border-radius:22px;box-shadow:0 16px 40px rgba(15,35,75,.07)}.scp-reseller-data-table{width:100%;min-width:1120px;border-collapse:collapse;text-align:start}.scp-reseller-data-table th{padding:15px 14px;background:#f6f8fc;color:#475467;font-size:.73rem;white-space:nowrap}.scp-reseller-data-table td{padding:14px;border-block-start:1px solid #edf1f6;color:#344054;font-size:.82rem;vertical-align:middle}.scp-reseller-data-table tbody tr:hover{background:#f8fbff}.scp-reseller-data-table td>small,.scp-table-product small,.scp-table-ticket small{display:block;margin-top:4px;color:#98a2b3;font-size:.7rem}.scp-table-product{display:flex;align-items:center;gap:11px;min-width:220px}.scp-table-product img{width:52px;height:52px;object-fit:contain;border-radius:12px;background:#f2f5fa}.scp-agent-table-price{color:#175cd3}.scp-agent-table-profit{color:#067647}.scp-table-state{display:inline-flex;padding:6px 10px;border-radius:999px;font-weight:800;font-size:.7rem}.scp-table-state.is-success{color:#067647;background:#ecfdf3}.scp-table-state.is-danger{color:#b42318;background:#fef3f2}.scp-table-actions{display:flex;gap:7px;align-items:center;flex-wrap:wrap;min-width:170px}.scp-table-action{border:0;border-radius:9px;background:#edf4ff;color:#175cd3;padding:8px 10px;font-weight:800;font-size:.72rem;text-decoration:none;cursor:pointer}.scp-table-action.is-warning{background:#fff4e5;color:#b54708}.scp-table-ticket{color:#175cd3;font-weight:800;text-decoration:none}.scp-reseller-table-heading{display:flex;justify-content:space-between;align-items:end;margin:30px 0 14px}.scp-reseller-table-heading span{color:#2563eb;font-size:.74rem;font-weight:900}.scp-reseller-table-heading h2{margin:4px 0;font-size:1.55rem}.scp-reseller-table-heading p{margin:0;color:#667085}.scp-agent-orders-list-legacy{display:none!important}
.scp-support-dialog{width:min(620px,calc(100vw - 28px));border:0;border-radius:24px;padding:0;box-shadow:0 30px 90px rgba(2,6,23,.35);color:#101828}.scp-support-dialog::backdrop{background:rgba(2,8,23,.68);backdrop-filter:blur(5px)}.scp-support-dialog form{display:grid;gap:15px;padding:24px}.scp-support-dialog label{display:grid;gap:7px;font-weight:800;color:#475467}.scp-support-dialog-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:15px;border-bottom:1px solid #e4e7ec}.scp-support-dialog-head span{color:#2563eb;font-weight:800;font-size:.76rem}.scp-support-dialog-head h3{margin:3px 0 0;font-size:1.45rem}.scp-support-dialog-head button{width:40px;height:40px;border:0;border-radius:50%;background:#fee4e2;color:#d92d20;font-size:1.4rem;cursor:pointer}.scp-support-dialog-actions{display:flex;gap:10px}.scp-support-dialog-actions>*{flex:1}
@media(max-width:850px){.scp-reseller-table-filters{grid-template-columns:1fr 1fr}.scp-filter-wide,.scp-table-filter-actions{grid-column:1/-1}.scp-reseller-data-table{min-width:0}.scp-reseller-data-table thead{display:none}.scp-reseller-data-table,.scp-reseller-data-table tbody,.scp-reseller-data-table tr,.scp-reseller-data-table td{display:block;width:100%}.scp-reseller-data-table tr{padding:12px;border-block-end:1px solid #e4e7ec}.scp-reseller-data-table td{display:grid;grid-template-columns:minmax(105px,38%) 1fr;gap:12px;padding:9px;border:0;text-align:start}.scp-reseller-data-table td::before{content:attr(data-label);font-size:.72rem;font-weight:900;color:#667085}.scp-table-product{min-width:0}.scp-table-actions{min-width:0}.scp-reseller-table-heading{align-items:start}.scp-reseller-table-heading p{font-size:.82rem}}
@media(max-width:560px){.scp-reseller-table-filters{grid-template-columns:1fr;padding:15px}.scp-filter-wide,.scp-table-filter-actions{grid-column:auto}.scp-table-filter-actions,.scp-support-dialog-actions{flex-direction:column}.scp-reseller-data-table td{grid-template-columns:100px 1fr}.scp-reseller-table-heading h2{font-size:1.3rem}}

/* Private reseller catalog accounting prices */
.scp-reseller-accounting-note{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:20px 0 14px;padding:18px 20px;border:1px solid #bfdbfe;border-radius:18px;background:linear-gradient(135deg,#eff6ff,#f8fbff);color:#173b72}.scp-reseller-accounting-note strong{display:block;font-size:1rem}.scp-reseller-accounting-note p{margin:5px 0 0;color:#5b6f8d;font-size:.8rem}.scp-reseller-accounting-note>span{flex:none;padding:7px 11px;border-radius:999px;background:#dbeafe;color:#175cd3;font-size:.72rem;font-weight:900}.scp-reseller-selling-price-form{display:flex;align-items:center;gap:6px;min-width:270px}.scp-reseller-selling-price-input{display:flex;align-items:center;min-width:130px;border:1px solid #cbd5e1;border-radius:10px;background:#fff;overflow:hidden}.scp-reseller-selling-price-input:focus-within{border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.1)}.scp-reseller-selling-price-input input{width:100%;min-width:0;padding:9px 10px;border:0;outline:0;background:transparent;font:inherit;font-weight:800;color:#102a56}.scp-reseller-selling-price-input span{padding:0 8px;color:#64748b;font-weight:800}.scp-reseller-selling-price-form button{border:0;border-radius:9px;padding:9px 11px;background:#175cd3;color:#fff;font-size:.7rem;font-weight:900;cursor:pointer;white-space:nowrap}.scp-reseller-selling-price-form button.is-clear{width:34px;padding-inline:0;background:#fff1f2;color:#be123c;font-size:1rem}.scp-agent-table-profit.is-loss{color:#b42318}.scp-reseller-profit-margin{color:#667085!important;font-weight:800}.scp-reseller-price-not-set{color:#98a2b3;font-size:.75rem;font-weight:800}
@media(max-width:850px){.scp-reseller-accounting-note{align-items:flex-start}.scp-reseller-selling-price-form{min-width:0;flex-wrap:wrap}.scp-reseller-selling-price-input{flex:1;min-width:120px}}
@media(max-width:560px){.scp-reseller-accounting-note{flex-direction:column}.scp-reseller-data-table td[data-label]{grid-template-columns:96px minmax(0,1fr)}.scp-reseller-selling-price-form button:not(.is-clear){flex:1}}
.scp-reseller-pagination{margin-top:24px}.scp-reseller-pagination nav>div:first-child{display:none}.scp-reseller-pagination nav>div:last-child{display:flex;align-items:center;justify-content:space-between;gap:12px}.scp-reseller-pagination nav span[aria-current="page"] span,.scp-reseller-pagination nav a,.scp-reseller-pagination nav span[aria-disabled="true"] span{min-width:40px;min-height:40px;display:inline-flex;align-items:center;justify-content:center;border-radius:12px!important}.scp-reseller-pagination svg{width:16px!important;height:16px!important}html[dir="rtl"] .scp-reseller-pagination svg{transform:rotate(180deg)}
@media(max-width:767px){.scp-account-dropdown{width:100%;min-width:0}.scp-account-dropdown>summary{min-width:0;height:42px!important}.scp-account-dropdown-menu{position:fixed;inset-inline:14px;inset-block-start:auto;inset-block-end:max(14px,env(safe-area-inset-bottom));width:auto;max-height:min(72vh,560px);overflow-y:auto;z-index:160}.scp-account-dropdown-trigger small{max-width:90px!important}.scp-reseller-pagination nav>div:last-child{flex-direction:column}}

/* Stage 141: customer/reseller avatars and header wallet balance */
.scp-account-dropdown-trigger>span:not(.scp-header-user-avatar),.scp-account-dropdown-menu>header>span:not(.scp-account-menu-avatar){display:none!important}.scp-header-user-avatar,.scp-account-menu-avatar{display:inline-grid!important;place-items:center;overflow:hidden;background:linear-gradient(145deg,#2563eb,#0f1f45);color:#fff;font-weight:900;border-radius:50%}.scp-header-user-avatar{width:30px;height:30px;flex:0 0 30px}.scp-account-menu-avatar{width:48px;height:48px;flex:0 0 48px}.scp-header-user-avatar img,.scp-account-menu-avatar img,.scp-profile-avatar img,.scp-account-avatar img,.scp-profile-photo-preview img{width:100%;height:100%;display:block;object-fit:cover}.scp-account-dropdown-trigger>small{display:grid;gap:1px;line-height:1.1}.scp-account-dropdown-trigger>small b{color:#067647;font-size:.66rem;direction:ltr}.scp-account-dropdown-menu header div em{display:block;margin-top:5px;color:#067647;font-size:.72rem;font-style:normal;font-weight:900;direction:ltr}.scp-profile-avatar,.scp-account-avatar{overflow:hidden}.scp-profile-photo-field{display:flex;align-items:center;gap:16px;padding:16px;margin-bottom:18px;border:1px dashed #b9c7dc;border-radius:18px;background:#f8fbff;cursor:pointer}.scp-profile-photo-preview{display:grid;place-items:center;width:76px;height:76px;flex:0 0 76px;overflow:hidden;border-radius:50%;background:linear-gradient(145deg,#2563eb,#0f1f45);color:#fff;font-size:1.65rem;font-weight:900}.scp-profile-photo-field>span:last-child{display:grid;gap:5px}.scp-profile-photo-field small{color:#667085}.scp-profile-photo-field input{max-width:100%;font-size:.8rem}
@media(max-width:767px){.scp-header-user-avatar{width:28px;height:28px;flex-basis:28px}.scp-account-dropdown-trigger>small b{font-size:.61rem}.scp-profile-photo-field{align-items:flex-start}.scp-profile-photo-preview{width:62px;height:62px;flex-basis:62px}}

/* =========================================================
   Stage 142 - Mobile app navigation and reseller form sheet
   Keep the primary account actions thumb-friendly and make the long
   reseller form reliably scrollable inside Safari's dynamic viewport.
========================================================= */
@media (max-width: 767px) {
    body.scp-storefront {
        padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px));
    }

    .scp-cookie-consent {
        bottom: calc(82px + env(safe-area-inset-bottom, 0px)) !important;
        z-index: 1100 !important;
    }

    .scp-cookie-consent-inner {
        max-height: calc(100dvh - 110px - env(safe-area-inset-bottom, 0px));
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .scp-header-actions {
        position: fixed !important;
        inset-inline: 0 !important;
        inset-block-end: 0 !important;
        z-index: 1000 !important;
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 5px !important;
        margin: 0 !important;
        padding: 7px 10px calc(7px + env(safe-area-inset-bottom, 0px)) !important;
        border-block-start: 1px solid rgba(148, 163, 184, .32) !important;
        background: rgba(255, 255, 255, .96) !important;
        box-shadow: 0 -12px 35px rgba(15, 23, 42, .12) !important;
        backdrop-filter: blur(18px) !important;
    }

    .scp-header-actions:not(:has(.scp-account-dropdown)) {
        grid-template-columns: 1fr !important;
    }

    .scp-header-actions .scp-account-dropdown {
        width: auto !important;
        min-width: 0 !important;
    }

    .scp-header-actions .scp-header-action,
    .scp-header-actions .scp-account-dropdown > summary {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 55px !important;
        height: 55px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        padding: 5px 4px !important;
        border: 0 !important;
        border-radius: 13px !important;
        background: transparent !important;
        box-shadow: none !important;
        color: #344054 !important;
    }

    .scp-header-actions .scp-header-action:active,
    .scp-header-actions .scp-account-dropdown[open] > summary {
        color: var(--scp-primary, #2563eb) !important;
        background: #eff6ff !important;
    }

    .scp-header-actions .scp-header-action > span,
    .scp-header-actions .scp-header-user-avatar {
        width: 25px !important;
        height: 25px !important;
        flex: 0 0 25px !important;
        font-size: 20px !important;
        line-height: 25px !important;
    }

    .scp-header-actions .scp-header-action > small {
        display: block !important;
        max-width: 100% !important;
        color: inherit !important;
        font-size: 10px !important;
        font-weight: 850 !important;
        line-height: 1.15 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .scp-header-actions .scp-account-dropdown-trigger > i,
    .scp-header-actions .scp-account-dropdown-trigger > small b {
        display: none !important;
    }

    .scp-header-actions .scp-cart-count-badge {
        inset-block-start: 3px !important;
        inset-inline-end: calc(50% - 24px) !important;
    }

    .scp-account-dropdown-menu {
        inset-block-end: calc(82px + env(safe-area-inset-bottom, 0px)) !important;
        max-height: min(68dvh, 560px) !important;
    }

    .scp-floating-whatsapp,
    .scp-floating-reseller {
        bottom: calc(94px + env(safe-area-inset-bottom, 0px)) !important;
    }

    html.scp-reseller-modal-open .scp-header-actions,
    html.scp-reseller-modal-open .scp-floating-reseller {
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .scp-reseller-modal-overlay {
        align-items: end !important;
        padding: 0 !important;
    }

    .scp-reseller-modal {
        width: 100% !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
    }

    .scp-reseller-modal .scp-reseller-application-card {
        width: 100% !important;
        height: 100% !important;
        max-height: 100dvh !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        border: 0 !important;
        border-radius: 0 !important;
    }

    .scp-reseller-modal .scp-reseller-application-intro {
        flex: 0 0 auto !important;
        overflow: visible !important;
        padding: calc(18px + env(safe-area-inset-top, 0px)) 54px 17px 18px !important;
    }

    .scp-reseller-modal .scp-reseller-application-intro h2 {
        margin: 8px 0 5px !important;
        font-size: 22px !important;
    }

    .scp-reseller-modal .scp-reseller-application-intro > p:not(.scp-reseller-application-note) {
        font-size: 12px !important;
        line-height: 1.55 !important;
    }

    .scp-reseller-modal .scp-reseller-application-note,
    .scp-reseller-modal .scp-reseller-application-benefits {
        display: none !important;
    }

    .scp-reseller-modal .scp-reseller-application-form-wrap {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 18px 16px calc(22px + env(safe-area-inset-bottom, 0px)) !important;
        scroll-padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .scp-reseller-modal .scp-reseller-application-form {
        gap: 14px !important;
        padding-bottom: 2px !important;
    }

    .scp-reseller-modal .scp-reseller-submit {
        min-height: 56px !important;
        margin-top: 2px !important;
        box-shadow: 0 12px 26px rgba(37, 99, 235, .28) !important;
    }

    .scp-reseller-modal-close {
        position: fixed !important;
        top: calc(10px + env(safe-area-inset-top, 0px)) !important;
        left: 12px !important;
        z-index: 6 !important;
    }
}

/* Stage 146 final cascade guard: guest account actions beside cart. */
@media (max-width: 767px) {
    .scp-header-actions:not(:has(.scp-account-dropdown)) {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .scp-header-actions .scp-mobile-guest-action {
        display: flex !important;
    }

    .scp-header-actions .scp-mobile-register-action,
    .scp-header-actions .scp-mobile-register-action:active {
        color: #ffffff !important;
        background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
        box-shadow: 0 8px 18px rgba(37, 99, 235, .22) !important;
    }
}

/* Stage 147: responsive comparison cards for phone-sized screens. */
.scp-compare-mobile {
    display: none;
}

@media (max-width: 800px) {
    .scp-compare-page {
        overflow-x: clip;
    }

    .scp-compare-actions-top {
        width: 100%;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 10px;
    }

    .scp-compare-actions-top a,
    .scp-compare-actions-top button {
        width: 100%;
        min-width: 0;
        padding-inline: 10px;
        text-align: center;
    }

    .scp-compare-desktop {
        display: none !important;
    }

    .scp-compare-mobile {
        display: grid;
        gap: 16px;
        width: 100%;
        min-width: 0;
    }

    .scp-compare-mobile-card {
        width: 100%;
        min-width: 0;
        overflow: hidden;
        border: 1px solid var(--scp-border);
        border-radius: 24px;
        background: #ffffff;
        box-shadow: var(--scp-shadow-md);
    }

    .scp-compare-mobile-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 40px;
        gap: 12px;
        align-items: start;
        padding: 14px;
        background: linear-gradient(135deg, #f8fafc, #eff6ff);
        border-bottom: 1px solid var(--scp-border-soft);
    }

    .scp-compare-mobile-product {
        min-width: 0;
        display: grid;
        grid-template-columns: 82px minmax(0, 1fr);
        gap: 12px;
        align-items: center;
        color: var(--scp-dark);
    }

    .scp-compare-mobile-product strong {
        min-width: 0;
        font-size: 15px;
        font-weight: 950;
        line-height: 1.55;
        overflow-wrap: anywhere;
    }

    .scp-compare-mobile-image {
        width: 82px;
        height: 82px;
        border-radius: 18px;
        display: grid;
        place-items: center;
        overflow: hidden;
        border: 1px solid var(--scp-border);
        background: #ffffff;
    }

    .scp-compare-mobile-image img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        padding: 7px;
    }

    .scp-compare-mobile-image > span {
        width: 48px;
        height: 48px;
        border-radius: 15px;
        display: grid;
        place-items: center;
        color: #ffffff;
        background: var(--scp-primary);
        font-size: 22px;
        font-weight: 950;
    }

    .scp-compare-mobile-head form,
    .scp-compare-mobile-head button {
        width: 40px;
        height: 40px;
        margin: 0;
    }

    .scp-compare-mobile-head button {
        display: grid;
        place-items: center;
        border: 0;
        border-radius: 13px;
        background: #fee2e2;
        color: #b91c1c;
        font-size: 23px;
        font-weight: 950;
        cursor: pointer;
    }

    .scp-compare-mobile-details {
        margin: 0;
        padding: 0 14px;
    }

    .scp-compare-mobile-details > div {
        min-width: 0;
        display: grid;
        grid-template-columns: minmax(88px, 34%) minmax(0, 1fr);
        gap: 12px;
        align-items: center;
        padding: 13px 0;
        border-bottom: 1px solid var(--scp-border-soft);
    }

    .scp-compare-mobile-details dt,
    .scp-compare-mobile-details dd {
        min-width: 0;
        margin: 0;
        overflow-wrap: anywhere;
    }

    .scp-compare-mobile-details dt {
        color: var(--scp-muted);
        font-size: 12px;
        font-weight: 900;
    }

    .scp-compare-mobile-details dd {
        color: var(--scp-dark);
        font-size: 13px;
        font-weight: 900;
    }

    .scp-compare-mobile-details .scp-compare-categories {
        justify-content: flex-start;
    }

    [dir="rtl"] .scp-compare-mobile-details .scp-compare-categories {
        justify-content: flex-start;
    }

    .scp-compare-mobile-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 10px;
        padding: 14px;
    }

    .scp-compare-mobile-actions a,
    .scp-compare-mobile-actions button {
        min-width: 0;
        min-height: 46px;
        display: grid;
        place-items: center;
        border-radius: 15px;
        padding: 8px 10px;
        border: 0;
        text-align: center;
        font-size: 12px;
        font-weight: 950;
        cursor: pointer;
    }

    .scp-compare-mobile-actions a {
        color: var(--scp-primary);
        background: var(--scp-bg-soft);
        border: 1px solid #bfdbfe;
    }

    .scp-compare-mobile-actions button {
        color: #ffffff;
        background: linear-gradient(135deg, var(--scp-primary), var(--scp-primary-hover));
    }
}

@media (max-width: 390px) {
    .scp-compare-mobile-product {
        grid-template-columns: 72px minmax(0, 1fr);
    }

    .scp-compare-mobile-image {
        width: 72px;
        height: 72px;
    }

    .scp-compare-mobile-details > div {
        grid-template-columns: minmax(82px, 32%) minmax(0, 1fr);
        gap: 9px;
    }
}

/* =========================================================
   Final guard - language flags must never leak across breakpoints.
   Keep the controls image-only and let the asset version bust stale CSS caches.
========================================================= */
.scp-desktop-language-flags,
.scp-mobile-language-flags {
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.scp-desktop-language-flags a[data-storefront-language],
.scp-mobile-language-flags a[data-storefront-language] {
    width: 40px !important;
    height: 30px !important;
    min-width: 40px !important;
    min-height: 30px !important;
    display: block !important;
    flex: 0 0 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 5px !important;
    color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    line-height: 0 !important;
    text-decoration: none !important;
}

.scp-desktop-language-flags a[data-storefront-language]:hover,
.scp-desktop-language-flags a[data-storefront-language]:focus-visible,
.scp-mobile-language-flags a[data-storefront-language]:hover,
.scp-mobile-language-flags a[data-storefront-language]:focus-visible {
    background: transparent !important;
    box-shadow: none !important;
    transform: translateY(-2px) !important;
}

.scp-desktop-language-flags .scp-language-flag-icon,
.scp-mobile-language-flags .scp-language-flag-icon,
.scp-desktop-language-flags .scp-language-flag-icon img,
.scp-mobile-language-flags .scp-language-flag-icon img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 5px !important;
    object-fit: cover !important;
}

.scp-desktop-language-flags .scp-language-flag-label,
.scp-mobile-language-flags .scp-language-flag-label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@media (min-width: 768px) {
    .scp-header .scp-topbar > .scp-desktop-language-flags {
        display: inline-flex !important;
        visibility: visible !important;
    }

    .scp-nav[data-scp-mobile-menu] > .scp-mobile-language-flags {
        display: none !important;
        visibility: hidden !important;
    }
}

@media (max-width: 767px) {
    .scp-header .scp-topbar > .scp-desktop-language-flags {
        display: none !important;
        visibility: hidden !important;
    }

    .scp-nav[data-scp-mobile-menu] > .scp-mobile-language-flags {
        width: 100% !important;
        display: flex !important;
        visibility: visible !important;
        justify-content: center !important;
        gap: 14px !important;
        margin: 0 0 14px !important;
    }

    .scp-nav[data-scp-mobile-menu] > .scp-mobile-language-flags a[data-storefront-language] {
        width: 48px !important;
        height: 36px !important;
        min-width: 48px !important;
        min-height: 36px !important;
        flex-basis: 48px !important;
    }
}

/* Final flag sizing. */
.scp-desktop-language-flags a[data-storefront-language],
.scp-mobile-language-flags a[data-storefront-language] {
    width: 30px !important;
    height: 22px !important;
    min-width: 30px !important;
    min-height: 22px !important;
    flex-basis: 30px !important;
    border-radius: 4px !important;
}

@media (max-width: 767px) {
    .scp-nav[data-scp-mobile-menu] > .scp-mobile-language-flags {
        gap: 10px !important;
    }

    .scp-nav[data-scp-mobile-menu] > .scp-mobile-language-flags a[data-storefront-language] {
        width: 34px !important;
        height: 25px !important;
        min-width: 34px !important;
        min-height: 25px !important;
        flex-basis: 34px !important;
    }
}

/* Stage 188: compact circular language switcher shared with account pages. */
.scp-desktop-language-flags a[data-storefront-language],
.scp-mobile-language-flags a[data-storefront-language] {
    width: 29px !important;
    height: 29px !important;
    min-width: 29px !important;
    min-height: 29px !important;
    display: grid !important;
    place-items: center !important;
    flex: 0 0 29px !important;
    overflow: visible !important;
    border: 1px solid rgba(255, 255, 255, .2) !important;
    border-radius: 999px !important;
    color: rgba(255, 255, 255, .78) !important;
    background: rgba(255, 255, 255, .08) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1) !important;
    line-height: 1 !important;
}

.scp-desktop-language-flags a[data-storefront-language].active,
.scp-mobile-language-flags a[data-storefront-language].active {
    border-color: #ffb703 !important;
    color: #111827 !important;
    background: #ffb703 !important;
    box-shadow: 0 5px 13px rgba(255, 183, 3, .28) !important;
}

.scp-language-code {
    display: block !important;
    color: inherit !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: -.02em !important;
}

@media (max-width: 767px) {
    .scp-nav[data-scp-mobile-menu] > .scp-mobile-language-flags {
        gap: 8px !important;
    }

    .scp-nav[data-scp-mobile-menu] > .scp-mobile-language-flags a[data-storefront-language] {
        width: 31px !important;
        height: 31px !important;
        min-width: 31px !important;
        min-height: 31px !important;
        flex-basis: 31px !important;
        border-color: #dbe3ef !important;
        color: #334155 !important;
        background: #ffffff !important;
        box-shadow: 0 5px 12px rgba(15, 23, 42, .08) !important;
    }

    .scp-nav[data-scp-mobile-menu] > .scp-mobile-language-flags a[data-storefront-language].active {
        border-color: #ffb703 !important;
        color: #111827 !important;
        background: #ffb703 !important;
    }
}

/* Stage 145: keep the primary categories compact and visually balanced. */
.scp-main-categories-section {
    padding-block: 30px !important;
}

.scp-main-categories-section .scp-section-heading {
    margin-bottom: 16px !important;
}

.scp-main-categories-section .scp-section-heading h2 {
    font-size: clamp(20px, 1.7vw, 24px) !important;
    line-height: 1.25 !important;
}

.scp-main-categories-section .scp-section-heading p {
    margin-top: 5px !important;
    font-size: 12.5px !important;
    line-height: 1.55 !important;
}

.scp-main-categories-section .scp-category-card {
    min-height: 0 !important;
    padding: 14px !important;
    gap: 8px !important;
}

.scp-main-categories-section .scp-category-icon {
    width: min(100%, 132px) !important;
    height: 88px !important;
    aspect-ratio: auto !important;
    margin-inline: auto !important;
    padding: 8px !important;
    border-radius: 16px !important;
}

.scp-main-categories-section .scp-category-icon-image {
    width: 100% !important;
    height: 100% !important;
    max-width: 116px !important;
    max-height: 72px !important;
    object-fit: contain !important;
}

.scp-main-categories-section .scp-category-card h3 {
    font-size: 15px !important;
    line-height: 1.3 !important;
}

.scp-main-categories-section .scp-category-card p {
    font-size: 11.5px !important;
    line-height: 1.45 !important;
}

@media (max-width: 700px) {
    .scp-main-categories-section {
        padding-block: 22px !important;
    }

    .scp-main-categories-section .scp-section-heading {
        margin-bottom: 12px !important;
    }

    .scp-main-categories-section .scp-section-heading h2 {
        font-size: 19px !important;
    }

    .scp-main-categories-section .scp-section-heading p {
        font-size: 11px !important;
    }

    .scp-main-categories-section .scp-category-card {
        padding: 10px 8px 12px !important;
        gap: 7px !important;
    }

    .scp-main-categories-section .scp-category-icon {
        width: min(100%, 96px) !important;
        height: 66px !important;
        padding: 5px !important;
    }

    .scp-main-categories-section .scp-category-icon-image {
        max-width: 86px !important;
        max-height: 56px !important;
    }

    .scp-main-categories-section .scp-category-card h3 {
        font-size: 13px !important;
    }
}

/* Stage 198: two-column product catalog on mobile only. */
@media (max-width: 700px) {
    .scp-products-main .scp-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .scp-products-main .scp-product-card {
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        border-radius: 17px !important;
    }

    .scp-products-main .scp-product-image {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 1 / .86 !important;
    }

    .scp-products-main .scp-product-image img {
        padding: 5px !important;
    }

    .scp-products-main .scp-product-badge,
    .scp-products-main .scp-product-type-badge {
        inset-inline-start: 7px !important;
        padding: 4px 7px !important;
        font-size: 8px !important;
    }

    .scp-products-main .scp-product-badge {
        top: 7px !important;
    }

    .scp-products-main .scp-product-type-badge {
        bottom: 7px !important;
    }

    .scp-products-main .scp-product-wishlist-form {
        top: 7px !important;
        inset-inline-end: 7px !important;
    }

    .scp-products-main .scp-product-wishlist-form button {
        width: 30px !important;
        min-width: 30px !important;
        height: 30px !important;
        min-height: 30px !important;
        font-size: 14px !important;
    }

    .scp-products-main .scp-product-body {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        min-width: 0 !important;
        padding: 10px !important;
    }

    .scp-products-main .scp-product-brand {
        margin-bottom: 5px !important;
        font-size: 9px !important;
        line-height: 1.2 !important;
    }

    .scp-products-main .scp-product-body h3 {
        min-height: 36px !important;
        display: -webkit-box !important;
        overflow: hidden !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        font-size: 12px !important;
        line-height: 1.45 !important;
    }

    .scp-products-main .scp-product-card-rating {
        gap: 4px !important;
        min-height: 18px !important;
        margin-top: 6px !important;
    }

    .scp-products-main .scp-product-card-stars {
        font-size: 10px !important;
    }

    .scp-products-main .scp-product-card-rating > span {
        font-size: 8px !important;
    }

    .scp-products-main .scp-stock-status {
        min-height: 24px !important;
        margin-top: 7px !important;
        padding: 0 8px !important;
        gap: 5px !important;
        font-size: 9px !important;
    }

    .scp-products-main .scp-stock-status span {
        width: 6px !important;
        height: 6px !important;
    }

    .scp-products-main .scp-product-price {
        flex-wrap: wrap !important;
        gap: 4px 6px !important;
        margin-top: 8px !important;
    }

    .scp-products-main .scp-product-price strong {
        font-size: 15px !important;
    }

    .scp-products-main .scp-product-price span {
        font-size: 9px !important;
    }

    .scp-products-main .scp-product-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
        margin-top: auto !important;
        padding-top: 10px !important;
    }

    .scp-products-main .scp-product-actions > a,
    .scp-products-main .scp-product-actions > form,
    .scp-products-main .scp-product-actions .scp-btn-small {
        width: 100% !important;
        min-width: 0 !important;
    }

    .scp-products-main .scp-product-actions .scp-btn-small {
        min-height: 34px !important;
        padding: 4px !important;
        border-radius: 10px !important;
        font-size: 10px !important;
        line-height: 1.2 !important;
        text-align: center !important;
    }

    .scp-products-main .scp-product-utility-row {
        gap: 6px !important;
        margin-top: 8px !important;
    }

    .scp-products-main .scp-product-utility-form button {
        width: 32px !important;
        min-width: 32px !important;
        height: 32px !important;
        min-height: 32px !important;
        font-size: 14px !important;
    }

    .scp-products-main .scp-product-utility-chip {
        display: none !important;
    }
}

/* Stage 201: two-column related products on mobile product details. */
@media (max-width: 700px) {
    .scp-related-products-section .scp-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .scp-related-products-section .scp-product-card {
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        border-radius: 17px !important;
    }

    .scp-related-products-section .scp-product-image {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 1 / .86 !important;
    }

    .scp-related-products-section .scp-product-image img {
        padding: 5px !important;
    }

    .scp-related-products-section .scp-product-wishlist-form {
        top: 7px !important;
        inset-inline-end: 7px !important;
    }

    .scp-related-products-section .scp-product-wishlist-form button {
        width: 30px !important;
        min-width: 30px !important;
        height: 30px !important;
        min-height: 30px !important;
        font-size: 14px !important;
    }

    .scp-related-products-section .scp-product-body {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        min-width: 0 !important;
        padding: 10px !important;
    }

    .scp-related-products-section .scp-product-brand {
        margin-bottom: 5px !important;
        font-size: 9px !important;
        line-height: 1.2 !important;
    }

    .scp-related-products-section .scp-product-body h3 {
        min-height: 36px !important;
        display: -webkit-box !important;
        overflow: hidden !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        font-size: 12px !important;
        line-height: 1.45 !important;
    }

    .scp-related-products-section .scp-product-card-rating {
        gap: 4px !important;
        min-height: 18px !important;
        margin-top: 6px !important;
    }

    .scp-related-products-section .scp-product-card-stars {
        font-size: 10px !important;
    }

    .scp-related-products-section .scp-product-card-rating > span {
        font-size: 8px !important;
    }

    .scp-related-products-section .scp-stock-status {
        min-height: 24px !important;
        margin-top: 7px !important;
        padding: 0 8px !important;
        gap: 5px !important;
        font-size: 9px !important;
    }

    .scp-related-products-section .scp-stock-status span {
        width: 6px !important;
        height: 6px !important;
    }

    .scp-related-products-section .scp-product-price {
        flex-wrap: wrap !important;
        gap: 4px 6px !important;
        margin-top: 8px !important;
    }

    .scp-related-products-section .scp-product-price strong {
        font-size: 15px !important;
    }

    .scp-related-products-section .scp-product-price span {
        font-size: 9px !important;
    }

    .scp-related-products-section .scp-product-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
        margin-top: auto !important;
        padding-top: 10px !important;
    }

    .scp-related-products-section .scp-product-actions .scp-btn-small {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 34px !important;
        padding: 4px !important;
        border-radius: 10px !important;
        font-size: 10px !important;
        line-height: 1.2 !important;
        text-align: center !important;
    }
}

@media (max-width: 850px) {
    .scp-reseller-data-table td.scp-reseller-order-products-cell[data-label] {
        grid-template-columns: 1fr;
    }
}