/* AI Epicverse Sections — uses the theme's own colour tokens where present. */
:root {
	--aie-bg: var(--background, #080d17);
	--aie-fg: var(--foreground, #f4f7ff);
	--aie-card: var(--card, #101b2b);
	--aie-accent: var(--primary, #78dbff);
	--aie-border: var(--border, #263447);
	--aie-muted: var(--muted, #a4afc0);
	--aie-win: #d3ff6a;
	--aie-radius: 14px;
}

/* ---------- Fallbacks: only apply if the theme doesn't style these (zero specificity) ---------- */
:where(.aie-grid) { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 28px; }
:where(.aie-card) { display: flex; flex-direction: column; gap: 14px; }
:where(.aie-card .story-image-link) { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; background: var(--aie-card); }
:where(.aie-card .story-image-link img) { width: 100%; height: 100%; object-fit: cover; display: block; }
:where(.aie-card .image-corner) { position: absolute; right: 10px; top: 10px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-size: 14px; }
:where(.aie-card h3) { margin: 6px 0; font-size: 1.15rem; line-height: 1.3; }
:where(.aie-card h3 a) { color: inherit; text-decoration: none; }
:where(.aie-card p) { margin: 0; color: var(--aie-muted); font-size: .95rem; line-height: 1.55; }
:where(.aie-card .tag) { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--aie-accent); text-decoration: none; }
:where(.aie-card .meta) { display: flex; gap: 14px; margin-top: 8px; font-size: .8rem; color: var(--aie-muted); }
:where(.aie-home-section .section-heading) { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 26px; flex-wrap: wrap; }
:where(.aie-home-section .section-heading p) { color: var(--aie-muted); max-width: 60ch; }

.aie-thumb-fallback {
	position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; text-align: center;
	font-weight: 600; letter-spacing: .04em; color: var(--aie-fg);
	background: radial-gradient(120% 120% at 0% 0%, rgba(120,219,255,.35), transparent 55%), linear-gradient(135deg, #0f2238, #0a1220);
}
.aie-product-image .aie-thumb-fallback { position: absolute; }

/* ---------- Hub pages ---------- */
.aie-hub .aie-hub-heading { max-width: 820px; }
.aie-hub .aie-lede { font-size: 1.15rem; color: var(--aie-muted); line-height: 1.6; margin-top: 10px; }
.aie-hub .aie-hub-body { max-width: none; width: 100%; }
.aie-hub .aie-hub-body > p:first-child { max-width: 760px; color: var(--aie-muted); margin-bottom: 36px; }
.aie-pager { display: flex; justify-content: center; align-items: center; gap: 22px; margin: 44px 0 10px; color: var(--aie-muted); }
.aie-empty { border: 1px dashed var(--aie-border); border-radius: var(--aie-radius); padding: 36px; text-align: center; color: var(--aie-muted); }
.aie-empty p { margin: 8px 0 0; }
.aie-admin-note { margin-top: 12px; font-size: .9rem; color: var(--aie-muted); }

/* ---------- Products ---------- */
.aie-product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 24px; }
.aie-product-card { display: flex; flex-direction: column; background: var(--aie-card); border: 1px solid var(--aie-border); border-radius: var(--aie-radius); overflow: hidden; transition: border-color .2s, transform .2s; }
.aie-product-card:hover { border-color: var(--aie-accent); transform: translateY(-2px); }
.aie-product-image { position: relative; display: block; aspect-ratio: 4 / 3; background: #0b1424; overflow: hidden; }
.aie-product-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aie-badge { position: absolute; left: 12px; top: 12px; padding: 4px 10px; border-radius: 999px; background: var(--aie-win); color: #0b0e12; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.aie-product-body { display: flex; flex-direction: column; gap: 8px; padding: 18px 18px 20px; flex: 1; }
.aie-product-body h3 { margin: 2px 0; font-size: 1.15rem; line-height: 1.3; }
.aie-product-body h3 a { color: inherit; text-decoration: none; }
.aie-product-body p { margin: 0; color: var(--aie-muted); font-size: .95rem; line-height: 1.5; }
.aie-product-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--aie-border); flex-wrap: wrap; }
.aie-product-actions { display: flex; align-items: center; gap: 14px; }
.aie-price { font-size: 1.25rem; font-weight: 700; color: var(--aie-fg); }
.aie-old-price { color: var(--aie-muted); font-size: .95rem; margin-left: 4px; }
.aie-details { color: var(--aie-muted); font-size: .9rem; text-decoration: none; }
.aie-details:hover { color: var(--aie-fg); }
a.aie-buy { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 8px; background: var(--aie-accent); color: #06121f !important; font-weight: 700; font-size: .92rem; text-decoration: none !important; white-space: nowrap; }
a.aie-buy:hover { filter: brightness(1.1); }
a.aie-buy:focus-visible { outline: 2px solid var(--aie-fg); outline-offset: 2px; }
a.aie-buy-lg { padding: 13px 24px; font-size: 1rem; }
.aie-buybox { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin: 26px 0; padding: 18px 22px; background: var(--aie-card); border: 1px solid var(--aie-border); border-radius: var(--aie-radius); }
.aie-buybox-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.aie-format { color: var(--aie-muted); font-size: .9rem; }

/* ---------- Article blocks (Battleground & Tutorials) ---------- */
.aie-scoreboard { margin: 30px 0; padding: 20px; background: var(--aie-card); border: 1px solid var(--aie-border); border-radius: var(--aie-radius); overflow-x: auto; }
.aie-scoreboard-title { margin: 0 0 12px !important; font-size: .78rem !important; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--aie-accent); }
table.aie-compare { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 520px; margin: 0; }
table.aie-compare th, table.aie-compare td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--aie-border); vertical-align: top; }
table.aie-compare th { color: var(--aie-muted); font-weight: 600; font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; background: transparent; }
table.aie-compare td:first-child { font-weight: 600; color: var(--aie-fg); }
table.aie-compare td.aie-win { color: var(--aie-win); font-weight: 700; }
table.aie-compare tr:last-child td { border-bottom: 0; }
.aie-note { margin: 12px 0 0 !important; font-size: .82rem !important; color: var(--aie-muted); }

.aie-prompt { position: relative; margin: 22px 0; padding: 18px 20px 16px; border-left: 3px solid var(--aie-accent); background: rgba(120, 219, 255, .07); border-radius: 0 10px 10px 0; }
.aie-prompt p { margin: 6px 0 0 !important; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9rem; line-height: 1.6; }
.aie-prompt-label { display: block; padding-right: 64px; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--aie-accent); }
.aie-prompt-bad { border-left-color: #ff7a7a; background: rgba(255, 122, 122, .07); }
.aie-prompt-bad .aie-prompt-label { color: #ff9a9a; }
.aie-copy { position: absolute; right: 10px; top: 10px; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--aie-border); background: var(--aie-bg); color: var(--aie-muted); font-size: .75rem; cursor: pointer; }
.aie-copy:hover { color: var(--aie-fg); border-color: var(--aie-accent); }

.aie-verdict { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; margin: 22px 0 34px; padding: 14px 18px; border: 1px solid rgba(211, 255, 106, .35); background: rgba(211, 255, 106, .06); border-radius: 10px; }
.aie-verdict p { margin: 0 !important; }
.aie-verdict-label { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--aie-win); white-space: nowrap; }

.aie-steps-summary { margin: 24px 0; padding: 16px 20px; border: 1px solid var(--aie-border); border-radius: 10px; background: var(--aie-card); }
.aie-steps-summary p { margin: 4px 0 !important; font-size: .95rem; }

@media (max-width: 640px) {
	.aie-product-foot { flex-direction: column; align-items: flex-start; }
	.aie-buybox { flex-direction: column; align-items: stretch; text-align: center; }
	.aie-buybox-price { justify-content: center; }
	a.aie-buy-lg { justify-content: center; }
	.aie-scoreboard { padding: 14px; }
}