.catalog-browser, .catalog-browser *, .catalog-browser *::before, .catalog-browser *::after { box-sizing: border-box; }
.catalog-browser { --catalog-accent: var(--accent-color, #ffbe2e); width: 100%; }
.catalog-browser a { text-decoration: none; }
.stats-controls-container.justify-end .search-filter-container--inline { margin-right: 0; }
.stats-controls-container.justify-end .catalog-discovery { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; order: 2; flex: 0 0 auto; gap: 10px; min-height: 38px; margin-left: 16px; padding: 8px 11px; border: 1px solid rgba(var(--accent-color-rgb), .28); border-radius: 9px; background: linear-gradient(135deg, rgba(var(--accent-color-rgb), .11), rgba(var(--accent-color-rgb), .04)); color: var(--text-color); text-decoration: none; transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.stats-controls-container.justify-end .stats-row { order: 3; }
.catalog-discovery:hover { transform: translateY(-1px); border-color: rgba(var(--accent-color-rgb), .58); background: linear-gradient(135deg, rgba(var(--accent-color-rgb), .17), rgba(var(--accent-color-rgb), .07)); color: var(--text-color); }
.catalog-discovery__copy { font-size: 11px; font-weight: 700; line-height: 1.3; white-space: nowrap; }
.catalog-discovery__arrow { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 17px; height: 17px; line-height: 1; }
.catalog-discovery:hover .catalog-discovery__arrow { transform: translateX(2px); }
@media (max-width: 768px) { .stats-controls-container.justify-end .catalog-discovery { align-self: center; margin-left: 0; } }
.skin-collection[href] { padding: 0 10px; text-decoration: none; transition: border-color .2s ease, color .2s ease, background .2s ease; }
.skin-collection[href]:hover { border-color: rgba(var(--accent-color-rgb), .55); background: var(--accent-soft); color: var(--accent-color); }
.catalog-browser__intro { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-bottom: 18px; padding: 28px 30px; overflow: hidden; border: 1px solid var(--border-color); border-radius: 14px; background: radial-gradient(circle at 88% 10%, rgba(var(--accent-color-rgb), .14), transparent 38%), var(--bg-card); box-shadow: var(--card-shadow); }
.catalog-browser__intro::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: linear-gradient(var(--catalog-accent), transparent); }
.catalog-kicker { display: inline-flex; align-items: center; gap: 7px; color: var(--catalog-accent); font-size: 11px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.catalog-kicker::before { content: ''; width: 18px; height: 1px; background: currentColor; }
.catalog-browser__intro h2, .catalog-detail-hero h2, .catalog-items-heading h2 { margin: 8px 0; color: var(--text-color); font-weight: 750; letter-spacing: -.025em; }
.catalog-browser__intro h2 { font-size: clamp(22px, 3vw, 32px); }
.catalog-browser__intro p, .catalog-detail-hero__copy > p, .catalog-items-heading p { max-width: 680px; margin: 0; color: var(--text-secondary); font-size: 13px; line-height: 1.65; }
.catalog-browser__summary { display: grid; place-items: center; min-width: 112px; padding: 16px; border: 1px solid rgba(var(--accent-color-rgb), .28); border-radius: 12px; background: rgba(var(--accent-color-rgb), .07); }
.catalog-browser__summary strong { color: var(--catalog-accent); font-size: 28px; line-height: 1; }
.catalog-browser__summary span { margin-top: 6px; color: var(--text-secondary); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.catalog-tabs { display: inline-flex; gap: 5px; margin-bottom: 18px; padding: 5px; border: 1px solid var(--border-color); border-radius: 11px; background: var(--bg-secondary); }
.catalog-tab { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-width: 112px; padding: 10px 15px; border: 1px solid transparent; border-radius: 8px; color: var(--text-secondary); font-size: 13px; font-weight: 700; transition: .2s ease; }
.catalog-tab:hover { color: var(--text-color); background: var(--bg-card); }
.catalog-tab.is-active { border-color: rgba(var(--accent-color-rgb), .38); background: var(--accent-soft); color: var(--catalog-accent); box-shadow: inset 0 0 0 1px rgba(var(--accent-color-rgb), .08); }
.catalog-tab__icon { position: relative; display: inline-block; width: 17px; height: 17px; flex: 0 0 17px; color: currentColor; }
.catalog-tab__icon--case { background: currentColor; mask: url('../images/cases.svg') center / contain no-repeat; -webkit-mask: url('../images/cases.svg') center / contain no-repeat; }
.catalog-tab__icon--collection { background: currentColor; mask: url('../images/collections.svg') center / contain no-repeat; -webkit-mask: url('../images/collections.svg') center / contain no-repeat; }
.catalog-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.catalog-toolbar > p { margin: 0; color: var(--text-secondary); font-size: 12px; }
.catalog-toolbar > p strong { color: var(--text-color); }
.catalog-search { position: relative; display: block; width: min(440px, 100%); }
.catalog-search__icon { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; z-index: 1; transform: translateY(-50%); background: var(--text-secondary); mask: url('../images/magnifying-glass-inspect-ingame.svg') center / contain no-repeat; -webkit-mask: url('../images/magnifying-glass-inspect-ingame.svg') center / contain no-repeat; pointer-events: none; }
.catalog-search input { width: 100%; min-height: 46px; padding: 11px 42px; border: 1px solid var(--border-color); border-radius: 10px; outline: 0; background: var(--input-bg); color: var(--text-color); font-size: 13px; transition: .2s ease; }
.catalog-search input:focus { border-color: var(--catalog-accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.catalog-search input::-webkit-search-cancel-button { display: none; }
.catalog-search__clear.cart-remove-icon { top: 50%; right: 7px; z-index: 2; transform: translateY(-50%); }
.catalog-search__clear.cart-remove-icon:hover, .catalog-search__clear.cart-remove-icon:focus-visible { transform: translateY(-50%) scale(1.05); }
.catalog-search__clear[hidden] { display: none; }
.catalog-group-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.catalog-page-end { display: flex; justify-content: center; padding: 24px 0 8px; }
.catalog-page-more { padding: 11px 22px; border: 1px solid var(--border-color); border-radius: 9px; background: var(--bg-card); color: var(--text-color); font: inherit; font-weight: 700; cursor: pointer; }
.catalog-page-more:hover { border-color: var(--catalog-accent); }
.catalog-page-more:disabled { opacity: .6; cursor: wait; }
.catalog-group-card { position: relative; display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; align-items: center; min-height: 126px; overflow: hidden; border: 1px solid var(--border-color); border-radius: 12px; background: var(--bg-card); color: var(--text-color); box-shadow: 0 5px 18px rgba(0, 0, 0, .1); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.catalog-group-card:hover { transform: translateY(-2px); border-color: rgba(var(--accent-color-rgb), .52); box-shadow: 0 10px 28px rgba(0, 0, 0, .2); color: var(--text-color); }
.catalog-group-card__ambient { position: absolute; inset: 0 0 0 auto; width: 66%; overflow: hidden; opacity: .26; pointer-events: none; mask-image: linear-gradient(to right, transparent, #000 65%); -webkit-mask-image: linear-gradient(to right, transparent, #000 65%); }
.catalog-group-card__ambient img { position: absolute; top: 50%; right: -12%; display: block; width: 220px; height: 220px; object-fit: contain; transform: translateY(-50%); filter: blur(7px) saturate(1.5) brightness(1.2); }
.catalog-group-card__image { position: relative; z-index: 1; display: grid; place-items: center; width: 88px; height: 100%; padding: 14px 8px 14px 14px; }
.catalog-group-card__image img { width: 74px; height: 82px; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .25)); transition: transform .2s ease; }
.catalog-group-card:hover .catalog-group-card__image img { transform: scale(1.05); }
.catalog-group-card__body { position: relative; z-index: 1; min-width: 0; padding: 16px 8px 16px 12px; }
.catalog-group-card__body > strong { display: -webkit-box; overflow: hidden; color: var(--text-color); font-size: 15px; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.catalog-group-card__meta { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; margin-top: 10px; color: var(--text-secondary); font-size: 11px; }
.catalog-group-card__release time { color: var(--text-color); font-weight: 600; }
.catalog-group-card__meta b { color: var(--text-color); }
.catalog-availability { display: inline-flex; align-items: center; gap: 4px; color: #54c786; line-height: 1.2; }
.catalog-availability i, .catalog-stock-badge i { width: 6px; height: 6px; border-radius: 50%; background: #54c786; box-shadow: 0 0 0 3px rgba(84, 199, 134, .12); }
.catalog-availability i { display: block; flex: 0 0 6px; margin-right: 4px; }
.catalog-group-card__meta .catalog-availability b { margin: 0; color: inherit; line-height: inherit; }
.catalog-availability > span { line-height: inherit; }
.catalog-muted { opacity: .8; }
.catalog-group-card__arrow { position: relative; z-index: 1; padding: 0 14px 0 3px; color: var(--catalog-accent); font-size: 18px; transition: transform .2s ease; }
.catalog-group-card:hover .catalog-group-card__arrow { transform: translateX(3px); }
.catalog-state { grid-column: 1 / -1; padding: 34px; border: 1px dashed var(--border-color); border-radius: 12px; background: var(--bg-card); color: var(--text-secondary); text-align: center; }
.catalog-state--error { border-style: solid; }

.catalog-back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; color: var(--text-secondary); font-size: 12px; font-weight: 700; }
.catalog-back:hover { color: var(--catalog-accent); }
.catalog-detail-hero { position: relative; display: grid; grid-template-columns: 210px minmax(0, 1fr); align-items: center; min-height: 250px; margin-bottom: 30px; overflow: hidden; border: 1px solid var(--border-color); border-radius: 16px; background: radial-gradient(circle at 12% 45%, rgba(var(--accent-color-rgb), .14), transparent 27%), var(--bg-card); box-shadow: var(--card-shadow); }
.catalog-detail-hero__ambient { position: absolute; inset: 0 0 0 auto; width: 52%; overflow: hidden; opacity: .38; pointer-events: none; mask-image: linear-gradient(to right, transparent, #000 50%); -webkit-mask-image: linear-gradient(to right, transparent, #000 50%); }
.catalog-detail-hero__ambient img { position: absolute; top: 50%; right: -22%; display: block; width: clamp(370px, 52vw, 680px); aspect-ratio: 1; object-fit: contain; transform: translateY(-50%) scale(.75); filter: blur(8px) saturate(1.5) brightness(1.2); }
.catalog-detail-hero__image { display: grid; place-items: center; height: 100%; min-height: 250px; padding: 26px; border-right: 1px solid var(--border-color); background: rgba(0, 0, 0, .08); }
.catalog-detail-hero__image img { position: relative; z-index: 1; width: 160px; height: 170px; object-fit: contain; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .3)); }
.catalog-detail-hero__copy { position: relative; z-index: 1; padding: 32px 38px; }
.catalog-detail-hero h2 { margin: 10px 0; font-size: clamp(26px, 4vw, 40px); line-height: 1.15; }
.catalog-detail-stats { display: flex; gap: 10px; margin-top: 22px; }
.catalog-detail-stats > span { display: flex; align-items: baseline; gap: 7px; padding: 9px 12px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-secondary); }
.catalog-detail-stats strong { color: var(--text-color); font-size: 16px; }
.catalog-detail-stats__date strong { font-size: 14px; white-space: nowrap; }
.catalog-detail-stats small { color: var(--text-secondary); font-size: 10px; }
.catalog-detail-stats .is-available { border-color: rgba(84, 199, 134, .28); background: rgba(84, 199, 134, .07); }
.catalog-detail-stats .is-available strong { color: #54c786; }
.catalog-items-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 16px; }
.catalog-items-heading h2 { margin-bottom: 0; font-size: 24px; }
.catalog-items-heading p { text-align: right; }
.catalog-item-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.catalog-item-card { position: relative; display: flex; min-width: 0; min-height: 330px; flex-direction: column; overflow: hidden; border: 1px solid var(--border-color); border-top: 2px solid var(--catalog-rarity); border-radius: 11px; background: var(--bg-card); box-shadow: 0 5px 18px rgba(0, 0, 0, .1); opacity: .84; transition: transform .2s ease, border-color .2s ease, opacity .2s ease; }
.catalog-item-card:hover { transform: translateY(-2px); opacity: 1; }
.catalog-item-card.is-available { border-color: rgba(84, 199, 134, .48); border-top-color: var(--catalog-rarity); opacity: 1; box-shadow: 0 8px 26px rgba(31, 130, 78, .1); }
.catalog-item-card__top { position: absolute; inset: 10px 10px auto; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 6px; pointer-events: none; }
.catalog-stock-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 7px; border: 1px solid rgba(84, 199, 134, .3); border-radius: 999px; background: rgba(22, 49, 36, .92); color: #72d99d; font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.catalog-item-card__image { display: grid; place-items: center; height: 190px; padding: 28px 18px 12px; background: radial-gradient(circle, color-mix(in srgb, var(--catalog-rarity) 10%, transparent), transparent 66%); }
.catalog-item-card__image img { width: 100%; height: 145px; object-fit: contain; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .24)); transition: transform .2s ease; }
.catalog-item-card:hover .catalog-item-card__image img { transform: scale(1.035); }
.catalog-item-card__body { display: flex; flex: 1; min-width: 0; flex-direction: column; padding: 15px; border-top: 1px solid var(--border-color); background: var(--bg-secondary); }
.catalog-item-card__rarity { color: var(--catalog-rarity); font-size: 9px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.catalog-item-card h3 { margin: 6px 0 15px; color: var(--text-color); font-size: 13px; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
.catalog-item-action { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 38px; margin-top: auto; padding: 8px 10px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-card); color: var(--text-secondary); cursor: pointer; font: inherit; font-size: 10px; font-weight: 800; transition: .2s ease; }
.catalog-item-action:hover { border-color: rgba(var(--accent-color-rgb), .55); background: var(--accent-soft); color: var(--catalog-accent); }
.catalog-item-action--available { border-color: rgba(84, 199, 134, .38); background: rgba(84, 199, 134, .1); color: #72d99d; }
.catalog-item-action--available:hover { border-color: #54c786; background: rgba(84, 199, 134, .16); color: #8be8b2; }
.catalog-bell { width: 15px; height: 15px; background: currentColor; mask: url('../images/bell-ringing.svg') center / contain no-repeat; -webkit-mask: url('../images/bell-ringing.svg') center / contain no-repeat; }
.catalog-detail #item-enquiry { margin-top: 26px; }

@media (max-width: 1100px) { .catalog-group-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .catalog-item-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .catalog-browser__intro { align-items: flex-start; padding: 22px; } .catalog-browser__summary { min-width: 92px; } .catalog-detail-hero { grid-template-columns: 140px minmax(0, 1fr); } .catalog-detail-hero__image { min-height: 220px; padding: 18px; } .catalog-detail-hero__image img { width: 115px; height: 140px; } .catalog-detail-hero__copy { padding: 25px; } .catalog-item-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .catalog-browser__intro { display: block; } .catalog-browser__summary { display: inline-flex; gap: 7px; margin-top: 18px; padding: 10px 12px; } .catalog-browser__summary strong { font-size: 20px; } .catalog-browser__summary span { margin: 0; } .catalog-tabs { display: flex; } .catalog-tab { justify-content: center; min-width: 0; flex: 1; } .catalog-toolbar { align-items: stretch; flex-direction: column; gap: 9px; } .catalog-toolbar > p { text-align: right; } .catalog-group-grid { grid-template-columns: 1fr; } .catalog-detail-hero { display: block; } .catalog-detail-hero__image { min-height: 180px; border-right: 0; border-bottom: 1px solid var(--border-color); } .catalog-detail-hero__image img { width: 150px; height: 145px; } .catalog-detail-hero__copy { padding: 24px 20px; } .catalog-detail-stats { align-items: stretch; flex-direction: column; } .catalog-items-heading { align-items: flex-start; flex-direction: column; gap: 8px; } .catalog-items-heading p { text-align: left; } .catalog-item-grid { grid-template-columns: 1fr 1fr; gap: 9px; } .catalog-item-card { min-height: 285px; } .catalog-item-card__image { height: 155px; padding-inline: 10px; } .catalog-item-card__image img { height: 120px; } .catalog-item-card__body { padding: 12px; } }
@media (max-width: 560px) {
    .catalog-detail-hero__ambient { inset: 0 0 auto; width: 100%; height: 180px; opacity: .3; background: radial-gradient(circle at center, rgba(var(--accent-color-rgb), .24), transparent 66%); mask-image: radial-gradient(ellipse at center, #000 30%, transparent 78%); -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 78%); }
    .catalog-detail-hero__ambient img { top: 50%; right: auto; left: 50%; width: clamp(220px, 68vw, 300px); transform: translate(-50%, -50%) scale(.85); filter: blur(6px) saturate(1.5) brightness(1.2); }
}
@media (max-width: 390px) { .catalog-item-grid { grid-template-columns: 1fr; } }