@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600&display=swap');

.progress-wrap btn-right-side active-progress {
    display: none;
}

.buyer-catalog-fallback h2 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 600;
}

.buyer-catalog-fallback p {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 400;
}


/* =============================
   LAYOUT SYSTEM
============================= */

.buyer-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 24px;
    align-items: start;
    padding: 30px 10px;
    min-height: 95vh;


}


.buyer-catalog-collection {
    font-family:
        "Inter",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif !important;
    padding: 10px;
    transition: filter 0.15s ease;
}

.buyer-catalog-collection.is-loading {
    filter: blur(4px);
    pointer-events: none;
    user-select: none;
}

/* Main Toolbar Line Container */
.buyer-catalog-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 24px;
    padding: 4px 0;
}

/* 1. Left Element (Width matches right side to keep pagination centered) */
.buyer-catalog-results {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 14px;
    color: #4b5563;
    font-weight: 500;
}

/* 2. Middle Pagination Controls (Dead Center) */
.buyer-catalog-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.buyer-catalog-page-button {
    border: 1px solid #e5e7eb;
    background-color: #ffffff;
    color: #374151;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.buyer-catalog-page-button:hover {
    border-color: #d1d5db;
    background-color: #f9fafb;
}

.buyer-catalog-page-button.active {
    background-color: #111827;
    color: #ffffff;
    border-color: #111827;
}

/* 3. Right Tier Badge Container (Anchored Far-Right) */

.buyer-catalog-tier-badge {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.buyer-catalog-tier-icon {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.buyer-catalog-tier-label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.buyer-catalog-tier-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.tier-stars {
    font-size: 11px;
    line-height: 1;
}

/* --- Dynamic Tier Styling --- */

/* Entry (Subtle Lilac/Purple) */
.tier-entry {
    background-color: #f5f3ff;
    border: 1px solid #e9d5ff;
    color: #7c3aed;
}

/* Silver */
.tier-silver {
    background-color: #f3f4f6;
    border: 1px solid #d1d5db;
    color: #4b5563;
}

/* Gold */
.tier-gold {
    background-color: #fefce8;
    border: 1px solid #fef08a;
    color: #ca8a04;
}

/* Platinum */
.tier-diamond {
    background-color: #0f172a;
    border: 1px solid #334155;
    color: #f8fafc;
}




/* =============================
   FILTER SIDEBAR
============================= */

.buyer-filters {
    position: sticky;
    top: 20px;

    display: flex;
    flex-direction: column;
    gap: 16px;

    padding: 16px;

    background: rgba(255,255,255,.96);
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 14px;

    box-shadow: 0 6px 18px rgba(0,0,0,.04);

    backdrop-filter: blur(10px);

    overflow-y: auto;      /* enables scrolling */
    overflow-x: hidden;    /* optional */
    max-height: 95vh;     /* or whatever constraint you need */

    /* hide scrollbar (modern browsers) */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge legacy */
}

.buyer-filters::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge Chromium */
}

.mobile-filter-close-btn {
    display: none !important;
}

/* =============================
   SEARCH
============================= */

.buyer-catalog-search {
    width: 100%;
    padding: 10px 12px;

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

    font-size: 13px;

    color: #111;
    outline: none;

    transition: border .2s ease, box-shadow .2s ease;
}

.buyer-catalog-search:focus {
    border-color: #111;
    box-shadow: 0 0 0 2px rgba(0,0,0,.06);
}

/* =============================
   SORT
============================= */

.buyer-catalog-sort {
    width: 100%;
    padding: 10px 12px;

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

    font-size: 13px;
    background: #fff;
}

/* =============================
   PRICE FILTER
============================= */

.buyer-price-filter {
    display: flex;
    flex-direction: column;
    gap: 12px;

    padding: 14px;

    background: #fff;

    border: 1px solid rgba(0,0,0,.06);
    border-radius: 14px;
}

.filter-label {
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #9a9a9a;
}

/* =============================
   SLIDER 
============================= */

/* =============================
   PRICE SLIDER BASE
============================= */

.price-slider-wrap {
    position: relative;
    height: 36px;
    display: flex;
    align-items: center;
}

/* BASE TRACK (always grey) */

.price-track {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;

    height: 2px;

    background: #e6e6e6;
    border-radius: 999px;

    transform: translateY(-50%);    
    z-index: 1;
}

.price-active-track {
    position: absolute;
    top: 50%;
    height: 2px;

    transform: translateY(-50%);

    background: #111;
    border-radius: 999px;

    z-index: 2;

    left: var(--min-percent, 0%);
    right: calc(100% - var(--max-percent, 100%));
}

/* =============================
   INPUT LAYER (TWO HANDLES)
============================= */

.price-slider-wrap input[type="range"] {
    position: absolute;
    width: 100%;

    height: 36px;
    margin: 0;

    -webkit-appearance: none;
    appearance: none;

    background: transparent;

    pointer-events: none;
    z-index: 3;
}

/* re-enable pointer only on thumb */

.price-slider-wrap input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;

    width: 18px;
    height: 18px;

    background: #111;
    border: 2px solid #fff;

    border-radius: 50%;

    box-shadow: 0 2px 10px rgba(0,0,0,.18);

    cursor: grab;

    pointer-events: auto;

    transition: transform .15s ease;
}

.price-slider-wrap input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.12);
}

.price-slider-wrap input[type="range"]:active::-webkit-slider-thumb {
    cursor: grabbing;
}

/* Firefox */

.price-slider-wrap input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;

    background: #111;
    border: 2px solid #fff;

    border-radius: 50%;

    cursor: grab;
    pointer-events: auto;
}

/* =============================
   VALUE DISPLAY
============================= */

.price-range-values {
    display: flex;
    justify-content: space-between;

    font-size: 11px;
    color: #9a9a9a;

    margin-top: 6px;
}

#priceMinValue,
#priceMaxValue {
    color: #111;
    font-weight: 600;
}

.price-track,
.price-active-track {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 2px;
}

/* =====================================================
   FILTER GROUPS
===================================================== */

.buyer-grading-filter-group,
.buyer-brand-filter-group {
    margin-top: 12px;
}


/* 
   GROUP BOX
 */

.buyer-grading-filter-options,
.buyer-brand-filter-options {

    background: #fff;

    border: 1px solid #e5e5e5;
    border-radius: 8px;

    padding: 14px;

}

.buyer-grading-filter-options {

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

    column-gap: 18px;
    row-gap: 10px;

}

.buyer-brand-filter-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    column-gap: 18px;
    row-gap: 10px;

    max-height: 40vh;
    overflow-y: auto;
    overflow-x: hidden;

        /* hide scrollbar (modern browsers) */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge legacy */
}


.buyer-brand-filter-options::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge Chromium */
}


.buyer-filter-option {

    display: flex;
    align-items: center;

    gap: 6px;

    cursor: pointer;

    font-size: 13px;
    color: #333;

    user-select: none;

}

.buyer-filter-option input {

    margin: 0;

}

.buyer-filter-option span {

    line-height: 1.2;

}

/* =============================
   CATALOG AREA
============================= */

.buyer-catalog {
    min-width: 0;
}

/* =====================================================
   GRID WRAPPER
===================================================== */

.buyer-catalog-grid-wrapper {

    position: relative;

}

/* =====================================================
   GRID
===================================================== */

.buyer-catalog-grid {

    transition:
        opacity .2s ease,
        filter .2s ease;

}

/* =====================================================
   LOADING OVERLAY
===================================================== */

.buyer-catalog-overlay {

    position: absolute;
    inset: 0;

    z-index: 10;

    opacity: 0;
    visibility: hidden;

    background: rgba(255,255,255,.08);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    pointer-events: none;

    transition:
        opacity .2s ease,
        visibility .2s ease;

}

.buyer-catalog-overlay.active {

    opacity: 1;
    visibility: visible;

    pointer-events: all;

}

.buyer-catalog-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

/* =============================
   CARD SYSTEM (FULL FIX)
============================= */

.buyer-catalog-card {
    position: relative;

    display: flex;
    flex-direction: column;

    background: #fff;

    border: 1px solid rgba(0,0,0,.06);
    border-radius: 18px;

    overflow: hidden;

    box-shadow:
        0 8px 24px rgba(0,0,0,.06);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.buyer-catalog-card:hover {

    box-shadow: 0 14px 28px rgba(0,0,0,.08);
}

/* =============================
   SORT BADGE
============================= */

.buyer-catalog-sort-order {

    position: absolute;
    
    top: 1px;
    left: 1px;

    width: 38px;
    height: 38px;

    border-radius: 30px;

    background: #222;
    color: #E8E5DF;
    font-size: 12px;
    font-weight: 700;

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

    z-index: 10;

}


/* =============================
   IMAGE SYSTEM (ENSURES VISIBILITY)
============================= */

.buyer-catalog-image {

    aspect-ratio: 1 / 1;

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

    padding: 5px;

    background: #FAFAFA;

    overflow: hidden;

}

/* Diagonal GOLD Corner Ribbon */
.sold-ribbon {
    position: absolute;
    top: 18px;
    right: -35px;
    width: 120px;
    background-color: #b48418;
    color: #ffffff;
    text-align: center;
    line-height: 24px;
    transform: rotate(45deg);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    pointer-events: none;
    z-index: 5;
}

/* Diagonal Blue Corner Ribbon */
.reserved-ribbon {
    position: absolute;
    top: 18px;
    right: -45px;
    width: 150px;
    background-color: #2563eb;
    color: #ffffff;
    text-align: center;
    line-height: 24px;
    transform: rotate(45deg);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    pointer-events: none;
    z-index: 5;
}

.sold-ribbon span,
.reserved-ribbon span {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    display: block;
}

/* Optional: Slight opacity shift on sold items */
.buyer-catalog-card.is-sold-card .buyer-catalog-image img {
    opacity: 0.75
}

/* Disabled "NOT AVAILABLE" Button */
.buyer-sold-btn {
    width: 100%;

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

    box-sizing: border-box;

    padding: 10px 16px;

    border: 1px solid #e5e7eb;
    border-radius: 8px;

    background-color: #f3f4f6;
    color: #9ca3af;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    text-align: center;

    cursor: not-allowed;
    user-select: none;
}

.buyer-catalog-image img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: center center;

    transition: transform 0.4s ease;

    will-change: transform;

}

.buyer-catalog-image:hover img {
    transform: scale(1.20);
}

/* =============================
   CONTENT SYSTEM
============================= */

.buyer-catalog-content {
    padding: 0 18px;
}

.buyer-catalog-content h3 {
    margin: 0 0 6px;
    font-size: 15px !important;
    font-weight: 500 !important;
    padding-top: 2px  !important;
    line-height: 1.2;
}

.buyer-catalog-content p {
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
    color: #666;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    overflow: hidden;

    min-height: calc(1.4em * 2);
}

.buyer-item-meta {

    display: flex;
    align-items: center;
    gap: 8px;

    margin-top: auto;
    margin-bottom: 6px;

}

.buyer-meta-chip {

    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 9px 16px;

    border: 1px solid rgba(0,0,0,.07);
    border-radius: 999px;

    background: #fafafa;

    font-size: 12px;
    font-weight: 500;

    color: #5e5e5e;

    transition: .2s ease;
}

.buyer-meta-chip strong {

    color: #181818;
    font-weight: 700;

}

.buyer-chip-grade {

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

    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    padding: 0;

    border-radius: 50%;

    background: #FAFAF8;
    border: 1px solid #E8E5DF;

    color: #222;

    font-size: 13px;
    font-weight: 600;
    line-height: 1;

    text-align: center;

    box-sizing: border-box;

}

.buyer-meta-chip-tag {

    background: white;

}

/*
.buyer-chip-grade-new {}
.buyer-chip-grade-like-new {}
.buyer-chip-grade-excellent {}
.buyer-chip-grade-good {}
.buyer-chip-grade-acceptable {}
.buyer-chip-grade-poor {}
.buyer-chip-grade-junk {}
.buyer-chip-grade-default {}
*/

.buyer-meta-icon{

    width:16px;
    height:16px;

    color:#8E8E93;

    flex-shrink:0;

}

/* =============================
   PRICING SYSTEM (FULL FIX)
============================= */

.buyer-catalog-pricing {
    display: flex;
    justify-content: space-between;
    padding: 0 15%;
    text-align:center;
    margin-bottom: 0;
}

.pricing-column {

    display: flex;
    flex-direction: column;

}

/* labels */

.pricing-label {

    margin-bottom: 6px;

    font-size: 12px;
    color: #8a8a8a;

    text-transform: none;
    letter-spacing: 0;

}

/* planned price (subtle secondary value) */

.planned-price {

    font-size: 16px;
    color: #333;

}

/* buyer price (primary emphasis) */

.buyer-price {

    font-size: 16px;
    color: #b97712;
}

.marketplace-price-column {

    width:100%;

    text-align:center;

}


.marketplace-price-column .planned-price {

    font-size: 16px;
    color: #333;

}

.buyer-catalog-grid-wrapper {
    margin-top: 2rem;
}

.buyer-card-divider {
    margin: 0 18px;
    border-top: 1px solid #ececec;
}

/* --- ADD TO SELECTION --- */

.buyer-catalog-actions {
    padding: 12px 16px 16px;
    display: flex;
    justify-content: center;
    margin-top: 0;
}

.buyer-marketplace-btn,
.buyer-selection-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    

    padding: 4px 12px !important;

    background: #fff !important;
    border: 1px solid #d4af37 !important;
    border-radius: 10px !important;

    color: #111 !important;

    cursor: pointer;
    transition: all 0.2s ease;
}

.buyer-sold-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 4px 12px !important;

    border: 1px #fff !important;
    border-radius: 10px !important;
    color: #111 !important;

}

.buyer-marketplace-btn span,
.buyer-selection-btn span,
.buyer-sold-btn span {
    font-size: 15px;
    font-weight: 400;
    color: inherit !important;
}

.buyer-marketplace-btn svg,
.buyer-selection-btn svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
}

.buyer-marketplace-btn:hover {
    background: #111 !important;
    border-color: #111 !important;
    color: #fff !important;
}


/* Only hover when not selected */
.buyer-selection-btn:not(.is-selected):hover {
    background: #111 !important;
    border-color: #111 !important;
    color: #fff !important;

    opacity: 0.9;
}

/* Selected */
.buyer-selection-btn.is-selected {
    background: #111 !important;
    border-color: #111 !important;
    color: #fff !important;
}

/* Keep selected while hovering */
.buyer-selection-btn.is-selected:hover {

    background: #fff !important;
    border-color: #d4af37 !important;
    color: #111 !important;

}

.buyer-sold-btn:hover {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 4px 12px !important;

    border: 1px #fff !important;
    border-radius: 10px !important;
    color: #111 !important;

}

.buyer-add-icon {
    width: 18px;
    height: 18px;
}




/* =============================
   CATALOG PAGINATION
============================= */

.buyer-catalog-pagination {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;

}

.buyer-catalog-page-button {
    width: 38px !important;
    height: 38px !important;

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

    padding: 0 !important;
    margin: 0 !important;

    border: 1px solid #d9d9d9 !important;
    border-radius: 50% !important;

    background: #fff !important;
    color: #333 !important;

    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1 !important;

    appearance: none !important;
    -webkit-appearance: none !important;

    cursor: pointer !important;
    user-select: none !important;

    transition:
        transform .2s ease,
        background-color .2s ease,
        border-color .2s ease,
        color .2s ease,
        box-shadow .2s ease !important;
}

/* Hover */
@media (hover: hover) {
    .buyer-catalog-page-button:not(:disabled):hover {
        transform: translateY(-2px) !important;
        background: #111 !important;
        color: #fff !important;
        border-color: #111 !important;
        box-shadow: 0 8px 20px rgba(0,0,0,.12) !important;
    }

    /* Keep active button lifted slightly on desktop hover */
    .buyer-catalog-page-button.active:hover {
        transform: translateY(-2px) !important;
    }
}

/* Current Page */
.buyer-catalog-page-button.active {
    background: #111 !important;
    color: #fff !important;

    border-color: #111 !important;

    box-shadow: 0 10px 24px rgba(0,0,0,.18) !important;
}

/* Keep active button lifted slightly on hover */
.buyer-catalog-page-button.active:hover {
    transform: translateY(-2px) !important;
}

/* Click */
.buyer-catalog-page-button:not(:disabled):active {
    transform: translateY(0) !important;
    box-shadow: 0 4px 10px rgba(0,0,0,.12) !important;
}

/* Disabled */
.buyer-catalog-page-button:disabled,
.buyer-catalog-page-button.disabled {
    opacity: .25 !important;
    cursor: default !important;
    pointer-events: none !important;
    box-shadow: none !important;
}

/* ==========================================
    DON'T SHOW FILTER BUTTON ON DESKTOP VIEW
=========================================== */

.mobile-filter-toggle-btn {
    display: none !important;
}

/* ===============================
    SELECTION SUMMARY
=============================== */

.buyer-selection-summary {

    position: fixed;

    bottom: 0;
    left: 0;
    right: 0;

    background: #fff;

    border-top:1px solid #ececec;

    box-shadow:
        0 -10px 35px rgba(0,0,0,.08);

    z-index:9999;


    opacity:0;

    pointer-events:none;

    transition:
        opacity .25s ease;

}

.buyer-selection-summary.is-unavailable {
    display: none;
}

.buyer-selection-unavailable-summary {

    position: fixed;

    bottom: 0;
    left: 0;
    right: 0;

    padding: 5px 20px;

    display: none;

    background: rgb(255, 187, 28);

    border-top: 1px solid #ececec;

    box-shadow:
        0 -10px 35px rgba(0,0,0,.08);

    z-index: 9999;
}

.buyer-selection-unavailable-summary.is-visible{
    display:block;
    background: rgb(249, 208, 111);
    opacity:1;
}


/* ===============================
    ACTIVE STATE
=============================== */

.buyer-selection-summary.has-selections {

    opacity:1;

    pointer-events:auto;

}

/* ===============================
    GUEST STATE - no AE Account
=============================== */

.buyer-selection-summary.is-guest {

    opacity:0;

    pointer-events:none;

}



.buyer-selection-summary-inner{
    width: 100%;

    display:flex;
    align-items:center;
    gap: 40px;

    padding:12px 24px;
}

.buyer-selection-overview{
    display:flex;
    align-items:center;
    gap:16px;

    width: 220px;
    flex-shrink: 0;
}

.buyer-selection-icon,
.buyer-selection-unavailable-icon {
    width:52px;
    height:52px;
    
    display:flex;
    align-items:center;
    justify-content:center;

    flex-shrink: 0;

    border-radius:50%;
    background:#f8f3e4;
    color:#c5962c;
}

.buyer-selection-icon {
    background:#f8f3e4;
    color:#c5962c;
}

.buyer-selection-unavailable-icon {
    background: rgb(249, 208, 111);
    color:#8C620E;
}

.buyer-selection-icon svg,
.buyer-selection-unavailable-icon svg{
    width:48px;
    height:48px;
}

.buyer-selection-title{
    font-size:15px;
    font-weight:600;
    color:#222;
}

.buyer-selection-subtitle{
    margin-top:2px;
    font-size:12px;
    color:#888;
}

.buyer-selection-metrics{
    flex: 1;
    display:flex;
    justify-content: space-evenly;
    align-items: center;
}

.buyer-selection-metric{
    display:flex;
    flex-direction:column;
}

.buyer-selection-label{
    margin-bottom:4px;

    font-size:12px;
    font-weight:500;
    color:#888; 
}

.buyer-selection-metric strong{
    font-size:18px;
    font-weight:500;
    line-height:1;
    color: #5d5d5d;
}

.buyer-selection-your-total{
    color:#c5962c !important;
}

.buyer-selection-save-total{
    color:#2f9b44 !important;
}

.buyer-selection-view-button,
.buyer-selection-view-removed-button{
    display:flex;
    align-items:center;
    gap:10px;
    
    flex-shrink: 0;

    padding:10px 20px !important;

    border:none;
    border-radius:10px;

    background:#c5962c !important;
    color:#fff !important;

    font-size:15px;
    font-weight:600;

    cursor:pointer;

    transition:.2s;
}

.buyer-selection-view-button:hover,
.buyer-selection-view-removed-button {
    background:#b48418 !important;
}

.buyer-selection-view-button svg{
    width:18px;
    height:18px;
}

/* Unavailable Text and Button Styling */

.buyer-selection-unavailable-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;

    min-width: 0;
}

.buyer-selection-unavailable-title {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.buyer-selection-unavailable-subtitle {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
}

.buyer-selection-unavailable-count {
    font-weight: 700;
}


.buyer-selection-view-removed-button {
    margin-left: auto;

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

    flex-shrink: 0;

    padding: 10px 18px;

    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 6px;

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

    font-size: 13px;
    font-weight: 600;

    cursor: pointer;
}

.buyer-selection-unavailable-inner {
    display: flex;
    align-items: center;
    gap: 14px;

    width: 100%;
}

/* ==========================================================
   PRODUCT MODAL
========================================================== */

.buyer-product-modal{
    position:fixed;
    inset:0;
    z-index:9999;

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

    padding:clamp(16px, 2.5vw, 28px);
    box-sizing:border-box;

    background:rgba(0,0,0,.52);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transition:opacity .22s ease;
}

.buyer-product-modal:not(.is-hidden){
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.buyer-product-modal-overlay{
    position:absolute;
    inset:0;
    z-index:0;
}

.buyer-product-modal-shell{
    width:min(1120px, 100%);
    height: calc(100vh - 56px);
    max-height: 800px;

    display:flex;
    flex-direction:column;

    min-height:0;

    background: #3a3838;

    position:relative;
    z-index:1;
    overflow: hidden;
}

.buyer-product-modal-body{
    position:relative;
    z-index:1;

    width:100%;
    max-height:800px;
    min-height:1;

    display:flex;
    flex: 1;
    flex-direction:column;
    overflow:hidden;

    box-shadow: 0 4px 6px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.06);
    background: #3a3838;
}

.buyer-product-loading{
    display:flex;
    align-items:center;
    justify-content:center;

    min-height:240px;

    padding:32px;

    border-radius:14px;

    background:#3a3838;
}


.buyer-product-close{

    all:unset;

    position:absolute;

    top:16px;
    right:16px;

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

    width:36px;
    height:36px;

    box-sizing:border-box;

    border:1px solid transparent !important;
    border-radius:50%;

    background:transparent !important;

    color:#fff !important;

    font-size:16px !important;
    font-weight:400 !important;
    line-height:1 !important;

    cursor:pointer;

    z-index:1000;

    transition:border-color .2s ease, color .2s ease;

}

.buyer-product-close:hover,
.buyer-product-close:focus,
.buyer-product-close:active{

    border-color:#fff !important;
    background:transparent !important;
    color:#fff !important;

    box-shadow:none !important;
    outline:none !important;

}

.buyer-product-close::before,
.buyer-product-close::after{

    display:none !important;

}

/* =============================
    IMAGE TRANSITION POLISH
============================= */

#buyer-product-modal .buyer-product-main img {
    will-change: opacity;
}


/* ==========================================================
   PRODUCT VIEW
========================================================== */

.buyer-product-view{

    display:grid;

    grid-template-columns:
        690px
        minmax(320px,360px);

    gap:28px;

    height: 100%;
    max-height: 800px;
    min-height: 0;
    align-items:stretch;

}

/* ==========================================================
   GALLERY
========================================================== */

.buyer-product-gallery{

    display:grid;
    grid-template-columns:
        88px
        minmax(0, 1fr);
    gap:8px;
    height:100%;
    min-height:0;
    align-items:stretch;
    padding:12px;
    box-sizing:border-box;
    overflow:hidden;

    position: relative;
    z-index:1;

}

/* ==========================================================
   THUMBNAILS
========================================================== */

.buyer-product-thumbs{

    display:flex;
    flex-direction:column;

    position: relative;
    z-index: 2;
    gap:10px;

    width:92px;

    min-height:0;
    height:100%;
    max-height:100%;

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

    padding:0 12px 0 0;   /* room for scrollbar */

    box-sizing:border-box;

    flex-shrink:0;
    isolation: isolate;

}

.buyer-product-thumbs::-webkit-scrollbar{
    width:8px;
}

.buyer-product-thumbs::-webkit-scrollbar-track{
    background:#0b0b0d;
    border-radius:20px;
}

.buyer-product-thumbs::-webkit-scrollbar-thumb{
    background:#FAFAF8;
    border-radius:20px;
}

.buyer-product-thumbs::-webkit-scrollbar-thumb:hover{
    background:#FAFAF8;
}

.buyer-thumb{

    width:68px;
    min-width:68px;

    height:68px;
    min-height:68px;

    flex:none;

    object-fit:cover;

    border-radius:8px;

    overflow:hidden;

    background:#1a1a1a;

    transition:.18s;

    cursor:pointer;

    box-sizing:border-box;

}

.buyer-thumb:hover{

    transform:translateY(-1px);

}

.buyer-thumb.active{

    border:2px solid #c9a227;

    box-shadow:
        0 0 0 1px rgba(212,175,55,.35),
        0 0 14px rgba(212,175,55,.2);

    transform:scale(1.03);

}

/* ==========================================================
   MAIN IMAGE
========================================================== */

.buyer-product-main {

    position: relative;

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

    width: 100%;
    height: 100%;
    min-height: 0;

    overflow: hidden;

    border-radius: 8px;

    box-sizing: border-box;
    cursor: none;
}

.buyer-main-img{

    display:block;

    width:100%;
    height:100%;

    object-fit:contain;
    object-position:center;

    user-select:none;
    -webkit-user-drag:none;

    pointer-events:none;

    transition:opacity .2s ease;

}

/* ==========================================================
    ZOOM WINDOW ON IMAGE
========================================================== */

/* ==========================================================
   IMAGE ZOOM LENS
========================================================== */

.zoom-lens{

    position:absolute;

    width:180px;
    height:180px;

    display:none;

    pointer-events:none;

    overflow:hidden;

    border-radius:16px;

    border:1px solid rgba(255,255,255,.45);

    background-repeat:no-repeat;

    backdrop-filter:blur(5px);
    -webkit-backdrop-filter:blur(5px);

    box-shadow:
        0 10px 35px rgba(0,0,0,.30),
        inset 0 0 0 1px rgba(255,255,255,.10);

    z-index:10;

}

.zoom-lens::before{

    content:"";

    position:absolute;
    inset:0;

    border-radius:inherit;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.32),
            rgba(255,255,255,.05) 35%,
            rgba(255,255,255,0) 55%
        );

    pointer-events:none;

}

.zoom-lens::after{

    content:"";

    position:absolute;
    inset:-2px;

    border-radius:inherit;

    background:
        linear-gradient(
            135deg,
            rgba(255,0,120,.08),
            rgba(0,180,255,.08),
            rgba(255,255,255,0)
        );

    mix-blend-mode:screen;

    pointer-events:none;

}



/* ==========================================================
   INFORMATION PANEL
========================================================== */

.buyer-product-info{

    display:flex;
    flex-direction:column;

    height:100%;
    min-height:0;

    justify-content:flex-start;

    padding:20px 24px 20px 0;

    gap:12px;

}

/* =====================================================
   PRODUCT VIEW 
===================================================== */

/* 
    PLEASE NOTE!!!!! 
    STYLING FOR PRODUCT VIEW BUTTON - ADDING SELECTION ABOVE WITH CATALOG CARD STYLING, FOR SIMILARITY 
    IF WISH TO ADJUST LOCATION - YOU CAN REFACTOR LOCATION OF STYLING TO THIS AREA
*/

/* ---------------------------------------------------------- */

.buyer-product-brand{

    margin:0;

    color:#D4AF37;

    font-size:18px;
    font-weight:700;

    letter-spacing:.08em;
    text-transform:uppercase;

    line-height:1.2;

}

.buyer-product-description{

    margin:0;

    color:#F3F3F3;

    font-size:15px;
    font-weight:500;

    line-height:1.45;

}

/* ---------------------------------------------------------- */

.buyer-product-notes{

    flex:1;

    margin:0;

    padding:16px 0px 5px;

    color:#edecec;

    font-size:12px;
    line-height:1.5;

    white-space:pre-wrap;

    overflow:auto;

}

/* ---------------------------------------------------------- */

.buyer-product-pricing{

    display:grid;

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

    gap:10px;

    padding-top:8px;

}

.buyer-price-card{

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

    padding:5px;

}

.buyer-price-label,
.buyer-marketplace-price-label {

    margin-bottom:6px;

    font-size:10px;

    letter-spacing:.12em;
    text-transform:uppercase;

    color:#edecec;

}

.buyer-product-catalog-price,
.buyer-product-buyer-price,
.buyer-product-save-price,
.buyer-marketplace-price {

    font-size:18px;
    font-weight:700;
    line-height:1;

}

.buyer-product-catalog-price,
.buyer-marketplace-price {
    color:#edecec;
}

.buyer-product-buyer-price{

    color:#D4AF37;
}

.buyer-product-save-price{
    color:#36C275;
}

.buyer-marketplace-price-card{
    grid-column:1 / -1;

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

    padding:20px;
}
/* ---------------------------------------------------------- */

/* ======================================
   PRODUCT ACTIONS
====================================== */

.buyer-product-actions{

    margin-top:0;

    padding-top:14px;

}



/* =====================================================
   PRODUCT MODAL ACTION BUTTONS
===================================================== */



#buyer-product-modal .buyer-selection-product-button.buyer-selection-btn {

    background:#111 !important;

    color:#ffffff !important;

    border:1px solid #111 !important;

    position:relative;

    overflow:hidden;

}


/* Add To Selection hover */

#buyer-product-modal .buyer-selection-product-button.buyer-selection-btn:hover {

    background:#f2f2f2 !important;

    color:#111 !important;

    border-color:#f2f2f2 !important;

    box-shadow:0 8px 18px rgba(212,175,55,.25) !important;

}


/* Click */

#buyer-product-modal .buyer-selection-product-button.buyer-selection-btn:active {

    box-shadow:none !important;

}


/* -----------------------------------------------------
   Selected - Remove From Selection
----------------------------------------------------- */

#buyer-product-modal .buyer-selection-product-button.buyer-selection-btn.is-selected {

    background:#f2f2f2 !important;

    color:#111 !important;

    border-color:#f2f2f2 !important;

    box-shadow:0 6px 16px rgba(212,175,55,.18) !important;

}


/* Selected hover */

#buyer-product-modal .buyer-selection-product-button.buyer-selection-btn.is-selected:hover {

    background:#111 !important;

    color:#ffffff !important;

    border-color:#111 !important;

    box-shadow:0 8px 18px rgba(0,0,0,.25) !important;

}

#buyer-product-modal .buyer-selection-product-button {

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        transform .2s ease,
        box-shadow .25s ease;
    
    font-size: 14px;
    letter-spacing:.08em;
    text-transform:uppercase;

    color:#edecec;

}

/* -----------------------------------------------------
   Marketplace button
----------------------------------------------------- */

#buyer-product-modal .buyer-selection-product-button.buyer-marketplace-btn {

    background:#111 !important;

    color:#fff !important;

    border:1px solid #111 !important;

    border-radius: 10px !important;

    font-size: 12px !important;

    letter-spacing: 1.5px;

}


#buyer-product-modal .buyer-selection-product-button.buyer-marketplace-btn:hover {

    background:#F3F3F3 !important;

    color:#111 !important;

    border-color:#D4AF37 !important;

}


/* -----------------------------------------------------
   Sold / unavailable
----------------------------------------------------- */

#buyer-product-modal .buyer-selection-product-button.buyer-sold-btn {

    background:transparent !important;

    color:#fff !important;

    border:none !important;

    cursor:default;

    opacity:.75;

}

.buyer-catalog-unavailable {

    background:transparent !important;

    color:#fff !important;

    text-transform: uppercase;

    letter-spacing: 1.2px;

    font-size: 20px;

    font-weight: 400;

}


/* Disabled reset */

#buyer-product-modal .buyer-selection-product-button:disabled {

    opacity:.75;

}



/* =====================================================
   SELECTION MODAL
===================================================== */


/* =====================================================
   BACKDROP
===================================================== */

.buyer-selection-modal {

    position: fixed;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 24px;

    background:
        rgba(12, 14, 20, .55);

    backdrop-filter: blur(12px);

    z-index: 99999;

    opacity: 1;

    visibility: visible;

    transition:
        opacity .25s ease,
        visibility .25s ease;

}


.buyer-selection-modal.is-hidden {

    opacity:0;

    visibility:hidden;

    pointer-events:none;

}



/* =====================================================
   SHELL
===================================================== */

.buyer-selection-modal-shell {

    position:relative;


    width:min(1000px, 94vw);

    height:min(780px, 88vh);


    display:flex;

    flex-direction:column;


    background:#ffffff;


    border-radius:24px;


    overflow:hidden;


    box-shadow:

        0 35px 100px rgba(0,0,0,.25);

}

.buyer-selection-modal-shell.is-success {

    width:min(1320px, 96vw);

    height:min(900px, 92vh);

}



/* =====================================================
   CLOSE
===================================================== */

/* =====================================================
   CLOSE BUTTON
===================================================== */

.buyer-selection-modal-close {

    position:absolute;

    top:20px;

    right:20px;


    width:40px;

    height:40px;


    display:flex;

    align-items:center;

    justify-content:center;


    border-radius:50%;


    border:

        1px solid rgba(0,0,0,.08);


    background:

        rgba(255,255,255,.95);


    color:#555;


    font-size:16px;

    line-height:1;


    cursor:pointer;


    z-index:20;


    box-shadow:

        0 4px 12px rgba(0,0,0,.08);


    transition:

        background .2s ease,
        transform .25s ease,
        box-shadow .25s ease;

}


.buyer-selection-modal-close:hover {

    background:#111;

    color:#fff;


    transform:

        rotate(90deg);


    box-shadow:

        0 8px 20px rgba(0,0,0,.15);

}

.buyer-selection-modal-body{

    flex:1;

    min-height:0;

    overflow-y:auto;

}


/* =====================================================
   VIEW CONTAINER
===================================================== */

.buyer-selection-step,
.buyer-selection-view {

    display:flex;

    flex-direction:column;


    flex:1;

    min-height:0;

}

.buyer-selection-acknowledgement-view {

    overflow-y:auto;

    padding:32px 40px;

}

.buyer-selection-confirmation-view {

    overflow-y:auto;

    padding:32px 40px;

}

.buyer-selection-step.is-hidden,
.buyer-selection-view.is-hidden {

    display:none;

}



/* =====================================================
   HEADER
===================================================== */

.buyer-selection-header {

    flex-shrink:0;


    padding:

        34px
        40px
        24px;


    border-bottom:

        1px solid #ededed;

}



.buyer-selection-header h2 {

    margin:

        0
        0
        8px;


    font-size:

        30px;


    line-height:

        1.2;


    letter-spacing:-.03em;


    font-weight:700;


    color:#111;

}



.buyer-selection-header p {

    margin:0;


    max-width:600px;


    font-size:14px;


    line-height:1.6;


    color:#777;

}



/* =====================================================
   SCROLL CONTENT
===================================================== */

.buyer-selection-items,
.buyer-selection-terms,
.buyer-selection-reminder {

    flex:1;
    min-height:0;
    overflow-y:auto;

    padding:

        24px
        40px;

}



/* =====================================================
   SELECTION ITEMS
===================================================== */


.buyer-selection-item {

    display: flex;
    align-items: center;
    gap: 16px;

    padding: 14px 18px;

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

    background: #fff;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;

}

.buyer-selection-item + .buyer-selection-item {

    margin-top: 12px;

}


.buyer-selection-item:hover {

    border-color: #dcdcdc;

    box-shadow:
        0 8px 20px rgba(0,0,0,.05);

}


.buyer-selection-item img {

    width: 60px;
    height: 60px;

    object-fit: cover;

    border-radius: 10px;

    flex-shrink: 0;

}


.buyer-selection-details {

    flex: 1;
    min-width: 0;

}


.buyer-selection-details strong {

    display: block;

    font-size: 15px;
    font-weight: 600;

    color: #222;

    margin-bottom: 3px;

}


.buyer-selection-details p {

    margin: 0;

    font-size: 14px;
    font-weight: 400;

    color: #6f6f6f;

    line-height: 1.45;

}


.buyer-selection-actions {

    display: flex;
    align-items: center;
    gap: 20px;

    flex-shrink: 0;

}

.buyer-selection-price {

    font-size: 15px;
    font-weight: 600;

    color: #111;

    white-space: nowrap;

}

.buyer-selection-remove {

    all: unset !important;

    cursor: pointer !important;

    color: #888 !important;

    font-size: 13px !important;
    font-weight: 500 !important;

    line-height: 1;

    transition:
        color .2s ease,
        opacity .2s ease;

}

.buyer-selection-remove:hover {

    color: #d12d2d !important;

}

.buyer-selection-remove:focus-visible {

    outline: 2px solid #1a73e8;
    outline-offset: 2px;

}


/* =====================================================
   TOTALS
===================================================== */

.buyer-selection-totals,
.buyer-selection-confirm-totals {


    padding:

        18px
        40px;


    border-top:

        1px solid #eeeeee;


    background:#fafafa;

}



/* =====================================================
   CONFIRMATION SUMMARY
===================================================== */

.buyer-selection-confirm-summary {


    margin:

        20px 40px;


    padding:

        20px;


    border-radius:16px;


    background:#fafafa;


    border:

        1px solid #ededed;

}


.buyer-selection-confirm-summary h3 {

    margin:

        0
        0
        12px;


    font-size:18px;

}


.buyer-selection-confirm-summary li {

    margin-bottom:8px;

    font-size:14px;

    color:#555;

}







/* =====================================================
   SELECTION SUCCESS VIEW
===================================================== */

.buyer-selection-success-view{
    display:flex;
    flex-direction:column;
    gap:24px;
    flex:1;
    min-height:0;
}


/* =====================================================
   SUCCESS HEADER
===================================================== */

.buyer-selection-success-header{
    text-align:center;
}

.buyer-selection-success-icon{
    width:56px;
    height:56px;

    margin:0 auto 16px;

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

    border-radius:50%;

    background:#eef8f1;
    border:1px solid #dceedd;

    color:#2e7d32;

    font-size:24px;
    font-weight:700;
}

.buyer-selection-success-header h2{
    margin:0 0 8px;

    color:#1f2937;

    font-size:24px;
    font-weight:700;
    line-height:1.2;
}

.buyer-selection-success-header p{
    max-width:620px;

    margin:0 auto;

    color:#6b7280;

    font-size:13px;
    line-height:1.65;
}


/* =====================================================
   SUCCESS LAYOUT
===================================================== */

.buyer-selection-success-layout{
    display:grid;

    grid-template-columns:2.2fr 1fr;

    gap:20px;

    align-items:start;

    flex: 1;

    min-height:0;
}


/* =====================================================
   CARDS
===================================================== */

.buyer-selection-success-items-card,
.buyer-selection-success-summary-card,
.buyer-selection-success-next-steps,
.buyer-selection-success-notice{

    background:#fff;

    border:1px solid #ececec;

    border-radius:12px;

    box-shadow:0 2px 10px rgba(0,0,0,.04);

}

.buyer-selection-success-items-card,
.buyer-selection-success-summary-card,
.buyer-selection-success-next-steps{

    padding:20px;

}

.buyer-selection-success-notice{

    padding:20px;
    text-align: center;

}


/* =====================================================
   CARD HEADINGS
===================================================== */

.buyer-selection-success-items-card h3,
.buyer-selection-success-summary-card h3,
.buyer-selection-success-next-steps h3,
.buyer-selection-success-notice h3{

    margin:0 0 20px;

    color:#1f2937;

    font-size:15px;
    font-weight:600;
}


/* =====================================================
   ITEMS HEADER
===================================================== */

.buyer-selection-success-items-card header{

    display:flex;

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

    margin-bottom:18px;

}

.buyer-selection-success-item-count{

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

    padding:4px 10px;

    border-radius:999px;

    background:#faf6ee;

    border:1px solid #efe3cb;

    color:#8d6b2f;

    font-size:11px;
    font-weight:600;
}


/* =====================================================
   ITEMS LIST
===================================================== */

.buyer-selection-success-items{

    max-height:520px;

    overflow-y:auto;

    padding-right:10px;

    min-height: 0;

}


/* =====================================================
   INDIVIDUAL ITEM
===================================================== */

.buyer-selection-success-item{

    display:grid;

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

    gap:16px;

    align-items:center;

    padding:16px 0;

}

.buyer-selection-success-item+.buyer-selection-success-item{

    border-top:1px solid #f3f3f3;

}


/* =====================================================
   IMAGE
===================================================== */

.buyer-selection-success-item-image{

    flex-shrink:0;

}

.buyer-selection-success-item-image img{

    display:block;

    width:84px;
    height:84px;

    object-fit:cover;

    border-radius:10px;

    border:1px solid #ececec;

    background:#fafafa;

}


/* =====================================================
   DETAILS
===================================================== */

.buyer-selection-success-item-details{

    min-width:0;

}

.buyer-selection-success-item-details strong{

    display:block;

    margin-bottom:6px;

    color:#1f2937;

    font-size:14px;
    font-weight:600;
}

.buyer-selection-success-item-details p{

    margin:0 0 10px;

    color:#6b7280;

    font-size:12px;
    line-height:1.55;
}


/* =====================================================
   META
===================================================== */

.buyer-selection-success-meta{

    display:flex;

    flex-wrap:wrap;

    gap:6px;

}

.buyer-selection-success-meta span{

    display:inline-flex;

    align-items:center;

    padding:4px 8px;

    border-radius:999px;

    border:1px solid #ececec;

    background:#fafafa;

    color:#6b7280;

    font-size:10px;
    font-weight:600;

    letter-spacing:.04em;

    text-transform:uppercase;
}


/* =====================================================
   PRICE
===================================================== */

.buyer-selection-success-item-price{

    text-align:right;

    white-space:nowrap;

}

.buyer-selection-success-item-price span{

    display:block;

    margin-bottom:4px;

    color:#9ca3af;

    font-size:10px;
    font-weight:600;

    text-transform:uppercase;

    letter-spacing:.08em;

}

.buyer-selection-success-item-price strong{

    display:block;

    color:#1f2937;

    font-size:15px;
    font-weight:700;
}


/* =====================================================
   SIDEBAR
===================================================== */

.buyer-selection-success-sidebar{

    display:flex;

    flex-direction:column;

    gap:16px;

}

/* =====================================================
   ORDER SUMMARY
===================================================== */

.buyer-selection-success-summary{
    display:flex;
    flex-direction:column;
    gap:2px;
}

.buyer-selection-success-summary-row{
    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:9px 0;
}

.buyer-selection-success-summary-row.tier-price{
    border-top:1px solid #ececec;
}

.buyer-selection-success-summary-row span{
    color:#6b7280;

    font-size:12px;
    font-weight:500;
}

.buyer-selection-success-summary-row strong{
    color:#1f2937;

    font-size:13px;
    font-weight:600;
}


.buyer-selection-success-summary-row.is-savings span{
    color:#2e7d32;
    font-weight:600;
}

.buyer-selection-success-summary-row.is-savings strong{
    color:#2e7d32;
    font-weight:700;
}


/* =====================================================
   WHAT HAPPENS NEXT
===================================================== */

.buyer-selection-success-next-steps{
    display:flex;
    flex-direction:column;
}

.buyer-selection-step{

    display:grid;

    grid-template-columns:34px 1fr;

    column-gap:12px;

    align-items:start;

    padding:0 0 10px;

}

.buyer-selection-step:not(:last-child){

    border-bottom:1px solid #f2f2f2;

    margin-bottom:14px;

}

.buyer-selection-step+.buyer-selection-step{
    margin-top:16px;
}

.buyer-selection-step-icon{

    width:34px;
    min-width:34px;
    max-width:34px;

    height:34px;
    min-height:34px;
    max-height:34px;

    margin-top: 3px;

    flex: none;

    aspect-ratio: 1 / 1;

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

    border-radius:50%;

    background:#faf6ee;

    border:1px solid #efe3cb;

    color:#8d6b2f;

}

.buyer-selection-step>div{

    flex:1;

    min-width:0;

}


.buyer-selection-step-icon svg{

    width:17px;
    height:17px;

    display:block;

    stroke:currentColor;

}

.buyer-selection-step strong{

    display:block;

    margin:0 0 2px;

    font-size:13px;
    font-weight:600;

    line-height:1.3;

    color:#1f2937;

}


.buyer-selection-step p{

    margin:0;

    font-size:12px;

    line-height:1.55;

    color:#6b7280;

}


/* =====================================================
   PURCHASE INTENT
===================================================== */

.buyer-selection-success-notice{
    background:#fcfcfc;

    border-color:#f0f0f0;

    box-shadow:none;
}

.buyer-selection-success-notice h3{
    margin-bottom:10px;
}

.buyer-selection-success-notice p{
    margin:0;

    color:#6b7280;

    font-size:12px;
    line-height:1.7;
}

.buyer-selection-success-notice p+p{
    margin-top:10px;
}


/* =====================================================
   FOOTER
===================================================== */

.buyer-selection-success-view .buyer-selection-footer{
    display:flex;
    justify-content:center;

    margin-top:4px;
}

.buyer-selection-finish-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:220px;

    height:42px;

    padding:0 28px;

    border:none;
    border-radius:8px;

    background:#b88b3b;

    color:#fff;

    font-size:13px;
    font-weight:600;

    cursor:pointer;

    transition:
        background .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

.buyer-selection-finish-button:hover{
    background:#a97b2e;

    transform:translateY(-1px);

    box-shadow:0 8px 18px rgba(184,139,59,.18);
}


/* =====================================================
   SCROLLBAR
===================================================== */

.buyer-selection-success-items::-webkit-scrollbar{
    width:8px;
}

.buyer-selection-success-items::-webkit-scrollbar-track{
    background:transparent;
}

.buyer-selection-success-items::-webkit-scrollbar-thumb{
    background:#d7d7d7;

    border-radius:999px;
}

.buyer-selection-success-items::-webkit-scrollbar-thumb:hover{
    background:#c5c5c5;
}



/* =====================================================
   FOOTER
===================================================== */

.buyer-selection-footer {


    display:flex;


    justify-content:space-between;


    align-items:center;


    gap:14px;


    padding:

        18px
        40px;


    border-top:

        1px solid #ededed;


    background:white;

}



/* =====================================================
   BUTTONS
===================================================== */

.buyer-selection-footer button {


    height:46px;


    padding:

        0
        26px;


    border-radius:999px;


    font-size:14px;


    font-weight:600;


    cursor:pointer;


    transition:.2s ease;

}



/* secondary */

.buyer-selection-return-button,
.buyer-selection-back-button,
.buyer-selection-edit-button {


    background:white;


    border:

        1px solid #dcdcdc;


    color:#444;

}


.buyer-selection-return-button:hover,
.buyer-selection-back-button:hover,
.buyer-selection-edit-button:hover {

    background:#f7f7f7! important;

}



/* primary */

.buyer-selection-continue-button,
.buyer-selection-submit-button,
.buyer-selection-acknowledge-button {

    background:#222 !important;

    border:
        1px solid #222 !important;

    color:white !important;

}


.buyer-selection-continue-button:hover,
.buyer-selection-submit-button:hover,
.buyer-selection-acknowledge-button:hover {

    background:#222;

    transform:translateY(-1px);

}


.selection-confirm-item {

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

    gap:30px;
    padding:18px 0;
    border-bottom:1px solid #ededed;

}


.selection-confirm-details {

    display:flex;
    flex-direction:column;
    gap:5px;

}


.selection-confirm-details strong {

    font-size:15px;
    color:#111;

}


.selection-confirm-details span {

    font-size:13px;
    color:#777;

}



.selection-confirm-pricing {

    display:flex;

    flex-direction:column;

    align-items:flex-end;

    gap:4px;

}



.selection-catalog-price {

    font-size:13px;

    color:#999;

    text-decoration:line-through;

}



.selection-buyer-price {

    font-size:17px;

    font-weight:700;

    color:#111;

}

/* =====================================================
   SCROLLBAR
===================================================== */

.buyer-selection-items::-webkit-scrollbar,
.buyer-selection-terms::-webkit-scrollbar {

    width:6px;

}


.buyer-selection-items::-webkit-scrollbar-thumb,
.buyer-selection-terms::-webkit-scrollbar-thumb {

    background:#cfcfcf;

    border-radius:999px;

}


/* =====================================================
   END OF SELECTION CONFIRMATION MODAL STYLING
===================================================== */


/* ======================================================
   UNAVAILABLE SELECTIONS MODAL
====================================================== */

.buyer-unavailable-selection-modal {

    position: fixed;

    inset: 0;

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

    padding: 24px;

    background: rgba(0, 0, 0, .55);

    z-index: 10000;
}

.buyer-unavailable-selection-modal.is-hidden {
    display: none;
}


/* ======================================================
   MODAL SHELL
====================================================== */

.buyer-unavailable-selection-modal-shell {

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

    display: flex;
    flex-direction: column;

    background: #fff;

    border-radius: 14px;

    box-shadow:
        0 20px 60px rgba(0, 0, 0, .18);

    overflow: hidden;
}


/* ======================================================
   HEADER
====================================================== */

.buyer-unavailable-selection-modal-header {

    display: flex;
    align-items: center;

    gap: 16px;

    padding: 22px 24px;

    border-bottom: 1px solid #ececec;
}


.buyer-unavailable-selection-modal-icon {

    width: 48px;
    height: 48px;

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

    flex-shrink: 0;

    border-radius: 50%;

    background: #f8f3e4;

    color: #c5962c;
}


.buyer-unavailable-selection-modal-icon svg {

    width: 24px;
    height: 24px;
}


.buyer-unavailable-selection-modal-heading {

    min-width: 0;
}


.buyer-unavailable-selection-modal-heading h3 {

    margin: 0;

    font-size: 18px;
    font-weight: 600;

    line-height: 1.3;

    color: #222;
}


.buyer-unavailable-selection-modal-heading p {

    margin: 4px 0 0;

    font-size: 13px;

    line-height: 1.4;

    color: #888;
}


/* ======================================================
   CONTENT
====================================================== */

.buyer-unavailable-selection-modal-content {

    padding: 20px 24px 0;

    min-height: 0;
}


.buyer-unavailable-selection-modal-title {

    display: flex;
    align-items: center;

    gap: 8px;

    margin-bottom: 12px;

    font-size: 13px;
    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .04em;

    color: #555;
}


.buyer-unavailable-selection-count,
.buyer-available-selection-count {

    display: inline-flex;

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

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

    padding: 0 7px;

    border-radius: 11px;

    background: #f3f3f3;

    font-size: 11px;
    font-weight: 700;

    color: #666;
}


/* ======================================================
   ITEM LIST
====================================================== */

.buyer-unavailable-selection-items,
.buyer-available-selection-items {

    display: flex;
    flex-direction: column;

    gap: 8px;

    max-height: 220px;

    overflow-y: auto;

    padding-right: 4px;
}


/* ======================================================
   ITEM
====================================================== */

.buyer-unavailable-selection-item,
.buyer-available-selection-item {

    display: flex;
    align-items: center;

    gap: 12px;

    min-height: 68px;

    padding: 8px 10px;

    border: 1px solid #ededed;

    border-radius: 8px;

    background: #fff;
}


/* ======================================================
   ITEM IMAGE
====================================================== */

.buyer-unavailable-selection-item img,
.buyer-available-selection-item img {

    width: 52px;
    height: 52px;

    flex-shrink: 0;

    object-fit: cover;

    border-radius: 6px;

    background: #f6f6f6;

    
}


/* ======================================================
   ITEM DETAILS
====================================================== */

.buyer-unavailable-selection-details,
.buyer-available-selection-details {

    min-width: 0;

    flex: 1;
}


.buyer-unavailable-selection-details strong,
.buyer-available-selection-details strong {

    display: block;

    margin-bottom: 2px;

    font-size: 13px;
    font-weight: 600;

    color: #222;
}


.buyer-unavailable-selection-details p,
.buyer-available-selection-details p {

    margin: 0;

    overflow: hidden;

    font-size: 12px;

    line-height: 1.4;

    color: #777;

    white-space: nowrap;

    text-overflow: ellipsis;
}


/* ======================================================
   UNAVAILABLE REASON
====================================================== */

.buyer-unavailable-selection-details span {

    display: inline-block;

    margin-top: 3px;

    font-size: 11px;
    font-weight: 600;

    color: #b27d18;
}


/* ======================================================
   ITEM PRICE
====================================================== */

.buyer-unavailable-selection-price,
.buyer-available-selection-price {

    flex-shrink: 0;

    padding-left: 12px;

    font-size: 13px;
    font-weight: 600;

    color: #5d5d5d;
}


/* ======================================================
   UPDATED SELECTION SUMMARY
====================================================== */

.buyer-unavailable-selection-modal-summary {

    display: flex;
    align-items: center;

    gap: 40px;

    margin: 20px 24px 0;

    padding: 14px 16px;

    border-radius: 8px;

    background: #f8f8f8;
}


.buyer-unavailable-selection-modal-summary > div {

    display: flex;
    flex-direction: column;

    gap: 4px;

    min-width: 140px;
}


.buyer-unavailable-selection-modal-summary span {

    font-size: 11px;
    font-weight: 500;

    color: #888;
}


.buyer-unavailable-selection-modal-summary strong {

    font-size: 16px;
    font-weight: 600;

    color: #555;
}


/* ======================================================
   FOOTER
====================================================== */

.buyer-unavailable-selection-modal-footer {

    display: flex;
    justify-content: flex-end;

    padding: 20px 24px 24px;

    margin-top: 4px;
}


.buyer-unavailable-selection-understand-button {

    display: inline-flex;

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

    min-width: 130px;

    padding: 11px 22px;

    border: none;

    border-radius: 10px;

    background: #c5962c;

    color: #fff;

    font-size: 14px;
    font-weight: 600;

    cursor: pointer;

    transition:
        background .2s ease,
        transform .2s ease;
}


.buyer-unavailable-selection-understand-button:hover {

    background: #b48418;

    transform: translateY(-1px);
}


/* ======================================================
   SCROLLBAR
====================================================== */

.buyer-unavailable-selection-items::-webkit-scrollbar,
.buyer-available-selection-items::-webkit-scrollbar {

    width: 5px;
}


.buyer-unavailable-selection-items::-webkit-scrollbar-thumb,
.buyer-available-selection-items::-webkit-scrollbar-thumb {

    background: #d8d8d8;

    border-radius: 10px;
}


/* =====================================================
   RESPONSIVE
===================================================== */

/*
 * =====================================================
 * CATALOG LAYOUT
 * =====================================================
 */

@media (max-width: 1100px) {

    .buyer-layout {
        grid-template-columns: 280px 1fr;
    }

    .buyer-catalog-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

}

@media (max-width: 900px) {

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

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

}


/*
 * =====================================================
 * SELECTION MODAL
 * =====================================================
 */

@media (max-width: 900px) {

    .buyer-selection-modal {
        padding: 0;
    }

    .buyer-selection-modal-shell {
        width: 100%;
        height: 100vh;
        border-radius: 0;
    }

    .buyer-selection-header,
    .buyer-selection-items,
    .buyer-selection-confirm-items,
    .buyer-selection-terms,
    .buyer-selection-reminder,
    .buyer-selection-totals,
    .buyer-selection-confirm-totals,
    .buyer-selection-footer {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    .buyer-selection-footer {
        flex-direction: column-reverse;
    }

    .buyer-selection-footer button {
        width: 100%;
    }

}


/*
 * =====================================================
 * SELECTION CONFIRMATION
 * =====================================================
 */

@media (max-width: 1100px) {

    .buyer-selection-success-layout {
        grid-template-columns: 1fr;
    }

    .buyer-selection-success-sidebar {
        order: 2;
    }

}

@media (max-width: 768px) {

    .buyer-confirmation-summary {
        grid-template-columns: 1fr;
        padding: 24px;
    }

    .buyer-selection-header,
    .buyer-selection-row {
        grid-template-columns: 50px 1fr;
    }

    .buyer-selection-success-header h2 {
        font-size: 22px;
    }

    .buyer-selection-success-header p {
        font-size: 12px;
    }

    .buyer-selection-success-item {
        grid-template-columns: 72px 1fr;
        align-items: start;
    }

    .buyer-selection-success-item-image img {
        width: 72px;
        height: 72px;
    }

    .buyer-selection-success-item-price {
        grid-column: 2;
        margin-top: 10px;
        text-align: left;
    }

    .buyer-selection-success-items {
        max-height: 420px;
    }

}

@media (max-width: 480px) {

    .buyer-selection-success-items-card,
    .buyer-selection-success-summary-card,
    .buyer-selection-success-next-steps,
    .buyer-selection-success-notice {
        padding: 16px;
    }

    .buyer-selection-success-icon {
        width: 48px;
        height: 48px;
        font-size: 20px;
    }

    .buyer-selection-finish-button {
        width: 100%;
    }

}


/*
 * =====================================================
 * UNAVAILABLE SELECTION MODAL
 * =====================================================
 */

@media (max-width: 700px) {

    .buyer-unavailable-selection-modal {
        align-items: flex-end;
        padding: 0;
    }

    .buyer-unavailable-selection-modal-shell {
        max-width: none;
        max-height: 90vh;
        border-radius: 14px 14px 0 0;
    }

    .buyer-unavailable-selection-modal-header {
        padding: 18px;
    }

    .buyer-unavailable-selection-modal-content {
        padding: 16px 18px 0;
    }

    .buyer-unavailable-selection-items,
    .buyer-available-selection-items {
        max-height: 180px;
    }

    .buyer-unavailable-selection-modal-summary {
        margin-left: 18px;
        margin-right: 18px;
        gap: 20px;
    }

    .buyer-unavailable-selection-modal-footer {
        padding: 16px 18px 20px;
    }

    .buyer-unavailable-selection-understand-button {
        width: 100%;
    }

}

@media (max-width: 600px) {

    .buyer-catalog-grid {
        align-items: stretch;
    }

    .buyer-catalog-card {
        display: flex;
        flex-direction: column;
    }

    .buyer-catalog-content {
        display: flex;
        flex-direction: column;
        flex: 1;
    }

    .buyer-item-meta {
        margin-top: auto;
    }

}

@media (max-width: 700px) {

    /*
     * =====================================================
     * PRODUCT MODAL
     * =====================================================
     */

    .buyer-product-modal {
        padding: 0;
    }

    .buyer-product-modal-shell {
        width: 100%;
        height: 100dvh;
        max-height: none;
        border-radius: 0;
    }

    .buyer-product-modal-body {
        width: 100%;
        max-height: none;
        min-height: 0;

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


    /*
     * =====================================================
     * PRODUCT VIEW
     * =====================================================
     */

    .buyer-product-view {
        display: flex;
        flex-direction: column;

        width: 100%;
        height: auto;
        max-height: none;
        min-height: 0;

        overflow: visible;
    }


    /*
     * =====================================================
     * GALLERY
     * =====================================================
     */

    .buyer-product-gallery {
        display: flex;
        flex-direction: column;

        width: 100%;
        height: auto;
        min-height: 0;

        padding: 12px;
        gap: 10px;

        box-sizing: border-box;

        overflow: visible;

        flex: 0 0 auto;
    }


    /*
     * =====================================================
     * MAIN IMAGE
     * =====================================================
     */

    .buyer-product-main {
        position: relative;

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

        width: 100%;
        height: 60dvh;
        min-height: 300px;
        max-height: 500px;

        flex: 0 0 auto;

        overflow: hidden;

        border-radius: 8px;

        box-sizing: border-box;


        touch-action: pan-y;

        cursor: default;

        overflow: hidden;

    }

    .buyer-product-main.is-zoomed {

        touch-action: none;

        cursor: move;

    }

    .buyer-product-main .buyer-main-img {

        transform-origin: center center;

        transition: transform .25s ease;

        will-change: transform;

    }

    .buyer-product-main.is-zoomed .buyer-main-img {

        transition: none;

    }

    /*
     * Hide desktop zoom lens on mobile.
     */

    .zoom-lens {

        display: none !important;

    }

    .buyer-product-close {
        color: #a87430 !important;
    }



    /*
     * =====================================================
     * THUMBNAILS
     * =====================================================
     */

    .buyer-product-thumbs {
        order: 2;

        display: flex;
        flex-direction: row;

        width: 100%;
        height: 72px;
        min-height: 72px;
        max-height: 72px;

        gap: 8px;

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

        padding: 0 0 6px;

        box-sizing: border-box;

        flex: 0 0 72px;
    }

    .buyer-thumb {
        width: 64px;
        min-width: 64px;

        height: 64px;
        min-height: 64px;

        flex: 0 0 64px;
    }


    /*
     * =====================================================
     * PRODUCT INFORMATION
     * =====================================================
     */

    .buyer-product-info {
        width: 100%;
        height: auto;
        min-height: 0;

        flex: 0 0 auto;

        padding: 16px 18px 24px;

        box-sizing: border-box;

        gap: 14px;
    }


    /*
     * =====================================================
     * NOTES
     * =====================================================
     */

    .buyer-product-notes {
        flex: none;

        height: auto;
        max-height: none;

        overflow: visible;

        padding: 16px 0 5px;
    }

    .buyer-catalog-unavailable {

        font-size: 18px;

        letter-spacing: 1px;

    }

    /* --- 1. TOOLBAR GRID RE-ARRANGEMENT --- */
    .buyer-catalog-toolbar {
        display: grid !important;
        grid-template-columns: 1fr auto; /* Results on left, filter button on right */
        row-gap: 16px;
        column-gap: 12px;
        align-items: center;
        padding: 8px 0;
    }


    .mobile-filter-toggle-btn {
        display: inline-flex !important;

        width: 40px;
        height: 40px;

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

        padding: 0;

        background: transparent;
        border: 0;

        cursor: pointer;
    }

    .mobile-filter-icon {
        display: block;

        width: 22px;
        height: 22px;
    }


    /* Force results count to standard layout flow block, remove flex scaling */
    .buyer-catalog-results {
        flex: none;
        width: auto;
        font-size: 15px; /* Slightly punchier font size on mobile */
    }

    /* Move the Tier Badge into a fixed top-corner overlay or hide it here to match image layout */
    .buyer-catalog-tier-badge {
        display: none; /* Hidden from row array to keep it un-cluttered like the wireframe */
    }

    /* --- 2. MOBILE FILTER BUTTON STYLING (The dynamic trigger) --- */
    /* Add this class rule to the Filter Button you render on mobile */
    .mobile-filter-toggle-btn {
        grid-column: 2;
        grid-row: 1;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background-color: #111827; /* Sophisticated dark neutral look */
        color: #ffffff;
        border: 1px solid #111827;
        padding: 8px 16px;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        box-shadow: 0 2px 4px rgba(0,0,0,0.06);
    }

    /* --- 3. FULL WIDTH PAGINATION BAR --- */


    .buyer-catalog-pagination {
        grid-column: 1 / -1;
        grid-row: 2;

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

        width: 100%;
        gap: 8px;
    }

    .buyer-catalog-page-button {
        flex: 0 0 38px !important;

        width: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;

        height: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;

        padding: 0 !important;

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

        border-radius: 50% !important;
    }


    .buyer-catalog-page-button:not(.active):focus,
    .buyer-catalog-page-button:not(.active):active {
        background: #ffffff !important;
        color: #374151 !important;
        border-color: #e5e7eb !important;
        transform: none !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    }


    /* --- 4. MOBILE FILTER DRAWER --- */
    .buyer-filters {
        position: fixed !important;

        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: auto !important;

        width: 100% !important;
        height: 100dvh !important;
        max-height: none !important;

        z-index: 9999;

        border-radius: 0 !important;

        background: #f9fafb;

        padding: 20px;

        box-sizing: border-box;

        /* Hidden by default */
        transform: translateX(100%);

        /* Slide animation */
        transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .buyer-filters.mobile-filters-visible {
        transform: translateX(0);
    }

    .buyer-filters.mobile-filters-visible ~ .buyer-selection-summary {
        display: none !important;
    }

    body.mobile-filters-open .buyer-selection-summary {
        display: none !important;
    }


    .mobile-filter-close-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;

        width: 40px;
        height: 40px;

        margin-left: auto;
        padding: 0;

        background: transparent;
        border: 0;

        font-size: 28px;
        line-height: 1;

        color: #111827;

        cursor: pointer;
    }

    /* Convert checkbox blocks into clean modern grids like the image mockup */
    .buyer-grading-filter-options,
    .buyer-brand-filter-options {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* Balanced 3 column split */
        gap: 8px;
    }



}



@media (max-width: 700px) {

    .buyer-selection-summary-inner {
        display: grid;

        grid-template-columns: 1fr auto;

        gap: 6px 12px;

        padding: 8px 12px;
    }


    /* -----------------------------------------------
       OVERVIEW
    ------------------------------------------------ */

    .buyer-selection-overview {
        width: auto;

        gap: 8px;

        min-width: 0;
    }

    .buyer-selection-icon {
        width: 36px;
        height: 36px;
    }

    .buyer-selection-icon svg {
        width: 32px;
        height: 32px;
    }

    .buyer-selection-title {
        font-size: 13px;
    }

    .buyer-selection-subtitle {
        margin-top: 1px;
        font-size: 10px;
    }


    /* -----------------------------------------------
       VIEW BUTTON
    ------------------------------------------------ */

    .buyer-selection-view-button {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;

        width: auto !important;
        min-width: 0 !important;
        height: auto !important;

        margin: 0 !important;
        padding: 7px 11px !important;

        background: #c5962c !important;
        color: #ffffff !important;

        border: none !important;
        border-radius: 7px !important;

        font-family: inherit !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
        text-decoration: none !important;

        box-shadow: none !important;

        cursor: pointer !important;
    }

    .buyer-selection-view-button:hover,
    .buyer-selection-view-button:focus,
    .buyer-selection-view-button:active {
        background: #b48418 !important;
        color: #ffffff !important;

        border: none !important;
        box-shadow: none !important;
        outline: none !important;

        transform: none !important;
    }

    .buyer-selection-view-button svg {
        width: 15px !important;
        height: 15px !important;

        flex-shrink: 0 !important;
    }


    /* -----------------------------------------------
       METRICS
    ------------------------------------------------ */

    .buyer-selection-metrics {
        grid-column: 1 / -1;

        display: grid;

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

        gap: 4px;

        padding-top: 2px;
    }

    .buyer-selection-label {
        margin-bottom: 2px;

        font-size: 9px;
    }

    .buyer-selection-metric strong {
        font-size: 15px;
    }

}