/* BMJ TCG Suite — Catalog browser.
   Usa as variáveis do Cardsmith quando existirem, com fallback claro pra
   qualquer outro tema. Nada aqui depende do tema pra funcionar. */

.bmjcat {
	--cat-gap: 16px;
	color: var(--cs-text, #16202e);
	font-family: var(--cs-font-body, system-ui, sans-serif);
}

/* ---------- barra ---------- */

.bmjcat-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 20px;
}
.bmjcat-games {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.bmjcat-game {
	padding: 9px 16px;
	border: 1px solid var(--cs-line, #e5e7eb);
	border-radius: 999px;
	background: var(--cs-panel, #fff);
	color: var(--cs-text, #16202e);
	font: inherit;
	font-size: 14px;
	cursor: pointer;
	transition: border-color .16s ease, color .16s ease, background .16s ease;
}
.bmjcat-game:hover { border-color: var(--cs-accent, #4da3ff); }
.bmjcat-game.is-on {
	background: var(--cs-accent, #4da3ff);
	border-color: var(--cs-accent, #4da3ff);
	color: var(--cs-accent-ink, #06101f);
}
/* ---------- filtro "só em estoque" ---------- */

.bmjcat-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	user-select: none;
	font-size: 13px;
}
.bmjcat-toggle input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}
.bmjcat-toggle-track {
	position: relative;
	width: 40px;
	height: 22px;
	border-radius: 999px;
	background: var(--cs-line, #e5e7eb);
	transition: background .16s ease;
}
.bmjcat-toggle-dot {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	transition: transform .16s ease;
}
.bmjcat-toggle input:checked + .bmjcat-toggle-track { background: var(--cs-ok, #2fae62); }
.bmjcat-toggle input:checked + .bmjcat-toggle-track .bmjcat-toggle-dot { transform: translateX(18px); }
.bmjcat-toggle input:focus-visible + .bmjcat-toggle-track { outline: 2px solid var(--cs-accent, #4da3ff); outline-offset: 2px; }
.bmjcat-toggle-label { color: var(--cs-muted, #63748c); }
.bmjcat-toggle input:checked ~ .bmjcat-toggle-label { color: var(--cs-ok, #2fae62); }

/* Quantas cartas a loja tem daquela coleção. */
.bmjcat-have-n {
	flex: 0 0 auto;
	min-width: 20px;
	padding: 1px 6px;
	border-radius: 999px;
	background: var(--cs-ok, #2fae62);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	text-align: center;
}

.bmjcat-search {
	flex: 1 1 260px;
	max-width: 420px;
	padding: 11px 16px;
	border: 1px solid var(--cs-line, #e5e7eb);
	border-radius: var(--cs-radius, 10px);
	background: var(--cs-bg-2, #f6f7f9);
	color: var(--cs-text, #16202e);
	font: inherit;
}
.bmjcat-search:focus {
	outline: none;
	border-color: var(--cs-accent, #4da3ff);
}

/* ---------- migalha ---------- */

.bmjcat-crumb {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
	color: var(--cs-muted, #63748c);
	font-size: 14px;
}
.bmjcat-back {
	padding: 6px 12px;
	border: 1px solid var(--cs-line, #e5e7eb);
	border-radius: var(--cs-radius, 10px);
	background: transparent;
	color: var(--cs-text, #16202e);
	font: inherit;
	font-size: 13px;
	cursor: pointer;
}
.bmjcat-back:hover { border-color: var(--cs-accent, #4da3ff); }

/* ---------- coleções ---------- */

/* ---------- índice A–Z ----------
   Com 986 coleções de Magic, rolar não é navegar. A barra de letras leva
   direto ao grupo e as colunas cabem muito mais na dobra — mesmo desenho
   que LigaMagic e Epic One usam. */

.bmjcat-letters {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-bottom: 16px;
}
.bmjcat-letter {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 30px;
	height: 30px;
	padding: 0 6px;
	border-radius: 6px;
	background: var(--cs-accent, #4da3ff);
	color: var(--cs-accent-ink, #06101f) !important;
	font-family: var(--cs-font-head, inherit);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}
.bmjcat-letter:hover { filter: brightness(1.15); }
/* Letra sem coleção continua visível pra barra não "dançar" de jogo pra jogo. */
.bmjcat-letter.is-off {
	background: var(--cs-bg-2, #f6f7f9);
	color: var(--cs-muted, #63748c) !important;
	opacity: .5;
}

.bmjcat-toolbar {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 18px;
}
.bmjcat-sort {
	padding: 8px 12px;
	border: 1px solid var(--cs-line, #e5e7eb);
	border-radius: var(--cs-radius, 10px);
	background: var(--cs-panel, #fff);
	color: var(--cs-text, #16202e);
	font: inherit;
	font-size: 13px;
}

.bmjcat-az {
	columns: 3;
	column-gap: 32px;
}
.bmjcat-az-group {
	/* O grupo inteiro não pode ser partido entre colunas: a letra ficaria
	   numa coluna e metade das edições em outra. */
	break-inside: avoid;
	page-break-inside: avoid;
	margin-bottom: 22px;
}
.bmjcat-az-letter {
	margin: 0 0 8px;
	padding-bottom: 5px;
	border-bottom: 1px solid var(--cs-line, #e5e7eb);
	font-family: var(--cs-font-head, inherit);
	font-size: 17px;
}
.bmjcat-row {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 5px 6px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 14px;
	line-height: 1.35;
	text-align: left;
	cursor: pointer;
}
.bmjcat-row:hover {
	background: var(--cs-bg-2, #f6f7f9);
	color: var(--cs-accent, #4da3ff);
}
.bmjcat-row .bmjcat-set-ico {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	padding: 2px;
}
/* `flex:0 1 auto` e não `1 1`: com flex-grow o nome ocupa a coluna toda e
   joga o código lá na borda direita, longe da edição a que se refere. */
.bmjcat-row .bmjcat-set-name { flex: 0 1 auto; font-size: 14px; }
.bmjcat-code {
	flex: 0 0 auto;
	margin-right: auto;
	color: var(--cs-muted, #63748c);
	font-size: 11px;
	font-style: italic;
}

@media (max-width: 1100px) { .bmjcat-az { columns: 2; } }
@media (max-width: 700px)  { .bmjcat-az { columns: 1; } }

/* Cabeçalho de ano: Magic tem quase mil coleções, e sem esse corte visual a
   lista vira um rolo em que ninguém se localiza. */
.bmjcat-year {
	margin: 28px 0 12px;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--cs-line, #e5e7eb);
	color: var(--cs-muted, #63748c);
	font-family: var(--cs-font-head, inherit);
	font-size: 15px;
	letter-spacing: .06em;
}
.bmjcat-year:first-child { margin-top: 0; }

.bmjcat-sets {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: var(--cat-gap);
}
.bmjcat-set {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	padding: 16px;
	border: 1px solid var(--cs-line, #e5e7eb);
	border-radius: var(--cs-radius, 10px);
	background: var(--cs-panel, #fff);
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color .16s ease, transform .16s ease;
}
.bmjcat-set:hover {
	border-color: var(--cs-accent, #4da3ff);
	transform: translateY(-2px);
}
.bmjcat-set-ico {
	width: 32px;
	height: 32px;
	padding: 4px;
	object-fit: contain;
	/* Símbolo de coleção é SVG preto: no tema escuro sumiria contra o painel.
	   Mesma solução do logo de evento em suite.css — chip claro atrás. */
	background: #d9d9de;
	border-radius: 6px;
}
.bmjcat-set-name {
	font-family: var(--cs-font-head, inherit);
	font-size: 16px;
	line-height: 1.25;
}
.bmjcat-set-meta {
	color: var(--cs-muted, #63748c);
	font-size: 12px;
}

/* ---------- cartas ---------- */

/* `auto-fill` com mínimo de 170px: em tela larga entram 7–8 cartas por linha
   em vez das 4 fixas de antes, que deixavam metade do monitor vazia. */
.bmjcat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: var(--cat-gap);
}

/* ---------- contagem e paginação ---------- */

.bmjcat-counts {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 12px;
	color: var(--cs-muted, #63748c);
	font-size: 14px;
}
.bmjcat-range strong { color: var(--cs-text, #16202e); }
.bmjcat-per { display: inline-flex; align-items: center; gap: 8px; }

.bmjcat-pager {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	margin: 14px 0 18px;
}
.bmjcat-p {
	min-width: 38px;
	padding: 8px 11px;
	border: 1px solid var(--cs-line, #e5e7eb);
	border-radius: var(--cs-radius, 10px);
	background: var(--cs-panel, #fff);
	color: var(--cs-text, #16202e);
	font: inherit;
	font-size: 14px;
	cursor: pointer;
}
.bmjcat-p:hover:not(:disabled):not(.is-on) { border-color: var(--cs-accent, #4da3ff); }
.bmjcat-p.is-on {
	background: var(--cs-accent, #4da3ff);
	border-color: var(--cs-accent, #4da3ff);
	color: var(--cs-accent-ink, #fff);
	font-weight: 700;
}
/* Desabilitado fica visível mas inerte: sumir move os outros botões de lugar
   entre uma página e outra. */
.bmjcat-p:disabled { opacity: .35; cursor: default; }
.bmjcat-p-gap { padding: 0 4px; color: var(--cs-muted, #63748c); }
.bmjcat-card {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 12px;
	border: 1px solid var(--cs-line, #e5e7eb);
	border-radius: var(--cs-radius, 10px);
	background: var(--cs-panel, #fff);
}
/* Carta em estoque é a única que vende: ganha destaque. */
.bmjcat-card.is-in { border-color: var(--cs-ok, #2fae62); }

/* A arte é um <button> (abre o zoom, não navega): precisa de reset. */
.bmjcat-img {
	position: relative;
	aspect-ratio: 5 / 7;
	margin-bottom: 6px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	overflow: hidden;
	background: var(--cs-bg-2, #f6f7f9);
	cursor: zoom-in;
	font: inherit;
	color: inherit;
}
.bmjcat-img:disabled { cursor: default; }
.bmjcat-img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	transition: transform .18s ease;
}
.bmjcat-img:hover img { transform: scale(1.03); }
/* Fora de estoque fica visível, mas sem competir com o que está à venda. */
.bmjcat-card:not(.is-in) .bmjcat-img img { opacity: .55; }
.bmjcat-card:not(.is-in):hover .bmjcat-img img { opacity: 1; }

/* Lupa no canto: sem ela nada indica que a arte é clicável. */
.bmjcat-zoom-hint {
	position: absolute;
	right: 6px;
	bottom: 6px;
	display: flex;
	padding: 5px;
	border-radius: 999px;
	background: rgba(0, 0, 0, .62);
	color: #fff;
	opacity: 0;
	transition: opacity .18s ease;
	pointer-events: none;
}
.bmjcat-img:hover .bmjcat-zoom-hint,
.bmjcat-img:focus-visible .bmjcat-zoom-hint { opacity: 1; }
.bmjcat-img:disabled .bmjcat-zoom-hint { display: none; }

.bmjcat-name {
	margin: 0;
	font-family: var(--cs-font-head, inherit);
	font-size: 14px;
	line-height: 1.3;
}
.bmjcat-name-link {
	color: inherit;
	text-decoration: none;
}
.bmjcat-name-link:hover {
	color: var(--cs-accent, #4da3ff);
	text-decoration: underline;
}
.bmjcat-meta,
.bmjcat-market {
	margin: 0;
	color: var(--cs-muted, #63748c);
	font-size: 12px;
}
.bmjcat-action {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	padding-top: 8px;
}
.bmjcat-buy {
	padding: 7px 14px;
	border-radius: var(--cs-radius, 10px);
	background: var(--cs-accent, #4da3ff);
	color: var(--cs-accent-ink, #06101f) !important;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}
.bmjcat-qty {
	color: var(--cs-ok, #2fae62);
	font-size: 12px;
}
.bmjcat-out {
	color: var(--cs-muted, #63748c);
	font-size: 12px;
}
.bmjcat-have {
	padding: 7px 12px;
	border: 1px dashed var(--cs-line, #e5e7eb);
	border-radius: var(--cs-radius, 10px);
	background: transparent;
	color: var(--cs-muted, #63748c);
	font: inherit;
	font-size: 12px;
	cursor: pointer;
}
.bmjcat-have:hover:not(:disabled) {
	border-style: solid;
	border-color: var(--cs-accent, #4da3ff);
	color: var(--cs-accent, #4da3ff);
}
.bmjcat-have:disabled { opacity: .6; cursor: default; }

/* ---------- estados ---------- */

.bmjcat-msg {
	padding: 40px 0;
	color: var(--cs-muted, #63748c);
	text-align: center;
}
.bmjcat-more {
	margin-top: 24px;
	text-align: center;
}
.bmjcat-more-btn {
	padding: 11px 28px;
	border: 1px solid var(--cs-line, #e5e7eb);
	border-radius: var(--cs-radius, 10px);
	background: var(--cs-panel, #fff);
	color: var(--cs-text, #16202e);
	font: inherit;
	cursor: pointer;
}
.bmjcat-more-btn:hover { border-color: var(--cs-accent, #4da3ff); }

/* ---------- barra de filtros dentro da coleção ---------- */

.bmjcat-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 18px;
	padding: 12px 14px;
	border: 1px solid var(--cs-line, #e5e7eb);
	border-radius: var(--cs-radius, 10px);
	background: var(--cs-bg-2, #f6f7f9);
}
.bmjcat-f {
	padding: 8px 12px;
	border: 1px solid var(--cs-line, #e5e7eb);
	border-radius: var(--cs-radius, 10px);
	background: var(--cs-panel, #fff);
	color: var(--cs-text, #16202e);
	font: inherit;
	font-size: 14px;
	cursor: pointer;
}
.bmjcat-f:focus { outline: none; border-color: var(--cs-accent, #4da3ff); }
.bmjcat-f-clear {
	margin-left: auto;
	padding: 8px 14px;
	border: 1px solid var(--cs-accent, #4da3ff);
	border-radius: var(--cs-radius, 10px);
	background: transparent;
	color: var(--cs-accent, #4da3ff);
	font: inherit;
	font-size: 13px;
	cursor: pointer;
}
.bmjcat-f-clear:hover { background: var(--cs-accent, #4da3ff); color: var(--cs-accent-ink, #fff); }

/* "Show all X cards" — saída do modo filtrado por estoque. */
.bmjcat-showall {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
	padding: 11px 20px;
	border: 0;
	border-radius: var(--cs-radius, 10px);
	background: var(--cs-accent, #4da3ff);
	color: var(--cs-accent-ink, #06101f);
	font-family: var(--cs-font-head, inherit);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	cursor: pointer;
}
.bmjcat-showall:hover { filter: brightness(1.1); }

@media (max-width: 640px) {
	.bmjcat-f { flex: 1 1 45%; }
	.bmjcat-f-clear { flex: 1 1 100%; margin-left: 0; }
}

/* ---------- zoom da arte ---------- */

/* O atributo `hidden` sozinho perde pro `display:flex` abaixo. O tema tem um
   `[hidden]{display:none!important}` global, mas este CSS precisa funcionar em
   qualquer tema — então a regra vem junto. */
.bmjcat-zoom[hidden] { display: none; }

.bmjcat-zoom {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4vmin;
	background: rgba(0, 0, 0, .86);
	cursor: zoom-out;
}
/* Trava a rolagem do fundo enquanto a arte está aberta. */
html.bmjcat-zoomed, html.bmjcat-zoomed body { overflow: hidden; }

.bmjcat-zoom-fig {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	max-height: 100%;
	cursor: default;
}
.bmjcat-zoom-fig img {
	max-width: min(560px, 92vw);
	/* Desconta a legenda: sem isso a arte encosta na borda em tela baixa. */
	max-height: calc(100vh - 8vmin - 60px);
	width: auto;
	height: auto;
	border-radius: 14px;
	box-shadow: 0 24px 70px rgba(0, 0, 0, .6);
}
.bmjcat-zoom-fig figcaption {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	color: #fff;
	text-align: center;
}
.bmjcat-zoom-fig figcaption strong {
	font-family: var(--cs-font-head, inherit);
	font-size: 17px;
}
.bmjcat-zoom-fig figcaption span {
	color: rgba(255, 255, 255, .66);
	font-size: 13px;
}

.bmjcat-zoom-x {
	position: absolute;
	top: 16px;
	right: 18px;
	width: 42px;
	height: 42px;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}
.bmjcat-zoom-x:hover { background: rgba(255, 255, 255, .24); }

@media (max-width: 640px) {
	.bmjcat-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
	.bmjcat-sets { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}