/* ============================================================
   CS2 Shop — front-page-matched redesign (woodmart-child)
   ------------------------------------------------------------
   Scoped under .cs2-shop. Cards are the SAME component as the home
   page (.product-card.dc-card.card-bg--*, styled globally by
   mush-product-card.css + discount.css). We intentionally do NOT use
   the .shop-grid wrapper, so the old shop.css `.shop-grid .dc-card`
   overrides (which changed the card background) never apply — the
   cards therefore match the home cards exactly. Here we only add the
   page chrome (hero, toolbar, filters, pagination) + per-rarity accent.
   ============================================================ */

.cs2-shop {
    --cs2-accent: #cde738;
    --cs2-bg: #0c1202;
    --cs2-panel: rgba(255, 255, 255, 0.035);
    --cs2-border: rgba(255, 255, 255, 0.08);
    --cs2-text: #f6f4f9;
    --cs2-muted: rgba(246, 244, 249, 0.6);
    max-width: 1480px;
    margin: 0 auto;
    padding: clamp(16px, 4vw, 40px);
    font-family: 'Inter', system-ui, sans-serif;
    color: var(--cs2-text);
}

/* ── Compact hero (no min-height:100vh, no label/subtitle) ── */
.cs2-shop-hero {
    padding: clamp(18px, 3vw, 40px) 0 clamp(20px, 3vw, 36px);
    text-align: left;
    border-bottom: 1px solid var(--cs2-border);
    margin-bottom: clamp(20px, 3vw, 32px);
}
.cs2-shop-hero__title {
    font-family: 'Bebas Neue', 'Impact', sans-serif;
    font-size: clamp(48px, 8vw, 104px);
    line-height: 0.95;
    letter-spacing: -1px;
    text-transform: uppercase;
    margin: 0 0 14px;
    background: radial-gradient(ellipse at 30% 40%, #fff152 0%, #cfe636 45%, #9edb1a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.cs2-shop-hero__desc {
    font-size: clamp(15px, 1.4vw, 19px);
    line-height: 1.55;
    color: var(--cs2-muted);
    max-width: 680px;
    margin: 0;
}

/* ── Toolbar: search + count + sort ── */
.cs2-shop-toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.cs2-shop-search {
    position: relative;
    flex: 1 1 280px;
    min-width: 0;
}
.cs2-shop-search__icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--cs2-muted);
    pointer-events: none;
}
.cs2-shop-search__input {
    width: 100%;
    height: 48px;
    border-radius: 999px;
    border: 1px solid var(--cs2-border);
    background: var(--cs2-panel);
    color: var(--cs2-text);
    padding: 0 20px 0 46px;
    font-size: 15px;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}
.cs2-shop-search__input::placeholder { color: var(--cs2-muted); }
.cs2-shop-search__input:focus {
    border-color: var(--cs2-accent);
    box-shadow: 0 0 0 3px rgba(205, 231, 56, 0.18);
}
.cs2-shop-toolbar__right {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}
.cs2-shop-count { font-size: 14px; color: var(--cs2-muted); white-space: nowrap; }
.cs2-shop-sort { display: inline-flex; align-items: center; gap: 8px; }
.cs2-shop-sort__label { font-size: 13px; color: var(--cs2-muted); text-transform: uppercase; letter-spacing: .05em; }
.cs2-shop-sort__select {
    height: 44px;
    border-radius: 999px;
    border: 1px solid var(--cs2-border);
    background: var(--cs2-panel);
    color: var(--cs2-text);
    padding: 0 38px 0 18px;
    font-size: 14px;
    cursor: pointer;
    outline: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23cde738' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
}
.cs2-shop-sort__select:focus { border-color: var(--cs2-accent); }
/* Native option list was white-on-white in the open dropdown — force dark. */
.cs2-shop-sort__select option {
    background-color: #1a1a1a;
    color: #ffffff;
}
.cs2-shop-sort__select option:checked,
.cs2-shop-sort__select option:hover {
    background-color: #2a2a2a;
    color: var(--cs2-accent);
}

/* ── Mobile filter toggle (hidden on desktop) ── */
.cs2-shop-filter-toggle {
    display: none;
    align-items: center;
    gap: 8px;
    height: 46px;
    padding: 0 22px;
    border-radius: 999px;
    border: 1px solid var(--cs2-border);
    background: var(--cs2-panel);
    color: var(--cs2-text);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    margin-bottom: 16px;
}

/* ── Body layout: filters + grid ── */
.cs2-shop-body {
    display: flex;
    align-items: flex-start;
    gap: clamp(16px, 2vw, 28px);
}

/* ── Filters sidebar — NO internal scroll (no max-height/overflow) ── */
.cs2-shop-filters {
    flex: 0 0 264px;
    position: sticky;
    top: 24px;
    background: var(--cs2-panel);
    border: 1px solid var(--cs2-border);
    border-radius: 22px;
    padding: 22px;
}
.cs2-shop-filters__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}
.cs2-shop-filters__title { font-family: 'Bebas Neue', sans-serif; font-size: 24px; letter-spacing: .5px; }
.cs2-shop-filters__clear,
.cs2-link-btn {
    background: none;
    border: none;
    color: var(--cs2-accent);
    font-size: 12px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 0;
}
.cs2-shop-filters__clear:hover, .cs2-link-btn:hover { text-decoration: underline; }

.cs2-filter-group { padding: 16px 0; border-top: 1px solid var(--cs2-border); }
.cs2-filter-group:first-of-type { border-top: none; }
.cs2-filter-group__title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--cs2-muted);
    margin-bottom: 12px;
}
.cs2-filter-group__body { display: flex; flex-direction: column; gap: 8px; }

/* Custom check rows (accent, hover/focus) */
.cs2-check {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    color: var(--cs2-text);
    user-select: none;
}
.cs2-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.cs2-check__box {
    width: 18px; height: 18px;
    border-radius: 6px;
    border: 1.5px solid var(--cs2-border);
    background: rgba(0, 0, 0, 0.25);
    flex-shrink: 0;
    position: relative;
    transition: border-color .15s, background .15s;
}
.cs2-check__box--rarity { border-radius: 50%; border-color: transparent; background: var(--rarity, #899dee); }
.cs2-check:hover .cs2-check__box { border-color: var(--cs2-accent); }
.cs2-check input:focus-visible + .cs2-check__box { box-shadow: 0 0 0 3px rgba(205, 231, 56, 0.3); }
.cs2-check input:checked + .cs2-check__box {
    background: var(--cs2-accent);
    border-color: var(--cs2-accent);
}
.cs2-check input:checked + .cs2-check__box--rarity { background: var(--rarity, #899dee); box-shadow: 0 0 0 2px var(--cs2-accent); }
.cs2-check input:checked + .cs2-check__box::after {
    content: '';
    position: absolute;
    left: 5px; top: 1px;
    width: 5px; height: 10px;
    border: solid #111;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.cs2-check input:checked + .cs2-check__box--rarity::after { display: none; }
.cs2-check__label { flex: 1; min-width: 0; }
.cs2-check__count { font-size: 12px; color: var(--cs2-muted); }

/* Price dual-range slider */
.cs2-price { position: relative; height: 28px; margin-bottom: 8px; }
.cs2-price__track {
    position: absolute;
    top: 12px; left: 0; right: 0;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.12);
}
.cs2-price__fill {
    position: absolute;
    top: 0; bottom: 0;
    background: var(--cs2-accent);
    border-radius: 2px;
}
.cs2-price input[type="range"] {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 28px;
    margin: 0;
    background: none;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
}
.cs2-price input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    pointer-events: auto;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--cs2-accent);
    border: 2px solid #0c1202;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.cs2-price input[type="range"]::-moz-range-thumb {
    pointer-events: auto;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--cs2-accent);
    border: 2px solid #0c1202;
    cursor: pointer;
}
.cs2-price__vals { display: flex; justify-content: space-between; font-size: 13px; color: var(--cs2-text); }

/* ── Main column ── */
.cs2-shop-main { flex: 1; min-width: 0; }

/* Grid — responsive; cards keep the global home look (not .shop-grid). */
.cs2-shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: clamp(12px, 1.5vw, 20px);
}

/* ── Per-rarity accent on the shop cards (border / glow / hover) ── */
.cs2-shop .product-card.card-bg--anciant     { --rarity: #E30446; }
.cs2-shop .product-card.card-bg--ancient     { --rarity: #E30446; }
.cs2-shop .product-card.card-bg--uncommon    { --rarity: #02C5FF; }
.cs2-shop .product-card.card-bg--legendary   { --rarity: #BD00FF; }
.cs2-shop .product-card.card-bg--immortal    { --rarity: #FFDF34; }
.cs2-shop .product-card.card-bg--rare        { --rarity: #0679E4; }
.cs2-shop .product-card.card-bg--common      { --rarity: #899DEE; }
.cs2-shop .product-card.card-bg--exceedingly { --rarity: #FF6E34; }

.cs2-shop .product-card {
    border: 1.5px solid var(--rarity, var(--cs2-accent));
    border-color: color-mix(in srgb, var(--rarity, #cde738) 34%, transparent);
    transition: border-color .25s cubic-bezier(.22,1,.36,1), box-shadow .25s cubic-bezier(.22,1,.36,1), transform .25s cubic-bezier(.22,1,.36,1);
}
.cs2-shop .product-card:hover {
    border-color: var(--rarity, var(--cs2-accent));
    box-shadow:
        0 0 0 1px var(--rarity, var(--cs2-accent)),
        0 14px 34px -10px color-mix(in srgb, var(--rarity, #cde738) 55%, transparent),
        0 0 22px color-mix(in srgb, var(--rarity, #cde738) 26%, transparent);
}

/* Empty state */
.cs2-shop-empty {
    display: none;
    text-align: center;
    padding: 60px 20px;
    color: var(--cs2-muted);
    font-size: 16px;
}
.cs2-shop-empty.is-visible { display: block; }

/* ── Pagination (restyled, active highlighted) ── */
.cs2-shop-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: clamp(24px, 3vw, 40px);
}
.cs2-page {
    min-width: 42px;
    height: 42px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--cs2-border);
    background: var(--cs2-panel);
    color: var(--cs2-text);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .2s, background .2s, color .2s;
}
.cs2-page:hover:not(:disabled) { border-color: var(--cs2-accent); color: var(--cs2-accent); }
.cs2-page--active {
    background: var(--cs2-accent);
    border-color: var(--cs2-accent);
    color: #111;
}
.cs2-page:disabled { opacity: 0.35; cursor: default; }

/* ════════════════════════════════════════════════════════════
   Responsive
   ════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .cs2-shop-filters { flex-basis: 230px; }
}

@media (max-width: 860px) {
    /* Filters become a collapsible drawer above the grid. */
    .cs2-shop-body { flex-direction: column; }
    .cs2-shop-filter-toggle { display: inline-flex; }
    .cs2-shop-filters {
        position: static;
        width: 100%;
        flex-basis: auto;
        display: none;
    }
    .cs2-shop-filters.is-open { display: block; }
    .cs2-shop-main { width: 100%; }
    .cs2-shop-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}

@media (max-width: 560px) {
    .cs2-shop-toolbar { gap: 12px; }
    .cs2-shop-toolbar__right { width: 100%; justify-content: space-between; }
    .cs2-shop-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .cs2-shop-hero__title { font-size: clamp(40px, 13vw, 64px); }
}

@media (max-width: 360px) {
    .cs2-shop-grid { grid-template-columns: 1fr; }
}