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

/* assets/css/components/links.css */
/**
 * Playoffline links (T4.5).
 *
 * Content and footer stay distinguishable. Header chrome is T5.
 * No global `a { text-decoration: none }` (kit — destructive).
 */

.po-sr-only:not(:focus):not(:focus-visible),
#page .screen-reader-text:not(:focus):not(:focus-visible) {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

#primary a:not(.po-button):not(.wp-element-button):not(.wp-block-button__link):not(.po-link),
.po-site-footer a,
.po-site-header a,
.woocommerce-pagination a,
.woocommerce-MyAccount-navigation a {
	color: inherit;
	text-decoration: none;
}

.po-site-footer a {
	color: var(--po-color-muted);
}

.po-site-footer a:hover,
.po-site-footer a:focus-visible {
	color: var(--po-color-text);
}

.po-link,
.po-entry a:not(.po-button):not(.wp-element-button):not(.wp-block-button__link),
.po-legal a:not(.po-button),
.po-editorial a:not(.po-button),
.entry-content a:not(.po-button):not(.wp-element-button):not(.wp-block-button__link) {
	color: var(--po-color-cyan);
	text-decoration: underline;
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.18em;
}

.po-link:hover,
.po-entry a:not(.po-button):not(.wp-element-button):not(.wp-block-button__link):hover,
.po-legal a:not(.po-button):hover,
.po-editorial a:not(.po-button):hover,
.entry-content a:not(.po-button):not(.wp-element-button):not(.wp-block-button__link):hover {
	color: var(--po-color-text);
}

.po-link:active,
.po-entry a:not(.po-button):not(.wp-element-button):not(.wp-block-button__link):active,
.po-legal a:not(.po-button):active,
.po-editorial a:not(.po-button):active,
.entry-content a:not(.po-button):not(.wp-element-button):not(.wp-block-button__link):active {
	color: var(--po-color-purple-light);
}

.po-link:focus-visible,
.po-entry a:focus-visible,
.po-legal a:focus-visible,
.po-editorial a:focus-visible,
.entry-content a:focus-visible,
.po-site-footer a:focus-visible,
.skip-link:focus-visible {
	outline: 3px solid var(--po-color-cyan);
	outline-offset: 3px;
}

.po-link--arrow::after {
	content: " →";
	font-weight: var(--po-font-weight-ui-extrabold);
	text-decoration: none;
}

.po-link--nav {
	color: var(--po-color-muted);
	font-size: 0.8125rem;
	font-weight: var(--po-font-weight-ui-extrabold);
	letter-spacing: var(--po-font-nav-tracking);
	text-decoration: none;
	text-transform: uppercase;
}

.po-link--nav:hover,
.po-link--nav[aria-current="page"],
.po-link--nav.current-menu-item {
	color: var(--po-color-text);
}

.po-link--nav[aria-current="page"],
.po-link--nav.current-menu-item {
	color: var(--po-color-cyan);
	text-decoration: none;
}

.po-link--nav:focus-visible {
	outline: 3px solid var(--po-color-cyan);
	outline-offset: 3px;
}

#page a[aria-disabled="true"] {
	color: var(--po-color-muted);
	cursor: not-allowed;
	text-decoration: line-through;
	pointer-events: none;
}


/* assets/css/components/buttons.css */
/**
 * Playoffline buttons (T4.5).
 *
 * Clip-path V4 is T5/T6. No cart/wishlist JS. Front-end only (#page / Woo).
 */

.po-button,
#page .wp-element-button,
#page .wp-block-button__link,
#primary button[type="submit"],
#primary input[type="submit"],
#primary input[type="button"],
#primary input[type="reset"],
body.po-woocommerce-active .woocommerce #respond input#submit,
body.po-woocommerce-active .woocommerce a.button,
body.po-woocommerce-active .woocommerce button.button,
body.po-woocommerce-active .woocommerce input.button {
	--po-button-bg: var(--po-gradient-cta);
	--po-button-color: var(--po-color-text);
	--po-button-border: transparent;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.75em;
	min-height: 2.75rem;
	min-width: 2.75rem;
	padding: 0.75rem var(--po-space-gap);
	border: 1px solid var(--po-button-border);
	border-radius: var(--po-radius-small);
	background: var(--po-button-bg);
	color: var(--po-button-color);
	font-family: var(--po-font-body);
	font-size: 0.875rem;
	font-weight: var(--po-font-weight-ui-extrabold);
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition:
		transform var(--po-dur-fast) var(--po-ease),
		box-shadow var(--po-dur) var(--po-ease),
		background-color var(--po-dur-fast) var(--po-ease),
		border-color var(--po-dur-fast) var(--po-ease),
		color var(--po-dur-fast) var(--po-ease);
}

.po-button--primary,
body.po-woocommerce-active .woocommerce ul.products li.product a.button,
body.po-woocommerce-active .woocommerce ul.products li.product button.button,
body.po-woocommerce-active .woocommerce ul.products li.product .po-card .po-button:not(.po-card__favorite):not(.po-favorite) {
	--po-button-bg: var(--po-gradient-cta);
	--po-button-color: var(--po-color-text);
	--po-button-border: transparent;
	background: var(--po-gradient-cta);
	background-color: transparent;
	color: var(--po-color-text);
	border-color: transparent;
	box-shadow: 0 12px 30px color-mix(in srgb, var(--po-color-purple) 30%, transparent);
}

.po-button--secondary,
#page .wp-block-button.is-style-outline .wp-block-button__link {
	--po-button-bg: var(--po-color-surface);
	--po-button-color: var(--po-color-text);
	--po-button-border: var(--po-color-border);
	box-shadow: none;
}

.po-button--commercial,
body.po-woocommerce-active .woocommerce a.button.alt,
body.po-woocommerce-active .woocommerce button.button.alt,
body.po-woocommerce-active .woocommerce input.button.alt {
	--po-button-bg: var(--po-color-lime);
	--po-button-color: var(--po-color-background);
	--po-button-border: var(--po-color-lime);
	box-shadow: none;
}

.po-button--ghost {
	--po-button-bg: transparent;
	--po-button-color: var(--po-color-text);
	--po-button-border: var(--po-color-border);
	box-shadow: none;
}

.po-button--icon {
	width: 2.75rem;
	padding: 0;
}

.po-button--small {
	min-height: 2.75rem;
	padding-inline: 0.875rem;
	font-size: 0.75rem;
}

.po-button--large {
	min-height: 3.5rem;
	padding-inline: var(--po-space-inset-compact);
	font-size: 1rem;
}

.po-button--full {
	width: 100%;
}

.po-button:hover,
#page .wp-element-button:hover,
#page .wp-block-button__link:hover,
#primary button[type="submit"]:hover,
#primary input[type="submit"]:hover,
body.po-woocommerce-active .woocommerce a.button:hover,
body.po-woocommerce-active .woocommerce button.button:hover,
body.po-woocommerce-active .woocommerce input.button:hover {
	transform: translateY(-2px);
}

.po-button--primary:hover,
body.po-woocommerce-active .woocommerce ul.products li.product a.button:hover,
body.po-woocommerce-active .woocommerce ul.products li.product button.button:hover,
body.po-woocommerce-active .woocommerce ul.products li.product .po-card .po-button:not(.po-card__favorite):not(.po-favorite):hover {
	background: var(--po-gradient-cta);
	background-color: transparent;
	color: var(--po-color-text);
	box-shadow: 0 15px 34px color-mix(in srgb, var(--po-color-purple) 42%, transparent);
}

.po-button--secondary:hover,
#page .wp-block-button.is-style-outline .wp-block-button__link:hover {
	border-color: color-mix(in srgb, var(--po-color-cyan) 45%, var(--po-color-border));
}

.po-button--commercial:hover,
body.po-woocommerce-active .woocommerce a.button.alt:hover,
body.po-woocommerce-active .woocommerce button.button.alt:hover {
	filter: brightness(1.06);
}

.po-button--ghost:hover {
	background-color: var(--po-color-surface);
	border-color: color-mix(in srgb, var(--po-color-text) 22%, transparent);
}

.po-button:active,
#page .wp-element-button:active,
#page .wp-block-button__link:active,
#primary button[type="submit"]:active,
body.po-woocommerce-active .woocommerce a.button:active,
body.po-woocommerce-active .woocommerce button.button:active {
	transform: translateY(0);
}

.po-button:focus-visible,
#page .wp-element-button:focus-visible,
#page .wp-block-button__link:focus-visible,
#primary button[type="submit"]:focus-visible,
#primary input[type="submit"]:focus-visible,
#primary input[type="button"]:focus-visible,
body.po-woocommerce-active .woocommerce a.button:focus-visible,
body.po-woocommerce-active .woocommerce button.button:focus-visible,
body.po-woocommerce-active .woocommerce input.button:focus-visible {
	outline: 3px solid var(--po-color-cyan);
	outline-offset: 3px;
}

.po-button:disabled,
.po-button[aria-disabled="true"],
#primary button[type="submit"]:disabled,
#primary input[type="submit"]:disabled,
body.po-woocommerce-active .woocommerce button.button:disabled,
body.po-woocommerce-active .woocommerce input.button:disabled,
body.po-woocommerce-active .woocommerce a.button.disabled {
	--po-button-bg: var(--po-color-surface-alt);
	--po-button-color: var(--po-color-muted);
	--po-button-border: var(--po-color-border);
	box-shadow: none;
	cursor: not-allowed;
	filter: none;
	transform: none;
	text-decoration: line-through;
	pointer-events: none;
}

.po-button--loading,
.po-button[aria-busy="true"] {
	cursor: progress;
	pointer-events: none;
}

.po-button--loading::after,
.po-button[aria-busy="true"]::after {
	content: "";
	inline-size: 0.85em;
	block-size: 0.85em;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	flex-shrink: 0;
	animation: po-button-spin 0.7s linear infinite;
}

@keyframes po-button-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.po-button,
	#page .wp-element-button,
	#page .wp-block-button__link,
	#primary button[type="submit"],
	#primary input[type="submit"],
	body.po-woocommerce-active .woocommerce a.button,
	body.po-woocommerce-active .woocommerce button.button,
	body.po-woocommerce-active .woocommerce input.button {
		transition: none;
	}

	.po-button:hover,
	#page .wp-element-button:hover,
	#page .wp-block-button__link:hover,
	#primary button[type="submit"]:hover,
	body.po-woocommerce-active .woocommerce a.button:hover,
	body.po-woocommerce-active .woocommerce button.button:hover {
		transform: none;
	}

	.po-button--loading::after,
	.po-button[aria-busy="true"]::after {
		animation: none;
		border-right-color: currentColor;
		opacity: 0.7;
	}
}


/* assets/css/components/forms.css */
/**
 * Playoffline forms (T4.5).
 *
 * Native controls kept. Search is structural only (no autocomplete).
 * Field focus = yellow (D-06). Button/link focus stays cyan (T1.2 §5.7).
 */

#page {
	color-scheme: dark;
}

.po-field {
	display: flex;
	flex-direction: column;
	gap: 0.4em;
	min-width: 0;
}

.po-field__label,
#primary label,
#page .comment-form label,
#page .search-form label,
body.po-woocommerce-active .woocommerce form .form-row label {
	color: var(--po-color-text);
	font-family: var(--po-font-body);
	font-size: var(--po-font-label-size);
	font-weight: var(--po-font-weight-ui-semibold);
	letter-spacing: 0.02em;
	line-height: var(--po-font-label-leading);
}

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

.po-field__error,
.po-field--invalid .po-field__help {
	color: var(--po-color-error);
}

.po-field__success,
.po-field--success .po-field__help {
	color: var(--po-color-success);
}

.po-field :is(textarea, select, input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"], [type="submit"], [type="button"], [type="reset"], [type="image"])),
#primary :is(textarea, select, input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"], [type="submit"], [type="button"], [type="reset"], [type="image"])),
#page .comment-form :is(textarea, select, input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="submit"], [type="button"])),
#page .search-form input:not([type="submit"]),
body.po-woocommerce-active .woocommerce .input-text,
body.po-woocommerce-active .woocommerce form .form-row input.input-text,
body.po-woocommerce-active .woocommerce form .form-row textarea,
body.po-woocommerce-active .woocommerce form .form-row select,
body.po-woocommerce-active .woocommerce-Input {
	width: 100%;
	max-width: 100%;
	min-height: 2.75rem;
	padding: 0.65rem var(--po-space-gap);
	border: 1px solid var(--po-color-border);
	border-radius: var(--po-radius-small);
	background-color: var(--po-color-surface);
	color: var(--po-color-text);
	font-family: var(--po-font-body);
	font-size: 1rem;
	line-height: 1.4;
}

#primary .wc-block-components-text-input,
#primary .wc-block-components-combobox {
	position: relative;
}

#primary .wc-block-components-text-input input,
#primary .wc-block-components-combobox input,
#primary .wc-block-components-textarea textarea {
	min-height: 3.25rem;
	padding: 1.5rem 0.85rem 0.5rem;
}

#primary .wc-block-components-text-input label,
#primary .wc-block-components-combobox label,
#primary .wc-blocks-components-select__label {
	position: absolute;
	left: 0.85rem;
	top: 0.35rem;
	z-index: 1;
	margin: 0;
	padding: 0;
	transform: none;
	color: var(--po-color-muted);
	font-size: 0.6875rem;
	font-weight: var(--po-font-weight-ui-semibold);
	line-height: 1.2;
	pointer-events: none;
}

#primary .wc-blocks-components-select__container {
	position: relative;
}

#primary .wc-blocks-components-select__select {
	min-height: 3.25rem;
	padding: 1.5rem 2.25rem 0.5rem 0.85rem;
}

.po-field textarea,
#primary textarea,
#page .comment-form textarea,
body.po-woocommerce-active .woocommerce form .form-row textarea {
	min-height: 8rem;
	resize: vertical;
}

.po-field :is(textarea, input:not([type="checkbox"], [type="radio"]))::placeholder,
#primary :is(textarea, input:not([type="checkbox"], [type="radio"], [type="submit"]))::placeholder,
#page .search-form input::placeholder {
	color: var(--po-color-muted);
	opacity: 1;
}

.po-field :is(textarea, select, input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="submit"], [type="button"], [type="reset"])):hover,
#primary :is(textarea, select, input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="submit"], [type="button"], [type="reset"])):hover,
#page .search-form input:not([type="submit"]):hover,
body.po-woocommerce-active .woocommerce .input-text:hover {
	border-color: color-mix(in srgb, var(--po-color-text) 22%, var(--po-color-border));
}

.po-field :is(textarea, select, input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="submit"], [type="button"], [type="reset"])):focus,
.po-field :is(textarea, select, input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="submit"], [type="button"], [type="reset"])):focus-visible,
#primary :is(textarea, select, input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="submit"], [type="button"], [type="reset"])):focus,
#primary :is(textarea, select, input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="submit"], [type="button"], [type="reset"])):focus-visible,
#page .search-form input:not([type="submit"]):focus,
#page .search-form input:not([type="submit"]):focus-visible,
body.po-woocommerce-active .woocommerce .input-text:focus,
body.po-woocommerce-active .woocommerce .input-text:focus-visible,
.po-search:focus-within,
#page .search-form:focus-within {
	border-color: var(--po-color-focus);
	box-shadow: 0 0 0 1px var(--po-color-focus);
	outline: none;
}

.po-field--invalid :is(textarea, select, input),
.po-field :is(textarea, select, input)[aria-invalid="true"],
#primary :is(textarea, select, input)[aria-invalid="true"],
body.po-woocommerce-active .woocommerce .form-row.woocommerce-invalid .input-text {
	border-color: var(--po-color-error);
	box-shadow: 0 0 0 1px var(--po-color-error);
}

.po-field--success :is(textarea, select, input),
body.po-woocommerce-active .woocommerce .form-row.woocommerce-validated .input-text {
	border-color: var(--po-color-success);
}

.po-field :is(textarea, select, input:not([type="checkbox"], [type="radio"])):disabled,
#primary :is(textarea, select, input:not([type="checkbox"], [type="radio"], [type="submit"])):disabled,
#primary :is(textarea, select, input)[aria-disabled="true"] {
	background-color: var(--po-color-surface-alt);
	border-style: dashed;
	color: var(--po-color-muted);
	cursor: not-allowed;
	opacity: 1;
}

.po-choice,
#primary .po-choice {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	min-height: 2.75rem;
	width: auto;
}

.po-choice input:focus-visible,
#primary input[type="checkbox"]:focus-visible,
#primary input[type="radio"]:focus-visible,
#page .comment-form input[type="checkbox"]:focus-visible,
body.po-woocommerce-active .woocommerce form .form-row input[type="checkbox"]:focus-visible,
body.po-woocommerce-active .woocommerce form .form-row input[type="radio"]:focus-visible {
	outline: 3px solid var(--po-color-cyan);
	outline-offset: 3px;
}

.po-choice input[type="checkbox"],
.po-choice input[type="radio"],
#primary input[type="checkbox"],
#primary input[type="radio"],
#page .comment-form input[type="checkbox"],
body.po-woocommerce-active .woocommerce form .form-row input[type="checkbox"],
body.po-woocommerce-active .woocommerce form .form-row input[type="radio"] {
	width: 1.25rem;
	height: 1.25rem;
	min-width: 1.25rem;
	min-height: 1.25rem;
	margin-block: 0.75rem;
	padding: 0;
	accent-color: var(--po-color-purple);
	flex-shrink: 0;
}

.po-choice label,
#primary .po-choice label {
	padding-block: 0.7rem;
	font-weight: var(--po-font-weight-ui);
	letter-spacing: 0;
	text-transform: none;
}

.po-search,
#page .search-form {
	display: flex;
	align-items: stretch;
	width: min(100%, 37.5rem);
	max-width: 100%;
	min-height: 2.875rem;
	border: 1px solid var(--po-color-border);
	border-radius: var(--po-radius-small);
	background-color: var(--po-color-surface-alt);
}

.po-search:focus-within,
#page .search-form:focus-within {
	z-index: var(--po-z-search);
}

.po-search__field,
#page .search-form .search-field,
#page .search-form input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 2.75rem;
	font-size: 1rem;
	border: 0;
	border-radius: var(--po-radius-small);
	background: transparent;
	box-shadow: none;
}

.po-search__field:focus,
.po-search__field:focus-visible,
#page .search-form .search-field:focus,
#page .search-form .search-field:focus-visible {
	border: 0;
	box-shadow: none;
	outline: none;
}

.po-search__submit,
#page .search-form .search-submit {
	flex: 0 0 auto;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding-inline: var(--po-space-gap);
	border: 0;
	border-radius: var(--po-radius-small);
	background: transparent;
	color: var(--po-color-text);
	box-shadow: none;
}

#page .search-form label {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
}

body.po-woocommerce-active .woocommerce-error,
body.po-woocommerce-active .woocommerce-info,
body.po-woocommerce-active .woocommerce-message {
	padding: var(--po-space-gap);
	border: 1px solid var(--po-color-border);
	border-radius: var(--po-radius-small);
	background-color: var(--po-color-surface);
	color: var(--po-color-text);
}

body.po-woocommerce-active .woocommerce-error {
	border-color: var(--po-color-error);
}

body.po-woocommerce-active .woocommerce-error::before {
	content: "! ";
	font-weight: 800;
}

body.po-woocommerce-active .woocommerce-message {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	border-color: var(--po-color-success);
}

body.po-woocommerce-active .woocommerce-message::before {
	content: none;
}

#page .woocommerce-message a.button,
#page .woocommerce-message a.wc-forward,
body.po-woocommerce-active .woocommerce-message a.button,
body.po-woocommerce-active .woocommerce-message a.wc-forward {
	--po-button-bg: var(--po-gradient-cta);
	--po-button-color: var(--po-color-text);
	float: none;
	flex: 0 0 auto;
	margin: 0;
	min-height: 2.5rem;
	padding: 0.5rem 1rem;
	border: 0;
	border-radius: var(--po-radius-small);
	background: var(--po-gradient-cta);
	background-color: transparent;
	color: var(--po-color-text);
	box-shadow: 0 12px 30px color-mix(in srgb, var(--po-color-purple) 30%, transparent);
	font-weight: var(--po-font-weight-ui-extrabold);
}

body.po-woocommerce-active .woocommerce-info {
	border-color: var(--po-color-info);
}

body.po-woocommerce-active .woocommerce form .required,
body.po-woocommerce-active .woocommerce form .optional,
#primary .required,
#primary .optional,
#page .comment-form .required,
#page .comment-form .optional {
	color: inherit;
}

body.po-woocommerce-active .woocommerce form .required,
#primary .required,
#page .comment-form .required {
	font-weight: 800;
}

body.po-woocommerce-active .woocommerce form .optional,
#primary .optional,
#page .comment-form .optional {
	font-weight: 500;
}


/* assets/css/components/status.css */
/**
 * Playoffline stock, countdown shell, and trust seal (T4.6).
 *
 * Countdown is visual-only: no timer, no interval, no remaining-time math.
 */

.po-status,
body.po-woocommerce-active .woocommerce .stock {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	max-width: 100%;
	color: var(--po-color-text);
	font-size: 0.8125rem;
	font-weight: var(--po-font-weight-ui-semibold);
	line-height: 1.35;
	overflow-wrap: anywhere;
}

.po-status::before,
body.po-woocommerce-active .woocommerce .stock::before {
	content: "";
	inline-size: 0.5rem;
	block-size: 0.5rem;
	border-radius: 50%;
	background-color: currentColor;
	flex-shrink: 0;
}

.po-status--in,
body.po-woocommerce-active .woocommerce .stock.in-stock {
	color: var(--po-color-lime);
}

.po-status--low {
	color: var(--po-color-yellow);
}

.po-status--out,
body.po-woocommerce-active .woocommerce .stock.out-of-stock {
	color: var(--po-color-danger);
}

.po-status--out::before,
body.po-woocommerce-active .woocommerce .stock.out-of-stock::before {
	border-radius: 0;
}

.po-status--low::before {
	border-radius: 0;
	clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.po-countdown {
	display: flex;
	flex-wrap: wrap;
	gap: var(--po-space-gap);
	min-width: 0;
}

.po-countdown__unit {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 3.875rem;
	padding: 0.65rem 0.5rem;
	border: 1px solid var(--po-color-border);
	border-radius: var(--po-radius-small);
	background-color: var(--po-color-surface-alt);
	text-align: center;
}

.po-countdown__value {
	color: var(--po-color-text);
	font-family: var(--po-font-display);
	font-size: 1.5rem;
	font-weight: var(--po-font-weight-display);
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}

.po-countdown__label {
	color: var(--po-color-muted);
	font-size: 0.625rem;
	font-weight: var(--po-font-weight-ui-extrabold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.po-trust {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	max-width: 100%;
	padding: var(--po-space-gap);
	border: 1px solid var(--po-color-border);
	border-radius: var(--po-radius-small);
	background-color: var(--po-color-surface);
	color: var(--po-color-text);
	font-size: 0.875rem;
	line-height: 1.45;
}

.po-trust::before {
	content: "OK";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2rem;
	min-height: 2rem;
	padding: 0.2em;
	border: 1px solid color-mix(in srgb, var(--po-color-lime) 45%, var(--po-color-border));
	border-radius: var(--po-radius-small);
	background-color: color-mix(in srgb, var(--po-color-lime) 12%, var(--po-color-surface));
	color: var(--po-color-lime);
	font-size: 0.65rem;
	font-weight: var(--po-font-weight-ui-extrabold);
	letter-spacing: 0.06em;
	flex-shrink: 0;
}

@media (max-width: 720px) { /* --po-bp-nav */
	.po-countdown__unit {
		min-width: 3.05rem;
	}

	.po-countdown__value {
		font-size: 1.25rem;
	}
}


/* assets/css/components/feedback.css */
/**
 * Playoffline feedback atoms (T4.7).
 *
 * Empty / error / success / warning / toast. Visible by default.
 * Do not hide copy behind a fade. No gamer loader, no toast JS.
 */

.po-feedback {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--po-space-gap);
	max-width: 100%;
	padding: var(--po-space-inset);
	border: 1px solid var(--po-color-border);
	border-radius: var(--po-radius-small);
	background-color: var(--po-color-surface);
	color: var(--po-color-text);
}

.po-feedback__title {
	margin: 0;
	font-family: var(--po-font-display);
	font-size: 1.25rem;
	font-weight: var(--po-font-weight-display);
	letter-spacing: var(--po-font-display-tracking);
}

.po-feedback__text {
	margin: 0;
	color: var(--po-color-muted);
	font-size: 0.9375rem;
}

.po-feedback--empty {
	border-style: dashed;
}

.po-feedback--error {
	border-color: var(--po-color-error);
}

.po-feedback--success {
	border-color: var(--po-color-success);
}

.po-feedback--warning {
	border-color: var(--po-color-alert);
}

.po-feedback--error::before,
.po-toast--error::before {
	content: "!";
	flex-shrink: 0;
	font-weight: var(--po-font-weight-ui-extrabold);
}

.po-feedback--success::before,
.po-toast--success::before {
	content: "OK";
	flex-shrink: 0;
	font-weight: var(--po-font-weight-ui-extrabold);
	letter-spacing: 0.04em;
}

.po-feedback--warning::before,
.po-toast--warning::before {
	content: "!";
	flex-shrink: 0;
	font-weight: var(--po-font-weight-ui-extrabold);
}

.po-toast {
	display: flex;
	align-items: flex-start;
	gap: var(--po-space-gap);
	max-width: min(100%, 26rem);
	padding: var(--po-space-gap);
	border: 1px solid var(--po-color-border);
	border-radius: var(--po-radius-small);
	background-color: var(--po-color-surface-raised);
	color: var(--po-color-text);
	box-shadow: var(--po-shadow-raised);
}

.po-toast[hidden] {
	display: none;
}

.po-toast--error {
	border-color: var(--po-color-error);
}

.po-toast--success {
	border-color: var(--po-color-success);
}

.po-toast--warning {
	border-color: var(--po-color-alert);
}


/* assets/css/components/loading.css */
/**
 * Playoffline loading atoms (T4.7).
 *
 * Spinner + skeleton only. Not the full-screen gamer boot loader (T5).
 * Skeletons reserve size (aspect-ratio / min-height) to limit CLS.
 */

.po-loading {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	min-height: 2.75rem;
	color: var(--po-color-muted);
	font-size: 0.875rem;
}

.po-loading::before {
	content: "";
	inline-size: 1rem;
	block-size: 1rem;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	flex-shrink: 0;
	animation: po-spin var(--po-dur-slow) linear infinite;
}

.po-skeleton {
	display: block;
	max-width: 100%;
	min-height: 1rem;
	border-radius: var(--po-radius-small);
	background-color: var(--po-color-surface-alt);
	animation: po-pulse var(--po-dur-reveal) var(--po-ease) infinite;
}

.po-skeleton--title {
	min-height: 1.5rem;
	width: min(16rem, 80%);
}

.po-skeleton--text {
	min-height: 0.875rem;
	width: 100%;
}

.po-skeleton--media {
	width: 100%;
	min-height: 0;
	aspect-ratio: 1;
}

@keyframes po-spin {
	to {
		transform: rotate(360deg);
	}
}

@keyframes po-pulse {
	50% {
		opacity: 0.55;
	}
}


/* assets/css/utilities/states.css */
/**
 * Playoffline interaction states (T4.7).
 *
 * Disabled / selected / loading flag / SR live region.
 * No size morph (T1.4 MV-VAR-01). Color + border + word only.
 */

.po-is-disabled,
#page [aria-disabled="true"]:not(.po-button) {
	color: var(--po-color-muted);
	cursor: not-allowed;
	pointer-events: none;
}

.po-is-selected,
#page [aria-selected="true"]:not([role="tab"]) {
	border-color: var(--po-color-purple);
	box-shadow: inset 0 0 0 1px var(--po-color-purple);
	background-color: color-mix(in srgb, var(--po-color-purple) 12%, var(--po-color-surface));
}

.po-is-loading {
	cursor: progress;
}

.po-announce {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}


/* assets/css/utilities/motion.css */
/**
 * Playoffline motion base (T4.7).
 *
 * Only opacity + transform. Tokens: --po-dur-* / --po-ease-*.
 * No cursor follow, particles, reveal-hidden, hero, carousel, clip.
 *
 * Budget (T1.4 §4):
 * - Ambient loops: 0 in this layer (skeleton/spinner only while loading).
 * - Simultaneous CSS animations cap: 6; hover wins over leftover fades.
 * - Mobile / (hover: none) / max-width 820 (--po-bp-env): no ambient loops.
 * - Never animate width, height, top, left, margin.
 * - No will-change in rest state.
 * - --mx / --my stay 0.
 */

.po-motion-fade {
	transition: opacity var(--po-dur) var(--po-ease);
}

.po-motion-lift {
	transition: transform var(--po-dur-fast) var(--po-ease);
}

@media (hover: hover) and (pointer: fine) {
	.po-motion-lift:hover {
		transform: translateY(-2px);
	}
}

.po-toast:not([hidden]) {
	transition:
		opacity var(--po-dur-mid) var(--po-ease),
		transform var(--po-dur-mid) var(--po-ease);
}

/*
 * Content stays readable without JS. Do not add a default opacity: 0.
 * T17.6: do not put this class on above-the-fold intros (competes with reading).
 * Optional one-shot only after JS decides the node is in view.
 */
.po-motion-in {
	animation: po-in var(--po-dur) var(--po-ease-out) 1;
}

/*
 * V4 scroll reveal. Only after JS adds .po-reveal — otherwise content stays visible.
 */
.po-js .po-reveal {
	opacity: 0;
	transform: translateY(34px);
	transition:
		opacity 0.7s ease,
		transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.po-js .po-reveal.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: no-preference) {
	.po-card .po-price__now,
	.po-card .po-price ins .woocommerce-Price-amount,
	.po-card .po-price:not(:has(del)) .woocommerce-Price-amount,
	.po-home-flash .price ins,
	.po-home-flash .price ins .woocommerce-Price-amount,
	.po-home-flash .price:not(:has(del)) .woocommerce-Price-amount,
	.po-product .summary .price ins,
	.po-product .summary .price > .amount,
	.po-product .summary .po-price__now {
		animation: po-neon-breathe 2.8s ease-in-out infinite alternate;
	}
}

@keyframes po-neon-breathe {
	to {
		text-shadow: 0 0 13px rgba(255, 199, 74, 0.35);
	}
}

@keyframes po-in {
	from {
		opacity: 0.01;
		transform: translateY(8px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (max-width: 820px), (hover: none) {
	.po-skeleton {
		animation: none;
	}

	.po-motion-in {
		animation: none;
	}

	.po-motion-lift:hover {
		transform: none;
	}

	.po-js .po-reveal {
		transform: translateY(18px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.po-motion-fade,
	.po-motion-lift,
	.po-motion-in,
	.po-toast,
	.po-skeleton,
	.po-loading::before,
	.po-button--loading::after,
	.po-button[aria-busy="true"]::after,
	.po-js .po-reveal {
		animation: none;
		transition: none;
		transform: none;
	}

	.po-loading::before,
	.po-button--loading::after,
	.po-button[aria-busy="true"]::after {
		border-right-color: currentColor;
		opacity: 0.7;
	}

	.po-skeleton {
		opacity: 1;
	}

	/*
	 * T16.6: leftover loops/reveals jump to the end state.
	 * Countdown digits are JS text, not CSS animation — they stay.
	 */
	#page *,
	#page *::before,
	#page *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}


/* assets/css/components/loader.css */
/**
 * Playoffline boot loader (T19.R1 / V4 boot-loader).
 *
 * Overlay only. Visible solely with html.po-loader-on.
 * Progress 1.15s cubic-bezier(0.65, 0, 0.35, 1). Exit 0.55s opacity/visibility.
 */

.po-loader {
	position: fixed;
	inset: 0;
	z-index: var(--po-z-loader);
	display: grid;
	place-items: center;
	margin: 0;
	background: radial-gradient(circle at center, #141027 0, #07080c 42%, #030407 100%);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		opacity 0.55s ease,
		visibility 0.55s ease;
}

.po-loader::before,
.po-loader::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.po-loader::before {
	background:
		linear-gradient(rgba(41, 216, 255, 0.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(128, 88, 255, 0.035) 1px, transparent 1px);
	background-size: 42px 42px;
	animation: po-loader-grid 1.2s ease-in-out infinite alternate;
}

.po-loader::after {
	background: repeating-linear-gradient(
		0deg,
		transparent 0 4px,
		rgba(255, 255, 255, 0.025) 5px
	);
	animation: po-loader-scan 8s linear infinite;
}

.po-loader[hidden] {
	display: none !important;
}

html.po-loader-on .po-loader:not(.is-complete):not([hidden]) {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	animation: po-loader-safeguard 2.4s var(--po-ease) forwards;
}

html.po-loader-on .po-loader.is-complete,
.po-loader.is-complete {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	animation: none;
}

.po-loader__core {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: min(390px, calc(100% - 48px));
	min-width: 0;
	padding: 32px;
	border: 1px solid rgba(41, 216, 255, 0.22);
	background: rgba(8, 9, 15, 0.75);
	box-shadow: 0 0 80px rgba(93, 53, 220, 0.22);
	clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
	text-align: center;
}

.po-loader--compact .po-loader__core {
	transform: scale(0.88);
}

.po-loader__logo {
	display: block;
	width: 190px;
	max-width: 100%;
	height: 75px;
	margin: 0 auto 24px;
	object-fit: contain;
	filter: drop-shadow(0 0 18px rgba(41, 216, 255, 0.18));
}

.po-loader__name {
	margin: 0 0 24px;
	color: var(--po-color-text);
	font-family: var(--po-font-display);
	font-size: var(--po-font-size-h4);
	font-weight: var(--po-font-weight-display);
}

.po-loader__status {
	display: flex;
	justify-content: space-between;
	gap: 1.25rem;
	margin: 0;
	font-family: var(--po-font-display);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.po-loader__status-label {
	color: var(--po-color-cyan);
}

.po-loader__status-module {
	color: #fff;
	font-weight: 700;
}

.po-loader__track {
	height: 4px;
	margin: 13px 0;
	overflow: hidden;
	background-color: #1c1d28;
}

.po-loader__bar {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, var(--po-color-purple), var(--po-color-cyan));
	box-shadow: 0 0 18px var(--po-color-cyan);
	transform: scaleX(0);
	transform-origin: left center;
}

html.po-loader-on .po-loader:not(.is-complete):not([hidden]) .po-loader__bar {
	animation: po-loader-bar 1.15s cubic-bezier(0.65, 0, 0.35, 1) 1 forwards;
}

html.po-loader-on .po-loader--compact:not(.is-complete):not([hidden]) .po-loader__bar {
	animation-duration: 0.28s;
}

.po-loader__hint {
	display: block;
	margin: 0;
	color: #777b8c;
	font-size: 0.6rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

@keyframes po-loader-bar {
	0% {
		transform: scaleX(0);
	}

	20% {
		transform: scaleX(0.14);
	}

	54% {
		transform: scaleX(0.54);
	}

	76% {
		transform: scaleX(0.7);
	}

	100% {
		transform: scaleX(1);
	}
}

@keyframes po-loader-grid {
	to {
		opacity: 0.45;
		transform: scale(1.02);
	}
}

@keyframes po-loader-scan {
	to {
		background-position: 0 120px;
	}
}

@keyframes po-loader-safeguard {
	0%,
	75% {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	100% {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}
}

html.po-loader-on,
html.po-loader-lock,
html.po-loader-on body,
html.po-loader-lock body {
	overflow: hidden;
}

@media (max-width: 820px) {
	.po-loader__core {
		padding: 25px;
	}

	.po-loader::before,
	.po-loader::after {
		animation-duration: 2.4s;
	}
}

@media (prefers-reduced-motion: reduce) {
	.po-loader,
	html.po-loader-on .po-loader {
		display: none !important;
	}

	.po-loader__bar,
	html.po-loader-on .po-loader:not(.is-complete) .po-loader__bar,
	.po-loader::before,
	.po-loader::after {
		animation: none;
		transform: none;
	}

	html.po-loader-on,
	html.po-loader-lock,
	html.po-loader-on body,
	html.po-loader-lock body {
		overflow: auto;
	}
}