/* =========================================
   RESET / BASE
========================================= */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
}

body {
    font-family: Inter, Arial, Helvetica, sans-serif;
    background:
        radial-gradient(circle at top left, rgba(56, 189, 248, .08), transparent 32%),
        #07111d;
    color: #eaf4ff;
}

button,
input,
select {
    font: inherit;
}

button {
    cursor: pointer;
}


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

.site-header {
    position: sticky;
    top: 0;
    z-index: 500;
    background: rgba(7, 17, 29, .96);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid #1c3043;
}

.header-inner {
    max-width: 1600px;
    margin: 0 auto;
    padding: 16px 24px;

    display: grid;
    grid-template-columns: 220px minmax(260px, 1fr) auto;
    gap: 22px;
    align-items: center;
}


/* LOGO */

.site-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    letter-spacing: -1px;
    font-size: 23px;
    font-weight: 900;
}

.logo-main {
    color: #ffffff;
}

.logo-accent {
    color: #38bdf8;
}


/* SEARCH */

.header-search {
    position: relative;
    width: 100%;
}

.search-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);

    color: #6f8aa2;
    font-size: 20px;
    pointer-events: none;
}

#globalSearch {
    width: 100%;
    height: 46px;

    padding: 0 18px 0 44px;

    background: #0d1b2a;
    color: #ffffff;

    border: 1px solid #21384d;
    border-radius: 12px;

    outline: none;

    transition: .2s ease;
}

#globalSearch::placeholder {
    color: #688198;
}

#globalSearch:focus {
    border-color: #38bdf8;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, .09);
}


/* HEADER ACTIONS */

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.add-card-link,
.cart-button,
.admin-login-button {
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;
    font-weight: 800;
    white-space: nowrap;
}

.add-card-link {
    padding: 0 16px;

    text-decoration: none;

    background: #12314a;
    color: #67e8f9;

    border: 1px solid #24526d;
}

.add-card-link:hover {
    background: #173c59;
}

.cart-button {
    gap: 7px;
    padding: 0 15px;

    background: #38bdf8;
    color: #052033;

    border: 1px solid #38bdf8;
}

.cart-button:hover {
    background: #67d4fa;
}

.cart-icon {
    font-size: 15px;
}

.cart-count {
    min-width: 22px;
    height: 22px;

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

    padding: 0 6px;

    background: #071725;
    color: #67e8f9;

    border-radius: 999px;

    font-size: 11px;
}

.admin-login-button {
    padding: 0 15px;

    background: transparent;
    color: #8299ad;

    border: 1px solid #294257;
}

.admin-login-button:hover {
    border-color: #38bdf8;
    color: #67e8f9;
}


/* =========================================
   CATEGORY NAVIGATION
========================================= */

.category-nav {
    border-top: 1px solid rgba(32, 54, 75, .65);
}

.category-nav-inner {
    max-width: 1600px;
    margin: auto;
    padding: 0 24px;

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

.category-button {
    position: relative;

    height: 54px;

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

    padding: 0 19px;

    background: transparent;
    color: #7f96aa;

    border: 0;

    font-size: 12px;
    font-weight: 900;
    letter-spacing: .8px;

    transition: .2s ease;
}

.category-button::after {
    content: "";

    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 0;

    height: 3px;

    background: #38bdf8;

    border-radius: 3px 3px 0 0;

    opacity: 0;
    transform: scaleX(.5);

    transition: .2s ease;
}

.category-button:hover {
    color: #d7e7f5;
}

.category-button.active {
    color: #ffffff;
}

.category-button.active::after {
    opacity: 1;
    transform: scaleX(1);
}

.category-symbol {
    font-size: 17px;
}

.all-symbol {
    color: #38bdf8;
    font-size: 12px;
}


/* =========================================
   CSS POKÉ BALL
========================================= */

.pokeball-icon {
    position: relative;

    width: 19px;
    height: 19px;

    flex: 0 0 19px;

    display: inline-block;

    overflow: hidden;

    border: 2px solid #dbe7ef;
    border-radius: 50%;

    background:
        linear-gradient(
            to bottom,
            #ef4444 0%,
            #ef4444 44%,
            #101820 44%,
            #101820 57%,
            #f8fafc 57%,
            #f8fafc 100%
        );

    box-shadow: 0 0 8px rgba(255,255,255,.08);
}

.pokeball-center {
    position: absolute;

    width: 7px;
    height: 7px;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    background: #f8fafc;

    border: 2px solid #101820;
    border-radius: 50%;

    z-index: 2;
}


/* =========================================
   INTRO
========================================= */

.page-intro {
    max-width: 1600px;

    margin: 0 auto;

    padding: 42px 24px 32px;

    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 30px;
}

.intro-eyebrow,
.collection-label {
    color: #38bdf8;

    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.6px;
}

.page-intro h1 {
    margin: 7px 0 8px;

    color: #ffffff;

    font-size: clamp(34px, 4vw, 52px);
    line-height: 1.05;
    letter-spacing: -1.8px;
}

.page-intro p {
    margin: 0;

    color: #8198ad;

    font-size: 15px;
    line-height: 1.6;
}

.intro-stat {
    min-width: 160px;

    padding: 16px 20px;

    background: rgba(14, 27, 42, .7);

    border: 1px solid #20364b;
    border-radius: 14px;

    text-align: right;
}

.intro-stat span {
    display: block;

    color: #ffffff;

    font-size: 30px;
    font-weight: 900;
}

.intro-stat small {
    color: #70889e;

    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.2px;
}


/* =========================================
   MAIN LAYOUT
========================================= */

.app {
    max-width: 1600px;

    margin: 0 auto;

    padding: 0 24px 60px;

    display: grid;
    grid-template-columns: 270px minmax(0, 1fr);
    gap: 28px;
}

.main-content {
    min-width: 0;
}


/* =========================================
   FILTER PANEL
========================================= */

.filters-panel {
    position: sticky;
    top: 138px;

    align-self: start;

    max-height: calc(100vh - 160px);
    overflow-y: auto;

    background: rgba(12, 26, 40, .92);

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

    scrollbar-width: thin;
    scrollbar-color: #294861 transparent;
}

.filters-header {
    padding: 18px;

    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;

    border-bottom: 1px solid #1e3448;
}

.filters-title {
    color: #ffffff;

    font-size: 17px;
    font-weight: 900;
}

.filter-status {
    margin-top: 4px;

    color: #637c92;

    font-size: 11px;
}

.hidden-filter-count {
    display: none;
}

.clear-filters {
    padding: 6px 9px;

    background: transparent;
    color: #38bdf8;

    border: 0;
    border-radius: 6px;

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

.clear-filters:hover {
    background: rgba(56, 189, 248, .08);
}

.filter-section {
    padding: 18px;

    border-bottom: 1px solid #1b3043;
}

.filter-section:last-child {
    border-bottom: 0;
}

.filter-section-title {
    margin-bottom: 11px;

    color: #a9bed0;

    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.3px;
}

.filter-search {
    width: 100%;

    margin-bottom: 11px;
    padding: 9px 10px;

    background: #091724;
    color: #ffffff;

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

    outline: none;

    font-size: 12px;
}

.filter-search::placeholder {
    color: #526b81;
}

.filter-search:focus {
    border-color: #2d789d;
}

.checkbox-list {
    max-height: 220px;
    overflow-y: auto;
}

.checkbox-row {
    display: flex;
    align-items: center;
    gap: 9px;

    margin: 9px 0;

    color: #91a7bb;

    font-size: 12px;

    cursor: pointer;
}

.checkbox-row:hover {
    color: #ffffff;
}

.checkbox-row input {
    width: 15px;
    height: 15px;

    accent-color: #38bdf8;
}


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

.collection-heading {
    min-height: 57px;

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

    margin-bottom: 8px;
}

.collection-heading h2 {
    margin: 4px 0 0;

    color: #ffffff;

    font-size: 25px;
    letter-spacing: -.5px;
}

.result-count {
    display: flex;
    align-items: baseline;
    gap: 5px;

    color: #657d93;

    font-size: 12px;
}

.result-count strong {
    color: #ffffff;

    font-size: 18px;
}


/* =========================================
   TOOLBAR
========================================= */

.result-toolbar {
    min-height: 52px;

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

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

    border-bottom: 1px solid #1c3042;
}

.toolbar-message {
    color: #667f95;

    font-size: 12px;
}

.toolbar-right {
    display: flex;
    align-items: center;
    gap: 9px;
}

.sort-label {
    color: #617a91;

    font-size: 11px;
}

#sortSelect {
    padding: 8px 11px;

    background: #0d1b2a;
    color: #c9d8e5;

    border: 1px solid #21394e;
    border-radius: 8px;

    outline: none;

    font-size: 12px;
}


/* =========================================
   CARD LIST
========================================= */

.card-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}

.card-row {
    position: relative;

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

    min-width: 0;
    min-height: 0;

    padding: 14px;

    background:
        linear-gradient(
            120deg,
            rgba(15, 31, 47, .98),
            rgba(11, 24, 37, .98)
        );

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

    cursor: pointer;

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

.card-row:hover {
    transform: translateY(-2px);

    border-color: #315a77;

    box-shadow:
        0 12px 30px rgba(0, 0, 0, .18);
}


/* CARD IMAGE */

.card-image-container {
    width: 100%;
    height: 250px;

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

    overflow: hidden;

    padding: 7px;

    background: #07131f;

    border: 1px solid #172b3d;
    border-radius: 10px;
}

.card-image {
    width: 100%;
    height: 100%;

    object-fit: contain;

    border-radius: 5px;
}


/* CARD INFO */

.card-info {
    min-width: 0;

    padding: 5px 0;
}

.card-year {
    display: inline-flex;

    margin-bottom: 8px;
    padding: 4px 8px;

    color: #67e8f9;
    background: rgba(56, 189, 248, .08);

    border: 1px solid rgba(56, 189, 248, .14);
    border-radius: 6px;

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

.card-title {
    margin: 0 0 15px;

    color: #ffffff;

    font-size: 19px;
    line-height: 1.3;
    letter-spacing: -.25px;
}

.card-detail-row {
    display: grid;
    grid-template-columns: 82px 1fr;

    margin: 5px 0;

    font-size: 12px;
}

.card-detail-label {
    color: #587187;
}

.card-detail-value {
    color: #b8cad8;
}

.card-number-value,
.card-limited-value {
    color: #5ee6f4;
    font-weight: 800;
}

.admin-location-value {
    color: #fbbf24;
    font-weight: 800;
}


/* =========================================
   CARD SIDE
========================================= */

.card-side {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    padding-left: 0;
    padding-top: 12px;

    border-left: 0;
    border-top: 1px solid #1d3448;
}

.card-price {
    margin-bottom: 6px;

    color: #ffffff;

    font-size: 25px;
    font-weight: 900;
    letter-spacing: -.5px;
}

.stock-text {
    margin-bottom: 16px;

    color: #678198;

    font-size: 11px;
}

.stock-text.sold-out {
    color: #fb7185;
}

.add-button {
    width: 100%;
    height: 43px;

    background: #38bdf8;
    color: #062032;

    border: 0;
    border-radius: 9px;

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

    transition: .15s ease;
}

.add-button:hover {
    background: #67d4fa;
    transform: translateY(-1px);
}

.add-button:disabled {
    background: #203548;
    color: #667f94;

    cursor: not-allowed;
}


/* =========================================
   ADMIN
========================================= */

.admin-only {
    display: none !important;
}

.admin-mode .admin-only {
    display: inline-flex !important;
}

.admin-mode .admin-login-button {
    color: #67e8f9;

    background: #112b40;

    border-color: #27516c;
}

.admin-actions {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;

    margin-top: 10px;
}


/* všechna admin tlačítka stejně velká */
.admin-actions button {
    flex: 1 1 calc(50% - 8px);

    min-height: 45px;

    border-radius: 10px;

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

    white-space: normal;
}


.admin-actions button {
    width: 100%;
    min-height: 52px;

    padding: 8px 6px;

    border-radius: 10px;

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

    white-space: normal;
    line-height: 1.1;
}

.edit-button,
.delete-button {
    flex: 1;

    padding: 7px;

    border-radius: 7px;

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

.edit-button {
    background: #132c40;
    color: #67e8f9;

    border: 1px solid #28526d;
}

.delete-button {
    background: #2b1720;
    color: #fb7185;

    border: 1px solid #58303c;
}


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

.modal {
    display: none;

    position: fixed;
    inset: 0;

    z-index: 1000;

    padding: 20px;

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

    background: rgba(2, 8, 15, .88);
    backdrop-filter: blur(8px);
}

.modal.show {
    display: flex;
}

.modal-content {
    position: relative;

    background:
        linear-gradient(
            145deg,
            #0e1d2c,
            #0a1724
        );

    border: 1px solid #29465e;
    border-radius: 16px;

    box-shadow:
        0 30px 80px rgba(0, 0, 0, .45);
}

.detail-modal {
    width: min(880px, 95vw);

    display: grid;
    grid-template-columns: 330px 1fr;
    gap: 36px;

    padding: 32px;
}

.close-modal {
    position: absolute;

    top: 11px;
    right: 14px;

    z-index: 20;

    width: 35px;
    height: 35px;

    background: rgba(6, 17, 28, .7);
    color: #9db2c4;

    border: 1px solid #213b51;
    border-radius: 50%;

    font-size: 23px;
    line-height: 1;
}

.close-modal:hover {
    color: #ffffff;
    border-color: #38bdf8;
}


/* =========================================
   FRONT / BACK CARD
========================================= */

.detail-images {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.card-flip-container {
    position: relative;

    width: 100%;
    max-width: 330px;

    display: inline-block;

    line-height: 0;
}

.card-flip-container img {
    display: block;

    width: 100%;
    max-height: 510px;

    object-fit: contain;

    transition: opacity .2s ease;
}

.modal-card-front {
    position: relative;

    z-index: 1;

    opacity: 1;
}

.modal-card-back {
    position: absolute;

    inset: 0;

    z-index: 2;

    opacity: 0;

    pointer-events: none;
}

.card-flip-container.has-back:hover
.modal-card-front {
    opacity: 0;
}

.card-flip-container.has-back:hover
.modal-card-back {
    opacity: 1;
}

.flip-hint {
    margin-top: 12px;

    color: #587188;

    font-size: 10px;
}


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

.modal-details {
    padding-top: 12px;
}

.modal-year {
    color: #38bdf8;

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

.modal-details h2 {
    margin: 8px 0 25px;

    color: #ffffff;

    font-size: 27px;
    line-height: 1.25;
}

.modal-info-row {
    display: grid;
    grid-template-columns: 100px 1fr;

    margin: 10px 0;

    font-size: 13px;
}

.modal-info-label {
    color: #617b91;
}

.modal-info-row span:last-child {
    color: #c1d1df;
}

.modal-price-row {
    margin-top: 27px;
    padding-top: 20px;

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

    border-top: 1px solid #20384d;

    color: #ffffff;

    font-size: 21px;
}


/* =========================================
   EDIT MODAL
========================================= */

.edit-modal-content {
    width: min(720px, 95vw);
    max-height: 92vh;

    overflow-y: auto;

    padding: 30px;
}

.edit-modal-header h2 {
    margin: 5px 0 24px;
}

.edit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.edit-grid label {
    display: flex;
    flex-direction: column;
    gap: 6px;

    color: #8da5b9;

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

.edit-grid input,
.edit-grid select {
    width: 100%;

    padding: 10px 11px;

    background: #071522;
    color: #ffffff;

    border: 1px solid #213c52;
    border-radius: 8px;

    outline: none;
}

.edit-grid input:focus,
.edit-grid select:focus {
    border-color: #38bdf8;
}

.save-edit-button {
    width: 100%;

    margin-top: 20px;
    padding: 13px;

    background: #38bdf8;
    color: #062032;

    border: 0;
    border-radius: 9px;

    font-weight: 900;
}



/* =========================
   CART FINAL VERSION
========================= */

.cart-drawer {
    position: fixed;
    top:0;
    right:-520px;

    width:520px;
    max-width:95vw;

    height:100vh;

    background:#0b1927;

    z-index:1200;

    display:flex;
    flex-direction:column;

    padding:24px;

    border-left:1px solid #29465e;

    transition:.25s ease;
}


.cart-drawer.show {
    right:0;
}


.cart-overlay {
    display:none;

    position:fixed;
    inset:0;

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

    z-index:1100;
}


.cart-overlay.show {
    display:block;
}


/* LIST */

#cartItems {
    flex:1;
    overflow-y:auto;
    overflow-x:hidden;
    padding-bottom:20px;
}


/* ITEM */

.cart-item {

    display:grid !important;

    grid-template-columns:90px minmax(130px,1fr) 150px !important;

    align-items:center !important;

    gap:18px !important;

    padding:22px 0 !important;

    border-bottom:1px solid #24384e;
}



/* IMAGE */

.cart-card-image {

    width:90px !important;
    height:125px !important;

    object-fit:contain !important;

}



/* TEXT */

.cart-item-name {

    font-size:17px !important;

    font-weight:900 !important;

    color:white !important;

    white-space:nowrap !important;

}



.cart-item-info {

    font-size:13px !important;

    color:#8da4ba !important;

    margin-top:5px;

}



.cart-item-price {

    font-size:20px !important;

    font-weight:900 !important;

    color:#4db7f5 !important;

    margin-top:7px;

}



/* ACTIONS */

.cart-item-actions {

    display:flex !important;

    align-items:center !important;

    justify-content:flex-end !important;

    gap:8px !important;

}



.cart-item-actions button {

    width:38px !important;

    height:38px !important;

    padding:0 !important;

    background:#14283d !important;

    color:#eaf4ff !important;

    border:1px solid #35506d !important;

    border-radius:8px !important;

}



.cart-item-actions .remove-cart-item {

    width:120px !important;

    background:#2b1720 !important;

    color:#fb7185 !important;

    border:1px solid #58303c !important;

}



/* FOOTER */

.cart-footer {

    flex-shrink:0;

    padding-top:18px;

}



.cart-total {

    display:flex !important;

    justify-content:space-between !important;

    align-items:center !important;

    font-size:20px !important;

    margin-bottom:18px;

}



#checkoutButton {

    width:100% !important;

    height:58px !important;

    border-radius:10px !important;

    background:#38bdf8 !important;

    color:#052033 !important;

    border:none !important;

    font-size:21px !important;

    font-weight:900 !important;

}/* =========================
   CART SMALL POLISH
========================= */

.cart-card-image {
    width:80px !important;
    height:110px !important;
}


.cart-item {
    grid-template-columns:80px minmax(130px,1fr) 150px !important;
    gap:14px !important;
    padding:18px 0 !important;
}


.cart-item-name {
    font-size:18px !important;
}


.cart-item-info {
    font-size:13px !important;
}


.cart-item-price {
    font-size:19px !important;
}


.cart-item-actions .remove-cart-item {
    width:105px !important;
    height:38px !important;
    font-size:14px !important;
}


/* kulatý křížek */

.cart-close,
#closeCart,
.close-cart {
    width:40px !important;
    height:40px !important;

    border-radius:50% !important;

    background:#14283d !important;
    color:#9db3c8 !important;

    border:1px solid #35506d !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
}/* =========================
   CART FINAL POLISH
========================= */


/* REMOVE BUTTON */
.cart-item-actions .remove-cart-item {
    width: 115px !important;
    height: 40px !important;

    background: rgba(239, 68, 68, 0.10) !important;
    color: #ff7185 !important;

    border: 1px solid rgba(255,113,133,.35) !important;
    border-radius: 10px !important;

    font-size: 15px !important;
    font-weight: 800 !important;

    transition: .2s ease;
}

.cart-item-actions .remove-cart-item:hover {
    background: rgba(239,68,68,.18) !important;
    border-color: #ff7185 !important;
}


/* TOTAL AREA */

.cart-total {
    padding-top: 18px !important;
    margin-top: 8px !important;

    border-top: 1px solid #24384e;

    font-size: 22px !important;
    font-weight: 800 !important;
}


.cart-total strong,
.cart-total span:last-child {
    color: #ffffff !important;

    font-size: 28px !important;
    font-weight: 900 !important;
}


/* CHECKOUT LITTLE IMPROVEMENT */

#checkoutButton {
    margin-top: 5px !important;

    box-shadow:
        0 8px 25px rgba(56,189,248,.18);
}/* FINAL FIX REMOVE BUTTON */

.cart-item-actions .remove-cart-item {
    width: 105px !important;
    height: 40px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;

    padding: 0 !important;

    font-size: 14px !important;
    font-weight: 800 !important;

    line-height: 1 !important;
}


/* koš + text vedle sebe */
.cart-item-actions .remove-cart-item span {
    display: inline-flex;
    align-items:center;
}


/* TOTAL */
.cart-total {
    font-size: 22px !important;
    font-weight: 800 !important;
}

.cart-total strong,
.cart-total span:last-child {
    font-size: 26px !important;
}/* =========================
   CART LAST TOUCH
========================= */


/* REMOVE BUTTON ALIGN */

.cart-item-actions {
    gap: 10px !important;
}


.cart-item-actions .remove-cart-item {
    width: 100px !important;
    height: 38px !important;

    font-size: 14px !important;

    border-radius: 10px !important;
}


/* TOTAL AREA */

.cart-footer {
    padding-top: 20px !important;
}


.cart-total {
    padding: 12px 0 !important;

    font-size: 21px !important;
    font-weight: 800 !important;
}


.cart-total::first-letter {
    color:#ffffff;
}


.cart-total span:last-child {
    color:#38bdf8 !important;

    font-size: 28px !important;
    font-weight: 900 !important;
}/* =========================
   CART CLEAN ALIGNMENT
========================= */


.cart-item {
    grid-template-columns: 100px 1fr 170px !important;
    gap: 14px !important;
}


.cart-item-actions {
    justify-content: flex-end !important;
    gap: 8px !important;
}


.cart-item-actions button {
    flex-shrink:0 !important;
}


.cart-item-actions .remove-cart-item {
    width: 95px !important;
    height: 38px !important;

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

    gap:5px !important;

    padding:0 !important;

    font-size:14px !important;
    line-height:1 !important;
}


/* close button */

#closeCart,
.cart-close,
.close-cart {

    width:40px !important;
    height:40px !important;

    border-radius:50% !important;

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

    background:#14283d !important;
    color:#9db3c8 !important;

    border:1px solid #35506d !important;

    font-size:20px !important;

}


/* TOTAL */

.cart-total {

    border-top:1px solid #24384e !important;

    padding-top:18px !important;

    font-size:22px !important;

}


.cart-total span:last-child {

    font-size:28px !important;

    color:#38bdf8 !important;

}/* =========================
   CART HEADER + CLOSE BUTTON
========================= */

.cart-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 25px;
}


#closeCartButton {

    width: 42px;
    height: 42px;

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

    background: rgba(14, 31, 47, .8);

    color: #9db2c4;

    border: 1px solid #29465e;

    border-radius: 50%;

    font-size: 24px;
    font-weight: 300;

    line-height: 1;

    cursor: pointer;

    transition: .2s ease;

}


#closeCartButton:hover {

    color: #ffffff;

    border-color: #38bdf8;

    background: #13283b;

    transform: rotate(90deg);

}/* =========================
   CART TOTAL IMPROVEMENT
========================= */

.cart-footer {

    flex-shrink:0;

    padding-top:18px;

    border-top:1px solid #24384e;

}


.cart-total-row {

    display:flex !important;

    justify-content:space-between !important;

    align-items:center !important;

    margin-bottom:14px;

    font-size:16px !important;

    font-weight:700;

}


.cart-total-row span {

    color:#ffffff;

    font-weight:800;

}


.cart-total-row strong {

    color:#38bdf8;

    font-size:26px !important;

    font-weight:900;

}/* =========================
   ADMIN ACTIONS FINAL FIX
========================= */

.admin-actions {
    display: grid;
    grid-template-columns: repeat(4, auto);
    gap: 8px;
    align-items: center;
}


.admin-actions button {
    width: auto;
    min-width: 70px;
    min-height: 42px;
    padding: 8px 10px;

    border-radius: 8px;

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

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

    white-space: normal;
    text-align: center;
    line-height: 1.1;
}


/* TRADERA BUTTON */

.tradera-button,
.sell-tradera-button,
.tradera-button.listed-on-tradera {
    background:#10291f;
    color:#4ade80;
    border:1px solid #166534;
}


.tradera-button:hover,
.sell-tradera-button:hover {

    background:#e5e7eb !important;

}


/* SOLD OUT */

.add-button:disabled {

    width:100%;

    opacity:.75;

}


/* SOLD OUT TEXT */

.stock-text.sold-out {

    color:#fb7185 !important;

    font-weight:800;

}.restore-button {

    background:#12314a !important;

    color:#67e8f9 !important;

    border:1px solid #24526d !important;

}


.restore-button:hover {

    background:#173c59 !important;

}
.restore-button {

    background:#132c40 !important;

    color:#67e8f9 !important;

    border:1px solid #28526d !important;

}

.restore-button:hover {

    background:#173c59 !important;

}/* =========================
   CHECKOUT
========================= */

.checkout-modal-content {
    width: min(700px, 95vw);
    max-height: 90vh;
    overflow-y: auto;

    padding: 30px;
}


.checkout-modal-content h2 {
    color: white;
    margin: 8px 0 10px;
}


.checkout-intro {
    color: #8da5b9;
    margin-bottom: 25px;
}


.checkout-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 15px;
}


.checkout-grid label {

    display:flex;
    flex-direction:column;

    gap:6px;

    color:#9db3c8;

    font-size:12px;

    font-weight:700;
}


.checkout-grid input,
.checkout-grid select {

    width:100%;

    padding:11px 12px;

    background:#071522;

    color:white;

    border:1px solid #213c52;

    border-radius:8px;

    outline:none;

    font-size:14px;
}


.checkout-grid input:focus,
.checkout-grid select:focus {

    border-color:#38bdf8;

}


.checkout-full-width {

    grid-column:1 / -1;

}


.checkout-summary {

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:25px;

    padding-top:18px;

    border-top:1px solid #20384d;

    color:#9db3c8;

}


.checkout-summary strong {

    color:#38bdf8;

    font-size:26px;

    font-weight:900;

}


#completeOrderButton {

    margin-top:20px;

}/* =========================
   CHECKOUT COMPLETE BUTTON
========================= */

#completeOrderButton {
    width: 100%;

    height: 58px;

    margin-top: 20px;

    background: #38bdf8;
    color: #052033;

    border: none;
    border-radius: 10px;

    font-size: 20px;
    font-weight: 900;

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

    transition: .2s ease;

    box-shadow:
        0 8px 25px rgba(56, 189, 248, .15);
}

#completeOrderButton:hover {
    background: #67d4fa;
    transform: translateY(-1px);
}

#completeOrderButton:disabled {
    background: #203548;
    color: #667f94;

    cursor: not-allowed;
    transform: none;
}.tradera-button {
    position: relative;
    z-index: 10;
    cursor: pointer;
}/* =========================================
   TRADERA MODAL
========================================= */

.tradera-modal-content {
    width: min(620px, 94vw);
    max-height: 90vh;

    overflow-y: auto;

    padding: 30px;

    background:
        linear-gradient(
            145deg,
            #0e1d2c,
            #0a1724
        );

    border: 1px solid #29465e;
    border-radius: 16px;
}


.tradera-modal-content h2 {
    margin: 6px 0 18px;

    color: #ffffff;

    font-size: 26px;
}


.tradera-warning {
    margin-bottom: 20px;
    padding: 12px 14px;

    background: rgba(251, 191, 36, .08);
    color: #fbbf24;

    border: 1px solid rgba(251, 191, 36, .25);
    border-radius: 9px;

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


/* CARD PREVIEW */

.tradera-preview {
    width: 100%;
}


.tradera-preview-card {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 20px;

    align-items: center;

    padding: 16px;

    background: #081521;

    border: 1px solid #20394e;
    border-radius: 12px;
}


.tradera-preview-card img {
    display: block;

    width: 120px;
    height: 165px;

    object-fit: contain;

    background: #06111b;

    border-radius: 8px;
}


.tradera-preview-card strong {
    display: block;

    margin-bottom: 12px;

    color: #ffffff;

    font-size: 16px;
    line-height: 1.4;
}


.tradera-preview-card p {
    margin: 7px 0;

    color: #91a8bb;

    font-size: 13px;
}


.tradera-preview-card b {
    color: #ffffff;
}


/* RESULT */

.tradera-result {
    margin-top: 16px;
}


.tradera-success,
.tradera-error {
    padding: 14px;

    border-radius: 9px;

    font-size: 13px;
}


.tradera-success {
    background: rgba(34, 197, 94, .08);
    color: #86efac;

    border: 1px solid rgba(34, 197, 94, .25);
}


.tradera-error {
    background: rgba(239, 68, 68, .08);
    color: #fb7185;

    border: 1px solid rgba(239, 68, 68, .25);
}


/* BUTTONS */

.tradera-modal-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;

    margin-top: 20px;
}


.tradera-cancel-button,
.tradera-create-button {
    min-height: 46px;

    padding: 0 16px;

    border-radius: 9px;

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


.tradera-cancel-button {
    background: #13283b;
    color: #a9bfd1;

    border: 1px solid #29465e;
}


.tradera-create-button {
    background: #38bdf8;
    color: #062032;

    border: 1px solid #38bdf8;
}


.tradera-create-button:hover {
    background: #67d4fa;
}


.tradera-create-button:disabled {
    opacity: .55;
    cursor: not-allowed;
}/* =========================================
   ADMIN ORDERS
========================================= */

#ordersModal .modal-content {
    width: min(1000px, 92vw);
    max-height: 85vh;
    overflow-y: auto;
}

#ordersList {
    margin-top: 24px;
}

.order-card {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 22px;
    margin-bottom: 18px;
}

.order-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;

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

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.order-card-header strong {
    display: block;
    font-size: 20px;
    color: #ffffff;
}

.order-card-header div div {
    margin-top: 4px;
    font-size: 13px;
    color: #71869a;
}


/* STATUS */

.order-status {
    display: inline-flex;
    align-items: center;

    padding: 6px 12px;

    border-radius: 999px;

    background: rgba(77, 183, 232, 0.12);
    border: 1px solid rgba(77, 183, 232, 0.3);

    color: #4db7e8;

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

    text-transform: uppercase;
}


/* CUSTOMER */

.order-customer {
    margin-bottom: 18px;
    line-height: 1.6;
    color: #b9c7d4;
}

.order-customer strong {
    display: block;
    color: #ffffff;
    font-size: 16px;
    margin-bottom: 3px;
}


/* ADDRESS */

.order-address {
    background: rgba(0, 0, 0, 0.15);

    border-radius: 10px;

    padding: 13px 15px;
    margin-bottom: 18px;

    color: #aebdca;
    line-height: 1.5;
}


/* ITEMS */

.order-items {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);

    padding: 10px 0;
}

.order-item-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    align-items: center;
    gap: 15px;

    padding: 10px 0;

    color: #9fb0bf;
}

.order-item-row strong {
    color: #ffffff;
}


/* TOTAL */

.order-total {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;

    padding-top: 18px;

    color: #8fa2b3;
}

.order-total strong {
    color: #ffffff;
    font-size: 22px;
}


/* MOBILE */

@media (max-width: 650px) {

    .order-item-row {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .order-card {
        padding: 16px;
    }
}.order-status-select {
    appearance: none;

    background: rgba(77, 183, 232, 0.12);
    border: 1px solid rgba(77, 183, 232, 0.35);
    border-radius: 999px;

    color: #4db7e8;

    padding: 8px 32px 8px 14px;

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

    cursor: pointer;
    outline: none;

    text-align: center;
}

.order-status-select:hover {
    background: rgba(77, 183, 232, 0.2);
}

.order-status-select:disabled {
    opacity: 0.5;
    cursor: wait;
}

.order-status-select option {
    background: #101e2b;
    color: white;
}/* =========================================
   ORDERS FILTER TABS
========================================= */

.orders-tabs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;

    margin: 18px 0 28px;
}

.orders-tab {
    appearance: none;
    border: 1px solid #29465c;
    border-radius: 10px;

    background: #132536;
    color: #91a5b7;

    padding: 10px 18px;

    font: inherit;
    font-size: 13px;
    font-weight: 800;

    cursor: pointer;

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

.orders-tab:hover {
    background: #193249;
    border-color: #3c789d;
    color: #ffffff;
}

.orders-tab.active {
    background: #183a51;
    border-color: #4db7e8;
    color: #5bc4f2;
}

.orders-tab:active {
    transform: translateY(1px);
}/* =========================================
   ORDER CARD DETAILS
========================================= */

.order-item-card {
    display: grid;
    grid-template-columns: 110px 1fr auto;
    gap: 22px;
    align-items: center;

    padding: 20px 0;

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.order-item-card:last-child {
    border-bottom: none;
}


.order-item-image {
    width: 110px;
    height: 145px;

    border-radius: 10px;
    overflow: hidden;

    background: #0b1722;

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

.order-item-image img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}

.order-no-image {
    color: #718597;
    font-size: 12px;
}


.order-item-player {
    display: block;

    color: #ffffff;

    font-size: 18px;

    margin-bottom: 14px;
}


.order-item-details {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(110px, 1fr));

    gap: 12px 20px;
}

.order-item-details div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.order-item-details span {
    color: #718597;

    font-size: 12px;
}

.order-item-details strong {
    color: #c3d0db;

    font-size: 14px;
}


.order-item-price {
    min-width: 90px;

    text-align: right;
}

.order-item-price > strong {
    display: block;

    color: #ffffff;

    font-size: 18px;
}

.order-item-price span {
    display: block;

    color: #8295a6;

    font-size: 12px;

    margin-top: 5px;
}


@media (max-width: 800px) {

    .order-item-card {
        grid-template-columns: 80px 1fr;
    }

    .order-item-image {
        width: 80px;
        height: 110px;
    }

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

    .order-item-price {
        grid-column: 1 / -1;

        text-align: right;
    }
}/* =========================================
   NOT ON TRADERA DROPDOWN
========================================= */

.not-tradera-wrapper {
    position: relative;

    display: inline-flex;
    align-items: stretch;
}


/* dropdown je normálně schovaný */

.not-tradera-menu {
    display: none;

    position: absolute;

    top: calc(100% - 2px);
    left: 50%;

    transform: translateX(-50%);

    width: 240px;

    padding: 10px;

    flex-direction: column;
    gap: 7px;

    background: #0b1724;

    border: 1px solid #20364a;
    border-radius: 0 0 12px 12px;

    box-shadow:
        0 15px 35px rgba(0, 0, 0, .45);

    z-index: 1000;
}


/* otevře se pouhým najetím myši */

.not-tradera-wrapper:hover
.not-tradera-menu.show {
    display: flex;
}


/* jednotlivé položky */

.not-tradera-subbutton {
    width: 100%;

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

    gap: 12px;

    padding: 11px 13px;

    background: #102235;
    color: #9db2c4;

    border: 1px solid #29465f;
    border-radius: 8px;

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

    cursor: pointer;

    transition: .15s ease;
}


.not-tradera-subbutton:hover {
    background: #17354c;

    color: #ffffff;

    border-color: #38bdf8;
}


.not-tradera-subbutton.active {
    background: #17354c;

    color: #67e8f9;

    border-color: #38bdf8;
}/* =========================================
   NOT ON TRADERA - VISUAL POLISH
========================================= */

#notOnTraderaButton {
    gap: 10px;
    color: #9fb1c3;
}

#notOnTraderaButton:hover {
    color: #ffffff;
}


/* počet karet jako badge */

#notOnTraderaCount {
    min-width: 25px;
    height: 22px;

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

    padding: 0 7px;

    background: rgba(251, 191, 36, .10);
    color: #fbbf24;

    border: 1px solid rgba(251, 191, 36, .25);
    border-radius: 999px;

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

    letter-spacing: 0;
}


/* při hoveru trochu výraznější */

#notOnTraderaButton:hover #notOnTraderaCount {
    background: rgba(251, 191, 36, .16);
    border-color: rgba(251, 191, 36, .45);
}/* =========================================
   TRADERA SALES - BUYER ORDERS
========================================= */

.tradera-buyer-order {
    margin-bottom: 24px;

    overflow: hidden;

    background: #0d1b2a;

    border: 1px solid #263d52;
    border-radius: 16px;
}


/* BUYER HEADER */

.tradera-buyer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;

    padding: 20px 24px;

    background: #102131;

    border-bottom: 1px solid #253a4d;
}


.tradera-buyer-name {
    color: #ffffff;

    font-size: 21px;
    font-weight: 900;
}


.tradera-buyer-meta {
    display: flex;
    gap: 14px;

    margin-top: 6px;

    color: #7890a5;

    font-size: 12px;
}


.tradera-buyer-meta span:first-child {
    color: #52c7fa;

    font-weight: 800;
}


/* BUYER TOTALS */

.tradera-buyer-summary {
    display: flex;
    gap: 30px;
}


.tradera-buyer-summary > div {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}


.tradera-buyer-summary strong {
    color: #ffffff;

    font-size: 20px;
    font-weight: 900;
}


.tradera-buyer-summary span {
    margin-top: 2px;

    color: #71889d;

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

    text-transform: uppercase;
}


/* STATUS */

.tradera-order-status-row {
    display: flex;
    gap: 8px;

    padding: 12px 24px;

    background: #0a1724;

    border-bottom: 1px solid #1e3346;
}


.tradera-status-pill {
    padding: 5px 10px;

    border-radius: 999px;

    font-size: 10px;
    font-weight: 900;
}


.tradera-status-pill.status-ok {
    background: rgba(34, 197, 94, .10);
    color: #86efac;

    border: 1px solid rgba(34, 197, 94, .25);
}


.tradera-status-pill.status-waiting {
    background: rgba(251, 191, 36, .08);
    color: #fbbf24;

    border: 1px solid rgba(251, 191, 36, .22);
}


/* ITEMS */

.tradera-sale-items {
    padding: 0 24px;
}


.tradera-sale-item {
    display: grid;

    grid-template-columns:
        82px
        minmax(260px, 1fr)
        110px
        60px
        90px;

    gap: 18px;

    align-items: center;

    min-height: 125px;

    padding: 18px 0;

    border-bottom: 1px solid #213548;
}


.tradera-sale-item:last-child {
    border-bottom: 0;
}


/* CARD IMAGE */

.tradera-sale-image-box {
    width: 72px;
    height: 95px;

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

    overflow: hidden;

    background: #07131f;

    border: 1px solid #1d3345;
    border-radius: 8px;
}


.tradera-sale-card-image {
    width: 100%;
    height: 100%;

    object-fit: contain;
}


.tradera-sale-no-image {
    padding: 5px;

    color: #546b80;

    font-size: 9px;

    text-align: center;
}


/* CARD DETAILS */

.tradera-sale-card-info {
    min-width: 0;
}


.tradera-sale-player {
    display: block;

    margin-bottom: 5px;

    color: #ffffff;

    font-size: 16px;
    font-weight: 900;
}


.tradera-sale-card-title {
    color: #bed0df;

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


.tradera-sale-subset {
    margin-top: 4px;

    color: #8fa6b9;

    font-size: 12px;
}


.tradera-sale-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    margin-top: 7px;

    color: #667f95;

    font-size: 11px;
}


/* LOCATION */

.tradera-sale-location {
    display: flex;
    flex-direction: column;
    gap: 5px;
}


.tradera-sale-location span,
.tradera-sale-qty span {
    color: #657e94;

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 1px;
}


.tradera-sale-location strong {
    color: #fbbf24;

    font-size: 18px;
    font-weight: 900;
}


/* QTY */

.tradera-sale-qty {
    display: flex;
    flex-direction: column;
    gap: 5px;

    text-align: center;
}


.tradera-sale-qty strong {
    color: #b8c8d6;

    font-size: 15px;
}


/* PRICE */

.tradera-sale-price {
    text-align: right;
}


.tradera-sale-price strong {
    color: #ffffff;

    font-size: 17px;
    font-weight: 900;
}


/* FOOTER */

.tradera-buyer-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 15px 24px;

    background: #0a1724;

    border-top: 1px solid #203448;
}


.tradera-buyer-footer span {
    color: #71899d;

    font-size: 12px;
}


.tradera-buyer-footer strong {
    color: #52c7fa;

    font-size: 18px;
    font-weight: 900;
}


/* MOBILE */

@media (max-width: 800px) {

    .tradera-buyer-header {
        align-items: flex-start;
        flex-direction: column;
    }


    .tradera-buyer-summary {
        width: 100%;

        justify-content: space-between;
    }


    .tradera-sale-item {
        grid-template-columns:
            72px
            1fr;
    }


    .tradera-sale-location,
    .tradera-sale-qty,
    .tradera-sale-price {
        grid-column: 2;
    }


    .tradera-sale-price {
        text-align: left;
    }
}.tradera-buyer-contact {
    margin-top: 12px;

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

    color: #9fb1c3;

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

.tradera-buyer-address {
    color: #c5d3df;
}.tradera-buyer-address {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tradera-address-city {
    padding-left: 20px;
}/* =========================================
   TRADERA SALES ACTIVE / COMPLETED
========================================= */

.tradera-sales-tabs {
    display: flex;
    gap: 10px;

    margin-bottom: 22px;
}


.tradera-sales-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 10px 16px;

    background: #102131;
    color: #8ea6b9;

    border: 1px solid #29465e;
    border-radius: 10px;

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

    cursor: pointer;
}


.tradera-sales-tab:hover {
    border-color: #38bdf8;
    color: #ffffff;
}


.tradera-sales-tab.active {
    background: #17384e;
    color: #67e8f9;

    border-color: #38bdf8;
}


.tradera-sales-tab span {
    min-width: 22px;

    padding: 2px 7px;

    background: #071522;

    border-radius: 999px;

    text-align: center;
}


.tradera-complete-button {
    min-height: 40px;

    padding: 0 16px;

    background: rgba(34, 197, 94, .12);
    color: #86efac;

    border: 1px solid rgba(34, 197, 94, .35);
    border-radius: 9px;

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

    cursor: pointer;
}


.tradera-complete-button:hover {
    background: rgba(34, 197, 94, .20);
    border-color: #4ade80;
}


.tradera-complete-button:disabled {
    opacity: .55;
    cursor: wait;
}


.tradera-completed-info {
    color: #86efac;

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


.tradera-sales-empty {
    padding: 40px;

    background: #0d1b2a;
    color: #71899d;

    border: 1px solid #263d52;
    border-radius: 14px;

    text-align: center;
}/* =========================
   CARD GRID ALIGNMENT
========================= */

.card-title {
    min-height: 52px;
    margin-bottom: 12px;
}

.card-info {
    min-height: 225px;
}/* =========================================
   TOP COMPACT FILTER - TEST
========================================= */

.app {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 24px 60px;

    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}


/* celý filtr nahoře */
.filters-panel {
    position: relative;
    top: auto;

    width: 100%;
    max-height: none;
    overflow: visible;

    display: grid;
    grid-template-columns:
        120px
        minmax(150px, 1fr)
        minmax(180px, 1fr)
        minmax(180px, 1fr)
        minmax(150px, 1fr);

    align-items: start;
    gap: 10px;

    padding: 10px;

    background: rgba(12, 26, 40, .92);
    border: 1px solid #1e3448;
    border-radius: 12px;
}


/* Filters + Clear */
.filters-header {
    height: 42px;
    padding: 0 10px;

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

    border: 0;
}

.filters-title {
    font-size: 14px;
}

.filter-status,
.hidden-filter-count {
    display: none;
}

.clear-filters {
    font-size: 10px;
    padding: 4px;
}


/* Year / Team / Set / Type */
.filter-section {
    position: relative;

    padding: 0;
    border: 0;
}

.filter-section-title {
    height: 42px;
    margin: 0;
    padding: 0 13px;

    display: flex;
    align-items: center;

    background: #0b1c2b;
    border: 1px solid #25445e;
    border-radius: 8px;

    color: #d6e6f3;
    font-size: 12px;
    letter-spacing: .4px;

    cursor: pointer;
}


/* šipka */
.filter-section-title::after {
    content: "⌄";
    margin-left: auto;
    color: #4db7f5;
}


/* rozbalovací obsah */
.filter-search,
.checkbox-list {
    display: none;
}


/* po najetí zobraz obsah filtru */
.filter-section.open .filter-search,
.filter-section.open .checkbox-list {
    display: block;
}


/* dropdown */
.filter-section .filter-search {
    position: absolute;
    z-index: 101;

    top: 48px;
    left: 0;

    width: 100%;
    min-width: 220px;

    margin: 0;
    padding: 10px;

    background: #091724;
    border: 1px solid #294861;
    border-radius: 8px 8px 0 0;
}


.filter-section .checkbox-list {
    position: absolute;
    z-index: 100;

    top: 88px;
    left: 0;

    width: 100%;
    min-width: 220px;
    max-height: 300px;

    padding: 8px 12px;

    overflow-y: auto;

    background: #091724;
    border: 1px solid #294861;
    border-top: 0;
    border-radius: 0 0 8px 8px;

    box-shadow: 0 15px 30px rgba(0, 0, 0, .35);
}


/* hlavní obsah využije celou šířku */
.main-content {
    width: 100%;
    min-width: 0;
}


/* 4 KARTY VEDLE SEBE */
.card-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}/* =========================================
   HIDE COLLECTION HEADER
========================================= */

.collection-heading {
    display: none !important;
}

.toolbar-message {
    display: none !important;
}

.result-toolbar {
    justify-content: flex-end !important;
    margin-top: 0 !important;
}/* =========================================
   FILTER DROPDOWN HOVER FIX
========================================= */

.filter-section .filter-search {
    top: 42px !important;
}

.filter-section .checkbox-list {
    top: 82px !important;
}/* =========================================
   COMPACT TOP FILTERS
========================================= */

.filters-panel {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;

    padding: 10px 14px;
}

/* Filters + Clear */
.filters-header {
    flex: 0 0 auto;
    width: auto;
    min-width: 125px;
}

/* jednotlivé dropdowny */
.filter-section {
    flex: 0 0 auto;
    width: auto;
}

/* tlačítka YEAR / TEAM / SET / TYPE */
.filter-section-title {
    width: auto;
    min-width: 110px;
    height: 40px;

    padding: 0 14px;
}

/* TEAM může být trochu širší */
.filter-section:nth-of-type(3) .filter-section-title {
    min-width: 125px;
}

/* dropdown po otevření zůstane dostatečně široký */
.filter-section .filter-search,
.filter-section .checkbox-list {
    width: 240px;
    min-width: 240px;
}/* =========================================
   SORT IN FILTER BAR
========================================= */

.filter-sort {
    margin-left: auto;

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

    flex: 0 0 auto;
}

.filter-sort .sort-label {
    color: #617a91;
    font-size: 11px;
    white-space: nowrap;
}

.filter-sort #sortSelect {
    width: 155px;
    height: 40px;

    padding: 0 12px;

    background: #0d1b2a;
    color: #c9d8e5;

    border: 1px solid #21394e;
    border-radius: 8px;

    outline: none;
}/* =========================================
   EDIT BUTTON IN CARD DETAIL
========================================= */

.detail-modal .modal-details {
    position: relative;
}

#modalEditButton {
    position: absolute;

    top: 92px;
    right: 15px;

    width: 115px;
    height: 40px;

    padding: 0;

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

    background: #132c40;
    color: #67e8f9;

    border: 1px solid #28526d;
    border-radius: 8px;

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

#modalEditButton:hover {
    background: #173c59;
    border-color: #38bdf8;
}/* =========================================
   CANCEL ORDER
========================= */

.order-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}

.cancel-order-button {
    padding: 12px 22px;
    border: 1px solid #ef4444;
    border-radius: 10px;
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: 0.2s;
}

.cancel-order-button:hover {
    background: #ef4444;
    color: white;
}/* =========================================
   FILTER COUNTS
========================================= */

.checkbox-label-text {
    flex: 1;
    min-width: 0;
}

.checkbox-count {
    margin-left: auto;

    min-width: 24px;
    padding: 2px 7px;

    text-align: center;

    color: #67e8f9;
    background: rgba(56, 189, 248, .08);

    border: 1px solid rgba(56, 189, 248, .18);
    border-radius: 999px;

    font-size: 10px;
    font-weight: 800;
}/* =========================
   EDIT NATIONALITY DROPDOWN
========================= */

.edit-nationality-wrapper {
    position: relative;
    width: 100%;
}

.edit-nationality-wrapper input {
    width: 100%;
}

.edit-nationality-dropdown {
    display: none;

    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;

    max-height: 240px;
    overflow-y: auto;

    background: #0b1b28;
    border: 1px solid #29465d;
    border-radius: 10px;

    padding: 6px;

    z-index: 9999;

    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

.edit-nationality-dropdown.show {
    display: block;
}

.edit-nationality-item {
    display: block;

    width: 100%;
    padding: 10px 12px;

    border: 0;
    border-radius: 6px;

    background: transparent;
    color: #dcecff;

    text-align: left;
    cursor: pointer;
}

.edit-nationality-item:hover {
    background: #15334a;
    color: white;
}
/* =========================================
   CARDS AVAILABLE - FINAL
========================================= */

.page-intro {
    display: none !important;
}

.category-nav-inner {
    display: flex !important;
    align-items: center !important;

    width: 100% !important;
    max-width: 1600px !important;

    margin: 0 auto !important;
}


/* box vpravo */
.nav-card-count {
    margin-left: auto !important;

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

    gap: 11px !important;

    height: 44px !important;
    padding: 0 15px !important;

    background: rgba(13, 29, 44, 0.72) !important;

    border: 1px solid #203b50 !important;
    border-radius: 10px !important;

    white-space: normal !important;
}


/* ikonka karet */
.nav-card-count::before {
    content: "▱";

    color: #38bdf8;

    font-size: 22px;
    line-height: 1;
}


/* číslo */
.nav-card-count span {
    display: block !important;

    color: #ffffff !important;

    font-size: 24px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}


/* CARDS AVAILABLE */
.nav-card-count small {
    display: block !important;

    width: 62px !important;

    color: #809bb2 !important;

    font-size: 9px !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;

    letter-spacing: 1px !important;

    white-space: normal !important;
}/* =========================================


/* =========================================
   MOBILE - CLEAN FINAL VERSION
========================================= */

@media (max-width: 700px) {

    html,
    body {
        overflow-x: hidden;
    }

    body {
        width: 100%;
    }

    /* HEADER */

    .site-header {
        position: static !important;
        top: auto !important;
    }

    .header-inner {
        width: 100%;
        padding: 12px;

        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px;
        align-items: center;
    }

    .site-logo {
        min-width: 0;
        font-size: 20px;
    }

    .header-actions {
        min-width: 0;
        justify-content: flex-end;
        gap: 7px;
    }

    .header-actions .add-card-link {
        display: none !important;
    }

    .cart-button,
    .admin-login-button {
        height: 40px;
        padding: 0 11px;
    }

    .admin-login-button {
        display: inline-flex;
        font-size: 12px;
    }

    .header-search {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
    }

    #globalSearch {
        width: 100%;
        height: 44px;
    }

    /* CATEGORY NAVIGATION */

    .category-nav {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .category-nav::-webkit-scrollbar {
        display: none;
    }

    .category-nav-inner {
        width: max-content !important;
        min-width: 100% !important;
        max-width: none !important;

        padding: 0 8px !important;
        gap: 0 !important;
    }

    .category-button {
        flex: 0 0 auto;
        height: 48px;
        padding: 0 13px;

        font-size: 11px;
        white-space: nowrap;
    }

    /* The desktop total-card box does not fit cleanly in the mobile nav. */
    .nav-card-count {
        display: none !important;
    }

    /* MAIN */

    .app {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 10px 12px 40px;

        display: block;
    }

    .main-content {
        width: 100%;
        min-width: 0;
    }

    /* COLLAPSIBLE FILTER PANEL */

    .filters-panel {
        position: static !important;
        top: auto !important;

        width: 100% !important;
        max-height: none !important;
        overflow: visible !important;

        margin: 0 0 16px !important;
        padding: 0 !important;

        display: block !important;

        border-radius: 12px;
    }

    .filters-header {
        width: 100%;
        min-width: 0;

        padding: 14px 16px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px;

        border-bottom: 0 !important;
        cursor: pointer;
        user-select: none;
    }

    .filters-title {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .filters-title::after {
        content: "▼";
        color: #38bdf8;
        font-size: 10px;
        line-height: 1;
    }

    .filters-panel.mobile-open .filters-title::after {
        content: "▲";
    }

    .filter-status,
    .hidden-filter-count {
        display: none !important;
    }

    .clear-filters {
        flex: 0 0 auto;
    }

    /* Closed by default on mobile */
    .filters-panel > .filter-section,
    .filters-panel > .filter-sort {
        display: none !important;
    }

    /* Open state */
    .filters-panel.mobile-open {
        padding: 12px !important;

        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .filters-panel.mobile-open .filters-header {
        grid-column: 1 / -1;
        padding: 2px 4px 8px !important;
    }

    .filters-panel.mobile-open > .filter-section {
        position: relative;

        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 0 !important;

        border: 0 !important;
    }

    .filters-panel.mobile-open .filter-section-title {
        width: 100% !important;
        min-width: 0 !important;
        height: 44px !important;

        margin: 0 !important;
        padding: 0 12px !important;

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

        background: #0d1b2a;
        border: 1px solid #21394e;
        border-radius: 9px;

        color: #ffffff;
        font-size: 11px;
    }

    /* Keep the actual filter dropdown behavior from the desktop version. */
    .filters-panel.mobile-open .filter-section:not(.open) .filter-search,
    .filters-panel.mobile-open .filter-section:not(.open) .checkbox-list {
        display: none !important;
    }

    .filters-panel.mobile-open .filter-section.open .filter-search,
    .filters-panel.mobile-open .filter-section.open .checkbox-list {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .filters-panel.mobile-open .filter-section.open .filter-search {
        top: 44px !important;
    }

    .filters-panel.mobile-open .filter-section.open .checkbox-list {
        top: 84px !important;
        max-height: 260px;
    }

    .filters-panel.mobile-open > .filter-sort {
        grid-column: 1 / -1;

        display: flex !important;
        align-items: center;
        gap: 9px;

        width: 100% !important;
        margin: 2px 0 0 !important;
    }

    .filters-panel.mobile-open .filter-sort .sort-label {
        flex: 0 0 auto;
    }

    .filters-panel.mobile-open #sortSelect {
        width: 100% !important;
        min-width: 0;
        height: 42px;
    }

    /* CARDS */

    .card-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .card-row {
        min-width: 0;
        padding: 9px;
        gap: 8px;
    }

    .card-image-container {
        height: 190px;
        padding: 4px;
    }

    .card-title {
        margin-bottom: 10px;
        font-size: 15px;
        line-height: 1.3;
    }

    .card-detail-row {
        grid-template-columns: 58px minmax(0, 1fr);
        gap: 4px;
        font-size: 10px;
    }

    .card-detail-value {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .card-year {
        margin-bottom: 6px;
        padding: 3px 6px;
        font-size: 9px;
    }

    .card-side {
        padding-top: 9px;
    }

    .card-price {
        font-size: 20px;
    }

    .stock-text {
        margin-bottom: 10px;
        font-size: 10px;
    }

    .add-button {
        height: 40px;
        font-size: 12px;
    }

    /* MODALS */

    .modal {
        padding: 10px;
    }

    .detail-modal {
        width: 100%;
        max-height: 95vh;
        overflow-y: auto;

        display: block;
        padding: 20px 16px;
    }

    .card-flip-container {
        max-width: 240px;
    }

    .card-flip-container img {
        max-height: 340px;
    }

    .modal-details {
        padding-top: 18px;
    }

    .modal-details h2 {
        margin-bottom: 17px;
        font-size: 22px;
    }

    .edit-modal-content,
    .checkout-modal-content {
        width: 100%;
        padding: 20px 15px;
    }

    .edit-grid,
    .checkout-grid {
        grid-template-columns: 1fr;
    }

    .checkout-full-width {
        grid-column: auto;
    }

    /* CART */

    .cart-drawer {
        width: 100%;
        max-width: 100vw;
        padding: 18px 14px;
    }

    .cart-item {
        grid-template-columns: 65px minmax(0, 1fr) !important;
        gap: 10px !important;
    }

    .cart-card-image {
        width: 65px !important;
        height: 90px !important;
    }

    .cart-item-name {
        white-space: normal !important;
        font-size: 14px !important;
    }

    .cart-item-actions {
        grid-column: 1 / -1;
        justify-content: flex-end !important;
    }
}

/* Very narrow phones */
@media (max-width: 380px) {
    .site-logo {
        font-size: 18px;
    }

    .cart-button,
    .admin-login-button {
        padding: 0 9px;
    }

    .category-button {
        padding: 0 11px;
    }

    .card-image-container {
        height: 170px;
    }
}


/* ============================================================
   FROZENHITS STOREFRONT — MATCH APPROVED MOCKUP
   This block intentionally overrides older experimental layout.
   ============================================================ */

:root {
    --fh-bg: #06111d;
    --fh-bg-2: #071725;
    --fh-panel: #0a1b2b;
    --fh-panel-2: #0d2233;
    --fh-border: #1b4059;
    --fh-border-soft: rgba(85, 148, 188, .18);
    --fh-text: #f7fbff;
    --fh-muted: #7d9ab0;
    --fh-blue: #39bdf8;
    --fh-cyan: #67e8f9;
    --fh-red: #ef3340;
}

html,
body {
    background: #06111d !important;
}

body {
    color: var(--fh-text);
    background:
        radial-gradient(circle at 20% -20%, rgba(36, 168, 229, .10), transparent 31%),
        linear-gradient(180deg, #05101b 0%, #071522 100%) !important;
}

/* ---------- HEADER ---------- */

.site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 500 !important;
    background: rgba(4, 14, 24, .97) !important;
    border-bottom: 1px solid #17364b !important;
    backdrop-filter: blur(18px);
}

.header-inner {
    width: 100% !important;
    max-width: 1540px !important;
    min-height: 118px;
    margin: 0 auto !important;
    padding: 14px 26px 12px !important;

    display: grid !important;
    grid-template-columns: 300px minmax(340px, 1fr) auto !important;
    gap: 28px !important;
    align-items: center !important;
}

.brand-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.site-logo {
    display: inline-flex !important;
    align-items: baseline !important;
    text-decoration: none !important;
    font-family: "Arial Black", Impact, Inter, Arial, sans-serif !important;
    font-size: 31px !important;
    line-height: .95 !important;
    font-weight: 950 !important;
    letter-spacing: -2px !important;
    transform: skew(-6deg);
}

.logo-main {
    color: #f7fbff !important;
    text-shadow: 0 2px 12px rgba(255,255,255,.08);
}

.logo-accent {
    color: var(--fh-blue) !important;
    text-shadow: 0 0 20px rgba(56,189,248,.12);
}

.brand-subtitle {
    margin-left: 50px;
    color: #9fc8e2;
    font-size: 9px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 4px;
}

.brand-card-count {
    min-width: 216px;
    height: 43px;
    margin-top: 4px;
    padding: 0 14px;

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

    background: linear-gradient(180deg, #0b2031, #081927);
    border: 1px solid #1f6c94;
    border-radius: 9px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 0 24px rgba(56,189,248,.04);
}

.brand-card-icon {
    position: relative;
    width: 23px;
    height: 16px;
    flex: 0 0 auto;
    border: 2px solid var(--fh-blue);
    transform: skew(-9deg);
}

.brand-card-icon::after {
    content: "";
    position: absolute;
    width: 19px;
    height: 13px;
    left: 5px;
    top: -5px;
    border: 1px solid #2d91bd;
}

.brand-card-count strong {
    color: white;
    font-size: 24px;
    line-height: 1;
    font-weight: 950;
}

.brand-card-count small {
    color: #96b3c7;
    font-size: 8px;
    line-height: 1.05;
    font-weight: 900;
    letter-spacing: 1.3px;
}

.header-search {
    width: 100% !important;
    max-width: 720px !important;
    justify-self: center !important;
}

#globalSearch {
    width: 100% !important;
    height: 56px !important;
    padding-left: 52px !important;

    background: rgba(8, 26, 41, .92) !important;
    color: white !important;

    border: 1px solid #1e658a !important;
    border-radius: 14px !important;

    font-size: 16px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.02) !important;
}

#globalSearch:focus {
    border-color: var(--fh-blue) !important;
    box-shadow: 0 0 0 3px rgba(56,189,248,.09) !important;
}

.search-icon {
    left: 18px !important;
    color: #9db8ca !important;
    font-size: 24px !important;
}

.header-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
}

.add-card-link,
.cart-button,
.admin-login-button {
    height: 46px !important;
    border-radius: 10px !important;
}

/* ---------- CATEGORY NAV ---------- */

.category-nav {
    background: rgba(4,14,24,.97) !important;
    border-top: 1px solid rgba(54,101,133,.32) !important;
    border-bottom: 1px solid #17384f !important;
}

.category-nav-inner {
    width: 100% !important;
    max-width: 1540px !important;
    min-height: 57px !important;
    margin: 0 auto !important;
    padding: 0 26px !important;

    display: flex !important;
    align-items: center !important;
    gap: 38px !important;

    overflow-x: auto !important;
    scrollbar-width: none;
}

.category-nav-inner::-webkit-scrollbar {
    display: none;
}

.category-button {
    min-height: 57px !important;
    padding: 0 3px !important;
    flex: 0 0 auto !important;

    background: transparent !important;
    color: #95acbd !important;

    border: 0 !important;
    border-bottom: 3px solid transparent !important;
    border-radius: 0 !important;

    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: 1.1px !important;
    white-space: nowrap !important;
}

.category-button:hover,
.category-button.active {
    color: #fff !important;
    border-bottom-color: var(--fh-blue) !important;
}

.page-intro {
    display: none !important;
}

/* ---------- CATALOG LAYOUT ---------- */

.app {
    width: 100% !important;
    max-width: 1540px !important;
    margin: 0 auto !important;
    padding: 26px 26px 46px !important;

    display: block !important;
}

.main-content {
    width: 100% !important;
    min-width: 0 !important;
}

/* ---------- HORIZONTAL FILTER BAR ---------- */

.filters-panel {
    position: relative !important;
    inset: auto !important;

    width: 100% !important;
    max-width: none !important;
    min-height: 62px !important;
    max-height: none !important;
    margin: 0 0 28px !important;
    padding: 0 !important;

    display: grid !important;
    grid-template-columns:
        repeat(5, minmax(150px, 1fr))
        minmax(135px, .78fr)
        minmax(140px, .78fr) !important;
    gap: 12px !important;
    align-items: center !important;

    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.filters-header {
    display: contents !important;
}

/* Hide old "Filters / refine your search" text on desktop.
   The approved mockup is the clean row of controls only. */
.filters-header > div {
    display: none !important;
}

.hidden-filter-count {
    display: none !important;
}

.clear-filters {
    order: 6 !important;
    width: 100% !important;
    height: 58px !important;
    padding: 0 15px !important;

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

    background: #081a29 !important;
    color: #9bb6c9 !important;

    border: 1px solid #1d5676 !important;
    border-radius: 11px !important;

    font-size: 12px !important;
    font-weight: 850 !important;
    letter-spacing: .6px !important;
    white-space: nowrap !important;
}

.clear-filters::before {
    content: "×";
    margin-right: 9px;
    color: #c6dceb;
    font-size: 27px;
    font-weight: 300;
    line-height: 1;
}

.clear-filters:hover {
    border-color: var(--fh-blue) !important;
    color: white !important;
}

.filter-section {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
}

.filter-section:nth-of-type(1) { order: 1; }
.filter-section:nth-of-type(2) { order: 2; }
.filter-section:nth-of-type(3) { order: 3; }
.filter-section:nth-of-type(4) { order: 4; }
.filter-section:nth-of-type(5) { order: 5; }

.filter-section-title {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 58px !important;
    margin: 0 !important;
    padding: 0 42px 0 44px !important;

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

    background: #081a29 !important;
    color: #edf8ff !important;

    border: 1px solid #1d5676 !important;
    border-radius: 11px !important;

    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: .65px !important;
    cursor: pointer !important;
    user-select: none !important;
}

.filter-section-title::before {
    content: "◇";
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #dff4ff;
    font-size: 19px;
    font-weight: 400;
}

.filter-section:nth-of-type(1) .filter-section-title::before { content: "▽"; }
.filter-section:nth-of-type(2) .filter-section-title::before { content: "♢"; }
.filter-section:nth-of-type(3) .filter-section-title::before { content: "⚑"; }
.filter-section:nth-of-type(4) .filter-section-title::before { content: "≋"; }
.filter-section:nth-of-type(5) .filter-section-title::before { content: "◇"; }

.filter-section-title::after {
    content: "⌄";
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-57%);
    color: #d7ebf8;
    font-size: 17px;
}

.filter-section.open .filter-section-title {
    border-color: var(--fh-blue) !important;
    box-shadow: 0 0 0 2px rgba(56,189,248,.08) !important;
}

.filter-section .filter-search,
.filter-section .checkbox-list {
    display: none !important;
}

.filter-section.open .filter-search {
    display: block !important;
    position: absolute !important;
    z-index: 1002 !important;
    top: 66px !important;
    left: 0 !important;

    width: 100% !important;
    min-width: 225px !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 12px !important;

    background: #071522 !important;
    color: white !important;

    border: 1px solid #25516d !important;
    border-bottom: 0 !important;
    border-radius: 10px 10px 0 0 !important;
}

.filter-section.open .checkbox-list {
    display: block !important;
    position: absolute !important;
    z-index: 1001 !important;

    top: 106px !important;
    left: 0 !important;

    width: 100% !important;
    min-width: 225px !important;
    max-height: 290px !important;
    margin: 0 !important;
    padding: 8px 10px !important;

    overflow-y: auto !important;

    background: #071522 !important;
    border: 1px solid #25516d !important;
    border-radius: 0 0 10px 10px !important;
    box-shadow: 0 18px 38px rgba(0,0,0,.38) !important;
}

/* TYPE has no search input, so its list starts immediately below the button. */
.filter-section:nth-of-type(5).open .checkbox-list {
    top: 66px !important;
    border-radius: 10px !important;
}

.checkbox-row {
    width: 100% !important;
    min-height: 32px !important;
    padding: 4px 5px !important;

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

    color: #b7ccda !important;
    border-radius: 6px !important;
    font-size: 11px !important;
}

.checkbox-row:hover {
    background: #0d2940 !important;
    color: #fff !important;
}

.checkbox-count {
    margin-left: auto !important;
    color: #65859c !important;
}

.filter-sort {
    order: 7 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
}

.filter-sort .sort-label {
    display: none !important;
}

#sortSelect {
    width: 100% !important;
    height: 58px !important;
    margin: 0 !important;
    padding: 0 12px !important;

    background: #081a29 !important;
    color: #cfe2ee !important;

    border: 1px solid #1d5676 !important;
    border-radius: 11px !important;

    outline: none !important;
    font-size: 11px !important;
}

/* ---------- CATALOG HEADING ---------- */

.collection-heading {
    display: none !important;
}

.catalog-heading {
    min-height: 58px;
    margin: 0 0 14px;

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

    border-bottom: 1px solid rgba(79,141,179,.14);
}

.catalog-title {
    position: relative;
    margin: 0;
    padding-bottom: 12px;

    color: #f5f8fb;
    font-size: 24px;
    line-height: 1;
    font-weight: 950;
    letter-spacing: -.5px;
}

.catalog-title span {
    color: var(--fh-blue);
}

.catalog-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 56px;
    height: 3px;
    background: var(--fh-blue);
}

.catalog-line {
    width: 70px;
    height: 1px;
    background: #20516e;
}

/* ---------- CARD GRID: 5 COLUMNS LIKE THE MOCKUP ---------- */

.card-list {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 16px !important;
}

.card-row {
    min-width: 0 !important;
    overflow: hidden !important;

    padding: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;

    background: linear-gradient(180deg, #0a1b2a 0%, #081825 100%) !important;
    border: 1px solid #183f58 !important;
    border-radius: 10px !important;

    box-shadow: 0 10px 28px rgba(0,0,0,.12) !important;

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

.card-row:hover {
    transform: translateY(-3px) !important;
    border-color: #2b6f94 !important;
    box-shadow: 0 16px 34px rgba(0,0,0,.22) !important;
}

.card-image-container {
    width: 100% !important;
    height: 322px !important;
    min-height: 322px !important;
    margin: 0 0 11px !important;
    padding: 6px !important;

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

    background: #05121d !important;
    border: 1px solid #12344a !important;
    border-radius: 7px !important;
    overflow: hidden !important;
}

.card-image {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
}

.card-info {
    width: 100% !important;
    padding: 0 2px !important;
    min-width: 0 !important;
}

.card-kicker {
    min-height: 19px;
    margin-bottom: 3px;
    overflow: hidden;

    color: #e7f0f6;
    font-size: 12px;
    font-weight: 850;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.card-title {
    min-height: 21px !important;
    margin: 0 0 3px !important;

    overflow: hidden !important;

    color: #fff !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
    font-weight: 900 !important;

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

.card-subtitle {
    min-height: 18px;

    overflow: hidden;
    color: #9bb3c4;
    font-size: 11px;
    line-height: 1.35;

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

.card-chip-row {
    min-height: 24px;
    margin-top: 7px;

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}

.card-chip {
    padding: 3px 6px;
    background: #0d2a3e;
    color: #72dffa;
    border: 1px solid #174560;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 850;
}

.card-chip-limited {
    color: #ffd467;
}

.card-chip-location {
    color: #ffdc54;
}

.card-side {
    width: 100% !important;
    margin-top: auto !important;
    padding: 11px 2px 0 !important;

    display: block !important;

    border-top: 1px solid rgba(77,138,176,.14) !important;
}

.card-purchase-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.card-price {
    color: var(--fh-blue) !important;
    font-size: 21px !important;
    line-height: 1 !important;
    font-weight: 950 !important;
}

.card-price-empty {
    color: #557589 !important;
}

.add-button {
    width: 42px !important;
    min-width: 42px !important;
    height: 39px !important;
    min-height: 39px !important;
    padding: 0 7px !important;

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

    background: #071725 !important;
    color: #e5f7ff !important;

    border: 1px solid var(--fh-blue) !important;
    border-radius: 9px !important;

    font-size: 13px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
}

.add-button:hover:not(:disabled) {
    background: #0c2a40 !important;
}

.add-button:disabled {
    width: auto !important;
    min-width: 42px !important;
    color: #69869a !important;
    border-color: #24465c !important;
    cursor: not-allowed !important;
}

.stock-text {
    margin: 5px 0 0 !important;
    color: #66869c !important;
    font-size: 9px !important;
}

.admin-actions {
    margin-top: 10px !important;
}

/* ---------- TRUST STRIP ---------- */

.trust-strip {
    width: 100%;
    max-width: 1540px;
    margin: 0 auto 28px;
    padding: 20px 26px;

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

    border-top: 1px solid #17405a;
    border-bottom: 1px solid #12354c;
    background: rgba(5, 16, 27, .55);
}

.trust-item {
    min-height: 56px;
    padding: 0 34px;

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

    border-right: 1px solid #1c5a7d;
}

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

.trust-icon {
    color: #a9d8f3;
    font-size: 31px;
    line-height: 1;
}

.trust-item strong {
    display: block;
    color: #d8e8f3;
    font-size: 10px;
    letter-spacing: .8px;
}

.trust-item small {
    display: block;
    margin-top: 5px;
    color: #7394aa;
    font-size: 9px;
}

/* ---------- RESPONSIVE ---------- */

@media (max-width: 1320px) {
    .header-inner {
        grid-template-columns: 260px minmax(280px, 1fr) auto !important;
        gap: 18px !important;
    }

    .site-logo {
        font-size: 27px !important;
    }

    .brand-card-count {
        min-width: 192px;
    }

    .filters-panel {
        grid-template-columns:
            repeat(5, minmax(125px, 1fr))
            minmax(120px, .75fr)
            minmax(125px, .75fr) !important;
        gap: 8px !important;
    }

    .filter-section-title {
        padding-left: 38px !important;
        padding-right: 34px !important;
        font-size: 11px !important;
    }

    .card-list {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    .card-image-container {
        height: 305px !important;
        min-height: 305px !important;
    }
}

@media (max-width: 980px) {
    .header-inner {
        grid-template-columns: 230px minmax(220px, 1fr) auto !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .brand-subtitle {
        display: none;
    }

    .filters-panel {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .filter-section,
    .clear-filters,
    .filter-sort {
        min-width: 0 !important;
    }

    .card-list {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 700px) {
    body {
        overflow-x: hidden !important;
    }

    .site-header {
        position: relative !important;
    }

    .header-inner {
        min-height: auto !important;
        padding: 12px 12px 11px !important;

        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 10px 8px !important;
        align-items: start !important;
    }

    .brand-block {
        grid-column: 1 !important;
        grid-row: 1 !important;
        gap: 5px;
    }

    .site-logo {
        font-size: 21px !important;
        letter-spacing: -1.3px !important;
    }

    .brand-subtitle {
        display: none !important;
    }

    .brand-card-count {
        min-width: 150px;
        height: 34px;
        margin-top: 2px;
        padding: 0 9px;
        gap: 7px;
    }

    .brand-card-icon {
        width: 17px;
        height: 12px;
    }

    .brand-card-icon::after {
        width: 14px;
        height: 10px;
        left: 4px;
        top: -4px;
    }

    .brand-card-count strong {
        font-size: 18px;
    }

    .brand-card-count small {
        font-size: 7px;
        letter-spacing: .8px;
    }

    .header-actions {
        grid-column: 2 !important;
        grid-row: 1 !important;
        align-self: start !important;
        gap: 6px !important;
    }

    .header-actions .admin-only {
        display: none !important;
    }

    .cart-button,
    .admin-login-button {
        height: 40px !important;
        padding: 0 10px !important;
        font-size: 12px !important;
    }

    .cart-icon {
        display: none !important;
    }

    .header-search {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        max-width: none !important;
    }

    #globalSearch {
        height: 45px !important;
        padding-left: 43px !important;
        border-radius: 11px !important;
        font-size: 14px !important;
    }

    .search-icon {
        left: 14px !important;
        font-size: 20px !important;
    }

    .category-nav-inner {
        min-height: 50px !important;
        padding: 0 12px !important;
        gap: 25px !important;
    }

    .category-button {
        min-height: 50px !important;
        font-size: 10px !important;
        letter-spacing: .8px !important;
    }

    .app {
        padding: 14px 10px 30px !important;
    }

    /* mobile collapsed Filters bar */
    .filters-panel {
        width: 100% !important;
        min-height: 54px !important;
        margin: 0 0 15px !important;
        padding: 0 !important;

        display: block !important;

        background: #081a29 !important;
        border: 1px solid #1b4059 !important;
        border-radius: 12px !important;
    }

    .filters-header {
        min-height: 54px !important;
        padding: 0 14px !important;

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

    .filters-header > div {
        display: block !important;
    }

    .filters-title {
        display: flex !important;
        align-items: center !important;

        color: #fff !important;
        font-size: 15px !important;
        font-weight: 900 !important;
    }

    .filters-title::after {
        content: "⌄";
        margin-left: 8px;
        color: var(--fh-blue);
        font-size: 16px;
    }

    .filters-panel.mobile-open .filters-title::after {
        content: "⌃";
    }

    .filter-status {
        display: none !important;
    }

    .clear-filters {
        width: auto !important;
        height: auto !important;
        padding: 0 !important;

        display: block !important;

        background: transparent !important;
        border: 0 !important;
        color: var(--fh-blue) !important;

        font-size: 11px !important;
    }

    .clear-filters::before {
        content: none !important;
    }

    .filters-panel .filter-section,
    .filters-panel .filter-sort {
        display: none !important;
    }

    .filters-panel.mobile-open {
        padding: 0 12px 12px !important;
    }

    .filters-panel.mobile-open .filters-header {
        margin: 0 -12px 10px !important;
        padding: 0 12px !important;
        border-bottom: 1px solid rgba(78,139,177,.16) !important;
    }

    .filters-panel.mobile-open .filter-section {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        margin-bottom: 8px !important;
    }

    .filters-panel.mobile-open .filter-section-title {
        height: 46px !important;
    }

    .filters-panel.mobile-open .filter-sort {
        display: flex !important;
        margin-top: 8px !important;
    }

    #sortSelect {
        height: 46px !important;
    }

    .catalog-heading {
        min-height: 50px;
        margin-bottom: 11px;
    }

    .catalog-title {
        font-size: 19px;
        padding-bottom: 10px;
    }

    .catalog-line {
        width: 42px;
    }

   .card-list {
    grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)) !important;
    gap: 9px !important;
}

    .card-row {
        padding: 8px !important;
        border-radius: 9px !important;
    }

    .card-row:hover {
        transform: none !important;
    }

    .card-image-container {
        height: 220px !important;
        min-height: 220px !important;
        padding: 4px !important;
        margin-bottom: 8px !important;
    }

    .card-kicker {
        font-size: 9px;
        min-height: 15px;
    }

    .card-title {
        min-height: 18px !important;
        font-size: 12px !important;
    }

    .card-subtitle {
        min-height: 15px;
        font-size: 9px;
    }

    .card-chip-row {
        min-height: 21px;
        margin-top: 5px;
        gap: 3px;
    }

    .card-chip {
        padding: 2px 5px;
        font-size: 8px;
    }

    .card-side {
        padding-top: 8px !important;
    }

    .card-price {
        font-size: 17px !important;
    }

    .add-button {
        width: 37px !important;
        min-width: 37px !important;
        height: 34px !important;
        min-height: 34px !important;
        padding: 0 5px !important;
        font-size: 11px !important;
    }

    .stock-text {
        font-size: 8px !important;
    }

    .trust-strip {
        margin-bottom: 0;
        padding: 16px 12px;
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .trust-item {
        min-height: 48px;
        padding: 0;
        justify-content: flex-start;
        border-right: 0;
        border-bottom: 1px solid rgba(29,86,118,.48);
    }

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

    .trust-icon {
        width: 40px;
        text-align: center;
        font-size: 25px;
    }
}

@media (max-width: 390px) {
    .brand-card-count {
        min-width: 138px;
    }

    .cart-button,
    .admin-login-button {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .card-list {
        gap: 7px !important;
    }

    .card-image-container {
        height: 190px !important;
        min-height: 190px !important;
    }
}


/* ============================================================
   FROZENHITS v2.1 — DESKTOP POLISH
   Fixes filter order + compact card proportions
   ============================================================ */

@media (min-width: 701px) {

    /* Correct order:
       YEAR → TEAM → NATIONALITY → SET → TYPE → CLEAR → SORT */

    .filter-section:nth-of-type(2) { order: 1 !important; } /* YEAR */
    .filter-section:nth-of-type(3) { order: 2 !important; } /* TEAM */
    .filter-section:nth-of-type(4) { order: 3 !important; } /* NATIONALITY */
    .filter-section:nth-of-type(5) { order: 4 !important; } /* SET */
    .filter-section:nth-of-type(6) { order: 5 !important; } /* TYPE */

    .filter-section:nth-of-type(2) .filter-section-title::before { content: "▽" !important; }
    .filter-section:nth-of-type(3) .filter-section-title::before { content: "♢" !important; }
    .filter-section:nth-of-type(4) .filter-section-title::before { content: "⚑" !important; }
    .filter-section:nth-of-type(5) .filter-section-title::before { content: "≋" !important; }
    .filter-section:nth-of-type(6) .filter-section-title::before { content: "◇" !important; }

    /* TYPE has no search box */
    .filter-section:nth-of-type(6).open .checkbox-list {
        top: 66px !important;
        border-radius: 10px !important;
    }

    .clear-filters {
        order: 6 !important;
    }

    .filter-sort {
        order: 7 !important;
        max-width: 150px !important;
        justify-self: end !important;
    }

    #sortSelect {
        font-size: 10px !important;
        padding-left: 11px !important;
        padding-right: 28px !important;
    }

    /* tighter vertical rhythm */
    .filters-panel {
        margin-bottom: 18px !important;
    }

    .catalog-heading {
        min-height: 52px !important;
        margin-bottom: 12px !important;
    }

    /* Prevent grid rows from stretching cards to the tallest content */
    .card-list {
        align-items: start !important;
        grid-auto-rows: auto !important;
    }

    .card-row {
        height: auto !important;
        min-height: 0 !important;
        align-self: start !important;
    }

    /* The mockup uses compact cards, not tall admin panels */
    .card-side {
        margin-top: 10px !important;
    }

    .card-image-container {
        height: 292px !important;
        min-height: 292px !important;
    }

    .card-kicker {
        min-height: 17px !important;
        margin-bottom: 2px !important;
    }

    .card-title {
        min-height: 19px !important;
        margin-bottom: 2px !important;
    }

    .card-subtitle {
        min-height: 16px !important;
    }

    .card-chip-row {
        min-height: 21px !important;
        margin-top: 5px !important;
    }

    .card-side {
        padding-top: 9px !important;
    }

    .stock-text {
        margin-top: 4px !important;
    }

    /* slightly stronger brand, closer to approved mockup */
    .site-logo {
        font-size: 34px !important;
    }

    .brand-card-count {
        margin-top: 5px !important;
    }
}

@media (min-width: 701px) and (max-width: 1320px) {
    .card-image-container {
        height: 270px !important;
        min-height: 270px !important;
    }
}


/* ============================================================
   FROZENHITS v2.2 — FILTER DROPDOWN FIX
   Stable order + compact rows + always show first item
   ============================================================ */

@media (min-width: 701px) {

    /* Stable filter order — no more nth-of-type guessing */
    .filter-year        { order: 1 !important; }
    .filter-team        { order: 2 !important; }
    .filter-nationality { order: 3 !important; }
    .filter-set         { order: 4 !important; }
    .filter-type        { order: 5 !important; }

    .filter-year .filter-section-title::before        { content: "▽" !important; }
    .filter-team .filter-section-title::before        { content: "♢" !important; }
    .filter-nationality .filter-section-title::before { content: "⚑" !important; }
    .filter-set .filter-section-title::before         { content: "≋" !important; }
    .filter-type .filter-section-title::before        { content: "◇" !important; }

    /* Search + dropdown touch cleanly, but don't overlap */
    .filter-section.open .filter-search {
        top: 66px !important;
        height: 40px !important;
    }

    .filter-section.open .checkbox-list {
        top: 106px !important;
        max-height: 300px !important;

        padding: 5px 8px !important;

        overscroll-behavior: contain;
        scrollbar-gutter: stable;
    }

    /* TYPE has no search field */
    .filter-type.open .checkbox-list {
        top: 66px !important;
        border-radius: 10px !important;
    }

    /* Compact option rows */
    .checkbox-row {
        min-height: 27px !important;
        margin: 0 !important;
        padding: 3px 5px !important;

        gap: 7px !important;

        line-height: 1.15 !important;
        font-size: 11px !important;
    }

    .checkbox-row + .checkbox-row {
        margin-top: 1px !important;
    }

    .checkbox-row input {
        width: 14px !important;
        height: 14px !important;
        min-width: 14px !important;

        margin: 0 !important;
        flex: 0 0 14px !important;
    }

    .checkbox-label-text {
        min-width: 0;
        line-height: 1.15 !important;
    }

    .checkbox-count {
        min-width: 29px !important;
        height: 22px !important;
        padding: 0 7px !important;
        margin-left: auto !important;

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

        border: 1px solid #174761 !important;
        border-radius: 999px !important;

        background: #0b2638 !important;
        color: #8bb5cf !important;

        line-height: 1 !important;
    }
}


/* ============================================================
   FROZENHITS v2.3 — FILTER SEARCH + FIRST ITEM FIX
   ============================================================ */

@media (min-width: 701px) {

    /* JS uses the native hidden attribute for search filtering.
       This must beat older display:flex !important rules. */
    .checkbox-row[hidden] {
        display: none !important;
    }

    .checkbox-row:not([hidden]) {
        display: flex !important;
    }

    /* Keep the first option fully below the search field. */
    .filter-section.open .checkbox-list {
        top: 110px !important;
        padding-top: 6px !important;
        scroll-behavior: auto !important;
    }

    .filter-type.open .checkbox-list {
        top: 66px !important;
    }

    /* Search field and result list should never overlap. */
    .filter-section.open .filter-search {
        top: 66px !important;
        height: 40px !important;
        z-index: 1003 !important;
    }

    /* Compact rows */
    .checkbox-row {
        min-height: 27px !important;
        margin: 0 !important;
        padding: 2px 5px !important;
    }

    .checkbox-row + .checkbox-row {
        margin-top: 0 !important;
    }
}

/* Search filtering also has to work in the mobile dropdown. */
@media (max-width: 700px) {

    .checkbox-row[hidden] {
        display: none !important;
    }

    .checkbox-row:not([hidden]) {
        display: flex !important;
    }
}


/* ============================================================
   FROZENHITS v2.5 — SET DROPDOWN OVERLAP FIX
   The old nth-of-type rule treated SET as TYPE and placed the
   result list underneath the search box. This explicitly wins.
   ============================================================ */

@media (min-width: 701px) {

    .filters-panel .filter-set.open .filter-search {
        top: 66px !important;
        height: 40px !important;
        z-index: 1102 !important;
    }

    .filters-panel .filter-set.open .checkbox-list {
        top: 110px !important;
        z-index: 1101 !important;
        padding-top: 6px !important;
        border-radius: 0 0 10px 10px !important;
    }

    .filters-panel .filter-type.open .checkbox-list {
        top: 66px !important;
        border-radius: 10px !important;
    }
}


/* ============================================================
   FROZENHITS v2.6 — CARD + MODAL POLISH
   Better modal Add to cart, tighter card tiles,
   slightly richer card info, bigger stock text.
   ============================================================ */

@media (min-width: 701px) {
    .card-list {
        align-items: start !important;
    }

    .card-row {
        padding: 12px !important;
    }

    .card-image-container {
        height: 284px !important;
        min-height: 284px !important;
        margin-bottom: 10px !important;
    }

    .card-kicker {
        min-height: 16px !important;
        margin-bottom: 1px !important;
        color: #dceaf4 !important;
        font-size: 10px !important;
        font-weight: 800 !important;
    }

    .card-title {
        min-height: 18px !important;
        margin-bottom: 1px !important;
        font-size: 13px !important;
        line-height: 1.25 !important;
    }

    .card-subtitle {
        min-height: 15px !important;
        font-size: 10px !important;
    }

    .card-extra-line {
        min-height: 15px;
        margin-top: 2px;
        color: #83a7bf;
        font-size: 10px;
        line-height: 1.25;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .card-chip-row {
        min-height: 20px !important;
        margin-top: 6px !important;
    }

    .card-side {
        margin-top: 8px !important;
        padding-top: 9px !important;
    }

    .card-price {
        font-size: 18px !important;
    }

    .add-button {
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        border-radius: 11px !important;
        font-size: 14px !important;
    }

    .stock-text {
        margin-top: 6px !important;
        color: #8eb6cf !important;
        font-size: 12px !important;
        font-weight: 800 !important;
        line-height: 1.2 !important;
    }
}

@media (max-width: 700px) {
    .card-extra-line {
        min-height: 14px;
        margin-top: 2px;
        color: #83a7bf;
        font-size: 9px;
        line-height: 1.2;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .stock-text {
        font-size: 10px !important;
        font-weight: 800 !important;
    }
}

/* ---------- MODAL ---------- */

.modal-details {
    padding-top: 10px !important;
}

.modal-year {
    color: #67d4ff !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: .6px;
    text-transform: uppercase;
}

.modal-details h2 {
    margin: 6px 0 16px !important;
    color: #ffffff !important;
    font-size: 24px !important;
    line-height: 1.2 !important;
}

#modalInfo {
    padding: 14px 16px !important;
    background: rgba(9, 24, 38, .7) !important;
    border: 1px solid rgba(42, 92, 122, .5) !important;
    border-radius: 12px !important;
}

.modal-info-row {
    display: grid !important;
    grid-template-columns: 92px 1fr !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 6px 0 !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    border-bottom: 1px solid rgba(43, 90, 120, .22) !important;
}

.modal-info-row:last-child {
    border-bottom: 0 !important;
}

.modal-info-label {
    color: #7f9aaf !important;
    font-weight: 700 !important;
}

.modal-info-row span:last-child {
    color: #dbe8f2 !important;
    font-weight: 600 !important;
}

.modal-price-row {
    margin-top: 16px !important;
    padding-top: 15px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
    gap: 16px !important;
}

#modalPrice {
    color: #48bcff !important;
    font-size: 30px !important;
    line-height: 1 !important;
    font-weight: 950 !important;
}

#modalStock {
    color: #a0bfd2 !important;
    font-size: 14px !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
}

#modalAddToCart.add-button {
    width: 100% !important;
    min-width: 0 !important;
    height: 50px !important;
    min-height: 50px !important;
    margin-top: 14px !important;
    padding: 0 18px !important;

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

    background: linear-gradient(180deg, #4dbef8, #37aef0) !important;
    color: #04121d !important;

    border: 0 !important;
    border-radius: 12px !important;

    font-size: 16px !important;
    font-weight: 900 !important;
    letter-spacing: .2px !important;
    box-shadow: 0 10px 24px rgba(56, 189, 248, .18) !important;
}

#modalAddToCart.add-button:hover:not(:disabled) {
    transform: translateY(-1px);
    filter: brightness(1.04);
}

#modalAddToCart.add-button:disabled {
    width: 100% !important;
    color: #7b94a6 !important;
    background: #102536 !important;
    border: 1px solid #29465a !important;
    box-shadow: none !important;
}

#modalEditButton {
    width: 100% !important;
    margin-top: 10px !important;
}

@media (max-width: 700px) {
    .modal-details h2 {
        font-size: 20px !important;
    }

    .modal-info-row {
        grid-template-columns: 84px 1fr !important;
        font-size: 12px !important;
    }

    #modalInfo {
        padding: 12px 13px !important;
    }

    #modalPrice {
        font-size: 26px !important;
    }

    #modalStock {
        font-size: 13px !important;
    }

    #modalAddToCart.add-button {
        height: 46px !important;
        min-height: 46px !important;
        font-size: 15px !important;
    }
}


/* ============================================================
   FROZENHITS v2.7 — REMOVE FEATURED CARDS HEADING
   ============================================================ */

.catalog-heading,
.catalog-title,
.catalog-line {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    height: 0 !important;
    border: 0 !important;
}

.card-list {
    margin-top: 0 !important;
    padding-top: 0 !important;
}


/* ============================================================
   FROZENHITS v2.8 — FILTER BAR REDESIGN
   Smaller controls, cleaner icons, visible "Sort by"
   ============================================================ */

@media (min-width: 701px) {

    .filters-panel {
        grid-template-columns:
            repeat(5, minmax(125px, 1fr))
            minmax(110px, .8fr)
            minmax(210px, .95fr) !important;
        gap: 10px !important;
        margin-bottom: 16px !important;
        align-items: center !important;
    }

    .filter-section-title,
    .clear-filters,
    #sortSelect {
        height: 50px !important;
        border-radius: 12px !important;
    }

    .filter-section-title {
        padding: 0 34px 0 38px !important;
        background: linear-gradient(180deg, #081827 0%, #071421 100%) !important;
        border: 1px solid #235574 !important;
        color: #eef8ff !important;
        font-size: 11px !important;
        font-weight: 900 !important;
        letter-spacing: .9px !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.02) !important;
    }

    .filter-section-title:hover {
        border-color: #3282ad !important;
        background: linear-gradient(180deg, #0a1d2d 0%, #081725 100%) !important;
    }

    .filter-section.open .filter-section-title {
        border-color: #41bff9 !important;
        box-shadow: 0 0 0 2px rgba(56,189,248,.08) !important;
    }

    .filter-section-title::before {
        left: 14px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        color: #86d7ff !important;
        font-size: 14px !important;
        font-weight: 700 !important;
    }

    .filter-section-title::after {
        right: 13px !important;
        color: #c8e8f7 !important;
        font-size: 14px !important;
        transform: translateY(-54%) !important;
    }

    /* cleaner, more fitting icons */
    .filter-year .filter-section-title::before        { content: "◫" !important; }
    .filter-team .filter-section-title::before        { content: "★" !important; }
    .filter-nationality .filter-section-title::before { content: "◎" !important; }
    .filter-set .filter-section-title::before         { content: "▤" !important; }
    .filter-type .filter-section-title::before        { content: "◇" !important; }

    .clear-filters {
        order: 6 !important;
        padding: 0 14px !important;
        background: linear-gradient(180deg, #081827 0%, #071421 100%) !important;
        border: 1px solid #235574 !important;
        color: #b8d3e4 !important;
        font-size: 11px !important;
        font-weight: 850 !important;
        letter-spacing: .5px !important;
    }

    .clear-filters:hover {
        color: #fff !important;
        border-color: #3c8eb8 !important;
    }

    .clear-filters::before {
        content: "✕" !important;
        margin-right: 8px !important;
        color: #9edfff !important;
        font-size: 13px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
    }

    .filter-sort {
        order: 7 !important;
        max-width: none !important;
        width: 100% !important;
        display: grid !important;
        grid-template-columns: auto 1fr !important;
        align-items: center !important;
        gap: 10px !important;
        justify-self: stretch !important;
    }

    .filter-sort .sort-label {
        display: block !important;
        margin: 0 !important;
        color: #8eb3c8 !important;
        font-size: 11px !important;
        font-weight: 800 !important;
        letter-spacing: .5px !important;
        white-space: nowrap !important;
    }

    #sortSelect {
        width: 100% !important;
        padding: 0 36px 0 14px !important;
        background: linear-gradient(180deg, #081827 0%, #071421 100%) !important;
        color: #e4f5ff !important;
        border: 1px solid #235574 !important;
        font-size: 11px !important;
        font-weight: 700 !important;
    }

    #sortSelect:hover,
    #sortSelect:focus {
        border-color: #41bff9 !important;
        box-shadow: 0 0 0 2px rgba(56,189,248,.08) !important;
    }

    .filter-section.open .filter-search {
        top: 58px !important;
        height: 38px !important;
        border-color: #25516d !important;
        font-size: 13px !important;
    }

    .filter-section.open .checkbox-list {
        top: 96px !important;
        min-width: 235px !important;
        max-height: 310px !important;
    }

    .filter-set.open .checkbox-list {
        top: 100px !important;
    }

    .filter-type.open .checkbox-list {
        top: 58px !important;
    }

    .checkbox-row {
        min-height: 26px !important;
        padding: 2px 5px !important;
        font-size: 11px !important;
    }

    .checkbox-count {
        min-width: 28px !important;
        height: 20px !important;
        font-size: 10px !important;
    }
}

@media (max-width: 700px) {
    .filters-header {
        min-height: 52px !important;
    }

    .filters-title {
        font-size: 14px !important;
    }
}


/* ============================================================
   FROZENHITS v2.9 — COMPACT FILTER BAR
   Smaller filter buttons + Sort by above select
   ============================================================ */

@media (min-width: 701px) {

    .filters-panel {
        grid-template-columns:
            140px
            150px
            185px
            140px
            140px
            115px
            minmax(190px, 1fr) !important;

        gap: 10px !important;
        align-items: end !important;
        margin-bottom: 14px !important;
    }

    .filter-section-title,
    .clear-filters {
        height: 44px !important;
        border-radius: 10px !important;
    }

    .filter-section-title {
        padding: 0 30px 0 34px !important;
        font-size: 10px !important;
        letter-spacing: .7px !important;
    }

    .filter-section-title::before {
        left: 12px !important;
        font-size: 12px !important;
    }

    .filter-section-title::after {
        right: 11px !important;
        font-size: 12px !important;
    }

    .clear-filters {
        padding: 0 11px !important;
        font-size: 10px !important;
        letter-spacing: .35px !important;
    }

    .clear-filters::before {
        margin-right: 6px !important;
        font-size: 11px !important;
    }

    /* Sort by now sits above the dropdown */
    .filter-sort {
        order: 7 !important;
        width: 190px !important;
        max-width: 190px !important;
        justify-self: end !important;

        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto 44px !important;
        gap: 5px !important;
        align-items: stretch !important;
    }

    .filter-sort .sort-label {
        display: block !important;
        margin: 0 0 0 2px !important;

        color: #82a8bf !important;
        font-size: 10px !important;
        line-height: 1 !important;
        font-weight: 800 !important;
        letter-spacing: .55px !important;
    }

    #sortSelect {
        width: 190px !important;
        height: 44px !important;
        padding: 0 32px 0 12px !important;

        border-radius: 10px !important;
        font-size: 10px !important;
    }

    /* Dropdowns keep a useful width even though buttons are smaller */
    .filter-section.open .filter-search,
    .filter-section.open .checkbox-list {
        min-width: 225px !important;
    }

    .filter-section.open .filter-search {
        top: 52px !important;
    }

    .filter-section.open .checkbox-list {
        top: 90px !important;
    }

    .filter-set.open .checkbox-list {
        top: 94px !important;
    }

    .filter-type.open .checkbox-list {
        top: 52px !important;
    }
}

@media (min-width: 701px) and (max-width: 1180px) {
    .filters-panel {
        grid-template-columns:
            repeat(3, minmax(135px, 1fr)) !important;
    }

    .filter-sort {
        width: 100% !important;
        max-width: none !important;
        justify-self: stretch !important;
    }

    #sortSelect {
        width: 100% !important;
    }
}


/* ============================================================
   FROZENHITS v3.0 — COLLECTION NAV REDESIGN
   Modern segmented category navigation
   ============================================================ */

.category-nav {
    background:
        linear-gradient(180deg, rgba(6, 19, 31, .98), rgba(5, 16, 27, .98)) !important;
    border-top: 1px solid rgba(66, 123, 158, .22) !important;
    border-bottom: 1px solid #16384f !important;
}

.category-nav-inner {
    width: 100% !important;
    max-width: 1540px !important;
    min-height: 68px !important;
    margin: 0 auto !important;
    padding: 9px 26px !important;

    display: flex !important;
    align-items: center !important;
    gap: 18px !important;

    overflow: visible !important;
}

.collection-tabs {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px;

    background: rgba(7, 24, 38, .78);
    border: 1px solid rgba(43, 94, 124, .55);
    border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}

.collection-tabs .category-button {
    position: relative;
    min-height: 43px !important;
    height: 43px !important;
    padding: 0 15px 0 8px !important;

    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;

    background: transparent !important;
    color: #8fa9bc !important;

    border: 1px solid transparent !important;
    border-radius: 10px !important;

    font-size: 11px !important;
    font-weight: 850 !important;
    letter-spacing: .45px !important;
    line-height: 1 !important;
    text-transform: none !important;

    transition:
        background .16s ease,
        border-color .16s ease,
        color .16s ease,
        transform .16s ease !important;
}

.collection-tabs .category-button::after {
    content: none !important;
}

.collection-tabs .category-button:hover {
    background: rgba(20, 57, 80, .48) !important;
    border-color: rgba(55, 123, 161, .52) !important;
    color: #eaf7ff !important;
    transform: translateY(-1px);
}

.collection-tabs .category-button.active {
    background:
        linear-gradient(180deg, rgba(27, 83, 113, .92), rgba(13, 49, 70, .94)) !important;
    color: #ffffff !important;
    border-color: #2d9bca !important;
    box-shadow:
        0 0 0 1px rgba(56,189,248,.06),
        0 7px 18px rgba(0,0,0,.16),
        inset 0 1px 0 rgba(255,255,255,.05) !important;
}

.collection-tabs .category-button.active::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 22px;
    height: 2px;
    transform: translateX(-50%);
    background: #42c7ff;
    border-radius: 99px;
    box-shadow: 0 0 8px rgba(66,199,255,.55);
}

.category-icon {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;

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

    background: #0b2436;
    border: 1px solid #1d506b;
    border-radius: 8px;

    font-size: 14px;
    line-height: 1;
}

.category-button.active .category-icon {
    background: #0d3046;
    border-color: #3cb9eb;
}

.category-icon .pokeball-icon {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    transform: scale(.86);
}

.category-label {
    transform: translateY(1px);
}

/* Admin navigation sits quietly on the right */
.admin-nav-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.admin-nav-actions .category-button {
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 11px !important;

    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;

    background: rgba(8, 26, 40, .72) !important;
    color: #809bad !important;

    border: 1px solid #1c445c !important;
    border-radius: 9px !important;

    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: .3px !important;
    text-transform: none !important;
}

.admin-nav-actions .category-button::after {
    content: none !important;
}

.admin-nav-actions .category-button:hover,
.admin-nav-actions .category-button.active {
    color: #e5f5ff !important;
    background: #0c2639 !important;
    border-color: #2c7194 !important;
}

.admin-nav-icon {
    color: #65cfff;
    font-size: 12px;
}

.admin-nav-count {
    min-width: 21px;
    height: 21px;
    padding: 0 6px;

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

    background: #102d40;
    color: #a9d7ef;
    border: 1px solid #1c536e;
    border-radius: 999px;

    font-size: 9px;
    font-weight: 900;
}

@media (max-width: 700px) {
    .category-nav-inner {
        min-height: 60px !important;
        padding: 8px 10px !important;
        gap: 10px !important;
        overflow-x: auto !important;
        scrollbar-width: none;
    }

    .category-nav-inner::-webkit-scrollbar {
        display: none;
    }

    .collection-tabs {
        flex: 0 0 auto;
        gap: 4px;
        padding: 4px;
        border-radius: 12px;
    }

    .collection-tabs .category-button {
        min-height: 39px !important;
        height: 39px !important;
        padding: 0 10px 0 6px !important;
        gap: 6px !important;
        font-size: 10px !important;
    }

    .category-icon {
        width: 25px;
        height: 25px;
        flex-basis: 25px;
        font-size: 12px;
        border-radius: 7px;
    }

    .admin-nav-actions {
        margin-left: 0;
        flex: 0 0 auto;
    }

    .admin-nav-actions .category-button {
        height: 36px !important;
        min-height: 36px !important;
        font-size: 9px !important;
    }
}


/* ============================================================
   FROZENHITS v3.1 — SMART FACET FILTERS
   Selected value replaces YEAR / TEAM / etc.
   Other filters update counts from the current selection.
   ============================================================ */

.filter-section.has-selection .filter-section-title {
    color: #ffffff !important;
    border-color: #34b8ee !important;
    background:
        linear-gradient(
            180deg,
            #0b273a 0%,
            #081c2b 100%
        ) !important;
    box-shadow:
        0 0 0 2px rgba(56,189,248,.06),
        inset 0 1px 0 rgba(255,255,255,.025) !important;
}

.filter-section.has-selection .filter-section-title::before {
    color: #54d2ff !important;
}

.filter-section-title {
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}

.checkbox-row.facet-unavailable {
    display: none !important;
}

.checkbox-row input:checked + .checkbox-label-text {
    color: #ffffff !important;
    font-weight: 850 !important;
}

.checkbox-row:has(input:checked) {
    background: rgba(31, 112, 151, .18) !important;
}

.checkbox-row:has(input:checked) .checkbox-count {
    border-color: #2a85ad !important;
    background: #0d344b !important;
    color: #bfeaff !important;
}

@media (min-width: 701px) {
    .filter-year .filter-section-title,
    .filter-team .filter-section-title,
    .filter-nationality .filter-section-title,
    .filter-set .filter-section-title,
    .filter-type .filter-section-title {
        min-width: 0 !important;
    }
}



/* ============================================================
   FROZENHITS v3.2 — APPROVED MOCKUP STYLE
   Stronger collection navigation + cleaner header/filter/cards.
   All existing JS hooks and smart filters are preserved.
   ============================================================ */

:root {
    --fh-neon: #38c7ff;
    --fh-neon-soft: rgba(56, 199, 255, .16);
    --fh-neon-border: #1e6b91;
    --fh-panel-dark: #071625;
    --fh-panel-mid: #0a1d2d;
    --fh-text-soft: #a1bdd0;
}

/* ---------- HEADER POLISH ---------- */

.header-inner {
    max-width: 1540px !important;
    min-height: 126px !important;
    padding-top: 16px !important;
    padding-bottom: 14px !important;
}

.site-logo {
    font-size: 35px !important;
    letter-spacing: -2.1px !important;
}

.brand-subtitle {
    margin-top: 1px !important;
    margin-left: 48px !important;
    color: #bdd7e7 !important;
}

.brand-card-count {
    min-width: 220px !important;
    height: 46px !important;
    border-color: #197ca9 !important;
    box-shadow:
        0 0 24px rgba(56,199,255,.045),
        inset 0 1px 0 rgba(255,255,255,.03) !important;
}

#globalSearch {
    height: 56px !important;
    border-color: #176a92 !important;
    background: linear-gradient(180deg, #071827, #061420) !important;
}

.header-actions {
    gap: 10px !important;
}

.header-actions .add-card-link,
.header-actions .admin-login-button,
.header-actions .cart-button {
    height: 48px !important;
    border-radius: 10px !important;
    font-weight: 850 !important;
}

.header-actions .add-card-link {
    background: linear-gradient(180deg, #0d2a40, #0a2133) !important;
    border-color: #235876 !important;
    color: #6fdbff !important;
}

.header-actions .add-card-link:hover,
.header-actions .admin-login-button:hover {
    border-color: #36a7d8 !important;
    background: linear-gradient(180deg, #11364f, #0c293d) !important;
}

.cart-button {
    background: linear-gradient(180deg, #59c9fb, #3cb7ee) !important;
    color: #03131f !important;
    border-color: #5bd2ff !important;
    box-shadow: 0 7px 20px rgba(56,189,248,.14) !important;
}

/* ---------- BIG CATEGORY STRIP ---------- */

.category-nav {
    background:
        linear-gradient(
            180deg,
            rgba(5,17,29,.99),
            rgba(5,15,26,.99)
        ) !important;
    border-top: 1px solid rgba(58,123,160,.2) !important;
    border-bottom: 1px solid #15506e !important;
}

.category-nav-inner {
    max-width: 1540px !important;
    min-height: 82px !important;
    padding: 10px 26px !important;
    gap: 18px !important;
}

.collection-tabs {
    padding: 0 !important;
    gap: 0 !important;
    background: transparent !important;
    border: 1px solid #173c54 !important;
    border-radius: 16px !important;
    overflow: visible !important;
    box-shadow: none !important;
}

.collection-tabs .category-button {
    position: relative !important;
    min-width: 190px !important;
    height: 60px !important;
    min-height: 60px !important;
    padding: 0 18px !important;
    gap: 12px !important;

    background:
        linear-gradient(
            180deg,
            rgba(8,27,42,.92),
            rgba(5,19,31,.96)
        ) !important;

    color: #a4bfd0 !important;
    border: 0 !important;
    border-right: 1px solid #173c54 !important;
    border-radius: 0 !important;

    font-size: 13px !important;
    font-weight: 850 !important;
    letter-spacing: .15px !important;
    text-transform: none !important;

    transform: none !important;
    box-shadow: none !important;
}

.collection-tabs .category-button:first-child {
    border-radius: 15px 0 0 15px !important;
}

.collection-tabs .category-button:last-child {
    border-right: 0 !important;
    border-radius: 0 15px 15px 0 !important;
}

.collection-tabs .category-button:hover {
    color: #edfaff !important;
    background:
        linear-gradient(
            180deg,
            rgba(14,45,66,.96),
            rgba(8,29,44,.97)
        ) !important;
    border-color: #173c54 !important;
    transform: none !important;
}

.collection-tabs .category-button.active {
    z-index: 2 !important;
    color: #ffffff !important;
    background:
        linear-gradient(
            180deg,
            rgba(20,75,105,.99),
            rgba(10,39,59,.99)
        ) !important;

    border: 1px solid #45c8ff !important;
    border-radius: 15px !important;

    box-shadow:
        0 0 0 1px rgba(56,199,255,.16),
        0 0 22px rgba(56,199,255,.30),
        inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.collection-tabs .category-button.active::before {
    content: none !important;
}

.collection-tabs .category-button.active + .category-button {
    border-left-color: transparent !important;
}

.category-icon {
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 34px !important;

    background: rgba(9,34,51,.94) !important;
    border: 1px solid #23516c !important;
    border-radius: 10px !important;

    font-size: 18px !important;
}

.category-button.active .category-icon {
    background: rgba(14,52,73,.96) !important;
    border-color: #4dccff !important;
    box-shadow: 0 0 13px rgba(56,199,255,.11);
}

.category-icon .pokeball-icon {
    width: 22px !important;
    height: 22px !important;
    transform: scale(.95) !important;
}

.category-label {
    flex: 1 1 auto;
    text-align: left;
    transform: none !important;
}

.category-chevron {
    margin-left: auto;
    color: #a8d8ed;
    font-size: 22px;
    line-height: 1;
    font-weight: 300;
    transform: translateY(-1px);
}

.category-button.active .category-chevron {
    color: #ffffff;
}

/* Admin-only navigation on the right */
.admin-nav-actions {
    margin-left: auto !important;
    gap: 9px !important;
}

.admin-nav-actions .category-button {
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 14px !important;
    gap: 8px !important;

    background: linear-gradient(180deg, #081b2a, #061724) !important;
    color: #91aebf !important;

    border: 1px solid #214c65 !important;
    border-radius: 11px !important;

    font-size: 10px !important;
    font-weight: 850 !important;
}

.admin-nav-actions .category-button:hover,
.admin-nav-actions .category-button.active {
    background: #0b293d !important;
    color: #eaf8ff !important;
    border-color: #3680a3 !important;
}

.admin-nav-count {
    min-width: 23px !important;
    height: 23px !important;
}

/* ---------- FILTER ROW ---------- */

.app {
    padding-top: 20px !important;
}

@media (min-width: 701px) {
    .filters-panel {
        grid-template-columns:
            150px
            160px
            205px
            150px
            150px
            120px
            minmax(205px, 1fr) !important;

        gap: 10px !important;
        align-items: end !important;
        margin-bottom: 16px !important;
    }

    .filter-section-title,
    .clear-filters {
        height: 48px !important;
        border-radius: 10px !important;
        background:
            linear-gradient(
                180deg,
                #081b2a,
                #061725
            ) !important;
        border-color: #20526f !important;
    }

    .filter-section-title {
        padding-left: 39px !important;
        font-size: 10px !important;
    }

    .filter-section-title::before {
        left: 14px !important;
        color: #65d5ff !important;
        font-size: 13px !important;
    }

    .filter-section-title::after {
        right: 12px !important;
    }

    .filter-year .filter-section-title::before        { content: "▣" !important; }
    .filter-team .filter-section-title::before        { content: "♢" !important; }
    .filter-nationality .filter-section-title::before { content: "⚑" !important; }
    .filter-set .filter-section-title::before         { content: "▤" !important; }
    .filter-type .filter-section-title::before        { content: "◆" !important; }

    .clear-filters {
        font-size: 10px !important;
    }

    .filter-sort {
        width: 205px !important;
        max-width: 205px !important;
    }

    .filter-sort .sort-label {
        margin-left: 2px !important;
        color: #93b7cb !important;
    }

    #sortSelect {
        width: 205px !important;
        height: 48px !important;
        border-radius: 10px !important;
        border-color: #20526f !important;
        background:
            linear-gradient(
                180deg,
                #081b2a,
                #061725
            ) !important;
    }

    .filter-section.open .filter-search {
        top: 56px !important;
    }

    .filter-section.open .checkbox-list {
        top: 94px !important;
    }

    .filter-set.open .checkbox-list {
        top: 98px !important;
    }

    .filter-type.open .checkbox-list {
        top: 56px !important;
    }
}

/* ---------- CARD TILE POLISH ---------- */

@media (min-width: 701px) {
    .card-list {
        gap: 14px !important;
        align-items: start !important;
    }

    .card-row {
        padding: 12px !important;
        background:
            linear-gradient(
                180deg,
                #091b2a 0%,
                #071725 100%
            ) !important;
        border-color: #17415a !important;
        border-radius: 11px !important;

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

    .card-row:hover {
        border-color: #2b789f !important;
        box-shadow:
            0 14px 30px rgba(0,0,0,.2),
            0 0 18px rgba(56,199,255,.045) !important;
    }

    .card-image-container {
        height: 290px !important;
        min-height: 290px !important;
        border-color: #153a51 !important;
        border-radius: 8px !important;
        background: #04111c !important;
    }

    .card-kicker {
        color: #d5e7f2 !important;
        font-size: 10px !important;
        font-weight: 800 !important;
    }

    .card-title {
        color: #ffffff !important;
        font-size: 14px !important;
    }

    .card-subtitle,
    .card-extra-line {
        color: #91afc1 !important;
    }

    .card-chip {
        background: #0a2a3e !important;
        border-color: #1c506b !important;
        color: #62d7ff !important;
    }

    .card-chip-location {
        color: #ffd84a !important;
    }

    .card-price {
        color: #38c7ff !important;
        font-size: 21px !important;
    }

    .stock-text {
        color: #a9c5d6 !important;
        font-size: 11px !important;
    }

    .add-button {
        background: #071827 !important;
        color: #dff7ff !important;
        border-color: #35b9ee !important;
    }

    .add-button:hover:not(:disabled) {
        background: #0b3047 !important;
        box-shadow: 0 0 15px rgba(56,199,255,.1);
    }

    .edit-button {
        background: #0d2b40 !important;
        border-color: #255d7c !important;
        color: #6edcff !important;
    }
}

/* ---------- MOBILE ---------- */

@media (max-width: 700px) {
    .header-inner {
        padding-left: 11px !important;
        padding-right: 11px !important;
    }

    .site-logo {
        font-size: 21px !important;
    }

    .category-nav-inner {
        min-height: 68px !important;
        padding: 8px 10px !important;
        overflow-x: auto !important;
    }

    .collection-tabs {
        flex: 0 0 auto !important;
        border-radius: 13px !important;
    }

    .collection-tabs .category-button {
        min-width: 128px !important;
        height: 48px !important;
        min-height: 48px !important;
        padding: 0 10px !important;
        gap: 7px !important;
        font-size: 10px !important;
    }

    .collection-tabs .category-button:first-child {
        border-radius: 12px 0 0 12px !important;
    }

    .collection-tabs .category-button:last-child {
        border-radius: 0 12px 12px 0 !important;
    }

    .collection-tabs .category-button.active {
        border-radius: 12px !important;
    }

    .category-icon {
        width: 27px !important;
        height: 27px !important;
        flex-basis: 27px !important;
        font-size: 13px !important;
    }

    .category-chevron {
        font-size: 18px;
    }

    .admin-nav-actions {
        flex: 0 0 auto !important;
    }
}


/* ============================================================
   FROZENHITS v3.3 — MATCH THE APPROVED MOCKUP MUCH MORE CLOSELY
   ============================================================ */

body {
    background:
        radial-gradient(circle at 18% -8%, rgba(25, 102, 148, .14), transparent 24%),
        linear-gradient(180deg, #03101b 0%, #061522 100%) !important;
}

/* HEADER */
.header-inner {
    min-height: 132px !important;
    grid-template-columns: 270px minmax(380px, 1fr) auto !important;
    gap: 34px !important;
}

.site-logo {
    font-size: 37px !important;
}

.header-search {
    max-width: 700px !important;
}

#globalSearch {
    height: 54px !important;
    border: 1px solid #1685b8 !important;
    border-radius: 12px !important;
    background: #061827 !important;
}

.header-actions .add-card-link,
.header-actions .admin-login-button,
.header-actions .cart-button {
    height: 48px !important;
    padding-left: 17px !important;
    padding-right: 17px !important;
}

/* CATEGORY BAR: individual premium tabs, not one long joined box */
.category-nav-inner {
    min-height: 84px !important;
    padding-top: 11px !important;
    padding-bottom: 11px !important;
}

.collection-tabs {
    display: flex !important;
    gap: 8px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
}

.collection-tabs .category-button {
    min-width: 188px !important;
    height: 58px !important;
    min-height: 58px !important;
    padding: 0 16px !important;

    border: 1px solid #154a69 !important;
    border-radius: 13px !important;
    background:
        linear-gradient(180deg, #071c2c 0%, #051623 100%) !important;

    color: #a7c0d1 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
}

.collection-tabs .category-button:first-child,
.collection-tabs .category-button:last-child {
    border-radius: 13px !important;
}

.collection-tabs .category-button:hover {
    border-color: #2882ad !important;
    background:
        linear-gradient(180deg, #0b2940 0%, #071d2d 100%) !important;
}

.collection-tabs .category-button.active {
    border: 1px solid #49d0ff !important;
    border-radius: 13px !important;
    background:
        linear-gradient(180deg, #164c6d 0%, #0b2c43 100%) !important;
    color: #ffffff !important;

    box-shadow:
        0 0 0 1px rgba(73,208,255,.18),
        0 0 18px rgba(46,190,247,.28),
        inset 0 1px 0 rgba(255,255,255,.06) !important;
}

.category-icon {
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 34px !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;

    font-size: 21px !important;
}

.category-button.active .category-icon {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.category-label {
    font-size: 13px !important;
    font-weight: 850 !important;
}

.category-chevron {
    font-size: 20px !important;
    color: #b9dfef !important;
}

/* quiet admin actions on right */
.admin-nav-actions .category-button {
    height: 42px !important;
    min-height: 42px !important;
    border-radius: 10px !important;
    background: #071a29 !important;
}

/* FILTERS */
.app {
    padding-top: 18px !important;
}

@media (min-width: 701px) {
    .filters-panel {
        grid-template-columns:
            150px
            160px
            205px
            150px
            150px
            120px
            minmax(210px, 1fr) !important;

        gap: 10px !important;
        margin-bottom: 10px !important;
    }

    .filter-section-title,
    .clear-filters {
        height: 48px !important;
    }

    .filter-sort {
        width: 210px !important;
        max-width: 210px !important;
    }

    #sortSelect {
        width: 210px !important;
        height: 48px !important;
    }
}

/* FEATURED HEADING */
.catalog-heading {
    min-height: 44px !important;
    margin: 0 0 11px !important;

    display: flex !important;
    align-items: center !important;
    gap: 14px !important;

    border-bottom: 0 !important;
}

.catalog-title {
    display: block !important;
    margin: 0 !important;
    padding: 0 0 9px !important;

    color: #f2f7fb !important;
    font-size: 22px !important;
    line-height: 1 !important;
    font-weight: 950 !important;
}

.catalog-title span {
    color: #2fc3fb !important;
}

.catalog-title::after {
    width: 48px !important;
    height: 3px !important;
    background: #36c6ff !important;
}

.catalog-line {
    display: block !important;
    width: 66px !important;
    background: #1d516f !important;
}

/* CARDS: compact enough to resemble the approved mockup */
@media (min-width: 701px) {
    .card-list {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        grid-auto-rows: max-content !important;
        align-items: start !important;
        gap: 14px !important;
    }

    .card-row {
        height: auto !important;
        min-height: 0 !important;
        align-self: start !important;
        padding: 11px !important;

        border: 1px solid #17506d !important;
        border-radius: 10px !important;
        background:
            linear-gradient(180deg, #081b2a 0%, #061725 100%) !important;
    }

    .card-image-container {
        height: 258px !important;
        min-height: 258px !important;
        margin-bottom: 10px !important;
        padding: 5px !important;

        border: 1px solid #173f57 !important;
        border-radius: 7px !important;
        background: #03101a !important;
    }

    .card-info {
        padding: 0 3px !important;
    }

    .card-kicker {
        min-height: 15px !important;
        font-size: 9px !important;
    }

    .card-title {
        min-height: 18px !important;
        font-size: 13px !important;
        margin-bottom: 1px !important;
    }

    .card-subtitle,
    .card-extra-line {
        min-height: 14px !important;
        font-size: 9px !important;
    }

    .card-chip-row {
        min-height: 19px !important;
        margin-top: 5px !important;
    }

    .card-chip {
        padding: 2px 6px !important;
        font-size: 8px !important;
    }

    .card-side {
        margin-top: 10px !important;
        padding-top: 9px !important;
    }

    .card-price {
        font-size: 19px !important;
    }

    .stock-text {
        margin-top: 5px !important;
        font-size: 10px !important;
    }

    .add-button {
        width: 40px !important;
        min-width: 40px !important;
        height: 38px !important;
        min-height: 38px !important;
        border-radius: 8px !important;
    }

    .admin-actions {
        margin-top: 8px !important;
        gap: 7px !important;
    }

    .edit-button,
    .delete-button {
        min-height: 36px !important;
        height: 36px !important;
        font-size: 10px !important;
    }
}

/* TRUST STRIP */
.trust-strip {
    max-width: none !important;
    margin: 18px 0 0 !important;
    padding: 18px 7vw !important;

    border-top: 1px solid #164663 !important;
    border-bottom: 0 !important;

    background: rgba(3, 13, 22, .74) !important;
}

/* MOBILE keeps the working two-column behavior */
@media (max-width: 700px) {
    .catalog-heading {
        min-height: 38px !important;
    }

    .catalog-title {
        font-size: 17px !important;
    }

    .collection-tabs .category-button {
        min-width: 125px !important;
    }
}


/* ============================================================
   FROZENHITS v3.4 — NEON / COLOR POLISH
   Closer to the approved visual reference.
   ============================================================ */

:root {
    --fh-electric: #38c9ff;
    --fh-electric-2: #68ddff;
    --fh-deep: #03101b;
    --fh-panel-glow: rgba(56, 201, 255, .14);
}

/* Remove the old Featured heading and its reserved space entirely */
.catalog-heading,
.catalog-title,
.catalog-line {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

/* More dimensional page background, like the mockup */
/* =========================================
   FROZENHITS - AMBIENT BLUE GLOW
========================================= */

body {
    min-height: 100vh;

    background:
        radial-gradient(
            900px 520px at 12% -40px,
            rgba(0, 183, 255, 0.34) 0%,
            rgba(0, 142, 220, 0.16) 35%,
            transparent 70%
        ),

        radial-gradient(
            850px 520px at 88% 20px,
            rgba(0, 132, 255, 0.27) 0%,
            rgba(0, 102, 210, 0.12) 38%,
            transparent 72%
        ),

        radial-gradient(
            750px 500px at 48% 500px,
            rgba(0, 174, 255, 0.08),
            transparent 70%
        ),

        linear-gradient(
            180deg,
            #020c15 0%,
            #041522 45%,
            #03101a 100%
        ) !important;

    background-attachment: fixed !important;
}


/* HEADER MUSÍ BÝT TROCHU PRŮHLEDNÝ,
   ABY BYLO SVĚTLO VIDĚT */

.site-header {
    background:
        linear-gradient(
            180deg,
            rgba(2, 12, 21, 0.82),
            rgba(3, 15, 25, 0.88)
        ) !important;

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

    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.22) !important;
}


/* I LIŠTA HOCKEY / FOOTBALL / POKEMON */

.category-nav {
    background:
        linear-gradient(
            180deg,
            rgba(4, 18, 30, 0.84),
            rgba(3, 14, 24, 0.90)
        ) !important;

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.site-logo {
    text-shadow:
        0 2px 0 rgba(255,255,255,.03),
        0 0 24px rgba(56, 201, 255, .11) !important;
}

.logo-accent {
    background: linear-gradient(180deg, #72dcff, #18aeea);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
}

.brand-card-count {
    background:
        linear-gradient(135deg, rgba(7,37,57,.98), rgba(4,22,35,.98)) !important;
    border-color: #177eac !important;
    box-shadow:
        0 0 18px rgba(56,201,255,.08),
        inset 0 1px 0 rgba(255,255,255,.035) !important;
}

#globalSearch {
    background:
        linear-gradient(180deg, rgba(7,27,42,.98), rgba(4,20,32,.98)) !important;
    border-color: #167eac !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 0 18px rgba(56,201,255,.035) !important;
}

#globalSearch:focus {
    border-color: #45d0ff !important;
    box-shadow:
        0 0 0 3px rgba(56,201,255,.09),
        0 0 24px rgba(56,201,255,.08) !important;
}

/* Header admin buttons get the more colorful mockup feel */
.header-actions .add-card-link,
.header-actions .admin-login-button {
    background:
        linear-gradient(180deg, #0d2c43, #081f31) !important;
    border: 1px solid #236486 !important;
    color: #74ddff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03) !important;
}

.header-actions .add-card-link:hover,
.header-actions .admin-login-button:hover {
    border-color: #48cfff !important;
    box-shadow: 0 0 18px rgba(56,201,255,.10) !important;
}

.cart-button {
    background:
        linear-gradient(180deg, #69d6ff 0%, #37b5ec 100%) !important;
    border-color: #6ad8ff !important;
    color: #031522 !important;
    box-shadow:
        0 7px 22px rgba(38, 181, 237, .20),
        inset 0 1px 0 rgba(255,255,255,.32) !important;
}

/* CATEGORY TABS — much closer to the generated visual */
.category-nav {
    box-shadow:
        inset 0 -1px 0 rgba(48,177,229,.16),
        0 8px 24px rgba(0,0,0,.11) !important;
}

.collection-tabs {
    gap: 7px !important;
}

.collection-tabs .category-button {
    min-width: 190px !important;
    height: 58px !important;
    padding: 0 18px !important;

    border: 1px solid #164e6d !important;
    border-radius: 13px !important;

    background:
        linear-gradient(180deg, rgba(8,32,49,.98), rgba(4,20,32,.98)) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 4px 14px rgba(0,0,0,.09) !important;
}

.collection-tabs .category-button:first-child,
.collection-tabs .category-button:last-child {
    border-radius: 13px !important;
}

.collection-tabs .category-button:hover {
    background:
        linear-gradient(180deg, rgba(12,49,71,.99), rgba(6,29,44,.99)) !important;
    border-color: #2689b4 !important;
    box-shadow: 0 0 16px rgba(56,201,255,.075) !important;
}

.collection-tabs .category-button.active {
    background:
        linear-gradient(180deg, #175a80 0%, #0b334d 100%) !important;
    border-color: #50d5ff !important;

    box-shadow:
        0 0 0 1px rgba(80,213,255,.17),
        0 0 22px rgba(46,191,247,.38),
        inset 0 1px 0 rgba(255,255,255,.10) !important;
}

.collection-tabs .category-button.active .category-label {
    text-shadow: 0 0 10px rgba(255,255,255,.16);
}

.category-icon {
    background:
        linear-gradient(180deg, rgba(13,48,69,.88), rgba(6,29,44,.92)) !important;
    border: 1px solid #226184 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
}

.category-button.active .category-icon {
    border-color: #57d7ff !important;
    background:
        linear-gradient(180deg, rgba(18,71,98,.95), rgba(9,43,63,.95)) !important;
    box-shadow: 0 0 12px rgba(56,201,255,.20) !important;
}

/* right-side admin nav */
.admin-nav-actions .category-button {
    background:
        linear-gradient(180deg, #081d2d, #061724) !important;
    border-color: #1b506d !important;
}

.admin-nav-actions .category-button:hover {
    border-color: #3394bd !important;
    box-shadow: 0 0 15px rgba(56,201,255,.06) !important;
}

.admin-nav-count {
    background: #0b2a3d !important;
    border-color: #1d5b78 !important;
}

/* FILTER BAR */
.app {
    padding-top: 18px !important;
}

@media (min-width: 701px) {
    .filters-panel {
        margin-bottom: 14px !important;
    }

    .filter-section-title,
    .clear-filters,
    #sortSelect {
        background:
            linear-gradient(180deg, #081d2d 0%, #061725 100%) !important;
        border-color: #1d5878 !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.025),
            0 4px 13px rgba(0,0,0,.08) !important;
    }

    .filter-section-title:hover,
    .clear-filters:hover,
    #sortSelect:hover {
        border-color: #36a9d8 !important;
        box-shadow:
            0 0 15px rgba(56,201,255,.065),
            inset 0 1px 0 rgba(255,255,255,.03) !important;
    }

    /* Real outline SVG-style icons instead of text glyphs */
    .filter-section-title::before {
        content: "" !important;
        width: 17px !important;
        height: 17px !important;
        background-color: #69d9ff !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: contain !important;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        -webkit-mask-size: contain;
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
    }

    .filter-year .filter-section-title::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2216%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M16%203v4M8%203v4M3%2010h18%22%2F%3E%3Cpath%20d%3D%22M8%2014h.01M12%2014h.01M16%2014h.01M8%2018h.01M12%2018h.01%22%2F%3E%3C%2Fsvg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2216%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M16%203v4M8%203v4M3%2010h18%22%2F%3E%3Cpath%20d%3D%22M8%2014h.01M12%2014h.01M16%2014h.01M8%2018h.01M12%2018h.01%22%2F%3E%3C%2Fsvg%3E");
    }

    .filter-team .filter-section-title::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203%2020%206v5c0%205.2-3.4%208.6-8%2010-4.6-1.4-8-4.8-8-10V6l8-3Z%22%2F%3E%3Cpath%20d%3D%22m9%2012%202%202%204-4%22%2F%3E%3C%2Fsvg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203%2020%206v5c0%205.2-3.4%208.6-8%2010-4.6-1.4-8-4.8-8-10V6l8-3Z%22%2F%3E%3Cpath%20d%3D%22m9%2012%202%202%204-4%22%2F%3E%3C%2Fsvg%3E");
    }

    .filter-nationality .filter-section-title::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2021V4%22%2F%3E%3Cpath%20d%3D%22M5%205c5-3%208%203%2014%200v10c-6%203-9-3-14%200%22%2F%3E%3C%2Fsvg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2021V4%22%2F%3E%3Cpath%20d%3D%22M5%205c5-3%208%203%2014%200v10c-6%203-9-3-14%200%22%2F%3E%3C%2Fsvg%3E");
    }

    .filter-set .filter-section-title::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m12%203%209%205-9%205-9-5%209-5Z%22%2F%3E%3Cpath%20d%3D%22m3%2012%209%205%209-5%22%2F%3E%3Cpath%20d%3D%22m3%2016%209%205%209-5%22%2F%3E%3C%2Fsvg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m12%203%209%205-9%205-9-5%209-5Z%22%2F%3E%3Cpath%20d%3D%22m3%2012%209%205%209-5%22%2F%3E%3Cpath%20d%3D%22m3%2016%209%205%209-5%22%2F%3E%3C%2Fsvg%3E");
    }

    .filter-type .filter-section-title::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2013%2013%2020%204%2011V4h7l9%209Z%22%2F%3E%3Cpath%20d%3D%22M8.5%208.5h.01%22%2F%3E%3C%2Fsvg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2013%2013%2020%204%2011V4h7l9%209Z%22%2F%3E%3Cpath%20d%3D%22M8.5%208.5h.01%22%2F%3E%3C%2Fsvg%3E");
    }

    .clear-filters::before {
        content: "" !important;
        width: 17px !important;
        height: 17px !important;
        margin-right: 9px !important;
        background-color: #69d9ff !important;
        -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M6%206l12%2012M18%206%206%2018%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
        mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M6%206l12%2012M18%206%206%2018%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
    }

    #sortSelect {
        background-image:
            url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%204v16M4%207l3-3%203%203M17%2020V4M14%2017l3%203%203-3%22%2F%3E%3C%2Fsvg%3E"),
            linear-gradient(180deg, #081d2d 0%, #061725 100%) !important;
        background-repeat: no-repeat, no-repeat !important;
        background-position: 12px center, center !important;
        background-size: 17px 17px, cover !important;
        padding-left: 38px !important;
    }
}

/* CARD GRID — richer border, blue price glow, but still clean */
.card-list {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

@media (min-width: 701px) {
    .card-row {
        border-color: #16506d !important;
        background:
            linear-gradient(180deg, rgba(8,29,44,.99) 0%, rgba(4,20,32,.99) 100%) !important;

        box-shadow:
            0 10px 26px rgba(0,0,0,.13),
            inset 0 1px 0 rgba(255,255,255,.018) !important;
    }

    .card-row:hover {
        transform: translateY(-3px) !important;
        border-color: #32a7d5 !important;
        box-shadow:
            0 16px 34px rgba(0,0,0,.22),
            0 0 20px rgba(56,201,255,.075) !important;
    }

    .card-image-container {
        border-color: #17445d !important;
        background:
            radial-gradient(circle at 50% 20%, rgba(17,57,80,.18), transparent 50%),
            #020d16 !important;
    }

    .card-price {
        color: #38c9ff !important;
        text-shadow: 0 0 15px rgba(56,201,255,.13);
    }

    .card-chip {
        background:
            linear-gradient(180deg, #0b3147, #082536) !important;
        border-color: #1d6583 !important;
    }

    .card-chip-location {
        background:
            linear-gradient(180deg, #3b3107, #211d08) !important;
        border-color: #806d18 !important;
        color: #ffe04f !important;
    }

    .add-button {
        background:
            linear-gradient(180deg, #082437, #061927) !important;
        border-color: #38bff0 !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.02) !important;
    }

    .add-button:hover:not(:disabled) {
        background:
            linear-gradient(180deg, #0c3851, #082a40) !important;
        border-color: #5bd8ff !important;
        box-shadow: 0 0 16px rgba(56,201,255,.13) !important;
    }

    .edit-button {
        background:
            linear-gradient(180deg, #0e3148, #09263a) !important;
        border-color: #276a8c !important;
        color: #65dcff !important;
    }

    .delete-button {
        background:
            linear-gradient(180deg, #35131d, #271019) !important;
        border-color: #6c2634 !important;
        color: #ff7187 !important;
    }
}

/* TRUST STRIP: brighter icons/lines like mockup */
.trust-strip {
    border-top-color: #145170 !important;
    background:
        linear-gradient(180deg, rgba(3,16,27,.94), rgba(2,12,21,.96)) !important;
}

.trust-icon {
    color: #9bdfff !important;
    text-shadow: 0 0 14px rgba(56,201,255,.18);
}

.trust-item {
    border-right-color: #1c688b !important;
}

.trust-item strong {
    color: #cae8f7 !important;
}

/* Mobile still keeps the compact two-column layout */
@media (max-width: 700px) {
    .catalog-heading {
        display: none !important;
    }

    .collection-tabs .category-button.active {
        box-shadow:
            0 0 0 1px rgba(80,213,255,.15),
            0 0 16px rgba(46,191,247,.24) !important;
    }
}


/* ============================================================
   FROZENHITS v3.5 — PREMIUM CATEGORY TAB EFFECT
   Closer to the approved mockup: depth, glow, glass, highlights.
   ============================================================ */

.collection-tabs .category-button {
    isolation: isolate !important;
    overflow: hidden !important;

    background:
        linear-gradient(
            180deg,
            rgba(10, 35, 52, .98) 0%,
            rgba(5, 21, 33, .99) 100%
        ) !important;

    border: 1px solid rgba(38, 104, 139, .76) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        inset 0 -1px 0 rgba(0,0,0,.28),
        0 7px 20px rgba(0,0,0,.12) !important;

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

/* subtle glossy light sweep */
.collection-tabs .category-button::before {
    content: "" !important;
    position: absolute !important;
    z-index: -1 !important;
    inset: 0 !important;

    background:
        radial-gradient(
            circle at 20% 0%,
            rgba(105, 221, 255, .12),
            transparent 42%
        ),
        linear-gradient(
            120deg,
            rgba(255,255,255,.035) 0%,
            rgba(255,255,255,0) 38%
        ) !important;

    opacity: .72 !important;
    pointer-events: none !important;
}

/* faint lower glow line */
.collection-tabs .category-button::after {
    content: "" !important;
    position: absolute !important;
    left: 13px !important;
    right: 13px !important;
    bottom: 3px !important;
    height: 1px !important;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(72, 200, 255, .22) 18%,
            rgba(72, 200, 255, .34) 50%,
            rgba(72, 200, 255, .22) 82%,
            transparent 100%
        ) !important;

    opacity: .55 !important;
    pointer-events: none !important;
}

.collection-tabs .category-button:hover {
    transform: translateY(-1px) !important;

    background:
        linear-gradient(
            180deg,
            rgba(14, 48, 69, .99) 0%,
            rgba(7, 27, 42, .99) 100%
        ) !important;

    border-color: rgba(58, 159, 204, .92) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 0 0 1px rgba(56,201,255,.03),
        0 10px 24px rgba(0,0,0,.16),
        0 0 16px rgba(56,201,255,.08) !important;
}

.collection-tabs .category-button.active {
    transform: translateY(-1px) !important;

    background:
        radial-gradient(
            circle at 18% 12%,
            rgba(93, 219, 255, .22),
            transparent 44%
        ),
        linear-gradient(
            180deg,
            #195d82 0%,
            #0e3a56 56%,
            #092b42 100%
        ) !important;

    border-color: #62ddff !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.13),
        inset 0 0 18px rgba(54, 189, 244, .07),
        0 0 0 1px rgba(98,221,255,.16),
        0 0 15px rgba(47, 190, 247, .36),
        0 0 30px rgba(47, 190, 247, .18),
        0 10px 25px rgba(0,0,0,.18) !important;
}

/* stronger neon rim inside selected tab */
.collection-tabs .category-button.active::before {
    opacity: 1 !important;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.08) 0%,
            rgba(255,255,255,0) 30%
        ),
        radial-gradient(
            circle at 25% 0%,
            rgba(116, 229, 255, .25),
            transparent 48%
        ) !important;
}

.collection-tabs .category-button.active::after {
    left: 10px !important;
    right: 10px !important;
    bottom: 2px !important;
    height: 2px !important;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            #2cb9f0 18%,
            #7be6ff 50%,
            #2cb9f0 82%,
            transparent 100%
        ) !important;

    opacity: .95 !important;

    box-shadow:
        0 0 7px rgba(76, 208, 255, .75) !important;
}

/* icon no longer looks like a plain square */
.category-icon {
    position: relative !important;

    background:
        radial-gradient(
            circle at 35% 25%,
            rgba(91, 207, 255, .12),
            transparent 52%
        ),
        linear-gradient(
            180deg,
            rgba(10, 40, 58, .82),
            rgba(5, 27, 42, .88)
        ) !important;

    border: 1px solid rgba(39, 98, 128, .78) !important;
    border-radius: 9px !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.03),
        inset 0 0 10px rgba(56,201,255,.025) !important;
}

.category-button.active .category-icon {
    background:
        radial-gradient(
            circle at 35% 20%,
            rgba(122, 232, 255, .18),
            transparent 50%
        ),
        linear-gradient(
            180deg,
            rgba(14, 55, 76, .96),
            rgba(8, 35, 52, .96)
        ) !important;

    border-color: rgba(91, 215, 255, .82) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 0 12px rgba(56,201,255,.16) !important;
}

.collection-tabs .category-button.active .category-label {
    color: #ffffff !important;
    text-shadow:
        0 0 8px rgba(255,255,255,.10),
        0 0 10px rgba(80, 207, 255, .12) !important;
}

.collection-tabs .category-button.active .category-chevron {
    color: #e9fbff !important;
    text-shadow: 0 0 9px rgba(82, 212, 255, .35);
}

/* mobile: keep effect but reduce outer glow */
@media (max-width: 700px) {
    .collection-tabs .category-button.active {
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.10),
            0 0 0 1px rgba(98,221,255,.11),
            0 0 12px rgba(47,190,247,.23),
            0 7px 18px rgba(0,0,0,.14) !important;
    }
}



/* ============================================================
   FROZENHITS v3.6 — FILTER/SORT + CATEGORY TAB POLISH
   ============================================================ */

@media (min-width: 701px) {
    .filters-panel {
        grid-template-columns:
            150px
            132px
            142px
            170px
            132px
            132px
            minmax(180px, 1fr) !important;
        gap: 10px !important;
        align-items: end !important;
    }

    .clear-filters { order: 1 !important; }
    .filter-year { order: 2 !important; }
    .filter-team { order: 3 !important; }
    .filter-nationality { order: 4 !important; }
    .filter-set { order: 5 !important; }
    .filter-type { order: 6 !important; }
    .filter-sort { order: 7 !important; }

    .filter-section-title,
    .clear-filters,
    #sortSelect {
        height: 40px !important;
        border-radius: 12px !important;
    }

    .filter-section-title {
        padding: 0 28px 0 34px !important;
        font-size: 11px !important;
        letter-spacing: .45px !important;
    }

    .filter-section-title::before {
        left: 12px !important;
        width: 15px !important;
        height: 15px !important;
    }

    .filter-section-title::after {
        right: 10px !important;
        font-size: 11px !important;
    }

    .clear-filters {
        padding: 0 13px !important;
        font-size: 11px !important;
        letter-spacing: .45px !important;
        color: #d8edf9 !important;
        border-color: #2c87b0 !important;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.04),
            0 0 18px rgba(44, 185, 240, .05) !important;
    }

    .clear-filters::before {
        width: 15px !important;
        height: 15px !important;
        margin-right: 8px !important;
    }

    .filter-sort {
        width: 180px !important;
        max-width: 180px !important;
        gap: 6px !important;
    }

    .filter-sort .sort-label {
        margin-left: 2px !important;
        font-size: 11px !important;
        color: #8db4ca !important;
        letter-spacing: .45px !important;
    }

    #sortSelect {
        width: 180px !important;
        padding: 0 34px 0 42px !important;
        font-size: 11px !important;
        color: #f4fbff !important;
        color-scheme: dark !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        background-color: #081c2c !important;
        background-image:
            url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%237fe3ff'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M7%204v16M4%207l3-3%203%203M17%2020V4M14%2017l3%203%203-3'/%3E%3C/svg%3E"),
            linear-gradient(180deg, #0b2437 0%, #071a29 100%) !important;
        background-repeat: no-repeat, no-repeat !important;
        background-size: 15px 15px, auto !important;
        background-position: left 12px center, center !important;
        border: 1px solid #2f8ab2 !important;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.04),
            0 4px 14px rgba(0,0,0,.10) !important;
    }

    #sortSelect:focus,
    #sortSelect:hover {
        border-color: #59d8ff !important;
        box-shadow:
            0 0 16px rgba(56,201,255,.08),
            inset 0 1px 0 rgba(255,255,255,.05) !important;
    }

    #sortSelect option,
    #sortSelect optgroup {
        background: #081c2c !important;
        color: #eaf7ff !important;
    }

    .filter-section.open .filter-search,
    .filter-section.open .checkbox-list {
        min-width: 220px !important;
    }

    .filter-section.open .filter-search {
        top: 48px !important;
    }

    .filter-section.open .checkbox-list {
        top: 84px !important;
    }

    .filter-set.open .checkbox-list {
        top: 88px !important;
    }

    .filter-type.open .checkbox-list {
        top: 48px !important;
    }
}

.category-nav-inner,
.collection-tabs {
    overflow: visible !important;
}

.collection-tabs {
    padding-right: 8px !important;
    gap: 10px !important;
}

.collection-tabs .category-button {
    flex: 0 0 auto !important;
}

.collection-tabs .category-button:last-child {
    margin-right: 4px !important;
}

.collection-tabs .category-button .category-chevron {
    padding-left: 3px !important;
}

@media (max-width: 700px) {
    .filters-panel.mobile-open .filter-section-title,
    .filters-panel.mobile-open .clear-filters,
    .filters-panel.mobile-open #sortSelect {
        min-height: 42px !important;
    }

    .clear-filters {
        font-size: 12px !important;
    }

    #sortSelect option {
        background: #081c2c !important;
        color: #eaf7ff !important;
    }
}




/* ============================================================
   FROZENHITS v3.7 — FILTER LAYOUT FIX
   - Sort stays fixed on the far right
   - Clear Filter sits above YEAR
   - smaller filter controls
   - compact Sort by select
   - repaired Pokémon end border
   ============================================================ */

@media (min-width: 701px) {

    .filters-panel {
        display: grid !important;

        grid-template-columns:
            126px
            136px
            164px
            126px
            126px
            minmax(20px, 1fr)
            158px !important;

        grid-template-rows:
            22px
            40px !important;

        column-gap: 10px !important;
        row-gap: 5px !important;

        align-items: end !important;

        min-height: 67px !important;
        margin-bottom: 12px !important;
    }

    /* CLEAR FILTER is a small action above YEAR */
    .clear-filters {
        order: initial !important;
        grid-column: 1 !important;
        grid-row: 1 !important;

        width: auto !important;
        height: 22px !important;
        min-height: 22px !important;

        padding: 0 5px !important;

        justify-self: start !important;
        align-self: end !important;

        background: transparent !important;
        border: 0 !important;
        border-radius: 6px !important;

        color: #67d9ff !important;

        font-size: 10px !important;
        line-height: 1 !important;
        font-weight: 850 !important;
        letter-spacing: .35px !important;

        box-shadow: none !important;
    }

    .clear-filters::before {
        width: 12px !important;
        height: 12px !important;
        margin-right: 6px !important;
        background-color: #67d9ff !important;
    }

    .clear-filters:hover {
        background: rgba(56,201,255,.07) !important;
        color: #bceeff !important;
        box-shadow: none !important;
    }

    /* Fixed desktop positions */
    .filter-year {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }

    .filter-team {
        grid-column: 2 !important;
        grid-row: 2 !important;
    }

    .filter-nationality {
        grid-column: 3 !important;
        grid-row: 2 !important;
    }

    .filter-set {
        grid-column: 4 !important;
        grid-row: 2 !important;
    }

    .filter-type {
        grid-column: 5 !important;
        grid-row: 2 !important;
    }

    /* Sort never moves when TEAM/NATIONALITY disappear */
    .filter-sort {
        order: initial !important;

        grid-column: 7 !important;
        grid-row: 1 / span 2 !important;

        width: 158px !important;
        max-width: 158px !important;

        justify-self: end !important;
        align-self: end !important;

        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: 17px 40px !important;

        gap: 5px !important;
    }

    .filter-sort .sort-label {
        margin: 0 0 0 2px !important;

        font-size: 10px !important;
        line-height: 17px !important;
        letter-spacing: .4px !important;
    }

    #sortSelect {
        width: 158px !important;
        height: 40px !important;

        padding-left: 35px !important;
        padding-right: 24px !important;

        border-radius: 10px !important;

        font-size: 10px !important;
    }

    /* Smaller main filter buttons */
    .filter-section-title {
        height: 40px !important;
        min-height: 40px !important;

        padding-left: 32px !important;
        padding-right: 25px !important;

        border-radius: 10px !important;

        font-size: 10px !important;
        letter-spacing: .4px !important;
    }

    .filter-section-title::before {
        left: 11px !important;

        width: 14px !important;
        height: 14px !important;
    }

    .filter-section-title::after {
        right: 9px !important;
        font-size: 10px !important;
    }

    /* Dropdown placement follows the shorter controls */
    .filter-section.open .filter-search {
        top: 47px !important;
    }

    .filter-section.open .checkbox-list {
        top: 83px !important;
    }

    .filter-set.open .checkbox-list {
        top: 87px !important;
    }

    .filter-type.open .checkbox-list {
        top: 47px !important;
    }

    /*
       Pokémon intentionally has no TEAM/NATIONALITY.
       Re-pack SET and TYPE to the left, while SORT remains fixed right.
    */
    body.pokemon-filter-layout .filter-set {
        grid-column: 2 !important;
    }

    body.pokemon-filter-layout .filter-type {
        grid-column: 3 !important;
    }
}

/* Repair the end cap on the last category button (Pokémon) */
.collection-tabs {
    overflow: visible !important;
    padding-right: 3px !important;
}

.collection-tabs .category-button:last-child {
    border-right:
        1px solid rgba(38, 104, 139, .76) !important;

    border-radius: 13px !important;

    margin-right: 0 !important;
}

.collection-tabs .category-button:last-child.active {
    border-right:
        1px solid #62ddff !important;
}

.collection-tabs .category-button:last-child::before {
    border-radius: inherit !important;
}

/* Native select dropdown should inherit dark scheme where supported */
#sortSelect,
#sortSelect option,
#sortSelect optgroup {
    color-scheme: dark !important;
}

#sortSelect option,
#sortSelect optgroup {
    background-color: #081c2c !important;
    color: #eaf7ff !important;
}

/* Mobile keeps existing stacked/collapsible filter behavior */
@media (max-width: 700px) {
    body.pokemon-filter-layout .filter-set,
    body.pokemon-filter-layout .filter-type {
        grid-column: auto !important;
    }
}




/* ============================================================
   FROZENHITS v3.8 — COMPACT SORT DROPDOWN
   ============================================================ */

@media (min-width: 701px) {

    .filters-panel {
        grid-template-columns:
            126px
            136px
            164px
            126px
            126px
            minmax(20px, 1fr)
            142px !important;
    }

    .filter-sort {
        width: 142px !important;
        max-width: 142px !important;
    }

    #sortSelect {
        width: 142px !important;
        padding-left: 32px !important;
        padding-right: 18px !important;
        text-align: left !important;
        text-align-last: left !important;
    }

    #sortSelect option {
        text-align: left !important;
        padding-left: 2px !important;
        padding-right: 2px !important;
    }
}




/* ============================================================
   FROZENHITS v3.9 — CUSTOM COMPACT SORT
   Full control over width, spacing, colors and hover.
   ============================================================ */

.native-sort-select {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

@media (min-width: 701px) {

    .filters-panel {
        grid-template-columns:
            126px
            136px
            164px
            126px
            126px
            minmax(20px, 1fr)
            148px !important;
    }

    .filter-sort {
        width: 148px !important;
        max-width: 148px !important;
        position: relative !important;
    }

    .custom-sort {
        position: relative;
        width: 148px;
    }

    .custom-sort-trigger {
        width: 148px;
        height: 40px;

        padding: 0 9px;

        display: grid;
        grid-template-columns: 16px minmax(0, 1fr) 12px;
        align-items: center;
        gap: 6px;

        background:
            linear-gradient(
                180deg,
                #0b2437 0%,
                #071a29 100%
            );

        color: #f4fbff;

        border: 1px solid #2f8ab2;
        border-radius: 10px;

        font: inherit;
        font-size: 10px;
        font-weight: 800;

        cursor: pointer;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.04),
            0 4px 14px rgba(0,0,0,.10);
    }

    .custom-sort-trigger:hover,
    .custom-sort.open .custom-sort-trigger {
        border-color: #59d8ff;

        box-shadow:
            0 0 15px rgba(56,201,255,.08),
            inset 0 1px 0 rgba(255,255,255,.05);
    }

    .custom-sort-icon {
        color: #7fe3ff;
        font-size: 15px;
        line-height: 1;
    }

    #customSortValue {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        text-align: left;
    }

    .custom-sort-arrow {
        color: #d7f3ff;
        font-size: 12px;
        text-align: right;
        transition: transform .15s ease;
    }

    .custom-sort.open .custom-sort-arrow {
        transform: rotate(180deg);
    }

    .custom-sort-menu {
        position: absolute;
        z-index: 2500;

        top: calc(100% + 4px);
        right: 0;

        width: 148px;

        display: none;

        padding: 4px;

        background:
            linear-gradient(
                180deg,
                #0a2132 0%,
                #071a28 100%
            );

        border: 1px solid #286f91;
        border-radius: 9px;

        box-shadow:
            0 12px 26px rgba(0,0,0,.34),
            0 0 16px rgba(56,201,255,.045);

        overflow: hidden;
    }

    .custom-sort.open .custom-sort-menu {
        display: block;
    }

    .custom-sort-option {
        width: 100%;
        min-height: 27px;

        padding: 5px 7px;

        display: flex;
        align-items: center;

        background: transparent;
        color: #e8f6ff;

        border: 0;
        border-radius: 5px;

        font: inherit;
        font-size: 10px;
        font-weight: 700;
        line-height: 1.15;

        text-align: left;

        cursor: pointer;
    }

    .custom-sort-option:hover {
        background: #103650;
        color: #ffffff;
    }

    .custom-sort-option.active {
        background:
            linear-gradient(
                90deg,
                #18577c,
                #124766
            );

        color: #ffffff;
    }

    .custom-sort-option + .custom-sort-option {
        margin-top: 1px;
    }
}

@media (max-width: 700px) {

    .custom-sort {
        position: relative;
        width: 100%;
    }

    .custom-sort-trigger {
        width: 100%;
        min-height: 44px;

        padding: 0 12px;

        display: grid;
        grid-template-columns: 18px 1fr 14px;
        gap: 7px;
        align-items: center;

        background: #081c2c;
        color: #eef9ff;

        border: 1px solid #2b7597;
        border-radius: 10px;

        font: inherit;
    }

    .custom-sort-menu {
        position: absolute;
        z-index: 2500;

        top: calc(100% + 4px);
        left: 0;
        right: 0;

        display: none;

        padding: 4px;

        background: #081c2c;

        border: 1px solid #286f91;
        border-radius: 9px;
    }

    .custom-sort.open .custom-sort-menu {
        display: block;
    }

    .custom-sort-option {
        width: 100%;
        min-height: 34px;
        padding: 7px 9px;

        background: transparent;
        color: #e8f6ff;

        border: 0;
        border-radius: 5px;

        text-align: left;
    }

    .custom-sort-option.active,
    .custom-sort-option:hover {
        background: #123c58;
    }
}




/* ============================================================
   FROZENHITS v3.10 — CARD POLISH + TIGHTER CUSTOM SORT
   ============================================================ */

/* ---------- SORT: remove unnecessary empty space on the right ---------- */

@media (min-width: 701px) {

    .filters-panel {
        grid-template-columns:
            126px
            136px
            164px
            126px
            126px
            minmax(20px, 1fr)
            132px !important;
    }

    .filter-sort {
        width: 132px !important;
        max-width: 132px !important;
    }

    .custom-sort {
        width: 132px !important;
    }

    .custom-sort-trigger {
        width: 132px !important;
        padding-left: 7px !important;
        padding-right: 7px !important;

        grid-template-columns:
            15px
            minmax(0, 1fr)
            10px !important;

        gap: 5px !important;
    }

    /*
       The menu is sized by its text instead of inheriting a large
       select width. This removes the large blank area on the right.
    */
    .custom-sort-menu {
        width: max-content !important;
        min-width: 122px !important;
        max-width: 138px !important;

        right: 0 !important;

        padding: 3px !important;
    }

    .custom-sort-option {
        min-height: 25px !important;

        padding:
            4px
            5px !important;

        font-size: 10px !important;
        line-height: 1.1 !important;

        white-space: nowrap !important;
    }
}


/* ---------- CARD GRID ---------- */

@media (min-width: 701px) {

    .card-list {
        align-items: start !important;
        grid-auto-rows: max-content !important;
        gap: 13px !important;
    }

    .card-row {
        height: auto !important;
        min-height: 0 !important;
        align-self: start !important;

        padding: 9px !important;

        border-radius: 10px !important;

        background:
            linear-gradient(
                180deg,
                rgba(8, 29, 44, .99) 0%,
                rgba(4, 20, 32, .99) 100%
            ) !important;

        box-shadow:
            0 8px 22px rgba(0,0,0,.12),
            inset 0 1px 0 rgba(255,255,255,.018) !important;
    }

    .card-row:hover {
        transform: translateY(-2px) !important;
    }

    /* Smaller image frame = noticeably smaller overall card */
    .card-image-container {
        height: 246px !important;
        min-height: 246px !important;

        margin-bottom: 9px !important;
        padding: 4px !important;

        border-radius: 7px !important;
    }

    .card-info {
        padding:
            0
            3px !important;
    }

    /* Year + set */
    .card-kicker {
        min-height: 14px !important;
        margin-bottom: 2px !important;

        color: #a8c1d1 !important;

        font-size: 9px !important;
        line-height: 1.2 !important;
        font-weight: 800 !important;
        letter-spacing: .12px !important;
    }

    /* Player */
    .card-title {
        min-height: 18px !important;
        margin:
            0
            0
            4px !important;

        color: #ffffff !important;

        font-size: 14px !important;
        line-height: 1.2 !important;
        font-weight: 900 !important;
    }

    /* New compact information lines */
    .card-detail-line {
        min-height: 14px;

        overflow: hidden;

        color: #8eafc2;

        font-size: 9.5px;
        line-height: 1.25;

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

    .card-detail-team {
        color: #a8c4d4;
    }

    .card-detail-variant {
        margin-top: 1px;
        color: #7599af;
    }

    /* Old lines are no longer used by v3.10 */
    .card-subtitle,
    .card-extra-line {
        display: none !important;
    }

    .card-chip-row {
        min-height: 20px !important;
        margin-top: 6px !important;

        gap: 4px !important;
    }

    .card-chip {
        padding:
            2px
            6px !important;

        border-radius: 999px !important;

        font-size: 8px !important;
        line-height: 1.1 !important;
    }

    /* IMPORTANT: no auto push to the bottom anymore */
    .card-side {
        margin-top: 10px !important;
        padding:
            9px
            3px
            0 !important;

        border-top:
            1px solid
            rgba(77,138,176,.14) !important;
    }

    .card-purchase-row {
        gap: 7px !important;
    }

    .card-price {
        font-size: 20px !important;
        line-height: 1 !important;
    }

    .add-button {
        width: 46px !important;
        min-width: 46px !important;

        height: 36px !important;
        min-height: 36px !important;

        padding: 0 !important;

        border-radius: 8px !important;
    }

    /* Larger / clearer stock information */
    .stock-text {
        margin-top: 6px !important;

        color: #a9c8d9 !important;

        font-size: 12px !important;
        line-height: 1.15 !important;
        font-weight: 850 !important;
    }

    /* Admin buttons don't need to add much height */
    .admin-actions {
        margin-top: 8px !important;
        gap: 6px !important;
    }

    .edit-button,
    .delete-button,
    .restore-button,
    .tradera-button {
        min-height: 34px !important;
        height: 34px !important;

        font-size: 10px !important;
        line-height: 1.05 !important;

        border-radius: 8px !important;
    }
}


/* ---------- SMALLER DESKTOP / LAPTOP ---------- */

@media (min-width: 701px) and (max-width: 1320px) {

    .card-image-container {
        height: 226px !important;
        min-height: 226px !important;
    }

    .card-title {
        font-size: 13px !important;
    }
}


/* ---------- MOBILE ---------- */

@media (max-width: 700px) {

    .custom-sort-menu {
        padding: 3px !important;
    }

    .custom-sort-option {
        min-height: 31px !important;
        padding: 6px 7px !important;
    }

    .card-row {
        padding: 7px !important;
    }

    .card-image-container {
        margin-bottom: 7px !important;
    }

    .card-title {
        margin-bottom: 3px !important;
    }

    .card-detail-line {
        min-height: 13px;

        overflow: hidden;

        color: #8eafc2;

        font-size: 8.5px;
        line-height: 1.2;

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

    .card-detail-variant {
        color: #7599af;
    }

    .card-subtitle,
    .card-extra-line {
        display: none !important;
    }

    .stock-text {
        font-size: 10px !important;
        font-weight: 850 !important;
    }
}




/* ============================================================
   FROZENHITS v3.13 — CORRECT HOME CARD HEIGHT + EDIT FIX

   Important:
   The old stylesheet contains:
       .card-info { min-height: 225px; }

   THAT was creating the huge empty area in every homepage card.
   We remove that forced height instead of shrinking the fonts.
   ============================================================ */


/* ---------- HOMEPAGE CARDS: KEEP CURRENT FONTS ---------- */

@media (min-width: 701px) {

    .card-list {
        align-items: start !important;
        grid-auto-rows: max-content !important;
    }

    .card-row {
        height: auto !important;
        min-height: 0 !important;
        align-self: start !important;
    }

    /* This is the key fix. */
    .card-info {
        min-height: 0 !important;
        height: auto !important;
    }

    /*
       Don't push the price/actions to the bottom of an artificially
       tall flex box. They now follow the card information naturally.
    */
    .card-side {
        margin-top: 10px !important;
    }
}


/* ---------- MODAL EDIT BUTTON: SMALL + TOP RIGHT ---------- */

/*
   There is an older rule later in the stylesheet that makes
   #modalEditButton width:100%. Override it here without changing
   the modal table or the rest of the card detail design.
*/

.detail-modal .modal-details {
    position: relative !important;
}

#modalEditButton {
    position: absolute !important;

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

    width: 82px !important;
    min-width: 82px !important;

    height: 34px !important;
    min-height: 34px !important;

    margin: 0 !important;
    padding: 0 12px !important;

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

    background:
        linear-gradient(
            180deg,
            #12334b,
            #0b273b
        ) !important;

    color: #68ddff !important;

    border: 1px solid #2a698b !important;
    border-radius: 9px !important;

    font-size: 11px !important;
    font-weight: 850 !important;

    z-index: 5 !important;
}

#modalEditButton:hover {
    background:
        linear-gradient(
            180deg,
            #17435f,
            #0e3148
        ) !important;

    border-color: #4bcbfa !important;

    box-shadow:
        0 0 13px rgba(56,201,255,.10) !important;
}

/* Leave enough room for the small Edit button beside the title. */
.detail-modal .modal-details h2 {
    padding-right: 96px !important;
}


/* ---------- MOBILE ---------- */

@media (max-width: 700px) {

    .card-info {
        min-height: 0 !important;
        height: auto !important;
    }

    .card-side {
        margin-top: 7px !important;
    }

    #modalEditButton {
        width: 68px !important;
        min-width: 68px !important;

        height: 31px !important;
        min-height: 31px !important;

        padding: 0 9px !important;

        font-size: 10px !important;
    }

    .detail-modal .modal-details h2 {
        padding-right: 78px !important;
    }
}




/* ============================================================
   FROZENHITS v3.14 — HOME INFO POLISH
   Bigger YEAR/SET + TEAM, homepage hides nationality/type,
   Edit moved away from close button.
   ============================================================ */

@media (min-width: 701px) {

    /* 2021-22 • Upper Deck Series */
    .card-kicker {
        min-height: 15px !important;
        margin-bottom: 3px !important;

        font-size: 11px !important;
        line-height: 1.2 !important;
        font-weight: 850 !important;

        color: #d3e8f4 !important;
    }

    /* Team name: Anaheim Ducks */
    .card-detail-team {
        min-height: 15px !important;

        color: #b8d2e1 !important;

        font-size: 10.5px !important;
        line-height: 1.25 !important;
        font-weight: 700 !important;
    }

    /* Subset only: Young Guns */
    .card-detail-variant {
        min-height: 14px !important;
        margin-top: 1px !important;

        color: #7fa4b9 !important;

        font-size: 9.5px !important;
        line-height: 1.2 !important;
        font-weight: 500 !important;
    }
}


/* Move Edit lower so it no longer visually fights with the X button */
#modalEditButton {
    top: 38px !important;
    right: 0 !important;
}

.detail-modal .modal-details h2 {
    padding-right: 96px !important;
}


/* Mobile */
@media (max-width: 700px) {

    .card-kicker {
        font-size: 9.5px !important;
        font-weight: 850 !important;
    }

    .card-detail-team {
        font-size: 9px !important;
        font-weight: 700 !important;
    }

    .card-detail-variant {
        font-size: 8.5px !important;
    }

    #modalEditButton {
        top: 32px !important;
        right: 0 !important;
    }
}


/* ============================================================
   FROZENHITS v3.17 — HIDE MODAL EDIT WHEN LOGGED OUT
   ============================================================ */

body:not(.admin-mode) #modalEditButton {
    display: none !important;
}

body.admin-mode #modalEditButton {
    display: inline-flex !important;
}




/* ============================================================
   FROZENHITS v3.18 — STOCK LEFT / PRICE RIGHT
   ============================================================ */

.modal-price-row {
    align-items: center !important;
}

#modalStock {
    text-align: left !important;
}

#modalPrice {
    margin-left: auto !important;
    text-align: right !important;
}




/* ============================================================
   FROZENHITS v3.19 — CARD MOCKUP STYLE
   YEAR • SET • SUBSET
   PLAYER
   TEAM
   ============================================================ */

@media (min-width: 701px) {

    .card-list {
        align-items: start !important;
        grid-auto-rows: max-content !important;
        gap: 12px !important;
    }

    .card-row {
        height: auto !important;
        min-height: 0 !important;
        align-self: start !important;

        padding: 10px !important;

        background:
            linear-gradient(
                180deg,
                #081c2b 0%,
                #061725 100%
            ) !important;

        border: 1px solid #176084 !important;
        border-radius: 11px !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.02),
            0 7px 20px rgba(0,0,0,.13) !important;
    }

    .card-row:hover {
        transform: translateY(-2px) !important;

        border-color: #37bdec !important;

        box-shadow:
            0 0 17px rgba(56,201,255,.08),
            0 10px 25px rgba(0,0,0,.18) !important;
    }

    .card-info {
        min-height: 0 !important;
        height: auto !important;
        padding: 0 3px !important;
    }


    /* YEAR • SET • SUBSET */

    .card-kicker {
        min-height: 16px !important;

        margin:
            4px
            0
            4px !important;

        color: #9cddfa !important;

        font-size: 10px !important;
        line-height: 1.2 !important;
        font-weight: 800 !important;

        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }


    /* PLAYER */

    .card-title {
        min-height: 21px !important;

        margin:
            0
            0
            4px !important;

        color: #ffffff !important;

        font-size: 15px !important;
        line-height: 1.2 !important;
        font-weight: 900 !important;

        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }


    /* TEAM */

    .card-detail-team {
        min-height: 17px !important;

        color: #c4dae6 !important;

        font-size: 11px !important;
        line-height: 1.25 !important;
        font-weight: 650 !important;

        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .card-detail-variant,
    .card-subtitle,
    .card-extra-line {
        display: none !important;
    }


    /* CARD NUMBER / LOCATION */

    .card-chip-row {
        min-height: 25px !important;

        margin-top: 7px !important;

        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
    }

    .card-chip {
        padding:
            4px
            8px !important;

        color: #71dcff !important;

        background:
            linear-gradient(
                180deg,
                #0c3349,
                #082638
            ) !important;

        border: 1px solid #217092 !important;
        border-radius: 999px !important;

        font-size: 9px !important;
        line-height: 1 !important;
        font-weight: 900 !important;
    }

    .card-chip-limited {
        color: #ffd467 !important;
    }

    .card-chip-location {
        color: #ffe137 !important;

        background:
            linear-gradient(
                180deg,
                #3c3307,
                #211d07
            ) !important;

        border-color: #887418 !important;
    }


    /* BOTTOM AREA */

    .card-side {
        margin-top: 9px !important;

        padding:
            10px
            0
            0 !important;

        border-top:
            1px solid
            rgba(54,157,201,.30) !important;
    }

    .card-price-stock-row {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
    }

    .card-price {
        color: #38c9ff !important;

        font-size: 22px !important;
        line-height: 1 !important;
        font-weight: 950 !important;

        text-shadow:
            0 0 12px
            rgba(56,201,255,.12) !important;
    }

    .stock-text {
        margin: 0 !important;

        color: #b8cedb !important;

        font-size: 10px !important;
        line-height: 1 !important;
        font-weight: 650 !important;

        white-space: nowrap !important;
    }


    /* CART ROW */

    .card-cart-row {
        margin-top: 10px !important;

        display: grid !important;

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

        gap: 8px !important;
    }

    .card-cart-icon {
        height: 40px !important;

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

        color: #80e3ff !important;

        background:
            linear-gradient(
                180deg,
                #08263a,
                #061a29
            ) !important;

        border: 1px solid #35b9e9 !important;
        border-radius: 9px !important;

        font-size: 14px !important;

        pointer-events: none !important;
    }

    .card-add-wide.add-button {
        width: 100% !important;
        min-width: 0 !important;

        height: 40px !important;
        min-height: 40px !important;

        padding:
            0
            14px !important;

        background:
            linear-gradient(
                180deg,
                #55c9fa,
                #36afe8
            ) !important;

        color: #031522 !important;

        border: 1px solid #62d9ff !important;
        border-radius: 9px !important;

        font-size: 12px !important;
        font-weight: 900 !important;

        box-shadow:
            0 5px 14px
            rgba(56,189,248,.12) !important;
    }

    .card-add-wide.add-button:hover:not(:disabled) {
        background:
            linear-gradient(
                180deg,
                #72d8ff,
                #43bdf2
            ) !important;

        box-shadow:
            0 0 15px
            rgba(56,201,255,.18) !important;
    }

    .card-add-wide.add-button:disabled {
        width: 100% !important;

        color: #6e899a !important;

        background: #0b2638 !important;

        border-color: #284d64 !important;
    }


    /* ADMIN CONTROLS */

    .admin-actions {
        margin-top: 8px !important;
        gap: 6px !important;
    }
}


/* ---------- MOBILE ---------- */

@media (max-width: 700px) {

    .card-info {
        min-height: 0 !important;
        height: auto !important;
    }

    .card-kicker {
        font-size: 9px !important;
        margin-bottom: 3px !important;
    }

    .card-title {
        font-size: 13px !important;
        margin-bottom: 3px !important;
    }

    .card-detail-team {
        font-size: 9.5px !important;
    }

    .card-detail-variant,
    .card-subtitle,
    .card-extra-line {
        display: none !important;
    }

    .card-chip {
        padding: 3px 6px !important;
        font-size: 8.5px !important;
    }

    .card-side {
        margin-top: 7px !important;
    }

    .card-price-stock-row {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 6px !important;
    }

    .stock-text {
        margin: 0 !important;
        font-size: 9px !important;
    }

    .card-cart-row {
        margin-top: 8px !important;

        display: grid !important;
        grid-template-columns: 34px minmax(0, 1fr) !important;
        gap: 6px !important;
    }

    .card-cart-icon {
        height: 36px !important;

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

        background: #071c2b !important;
        border: 1px solid #35b9e9 !important;
        border-radius: 8px !important;

        pointer-events: none !important;
    }

    .card-add-wide.add-button {
        width: 100% !important;
        height: 36px !important;
        min-height: 36px !important;

        color: #031522 !important;
        background: #45bdf1 !important;

        border: 1px solid #62d9ff !important;
        border-radius: 8px !important;

        font-size: 10px !important;
    }
}




/* ============================================================
   FROZENHITS v3.20 — CARD INFO REDESIGN
   YEAR badge + SET
   SUBSET
   PLAYER
   TEAM
   ============================================================ */

@media (min-width: 701px) {

    .card-info {
        min-height: 0 !important;
        height: auto !important;
        padding: 0 3px !important;
    }

    /* YEAR + SET */
    .card-meta-row {
        min-height: 24px;

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

        overflow: hidden;
    }

    .card-year-badge {
        flex: 0 0 auto;

        padding: 4px 7px;

        color: #8be5ff;

        background:
            linear-gradient(
                180deg,
                rgba(18, 63, 87, .96),
                rgba(8, 40, 59, .96)
            );

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

        font-size: 9px;
        line-height: 1;
        font-weight: 900;
        letter-spacing: .15px;
    }

    .card-set-name {
        min-width: 0;

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

        color: #d8ebf6;

        font-size: 10.5px;
        line-height: 1.2;
        font-weight: 850;
    }

    /* SUBSET */
    .card-subset-line {
        min-height: 16px;
        margin-top: 3px;

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

        color: #6fa8c5;

        font-size: 9.5px;
        line-height: 1.2;
        font-weight: 650;
    }

    /* PLAYER */
    .card-title {
        min-height: 22px !important;

        margin:
            7px
            0
            3px !important;

        overflow: hidden !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;

        color: #ffffff !important;

        font-size: 15px !important;
        line-height: 1.2 !important;
        font-weight: 900 !important;
    }

    /* TEAM */
    .card-team-line {
        min-height: 17px;

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

        color: #b9d3e2;

        font-size: 10.5px;
        line-height: 1.25;
        font-weight: 700;
    }

    .card-kicker,
    .card-detail-team,
    .card-detail-variant,
    .card-subtitle,
    .card-extra-line {
        display: none !important;
    }

    /* chips */
    .card-chip-row {
        min-height: 25px !important;
        margin-top: 8px !important;
    }

    /* stock left / price right */
    .card-price-stock-row {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
    }

    .stock-text {
        margin: 0 !important;

        color: #b7cbd8 !important;

        font-size: 10px !important;
        font-weight: 700 !important;

        white-space: nowrap !important;
    }

    .card-price {
        margin-left: auto !important;

        color: #38c9ff !important;

        text-align: right !important;

        font-size: 22px !important;
        font-weight: 950 !important;
    }

    /* one full-width Add to cart button */
    .card-cart-row {
        display: block !important;
        margin-top: 10px !important;
    }

    .card-cart-icon {
        display: none !important;
    }

    .card-add-wide.add-button {
        width: 100% !important;
        min-width: 100% !important;

        height: 42px !important;
        min-height: 42px !important;

        padding: 0 14px !important;

        font-size: 12px !important;
        font-weight: 900 !important;
    }
}


/* MOBILE */
@media (max-width: 700px) {

    .card-info {
        min-height: 0 !important;
        height: auto !important;
    }

    .card-meta-row {
        display: flex;
        align-items: center;
        gap: 5px;
        overflow: hidden;
    }

    .card-year-badge {
        flex: 0 0 auto;

        padding: 3px 5px;

        color: #8be5ff;
        background: #0a3046;

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

        font-size: 8px;
        font-weight: 900;
    }

    .card-set-name {
        min-width: 0;

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

        color: #d8ebf6;

        font-size: 8.5px;
        font-weight: 800;
    }

    .card-subset-line {
        margin-top: 2px;

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

        color: #6fa8c5;

        font-size: 8px;
    }

    .card-title {
        margin-top: 5px !important;
    }

    .card-team-line {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;

        color: #b9d3e2;

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

    .card-kicker,
    .card-detail-team,
    .card-detail-variant,
    .card-subtitle,
    .card-extra-line {
        display: none !important;
    }

    .card-price-stock-row {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    .stock-text {
        margin: 0 !important;
    }

    .card-price {
        margin-left: auto !important;
        text-align: right !important;
    }

    .card-cart-row {
        display: block !important;
    }

    .card-cart-icon {
        display: none !important;
    }

    .card-add-wide.add-button {
        width: 100% !important;
        min-width: 100% !important;
    }
}




/* ============================================================
   FROZENHITS v3.21 — FINAL HOMEPAGE CARD TABLE
   Image
   Player
   Team
   Year / Set / Subset / Card # / Limited
   Stock left / Price right
   Add to cart full width
   ============================================================ */


/* ---------- DESKTOP ---------- */

@media (min-width: 701px) {

    .card-list {
        align-items: start !important;
        grid-auto-rows: max-content !important;
    }


    .card-row {
        height: auto !important;
        min-height: 0 !important;
        align-self: start !important;

        padding: 10px !important;

        background:
            linear-gradient(
                180deg,
                #081c2b 0%,
                #061725 100%
            ) !important;

        border: 1px solid #176084 !important;
        border-radius: 12px !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.025),
            0 8px 24px rgba(0,0,0,.15) !important;
    }


    .card-row:hover {
        transform: translateY(-2px) !important;

        border-color: #38c5f4 !important;

        box-shadow:
            0 0 18px rgba(56,201,255,.09),
            0 12px 28px rgba(0,0,0,.20) !important;
    }


    .card-info-table-layout {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: auto !important;

        padding: 0 3px !important;
    }


    /* PLAYER */

    .card-table-title {
        min-height: 38px !important;
        max-height: 38px !important;

        margin:
            2px
            0
            2px !important;

        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;

        overflow: hidden !important;
        white-space: normal !important;

        color: #ffffff !important;

        font-size: 15px !important;
        line-height: 19px !important;
        font-weight: 900 !important;

        text-overflow: ellipsis !important;
    }


    /* TEAM */

    .card-table-team {
        min-height: 18px !important;

        margin-bottom: 8px !important;

        overflow: hidden !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;

        color: #c7ddeb !important;

        font-size: 11px !important;
        line-height: 18px !important;
        font-weight: 700 !important;
    }


    /*
       Hide previous card-info experiments.
       The new table is now the single source of visible metadata.
    */

    .card-meta-row,
    .card-year-badge,
    .card-set-name,
    .card-subset-line,
    .card-chip-row,
    .card-kicker,
    .card-detail-team,
    .card-detail-variant,
    .card-subtitle,
    .card-extra-line {
        display: none !important;
    }


    /* INFO TABLE */

    .home-card-data-table {
        width: 100% !important;

        overflow: hidden !important;

        background:
            linear-gradient(
                180deg,
                rgba(5, 23, 36, .82),
                rgba(4, 19, 31, .82)
            ) !important;

        border: 1px solid rgba(49, 130, 172, .58) !important;
        border-radius: 9px !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.018) !important;
    }


    .home-card-data-row {
        min-height: 25px !important;

        display: grid !important;
        grid-template-columns:
            minmax(58px, .72fr)
            minmax(0, 1.25fr) !important;

        align-items: center !important;

        border-bottom:
            1px solid
            rgba(49, 130, 172, .22) !important;
    }


    .home-card-data-row:last-child {
        border-bottom: 0 !important;
    }


    .home-card-data-label,
    .home-card-data-value {
        min-width: 0 !important;

        padding:
            5px
            8px !important;

        font-size: 10px !important;
        line-height: 1.2 !important;
    }


    .home-card-data-label {
        height: 100% !important;

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

        color: #91afc2 !important;

        font-weight: 750 !important;

        border-right:
            1px solid
            rgba(49, 130, 172, .18) !important;
    }


    .home-card-data-value {
        overflow: hidden !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;

        color: #edf8ff !important;

        font-weight: 850 !important;
    }


    .home-card-limited-value {
        color: #ffd84e !important;
    }


    /* PURCHASE SECTION */

    .card-side-table-layout {
        width: 100% !important;

        margin-top: 11px !important;

        padding:
            10px
            3px
            0 !important;

        border-top:
            1px solid
            rgba(50, 145, 190, .30) !important;
    }


    .card-price-stock-row {
        display: flex !important;
        align-items: flex-end !important;
        justify-content: space-between !important;

        gap: 10px !important;

        margin-bottom: 10px !important;
    }


    .stock-text {
        margin: 0 !important;

        color: #d5e7f1 !important;

        font-size: 11px !important;
        line-height: 1.1 !important;
        font-weight: 750 !important;

        white-space: nowrap !important;
    }


    .card-price {
        margin-left: auto !important;

        color: #3fc7ff !important;

        font-size: 24px !important;
        line-height: 1 !important;
        font-weight: 950 !important;

        text-align: right !important;

        text-shadow:
            0 0 13px
            rgba(56,201,255,.14) !important;
    }


    .card-cart-row {
        display: block !important;

        margin-top: 0 !important;
    }


    .card-cart-icon {
        display: none !important;
    }


    .card-add-wide.add-button {
        width: 100% !important;
        min-width: 100% !important;

        height: 42px !important;
        min-height: 42px !important;

        padding:
            0
            14px !important;

        background:
            linear-gradient(
                180deg,
                #61cafa 0%,
                #43afe8 100%
            ) !important;

        color: #031522 !important;

        border: 1px solid #72d8ff !important;
        border-radius: 9px !important;

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

        box-shadow:
            0 6px 16px
            rgba(56,189,248,.13) !important;
    }


    .card-add-wide.add-button:hover:not(:disabled) {
        background:
            linear-gradient(
                180deg,
                #78d7ff 0%,
                #51bcf0 100%
            ) !important;

        box-shadow:
            0 0 16px
            rgba(56,201,255,.18) !important;
    }


    .card-add-wide.add-button:disabled {
        width: 100% !important;
        min-width: 100% !important;

        color: #708999 !important;

        background: #0b2638 !important;

        border-color: #284d64 !important;
    }
}


/* ---------- MOBILE ---------- */

@media (max-width: 700px) {

    .card-info-table-layout {
        min-height: 0 !important;
        height: auto !important;
    }


    .card-table-title {
        min-height: 34px !important;
        max-height: 34px !important;

        margin:
            3px
            0
            2px !important;

        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;

        overflow: hidden !important;
        white-space: normal !important;

        color: #fff !important;

        font-size: 13px !important;
        line-height: 17px !important;
        font-weight: 900 !important;
    }


    .card-table-team {
        min-height: 15px !important;
        margin-bottom: 6px !important;

        overflow: hidden !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;

        color: #c7ddeb !important;

        font-size: 9px !important;
        font-weight: 700 !important;
    }


    .card-meta-row,
    .card-year-badge,
    .card-set-name,
    .card-subset-line,
    .card-chip-row,
    .card-kicker,
    .card-detail-team,
    .card-detail-variant,
    .card-subtitle,
    .card-extra-line {
        display: none !important;
    }


    .home-card-data-table {
        overflow: hidden !important;

        background: rgba(5, 23, 36, .86) !important;

        border: 1px solid rgba(49,130,172,.55) !important;
        border-radius: 7px !important;
    }


    .home-card-data-row {
        min-height: 21px !important;

        display: grid !important;
        grid-template-columns:
            minmax(47px, .72fr)
            minmax(0, 1.25fr) !important;

        border-bottom:
            1px solid
            rgba(49,130,172,.20) !important;
    }


    .home-card-data-row:last-child {
        border-bottom: 0 !important;
    }


    .home-card-data-label,
    .home-card-data-value {
        min-width: 0 !important;

        padding:
            4px
            5px !important;

        font-size: 8px !important;
        line-height: 1.2 !important;
    }


    .home-card-data-label {
        color: #91afc2 !important;
        font-weight: 750 !important;

        border-right:
            1px solid
            rgba(49,130,172,.16) !important;
    }


    .home-card-data-value {
        overflow: hidden !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;

        color: #edf8ff !important;

        font-weight: 850 !important;
    }


    .home-card-limited-value {
        color: #ffd84e !important;
    }


    .card-side-table-layout {
        margin-top: 8px !important;
        padding-top: 8px !important;
    }


    .card-price-stock-row {
        display: flex !important;
        align-items: flex-end !important;
        justify-content: space-between !important;

        gap: 6px !important;

        margin-bottom: 7px !important;
    }


    .stock-text {
        margin: 0 !important;

        color: #d5e7f1 !important;

        font-size: 9px !important;
        font-weight: 750 !important;
    }


    .card-price {
        margin-left: auto !important;

        color: #3fc7ff !important;

        font-size: 18px !important;
        font-weight: 950 !important;

        text-align: right !important;
    }


    .card-cart-row {
        display: block !important;
    }


    .card-cart-icon {
        display: none !important;
    }


    .card-add-wide.add-button {
        width: 100% !important;
        min-width: 100% !important;

        height: 36px !important;
        min-height: 36px !important;

        color: #031522 !important;

        background: #49baf0 !important;

        border: 1px solid #72d8ff !important;
        border-radius: 8px !important;

        font-size: 10px !important;
        font-weight: 900 !important;
    }
}




/* ============================================================
   FROZENHITS v3.22 — TYPE + COLONS + TEAM SPACING
   ============================================================ */

@media (min-width: 701px) {

    /*
       Do not reserve two full lines for every player name.
       One-line names now let the team sit directly underneath.
       Long names can still wrap to two lines.
    */
    .card-table-title {
        min-height: 19px !important;
        max-height: 38px !important;

        margin:
            1px
            0
            1px !important;
    }

    /* Team is closer to player and slightly more prominent */
    .card-table-team {
        min-height: 17px !important;

        margin:
            0
            0
            5px !important;

        color: #d2e6f2 !important;

        font-size: 12px !important;
        line-height: 17px !important;
        font-weight: 750 !important;
    }

    /* Pull the information table slightly upward */
    .home-card-data-table {
        margin-top: 0 !important;
    }

    /* Slightly tighter rows now that Type is added */
    .home-card-data-row {
        min-height: 24px !important;
    }

    .home-card-data-label,
    .home-card-data-value {
        padding:
            4px
            8px !important;
    }
}


/* ---------- MOBILE ---------- */

@media (max-width: 700px) {

    .card-table-title {
        min-height: 17px !important;
        max-height: 34px !important;

        margin:
            2px
            0
            1px !important;
    }

    .card-table-team {
        min-height: 15px !important;

        margin:
            0
            0
            4px !important;

        color: #d2e6f2 !important;

        font-size: 9.5px !important;
        line-height: 15px !important;
        font-weight: 750 !important;
    }

    .home-card-data-row {
        min-height: 20px !important;
    }

    .home-card-data-label,
    .home-card-data-value {
        padding:
            3px
            5px !important;
    }
}




/* ============================================================
   FROZENHITS v3.23 — EQUAL CARD HEIGHTS + IDENTITY POLISH
   ============================================================ */

@media (min-width: 701px) {

    /* All cards in the same grid row stretch equally */
    .card-list {
        align-items: stretch !important;
    }

    .card-row {
        height: 100% !important;
        min-height: 0 !important;
    }


    /* --------------------------------------------------------
       PLAYER + TEAM
       Fixed area keeps every metadata table on the same line,
       while team still sits immediately under the player name.
       -------------------------------------------------------- */

    .card-identity-block {
        height: 58px !important;
        min-height: 58px !important;

        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;

        padding:
            1px
            1px
            0 !important;

        margin-bottom: 5px !important;
    }

    .card-table-title {
        min-height: 19px !important;
        max-height: 38px !important;

        margin:
            0
            0
            2px !important;

        color: #ffffff !important;

        font-size: 16px !important;
        line-height: 19px !important;
        font-weight: 950 !important;

        letter-spacing: -.15px !important;

        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;

        overflow: hidden !important;
        white-space: normal !important;
        text-overflow: ellipsis !important;
    }

    .card-table-team {
        min-height: 17px !important;

        margin: 0 !important;

        overflow: hidden !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;

        color: #9ed8f2 !important;

        font-size: 12.5px !important;
        line-height: 17px !important;
        font-weight: 750 !important;

        letter-spacing: .02px !important;
    }


    /* --------------------------------------------------------
       TABLE
       Limited is now always rendered (value or "-"), therefore
       every card has exactly six rows.
       -------------------------------------------------------- */

    .home-card-data-table {
        width: 100% !important;
        margin-top: 0 !important;
    }

    .home-card-data-row {
        height: 27px !important;
        min-height: 27px !important;
    }

    .home-card-data-label,
    .home-card-data-value {
        padding:
            5px
            9px !important;

        line-height: 16px !important;
    }

    .home-card-data-label {
        color: #9eb8c9 !important;

        font-size: 10px !important;
        font-weight: 750 !important;
    }

    .home-card-data-value {
        color: #f3f9fd !important;

        font-size: 10.5px !important;
        font-weight: 850 !important;
    }

    .home-card-limited-value {
        color: #ffe03e !important;
        font-weight: 950 !important;
    }

    .home-card-limited-empty {
        color: #637f91 !important;
        font-weight: 700 !important;
    }


    /* --------------------------------------------------------
       PRICE / STOCK
       Fixed row height + centered alignment = same baseline.
       -------------------------------------------------------- */

    .card-side-table-layout {
        margin-top: 12px !important;
    }

    .card-price-stock-row {
        height: 34px !important;
        min-height: 34px !important;

        margin-bottom: 10px !important;

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

        gap: 10px !important;
    }

    .stock-text {
        margin: 0 !important;

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

        min-height: 26px !important;

        color: #d8eaf4 !important;

        font-size: 11px !important;
        line-height: 26px !important;
        font-weight: 800 !important;
    }

    .card-price {
        margin: 0 0 0 auto !important;

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

        min-height: 26px !important;

        color: #3fc7ff !important;

        font-size: 24px !important;
        line-height: 26px !important;
        font-weight: 950 !important;

        text-align: right !important;
    }
}


/* ---------- MOBILE ---------- */

@media (max-width: 700px) {

    .card-identity-block {
        height: 48px !important;
        min-height: 48px !important;

        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;

        margin-bottom: 4px !important;
    }

    .card-table-title {
        min-height: 17px !important;
        max-height: 34px !important;

        margin:
            0
            0
            1px !important;

        font-size: 13px !important;
        line-height: 17px !important;
        font-weight: 950 !important;

        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;

        overflow: hidden !important;
        white-space: normal !important;
    }

    .card-table-team {
        min-height: 14px !important;

        margin: 0 !important;

        color: #9ed8f2 !important;

        font-size: 9.5px !important;
        line-height: 14px !important;
        font-weight: 750 !important;

        overflow: hidden !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
    }

    .home-card-data-row {
        height: 22px !important;
        min-height: 22px !important;
    }

    .home-card-data-label,
    .home-card-data-value {
        padding:
            4px
            5px !important;
    }

    .home-card-limited-empty {
        color: #637f91 !important;
    }

    .card-price-stock-row {
        height: 29px !important;
        min-height: 29px !important;

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

        margin-bottom: 7px !important;
    }

    .stock-text,
    .card-price {
        min-height: 22px !important;
        line-height: 22px !important;
    }
}




/* ============================================================
   FROZENHITS v3.24 — MORE SPACE FOR TABLE VALUES
   Move the vertical divider left so Set / Subset have more room.
   ============================================================ */

@media (min-width: 701px) {

    /*
       Fixed, narrower label column.
       Before it was fraction-based, so labels took too much width.
    */
    .home-card-data-row {
        grid-template-columns:
            74px
            minmax(0, 1fr) !important;
    }

    .home-card-data-label {
        padding:
            5px
            7px !important;

        font-size: 9.5px !important;
    }

    .home-card-data-value {
        padding:
            5px
            8px !important;

        font-size: 10.5px !important;
        letter-spacing: -0.08px !important;
    }

    /*
       Keep one line, but now there is substantially more room.
       Ellipsis remains only for genuinely very long names.
    */
    .home-card-data-value {
        overflow: hidden !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
    }
}


/* ---------- MOBILE ---------- */

@media (max-width: 700px) {

    .home-card-data-row {
        grid-template-columns:
            54px
            minmax(0, 1fr) !important;
    }

    .home-card-data-label {
        padding:
            4px
            4px !important;

        font-size: 7.6px !important;
    }

    .home-card-data-value {
        padding:
            4px
            5px !important;

        font-size: 8px !important;
        letter-spacing: -0.05px !important;
    }
}




/* ============================================================
   FROZENHITS v3.25 — POKÉ BALL + TEAM IN TABLE
   ============================================================ */


/* ------------------------------------------------------------
   TRUE ROUND POKÉ BALL
   ------------------------------------------------------------ */

.collection-tabs .category-icon-pokemon {
    overflow: visible !important;
}

.collection-tabs .category-icon-pokemon .pokeball-icon {
    position: relative !important;

    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;

    flex: 0 0 24px !important;

    aspect-ratio: 1 / 1 !important;

    display: block !important;

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

    overflow: hidden !important;

    border: 2px solid #e8f4fb !important;
    border-radius: 999px !important;

    background:
        linear-gradient(
            to bottom,
            #f33b35 0%,
            #f33b35 46%,
            #161e24 46%,
            #161e24 54%,
            #f5fbff 54%,
            #f5fbff 100%
        ) !important;

    box-shadow:
        0 0 0 1px rgba(0,0,0,.28),
        0 0 8px rgba(95,210,255,.12),
        inset 0 1px 1px rgba(255,255,255,.35) !important;

    transform: none !important;
}

.collection-tabs .category-icon-pokemon .pokeball-icon::before {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    top: 50%;

    height: 3px;

    transform: translateY(-50%);

    background: #161e24;

    z-index: 1;
}

.collection-tabs .category-icon-pokemon .pokeball-center {
    position: absolute !important;

    left: 50% !important;
    top: 50% !important;

    width: 9px !important;
    height: 9px !important;

    min-width: 9px !important;
    min-height: 9px !important;

    padding: 0 !important;

    transform: translate(-50%, -50%) !important;

    background: #f7fcff !important;

    border: 2px solid #161e24 !important;
    border-radius: 999px !important;

    box-shadow:
        0 0 0 1px rgba(255,255,255,.15) !important;

    z-index: 3 !important;
}


/* ------------------------------------------------------------
   PLAYER ONLY ABOVE TABLE
   Team is now a normal metadata row.
   ------------------------------------------------------------ */

@media (min-width: 701px) {

    .card-player-only-block {
        height: 42px !important;
        min-height: 42px !important;

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

        margin:
            0
            0
            5px !important;

        padding:
            1px
            1px
            0 !important;
    }

    .card-player-only-block .card-table-title {
        min-height: 19px !important;
        max-height: 38px !important;

        margin: 0 !important;

        font-size: 16px !important;
        line-height: 19px !important;
        font-weight: 950 !important;

        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;

        overflow: hidden !important;
        white-space: normal !important;
        text-overflow: ellipsis !important;
    }

    /* Old standalone team element is no longer part of the markup. */
    .card-table-team {
        display: none !important;
    }

    /*
       Seven rows are now always aligned:
       Year / Team / Set / Subset / Card # / Type / Limited
    */
    .home-card-data-row {
        height: 27px !important;
        min-height: 27px !important;
    }

    /*
       Keep the left column narrow so long team/set/subset names
       have as much room as possible.
    */
    .home-card-data-row {
        grid-template-columns:
            74px
            minmax(0, 1fr) !important;
    }

    .home-card-data-label {
        padding:
            5px
            7px !important;

        font-size: 9.5px !important;
    }

    .home-card-data-value {
        padding:
            5px
            8px !important;

        font-size: 10.5px !important;
    }
}


/* ---------- MOBILE ---------- */

@media (max-width: 700px) {

    .collection-tabs .category-icon-pokemon .pokeball-icon {
        width: 21px !important;
        height: 21px !important;
        min-width: 21px !important;
        min-height: 21px !important;
        flex-basis: 21px !important;
    }

    .collection-tabs .category-icon-pokemon .pokeball-center {
        width: 8px !important;
        height: 8px !important;
        min-width: 8px !important;
        min-height: 8px !important;
    }

    .card-player-only-block {
        height: 37px !important;
        min-height: 37px !important;

        display: flex !important;
        align-items: flex-start !important;

        margin-bottom: 4px !important;
    }

    .card-player-only-block .card-table-title {
        min-height: 17px !important;
        max-height: 34px !important;

        margin: 0 !important;

        font-size: 13px !important;
        line-height: 17px !important;
        font-weight: 950 !important;
    }

    .card-table-team {
        display: none !important;
    }

    .home-card-data-row {
        grid-template-columns:
            54px
            minmax(0, 1fr) !important;
    }
}




/* ============================================================
   FROZENHITS v3.26 — HEADER CARD ICON + PLAYER/TABLE SPACING
   ============================================================ */


/* ------------------------------------------------------------
   HEADER: CLEAN STACKED TRADING CARDS ICON
   ------------------------------------------------------------ */

.brand-card-count .brand-card-icon {
    width: 34px !important;
    height: 24px !important;
    min-width: 34px !important;
    min-height: 24px !important;
    flex: 0 0 34px !important;

    display: block !important;

    overflow: visible !important;

    color: #4fd0ff !important;

    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;

    transform: none !important;

    filter:
        drop-shadow(
            0 0 5px
            rgba(56, 189, 248, .18)
        ) !important;
}

.brand-card-count .brand-card-icon::before,
.brand-card-count .brand-card-icon::after {
    content: none !important;
    display: none !important;
}

.brand-card-icon-back,
.brand-card-icon-middle,
.brand-card-icon-front {
    fill: rgba(8, 31, 47, .78);
    stroke: currentColor;
    stroke-width: 1.65;
    vector-effect: non-scaling-stroke;
}

.brand-card-icon-back {
    opacity: .36;
}

.brand-card-icon-middle {
    opacity: .63;
}

.brand-card-icon-front {
    opacity: 1;
}

.brand-card-icon-detail {
    fill: none;
    stroke: #a7e9ff;
    stroke-width: 1.3;
    stroke-linecap: round;
    opacity: .72;
    vector-effect: non-scaling-stroke;
}


/* ------------------------------------------------------------
   HOMEPAGE CARDS:
   reduce empty space between player name and metadata table
   ------------------------------------------------------------ */

@media (min-width: 701px) {

    .card-player-only-block {
        height: auto !important;
        min-height: 20px !important;

        margin:
            0
            0
            3px !important;

        padding:
            0
            1px !important;
    }

    .card-player-only-block .card-table-title {
        min-height: 19px !important;
        max-height: 38px !important;

        margin: 0 !important;
    }

    .home-card-data-table {
        margin-top: 0 !important;
    }
}


/* ---------- MOBILE ---------- */

@media (max-width: 700px) {

    .brand-card-count .brand-card-icon {
        width: 25px !important;
        height: 18px !important;
        min-width: 25px !important;
        min-height: 18px !important;
        flex-basis: 25px !important;
    }

    .card-player-only-block {
        height: auto !important;
        min-height: 17px !important;

        margin:
            0
            0
            2px !important;

        padding:
            0
            1px !important;
    }

    .card-player-only-block .card-table-title {
        min-height: 17px !important;
        max-height: 34px !important;

        margin: 0 !important;
    }
}




/* ============================================================
   FROZENHITS v3.28 — SPORTS COLLECTION ICON (FINAL FIX)
   ============================================================ */

.brand-card-count {
    gap: 9px !important;
    padding-left: 10px !important;
}

.brand-card-count .brand-card-icon.brand-card-icon-image {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    flex: 0 0 46px !important;

    display: block !important;
    object-fit: contain !important;
    object-position: center !important;

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

    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;

    transform: none !important;

    filter:
        drop-shadow(0 0 7px rgba(72, 211, 255, .24))
        drop-shadow(0 0 2px rgba(72, 211, 255, .20)) !important;
}

/* kill any old pseudo-element card icon */
.brand-card-count .brand-card-icon.brand-card-icon-image::before,
.brand-card-count .brand-card-icon.brand-card-icon-image::after {
    content: none !important;
    display: none !important;
}

@media (max-width: 700px) {
    .brand-card-count .brand-card-icon.brand-card-icon-image {
        width: 38px !important;
        height: 30px !important;
        min-width: 38px !important;
        min-height: 30px !important;
        flex-basis: 38px !important;
    }
}

/* ============================================================
   FROZENHITS — UNIFIED RESPONSIVE SYSTEM
   One responsive layer for phone → tablet → desktop.
   Uses fluid Grid/Flex sizing instead of per-device patches.
   ============================================================ */

:root {
    --fh-page-pad: clamp(12px, 2vw, 24px);
    --fh-gap: clamp(10px, 1.2vw, 16px);
    --fh-card-gap: clamp(8px, 1vw, 14px);
    --fh-filter-width: clamp(215px, 15vw, 245px);
}

html {
    overflow-x: hidden;
}

body {
    width: 100%;
    overflow-x: hidden;
}

.site-header,
.header-inner,
.category-nav,
.category-nav-inner,
.header-actions {
    overflow: visible;
}

/* Collection title/count is retained in the DOM for JS but not rendered. */
.collection-heading {
    display: none !important;
}

/* Category counts live inside the existing category buttons. */
.category-card-count {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 24px !important;
    height: 20px !important;
    margin-left: 4px !important;
    padding: 0 6px !important;
    border: 1px solid rgba(91, 202, 247, .24) !important;
    border-radius: 999px !important;
    background: rgba(3, 18, 29, .55) !important;
    color: #8fb9cf !important;
    font-size: 9px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
}

.category-button.active .category-card-count {
    color: #e7f9ff !important;
    border-color: rgba(133, 224, 255, .44) !important;
    background: rgba(4, 29, 43, .62) !important;
}

.category-button .category-chevron {
    margin-left: auto !important;
}

/* Sort belongs to the category row on every screen size. */
.category-sort-slot {
    min-width: 0;
}

.category-sort-slot .filter-sort {
    margin: 0 !important;
}

/* Admin dropdown lives in the header and must always stack above catalogue. */
.admin-tools-dropdown {
    position: relative !important;
    margin: 0 !important;
    z-index: 950 !important;
}

.admin-tools-dropdown summary {
    list-style: none !important;
}

.admin-tools-dropdown summary::-webkit-details-marker {
    display: none !important;
}

body:not(.admin-mode) .admin-tools-dropdown {
    display: none !important;
}

body.admin-mode .admin-tools-dropdown {
    display: block !important;
}

.admin-tools-trigger {
    min-height: 42px !important;
    padding: 0 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    border: 1px solid #245d7b !important;
    border-radius: 11px !important;
    background: linear-gradient(180deg, rgba(10,37,56,.98), rgba(7,28,44,.98)) !important;
    color: #e9f7ff !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
}

.admin-tools-trigger-arrow {
    color: #9cdfff !important;
    transition: transform .15s ease !important;
}

.admin-tools-dropdown[open] .admin-tools-trigger-arrow {
    transform: rotate(180deg) !important;
}

.admin-tools-menu {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    width: min(290px, calc(100vw - 24px)) !important;
    max-height: min(70vh, 560px) !important;
    overflow-y: auto !important;
    padding: 12px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    z-index: 9999 !important;
    border: 1px solid #245d7b !important;
    border-radius: 14px !important;
    background: linear-gradient(180deg, rgba(5,22,35,.99), rgba(4,17,28,.99)) !important;
    box-shadow: 0 18px 42px rgba(0,0,0,.36) !important;
}

.admin-tools-menu > .add-card-link,
.admin-tools-menu .admin-nav-actions,
.admin-tools-menu .not-tradera-wrapper,
.admin-tools-menu .deleted-cards-wrapper,
.admin-tools-menu .admin-category-button {
    width: 100% !important;
}

.admin-tools-menu > .add-card-link {
    display: inline-flex !important;
    min-height: 42px !important;
    justify-content: flex-start !important;
}

.admin-tools-menu .admin-nav-actions {
    display: grid !important;
    gap: 9px !important;
}

.admin-tools-menu .not-tradera-wrapper,
.admin-tools-menu .deleted-cards-wrapper {
    position: relative !important;
}

.admin-tools-menu .admin-category-button {
    height: 42px !important;
    justify-content: space-between !important;
}

.admin-tools-menu .not-tradera-menu {
    position: static !important;
    width: 100% !important;
    margin-top: 7px !important;
    box-shadow: none !important;
}

/* Never show the abandoned utility row. */
.admin-utility-bar {
    display: none !important;
}

/* Shared fluid category navigation. */
.category-nav-inner {
    width: min(100%, 1760px) !important;
    max-width: 1760px !important;
    margin: 0 auto !important;
    padding-inline: var(--fh-page-pad) !important;
}

.collection-tabs {
    min-width: 0 !important;
}

/* Shared card grid: the browser chooses the appropriate column count. */
.card-list {
    width: 100% !important;
    margin: 0 !important;
    padding-top: 0 !important;
    display: grid !important;
    gap: var(--fh-card-gap) !important;
    align-items: start !important;
}

/* Keep full information table as the canonical card presentation. */
.mobile-card-summary {
    display: none !important;
}

/* ============================================================
   DESKTOP / LARGE LAPTOP
   ============================================================ */

@media (min-width: 1180px) {

    .header-inner {
        width: min(100%, 1760px) !important;
        max-width: 1760px !important;
        margin: 0 auto !important;
        padding: 14px var(--fh-page-pad) !important;
        display: grid !important;
        grid-template-columns: clamp(260px, 19vw, 330px) minmax(280px, 1fr) auto !important;
        gap: clamp(14px, 1.5vw, 24px) !important;
        align-items: center !important;
    }

    .header-search {
        width: min(100%, 540px) !important;
        max-width: 540px !important;
        justify-self: center !important;
    }

    .header-actions {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex-wrap: nowrap !important;
        gap: 10px !important;
    }

    .category-nav-inner {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 16px !important;
        align-items: center !important;
        padding-block: 12px !important;
    }

    .collection-tabs {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        overflow: visible !important;
    }

    .collection-tabs .category-button {
        flex: 0 1 220px !important;
        min-width: 185px !important;
        max-width: 240px !important;
        height: 62px !important;
        padding: 0 16px !important;
    }

    .category-sort-slot,
    .category-sort-slot .filter-sort,
    .category-sort-slot .custom-sort,
    .category-sort-slot .custom-sort-trigger {
        width: 170px !important;
        max-width: 170px !important;
    }

    .category-sort-slot .sort-label {
        display: block !important;
        margin: 0 0 5px 2px !important;
        font-size: 10px !important;
    }

    .category-sort-slot .custom-sort-trigger {
        min-height: 44px !important;
    }

    .app {
        width: min(100%, 1760px) !important;
        max-width: 1760px !important;
        margin: 0 auto !important;
        padding: 16px var(--fh-page-pad) 55px !important;
        display: grid !important;
        grid-template-columns: var(--fh-filter-width) minmax(0, 1fr) !important;
        gap: var(--fh-gap) !important;
        align-items: start !important;
    }

    .main-content {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .filters-panel {
        position: sticky !important;
        top: 176px !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        max-height: calc(100vh - 194px) !important;
        margin: 0 !important;
        padding: 12px 10px 14px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        border-radius: 14px !important;
    }

    .filters-panel > .filters-header {
        width: 100% !important;
        min-height: 44px !important;
        margin: 0 0 2px !important;
        padding: 2px 4px 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        border-bottom: 1px solid rgba(55,126,164,.24) !important;
    }

    .filter-status,
    .hidden-filter-count {
        display: none !important;
    }

    .filters-title {
        font-size: 17px !important;
    }

    .clear-filters {
        width: auto !important;
        height: auto !important;
        padding: 5px 6px !important;
        font-size: 10px !important;
    }

    .filters-panel > .filter-player { order: 1 !important; }
    .filters-panel > .filter-year { order: 2 !important; }
    .filters-panel > .filter-team { order: 3 !important; }
    .filters-panel > .filter-nationality { order: 4 !important; }
    .filters-panel > .filter-set { order: 5 !important; }
    .filters-panel > .filter-type { order: 6 !important; }

    .filter-section {
        position: relative !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        border: 0 !important;
        overflow: visible !important;
    }

    .filter-section-title {
        position: relative !important;
        width: 100% !important;
        height: 46px !important;
        margin: 0 !important;
        padding: 0 32px 0 40px !important;
        display: flex !important;
        align-items: center !important;
        border: 1px solid #245d7b !important;
        border-radius: 10px !important;
        background: linear-gradient(180deg, #0a2538, #071c2c) !important;
        color: #f3f9fd !important;
        font-size: 11px !important;
        line-height: 1 !important;
        font-weight: 900 !important;
        letter-spacing: .4px !important;
        cursor: pointer !important;
    }

    .filter-section-title::after {
        content: "⌄" !important;
        position: absolute !important;
        right: 11px !important;
        top: 50% !important;
        transform: translateY(-55%) !important;
    }

    .filter-section.open .filter-section-title::after {
        transform: translateY(-45%) rotate(180deg) !important;
    }

    .filter-section .filter-search,
    .filter-section .checkbox-list {
        display: none !important;
    }

    .filter-section.open .filter-search {
        position: static !important;
        display: block !important;
        width: 100% !important;
        height: 36px !important;
        margin: 6px 0 0 !important;
        padding: 0 9px !important;
    }

    .filter-section.open .checkbox-list {
        position: static !important;
        display: block !important;
        width: 100% !important;
        max-height: 205px !important;
        margin: 5px 0 0 !important;
        padding: 4px !important;
        overflow-y: auto !important;
        border: 1px solid #204a63 !important;
        border-radius: 8px !important;
        background: #061724 !important;
    }

    .filter-section.open .checkbox-row {
        min-height: 27px !important;
        margin: 0 !important;
        padding: 3px 5px !important;
        font-size: 10.5px !important;
    }

    .card-list {
        grid-template-columns: repeat(auto-fill, minmax(245px, 1fr)) !important;
    }
}

/* ============================================================
   TABLET / SMALL LAPTOP
   ============================================================ */

@media (min-width: 761px) and (max-width: 1179px) {

    .header-inner {
        width: 100% !important;
        padding: 12px var(--fh-page-pad) !important;
        display: grid !important;
        grid-template-columns: auto minmax(220px, 1fr) auto !important;
        gap: clamp(10px, 1.5vw, 16px) !important;
        align-items: center !important;
    }

    .site-logo {
        font-size: clamp(20px, 3vw, 28px) !important;
    }

    .header-search {
        width: 100% !important;
        max-width: 440px !important;
        min-width: 0 !important;
        justify-self: center !important;
    }

    .header-actions {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex-wrap: nowrap !important;
        gap: 7px !important;
    }

    .header-actions .add-card-link,
    .header-actions .cart-button,
    .header-actions .admin-login-button,
    .header-actions .admin-tools-trigger {
        min-height: 40px !important;
        height: 40px !important;
        padding-inline: 12px !important;
        font-size: 11px !important;
    }

    .category-nav-inner {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) clamp(145px, 21vw, 175px) !important;
        gap: 10px !important;
        align-items: center !important;
        padding-block: 10px !important;
    }

    .collection-tabs {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
        width: 100% !important;
        overflow: visible !important;
    }

    .collection-tabs .category-button {
        width: 100% !important;
        min-width: 0 !important;
        height: 50px !important;
        min-height: 50px !important;
        padding: 0 9px !important;
        font-size: clamp(10px, 1.4vw, 12px) !important;
    }

    .category-sort-slot,
    .category-sort-slot .filter-sort,
    .category-sort-slot .custom-sort,
    .category-sort-slot .custom-sort-trigger {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    .category-sort-slot .sort-label {
        display: none !important;
    }

    .category-sort-slot .custom-sort-trigger {
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 10px !important;
        font-size: 11px !important;
    }

    .app {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 12px var(--fh-page-pad) 30px !important;
        display: block !important;
    }

    .main-content {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .filters-panel {
        position: static !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 0 12px !important;
        padding: 11px !important;
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
        gap: 8px !important;
        align-items: start !important;
        overflow: visible !important;
        border-radius: 14px !important;
    }

    .filters-panel > .filters-header {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        min-height: 40px !important;
        margin: 0 !important;
        padding: 0 2px 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        border-bottom: 1px solid rgba(65,121,151,.2) !important;
    }

    .filter-status,
    .hidden-filter-count {
        display: none !important;
    }

    .filter-section {
        position: relative !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        overflow: visible !important;
    }

    .filter-section-title {
        width: 100% !important;
        min-width: 0 !important;
        height: 40px !important;
        margin: 0 !important;
        padding: 0 28px 0 11px !important;
        display: flex !important;
        align-items: center !important;
        border: 1px solid #245d7b !important;
        border-radius: 9px !important;
        background: #081d2d !important;
        color: #f3f9fd !important;
        font-size: 10.5px !important;
        font-weight: 900 !important;
        letter-spacing: .25px !important;
    }

    .filter-section-title::before {
        display: none !important;
        content: none !important;
    }

    .filter-section-title::after {
        content: "⌄" !important;
        position: absolute !important;
        right: 10px !important;
    }

    .filter-section .filter-search,
    .filter-section .checkbox-list {
        display: none !important;
    }

    .filter-section.open {
        z-index: 100 !important;
    }

    .filter-section.open .filter-search {
        position: absolute !important;
        display: block !important;
        top: calc(100% + 5px) !important;
        left: 0 !important;
        width: 100% !important;
        height: 33px !important;
        margin: 0 !important;
        padding: 0 8px !important;
        font-size: 10.5px !important;
        z-index: 102 !important;
    }

    .filter-section.open .checkbox-list {
        position: absolute !important;
        display: block !important;
        top: calc(100% + 41px) !important;
        left: 0 !important;
        width: max(100%, 190px) !important;
        max-height: 170px !important;
        margin: 0 !important;
        padding: 4px !important;
        overflow-y: auto !important;
        z-index: 101 !important;
        border: 1px solid #204a63 !important;
        border-radius: 8px !important;
        background: #061724 !important;
        box-shadow: 0 14px 30px rgba(0,0,0,.3) !important;
    }

    .filter-type.open .checkbox-list {
        top: calc(100% + 5px) !important;
    }

    .filter-section.open .checkbox-row {
        min-height: 25px !important;
        margin: 0 !important;
        padding: 2px 5px !important;
        font-size: 10.5px !important;
    }

    .card-list {
        grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)) !important;
    }

    .card-image {
        width: 92% !important;
        max-width: 92% !important;
        height: auto !important;
        margin: 0 auto !important;
        object-fit: contain !important;
    }
}

/* ============================================================
   PHONE
   ============================================================ */

@media (max-width: 760px) {

    .header-inner {
        width: 100% !important;
        margin: 0 !important;
        padding: 10px 12px !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas:
            "brand brand"
            "search actions" !important;
        gap: 9px !important;
        align-items: center !important;
    }

    .brand-block {
        grid-area: brand !important;
        width: 100% !important;
        min-width: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .site-logo {
        flex: 0 1 auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        white-space: nowrap !important;
    }

    .site-logo .logo-main,
    .site-logo .logo-accent {
        font-size: clamp(23px, 7vw, 29px) !important;
        line-height: 1 !important;
    }

    .brand-subtitle {
        display: none !important;
    }

    .brand-card-count {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: clamp(112px, 30vw, 132px) !important;
        height: 46px !important;
        margin: 0 !important;
        padding: 0 8px !important;
        gap: 6px !important;
        border-radius: 10px !important;
    }

    .brand-card-count .brand-card-icon.brand-card-icon-image {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        min-height: 30px !important;
        flex-basis: 30px !important;
    }

    .brand-card-count strong,
    #totalCardCount {
        font-size: 18px !important;
    }

    .brand-card-count small {
        font-size: 7px !important;
        line-height: 1.05 !important;
        letter-spacing: .7px !important;
    }

    .header-search {
        grid-area: search !important;
        position: relative !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        height: 40px !important;
        margin: 0 !important;
    }

    #globalSearch {
        width: 100% !important;
        height: 40px !important;
        min-width: 0 !important;
        padding: 0 10px 0 36px !important;
        border-radius: 9px !important;
        font-size: 11px !important;
    }

    .search-icon {
        left: 12px !important;
        font-size: 14px !important;
    }

    .header-actions {
        grid-area: actions !important;
        position: relative !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex-wrap: wrap !important;
        gap: 5px !important;
        z-index: 900 !important;
    }

    .header-actions .add-card-link,
    .header-actions .cart-button,
    .header-actions .admin-login-button,
    .header-actions .admin-tools-trigger {
        min-width: 0 !important;
        height: 36px !important;
        min-height: 36px !important;
        padding: 0 9px !important;
        border-radius: 9px !important;
        font-size: 10px !important;
    }

    .header-actions .cart-icon {
        display: none !important;
    }

    .header-actions .cart-count {
        min-width: 18px !important;
        width: 18px !important;
        height: 18px !important;
        padding: 0 !important;
        font-size: 9px !important;
    }

    .admin-tools-menu {
        width: min(275px, calc(100vw - 24px)) !important;
    }

    .category-nav-inner {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        padding-block: 9px !important;
    }

    .collection-tabs {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 7px !important;
        overflow: visible !important;
        padding: 0 !important;
    }

    .collection-tabs .category-button {
        width: 100% !important;
        min-width: 0 !important;
        height: 50px !important;
        min-height: 50px !important;
        padding: 0 7px !important;
        border-radius: 10px !important;
        gap: 6px !important;
    }

    .collection-tabs .category-icon {
        width: 30px !important;
        min-width: 30px !important;
        height: 30px !important;
    }

    .collection-tabs .category-label {
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: clamp(10px, 3vw, 12px) !important;
    }

    .category-card-count {
        display: none !important;
    }

    .collection-tabs .category-chevron {
        font-size: 11px !important;
    }

    .category-sort-slot {
        width: 100% !important;
        display: flex !important;
        justify-content: flex-end !important;
    }

    .category-sort-slot .sort-label {
        display: none !important;
    }

    .category-sort-slot .filter-sort,
    .category-sort-slot .custom-sort,
    .category-sort-slot .custom-sort-trigger {
        width: clamp(145px, 42vw, 170px) !important;
        max-width: clamp(145px, 42vw, 170px) !important;
    }

    .category-sort-slot .custom-sort-trigger {
        height: 36px !important;
        min-height: 36px !important;
        padding: 0 9px !important;
        border-radius: 9px !important;
        font-size: 10.5px !important;
    }

    .app {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 9px 0 20px !important;
        display: block !important;
    }

    .main-content {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .filters-panel {
        position: static !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 12px 10px !important;
        padding: 0 !important;
        overflow: visible !important;
        border-radius: 13px !important;
    }

    .filters-panel > .filters-header {
        width: 100% !important;
        min-height: 52px !important;
        margin: 0 !important;
        padding: 0 14px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        border-bottom: 0 !important;
    }

    .filter-status,
    .hidden-filter-count {
        display: none !important;
    }

    .filters-title {
        font-size: 15px !important;
    }

    .clear-filters {
        width: auto !important;
        min-height: 0 !important;
        height: auto !important;
        padding: 4px 5px !important;
        font-size: 11px !important;
    }

    /* Closed mobile state: header only. */
    .filters-panel:not(.mobile-open) > .filter-section,
    .filters-panel:not(.mobile-open) > .hidden-filter-count {
        display: none !important;
    }

    /* Open state uses a fluid grid instead of device-specific columns. */
    .filters-panel.mobile-open {
        padding: 0 10px 10px !important;
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)) !important;
        gap: 7px !important;
        align-items: start !important;
    }

    .filters-panel.mobile-open > .filters-header {
        grid-column: 1 / -1 !important;
        min-width: 100% !important;
        padding: 0 2px 7px !important;
        border-bottom: 1px solid rgba(65,121,151,.18) !important;
    }

    .filters-panel.mobile-open > .filter-section {
        position: relative !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        overflow: visible !important;
    }

    .filters-panel.mobile-open > .filter-section.open {
        grid-column: 1 / -1 !important;
    }

    .filters-panel.mobile-open .filter-section-title {
        width: 100% !important;
        min-width: 0 !important;
        height: 40px !important;
        min-height: 40px !important;
        margin: 0 !important;
        padding: 0 28px 0 10px !important;
        display: flex !important;
        align-items: center !important;
        border: 1px solid #245d7b !important;
        border-radius: 9px !important;
        background: #081d2d !important;
        color: #f3f9fd !important;
        font-size: 10.5px !important;
        line-height: 1 !important;
        font-weight: 900 !important;
        letter-spacing: .2px !important;
    }

    .filters-panel.mobile-open .filter-section-title::before {
        display: none !important;
        content: none !important;
    }

    .filters-panel.mobile-open .filter-section-title::after {
        content: "⌄" !important;
        position: absolute !important;
        right: 10px !important;
    }

    .filters-panel.mobile-open .filter-section .filter-search,
    .filters-panel.mobile-open .filter-section .checkbox-list {
        display: none !important;
    }

    .filters-panel.mobile-open .filter-section.open .filter-search {
        position: static !important;
        display: block !important;
        width: 100% !important;
        height: 32px !important;
        margin: 4px 0 3px !important;
        padding: 0 8px !important;
        font-size: 10.5px !important;
    }

    .filters-panel.mobile-open .filter-section.open .checkbox-list {
        position: static !important;
        display: block !important;
        width: 100% !important;
        max-height: 150px !important;
        margin: 0 !important;
        padding: 3px 4px !important;
        overflow-y: auto !important;
        border: 1px solid #204a63 !important;
        border-radius: 7px !important;
        background: #061724 !important;
    }

    .filters-panel.mobile-open .filter-section.open .checkbox-row {
        min-height: 25px !important;
        height: 25px !important;
        margin: 0 !important;
        padding: 2px 4px !important;
        gap: 5px !important;
        font-size: 10.5px !important;
        line-height: 1.1 !important;
    }

    .filters-panel.mobile-open .checkbox-row input[type="checkbox"] {
        width: 12px !important;
        height: 12px !important;
        min-width: 12px !important;
        margin: 0 !important;
    }

    .filters-panel.mobile-open .checkbox-count {
        margin-left: auto !important;
        font-size: 8.5px !important;
    }

    .card-list {
    grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)) !important;
    gap: 8px !important;
    padding: 0 12px 18px !important;
}

    .card-row {
        min-width: 0 !important;
        padding: 7px !important;
        gap: 7px !important;
        border-radius: 10px !important;
    }

    .card-image-container {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 4px !important;
        margin: 0 0 4px !important;
    }

    .card-image {
        display: block !important;
        width: 84% !important;
        max-width: 84% !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 auto !important;
        object-fit: contain !important;
    }

    .card-player-only-block {
        height: auto !important;
        min-height: 0 !important;
        margin: 0 0 4px !important;
        padding: 0 !important;
    }

    .card-table-title,
    .card-title {
        min-height: 0 !important;
        margin: 0 !important;
        font-size: clamp(11px, 3.2vw, 14px) !important;
        line-height: 1.1 !important;
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
        overflow: hidden !important;
    }

    .home-card-data-table {
        display: block !important;
        width: 100% !important;
        margin: 0 0 6px !important;
        overflow: hidden !important;
        border-radius: 7px !important;
    }

    .home-card-data-row {
        min-height: 24px !important;
        display: grid !important;
        grid-template-columns: clamp(46px, 31%, 58px) minmax(0, 1fr) !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .home-card-data-label {
        padding: 4px !important;
        font-size: 7.5px !important;
        line-height: 1 !important;
    }

    .home-card-data-value {
        min-width: 0 !important;
        padding: 4px !important;
        font-size: clamp(7.5px, 2.1vw, 9px) !important;
        line-height: 1.05 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .card-price-stock-row {
        min-height: 28px !important;
        margin: 0 0 5px !important;
        padding: 5px 1px 0 !important;
        gap: 4px !important;
    }

    .stock-text {
        margin: 0 !important;
        font-size: 8px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    .card-price {
        margin: 0 !important;
        font-size: 15px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    .add-button,
    .card-add-wide {
        width: 100% !important;
        height: 36px !important;
        min-height: 36px !important;
        padding: 0 6px !important;
        border-radius: 7px !important;
        font-size: 10px !important;
    }

    .admin-actions {
        margin-top: 6px !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 5px !important;
    }

    .admin-actions button {
        min-width: 0 !important;
        min-height: 30px !important;
        padding: 4px !important;
        font-size: 9px !important;
    }
}

/* Fluid fallback for exceptionally narrow screens: the browser may drop to one card
   rather than causing horizontal overflow. */
@media (max-width: 315px) {
    .card-list {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================================
   FROZENHITS — RESPONSIVE COLLAPSIBLE FILTER PANEL
   Phone + tablet:
   closed  = one compact "Filters / Clear" bar
   opened  = 2-column filter grid, matching the preferred layout
   Desktop = existing left sidebar remains unchanged
   ============================================================ */

@media (max-width: 1099px) {

    body .filters-panel {
        position: static !important;

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

        margin: 0 12px 10px !important;
        padding: 0 !important;

        display: block !important;

        overflow: visible !important;

        border: 1px solid #1f516b !important;
        border-radius: 14px !important;

        background:
            linear-gradient(
                180deg,
                rgba(7, 26, 40, .98),
                rgba(5, 20, 32, .98)
            ) !important;
    }


    /* --------------------------------------------------------
       Filter header = the one opening/closing control
       -------------------------------------------------------- */

    body .filters-panel > .filters-header {
        grid-area: none !important;
        grid-column: auto !important;
        grid-row: auto !important;

        width: 100% !important;
        min-width: 0 !important;
        min-height: 50px !important;

        margin: 0 !important;
        padding: 0 14px !important;

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

        gap: 10px !important;

        border: 0 !important;

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

    body .filters-panel > .filters-header > div {
        display: flex !important;
        align-items: center !important;
        gap: 7px !important;
    }

    body .filters-panel .filters-title {
        position: relative !important;

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

        margin: 0 !important;
        padding: 0 18px 0 0 !important;

        color: #ffffff !important;

        font-size: 15px !important;
        line-height: 1 !important;
        font-weight: 900 !important;
    }

    body .filters-panel .filters-title::after {
        content: "⌄" !important;

        position: absolute !important;
        right: 0 !important;
        top: 50% !important;

        transform:
            translateY(-55%)
            rotate(0deg) !important;

        color: #53d6ff !important;

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

        transition:
            transform .16s ease !important;
    }

    body .filters-panel.mobile-open
    .filters-title::after {
        transform:
            translateY(-45%)
            rotate(180deg) !important;
    }

    body .filters-panel .filter-status,
    body .filters-panel > .hidden-filter-count {
        display: none !important;
    }

    body .filters-panel .clear-filters {
        width: auto !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 5px 4px !important;

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

        color: #54d4ff !important;
        background: transparent !important;

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

        font-size: 11px !important;
        font-weight: 850 !important;
    }


    /* --------------------------------------------------------
       CLOSED STATE
       -------------------------------------------------------- */

    body .filters-panel:not(.mobile-open)
    > .filter-section,

    body .filters-panel:not(.mobile-open)
    > .hidden-filter-count {
        display: none !important;
    }


    /* --------------------------------------------------------
       OPEN STATE — exactly two columns.
       This prevents PLAYER from jumping into a stray column.
       -------------------------------------------------------- */

    body .filters-panel.mobile-open {
        padding:
            0
            10px
            10px !important;

        display: grid !important;

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

        grid-template-areas:
            "filterHeader filterHeader"
            "set type"
            "player year"
            "team nationality" !important;

        gap: 7px !important;

        align-items: start !important;
    }

    body .filters-panel.mobile-open
    > .filters-header {
        grid-area: filterHeader !important;

        min-width: 0 !important;

        padding:
            0
            4px
            7px !important;

        border-bottom:
            1px solid
            rgba(65, 121, 151, .20) !important;
    }


    /* Explicit areas — no old order/grid-column rule can move PLAYER. */

    body .filters-panel.mobile-open
    > .filter-set {
        grid-area: set !important;
    }

    body .filters-panel.mobile-open
    > .filter-type {
        grid-area: type !important;
    }

    body .filters-panel.mobile-open
    > .filter-player {
        grid-area: player !important;
    }

    body .filters-panel.mobile-open
    > .filter-year {
        grid-area: year !important;
    }

    body .filters-panel.mobile-open
    > .filter-team {
        grid-area: team !important;
    }

    body .filters-panel.mobile-open
    > .filter-nationality {
        grid-area: nationality !important;
    }


    body .filters-panel.mobile-open
    > .filter-section {
        position: relative !important;

        grid-column: auto !important;
        grid-row: auto !important;

        width: 100% !important;
        min-width: 0 !important;

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

        display: block !important;

        overflow: visible !important;

        border: 0 !important;
    }


    /* --------------------------------------------------------
       Six filter buttons
       -------------------------------------------------------- */

    body .filters-panel.mobile-open
    .filter-section-title {
        position: relative !important;

        width: 100% !important;
        min-width: 0 !important;

        height: 40px !important;
        min-height: 40px !important;

        margin: 0 !important;

        padding:
            0
            28px
            0
            10px !important;

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

        color: #f4fbff !important;
        background: #081d2d !important;

        border: 1px solid #245d7b !important;
        border-radius: 9px !important;

        font-size: 10.5px !important;
        line-height: 1 !important;
        font-weight: 900 !important;
        letter-spacing: .2px !important;

        cursor: pointer !important;
    }

    body .filters-panel.mobile-open
    .filter-section-title::before {
        display: none !important;
        content: none !important;
    }

    body .filters-panel.mobile-open
    .filter-section-title::after {
        content: "⌄" !important;

        position: absolute !important;

        right: 10px !important;
        top: 50% !important;

        transform:
            translateY(-55%) !important;

        color: #d9f2fc !important;
        font-size: 11px !important;
    }

    body .filters-panel.mobile-open
    .filter-section.open
    .filter-section-title::after {
        transform:
            translateY(-45%)
            rotate(180deg) !important;
    }


    /* --------------------------------------------------------
       Individual filter dropdown.
       When one is opened it spans both filter columns.
       -------------------------------------------------------- */

    body .filters-panel.mobile-open
    > .filter-section.open {
        grid-column: 1 / -1 !important;
        grid-area: auto !important;
    }

    body .filters-panel.mobile-open
    .filter-section
    .filter-search,

    body .filters-panel.mobile-open
    .filter-section
    .checkbox-list {
        display: none !important;
    }

    body .filters-panel.mobile-open
    .filter-section.open
    .filter-search {
        position: static !important;

        display: block !important;

        width: 100% !important;
        height: 32px !important;

        margin:
            4px
            0
            3px !important;

        padding:
            0
            8px !important;

        font-size: 10.5px !important;
    }

    body .filters-panel.mobile-open
    .filter-section.open
    .checkbox-list {
        position: static !important;

        display: block !important;

        width: 100% !important;
        max-height: 150px !important;

        margin: 0 !important;
        padding:
            3px
            4px !important;

        overflow-y: auto !important;

        background: #061724 !important;

        border: 1px solid #204a63 !important;
        border-radius: 7px !important;
    }

    body .filters-panel.mobile-open
    .filter-section.open
    .checkbox-row {
        min-height: 25px !important;
        height: 25px !important;

        margin: 0 !important;
        padding:
            2px
            4px !important;

        gap: 5px !important;

        font-size: 10.5px !important;
        line-height: 1.1 !important;
    }
}


/* Keep the existing desktop sidebar behavior. */
@media (min-width: 1100px) {

    body .filters-panel > .filters-header {
        cursor: default !important;
    }
}

/* ============================================================
   FROZENHITS — RESPONSIVE CARD IMAGE SIZE
   Keeps phone portrait unchanged.
   Tablet + phone landscape get a capped image area so cards
   do not become excessively tall/wide.
   ============================================================ */

/* Tablet / wider compact screens */
@media (min-width: 761px) and (max-width: 1099px) {

    .card-image-container {
        width: 100% !important;
        height: clamp(190px, 28vw, 255px) !important;
        min-height: 0 !important;

        padding: 5px !important;

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

        overflow: hidden !important;
    }

    .card-image {
        width: 100% !important;
        max-width: 100% !important;

        height: 100% !important;
        max-height: 100% !important;

        margin: 0 auto !important;

        object-fit: contain !important;
        object-position: center !important;
    }
}


/* Phone turned sideways:
   use viewport HEIGHT too, so images shrink automatically. */
@media (max-width: 1099px) and (orientation: landscape) {

    .card-image-container {
        height: min(230px, 52vh) !important;
        min-height: 0 !important;
    }

    .card-image {
        width: 100% !important;
        max-width: 100% !important;

        height: 100% !important;
        max-height: 100% !important;

        object-fit: contain !important;
    }
}

/* ============================================================
   FROZENHITS — ADMIN TOOLS FIX
   - all main Admin Tools actions share one visual style
   - Not on Tradera submenu opens on click on desktop + touch
   - Hockey / Football / Pokémon submenu buttons are always
     available when JS adds .show
   ============================================================ */

.admin-tools-menu {
    gap: 8px !important;
}


/* ------------------------------------------------------------
   Main menu buttons — all identical
   ------------------------------------------------------------ */

.admin-tools-menu > #ordersButton,
.admin-tools-menu > #traderaSalesButton,
.admin-tools-menu #notOnTraderaButton,
.admin-tools-menu #deletedCardsButton {

    width: 100% !important;
    min-width: 0 !important;

    height: 48px !important;
    min-height: 48px !important;

    margin: 0 !important;
    padding: 0 15px !important;

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

    background:
        linear-gradient(
            180deg,
            #0d2a40 0%,
            #0a2235 100%
        ) !important;

    color: #d9effa !important;

    border: 1px solid #2a6888 !important;
    border-radius: 10px !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025) !important;

    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 850 !important;

    text-decoration: none !important;
    white-space: nowrap !important;

    transition:
        background .15s ease,
        border-color .15s ease,
        color .15s ease !important;
}


.admin-tools-menu > #ordersButton,
.admin-tools-menu > #traderaSalesButton {
    justify-content: flex-start !important;
}


.admin-tools-menu #notOnTraderaButton,
.admin-tools-menu #deletedCardsButton {
    justify-content: space-between !important;
    gap: 10px !important;
}


.admin-tools-menu > #ordersButton:hover,
.admin-tools-menu > #traderaSalesButton:hover,
.admin-tools-menu #notOnTraderaButton:hover,
.admin-tools-menu #deletedCardsButton:hover {

    background:
        linear-gradient(
            180deg,
            #12354f 0%,
            #0c2b41 100%
        ) !important;

    color: #ffffff !important;

    border-color: #49cfff !important;
}


/* Hide the old category underline effect inside Admin Tools. */

.admin-tools-menu .admin-category-button::after,
.admin-tools-menu .admin-category-button::before {
    display: none !important;
    content: none !important;
}


/* Small icon column on the two category-based admin actions. */

.admin-tools-menu .admin-nav-icon {
    width: 18px !important;
    min-width: 18px !important;

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

    color: #62d9ff !important;

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


/* Count pill */

.admin-tools-menu .admin-nav-count {
    min-width: 25px !important;
    height: 25px !important;

    padding: 0 6px !important;

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

    background: #092033 !important;
    color: #8adfff !important;

    border: 1px solid #23617f !important;
    border-radius: 999px !important;

    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 850 !important;
}


/* ------------------------------------------------------------
   NOT ON TRADERA submenu
   OLD CSS required :hover + .show, which made the buttons
   disappear on touch devices. JS already toggles .show.
   ------------------------------------------------------------ */

.admin-tools-menu .not-tradera-menu {
    display: none !important;

    position: static !important;
    transform: none !important;

    width: 100% !important;

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

    gap: 6px !important;

    background: #071a29 !important;

    border: 1px solid #1e506a !important;
    border-radius: 9px !important;

    box-shadow: none !important;
}


.admin-tools-menu .not-tradera-menu.show {
    display: flex !important;
    flex-direction: column !important;
}


/* Same submenu appearance on mouse hover is fine too,
   but hover is no longer required. */

.admin-tools-menu
.not-tradera-wrapper:hover
.not-tradera-menu.show {
    display: flex !important;
}


/* Hockey / Football / Pokémon */

.admin-tools-menu .not-tradera-subbutton {

    width: 100% !important;

    min-height: 38px !important;

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

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

    gap: 10px !important;

    background: #0c263a !important;
    color: #bad3df !important;

    border: 1px solid #245873 !important;
    border-radius: 7px !important;

    font-size: 10.5px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
}


.admin-tools-menu .not-tradera-subbutton:hover,
.admin-tools-menu .not-tradera-subbutton.active {
    background: #12354c !important;
    color: #ffffff !important;
    border-color: #46c9f6 !important;
}


.admin-tools-menu .not-tradera-subbutton span:last-child {
    min-width: 22px !important;
    height: 20px !important;

    padding: 0 5px !important;

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

    background: #071d2d !important;
    color: #76d8fa !important;

    border: 1px solid #205b77 !important;
    border-radius: 999px !important;

    font-size: 9px !important;
}


/* Keep the two wrappers from adding odd spacing. */

.admin-tools-menu .admin-nav-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;

    width: 100% !important;

    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
}


.admin-tools-menu .not-tradera-wrapper,
.admin-tools-menu .deleted-cards-wrapper {
    width: 100% !important;

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

    display: block !important;
}

/* ============================================================
   FROZENHITS — ADMIN TOOLS V2
   Clean text-only main menu + Orders counter
   ============================================================ */

/* No random triangle / square icons in the main Admin Tools list. */
.admin-tools-menu .admin-nav-icon {
    display: none !important;
}


/* All four main actions use the SAME layout. */
.admin-tools-menu > #ordersButton,
.admin-tools-menu > #traderaSalesButton,
.admin-tools-menu #notOnTraderaButton,
.admin-tools-menu #deletedCardsButton {

    width: 100% !important;
    min-width: 0 !important;

    height: 48px !important;
    min-height: 48px !important;

    margin: 0 !important;
    padding: 0 16px !important;

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

    gap: 12px !important;

    background:
        linear-gradient(
            180deg,
            #0d2a40 0%,
            #0a2235 100%
        ) !important;

    color: #e9f7ff !important;

    border: 1px solid #2a6888 !important;
    border-radius: 10px !important;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.025) !important;

    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 850 !important;

    letter-spacing: 0 !important;
    text-align: left !important;

    white-space: nowrap !important;
}


/* Tradera has no counter, so text remains left aligned. */
.admin-tools-menu > #traderaSalesButton {
    justify-content: flex-start !important;
}


/* Remove category-button effects from these admin buttons. */
.admin-tools-menu #notOnTraderaButton::before,
.admin-tools-menu #notOnTraderaButton::after,
.admin-tools-menu #deletedCardsButton::before,
.admin-tools-menu #deletedCardsButton::after {
    display: none !important;
    content: none !important;
}


.admin-tools-menu > #ordersButton:hover,
.admin-tools-menu > #traderaSalesButton:hover,
.admin-tools-menu #notOnTraderaButton:hover,
.admin-tools-menu #deletedCardsButton:hover {

    background:
        linear-gradient(
            180deg,
            #12354f 0%,
            #0c2b41 100%
        ) !important;

    color: #ffffff !important;

    border-color: #49cfff !important;
}


/* Same clean badge for Orders, Not on Tradera and Deleted cards. */
.admin-tools-menu .admin-nav-count {

    flex: 0 0 auto !important;

    min-width: 25px !important;
    height: 25px !important;

    margin-left: auto !important;
    padding: 0 6px !important;

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

    background: #092033 !important;
    color: #8adfff !important;

    border: 1px solid #23617f !important;
    border-radius: 999px !important;

    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 850 !important;
}


/* New orders stand out immediately. */
.admin-tools-menu .orders-count.has-orders {

    background:
        rgba(56, 189, 248, .16) !important;

    color:
        #dff8ff !important;

    border-color:
        #45cfff !important;

    box-shadow:
        0 0 0 2px
        rgba(56,189,248,.07),
        0 0 12px
        rgba(56,189,248,.13) !important;
}


/* Keep wrapper spacing identical. */
.admin-tools-menu .admin-nav-actions {
    width: 100% !important;

    display: grid !important;
    grid-template-columns: 1fr !important;

    gap: 8px !important;

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

.admin-tools-menu .not-tradera-wrapper,
.admin-tools-menu .deleted-cards-wrapper {
    width: 100% !important;

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



/* ============================================================
   FROZENHITS — CHECKOUT V1
   Shipping by weight + payment methods
   ============================================================ */

.checkout-v1-modal {
    width: min(760px, calc(100vw - 24px)) !important;
    max-height: min(92vh, 920px) !important;
    overflow-y: auto !important;
}

.checkout-section-title {
    margin: 18px 0 10px !important;
    color: #dff5ff !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

.checkout-section-spaced {
    margin-top: 24px !important;
}

.payment-method-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

.payment-method-card {
    position: relative !important;
    min-height: 72px !important;
    padding: 13px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 5px !important;
    cursor: pointer !important;
    background: linear-gradient(180deg, #0d2a40 0%, #091e30 100%) !important;
    border: 1px solid #285d79 !important;
    border-radius: 11px !important;
    transition: border-color .15s ease, background .15s ease, transform .15s ease !important;
}

.payment-method-card:hover {
    border-color: #45cfff !important;
    background: linear-gradient(180deg, #12364f 0%, #0b2940 100%) !important;
}

.payment-method-card:has(input:checked) {
    border-color: #57d8ff !important;
    background: linear-gradient(180deg, #123c59 0%, #0b2d46 100%) !important;
    box-shadow: 0 0 0 2px rgba(87, 216, 255, .08) !important;
}

.payment-method-card input {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    width: 15px !important;
    height: 15px !important;
    margin: 0 !important;
    accent-color: #45cfff !important;
}

.payment-method-name {
    color: #f2fbff !important;
    font-size: 13px !important;
    font-weight: 900 !important;
}

.payment-method-note {
    color: #7599ad !important;
    font-size: 10px !important;
    font-weight: 700 !important;
}

.checkout-payment-preview,
.checkout-success-payment {
    margin-top: 10px !important;
    padding: 12px 14px !important;
    background: rgba(10, 37, 56, .74) !important;
    border: 1px solid #285d79 !important;
    border-radius: 10px !important;
    color: #bcd5e1 !important;
    font-size: 11px !important;
    line-height: 1.55 !important;
}

.checkout-payment-preview a,
.checkout-success-payment a {
    color: #6edfff !important;
    font-weight: 800 !important;
}

.checkout-breakdown {
    overflow: hidden !important;
    background: rgba(7, 27, 42, .84) !important;
    border: 1px solid #244f68 !important;
    border-radius: 12px !important;
}

.checkout-breakdown-row {
    min-height: 42px !important;
    padding: 0 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    border-bottom: 1px solid rgba(49, 91, 115, .45) !important;
    color: #8ca9b8 !important;
    font-size: 11px !important;
}

.checkout-breakdown-row:last-child {
    border-bottom: 0 !important;
}

.checkout-breakdown-row strong {
    color: #ecfaff !important;
    font-size: 12px !important;
}

.checkout-shipping-total-row {
    background: rgba(20, 62, 89, .22) !important;
}

.checkout-total-row {
    min-height: 54px !important;
    background: rgba(34, 118, 159, .18) !important;
    color: #dff7ff !important;
    font-size: 13px !important;
    font-weight: 900 !important;
}

.checkout-total-row strong {
    color: #68ddff !important;
    font-size: 19px !important;
    font-weight: 950 !important;
}

.checkout-shipping-note {
    margin: 9px 2px 15px !important;
    color: #698a9d !important;
    font-size: 9.5px !important;
    line-height: 1.45 !important;
}

.checkout-success {
    padding: 20px 0 4px !important;
}

.checkout-success-badge {
    width: fit-content !important;
    margin-bottom: 12px !important;
    padding: 6px 9px !important;
    color: #8be7ff !important;
    background: rgba(31, 151, 195, .12) !important;
    border: 1px solid rgba(82, 207, 245, .35) !important;
    border-radius: 999px !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    letter-spacing: .08em !important;
}

.order-payment-shipping {
    margin: 12px 0 !important;
    padding: 11px 12px !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px 14px !important;
    background: rgba(9, 35, 53, .72) !important;
    border: 1px solid #234e66 !important;
    border-radius: 9px !important;
}

.order-payment-shipping div {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
}

.order-payment-shipping span {
    color: #6f91a4 !important;
    font-size: 9px !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
}

.order-payment-shipping strong {
    color: #dff5ff !important;
    font-size: 11px !important;
}

@media (max-width: 600px) {
    .payment-method-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .payment-method-card {
        min-height: 65px !important;
        padding: 11px 10px !important;
    }

    .order-payment-shipping {
        grid-template-columns: 1fr !important;
    }
}


/* ============================================================
   FROZENHITS — COUNTRY SELECT
   Real country dropdown for desktop, tablet and mobile.
   ============================================================ */

#checkoutCountry {
    cursor: pointer !important;
    color-scheme: dark;
}

#checkoutCountry option {
    background: #071522;
    color: #ffffff;
}

/* ============================================================
   FROZENHITS — SHIPPING METHOD V1.2
   Regular / Tracked selector
   ============================================================ */

.shipping-method-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

.shipping-method-card {
    position: relative !important;
    min-height: 72px !important;
    padding: 13px 14px !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 5px !important;

    cursor: pointer !important;

    background:
        linear-gradient(
            180deg,
            #0d2a40 0%,
            #091e30 100%
        ) !important;

    border: 1px solid #285d79 !important;
    border-radius: 11px !important;

    transition:
        border-color .15s ease,
        background .15s ease,
        transform .15s ease !important;
}

.shipping-method-card:hover {
    border-color: #45cfff !important;

    background:
        linear-gradient(
            180deg,
            #12364f 0%,
            #0b2940 100%
        ) !important;
}

.shipping-method-card:has(input:checked) {
    border-color: #57d8ff !important;

    background:
        linear-gradient(
            180deg,
            #123c59 0%,
            #0b2d46 100%
        ) !important;

    box-shadow:
        0 0 0 2px
        rgba(87, 216, 255, .08) !important;
}

.shipping-method-card:has(input:disabled) {
    opacity: .45 !important;
    cursor: not-allowed !important;
}

.shipping-method-card input {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;

    width: 15px !important;
    height: 15px !important;

    margin: 0 !important;

    accent-color: #45cfff !important;
}

.shipping-method-name {
    color: #f2fbff !important;
    font-size: 13px !important;
    font-weight: 900 !important;
}

.shipping-method-note {
    color: #7599ad !important;
    font-size: 10px !important;
    font-weight: 700 !important;
}

.checkout-shipping-method-message {
    margin-top: 9px !important;
    padding: 9px 11px !important;

    color: #a9d9ea !important;
    background: rgba(17, 57, 81, .6) !important;

    border: 1px solid #2b607a !important;
    border-radius: 9px !important;

    font-size: 10px !important;
    line-height: 1.45 !important;
}

@media (max-width: 600px) {

    .shipping-method-grid {
        grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)) !important;
        gap: 8px !important;
    }

    .shipping-method-card {
        min-height: 65px !important;
        padding: 11px 10px !important;
    }
}



/* ============================================================
   FROZENHITS — OMBUD V1.6
   Sweden-only PostNord Service Point option
   ============================================================ */

#shippingOmbudCard[hidden] {
    display: none !important;
}

/* ============================================================
   FROZENHITS — FILTER SIDEBAR POLISH
   - move the sidebar content slightly up
   - proper PLAYER icon
   - nicer Clear button
   ============================================================ */

@media (min-width: 1100px) {

    body .filters-panel {
        align-self: start !important;
        margin-top: -8px !important;
        padding-top: 6px !important;
    }

    body .filters-panel > .filters-header {
        min-height: 34px !important;
        padding: 0 2px 10px !important;
        margin-bottom: 6px !important;
        border-bottom: 1px solid rgba(65, 121, 151, .18) !important;
    }

    body .filters-panel > .filters-header > div {
        gap: 0 !important;
    }

    body .filters-panel .filters-title {
        padding-right: 0 !important;
        font-size: 14px !important;
        letter-spacing: .2px !important;
    }

    body .filters-panel .filters-title::after {
        display: none !important;
        content: none !important;
    }

    body .filters-panel .clear-filters {
        padding: 7px 12px !important;

        background: linear-gradient(
            180deg,
            rgba(15, 47, 70, .95) 0%,
            rgba(10, 33, 52, .96) 100%
        ) !important;

        border: 1px solid #2f6b8b !important;
        border-radius: 999px !important;

        color: #d7f4ff !important;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.03),
            0 0 0 1px rgba(67, 170, 225, .03) !important;

        font-size: 11px !important;
        line-height: 1 !important;
        font-weight: 900 !important;
        letter-spacing: .35px !important;

        transition:
            background .16s ease,
            border-color .16s ease,
            color .16s ease,
            transform .16s ease !important;
    }

    body .filters-panel .clear-filters:hover {
        background: linear-gradient(
            180deg,
            rgba(19, 61, 89, .98) 0%,
            rgba(11, 39, 61, .98) 100%
        ) !important;

        border-color: #49cfff !important;
        color: #ffffff !important;
        transform: translateY(-1px) !important;
    }

    body .filters-panel .clear-filters::before {
        content: "↺" !important;
        margin-right: 6px !important;
        color: #7fddff !important;
        font-size: 12px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
    }

    body .filters-panel > .filter-section {
        margin-top: 0 !important;
    }

    body .filters-panel .filter-section + .filter-section {
        margin-top: 10px !important;
    }

    body .filters-panel .filter-player .filter-section-title {
        padding-left: 40px !important;
    }

    body .filters-panel .filter-player .filter-section-title::before {
        content: "👤" !important;
        display: block !important;

        position: absolute !important;
        left: 14px !important;
        top: 50% !important;

        transform: translateY(-50%) !important;

        color: #86d7ff !important;
        font-size: 14px !important;
        line-height: 1 !important;
        font-weight: 700 !important;
    }
}

/* ============================================================
   FROZENHITS — PLAYER ICON FIX
   Replaces the emoji with a clean monochrome person icon
   ============================================================ */

@media (min-width: 1100px) {

    body .filters-panel .filter-player .filter-section-title {
        padding-left: 41px !important;
    }

    body .filters-panel .filter-player .filter-section-title::before {
        content: "" !important;

        display: block !important;
        position: absolute !important;

        left: 14px !important;
        top: 50% !important;

        width: 14px !important;
        height: 14px !important;

        transform: translateY(-50%) !important;

        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2386d7ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.5'/%3E%3Cpath d='M5.5 19c1.8-3 4-4.5 6.5-4.5s4.7 1.5 6.5 4.5'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: contain !important;
    }
}

/* ============================================================
   FROZENHITS — PLAYER ICON FIX V3
   Clearly visible filled person silhouette
   ============================================================ */

@media (min-width: 1100px) {

    body .filters-panel .filter-player .filter-section-title {
        padding-left: 44px !important;
    }

    body .filters-panel .filter-player .filter-section-title::before {
        content: "" !important;

        display: block !important;
        position: absolute !important;

        left: 14px !important;
        top: 50% !important;

        width: 18px !important;
        height: 18px !important;

        transform: translateY(-50%) !important;

        background: #7fdcff !important;

        -webkit-mask-image:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm0 2c-4.42 0-8 2.24-8 5v1h16v-1c0-2.76-3.58-5-8-5Z'/%3E%3C/svg%3E") !important;

        -webkit-mask-repeat: no-repeat !important;
        -webkit-mask-position: center !important;
        -webkit-mask-size: contain !important;

        mask-image:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm0 2c-4.42 0-8 2.24-8 5v1h16v-1c0-2.76-3.58-5-8-5Z'/%3E%3C/svg%3E") !important;

        mask-repeat: no-repeat !important;
        mask-position: center !important;
        mask-size: contain !important;

        background-image: none !important;
        border: 0 !important;
    }
}

/* =========================================
   MARK ORDER AS PAID
========================================= */

.mark-paid-button {
    padding: 12px 22px;

    border: 1px solid #22c55e;
    border-radius: 10px;

    background: rgba(34, 197, 94, 0.12);
    color: #22c55e;

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

    cursor: pointer;
    transition: 0.2s;
}

.mark-paid-button:hover {
    background: #22c55e;
    color: white;
}

.mark-paid-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}.mark-shipped-button {
    padding: 12px 22px;
    border: 1px solid #3b82f6;
    border-radius: 10px;
    background: rgba(59, 130, 246, 0.12);
    color: #3b82f6;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: 0.2s;
}

.mark-shipped-button:hover {
    background: #3b82f6;
    color: white;
}

.mark-shipped-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}/* ============================================================
   FROZENHITS — COMPACT ORDERS REDESIGN
   ============================================================ */


/* ---------- MODAL ---------- */

#ordersModal .checkout-modal-content {
    width: min(1080px, calc(100vw - 40px)) !important;
    max-width: 1080px !important;
    max-height: 88vh !important;

    padding: 22px 28px 28px !important;

    background:
        linear-gradient(
            180deg,
            rgba(12, 29, 44, 0.98),
            rgba(8, 22, 34, 0.99)
        ) !important;

    border: 1px solid rgba(76, 153, 194, 0.32) !important;
    border-radius: 18px !important;

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.55) !important;
}


/* ---------- TITLE ---------- */

#ordersModal h2 {
    margin: 0 0 14px !important;

    font-size: 24px !important;
    line-height: 1.1 !important;
}


/* ---------- TABS ---------- */

#ordersModal .orders-tabs {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;

    gap: 8px !important;

    margin: 0 0 18px !important;
}


#ordersModal .orders-tab {
    min-height: 38px !important;

    padding: 8px 15px !important;

    border-radius: 10px !important;

    font-size: 11px !important;
    font-weight: 900 !important;

    letter-spacing: 0.35px !important;

    background: rgba(18, 39, 56, 0.86) !important;
    border: 1px solid rgba(70, 126, 160, 0.38) !important;

    color: #92a7b8 !important;
}


#ordersModal .orders-tab:hover {
    background: rgba(27, 61, 84, 0.95) !important;
    color: #ffffff !important;
}


#ordersModal .orders-tab.active {
    background:
        linear-gradient(
            180deg,
            rgba(39, 103, 137, 0.42),
            rgba(24, 68, 94, 0.42)
        ) !important;

    border-color: #51b9e7 !important;

    color: #61c8f3 !important;

    box-shadow:
        inset 0 0 18px rgba(76, 190, 239, 0.07) !important;
}



/* ============================================================
   ORDER CARD
   ============================================================ */

#ordersModal .order-card {
    display: grid;

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

    gap: 12px 16px !important;

    margin-bottom: 16px !important;

    padding: 20px 22px !important;

    background:
        linear-gradient(
            145deg,
            rgba(19, 38, 55, 0.92),
            rgba(14, 31, 46, 0.94)
        ) !important;

    border: 1px solid rgba(104, 145, 172, 0.20) !important;

    border-radius: 16px !important;

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.16) !important;
}



/* ---------- HEADER ---------- */

#ordersModal .order-card-header {
    grid-column: 1 / -1 !important;

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

    padding-bottom: 12px !important;

    margin-bottom: 0 !important;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.07) !important;
}


#ordersModal .order-card-header > div > strong {
    font-size: 18px !important;
    color: #f6fbff !important;
}


#ordersModal .order-card-header > div > div {
    margin-top: 3px !important;

    font-size: 11px !important;

    color: #728a9e !important;
}



/* ---------- STATUS ---------- */

#ordersModal .order-status-select {
    min-width: 190px !important;

    height: 36px !important;

    padding:
        0 34px
        0 14px !important;

    border-radius: 999px !important;

    font-size: 11px !important;
    font-weight: 900 !important;

    letter-spacing: 0.3px !important;

    text-align: center !important;

    color: #68c9f0 !important;

    border:
        1px solid rgba(76, 184, 230, 0.45) !important;

    background:
        rgba(35, 82, 108, 0.32) !important;
}



/* ============================================================
   CUSTOMER + ADDRESS
   ============================================================ */

#ordersModal .order-customer,
#ordersModal .order-address {
    min-width: 0 !important;

    padding: 13px 15px !important;

    margin: 0 !important;

    border-radius: 11px !important;

    background:
        rgba(4, 18, 29, 0.38) !important;

    border:
        1px solid rgba(111, 153, 180, 0.08) !important;
}


#ordersModal .order-customer strong {
    display: block !important;

    margin-bottom: 6px !important;

    color: #ffffff !important;

    font-size: 15px !important;
}


#ordersModal .order-customer div,
#ordersModal .order-address div {
    margin-top: 3px !important;

    color: #a8b9c8 !important;

    font-size: 12px !important;

    line-height: 1.35 !important;
}



/* ============================================================
   PAYMENT / SHIPPING SUMMARY
   ============================================================ */

#ordersModal .order-payment-shipping {
    grid-column: 1 / -1 !important;

    display: grid !important;

    grid-template-columns:
        repeat(5, minmax(0, 1fr)) !important;

    gap: 8px !important;

    margin: 0 !important;

    padding: 10px !important;

    border-radius: 11px !important;

    border:
        1px solid rgba(66, 159, 205, 0.27) !important;

    background:
        rgba(5, 32, 49, 0.56) !important;
}


#ordersModal .order-payment-shipping > div {
    min-width: 0 !important;

    padding: 5px 8px !important;
}


#ordersModal .order-payment-shipping span {
    display: block !important;

    margin-bottom: 3px !important;

    color: #688da4 !important;

    font-size: 9px !important;
    font-weight: 700 !important;

    text-transform: uppercase !important;

    letter-spacing: 0.5px !important;
}


#ordersModal .order-payment-shipping strong {
    display: block !important;

    color: #e7f3fa !important;

    font-size: 12px !important;
    font-weight: 800 !important;
}



/* ============================================================
   CARDS INSIDE ORDER
   ============================================================ */

#ordersModal .order-items {
    grid-column: 1 / -1 !important;

    margin: 0 !important;
}


#ordersModal .order-item-card {
    display: grid !important;

    grid-template-columns:
        86px
        minmax(0, 1fr)
        85px !important;

    gap: 16px !important;

    align-items: center !important;

    padding: 14px 0 !important;

    border-top:
        1px solid rgba(255, 255, 255, 0.06) !important;

    border-bottom: none !important;
}



/* ---------- CARD IMAGE ---------- */

#ordersModal .order-item-image {
    width: 86px !important;
    height: 116px !important;

    border-radius: 8px !important;

    background:
        rgba(3, 14, 23, 0.65) !important;

    border:
        1px solid rgba(255, 255, 255, 0.06) !important;
}


#ordersModal .order-item-image img {
    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;
}



/* ---------- PLAYER ---------- */

#ordersModal .order-item-player {
    display: block !important;

    margin-bottom: 10px !important;

    color: #ffffff !important;

    font-size: 15px !important;
    font-weight: 800 !important;
}



/* ---------- CARD DETAILS ---------- */

#ordersModal .order-item-details {
    display: grid !important;

    grid-template-columns:
        repeat(4, minmax(90px, 1fr)) !important;

    gap: 8px 14px !important;
}


#ordersModal .order-item-details div {
    gap: 2px !important;
}


#ordersModal .order-item-details span {
    color: #6f8799 !important;

    font-size: 10px !important;
}


#ordersModal .order-item-details strong {
    color: #c7d5df !important;

    font-size: 12px !important;
    font-weight: 750 !important;

    line-height: 1.25 !important;
}



/* ---------- PRICE ---------- */

#ordersModal .order-item-price {
    min-width: 0 !important;

    text-align: right !important;
}


#ordersModal .order-item-price > strong {
    font-size: 16px !important;

    color: #ffffff !important;
}


#ordersModal .order-item-price span {
    margin-top: 3px !important;

    font-size: 10px !important;

    color: #73899a !important;
}



/* ============================================================
   TOTAL
   ============================================================ */

#ordersModal .order-total {
    grid-column: 1 / -1 !important;

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

    gap: 8px !important;

    margin: 0 !important;

    padding-top: 12px !important;

    border-top:
        1px solid rgba(255, 255, 255, 0.07) !important;

    color: #7e94a6 !important;

    font-size: 13px !important;
}


#ordersModal .order-total strong {
    color: #ffffff !important;

    font-size: 20px !important;
}



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

#ordersModal .order-actions {
    grid-column: 1 / -1 !important;

    display: flex !important;

    justify-content: flex-end !important;

    gap: 8px !important;

    margin: 0 !important;
}


#ordersModal .mark-paid-button,
#ordersModal .mark-shipped-button,
#ordersModal .cancel-order-button {
    min-height: 36px !important;

    padding: 8px 15px !important;

    border-radius: 9px !important;

    font-size: 11px !important;
    font-weight: 900 !important;
}



/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 760px) {

    #ordersModal .checkout-modal-content {
        width: calc(100vw - 18px) !important;

        padding: 16px !important;

        border-radius: 14px !important;
    }


    #ordersModal .order-card {
        grid-template-columns: 1fr !important;

        padding: 16px !important;
    }


    #ordersModal .order-card-header,
    #ordersModal .order-payment-shipping,
    #ordersModal .order-items,
    #ordersModal .order-total,
    #ordersModal .order-actions {
        grid-column: 1 !important;
    }


    #ordersModal .order-payment-shipping {
        grid-template-columns:
            repeat(2, 1fr) !important;
    }


    #ordersModal .order-item-card {
        grid-template-columns:
            70px
            minmax(0, 1fr) !important;
    }


    #ordersModal .order-item-image {
        width: 70px !important;
        height: 96px !important;
    }


    #ordersModal .order-item-details {
        grid-template-columns:
            repeat(2, 1fr) !important;
    }


    #ordersModal .order-item-price {
        grid-column: 1 / -1 !important;

        text-align: right !important;
    }


    #ordersModal .order-status-select {
        min-width: 165px !important;
    }

}/* ============================================================
   ORDERS MODAL — ALWAYS STAY AT TOP
   ============================================================ */

#ordersModal {
    align-items: flex-start !important;
    padding-top: 22px !important;
    padding-bottom: 22px !important;
    overflow-y: auto !important;
}

#ordersModal .checkout-modal-content {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}/* ============================================================
   CHECKOUT SUCCESS — FROZENHITS
   ============================================================ */


/* Hide old checkout header after successful order */

#checkoutModal.checkout-success-state
.checkout-modal-content > .collection-label,

#checkoutModal.checkout-success-state
.checkout-modal-content > h2,

#checkoutModal.checkout-success-state
.checkout-modal-content > .checkout-intro {

    display: none !important;
}


/* Success modal */

#checkoutModal.checkout-success-state
.checkout-modal-content {

    width: min(720px, calc(100vw - 30px));

    padding: 42px;

    background:
        linear-gradient(
            145deg,
            #0d2030,
            #091923
        );

    border:
        1px solid rgba(
            74,
            177,
            225,
            .32
        );

    border-radius: 20px;

    box-shadow:
        0 30px 80px
        rgba(0, 0, 0, .55);
}


/* Main success block */

.checkout-success {

    text-align: center;

    animation:
        checkoutSuccessIn
        .28s ease;
}


@keyframes checkoutSuccessIn {

    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Check icon */

.checkout-success-icon {

    width: 66px;
    height: 66px;

    margin:
        4px auto
        16px;

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

    border-radius: 50%;

    background:
        rgba(34, 197, 94, .12);

    border:
        1px solid rgba(
            34,
            197,
            94,
            .55
        );

    color: #4ade80;

    font-size: 31px;
    font-weight: 900;

    box-shadow:
        0 0 30px
        rgba(34, 197, 94, .10);
}


/* Badge */

.checkout-success-badge {

    display: inline-flex;

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

    padding:
        6px 12px;

    margin-bottom: 11px;

    border-radius: 999px;

    background:
        rgba(56, 189, 248, .09);

    border:
        1px solid rgba(
            56,
            189,
            248,
            .38
        );

    color: #67cdf5;

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

    letter-spacing: 1px;
}


/* Order number */

.checkout-success h3 {

    margin:
        0 0
        8px;

    color: #ffffff;

    font-size: 25px;
    font-weight: 900;
}


/* Small explanation */

.checkout-success-subtitle {

    max-width: 520px;

    margin:
        0 auto
        25px;

    color: #8fa6b8;

    font-size: 14px;

    line-height: 1.5;
}


/* Summary */

.checkout-success-summary-grid {

    display: grid;

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

    gap: 10px;

    margin-bottom: 14px;
}


.checkout-success-summary-item {

    display: flex;

    flex-direction: column;

    gap: 6px;

    padding:
        15px 12px;

    text-align: left;

    background:
        rgba(4, 20, 31, .55);

    border:
        1px solid rgba(
            71,
            129,
            163,
            .24
        );

    border-radius: 11px;
}


.checkout-success-summary-item span {

    color: #67879c;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .7px;
}


.checkout-success-summary-item strong {

    color: #e8f6ff;

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


/* Email confirmation */

.checkout-success-email {

    display: flex;

    align-items: center;

    gap: 9px;

    padding:
        11px 14px;

    margin-bottom: 18px;

    text-align: left;

    background:
        rgba(34, 197, 94, .06);

    border:
        1px solid rgba(
            34,
            197,
            94,
            .20
        );

    border-radius: 10px;

    color: #aabdc9;

    font-size: 12px;

    overflow-wrap: anywhere;
}


.checkout-success-email strong {

    color: #dff7e7;
}


.checkout-success-email-icon {

    color: #4ade80;

    font-weight: 900;
}


/* Payment box */

.checkout-success-payment-box {

    margin-top: 8px;

    padding: 22px;

    text-align: left;

    background:
        linear-gradient(
            145deg,
            rgba(8, 35, 52, .85),
            rgba(6, 27, 41, .88)
        );

    border:
        1px solid rgba(
            56,
            189,
            248,
            .34
        );

    border-radius: 14px;
}


.checkout-success-payment-title {

    margin-bottom: 14px;

    color: #5fc8f3;

    font-size: 13px;

    font-weight: 900;

    letter-spacing: 1px;
}


.checkout-success-payment {

    color: #c5d4de;

    font-size: 17px;

    line-height: 1.9;

    overflow-wrap: anywhere;
}


.checkout-success-payment strong {

    color: #ffffff;

    font-size: 18px;

    font-weight: 900;
}


.checkout-success-payment a {

    color: #5dccfa;

    font-weight: 800;

    text-decoration: none;
}


.checkout-success-payment a:hover {

    text-decoration: underline;
}

.checkout-success-payment br {
    content: "";
}

.checkout-success-payment-box .checkout-success-payment {
    padding: 16px 18px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(95, 200, 243, 0.22);
    border-radius: 12px;
}

.checkout-success-payment strong {

    color: #ffffff;

    font-weight: 800;
}


.checkout-success-payment a {

    color: #5dccfa;

    font-weight: 800;

    text-decoration: none;
}


.checkout-success-payment a:hover {

    text-decoration: underline;
}


/* Continue shopping */

.checkout-success-close {

    width: 100%;

    min-height: 52px;

    margin-top: 18px;

    padding:
        0 20px;

    display: flex;

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

    gap: 10px;

    border: none;

    border-radius: 11px;

    background:
        linear-gradient(
            180deg,
            #5ec5ef,
            #45ade0
        );

    color: #062033;

    font-size: 15px;

    font-weight: 900;

    cursor: pointer;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        filter .18s ease;

    box-shadow:
        0 8px 25px
        rgba(56, 189, 248, .15);
}


.checkout-success-close:hover {

    transform:
        translateY(-1px);

    filter:
        brightness(1.08);

    box-shadow:
        0 12px 30px
        rgba(56, 189, 248, .23);
}


/* MOBILE */

@media (max-width: 600px) {

    #checkoutModal.checkout-success-state
    .checkout-modal-content {

        padding:
            28px 18px;
    }


    .checkout-success-summary-grid {

        grid-template-columns:
            1fr;
    }


    .checkout-success-icon {

        width: 58px;
        height: 58px;

        font-size: 27px;
    }


    .checkout-success h3 {

        font-size: 21px;
    }

}/* ============================================================
   PAYMENT INSTRUCTIONS — CLEAN ROWS
   ============================================================ */

.checkout-success-payment {
    font-size: 14px !important;
    line-height: 1.4 !important;
}


.payment-instruction-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
}


.payment-instruction-row {
    display: grid;

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

    gap: 12px;

    align-items: baseline;
}


/* Pay:, Bank:, Account:, IBAN: */

.payment-instruction-label {
    color: #ffffff;

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


/* 74 kr, banka, účet, IBAN... */

.payment-instruction-value {
    color: #facc15;

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

    overflow-wrap: anywhere;
}


.payment-instruction-value a {
    color: #facc15;

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

    text-decoration: none;
}


.payment-instruction-value a:hover {
    text-decoration: underline;
}


/* Remove old oversized strong styling */

.checkout-success-payment strong {
    font-size: inherit !important;
}


/* MOBILE */

@media (max-width: 600px) {

    .payment-instruction-row {
        grid-template-columns:
            82px
            minmax(0, 1fr);

        gap: 8px;
    }

    .payment-instruction-label,
    .payment-instruction-value {
        font-size: 13px;
    }
}/* ============================================================
   PERFORMANCE — DON'T RENDER OFFSCREEN CARDS
   ============================================================ */

.card-row {
    content-visibility: auto;
    contain-intrinsic-size: auto 700px;
}/* ============================================================
   PERFORMANCE — LIGHTER VISUAL EFFECTS
   ============================================================ */

body {
    background-attachment: scroll !important;
}

.site-header {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.category-nav {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}/* ============================================================
   LOAD MORE CARDS
   ============================================================ */

.load-more-wrapper {
    grid-column: 1 / -1;
    width: 100%;

    display: flex;
    justify-content: center;

    padding: 18px 0 10px;
}

.load-more-button {
    min-width: 240px;
    padding: 13px 24px;

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

    gap: 10px;

    background:
        linear-gradient(
            180deg,
            rgba(22, 67, 94, .95),
            rgba(11, 42, 62, .95)
        );

    border:
        1px solid
        rgba(83, 184, 231, .5);

    border-radius: 10px;

    color: #dff6ff;

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

    letter-spacing: .5px;

    cursor: pointer;

    transition:
        transform .18s ease,
        background .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.load-more-button span {
    color: #5dccfa;
    font-size: 11px;
}

.load-more-button:hover {
    transform: translateY(-2px);

    border-color: #5dccfa;

    background:
        linear-gradient(
            180deg,
            rgba(29, 87, 120, .98),
            rgba(14, 52, 75, .98)
        );

    box-shadow:
        0 8px 25px
        rgba(52, 170, 225, .12);
}/* =========================================
   VISIBLE FILTER SCROLLBARS
========================================= */

.filters-panel .filter-section.open .checkbox-list {
    overflow-y: scroll !important;
    scrollbar-gutter: stable !important;

    scrollbar-width: auto !important;
    scrollbar-color: #38bdf8 #071522 !important;
}


/* Chrome / Edge */

.filters-panel .filter-section.open .checkbox-list::-webkit-scrollbar {
    width: 11px !important;
    display: block !important;
}

.filters-panel .filter-section.open .checkbox-list::-webkit-scrollbar-track {
    background: #071522 !important;
    border-left: 1px solid #1d4057 !important;
}

.filters-panel .filter-section.open .checkbox-list::-webkit-scrollbar-thumb {
    background: #38bdf8 !important;
    border-radius: 10px !important;
    border: 2px solid #071522 !important;
}

.filters-panel .filter-section.open .checkbox-list::-webkit-scrollbar-thumb:hover {
    background: #67d0ff !important;
}/* =========================================
   TRADERA HEALTH CHECK
========================================= */

#traderaStatusModal .modal-content {
    width: min(760px, 92vw);
    max-height: 85vh;
    overflow-y: auto;
    padding: 38px;
}


/* STATUS BANNER */

.tradera-health-banner {
    margin-top: 26px;
    margin-bottom: 22px;

    padding: 16px 18px;

    border-radius: 12px;

    font-size: 14px;
    font-weight: 900;
    letter-spacing: .6px;
}


.tradera-health-banner.ok {
    background: rgba(34, 197, 94, .08);
    border: 1px solid rgba(34, 197, 94, .25);
    color: #86efac;
}


.tradera-health-banner.warning {
    background: rgba(251, 191, 36, .08);
    border: 1px solid rgba(251, 191, 36, .25);
    color: #fbbf24;
}


.tradera-health-banner.error {
    background: rgba(239, 68, 68, .08);
    border: 1px solid rgba(239, 68, 68, .25);
    color: #fca5a5;
}


/* STATUS GRID */

.tradera-health-grid {
    border: 1px solid #1e3448;
    border-radius: 14px;

    overflow: hidden;

    background: rgba(5, 16, 27, .35);
}


.tradera-health-row {
    min-height: 58px;

    padding: 0 18px;

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

    gap: 20px;

    border-bottom: 1px solid #1e3448;
}


.tradera-health-row:last-child {
    border-bottom: 0;
}


.tradera-health-row span {
    color: #8198ad;

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


.tradera-health-row strong {
    color: #ffffff;

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

    text-align: right;
}


/* LAST CHECK */

.tradera-health-time {
    margin-top: 16px;

    color: #637c92;

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


/* CHECK BUTTON */

#runTraderaStatusCheck,
.tradera-health-check-button {
    width: 100%;

    margin-top: 22px;
    padding: 14px 20px;

    background:
        linear-gradient(
            180deg,
            #38bdf8,
            #159bd3
        );

    color: #031522;

    border: 1px solid #67d4fa;
    border-radius: 10px;

    font-size: 12px;
    font-weight: 900;
    letter-spacing: .7px;

    cursor: pointer;

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


#runTraderaStatusCheck:hover,
.tradera-health-check-button:hover {
    transform: translateY(-1px);

    background:
        linear-gradient(
            180deg,
            #67d4fa,
            #38bdf8
        );

    box-shadow:
        0 8px 24px rgba(56, 189, 248, .18);
}


#runTraderaStatusCheck:disabled {
    opacity: .55;
    cursor: wait;
    transform: none;
}


/* LOADING */

.tradera-health-loading {
    margin-top: 24px;

    padding: 20px;

    background: rgba(56, 189, 248, .05);

    border: 1px solid rgba(56, 189, 248, .18);
    border-radius: 12px;

    color: #8aa4b8;

    text-align: center;

    font-size: 13px;
}


/* MOBILE */

@media (max-width: 600px) {

    #traderaStatusModal .modal-content {
        padding: 28px 20px;
    }

    .tradera-health-row {
        align-items: flex-start;
        flex-direction: column;

        gap: 5px;

        padding: 14px 16px;
    }

    .tradera-health-row strong {
        text-align: left;
    }
}/* =========================================
   TRADERA UNLINKED ITEMS
========================================= */

.tradera-health-clickable {
    cursor: pointer;
    transition: background .15s ease;
}

.tradera-health-clickable:hover {
    background: rgba(56, 189, 248, .06);
}

.tradera-health-clickable strong {
    color: #fbbf24;
}


.tradera-unlinked-details {
    padding: 12px 0 0;
}


.tradera-unlinked-item {
    margin-top: 10px;
    padding: 14px 16px;

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

    background: rgba(251, 191, 36, .04);

    border: 1px solid rgba(251, 191, 36, .18);
    border-radius: 10px;
}


.tradera-unlinked-item strong {
    display: block;
    color: #ffffff;
    font-size: 13px;
}


.tradera-unlinked-item small {
    display: block;
    margin-top: 4px;

    color: #637c92;
    font-size: 10px;
}


.tradera-unlinked-item > span {
    flex-shrink: 0;

    color: #fbbf24;
    font-size: 11px;
    font-weight: 900;
}


.tradera-unlinked-empty {
    padding: 16px;

    color: #8198ad;
    text-align: center;
    font-size: 12px;
}/* =========================================
   OUT OF STOCK — ADMIN TOOLS
========================================= */

.admin-tools-menu #outOfStockButton {

    width: 100% !important;
    min-width: 0 !important;

    height: 48px !important;
    min-height: 48px !important;

    margin: 0 !important;
    padding: 0 16px !important;

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

    gap: 12px !important;

    background:
        linear-gradient(
            180deg,
            #0d2a40 0%,
            #0a2235 100%
        ) !important;

    color: #e9f7ff !important;

    border: 1px solid #2a6888 !important;
    border-radius: 10px !important;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.025) !important;

    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 850 !important;

    letter-spacing: 0 !important;
    text-align: left !important;

    white-space: nowrap !important;
}


.admin-tools-menu #outOfStockButton::before,
.admin-tools-menu #outOfStockButton::after {
    display: none !important;
    content: none !important;
}


.admin-tools-menu #outOfStockButton:hover {

    background:
        linear-gradient(
            180deg,
            #12354f 0%,
            #0c2b41 100%
        ) !important;

    color: #ffffff !important;
    border-color: #49cfff !important;
}


.admin-tools-menu .out-of-stock-wrapper {

    width: 100% !important;

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

    display: block !important;
}/* =========================
   ADMIN COUNTS - YELLOW
========================= */

#notOnTraderaCount,
#notTraderaHockeyCount,
#notTraderaFootballCount,
#notTraderaPokemonCount,
#outOfStockCount,
#deletedCardsCount {
    color: #ffd54a !important;
    border-color: rgba(255, 213, 74, 0.65) !important;
    box-shadow:
        0 0 10px rgba(255, 213, 74, 0.18),
        inset 0 0 8px rgba(255, 213, 74, 0.08) !important;
}


/* ============================================================
   FROZENHITS — FILTER COMPACT + PLAYER FIX
   2026-09-13
   ============================================================ */

/* ATTRIBUTES is no longer a separate visible section. */
.filter-attributes {
    display: none !important;
}

/* Slightly tighter spacing between filter boxes. */
@media (min-width: 1100px) {
    body .filters-panel .filter-section + .filter-section {
        margin-top: 6px !important;
    }
}

/*
 * Compact option rows.
 * Prevent long team/player names from creating huge two-line rows.
 */
@media (min-width: 701px) {

    body .filters-panel .filter-section.open .checkbox-list {
        padding: 2px 4px !important;
    }

    body .filters-panel .filter-section.open .checkbox-row {
        min-height: 24px !important;
        height: 24px !important;
        margin: 0 !important;
        padding: 1px 4px !important;
        gap: 5px !important;
        font-size: 10.5px !important;
        line-height: 1 !important;
    }

    body .filters-panel .filter-section.open
    .checkbox-row + .checkbox-row {
        margin-top: 0 !important;
    }

    body .filters-panel .checkbox-label-text {
        min-width: 0 !important;
        flex: 1 1 auto !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        line-height: 1 !important;
    }

    body .filters-panel .checkbox-count {
        min-width: 29px !important;
        height: 20px !important;
        padding: 0 6px !important;
        flex: 0 0 auto !important;
        font-size: 10px !important;
    }

    body .filters-panel .checkbox-row input[type="checkbox"] {
        width: 14px !important;
        height: 14px !important;
        min-width: 14px !important;
        flex: 0 0 14px !important;
        margin: 0 !important;
    }
}

/* TYPE now contains both primary types and Rookie/Limited attributes. */
body .filters-panel .filter-type.open .checkbox-list {
    max-height: 245px !important;
}


/* ============================================================
   TYPE ROW — ALLOW MULTIPLE TYPES TO WRAP
   ============================================================ */

@media (min-width: 701px) {

    .home-card-type-row {
        height: auto !important;
        min-height: 27px !important;
        align-items: stretch !important;
    }

    .home-card-type-value {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;

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

        min-height: 27px !important;
        padding-top: 5px !important;
        padding-bottom: 5px !important;

        line-height: 1.25 !important;
        overflow-wrap: anywhere !important;
    }
}


/* Mobile cards can wrap too, but stay compact. */
@media (max-width: 700px) {

    .home-card-type-row {
        height: auto !important;
        min-height: 24px !important;
    }

    .home-card-type-value {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;

        line-height: 1.15 !important;
        overflow-wrap: anywhere !important;
    }
}
/* =========================================
   FROZENHITS LOGO - COLOR OVERRIDE
========================================= */

.site-logo .logo-main {
    background: linear-gradient(
        180deg,
        #7de3ff 0%,
        #42c8f5 50%,
        #25aee5 100%
    ) !important;

    -webkit-background-clip: text !important;
    background-clip: text !important;

    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}


.site-logo .logo-accent {
    background: none !important;

    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;

    -webkit-text-fill-color: #ffffff !important;
    color: #ffffff !important;
}

/* ============================================================
   FROZENHITS — LIGHT THEME PREVIEW
   2026-09-17
   ------------------------------------------------------------
   Safe final override: keeps the current HTML + JavaScript hooks
   unchanged and only replaces presentation/colors.
   ============================================================ */

:root {
    --fh-bg: #f4f8fc !important;
    --fh-bg-2: #eef5fa !important;
    --fh-panel: #ffffff !important;
    --fh-panel-2: #f7fbfe !important;
    --fh-border: #cbddea !important;
    --fh-border-soft: rgba(42, 111, 151, .14) !important;
    --fh-text: #102a43 !important;
    --fh-muted: #648096 !important;
    --fh-blue: #1fa9ee !important;
    --fh-cyan: #35bdf4 !important;
    --fh-neon: #1fa9ee !important;
    --fh-neon-soft: rgba(31, 169, 238, .10) !important;
    --fh-neon-border: #8cccf0 !important;
    --fh-panel-dark: #ffffff !important;
    --fh-panel-mid: #f7fbfe !important;
    --fh-text-soft: #648096 !important;
}

html,
body {
    background: #f4f8fc !important;
}

body {
    color: #102a43 !important;
    background:
        radial-gradient(circle at 8% -5%, rgba(42, 169, 232, .09), transparent 27%),
        radial-gradient(circle at 92% 0%, rgba(115, 187, 226, .08), transparent 26%),
        linear-gradient(180deg, #ffffff 0%, #f4f8fc 24%, #f7fafc 100%) !important;
}

/* ---------- HEADER ---------- */
.site-header {
    background: rgba(255,255,255,.96) !important;
    border-bottom: 1px solid #d8e6ef !important;
    box-shadow: 0 4px 18px rgba(35, 76, 106, .055) !important;
}

.site-logo .logo-main {
    background: linear-gradient(180deg, #57cfff 0%, #24aeea 52%, #148dcb 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

.site-logo .logo-accent {
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: #15324b !important;
    color: #15324b !important;
}

.brand-subtitle {
    color: #6d879b !important;
}

.brand-card-count,
.nav-card-count {
    background: #ffffff !important;
    color: #102a43 !important;
    border-color: #b9d8e9 !important;
    box-shadow: 0 5px 16px rgba(43, 97, 131, .06) !important;
}

.brand-card-count strong,
.nav-card-count span,
#totalCardCount {
    color: #102a43 !important;
}

.brand-card-count small,
.nav-card-count small {
    color: #6c8497 !important;
}

#globalSearch,
.header-search input {
    background: #ffffff !important;
    color: #17324b !important;
    border-color: #bfd9e8 !important;
    box-shadow: 0 3px 14px rgba(50, 100, 132, .045) !important;
}

#globalSearch::placeholder,
.header-search input::placeholder {
    color: #8198aa !important;
}

#globalSearch:focus,
.header-search input:focus {
    border-color: #35afe8 !important;
    box-shadow: 0 0 0 3px rgba(31, 169, 238, .10) !important;
}

.search-icon { color: #397aa4 !important; }

.add-card-link,
.admin-tools-trigger,
.admin-login-button {
    background: #ffffff !important;
    color: #17324b !important;
    border-color: #b7d5e6 !important;
    box-shadow: 0 3px 12px rgba(45, 91, 121, .045) !important;
}

.add-card-link:hover,
.admin-tools-trigger:hover,
.admin-login-button:hover {
    background: #f2f9fd !important;
    color: #0c75ae !important;
    border-color: #54b6e7 !important;
}

.admin-tools-trigger-arrow { color: #238fc7 !important; }

.cart-button {
    background: linear-gradient(180deg, #67caff 0%, #35afea 100%) !important;
    color: #07304c !important;
    border-color: #35afea !important;
    box-shadow: 0 5px 16px rgba(31, 169, 238, .15) !important;
}

.cart-button:hover {
    background: linear-gradient(180deg, #7bd3ff 0%, #46b8ee 100%) !important;
}

.cart-count {
    background: #0b6fa5 !important;
    color: #ffffff !important;
}

/* ---------- ADMIN MENU ---------- */
.admin-tools-menu,
.not-tradera-menu {
    background: #ffffff !important;
    border-color: #bfd9e8 !important;
    box-shadow: 0 18px 42px rgba(31, 68, 94, .16) !important;
}

.admin-tools-menu > .add-card-link,
.admin-tools-menu > #ordersButton,
.admin-tools-menu > #traderaSalesButton,
.admin-tools-menu #notOnTraderaButton,
.admin-tools-menu #deletedCardsButton,
.admin-tools-menu #outOfStockButton,
.admin-tools-menu .admin-category-button,
.not-tradera-subbutton {
    background: linear-gradient(180deg, #ffffff 0%, #f4f9fc 100%) !important;
    color: #17324b !important;
    border-color: #c3dce9 !important;
    box-shadow: inset 0 1px 0 #ffffff !important;
}

.admin-tools-menu > .add-card-link:hover,
.admin-tools-menu > #ordersButton:hover,
.admin-tools-menu > #traderaSalesButton:hover,
.admin-tools-menu #notOnTraderaButton:hover,
.admin-tools-menu #deletedCardsButton:hover,
.admin-tools-menu #outOfStockButton:hover,
.admin-tools-menu .admin-category-button:hover,
.not-tradera-subbutton:hover {
    background: #eef8fd !important;
    color: #0879b3 !important;
    border-color: #55b7e6 !important;
}

/* ---------- CATEGORY NAV ---------- */
.category-nav {
    background: rgba(255,255,255,.93) !important;
    border-top-color: #e2edf3 !important;
    border-bottom: 1px solid #dce8f0 !important;
}

.collection-tabs .category-button,
.category-nav .category-button {
    background: #ffffff !important;
    color: #26455d !important;
    border-color: #c8dce8 !important;
    box-shadow: 0 3px 11px rgba(39, 81, 110, .045) !important;
}

.collection-tabs .category-button:hover,
.category-nav .category-button:hover {
    background: #f5fbff !important;
    color: #0c78b1 !important;
    border-color: #68bce5 !important;
}

.collection-tabs .category-button.active,
.category-nav .category-button.active {
    background: linear-gradient(180deg, #eef9ff 0%, #e5f5fd 100%) !important;
    color: #0a6fa7 !important;
    border-color: #45b2eb !important;
    box-shadow:
        0 0 0 2px rgba(46, 174, 235, .06),
        0 5px 16px rgba(49, 126, 168, .08) !important;
}

.category-label { color: inherit !important; }
.category-chevron { color: #4e91ba !important; }
.category-button.active .category-chevron { color: #1186c1 !important; }
.category-card-count {
    background: #eef7fc !important;
    color: #315f7d !important;
    border-color: #c7deeb !important;
}
.category-button.active .category-card-count {
    background: #ffffff !important;
    color: #0a70a8 !important;
    border-color: #a8d7ef !important;
}

.category-icon {
    background: #f0f7fb !important;
    border-color: #d1e3ed !important;
}

/* ---------- SORT ---------- */
.sort-label { color: #617c90 !important; }

.custom-sort-trigger,
#sortSelect {
    background: #ffffff !important;
    color: #17324b !important;
    border-color: #b8d7e7 !important;
    box-shadow: 0 3px 11px rgba(40, 83, 111, .045) !important;
}

.custom-sort-trigger:hover,
.custom-sort.open .custom-sort-trigger,
#sortSelect:focus {
    border-color: #4fb4e7 !important;
}

.custom-sort-icon { color: #1187c2 !important; }
.custom-sort-arrow { color: #527a94 !important; }

.custom-sort-menu {
    background: #ffffff !important;
    border-color: #b9d6e6 !important;
    box-shadow: 0 14px 30px rgba(31, 68, 94, .16) !important;
}

.custom-sort-option {
    background: transparent !important;
    color: #2a475d !important;
}

.custom-sort-option:hover {
    background: #eef8fd !important;
    color: #0a75ad !important;
}

.custom-sort-option.active {
    background: #def2fc !important;
    color: #086c9f !important;
}

/* ---------- FILTER SIDEBAR ---------- */
.filters-panel {
    background: rgba(255,255,255,.90) !important;
    border-color: #d2e2eb !important;
    box-shadow: 0 5px 20px rgba(39, 78, 104, .045) !important;
    scrollbar-color: #8ccae9 #eef5f9 !important;
}

.filters-panel > .filters-header {
    border-bottom-color: #dce8ef !important;
}

.filters-title { color: #17324b !important; }
.filter-status { color: #71899b !important; }

.clear-filters,
body .filters-panel .clear-filters {
    background: linear-gradient(180deg, #ffffff 0%, #f1f8fc 100%) !important;
    color: #176f9f !important;
    border: 1px solid #b8d7e7 !important;
    box-shadow: none !important;
}

.clear-filters:hover,
body .filters-panel .clear-filters:hover {
    background: #eaf7fd !important;
    color: #096b9f !important;
    border-color: #57b6e4 !important;
}

.filter-section {
    border-bottom-color: #e2edf2 !important;
}

.filter-section-title {
    color: #29465c !important;
    background: #ffffff !important;
    border-color: #cbdfea !important;
    box-shadow: none !important;
}

.filter-section-title::before,
.filter-section-title::after {
    color: #1b8bc3 !important;
}

.filter-section.has-selection .filter-section-title {
    color: #096c9f !important;
    border-color: #58b8e6 !important;
    background: linear-gradient(180deg, #eef9fe 0%, #e6f5fc 100%) !important;
    box-shadow: 0 0 0 2px rgba(31,169,238,.05) !important;
}

.filter-section.has-selection .filter-section-title::before {
    color: #0c86be !important;
}

.filter-search {
    background: #ffffff !important;
    color: #17324b !important;
    border-color: #c6dce8 !important;
}

.filter-search::placeholder { color: #879aaa !important; }
.filter-search:focus { border-color: #45afe4 !important; }

.checkbox-list {
    background: #ffffff !important;
}

.checkbox-row {
    color: #4f697d !important;
}

.checkbox-row:hover {
    background: #f2f9fd !important;
    color: #17324b !important;
}

.checkbox-row:has(input:checked) {
    background: #e8f6fd !important;
}

.checkbox-row input:checked + .checkbox-label-text {
    color: #0b6e9f !important;
}

.checkbox-count {
    background: #f0f6fa !important;
    color: #607d90 !important;
    border-color: #d4e3eb !important;
}

.checkbox-row:has(input:checked) .checkbox-count {
    background: #ffffff !important;
    color: #0b75aa !important;
    border-color: #8dcae8 !important;
}

.filters-panel .filter-section.open .checkbox-list {
    scrollbar-color: #63bce7 #edf5f9 !important;
}
.filters-panel .filter-section.open .checkbox-list::-webkit-scrollbar-track {
    background: #edf5f9 !important;
    border-left-color: #d6e4eb !important;
}
.filters-panel .filter-section.open .checkbox-list::-webkit-scrollbar-thumb {
    background: #63bce7 !important;
    border-color: #edf5f9 !important;
}

/* ---------- CATALOG / CARDS ---------- */
.collection-heading h2,
.catalog-title,
.catalog-heading,
.card-title {
    color: #102a43 !important;
}

.collection-label,
.intro-eyebrow { color: #148bc7 !important; }
.result-count,
.toolbar-message { color: #6c8497 !important; }
.result-count strong { color: #17324b !important; }
.result-toolbar { border-bottom-color: #dbe8ef !important; }

.card-row {
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;
    border-color: #c9dde9 !important;
    box-shadow: 0 7px 22px rgba(38, 77, 103, .065) !important;
}

.card-row:hover {
    border-color: #76bee2 !important;
    box-shadow: 0 12px 28px rgba(38, 87, 118, .11) !important;
}

.card-image-container {
    background: #f7fafc !important;
    border-color: #d2e2eb !important;
}

.card-year,
.card-year-badge,
.card-kicker {
    background: #eef8fd !important;
    color: #0b7eB8 !important;
    border-color: #c4e4f3 !important;
}

.card-subtitle,
.card-set-name,
.card-team-line,
.card-detail-team,
.card-table-team,
.card-extra-line,
.catalog-line {
    color: #627b8f !important;
}

.card-detail-row,
.card-detail-line,
.card-meta-row,
.home-card-data-row {
    border-color: #dbe7ee !important;
}

.home-card-data-table,
.card-info-table-layout {
    background: #ffffff !important;
    border-color: #cbdfea !important;
}

.home-card-data-label,
.card-detail-label,
.modal-info-label {
    color: #58748a !important;
}

.home-card-data-value,
.card-detail-value,
.card-table-title,
.home-card-type-value {
    color: #17324b !important;
}

.card-number-value,
.card-limited-value,
.home-card-limited-value {
    color: #0b86c1 !important;
}

.admin-location-value,
.card-chip-location {
    color: #b97b00 !important;
}

.card-chip,
.card-chip-limited,
.card-chip-location {
    background: #f3f8fb !important;
    border-color: #d6e4ec !important;
}

.card-side {
    border-top-color: #d9e7ee !important;
}

.card-price,
.card-price-stock-row .card-price {
    color: #159bd3 !important;
}

.stock-text { color: #607c91 !important; }
.stock-text.sold-out { color: #d84e65 !important; }

.add-button,
.card-add-wide,
#checkoutButton,
#completeOrderButton,
.save-edit-button,
.tradera-create-button,
#runTraderaStatusCheck,
.tradera-health-check-button {
    background: linear-gradient(180deg, #63c8fb 0%, #35afea 100%) !important;
    color: #07304c !important;
    border-color: #35afea !important;
    box-shadow: 0 6px 18px rgba(31, 169, 238, .13) !important;
}

.add-button:hover,
.card-add-wide:hover,
#checkoutButton:hover,
#completeOrderButton:hover,
.save-edit-button:hover,
.tradera-create-button:hover,
#runTraderaStatusCheck:hover,
.tradera-health-check-button:hover {
    background: linear-gradient(180deg, #78d1fc 0%, #49b9ed 100%) !important;
}

.add-button:disabled,
#completeOrderButton:disabled {
    background: #e1eaf0 !important;
    color: #8ba0af !important;
}

.edit-button,
.restore-button {
    background: #eef7fc !important;
    color: #117caf !important;
    border-color: #9ccfe8 !important;
}

.edit-button:hover,
.restore-button:hover {
    background: #e1f2fb !important;
    color: #086c9f !important;
    border-color: #5db6df !important;
}

.delete-button,
.cart-item-actions .remove-cart-item,
.cancel-order-button {
    background: #fff0f2 !important;
    color: #d83f58 !important;
    border-color: #f2aab5 !important;
}

.delete-button:hover,
.cart-item-actions .remove-cart-item:hover,
.cancel-order-button:hover {
    background: #ffe6ea !important;
    border-color: #e87f90 !important;
}

.tradera-button,
.sell-tradera-button,
.tradera-button.listed-on-tradera,
.tradera-complete-button {
    background: #edf9f1 !important;
    color: #148348 !important;
    border-color: #91d6ad !important;
}

.tradera-button:hover,
.sell-tradera-button:hover,
.tradera-complete-button:hover {
    background: #e1f6e9 !important;
    color: #0f713d !important;
    border-color: #63c38a !important;
}

/* ---------- TRUST / LOAD MORE ---------- */
.trust-strip,
.trust-item,
.load-more-button {
    background: #ffffff !important;
    color: #29465c !important;
    border-color: #cbdfea !important;
}
.trust-item strong { color: #17324b !important; }
.trust-item small { color: #71889a !important; }
.load-more-button span { color: #1689c1 !important; }
.load-more-button:hover {
    background: #eef8fd !important;
    border-color: #69bbe2 !important;
    box-shadow: 0 8px 22px rgba(44, 93, 123, .08) !important;
}

/* ---------- MODALS ---------- */
.modal {
    background: rgba(30, 47, 60, .55) !important;
    backdrop-filter: blur(8px) !important;
}

.modal-content,
.detail-modal,
.edit-modal-content,
.checkout-modal-content,
.tradera-modal-content,
.checkout-v1-modal {
    background: linear-gradient(180deg, #ffffff 0%, #f9fcfe 100%) !important;
    color: #17324b !important;
    border-color: #c6dce8 !important;
    box-shadow: 0 28px 70px rgba(24, 55, 76, .22) !important;
}

.close-modal,
#closeCartButton,
.cart-close,
#closeCart,
.close-cart {
    background: #f2f7fa !important;
    color: #59748a !important;
    border-color: #c7dce7 !important;
}

.close-modal:hover,
#closeCartButton:hover,
.cart-close:hover,
#closeCart:hover,
.close-cart:hover {
    background: #eaf6fc !important;
    color: #0a75ad !important;
    border-color: #54b4e3 !important;
}

.modal-year { color: #1289c4 !important; }
.modal-details h2,
.edit-modal-header h2,
.checkout-modal-content h2,
.tradera-modal-content h2 { color: #102a43 !important; }
.modal-info-row span:last-child { color: #29465c !important; }
.modal-price-row {
    color: #17324b !important;
    border-top-color: #d9e6ed !important;
}
.flip-hint { color: #738a9b !important; }

.edit-grid label,
.checkout-grid label { color: #58748a !important; }

.edit-grid input,
.edit-grid select,
.checkout-grid input,
.checkout-grid select,
#checkoutCountry {
    background: #ffffff !important;
    color: #17324b !important;
    border-color: #bed7e5 !important;
}

.edit-grid input:focus,
.edit-grid select:focus,
.checkout-grid input:focus,
.checkout-grid select:focus,
#checkoutCountry:focus {
    border-color: #3fafe5 !important;
    box-shadow: 0 0 0 3px rgba(31, 169, 238, .08) !important;
}

.checkout-intro,
.checkout-summary { color: #637d91 !important; }
.checkout-summary { border-top-color: #d9e6ed !important; }
.checkout-summary strong { color: #148fc9 !important; }

/* ---------- PAYMENT / SHIPPING ---------- */
.payment-method-card,
.shipping-method-card,
.checkout-payment-preview,
.checkout-breakdown,
.checkout-success-payment-box {
    background: #ffffff !important;
    color: #29465c !important;
    border-color: #cbdfea !important;
}

.payment-method-card:hover,
.shipping-method-card:hover {
    background: #f5fbfe !important;
    border-color: #72bfe4 !important;
}

.payment-method-card:has(input:checked),
.shipping-method-card:has(input:checked) {
    background: #eaf7fd !important;
    border-color: #38ace4 !important;
    box-shadow: 0 0 0 2px rgba(31,169,238,.07) !important;
}

.payment-method-name,
.shipping-method-name,
.checkout-section-title,
.payment-instruction-value { color: #17324b !important; }
.payment-method-note,
.shipping-method-note,
.checkout-shipping-note,
.checkout-shipping-method-message,
.payment-instruction-label { color: #6c8497 !important; }
.checkout-breakdown-row,
.checkout-total-row,
.checkout-shipping-total-row { border-color: #dfeaf0 !important; }

/* ---------- CART ---------- */
.cart-drawer {
    background: #ffffff !important;
    color: #17324b !important;
    border-left-color: #c4dbe7 !important;
    box-shadow: -14px 0 42px rgba(28, 63, 85, .14) !important;
}

.cart-overlay { background: rgba(33, 50, 63, .42) !important; }
.cart-item { border-bottom-color: #dce8ef !important; }
.cart-item-name { color: #17324b !important; }
.cart-item-info { color: #71899c !important; }
.cart-item-price { color: #158fc9 !important; }
.cart-item-actions button {
    background: #f3f8fb !important;
    color: #29465c !important;
    border-color: #c9dce7 !important;
}
.cart-footer,
.cart-total { border-color: #dce8ef !important; }
.cart-total-row span,
.cart-total strong,
.cart-total span:last-child { color: #17324b !important; }
.cart-total-row strong,
.cart-total span:last-child { color: #159bd3 !important; }

/* ---------- TRADERA MODALS / SALES ---------- */
.tradera-warning {
    background: #fff8e5 !important;
    color: #9a6800 !important;
    border-color: #efd897 !important;
}
.tradera-preview-card,
.tradera-sale-image-box,
.tradera-buyer-footer,
.tradera-health-grid,
.tradera-health-loading {
    background: #f8fbfd !important;
    border-color: #d2e2eb !important;
}
.tradera-preview-card img,
.order-item-image { background: #f3f7fa !important; }
.tradera-preview-card strong,
.tradera-preview-card b,
.tradera-sale-player,
.tradera-sale-price strong,
.tradera-unlinked-item strong,
.tradera-health-row strong,
.tradera-buyer-name { color: #17324b !important; }
.tradera-preview-card p,
.tradera-sale-card-title,
.tradera-sale-subset,
.tradera-sale-meta,
.tradera-buyer-contact,
.tradera-buyer-address,
.tradera-health-row span,
.tradera-health-time,
.tradera-unlinked-empty { color: #657f93 !important; }
.tradera-health-row { border-bottom-color: #d7e5ec !important; }
.tradera-health-clickable:hover { background: #eef8fd !important; }
.tradera-unlinked-item { background: #fffaf0 !important; }

.tradera-sales-tab,
.orders-tab {
    background: #ffffff !important;
    color: #4d687b !important;
    border-color: #c8dce7 !important;
}
.tradera-sales-tab:hover,
.orders-tab:hover {
    background: #f0f9fd !important;
    color: #0a75ad !important;
    border-color: #5cb7e2 !important;
}
.tradera-sales-tab.active,
.orders-tab.active {
    background: #e8f6fd !important;
    color: #0a75ad !important;
    border-color: #38ace4 !important;
}
.tradera-sales-tab span { background: #ffffff !important; }

/* ---------- ORDERS ---------- */
#ordersModal .modal-content,
#ordersModal .checkout-modal-content,
.order-card {
    background: #ffffff !important;
    border-color: #d0e1ea !important;
    color: #29465c !important;
}

.order-card {
    box-shadow: 0 5px 18px rgba(43, 80, 104, .05) !important;
}

.order-card-header,
.order-items,
.order-item-card { border-color: #dce8ef !important; }
.order-card-header strong,
.order-customer strong,
.order-item-player,
.order-item-row strong,
.order-total strong,
.order-item-details strong {
    color: #17324b !important;
}
.order-card-header div div,
.order-customer,
.order-address,
.order-item-row,
.order-total,
.order-item-details span,
.order-no-image {
    color: #667f92 !important;
}
.order-address {
    background: #f5f9fc !important;
    border: 1px solid #dbe7ee !important;
}
.order-status,
.order-status-select {
    background: #eaf7fd !important;
    color: #0c79b1 !important;
    border-color: #8dc9e7 !important;
}
.order-status-select option {
    background: #ffffff !important;
    color: #17324b !important;
}

/* ---------- SUCCESS STATE ---------- */
.checkout-success,
.checkout-success-summary-grid,
.checkout-success-summary-item,
.checkout-success-email,
.checkout-success-payment {
    color: #29465c !important;
}
.checkout-success-summary-item,
.checkout-success-email,
.checkout-success-payment {
    background: #f8fbfd !important;
    border-color: #d2e2eb !important;
}
.checkout-success-subtitle { color: #6d8597 !important; }
.checkout-success-close {
    background: #eaf7fd !important;
    color: #0b75aa !important;
    border-color: #a7d4e9 !important;
}

/* ---------- FINAL MOBILE LIGHT POLISH ---------- */
@media (max-width: 760px) {
    .site-header,
    .category-nav {
        background: #ffffff !important;
    }

    .filters-panel {
        background: #ffffff !important;
    }

    .card-row {
        background: #ffffff !important;
    }
}


/* ============================================================
   FROZENHITS LIGHT THEME v2 — SMALL POLISH
   Requested changes only:
   1) opened left filters stay light
   2) SEK / CZK switcher stays light
   3) category tabs have no strong selected glow/effect
   ============================================================ */

/* ---------- 1) LEFT FILTERS: LIGHT OPEN STATE ---------- */
body .filters-panel .filter-section.open .filter-section-title {
    background: #ffffff !important;
    color: #17324b !important;
    border-color: #b9d9e9 !important;
    box-shadow: none !important;
}

body .filters-panel .filter-section.open .filter-section-title::after {
    color: #238fc7 !important;
    text-shadow: none !important;
}

body .filters-panel .filter-section.open .filter-search {
    background: #ffffff !important;
    color: #17324b !important;
    border-color: #bfd9e8 !important;
    box-shadow: 0 4px 12px rgba(39, 78, 104, .06) !important;
}

body .filters-panel .filter-section.open .filter-search::placeholder {
    color: #8198aa !important;
}

body .filters-panel .filter-section.open .checkbox-list {
    background: #f8fbfd !important;
    color: #29465c !important;
    border-color: #c7dce8 !important;
    box-shadow: 0 12px 26px rgba(39, 78, 104, .12) !important;
}

body .filters-panel .filter-section.open .checkbox-row {
    background: transparent !important;
    color: #4f697d !important;
}

body .filters-panel .filter-section.open .checkbox-row:hover {
    background: #edf7fc !important;
    color: #17324b !important;
}

body .filters-panel .filter-section.open .checkbox-row:has(input:checked) {
    background: #e5f4fb !important;
    color: #0b6e9f !important;
}

body .filters-panel .filter-section.open .checkbox-row input:checked + .checkbox-label-text {
    color: #0b6e9f !important;
}

body .filters-panel .filter-section.open .checkbox-count {
    background: #ffffff !important;
    color: #527086 !important;
    border-color: #cadfe9 !important;
}

body .filters-panel .filter-section.open .checkbox-row:has(input:checked) .checkbox-count {
    background: #ffffff !important;
    color: #0b75aa !important;
    border-color: #8dcae8 !important;
}

/* ---------- 2) SEK / CZK SWITCHER: NO DARK INACTIVE BUTTON ---------- */
.currency-switcher {
    background: #ffffff !important;
    border-color: #c6dce8 !important;
    box-shadow: 0 3px 12px rgba(45, 91, 121, .045) !important;
}

.currency-btn {
    background: #ffffff !important;
    color: #17324b !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.currency-btn:hover {
    background: #f0f8fc !important;
    color: #0c75ae !important;
}

.currency-btn.active,
.currency-btn[data-currency="SEK"].active,
.currency-btn[data-currency="CZK"].active {
    background: linear-gradient(180deg, #67caff 0%, #35afea 100%) !important;
    color: #07304c !important;
    border-color: #35afea !important;
    box-shadow: none !important;
}

.currency-btn .currency-label,
.currency-btn .currency-flag {
    color: inherit !important;
}

/* ---------- 3) HOCKEY / FOOTBALL / POKÉMON: SIMPLE SELECTED STATE ---------- */
.collection-tabs .category-button.active,
.category-nav .category-button.active {
    transform: none !important;
    background: #ffffff !important;
    color: #26455d !important;
    border-color: #c8dce8 !important;
    box-shadow: 0 3px 11px rgba(39, 81, 110, .045) !important;
}

.collection-tabs .category-button.active::before,
.collection-tabs .category-button.active::after,
.category-nav .category-button.active::before,
.category-nav .category-button.active::after {
    content: none !important;
    display: none !important;
    background: none !important;
    box-shadow: none !important;
    opacity: 0 !important;
}

.collection-tabs .category-button.active .category-label,
.category-nav .category-button.active .category-label {
    color: #26455d !important;
    text-shadow: none !important;
}

.collection-tabs .category-button.active .category-chevron,
.category-nav .category-button.active .category-chevron {
    color: #4e91ba !important;
    text-shadow: none !important;
}

.collection-tabs .category-button.active .category-icon,
.category-nav .category-button.active .category-icon {
    background: #f0f7fb !important;
    border-color: #d1e3ed !important;
    box-shadow: none !important;
}

.collection-tabs .category-button.active .category-card-count,
.category-nav .category-button.active .category-card-count {
    background: #eef7fc !important;
    color: #315f7d !important;
    border-color: #c7deeb !important;
    box-shadow: none !important;
}

/* ============================================================
   FROZENHITS LIGHT THEME v3 — 2 FIXES
   1) PLAYER filter is fully light on desktop
   2) Card detail modal information box is light
   ============================================================ */

/* ---------- 1) PLAYER FILTER: FORCE LIGHT ---------- */
body .filters-panel .filter-player .filter-section-title,
body .filters-panel .filter-player.open .filter-section-title,
body .filters-panel .filter-player.has-selection .filter-section-title {
    background: #ffffff !important;
    color: #17324b !important;
    border-color: #c4dce9 !important;
    box-shadow: none !important;
}

body .filters-panel .filter-player .filter-section-title:hover {
    background: #f4faff !important;
    color: #17324b !important;
    border-color: #83c7e7 !important;
}

body .filters-panel .filter-player .filter-section-title::before {
    background: #37b9ef !important;
}

body .filters-panel .filter-player .filter-section-title::after {
    color: #1688c2 !important;
    text-shadow: none !important;
}

body .filters-panel .filter-player .filter-search {
    background: #ffffff !important;
    color: #17324b !important;
    border-color: #bfd9e8 !important;
    box-shadow: none !important;
}

body .filters-panel .filter-player .filter-search::placeholder {
    color: #8198aa !important;
}

body .filters-panel .filter-player .checkbox-list {
    background: #f8fbfd !important;
    color: #29465c !important;
    border-color: #c7dce8 !important;
    box-shadow: 0 8px 20px rgba(39, 78, 104, .08) !important;
}

body .filters-panel .filter-player .checkbox-row {
    background: transparent !important;
    color: #4f697d !important;
}

body .filters-panel .filter-player .checkbox-row:hover {
    background: #edf7fc !important;
    color: #17324b !important;
}

body .filters-panel .filter-player .checkbox-count {
    background: #ffffff !important;
    color: #527086 !important;
    border-color: #cadfe9 !important;
}

/* ---------- 2) CARD DETAIL MODAL INFO BOX: LIGHT ---------- */
#modalInfo {
    background: #f8fbfd !important;
    border: 1px solid #c9dde8 !important;
    box-shadow: none !important;
}

#modalInfo .modal-info-row {
    border-bottom-color: #dce8ef !important;
}

#modalInfo .modal-info-label {
    color: #5e7b90 !important;
}

#modalInfo .modal-info-row span:last-child {
    color: #29465c !important;
}

/* ============================================================
   LIGHT v4 — filter buttons unified, softer Admin button,
   stronger modal stock/info contrast
   ============================================================ */

/* ---------- FILTER TILES / LEFT SIDEBAR ---------- */
.filters-panel,
body .filters-panel {
    background: linear-gradient(180deg, #f9fcff 0%, #f2f7fb 100%) !important;
    border-color: #d4e5f1 !important;
    box-shadow: 0 14px 34px rgba(24, 73, 108, 0.08) !important;
}

.filter-section,
.filters-panel .filter-section {
    background: transparent !important;
}

.filter-section-title,
.filters-panel .filter-section-title,
.filter-section.open .filter-section-title,
.filters-panel .filter-section.open .filter-section-title {
    background: linear-gradient(180deg, #ffffff 0%, #f4f9fd 100%) !important;
    border: 1px solid #bdd5e5 !important;
    color: #153754 !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.95),
        0 4px 10px rgba(24, 73, 108, 0.04) !important;
}

.filter-section-title:hover,
.filters-panel .filter-section-title:hover {
    background: linear-gradient(180deg, #ffffff 0%, #eef7fd 100%) !important;
    border-color: #8fc9ea !important;
}

.filter-section-title::before,
.filter-section-title::after,
.filters-panel .filter-section-title::before,
.filters-panel .filter-section-title::after {
    color: #55afe2 !important;
}

.filter-section.open .filter-search,
.filters-panel .filter-section.open .filter-search {
    background: #ffffff !important;
    color: #17324b !important;
    border: 1px solid #c8ddea !important;
    box-shadow: inset 0 1px 2px rgba(14, 57, 87, 0.03) !important;
}

.filter-section.open .filter-search::placeholder,
.filters-panel .filter-section.open .filter-search::placeholder {
    color: #7f98ae !important;
}

.filter-section.open .checkbox-list,
.filters-panel .filter-section.open .checkbox-list {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbfe 100%) !important;
    border: 1px solid #cadeeb !important;
    box-shadow: 0 10px 22px rgba(24, 73, 108, 0.06) !important;
}

.checkbox-row,
.filters-panel .checkbox-row {
    color: #486780 !important;
}

.checkbox-row:hover,
.filters-panel .checkbox-row:hover {
    color: #163854 !important;
    background: #eef7fd !important;
}

.checkbox-row:has(input:checked),
.filters-panel .checkbox-row:has(input:checked) {
    background: #e7f4fd !important;
}

.checkbox-row:has(input:checked) .checkbox-label-text,
.filters-panel .checkbox-row:has(input:checked) .checkbox-label-text {
    color: #11314d !important;
}

.checkbox-row .checkbox-count,
.filters-panel .checkbox-row .checkbox-count {
    background: #ffffff !important;
    color: #356483 !important;
    border: 1px solid #c6dceb !important;
}

/* ---------- ADMIN BUTTON ---------- */
.header-actions .admin-login-button,
.admin-login-button {
    background: linear-gradient(180deg, #80d0ff 0%, #5ab7ee 100%) !important;
    border: 1px solid #6bc2f3 !important;
    color: #113552 !important;
    box-shadow:
        0 7px 18px rgba(64, 171, 230, 0.16),
        inset 0 1px 0 rgba(255,255,255,.45) !important;
}

.header-actions .admin-login-button:hover,
.admin-login-button:hover {
    background: linear-gradient(180deg, #91d9ff 0%, #68bff2 100%) !important;
    border-color: #7ecefb !important;
    color: #0f314d !important;
    box-shadow:
        0 9px 22px rgba(64, 171, 230, 0.20),
        inset 0 1px 0 rgba(255,255,255,.52) !important;
}

/* ---------- DETAIL MODAL ---------- */
.detail-modal .modal-details {
    background: transparent !important;
}

.detail-modal .modal-details h2 {
    color: #173756 !important;
}

.modal-info-row {
    grid-template-columns: 118px 1fr !important;
    margin: 0 !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid #dde9f2 !important;
}

.modal-info-row:last-child {
    border-bottom: 0 !important;
}

.modal-info-label {
    color: #7390a8 !important;
    font-weight: 800 !important;
}

.modal-info-row span:last-child {
    color: #1d3d5a !important;
    font-weight: 750 !important;
}

.modal-price-row {
    margin-top: 18px !important;
    padding-top: 16px !important;
    border-top: 1px solid #cfdfeb !important;
}

#modalStock {
    display: inline-flex !important;
    align-items: center !important;
    padding: 9px 14px !important;
    background: linear-gradient(180deg, #f5fbff 0%, #eaf5fd 100%) !important;
    border: 1px solid #c7dfef !important;
    border-radius: 10px !important;
    color: #22587a !important;
    font-size: 15px !important;
    line-height: 1.1 !important;
    font-weight: 900 !important;
    box-shadow: 0 4px 12px rgba(24, 73, 108, 0.05) !important;
}

#modalPrice {
    color: #35a8ea !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.6) !important;
}

@media (max-width: 700px) {
    .modal-info-row {
        grid-template-columns: 96px 1fr !important;
        padding: 8px 0 !important;
    }

    #modalStock {
        font-size: 14px !important;
        padding: 8px 12px !important;
    }
}

/* ============================================================
   LIGHT v5 — final light-theme polish
   1) Edit Card TYPE checkboxes
   2) Checkout ORDER SUMMARY contrast
   3) Country native select popup in light mode
   ============================================================ */

/* ---------- EDIT CARD: TYPE CHECKBOXES ---------- */
.edit-modal-content label:has(input[type="checkbox"]),
#editModal label:has(input[type="checkbox"]),
#editCardModal label:has(input[type="checkbox"]) {
    min-height: 48px !important;
    padding: 0 15px !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 9px !important;

    background: linear-gradient(180deg, #ffffff 0%, #f5f9fc 100%) !important;
    color: #48647b !important;

    border: 1px solid #bdd6e6 !important;
    border-radius: 9px !important;

    box-shadow: inset 0 1px 0 rgba(255,255,255,.85) !important;
    cursor: pointer !important;
}

.edit-modal-content label:has(input[type="checkbox"]):hover,
#editModal label:has(input[type="checkbox"]):hover,
#editCardModal label:has(input[type="checkbox"]):hover {
    background: #f0f8fd !important;
    border-color: #73bfe8 !important;
    color: #244b68 !important;
}

.edit-modal-content label:has(input[type="checkbox"]:checked),
#editModal label:has(input[type="checkbox"]:checked),
#editCardModal label:has(input[type="checkbox"]:checked) {
    background: linear-gradient(180deg, #eaf7ff 0%, #dff2fd 100%) !important;
    color: #294e68 !important;
    border-color: #43b6ef !important;
    box-shadow: 0 0 0 2px rgba(56,189,248,.06) !important;
}

.edit-modal-content label:has(input[type="checkbox"]) input[type="checkbox"],
#editModal label:has(input[type="checkbox"]) input[type="checkbox"],
#editCardModal label:has(input[type="checkbox"]) input[type="checkbox"] {
    width: 17px !important;
    min-width: 17px !important;
    height: 17px !important;
    padding: 0 !important;
    margin: 0 !important;
    flex: 0 0 17px !important;

    accent-color: #38afe8 !important;
    border-radius: 4px !important;
    box-shadow: none !important;
}

/* ---------- CHECKOUT: ORDER SUMMARY ---------- */
.checkout-breakdown {
    background: #ffffff !important;
    border: 1px solid #c8ddea !important;
    box-shadow: 0 7px 18px rgba(27, 77, 109, .05) !important;
}

.checkout-breakdown-row {
    background: #ffffff !important;
    color: #637f95 !important;
    border-bottom: 1px solid #dce8ef !important;
}

.checkout-breakdown-row strong {
    color: #24445e !important;
    font-weight: 850 !important;
}

.checkout-shipping-total-row {
    background: #f3f8fb !important;
    color: #5d7a91 !important;
}

.checkout-shipping-total-row strong {
    color: #385b73 !important;
}

.checkout-total-row {
    background: linear-gradient(180deg, #eaf6fc 0%, #deeff8 100%) !important;
    color: #31546d !important;
    font-weight: 900 !important;
}

.checkout-total-row strong {
    color: #35afea !important;
    font-size: 21px !important;
    font-weight: 950 !important;
}

.checkout-shipping-note {
    color: #687f92 !important;
}

/* ---------- COUNTRY SELECT + NATIVE DROPDOWN ---------- */
#checkoutCountry,
.checkout-grid select,
.edit-grid select {
    color-scheme: light !important;
    background-color: #ffffff !important;
    color: #17324b !important;
}

#checkoutCountry option,
.checkout-grid select option,
.edit-grid select option {
    background: #ffffff !important;
    color: #17324b !important;
}

#checkoutCountry option:checked,
.checkout-grid select option:checked,
.edit-grid select option:checked {
    background: #dcefff !important;
    color: #123b5b !important;
}

@media (max-width: 700px) {
    .edit-modal-content label:has(input[type="checkbox"]),
    #editModal label:has(input[type="checkbox"]),
    #editCardModal label:has(input[type="checkbox"]) {
        min-height: 44px !important;
        padding: 0 12px !important;
    }
}

/* ============================================================
   LIGHT v6 — stronger ORDER SUMMARY rows
   ============================================================ */
.order-summary .summary-row,
.checkout-summary-box .summary-row,
.shipping-summary .summary-row {
    color: #35516b !important;
    font-weight: 700 !important;
}

.order-summary .summary-row span:last-child,
.checkout-summary-box .summary-row span:last-child,
.shipping-summary .summary-row span:last-child {
    color: #243f59 !important;
    font-weight: 800 !important;
}

.order-summary .summary-row.subtotal,
.order-summary .summary-row.shipping,
.checkout-summary-box .summary-row.subtotal,
.checkout-summary-box .summary-row.shipping,
.shipping-summary .summary-row.subtotal,
.shipping-summary .summary-row.shipping {
    background: #eef4f8 !important;
}

.order-summary .summary-row.total,
.checkout-summary-box .summary-row.total,
.shipping-summary .summary-row.total {
    background: #e2eef7 !important;
}

/* explicit support for simpler row classes/ids used in some blocks */
.order-summary .cards-row,
.order-summary .shipping-row,
.checkout-summary-box .cards-row,
.checkout-summary-box .shipping-row,
#orderSummary .cards-row,
#orderSummary .shipping-row {
    color: #35516b !important;
}

.order-summary .cards-row strong,
.order-summary .shipping-row strong,
.checkout-summary-box .cards-row strong,
.checkout-summary-box .shipping-row strong,
#orderSummary .cards-row strong,
#orderSummary .shipping-row strong,
.order-summary .cards-row span:last-child,
.order-summary .shipping-row span:last-child,
.checkout-summary-box .cards-row span:last-child,
.checkout-summary-box .shipping-row span:last-child,
#orderSummary .cards-row span:last-child,
#orderSummary .shipping-row span:last-child {
    color: #243f59 !important;
    font-weight: 800 !important;
}

/* ============================================================
   LIGHT v7 — Location uses normal card-info colors
   ============================================================ */
.admin-location-value,
.card-chip-location {
    color: #17324b !important;
}

.card-detail-row:has(.admin-location-value) .card-detail-label,
.home-card-data-row:has(.admin-location-value) .home-card-data-label,
.card-table-row:has(.admin-location-value) .card-detail-label {
    color: #58748a !important;
}

/* ============================================================
   LIGHT v8 — FORCE LOCATION ROW TO NORMAL LIGHT-THEME COLORS
   Location is the final admin-only metadata row on home cards.
   ============================================================ */

/* Current home-card table markup */
body.admin-mode .home-card-data-table .home-card-data-row:last-child,
body.admin-mode .home-card-data-table .home-card-data-row:last-child * {
    color: #17324b !important;
}

body.admin-mode .home-card-data-table .home-card-data-row:last-child .home-card-data-label {
    color: #58748a !important;
    font-weight: 750 !important;
}

body.admin-mode .home-card-data-table .home-card-data-row:last-child .home-card-data-value {
    color: #17324b !important;
    font-weight: 850 !important;
}

/* Older / fallback card-detail markup */
body.admin-mode .card-detail-row:last-child,
body.admin-mode .card-detail-row:last-child * {
    color: #17324b !important;
}

body.admin-mode .card-detail-row:last-child .card-detail-label {
    color: #58748a !important;
}

body.admin-mode .card-detail-row:last-child .card-detail-value,
body.admin-mode .card-detail-row:last-child .admin-location-value {
    color: #17324b !important;
}

/* Explicit known location classes */
body.admin-mode .admin-location-value,
body.admin-mode .card-chip-location,
body.admin-mode [class*="location-value"],
body.admin-mode [class*="locationValue"] {
    color: #17324b !important;
}
/* =========================================================
   TRADERA SALES – BLUE / WHITE THEME
   ========================================================= */

.tradera-buyer-order {
    background: #f8fbfe !important;
    border: 1px solid #42a5f5 !important;
    box-shadow: 0 8px 24px rgba(33, 150, 243, 0.12) !important;
}

/* Modrá hlavička zákazníka */
.tradera-buyer-header {
    background: linear-gradient(
        135deg,
        #0879df 0%,
        #2397f2 55%,
        #55b8ff 100%
    ) !important;

    border-bottom: 1px solid rgba(255,255,255,0.25) !important;
}

/* Jméno */
.tradera-buyer-name {
    color: #ffffff !important;
}

/* Username + datum */
.tradera-buyer-meta {
    color: rgba(255,255,255,0.75) !important;
}

.tradera-buyer-meta span:first-child {
    color: #d7f2ff !important;
}

/* Kontakt + adresa */
.tradera-buyer-contact,
.tradera-buyer-address {
    color: rgba(255,255,255,0.82) !important;
}

/* Počet karet / cena nahoře */
.tradera-buyer-summary strong {
    color: #ffffff !important;
}

.tradera-buyer-summary span {
    color: rgba(255,255,255,0.70) !important;
}

/* Status řádek */
.tradera-order-status-row {
    background: #147ed1 !important;
    border-bottom: 1px solid #5fb9f5 !important;
}

/* Oblast s kartou */
.tradera-sale-items {
    background: #ffffff !important;
}

/* Jednotlivá karta */
.tradera-sale-item {
    background: #ffffff !important;
    border-bottom: 1px solid #d8e7f2 !important;
}

/* Obrázek */
.tradera-sale-image-box {
    background: #f5f9fc !important;
    border: 1px solid #cbdce8 !important;
}

/* Jméno hráče */
.tradera-sale-player {
    color: #126fc4 !important;
}

/* Set */
.tradera-sale-card-title {
    color: #566f85 !important;
}

/* Subset */
.tradera-sale-subset {
    color: #6e879c !important;
}

/* Metadata */
.tradera-sale-meta {
    color: #668198 !important;
}

/* LOCATION / QTY popisky */
.tradera-sale-location span,
.tradera-sale-qty span {
    color: #6d8498 !important;
}

/* Location číslo */
.tradera-sale-location strong {
    color: #f0a500 !important;
}

/* Quantity */
.tradera-sale-qty strong {
    color: #29465c !important;
}

/* Cena */
.tradera-sale-price strong {
    color: #126fc4 !important;
}

/* Footer */
.tradera-buyer-footer {
    background: #f5faff !important;
    border-top: 1px solid #d5e6f2 !important;
}

.tradera-buyer-footer span {
    color: #668198 !important;
}

.tradera-buyer-footer strong {
    color: #159cf2 !important;
}

/* ACTIVE / COMPLETED */
.tradera-sales-tab {
    background: #ffffff !important;
    color: #536d82 !important;
    border-color: #c9dce9 !important;
}

.tradera-sales-tab.active {
    background: #eaf6ff !important;
    color: #168eea !important;
    border-color: #2fa7ff !important;
}

.tradera-sales-tab span {
    background: #ffffff !important;
}
/* ============================================================
   FROZENHITS — FINAL MOBILE FILTER LIGHT FIX
   Keeps the responsive mobile/tablet filter layout but forces
   it to use the current light FrozenHits colour palette.
   ============================================================ */
@media (max-width: 1099px) {
    body .filters-panel,
    body .filters-panel.mobile-open {
        background: linear-gradient(180deg, #f9fcff 0%, #f2f7fb 100%) !important;
        border: 1px solid #d4e5f1 !important;
        box-shadow: 0 10px 26px rgba(24, 73, 108, .08) !important;
    }

    body .filters-panel .filters-title {
        color: #17324b !important;
    }

    body .filters-panel .filters-title::after {
        color: #38aee8 !important;
    }

    body .filters-panel .clear-filters {
        color: #1688c2 !important;
        background: transparent !important;
    }

    body .filters-panel.mobile-open > .filters-header {
        border-bottom-color: #d7e6ef !important;
    }

    body .filters-panel.mobile-open .filter-section-title,
    body .filters-panel.mobile-open .filter-section.open .filter-section-title,
    body .filters-panel.mobile-open .filter-section.has-selection .filter-section-title {
        background: linear-gradient(180deg, #ffffff 0%, #f4f9fd 100%) !important;
        color: #153754 !important;
        border: 1px solid #bdd5e5 !important;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.95),
            0 4px 10px rgba(24,73,108,.04) !important;
    }

    body .filters-panel.mobile-open .filter-section-title:hover {
        background: linear-gradient(180deg, #ffffff 0%, #eef7fd 100%) !important;
        color: #153754 !important;
        border-color: #8fc9ea !important;
    }

    body .filters-panel.mobile-open .filter-section-title::before {
        display: none !important;
        content: none !important;
    }

    body .filters-panel.mobile-open .filter-section-title::after,
    body .filters-panel.mobile-open .filter-section.open .filter-section-title::after {
        color: #55afe2 !important;
        text-shadow: none !important;
    }

    body .filters-panel.mobile-open .filter-section.open .filter-search {
        background: #ffffff !important;
        color: #17324b !important;
        border: 1px solid #c8ddea !important;
        box-shadow: inset 0 1px 2px rgba(14,57,87,.03) !important;
    }

    body .filters-panel.mobile-open .filter-section.open .filter-search::placeholder {
        color: #7f98ae !important;
    }

    body .filters-panel.mobile-open .filter-section.open .checkbox-list {
        background: linear-gradient(180deg, #ffffff 0%, #f8fbfe 100%) !important;
        color: #29465c !important;
        border: 1px solid #cadeeb !important;
        box-shadow: 0 10px 22px rgba(24,73,108,.06) !important;
        scrollbar-color: #a7cddd #eef5f9 !important;
    }

    body .filters-panel.mobile-open .filter-section.open .checkbox-row {
        background: transparent !important;
        color: #486780 !important;
    }

    body .filters-panel.mobile-open .filter-section.open .checkbox-row:hover {
        background: #eef7fd !important;
        color: #163854 !important;
    }

    body .filters-panel.mobile-open .filter-section.open .checkbox-row:has(input:checked) {
        background: #e7f4fd !important;
        color: #11314d !important;
    }

    body .filters-panel.mobile-open .filter-section.open .checkbox-row:has(input:checked) .checkbox-label-text {
        color: #11314d !important;
    }

    body .filters-panel.mobile-open .filter-section.open .checkbox-count {
        background: #ffffff !important;
        color: #356483 !important;
        border: 1px solid #c6dceb !important;
    }

    body .filters-panel.mobile-open .filter-section.open .checkbox-row:has(input:checked) .checkbox-count {
        background: #ffffff !important;
        color: #0b75aa !important;
        border-color: #8dcae8 !important;
    }
}
/* ============================================================
   FINAL MOBILE CARD ALIGNMENT FIX
   ============================================================ */
@media (max-width: 760px) {

    .card-list {
        align-items: stretch !important;
    }

    .card-row {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
    }

    .card-image-container {
        width: 100% !important;
        height: 205px !important;
        min-height: 205px !important;
        max-height: 205px !important;

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

        padding: 4px !important;
        margin: 0 0 4px !important;
    }

    .card-image {
        display: block !important;

        width: 100% !important;
        height: 100% !important;

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

        object-fit: contain !important;

        margin: 0 auto !important;
    }
}@media (max-width: 700px) {

    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
    }

    .app,
    .main-content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    .card-list {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}