html {
	scroll-behavior: smooth;
}

body {
	background: var(--cp-bg);
	color: var(--cp-text);
	font-family: var(--cp-font-body);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

a {
	color: var(--cp-text-muted);
	text-decoration: none;
	transition: color 0.25s ease;
}

a:hover,
a:focus-visible {
	color: var(--cp-accent);
}

:focus-visible {
	outline: 2px solid var(--cp-accent);
	outline-offset: 2px;
}

::selection {
	background: rgba(88, 211, 107, 0.25);
}

img {
	max-width: 100%;
	height: auto;
}

.cp-container {
	max-width: var(--cp-max-width);
	margin: 0 auto;
	padding-left: var(--cp-gutter);
	padding-right: var(--cp-gutter);
	box-sizing: border-box;
}

/* Container Template (templates/page-container.php) — just breathing room
   above/below whatever a plugin shortcode renders inside .cp-container. */
.cp-page-container {
	padding: 48px 0 100px;
}

/* Shared across every page with a breadcrumb (single product, shop archive,
   category/tag archives via woocommerce_before_main_content, and the
   manually-built one on search.php) — styled once here instead of per
   page-type stylesheet. Not scoped to body.woocommerce: that class only
   exists on single-product/shop-archive pages, not search results. */
html body .woocommerce-breadcrumb.cp-breadcrumb {
	max-width: var(--cp-max-width);
	margin: 0 auto;
	padding: 34px var(--cp-gutter) 6px;
	box-sizing: border-box;
	font-size: 12.5px;
	color: var(--cp-text-dim);
	letter-spacing: 0.03em;
}

html body .woocommerce-breadcrumb.cp-breadcrumb a {
	color: var(--cp-text-dim);
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.cp-eyebrow {
	font-size: 12px;
	letter-spacing: 0.22em;
	color: var(--cp-accent);
	font-weight: 600;
	margin-bottom: 14px;
	text-transform: uppercase;
}

.skeleton-placeholder {
	position: relative;
	overflow: hidden;
	background: radial-gradient(ellipse at 50% 80%, rgba(18, 59, 42, 0.5), rgba(10, 10, 10, 0.9));
}

.skeleton-placeholder img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.skeleton-placeholder img.loaded {
	opacity: 1;
}

@keyframes cpFloat {
	0%, 100% { transform: translateY(0px); }
	50% { transform: translateY(-16px); }
}

@keyframes cpFloatSm {
	0%, 100% { transform: translateY(0px); }
	50% { transform: translateY(-9px); }
}

@keyframes cpPulse {
	0%, 100% { opacity: 0.5; }
	50% { opacity: 0.9; }
}

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

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

/* ---------- WooCommerce notices (success / error / info) ----------
   .woocommerce-error is a <ul> that can hold several stacked <li> messages,
   so the icon stays absolutely positioned (like WC's own default) rather
   than flex — flex would fight a multi-line error list. WC's own base rule
   (.woocommerce-message, .woocommerce-error, .woocommerce-info { ... }) is
   completely unscoped (one class, no ancestor requirement), so the `html
   body` prefix here is just for real specificity — NOT `body.woocommerce`,
   since that class only exists on single-product/shop-archive pages; cart,
   checkout and my-account use woocommerce-cart/-checkout/-account instead,
   and a `body.woocommerce` selector silently fails to match there. */

html body .woocommerce-message,
html body .woocommerce-error,
html body .woocommerce-info {
	position: relative;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--cp-border);
	border-left: 3px solid var(--cp-accent);
	border-radius: var(--cp-radius-md);
	padding: 18px 22px 18px 54px;
	margin: 0 auto 24px;
	color: var(--cp-text);
	font-size: 14px;
	line-height: 1.6;
	list-style: none;
	box-sizing: border-box;
	/* Some payment gateways (Stripe/card-field validation, etc.) insert
	   their error notices via JS directly into the DOM rather than through
	   WooCommerce's normal server-rendered notice flow — sometimes outside
	   any width-constrained container entirely, rendering full viewport
	   width. This caps the notice itself (not just its optional
	   .woocommerce-notices-wrapper ancestor below) so it's never wider than
	   the rest of the page's content, without changing anything for notices
	   that are already correctly nested inside a narrower container. */
	max-width: var(--cp-max-width);
}

html body .woocommerce-message {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

html body .woocommerce-notices-wrapper {
	max-width: 1240px;
	margin: 16px auto 0;
}

html body .woocommerce-message::after,
html body .woocommerce-error::after,
html body .woocommerce-info::after {
	content: none;
}

html body .woocommerce-message::before,
html body .woocommerce-error::before,
html body .woocommerce-info::before {
	content: "";
	position: absolute;
	top: 20px;
	left: 22px;
	width: 20px;
	height: 20px;
	background-color: var(--cp-accent);
	mask: url('../icons/circle-check.svg') no-repeat center / contain;
	-webkit-mask: url('../icons/circle-check.svg') no-repeat center / contain;
}

html body .woocommerce-error {
	border-left-color: #e5484d;
}

html body .woocommerce-error::before {
	background-color: #e5484d;
	mask-image: url('../icons/circle-alert.svg');
	-webkit-mask-image: url('../icons/circle-alert.svg');
}

html body .woocommerce-info {
	border-left-color: #4ea1f7;
}

html body .woocommerce-info::before {
	background-color: #4ea1f7;
	mask-image: url('../icons/info.svg');
	-webkit-mask-image: url('../icons/info.svg');
}

html body .woocommerce-error li + li {
	margin-top: 8px;
}

html body .woocommerce-message .button,
html body .woocommerce-error .button,
html body .woocommerce-info .button {
	float: right;
	margin-left: 16px;
	background: transparent;
	border: 1px solid var(--cp-accent-border);
	color: var(--cp-accent);
	border-radius: var(--cp-radius-pill);
	padding: 8px 18px;
	font-size: 13px;
	font-weight: 600;
}

/* ---------- select2 dropdown (country/state pickers, site-wide) ----------
   The dropdown panel renders as its own portal appended to <body>, outside
   whichever page container (.cp-checkout, .cp-account-page, etc.) opened it,
   so it's styled here globally rather than duplicated in every page-specific
   stylesheet that happens to have a select2 field. */

.select2-dropdown {
	background: #111111;
	border: 1px solid var(--cp-border);
	border-radius: var(--cp-radius-md);
	overflow: hidden;
}

.select2-search--dropdown .select2-search__field {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--cp-border);
	border-radius: 8px;
	color: var(--cp-text);
	padding: 8px 10px;
}

.select2-results__option {
	color: var(--cp-text-muted);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background: var(--cp-accent);
	color: var(--cp-accent-ink);
}

/* select2's aria-selected actually tracks the currently hovered/keyboard-
   focused row (it moves off the real value the moment you hover elsewhere)
   — the row matching the field's *actual* current value is marked instead
   with data-selected="true", which stays put. Both need covering.
   Also: when the WP admin toolbar is showing (any logged-in user, by
   default), it loads its own select2.css with a matching 3-class/attribute
   rule for this exact state (gray #ddd) — same specificity as a plain
   `.select2-container--default .select2-results__option[data-selected]`
   selector, so load order alone would decide the winner. The leading `body`
   adds one type-selector's worth of specificity to win outright rather than
   depend on enqueue order. */
body .select2-container--default .select2-results__option[aria-selected="true"],
body .select2-container--default .select2-results__option[data-selected="true"] {
	background: rgba(88, 211, 107, 0.28);
	color: var(--cp-accent);
	font-weight: 600;
}

/* ---------- Wordfence 2FA modal (site-wide) ----------
   Wordfence's confirm dialogs (Deactivate 2FA / Generate New Codes) are
   built with WFLS.standaloneModalHTML(), which appends the dialog straight
   to <body> — outside .cp-account-page, like the select2 dropdown above —
   so it's styled globally here instead. Wordfence's own bundled admin CSS
   isn't available to inspect/reverse-engineer specificity against the way
   WooCommerce's is elsewhere in this theme, so the core visual properties
   are forced with !important as a pragmatic exception for this one
   third-party integration. */
.wfls-modal {
	background: #111111 !important;
	border: 1px solid var(--cp-border);
	border-radius: var(--cp-radius-lg);
	color: var(--cp-text-muted);
}

.wfls-modal-header {
	border-bottom: 1px solid var(--cp-border) !important;
}

.wfls-modal-title,
.wfls-modal-title strong {
	color: var(--cp-text) !important;
	font-family: var(--cp-font-heading);
}

.wfls-modal-header-action-close a {
	color: var(--cp-text-muted) !important;
}

.wfls-modal-header-action-close a:hover {
	color: var(--cp-accent) !important;
}

.wfls-modal-content {
	color: var(--cp-text-muted) !important;
}

.wfls-modal-footer {
	border-top: 1px solid var(--cp-border) !important;
}

.wfls-btn.wfls-btn-default {
	background: transparent !important;
	border: 1px solid var(--cp-accent-border) !important;
	color: var(--cp-accent) !important;
}

.wfls-btn.wfls-btn-default:hover {
	background: var(--cp-accent) !important;
	color: var(--cp-accent-ink) !important;
}

.wfls-btn.wfls-btn-primary {
	background: var(--cp-accent) !important;
	border: 1px solid var(--cp-accent) !important;
	color: var(--cp-accent-ink) !important;
}

.wfls-btn.wfls-btn-primary:hover {
	background: var(--cp-accent-dark) !important;
}

.wfls-recovery-codes {
	color: var(--cp-text-muted);
}

html body .woocommerce-message .button:hover,
html body .woocommerce-error .button:hover,
html body .woocommerce-info .button:hover {
	background: var(--cp-accent);
	color: var(--cp-accent-ink);
}