/* Playoffline CSS bundle `foundation` — generated from versioned sources. Do not edit. */

/* assets/css/base/tokens.css */
/**
 * Playoffline global tokens (T4.2).
 *
 * Official hex from design-tokens.css / T4.1. Semantic names are aliases.
 * Do not @import the Theme Kit. Typography scale: T4.3.
 */

:root {
	/* Surfaces */
	--po-color-background: #08090d;
	--po-color-surface: #101219;
	--po-color-surface-alt: #171a24;
	--po-color-surface-raised: #1e2230;

	/* Text */
	--po-color-text: #f7f8fc;
	--po-color-muted: #9da3b5;

	/* Commercial */
	--po-color-purple: #8058ff;
	--po-color-purple-light: #a78bfa;
	--po-color-cyan: #29d8ff;
	--po-color-lime: #b7f34a;
	--po-color-yellow: #ffc74a;
	--po-color-danger: #ff4d71;
	--po-color-pix: #2ee59d;
	--po-color-whatsapp: #25d366;

	/* Status aliases — no extra hex (T4.2). T4.1 deferred success; prompt T4.2 requires the names. */
	--po-color-success: var(--po-color-lime);
	--po-color-alert: var(--po-color-yellow);
	--po-color-error: var(--po-color-danger);
	--po-color-info: var(--po-color-cyan);
	--po-color-focus: var(--po-color-yellow);

	/* Border and overlay — T16.6: rest border ≥ 3:1 vs #08090d (was 0.09 / 1.21:1). */
	--po-color-border: rgba(255, 255, 255, 0.36);
	--po-color-overlay: color-mix(in srgb, var(--po-color-background) 90%, transparent);
	--po-promo-veil: color-mix(in srgb, var(--po-color-background) 58%, transparent);
	--po-product-wash-safe-veil: 92%;

	/*
	 * T16.6 CTA fills: official purple hexes stay above.
	 * Mixes keep the V4 purple family while text #f7f8fc ≥ 4.5:1.
	 */
	--po-color-cta-start: color-mix(in srgb, var(--po-color-purple) 80%, var(--po-color-background));
	--po-color-cta-end: color-mix(in srgb, var(--po-color-purple-light) 60%, var(--po-color-background));

	/* Product fallback (T10 / playoffline-core). Secondary hex is official in the kit. */
	--po-product-color-primary: var(--po-color-purple);
	--po-product-color-secondary: #17112e;
	--po-product-color-accent: var(--po-color-cyan);

	/* Gradients from official colors (D-04 / T4.1 DS-07) */
	--po-gradient-topbar: linear-gradient(90deg, var(--po-color-purple), var(--po-color-cyan));
	--po-gradient-cta: linear-gradient(90deg, var(--po-color-cta-start), var(--po-color-cta-end));

	/* Radius */
	--po-radius-small: 10px;
	--po-radius-medium: 16px;
	--po-radius-large: 26px;

	/* Shadow and glow */
	--po-shadow-raised: 0 24px 70px rgba(0, 0, 0, 0.45);
	--po-glow-cyan: 0 0 25px rgba(41, 216, 255, 0.18);

	/* Spacing — only T1.2 measures (no 4/8 scale) */
	--po-space-gap: 16px;
	--po-space-inset-compact: 24px;
	--po-space-inset: 40px;
	--po-space-section-compact: 62px;
	--po-space-section: 90px;

	/* Container */
	--po-container-max: 1240px;
	--po-container: min(var(--po-container-max), calc(100% - var(--po-space-inset)));

	/* Breakpoints T1.2 / T1.4 — values for docs/JS. @media still needs the px literal. */
	--po-bp-tight: 400px;
	--po-bp-snap: 560px;
	--po-bp-nav: 720px;
	--po-bp-env: 820px;
	--po-bp-stack: 960px;
	--po-bp-actions: 1000px;
	--po-bp-wide: 1120px;

	/* Layers T15.2 — stay on this scale.
	 * 0 atmosphere → 2 content → 49 nav backdrop → 50 header →
	 * 60 progress → 90 search field → 100 overlay/panel/toasts →
	 * 101 loader → 102 skip. */
	--po-z-atmosphere: 0;
	--po-z-content: 2;
	--po-z-nav-backdrop: 49;
	--po-z-header: 50;
	--po-z-progress: 60;
	--po-z-search: 90;
	--po-z-overlay: 100;
	--po-z-toast: var(--po-z-overlay);
	--po-z-loader: 101;
	--po-z-skip: 102; /* above loader so skip always wins */

	/* Motion tokens only — no keyframes here (T1.4 / T4.2) */
	--po-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
	--po-ease: ease;
	--po-dur-fast: 180ms;
	--po-dur: 250ms;
	--po-dur-mid: 350ms;
	--po-dur-slow: 500ms;
	--po-dur-reveal: 700ms;

	/* Cursor follow stays off */
	--mx: 0;
	--my: 0;
}

@media (max-width: 720px) { /* --po-bp-nav */
	:root {
		--po-container: min(calc(100% - var(--po-space-inset-compact)), var(--po-container-max));
	}
}


/* assets/css/base/typography.css */
/**
 * Playoffline type scale (T4.3 / T17.4).
 *
 * Named families first (Space Grotesk / Manrope). No @font-face until
 * licensed WOFF2 exist — text uses the system stack immediately (no FOIT).
 * font-display: swap and size-adjust wait for those files + CLS data.
 * No Google Fonts.
 */

:root {
	--po-font-display: "Space Grotesk", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
	--po-font-body: "Manrope", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;

	--po-font-weight-ui: 400;
	--po-font-weight-ui-medium: 500;
	--po-font-weight-ui-semibold: 600;
	--po-font-weight-display: 700;
	--po-font-weight-ui-extrabold: 800;

	--po-font-body-size: 1rem;
	--po-font-body-leading: 1.55;
	--po-font-small-size: 0.875rem;
	--po-font-small-leading: 1.45;
	--po-font-label-size: 0.8125rem;
	--po-font-label-leading: 1.35;

	--po-font-display-tracking: -0.04em;
	--po-font-display-tracking-tight: -0.055em;
	--po-font-nav-tracking: 0.07em;
	--po-font-label-tracking: 0.08em;

	--po-font-size-h1: clamp(1.75rem, 1.15rem + 2.4vw, 3rem);
	--po-font-size-h2: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem);
	--po-font-size-h3: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
	--po-font-size-h4: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
	--po-font-size-h5: 1rem;
	--po-font-size-h6: 0.875rem;
	--po-font-size-display: clamp(2rem, 1.2rem + 3.2vw, 3.25rem);
}

html {
	font-size: 100%;
}

body {
	font-family: var(--po-font-body);
	font-size: var(--po-font-body-size);
	font-weight: var(--po-font-weight-ui);
	line-height: var(--po-font-body-leading);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--po-font-display);
	font-weight: var(--po-font-weight-display);
	letter-spacing: var(--po-font-display-tracking);
	text-wrap: balance;
}

h1 {
	font-size: var(--po-font-size-h1);
	line-height: 1.15;
	letter-spacing: var(--po-font-display-tracking-tight);
}

h2 {
	font-size: var(--po-font-size-h2);
	line-height: 1.2;
}

h3 {
	font-size: var(--po-font-size-h3);
	font-weight: var(--po-font-weight-ui-semibold);
	line-height: 1.25;
}

h4 {
	font-size: var(--po-font-size-h4);
	font-weight: var(--po-font-weight-ui-semibold);
	line-height: 1.3;
	letter-spacing: -0.02em;
}

h5 {
	font-size: var(--po-font-size-h5);
	font-weight: var(--po-font-weight-ui-semibold);
	line-height: 1.35;
	letter-spacing: 0;
}

h6 {
	font-size: var(--po-font-size-h6);
	font-weight: var(--po-font-weight-ui-semibold);
	line-height: 1.4;
	letter-spacing: var(--po-font-label-tracking);
	text-transform: uppercase;
}

small {
	font-size: var(--po-font-small-size);
	line-height: var(--po-font-small-leading);
}

.po-title-display {
	font-family: var(--po-font-display);
	font-size: var(--po-font-size-display);
	font-weight: var(--po-font-weight-display);
	letter-spacing: var(--po-font-display-tracking-tight);
	line-height: 1.1;
	text-wrap: balance;
}

.po-text-small {
	font-size: var(--po-font-small-size);
	line-height: var(--po-font-small-leading);
}

.po-label {
	font-family: var(--po-font-body);
	font-size: var(--po-font-label-size);
	font-weight: var(--po-font-weight-ui-extrabold);
	letter-spacing: var(--po-font-label-tracking);
	line-height: var(--po-font-label-leading);
	text-transform: uppercase;
}

@media (max-width: 720px) { /* --po-bp-nav */
	body {
		font-size: max(1rem, var(--po-font-body-size));
	}

	h1,
	.po-title-display {
		line-height: 1.2;
	}
}


/* assets/css/base/reset.css */
/**
 * Playoffline minimal reset (T4.4).
 *
 * Predictable box model and overflow only. Does not restyle components
 * or strip content lists / heading styles from typography.css.
 */

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

html {
	-webkit-text-size-adjust: 100%;
	/* T15.2 R-05: do not clip html — it hides overflow and can crop portaled overlays. */
}

body {
	margin: 0;
}

figure {
	margin: 0;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
}

img,
video {
	height: auto;
}

iframe,
embed,
object {
	max-width: 100%;
}

button,
input,
select,
textarea {
	font: inherit;
	max-width: 100%;
}

[hidden] {
	display: none !important;
}


/* assets/css/base/base.css */
/**
 * Playoffline global chrome (T4.4).
 *
 * Dark canvas, media, skip link, overflow safety. Header/footer look is T5.
 * Type scale stays in typography.css.
 */

body {
	background-color: var(--po-color-background);
	color: var(--po-color-text);
	min-width: 0;
}

/*
 * Do not clip #page or #primary (IX-SRCH-09 / T15.2 R-05).
 * One clipped axis clips both and hides overflow instead of fixing it.
 * Horizontal safety: min-width: 0 + wrap on chrome. Page overflow is T15.3+.
 */
#page {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
	min-width: 0;
}

#primary,
.po-main {
	flex: 1 1 auto;
	min-width: 0;
	position: relative;
	z-index: var(--po-z-content);
}

.po-site-header,
.po-site-footer {
	min-width: 0;
	max-width: 100%;
}

/*
 * Overflow safety only — not the V4 header/footer.
 * Unassigned menus stay silent; assigned lists wrap at 320px.
 */
.po-site-header ul,
.po-site-footer ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--po-space-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

#primary :where(h1, h2, h3, h4, h5, h6, p, li) {
	overflow-wrap: break-word;
	word-break: normal;
	hyphens: none;
}

#primary :where(pre) {
	max-width: 100%;
	overflow-x: auto;
}

#primary :where(table) {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}

html {
	scroll-padding-top: max(1rem, calc(env(safe-area-inset-top, 0px) + 8.75rem));
}

.skip-link {
	position: absolute;
	left: var(--po-space-gap);
	top: -100px;
	z-index: var(--po-z-skip);
	padding: var(--po-space-gap);
	background-color: var(--po-color-text);
	color: var(--po-color-background);
}

.skip-link:focus,
.skip-link:focus-visible {
	top: var(--po-space-gap);
	outline: 3px solid var(--po-color-cyan);
	outline-offset: 3px;
}

#primary:focus-visible {
	outline: 3px solid var(--po-color-cyan);
	outline-offset: -3px;
}

#primary {
	scroll-margin-top: max(1rem, calc(env(safe-area-inset-top, 0px) + 8.75rem));
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
[role="tab"]:focus-visible,
[role="button"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
	outline: 3px solid var(--po-color-cyan);
	outline-offset: 3px;
}

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

/* T16.6 A-11: global forced-colors so chrome, fields and focus survive. */
@media (forced-colors: active) {
	#page {
		background: Canvas;
		color: CanvasText;
	}

	.po-button,
	#page .wp-element-button,
	#page .wp-block-button__link,
	#primary button[type="submit"],
	#primary input[type="submit"],
	.po-search,
	.po-field :is(input, select, textarea),
	#page .search-form input,
	.po-card,
	.po-toast,
	.po-feedback,
	.po-promo-bar,
	.po-catalog__view-link,
	.po-product__chip {
		border: 1px solid ButtonText;
		background: ButtonFace;
		color: ButtonText;
	}

	a {
		color: LinkText;
	}

	:focus-visible {
		outline: 3px solid Highlight;
		outline-offset: 3px;
	}

	.po-promo-bar::before,
	.po-particles,
	.po-loader {
		display: none;
	}
}


/* assets/css/layouts/container.css */
/**
 * Playoffline containers and vertical rhythm (T4.4).
 *
 * Standard width is --po-container (T1.2 / T4.2). Wide uses the same
 * 1240 max without the inset shrink — for parents that already pad.
 * No product grids, no Home sections.
 */

.po-container,
#primary,
.po-main {
	width: var(--po-container);
	max-width: 100%;
	margin-inline: auto;
}

.po-container--wide {
	width: min(var(--po-container-max), 100%);
	max-width: 100%;
	margin-inline: auto;
}

.po-container--full {
	width: 100%;
	max-width: none;
	margin-inline: 0;
}

.po-section,
#primary,
.po-main {
	padding-block: var(--po-space-section);
}

.po-section--compact {
	padding-block: var(--po-space-section-compact);
}

@media (max-width: 720px) { /* --po-bp-nav */
	.po-section,
	#primary,
	.po-main {
		padding-block: var(--po-space-section-compact);
	}
}


/* assets/css/layouts/grid.css */
/**
 * Playoffline layout primitives (T4.4).
 *
 * Fluid columns via minmax(). Not a catalog or Home product grid.
 * Extra T1.2 breakpoints (1120 / 960 / 820 / 560 / 400) stay unused
 * until the owning page (T7–T11) needs them.
 */

.po-grid {
	display: grid;
	gap: var(--po-space-gap);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.po-grid--2 {
	display: grid;
	gap: var(--po-space-gap);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

.po-layout {
	display: grid;
	gap: var(--po-space-gap);
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
}

.po-layout__main,
.po-layout__aside {
	min-width: 0;
}

@media (min-width: 721px) { /* above --po-bp-nav */
	.po-layout--sidebar {
		grid-template-columns: minmax(0, 1fr) minmax(12rem, 18rem);
	}

	.po-layout--sidebar-start {
		grid-template-columns: minmax(15rem, 16.5rem) minmax(0, 1fr);
	}
}

.po-stack {
	display: flex;
	flex-direction: column;
	gap: var(--po-space-gap);
	min-width: 0;
}

.po-stack--inset {
	gap: var(--po-space-inset);
}

.po-cluster {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--po-space-gap);
	min-width: 0;
}

.po-flow > * + * {
	margin-block-start: var(--po-space-gap);
}