.case-catalog { flex: none; padding-bottom: calc(24 * var(--u)); color: #f5f5fb; }
.case-catalog__header { display: flex; align-items: center; justify-content: center; gap: calc(10 * var(--u)); padding: calc(24 * var(--u)) 0 calc(30 * var(--u)); }
.case-catalog__header h2 { margin: 0; font-size: calc(21 * var(--u)); font-weight: 800; letter-spacing: -.035em; }
.case-catalog__collapse { display: inline-flex; align-items: center; gap: calc(4 * var(--u)); padding: calc(6 * var(--u)) calc(10 * var(--u)); border: 0; border-radius: calc(9 * var(--u)); background: #1a192c; color: #73718d; font: 700 calc(10 * var(--u)) 'Inter', sans-serif; text-transform: uppercase; cursor: pointer; transition: color 180ms ease, background-color 180ms ease; }
.case-catalog__collapse:hover { color: #9b98b3; background: #222136; }
.case-catalog__collapse-icon {
    display: inline-block;
    transition: transform 300ms ease;
}
.case-catalog__collapse[aria-expanded="false"] .case-catalog__collapse-icon { transform: rotate(180deg); }
.case-catalog__body {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 380ms ease;
}
.case-catalog__body.is-collapsed { grid-template-rows: 0fr; }
.case-catalog__body-inner {
    min-height: 0;
    overflow: hidden;
    opacity: 1;
    width: 100%;
    transition: opacity 220ms ease;
}
.case-catalog__body.is-collapsed .case-catalog__body-inner {
    opacity: 0;
    pointer-events: none;
}
.case-catalog__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: calc(12 * var(--u)); }
.case-card {
    position: relative;
    min-width: 0;
    overflow: hidden;
    padding: calc(13 * var(--u)) calc(12 * var(--u)) calc(22 * var(--u));
    border-radius: calc(14 * var(--u));
    background: #121222;
    text-align: center;
    cursor: pointer;
}
.case-card__link {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}
.case-card__art {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    margin-top: calc(8 * var(--u));
}
.case-card__art::before {
    content: '';
    position: absolute;
    inset: 12% 5%;
    background: radial-gradient(ellipse, var(--case-glow), transparent 68%);
    opacity: .25;
}
.case-card__art img {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    translate: 0 var(--art-offset, 0%);
    scale: var(--art-scale-x, 1) var(--art-scale-y, 1);
    transform-origin: 50% 96%;
    transition: transform 250ms ease;
}
.case-card:hover .case-card__art img,
.case-card:focus-within .case-card__art img {
    transform: translateY(calc(-4 * var(--u))) scale(1.035);
}
.case-card__art--aligned-lid .case-card__body-layer { clip-path: inset(61% 0 0); }
.case-card__lid-wrapper { position: absolute; inset: 0; transform: scaleY(var(--lid-scale)); transform-origin: 50% calc(96% - 35% * var(--art-scale-y)); }
.case-card__lid-layer { clip-path: inset(0 0 39%); }
.case-card:hover .case-card__art--aligned-lid img,
.case-card:focus-within .case-card__art--aligned-lid img { transform: none; }
.case-card__name {
    position: relative;
    margin: calc(14 * var(--u)) 0 calc(14 * var(--u));
    font-size: calc(14 * var(--u));
    line-height: 1.4;
    font-weight: 700;
}
.case-card__prices { display: flex; align-items: center; justify-content: center; gap: calc(12 * var(--u)); }
.case-card__price {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(5 * var(--u));
    min-height: calc(33 * var(--u));
    padding: calc(8 * var(--u)) calc(16 * var(--u));
    border-radius: calc(8 * var(--u));
    background: linear-gradient(180deg, #4ba4ff, #1e86f8);
    color: white;
    font-size: calc(13 * var(--u));
    font-weight: 800;
    white-space: nowrap;
}
.case-card__old { color: #56546e; font-size: calc(12 * var(--u)); white-space: nowrap; }
.case-card__badge { position: absolute; z-index: 2; top: calc(12 * var(--u)); left: calc(12 * var(--u)); padding: calc(9 * var(--u)) calc(10 * var(--u)); border-radius: calc(8 * var(--u)); background: linear-gradient(180deg, #e99a19, #ffca36); color: white; font-size: calc(12 * var(--u)); font-weight: 800; }
.case-card__favorite {
    position: absolute;
    z-index: 3;
    right: calc(12 * var(--u));
    top: calc(12 * var(--u));
    display: grid;
    place-items: center;
    width: calc(32 * var(--u));
    height: calc(32 * var(--u));
    padding: calc(7 * var(--u));
    border: 0;
    border-radius: calc(8 * var(--u));
    background: #1d1c30;
    color: #4d4b65;
    cursor: pointer;
}
.case-card__favorite svg { width: 100%; height: 100%; fill: currentColor; }
.case-card__favorite[aria-pressed="true"] { color: #ff4d64; background: #372030; }
.case-catalog button:focus-visible,
.case-card__link:focus-visible { outline: 2px solid #399bff; outline-offset: 3px; }
.case-catalog__empty { padding: calc(36 * var(--u)); border-radius: calc(19 * var(--u)); background: #121222; text-align: center; color: #9794ad; font-size: calc(14 * var(--u)); }
.case-card[hidden], .case-catalog__empty[hidden],
.case-catalog__body-inner > [hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) {
    .case-catalog__body,
    .case-catalog__body-inner,
    .case-catalog__collapse-icon,
    .case-card__art img { transition: none; }
    .case-card__art img { transition: none; }
    .case-card:hover .case-card__art img,
    .case-card:focus-within .case-card__art img { transform: none; }
}
@media (max-width: 800px) { .case-catalog__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
    .case-catalog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(10 * var(--u)); }
    .case-catalog__header { flex-wrap: wrap; padding: calc(16 * var(--u)) 0 calc(20 * var(--u)); }
    .case-catalog__header h2 { font-size: calc(18 * var(--u)); }
    .case-card { padding: calc(8 * var(--u)) calc(8 * var(--u)) calc(16 * var(--u)); }
    .case-card__name { font-size: calc(12 * var(--u)); }
    .case-card__prices { gap: calc(5 * var(--u)); flex-wrap: wrap; }
    .case-card__price { padding: calc(7 * var(--u)) calc(10 * var(--u)); font-size: calc(12 * var(--u)); }
    .case-card__old { font-size: calc(10 * var(--u)); }
    .case-card__badge { top: calc(8 * var(--u)); left: calc(8 * var(--u)); font-size: calc(10 * var(--u)); padding: calc(7 * var(--u)); }
    .case-card__favorite { top: calc(8 * var(--u)); right: calc(8 * var(--u)); }
}
@media (prefers-reduced-motion: reduce) { .case-card__art img { transition: none; } }

.case-card__remaining { position: absolute; z-index: 2; top: calc(12 * var(--u)); right: calc(12 * var(--u)); display: inline-flex; align-items: center; gap: calc(6 * var(--u)); min-height: calc(32 * var(--u)); padding: calc(7 * var(--u)) calc(10 * var(--u)); border-radius: calc(8 * var(--u)); background: #1d1c30; color: #e7e6f1; font-size: calc(12 * var(--u)); font-weight: 800; white-space: nowrap; }
.case-card__remaining svg { width: calc(11 * var(--u)); height: calc(16 * var(--u)); fill: currentColor; }
.case-card--limited .case-card__art { margin-top: calc(26 * var(--u)); }
.case-card--limited .case-card__favorite { top: auto; bottom: calc(18 * var(--u)); width: calc(26 * var(--u)); height: calc(26 * var(--u)); padding: calc(6 * var(--u)); background: transparent; }
.case-card--limited .case-card__prices { padding: 0 calc(22 * var(--u)); }
.payment-methods {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: center;
    justify-content: space-around;
    gap: calc(24 * var(--u));
    flex: none;
    margin: 0 0 calc(24 * var(--u));
    min-height: calc(118 * var(--u));
    padding: calc(22 * var(--u)) calc(40 * var(--u));
    border-radius: calc(16 * var(--u));
    background: #121222;
    color: #53516c;
}
.payment-methods__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(8 * var(--u));
    min-width: 0;
    white-space: nowrap;
}
.payment-methods__visa svg {
    width: calc(62 * var(--u));
    height: calc(21 * var(--u));
}
.payment-methods__mc-mark {
    width: calc(42 * var(--u));
    height: calc(26 * var(--u));
}
.payment-methods__mc-text {
    font-size: calc(15 * var(--u));
    font-weight: 600;
    letter-spacing: -.02em;
    text-transform: lowercase;
}
.payment-methods__mir svg {
    width: calc(68 * var(--u));
    height: calc(21 * var(--u));
}
.payment-methods__skinpay-mark,
.payment-methods__steam-mark {
    width: calc(28 * var(--u));
    height: calc(28 * var(--u));
    flex: none;
}
.payment-methods__skinpay-text {
    font-size: calc(15 * var(--u));
    font-weight: 800;
    letter-spacing: .08em;
}
.payment-methods__steam-text {
    font-size: calc(13 * var(--u));
    font-weight: 800;
    letter-spacing: .1em;
    line-height: 1.05;
}
.payment-methods__steam-text small {
    display: block;
    margin-top: calc(2 * var(--u));
    font-size: calc(9 * var(--u));
    letter-spacing: .42em;
}
.payment-methods__crypto {
    flex-direction: row;
    gap: 0;
}
.payment-methods__crypto-icons { display: flex; align-items: center; }
.payment-methods__crypto-text { font-size: calc(11 * var(--u)); font-weight: 700; letter-spacing: .03em; }
.payment-methods__wordmark { font-size: calc(23 * var(--u)); font-weight: 900; letter-spacing: -.05em; }
.payment-methods__visa .payment-methods__wordmark { font-style: italic; }
.payment-methods .payment-methods__card-mark { width: calc(30 * var(--u)); height: calc(24 * var(--u)); flex: none; }
.payment-methods__crypto svg {
    width: calc(28 * var(--u));
    height: calc(28 * var(--u));
    flex: none;
    margin-left: calc(-5 * var(--u));
    border-radius: 50%;
    box-shadow: 0 0 0 2px #121222;
}
.payment-methods__crypto svg:first-child { margin-left: 0; }
@media (max-width: 800px) {
    .payment-methods {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: calc(22 * var(--u));
        padding: calc(24 * var(--u)) calc(16 * var(--u));
    }
}
@media (max-width: 640px) {
    .case-card__remaining { top: calc(8 * var(--u)); right: calc(8 * var(--u)); min-height: calc(27 * var(--u)); padding: calc(5 * var(--u)) calc(6 * var(--u)); font-size: calc(10 * var(--u)); gap: calc(4 * var(--u)); }
    .case-card--limited .case-card__prices { padding: 0 calc(17 * var(--u)); }
    .case-card--limited .case-card__favorite { right: calc(5 * var(--u)); bottom: calc(16 * var(--u)); }
    .payment-methods { grid-template-columns: repeat(2, 1fr); }
}

/* Payment marks use their real vector outlines at reference proportions. */
.payment-methods { --pay-unit: clamp(.8px, .066vw, 1.3px); min-height: calc(118 * var(--pay-unit)); padding-inline: calc(40 * var(--pay-unit)); }
.payment-logo { display: block; flex: none; background: currentColor; mask: var(--payment-logo) center / contain no-repeat; width: calc(28 * var(--pay-unit)); height: calc(28 * var(--pay-unit)); }
.payment-logo--visa { --payment-logo: url('assets/payments/visa.svg'); width: calc(66 * var(--pay-unit)); height: calc(24 * var(--pay-unit)); }
.payment-logo--mir { --payment-logo: url('assets/payments/mir.svg'); width: calc(70 * var(--pay-unit)); height: calc(24 * var(--pay-unit)); }
.payment-logo--skinpay { --payment-logo: url('assets/payments/skinpay.svg'); width: calc(145 * var(--pay-unit)); height: calc(28 * var(--pay-unit)); }
.payment-logo--steam { --payment-logo: url('assets/payments/steam.svg'); }
.payment-logo--mastercard { --payment-logo: url('assets/payments/mastercard.svg'); width: calc(42 * var(--pay-unit)); height: calc(27 * var(--pay-unit)); }
.payment-methods__mc-text { font-size: calc(16 * var(--pay-unit)); }
.payment-methods__steam-text { font-size: calc(18 * var(--pay-unit)); }
.payment-methods__steam-text small { font-size: calc(9 * var(--pay-unit)); letter-spacing: .62em; }
.payment-methods__crypto svg { width: calc(28 * var(--pay-unit)); height: calc(28 * var(--pay-unit)); }
@media (max-width: 800px) { .payment-methods { --pay-unit: .9px; } }

/* Body gap alone separates cards, payment strip and footer. */
.case-catalog { padding-bottom: 0; }
.case-catalog + .case-catalog { margin-top: calc(-10 * var(--u)); }
.case-catalog + .case-catalog > .case-catalog__header {
    min-height: calc(112 * var(--u));
    padding: calc(38 * var(--u)) 0;
    box-sizing: border-box;
}
@media (min-width: 641px) {
    .case-catalog > .case-catalog__header { display: grid; grid-template-columns: 1fr auto 1fr; }
    .case-catalog > .case-catalog__header h2 { grid-column: 2; }
    .case-catalog > .case-catalog__header button { grid-column: 3; justify-self: start; }
}

/* Animate both pearl layers together so their seam stays aligned. */
.case-card__art--aligned-lid { transform-origin: 50% 96%; transition: transform 250ms ease; }
.case-card:hover .case-card__art--aligned-lid,
.case-card:focus-within .case-card__art--aligned-lid { transform: translateY(calc(-4 * var(--u))) scale(1.035); }
@media (prefers-reduced-motion: reduce) {
 .case-card__art--aligned-lid { transition: none; }
 .case-card:hover .case-card__art--aligned-lid, .case-card:focus-within .case-card__art--aligned-lid { transform: none; }
}