/* =========================================================================
   GameCosmos Premium — Design System
   The single source of truth for shared UI components. Loads site-wide after
   home.css so it upgrades the existing homepage components into one premium
   language shared with the Why Choose Us page and every future page.

   Components: Section Header · Primary/Feature/Trust/Info Card · Process Card ·
   Review Card · Glass Panel · Divider · Badge · Statistic Counter · Icon Block ·
   CTA Buttons (see .gc-btn in home.css).

   Shared rules: radius 18px (22px large) · 1px borders · glass fills ·
   violet accent (var(--gc-accent) / var(--gc-accent-soft)) · hover = lift + violet glow + brighter
   border · cubic-bezier(0.16,1,0.3,1) easing · monospace kickers.
   ========================================================================= */

:root {
	--gc-mono: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, monospace;
	--gc-radius: 18px;
	--gc-radius-lg: 22px;
	--gc-glass: rgba(255, 255, 255, 0.045);
	--gc-glass-line: rgba(255, 255, 255, 0.09);
	--gc-grad: linear-gradient(120deg, #B98CE8 0%, #6A0DAD 55%, #4A067A 100%);
	--gc-glow: rgba(106, 13, 173, 0.55);
	--gc-card-hover-shadow: 0 30px 60px -34px rgba(106, 13, 173, 0.62);
	--gc-space-section: clamp(4.5rem, 8vw, 7.5rem);
	--gc-space-head: clamp(2.75rem, 5vw, 4rem);
	--gc-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------------- Section rhythm ---------------- */
.gc-section { padding-block: var(--gc-space-section); }

/* ---------------- Section header (eyebrow / kicker + title + lead) ---------------- */
.gc-eyebrow {
	display: inline-block;
	font-family: var(--gc-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--gc-accent-soft);
}
.gc-eyebrow::before { content: none; } /* remove the dash/line for a cleaner label */
.gc-section__title {
	margin-top: 1.35rem;
	max-width: 20ch;
	font-family: var(--gc-display);
	font-weight: 600;
	letter-spacing: -0.025em;
	font-size: clamp(1.9rem, 4vw, 3.1rem);
	line-height: 1.05;
	text-wrap: balance;
}
.gc-lead { margin: 1.35rem 0 0; max-width: 36rem; color: var(--gc-muted); font-size: 1.02rem; line-height: 1.8; }

/* ---------------- Icon block ---------------- */
.gc-icon-block {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 12px;
	color: var(--gc-text);
	background: rgba(106, 13, 173, 0.16);
	border: 1px solid rgba(185, 140, 232, 0.35);
	transition: transform 0.4s var(--gc-ease), background-color 0.4s var(--gc-ease);
}

/* ---------------- Primary / Feature / Trust / Info Card ----------------
   Base premium card with a soft glass fill, a single HUD corner tick, and a
   lift + violet glow on hover. Homepage .gc-card, .gc-upgrade, .gc-how__step
   and .gc-review all inherit this look so every page matches. */
.gc-card,
.gc-upgrade,
.gc-how__step,
.gc-review {
	position: relative;
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--gc-border);
	border-radius: var(--gc-radius);
	background: linear-gradient(180deg, var(--gc-glass), rgba(255, 255, 255, 0.01));
	padding: 1.9rem 1.7rem;
	transition: border-color 0.4s var(--gc-ease), transform 0.4s var(--gc-ease), box-shadow 0.4s var(--gc-ease), background-color 0.4s var(--gc-ease);
}
/* HUD corner tick (top-left) — the shared signature detail */
.gc-card::before,
.gc-upgrade::before {
	content: "";
	position: absolute;
	top: 13px; left: 13px;
	width: 14px; height: 14px;
	border-top: 1px solid var(--gc-accent-soft);
	border-left: 1px solid var(--gc-accent-soft);
	opacity: 0.5;
	pointer-events: none;
	transition: opacity 0.4s var(--gc-ease), width 0.4s var(--gc-ease), height 0.4s var(--gc-ease);
}
/* Hover glow wash */
.gc-card::after,
.gc-upgrade::after,
.gc-how__step::after,
.gc-review::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(120% 90% at 50% -10%, rgba(106, 13, 173, 0.16), transparent 60%);
	opacity: 0;
	transition: opacity 0.4s var(--gc-ease);
}
.gc-card:hover,
.gc-upgrade:hover,
.gc-how__step:hover,
.gc-review:hover {
	border-color: rgba(185, 140, 232, 0.55);
	transform: translateY(-5px);
	box-shadow: var(--gc-card-hover-shadow);
	background: linear-gradient(180deg, rgba(106, 13, 173, 0.07), rgba(255, 255, 255, 0.01));
}
.gc-card:hover::before,
.gc-upgrade:hover::before { opacity: 1; width: 20px; height: 20px; }
.gc-card:hover::after,
.gc-upgrade:hover::after,
.gc-how__step:hover::after,
.gc-review:hover::after { opacity: 1; }

/* Card internals — keep content above the glow */
.gc-card > *,
.gc-upgrade > *,
.gc-how__step > *,
.gc-review > * { position: relative; z-index: 1; }

.gc-card__icon {
	display: grid;
	place-items: center;
	width: 46px; height: 46px;
	border-radius: 12px;
	color: var(--gc-text);
	background: rgba(106, 13, 173, 0.16);
	border: 1px solid rgba(185, 140, 232, 0.35);
	margin-bottom: 1.25rem;
	transition: transform 0.4s var(--gc-ease), background-color 0.4s var(--gc-ease);
}
.gc-card:hover .gc-card__icon { transform: translateY(-2px) scale(1.06); background: rgba(106, 13, 173, 0.28); }
.gc-card__title { margin-top: 0; font-family: var(--gc-display); font-size: 1.18rem; font-weight: 600; }
.gc-card__body { margin-top: 0.6rem; font-size: 0.95rem; line-height: 1.68; color: var(--gc-muted); }

/* ---------------- Premium Upgrades grid (was a 1px unified grid) ---------------- */
.gc-upgrade__icon {
	box-sizing: border-box;
	width: 46px; height: 46px;
	padding: 11px;
	border-radius: 12px;
	color: var(--gc-text);
	background: rgba(106, 13, 173, 0.16);
	border: 1px solid rgba(185, 140, 232, 0.35);
	transition: transform 0.4s var(--gc-ease), background-color 0.4s var(--gc-ease);
}
.gc-upgrade__title { margin-top: 1.25rem; font-family: var(--gc-display); font-size: 1.12rem; font-weight: 600; }
.gc-upgrade__body { margin-top: 0.55rem; font-size: 0.95rem; line-height: 1.65; color: var(--gc-muted); }

/* ---------------- Process Card (numbered sequence) ---------------- */
.gc-how__grid {
	margin-top: var(--gc-space-head);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	counter-reset: gc-step;
}
.gc-how__step { padding: 1.7rem 1.5rem 1.6rem; }
.gc-how__step::before {
	content: counter(gc-step, decimal-leading-zero);
	counter-increment: gc-step;
	position: absolute;
	top: 1.5rem; right: 1.5rem;
	z-index: 1;
	font-family: var(--gc-mono);
	font-size: 12px;
	letter-spacing: 0.08em;
	color: var(--gc-accent-soft);
	opacity: 0.8;
}
.gc-how__icon {
	width: 46px; height: 46px;
	border-radius: 12px;
	background: rgba(106, 13, 173, 0.16);
	border: 1px solid rgba(185, 140, 232, 0.35);
	color: var(--gc-text);
	margin-bottom: 1.1rem;
	transition: transform 0.4s var(--gc-ease), background-color 0.4s var(--gc-ease);
}
.gc-how__step:hover .gc-how__icon { transform: translateY(-2px) scale(1.06); background: rgba(106, 13, 173, 0.28); }
.gc-how__title { margin-top: 0; font-family: var(--gc-display); font-size: 1.12rem; font-weight: 600; }
.gc-how__body { margin-top: 0.55rem; font-size: 0.95rem; line-height: 1.65; color: var(--gc-muted); }

/* ---------------- Review Card ----------------
   Card geometry and colour live in home.css alongside the marquee they sit in.
   The avatar keeps a hairline in light mode so a mid-tone circle does not sit
   flat against the pale surface. */
:root[data-gc-theme="light"] .gc-rev__av { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); }

/* ---------------- Glass Panel ---------------- */
.gc-glass {
	background: var(--gc-glass);
	border: 1px solid var(--gc-glass-line);
	border-radius: var(--gc-radius);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
}

/* ---------------- Section Divider ---------------- */
.gc-divider {
	height: 1px;
	border: 0;
	background: linear-gradient(90deg, transparent, var(--gc-border), transparent);
	margin-block: clamp(2rem, 5vw, 4rem);
}

/* ---------------- Badge ---------------- */
.gc-badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--gc-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gc-accent-soft);
	padding: 5px 11px;
	border: 1px solid rgba(185, 140, 232, 0.3);
	border-radius: 999px;
	background: rgba(106, 13, 173, 0.08);
}

/* ---------------- Statistic Counter ---------------- */
.gc-stat__num {
	font-family: var(--gc-display);
	font-weight: 700;
	letter-spacing: -0.02em;
	font-size: clamp(2.1rem, 4vw, 3rem);
	line-height: 1;
	color: var(--gc-text);
}
.gc-stat__num--grad { background: var(--gc-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gc-stat__label { margin-top: 0.55rem; font-family: var(--gc-mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gc-muted); }

/* ---------------- Premium closing CTA panel ---------------- */
.gc-final__box {
	position: relative;
	overflow: hidden;
	/* The two stops were hardcoded deep purple-black, so this panel stayed dark
	   in light mode and read as an island on the homepage and /controller-upgrades/.
	   The purple wash on top works over either ground and is kept as-is. */
	border: 1px solid var(--gc-cta-border);
	border-radius: 28px;
	background:
		radial-gradient(80% 120% at 50% 0%, rgba(106, 13, 173, 0.28), transparent 60%),
		linear-gradient(180deg, var(--gc-cta-top), var(--gc-cta-bottom));
	padding: clamp(3rem, 7vw, 6rem) clamp(1.5rem, 5vw, 4rem);
	text-align: center;
}
/* Scoped with .gc-final__box so these beat the global `.gc-home h2/p { margin:0 }`
   rule (higher specificity) and actually centre the block, not just the text. */
.gc-final__box .gc-final__title { max-width: 40rem; margin-inline: auto; font-family: var(--gc-display); font-weight: 700; }
.gc-final__box .gc-final__text { max-width: 34rem; margin: 1.3rem auto 0; }
.gc-final__box .gc-final__cta { margin-top: 2.4rem; }

/* ---------------- CTA buttons — subtle glow micro-interaction ---------------- */
.gc-btn { transition: transform 0.2s var(--gc-ease), box-shadow 0.3s var(--gc-ease); }
.gc-btn--filled:hover { box-shadow: 0 10px 34px -10px rgba(106, 13, 173, 0.6); }
.gc-btn--outline:hover { box-shadow: 0 10px 30px -12px rgba(106, 13, 173, 0.4); }

/* ---------------- Reduced motion ---------------- */
@media (prefers-reduced-motion: reduce) {
	.gc-card, .gc-upgrade, .gc-how__step, .gc-review { transition: border-color 0.2s ease; }
	.gc-card:hover, .gc-upgrade:hover, .gc-how__step:hover, .gc-review:hover { transform: none; }
}

/* ---------------- Responsive ---------------- */
@media (max-width: 900px) {
	.gc-how__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.gc-how__grid { grid-template-columns: 1fr; }
}

/* ===========================================================================
   Light theme (Phase 2.5).
   One override block, deliberately placed here rather than duplicated per file.
   `:root[data-gc-theme="light"]` is (0,2,0) and plain `:root` is (0,1,0), so
   this wins over the dark declarations in home.css and woocommerce.css no
   matter which order the stylesheets happen to load in.

   Only colour values move. No component geometry, spacing or type is touched.
   =========================================================================== */
:root[data-gc-theme="light"] {
	--gc-bg: #F8F7F4;
	--gc-bg-2: #F1EFEA;
	--gc-surface: #FFFFFF;
	--gc-border: #E4E1DA;
	--gc-border-strong: #D2CEC4;
	--gc-accent: #6A0DAD;
	/* On #F8F7F4 the brand accent reaches 8.6:1, so the "soft" role stays the
	   accent itself instead of the lighter tint the dark theme needs. */
	--gc-accent-soft: #6A0DAD;
	--gc-accent-tint: #F1E9FA;
	--gc-text: #1C1C1C;
	--gc-muted: #55534E;
	--gc-on-accent: #FFFFFF;
	/* Chrome and panels. These were baked-in dark rgba values, which is why the
	   header stayed dark in light mode and the nav text — correctly flipped to
	   dark — became unreadable against it. */
	--gc-chrome: rgba(248, 247, 244, 0.72);
	--gc-chrome-solid: rgba(248, 247, 244, 0.94);
	--gc-panel: rgba(255, 255, 255, 0.97);
	--gc-panel-strong: rgba(255, 255, 255, 0.98);
	--gc-panel-flat: rgba(255, 255, 255, 0.97);
	--gc-masthead: rgba(248, 247, 244, 0.94);
	/* Closing CTA panel - a soft lavender card so the purple wash above it still
	   reads, instead of the deep purple-black the dark theme uses. */
	--gc-cta-top: #F4EEFC;
	--gc-cta-bottom: #EBE3F6;
	--gc-cta-border: rgba(106, 13, 173, 0.22);
	/* The glass fill is a white wash on dark; on a warm ground it has to invert
	   or every card dissolves into the page. */
	--gc-glass: rgba(28, 28, 28, 0.022);
	--gc-glass-line: rgba(28, 28, 28, 0.06);
	--gc-glow: rgba(106, 13, 173, 0.28);
	--gc-card-hover-shadow: 0 16px 32px -28px rgba(106, 13, 173, 0.18);
}

/* Smooth the switch without animating every element individually. */
body, header, footer, section,
.gc-card, .gc-upgrade, .gc-how__step, .gc-review,
.gc-btn__b1, .gc-btn__b2 {
	transition: background-color 260ms var(--gc-ease), color 260ms var(--gc-ease), border-color 260ms var(--gc-ease);
}
@media (prefers-reduced-motion: reduce) {
	body, header, footer, section,
	.gc-card, .gc-upgrade, .gc-how__step, .gc-review,
	.gc-btn__b1, .gc-btn__b2 { transition: none; }
}

/* The outline button inherits color:#fff from .gc-btn. On light its fill is
   near-white, so the label needs the text token or it reads white-on-white. */
.gc-btn--outline { color: var(--gc-text); }
/* The filled button's fill is the accent in BOTH themes, so its ink is always
   the on-accent white - never the theme ink, which flips dark on light and puts
   near-black text on a purple pill.
   The anchor form needs `a.` here: `.gc-home a { color: inherit }` is (0,2,0)
   and outranks a lone class, which is exactly how the dark label survived. */
.gc-btn--filled,
.gc-home a.gc-btn--filled,
.gc-home a.gc-btn--filled .gc-btn__label { color: var(--gc-on-accent); }

/* ---- theme toggle (Phase 2.5) --------------------------------------------
   Compact two-state pill sized to sit beside the existing 38px icon buttons
   without changing the header's height or pushing the nav around. */
.gc-themetoggle {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 3px;
	margin-right: 2px;
	border: 1px solid var(--gc-border);
	border-radius: 999px;
	background: var(--gc-bg-2);
	cursor: pointer;
	flex: 0 0 auto;
	transition: border-color 0.2s ease, background-color 260ms var(--gc-ease);
}
.gc-themetoggle:hover { border-color: var(--gc-border-strong); }
.gc-themetoggle__i {
	width: 28px;
	height: 26px;
	display: grid;
	place-items: center;
	border-radius: 999px;
	color: var(--gc-muted);
	transition: background-color 0.2s ease, color 0.2s ease;
}
.gc-themetoggle:focus-visible { outline: 2px solid var(--gc-accent-soft); outline-offset: 3px; }
:root:not([data-gc-theme="light"]) .gc-themetoggle__i--moon,
:root[data-gc-theme="dark"] .gc-themetoggle__i--moon { background: var(--gc-accent); color: var(--gc-on-accent); }
:root[data-gc-theme="light"] .gc-themetoggle__i--sun { background: var(--gc-accent); color: var(--gc-on-accent); }
@media (max-width: 420px) {
	/* Narrowest phones: keep the toggle, drop its padding rather than the control. */
	.gc-themetoggle__i { width: 24px; height: 24px; }
}

/* A 10px uppercase label cannot carry the accent and still clear 4.5:1 — it
   measured 3.5:1 on the mega menu's purple wash in both themes. Small type
   takes the text token; the accent stays on larger elements where it reads. */
.gc-mega__feature-eyebrow { color: var(--gc-text); }

/* ---- Astra default-template pages ----------------------------------------
   Nearly every page here runs a custom template wrapped in .gc-home, so it
   inherits our tokens. A handful (e.g. /cookie-policy/, whose body is rendered
   by the consent plugin) fall back to Astra's DEFAULT template, where Astra's
   own ink globals apply: #1e293b headings and #334155 body, both configured for
   a light design and both invisible on the dark ground.

   Re-point the two ink globals at our tokens rather than chase each selector.
   Scoped to page-template-default on purpose: these globals also back Astra's
   opt-in Gutenberg palette classes (.has-ast-global-color-2-background-color
   and friends), so a site-wide re-point could invert a block background. */
body.page-template-default {
	--ast-global-color-2: var(--gc-text);
	--ast-global-color-3: var(--gc-text);
}
/* Astra's link blue (#046bd2) is 3.3:1 on the dark ground. Point content links
   at the soft accent, which is legible in both themes (#B98CE8 on dark, #6A0DAD
   on light). Scoped to text links so Gutenberg button fills, which take the same
   global, keep their own treatment. */
body.page-template-default .entry-content a:not(.wp-block-button__link):not(.button) {
	color: var(--gc-accent-soft);
}

/* =========================================================================
   Light theme — shadow and glow treatment
   -------------------------------------------------------------------------
   Every drop shadow in this theme was authored for the dark ground, where a
   heavy black plume reads as depth. On #F8F7F4 the same shadow reads as dirt
   under the element, so the light theme drops them and keeps definition from
   the borders instead. Accent glows are kept but pulled back, since a purple
   halo that looks like light emission on black looks like a printing error on
   paper.

   Focus rings are deliberately NOT touched here: they are the keyboard
   affordance, not decoration, and they must stay visible in both themes.
   ========================================================================= */

/* --- Black drop shadows: removed, hairline rings kept where they define an
       edge (header, mega panel, cards). --- */
:root[data-gc-theme="light"] .gc-header__bar,
:root[data-gc-theme="light"] .gc-featured__card,
:root[data-gc-theme="light"] .gc-up-hall__media picture img,
:root[data-gc-theme="light"] .gc-why-slide,
:root[data-gc-theme="light"] .gc-why-frame,
:root[data-gc-theme="light"] .gc-why-spec,
:root[data-gc-theme="light"] .gc-shop-dd__menu {
	box-shadow: none;
}
:root[data-gc-theme="light"] .gc-header.is-solid .gc-header__bar {
	box-shadow: 0 0 0 1px rgba(106, 13, 173, 0.10);
}
:root[data-gc-theme="light"] .gc-mega__inner {
	box-shadow: 0 0 0 1px rgba(106, 13, 173, 0.12);
}

/* --- Cut-out product images: the filter drop-shadow goes too. --- */
:root[data-gc-theme="light"] .gc-upfloat__part img,
:root[data-gc-theme="light"] .gc-why-oem__stage img,
:root[data-gc-theme="light"] .gc-up picture img,
:root[data-gc-theme="light"] .gc-up-sum__orb picture img {
	filter: none;
}

/* --- Accent glows: kept, roughly halved. --- */
:root[data-gc-theme="light"] .gc-featured__card:hover {
	box-shadow: 0 0 0 1px rgba(106, 13, 173, 0.22);
}
:root[data-gc-theme="light"] .gc-btn--filled:hover {
	box-shadow: 0 8px 20px -12px rgba(106, 13, 173, 0.28);
}
:root[data-gc-theme="light"] .gc-btn--outline:hover {
	box-shadow: 0 8px 18px -14px rgba(106, 13, 173, 0.18);
}
:root[data-gc-theme="light"] .gc-nav__link.is-active::after {
	box-shadow: 0 0 6px 0 rgba(106, 13, 173, 0.25);
}
:root[data-gc-theme="light"] .gc-why-card:hover {
	box-shadow: 0 18px 36px -30px rgba(106, 13, 173, 0.25);
}
:root[data-gc-theme="light"] .gc-why-stage__ring {
	box-shadow: inset 0 0 60px rgba(106, 13, 173, 0.07);
}
:root[data-gc-theme="light"] .gc-up-sum__core {
	box-shadow: inset 0 0 60px -18px rgba(106, 13, 173, 0.22);
}
:root[data-gc-theme="light"] .gc-footer__store {
	box-shadow: 0 2px 10px rgba(0, 100, 210, 0.18);
}
:root[data-gc-theme="light"] .gc-footer__store:hover {
	box-shadow: 0 4px 14px rgba(0, 100, 210, 0.26);
}

/* =========================================================================
   Media-overlay zones — hero video and featured cards
   -------------------------------------------------------------------------
   Light theme drops both scrims: the hero's bottom stop was var(--gc-bg), so on
   light it washed a pale haze across the video, and the featured cards carried a
   near-opaque dark gradient that had no business on a light page.

   Removing them exposes what is actually behind the copy, and that is dark in
   BOTH themes - the video frame measures rgb(57,56,66) and the card art
   rgb(76,68,82). So the ink in these two zones is theme-independent: it stays
   light, exactly like the badges on the product scrims. Left on --gc-text it
   flipped dark and sat at 1.5:1 over the video and 1.8:1 over the card art,
   which is the muddy label problem. On the scrim ink it measures 10.6:1 and
   8.5:1. The text-shadow is insurance for the brighter product photos, not a
   wash - it tints only the glyph edges.
   ========================================================================= */
:root[data-gc-theme="light"] .gc-hero__scrim,
:root[data-gc-theme="light"] .gc-featured__scrim {
	background: none;
}

.gc-hero__content,
.gc-hero__content .gc-hero__line,
.gc-hero__content .gc-btn,
.gc-featured__title,
/* .gc-home h1,h2,h3 is (0,1,1) and outranks a lone class, so the heading needs
   the wrapper too or it keeps the theme ink and goes dark on the card art. */
.gc-home .gc-featured__title,
.gc-featured__link {
	color: var(--gc-on-scrim);
}
.gc-hero__content .gc-eyebrow-text,
.gc-hero__content .gc-hero__subtext {
	color: var(--gc-on-scrim-muted);
}
.gc-hero__content .gc-btn--outline {
	border-color: rgba(245, 244, 241, 0.55);
}
.gc-hero__content .gc-hero__line,
.gc-hero__content .gc-hero__subtext,
.gc-featured__title,
.gc-featured__link {
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}

/* The upgrades page carries two purple layers sized for the dark ground: the
   hero's radial wash, and the blurred "bench pool" that sits under each
   component still. On the light page both read as stray violet clouds, so light
   drops them and dark keeps them.

   --up-pool is declared on .gc-up, not :root, so the override has to land on
   that same element - a :root-level one would lose to inheritance, not
   specificity. Same trap as the old .gc-home palette copy. */
:root[data-gc-theme="light"] .gc-up-hero__wash {
	background: none;
}
:root[data-gc-theme="light"] .gc-up {
	--up-pool: none;
}

/* Closing CTA panels: flat fill on light.
   The dark theme keeps its layered gradient (a purple wash over a purple-black
   ramp) because depth is what stops it dissolving into the page. On the light
   ground that same ramp reads as a smudge rather than a panel, so light uses a
   single solid lavender - the accent tint already in the palette. */
:root[data-gc-theme="light"] .gc-final__box,
:root[data-gc-theme="light"] .gc-why-cta {
	background: var(--gc-accent-tint);
}

/* Header while it floats over the hero.
   The bar is transparent in this state, so its ink sits directly on the hero
   video - which is dark in both themes. It was taking the theme ink, and once
   the light-mode scrim was removed that left the nav at 2.1:1 (dark ink on
   rgb(72,81,94) video). Same fix as the hero copy: scrim ink, not theme ink.
   The SVG icons follow through currentColor.

   The mega panel is exempt: it paints its own near-opaque light surface and
   needs the theme ink back, or the dropdown would be white-on-white. */
.gc-header.is-over-hero .gc-header__bar {
	color: var(--gc-on-scrim);
}
/* The bar rule only reaches children that INHERIT. These three set their own
   colour, so inheritance never touches them and they need naming outright. */
.gc-header.is-over-hero .gc-nav__link {
	color: var(--gc-on-scrim-muted);
}
.gc-header.is-over-hero .gc-nav__link.is-active,
.gc-header.is-over-hero .gc-iconbtn {
	color: var(--gc-on-scrim);
}
/* Left alone on purpose: the theme toggle, the cart count and the SHOP NOW
   button each paint their own fill, so they already carry the right ink. */
.gc-header.is-over-hero .gc-mega {
	color: var(--gc-text);
}


/* ===========================================================================
   Upgrades carousel  (template-parts/home/upgrades.php)
   ---------------------------------------------------------------------------
   Replaced the static 6-tile grid on 2026-08-31. Product photograph on a fixed
   stage, copy underneath, swipe or arrow to move.

   Lives in this file, not home.css: system.css loads last and re-declares
   .gc-upgrades__grid in full, so the old grid rules here would have overridden
   anything written there. The grid rules are gone now, but the component stays
   here so ownership is unambiguous.

   The stage is a fixed height with object-fit: contain because the source
   cut-outs run from 0.68 to 1.89 in ratio. Cover would crop the long ones in
   half; contain shows every part whole and lands them all on one baseline,
   which is what makes a row of differently-shaped objects read as a set.
   =========================================================================== */
.gc-upcar {
	position: relative;
	margin-top: clamp(2.25rem, 4vw, 3.25rem);
	/* The row runs full-bleed so cards can slide off both edges, so it has to
	   rebuild .gc-container's inner edge itself: centring gutter plus the same
	   clamp the container uses. Anything simpler drifts out of line with the
	   section heading between breakpoints. */
	--gc-upcar-inset: calc(max(0px, (100vw - var(--gc-max, 1280px)) / 2) + clamp(1.25rem, 5vw, 4rem));
}

.gc-upcar__viewport {
	display: flex;
	gap: 18px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	/* Bleed to the viewport edge so a card is visibly cut off — that, more than
	   the arrows, is what tells someone the row moves. */
	padding-inline: var(--gc-upcar-inset);
	/* Without a matching scroll-padding, mandatory snapping scrolls straight
	   past the leading inset and the first card sits flush to the screen edge
	   instead of lining up with the section heading. */
	scroll-padding-inline: var(--gc-upcar-inset);
	padding-block: 4px 8px;
}
.gc-upcar__viewport::-webkit-scrollbar { display: none; }

.gc-upcar__card {
	flex: 0 0 300px;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	background: var(--gc-surface);
	border: 1px solid var(--gc-border);
	border-radius: 20px;
	overflow: hidden;
	transition: border-color 0.3s ease, transform 0.3s var(--gc-ease);
}
.gc-upcar__card:hover { border-color: var(--gc-border-strong); transform: translateY(-3px); }

/* The photos run from 0.68 to 1.89 aspect, so the stage is a fixed box and the
   image is fitted inside it. The picture is absolutely positioned rather than a
   centred grid item: a percentage height on a centred item does not resolve, so
   the image falls back to its natural ratio and overflows the card. */
.gc-upcar__stage {
	position: relative;
	height: 210px;
	background: radial-gradient(ellipse at 50% 42%, var(--gc-bg-2), var(--gc-surface) 72%);
}
.gc-upcar__stage picture {
	position: absolute;
	inset: 26px 24px 10px;
	display: block;
}
.gc-upcar__stage img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}
/* The LED card carries a whole controller rather than a component, so it is
   framed differently: pushed half off the left edge so it reads as the product
   breaking out of the corner. The card edge does the splitting, so there is no
   cut line to hide and one asset still works at every width. All the offsets
   are percentages of the stage, so the crop holds its proportions on mobile.
   The stage clips it, keeping the copy underneath clear. */
.gc-upcar__stage--bleed { overflow: hidden; }
.gc-upcar__stage--bleed picture {
	/* 118% is wide enough that the controller also bleeds off the top and bottom,
	   so the stage has no leftover slack for the eye to read as a gap. */
	inset: auto auto -8% -50%;
	width: 118%;
	height: auto;
}
.gc-upcar__stage--bleed img { width: 100%; height: auto; object-fit: fill; }

/* Every entry now has a photograph; the icon is the fallback for any future
   entry added without one. */
.gc-upcar__fallback { position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; color: var(--gc-accent-soft); opacity: 0.85; }

.gc-upcar__copy { padding: 4px 24px 26px; }
.gc-upcar__title {
	margin: 0;
	font-family: var(--gc-display);
	font-size: 1.06rem;
	font-weight: 700;
	letter-spacing: -0.012em;
	line-height: 1.3;
	color: var(--gc-text);
}
.gc-upcar__body {
	margin: 0.45rem 0 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--gc-muted);
	max-width: 30ch;
}

.gc-upcar__nav {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 1.35rem;
	padding-inline: var(--gc-upcar-inset);
}
/* padding: 0 is load-bearing. The theme's global button rule sets
   padding: 15px 30px, and with border-box that floors the box at 62px wide, so
   the circle rendered as an ellipse until the padding was reset. 44px is the
   site's minimum tap target. */
.gc-upcar__btn {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	padding: 0;
	margin: 0;
	display: grid;
	place-items: center;
	-webkit-appearance: none;
	appearance: none;
	border-radius: 50%;
	border: 1px solid var(--gc-border-strong);
	background: var(--gc-surface);
	color: var(--gc-text);
	line-height: 0;
	cursor: pointer;
	transition: background-color 0.25s ease, opacity 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.gc-upcar__btn svg { display: block; }
.gc-upcar__btn:hover:not(:disabled) { background: var(--gc-accent); border-color: var(--gc-accent); color: var(--gc-on-accent); }
.gc-upcar__btn:disabled { opacity: 0.35; cursor: default; }
.gc-upcar__btn:focus-visible { outline: 2px solid var(--gc-accent-soft); outline-offset: 3px; }

@media (max-width: 700px) {
	.gc-upcar__viewport { gap: 14px; }
	/* A shade under a full column so the next card always peeks. */
	.gc-upcar__card { flex-basis: 74vw; max-width: 300px; }
	.gc-upcar__stage { height: 178px; }
	.gc-upcar__stage picture { inset: 22px 20px 8px; }
	.gc-upcar__copy { padding: 4px 20px 22px; }
	.gc-upcar__nav { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
	.gc-upcar__viewport { scroll-behavior: auto; }
	.gc-upcar__card { transition: none; }
	.gc-upcar__card:hover { transform: none; }
}