/* ================================================================
   Reset / Base
   ================================================================ */

* {

    box-sizing: border-box;

}


body {

    margin: 0;

    background: #f5f6f8;

    color: #20242c;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

}


a {

    color: inherit;

}


/* ================================================================
   Header
   ================================================================ */

.store-header {

    background: #ffffff;

    border-bottom: 1px solid #e0e3e8;

    position: sticky;

    top: 0;

    z-index: 100;

}


/* ==========================================================================
   Main Header Layout
   ========================================================================== */

.store-header-inner {
    display: grid;

    grid-template-columns:
        auto
        minmax(320px, 1fr)
        auto;

    align-items: center;

    column-gap: 24px;

    width: min(
        1400px,
        calc(100% - 40px)
    );

    min-height: 76px;

    margin: 0 auto;
}

/* ==========================================================================
   Header Left Group
   ========================================================================== */

.store-header-left {
    display: flex;

    align-items: center;

    gap: 12px;

    min-width: max-content;

    white-space: nowrap;
}


.store-header-left .store-account-menu-button {
    flex: 0 0 42px;
}


.store-header-left .store-brand {
    flex: 0 0 auto;
}


.store-brand {

    color: #202631;

    font-size: 1.35rem;

    font-weight: 800;

    text-decoration: none;

    white-space: nowrap;

}


.header-search {

    display: flex;

    width: 100%;

}


.header-search input {

    flex: 1;

    min-width: 0;

    padding: 12px 15px;

    border: 1px solid #cdd2db;

    border-right: 0;

    border-radius: 10px 0 0 10px;

    font: inherit;

}


/* ================================================================
   Header Search Submit Button
   ================================================================ */

.header-search-submit {

    padding: 0 20px;

    border: 0;

    border-radius: 0 10px 10px 0;

    background: #425fc1;

    color: #ffffff;

    font: inherit;

    font-weight: 700;

    cursor: pointer;

}



.store-nav {

    display: flex;

    align-items: center;

    gap: 8px;

}


.store-nav a {

    padding: 10px 12px;

    border-radius: 9px;

    color: #4c5360;

    text-decoration: none;

}


.store-nav a:hover {

    background: #f0f2f6;

    color: #20242c;

}


.cart-link {

    font-weight: 700;

}


/* ================================================================
   Layout
   ================================================================ */

.store-container {

    width: min(1200px, calc(100% - 40px));

    margin: 0 auto;

    padding: 40px 0 80px;

}


/* ================================================================
   Hero
   ================================================================ */

.hero {

    padding: 60px 50px;

    margin-bottom: 42px;

    border-radius: 22px;

    background:
        linear-gradient(
            135deg,
            #28344e,
            #485f96
        );

    color: #ffffff;

}


.hero-content {

    max-width: 720px;

}


.hero h1 {

    margin: 0 0 15px;

    font-size: clamp(
        2.2rem,
        5vw,
        4rem
    );

    line-height: 1.05;

}


.hero p {

    margin: 0 0 28px;

    color: #e4e8f2;

    font-size: 1.1rem;

    line-height: 1.6;

}


/* ================================================================
   Sections
   ================================================================ */

.section {

    margin-bottom: 50px;

}


.section-header {

    display: flex;

    justify-content: space-between;

    align-items: end;

    gap: 20px;

    margin-bottom: 20px;

}


.section-header h2 {

    margin: 0;

    font-size: 1.55rem;

}


.muted {

    color: #727986;

}


/* ================================================================
   Product Grid
   ================================================================ */

.product-grid {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(230px, 1fr)
        );

    gap: 20px;

}


.product-card {

    display: flex;

    flex-direction: column;

    min-height: 220px;

    padding: 22px;

    background: #ffffff;

    border: 1px solid #e0e3e8;

    border-radius: 15px;

    text-decoration: none;

    box-shadow:
        0 3px 12px rgba(0, 0, 0, 0.035);

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;

}


.product-card:hover {

    transform: translateY(-3px);

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.08);

}


.product-game {

    margin-bottom: 10px;

    color: #65719a;

    font-size: 0.8rem;

    font-weight: 750;

    text-transform: uppercase;

    letter-spacing: 0.04em;

}


.product-card h3 {

    margin: 0 0 10px;

    font-size: 1.08rem;

}


.product-card-bottom {

    margin-top: auto;

    padding-top: 18px;

}


.product-price {

    font-size: 1.25rem;

    font-weight: 800;

}


/* ================================================================
   Buttons
   ================================================================ */

.button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 11px 17px;

    border: 1px solid transparent;

    border-radius: 9px;

    font: inherit;

    font-weight: 700;

    cursor: pointer;

    text-decoration: none;

}


.button-primary {

    background: #425fc1;

    color: #ffffff;

}


.button-primary:hover {

    background: #344fae;

}


.button-secondary {

    background: #ffffff;

    color: #303744;

    border-color: #cdd2db;

}


.button-large {

    padding: 14px 22px;

}


/* ================================================================
   Cards
   ================================================================ */

.card {

    background: #ffffff;

    border: 1px solid #e0e3e8;

    border-radius: 15px;

    margin-bottom: 20px;

}


.card-body {

    padding: 24px;

}


/* ================================================================
   Search
   ================================================================ */

.search-layout {

    display: grid;

    grid-template-columns:
        240px
        minmax(0, 1fr);

    gap: 28px;

}


.filter-panel {

    align-self: start;

    padding: 22px;

    background: #ffffff;

    border: 1px solid #e0e3e8;

    border-radius: 15px;

}


.filter-group {

    margin-bottom: 20px;

}


.filter-group label {

    display: block;

    margin-bottom: 7px;

    font-weight: 700;

}


.filter-group input,
.filter-group select {

    width: 100%;

    padding: 10px;

    border: 1px solid #ccd2dc;

    border-radius: 8px;

    font: inherit;

}


/* ================================================================
   Listings
   ================================================================ */

.listing {

    display: grid;

    grid-template-columns:
        minmax(200px, 1fr)
        140px
        130px
        120px;

    align-items: center;

    gap: 20px;

    padding: 20px 0;

    border-bottom: 1px solid #e9ebef;

}


.listing:last-child {

    border-bottom: 0;

}


.listing-price {

    font-size: 1.15rem;

    font-weight: 800;

}


/* ================================================================
   Forms
   ================================================================ */

.quantity-input {

    width: 75px;

    padding: 9px;

    border: 1px solid #ccd2dc;

    border-radius: 8px;

}


/* ================================================================
   Footer
   ================================================================ */

.store-footer {

    padding: 35px 20px;

    background: #202631;

    color: #c8ced9;

    text-align: center;

}


/* ================================================================
   Responsive
   ================================================================ */

@media (max-width: 850px) {

    .store-header-inner {

        grid-template-columns:
            1fr
            auto;

        padding: 12px 0;

    }


    .header-search {

        grid-column:
            1 / -1;

        grid-row: 2;

    }


    .search-layout {

        grid-template-columns:
            1fr;

    }


    .listing {

        grid-template-columns:
            1fr;

    }

}


@media (max-width: 600px) {

    .store-container {

        width: calc(100% - 24px);

    }


    .store-header-inner {

        width: calc(100% - 24px);

    }


    .hero {

        padding: 40px 25px;

    }

}

.form-error {

    margin-top: 8px;

    color: #b83232;

    font-weight: 650;

}

.checkout-address-option {
    display: flex;
    gap: 14px;

    padding: 16px;
    margin-bottom: 12px;

    border: 1px solid #d8dce5;
    border-radius: 10px;

    background: #ffffff;

    cursor: pointer;
}


.checkout-address-option:hover {
    border-color: #9ba8d8;
}


.checkout-address-option input[type="radio"] {
    margin-top: 5px;
}

/* ================================================================
   Checkout Address Selection
   ================================================================ */

.checkout-address-list {
    display: grid;
    gap: 12px;

    margin-top: 20px;
}


.checkout-address-option {
    display: flex;
    align-items: flex-start;
    gap: 14px;

    padding: 18px;

    border: 1px solid #d8dce5;
    border-radius: 10px;

    background: #ffffff;

    cursor: pointer;

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        background 0.15s ease;
}


.checkout-address-option:hover {
    border-color: #9ba8d8;

    background: #fafbff;
}


.checkout-address-option:has(
    input[type="radio"]:checked
) {
    border-color: #425fc1;

    box-shadow:
        0 0 0 2px
        rgba(66, 95, 193, 0.10);

    background: #f8f9ff;
}


.checkout-address-radio {
    padding-top: 3px;
}


.checkout-address-radio input[type="radio"] {
    width: 18px;
    height: 18px;

    cursor: pointer;
}


.checkout-address-details {
    flex: 1;

    line-height: 1.5;
}


.checkout-address-heading {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 6px;
}


.checkout-address-default {
    display: inline-block;

    padding: 2px 8px;

    border-radius: 20px;

    background: #eef1ff;

    color: #425fc1;

    font-size: 0.78rem;
    font-weight: 700;
}


.checkout-address-phone {
    margin-top: 5px;
}


.checkout-address-actions {
    margin-top: 10px;
}


.checkout-address-edit {
    color: #425fc1;

    font-size: 0.9rem;
    font-weight: 650;

    text-decoration: none;
}


.checkout-address-edit:hover {
    text-decoration: underline;
}


.checkout-no-address {
    padding: 25px 0 10px 0;
}


/* ================================================================
   Checkout Totals
   ================================================================ */

.checkout-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 8px 0;
}


.checkout-grand-total {
    padding-top: 12px;

    font-size: 1.2rem;
}


.checkout-payment-actions {
    margin-top: 22px;
}


/* ==========================================================================
   Product Detail Page
   ========================================================================== */

.product-detail-page {
    display: flex;
    flex-direction: column;

    gap: 28px;
}


/* ==========================================================================
   Product Hero
   ========================================================================== */

.product-detail-hero {
    display: grid;

    grid-template-columns:
        minmax(260px, 360px)
        minmax(0, 1fr);

    gap: 32px;

    padding: 30px;

    background: #ffffff;

    border: 1px solid #e0e3e8;
    border-radius: 18px;

    box-shadow:
        0 4px 18px rgba(31, 39, 55, 0.045);
}


.product-image-panel {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 330px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #f4f6fa,
            #eef1f6
        );

    border: 1px solid #e0e4eb;
    border-radius: 14px;
}


.product-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    gap: 8px;

    padding: 30px;

    color: #9299a6;

    text-align: center;
}


.product-image-placeholder-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 68px;
    height: 68px;

    background: #ffffff;

    border: 1px solid #dfe3ea;
    border-radius: 14px;

    color: #687386;

    font-size: 1.8rem;
}


.product-image-placeholder strong {
    color: #68717f;

    font-size: 0.9rem;
}


.product-image-placeholder span {
    max-width: 220px;

    font-size: 0.76rem;
    line-height: 1.5;
}


.product-detail-information {
    display: flex;
    flex-direction: column;

    min-width: 0;
}


.product-detail-information h1 {
    margin: 4px 0 8px;

    color: #20242c;

    font-size: clamp(
        1.9rem,
        4vw,
        2.8rem
    );

    line-height: 1.1;
}


.product-detail-meta {
    margin-bottom: 18px;

    color: #727986;

    font-size: 0.88rem;
}


.product-detail-description {
    max-width: 800px;

    margin: 0;

    color: #4e5663;

    line-height: 1.7;
}


/* ==========================================================================
   Market Statistics
   ========================================================================== */

.product-market-stats {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 10px;

    margin-top: auto;
    padding-top: 28px;
}


.product-market-stat {
    display: flex;
    flex-direction: column;

    gap: 3px;

    padding: 14px 15px;

    background: #f7f8fa;

    border: 1px solid #e3e6eb;
    border-radius: 10px;
}


.product-market-stat-label {
    color: #818997;

    font-size: 0.65rem;
    font-weight: 800;

    letter-spacing: 0.05em;

    text-transform: uppercase;
}


.product-market-stat-value {
    color: #272d37;

    font-size: 1.18rem;
    font-weight: 800;
}


.product-market-stat-primary {
    background: #f2f4ff;

    border-color: #d9def5;
}


.product-market-stat-primary .product-market-stat-value {
    color: #425fc1;
}


/* ==========================================================================
   Market History
   ========================================================================== */

.product-market-history {
    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e0e3e8;
    border-radius: 15px;

    box-shadow:
        0 3px 12px rgba(0, 0, 0, 0.035);
}


.product-market-history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 20px 22px;

    border-bottom: 1px solid #e8eaee;
}


.product-market-history-header h2 {
    margin: 0 0 3px;

    font-size: 1.15rem;
}


.product-history-controls {
    display: inline-flex;

    padding: 3px;

    background: #f0f2f6;

    border: 1px solid #e0e3e8;
    border-radius: 9px;
}


.product-history-button {
    padding: 7px 12px;

    background: transparent;

    border: 0;
    border-radius: 6px;

    color: #68717e;

    font: inherit;
    font-size: 0.73rem;
    font-weight: 800;

    cursor: pointer;
}


.product-history-button:hover {
    color: #303744;
}


.product-history-button.active {
    background: #ffffff;

    color: #425fc1;

    box-shadow:
        0 1px 4px rgba(25, 32, 42, 0.10);
}


.product-market-chart-container {
    position: relative;

    height: 280px;

    padding: 20px 22px;
}


.product-market-chart {
    display: block;

    width: 100%;
    height: 100%;
}


.product-history-empty {
    position: absolute;

    inset: 0;

    display: none;
    align-items: center;
    justify-content: center;

    color: #89919d;

    font-size: 0.82rem;
}


/* ==========================================================================
   Seller Listing Section
   ========================================================================== */

.product-listings-section {
    margin: 0;
}


.product-listings-card {
    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e0e3e8;
    border-radius: 15px;
}


/* ==========================================================================
   Individual Seller Listing
   ========================================================================== */

.product-seller-listing {
    display: grid;

    grid-template-columns:
        minmax(220px, 1fr)
        auto;

    gap: 30px;

    padding: 22px 24px;

    border-bottom: 1px solid #e8eaee;

    transition:
        background 0.15s ease;
}


.product-seller-listing:last-child {
    border-bottom: 0;
}


.product-seller-listing:hover {
    background: #fafbfc;
}


/* ==========================================================================
   Seller Identity - Right
   ========================================================================== */

.product-listing-seller {
    grid-column: 2;
    grid-row: 1;

    display: flex;
    flex-direction: column;
    align-items: flex-end;

    min-width: 200px;

    text-align: right;
}


.product-listing-seller-name {
    color: #29303a;

    font-size: 1.08rem;
    font-weight: 800;

    text-decoration: none;
}


.product-listing-seller-name:hover {
    color: #425fc1;

    text-decoration: underline;
}


.product-listing-seller-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;

    gap: 6px;

    margin-top: 5px;

    color: #747c88;

    font-size: 0.76rem;
}


.product-listing-stars {
    color: #e5a817;

    letter-spacing: 1px;
}


.product-listing-rating-count {
    color: #959ca6;
}


.product-listing-verified {
    display: inline-flex;
    align-items: center;

    margin-top: 7px;
    padding: 3px 7px;

    background: #eaf5ef;

    border: 1px solid #cee5d7;
    border-radius: 999px;

    color: #46805d;

    font-size: 0.64rem;
    font-weight: 800;
}


/* ==========================================================================
   Price / Purchase - Left
   ========================================================================== */

.product-listing-purchase {
    grid-column: 1;
    grid-row: 1;

    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 18px;

    min-width: 0;
}


.product-listing-price-block {
    min-width: 130px;
}


.product-listing-price {
    color: #242a33;

    font-size: 1.45rem;
    font-weight: 850;

    line-height: 1.1;
}


.product-listing-shipping {
    margin-top: 4px;

    color: #747c88;

    font-size: 0.72rem;
}


.product-listing-total {
    margin-top: 2px;

    color: #59616d;

    font-size: 0.72rem;
    font-weight: 700;
}


/* ==========================================================================
   Add To Cart Pill
   ========================================================================== */

.product-cart-control {
    display: inline-flex;
    align-items: stretch;

    overflow: hidden;

    min-height: 42px;

    background: #ffffff;

    border: 1px solid #425fc1;
    border-radius: 999px;

    box-shadow:
        0 2px 7px rgba(66, 95, 193, 0.10);
}


.product-cart-quantity {
    width: auto;
    min-width: 62px;

    padding: 0 10px;

    background: #ffffff;

    border: 0;
    border-right: 1px solid #d8dded;

    color: #343b47;

    font: inherit;
    font-size: 0.8rem;
    font-weight: 750;

    cursor: pointer;

    outline: none;
}


.product-cart-add-button {
    padding: 0 18px;

    background: #425fc1;

    border: 0;

    color: #ffffff;

    font: inherit;
    font-size: 0.78rem;
    font-weight: 800;

    cursor: pointer;

    transition:
        background 0.15s ease;
}


.product-cart-add-button:hover {
    background: #344fae;
}


.product-cart-add-button:disabled,
.product-cart-quantity:disabled {
    cursor: not-allowed;

    opacity: 0.55;
}


/* ==========================================================================
   Listing Inventory Information
   ========================================================================== */

.product-listing-stock {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 8px;

    width: 100%;

    color: #818894;

    font-size: 0.72rem;
}


.product-listing-in-cart {
    display: none;

    padding: 3px 8px;

    background: #eef1ff;

    border-radius: 999px;

    color: #425fc1;

    font-size: 0.67rem;
    font-weight: 800;
}


.product-listing-in-cart.visible {
    display: inline-flex;
}


.product-listing-cart-message {
    min-height: 17px;

    width: 100%;

    color: #4e7e60;

    font-size: 0.7rem;
    font-weight: 700;
}


.product-listing-cart-message.error {
    color: #b44343;
}


/* ==========================================================================
   Empty Seller State
   ========================================================================== */

.product-listings-empty {
    padding: 45px 25px;

    color: #7d8591;

    text-align: center;
}


/* ==========================================================================
   Responsive Product Detail
   ========================================================================== */

@media (max-width: 900px) {

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


    .product-image-panel {
        min-height: 260px;
    }


    .product-market-stats {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 700px) {

    .product-market-history-header {
        align-items: flex-start;
        flex-direction: column;
    }


    .product-seller-listing {
        grid-template-columns: 1fr;

        gap: 16px;
    }


    .product-listing-purchase,
    .product-listing-seller {
        grid-column: 1;
        grid-row: auto;
    }


    .product-listing-seller {
        align-items: flex-start;

        text-align: left;
    }


    .product-listing-seller-meta {
        justify-content: flex-start;
    }

}


@media (max-width: 520px) {

    .product-detail-hero {
        padding: 20px;
    }


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


    .product-seller-listing {
        padding: 18px;
    }


    .product-listing-purchase {
        align-items: flex-start;
        flex-direction: column;
    }


    .product-cart-control {
        width: 100%;
    }


    .product-cart-quantity {
        flex: 0 0 75px;
    }


    .product-cart-add-button {
        flex: 1;
    }

}

/* ==========================================================================
   Store Cart Header Button
   ========================================================================== */

.store-cart-button {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    padding: 9px 11px;

    background: transparent;

    border: 0;
    border-radius: 9px;

    color: #4c5360;

    font: inherit;
    font-weight: 700;

    cursor: pointer;
}


.store-cart-button:hover {
    background: #f0f2f6;

    color: #20242c;
}


.store-cart-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 22px;
    height: 22px;

    padding: 0 6px;

    background: #425fc1;

    border-radius: 999px;

    color: #ffffff;

    font-size: 0.7rem;
    font-weight: 800;
}


/* ==========================================================================
   Cart Drawer Overlay
   ========================================================================== */

.cart-drawer-overlay {
    position: fixed;

    inset: 0;

    z-index: 900;

    visibility: hidden;

    background: rgba(21, 25, 32, 0.42);

    opacity: 0;

    transition:
        opacity 0.22s ease,
        visibility 0.22s ease;
}


.cart-drawer-overlay-visible {
    visibility: visible;

    opacity: 1;
}


/* ==========================================================================
   Cart Drawer
   ========================================================================== */

.cart-drawer {
    position: fixed;

    top: 0;
    right: 0;
    bottom: 0;

    z-index: 1000;

    display: flex;
    flex-direction: column;

    width: min(440px, 100vw);

    background: #ffffff;

    box-shadow:
        -12px 0 35px rgba(24, 30, 40, 0.16);

    transform: translateX(100%);

    transition:
        transform 0.25s ease;
}


.cart-drawer-open {
    transform: translateX(0);
}


.cart-drawer-body-open {
    overflow: hidden;
}


/* ==========================================================================
   Cart Drawer Header
   ========================================================================== */

.cart-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    flex-shrink: 0;

    padding: 22px 24px;

    border-bottom: 1px solid #e5e8ed;
}


.cart-drawer-header h2 {
    margin: 0;

    color: #222832;

    font-size: 1.3rem;
}


.cart-drawer-header-count {
    margin-top: 3px;

    color: #7b838f;

    font-size: 0.75rem;
}


.cart-drawer-close {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    padding: 0;

    background: #f3f4f6;

    border: 1px solid #e2e5e9;
    border-radius: 50%;

    color: #4f5763;

    font-size: 1.5rem;
    line-height: 1;

    cursor: pointer;
}


.cart-drawer-close:hover {
    background: #e9ebef;

    color: #252b34;
}


/* ==========================================================================
   Cart Drawer Content
   ========================================================================== */

.cart-drawer-content {
    flex: 1;

    min-height: 0;

    overflow-y: auto;

    padding: 0 24px;
}


/* ==========================================================================
   Cart Drawer Items
   ========================================================================== */

.cart-drawer-items {
    display: flex;
    flex-direction: column;
}


.cart-drawer-item {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap: 18px;

    padding: 20px 0;

    border-bottom: 1px solid #ebedf0;
}


.cart-drawer-item-main {
    min-width: 0;
}


.cart-drawer-item-name {
    display: block;

    overflow: hidden;

    color: #272d36;

    font-size: 0.9rem;
    font-weight: 800;

    text-decoration: none;

    text-overflow: ellipsis;
}


.cart-drawer-item-name:hover {
    color: #425fc1;
}


.cart-drawer-item-seller {
    margin-top: 4px;

    color: #969da7;

    font-size: 0.68rem;
}


.cart-drawer-item-seller a {
    color: #6c7480;

    font-weight: 700;

    text-decoration: none;
}


.cart-drawer-item-seller a:hover {
    color: #425fc1;

    text-decoration: underline;
}


.cart-drawer-item-detail {
    margin-top: 7px;

    color: #737b87;

    font-size: 0.72rem;
}


.cart-drawer-item-total {
    color: #282e38;

    font-size: 0.9rem;
    font-weight: 800;

    white-space: nowrap;
}


/* ==========================================================================
   Empty Cart Drawer
   ========================================================================== */

.cart-drawer-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    min-height: 360px;

    padding: 40px 20px;

    color: #7c8490;

    text-align: center;
}


.cart-drawer-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 62px;
    height: 62px;

    margin-bottom: 15px;

    background: #f3f5f8;

    border: 1px solid #e2e5e9;
    border-radius: 50%;

    color: #6c7582;

    font-size: 1.6rem;
}


.cart-drawer-empty h3 {
    margin: 0 0 7px;

    color: #343b45;

    font-size: 1rem;
}


.cart-drawer-empty p {
    max-width: 270px;

    margin: 0;

    font-size: 0.76rem;
    line-height: 1.55;
}


/* ==========================================================================
   Cart Drawer Footer
   ========================================================================== */

.cart-drawer-footer {
    flex-shrink: 0;

    padding: 20px 24px 24px;

    background: #fafbfc;

    border-top: 1px solid #e2e5e9;
}


.cart-drawer-total-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 18px;
}


.cart-drawer-total-label {
    display: block;

    color: #292f38;

    font-size: 0.9rem;
    font-weight: 800;
}


.cart-drawer-total-quantity {
    display: block;

    margin-top: 2px;

    color: #8b929d;

    font-size: 0.7rem;
}


.cart-drawer-grand-total {
    color: #202630;

    font-size: 1.35rem;
    font-weight: 850;
}


/* ==========================================================================
   Cart Drawer Action Buttons
   ========================================================================== */

.cart-drawer-detail-button,
.cart-drawer-checkout-button,
.cart-drawer-login-button,
.cart-drawer-button-disabled {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;

    min-height: 46px;

    padding: 11px 16px;

    border-radius: 9px;

    font-size: 0.82rem;
    font-weight: 800;

    text-align: center;
    text-decoration: none;
}


.cart-drawer-detail-button {
    margin-bottom: 9px;

    background: #ffffff;

    border: 1px solid #ccd2dc;

    color: #343b46;
}


.cart-drawer-detail-button:hover {
    background: #f2f4f7;
}


.cart-drawer-checkout-button {
    background: #425fc1;

    border: 1px solid #425fc1;

    color: #ffffff;
}


.cart-drawer-checkout-button:hover {
    background: #344fae;

    border-color: #344fae;
}


.cart-drawer-login-button {
    background: #425fc1;

    border: 1px solid #425fc1;

    color: #ffffff;
}


.cart-drawer-login-button:hover {
    background: #344fae;

    border-color: #344fae;
}


.cart-drawer-button-disabled {
    background: #d8dce3;

    border: 1px solid #d8dce3;

    color: #8d949e;

    cursor: not-allowed;
}


/* ==========================================================================
   Footer Inner Layout
   ========================================================================== */

.store-footer-inner {
    width: min(1200px, calc(100% - 40px));

    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
}


.store-footer-brand {
    display: flex;
    flex-direction: column;

    gap: 3px;

    text-align: left;
}


.store-footer-brand strong {
    color: #ffffff;

    font-size: 0.9rem;
}


.store-footer-brand span,
.store-footer-copy {
    color: #aeb6c3;

    font-size: 0.72rem;
}


/* ==========================================================================
   Cart Drawer Mobile
   ========================================================================== */

@media (max-width: 600px) {

    .cart-drawer {
        width: 100%;
    }


    .cart-drawer-header {
        padding:
            18px
            18px;
    }


    .cart-drawer-content {
        padding:
            0
            18px;
    }


    .cart-drawer-footer {
        padding:
            18px;
    }


    .store-footer-inner {
        width: calc(100% - 30px);

        align-items: flex-start;
        flex-direction: column;
    }

}


/* ==========================================================================
   Shopping Cart Page
   ========================================================================== */

.cart-page {
    width: 100%;
}


/* ==========================================================================
   Cart Page Header
   ========================================================================== */

.cart-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 30px;

    margin-bottom: 26px;
}


.cart-page-eyebrow,
.cart-section-eyebrow {
    margin-bottom: 6px;

    color: #65719a;

    font-size: 0.7rem;
    font-weight: 800;

    letter-spacing: 0.07em;

    text-transform: uppercase;
}


.cart-page-header h1 {
    margin: 0;

    color: #20242c;

    font-size: clamp(
        2rem,
        4vw,
        2.8rem
    );

    line-height: 1.1;
}


.cart-page-header p {
    max-width: 720px;

    margin:
        10px
        0
        0;

    color: #727986;

    font-size: 0.92rem;
    line-height: 1.6;
}


/* ==========================================================================
   Main Cart Layout
   ========================================================================== */

.cart-page-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        340px;

    align-items: start;

    gap: 28px;
}


.cart-page-main {
    min-width: 0;
}


/* ==========================================================================
   Reservation Notice
   ========================================================================== */

.cart-reservation-notice {
    display: flex;
    align-items: flex-start;

    gap: 14px;

    margin-bottom: 26px;
    padding: 16px 18px;

    background: #f3f5ff;

    border: 1px solid #dce1f6;
    border-radius: 12px;

    color: #4e586f;
}


.cart-reservation-notice-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 28px;

    width: 28px;
    height: 28px;

    background: #425fc1;

    border-radius: 50%;

    color: #ffffff;

    font-size: 0.78rem;
    font-weight: 850;
}


.cart-reservation-notice strong {
    display: block;

    margin-bottom: 3px;

    color: #343d55;

    font-size: 0.84rem;
}


.cart-reservation-notice p {
    margin: 0;

    color: #697287;

    font-size: 0.76rem;
    line-height: 1.5;
}


/* ==========================================================================
   Cart Section Headings
   ========================================================================== */

.cart-summary-section,
.cart-shipments-section {
    margin-bottom: 34px;
}


.cart-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 14px;
}


.cart-section-heading h2 {
    margin: 0;

    color: #262c35;

    font-size: 1.35rem;
}


.cart-section-heading p {
    max-width: 640px;

    margin:
        6px
        0
        0;

    color: #7b838f;

    font-size: 0.78rem;
    line-height: 1.5;
}


.cart-section-count {
    flex-shrink: 0;

    padding:
        6px
        10px;

    background: #eceff5;

    border-radius: 999px;

    color: #68717f;

    font-size: 0.7rem;
    font-weight: 800;
}


/* ==========================================================================
   Cart Summary Card
   ========================================================================== */

.cart-summary-card {
    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e0e3e8;
    border-radius: 15px;

    box-shadow:
        0 3px 12px rgba(0, 0, 0, 0.025);
}


/* ==========================================================================
   Cart Summary Item
   ========================================================================== */

.cart-summary-item {
    display: grid;

    grid-template-columns:
        minmax(280px, 1fr)
        100px
        150px
        115px;

    align-items: center;

    gap: 20px;

    padding: 22px;

    border-bottom: 1px solid #e9ebef;
}


.cart-summary-item:last-child {
    border-bottom: 0;
}


/* ==========================================================================
   Cart Product
   ========================================================================== */

.cart-summary-product {
    display: flex;
    align-items: center;

    gap: 15px;

    min-width: 0;
}


.cart-summary-image {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 62px;

    width: 62px;
    height: 62px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #f4f6fa,
            #eceff4
        );

    border: 1px solid #e0e4ea;
    border-radius: 10px;

    color: #949ca8;

    font-size: 1.2rem;
}


.cart-summary-product-info {
    min-width: 0;
}


.cart-summary-product-name {
    display: inline-block;

    color: #272d36;

    font-size: 0.9rem;
    font-weight: 800;

    line-height: 1.35;

    text-decoration: none;
}


.cart-summary-product-name:hover {
    color: #425fc1;

    text-decoration: underline;
}


.cart-summary-game {
    margin-top: 4px;

    color: #838b97;

    font-size: 0.7rem;
}


.cart-summary-seller {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 5px;

    margin-top: 6px;

    color: #949ba5;

    font-size: 0.68rem;
}


.cart-summary-seller a {
    color: #606a78;

    font-weight: 750;

    text-decoration: none;
}


.cart-summary-seller a:hover {
    color: #425fc1;

    text-decoration: underline;
}


/* ==========================================================================
   Verified LGS Badge
   ========================================================================== */

.cart-verified-lgs {
    display: inline-flex;
    align-items: center;

    padding:
        2px
        6px;

    background: #eaf5ef;

    border: 1px solid #cee5d7;
    border-radius: 999px;

    color: #46805d;

    font-size: 0.6rem;
    font-weight: 800;

    white-space: nowrap;
}


/* ==========================================================================
   Availability Warning
   ========================================================================== */

.cart-availability-warning {
    margin-top: 7px;

    color: #b44343;

    font-size: 0.68rem;
    font-weight: 700;
}


/* ==========================================================================
   Cart Item Price
   ========================================================================== */

.cart-summary-price {
    display: flex;
    flex-direction: column;

    gap: 2px;
}


.cart-summary-price strong {
    color: #29303a;

    font-size: 0.95rem;
}


.cart-summary-price > span:last-child {
    color: #9097a1;

    font-size: 0.67rem;
}


.cart-summary-column-label {
    margin-bottom: 3px;

    color: #9299a4;

    font-size: 0.62rem;
    font-weight: 800;

    letter-spacing: 0.04em;

    text-transform: uppercase;
}


/* ==========================================================================
   Quantity Controls
   ========================================================================== */

.cart-summary-quantity {
    min-width: 0;
}


.cart-quantity-form {
    display: flex;
    align-items: center;

    gap: 6px;
}


.cart-page-quantity-input {
    width: 58px;

    padding: 8px;

    text-align: center;
}


.cart-update-button {
    padding:
        8px
        9px;

    background: #ffffff;

    border: 1px solid #ccd2dc;
    border-radius: 7px;

    color: #555e6b;

    font: inherit;
    font-size: 0.67rem;
    font-weight: 800;

    cursor: pointer;
}


.cart-update-button:hover {
    background: #f2f4f7;

    color: #303744;
}


/* ==========================================================================
   Line Total / Remove
   ========================================================================== */

.cart-summary-line-total {
    display: flex;
    align-items: flex-end;
    flex-direction: column;

    text-align: right;
}


.cart-summary-line-total strong {
    color: #242a33;

    font-size: 1rem;
}


.cart-remove-button {
    margin-top: 8px;
    padding: 0;

    background: transparent;

    border: 0;

    color: #a14a4a;

    font: inherit;
    font-size: 0.67rem;
    font-weight: 750;

    cursor: pointer;
}


.cart-remove-button:hover {
    color: #c03c3c;

    text-decoration: underline;
}


/* ==========================================================================
   Shipment List
   ========================================================================== */

.cart-shipment-list {
    display: flex;
    flex-direction: column;

    gap: 15px;
}


/* ==========================================================================
   Shipment Card
   ========================================================================== */

.cart-shipment-card {
    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e0e3e8;
    border-radius: 15px;

    box-shadow:
        0 3px 12px rgba(0, 0, 0, 0.025);
}


/* ==========================================================================
   Shipment Header
   ========================================================================== */

.cart-shipment-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 25px;

    padding: 18px 20px;

    background: #fafbfc;

    border-bottom: 1px solid #e6e9ed;
}


.cart-shipment-number {
    margin-bottom: 3px;

    color: #8a929e;

    font-size: 0.62rem;
    font-weight: 850;

    letter-spacing: 0.06em;

    text-transform: uppercase;
}


.cart-shipment-business {
    color: #282f39;

    font-size: 1rem;
    font-weight: 850;

    text-decoration: none;
}


.cart-shipment-business:hover {
    color: #425fc1;

    text-decoration: underline;
}


.cart-shipment-business-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 8px;

    margin-top: 6px;

    color: #848c98;

    font-size: 0.68rem;
}


.cart-shipment-cost {
    display: flex;
    align-items: flex-end;
    flex-direction: column;

    flex-shrink: 0;
}


.cart-shipment-cost span {
    color: #8a929d;

    font-size: 0.65rem;
}


.cart-shipment-cost strong {
    margin-top: 2px;

    color: #303641;

    font-size: 0.95rem;
}


/* ==========================================================================
   Shipment Items
   ========================================================================== */

.cart-shipment-items {
    padding:
        4px
        20px;
}


.cart-shipment-item {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding:
        13px
        0;

    border-bottom: 1px solid #edf0f3;
}


.cart-shipment-item:last-child {
    border-bottom: 0;
}


.cart-shipment-item-info {
    display: flex;
    flex-direction: column;

    gap: 4px;

    min-width: 0;
}


.cart-shipment-item-info a {
    overflow: hidden;

    color: #3b424d;

    font-size: 0.78rem;
    font-weight: 750;

    text-decoration: none;

    text-overflow: ellipsis;
}


.cart-shipment-item-info a:hover {
    color: #425fc1;
}


.cart-shipment-item-info span {
    color: #9299a4;

    font-size: 0.66rem;
}


.cart-shipment-item > strong {
    flex-shrink: 0;

    color: #343b46;

    font-size: 0.8rem;
}


/* ==========================================================================
   Shipment Footer
   ========================================================================== */

.cart-shipment-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding:
        12px
        20px;

    background: #fafbfc;

    border-top: 1px solid #e8eaee;

    color: #7e8692;

    font-size: 0.67rem;
}


.cart-shipment-footer strong {
    color: #555e6a;
}


/* ==========================================================================
   Sticky Order Aside
   ========================================================================== */

.cart-order-aside {
    position: sticky;

    top: 100px;

    align-self: start;
}


.cart-order-summary {
    overflow: hidden;

    background: #ffffff;

    border: 1px solid #dfe3e8;
    border-radius: 15px;

    box-shadow:
        0 7px 24px rgba(27, 34, 46, 0.07);
}


/* ==========================================================================
   Aside Header
   ========================================================================== */

.cart-order-summary-header {
    padding:
        20px
        21px;

    border-bottom: 1px solid #e8eaee;
}


.cart-order-summary-header h2 {
    margin: 0;

    color: #262c35;

    font-size: 1.15rem;
}


.cart-order-summary-header span {
    display: block;

    margin-top: 4px;

    color: #89919d;

    font-size: 0.7rem;
}


/* ==========================================================================
   Aside Cost Breakdown
   ========================================================================== */

.cart-order-costs {
    padding:
        16px
        21px;
}


.cart-order-cost-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding:
        6px
        0;

    color: #6f7783;

    font-size: 0.78rem;
}


.cart-order-cost-row strong {
    color: #414852;

    font-weight: 750;
}


/* ==========================================================================
   Aside Grand Total
   ========================================================================== */

.cart-order-grand-total {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding:
        17px
        21px;

    background: #f7f8fa;

    border-top: 1px solid #e6e9ed;
    border-bottom: 1px solid #e6e9ed;
}


.cart-order-grand-total > div {
    display: flex;
    flex-direction: column;
}


.cart-order-grand-total span {
    color: #333a44;

    font-size: 0.8rem;
    font-weight: 850;
}


.cart-order-grand-total small {
    margin-top: 2px;

    color: #959ca6;

    font-size: 0.6rem;
}


.cart-order-grand-total > strong {
    color: #202630;

    font-size: 1.3rem;
    font-weight: 850;

    white-space: nowrap;
}


/* ==========================================================================
   Aside Checkout
   ========================================================================== */

.cart-order-actions {
    padding:
        18px
        21px;
}


.cart-order-actions form {
    margin: 0;
}


.cart-order-checkout-button {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;

    min-height: 48px;

    padding:
        12px
        16px;

    background: #425fc1;

    border: 1px solid #425fc1;
    border-radius: 9px;

    color: #ffffff;

    font: inherit;
    font-size: 0.8rem;
    font-weight: 850;

    text-align: center;
    text-decoration: none;

    cursor: pointer;

    transition:
        background 0.15s ease,
        border-color 0.15s ease;
}


.cart-order-checkout-button:hover {
    background: #344fae;

    border-color: #344fae;
}


.cart-order-login-note {
    margin:
        9px
        4px
        0;

    color: #8c939e;

    font-size: 0.65rem;
    line-height: 1.45;

    text-align: center;
}


/* ==========================================================================
   Aside Information
   ========================================================================== */

.cart-order-information {
    padding:
        0
        21px
        20px;
}


.cart-order-information-row {
    display: flex;
    align-items: flex-start;

    gap: 8px;

    padding-top: 10px;

    color: #858d98;

    font-size: 0.65rem;
    line-height: 1.45;
}


.cart-order-information-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 18px;

    width: 18px;
    height: 18px;

    background: #eaf5ef;

    border-radius: 50%;

    color: #46805d;

    font-size: 0.58rem;
    font-weight: 900;
}


/* ==========================================================================
   Empty Cart Page
   ========================================================================== */

.cart-empty-page {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    min-height: 460px;

    padding:
        60px
        30px;

    background: #ffffff;

    border: 1px solid #e0e3e8;
    border-radius: 16px;

    text-align: center;
}


.cart-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 72px;
    height: 72px;

    margin-bottom: 18px;

    background: #f2f4f7;

    border: 1px solid #e1e4e9;
    border-radius: 50%;

    color: #8a929e;

    font-size: 1.8rem;
}


.cart-empty-page h2 {
    margin:
        0
        0
        8px;

    color: #303640;
}


.cart-empty-page p {
    max-width: 460px;

    margin:
        0
        0
        22px;

    color: #7d8591;

    font-size: 0.85rem;
    line-height: 1.6;
}


/* ==========================================================================
   Cart Responsive - Medium
   ========================================================================== */

@media (max-width: 1050px) {

    .cart-page-layout {
        grid-template-columns:
            minmax(0, 1fr)
            300px;

        gap: 20px;
    }


    .cart-summary-item {
        grid-template-columns:
            minmax(230px, 1fr)
            90px
            130px;

        gap: 16px;
    }


    .cart-summary-line-total {
        grid-column:
            2 / -1;

        align-items: center;
        flex-direction: row;
        justify-content: flex-end;

        gap: 14px;
    }


    .cart-summary-line-total .cart-summary-column-label {
        display: none;
    }


    .cart-remove-button {
        margin-top: 0;
    }

}


/* ==========================================================================
   Cart Responsive - Tablet
   ========================================================================== */

@media (max-width: 850px) {

    .cart-page-layout {
        grid-template-columns: 1fr;
    }


    .cart-order-aside {
        position: static;

        order: -1;
    }


    .cart-summary-item {
        grid-template-columns:
            minmax(0, 1fr)
            auto;
    }


    .cart-summary-product {
        grid-column:
            1 / -1;
    }


    .cart-summary-price,
    .cart-summary-quantity {
        align-self: start;
    }


    .cart-summary-line-total {
        grid-column:
            1 / -1;
    }

}


/* ==========================================================================
   Cart Responsive - Mobile
   ========================================================================== */

@media (max-width: 600px) {

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


    .cart-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }


    .cart-summary-item {
        grid-template-columns: 1fr;

        padding: 18px;
    }


    .cart-summary-product,
    .cart-summary-line-total {
        grid-column: 1;
    }


    .cart-summary-price,
    .cart-summary-quantity,
    .cart-summary-line-total {
        align-items: flex-start;

        text-align: left;
    }


    .cart-summary-line-total {
        flex-direction: column;

        gap: 4px;
    }


    .cart-remove-button {
        margin-top: 4px;
    }


    .cart-shipment-header {
        align-items: flex-start;
        flex-direction: column;
    }


    .cart-shipment-cost {
        align-items: flex-start;
    }


    .cart-shipment-footer {
        align-items: flex-start;
        flex-direction: column;
    }

}

/* ==========================================================================
   Header Search Container
   ========================================================================== */

.header-search-container {
    position: relative;

    width: 100%;

    min-width: 0;

    max-width: none;

    margin: 0;
}

.header-search {

    display: flex;

    align-items: stretch;

    width: 100%;

    min-height: 44px;

    background: #ffffff;

    border:
        1px solid
        #d6d9df;

    border-radius: 999px;

    overflow: hidden;

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;

}


.header-search:focus-within {

    border-color:
        #303640;

    box-shadow:
        0
        0
        0
        3px
        rgba(30, 35, 43, 0.08);

}



/* ==========================================================================
   Search Category
   ========================================================================== */


.header-search-filter {

    position: relative;

    display: flex;

    align-items: center;

    flex: 0 0 auto;

    border-right:
        1px solid
        #e1e3e7;

}


.header-search-filter::after {

    content: "";

    position: absolute;

    right: 14px;

    width: 6px;

    height: 6px;

    border-right:
        1.5px solid
        #555c66;

    border-bottom:
        1.5px solid
        #555c66;

    transform:
        rotate(45deg)
        translateY(-2px);

    pointer-events: none;

}


.header-search-filter select {

    height: 100%;

    padding:
        0
        36px
        0
        18px;

    background:
        #f5f6f7;

    border: none;

    outline: none;

    color:
        #353a42;

    cursor: pointer;

    font-size: 0.78rem;

    font-weight: 700;

    appearance: none;

    -webkit-appearance: none;

}


.header-search-filter select:hover {

    background:
        #eceef1;

}



/* ==========================================================================
   Search Input
   ========================================================================== */


.header-search-input-wrap {

    display: flex;

    align-items: center;

    flex: 1;

    min-width: 0;

}


.header-search-input-wrap input {

    width: 100%;

    height: 100%;

    padding:
        0
        18px;

    background: transparent;

    border: none;

    outline: none;

    color:
        #1e232b;

    font-size: 0.88rem;

}


.header-search-input-wrap input::placeholder {

    color:
        #858b94;

}



/* ==========================================================================
   Search Submit
   ========================================================================== */


.header-search-submit {

    flex: 0 0 auto;

    padding:
        0
        23px;

    background:
        #1e232b;

    border: none;

    color:
        #ffffff;

    cursor: pointer;

    font-size: 0.78rem;

    font-weight: 800;

    transition:
        background
        0.15s ease;

}


.header-search-submit:hover {

    background:
        #343b46;

}



/* ==========================================================================
   Search Suggestions
   ========================================================================== */


.header-search-suggestions {

    position: absolute;

    z-index: 1000;

    top:
        calc(100% + 8px);

    left: 0;

    right: 0;

    max-height: 440px;

    overflow-y: auto;

    background:
        #ffffff;

    border:
        1px solid
        #dfe2e7;

    border-radius: 14px;

    box-shadow:
        0
        16px
        45px
        rgba(0, 0, 0, 0.16);

}


.header-search-suggestions[hidden] {

    display: none;

}



/* ==========================================================================
   Individual Suggestion
   ========================================================================== */


.header-search-suggestion {

    display: flex;

    align-items: center;

    gap: 13px;

    padding:
        10px
        13px;

    color:
        #22272e;

    text-decoration: none;

    border-bottom:
        1px solid
        #eef0f2;

    transition:
        background
        0.12s ease;

}


.header-search-suggestion:last-child {

    border-bottom: none;

}


.header-search-suggestion:hover,
.header-search-suggestion.active {

    background:
        #f3f5f7;

}



/* ==========================================================================
   Suggestion Image
   ========================================================================== */


.header-search-suggestion-image {

    display: flex;

    align-items: center;

    justify-content: center;

    flex:
        0
        0
        52px;

    width: 52px;

    height: 52px;

    overflow: hidden;

    background:
        #f0f1f3;

    border:
        1px solid
        #e1e3e6;

    border-radius: 8px;

}


.header-search-suggestion-image img {

    width: 100%;

    height: 100%;

    object-fit: contain;

}


.header-search-suggestion-image-empty {

    color:
        #9ba0a8;

    font-size: 1rem;

    font-weight: 800;

}



/* ==========================================================================
   Suggestion Text
   ========================================================================== */


.header-search-suggestion-content {

    flex: 1;

    min-width: 0;

}


.header-search-suggestion-name {

    overflow: hidden;

    color:
        #20242a;

    font-size: 0.82rem;

    font-weight: 750;

    text-overflow: ellipsis;

    white-space: nowrap;

}


.header-search-suggestion-subtitle {

    margin-top: 4px;

    overflow: hidden;

    color:
        #777e88;

    font-size: 0.69rem;

    text-overflow: ellipsis;

    white-space: nowrap;

}


.header-search-suggestion-arrow {

    padding:
        0
        7px;

    color:
        #a1a6ae;

    font-size: 1.5rem;

}


.header-search-no-results {

    padding:
        24px;

    color:
        #7c828b;

    font-size: 0.8rem;

    text-align: center;

}



/* ==========================================================================
   Responsive Search
   ========================================================================== */


@media (max-width: 900px) {

    .header-search-container {

        margin:
            0
            16px;

    }


    .header-search-filter select {

        max-width: 125px;

    }

}


@media (max-width: 650px) {

    .header-search-filter {

        display: none;

    }


    .header-search-submit {

        padding:
            0
            16px;

    }

}

/* ==========================================================================
   Marketplace Search Page
   ========================================================================== */

.marketplace-search-page {
    width: 100%;
}



/* ==========================================================================
   Marketplace Search Header
   ========================================================================== */

.marketplace-search-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 30px;

    margin-bottom: 26px;
}


.marketplace-search-eyebrow {
    margin-bottom: 5px;

    color: #425fc1;

    font-size: 0.68rem;
    font-weight: 850;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}


.marketplace-search-page-header h1 {
    margin: 0;

    color: #20242c;

    font-size: 2rem;
    line-height: 1.15;
}


.marketplace-search-description {
    margin: 8px 0 0;

    color: #727986;

    font-size: 0.9rem;
}


.marketplace-search-description strong {
    color: #414854;
}


.marketplace-search-result-summary {
    display: flex;
    align-items: baseline;

    gap: 5px;

    flex: 0 0 auto;

    color: #7a818d;
}


.marketplace-search-result-summary strong {
    color: #303640;

    font-size: 1.05rem;
}


.marketplace-search-result-summary span {
    font-size: 0.78rem;
}



/* ==========================================================================
   Marketplace Search Layout
   ========================================================================== */

.marketplace-search-layout {
    display: grid;

    grid-template-columns:
        255px
        minmax(0, 1fr);

    align-items: start;

    gap: 24px;
}



/* ==========================================================================
   Marketplace Filter Panel
   ========================================================================== */

/* ========================================================================
   Marketplace Filter Panel
   ======================================================================== */

.marketplace-filter-panel {
    position: static;

    align-self: start;

    min-width: 0;

    overflow: visible;

    background: #ffffff;

    border: 1px solid #dfe3e9;
    border-radius: 14px;

    box-shadow:
        0 3px 12px rgba(28, 34, 44, 0.035);
}

.marketplace-filter-form {
    display: block;
}


.marketplace-filter-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 15px;

    padding: 18px 18px 16px;

    border-bottom: 1px solid #e7e9ed;
}


.marketplace-filter-header h2 {
    margin: 0;

    color: #282e37;

    font-size: 1rem;
}


.marketplace-filter-subtitle {
    margin-top: 3px;

    color: #8a9099;

    font-size: 0.67rem;
}


.marketplace-filter-clear {
    padding-top: 2px;

    color: #6877af;

    font-size: 0.69rem;
    font-weight: 750;

    text-decoration: none;
}


.marketplace-filter-clear:hover {
    color: #425fc1;

    text-decoration: underline;
}



/* ==========================================================================
   Marketplace Filter Groups
   ========================================================================== */

.marketplace-filter-group {
    padding: 16px 18px;

    border-bottom: 1px solid #eceef1;
}


.marketplace-filter-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;
}


.marketplace-filter-label {
    display: block;

    margin: 0 0 8px;

    color: #3e454f;

    font-size: 0.73rem;
    font-weight: 800;
}


.marketplace-filter-label-row .marketplace-filter-label {
    margin-bottom: 8px;
}


.marketplace-filter-select {
    width: 100%;

    padding: 9px 10px;

    background: #ffffff;

    border: 1px solid #d4d8de;
    border-radius: 6px;

    color: #363c45;

    font: inherit;
    font-size: 0.76rem;

    outline: none;
}


.marketplace-filter-select:focus {
    border-color: #6979b5;

    box-shadow:
        0 0 0 2px rgba(66, 95, 193, 0.08);
}



/* ==========================================================================
   Seller Filter
   ========================================================================== */

.marketplace-seller-selected-count {
    margin-bottom: 8px;

    color: #425fc1;

    font-size: 0.65rem;
    font-weight: 800;
}


.marketplace-seller-search-wrap {
    margin-bottom: 8px;
}


.marketplace-seller-search {
    width: 100%;

    padding: 9px 10px;

    background: #f9fafb;

    border: 1px solid #d6dae0;
    border-radius: 6px;

    color: #303640;

    font: inherit;
    font-size: 0.74rem;

    outline: none;
}


.marketplace-seller-search::placeholder {
    color: #9aa0a9;
}


.marketplace-seller-search:focus {
    background: #ffffff;

    border-color: #6879b7;

    box-shadow:
        0 0 0 2px rgba(66, 95, 193, 0.08);
}



/* ==========================================================================
   Seller Options
   ========================================================================== */

.marketplace-seller-options {
    max-height: 220px;

    overflow-x: hidden;
    overflow-y: auto;

    border: 1px solid #e0e3e7;
    border-radius: 7px;
}


.marketplace-seller-option {
    display: flex;
    align-items: center;

    gap: 9px;

    min-height: 38px;

    padding: 7px 9px;

    border-bottom: 1px solid #eef0f2;

    cursor: pointer;

    transition:
        background 0.12s ease;
}


.marketplace-seller-option:last-of-type {
    border-bottom: 0;
}


.marketplace-seller-option:hover {
    background: #f6f7f9;
}


.marketplace-seller-option:has(
    input[type="checkbox"]:checked
) {
    background: #f2f4ff;
}


.marketplace-seller-checkbox-wrap {
    display: flex;
    align-items: center;

    flex: 0 0 auto;
}


.marketplace-seller-checkbox-wrap input {
    width: 15px;
    height: 15px;

    margin: 0;

    accent-color: #425fc1;

    cursor: pointer;
}


.marketplace-seller-option-content {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 7px;

    min-width: 0;

    flex: 1;
}


.marketplace-seller-option-name {
    overflow: hidden;

    color: #3c424c;

    font-size: 0.71rem;
    font-weight: 650;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.marketplace-seller-option-verified {
    flex: 0 0 auto;

    padding: 2px 5px;

    background: #eaf5ef;

    border: 1px solid #cee5d7;
    border-radius: 999px;

    color: #46805d;

    font-size: 0.52rem;
    font-weight: 850;

    white-space: nowrap;
}


.marketplace-seller-empty,
.marketplace-seller-search-empty {
    padding: 18px 10px;

    color: #969ca5;

    font-size: 0.69rem;

    text-align: center;
}


.marketplace-seller-search-empty[hidden] {
    display: none;
}



/* ==========================================================================
   Seller Filter Footer
   ========================================================================== */

.marketplace-seller-footer {
    display: flex;
    justify-content: flex-end;

    padding-top: 7px;
}


.marketplace-seller-clear-button {
    padding: 3px 0;

    background: transparent;

    border: 0;

    color: #747b85;

    font: inherit;
    font-size: 0.64rem;
    font-weight: 700;

    cursor: pointer;
}


.marketplace-seller-clear-button:hover {
    color: #425fc1;
}



/* ==========================================================================
   Price Filter
   ========================================================================== */

.marketplace-price-filter {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap: 8px;
}


.marketplace-price-field label {
    display: block;

    margin-bottom: 5px;

    color: #858b94;

    font-size: 0.61rem;
    font-weight: 700;
}


.marketplace-price-input-wrap {
    display: flex;
    align-items: center;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #d5d9df;
    border-radius: 6px;
}


.marketplace-price-input-wrap:focus-within {
    border-color: #6879b7;

    box-shadow:
        0 0 0 2px rgba(66, 95, 193, 0.08);
}


.marketplace-price-input-wrap span {
    padding-left: 8px;

    color: #8b9199;

    font-size: 0.7rem;
}


.marketplace-price-input-wrap input {
    width: 100%;
    min-width: 0;

    padding: 8px 6px;

    background: transparent;

    border: 0;

    color: #363c45;

    font: inherit;
    font-size: 0.7rem;

    outline: none;
}



/* ==========================================================================
   Filter Actions
   ========================================================================== */

.marketplace-filter-actions {
    padding: 16px 18px;
}


.marketplace-filter-submit {
    width: 100%;

    padding: 9px 14px;

    font-size: 0.74rem;
}



/* ==========================================================================
   Search Results
   ========================================================================== */

.marketplace-search-results {
    min-width: 0;
}


.marketplace-results-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;

    min-height: 46px;

    margin-bottom: 12px;
}


.marketplace-results-header h2 {
    margin: 0 0 3px;

    color: #292f38;

    font-size: 1.15rem;
}


.marketplace-results-description {
    color: #838a94;

    font-size: 0.72rem;
}


.marketplace-results-count {
    padding-bottom: 3px;

    color: #838a94;

    font-size: 0.7rem;
    font-weight: 700;

    white-space: nowrap;
}



/* ==========================================================================
   Product Results Container
   ========================================================================== */

.marketplace-product-results {
    overflow: hidden;

    background: #ffffff;

    border: 1px solid #dfe2e6;
    border-radius: 10px;

    box-shadow:
        0 3px 12px rgba(26, 31, 39, 0.035);
}



/* ==========================================================================
   Product Results Header
   ========================================================================== */

.marketplace-product-header {
    display: grid;

    grid-template-columns:
        72px
        minmax(220px, 1fr)
        125px
        175px
        118px;

    align-items: center;

    min-height: 39px;

    padding: 0 14px;

    background: #f5f6f8;

    border-bottom: 1px solid #dde1e6;

    color: #727985;

    font-size: 0.61rem;
    font-weight: 850;

    letter-spacing: 0.045em;
    text-transform: uppercase;
}


.marketplace-product-header-market,
.marketplace-product-header-price {
    text-align: right;
}



/* ==========================================================================
   Product Row
   ========================================================================== */

.marketplace-product-row {
    display: grid;

    grid-template-columns:
        72px
        minmax(220px, 1fr)
        125px
        175px
        118px;

    align-items: center;

    min-height: 88px;

    padding: 9px 14px;

    background: #ffffff;

    border-bottom: 1px solid #e8eaed;

    transition:
        background 0.12s ease;
}


.marketplace-product-row:last-child {
    border-bottom: 0;
}


.marketplace-product-row:hover {
    background: #fafbfc;
}



/* ==========================================================================
   Product Image Cell
   ========================================================================== */

.marketplace-product-image-cell {
    display: flex;
    align-items: center;
}


.marketplace-product-thumbnail-button {
    display: block;

    width: 54px;
    height: 66px;

    padding: 0;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #dfe2e6;
    border-radius: 5px;

    cursor: zoom-in;

    transition:
        border-color 0.12s ease,
        box-shadow 0.12s ease;
}


.marketplace-product-thumbnail-button:hover {
    border-color: #aeb7d4;

    box-shadow:
        0 2px 7px rgba(35, 43, 60, 0.10);
}


.marketplace-product-thumbnail {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}


.marketplace-product-thumbnail-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    gap: 2px;

    width: 54px;
    height: 66px;

    background: #f2f3f5;

    border: 1px solid #dfe2e6;
    border-radius: 5px;

    color: #a1a6ae;
}


.marketplace-product-thumbnail-letter {
    font-size: 0.95rem;
    font-weight: 850;
}


.marketplace-product-thumbnail-text {
    font-size: 0.5rem;
    font-weight: 700;

    text-transform: uppercase;
}



/* ==========================================================================
   Product Information Cell
   ========================================================================== */

.marketplace-product-information-cell {
    min-width: 0;

    padding-right: 18px;
}


.marketplace-product-name {
    display: inline-block;

    max-width: 100%;

    overflow: hidden;

    color: #252b34;

    font-size: 0.85rem;
    font-weight: 800;
    line-height: 1.25;

    text-decoration: none;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.marketplace-product-name:hover {
    color: #425fc1;

    text-decoration: underline;
}


.marketplace-product-game {
    margin-top: 4px;

    color: #5e6672;

    font-size: 0.69rem;
    font-weight: 650;
}


.marketplace-product-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 5px;

    margin-top: 3px;

    color: #9298a1;

    font-size: 0.61rem;
}


.marketplace-product-manufacturer {
    color: #7c838d;

    font-weight: 650;
}


.marketplace-product-meta-divider {
    color: #bec2c7;
}



/* ==========================================================================
   Market Price Cell
   ========================================================================== */

.marketplace-product-market-cell {
    padding-left: 10px;

    text-align: right;
}


.marketplace-product-market-price {
    color: #303640;

    font-size: 0.9rem;
    font-weight: 850;
}


.marketplace-product-price-caption {
    margin-top: 3px;

    color: #9a9fa7;

    font-size: 0.57rem;
}



/* ==========================================================================
   Available Price Cell
   ========================================================================== */

.marketplace-product-price-cell {
    padding-left: 15px;

    text-align: right;
}


.marketplace-product-price-range {
    color: #292f38;

    font-size: 0.84rem;
    font-weight: 850;

    white-space: nowrap;
}


.marketplace-product-price-separator {
    padding: 0 2px;

    color: #a1a6ae;

    font-weight: 400;
}


.marketplace-product-price-unavailable {
    color: #a4a9b0;

    font-size: 0.85rem;
}


.marketplace-product-availability {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;

    gap: 4px;

    margin-top: 4px;

    color: #8a9098;

    font-size: 0.59rem;
}


.marketplace-product-availability-divider {
    color: #bec2c7;
}



/* ==========================================================================
   Product Action Cell
   ========================================================================== */

.marketplace-product-action-cell {
    display: flex;
    justify-content: flex-end;

    padding-left: 14px;
}


.marketplace-product-view-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    min-height: 34px;

    padding: 0 11px;

    background: #ffffff;

    border: 1px solid #cdd3de;
    border-radius: 6px;

    color: #424b5a;

    font-size: 0.66rem;
    font-weight: 800;

    text-decoration: none;

    white-space: nowrap;

    transition:
        background 0.12s ease,
        border-color 0.12s ease,
        color 0.12s ease;
}


.marketplace-product-view-button:hover {
    background: #425fc1;

    border-color: #425fc1;

    color: #ffffff;
}


.marketplace-product-view-arrow {
    font-size: 1rem;
    line-height: 1;
}



/* ==========================================================================
   Mobile Field Labels
   ========================================================================== */

.marketplace-mobile-field-label {
    display: none;
}



/* ==========================================================================
   Empty Results
   ========================================================================== */

.marketplace-results-empty {
    padding: 65px 30px;

    background: #ffffff;

    border: 1px solid #dfe2e6;
    border-radius: 10px;

    text-align: center;
}


.marketplace-results-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    margin: 0 auto 14px;

    background: #f0f2f6;

    border-radius: 50%;

    color: #818996;

    font-size: 1.15rem;
    font-weight: 850;
}


.marketplace-results-empty h3 {
    margin: 0 0 7px;

    color: #343a44;

    font-size: 1rem;
}


.marketplace-results-empty p {
    max-width: 440px;

    margin: 0 auto 20px;

    color: #858c96;

    font-size: 0.76rem;
    line-height: 1.55;
}



/* ==========================================================================
   Product Image Viewer
   ========================================================================== */

.marketplace-image-viewer {
    position: fixed;

    inset: 0;

    z-index: 2000;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 30px;

    visibility: hidden;

    opacity: 0;

    transition:
        opacity 0.16s ease,
        visibility 0.16s ease;
}


.marketplace-image-viewer.open {
    visibility: visible;

    opacity: 1;
}


.marketplace-image-viewer-backdrop {
    position: absolute;

    inset: 0;

    background: rgba(19, 23, 30, 0.72);

    cursor: zoom-out;
}


.marketplace-image-viewer-dialog {
    position: relative;

    z-index: 1;

    display: flex;
    flex-direction: column;

    width: min(720px, 100%);
    max-height: calc(100vh - 60px);

    overflow: hidden;

    background: #ffffff;

    border-radius: 12px;

    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.30);
}


.marketplace-image-viewer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    min-height: 48px;

    padding: 0 15px;

    border-bottom: 1px solid #e2e5e9;
}


.marketplace-image-viewer-title {
    overflow: hidden;

    color: #353b45;

    font-size: 0.78rem;
    font-weight: 800;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.marketplace-image-viewer-close {
    padding: 4px 7px;

    background: transparent;

    border: 0;

    color: #707782;

    font-size: 1.55rem;
    line-height: 1;

    cursor: pointer;
}


.marketplace-image-viewer-close:hover {
    color: #20242c;
}


.marketplace-image-viewer-content {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 300px;

    padding: 20px;

    overflow: auto;

    background: #f5f6f8;
}


.marketplace-image-viewer-content img {
    display: block;

    max-width: 100%;
    max-height: calc(100vh - 150px);

    object-fit: contain;
}


body.marketplace-image-viewer-open {
    overflow: hidden;
}



/* ==========================================================================
   Marketplace Search Responsive - Medium
   ========================================================================== */

@media (max-width: 1050px) {

    .marketplace-product-header,
    .marketplace-product-row {
        grid-template-columns:
            68px
            minmax(200px, 1fr)
            115px
            155px;
    }


    .marketplace-product-header-action,
    .marketplace-product-action-cell {
        display: none;
    }


    .marketplace-product-row {
        cursor: default;
    }

}



/* ==========================================================================
   Marketplace Search Responsive - Tablet
   ========================================================================== */

@media (max-width: 850px) {

    .marketplace-search-layout {
        grid-template-columns: 1fr;
    }


    .marketplace-filter-panel {
        position: static;
    }


    .marketplace-product-header {
        display: none;
    }


    .marketplace-product-row {
        grid-template-columns:
            68px
            minmax(0, 1fr)
            145px;

        min-height: 94px;
    }


    .marketplace-product-market-cell {
        display: none;
    }


    .marketplace-product-price-cell {
        padding-left: 10px;
    }


    .marketplace-product-action-cell {
        display: none;
    }

}



/* ==========================================================================
   Marketplace Search Responsive - Mobile
   ========================================================================== */

@media (max-width: 600px) {

    .marketplace-search-page-header {
        align-items: flex-start;
        flex-direction: column;

        gap: 10px;
    }


    .marketplace-search-page-header h1 {
        font-size: 1.6rem;
    }


    .marketplace-product-row {
        grid-template-columns:
            62px
            minmax(0, 1fr);

        align-items: start;

        gap: 0;

        padding: 12px;
    }


    .marketplace-product-image-cell {
        grid-column: 1;
        grid-row: 1 / span 2;
    }


    .marketplace-product-information-cell {
        grid-column: 2;

        padding-right: 0;
    }


    .marketplace-product-market-cell {
        display: none;
    }


    .marketplace-product-price-cell {
        grid-column: 2;

        padding: 9px 0 0;

        text-align: left;
    }


    .marketplace-product-availability {
        justify-content: flex-start;
    }


    .marketplace-product-action-cell {
        display: none;
    }


    .marketplace-product-thumbnail-button,
    .marketplace-product-thumbnail-placeholder {
        width: 48px;
        height: 59px;
    }


    .marketplace-price-filter {
        grid-template-columns: 1fr 1fr;
    }


    .marketplace-mobile-field-label {
        display: none;
    }


    .marketplace-image-viewer {
        padding: 12px;
    }

}

/* ==========================================================================
   Marketplace Landing Page
   ========================================================================== */

.marketplace-home {
    display: flex;
    flex-direction: column;

    gap: 64px;
}


/* ==========================================================================
   Marketplace Hero
   ========================================================================== */

.marketplace-hero {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 1.45fr)
        minmax(320px, 0.75fr);

    gap: 45px;

    overflow: hidden;

    padding: 58px;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(124, 150, 224, 0.28),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #202b43 0%,
            #30436d 52%,
            #425f9e 100%
        );

    border-radius: 24px;

    color: #ffffff;

    box-shadow:
        0 18px 45px rgba(32, 43, 67, 0.14);
}


.marketplace-hero-content {
    position: relative;

    z-index: 2;

    min-width: 0;
}


.marketplace-hero-eyebrow,
.marketplace-section-eyebrow,
.marketplace-final-cta-eyebrow {
    margin-bottom: 12px;

    font-size: 0.7rem;
    font-weight: 850;

    letter-spacing: 0.11em;

    text-transform: uppercase;
}


.marketplace-hero-eyebrow {
    color: #bfcdf4;
}


.marketplace-hero h1 {
    max-width: 760px;

    margin:
        0
        0
        20px;

    color: #ffffff;

    font-size: clamp(
        2.8rem,
        5.5vw,
        5rem
    );

    font-weight: 850;

    letter-spacing: -0.045em;

    line-height: 0.98;
}


.marketplace-hero h1 span {
    display: block;

    color: #cad6fa;
}


.marketplace-hero-description {
    max-width: 680px;

    margin:
        0
        0
        30px;

    color: #dce3f2;

    font-size: 1.08rem;

    line-height: 1.7;
}


/* ==========================================================================
   Hero Search
   ========================================================================== */

.marketplace-hero-search {
    display: flex;

    max-width: 760px;

    overflow: hidden;

    margin-bottom: 20px;

    background: #ffffff;

    border:
        1px
        solid
        rgba(255, 255, 255, 0.25);

    border-radius: 12px;

    box-shadow:
        0 10px 30px rgba(12, 20, 38, 0.18);
}


.marketplace-hero-search-field {
    display: flex;
    align-items: center;

    flex: 1;

    min-width: 0;
}


.marketplace-search-icon {
    flex-shrink: 0;

    padding-left: 17px;

    color: #7b8492;

    font-size: 0.95rem;
}


.marketplace-hero-search input {
    flex: 1;

    min-width: 0;

    padding:
        17px
        16px;

    background: #ffffff;

    border: 0;

    color: #262d38;

    font: inherit;
    font-size: 0.9rem;

    outline: none;
}


.marketplace-hero-search input::placeholder {
    color: #9199a5;
}


.marketplace-hero-search-button {
    flex-shrink: 0;

    padding:
        0
        24px;

    background: #425fc1;

    border: 0;

    color: #ffffff;

    font: inherit;
    font-size: 0.82rem;
    font-weight: 800;

    cursor: pointer;

    transition:
        background 0.15s ease;
}


.marketplace-hero-search-button:hover {
    background: #344fae;
}


/* ==========================================================================
   Hero Buttons
   ========================================================================== */

.marketplace-hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 10px;

    margin-bottom: 35px;
}


.marketplace-button-light {
    background:
        rgba(255, 255, 255, 0.10);

    border-color:
        rgba(255, 255, 255, 0.32);

    color: #ffffff;
}


.marketplace-button-light:hover {
    background:
        rgba(255, 255, 255, 0.18);

    border-color:
        rgba(255, 255, 255, 0.48);
}


/* ==========================================================================
   Hero Selling Points
   ========================================================================== */

.marketplace-hero-points {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 22px;

    max-width: 760px;

    padding-top: 25px;

    border-top:
        1px
        solid
        rgba(255, 255, 255, 0.14);
}


.marketplace-hero-point {
    display: flex;
    flex-direction: column;

    gap: 4px;
}


.marketplace-hero-point strong {
    color: #ffffff;

    font-size: 0.78rem;
}


.marketplace-hero-point span {
    color: #bfc9dc;

    font-size: 0.68rem;

    line-height: 1.45;
}


/* ==========================================================================
   Hero Side Panel
   ========================================================================== */

.marketplace-hero-panel {
    position: relative;

    z-index: 2;

    align-self: center;

    padding: 28px;

    background:
        rgba(255, 255, 255, 0.96);

    border:
        1px
        solid
        rgba(255, 255, 255, 0.4);

    border-radius: 18px;

    color: #272e38;

    box-shadow:
        0 18px 40px rgba(15, 24, 43, 0.18);
}


.marketplace-hero-panel-label {
    margin-bottom: 7px;

    color: #65719a;

    font-size: 0.65rem;
    font-weight: 850;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


.marketplace-hero-panel h2 {
    margin:
        0
        0
        9px;

    color: #252c37;

    font-size: 1.45rem;
}


.marketplace-hero-panel > p {
    margin:
        0
        0
        22px;

    color: #737b88;

    font-size: 0.78rem;

    line-height: 1.55;
}


.marketplace-hero-panel-options {
    display: flex;
    flex-direction: column;

    gap: 8px;
}


.marketplace-hero-panel-option {
    display: grid;

    grid-template-columns:
        40px
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 12px;

    padding: 13px;

    background: #f7f8fa;

    border: 1px solid #e3e6eb;
    border-radius: 10px;

    color: inherit;

    text-decoration: none;

    transition:
        border-color 0.15s ease,
        background 0.15s ease,
        transform 0.15s ease;
}


.marketplace-hero-panel-option:hover {
    background: #ffffff;

    border-color: #bfc8e7;

    transform: translateX(3px);
}


.marketplace-option-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    background: #edf0fb;

    border-radius: 9px;

    color: #425fc1;

    font-size: 1rem;
    font-weight: 800;
}


.marketplace-hero-panel-option strong {
    display: block;

    color: #303742;

    font-size: 0.8rem;
}


.marketplace-hero-panel-option span {
    display: block;

    margin-top: 2px;

    color: #8a919c;

    font-size: 0.65rem;
}


.marketplace-option-arrow {
    color: #8d96a4;

    font-size: 1.5rem;
}


/* ==========================================================================
   Marketplace Value Strip
   ========================================================================== */

.marketplace-value-strip {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 0;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e0e3e8;
    border-radius: 15px;

    box-shadow:
        0 3px 12px rgba(0, 0, 0, 0.025);
}


.marketplace-value-item {
    display: flex;
    align-items: center;

    gap: 13px;

    min-width: 0;

    padding: 21px;

    border-right: 1px solid #e8eaee;
}


.marketplace-value-item:last-child {
    border-right: 0;
}


.marketplace-value-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 36px;

    width: 36px;
    height: 36px;

    background: #eef1fb;

    border-radius: 50%;

    color: #425fc1;

    font-size: 0.9rem;
    font-weight: 850;
}


.marketplace-value-item strong {
    display: block;

    margin-bottom: 3px;

    color: #303741;

    font-size: 0.75rem;
}


.marketplace-value-item span {
    display: block;

    color: #858d98;

    font-size: 0.65rem;

    line-height: 1.4;
}


/* ==========================================================================
   Landing Page Section Headings
   ========================================================================== */

.marketplace-home-section {
    margin: 0;
}


.marketplace-home-section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 30px;

    margin-bottom: 22px;
}


.marketplace-section-eyebrow {
    color: #65719a;
}


.marketplace-home-section-header h2,
.marketplace-how-heading h2,
.marketplace-sellers-intro h2 {
    margin: 0;

    color: #252b35;

    font-size: clamp(
        1.65rem,
        3vw,
        2.2rem
    );

    letter-spacing: -0.025em;
}


.marketplace-home-section-header p,
.marketplace-how-heading p,
.marketplace-sellers-intro p {
    max-width: 680px;

    margin:
        7px
        0
        0;

    color: #7a828e;

    font-size: 0.83rem;

    line-height: 1.6;
}


.marketplace-text-link {
    flex-shrink: 0;

    color: #425fc1;

    font-size: 0.78rem;
    font-weight: 800;

    text-decoration: none;
}


.marketplace-text-link:hover {
    text-decoration: underline;
}


.marketplace-text-link span {
    margin-left: 4px;
}


/* ==========================================================================
   Game Cards
   ========================================================================== */

.marketplace-game-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;
}


.marketplace-game-card {
    display: flex;
    flex-direction: column;

    min-height: 185px;

    padding: 20px;

    background: #ffffff;

    border: 1px solid #e0e3e8;
    border-radius: 14px;

    color: inherit;

    text-decoration: none;

    box-shadow:
        0 3px 12px rgba(0, 0, 0, 0.025);

    transition:
        transform 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}


.marketplace-game-card:hover {
    border-color: #b9c4e6;

    box-shadow:
        0 10px 24px rgba(31, 40, 65, 0.08);

    transform: translateY(-3px);
}


.marketplace-game-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 24px;
}


.marketplace-game-symbol {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    background:
        linear-gradient(
            145deg,
            #edf0fb,
            #e4e9f8
        );

    border-radius: 10px;

    color: #425fc1;

    font-size: 1rem;
    font-weight: 850;
}


.marketplace-game-arrow {
    color: #a2a9b3;

    font-size: 1.45rem;
}


.marketplace-game-manufacturer {
    margin-bottom: 4px;

    color: #8a929e;

    font-size: 0.62rem;
    font-weight: 800;

    letter-spacing: 0.04em;

    text-transform: uppercase;
}


.marketplace-game-card h3 {
    margin:
        0
        0
        15px;

    color: #2c333d;

    font-size: 1rem;

    line-height: 1.3;
}


.marketplace-game-browse {
    margin-top: auto;

    color: #65719a;

    font-size: 0.67rem;
    font-weight: 750;
}


.marketplace-section-footer {
    margin-top: 17px;

    text-align: right;
}


/* ==========================================================================
   How It Works
   ========================================================================== */

.marketplace-how {
    display: grid;

    grid-template-columns:
        minmax(260px, 0.8fr)
        minmax(0, 1.6fr);

    gap: 55px;

    padding: 42px;

    background: #ffffff;

    border: 1px solid #e0e3e8;
    border-radius: 18px;
}


.marketplace-how-heading {
    align-self: center;
}


.marketplace-how-steps {
    display: flex;
    flex-direction: column;

    gap: 0;
}


.marketplace-how-step {
    display: grid;

    grid-template-columns:
        42px
        minmax(0, 1fr);

    gap: 16px;

    padding: 20px 0;

    border-bottom: 1px solid #e9ebef;
}


.marketplace-how-step:first-child {
    padding-top: 0;
}


.marketplace-how-step:last-child {
    padding-bottom: 0;

    border-bottom: 0;
}


.marketplace-step-number {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    background: #425fc1;

    border-radius: 50%;

    color: #ffffff;

    font-size: 0.8rem;
    font-weight: 850;
}


.marketplace-how-step h3 {
    margin:
        1px
        0
        5px;

    color: #303741;

    font-size: 0.9rem;
}


.marketplace-how-step p {
    margin: 0;

    color: #7c8490;

    font-size: 0.74rem;

    line-height: 1.55;
}


/* ==========================================================================
   Featured Product Preview
   ========================================================================== */

.marketplace-featured-products {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 12px;
}


.marketplace-featured-product {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 25px;

    min-height: 125px;

    padding: 20px 22px;

    background: #ffffff;

    border: 1px solid #e0e3e8;
    border-radius: 13px;

    color: inherit;

    text-decoration: none;

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}


.marketplace-featured-product:hover {
    border-color: #bdc7e6;

    box-shadow:
        0 7px 18px rgba(31, 40, 65, 0.06);
}


.marketplace-featured-product-main {
    min-width: 0;
}


.marketplace-featured-product-game {
    margin-bottom: 5px;

    color: #65719a;

    font-size: 0.62rem;
    font-weight: 850;

    letter-spacing: 0.04em;

    text-transform: uppercase;
}


.marketplace-featured-product h3 {
    margin: 0;

    color: #2d343e;

    font-size: 0.9rem;

    line-height: 1.35;
}


.marketplace-featured-manufacturer {
    margin-top: 5px;

    color: #8d949e;

    font-size: 0.65rem;
}


.marketplace-featured-product-market {
    display: flex;
    align-items: flex-end;
    flex-direction: column;

    min-width: 100px;

    text-align: right;
}


.marketplace-featured-product-market span {
    color: #9198a2;

    font-size: 0.6rem;
}


.marketplace-featured-product-market strong {
    margin: 2px 0;

    color: #303741;

    font-size: 1.15rem;
}


.marketplace-featured-product-market small {
    color: #7e8794;

    font-size: 0.62rem;
}


/* ==========================================================================
   Seller Discovery
   ========================================================================== */

.marketplace-sellers-section {
    display: grid;

    grid-template-columns:
        minmax(250px, 0.75fr)
        minmax(0, 1.25fr);

    gap: 55px;

    padding:
        38px
        42px;

    background:
        linear-gradient(
            145deg,
            #eef1f7,
            #f7f8fb
        );

    border: 1px solid #dfe3ea;
    border-radius: 18px;
}


.marketplace-sellers-intro {
    align-self: center;
}


.marketplace-seller-list {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 9px;
}


.marketplace-seller-preview {
    display: grid;

    grid-template-columns:
        38px
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 11px;

    padding: 13px;

    background:
        rgba(255, 255, 255, 0.86);

    border: 1px solid #e0e4eb;
    border-radius: 10px;

    color: inherit;

    text-decoration: none;

    transition:
        background 0.15s ease,
        border-color 0.15s ease;
}


.marketplace-seller-preview:hover {
    background: #ffffff;

    border-color: #bcc6e4;
}


.marketplace-seller-avatar {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    background: #425fc1;

    border-radius: 9px;

    color: #ffffff;

    font-size: 0.8rem;
    font-weight: 850;
}


.marketplace-seller-preview-info {
    min-width: 0;
}


.marketplace-seller-preview-info strong {
    display: block;

    overflow: hidden;

    color: #303741;

    font-size: 0.75rem;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.marketplace-seller-preview-info span {
    display: block;

    margin-top: 2px;

    color: #8b929c;

    font-size: 0.61rem;
}


.marketplace-seller-preview-arrow {
    color: #9aa1ab;

    font-size: 1.25rem;
}


/* ==========================================================================
   Empty State
   ========================================================================== */

.marketplace-empty-state {
    grid-column: 1 / -1;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    min-height: 180px;

    padding: 30px;

    background: #ffffff;

    border: 1px solid #e0e3e8;
    border-radius: 14px;

    color: #858d98;

    text-align: center;
}


.marketplace-empty-state strong {
    margin-bottom: 5px;

    color: #4a525e;

    font-size: 0.85rem;
}


.marketplace-empty-state span {
    font-size: 0.72rem;
}


/* ==========================================================================
   Final CTA
   ========================================================================== */

.marketplace-final-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 45px;

    padding:
        40px
        44px;

    background: #202631;

    border-radius: 18px;

    color: #ffffff;
}


.marketplace-final-cta-eyebrow {
    color: #95a8e8;
}


.marketplace-final-cta h2 {
    max-width: 700px;

    margin:
        0
        0
        8px;

    color: #ffffff;

    font-size: clamp(
        1.5rem,
        3vw,
        2rem
    );
}


.marketplace-final-cta p {
    max-width: 650px;

    margin: 0;

    color: #b6becb;

    font-size: 0.78rem;

    line-height: 1.6;
}


.marketplace-final-button {
    flex-shrink: 0;

    background: #ffffff;

    border-color: #ffffff;

    color: #28334c;
}


.marketplace-final-button:hover {
    background: #eef1f6;

    border-color: #eef1f6;
}


/* ==========================================================================
   Marketplace Landing Responsive
   ========================================================================== */

@media (max-width: 1050px) {

    .marketplace-hero {
        grid-template-columns:
            minmax(0, 1fr)
            300px;

        gap: 30px;

        padding: 45px;
    }


    .marketplace-value-strip {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .marketplace-value-item:nth-child(2) {
        border-right: 0;
    }


    .marketplace-value-item:nth-child(-n + 2) {
        border-bottom: 1px solid #e8eaee;
    }


    .marketplace-game-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 850px) {

    .marketplace-home {
        gap: 48px;
    }


    .marketplace-hero {
        grid-template-columns: 1fr;
    }


    .marketplace-hero-panel {
        max-width: none;
    }


    .marketplace-how {
        grid-template-columns: 1fr;

        gap: 32px;
    }


    .marketplace-featured-products {
        grid-template-columns: 1fr;
    }


    .marketplace-sellers-section {
        grid-template-columns: 1fr;

        gap: 30px;
    }

}


@media (max-width: 650px) {

    .marketplace-hero {
        padding:
            38px
            25px;

        border-radius: 18px;
    }


    .marketplace-hero h1 {
        font-size: clamp(
            2.4rem,
            12vw,
            3.4rem
        );
    }


    .marketplace-hero-search {
        flex-direction: column;

        overflow: visible;

        background: transparent;

        border: 0;

        box-shadow: none;
    }


    .marketplace-hero-search-field {
        overflow: hidden;

        background: #ffffff;

        border-radius: 10px;
    }


    .marketplace-hero-search-button {
        min-height: 48px;

        margin-top: 8px;

        border-radius: 10px;
    }


    .marketplace-hero-points {
        grid-template-columns: 1fr;

        gap: 15px;
    }


    .marketplace-value-strip {
        grid-template-columns: 1fr;
    }


    .marketplace-value-item {
        border-right: 0;
        border-bottom: 1px solid #e8eaee;
    }


    .marketplace-value-item:nth-child(2) {
        border-bottom: 1px solid #e8eaee;
    }


    .marketplace-value-item:last-child {
        border-bottom: 0;
    }


    .marketplace-home-section-header {
        align-items: flex-start;
        flex-direction: column;
    }


    .marketplace-game-grid {
        grid-template-columns: 1fr;
    }


    .marketplace-how {
        padding:
            30px
            24px;
    }


    .marketplace-sellers-section {
        padding:
            30px
            24px;
    }


    .marketplace-seller-list {
        grid-template-columns: 1fr;
    }


    .marketplace-final-cta {
        align-items: flex-start;
        flex-direction: column;

        padding:
            32px
            26px;
    }


    .marketplace-final-button {
        width: 100%;
    }

}


@media (max-width: 460px) {

    .marketplace-hero-actions {
        align-items: stretch;
        flex-direction: column;
    }


    .marketplace-hero-actions .button {
        width: 100%;
    }


    .marketplace-hero-panel {
        padding: 20px;
    }


    .marketplace-featured-product {
        grid-template-columns: 1fr;

        gap: 15px;
    }


    .marketplace-featured-product-market {
        align-items: flex-start;

        text-align: left;
    }

}

/* ==========================================================================
   Modern Marketplace Header Search
   ========================================================================== */

.header-search-container {
    position: relative;

    width: 100%;
    min-width: 0;
}

.header-search-modern {
    position: relative;

    display: grid;

    grid-template-columns:
        auto
        minmax(180px, 1fr)
        auto;

    align-items: stretch;

    width: 100%;
    height: 48px;

    overflow: visible;

    background: #ffffff;

    border: 1px solid #cfd4dd;
    border-radius: 12px;

    box-shadow:
        0 2px 7px rgba(31, 39, 55, 0.035);

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}



.header-search-modern:focus-within {
    border-color: #8799d9;

    box-shadow:
        0 0 0 3px rgba(66, 95, 193, 0.10),
        0 3px 10px rgba(31, 39, 55, 0.04);
}


/* ==========================================================================
   Catalog Selector
   ========================================================================== */

.header-catalog-select {
    position: relative;

    display: flex;

    min-width: 160px;
}


.header-catalog-button {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    width: 100%;
    min-width: 160px;
    height: 100%;

    padding:
        6px
        13px
        6px
        15px;

    background: #f4f5f8;

    border: 0;
    border-right: 1px solid #dfe3e9;

    /*
     * IMPORTANT:
     *
     * The parent .header-search-modern owns the outside rounded corners.
     * None of the inner controls should have their own outside shape.
     */

    border-radius: 0;

    color: #303744;

    font: inherit;

    cursor: pointer;

    transition:
        background 0.15s ease;
}


.header-catalog-button:hover {
    background: #eceff4;
}


.header-catalog-button:focus {
    outline: none;
}


.header-catalog-button-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    min-width: 0;
}


.header-catalog-label {
    margin-bottom: 1px;

    color: #9299a5;

    font-size: 0.55rem;
    font-weight: 750;

    letter-spacing: 0.045em;

    line-height: 1.1;

    text-transform: uppercase;
}


.header-catalog-current {
    display: block;

    max-width: 130px;

    overflow: hidden;

    color: #343b46;

    font-size: 0.72rem;
    font-weight: 800;

    line-height: 1.25;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.header-catalog-chevron {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 17px;

    width: 17px;
    height: 17px;

    color: #7c8490;

    transition:
        transform 0.15s ease;
}


.header-catalog-chevron svg {
    width: 100%;
    height: 100%;
}


.header-catalog-button[aria-expanded="true"]
.header-catalog-chevron {
    transform: rotate(180deg);
}


/* ==========================================================================
   Search Input Section
   ========================================================================== */

.header-search-input-wrap {
    position: relative;

    display: flex;
    align-items: center;

    min-width: 0;

    background: #ffffff;
}


.header-search-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 43px;

    width: 43px;

    color: #89919d;

    pointer-events: none;
}


.header-search-icon svg {
    width: 18px;
    height: 18px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
}


/*
 * Stronger selector intentionally overrides the old:
 *
 * .header-search input
 *
 * rule near the top of sales_end.css.
 */

.header-search-modern
.header-search-input-wrap
input {
    flex: 1;

    min-width: 0;
    width: 100%;
    height: 100%;

    padding:
        0
        40px
        0
        0;

    margin: 0;

    background: transparent;

    border: 0;

    /*
     * Prevent the old input radius from creating strange inner corners.
     */

    border-radius: 0;

    color: #272e38;

    font: inherit;
    font-size: 0.8rem;

    outline: none;

    box-shadow: none;
}


.header-search-modern
.header-search-input-wrap
input:focus {
    border: 0;

    outline: none;

    box-shadow: none;
}


.header-search-modern
.header-search-input-wrap
input::placeholder {
    color: #969da7;
}


/* ==========================================================================
   Clear Button
   ========================================================================== */

.header-search-clear {
    position: absolute;

    top: 50%;
    right: 7px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 28px;
    height: 28px;

    padding: 0;

    background: transparent;

    border: 0;
    border-radius: 50%;

    color: #969da7;

    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1;

    cursor: pointer;

    transform: translateY(-50%);
}


.header-search-clear:hover {
    background: #f0f2f5;

    color: #4e5662;
}


.header-search-clear[hidden] {
    display: none;
}

/* ==========================================================================
   Submit Button
   ========================================================================== */

.header-search-modern
.header-search-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    min-width: 100px;
    height: 100%;

    padding:
        0
        18px;

    margin: 0;

    background: #425fc1;

    border: 0;

    /*
     * The right side completes the rounded outer search control.
     * The left side remains square so it joins seamlessly to the input.
     */

    border-radius:
        0
        11px
        11px
        0;

    color: #ffffff;

    font: inherit;
    font-size: 0.72rem;
    font-weight: 800;

    cursor: pointer;

    transition:
        background 0.15s ease;
}


.header-search-modern
.header-search-submit:hover {
    background: #344fae;
}


.header-search-modern
.header-search-submit:hover {
    background: #344fae;
}


.header-search-submit-icon {
    display: none;

    width: 17px;
    height: 17px;
}


.header-search-submit-icon svg {
    width: 100%;
    height: 100%;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
}


/* ==========================================================================
   IMPORTANT - Dropdown Must Escape Clipped Search Shell
   ========================================================================== */

/*
 * Because the visual search shell uses overflow:hidden to guarantee clean
 * rounded outer corners, the catalog menu itself is positioned relative to
 * the container rather than relying on visible overflow from the form.
 *
 * The menu receives its own full rounded shape.
 */

/* ==========================================================================
   Catalog Dropdown
   ========================================================================== */

/* ==========================================================================
   Catalog Dropdown
   ========================================================================== */

.header-catalog-menu {
    position: absolute;

    top: calc(100% + 12px);
    left: 0;

    width: min(
        620px,
        calc(100vw - 40px)
    );

    padding: 10px;

    overflow: visible;

    background: #ffffff;

    border: 1px solid #d9dee8;
    border-radius: 12px;

    box-shadow:
        0 12px 32px rgba(25, 32, 45, 0.16);

    z-index: 1000;
}


.header-catalog-menu[hidden] {
    display: none;
}

.header-catalog-menu[hidden] {
    display: none;
}

.header-catalog-menu[hidden] {
    display: none;
}


/* ==========================================================================
   Catalog Menu Heading
   ========================================================================== */

.header-catalog-menu-heading {
    display: flex;
    flex-direction: column;

    gap: 2px;

    padding:
        10px
        11px
        12px;

    margin-bottom: 5px;

    border-bottom: 1px solid #eceef1;
}


.header-catalog-menu-heading span {
    color: #303741;

    font-size: 0.76rem;
    font-weight: 850;
}


.header-catalog-menu-heading small {
    color: #949ba5;

    font-size: 0.62rem;
}


/* ==========================================================================
   Catalog Options
   ========================================================================== */

.header-catalog-option {
    display: grid;

    grid-template-columns:
        38px
        minmax(0, 1fr)
        20px;

    align-items: center;

    gap: 11px;

    width: 100%;

    padding:
        9px
        10px;

    background: transparent;

    border: 0;
    border-radius: 9px;

    color: #343b45;

    font: inherit;

    text-align: left;

    cursor: pointer;

    transition:
        background 0.12s ease;
}


.header-catalog-option:hover {
    background: #f4f6fa;
}


.header-catalog-option.selected {
    background: #f0f3ff;
}


.header-catalog-option-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    background: #eef1f8;

    border: 1px solid #e0e4ec;
    border-radius: 8px;

    color: #53617a;

    font-size: 0.78rem;
    font-weight: 850;
}


.header-catalog-option-icon svg {
    width: 17px;
    height: 17px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.7;
}


.header-catalog-letter {
    background: #eef1fb;

    border-color: #dde2f4;

    color: #425fc1;
}


.header-catalog-option-content {
    display: flex;
    flex-direction: column;

    min-width: 0;
}


.header-catalog-option-content strong {
    overflow: hidden;

    color: #343b45;

    font-size: 0.72rem;
    font-weight: 800;

    line-height: 1.3;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.header-catalog-option-content small {
    overflow: hidden;

    margin-top: 2px;

    color: #969da7;

    font-size: 0.59rem;

    line-height: 1.35;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.header-catalog-option-check {
    visibility: hidden;

    color: #425fc1;

    font-size: 0.72rem;
    font-weight: 900;
}


.header-catalog-option.selected
.header-catalog-option-check {
    visibility: visible;
}


/* ==========================================================================
   Search Suggestions
   ========================================================================== */

.header-search-suggestions {
    position: absolute;

    top: calc(100% + 9px);
    left: 160px;
    right: 0;

    z-index: 400;

    max-height: min(520px, calc(100vh - 120px));

    overflow-y: auto;

    background: #ffffff;

    border: 1px solid #dce0e6;
    border-radius: 13px;

    box-shadow:
        0 18px 45px rgba(29, 36, 49, 0.15),
        0 4px 12px rgba(29, 36, 49, 0.06);
}


.header-search-suggestions[hidden] {
    display: none;
}


/* ==========================================================================
   Responsive Search
   ========================================================================== */

@media (max-width: 1050px) {

    .header-catalog-select,
    .header-catalog-button {
        min-width: 135px;
    }


    .header-catalog-current {
        max-width: 105px;
    }


    .header-search-suggestions {
        left: 135px;
    }

}


@media (max-width: 850px) {

    .header-search-container {
        grid-column: 1 / -1;
        grid-row: 2;
    }


    .header-catalog-select,
    .header-catalog-button {
        min-width: 155px;
    }


    .header-catalog-current {
        max-width: 125px;
    }


    .header-search-suggestions {
        left: 155px;
    }

}


@media (max-width: 600px) {

    .header-search-modern {
        grid-template-columns:
            115px
            minmax(0, 1fr)
            48px;
    }


    .header-catalog-select,
    .header-catalog-button {
        min-width: 115px;
    }


    .header-catalog-button {
        padding:
            6px
            9px;
    }


    .header-catalog-label {
        display: none;
    }


    .header-catalog-current {
        max-width: 78px;

        font-size: 0.67rem;
    }


    .header-search-icon {
        display: none;
    }


    .header-search-modern
    .header-search-input-wrap
    input {
        padding:
            0
            34px
            0
            12px;

        font-size: 0.72rem;
    }


    .header-search-modern
    .header-search-submit {
        min-width: 48px;

        padding: 0;
    }


    .header-search-submit-text {
        display: none;
    }


    .header-search-submit-icon {
        display: block;
    }


    .header-search-suggestions {
        left: 0;
    }

}

/* ==========================================================================
   Marketplace Search - Redesigned
   ========================================================================== */

.marketplace-search-page {
    display: flex;
    flex-direction: column;

    gap: 28px;
}


/* ==========================================================================
   Search Hero
   ========================================================================== */

.marketplace-search-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

    padding: 30px 34px;

    background:
        linear-gradient(
            135deg,
            #28344e,
            #405582
        );

    border-radius: 18px;

    color: #ffffff;

    box-shadow:
        0 8px 28px rgba(31, 41, 64, 0.10);
}


.marketplace-search-hero-content {
    min-width: 0;
}


.marketplace-search-eyebrow {
    margin-bottom: 8px;

    color: #bec9ec;

    font-size: 0.7rem;
    font-weight: 850;

    letter-spacing: 0.1em;

    text-transform: uppercase;
}


.marketplace-search-hero h1 {
    margin: 0;

    font-size:
        clamp(
            1.7rem,
            4vw,
            2.5rem
        );

    line-height: 1.1;
}


.marketplace-search-hero p {
    max-width: 700px;

    margin: 10px 0 0;

    color: #dce2f0;

    font-size: 0.9rem;
    line-height: 1.55;
}


.marketplace-search-hero-count {
    display: flex;
    flex-direction: column;

    flex-shrink: 0;

    min-width: 130px;

    padding: 15px 20px;

    background:
        rgba(255, 255, 255, 0.10);

    border:
        1px solid
        rgba(255, 255, 255, 0.16);

    border-radius: 12px;

    text-align: center;
}


.marketplace-search-hero-count strong {
    font-size: 1.65rem;
    line-height: 1;
}


.marketplace-search-hero-count span {
    margin-top: 5px;

    color: #d6ddef;

    font-size: 0.72rem;
}


/* ==========================================================================
   Main Search Layout
   ========================================================================== */

.marketplace-search-layout {
    display: grid;

    grid-template-columns:
        270px
        minmax(0, 1fr);

    align-items: start;

    gap: 24px;
}


/* ==========================================================================
   Filter Panel
   ========================================================================== */

.marketplace-filter-panel {
    position: sticky;

    top: 96px;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #dfe3e9;
    border-radius: 14px;

    box-shadow:
        0 3px 12px rgba(28, 34, 44, 0.035);
}


.marketplace-filter-form {
    display: flex;
    flex-direction: column;
}


.marketplace-filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding: 18px 18px 16px;

    border-bottom: 1px solid #e6e9ee;
}


.marketplace-filter-title {
    color: #252b35;

    font-size: 1rem;
    font-weight: 850;
}


.marketplace-filter-subtitle {
    margin-top: 2px;

    color: #8a919d;

    font-size: 0.68rem;
}


.marketplace-filter-clear {
    color: #425fc1;

    font-size: 0.72rem;
    font-weight: 750;

    text-decoration: none;
}


.marketplace-filter-clear:hover {
    text-decoration: underline;
}


/* ==========================================================================
   Individual Filter Sections
   ========================================================================== */

.marketplace-filter-section {
    margin: 0;
    padding: 17px 18px;

    border: 0;
    border-bottom: 1px solid #eaecf0;
}


.marketplace-filter-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;

    margin: 0 0 11px;

    color: #343b47;

    font-size: 0.73rem;
    font-weight: 850;

    letter-spacing: 0.025em;

    text-transform: uppercase;
}


.marketplace-filter-help {
    margin-top: 8px;

    color: #959ca7;

    font-size: 0.63rem;
    line-height: 1.45;
}


/* ==========================================================================
   Catalog Selector
   ========================================================================== */

.marketplace-catalog-options {
    display: flex;
    flex-direction: column;

    gap: 5px;
}


.marketplace-catalog-option {
    display: block;

    cursor: pointer;
}


.marketplace-catalog-option input {
    position: absolute;

    width: 1px;
    height: 1px;

    overflow: hidden;

    opacity: 0;

    pointer-events: none;
}


.marketplace-catalog-option-body {
    display: flex;
    align-items: center;

    gap: 10px;

    padding: 9px 10px;

    border: 1px solid transparent;
    border-radius: 9px;

    transition:
        background 0.15s ease,
        border-color 0.15s ease;
}


.marketplace-catalog-option:hover
.marketplace-catalog-option-body {
    background: #f6f7fa;
}


.marketplace-catalog-option input:checked
+
.marketplace-catalog-option-body {
    background: #f0f3ff;

    border-color: #cbd4f4;
}


.marketplace-catalog-option-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 31px;

    width: 31px;
    height: 31px;

    background: #eef0f5;

    border-radius: 8px;

    color: #626b79;

    font-size: 0.72rem;
    font-weight: 900;
}


.marketplace-catalog-option input:checked
+
.marketplace-catalog-option-body
.marketplace-catalog-option-icon {
    background: #425fc1;

    color: #ffffff;
}


.marketplace-catalog-option-text {
    display: flex;
    flex-direction: column;

    min-width: 0;
}


.marketplace-catalog-option-text strong {
    color: #363d48;

    font-size: 0.76rem;
}


.marketplace-catalog-option-text small {
    overflow: hidden;

    margin-top: 2px;

    color: #9198a4;

    font-size: 0.61rem;

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ==========================================================================
   Filter Select
   ========================================================================== */

.marketplace-filter-select-wrap {
    position: relative;
}


.marketplace-filter-select {
    width: 100%;

    min-height: 39px;

    padding: 0 35px 0 11px;

    background: #ffffff;

    border: 1px solid #d6dbe3;
    border-radius: 8px;

    color: #3d4551;

    font: inherit;
    font-size: 0.75rem;

    cursor: pointer;

    outline: none;
}


.marketplace-filter-select:focus {
    border-color: #7e91d5;

    box-shadow:
        0 0 0 3px
        rgba(66, 95, 193, 0.09);
}


/* ==========================================================================
   Price Filter
   ========================================================================== */

.marketplace-price-filter {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto
        minmax(0, 1fr);

    align-items: end;

    gap: 7px;
}


.marketplace-price-field {
    min-width: 0;
}


.marketplace-price-field label {
    display: block;

    margin-bottom: 5px;

    color: #8b929d;

    font-size: 0.62rem;
    font-weight: 700;
}


.marketplace-price-input-wrap {
    display: flex;
    align-items: center;

    overflow: hidden;

    min-height: 38px;

    background: #ffffff;

    border: 1px solid #d6dbe3;
    border-radius: 8px;
}


.marketplace-price-input-wrap:focus-within {
    border-color: #7e91d5;

    box-shadow:
        0 0 0 3px
        rgba(66, 95, 193, 0.09);
}


.marketplace-price-input-wrap span {
    padding-left: 9px;

    color: #9299a5;

    font-size: 0.7rem;
}


.marketplace-price-input-wrap input {
    min-width: 0;
    width: 100%;

    padding: 9px 7px;

    background: transparent;

    border: 0;
    outline: 0;

    color: #353c47;

    font: inherit;
    font-size: 0.7rem;
}


.marketplace-price-separator {
    padding-bottom: 10px;

    color: #a0a6af;

    font-size: 0.62rem;
}


/* ==========================================================================
   Seller Filter
   ========================================================================== */

.marketplace-seller-filter {
    padding: 0;
}


.marketplace-filter-summary {
    margin: 0;
    padding: 17px 18px;

    cursor: pointer;

    list-style: none;
}


.marketplace-filter-summary::-webkit-details-marker {
    display: none;
}


.marketplace-filter-summary::after {
    content: "+";

    margin-left: auto;

    color: #858d99;

    font-size: 1rem;
}


.marketplace-seller-filter[open]
.marketplace-filter-summary::after {
    content: "−";
}


.marketplace-seller-filter[open]
.marketplace-filter-summary {
    border-bottom: 1px solid #eaecf0;
}


.marketplace-seller-selected-count {
    margin-left: 6px;

    color: #425fc1;

    font-size: 0.65rem;

    text-transform: none;
}


.marketplace-seller-filter-body {
    padding: 14px 18px 17px;
}


.marketplace-seller-search-wrap {
    margin-bottom: 10px;
}


.marketplace-seller-search {
    width: 100%;

    padding: 9px 10px;

    background: #f8f9fb;

    border: 1px solid #dce0e6;
    border-radius: 8px;

    color: #353c47;

    font: inherit;
    font-size: 0.72rem;

    outline: none;
}


.marketplace-seller-search:focus {
    background: #ffffff;

    border-color: #7e91d5;
}


.marketplace-seller-options {
    max-height: 230px;

    overflow-y: auto;

    padding-right: 3px;
}


.marketplace-seller-option {
    display: flex;
    align-items: center;

    gap: 9px;

    padding: 7px 5px;

    border-radius: 6px;

    cursor: pointer;
}


.marketplace-seller-option:hover {
    background: #f6f7f9;
}


.marketplace-seller-option input {
    flex: 0 0 auto;

    width: 15px;
    height: 15px;

    accent-color: #425fc1;
}


.marketplace-seller-option-content {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 8px;

    min-width: 0;
    width: 100%;
}


.marketplace-seller-option-name {
    overflow: hidden;

    color: #4a515d;

    font-size: 0.7rem;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.marketplace-seller-option-verified {
    flex-shrink: 0;

    padding: 2px 5px;

    background: #eaf5ef;

    border-radius: 999px;

    color: #4d8161;

    font-size: 0.52rem;
    font-weight: 800;
}


.marketplace-seller-clear-button {
    margin-top: 10px;
    padding: 0;

    background: transparent;

    border: 0;

    color: #697386;

    font: inherit;
    font-size: 0.65rem;
    font-weight: 700;

    cursor: pointer;
}


.marketplace-seller-clear-button:hover {
    color: #425fc1;
}


.marketplace-seller-empty,
.marketplace-seller-search-empty {
    padding: 12px 5px;

    color: #939aa5;

    font-size: 0.68rem;
}


/* ==========================================================================
   Filter Submit
   ========================================================================== */

.marketplace-filter-actions {
    padding: 16px 18px;

    background: #fafbfc;
}


.marketplace-filter-submit {
    width: 100%;
}


/* ==========================================================================
   Results
   ========================================================================== */

.marketplace-search-results {
    min-width: 0;
}


.marketplace-results-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 14px;
    padding: 0 2px;
}


.marketplace-results-toolbar-left {
    min-width: 0;
}


.marketplace-results-title-row {
    display: flex;
    align-items: center;

    gap: 10px;
}


.marketplace-results-title-row h2 {
    margin: 0;

    color: #252b34;

    font-size: 1.25rem;
}


.marketplace-results-count {
    padding: 4px 8px;

    background: #e9ecf3;

    border-radius: 999px;

    color: #626b79;

    font-size: 0.65rem;
    font-weight: 800;
}


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

.marketplace-active-filters {
    display: flex;
    flex-wrap: wrap;

    gap: 5px;

    margin-top: 8px;
}


.marketplace-active-filter {
    display: inline-flex;
    align-items: center;

    gap: 4px;

    padding: 4px 8px;

    background: #f0f3ff;

    border: 1px solid #dce2f8;
    border-radius: 999px;

    color: #5d6782;

    font-size: 0.62rem;
}


.marketplace-active-filter strong {
    color: #425fc1;
}


/* ==========================================================================
   Sort
   ========================================================================== */

.marketplace-sort-form {
    display: flex;
    align-items: center;

    gap: 8px;

    flex-shrink: 0;
}


.marketplace-sort-form label {
    color: #858c98;

    font-size: 0.68rem;
    font-weight: 750;
}


.marketplace-sort-form select {
    min-height: 37px;

    padding: 0 32px 0 10px;

    background: #ffffff;

    border: 1px solid #d8dde5;
    border-radius: 8px;

    color: #424a56;

    font: inherit;
    font-size: 0.7rem;

    cursor: pointer;
}


/* ==========================================================================
   Product Result List
   ========================================================================== */

.marketplace-product-results {
    display: flex;
    flex-direction: column;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #dfe3e9;
    border-radius: 14px;

    box-shadow:
        0 3px 12px rgba(28, 34, 44, 0.035);
}


.marketplace-product-result {
    display: grid;

    grid-template-columns:
        92px
        minmax(220px, 1fr)
        minmax(240px, auto)
        145px;

    align-items: center;

    gap: 18px;

    min-height: 126px;

    padding: 16px 18px;

    border-bottom: 1px solid #eaecf0;

    transition:
        background 0.15s ease;
}


.marketplace-product-result:last-child {
    border-bottom: 0;
}


.marketplace-product-result:hover {
    background: #fafbfc;
}


/* ==========================================================================
   Result Image
   ========================================================================== */

.marketplace-result-image {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 92px;
    height: 92px;
}


.marketplace-product-thumbnail-button {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 92px;
    height: 92px;

    overflow: hidden;

    padding: 0;

    background: #f4f5f7;

    border: 1px solid #e2e5e9;
    border-radius: 10px;

    cursor: zoom-in;
}


.marketplace-product-thumbnail-button img {
    display: block;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;
}


.marketplace-result-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 92px;
    height: 92px;

    background:
        linear-gradient(
            145deg,
            #f2f4f7,
            #e9ecf1
        );

    border: 1px solid #e0e4e9;
    border-radius: 10px;
}


.marketplace-result-image-placeholder span {
    color: #a2a9b4;

    font-size: 1.5rem;
    font-weight: 850;
}


/* ==========================================================================
   Product Information
   ========================================================================== */

.marketplace-result-main {
    min-width: 0;
}


.marketplace-result-classification {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 5px;

    margin-bottom: 6px;
}


.marketplace-result-catalog,
.marketplace-result-game {
    display: inline-flex;

    padding: 3px 6px;

    border-radius: 5px;

    font-size: 0.57rem;
    font-weight: 850;

    letter-spacing: 0.035em;

    text-transform: uppercase;
}


.marketplace-result-catalog {
    background: #eef1ff;

    color: #5269bb;
}


.marketplace-result-game {
    background: #f0f2f5;

    color: #69717e;
}


.marketplace-result-name {
    display: block;

    overflow: hidden;

    color: #252b35;

    font-size: 0.94rem;
    font-weight: 820;

    line-height: 1.35;

    text-decoration: none;
}


.marketplace-result-name:hover {
    color: #425fc1;

    text-decoration: underline;
}


.marketplace-result-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 6px;

    margin-top: 5px;

    color: #858d99;

    font-size: 0.66rem;
}


.marketplace-result-meta-divider {
    color: #bdc2ca;
}


.marketplace-result-availability {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 5px;

    margin-top: 9px;

    color: #8a919d;

    font-size: 0.65rem;
}


.marketplace-result-availability-primary {
    color: #52647d;

    font-weight: 750;
}


/* ==========================================================================
   Pricing
   ========================================================================== */

.marketplace-result-market {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(105px, 1fr));

    gap: 12px;
}


.marketplace-result-price-block {
    min-width: 0;

    padding: 10px 12px;

    background: #f7f8fa;

    border: 1px solid #e6e8ec;
    border-radius: 9px;
}


.marketplace-result-asking {
    background: #f4f6ff;

    border-color: #dfe4f6;
}


.marketplace-result-price-label {
    margin-bottom: 4px;

    color: #9198a3;

    font-size: 0.56rem;
    font-weight: 850;

    letter-spacing: 0.035em;

    text-transform: uppercase;
}


.marketplace-result-market-price {
    color: #3c4552;

    font-size: 1rem;
    font-weight: 850;
}


.marketplace-result-available-price {
    color: #425fc1;

    font-size: 1.08rem;
    font-weight: 900;
}


.marketplace-result-price-missing {
    color: #9ca3ad;

    font-size: 1rem;
    font-weight: 800;
}


.marketplace-result-price-note {
    margin-top: 2px;

    color: #9299a4;

    font-size: 0.57rem;
}


/* ==========================================================================
   Result Action
   ========================================================================== */

.marketplace-result-action {
    display: flex;
    justify-content: flex-end;
}


.marketplace-result-view {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    width: 100%;

    padding: 10px 12px;

    background: #ffffff;

    border: 1px solid #cfd6e8;
    border-radius: 8px;

    color: #425fc1;

    font-size: 0.68rem;
    font-weight: 800;

    text-decoration: none;

    transition:
        background 0.15s ease,
        border-color 0.15s ease;
}


.marketplace-result-view:hover {
    background: #425fc1;

    border-color: #425fc1;

    color: #ffffff;
}


/* ==========================================================================
   Empty Search Results
   ========================================================================== */

.marketplace-results-empty {
    display: flex;
    align-items: center;
    flex-direction: column;

    padding: 80px 30px;

    background: #ffffff;

    border: 1px solid #dfe3e9;
    border-radius: 14px;

    text-align: center;
}


.marketplace-results-empty-symbol {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 56px;
    height: 56px;

    margin-bottom: 18px;

    background: #eef1ff;

    border-radius: 14px;

    color: #425fc1;

    font-size: 1.3rem;
    font-weight: 900;
}


.marketplace-results-empty h3 {
    margin: 0;

    color: #2c323c;

    font-size: 1.15rem;
}


.marketplace-results-empty p {
    max-width: 460px;

    margin: 9px 0 22px;

    color: #7f8793;

    font-size: 0.8rem;
    line-height: 1.55;
}


/* ==========================================================================
   Responsive Search
   ========================================================================== */

@media (max-width: 1100px) {

    .marketplace-product-result {
        grid-template-columns:
            82px
            minmax(190px, 1fr)
            minmax(210px, auto);

    }


    .marketplace-result-action {
        grid-column:
            2 / -1;

        justify-content: flex-end;
    }


    .marketplace-result-view {
        width: auto;
    }

}


@media (max-width: 900px) {

    .marketplace-search-layout {
        grid-template-columns:
            1fr;
    }


    .marketplace-filter-panel {
        position: static;
    }


    .marketplace-catalog-options {
        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .marketplace-seller-options {
        max-height: 180px;
    }

}


@media (max-width: 700px) {

    .marketplace-search-hero {
        align-items: flex-start;
        flex-direction: column;

        padding: 25px;
    }


    .marketplace-search-hero-count {
        align-items: baseline;
        flex-direction: row;

        gap: 7px;

        min-width: 0;
    }


    .marketplace-results-toolbar {
        align-items: stretch;
        flex-direction: column;
    }


    .marketplace-sort-form {
        justify-content: space-between;
    }


    .marketplace-product-result {
        grid-template-columns:
            76px
            minmax(0, 1fr);

        gap: 13px;

        padding: 14px;
    }


    .marketplace-result-image,
    .marketplace-product-thumbnail-button,
    .marketplace-result-image-placeholder {
        width: 76px;
        height: 76px;
    }


    .marketplace-result-market {
        grid-column:
            1 / -1;
    }


    .marketplace-result-action {
        grid-column:
            1 / -1;
    }


    .marketplace-result-view {
        width: 100%;
    }

}


@media (max-width: 480px) {

    .marketplace-catalog-options {
        grid-template-columns:
            1fr;
    }


    .marketplace-price-filter {
        grid-template-columns:
            1fr;
    }


    .marketplace-price-separator {
        display: none;
    }


    .marketplace-result-market {
        grid-template-columns:
            1fr 1fr;
    }

}


/* ==========================================================================
   Marketplace Search Page
   ========================================================================== */

.marketplace-search-page {
    width: 100%;
}


/* ==========================================================================
   Search Hero
   ========================================================================== */

.marketplace-search-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 30px;

    margin-bottom: 28px;
    padding-bottom: 24px;

    border-bottom: 1px solid #e0e3e8;
}


.marketplace-search-hero-content {
    min-width: 0;
}


.marketplace-search-eyebrow {
    margin-bottom: 7px;

    color: #65719a;

    font-size: 0.7rem;
    font-weight: 850;

    letter-spacing: 0.075em;

    text-transform: uppercase;
}


.marketplace-search-hero h1 {
    margin: 0;

    color: #20242c;

    font-size: clamp(
        2rem,
        4vw,
        2.8rem
    );

    line-height: 1.1;
}


.marketplace-search-hero p {
    max-width: 720px;

    margin:
        10px
        0
        0;

    color: #727986;

    font-size: 0.92rem;
    line-height: 1.6;
}


.marketplace-search-hero-count {
    display: flex;
    align-items: flex-end;
    flex-direction: column;

    flex-shrink: 0;

    padding-bottom: 3px;
}


.marketplace-search-hero-count strong {
    color: #272d37;

    font-size: 1.6rem;
    font-weight: 850;

    line-height: 1;
}


.marketplace-search-hero-count span {
    margin-top: 4px;

    color: #858d99;

    font-size: 0.72rem;
}


/* ==========================================================================
   Search Layout
   ========================================================================== */

.marketplace-search-layout {
    display: grid;

    grid-template-columns:
        270px
        minmax(0, 1fr);

    align-items: start;

    gap: 28px;
}


/* ==========================================================================
   Filter Panel
   ========================================================================== */

.marketplace-filter-panel {
    position: static;

    align-self: start;

    min-width: 0;

    overflow: visible;

    background: #ffffff;

    border: 1px solid #dfe3e9;
    border-radius: 14px;

    box-shadow:
        0 3px 12px rgba(28, 34, 44, 0.035);
}


.marketplace-filter-form {
    width: 100%;
}


/* ==========================================================================
   Filter Header
   ========================================================================== */

.marketplace-filter-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 15px;

    padding: 20px;

    border-bottom: 1px solid #e8eaee;
}


.marketplace-filter-title {
    color: #252b34;

    font-size: 1rem;
    font-weight: 850;
}


.marketplace-filter-subtitle {
    margin-top: 2px;

    color: #8a919c;

    font-size: 0.7rem;
}


.marketplace-filter-clear {
    color: #6073aa;

    font-size: 0.72rem;
    font-weight: 750;

    text-decoration: none;
}


.marketplace-filter-clear:hover {
    color: #425fc1;

    text-decoration: underline;
}


/* ==========================================================================
   Filter Sections
   ========================================================================== */

.marketplace-filter-section {
    margin: 0;
    padding: 18px 20px;

    border: 0;
    border-bottom: 1px solid #ebedf0;
}


.marketplace-filter-section-heading {
    display: block;

    margin: 0 0 11px;

    color: #3a414c;

    font-size: 0.72rem;
    font-weight: 850;

    letter-spacing: 0.035em;

    text-transform: uppercase;
}


.marketplace-filter-help {
    margin-top: 8px;

    color: #9299a4;

    font-size: 0.67rem;
    line-height: 1.45;
}


/* ==========================================================================
   Catalog Filter
   ========================================================================== */

.marketplace-catalog-options {
    display: flex;
    flex-direction: column;

    gap: 6px;
}


.marketplace-catalog-option {
    display: block;

    cursor: pointer;
}


.marketplace-catalog-option > input {
    position: absolute;

    width: 1px;
    height: 1px;

    overflow: hidden;

    opacity: 0;

    pointer-events: none;
}


.marketplace-catalog-option-body {
    display: flex;
    align-items: center;

    gap: 10px;

    min-width: 0;

    padding: 9px;

    background: #ffffff;

    border: 1px solid transparent;
    border-radius: 9px;

    transition:
        background 0.15s ease,
        border-color 0.15s ease;
}


.marketplace-catalog-option:hover
.marketplace-catalog-option-body {
    background: #f7f8fa;

    border-color: #e6e9ee;
}


.marketplace-catalog-option > input:checked
+ .marketplace-catalog-option-body {
    background: #f2f4ff;

    border-color: #d5dcf7;
}


.marketplace-catalog-option-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 31px;

    width: 31px;
    height: 31px;

    background: #f0f2f6;

    border: 1px solid #e0e4ea;
    border-radius: 8px;

    color: #657080;

    font-size: 0.72rem;
    font-weight: 850;
}


.marketplace-catalog-option > input:checked
+ .marketplace-catalog-option-body
.marketplace-catalog-option-icon {
    background: #425fc1;

    border-color: #425fc1;

    color: #ffffff;
}


.marketplace-catalog-option-text {
    display: flex;
    flex-direction: column;

    min-width: 0;
}


.marketplace-catalog-option-text strong {
    color: #343b45;

    font-size: 0.78rem;
}


.marketplace-catalog-option-text small {
    overflow: hidden;

    margin-top: 2px;

    color: #969da7;

    font-size: 0.63rem;

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ==========================================================================
   Select Filters
   ========================================================================== */

.marketplace-filter-select-wrap {
    position: relative;
}


.marketplace-filter-select {
    display: block;

    width: 100%;
    height: 40px;

    padding:
        0
        34px
        0
        11px;

    background: #ffffff;

    border: 1px solid #d6dbe3;
    border-radius: 8px;

    color: #343b45;

    font: inherit;
    font-size: 0.8rem;

    cursor: pointer;

    outline: none;
}


.marketplace-filter-select:focus {
    border-color: #8ba1dc;

    box-shadow:
        0 0 0 3px rgba(66, 95, 193, 0.08);
}


/* ==========================================================================
   Price Filter
   ========================================================================== */

.marketplace-price-filter {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto
        minmax(0, 1fr);

    align-items: end;

    gap: 7px;
}


.marketplace-price-field {
    min-width: 0;
}


.marketplace-price-field label {
    display: block;

    margin-bottom: 5px;

    color: #888f9a;

    font-size: 0.63rem;
    font-weight: 700;
}


.marketplace-price-input-wrap {
    display: flex;
    align-items: center;

    min-width: 0;
    height: 38px;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #d6dbe3;
    border-radius: 8px;
}


.marketplace-price-input-wrap:focus-within {
    border-color: #8ba1dc;

    box-shadow:
        0 0 0 3px rgba(66, 95, 193, 0.08);
}


.marketplace-price-input-wrap > span {
    padding-left: 9px;

    color: #8b929d;

    font-size: 0.72rem;
}


.marketplace-price-input-wrap input {
    min-width: 0;
    width: 100%;
    height: 100%;

    padding:
        0
        7px;

    background: transparent;

    border: 0;

    color: #343b45;

    font: inherit;
    font-size: 0.76rem;

    outline: none;
}


.marketplace-price-separator {
    padding-bottom: 11px;

    color: #9aa1ab;

    font-size: 0.65rem;
}


/* ==========================================================================
   Seller Filter
   ========================================================================== */


.marketplace-filter-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    margin: 0;

    cursor: pointer;

    list-style: none;
}


.marketplace-filter-summary::-webkit-details-marker {
    display: none;
}


.marketplace-filter-summary::after {
    content: "+";

    color: #89919d;

    font-size: 1rem;
    font-weight: 700;
}

.marketplace-filter-summary::after {
    content: "−";
}



/* ==========================================================================
   Filter Actions
   ========================================================================== */

.marketplace-filter-actions {
    padding: 18px 20px;
}


.marketplace-filter-submit {
    width: 100%;
}


/* ==========================================================================
   Results
   ========================================================================== */

.marketplace-search-results {
    min-width: 0;
}


/* ==========================================================================
   Results Toolbar
   ========================================================================== */

.marketplace-results-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 25px;

    margin-bottom: 16px;
}


.marketplace-results-toolbar-left {
    min-width: 0;
}


.marketplace-results-title-row {
    display: flex;
    align-items: center;

    gap: 10px;
}


.marketplace-results-title-row h2 {
    margin: 0;

    color: #282e37;

    font-size: 1.2rem;
}


.marketplace-results-count {
    padding:
        4px
        8px;

    background: #eceff4;

    border-radius: 999px;

    color: #737c89;

    font-size: 0.64rem;
    font-weight: 800;
}


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

.marketplace-active-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 6px;

    margin-top: 8px;
}


.marketplace-active-filter {
    display: inline-flex;
    align-items: center;

    gap: 4px;

    padding:
        4px
        8px;

    background: #f1f3f7;

    border: 1px solid #e2e5ea;
    border-radius: 999px;

    color: #717987;

    font-size: 0.64rem;
}


.marketplace-active-filter strong {
    color: #505966;
}


/* ==========================================================================
   Sort
   ========================================================================== */

.marketplace-sort-form {
    display: flex;
    align-items: center;

    flex-shrink: 0;

    gap: 8px;
}


.marketplace-sort-form label {
    color: #818995;

    font-size: 0.68rem;
    font-weight: 750;
}


.marketplace-sort-form select {
    height: 38px;

    padding:
        0
        32px
        0
        11px;

    background: #ffffff;

    border: 1px solid #d6dbe3;
    border-radius: 8px;

    color: #3c434e;

    font: inherit;
    font-size: 0.75rem;

    cursor: pointer;
}


/* ==========================================================================
   Product Results
   ========================================================================== */

.marketplace-product-results {
    overflow: hidden;

    background: #ffffff;

    border: 1px solid #dfe3e8;
    border-radius: 14px;

    box-shadow:
        0 3px 12px rgba(28, 34, 44, 0.03);
}


.marketplace-product-result {
    display: grid;

    grid-template-columns:
        96px
        minmax(200px, 1fr)
        minmax(230px, auto)
        145px;

    align-items: center;

    gap: 20px;

    min-width: 0;

    padding: 18px 20px;

    background: #ffffff;

    border-bottom: 1px solid #e9ebef;

    transition:
        background 0.15s ease;
}


.marketplace-product-result:last-child {
    border-bottom: 0;
}


.marketplace-product-result:hover {
    background: #fafbfc;
}


/* ==========================================================================
   Result Image
   ========================================================================== */

.marketplace-result-image {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 96px;
    height: 96px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #f5f6f8,
            #eceff3
        );

    border: 1px solid #e1e5ea;
    border-radius: 10px;
}


.marketplace-product-thumbnail-button {
    display: block;

    width: 100%;
    height: 100%;

    padding: 0;

    background: transparent;

    border: 0;

    cursor: zoom-in;
}


.marketplace-product-thumbnail-button img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}


.marketplace-result-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    color: #a0a7b1;

    font-size: 1.45rem;
    font-weight: 850;
}


/* ==========================================================================
   Result Main Information
   ========================================================================== */

.marketplace-result-main {
    min-width: 0;
}


.marketplace-result-classification {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 6px;

    margin-bottom: 6px;
}


.marketplace-result-catalog,
.marketplace-result-game {
    display: inline-flex;
    align-items: center;

    padding:
        3px
        7px;

    border-radius: 999px;

    font-size: 0.58rem;
    font-weight: 850;

    letter-spacing: 0.025em;

    text-transform: uppercase;
}


.marketplace-result-catalog {
    background: #eef1ff;

    color: #5268aa;
}


.marketplace-result-game {
    background: #f0f2f5;

    color: #68717d;
}


.marketplace-result-name {
    display: inline-block;

    color: #252b34;

    font-size: 1rem;
    font-weight: 850;

    line-height: 1.3;

    text-decoration: none;
}


.marketplace-result-name:hover {
    color: #425fc1;

    text-decoration: underline;
}


.marketplace-result-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 6px;

    margin-top: 5px;

    color: #8a929d;

    font-size: 0.68rem;
}


.marketplace-result-availability {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 5px;

    margin-top: 9px;

    color: #8a929d;

    font-size: 0.67rem;
}


.marketplace-result-availability-primary {
    color: #596371;

    font-weight: 750;
}


/* ==========================================================================
   Result Market Pricing
   ========================================================================== */

.marketplace-result-market {
    display: grid;

    grid-template-columns:
        minmax(95px, 1fr)
        minmax(95px, 1fr);

    gap: 18px;

    min-width: 230px;
}


.marketplace-result-price-block {
    min-width: 0;
}


.marketplace-result-price-label {
    margin-bottom: 3px;

    color: #969da7;

    font-size: 0.58rem;
    font-weight: 850;

    letter-spacing: 0.04em;

    text-transform: uppercase;
}


.marketplace-result-market-price {
    color: #4c5665;

    font-size: 1rem;
    font-weight: 800;
}


.marketplace-result-available-price {
    color: #28303a;

    font-size: 1.2rem;
    font-weight: 850;
}


.marketplace-result-price-missing {
    color: #a3a9b2;

    font-size: 1rem;
    font-weight: 700;
}


.marketplace-result-price-note {
    margin-top: 2px;

    color: #9ba1aa;

    font-size: 0.59rem;
}


/* ==========================================================================
   Result Action
   ========================================================================== */

.marketplace-result-action {
    display: flex;
    justify-content: flex-end;
}


.marketplace-result-view {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    min-width: 135px;

    padding:
        9px
        11px;

    background: #ffffff;

    border: 1px solid #ccd3de;
    border-radius: 8px;

    color: #485466;

    font-size: 0.7rem;
    font-weight: 800;

    text-decoration: none;

    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease;
}


.marketplace-result-view:hover {
    background: #425fc1;

    border-color: #425fc1;

    color: #ffffff;
}


/* ==========================================================================
   Empty Results
   ========================================================================== */

.marketplace-results-empty {
    display: flex;
    align-items: center;
    flex-direction: column;

    padding:
        70px
        30px;

    background: #ffffff;

    border: 1px solid #dfe3e8;
    border-radius: 14px;

    color: #7c8490;

    text-align: center;
}


.marketplace-results-empty-symbol {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 58px;
    height: 58px;

    margin-bottom: 16px;

    background: #f0f2f6;

    border: 1px solid #e0e4e9;
    border-radius: 50%;

    color: #687383;

    font-size: 1.3rem;
    font-weight: 850;
}


.marketplace-results-empty h3 {
    margin: 0;

    color: #343b45;

    font-size: 1.1rem;
}


.marketplace-results-empty p {
    max-width: 520px;

    margin:
        8px
        0
        20px;

    font-size: 0.78rem;
    line-height: 1.55;
}


/* ==========================================================================
   Product Image Viewer
   ========================================================================== */

.marketplace-image-viewer {
    position: fixed;

    inset: 0;

    z-index: 2000;

    display: none;
    align-items: center;
    justify-content: center;

    padding: 30px;
}


.marketplace-image-viewer[aria-hidden="false"] {
    display: flex;
}


.marketplace-image-viewer-backdrop {
    position: absolute;

    inset: 0;

    background: rgba(18, 22, 29, 0.72);

    backdrop-filter: blur(3px);
}


.marketplace-image-viewer-dialog {
    position: relative;

    z-index: 1;

    display: flex;
    flex-direction: column;

    width: min(850px, 92vw);
    max-height: 90vh;

    overflow: hidden;

    background: #ffffff;

    border-radius: 15px;

    box-shadow:
        0 20px 70px rgba(0, 0, 0, 0.28);
}


.marketplace-image-viewer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding:
        15px
        18px;

    border-bottom: 1px solid #e4e7eb;
}


.marketplace-image-viewer-title {
    overflow: hidden;

    color: #333a44;

    font-size: 0.82rem;
    font-weight: 800;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.marketplace-image-viewer-close {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 34px;

    width: 34px;
    height: 34px;

    padding: 0;

    background: #f1f3f6;

    border: 1px solid #e0e3e8;
    border-radius: 50%;

    color: #555e6a;

    font-size: 1.3rem;

    cursor: pointer;
}


.marketplace-image-viewer-close:hover {
    background: #e8ebef;

    color: #252b34;
}


.marketplace-image-viewer-content {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 300px;

    overflow: auto;

    padding: 25px;

    background: #f6f7f9;
}


.marketplace-image-viewer-content img {
    display: block;

    max-width: 100%;
    max-height: 72vh;

    object-fit: contain;
}


/* ==========================================================================
   Marketplace Search Responsive
   ========================================================================== */

@media (max-width: 1050px) {

    .marketplace-product-result {
        grid-template-columns:
            90px
            minmax(180px, 1fr)
            minmax(200px, auto);

        gap: 16px;
    }


    .marketplace-result-action {
        grid-column:
            2 / -1;

        justify-content: flex-end;
    }

}


@media (max-width: 900px) {

    .marketplace-search-layout {
        grid-template-columns: 1fr;
    }


    .marketplace-filter-panel {
        width: 100%;
    }


    .marketplace-filter-form {
        display: grid;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .marketplace-filter-header {
        grid-column:
            1 / -1;
    }


    .marketplace-filter-section {
        border-right: 1px solid #ebedf0;
    }


    .marketplace-filter-actions {
        display: flex;
        align-items: flex-end;
    }

}


@media (max-width: 760px) {

    .marketplace-search-hero {
        align-items: flex-start;
        flex-direction: column;
    }


    .marketplace-search-hero-count {
        align-items: flex-start;
    }


    .marketplace-results-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }


    .marketplace-sort-form {
        width: 100%;
    }


    .marketplace-sort-form select {
        flex: 1;
    }


    .marketplace-product-result {
        grid-template-columns:
            82px
            minmax(0, 1fr);

        align-items: start;
    }


    .marketplace-result-image {
        width: 82px;
        height: 82px;
    }


    .marketplace-result-market {
        grid-column:
            1 / -1;

        padding-top: 12px;

        border-top: 1px solid #edf0f3;
    }


    .marketplace-result-action {
        grid-column:
            1 / -1;
    }


    .marketplace-result-view {
        width: 100%;
    }

}


@media (max-width: 600px) {

    .marketplace-filter-form {
        display: block;
    }


    .marketplace-filter-section {
        border-right: 0;
    }


    .marketplace-price-filter {
        grid-template-columns:
            minmax(0, 1fr)
            auto
            minmax(0, 1fr);
    }


    .marketplace-product-result {
        padding: 15px;
    }


    .marketplace-result-market {
        grid-template-columns:
            1fr
            1fr;
    }

}


@media (max-width: 440px) {

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


    .marketplace-result-image {
        width: 100%;
        height: 180px;
    }


    .marketplace-result-market,
    .marketplace-result-action {
        grid-column: 1;
    }

}

/* ==========================================================================
   Seller Filter
   ========================================================================== */

.marketplace-seller-filter {
    overflow: visible;
}


.marketplace-filter-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    margin: 0;

    cursor: pointer;

    list-style: none;
}


.marketplace-filter-summary::-webkit-details-marker {
    display: none;
}


.marketplace-filter-summary::after {
    content: "+";

    flex-shrink: 0;

    color: #89919d;

    font-size: 1rem;
    font-weight: 700;
}


.marketplace-seller-filter[open]
.marketplace-filter-summary::after {
    content: "−";
}


.marketplace-seller-selected-count {
    margin-left: auto;

    color: #425fc1;

    font-size: 0.68rem;
}


/* ==========================================================================
   Seller Filter Body
   ========================================================================== */

.marketplace-seller-filter-body {
    padding-top: 14px;

    overflow: visible;
}


/* ==========================================================================
   Seller Search
   ========================================================================== */

.marketplace-seller-search-wrap {
    margin-bottom: 12px;
}


.marketplace-seller-search {
    display: block;

    width: 100%;
    height: 40px;

    padding:
        0
        12px;

    background: #ffffff;

    border: 1px solid #d9dee6;
    border-radius: 8px;

    color: #20242c;

    font: inherit;
    font-size: 0.8rem;

    outline: none;
}


.marketplace-seller-search:focus {
    border-color: #8ba8d8;

    box-shadow:
        0 0 0 3px rgba(74, 116, 184, 0.10);
}


/* ==========================================================================
   Seller List
   ========================================================================== */

.marketplace-seller-options {
    display: flex;
    flex-direction: column;

    width: 100%;

    max-height: 360px;

    overflow-x: hidden;
    overflow-y: auto;

    background: #ffffff;

    border: 1px solid #e0e4e9;
    border-radius: 8px;

    scrollbar-width: thin;
}


/* ==========================================================================
   Individual Seller
   ========================================================================== */

.marketplace-seller-option {
    display: grid;

    grid-template-columns:
        18px
        minmax(0, 1fr);

    align-items: start;

    column-gap: 9px;

    width: 100%;

    min-height: 72px;

    padding:
        10px
        9px
        12px;

    margin: 0;

    background: #ffffff;

    cursor: pointer;

    box-sizing: border-box;

    transition:
        background 0.12s ease;
}

.marketplace-seller-option:hover {
    background: #f7f8fa;
}


.marketplace-seller-option + .marketplace-seller-option {
    border-top: 1px solid #eceef1;
}


/* ==========================================================================
   Seller Checkbox
   ========================================================================== */

.marketplace-seller-option input[type="checkbox"] {
    grid-column: 1;

    width: 15px;
    height: 15px;

    margin:
        2px
        0
        0;

    padding: 0;

    flex-shrink: 0;

    cursor: pointer;
}


/* ==========================================================================
   Seller Information
   ========================================================================== */

.marketplace-seller-option-content {
    grid-column: 2;

    display: flex;
    align-items: flex-start;
    flex-direction: column;

    min-width: 0;
    width: 100%;

    gap: 5px;
}


.marketplace-seller-option-name {
    display: block;

    width: 100%;

    overflow: visible;

    color: #303640;

    font-size: 0.76rem;
    font-weight: 750;

    line-height: 1.3;

    overflow-wrap: anywhere;
    word-break: normal;

    white-space: normal;
}


/* ==========================================================================
   Verified Seller Badge
   ========================================================================== */

.marketplace-seller-option-verified {
    display: inline-flex;
    align-items: center;

    width: fit-content;

    padding:
        2px
        6px;

    background: #eaf5ef;

    border: 1px solid #cee5d7;
    border-radius: 999px;

    color: #46805d;

    font-size: 0.55rem;
    font-weight: 850;

    line-height: 1.2;

    letter-spacing: 0.035em;

    text-transform: uppercase;

    white-space: nowrap;
}


/* ==========================================================================
   Selected Seller
   ========================================================================== */

.marketplace-seller-option:has(
    input[type="checkbox"]:checked
) {
    background: #f3f5ff;
}


.marketplace-seller-option:has(
    input[type="checkbox"]:checked
) .marketplace-seller-option-name {
    color: #344b96;
}


/* ==========================================================================
   Empty Seller States
   ========================================================================== */

.marketplace-seller-empty,
.marketplace-seller-search-empty {
    padding:
        18px
        10px;

    color: #9299a4;

    font-size: 0.72rem;

    text-align: center;
}


/* ==========================================================================
   Clear Seller Selection
   ========================================================================== */

.marketplace-seller-clear-button {
    display: inline-block;

    margin-top: 12px;

    padding: 0;

    background: transparent;

    border: 0;

    color: #5d6f8c;

    cursor: pointer;

    font: inherit;
    font-size: 0.7rem;
    font-weight: 700;
}


.marketplace-seller-clear-button:hover {
    color: #2e4f82;

    text-decoration: underline;
}

/* ==========================================================================
   Marketplace Seller Checkbox Protection
   ========================================================================== */

.marketplace-filter-panel
.marketplace-seller-option
input[type="checkbox"] {
    display: block;

    flex: none;

    width: 15px;
    min-width: 15px;
    max-width: 15px;

    height: 15px;
    min-height: 15px;
    max-height: 15px;

    margin:
        2px
        0
        0;

    padding: 0;

    border-radius: 3px;

    box-shadow: none;
}

.marketplace-seller-option-content {
    grid-column: 2;

    display: flex;
    align-items: flex-start;
    flex-direction: column;

    min-width: 0;
    width: 100%;

    gap: 6px;

    padding-bottom: 2px;

    overflow: visible;
}

.marketplace-seller-option-verified {
    display: inline-flex;
    align-items: center;

    width: fit-content;

    min-height: 17px;

    padding:
        2px
        6px;

    background: #eaf5ef;

    border: 1px solid #cee5d7;
    border-radius: 999px;

    color: #46805d;

    font-size: 0.55rem;
    font-weight: 850;

    line-height: 1;

    letter-spacing: 0.035em;

    text-transform: uppercase;

    white-space: nowrap;

    box-sizing: border-box;
}

/* ==========================================================================
   Seller Storefront
   ========================================================================== */

.seller-storefront {
    display: flex;
    flex-direction: column;

    gap: 24px;
}


/* ==========================================================================
   Seller Hero
   ========================================================================== */

.seller-storefront-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

    padding: 28px 30px;

    background: #ffffff;

    border: 1px solid #dfe3e8;
    border-radius: 16px;

    box-shadow:
        0 4px 18px rgba(30, 37, 48, 0.04);
}


.seller-storefront-identity {
    display: flex;
    align-items: center;

    min-width: 0;

    gap: 18px;
}


.seller-storefront-avatar {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 68px;

    width: 68px;
    height: 68px;

    background:
        linear-gradient(
            145deg,
            #34476f,
            #536b9f
        );

    border-radius: 15px;

    color: #ffffff;

    font-size: 1.6rem;
    font-weight: 900;
}


.seller-storefront-heading {
    min-width: 0;
}


.seller-storefront-label,
.seller-section-eyebrow {
    margin-bottom: 5px;

    color: #6878a4;

    font-size: 0.62rem;
    font-weight: 850;

    letter-spacing: 0.07em;

    text-transform: uppercase;
}


.seller-storefront-name-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 10px;
}


.seller-storefront-name-row h1 {
    margin: 0;

    color: #242a33;

    font-size: clamp(
        1.55rem,
        3vw,
        2.15rem
    );
}


.seller-verified-badge {
    display: inline-flex;
    align-items: center;

    padding:
        4px
        8px;

    background: #eaf5ef;

    border: 1px solid #cee5d7;
    border-radius: 999px;

    color: #46805d;

    font-size: 0.58rem;
    font-weight: 850;

    letter-spacing: 0.035em;

    text-transform: uppercase;
}


.seller-storefront-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 7px 15px;

    margin-top: 8px;

    color: #818995;

    font-size: 0.72rem;
}


/* ==========================================================================
   Hero Rating
   ========================================================================== */

.seller-storefront-rating {
    display: flex;
    align-items: center;

    flex-shrink: 0;

    gap: 12px;

    padding:
        13px
        16px;

    background: #f7f8fa;

    border: 1px solid #e4e7eb;
    border-radius: 11px;
}


.seller-rating-number {
    color: #29313c;

    font-size: 1.8rem;
    font-weight: 900;

    line-height: 1;
}


.seller-rating-stars,
.seller-review-stars {
    color: #d49a28;

    letter-spacing: 1px;
}


.seller-rating-count {
    margin-top: 2px;

    color: #858d98;

    font-size: 0.64rem;
}


.seller-rating-new {
    display: flex;
    flex-direction: column;

    gap: 2px;
}


.seller-rating-new span {
    color: #89919d;

    font-size: 0.68rem;
}


/* ==========================================================================
   Trust Statistics
   ========================================================================== */

.seller-trust-grid {
    display: grid;

    grid-template-columns:
        repeat(
            5,
            minmax(0, 1fr)
        );

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #dfe3e8;
    border-radius: 14px;
}


.seller-trust-stat {
    display: flex;
    flex-direction: column;

    min-width: 0;

    padding: 17px 20px;

    border-right: 1px solid #e7e9ed;
}


.seller-trust-stat:last-child {
    border-right: 0;
}


.seller-trust-stat-label {
    margin-bottom: 5px;

    color: #8a929d;

    font-size: 0.6rem;
    font-weight: 800;

    letter-spacing: 0.04em;

    text-transform: uppercase;
}


.seller-trust-stat strong {
    color: #303741;

    font-size: 1.12rem;
}


.seller-trust-stat small {
    margin-top: 3px;

    color: #9299a3;

    font-size: 0.61rem;
    line-height: 1.35;
}


.seller-trust-stat-verified {
    background: #f3f9f5;
}


.seller-trust-stat-verified strong {
    color: #47785a;
}


/* ==========================================================================
   Main Storefront Layout
   ========================================================================== */

.seller-storefront-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        285px;

    align-items: start;

    gap: 24px;
}


.seller-storefront-main {
    display: flex;
    flex-direction: column;

    min-width: 0;

    gap: 24px;
}


.seller-storefront-sidebar {
    display: flex;
    flex-direction: column;

    gap: 16px;
}


/* ==========================================================================
   Storefront Sections
   ========================================================================== */

.seller-storefront-section,
.seller-info-card {
    background: #ffffff;

    border: 1px solid #dfe3e8;
    border-radius: 14px;

    box-shadow:
        0 3px 12px rgba(28, 34, 44, 0.025);
}


.seller-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding:
        20px
        22px;

    border-bottom: 1px solid #e8eaee;
}


.seller-section-header h2 {
    margin: 0;

    color: #2b313a;

    font-size: 1.1rem;
}


.seller-section-count {
    flex-shrink: 0;

    padding:
        4px
        8px;

    background: #f0f2f5;

    border-radius: 999px;

    color: #6f7885;

    font-size: 0.64rem;
    font-weight: 750;
}


.seller-section-description {
    margin:
        0;

    padding:
        16px
        22px
        0;

    color: #818995;

    font-size: 0.73rem;
    line-height: 1.5;
}


/* ==========================================================================
   Inventory Filters
   ========================================================================== */

.seller-inventory-filters {
    display: grid;

    grid-template-columns:
        minmax(180px, 1fr)
        170px
        160px
        auto;

    align-items: end;

    gap: 10px;

    padding:
        16px
        22px;

    background: #fafbfc;

    border-bottom: 1px solid #e8eaee;
}


.seller-filter-search,
.seller-filter-control {
    min-width: 0;
}


.seller-inventory-filters label {
    display: block;

    margin-bottom: 5px;

    color: #7d8591;

    font-size: 0.62rem;
    font-weight: 750;
}


.seller-inventory-filters input,
.seller-inventory-filters select {
    width: 100%;
    height: 38px;

    padding:
        0
        10px;

    background: #ffffff;

    border: 1px solid #d8dde4;
    border-radius: 8px;

    color: #363d47;

    font: inherit;
    font-size: 0.72rem;

    outline: none;
}


.seller-inventory-filters input:focus,
.seller-inventory-filters select:focus {
    border-color: #8298d5;

    box-shadow:
        0 0 0 3px rgba(66, 95, 193, 0.08);
}


/* ==========================================================================
   Listing Results
   ========================================================================== */

.seller-listing-row {
    display: grid;

    grid-template-columns:
        minmax(250px, 1fr)
        80px
        95px
        125px;

    align-items: center;

    gap: 18px;

    padding:
        16px
        22px;

    border-bottom: 1px solid #ebedf0;
}


.seller-listing-row:last-child {
    border-bottom: 0;
}


.seller-listing-product {
    display: flex;
    align-items: center;

    min-width: 0;

    gap: 12px;
}


.seller-listing-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 54px;

    width: 54px;
    height: 54px;

    background: #f0f2f5;

    border: 1px solid #e1e4e8;
    border-radius: 8px;

    color: #89919d;

    font-size: 1rem;
    font-weight: 850;
}


.seller-listing-product-info {
    min-width: 0;
}


.seller-listing-tags {
    display: flex;
    flex-wrap: wrap;

    gap: 4px;

    margin-bottom: 4px;
}


.seller-listing-tags span {
    padding:
        2px
        5px;

    background: #f0f2f5;

    border-radius: 4px;

    color: #737c89;

    font-size: 0.52rem;
    font-weight: 800;

    text-transform: uppercase;
}


.seller-listing-name {
    color: #303741;

    font-size: 0.82rem;
    font-weight: 800;

    text-decoration: none;
}


.seller-listing-name:hover {
    color: #425fc1;

    text-decoration: underline;
}


.seller-listing-manufacturer,
.seller-listing-description {
    margin-top: 3px;

    color: #89919c;

    font-size: 0.63rem;
}


.seller-listing-data-label {
    display: block;

    margin-bottom: 3px;

    color: #969da7;

    font-size: 0.56rem;
    font-weight: 800;

    text-transform: uppercase;
}


.seller-listing-availability strong,
.seller-listing-shipping strong {
    color: #4a535f;

    font-size: 0.75rem;
}


.seller-free-shipping {
    color: #4f805f !important;
}


.seller-listing-buy {
    text-align: right;
}


.seller-listing-price {
    margin-bottom: 7px;

    color: #252c35;

    font-size: 1rem;
    font-weight: 850;
}


.seller-listings-empty,
.seller-history-empty,
.seller-reviews-empty {
    padding:
        40px
        22px;

    color: #818995;

    text-align: center;
}


/* ==========================================================================
   Sales History
   ========================================================================== */

.seller-sales-history {
    padding:
        8px
        22px
        18px;
}


.seller-sale-row {
    display: grid;

    grid-template-columns:
        minmax(200px, 1fr)
        80px
        100px
        120px;

    align-items: center;

    gap: 16px;

    padding:
        13px
        0;

    border-bottom: 1px solid #eceef1;
}


.seller-sale-row:last-child {
    border-bottom: 0;
}


.seller-sale-product {
    display: flex;
    flex-direction: column;

    min-width: 0;

    gap: 3px;
}


.seller-sale-product a {
    color: #353c46;

    font-size: 0.75rem;
    font-weight: 750;

    text-decoration: none;
}


.seller-sale-product a:hover {
    color: #425fc1;

    text-decoration: underline;
}


.seller-sale-product span,
.seller-sale-quantity span,
.seller-sale-price span,
.seller-sale-date span {
    display: block;

    margin-bottom: 2px;

    color: #959ca6;

    font-size: 0.56rem;
}


.seller-sale-quantity strong,
.seller-sale-price strong,
.seller-sale-date strong {
    color: #525b67;

    font-size: 0.68rem;
}


/* ==========================================================================
   Reviews
   ========================================================================== */

.seller-reviews {
    padding:
        0
        22px;
}


.seller-review {
    padding:
        20px
        0;

    border-bottom: 1px solid #e9ebef;
}


.seller-review:last-child {
    border-bottom: 0;
}


.seller-review-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 15px;
}


.seller-review-header strong {
    display: block;

    margin-top: 3px;

    color: #4c5561;

    font-size: 0.68rem;
}


.seller-review-header time {
    color: #969da7;

    font-size: 0.62rem;
}


.seller-review p {
    margin:
        12px
        0;

    color: #59616c;

    font-size: 0.75rem;
    line-height: 1.6;
}


.seller-review-purchase {
    display: flex;
    align-items: center;

    gap: 5px;

    color: #568068;

    font-size: 0.62rem;
    font-weight: 750;
}


/* ==========================================================================
   Seller Information Sidebar
   ========================================================================== */

.seller-info-card-header {
    padding:
        16px
        18px;

    border-bottom: 1px solid #e8eaee;
}


.seller-info-card-header h3 {
    margin: 0;

    color: #343b45;

    font-size: 0.85rem;
}


.seller-info-list {
    padding:
        5px
        18px;
}


.seller-info-item {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding:
        11px
        0;

    border-bottom: 1px solid #eceef1;
}


.seller-info-item span {
    color: #8b929d;

    font-size: 0.64rem;
}


.seller-info-item strong {
    color: #49525e;

    font-size: 0.68rem;

    text-align: right;
}


.seller-info-verification {
    display: flex;

    gap: 9px;

    margin:
        14px
        0;

    padding: 12px;

    background: #eff7f2;

    border: 1px solid #d5e9dc;
    border-radius: 9px;
}


.seller-info-verification-mark {
    color: #4b815e;

    font-weight: 900;
}


.seller-info-verification strong {
    color: #47765a;

    font-size: 0.68rem;
}


.seller-info-verification p {
    margin:
        3px
        0
        0;

    color: #6f8878;

    font-size: 0.59rem;
    line-height: 1.4;
}


/* ==========================================================================
   Rating Breakdown
   ========================================================================== */

.seller-rating-breakdown {
    padding:
        15px
        18px;
}


.seller-rating-breakdown-row {
    display: grid;

    grid-template-columns:
        30px
        minmax(0, 1fr)
        25px;

    align-items: center;

    gap: 8px;

    margin-bottom: 8px;

    color: #777f8b;

    font-size: 0.62rem;
}


.seller-rating-breakdown-track {
    height: 6px;

    overflow: hidden;

    background: #eceef2;

    border-radius: 999px;
}


.seller-rating-breakdown-fill {
    height: 100%;

    background: #d4a03c;

    border-radius: inherit;
}


.seller-info-empty {
    padding:
        15px
        18px;

    color: #9097a1;

    font-size: 0.68rem;
}


/* ==========================================================================
   Confidence Card
   ========================================================================== */

.seller-confidence-card {
    display: flex;

    gap: 10px;

    padding: 16px;

    background: #f3f5fa;

    border: 1px solid #dde2ec;
    border-radius: 12px;
}


.seller-confidence-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 32px;

    width: 32px;
    height: 32px;

    background: #425fc1;

    border-radius: 8px;

    color: #ffffff;

    font-size: 0.72rem;
    font-weight: 900;
}


.seller-confidence-card strong {
    color: #465164;

    font-size: 0.68rem;
}


.seller-confidence-card p {
    margin:
        4px
        0
        0;

    color: #7d8695;

    font-size: 0.6rem;
    line-height: 1.45;
}


/* ==========================================================================
   Seller Storefront Responsive
   ========================================================================== */

@media (max-width: 1000px) {

    .seller-trust-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }


    .seller-trust-stat {
        border-bottom: 1px solid #e7e9ed;
    }


    .seller-storefront-layout {
        grid-template-columns: 1fr;
    }


    .seller-storefront-sidebar {
        display: grid;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


@media (max-width: 800px) {

    .seller-storefront-hero {
        align-items: flex-start;
        flex-direction: column;
    }


    .seller-inventory-filters {
        grid-template-columns:
            1fr
            1fr;
    }


    .seller-listing-row {
        grid-template-columns:
            minmax(0, 1fr)
            100px;
    }


    .seller-listing-availability,
    .seller-listing-shipping {
        padding-top: 10px;

        border-top: 1px solid #eceef1;
    }


    .seller-sale-row {
        grid-template-columns:
            minmax(0, 1fr)
            100px;
    }

}


@media (max-width: 600px) {

    .seller-storefront-identity {
        align-items: flex-start;
    }


    .seller-storefront-avatar {
        flex-basis: 52px;

        width: 52px;
        height: 52px;
    }


    .seller-trust-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .seller-inventory-filters {
        grid-template-columns: 1fr;
    }


    .seller-listing-row {
        grid-template-columns: 1fr;
    }


    .seller-listing-buy {
        text-align: left;
    }


    .seller-sale-row {
        grid-template-columns: 1fr;
    }


    .seller-storefront-sidebar {
        display: flex;
    }

}

/* ==========================================================================
   Seller Storefront Tabs
   ========================================================================== */

.seller-tabs-shell {
    overflow: hidden;

    background: #ffffff;

    border: 1px solid #dfe3e8;
    border-radius: 14px;

    box-shadow:
        0 3px 12px rgba(28, 34, 44, 0.03);
}


/* ==========================================================================
   Tab Navigation
   ========================================================================== */

.seller-tabs {
    display: flex;
    align-items: stretch;

    min-height: 58px;

    padding:
        0
        22px;

    background: #fafbfc;

    border-bottom: 1px solid #dfe3e8;
}


.seller-tab-button {
    position: relative;

    display: flex;
    align-items: center;

    gap: 8px;

    min-height: 58px;

    padding:
        0
        20px;

    margin: 0;

    background: transparent;

    border: 0;

    color: #747d89;

    cursor: pointer;

    font: inherit;
    font-size: 0.76rem;
    font-weight: 750;

    transition:
        color 0.15s ease,
        background 0.15s ease;
}


.seller-tab-button:hover {
    background: #f4f6f9;

    color: #3f4b5d;
}


.seller-tab-button::after {
    content: "";

    position: absolute;

    right: 16px;
    bottom: -1px;
    left: 16px;

    height: 3px;

    background: transparent;

    border-radius:
        3px
        3px
        0
        0;
}


.seller-tab-button.is-active {
    color: #344f9c;
}


.seller-tab-button.is-active::after {
    background: #425fc1;
}


.seller-tab-title {
    white-space: nowrap;
}


.seller-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 22px;
    height: 22px;

    padding:
        0
        6px;

    background: #e9ecf1;

    border-radius: 999px;

    color: #717a87;

    font-size: 0.58rem;
    font-weight: 850;
}


.seller-tab-button.is-active
.seller-tab-count {
    background: #e4e9fa;

    color: #425fc1;
}


/* ==========================================================================
   Tab Panels
   ========================================================================== */

.seller-tab-panel {
    display: none;
}


.seller-tab-panel.is-active {
    display: block;
}


.seller-tab-panel[hidden] {
    display: none !important;
}


/* ==========================================================================
   Tab Sections
   ========================================================================== */

.seller-tab-section {
    border-top: 1px solid #e5e8ec;
}


.seller-tab-section:first-child {
    border-top: 0;
}


/* ==========================================================================
   Reviews / Reputation Overview
   ========================================================================== */

.seller-reputation-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(250px, 0.65fr);

    gap: 0;

    background: #fafbfc;

    border-bottom: 1px solid #e5e8ec;
}


.seller-reputation-summary {
    display: grid;

    grid-template-columns:
        minmax(190px, 0.75fr)
        minmax(260px, 1.25fr);

    align-items: center;

    gap: 28px;

    padding:
        28px
        30px;

    border-right: 1px solid #e5e8ec;
}


.seller-reputation-score {
    display: flex;
    align-items: center;

    gap: 14px;
}


.seller-reputation-score > strong {
    color: #29313c;

    font-size: 2.5rem;
    font-weight: 900;

    line-height: 1;
}


.seller-reputation-score > div {
    display: flex;
    flex-direction: column;

    gap: 3px;
}


.seller-reputation-score > div > b {
    color: #444d59;

    font-size: 0.75rem;
}


.seller-reputation-score > div > span {
    color: #8a929d;

    font-size: 0.65rem;
}


.seller-reputation-confidence {
    display: grid;

    grid-template-columns: 1fr;

    padding:
        14px
        24px;
}


.seller-reputation-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding:
        12px
        0;

    border-bottom: 1px solid #e6e9ed;
}


.seller-reputation-stat:last-child {
    border-bottom: 0;
}


.seller-reputation-stat span {
    color: #838b97;

    font-size: 0.67rem;
}


.seller-reputation-stat strong {
    color: #3f4854;

    font-size: 0.9rem;
}


/* ==========================================================================
   Seller Details Tab
   ========================================================================== */

.seller-details-layout {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 20px;

    padding: 22px;

    background: #f7f8fa;
}


.seller-details-card {
    overflow: hidden;

    background: #ffffff;

    border: 1px solid #dfe3e8;
    border-radius: 12px;
}


.seller-details-wide {
    grid-column:
        1 / -1;
}


.seller-details-card-header {
    padding:
        18px
        20px;

    border-bottom: 1px solid #e8eaee;
}


.seller-details-card-header h2 {
    margin: 0;

    color: #303741;

    font-size: 1rem;
}


.seller-details-list {
    padding:
        5px
        20px;
}


.seller-details-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding:
        13px
        0;

    border-bottom: 1px solid #eceef1;
}


.seller-details-row:last-child {
    border-bottom: 0;
}


.seller-details-row span {
    color: #858e9a;

    font-size: 0.68rem;
}


.seller-details-row strong {
    color: #48515d;

    font-size: 0.72rem;

    text-align: right;
}


/* ==========================================================================
   Verification Detail
   ========================================================================== */

.seller-verification-detail {
    display: flex;
    align-items: flex-start;

    gap: 13px;

    padding: 22px;
}


.seller-verification-detail-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 40px;

    width: 40px;
    height: 40px;

    background: #e8f5ed;

    border: 1px solid #cee5d7;
    border-radius: 10px;

    color: #46805d;

    font-size: 1rem;
    font-weight: 900;
}


.seller-verification-neutral {
    background: #eef1f8;

    border-color: #dce1ed;

    color: #536a9f;
}


.seller-verification-detail strong {
    color: #414b57;

    font-size: 0.76rem;
}


.seller-verification-detail p {
    max-width: 420px;

    margin:
        5px
        0
        0;

    color: #7e8793;

    font-size: 0.67rem;
    line-height: 1.5;
}


/* ==========================================================================
   Marketplace History
   ========================================================================== */

.seller-marketplace-history {
    padding: 20px;
}


.seller-marketplace-history > p {
    max-width: 720px;

    margin:
        0
        0
        18px;

    color: #737c88;

    font-size: 0.72rem;
    line-height: 1.55;
}


.seller-marketplace-history-grid {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    overflow: hidden;

    border: 1px solid #e1e5ea;
    border-radius: 10px;
}


.seller-marketplace-history-grid > div {
    display: flex;
    flex-direction: column;

    padding:
        15px
        17px;

    border-right: 1px solid #e5e8ec;
}


.seller-marketplace-history-grid > div:last-child {
    border-right: 0;
}


.seller-marketplace-history-grid span {
    margin-bottom: 4px;

    color: #8b939e;

    font-size: 0.59rem;
    font-weight: 750;

    text-transform: uppercase;
}


.seller-marketplace-history-grid strong {
    color: #404954;

    font-size: 0.84rem;
}


.seller-marketplace-history-note {
    margin:
        17px
        0
        0 !important;

    padding:
        12px
        14px;

    background: #f4f6f9;

    border-radius: 8px;

    color: #7a8492 !important;

    font-size: 0.64rem !important;
}


/* ==========================================================================
   Tab Responsive Layout
   ========================================================================== */

@media (max-width: 850px) {

    .seller-tabs {
        overflow-x: auto;

        padding:
            0
            10px;
    }


    .seller-tab-button {
        flex-shrink: 0;
    }


    .seller-reputation-layout {
        grid-template-columns: 1fr;
    }


    .seller-reputation-summary {
        border-right: 0;
        border-bottom: 1px solid #e5e8ec;
    }


    .seller-reputation-confidence {
        grid-template-columns:
            repeat(
                3,
                1fr
            );
    }


    .seller-reputation-stat {
        align-items: flex-start;
        flex-direction: column;

        border-right: 1px solid #e6e9ed;
        border-bottom: 0;
    }


    .seller-reputation-stat:last-child {
        border-right: 0;
    }


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

}


@media (max-width: 650px) {

    .seller-reputation-summary {
        grid-template-columns: 1fr;
    }


    .seller-details-layout {
        grid-template-columns: 1fr;
    }


    .seller-details-wide {
        grid-column: 1;
    }


    .seller-marketplace-history-grid {
        grid-template-columns: 1fr;
    }


    .seller-marketplace-history-grid > div {
        border-right: 0;
        border-bottom: 1px solid #e5e8ec;
    }


    .seller-marketplace-history-grid > div:last-child {
        border-bottom: 0;
    }

}


/* ==========================================================================
   Marketplace Page Summary
   ========================================================================== */

.marketplace-page-summary {
    margin:
        0
        0
        14px;

    color: #7b828d;

    font-size: 0.76rem;
}

.marketplace-page-summary strong {
    color: #3a4049;
    font-weight: 750;
}


/* ==========================================================================
   Marketplace Pagination
   ========================================================================== */

.marketplace-pagination {
    display: grid;

    grid-template-columns:
        minmax(120px, 1fr)
        auto
        minmax(120px, 1fr);

    align-items: center;

    gap: 18px;

    margin-top: 24px;

    padding:
        18px
        0
        4px;

    border-top: 1px solid #e1e4e8;
}


/* ==========================================================================
   Pagination Sides
   ========================================================================== */

.marketplace-pagination-side {
    display: flex;
    justify-content: flex-start;
}

.marketplace-pagination-side-right {
    justify-content: flex-end;
}


/* ==========================================================================
   Previous / Next Buttons
   ========================================================================== */

.marketplace-pagination-button {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    min-height: 38px;

    padding:
        0
        13px;

    background: #ffffff;

    border: 1px solid #d9dee6;

    border-radius: 8px;

    color: #3d4f6c;

    font-size: 0.76rem;

    font-weight: 750;

    text-decoration: none;

    transition:
        background 0.12s ease,
        border-color 0.12s ease,
        color 0.12s ease;
}

a.marketplace-pagination-button:hover {
    background: #f6f8fb;

    border-color: #bdc7d5;

    color: #243b61;
}

.marketplace-pagination-disabled {
    color: #adb3bc;

    background: #f7f8f9;

    cursor: default;
}


/* ==========================================================================
   Page Number Group
   ========================================================================== */

.marketplace-pagination-pages {
    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 5px;
}


/* ==========================================================================
   Individual Page
   ========================================================================== */

.marketplace-pagination-page {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 36px;
    height: 36px;

    background: #ffffff;

    border: 1px solid #dfe3e8;

    border-radius: 7px;

    color: #505966;

    font-size: 0.74rem;

    font-weight: 750;

    text-decoration: none;

    box-sizing: border-box;
}

a.marketplace-pagination-page:hover {
    background: #f5f7fa;

    border-color: #bec7d3;

    color: #293f65;
}


/* ==========================================================================
   Current Page
   ========================================================================== */

.marketplace-pagination-current {
    background: #334e82;

    border-color: #334e82;

    color: #ffffff;
}


/* ==========================================================================
   Pagination Ellipsis
   ========================================================================== */

.marketplace-pagination-ellipsis {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 28px;
    height: 36px;

    color: #9299a4;

    font-size: 0.8rem;
}


/* ==========================================================================
   Pagination Status
   ========================================================================== */

.marketplace-pagination-status {
    margin-top: 10px;

    color: #8b929d;

    font-size: 0.7rem;

    text-align: center;
}

.marketplace-pagination-status strong {
    color: #555e6b;
}


/* ==========================================================================
   Responsive Pagination
   ========================================================================== */

@media (max-width: 760px) {

    .marketplace-pagination {
        grid-template-columns:
            1fr
            1fr;
    }

    .marketplace-pagination-pages {
        grid-column:
            1
            /
            -1;

        grid-row: 1;

        margin-bottom: 6px;
    }

    .marketplace-pagination-side {
        grid-row: 2;
    }

    .marketplace-pagination-side-right {
        justify-content: flex-end;
    }

}


@media (max-width: 480px) {

    .marketplace-pagination-page {
        width: 32px;
        height: 34px;
    }

    .marketplace-pagination-button {
        min-height: 36px;

        padding:
            0
            10px;

        font-size: 0.7rem;
    }

}


/* ==========================================================================
   Storefront Notifications
   ========================================================================== */

.store-messages {
    display: flex;
    flex-direction: column;

    gap: 10px;

    width: 100%;

    margin:
        18px
        0
        22px;
}


/* ==========================================================================
   Storefront Notification
   ========================================================================== */

.store-message {
    display: grid;

    grid-template-columns:
        36px
        minmax(0, 1fr)
        32px;

    align-items: center;

    gap: 12px;

    width: 100%;

    padding:
        13px
        14px;

    box-sizing: border-box;

    background: #ffffff;

    border:
        1px
        solid
        #d8dde5;

    border-left-width: 4px;

    border-radius: 8px;

    box-shadow:
        0
        2px
        7px
        rgba(0, 0, 0, 0.04);
}


/* ==========================================================================
   Notification Icon
   ========================================================================== */

.store-message-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;

    border-radius: 50%;

    background: #eef1f5;

    color: #555f6d;

    font-size: 0.9rem;

    font-weight: 800;
}


/* ==========================================================================
   Notification Content
   ========================================================================== */

.store-message-content {
    min-width: 0;
}

.store-message-title {
    margin-bottom: 2px;

    color: #252a32;

    font-size: 0.78rem;

    font-weight: 800;
}

.store-message-text {
    color: #5d6570;

    font-size: 0.78rem;

    line-height: 1.45;

    overflow-wrap: anywhere;
}


/* ==========================================================================
   Notification Dismiss Button
   ========================================================================== */

.store-message-dismiss {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;

    padding: 0;

    background: transparent;

    border: 0;

    border-radius: 5px;

    color: #7a828d;

    font-family: inherit;

    font-size: 1.2rem;

    line-height: 1;

    cursor: pointer;
}

.store-message-dismiss:hover {
    background: #f0f2f5;

    color: #252a32;
}


/* ==========================================================================
   Success Notification
   ========================================================================== */

.store-message-success {
    border-left-color: #2f855a;
}

.store-message-success .store-message-icon {
    background: #e6f5ec;

    color: #237247;
}


/* ==========================================================================
   Error Notification
   ========================================================================== */

.store-message-error {
    border-left-color: #c53030;
}

.store-message-error .store-message-icon {
    background: #fbeaea;

    color: #b52b2b;
}


/* ==========================================================================
   Warning Notification
   ========================================================================== */

.store-message-warning {
    border-left-color: #b7791f;
}

.store-message-warning .store-message-icon {
    background: #fff4dc;

    color: #996515;
}


/* ==========================================================================
   Information Notification
   ========================================================================== */

.store-message-info {
    border-left-color: #3c6ea8;
}

.store-message-info .store-message-icon {
    background: #e9f1fb;

    color: #315f95;
}


/* ==========================================================================
   Debug Notification
   ========================================================================== */

.store-message-debug {
    border-left-color: #6b7280;
}


/* ==========================================================================
   Responsive Storefront Notifications
   ========================================================================== */

@media (max-width: 640px) {

    .store-message {
        grid-template-columns:
            30px
            minmax(0, 1fr)
            28px;

        gap: 9px;

        padding:
            11px
            10px;
    }


    .store-message-icon {
        width: 28px;
        height: 28px;
    }

}


/* ==========================================================================
   Header Catalog Dropdown - Selected / Unselected Colors
   ========================================================================== */


/* --------------------------------------------------------------------------
   Normal / Unselected Option
   -------------------------------------------------------------------------- */

.header-catalog-option {
    background: #ffffff;

    color: #303744;
}


.header-catalog-option
.header-catalog-option-content strong {
    color: #343b45;
}


.header-catalog-option
.header-catalog-option-content small {
    color: #969da7;
}


/* --------------------------------------------------------------------------
   Unselected Icon
   -------------------------------------------------------------------------- */

.header-catalog-option
.header-catalog-option-icon {
    background: #f0f4ec;

    border-color: #e0e4ec;

    color: #53617a;
}


.header-catalog-option
.header-catalog-letter {
    background: #eef1fb;

    border-color: #dde2f4;

    color: #425fc1;
}


/* --------------------------------------------------------------------------
   Unselected Hover
   -------------------------------------------------------------------------- */

.header-catalog-option:hover {
    background: #f3f5f8;
}


/* ==========================================================================
   SELECTED OPTION
   ========================================================================== */

.header-catalog-option.selected {
    background: #425fc1;

    color: #ffffff;
}


/* --------------------------------------------------------------------------
   Selected Primary Text
   -------------------------------------------------------------------------- */

.header-catalog-option.selected
.header-catalog-option-content strong {
    color: #ffffff;
}


/* --------------------------------------------------------------------------
   Selected Secondary Text
   -------------------------------------------------------------------------- */

.header-catalog-option.selected
.header-catalog-option-content small {
    color: rgba(255, 255, 255, 0.78);
}


/* --------------------------------------------------------------------------
   Selected Icon
   -------------------------------------------------------------------------- */

.header-catalog-option.selected
.header-catalog-option-icon {
    background: rgba(255, 255, 255, 0.14);

    border-color: rgba(255, 255, 255, 0.30);

    color: #ffffff;
}


/* --------------------------------------------------------------------------
   Selected Catalog Letter Icon
   -------------------------------------------------------------------------- */

.header-catalog-option.selected
.header-catalog-letter {
    background: rgba(255, 255, 255, 0.14);

    border-color: rgba(255, 255, 255, 0.30);

    color: #ffffff;
}


/* --------------------------------------------------------------------------
   Selected Check
   -------------------------------------------------------------------------- */

.header-catalog-option.selected
.header-catalog-option-check {
    visibility: visible;

    color: #ffffff;
}


/* --------------------------------------------------------------------------
   Selected Hover
   -------------------------------------------------------------------------- */

.header-catalog-option.selected:hover {
    background: #344fae;
}


.header-catalog-option.selected:hover
.header-catalog-option-content strong {
    color: #ffffff;
}


.header-catalog-option.selected:hover
.header-catalog-option-content small {
    color: rgba(255, 255, 255, 0.78);
}


/* ==========================================================================
   Catalog Dropdown Connector
   ========================================================================== */



/* ==========================================================================
   Catalog Dropdown Options
   ========================================================================== */

.header-catalog-option {
    display: grid;

    grid-template-columns:
        38px
        minmax(0, 1fr)
        24px;

    align-items: center;

    width: 100%;

    gap: 12px;

    padding: 9px 12px;

    background: #ffffff;

    border: 0;
    border-radius: 8px;

    color: #303744;

    text-align: left;

    cursor: pointer;
}


.header-catalog-option:hover {
    background: #f3f5f8;
}


.header-catalog-option.selected {
    background: #425fc1;

    color: #ffffff;
}





/* ==========================================================================
   Catalog Dropdown Connector
   ========================================================================== */

.header-catalog-menu::before {
    content: "";

    position: absolute;

    top: -7px;
    left: 31px;

    width: 14px;
    height: 14px;

    background: #ffffff;

    border-top: 1px solid #d9dee8;
    border-left: 1px solid #d9dee8;

    transform: rotate(45deg);

    z-index: 2;
}



.header-catalog-menu::after {
    content: "";

    position: absolute;

    top: 0;
    left: 24px;

    width: 34px;
    height: 2px;

    background: #ffffff;

    z-index: 3;
}

/* ==========================================================================
   Marketplace Account Aside
   ========================================================================== */


/* ==========================================================================
   Header Burger Button
   ========================================================================== */

.store-account-menu-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    padding: 0;

    background: #ffffff;

    border: 1px solid #d8dde6;
    border-radius: 9px;

    color: #59616d;

    font: inherit;

    cursor: pointer;

    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease;
}


.store-account-menu-button:hover {
    background: #f3f5f9;

    border-color: #c7cdd8;

    color: #425fc1;
}


/* ==========================================================================
   Burger Icon
   ========================================================================== */

.store-account-menu-burger {
    display: flex;
    flex-direction: column;

    justify-content: center;

    width: 18px;

    gap: 4px;
}


.store-account-menu-burger span {
    display: block;

    width: 100%;
    height: 2px;

    background: currentColor;

    border-radius: 2px;
}


/* ==========================================================================
   Permanent Left-Side Rail
   ========================================================================== */

.store-account-aside-rail {
    position: fixed;

    top: 76px;
    left: 0;
    bottom: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 18px;

    padding: 0;

    background:
        linear-gradient(
            to right,
            #f7f8fa,
            #ffffff
        );

    border: 0;
    border-right: 1px solid #dfe3e9;

    color: #777f8c;

    font: inherit;

    cursor: pointer;

    z-index: 115;

    transition:
        left 0.24s ease,
        width 0.15s ease,
        background 0.15s ease,
        color 0.15s ease,
        box-shadow 0.15s ease;
}


.store-account-aside-rail:hover {
    width: 24px;

    background: #f1f3f7;

    color: #425fc1;

    box-shadow:
        3px 0 10px
        rgba(25, 32, 45, 0.06);
}


/* ==========================================================================
   Rail Indicator
   ========================================================================== */

.store-account-aside-rail-indicator {
    display: block;

    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1;

    /*
     * The HTML currently contains "<".
     *
     * Rotate it while collapsed so it appears as ">" and therefore
     * points in the direction the panel will open.
     */

    transform:
        rotate(180deg);

    transition:
        transform 0.24s ease;
}


/* ==========================================================================
   Rail - Aside Open
   ========================================================================== */

body.store-account-aside-body-open
.store-account-aside-rail {
    left: min(
        360px,
        calc(100vw - 34px)
    );
}


body.store-account-aside-body-open
.store-account-aside-rail-indicator {
    /*
     * Once the panel is open the rail sits on its right edge.
     * "<" now points back toward the direction the panel will close.
     */

    transform:
        rotate(0deg);
}


/* ==========================================================================
   Aside Panel
   ========================================================================== */

.store-account-aside {
    position: fixed;

    top: 76px;
    left: 0;
    bottom: 0;

    display: flex;
    flex-direction: column;

    width: min(
        360px,
        calc(100vw - 34px)
    );

    background: #ffffff;

    border-right: 1px solid #dfe3e9;

    box-shadow:
        12px 0 32px
        rgba(25, 32, 45, 0.10);

    z-index: 120;

    /*
     * Hide the panel beyond the LEFT edge.
     */

    transform:
        translateX(-100%);

    visibility: hidden;

    transition:
        transform 0.24s ease,
        visibility 0.24s ease;
}


.store-account-aside.store-account-aside-open {
    transform:
        translateX(0);

    visibility: visible;
}


/* ==========================================================================
   Aside Header
   ========================================================================== */

.store-account-aside-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    min-height: 72px;

    padding:
        15px
        18px
        15px
        22px;

    border-bottom: 1px solid #e5e8ed;
}


.store-account-aside-heading {
    display: flex;
    flex-direction: column;

    gap: 2px;
}


.store-account-aside-heading strong {
    color: #252b35;

    font-size: 1.08rem;
    font-weight: 800;
}


.store-account-aside-eyebrow {
    color: #8a919d;

    font-size: 0.64rem;
    font-weight: 800;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


/* ==========================================================================
   Internal Close Button
   ========================================================================== */

.store-account-aside-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    padding: 0;

    background: #f5f6f8;

    border: 1px solid #e1e4e9;
    border-radius: 8px;

    color: #59616d;

    font: inherit;
    font-size: 1.2rem;

    cursor: pointer;

    transition:
        background 0.15s ease,
        color 0.15s ease;
}


.store-account-aside-close:hover {
    background: #eceff4;

    color: #425fc1;
}


/* ==========================================================================
   Aside Body
   ========================================================================== */

.store-account-aside-body {
    flex: 1;

    min-height: 0;

    padding: 22px;

    overflow-y: auto;
}


.store-account-aside-section {
    margin-bottom: 28px;
}


.store-account-aside-section:last-child {
    margin-bottom: 0;
}


.store-account-aside-section-title {
    margin-bottom: 9px;

    color: #8b929e;

    font-size: 0.67rem;
    font-weight: 800;

    letter-spacing: 0.075em;

    text-transform: uppercase;
}


/* ==========================================================================
   Aside Navigation
   ========================================================================== */

.store-account-aside-nav {
    display: flex;
    flex-direction: column;

    gap: 5px;
}


.store-account-aside-link {
    display: grid;

    grid-template-columns:
        38px
        minmax(0, 1fr);

    align-items: center;

    gap: 11px;

    padding:
        10px
        11px;

    border: 1px solid transparent;
    border-radius: 10px;

    color: #343b45;

    text-decoration: none;

    transition:
        background 0.14s ease,
        border-color 0.14s ease;
}


.store-account-aside-link:hover {
    background: #f5f6f9;

    border-color: #e5e8ee;
}


.store-account-aside-link-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    background: #eef1fb;

    border: 1px solid #dde2f4;
    border-radius: 9px;

    color: #425fc1;

    font-size: 0.74rem;
    font-weight: 850;
}


.store-account-aside-link-content {
    display: flex;
    flex-direction: column;

    min-width: 0;

    gap: 2px;
}


.store-account-aside-link-content strong {
    color: #343b45;

    font-size: 0.82rem;
    font-weight: 800;
}


.store-account-aside-link-content small {
    color: #969da7;

    font-size: 0.68rem;
    line-height: 1.35;
}


/* ==========================================================================
   Future Options Placeholder
   ========================================================================== */

.store-account-aside-placeholder {
    padding:
        14px
        15px;

    background: #f8f9fb;

    border: 1px dashed #d9dee6;
    border-radius: 10px;

    color: #8b929d;

    font-size: 0.72rem;
    line-height: 1.55;
}


/* ==========================================================================
   Account Area
   ========================================================================== */

.store-account-aside-account {
    flex-shrink: 0;

    padding:
        18px
        22px
        22px;

    background: #fafbfc;

    border-top: 1px solid #e3e6eb;
}


/* ==========================================================================
   Logged-In User
   ========================================================================== */

.store-account-aside-user {
    display: flex;
    align-items: center;

    gap: 11px;

    margin-bottom: 14px;
}


.store-account-aside-avatar {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    width: 38px;
    height: 38px;

    background: #425fc1;

    border-radius: 50%;

    color: #ffffff;

    font-size: 0.82rem;
    font-weight: 850;
}


.store-account-aside-user-details {
    display: flex;
    flex-direction: column;

    min-width: 0;

    gap: 1px;
}


.store-account-aside-user-details span {
    color: #9299a5;

    font-size: 0.65rem;
}


.store-account-aside-user-details strong {
    overflow: hidden;

    color: #303640;

    font-size: 0.82rem;
    font-weight: 800;

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ==========================================================================
   Guest Account Description
   ========================================================================== */

.store-account-aside-guest {
    display: flex;
    flex-direction: column;

    gap: 4px;

    margin-bottom: 14px;
}


.store-account-aside-guest strong {
    color: #303640;

    font-size: 0.88rem;
    font-weight: 800;
}


.store-account-aside-guest span {
    color: #858d99;

    font-size: 0.7rem;
    line-height: 1.5;
}


/* ==========================================================================
   Account Buttons
   ========================================================================== */

.store-account-aside-account-button {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;

    min-height: 42px;

    padding:
        10px
        16px;

    border-radius: 9px;

    font-size: 0.78rem;
    font-weight: 800;

    text-align: center;
    text-decoration: none;

    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease;
}


.store-account-aside-account-button-primary {
    background: #425fc1;

    border: 1px solid #425fc1;

    color: #ffffff;
}


.store-account-aside-account-button-primary:hover {
    background: #344fae;

    border-color: #344fae;

    color: #ffffff;
}


.store-account-aside-account-button-logout {
    margin-top: 8px;

    background: #ffffff;

    border: 1px solid #d8dde5;

    color: #656d79;
}


.store-account-aside-account-button-logout:hover {
    background: #f3f4f6;

    border-color: #cbd1da;

    color: #343a44;
}


/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 850px) {

    .store-account-aside {
        top: 0;

        width: min(
            360px,
            calc(100vw - 28px)
        );

        z-index: 180;
    }


    .store-account-aside-rail {
        top: 0;

        z-index: 175;
    }


    body.store-account-aside-body-open
    .store-account-aside-rail {
        left: min(
            360px,
            calc(100vw - 28px)
        );
    }

}


@media (max-width: 600px) {

    .store-account-aside {
        width: calc(100vw - 24px);
    }


    body.store-account-aside-body-open
    .store-account-aside-rail {
        left: calc(100vw - 24px);
    }


    .store-account-aside-body {
        padding:
            18px
            16px;
    }


    .store-account-aside-account {
        padding: 16px;
    }

}


/* ==========================================================================
   Shop Your LGS's
   ========================================================================== */

.shop-local-page {
    width: min(
        1400px,
        calc(100% - 48px)
    );

    margin:
        0
        auto;

    padding:
        42px
        0
        70px;
}


/* ==========================================================================
   Hero
   ========================================================================== */

.shop-local-hero {
    position: relative;

    overflow: hidden;

    margin-bottom: 36px;

    padding:
        48px
        52px;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f6f8ff 52%,
            #eef2ff 100%
        );

    border: 1px solid #dfe4ef;
    border-radius: 18px;

    box-shadow:
        0 8px 28px
        rgba(30, 39, 60, 0.06);
}


.shop-local-hero::after {
    content: "";

    position: absolute;

    top: -110px;
    right: -90px;

    width: 300px;
    height: 300px;

    border: 55px solid
        rgba(66, 95, 193, 0.05);

    border-radius: 50%;

    pointer-events: none;
}


.shop-local-hero-eyebrow {
    position: relative;

    z-index: 1;

    margin-bottom: 8px;

    color: #425fc1;

    font-size: 0.7rem;
    font-weight: 850;

    letter-spacing: 0.12em;
}


.shop-local-hero h1 {
    position: relative;

    z-index: 1;

    margin:
        0
        0
        10px;

    color: #252b35;

    font-size: clamp(
        2rem,
        4vw,
        3.25rem
    );

    font-weight: 850;

    letter-spacing: -0.04em;
}


.shop-local-hero-primary {
    position: relative;

    z-index: 1;

    margin:
        0
        0
        7px;

    color: #3c4552;

    font-size: 1.15rem;
    font-weight: 750;
}


.shop-local-hero-secondary {
    position: relative;

    z-index: 1;

    max-width: 720px;

    margin:
        0
        0
        22px;

    color: #717a87;

    font-size: 0.9rem;
    line-height: 1.65;
}


.shop-local-location {
    position: relative;

    z-index: 1;

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding:
        9px
        13px;

    background:
        rgba(255, 255, 255, 0.82);

    border: 1px solid #dce2f0;
    border-radius: 9px;

    color: #626c79;

    font-size: 0.76rem;
}


.shop-local-location strong {
    color: #343c48;
}


.shop-local-location-icon {
    color: #425fc1;

    font-size: 1rem;
    font-weight: 850;
}


/* ==========================================================================
   Results Heading
   ========================================================================== */

.shop-local-results-heading {
    display: flex;

    align-items: end;
    justify-content: space-between;

    gap: 30px;

    margin-bottom: 18px;
}


.shop-local-results-eyebrow {
    display: block;

    margin-bottom: 3px;

    color: #8b929d;

    font-size: 0.65rem;
    font-weight: 850;

    letter-spacing: 0.1em;
}


.shop-local-results-heading h2 {
    margin: 0;

    color: #292f39;

    font-size: 1.45rem;
    font-weight: 850;
}


.shop-local-results-heading p {
    max-width: 380px;

    margin: 0;

    color: #89919d;

    font-size: 0.72rem;
    line-height: 1.5;

    text-align: right;
}


/* ==========================================================================
   Store Grid
   ========================================================================== */

.shop-local-store-grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    align-items: start;

    gap: 20px;
}


.shop-local-store-grid-1 {
    grid-template-columns:
        minmax(
            0,
            440px
        );
}


.shop-local-store-grid-2 {
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    max-width: 920px;
}


/* ==========================================================================
   Store Column
   ========================================================================== */

.shop-local-store {
    overflow: hidden;

    min-width: 0;

    background: #ffffff;

    border: 1px solid #dde2e9;
    border-radius: 14px;

    box-shadow:
        0 4px 18px
        rgba(31, 39, 55, 0.055);
}


/* ==========================================================================
   Store Header
   ========================================================================== */

.shop-local-store-header {
    padding:
        20px
        20px
        18px;

    background:
        linear-gradient(
            to bottom,
            #fbfcff,
            #ffffff
        );

    border-bottom: 1px solid #e3e7ed;
}


.shop-local-store-topline {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 12px;

    margin-bottom: 10px;
}


.shop-local-verified {
    color: #2c8054;

    font-size: 0.65rem;
    font-weight: 850;

    letter-spacing: 0.025em;
}


.shop-local-distance {
    color: #9299a4;

    font-size: 0.66rem;
    font-weight: 700;

    white-space: nowrap;
}


.shop-local-store-name {
    display: inline-block;

    margin-bottom: 3px;

    color: #29313c;

    font-size: 1.08rem;
    font-weight: 850;

    line-height: 1.3;

    text-decoration: none;
}


.shop-local-store-name:hover {
    color: #425fc1;
}


.shop-local-store-location {
    min-height: 18px;

    margin-bottom: 8px;

    color: #7f8793;

    font-size: 0.72rem;
}


.shop-local-store-rating {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 5px;

    min-height: 22px;

    margin-bottom: 14px;

    color: #8a919c;

    font-size: 0.68rem;
}


.shop-local-store-rating strong {
    color: #444c58;
}


.shop-local-stars {
    color: #d79525;

    letter-spacing: 0.04em;
}


.shop-local-no-rating {
    color: #9aa1ab;
}


.shop-local-view-store {
    display: flex;

    align-items: center;
    justify-content: space-between;

    width: 100%;

    min-height: 38px;

    padding:
        8px
        12px;

    background: #f4f6fb;

    border: 1px solid #e0e4ed;
    border-radius: 8px;

    color: #425fc1;

    font-size: 0.72rem;
    font-weight: 800;

    text-decoration: none;

    transition:
        background 0.15s ease,
        border-color 0.15s ease;
}


.shop-local-view-store:hover {
    background: #edf1fc;

    border-color: #ccd5f0;
}


/* ==========================================================================
   Store Product Area
   ========================================================================== */

.shop-local-products {
    padding: 15px;
}


.shop-local-products-heading {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding:
        0
        2px
        11px;
}


.shop-local-products-heading strong {
    color: #555e6a;

    font-size: 0.7rem;
    font-weight: 850;

    letter-spacing: 0.035em;

    text-transform: uppercase;
}


.shop-local-products-heading span {
    color: #a0a6af;

    font-size: 0.64rem;
}


/* ==========================================================================
   Compact Product Card
   ========================================================================== */

.shop-local-product {
    display: grid;

    grid-template-columns:
        96px
        minmax(0, 1fr);

    gap: 13px;

    margin-bottom: 11px;

    padding: 10px;

    background: #ffffff;

    border: 1px solid #e4e7ec;
    border-radius: 10px;

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.15s ease;
}


.shop-local-product:last-child {
    margin-bottom: 0;
}


.shop-local-product:hover {
    border-color: #cfd6e3;

    box-shadow:
        0 5px 14px
        rgba(35, 43, 58, 0.06);

    transform:
        translateY(-1px);
}


/* ==========================================================================
   Product Image
   ========================================================================== */

.shop-local-product-image {
    display: flex;

    align-items: center;
    justify-content: center;

    overflow: hidden;

    width: 96px;
    height: 96px;

    background: #f6f7f9;

    border: 1px solid #e6e8ec;
    border-radius: 8px;

    text-decoration: none;
}


.shop-local-product-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}


.shop-local-product-placeholder {
    color: #c2c7cf;

    font-size: 2rem;
}


/* ==========================================================================
   Product Information
   ========================================================================== */

.shop-local-product-body {
    min-width: 0;
}


.shop-local-product-category {
    overflow: hidden;

    margin-bottom: 2px;

    color: #9ba1ab;

    font-size: 0.6rem;
    font-weight: 750;

    letter-spacing: 0.025em;

    text-overflow: ellipsis;
    white-space: nowrap;

    text-transform: uppercase;
}


.shop-local-product-name {
    display: -webkit-box;

    overflow: hidden;

    margin-bottom: 7px;

    color: #343b45;

    font-size: 0.77rem;
    font-weight: 800;

    line-height: 1.35;

    text-decoration: none;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}


.shop-local-product-name:hover {
    color: #425fc1;
}


.shop-local-product-price-row {
    display: flex;

    align-items: baseline;
    justify-content: space-between;

    gap: 8px;
}


.shop-local-product-price {
    color: #252c35;

    font-size: 0.94rem;
    font-weight: 850;
}


.shop-local-product-stock {
    color: #858d98;

    font-size: 0.6rem;

    white-space: nowrap;
}


.shop-local-product-shipping {
    margin:
        1px
        0
        8px;

    color: #818996;

    font-size: 0.61rem;
}


/* ==========================================================================
   Compact Cart Control
   ========================================================================== */

.shop-local-cart-control {
    display: grid;

    grid-template-columns:
        50px
        minmax(0, 1fr);

    gap: 6px;
}


.shop-local-cart-quantity {
    width: 100%;

    min-height: 32px;

    padding:
        5px
        7px;

    background: #ffffff;

    border: 1px solid #d8dde5;
    border-radius: 7px;

    color: #4d5561;

    font: inherit;
    font-size: 0.68rem;
}


.shop-local-cart-button {
    min-height: 32px;

    padding:
        6px
        9px;

    background: #425fc1;

    border: 1px solid #425fc1;
    border-radius: 7px;

    color: #ffffff;

    font: inherit;
    font-size: 0.67rem;
    font-weight: 800;

    cursor: pointer;

    transition:
        background 0.15s ease,
        border-color 0.15s ease;
}


.shop-local-cart-button:hover:not(:disabled) {
    background: #344fae;

    border-color: #344fae;
}


.shop-local-cart-button:disabled,
.shop-local-cart-quantity:disabled {
    cursor: default;

    opacity: 0.58;
}


/* ==========================================================================
   Cart State
   ========================================================================== */

.shop-local-product-cart-state {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 6px;

    min-height: 18px;

    margin-top: 5px;

    font-size: 0.59rem;
}


.shop-local-in-cart {
    display: none;

    color: #4f6baf;

    font-weight: 750;
}


.shop-local-in-cart.visible {
    display: inline;
}


.shop-local-cart-message {
    margin-left: auto;

    color: #37815b;

    text-align: right;
}


.shop-local-cart-message.error {
    color: #b84c4c;
}


/* ==========================================================================
   Empty / Error States
   ========================================================================== */

.shop-local-state-card {
    max-width: 650px;

    margin:
        55px
        auto;

    padding:
        46px
        42px;

    background: #ffffff;

    border: 1px solid #dfe3e9;
    border-radius: 15px;

    box-shadow:
        0 7px 24px
        rgba(30, 38, 54, 0.055);

    text-align: center;
}


.shop-local-state-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 58px;
    height: 58px;

    margin:
        0
        auto
        17px;

    background: #eef2fc;

    border: 1px solid #dce3f6;
    border-radius: 50%;

    color: #425fc1;

    font-size: 1.45rem;
    font-weight: 850;
}


.shop-local-state-card h2 {
    margin:
        0
        0
        9px;

    color: #303741;

    font-size: 1.35rem;
    font-weight: 850;
}


.shop-local-state-card p {
    max-width: 500px;

    margin:
        0
        auto
        22px;

    color: #7b8490;

    font-size: 0.8rem;
    line-height: 1.65;
}


.shop-local-state-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 42px;

    padding:
        9px
        18px;

    background: #425fc1;

    border: 1px solid #425fc1;
    border-radius: 8px;

    color: #ffffff;

    font-size: 0.74rem;
    font-weight: 800;

    text-decoration: none;
}


.shop-local-state-button:hover {
    background: #344fae;

    border-color: #344fae;

    color: #ffffff;
}


/* ==========================================================================
   Responsive - Two Columns
   ========================================================================== */

@media (max-width: 1050px) {

    .shop-local-store-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .shop-local-store-grid-1 {
        grid-template-columns:
            minmax(
                0,
                440px
            );
    }

}


/* ==========================================================================
   Responsive - Mobile
   ========================================================================== */

@media (max-width: 700px) {

    .shop-local-page {
        width: calc(100% - 24px);

        padding:
            24px
            0
            50px;
    }


    .shop-local-hero {
        margin-bottom: 28px;

        padding:
            30px
            24px;
    }


    .shop-local-hero-secondary {
        font-size: 0.82rem;
    }


    .shop-local-location {
        align-items: flex-start;

        width: 100%;
    }


    .shop-local-results-heading {
        align-items: flex-start;
        flex-direction: column;

        gap: 5px;
    }


    .shop-local-results-heading p {
        text-align: left;
    }


    .shop-local-store-grid,
    .shop-local-store-grid-2 {
        grid-template-columns:
            minmax(
                0,
                1fr
            );
    }


    .shop-local-store-grid-1 {
        grid-template-columns:
            minmax(
                0,
                1fr
            );
    }


    .shop-local-state-card {
        margin:
            30px
            auto;

        padding:
            34px
            24px;
    }

}


/* ==========================================================================
   Responsive - Narrow Product Cards
   ========================================================================== */

@media (max-width: 420px) {

    .shop-local-product {
        grid-template-columns:
            78px
            minmax(0, 1fr);
    }


    .shop-local-product-image {
        width: 78px;
        height: 78px;
    }


    .shop-local-cart-control {
        grid-template-columns:
            44px
            minmax(0, 1fr);
    }

}


/* ==========================================================================
   Permanent Right-Side Cart Rail
   ========================================================================== */

.store-cart-aside-rail {
    position: fixed;

    top: 76px;
    right: 0px;
    bottom: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 18px;

    padding: 0;

    background:
        linear-gradient(
            to left,
            #f7f8fa,
            #ffffff
        );

    border: 0;
    border-left: 1px solid #dfe3e9;
    border-right: 1px solid #e8ebef;

    color: #777f8c;

    font: inherit;

    cursor: pointer;

    box-shadow:
        -2px 0 6px
        rgba(25, 32, 45, 0.06);

    z-index: 125;

    transition:
        right 0.24s ease,
        background 0.15s ease,
        color 0.15s ease,
        box-shadow 0.15s ease;
}


.store-cart-aside-rail:hover {
    background:
        linear-gradient(
            to left,
            #eef1f6,
            #ffffff
        );

    color: #425fc1;

    box-shadow:
        -3px 0 9px
        rgba(25, 32, 45, 0.10);
}


/* ==========================================================================
   Cart Rail Indicator
   ========================================================================== */

.store-cart-aside-rail-indicator {
    display: block;

    font-size: 0.72rem;
    font-weight: 900;

    line-height: 1;

    transform:
        rotate(0deg);

    transition:
        transform 0.24s ease;
}


/* ==========================================================================
   Rail - Cart Open
   ========================================================================== */

body.store-cart-aside-body-open
.store-cart-aside-rail {
    /*
     * Once the cart opens, the rail moves away from the browser edge
     * and sits directly against the left edge of the cart panel.
     *
     * The 10px closed-state scrollbar clearance is intentionally
     * removed here.
     */

    right: min(
        360px,
        calc(100vw - 34px)
    );

    border-right: 0;

    box-shadow:
        -3px 0 10px
        rgba(25, 32, 45, 0.08);
}


body.store-cart-aside-body-open
.store-cart-aside-rail-indicator {
    /*
     * Closed:
     *
     *     <
     *
     * Open:
     *
     *     >
     */

    transform:
        rotate(180deg);
}


/* ==========================================================================
   Right-Side Cart Aside
   ========================================================================== */

.store-cart-aside {
    position: fixed;

    top: 76px;
    right: 0;
    bottom: 0;

    display: flex;
    flex-direction: column;

    width: min(
        360px,
        calc(100vw - 34px)
    );

    background: #ffffff;

    border-left: 1px solid #dfe3e9;

    box-shadow:
        -12px 0 32px
        rgba(25, 32, 45, 0.10);

    z-index: 120;

    transform:
        translateX(100%);

    visibility: hidden;

    transition:
        transform 0.24s ease,
        visibility 0.24s ease;
}


.store-cart-aside.store-cart-aside-open {
    transform:
        translateX(0);

    visibility: visible;
}


/* ==========================================================================
   Cart Aside Header
   ========================================================================== */

.store-cart-aside-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    min-height: 72px;

    padding:
        15px
        22px
        15px
        18px;

    border-bottom: 1px solid #e5e8ed;
}


.store-cart-aside-heading {
    display: flex;
    flex-direction: column;

    gap: 2px;

    min-width: 0;
}


.store-cart-aside-heading strong {
    color: #252b35;

    font-size: 1.08rem;
    font-weight: 800;
}


.store-cart-aside-eyebrow {
    color: #8a919d;

    font-size: 0.64rem;
    font-weight: 800;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


.store-cart-aside-header-count {
    color: #9299a5;

    font-size: 0.68rem;
}


/* ==========================================================================
   Internal Cart Close Button
   ========================================================================== */

.store-cart-aside-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    width: 34px;
    height: 34px;

    padding: 0;

    background: #f5f6f8;

    border: 1px solid #e1e4e9;
    border-radius: 8px;

    color: #59616d;

    font: inherit;
    font-size: 1.2rem;

    cursor: pointer;

    transition:
        background 0.15s ease,
        color 0.15s ease;
}


.store-cart-aside-close:hover {
    background: #eceff4;

    color: #425fc1;
}


/* ==========================================================================
   Cart Aside Body
   ========================================================================== */

.store-cart-aside-body {
    flex: 1;

    min-height: 0;

    padding:
        0
        22px;

    overflow-y: auto;
}


/* ==========================================================================
   Cart Items
   ========================================================================== */

.store-cart-aside-items {
    display: flex;
    flex-direction: column;
}


.store-cart-aside-item {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap: 14px;

    padding:
        18px
        0;

    border-bottom: 1px solid #ebedf0;
}


.store-cart-aside-item:last-child {
    border-bottom: 0;
}


.store-cart-aside-item-main {
    min-width: 0;
}


/* ==========================================================================
   Product Name
   ========================================================================== */

.store-cart-aside-item-name {
    display: block;

    overflow: hidden;

    color: #272d36;

    font-size: 0.84rem;
    font-weight: 800;

    line-height: 1.35;

    text-decoration: none;

    text-overflow: ellipsis;
}


.store-cart-aside-item-name:hover {
    color: #425fc1;
}


/* ==========================================================================
   Seller
   ========================================================================== */

.store-cart-aside-item-seller {
    margin-top: 5px;

    color: #969da7;

    font-size: 0.67rem;
    line-height: 1.45;
}


.store-cart-aside-item-seller a {
    color: #6c7480;

    font-weight: 700;

    text-decoration: none;
}


.store-cart-aside-item-seller a:hover {
    color: #425fc1;

    text-decoration: underline;
}


/* ==========================================================================
   Verified LGS
   ========================================================================== */

.store-cart-aside-verified {
    display: inline-flex;
    align-items: center;

    margin-left: 5px;

    padding:
        2px
        5px;

    background: #eaf5ef;

    border: 1px solid #cee5d7;
    border-radius: 999px;

    color: #46805d;

    font-size: 0.56rem;
    font-weight: 800;

    white-space: nowrap;
}


/* ==========================================================================
   Item Detail
   ========================================================================== */

.store-cart-aside-item-detail {
    margin-top: 7px;

    color: #737b87;

    font-size: 0.7rem;
    font-weight: 650;
}


.store-cart-aside-item-shipping {
    margin-top: 3px;

    color: #969da7;

    font-size: 0.64rem;
}


/* ==========================================================================
   Item Price
   ========================================================================== */

.store-cart-aside-item-price {
    color: #282e38;

    font-size: 0.86rem;
    font-weight: 800;

    white-space: nowrap;
}


/* ==========================================================================
   Empty Cart
   ========================================================================== */

.store-cart-aside-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    min-height: 360px;

    padding:
        40px
        20px;

    color: #7c8490;

    text-align: center;
}


.store-cart-aside-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 58px;
    height: 58px;

    margin-bottom: 15px;

    background: #f3f5f8;

    border: 1px solid #e2e5e9;
    border-radius: 50%;

    color: #6c7582;

    font-size: 1.5rem;
}


.store-cart-aside-empty strong {
    color: #343b45;

    font-size: 0.9rem;
    font-weight: 800;
}


.store-cart-aside-empty p {
    max-width: 260px;

    margin:
        7px
        0
        18px;

    color: #8b929d;

    font-size: 0.72rem;
    line-height: 1.55;
}


/* ==========================================================================
   Empty Marketplace Button
   ========================================================================== */

.store-cart-aside-marketplace-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding:
        9px
        15px;

    background: #ffffff;

    border: 1px solid #ccd2dc;
    border-radius: 8px;

    color: #424a56;

    font-size: 0.74rem;
    font-weight: 800;

    text-decoration: none;
}


.store-cart-aside-marketplace-button:hover {
    background: #f5f6f8;

    border-color: #b9c0cc;
}


/* ==========================================================================
   Cart Aside Footer
   ========================================================================== */

.store-cart-aside-footer {
    flex-shrink: 0;

    padding:
        18px
        22px
        22px;

    background: #fafbfc;

    border-top: 1px solid #e3e6eb;
}


/* ==========================================================================
   Cart Summary
   ========================================================================== */

.store-cart-aside-summary {
    margin-bottom: 14px;
}


.store-cart-aside-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    color: #303640;

    font-size: 0.8rem;
}


.store-cart-aside-summary-row strong {
    color: #252b35;

    font-weight: 800;
}


.store-cart-aside-summary p {
    margin:
        7px
        0
        0;

    color: #969da7;

    font-size: 0.66rem;
    line-height: 1.45;
}


/* ==========================================================================
   Cart Footer Buttons
   ========================================================================== */

.store-cart-aside-primary-button,
.store-cart-aside-secondary-button {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;

    min-height: 40px;

    padding:
        9px
        14px;

    border-radius: 9px;

    font: inherit;
    font-size: 0.76rem;
    font-weight: 800;

    text-align: center;
    text-decoration: none;

    cursor: pointer;
}


.store-cart-aside-primary-button {
    background: #425fc1;

    border: 1px solid #425fc1;

    color: #ffffff;
}


.store-cart-aside-primary-button:hover {
    background: #344fae;

    border-color: #344fae;
}


.store-cart-aside-secondary-button {
    margin-top: 8px;

    background: #ffffff;

    border: 1px solid #d6dae1;

    color: #535b67;
}


.store-cart-aside-secondary-button:hover {
    background: #f4f5f7;

    border-color: #c9ced6;

    color: #303640;
}


/* ==========================================================================
   Left + Right Rail Symmetry
   ========================================================================== */

/*
 * The account rail occupies the left edge.
 *
 * The cart rail visually mirrors it on the right, but the closed cart rail
 * is moved 10px inward so the browser's vertical scrollbar cannot cover it.
 *
 * Both rails retain:
 *
 *     top: 76px
 *     width: 18px
 *     panel width: 360px
 *
 * When the cart opens, the rail moves flush against the cart panel.
 */


/* ==========================================================================
   Do Not Lock Page Scrolling
   ========================================================================== */

/*
 * This panel behaves like the account aside rather than like a modal.
 *
 * The main document remains scrollable while the cart is open.
 */

body.store-cart-aside-body-open {
    overflow: auto;
}


/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 600px) {


    .store-cart-aside {
        width:
            calc(100vw - 34px);
    }


    /*
     * Keep the closed rail clear of the browser scrollbar / viewport edge.
     */

    .store-cart-aside-rail {
        right: 0px;
    }


    /*
     * Once open, attach it directly to the panel.
     */

    body.store-cart-aside-body-open
    .store-cart-aside-rail {
        right:
            calc(100vw - 34px);
    }


    .store-cart-aside-header {
        padding:
            14px
            17px;
    }


    .store-cart-aside-body {
        padding:
            0
            17px;
    }


    .store-cart-aside-footer {
        padding:
            16px
            17px
            19px;
    }


}


/* ==========================================================================
   Very Small Screens
   ========================================================================== */

@media (max-width: 400px) {


    .store-cart-aside-item {
        grid-template-columns:
            minmax(0, 1fr);

        gap: 7px;
    }


    .store-cart-aside-item-price {
        justify-self: start;
    }


}


/* ==========================================================================
   Catalog Product Image Gallery
   ========================================================================== */

.product-image-gallery {
    display: flex;
    flex-direction: column;

    width: 100%;
    height: 100%;

    gap: 12px;

    padding: 12px;
}


.product-image-main {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;

    min-height: 300px;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e0e4eb;
    border-radius: 10px;
}


.product-image-main img {
    display: block;

    width: 100%;
    height: 100%;

    max-height: 430px;

    object-fit: contain;
}


.product-image-thumbnails {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 8px;
}


.product-image-thumbnail {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 64px;
    height: 64px;

    padding: 3px;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #dce0e7;
    border-radius: 8px;

    cursor: pointer;
}


.product-image-thumbnail:hover {
    border-color: #8a91a0;
}


.product-image-thumbnail.active {
    border-color: #262c36;

    box-shadow:
        0 0 0 1px #262c36;
}


.product-image-thumbnail img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}


.seller-listing-image {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 54px;

    width: 54px;
    height: 54px;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e1e4e8;
    border-radius: 8px;
}


.seller-listing-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}