/**
 * Design tokens, resets and the primitives every page uses.
 *
 * The palette is sampled from the site logo: cyan lettering on a deep navy
 * card, with gold trim and a crimson flame. The logo cyan (#44d1df) is too
 * light to carry text on white, so interactive elements use a darkened cyan
 * that clears 4.5:1 and the bright cyan is reserved for dark surfaces.
 *
 * These deliberately mirror the tcg-marketplace plugin's tokens, so the
 * storefront and the vendor dashboard are one system.
 */

:root {
	--tcgsf-brand-teal: #2a8686;
	--tcgsf-brand-charcoal: #282830;

	--tcgsf-primary: #206464;
	--tcgsf-primary-dark: #17494a;
	--tcgsf-primary-soft: #e3f1f0;
	--tcgsf-accent: #c8951f;
	--tcgsf-accent-soft: #fdf3dc;

	--tcgsf-ink: #24242c;
	--tcgsf-ink-soft: #454550;
	--tcgsf-muted: #62626e;
	--tcgsf-border: #e2e2e8;
	--tcgsf-surface: #ffffff;
	--tcgsf-surface-alt: #f7f8fa;
	--tcgsf-bg: #f3f4f7;

	--tcgsf-success: #17845a;
	--tcgsf-success-soft: #e3f5ed;
	--tcgsf-warn: #9a6a08;
	--tcgsf-warn-soft: #fdf2dd;
	--tcgsf-danger: #b21127;
	--tcgsf-danger-soft: #fdeaec;

	--tcgsf-radius: 12px;
	--tcgsf-radius-sm: 8px;
	--tcgsf-radius-pill: 999px;
	--tcgsf-shadow: 0 1px 2px rgba( 19, 26, 58, 0.07 ), 0 4px 16px rgba( 19, 26, 58, 0.06 );
	--tcgsf-shadow-lg: 0 12px 48px rgba( 19, 26, 58, 0.18 );

	--tcgsf-gap: 24px;
	--tcgsf-gap-sm: 14px;
	--tcgsf-gap-lg: 48px;

	--tcgsf-content-width: 1248px;
	--tcgsf-shop-columns: 4;
	--tcgsf-header-height: 76px;

	--tcgsf-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--tcgsf-font-head: 'Poppins', var( --tcgsf-font );

	--tcgsf-ease: cubic-bezier( 0.16, 1, 0.3, 1 );
}

/*
 * Dark mode.
 *
 * Opt-in, not OS-driven: light is the default look and stays that way even on
 * a machine set to dark, so the site always opens the way it was designed.
 * The toggle sets data-tcgsf-theme on <html>, and an inline script in the head
 * applies the stored choice before first paint so there is no flash.
 *
 * Every value here was checked against its own background: body text is 11:1,
 * muted text 5.1:1 and the primary cyan 6.8:1, all well clear of WCAG AA.
 */
:root[ data-tcgsf-theme='dark' ] {
	--tcgsf-primary: #5fc8c4;
	--tcgsf-primary-dark: #8adbd7;
	--tcgsf-primary-soft: #14302f;
	--tcgsf-accent: #f0c45c;
	--tcgsf-accent-soft: #3a2d10;

	--tcgsf-ink: #f2f2f6;
	--tcgsf-ink-soft: #cdcdd6;
	--tcgsf-muted: #9c9caa;
	--tcgsf-border: #34343f;
	--tcgsf-surface: #22222b;
	--tcgsf-surface-alt: #2a2a34;
	--tcgsf-bg: #17171e;

	--tcgsf-success: #4ed3a0;
	--tcgsf-success-soft: #113228;
	--tcgsf-warn: #e5b45a;
	--tcgsf-warn-soft: #34280e;
	--tcgsf-danger: #ff8a95;
	--tcgsf-danger-soft: #3d151b;

	--tcgsf-shadow: 0 1px 2px rgba( 0, 0, 0, 0.45 ), 0 4px 16px rgba( 0, 0, 0, 0.35 );
	--tcgsf-shadow-lg: 0 12px 48px rgba( 0, 0, 0, 0.6 );

	color-scheme: dark;
}

/*
 * Filled buttons keep white text in light mode, but the dark-mode primary is a
 * bright cyan — white on it fails contrast, so those flip to dark ink.
 */
:root[ data-tcgsf-theme='dark' ] .tcgsf-btn.tcgsf-btn--primary,
:root[ data-tcgsf-theme='dark' ] .woocommerce .button.button,
:root[ data-tcgsf-theme='dark' ] .woocommerce a.button.button,
:root[ data-tcgsf-theme='dark' ] .woocommerce button.button.button,
:root[ data-tcgsf-theme='dark' ] .tcgsf-search__submit {
	color: #0a1020;
}

:root[ data-tcgsf-theme='dark' ] .tcgsf-btn.tcgsf-btn--primary:hover,
:root[ data-tcgsf-theme='dark' ] .woocommerce .button.button:hover,
:root[ data-tcgsf-theme='dark' ] .tcgsf-search__submit:hover {
	color: #0a1020;
}

/* The navy brand panels are already dark; in dark mode they need to separate
   from the page rather than blend into it. */
:root[ data-tcgsf-theme='dark' ] .tcgsf-topbar,
:root[ data-tcgsf-theme='dark' ] .tcgsf-footer {
	background: #0c1027;
}

/* --------------------------------------------------------------------------
 * Reset
 * ----------------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

@media ( prefers-reduced-motion: reduce ) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	background: var( --tcgsf-bg );
	color: var( --tcgsf-ink );
	font-family: var( --tcgsf-font );
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 0.5em;
	font-family: var( --tcgsf-font-head );
	font-weight: 700;
	line-height: 1.25;
	color: var( --tcgsf-ink );
	text-wrap: balance;
}

h1 { font-size: clamp( 28px, 4vw, 40px ); }
h2 { font-size: clamp( 22px, 3vw, 30px ); }
h3 { font-size: clamp( 19px, 2.4vw, 23px ); }

p { margin: 0 0 1em; }

a {
	color: var( --tcgsf-primary );
	text-decoration: none;
}

a:hover,
a:focus-visible {
	color: var( --tcgsf-primary-dark );
	text-decoration: underline;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

:focus-visible {
	outline: 2px solid var( --tcgsf-primary );
	outline-offset: 2px;
	border-radius: 2px;
}

/* --------------------------------------------------------------------------
 * Buttons
 *
 * Both class names are repeated so these outrank theme-agnostic plugin CSS and
 * WooCommerce's own `.button` rules without needing !important.
 * ----------------------------------------------------------------------- */

.tcgsf-btn.tcgsf-btn,
.woocommerce .tcgsf-btn.tcgsf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 22px;
	border: 1px solid var( --tcgsf-border );
	border-radius: var( --tcgsf-radius-sm );
	background: var( --tcgsf-surface );
	color: var( --tcgsf-ink );
	font-family: var( --tcgsf-font );
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.18s var( --tcgsf-ease ), border-color 0.18s var( --tcgsf-ease ), transform 0.18s var( --tcgsf-ease );
}

.tcgsf-btn.tcgsf-btn:hover,
.tcgsf-btn.tcgsf-btn:focus-visible {
	background: var( --tcgsf-surface-alt );
	border-color: var( --tcgsf-muted );
	color: var( --tcgsf-ink );
	text-decoration: none;
}

.tcgsf-btn.tcgsf-btn:active {
	transform: translateY( 1px );
}

.tcgsf-btn.tcgsf-btn[disabled],
.tcgsf-btn.tcgsf-btn.disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.tcgsf-btn.tcgsf-btn--primary,
.woocommerce .tcgsf-btn.tcgsf-btn--primary {
	background: var( --tcgsf-primary );
	border-color: var( --tcgsf-primary );
	color: #fff;
}

.tcgsf-btn.tcgsf-btn--primary:hover,
.tcgsf-btn.tcgsf-btn--primary:focus-visible {
	background: var( --tcgsf-primary-dark );
	border-color: var( --tcgsf-primary-dark );
	color: #fff;
}

.tcgsf-btn.tcgsf-btn--ghost {
	background: transparent;
	border-color: transparent;
	color: var( --tcgsf-primary );
}

.tcgsf-btn.tcgsf-btn--block {
	display: flex;
	width: 100%;
}

.tcgsf-btn.tcgsf-btn--small {
	padding: 8px 14px;
	font-size: 13px;
}

/* A text button that still reads as interactive. */
.tcgsf-link-action {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 0;
	border: 0;
	background: none;
	color: var( --tcgsf-ink-soft );
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.tcgsf-link-action:hover,
.tcgsf-link-action.is-active {
	color: var( --tcgsf-primary );
}

/* --------------------------------------------------------------------------
 * Forms
 * ----------------------------------------------------------------------- */

input[type='text'],
input[type='email'],
input[type='url'],
input[type='tel'],
input[type='number'],
input[type='search'],
input[type='password'],
input[type='date'],
select,
textarea {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var( --tcgsf-border );
	border-radius: var( --tcgsf-radius-sm );
	background: var( --tcgsf-surface );
	color: var( --tcgsf-ink );
	font-family: inherit;
	font-size: 15px;
	line-height: 1.4;
}

input::placeholder,
textarea::placeholder {
	color: var( --tcgsf-muted );
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	border-color: var( --tcgsf-primary );
	outline: 2px solid var( --tcgsf-primary );
	outline-offset: 0;
}

label {
	display: inline-block;
	margin-bottom: 5px;
	font-size: 14px;
	font-weight: 600;
	color: var( --tcgsf-ink-soft );
}

/* --------------------------------------------------------------------------
 * Icons — CSS masks so no icon font or sprite has to load
 * ----------------------------------------------------------------------- */

.tcgsf-icon {
	display: inline-block;
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.tcgsf-icon--search { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 2a8 8 0 105.3 14l5.4 5.4 1.4-1.4-5.4-5.4A8 8 0 0010 2zm0 2a6 6 0 110 12 6 6 0 010-12z'/%3E%3C/svg%3E"); }
.tcgsf-icon--user   { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a5 5 0 100-10 5 5 0 000 10zm0 2c-4.4 0-8 2.5-8 5.5V22h16v-2.5c0-3-3.6-5.5-8-5.5z'/%3E%3C/svg%3E"); }
.tcgsf-icon--heart  { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21S3 14.6 3 8.9A5 5 0 0112 6.6 5 5 0 0121 8.9C21 14.6 12 21 12 21z'/%3E%3C/svg%3E"); }
.tcgsf-icon--cart   { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 18a2 2 0 100 4 2 2 0 000-4zm10 0a2 2 0 100 4 2 2 0 000-4zM3 3h2.2l3 10.3A2 2 0 0010 15h8a2 2 0 001.9-1.4L22 7H7.1L6.3 4.3A2 2 0 004.4 3H3z'/%3E%3C/svg%3E"); }
.tcgsf-icon--compare{ --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 3h7v18H4zM13 3h7v11h-7z'/%3E%3C/svg%3E"); }
.tcgsf-icon--eye    { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5C6.5 5 2.2 9.1 1 12c1.2 2.9 5.5 7 11 7s9.8-4.1 11-7c-1.2-2.9-5.5-7-11-7zm0 11a4 4 0 110-8 4 4 0 010 8z'/%3E%3C/svg%3E"); }
.tcgsf-icon--filter { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18l-7 8v6l-4 2v-8z'/%3E%3C/svg%3E"); }
.tcgsf-icon--grid   { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3h8v8H3zM13 3h8v8h-8zM3 13h8v8H3zM13 13h8v8h-8z'/%3E%3C/svg%3E"); }
.tcgsf-icon--list   { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 4h18v3H3zM3 10.5h18v3H3zM3 17h18v3H3z'/%3E%3C/svg%3E"); }
.tcgsf-icon--shield { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l8 3v6c0 5-3.4 9.7-8 11-4.6-1.3-8-6-8-11V5z'/%3E%3C/svg%3E"); }
.tcgsf-icon--truck  { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h11v10H3zM15 8h3.5l2.5 3v4h-6zM6.5 16a2 2 0 100 4 2 2 0 000-4zm11 0a2 2 0 100 4 2 2 0 000-4z'/%3E%3C/svg%3E"); }

.tcgsf-icon--search, .tcgsf-icon--user, .tcgsf-icon--heart, .tcgsf-icon--cart,
.tcgsf-icon--compare, .tcgsf-icon--eye, .tcgsf-icon--filter, .tcgsf-icon--grid,
.tcgsf-icon--list, .tcgsf-icon--shield, .tcgsf-icon--truck {
	-webkit-mask-image: var( --i );
	mask-image: var( --i );
}

/* --------------------------------------------------------------------------
 * Badges, ratings, utilities
 * ----------------------------------------------------------------------- */

.tcgsf-badge {
	display: inline-block;
	padding: 4px 10px;
	border-radius: var( --tcgsf-radius-pill );
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.4;
	text-transform: uppercase;
}

.tcgsf-badge--sale { background: var( --tcgsf-danger ); color: #fff; }
.tcgsf-badge--oos  { background: var( --tcgsf-ink-soft ); color: #fff; }
.tcgsf-badge--last { background: var( --tcgsf-accent ); color: #3a2a00; }

.tcgsf-progress {
	display: block;
	height: 6px;
	border-radius: var( --tcgsf-radius-pill );
	background: var( --tcgsf-border );
	overflow: hidden;
}

.tcgsf-progress__bar {
	display: block;
	height: 100%;
	background: linear-gradient( 90deg, var( --tcgsf-primary ), var( --tcgsf-brand-teal ) );
	transition: width 0.4s var( --tcgsf-ease );
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

.tcgsf-skip-link:focus {
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: 999;
	width: auto;
	height: auto;
	padding: 12px 18px;
	clip: auto;
	background: var( --tcgsf-surface );
	border-radius: var( --tcgsf-radius-sm );
	box-shadow: var( --tcgsf-shadow-lg );
}

.tcgsf-empty {
	padding: 64px 24px;
	border: 1px dashed var( --tcgsf-border );
	border-radius: var( --tcgsf-radius );
	background: var( --tcgsf-surface-alt );
	text-align: center;
}

.tcgsf-empty__title { margin-bottom: 8px; }
.tcgsf-empty__text  { max-width: 46ch; margin: 0 auto 1.25em; color: var( --tcgsf-muted ); }

/* --------------------------------------------------------------------------
 * Toasts
 * ----------------------------------------------------------------------- */

.tcgsf-toasts {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 300;
	display: flex;
	flex-direction: column;
	gap: 8px;
	pointer-events: none;
}

.tcgsf-toast {
	padding: 12px 18px;
	border-radius: var( --tcgsf-radius-sm );
	background: var( --tcgsf-ink );
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	box-shadow: var( --tcgsf-shadow-lg );
	opacity: 0;
	transform: translateY( 10px );
	transition: opacity 0.25s var( --tcgsf-ease ), transform 0.25s var( --tcgsf-ease );
}

.tcgsf-toast.is-in { opacity: 1; transform: translateY( 0 ); }
.tcgsf-toast--error { background: var( --tcgsf-danger ); }

.tcgsf-loading,
.tcgsf-error {
	padding: var( --tcgsf-gap );
	text-align: center;
	color: var( --tcgsf-muted );
}

.tcgsf-error { color: var( --tcgsf-danger ); }

/* --------------------------------------------------------------------------
 * Colour scheme toggle
 * ----------------------------------------------------------------------- */

.tcgsf-theme-toggle {
	border: 0;
	background: none;
	font-family: inherit;
	cursor: pointer;
}

.tcgsf-icon--theme {
	--i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 000 20V2z'/%3E%3Cpath d='M12 2a10 10 0 010 20' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
	-webkit-mask-image: var( --i );
	mask-image: var( --i );
}

/* No JavaScript means no way to switch, so do not offer it. */
.tcgsf-no-js .tcgsf-theme-toggle,
html:not( .tcgsf-js ) .tcgsf-theme-toggle {
	display: none;
}

/* ---- Game grid logos ---- */
.tcgsf-game-grid__logo{display:block;margin:0 0 12px}
.tcgsf-game-grid__logo img{display:block;width:100%;height:auto;max-height:104px;object-fit:contain;border-radius:var(--tcgsf-radius-sm,8px)}
.tcgsf-game-grid__item--logo{display:flex;flex-direction:column;align-items:stretch;text-align:center}
.tcgsf-game-grid__item--logo .tcgsf-game-grid__name{font-size:.95em}
/* Keep the grid even when a category (Accessories, Sealed Product) has no logo. */
.tcgsf-game-grid__item{display:flex;flex-direction:column;justify-content:flex-end;min-height:190px}
/* The pale-logo tiles ship a dark plate, which would otherwise disappear into
   a dark card; a hairline keeps the tile shape readable in both modes. */
.tcgsf-game-grid__logo img{box-shadow:0 0 0 1px rgba(128,128,140,.22)}

/* --------------------------------------------------------------------------
 * Phones: iOS Safari zooms the page into any field under 16px. Every form
 * (checkout, login, search, coupon) was 15px, so each tap jumped the layout.
 * ----------------------------------------------------------------------- */
@media ( max-width: 640px ) {
	input[type='text'],
	input[type='email'],
	input[type='url'],
	input[type='tel'],
	input[type='number'],
	input[type='search'],
	input[type='password'],
	input[type='date'],
	select,
	textarea {
		font-size: 16px;
	}
}