/**
 * Intent TCG catalogue styles.
 *
 * Everything is prefixed .itcg- and scoped so it cannot leak into Solace or
 * Elementor. All colours come from custom properties — override them once in
 * Appearance → Customise → Additional CSS to retheme the whole catalogue.
 *
 * Mobile first. The only breakpoints are min-width.
 */

:root {
	--itcg-base:      #05080D;
	--itcg-panel:     #09101A;
	--itcg-recess:    #070B12;
	--itcg-line:      #283246;
	--itcg-line-soft: #1D2635;
	--itcg-heading:   #F7F7FA;
	--itcg-body:      #AAB0BC;
	--itcg-accent:    #7C3AED;
	--itcg-accent-2:  #8B5CF6;
	--itcg-link:      #A78BFA;
	--itcg-link-2:    #C4B5FD;
	--itcg-violet-bd: #5B3C8E;
	--itcg-violet-dm: #51337F;
	--itcg-pale:      #D9C8FF;
	--itcg-radius:    14px;
}

/**
 * The catalogue paints its own ground rather than inheriting the theme's.
 * Intent TCG is a dark brand, and a theme configured light — or simply reset
 * to defaults — would otherwise leave near-white headings on a white page.
 * Set --itcg-base to `transparent` if you ever want the theme to show through.
 */
.itcg {
	background: var(--itcg-base);
	color: var(--itcg-body);
	/* Break out of a constrained theme container so the ground is full-bleed. */
	margin-inline: calc(50% - 50vw);
	padding-inline: calc(50vw - 50%);
	padding-block: 8px 56px;
}
.itcg *, .itcg *::before, .itcg *::after { box-sizing: border-box; }
.itcg-wrap { max-width: 1160px; margin: 0 auto; padding: 0 20px; }
.itcg img { max-width: 100%; height: auto; font-size: 0; color: transparent; }
.itcg a { color: var(--itcg-link); text-decoration: none; }
.itcg a:hover { color: var(--itcg-link-2); }
.itcg-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* --- typography ------------------------------------------------------- */

.itcg-h1 {
	font-size: clamp(30px, 6vw, 56px);
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 1.02;
	text-transform: uppercase;
	color: var(--itcg-heading);
	margin: 0 0 14px;
}
.itcg-h2 {
	font-size: clamp(21px, 3vw, 32px);
	font-weight: 700;
	letter-spacing: -0.03em;
	color: var(--itcg-heading);
	margin: 0 0 20px;
}
.itcg-eyebrow {
	font-size: 12px; font-weight: 700; letter-spacing: 0.13em;
	text-transform: uppercase; color: var(--itcg-link); margin: 0 0 14px;
}
.itcg-lede { font-size: clamp(16px, 2vw, 19px); line-height: 1.65; max-width: 60ch; margin: 0 0 14px; text-wrap: pretty; }
.itcg-sub { font-size: 16px; font-weight: 600; color: var(--itcg-link); margin: 0 0 24px; }
.itcg-note { font-size: 13px; margin: 12px 0 0; }
.itcg-count { font-size: 13px; }
.itcg-empty { padding: 32px 0; }
.itcg-head { padding: 8px 0 32px; }
.itcg-section { padding: 32px 0; border-top: 1px solid var(--itcg-line-soft); margin-top: 32px; }
.itcg-prose { margin: 28px 0; line-height: 1.7; }

/* --- breadcrumbs ------------------------------------------------------ */

.itcg-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; padding: 18px 0; }
.itcg-crumbs a { color: var(--itcg-body); }
.itcg-crumbs a:hover { color: var(--itcg-link); }
.itcg-crumbs .itcg-sep { color: var(--itcg-violet-dm); }
.itcg-crumbs [aria-current] { color: var(--itcg-heading); }

/* --- buttons ---------------------------------------------------------- */

.itcg-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 48px; padding: 14px 26px; border-radius: 999px;
	font-size: 15px; font-weight: 600; line-height: 1.2; text-align: center;
}
.itcg-btn--primary { background: var(--itcg-accent); color: var(--itcg-heading); }
.itcg-btn--primary:hover { background: var(--itcg-accent-2); color: var(--itcg-heading); }
.itcg-btn--ghost { border: 1px solid var(--itcg-violet-bd); color: var(--itcg-pale); }
.itcg-btn--ghost:hover { color: var(--itcg-heading); }
.itcg-btn.is-disabled { opacity: .65; cursor: default; }
.itcg-more { margin-top: 24px; }

/* --- rarity badges: one hue, five steps -------------------------------- */

.itcg-badge {
	display: inline-block; border-radius: 999px; padding: 5px 12px;
	font-size: 10px; font-weight: 700; letter-spacing: 0.07em;
	text-transform: uppercase; white-space: nowrap;
	border: 1px solid var(--itcg-line-soft); color: var(--itcg-body);
}
.itcg-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.itcg-badge.itcg-r-starlight-rares { background: var(--itcg-accent); border-color: var(--itcg-accent); color: var(--itcg-heading); }
.itcg-badge.itcg-r-secret-rares    { background: rgba(124,58,237,.10); border-color: var(--itcg-violet-bd); color: var(--itcg-pale); }
.itcg-badge.itcg-r-ultra-rares     { background: rgba(124,58,237,.04); border-color: var(--itcg-violet-dm); color: var(--itcg-link); }
.itcg-badge.itcg-r-super-rares     { border-color: var(--itcg-line); }
.itcg-badge.itcg-r-commons         { border-color: var(--itcg-line-soft); }

/* --- availability ----------------------------------------------------- */

.itcg-avail { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; margin: 0; }
.itcg-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--itcg-link); flex: 0 0 auto; }
.itcg-avail.is-out .itcg-dot { background: var(--itcg-violet-dm); }

/* --- card grid -------------------------------------------------------- */

.itcg-grid {
	display: grid; gap: 18px;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
@media (min-width: 700px) { .itcg-grid { gap: 20px; grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); } }

.itcg-card { display: flex; flex-direction: column; gap: 9px; }
.itcg-card__well {
	display: flex; align-items: center; justify-content: center;
	background: linear-gradient(180deg, #0B111C, var(--itcg-recess));
	border: 1px solid var(--itcg-line); border-radius: var(--itcg-radius);
	padding: 14px; aspect-ratio: .72; overflow: hidden;
}
.itcg-card__well.itcg-r-starlight-rares { border-color: var(--itcg-violet-bd); }
.itcg-card__well img { width: 100%; height: 100%; object-fit: contain; display: block; }
.itcg-card__name { font-size: 15px; font-weight: 600; line-height: 1.3; margin: 0; color: var(--itcg-heading); }
.itcg-card__name a { color: var(--itcg-heading); }
.itcg-card__name a:hover { color: var(--itcg-link); }
.itcg-code { font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--itcg-link); }
.itcg-price { font-size: 16px; font-weight: 700; color: var(--itcg-heading); }
.itcg-price small { font-size: 11px; font-weight: 400; color: var(--itcg-body); }
.itcg-ebay { font-size: 13px; font-weight: 600; padding: 10px 0; }
.itcg-soon { font-size: 13px; color: var(--itcg-body); padding: 10px 0; }
.itcg-card .itcg-badge { align-self: flex-start; }

.itcg-pending {
	display: flex; flex-direction: column; align-items: center; gap: 8px;
	color: var(--itcg-violet-dm); font-size: 10px; letter-spacing: .06em;
	text-transform: uppercase; text-align: center;
}
.itcg-pending--lg { font-size: 12px; padding: 48px 0; }

/* --- single card ------------------------------------------------------ */

.itcg-single { display: grid; gap: 32px; }
@media (min-width: 900px) { .itcg-single { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 64px; align-items: start; } }

.itcg-hero-art {
	background: linear-gradient(180deg, #0B111C, var(--itcg-recess));
	border: 1px solid var(--itcg-line); border-radius: 20px;
	padding: clamp(20px, 5vw, 40px);
	display: flex; align-items: center; justify-content: center;
}
.itcg-hero-art img { max-width: 340px; width: 100%; border-radius: 8px; display: block; }
.itcg-hero-art.itcg-r-starlight-rares { border-color: var(--itcg-violet-bd); }

.itcg-buybox {
	border: 1px solid var(--itcg-violet-dm); border-radius: 20px;
	background: linear-gradient(160deg, rgba(124,58,237,.07), rgba(124,58,237,0) 60%), var(--itcg-recess);
	padding: clamp(20px, 4vw, 32px);
	display: flex; flex-wrap: wrap; gap: 20px;
	align-items: center; justify-content: space-between;
	margin: 0 0 32px;
}
.itcg-buybox__price { font-size: clamp(28px, 5vw, 40px); font-weight: 800; letter-spacing: -0.035em; color: var(--itcg-heading); margin: 0 0 8px; }
.itcg-buybox__price span { font-size: 15px; font-weight: 400; color: var(--itcg-body); }
.itcg-buybox__note { font-size: 14px; margin: 10px 0 0; max-width: 36ch; }
.itcg-buybox .itcg-btn { flex: 1 1 auto; }
@media (min-width: 600px) { .itcg-buybox .itcg-btn { flex: 0 0 auto; } }

/* --- detail list ------------------------------------------------------ */

.itcg-dl { margin: 0; border-top: 1px solid var(--itcg-line-soft); }
.itcg-dl__row {
	display: flex; flex-wrap: wrap; gap: 4px 20px;
	padding: 14px 0; border-bottom: 1px solid var(--itcg-line-soft);
}
.itcg-dl dt { flex: 0 0 180px; font-size: 14px; color: var(--itcg-body); margin: 0; }
.itcg-dl dd { margin: 0; font-size: 15px; font-weight: 600; color: var(--itcg-heading); }

/* --- rarity rows / pills ---------------------------------------------- */

.itcg-rows { border-top: 1px solid var(--itcg-line-soft); }
.itcg-row {
	display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px;
	padding: 18px 4px; border-bottom: 1px solid var(--itcg-line-soft);
	color: var(--itcg-body); min-height: 48px;
}
.itcg-row:hover { color: var(--itcg-body); background: rgba(124,58,237,.03); }
.itcg-row__n { font-size: 26px; font-weight: 700; color: var(--itcg-heading); min-width: 44px; }
.itcg-row__d { flex: 1 1 240px; font-size: 15px; }
.itcg-row__go { color: var(--itcg-link); font-weight: 600; }

.itcg-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.itcg-pill {
	display: inline-flex; align-items: center; gap: 8px;
	min-height: 44px; padding: 10px 18px; border-radius: 999px;
	border: 1px solid var(--itcg-line); color: var(--itcg-body);
	font-size: 13px; font-weight: 600;
}
.itcg-pill span { color: var(--itcg-violet-dm); }
.itcg-pill:hover { border-color: var(--itcg-violet-bd); color: var(--itcg-pale); }

/* --- stat tiles ------------------------------------------------------- */

.itcg-tiles { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.itcg-tile {
	background: var(--itcg-panel); border: 1px solid var(--itcg-line);
	border-radius: var(--itcg-radius); padding: 22px;
	display: flex; flex-direction: column; gap: 9px;
}
.itcg-tile h3 { margin: 0; font-size: 19px; font-weight: 700; color: var(--itcg-heading); }
.itcg-tile p { margin: 0; font-size: 14px; line-height: 1.6; }
.itcg-tile__n { font-size: 36px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: var(--itcg-heading); }
.itcg-tile.is-accent { border-color: var(--itcg-violet-dm); background: rgba(124,58,237,.04); }
.itcg-tile.is-accent .itcg-tile__n { color: var(--itcg-link); }
.itcg-tile--link:hover { border-color: var(--itcg-violet-bd); }
.itcg-go { color: var(--itcg-link); font-weight: 600; font-size: 14px; margin-top: 4px; }

/* --- search ----------------------------------------------------------- */

.itcg-search { position: relative; }
.itcg-search__form {
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
	background: var(--itcg-panel); border: 1px solid var(--itcg-line);
	border-radius: 999px; padding: 6px 6px 6px 18px;
}
.itcg-search__icon { color: var(--itcg-link); flex: 0 0 auto; }
.itcg-search__form input[type="search"] {
	flex: 1 1 160px; min-width: 0; min-height: 44px;
	background: transparent; border: 0; outline: none; box-shadow: none;
	color: var(--itcg-heading); font-size: 16px; /* 16px stops iOS zooming on focus */
	padding: 8px 0;
}
.itcg-search__form input[type="search"]::placeholder { color: var(--itcg-body); }
.itcg-search__form .itcg-btn { flex: 0 0 auto; }
.itcg-search__hint { font-size: 13px; margin: 10px 0 0; }

.itcg-search__live {
	position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 8px);
	background: var(--itcg-panel); border: 1px solid var(--itcg-line);
	border-radius: var(--itcg-radius); padding: 8px;
	max-height: 62vh; overflow-y: auto;
	box-shadow: 0 24px 48px rgba(0,0,0,.5);
}
.itcg-suggest { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 10px; min-height: 56px; }
.itcg-suggest:hover, .itcg-suggest:focus { background: rgba(124,58,237,.08); }
.itcg-suggest img { width: 38px; height: 54px; object-fit: contain; flex: 0 0 auto; }
.itcg-suggest__ph { width: 38px; height: 54px; border: 1px dashed var(--itcg-violet-dm); border-radius: 5px; flex: 0 0 auto; }
.itcg-suggest__b { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.itcg-suggest__t { font-size: 14px; font-weight: 600; color: var(--itcg-heading); }
.itcg-suggest__m { font-size: 12px; color: var(--itcg-body); }
.itcg-suggest__p { margin-left: auto; font-size: 14px; font-weight: 700; color: var(--itcg-heading); white-space: nowrap; }
.itcg-suggest__all { display: block; padding: 12px 10px; font-size: 13px; font-weight: 600; border-top: 1px solid var(--itcg-line-soft); margin-top: 4px; }
.itcg-suggest__none { padding: 16px 10px; font-size: 14px; }

.itcg-results { margin-top: 32px; }
.itcg-results__count { font-size: 15px; margin: 0 0 20px; }

/* --- tap targets -------------------------------------------------------
 * WCAG 2.5.8 asks for 24x24 CSS px minimum; real thumbs want more. Inline
 * navigation links get a 32px hit box, standalone links and every CTA get 44.
 * Padding does the work so nothing moves visually.
 * -------------------------------------------------------------------- */

.itcg-crumbs a,
.itcg-dl dd a,
.itcg-row__go {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
}

.itcg-tile a,
.itcg-note a,
.itcg-more a,
.itcg-ebay,
.itcg-card__name a,
.itcg-suggest__all {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* The card title can wrap to two lines, so height comes from padding. */
.itcg-card__name a { align-items: flex-start; padding-block: 4px; }

/* --- pagination ------------------------------------------------------- */

.itcg .pagination, .itcg .nav-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.itcg .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 44px; min-height: 44px; padding: 0 12px;
	border: 1px solid var(--itcg-line); border-radius: 8px; color: var(--itcg-body);
}
.itcg .page-numbers.current { background: var(--itcg-accent); border-color: var(--itcg-accent); color: var(--itcg-heading); }