/**
 * wpexperts — design system.
 * Pixel-port of the Next.js storefront (Tailwind tokens -> custom CSS).
 * No framework; scoped under .wpexperts-* / .wpexpert-* class prefixes.
 */

/* ---------- Tokens ---------- */
:root {
	--wpx-navy: #0a183d;
	--wpx-navy-700: #122254;
	--wpx-brand: #2563eb;
	--wpx-accent: #ffa200;
	--wpx-mutedbg: #ebebeb;
	--wpx-ink: #212529;
	--wpx-border: #e5e7eb;
	--wpx-radius: 0.375rem;
	--wpx-radius-lg: 0.75rem;
	--wpx-radius-xl: 1rem;
	--wpx-shadow-sm: 0 1px 2px rgba(10, 24, 61, 0.06);
	--wpx-shadow: 0 4px 12px rgba(10, 24, 61, 0.08);
	--wpx-shadow-lg: 0 12px 28px rgba(10, 24, 61, 0.12);
	--wpx-container: 80rem; /* max-w-7xl */
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: #ffffff;
	color: var(--wpx-ink);
	font-family: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

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

a { color: var(--wpx-brand); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Full-bleed sections manage their own spacing; kill WP's 24px block-gap
   on direct children of .wp-site-blocks (overrides :where() layout rule). */
.wp-site-blocks > * { margin-block-start: 0; }

/* ---------- Layout container ---------- */
.wpexpert-container,
.wp-block-group.is-layout-constrained > * {
	max-width: var(--wpx-container);
}
.wpexpert-container {
	width: 100%;
	margin-inline: auto;
	padding-inline: 1rem;
}
@media (min-width: 640px) { .wpexpert-container { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .wpexpert-container { padding-inline: 2rem; } }

/* ---------- Buttons ---------- */
.wpexpert-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.625rem 1.25rem;
	border-radius: var(--wpx-radius);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.25;
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none !important;
	transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.wpexpert-btn-primary {
	background: var(--wpx-navy);
	color: #ffffff;
}
.wpexpert-btn-primary:hover {
	background: var(--wpx-navy-700);
	color: #ffffff;
}
.wpexpert-btn-accent {
	background: var(--wpx-accent);
	color: var(--wpx-navy);
}
.wpexpert-btn-accent:hover { opacity: 0.9; color: var(--wpx-navy); }
.wpexpert-btn-outline {
	border-color: var(--wpx-brand);
	color: var(--wpx-brand);
	background: transparent;
}
.wpexpert-btn-outline:hover {
	background: var(--wpx-brand);
	color: #ffffff;
}
.wpexpert-btn-bare {
	background: transparent;
	border-color: #d1d5db;
	color: var(--wpx-ink);
}
.wpexpert-btn-bare:hover { background: #f9fafb; }
.wpexpert-btn-ghost {
	border-color: rgba(255, 255, 255, 0.4);
	color: #ffffff;
	background: transparent;
}
.wpexpert-btn-ghost:hover { background: rgba(255, 255, 255, 0.1); }

/* ---------- Header ---------- */
/* The FSE template-part wrapper only spans the header's own height, which
   traps the sticky inner header. Stick the wrapper instead. */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 50;
}
.wpexpert-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--wpx-navy);
	color: #ffffff;
	border-bottom: 1px solid var(--wpx-border);
}
.wpexpert-header-inner {
	max-width: var(--wpx-container);
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.75rem 1rem;
}
@media (min-width: 640px) { .wpexpert-header-inner { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .wpexpert-header-inner { padding-inline: 2rem; } }
.wpexpert-logo-svg { height: 40px; width: auto; display: block; }
@media (min-width: 640px) { .wpexpert-logo-svg { height: 58px; } }

/* Desktop nav hidden below md like `hidden md:flex` in Header.tsx */
.wpexpert-nav { display: none; }
@media (min-width: 768px) { .wpexpert-nav { display: flex; } }
.wpexpert-nav-list,
.wpexpert-mobile-list {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 0.25rem;
}
.wpexpert-nav-list a {
	display: block;
	padding: 0.5rem 0.75rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: #d1d5db;
	border-radius: var(--wpx-radius);
	text-decoration: none;
}
.wpexpert-nav-list a:hover {
	background: var(--wpx-navy-700);
	color: #ffffff;
}
.wpexpert-mobile-nav { border-top: 1px solid rgba(255, 255, 255, 0.1); background: var(--wpx-navy); }
.wpexpert-mobile-list { flex-direction: column; gap: 0; padding: 0.5rem 1rem; }
.wpexpert-mobile-list a {
	padding: 0.5rem 0.75rem;
	font-size: 0.875rem;
	color: #d1d5db;
	text-decoration: none;
	border-radius: var(--wpx-radius);
}
.wpexpert-mobile-list a:hover { background: var(--wpx-navy-700); }

.wpexpert-header-actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.wpexpert-currency {
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--wpx-radius);
	padding: 0.35rem 0.65rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: #d1d5db;
}
.wpexpert-cart-link {
	position: relative;
	display: inline-flex;
	padding: 0.35rem 0.55rem;
	border-radius: var(--wpx-radius);
	color: #ffffff;
	background: transparent;
	border: 0;
	cursor: pointer;
}
.wpexpert-cart-link:hover { background: var(--wpx-navy-700); text-decoration: none; }
/* MiniCart dropdown == MiniCart.tsx popover */
.wpexpert-minicart { position: relative; }
.wpexpert-minicart-panel {
	position: absolute;
	right: 0;
	top: calc(100% + 0.5rem);
	z-index: 50;
	width: 20rem; /* w-80 */
	max-width: calc(100vw - 2rem);
	background: #ffffff;
	color: var(--wpx-ink);
	border: 1px solid var(--wpx-border);
	border-radius: var(--wpx-radius-lg);
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); /* shadow-xl */
	padding: 1rem;
	text-align: left;
}
.wpexpert-minicart-empty { margin: 0; font-size: 0.875rem; }
.wpexpert-minicart-items {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 16rem; /* max-h-64 */
	overflow: auto;
	display: grid;
	gap: 0.75rem;
}
.wpexpert-minicart-items li { display: flex; gap: 0.75rem; align-items: center; }
.wpexpert-minicart-thumb img { height: 3rem; width: 3rem; object-fit: contain; border-radius: 0.25rem; display: block; }
.wpexpert-minicart-info { flex: 1; font-size: 0.875rem; min-width: 0; }
.wpexpert-minicart-name { display: block; font-weight: 500; color: var(--wpx-navy); }
.wpexpert-minicart-qty { display: block; color: #6b7280; }
.wpexpert-minicart-total {
	margin-top: 0.75rem;
	border-top: 1px solid #f3f4f6;
	padding-top: 0.75rem;
	font-size: 0.875rem;
}
.wpexpert-minicart-sum {
	display: flex;
	justify-content: space-between;
	font-weight: 600;
	color: var(--wpx-navy);
}
.wpexpert-minicart-view {
	display: block;
	margin-top: 0.75rem;
	background: var(--wpx-navy);
	color: #ffffff;
	text-align: center;
	font-weight: 600;
	padding: 0.5rem 1rem;
	border-radius: var(--wpx-radius);
	text-decoration: none;
}
.wpexpert-minicart-view:hover { background: var(--wpx-navy-700); color: #ffffff; text-decoration: none; }
.wpexpert-cart-count {
	position: absolute;
	top: -2px;
	right: -2px;
	min-width: 1rem;
	height: 1rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--wpx-accent);
	color: var(--wpx-navy);
	font-size: 0.625rem;
	font-weight: 700;
	border-radius: 999px;
	padding-inline: 0.2rem;
}
.wpexpert-login-btn {
	display: none;
	background: var(--wpx-accent);
	color: var(--wpx-navy) !important;
	padding: 0.35rem 0.85rem;
	border-radius: var(--wpx-radius);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
}
@media (min-width: 640px) { .wpexpert-login-btn { display: inline-block; } }
.wpexpert-login-btn:hover { opacity: 0.9; text-decoration: none; }
.wpexpert-menu-toggle {
	background: transparent;
	border: 0;
	color: #ffffff;
	font-size: 1.25rem;
	padding: 0.5rem;
	cursor: pointer;
}
@media (min-width: 768px) { .wpexpert-menu-toggle, .wpexpert-mobile-nav[hidden] { display: none; } }
.wpexpert-mobile-nav:not([hidden]) { display: block; }

/* ---------- Hero ---------- */
.wpexpert-hero {
	background: linear-gradient(135deg, var(--wpx-navy) 0%, var(--wpx-navy-700) 100%);
	color: #ffffff;
	overflow: hidden;
	position: relative;
}
.wpexpert-hero-grid {
	display: grid;
	gap: 3rem;
	padding-block: 5rem;
	align-items: center;
}
@media (min-width: 1024px) {
	.wpexpert-hero-grid { grid-template-columns: minmax(0, 540px) minmax(0, 1fr); }
}
.wpexpert-hero-title {
	font-size: 2.25rem;
	font-weight: 700;
	line-height: 1.2;
	margin: 0;
	color: #ffffff;
}
@media (min-width: 640px) { .wpexpert-hero-title { font-size: 3rem; } }
.wpexpert-text-accent { color: var(--wpx-accent); }
.wpexpert-hero-sub {
	margin-top: 1.25rem;
	max-width: 36rem;
	font-size: 1.125rem;
	color: #e5e7eb;
}
.wpexpert-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 2rem;
}
.wpexpert-hero-art img { width: 100%; height: auto; display: block; }

/* ---------- Section headings ---------- */
.wpexpert-section-heading,
.wpexpert-shop-title {
	text-align: center;
	font-size: 1.875rem;
	font-weight: 700;
	color: var(--wpx-navy);
	margin: 0;
}
.wpexpert-section-heading-left {
	font-size: 1.875rem;
	font-weight: 700;
	color: var(--wpx-navy);
	margin: 0;
}
.wpexpert-shop-title { text-align: left; }
.wpexpert-shop-intro {
	margin-top: 0.5rem;
	max-width: 42rem;
	color: var(--wpx-ink);
}

/* ---------- "What We Provide" / panels ---------- */
.wpexpert-provide { background: var(--wpx-mutedbg); padding-block: 4rem; }
.wpexpert-two-col {
	margin-top: 2.5rem; /* mt-10 */
	display: grid;
	gap: 1.5rem; /* gap-6 */
	grid-template-columns: 1fr;
}
@media (min-width: 768px) { .wpexpert-two-col { grid-template-columns: repeat(2, 1fr); } } /* md:grid-cols-2 */
.wpexpert-panel {
	background: #ffffff;
	padding: 1.75rem;
	border-radius: var(--wpx-radius-xl);
	box-shadow: var(--wpx-shadow-sm);
}
.wpexpert-panel h3 {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--wpx-navy);
	margin: 0 0 0.75rem;
}

/* ---------- Services section ---------- */
.wpexpert-services { padding-block: 4rem; }
.wpexpert-svc-card {
	display: flex;
	flex-direction: column;
	border: 1px solid #e6e8ef;
	background: linear-gradient(to bottom, #fbfdff, #f4f6fb);
	padding: 1.75rem;
	border-radius: 1rem;
	box-shadow: var(--wpx-shadow-lg);
}
.wpexpert-svc-topbar {
	height: 5px;
	width: 46px;
	border-radius: 999px;
	background: linear-gradient(to right, var(--wpx-brand), #38bdf8);
	margin-bottom: 18px;
}
.wpexpert-svc-head {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	margin-bottom: 18px;
}
.wpexpert-svc-icon {
	flex: none;
	width: 54px;
	height: 54px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 14px;
	border: 1px solid #d9e4f7;
	background: linear-gradient(135deg, #e6efff, #f4f8ff);
	font-size: 26px;
	line-height: 1;
}
.wpexpert-svc-title {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--wpx-navy);
	margin: 0;
	line-height: 1.2;
}
.wpexpert-svc-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.5rem;
}
.wpexpert-svc-list li {
	position: relative;
	padding-left: 1.5rem;
	font-size: 0.875rem;
	line-height: 1.65;
	color: #475569;
}
.wpexpert-check {
	position: absolute;
	left: 0;
	top: 0.125rem;
	font-weight: 700;
	color: var(--wpx-brand);
}

/* ---------- Featured strip ---------- */
.wpexpert-featured { background: var(--wpx-mutedbg); padding-block: 4rem; }
.wpexpert-featured-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
}
.wpexpert-link-more {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--wpx-brand);
}

/* ---------- Product grid + card ---------- */
.wpexpert-grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	margin-top: 2rem;
}
@media (min-width: 640px) { .wpexpert-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .wpexpert-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .wpexpert-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.wpexpert-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid var(--wpx-border);
	background: #ffffff;
	padding: 1.25rem;
	border-radius: var(--wpx-radius-xl);
	box-shadow: var(--wpx-shadow-sm);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.wpexpert-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--wpx-shadow-lg);
}
.wpexpert-card-media { display: block; }
.wpexpert-card-media img {
	aspect-ratio: 16 / 9;
	width: 100%;
	object-fit: contain;
	border-radius: 0.5rem;
}
.wpexpert-card-title h3 {
	margin: 1rem 0 0;
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--wpx-navy);
}
.wpexpert-card-title:hover h3 { color: var(--wpx-brand); }
.wpexpert-card-price { margin-top: 0.75rem; }
.wpexpert-price {
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--wpx-navy);
}
.wpexpert-price-free { color: var(--wpx-accent); }
.wpexpert-price-lg { font-size: 1.875rem; }
.wpexpert-card-actions {
	margin-top: 1rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}
.wpexpert-card-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 0.75rem;
	font-size: 0.875rem;
}
.wpexpert-card-desc {
	margin: 1rem 0 0;
	font-size: 0.875rem;
	line-height: 1.7;
	color: var(--wpx-ink);
}
.wpexpert-none {
	background: var(--wpx-mutedbg);
	padding: 1.5rem;
	text-align: center;
	border-radius: 0.5rem;
}

/* ---------- Shop list + wide card ---------- */
.wpexpert-shop { padding-block: 3rem; }
.wpexpert-pills {
	margin-top: 1.5rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}
.wpexpert-pill {
	border-radius: 999px;
	padding: 0.35rem 1rem;
	font-size: 0.875rem;
	font-weight: 500;
	background: var(--wpx-mutedbg);
	color: var(--wpx-ink);
	text-decoration: none;
	transition: background-color 0.15s ease;
}
.wpexpert-pill:hover { background: #d1d5db; text-decoration: none; }
.wpexpert-pill-active {
	background: var(--wpx-navy);
	color: #ffffff;
}
.wpexpert-list {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	margin-top: 2rem;
}
.wpexpert-wide-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--wpx-border);
	border-radius: 1rem;
	background: #ffffff;
	box-shadow: var(--wpx-shadow-sm);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.wpexpert-wide-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--wpx-shadow-lg);
}
.wpexpert-wide-grid {
	display: grid;
	gap: 1.5rem;
	padding: 1.5rem;
	grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
	.wpexpert-wide-grid {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		gap: 2rem;
	}
	.wpexpert-wide-media { grid-column: span 8 / span 8; }
	.wpexpert-wide-features-col { grid-column: span 4 / span 4; }
}
.wpexpert-wide-media {
	background: var(--wpx-mutedbg);
	border-radius: 0.75rem;
	padding: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
}
.wpexpert-wide-media img {
	display: block;
	width: 100%;
	height: auto;
	max-height: none;
}
.wpexpert-wide-features {
	height: 100%;
	background: var(--wpx-mutedbg);
	border: 1px solid #f3f4f6;
	border-radius: 0.75rem;
	padding: 1.25rem;
}
.wpexpert-wide-features-h {
	margin: 0 0 1rem;
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--wpx-navy);
}
.wpexpert-wide-features ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.75rem;
}
.wpexpert-wide-features li {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	font-size: 0.875rem;
	line-height: 1.45;
	color: var(--wpx-ink);
}
.wpexpert-badge-check {
	flex: none;
	width: 20px;
	height: 20px;
	border-radius: 999px;
	background: var(--wpx-brand);
	color: #ffffff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 700;
	margin-top: 2px;
}
.wpexpert-wide-feature-text strong { color: var(--wpx-navy); font-weight: 600; }
.wpexpert-wide-details {
	border-top: 1px solid #f3f4f6;
	padding: 1.5rem;
}
.wpexpert-wide-title {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--wpx-navy);
}
a:hover .wpexpert-wide-title { color: var(--wpx-brand); }
.wpexpert-wide-price { margin-top: 0.5rem; }
.wpexpert-wide-desc {
	margin: 1rem 0 0;
	line-height: 1.7;
	color: var(--wpx-ink);
}

/* ---------- Pagination ---------- */
.wpexpert-pagination {
	margin-top: 2.5rem;
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}
.wpexpert-page {
	padding: 0.35rem 0.75rem;
	border-radius: var(--wpx-radius);
	background: var(--wpx-mutedbg);
	color: var(--wpx-ink);
	font-size: 0.875rem;
	text-decoration: none;
}
.wpexpert-page:hover { background: #d1d5db; text-decoration: none; }
.wpexpert-page-active {
	background: var(--wpx-brand);
	color: #ffffff;
}

/* ---------- Breadcrumbs (WooCommerce block + custom) ---------- */
/* WooCommerce block breadcrumbs render as
   div.wp-block-woocommerce-breadcrumbs > nav.woocommerce-breadcrumb
   with links separated by raw " / " text nodes. font-size:0 on the
   wrapper hides those literal slashes; chevrons are drawn per-link instead. */
.wp-block-woocommerce-breadcrumbs.alignwide {
	margin: 2rem auto 1.5rem;
}
.wp-block-woocommerce-breadcrumbs .woocommerce-breadcrumb {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: #64748b;
	padding: 0.5rem 0.9rem;
	background: #f8fafc;
	border: 1px solid var(--wpx-border);
	border-radius: 0.6rem;
}
.wp-block-woocommerce-breadcrumbs .woocommerce-breadcrumb a {
	display: inline-flex;
	align-items: center;
	color: #64748b;
	font-weight: 500;
	text-decoration: none;
	padding: 0.1rem 0.25rem;
	border-radius: 0.4rem;
	transition: color .15s ease, background .15s ease;
}
.wp-block-woocommerce-breadcrumbs .woocommerce-breadcrumb a:hover {
	color: var(--wpx-brand);
	background: rgba(37, 99, 235, 0.08);
}
.wp-block-woocommerce-breadcrumbs .woocommerce-breadcrumb a::after {
	content: "";
	display: inline-block;
	width: 0.4rem; height: 0.4rem;
	margin: 0 0.6rem;
	border-right: 1.5px solid #cbd5e1;
	border-top: 1.5px solid #cbd5e1;
	transform: translateY(-0.05rem) rotate(45deg);
}
.wp-block-woocommerce-breadcrumbs .woocommerce-breadcrumb > a:first-child { padding-left: 0; }
.wp-block-woocommerce-breadcrumbs .woocommerce-breadcrumb > a:first-child::before {
	content: "";
	width: 1rem; height: 1rem;
	margin-right: 0.35rem;
	background-color: var(--wpx-brand);
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M12%203%202%2012h3v8h6v-5h2v5h6v-8h3z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M12%203%202%2012h3v8h6v-5h2v5h6v-8h3z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Custom (single-product buy box) breadcrumb — matches the WooCommerce block
   treatment so the plugin details page shows a single, consistently styled crumb. */
.wpexpert-breadcrumb {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
	margin-bottom: 1.5rem;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: #64748b;
	padding: 0.5rem 0.9rem;
	background: #f8fafc;
	border: 1px solid var(--wpx-border);
	border-radius: 0.6rem;
}
.wpexpert-breadcrumb a {
	display: inline-flex;
	align-items: center;
	color: #64748b;
	font-weight: 500;
	text-decoration: none;
	padding: 0.1rem 0.25rem;
	border-radius: 0.4rem;
	transition: color .15s ease, background .15s ease;
}
.wpexpert-breadcrumb a:hover { color: var(--wpx-brand); background: rgba(37, 99, 235, 0.08); }
.wpexpert-breadcrumb .crumb-sep {
	display: inline-block;
	font-size: 0;
	color: transparent;
	width: 0.4rem; height: 0.4rem;
	margin: 0 0.6rem;
	border-right: 1.5px solid #cbd5e1;
	border-top: 1.5px solid #cbd5e1;
	transform: translateY(-0.05rem) rotate(45deg);
}
.wpexpert-breadcrumb > a:first-child { padding-left: 0; }
.wpexpert-breadcrumb > a:first-child::before {
	content: "";
	width: 1rem; height: 1rem;
	margin-right: 0.35rem;
	background-color: var(--wpx-brand);
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M12%203%202%2012h3v8h6v-5h2v5h6v-8h3z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M12%203%202%2012h3v8h6v-5h2v5h6v-8h3z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.wpexpert-breadcrumb .crumb-current { color: var(--wpx-ink); font-weight: 600; }

.wpexpert-buy-grid {
	display: grid;
	gap: 2rem;
	grid-template-columns: 1fr;
	align-items: stretch;
}
@media (min-width: 1024px) { .wpexpert-buy-grid { grid-template-columns: minmax(0, 1fr) 320px; } }
.wpexpert-buy-box {
	border: 1px solid var(--wpx-border);
	border-radius: 0.75rem;
	background: #ffffff;
	padding: 1.5rem;
}
.wpexpert-buy-image {
	max-height: 20rem;
	width: auto;
	max-width: 100%;
	display: block;
	margin-inline: auto;
	object-fit: contain;
	border-radius: var(--wpx-radius-lg);
}
.wpexpert-buy-title {
	margin: 1.5rem 0 0;
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--wpx-navy);
}
.wpexpert-buy-price { margin-top: 0.75rem; }
.wpexpert-buy-short {
	margin-top: 1.25rem;
	color: var(--wpx-ink);
}
.wpexpert-buy-description {
	margin-top: 1.25rem;
	line-height: 1.7;
}
.wpexpert-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 0.75rem;
	margin-top: 1.25rem;
}
/* The "View Gallery" button toggles the `hidden` attribute; make sure the
   author `display:grid` rule does not defeat the UA `[hidden]` default. */
.wpexpert-gallery[hidden] { display: none; }
.wpexpert-gallery img {
	border-radius: 0.5rem;
	border: 1px solid var(--wpx-border);
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
}

/* ---------- Lightbox (View Gallery) ---------- */
.wpexpert-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem;
	background: rgba(10, 24, 61, 0.88);
}
.wpexpert-lightbox[hidden] { display: none; }
.wpexpert-lightbox .wpx-lb-img {
	max-width: min(92vw, 1100px);
	max-height: 82vh;
	width: auto;
	height: auto;
	border-radius: 0.75rem;
	background: #ffffff;
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
	object-fit: contain;
}
/* Slide / pop animations so navigation feels less flat. */
@keyframes wpxSlideRight {
	from { opacity: 0; transform: translateX(56px); }
	to   { opacity: 1; transform: translateX(0); }
}
@keyframes wpxSlideLeft {
	from { opacity: 0; transform: translateX(-56px); }
	to   { opacity: 1; transform: translateX(0); }
}
@keyframes wpxPop {
	from { opacity: 0; transform: scale(0.96); }
	to   { opacity: 1; transform: scale(1); }
}
.wpexpert-lightbox .wpx-lb-img.wpx-slide-right { animation: wpxSlideRight 0.34s cubic-bezier(0.22, 1, 0.36, 1); }
.wpexpert-lightbox .wpx-lb-img.wpx-slide-left  { animation: wpxSlideLeft 0.34s cubic-bezier(0.22, 1, 0.36, 1); }
.wpexpert-lightbox .wpx-lb-img.wpx-pop        { animation: wpxPop 0.3s ease; }
@media (prefers-reduced-motion: reduce) {
	.wpexpert-lightbox .wpx-lb-img.wpx-slide-right,
	.wpexpert-lightbox .wpx-lb-img.wpx-slide-left,
	.wpexpert-lightbox .wpx-lb-img.wpx-pop { animation: none; }
}
.wpexpert-lightbox .wpx-lb-close,
.wpexpert-lightbox .wpx-lb-prev,
.wpexpert-lightbox .wpx-lb-next {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	cursor: pointer;
	color: #ffffff;
	background: rgba(255, 255, 255, 0.14);
	border-radius: 999px;
	line-height: 1;
	transition: background-color 0.15s ease;
}
.wpexpert-lightbox .wpx-lb-close:hover,
.wpexpert-lightbox .wpx-lb-prev:hover,
.wpexpert-lightbox .wpx-lb-next:hover { background: var(--wpx-brand); }
.wpexpert-lightbox .wpx-lb-close {
	top: 1.25rem;
	right: 1.25rem;
	width: 2.75rem;
	height: 2.75rem;
	font-size: 1.75rem;
}
.wpexpert-lightbox .wpx-lb-prev,
.wpexpert-lightbox .wpx-lb-next {
	top: 50%;
	transform: translateY(-50%);
	width: 3rem;
	height: 3rem;
	font-size: 2rem;
}
.wpexpert-lightbox .wpx-lb-prev { left: 1.25rem; }
.wpexpert-lightbox .wpx-lb-next { right: 1.25rem; }
.wpexpert-buy-features {
	border: 1px solid #f3f4f6;
	background: var(--wpx-mutedbg);
	border-radius: 0.75rem;
	padding: 1.25rem;
	align-self: stretch;
}
.wpexpert-buy-features h3 {
	margin: 0 0 1rem;
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--wpx-navy);
}
.wpexpert-check-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.6rem;
	font-size: 0.875rem;
}
.wpexpert-check-list li {
	display: flex;
	gap: 0.5rem;
	align-items: flex-start;
}
/* In check-lists the span is a flex child, not absolutely positioned
   (prevents orphaned checks anchoring to the page when no positioned li). */
.wpexpert-check-list .wpexpert-check {
	position: static;
	flex-shrink: 0;
}

/* ---------- Product detail sections ---------- */
.wpexpert-section { margin-top: 2rem; }
.wpexpert-section h2,
.wpexpert-section > h2 {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--wpx-navy);
	margin: 0;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var(--wpx-navy);
}
.wpexpert-section-lead {
	margin: 1.25rem 0 0;
	line-height: 1.7;
	color: var(--wpx-ink);
}
.wpexpert-tiles {
	margin-top: 1.25rem;
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
}
/* Match the Next.js product page: Features / Settings render in a 2-column grid. */
@media (min-width: 640px) {
	.wpexpert-tiles { grid-template-columns: repeat(2, 1fr); }
}
.wpexpert-tile {
	border: 1px solid #f3f4f6;
	background: var(--wpx-mutedbg);
	padding: 1.25rem;
	border-radius: 0.75rem;
}
.wpexpert-tile h3 {
	margin: 0;
	font-weight: 600;
	color: var(--wpx-navy);
}
.wpexpert-tile p {
	margin: 0.25rem 0 0;
	font-size: 0.875rem;
	color: var(--wpx-ink);
}
.wpexpert-tile-icon { font-size: 1.5rem; line-height: 1; margin-right: 0.5rem; }
.wpexpert-steps {
	list-style: none;
	margin: 1.25rem 0 0;
	padding: 0;
	display: grid;
	gap: 1rem;
}
.wpexpert-steps li { display: flex; gap: 1rem; align-items: flex-start; }
.wpexpert-step-num {
	flex: none;
	width: 2rem;
	height: 2rem;
	border-radius: 999px;
	background: var(--wpx-navy);
	color: #ffffff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
}
.wpexpert-steps h3 { margin: 0; font-weight: 600; color: var(--wpx-navy); font-size: 1rem; }
.wpexpert-steps p { margin: 0.25rem 0 0; font-size: 0.875rem; color: var(--wpx-ink); }
.wpexpert-faq { margin: 1.25rem 0 0; display: grid; gap: 1rem; }
.wpexpert-faq-item {
	border: 1px solid #f3f4f6;
	background: #ffffff;
	padding: 1.25rem;
	border-radius: 0.75rem;
}
.wpexpert-faq dt { font-weight: 600; color: var(--wpx-navy); }
.wpexpert-faq dd { margin: 0.5rem 0 0; font-size: 0.875rem; color: var(--wpx-ink); }
.wpexpert-related-title {
	text-align: center !important;
	background: var(--wpx-navy);
	color: #ffffff;
	padding: 0.75rem 1rem;
	border-bottom: 0 !important;
	border-radius: 0.375rem;
}

/* ---------- Doc pages (terms, privacy, policies — matches Next.js doc pages) ---------- */
.wpexpert-doc-wrap {
	max-width: 56rem; /* max-w-4xl */
	margin: 0 auto;
	padding: 3rem 1rem;
}
.wpexpert-doc-hero {
	background: linear-gradient(135deg, var(--wpx-navy), var(--wpx-navy-700));
	color: #ffffff;
	border-radius: 1rem;
	padding: 3rem 2rem;
	text-align: center;
	box-shadow: var(--wpx-shadow-lg);
}
.wpexpert-doc-chip {
	display: inline-block;
	background: var(--wpx-accent);
	color: var(--wpx-navy);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 0.25rem 0.75rem;
	border-radius: 999px;
}
.wpexpert-doc-title {
	margin: 1rem 0 0;
	font-size: 1.875rem;
	font-weight: 700;
	color: #ffffff;
	line-height: 1.25;
}
@media (min-width: 640px) { .wpexpert-doc-title { font-size: 2.25rem; } }
.wpexpert-doc-sub {
	margin: 0.75rem auto 0;
	max-width: 36rem;
	font-size: 0.875rem;
	line-height: 1.65;
	color: #d1d5db;
}
.wpexpert-doc-card {
	margin-top: 2rem;
	border: 1px solid #e6e8ef;
	background: #ffffff;
	padding: 1.5rem;
	border-radius: 1rem;
	box-shadow: var(--wpx-shadow-lg);
}
@media (min-width: 640px) { .wpexpert-doc-card { padding: 2.5rem; } }

/* Doc-page content typography (matches Next.js .doc-body) */
.doc-body { color: #475569; font-size: 0.95rem; line-height: 1.8; }
.doc-body > :first-child { margin-top: 0 !important; }
.doc-body > p:first-child strong {
	display: block;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #94a3b8;
}
.doc-body h2 {
	margin: 2.25rem 0 1rem !important;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid #eef0f4;
	font-size: 1.35rem;
	font-weight: 700;
	color: #0a183d;
	line-height: 1.3;
}
.doc-body h3 {
	margin: 1.6rem 0 0.7rem !important;
	font-size: 1.08rem;
	font-weight: 700;
	color: #0a183d;
}
.doc-body p { margin: 0.85rem 0 !important; color: #475569; }
.doc-body strong { color: #0a183d; }
.doc-body a { color: #2563eb; text-decoration: underline; text-underline-offset: 3px; }
.doc-body ul {
	list-style: none !important;
	margin: 1rem 0 !important;
	padding: 0 !important;
	display: grid;
	gap: 0.6rem;
}
.doc-body ul li {
	position: relative;
	padding-left: 1.6rem;
	margin: 0 !important;
	color: #475569;
	line-height: 1.65;
}
.doc-body ul li p { margin: 0 !important; }
.doc-body ul li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	top: 0.15rem;
	width: 1.15rem;
	height: 1.15rem;
	border-radius: 50%;
	background: #eaf0ff;
	color: #2563eb;
	font-size: 0.7rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}
.doc-body ol {
	margin: 1rem 0 !important;
	padding-left: 1.5rem !important;
	display: grid;
	gap: 0.55rem;
	color: #475569;
}
.doc-body ol li::marker { color: #2563eb; font-weight: 700; }

/* ---------- My Account page (WooCommerce, plain container — no doc-body) ---------- */
.wpexpert-account-wrap {
	max-width: 64rem;
	margin: 0 auto;
	padding: 3rem 1rem;
}

/* Logged-in: nav as a sidebar + content, side by side. Works without :has().
   Logged-out (.u-columns) stays full width and uses WC's col2-set layout. */
/* Account area: always a 2-column grid so nav + content sit side by side,
   without depending on the .logged-in class or :has(). Guest view (.u-columns)
   spans the full width. The white "single card" skin is added for logged-in users. */
.wpexpert-account-wrap .woocommerce {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 0;
}
.wpexpert-account-wrap .woocommerce-MyAccount-navigation {
	grid-column: 1;
	float: none;
	width: auto;
	min-width: 0;
}
.wpexpert-account-wrap .woocommerce-MyAccount-content {
	grid-column: 2;
	float: none;
	width: auto;
	min-width: 0;
	overflow-x: auto;
}
.wpexpert-account-wrap .u-columns { grid-column: 1 / -1; }

/* Logged-in: the whole account area becomes ONE card (nav + content inside). */
.logged-in .wpexpert-account-wrap .woocommerce {
	background: #ffffff;
	border: 1px solid #e6e8ef;
	border-radius: 16px;
	box-shadow: 0 12px 28px rgba(10, 24, 61, 0.08);
	overflow: hidden;
	padding: 0;
}
.logged-in .wpexpert-account-wrap .woocommerce-MyAccount-navigation {
	background: #f8fafc;
	border: none;
	border-right: 1px solid #e6e8ef;
	padding: 1.5rem 1rem;
	border-radius: 0;
	box-shadow: none;
}
.logged-in .wpexpert-account-wrap .woocommerce-MyAccount-content {
	padding: 1.75rem;
	background: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
}

@media (max-width: 767px) {
	.wpexpert-account-wrap .woocommerce { grid-template-columns: 1fr; }
	.wpexpert-account-wrap .woocommerce-MyAccount-navigation { grid-column: 1; }
	.wpexpert-account-wrap .woocommerce-MyAccount-content { grid-column: 1; }
	.logged-in .wpexpert-account-wrap .woocommerce-MyAccount-navigation {
		border-right: none;
		border-bottom: 1px solid #e6e8ef;
	}
}

/* Guest: login + register + lost-password as cards
   (WooCommerce handles the 2-col layout for login/register; lost-password is a
   single full-width form.) */
.wpexpert-account-wrap .u-columns .woocommerce-form-login,
.wpexpert-account-wrap .u-columns .woocommerce-form-register,
.wpexpert-account-wrap .woocommerce-ResetPassword {
	background: #ffffff;
	border: 1px solid #e6e8ef;
	border-radius: 16px;
	padding: 1.75rem;
	overflow: hidden;
	box-shadow: 0 12px 28px rgba(10, 24, 61, 0.08);
}
/* Lost-password form: `.woocommerce` is a 2-col grid (nav + content) on
   account pages, and the form is its only child, so it lands in the narrow
   first column. Span the full width, stack fields in one column, and pull the
   injected band (output via woocommerce_lostpassword_form, after the fields)
   to the very top so it mirrors the login/register card header. */
.wpexpert-account-wrap .woocommerce-ResetPassword {
	display: grid;
	grid-template-columns: 1fr;
	grid-column: 1 / -1;
}
.wpexpert-account-wrap .woocommerce-ResetPassword .wpx-auth-band {
	order: -1;
}
/* WooCommerce's lost-password template uses form-row-first/last (width:48%),
   but we want the fields full-width to match the login/register cards. */
.wpexpert-account-wrap .woocommerce-ResetPassword .form-row-first,
.wpexpert-account-wrap .woocommerce-ResetPassword .form-row-last {
	width: 100%;
}
/* Hide WooCommerce's default <h2> (Login/Register) — replaced by the injected band */
.wpexpert-account-wrap .u-column1 > h2,
.wpexpert-account-wrap .u-column2 > h2 { display: none; }

/* Next.js-style navy gradient header band inside each auth card */
.wpexpert-account-wrap .wpx-auth-band {
	margin: -1.75rem -1.75rem 1.75rem;
	padding: 2rem 1.75rem;
	text-align: center;
	color: #ffffff;
	background: linear-gradient(135deg, #0a183d 0%, #122254 100%);
}
.wpexpert-account-wrap .wpx-auth-avatar {
	width: 56px;
	height: 56px;
	margin: 0 auto 0.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 9999px;
	background: rgba(255, 255, 255, 0.1);
	font-size: 24px;
	line-height: 1;
}
.wpexpert-account-wrap .wpx-auth-title {
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2;
}
.wpexpert-account-wrap .wpx-auth-sub {
	margin: 0.25rem 0 0;
	font-size: 0.875rem;
	color: #d1d5db;
}

/* Inputs + labels tuned to match the Next.js auth card */
.wpexpert-account-wrap .woocommerce-form-login label,
.wpexpert-account-wrap .woocommerce-form-register label,
.wpexpert-account-wrap .woocommerce-ResetPassword label {
	font-size: 0.875rem;
	font-weight: 500;
	color: #212529;
}
.wpexpert-account-wrap .woocommerce-form-login .form-row label,
.wpexpert-account-wrap .woocommerce-form-register .form-row label,
.wpexpert-account-wrap .woocommerce-ResetPassword .form-row label {
	margin-bottom: 0.375rem;
}
.wpexpert-account-wrap .woocommerce-form-login input,
.wpexpert-account-wrap .woocommerce-form-register input,
.wpexpert-account-wrap .woocommerce-ResetPassword input {
	border-radius: 8px;
}
.wpexpert-account-wrap .woocommerce-form-login button,
.wpexpert-account-wrap .woocommerce-form-register button,
.wpexpert-account-wrap .woocommerce-ResetPassword button {
	border-radius: 6px;
	width: 100%;
}

/* "Lost your password?" link rendered as a secondary full-width button so it
   mirrors the Log in CTA without competing with the primary orange action. */
.wpexpert-account-wrap .woocommerce-form-login .woocommerce-LostPassword.lost_password {
	margin: 0.85rem 0 0;
}
.wpexpert-account-wrap .woocommerce-form-login .woocommerce-LostPassword.lost_password a {
	display: block;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	background: #ffffff;
	color: #0a183d;
	border: 1px solid #d6dae3;
	border-radius: 6px;
	padding: 0.7rem 1.5rem;
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none;
	transition: background 0.15s ease, border-color 0.15s ease;
}
.wpexpert-account-wrap .woocommerce-form-login .woocommerce-LostPassword.lost_password a:hover {
	background: #f4f6fb;
	border-color: #0a183d;
}

/* Tighten label -> input spacing on the auth forms */
.wpexpert-account-wrap .woocommerce-form-login .form-row,
.wpexpert-account-wrap .woocommerce-form-register .form-row,
.wpexpert-account-wrap .woocommerce-ResetPassword .form-row {
	margin-bottom: 0.6rem;
}
.wpexpert-account-wrap .woocommerce-form-login .form-row label,
.wpexpert-account-wrap .woocommerce-form-register .form-row label,
.wpexpert-account-wrap .woocommerce-ResetPassword .form-row label {
	margin-bottom: 0.3rem;
}

/* WooCommerce / a filter emits a stray <br /> between each label and input on
   the my-account login/register/lost-password forms, inflating the gap. Hide it. */
.wpexpert-account-wrap .woocommerce-form-login br,
.wpexpert-account-wrap .woocommerce-form-register br,
.wpexpert-account-wrap .woocommerce-ResetPassword br {
	display: none;
}

/* Reserve right padding so the browser's native password-reveal (eye) icon
   sits aligned inside the field instead of overlapping the text. !important
   beats WooCommerce's own input padding. */
.wpexpert-account-wrap .woocommerce-form-login input[type="password"],
.wpexpert-account-wrap .woocommerce-form-register input[type="password"] {
	padding-right: 2.5rem !important;
}

/* Keep the WooCommerce password-visibility (eye) toggle anchored to its input
   and pull it back inside the field instead of overflowing the right border.
   The input is wrapped in .password-input (position:relative via WC). */
.wpexpert-account-wrap .woocommerce-form-login .password-input,
.wpexpert-account-wrap .woocommerce-form-register .password-input {
	position: relative;
}
.woocommerce form .show-password-input,
.woocommerce-page form .show-password-input {
	right: 20px;
	width: 22px;
	height: 22px;
}

/* wphub-stop-spam captcha: image + input on the same row.
   .wpx-captcha-row is added to the captcha <p> by theme.js (ids are stable). */
.wpexpert-account-wrap .wpx-captcha-row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}
.wpexpert-account-wrap .wpx-captcha-row img {
	width: 120px;
	height: 48px;
	flex: 0 0 auto;
	border: 1px solid #d6dae3;
	border-radius: 8px;
	object-fit: contain;
	background: #ffffff;
}
.wpexpert-account-wrap .wpx-captcha-row input {
	flex: 1 1 auto;
	width: auto;
}

/* Navigation card */
.wpexpert-account-wrap .woocommerce-MyAccount-navigation {
	background: #ffffff;
	border: 1px solid #e6e8ef;
	border-radius: 16px;
	padding: 0.75rem;
	box-shadow: 0 12px 28px rgba(10, 24, 61, 0.08);
}
.wpexpert-account-wrap .woocommerce-MyAccount-navigation ul {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
/* WooCommerce emits a stray <br> inside each nav link — neutralise it. */
.wpexpert-account-wrap .woocommerce-MyAccount-navigation a br { display: none; }
.wpexpert-account-wrap .woocommerce-MyAccount-navigation li { margin: 0 !important; }
.wpexpert-account-wrap .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 0.6rem 0.85rem;
	border-radius: 10px;
	color: #475569;
	font-weight: 600;
	font-size: 0.92rem;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}
.wpexpert-account-wrap .woocommerce-MyAccount-navigation li a:hover {
	background: #f4f6fb;
	color: #0a183d;
}
.wpexpert-account-wrap .woocommerce-MyAccount-navigation li.is-active a {
	background: linear-gradient(135deg, #0a183d 0%, #122254 100%);
	color: #ffffff;
}

/* Content card */
.wpexpert-account-wrap .woocommerce-MyAccount-content {
	background: #ffffff;
	border: 1px solid #e6e8ef;
	border-radius: 16px;
	padding: 1.75rem;
	box-shadow: 0 12px 28px rgba(10, 24, 61, 0.08);
}
.wpexpert-account-wrap .woocommerce-MyAccount-content > p:first-child { margin-top: 0; font-size: 1.05rem; }
.wpexpert-account-wrap .woocommerce-MyAccount-content a {
	color: #2563eb;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.wpexpert-account-wrap .woocommerce-MyAccount-content a:hover { color: #0a183d; }
.wpexpert-account-wrap .woocommerce-MyAccount-content h2 {
	margin: 0 0 1rem;
	font-size: 1.35rem;
	font-weight: 700;
	color: #0a183d;
}
.wpexpert-account-wrap .woocommerce-MyAccount-content fieldset {
	margin: 0 0 1.5rem;
	padding: 1rem 1.25rem;
	border: 1px solid #e6e8ef;
	border-radius: 12px;
}
.wpexpert-account-wrap .woocommerce-MyAccount-content legend {
	font-weight: 700;
	color: #0a183d;
	padding: 0 0.5rem;
}
.wpexpert-account-wrap .woocommerce-MyAccount-content mark { background: transparent; color: #0a183d; font-weight: 700; }

/* Forms / inputs */
.wpexpert-account-wrap input[type="text"],
.wpexpert-account-wrap input[type="email"],
.wpexpert-account-wrap input[type="password"],
.wpexpert-account-wrap input[type="tel"],
.wpexpert-account-wrap input[type="url"],
.wpexpert-account-wrap textarea,
.wpexpert-account-wrap select {
	width: 100%;
	border-radius: 10px;
	border: 1px solid #d6dae3;
	background: #ffffff;
	padding: 0.65rem 0.9rem;
	font-size: 0.925rem;
	color: #212529;
	outline: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.wpexpert-account-wrap input:focus,
.wpexpert-account-wrap textarea:focus,
.wpexpert-account-wrap select:focus {
	border-color: #2563eb;
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.wpexpert-account-wrap label {
	font-weight: 600;
	color: #0a183d;
	font-size: 0.9rem;
}
.wpexpert-account-wrap .form-row { margin-bottom: 1rem; }
.wpexpert-account-wrap .form-row label { display: block; margin-bottom: 0.35rem; }

/* Buttons (login, register, save, logout, view order) */
.wpexpert-account-wrap button,
.wpexpert-account-wrap .woocommerce-button,
.wpexpert-account-wrap .button,
.wpexpert-account-wrap .woocommerce-Button {
	display: inline-block;
	background: #ffa200;
	color: #0a183d;
	font-weight: 700;
	font-size: 0.95rem;
	border: none;
	border-radius: 10px;
	padding: 0.75rem 1.5rem;
	cursor: pointer;
	text-decoration: none;
	transition: opacity 0.15s ease, transform 0.15s ease;
}
.wpexpert-account-wrap button:hover,
.wpexpert-account-wrap .woocommerce-button:hover,
.wpexpert-account-wrap .button:hover,
.wpexpert-account-wrap .woocommerce-Button:hover { opacity: 0.9; }
.wpexpert-account-wrap button:active,
.wpexpert-account-wrap .woocommerce-button:active,
.wpexpert-account-wrap .button:active,
.wpexpert-account-wrap .woocommerce-Button:active { transform: scale(0.99); }
.wpexpert-account-wrap .woocommerce-Button--previous,
.wpexpert-account-wrap .woocommerce-Button--next { background: #0a183d; color: #ffffff; }

/* Tables (orders, downloads) */
.wpexpert-account-wrap table.woocommerce-orders-table,
.wpexpert-account-wrap table.shop_table,
.wpexpert-account-wrap table.woocommerce-MyAccount-downloads {
	width: 100%;
	border-collapse: collapse;
	margin-top: 0.5rem;
}
.wpexpert-account-wrap table th,
.wpexpert-account-wrap table td {
	border: 1px solid #e6e8ef;
	padding: 0.65rem 0.85rem;
	text-align: left;
	font-size: 0.9rem;
	vertical-align: middle;
}
.wpexpert-account-wrap table th {
	background: #0a183d;
	color: #ffffff;
	font-weight: 600;
}
.wpexpert-account-wrap table tr:nth-child(even) td { background: #f8fafc; }
.wpexpert-account-wrap .woocommerce-orders-table__cell-order-status { font-weight: 600; color: #0a183d; }
.wpexpert-account-wrap .amount { font-weight: 600; }

/* Downloads endpoint: slightly smaller fonts + button (scoped to this table only) */
.wpexpert-account-wrap .woocommerce-table--order-downloads,
.wpexpert-account-wrap .woocommerce-table--order-downloads th,
.wpexpert-account-wrap .woocommerce-table--order-downloads td {
	font-size: 0.82rem;
}
.wpexpert-account-wrap .woocommerce-MyAccount-content a.woocommerce-MyAccount-downloads-file {
	font-size: 0.72rem;
	padding: 0.3rem 0.8rem;
	text-decoration: none;
}

/* Notices (e.g. "Order updated") */
.wpexpert-account-wrap .woocommerce-message,
.wpexpert-account-wrap .woocommerce-info,
.wpexpert-account-wrap .woocommerce-error {
	border-radius: 10px;
	padding: 0.85rem 1.1rem;
	margin: 0 0 1.25rem;
	font-size: 0.9rem;
}
.wpexpert-account-wrap .woocommerce-message { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
.wpexpert-account-wrap .woocommerce-info { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; }
.wpexpert-account-wrap .woocommerce-error { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }

/* WordPress-rendered content styling (== .prose-content in Next) */
.prose-content { line-height: 1.7; color: var(--wpx-ink); }
.prose-content h1,
.prose-content h2,
.prose-content h3,
.prose-content h4 {
	font-weight: 600;
	color: var(--wpx-navy);
	margin: 1.25rem 0 0.75rem;
	line-height: 1.25;
}
.prose-content h1 { font-size: 1.875rem; }
.prose-content h2 { font-size: 1.5rem; }
.prose-content h3 { font-size: 1.25rem; }
.prose-content p { margin: 0.75rem 0; }
.prose-content ul { list-style: disc; padding-left: 1.5rem; margin: 0.75rem 0; }
.prose-content ol { list-style: decimal; padding-left: 1.5rem; margin: 0.75rem 0; }
.prose-content a { color: var(--wpx-brand); text-decoration: underline; }
.prose-content img {
	max-width: 100%;
	height: auto;
	border-radius: 0.5rem;
	margin: 1rem 0;
}
.prose-content blockquote {
	border-left: 4px solid var(--wpx-brand);
	padding-left: 1rem;
	margin: 1rem 0;
	color: #475569;
	font-style: italic;
}
.prose-content table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.prose-content th,
.prose-content td { border: 1px solid #d4d4d4; padding: 0.5rem 0.75rem; }
.prose-content th { background: var(--wpx-navy); color: #ffffff; }

/* ---------- Services page (matches Next.js /services) ---------- */
.wpexpert-services-page {
	max-width: 72rem; /* max-w-6xl */
	margin: 0 auto;
	padding: 3rem 1rem;
}
.wpexpert-services-title {
	font-size: 1.875rem; /* text-3xl */
	font-weight: 700;
	color: var(--wpx-navy);
	margin: 0;
}
.wpexpert-services-prose {
	margin-top: 1.5rem; /* mt-6 */
}

/* ---------- Contact page (matches Next.js /contact-us) ---------- */
.wpexpert-contact-page {
	max-width: 48rem; /* max-w-3xl */
	margin: 0 auto;
	padding: 3rem 1rem;
}
.wpexpert-contact-hero {
	border-radius: 1rem; /* rounded-2xl */
	background: linear-gradient(135deg, var(--wpx-navy) 0%, var(--wpx-navy-700) 100%);
	color: #ffffff;
	padding: 2.5rem 2rem; /* px-8 py-10 */
	text-align: center;
	box-shadow: 0 12px 28px rgba(10, 24, 61, 0.15);
}
.wpexpert-contact-badge {
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.1);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	margin-bottom: 0.75rem;
}
.wpexpert-contact-title {
	font-size: 1.875rem; /* text-3xl */
	font-weight: 700;
	margin: 0;
	color: #ffffff; /* sits on the navy hero — override the global navy heading color */
}
.wpexpert-contact-sub {
	max-width: 28rem;
	margin: 0.5rem auto 0;
	font-size: 0.875rem;
	line-height: 1.6;
	color: #cbd5e1; /* text-gray-300 */
}
.wpexpert-contact-form { margin-top: 2rem; }

/* Services Overview pattern — ported 1:1 from Next.js globals.css (svc-* classes) */
.prose-content .svc-block { max-width: 100%; text-align: left; }
.prose-content .svc-block.svc-first { margin-top: 10px; }
.prose-content .svc-grid > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.25rem;
}
.prose-content .svc-hero > .wp-block-group__inner-container,
.prose-content .svc-card > .wp-block-group__inner-container,
.prose-content .svc-block > .wp-block-group__inner-container { display: block; }
.prose-content .svc-head.is-layout-flex {
	display: flex;
	align-items: center;
	gap: 0.9rem;
}
.prose-content .svc-block .is-layout-constrained > *,
.prose-content .svc-block .is-layout-constrained > .wp-block-group__inner-container {
	margin-left: 0 !important;
	margin-right: auto !important;
	max-width: none !important;
}
.prose-content .svc-hero {
	background: linear-gradient(135deg, #0a183d 0%, #0d1d46 55%, #122254 100%);
	color: #ffffff;
	border-radius: 18px;
	padding: 2.25rem 2rem;
}
.prose-content .svc-chip {
	display: inline-block;
	background: #ffa200;
	color: #0a183d;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 0.38rem 0.95rem;
	border-radius: 999px;
	margin: 0 0 1rem !important;
}
.prose-content .svc-title {
	font-size: 2rem;
	font-weight: 800;
	color: #ffffff;
	margin: 0 0 0.7rem !important;
	line-height: 1.2;
}
.prose-content .svc-lead {
	font-size: 1.05rem;
	line-height: 1.65;
	color: #dbe4f2;
	margin: 0 0 1.25rem !important;
	max-width: 62ch;
}
.prose-content .svc-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.25rem;
	margin-top: 2.25rem;
}
.prose-content .svc-card {
	display: flex;
	flex-direction: column;
	border: 1px solid #e6e8ef;
	border-radius: 16px;
	background: linear-gradient(180deg, #fbfdff 0%, #f4f6fb 100%);
	padding: 1.75rem;
	box-shadow: 0 12px 28px rgba(10, 24, 61, 0.08);
}
.prose-content .svc-card::before {
	content: "";
	display: block;
	height: 5px;
	width: 46px;
	border-radius: 99px;
	background: linear-gradient(90deg, #2563eb 0%, #38bdf8 100%);
	margin-bottom: 1.35rem;
}
.prose-content .svc-head {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	margin: 0 0 1.15rem !important;
}
.prose-content .svc-head > * { margin: 0; }
.prose-content .svc-ic {
	flex: 0 0 auto;
	width: 54px;
	height: 54px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	line-height: 1;
	background: linear-gradient(135deg, #e6efff 0%, #f4f8ff 100%);
	border: 1px solid #d9e4f7;
	border-radius: 14px;
}
.prose-content .svc-h {
	flex: 1 1 auto;
	font-size: 1.08rem;
	font-weight: 700;
	color: #0a183d;
	margin: 0 !important;
	line-height: 1.3;
}
.prose-content .svc-list {
	list-style: none;
	margin: 0 !important;
	padding: 0 !important;
	display: grid;
	gap: 0.55rem;
}
.prose-content .svc-list li {
	position: relative;
	padding-left: 1.5rem;
	color: #475569;
	font-size: 0.95rem;
	line-height: 1.5;
	margin: 0;
}
.prose-content .svc-list li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	top: 0.05em;
	color: #2563eb;
	font-weight: 700;
}

/* Contact Form 7 — ported 1:1 from Next.js globals.css */
.wpexpert-contact-form .wpcf7 { max-width: 100%; }
.wpexpert-contact-form .wpcf7-form {
	display: block;
	background: linear-gradient(180deg, #fbfdff 0%, #f4f6fb 100%);
	border: 1px solid #e6e8ef;
	border-radius: 16px;
	padding: 1.75rem;
	box-shadow: 0 12px 28px rgba(10, 24, 61, 0.08);
}
.wpexpert-contact-form .wpcf7-form::before {
	content: "";
	display: block;
	height: 5px;
	width: 46px;
	border-radius: 99px;
	background: linear-gradient(90deg, #2563eb 0%, #38bdf8 100%);
	margin-bottom: 1.35rem;
}
.wpexpert-contact-form .wpcf7-form .row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}
.wpexpert-contact-form .wpcf7-form .row > p { margin: 0 !important; }
.wpexpert-contact-form .wpcf7-form br { display: none; }
@media (min-width: 768px) {
	.wpexpert-contact-form .wpcf7-form .row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.wpexpert-contact-form .wpcf7-form .col-md-12,
	.wpexpert-contact-form .wpcf7-form .contact-frm-btn {
		grid-column: 1 / -1;
	}
}
.wpexpert-contact-form .wpcf7-form input[type="text"],
.wpexpert-contact-form .wpcf7-form input[type="email"],
.wpexpert-contact-form .wpcf7-form input[type="tel"],
.wpexpert-contact-form .wpcf7-form input[type="url"],
.wpexpert-contact-form .wpcf7-form textarea {
	width: 100%;
	border-radius: 10px;
	border: 1px solid #d6dae3;
	background: #ffffff;
	padding: 0.65rem 0.9rem;
	font-size: 0.925rem;
	color: #212529;
	outline: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.wpexpert-contact-form .wpcf7-form input::placeholder,
.wpexpert-contact-form .wpcf7-form textarea::placeholder { color: #9aa3b2; }
.wpexpert-contact-form .wpcf7-form input:focus,
.wpexpert-contact-form .wpcf7-form textarea:focus {
	border-color: #2563eb;
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.wpexpert-contact-form .wpcf7-form textarea { min-height: 150px; resize: vertical; }
.wpexpert-contact-form .wpcf7-form .wpcf7-not-valid { border-color: #f87171 !important; }
.wpexpert-contact-form .wpcf7-form .security-img img {
	border-radius: 8px;
	border: 1px solid #d6dae3;
}
.wpexpert-contact-form .wpcf7-form .wpcf7-submit {
	width: 100%;
	background: #ffa200;
	color: #0a183d;
	font-weight: 700;
	font-size: 1rem;
	border: none;
	border-radius: 10px;
	padding: 0.85rem 1.5rem;
	cursor: pointer;
	transition: opacity 0.15s ease, transform 0.15s ease;
}
.wpexpert-contact-form .wpcf7-form .wpcf7-submit:hover { opacity: 0.9; }
.wpexpert-contact-form .wpcf7-form .wpcf7-submit:active { transform: scale(0.99); }
.wpexpert-contact-form .wpcf7-form .wpcf7-response-output {
	margin: 1rem 0 0 !important;
	border-radius: 10px;
	border: 1px solid #e6e8ef;
	background: #ffffff;
	padding: 0.75rem 1rem;
	font-size: 0.9rem;
	color: #475569;
}
.wpexpert-contact-form .wpcf7-form.sent .wpcf7-response-output {
	border-color: #bbf7d0;
	background: #f0fdf4;
	color: #166534;
}
.wpexpert-contact-form .wpcf7-form.failed .wpcf7-response-output,
.wpexpert-contact-form .wpcf7-form.aborted .wpcf7-response-output {
	border-color: #fecaca;
	background: #fef2f2;
	color: #b91c1c;
}
.wpexpert-contact-form .wpcf7-form .wpcf7-form-control-wrap { display: block; }
.wpexpert-contact-form .wpcf7-form [data-name="your-message"] { margin-top: 1rem; }
.wpexpert-contact-form .wpcf7-form .wpcf7-response-output:empty { display: none; }

/* ---------- Blog cards ---------- */
.wpexpert-post-card {
	border: 1px solid var(--wpx-border);
	background: #ffffff;
	padding: 1.25rem;
	border-radius: 0.75rem;
	box-shadow: var(--wpx-shadow-sm);
	margin-block: 1.5rem !important;
}
.wpexpert-post-card h2 a { color: var(--wpx-navy); }
.wpexpert-post-card h2 a:hover { color: var(--wpx-brand); }
.wpexpert-post-card time { color: #6b7280; font-size: 0.875rem; }

/* ---------- Footer ---------- */
.wpexpert-footer {
	margin-top: 4rem;
	background: var(--wpx-navy);
	color: #d1d5db;
}
.wpexpert-footer-grid {
	max-width: var(--wpx-container);
	margin-inline: auto;
	display: grid;
	gap: 2rem;
	padding: 3rem 1rem;
	grid-template-columns: 1fr;
}
@media (min-width: 768px) { .wpexpert-footer-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .wpexpert-footer-grid { padding-inline: 2rem; } }
.wpexpert-footer-col h3 {
	font-size: 1.125rem;
	font-weight: 600;
	color: #ffffff;
	margin: 0 0 0.75rem;
}
.wpexpert-footer-col p { margin: 0; font-size: 0.875rem; line-height: 1.65; }
.wpexpert-footer-col ul {
	list-style: none;
	margin: 0.75rem 0 0;
	padding: 0;
	display: grid;
	gap: 0.5rem;
	font-size: 0.875rem;
}
.wpexpert-footer-col a { color: inherit; }
.wpexpert-footer-col a:hover { color: var(--wpx-accent); }
.wpexpert-footer-bar {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	text-align: center;
	padding-block: 1rem;
	font-size: 0.75rem;
	color: #9ca3af;
}

/* ---------- WooCommerce forms & tables ---------- */
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-left-color: var(--wpx-brand);
	border-radius: var(--wpx-radius);
	background: #f9fafb;
	padding: 0.75rem 1rem;
	list-style: none;
}
.woocommerce-error { border-left-color: #dc2626; }

form.checkout h3,
.woocommerce-billing-fields h3 {
	padding: 10px 0;
	text-transform: capitalize;
}
.woocommerce form .form-row label {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--wpx-ink);
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	border: 1px solid #d4d4d4;
	border-radius: var(--wpx-radius);
	padding: 0.5rem;
	width: 100%;
	background: #ffffff;
	color: #43454b;
}
table.shop_table thead tr th {
	font-weight: 700;
	padding: 9px 12px;
	line-height: 1.5em;
	background: var(--wpx-navy);
	color: #ffffff;
}
table.shop_table tbody tr td a { color: var(--wpx-navy); }
.woocommerce .quantity input.qty {
	border: 1px solid #d4d4d4;
	border-radius: var(--wpx-radius);
	padding: 0.35rem;
	text-align: center;
}

/* Buttons inside WooCommerce flows match the theme buttons */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	background: var(--wpx-navy);
	color: #ffffff;
	border: none;
	border-radius: var(--wpx-radius);
	font-weight: 600;
	font-family: 'Montserrat', sans-serif;
	padding: 0.625rem 1.25rem;
	cursor: pointer;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background: var(--wpx-navy-700);
	color: #ffffff;
}
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	background: var(--wpx-accent);
	color: var(--wpx-navy);
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
	background: var(--wpx-accent);
	opacity: 0.9;
	color: var(--wpx-navy);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { transition: none !important; animation: none !important; }
}
@media (min-width: 768px) { .wpexpert-mobile-nav:not([hidden]) { display: none; } }


/* ---------- WooCommerce Cart (FSE blocks) ---------- */

/* Page container -- cart is a wide, functional page, so widen past the doc-page
   cap to the site container (80rem) and reset the top padding for a tighter,
   app-like feel. */
.wpexpert-cart-page.wpexpert-doc-wrap {
	max-width: var(--wpx-container);
	padding-top: 2.5rem;
}

/* Page header */
.wpexpert-cart-head {
	position: relative;
	border-bottom: 1px solid var(--wpx-border);
	padding: 0.5rem 0 1.75rem;
	margin-bottom: 2rem;
}
.wpexpert-cart-head::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 4.5rem;
	height: 0.35rem;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--wpx-brand) 0%, var(--wpx-accent) 100%);
	box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.12);
}
.wpexpert-cart-kicker { display: flex; align-items: center; }
.wpexpert-cart-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.75rem;
	padding: 0.3rem 0.7rem 0.3rem 0.4rem;
	border: 1px solid rgba(37, 99, 235, 0.18);
	border-radius: 999px;
	background: rgba(37, 99, 235, 0.06);
	color: var(--wpx-brand);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
.wpexpert-cart-eyebrow-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	background: var(--wpx-brand);
	color: #fff;
	font-size: 0.62rem;
	line-height: 1;
}
.wpexpert-cart-page h1.wp-block-heading {
	margin: 0;
	font-size: 2.5rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: var(--wpx-navy);
}
.wpexpert-cart-sub {
	margin: 0.75rem 0 0;
	color: #5a6b94;
	font-size: 1rem;
	line-height: 1.6;
	max-width: 36rem;
}
.wpexpert-cart-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.25rem;
	margin-top: 1.35rem;
}
.wpexpert-cart-continue {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.6rem 1.15rem;
	border: 1px solid var(--wpx-border);
	border-radius: 999px;
	background: #ffffff;
	color: var(--wpx-navy);
	font-size: 0.85rem;
	font-weight: 700;
	text-decoration: none;
	box-shadow: var(--wpx-shadow-sm);
	transition: border-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.wpexpert-cart-continue:hover {
	border-color: var(--wpx-brand);
	color: var(--wpx-brand);
	transform: translateY(-1px);
	box-shadow: var(--wpx-shadow);
	text-decoration: none;
}
.wpexpert-cart-note {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: #8a93ad;
	font-size: 0.78rem;
	font-weight: 600;
}
.wpexpert-cart-note i {
	font-style: normal;
	font-size: 0.42rem;
	line-height: 1;
	color: #22c55e;
}

/* Hide the empty-cart "New in store" product grid -- it's noise on the cart
   page. Keep the friendly message + Browse store CTA. */
.wp-block-woocommerce-empty-cart-block .wp-block-woocommerce-product-new,
.wp-block-woocommerce-empty-cart-block hr,
.wp-block-woocommerce-empty-cart-block h2.wp-block-heading:last-of-type { display: none; }

.wp-block-woocommerce-cart {
	padding: 0 0 2rem;
}

/* Two-column layout: items / totals side-by-side on desktop.
   NOTE: WooCommerce's JS hydrates the cart and swaps the SSR wrapper
   `.wp-block-woocommerce-filled-cart-block` for a `.wc-block-components-sidebar-layout`
   flex row whose children default to `width:65%` (main) / `width:35%` (sidebar) —
   which makes both columns feel cramped. We override it back to a grid with a
   comfortable, fixed sidebar so the two columns use the layout below regardless of
   which markup (SSR skeleton vs hydrated) is on screen. */
.wp-block-woocommerce-filled-cart-block,
.wp-block-woocommerce-cart.is-loading .wp-block-woocommerce-filled-cart-block,
.wc-block-components-sidebar-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.75rem;
	align-items: start;
	margin: 0 auto;
}
@media (min-width: 1024px) {
	.wp-block-woocommerce-filled-cart-block,
	.wp-block-woocommerce-cart.is-loading .wp-block-woocommerce-filled-cart-block,
	.wc-block-components-sidebar-layout {
		grid-template-columns: minmax(0, 1fr) 380px;
	}
}

/* Neutralise the WooCommerce percentage widths on both render paths and let the
   grid columns decide the width. */
.wp-block-woocommerce-cart-items-block,
.wp-block-woocommerce-cart.is-loading .wp-block-woocommerce-cart-items-block,
.wc-block-components-sidebar-layout .wc-block-components-main {
	box-sizing: border-box;
	width: auto;
	min-width: 0;
	margin: 0;
	padding-right: 0;
}
.wp-block-woocommerce-cart-totals-block,
.wp-block-woocommerce-cart.is-loading .wp-block-woocommerce-cart-totals-block,
.wc-block-components-sidebar-layout .wc-block-components-sidebar {
	box-sizing: border-box;
	width: auto;
	min-width: 0;
	margin: 0;
	padding-left: 0;
}

/* --- Cart items table --- */
table.wc-block-cart-items {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0 0.9rem;
}

/* Table header (Product / Price / Qty / Total) */
.wc-block-cart-items__header {
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #8a93ad;
	font-weight: 700;
}
.wc-block-cart-items__header th {
	padding: 0 1rem 0.6rem;
	text-align: left;
	border-bottom: 2px solid var(--wpx-border);
}
.wc-block-cart-items__header .wc-block-cart-items__header-total { text-align: right; }
.wc-block-cart-items__header .wc-block-cart-items__header-image { width: 84px; }

/* Line-item rows -- card style */
.wc-block-cart-items__row {
	background: #ffffff;
	border: 1px solid var(--wpx-border);
	border-radius: var(--wpx-radius-lg);
	padding: 1rem;
	box-shadow: var(--wpx-shadow-sm);
	transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
.wc-block-cart-items__row:hover {
	border-color: #c9d4ef;
	box-shadow: var(--wpx-shadow);
}
.wc-block-cart-items__row td { padding: 0 1rem; vertical-align: middle; }

/* Item image */
.wc-block-cart-item__image { width: 84px; }
.wc-block-cart-item__image img {
	border-radius: var(--wpx-radius);
	width: 76px;
	height: 76px;
	object-fit: contain;
	background: #f8fafc;
	border: 1px solid #eef1f7;
	padding: 0.35rem;
}

/* Product details */
.wc-block-cart-item__wrap { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.wc-block-cart-item__product { display: flex; flex-direction: column; gap: 0.45rem; }
.wc-block-cart-item__product-name,
.wc-block-cart-item__product .wc-block-components-product-name {
	font-size: 1rem;
	font-weight: 700;
	color: var(--wpx-navy);
	line-height: 1.35;
}
.wc-block-cart-item__product .wc-block-components-product-name a {
	color: var(--wpx-navy);
	text-decoration: none;
}
.wc-block-cart-item__product .wc-block-components-product-name a:hover {
	color: var(--wpx-brand);
	text-decoration: none;
}
.wc-block-cart-item__prices {
	font-size: 0.85rem;
	font-weight: 600;
	color: #6474a0;
}
.wc-block-cart-item__prices .price,
.wc-block-cart-item__prices .woocommerce-Price-amount { color: var(--wpx-brand); }

/* Quantity stepper -- pill control */
.wc-block-cart-item__quantity .wc-block-cart-input {
	display: inline-flex;
	align-items: center;
	gap: 0.1rem;
	border: 1px solid #d6dae3;
	border-radius: 999px;
	padding: 0.2rem 0.4rem;
	background: #f8fafc;
}
.wc-block-cart-item__quantity .wc-block-cart-input input {
	width: 42px;
	text-align: center;
	border: none;
	outline: none;
	background: transparent;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--wpx-navy);
}
.wc-block-cart-item__quantity .wc-block-cart-input button {
	border: none;
	background: transparent;
	cursor: pointer;
	font-size: 1.1rem;
	line-height: 1;
	color: var(--wpx-navy);
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.wc-block-cart-item__quantity .wc-block-cart-input button:hover {
	background: var(--wpx-navy);
	color: #fff;
}

/* Remove / save-for-later */
.wc-block-cart-item__remove-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	color: #9aa4bd;
	font-size: 1.15rem;
	cursor: pointer;
	transition: all 0.15s ease;
	border: none;
	background: transparent;
}
.wc-block-cart-item__remove-link:hover {
	color: #dc2626;
	background: #fef2f2;
	transform: scale(1.08);
}

/* Subtotal column */
.wc-block-cart-item__total { text-align: right; }
.wc-block-cart-item__total-price-and-sale-badge-wrapper,
.wc-block-cart-item__total .price,
.wc-block-cart-item__total .woocommerce-Price-amount {
	font-weight: 800;
	font-size: 1.05rem;
	color: var(--wpx-navy);
}

/* --- Order summary (right column) --- */
.wp-block-woocommerce-cart-totals-block { min-width: 0; }
@media (min-width: 1024px) {
	.wp-block-woocommerce-cart-totals-block { position: sticky; top: 6rem; }
}
.wp-block-woocommerce-cart-order-summary-block {
	background: #ffffff;
	border: 1px solid var(--wpx-border);
	border-radius: var(--wpx-radius-xl);
	padding: 1.5rem;
	box-shadow: var(--wpx-shadow);
}

/* Summary heading — the classes sit ON the <h2> itself (not an ancestor), so we
   target the element directly with a small icon accent + divider. */
.wp-block-woocommerce-cart-order-summary-heading-block.wc-block-cart__totals-title,
.wp-block-woocommerce-cart-order-summary-block .wc-block-components-title,
.wp-block-woocommerce-cart-order-summary-block h2 {
	font-size: 1.3rem !important;
	font-weight: 800 !important;
	letter-spacing: -0.01em;
	color: var(--wpx-navy) !important;
	margin: 0 0 1rem !important;
	padding: 0 0 0.85rem !important;
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	gap: 0.55rem !important;
}
.wp-block-woocommerce-cart-order-summary-heading-block.wc-block-cart__totals-title::before {
	content: "";
	width: 0.5rem;
	height: 1.15rem;
	border-radius: 3px;
	background: linear-gradient(180deg, var(--wpx-brand) 0%, var(--wpx-accent) 100%);
	box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.18);
	flex: 0 0 auto;
}
.wp-block-woocommerce-cart-order-summary-heading-block.wc-block-cart__totals-title::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: linear-gradient(90deg, var(--wpx-brand) 0%, rgba(37, 99, 235, 0.12) 70%, transparent 100%);
}

/* ---------- WooCommerce block notice banners (store-notices) ----------
   Rendered as .wc-block-components-notice-banner with is-success / is-error /
   is-info. Restyled to match the theme palette with an icon chip + card. */
.wc-block-components-notice-banner {
	display: flex !important;
	align-items: flex-start !important;
	gap: 0.7rem !important;
	margin: 0 0 1.1rem !important;
	padding: 0.9rem 1.05rem !important;
	border-radius: var(--wpx-radius-lg) !important;
	border: 1px solid !important;
	box-shadow: var(--wpx-shadow-sm);
	font-size: 0.9rem !important;
	line-height: 1.55 !important;
}
.wc-block-components-notice-banner > svg {
	width: 1.4rem !important;
	height: 1.4rem !important;
	flex: 0 0 auto !important;
	margin-top: 0.05rem;
}
.wc-block-components-notice-banner__content {
	flex: 1 1 auto;
	min-width: 0;
}
.wc-block-components-notice-banner.is-success {
	background: #f0fdf4 !important;
	border-color: #bbe6c7 !important;
	color: #166534 !important;
}
.wc-block-components-notice-banner.is-success > svg { fill: #16a34a !important; }
.wc-block-components-notice-banner.is-success a {
	color: #15803d !important;
	font-weight: 700;
}
.wc-block-components-notice-banner.is-error {
	background: #fef2f2 !important;
	border-color: #f8c6c6 !important;
	color: #b91c1c !important;
}
.wc-block-components-notice-banner.is-error > svg { fill: #dc2626 !important; }
.wc-block-components-notice-banner.is-error a {
	color: #b91c1c !important;
	font-weight: 700;
}
.wc-block-components-notice-banner.is-info {
	background: #eff6ff !important;
	border-color: #c4d8fb !important;
	color: #1e40af !important;
}
.wc-block-components-notice-banner.is-info > svg { fill: var(--wpx-brand) !important; }
.wc-block-components-notice-banner.is-info a {
	color: var(--wpx-navy) !important;
	font-weight: 700;
}
.wc-block-components-notice-banner.is-dismissible .wc-block-components-notice-banner__dismiss {
	align-self: center;
	margin-left: auto;
	color: inherit !important;
	background: transparent;
	border: none;
	cursor: pointer;
}
.wc-block-components-notice-banner.is-dismissible .wc-block-components-notice-banner__dismiss svg {
	fill: currentColor;
}

/* Coupon form — card treatment.
   WooCommerce hydrates the cart and injects its own (emotion) stylesheet AFTER this
   theme's CSS, and it's enqueued with higher specificity or later load order. So every
   coupon selector below is scoped under the order-summary block to raise specificity,
   and vital props use !important to beat the injected defaults. */
.wp-block-woocommerce-cart-order-summary-coupon-form-block.wc-block-components-totals-wrapper {
	margin: 1rem 0 1.25rem;
	border-top: 2px solid var(--wpx-border);
	padding-top: 1.1rem;
}

/* --- Collapsed "Add coupons" toggle --- */
.wp-block-woocommerce-cart-order-summary-coupon-form-block .wc-block-components-totals-coupon.wc-block-components-panel {
	margin: 0 !important;
}
.wp-block-woocommerce-cart-order-summary-coupon-form-block .wc-block-components-panel__button {
	display: flex !important;
	align-items: center !important;
	gap: 0.5rem !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0.7rem 0.9rem !important;
	background: #f5f8fc !important;
	border: 1px solid #dbe4f2 !important;
	border-radius: var(--wpx-radius-lg) !important;
	color: var(--wpx-navy) !important;
	font-family: inherit !important;
	font-size: 0.85rem !important;
	font-weight: 700 !important;
	cursor: pointer !important;
	box-shadow: var(--wpx-shadow-sm);
	transition: border-color 0.18s ease, background-color 0.18s ease;
}
.wp-block-woocommerce-cart-order-summary-coupon-form-block .wc-block-components-panel__button:hover {
	border-color: var(--wpx-brand) !important;
	background: #eef4ff !important;
}
.wp-block-woocommerce-cart-order-summary-coupon-form-block .wc-block-components-panel__button-icon {
	width: 15px !important;
	height: 15px !important;
	margin-left: auto !important;
	transition: transform 0.2s ease;
}
.wp-block-woocommerce-cart-order-summary-coupon-form-block .wc-block-components-panel__button[aria-expanded="true"] .wc-block-components-panel__button-icon {
	transform: rotate(180deg);
}

/* Revealed coupon body */
.wp-block-woocommerce-cart-order-summary-coupon-form-block .wc-block-components-panel__content {
	padding: 0.5rem 0 0 !important;
}
.wp-block-woocommerce-cart-order-summary-coupon-form-block .wc-block-components-totals-coupon__content {
	background: #f5f8fc !important;
	border: 1px solid #e6edf7 !important;
	border-radius: var(--wpx-radius-lg) !important;
	padding: 0.75rem !important;
}
.wp-block-woocommerce-cart-order-summary-coupon-form-block .wc-block-components-totals-coupon__form {
	display: flex !important;
	align-items: stretch !important;
	gap: 0.5rem !important;
	flex-wrap: nowrap !important;
}

/* Coupon input — WooCommerce wraps a raw <input> in a .wc-block-components-text-input
   div with a floating <label>. Style the wrapper as the bordered box and the inner
   <input> as a clean field; hide the floating label (a real placeholder is added by JS). */
.wp-block-woocommerce-cart-order-summary-coupon-form-block .wc-block-components-text-input.wc-block-components-totals-coupon__input {
	flex: 1 1 auto !important;
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	min-width: 0 !important;
	min-height: 46px !important;
	margin: 0 !important;
	padding: 0 !important;
	background: #ffffff !important;
	border: 1px solid #c6cde1 !important;
	border-radius: var(--wpx-radius) !important;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.wp-block-woocommerce-cart-order-summary-coupon-form-block .wc-block-components-text-input.wc-block-components-totals-coupon__input:focus-within,
.wp-block-woocommerce-cart-order-summary-coupon-form-block .wc-block-components-text-input.wc-block-components-totals-coupon__input.is-active {
	border-color: var(--wpx-brand) !important;
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14) !important;
}
.wp-block-woocommerce-cart-order-summary-coupon-form-block .wc-block-components-text-input.wc-block-components-totals-coupon__input input {
	width: 100% !important;
	height: 100% !important;
	min-height: 44px !important;
	flex: 1 1 auto !important;
	margin: 0 !important;
	padding: 0 0.9rem !important;
	background: transparent !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	font-family: inherit !important;
	font-size: 0.9rem !important;
	font-weight: 500 !important;
	color: var(--wpx-ink) !important;
}
.wp-block-woocommerce-cart-order-summary-coupon-form-block .wc-block-components-text-input.wc-block-components-totals-coupon__input label {
	display: none !important;
}
.wp-block-woocommerce-cart-order-summary-coupon-form-block .wc-block-components-text-input.wc-block-components-totals-coupon__input ::placeholder {
	color: #9aa4bd !important;
}
.wp-block-woocommerce-cart-order-summary-coupon-form-block .wc-block-components-text-input.wc-block-components-totals-coupon__input input:focus {
	outline: none !important;
}
.wp-block-woocommerce-cart-order-summary-coupon-form-block .wc-block-components-totals-coupon__form .wc-block-components-totals-coupon__input:focus {
	outline: none !important;
}
.wp-block-woocommerce-cart-order-summary-coupon-form-block .wc-block-components-totals-coupon__form .wc-block-components-totals-coupon__button {
	flex: 0 0 auto !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin: 0 !important;
	border: none !important;
	border-radius: var(--wpx-radius) !important;
	min-height: 46px !important;
	padding: 0.6rem 1.25rem !important;
	background:
		linear-gradient(135deg, var(--wpx-navy) 0%, #1d3c8f 100%) !important;
	color: #fff !important;
	font-family: inherit !important;
	font-size: 0.875rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.02em;
	line-height: 1.25 !important;
	white-space: nowrap !important;
	height: auto !important;
	cursor: pointer !important;
	box-shadow: var(--wpx-shadow-sm);
	text-decoration: none;
	transition: box-shadow 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}
.wp-block-woocommerce-cart-order-summary-coupon-form-block .wc-block-components-totals-coupon__button:hover:not(:disabled) {
	background:
		linear-gradient(135deg, var(--wpx-navy-700) 0%, var(--wpx-brand) 100%) !important;
	box-shadow: var(--wpx-shadow);
	transform: translateY(-1px);
}
.wp-block-woocommerce-cart-order-summary-coupon-form-block .wc-block-components-totals-coupon__button--loading,
.wp-block-woocommerce-cart-order-summary-coupon-form-block .wc-block-components-totals-coupon__button:disabled {
	opacity: 0.55 !important;
	cursor: not-allowed !important;
	transform: none !important;
	box-shadow: none !important;
}

/* Applied coupon chips */
.wp-block-woocommerce-cart-order-summary-block .wc-block-components-totals-discount__coupon-list {
	list-style: none !important;
	margin: 0.35rem 0 0 !important;
	padding: 0 !important;
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 0.35rem !important;
}
.wp-block-woocommerce-cart-order-summary-block .wc-block-components-chip {
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.3rem !important;
	max-width: 100% !important;
	padding: 0.22rem 0.35rem 0.22rem 0.55rem !important;
	border: 1px solid rgba(37, 99, 235, 0.18) !important;
	border-radius: 999px !important;
	background: rgba(37, 99, 235, 0.1) !important;
	color: var(--wpx-navy) !important;
	font-size: 0.75rem !important;
	font-weight: 700 !important;
}
.wp-block-woocommerce-cart-order-summary-block .wc-block-components-chip__text {
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}
.wp-block-woocommerce-cart-order-summary-block .wc-block-components-chip__remove {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 1.15rem !important;
	height: 1.15rem !important;
	border: none !important;
	border-radius: 50% !important;
	background: rgba(37, 99, 235, 0.12) !important;
	color: var(--wpx-navy) !important;
	cursor: pointer !important;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.wp-block-woocommerce-cart-order-summary-block .wc-block-components-chip__remove:hover {
	background: #dc2626 !important;
	color: #fff !important;
}
/* Coupon discount row */
.wp-block-woocommerce-cart-order-summary-block .wc-block-components-totals-discount .wc-block-components-totals-item__value {
	color: #16a34a !important;
}

/* Totals rows */
.wc-block-components-totals-wrapper { margin: 0.25rem 0; }
.wc-block-components-totals-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 0.55rem 0;
	border-bottom: 1px dashed #e6e9f0;
	font-size: 0.875rem;
}
.wc-block-components-totals-item:last-child { border-bottom: none; }
.wc-block-components-totals-item__label,
.wc-block-components-totals-item__description { color: #6474a0; font-weight: 500; }
.wc-block-components-totals-item__value { font-weight: 700; color: var(--wpx-navy); }

/* Shipping fieldset */
.wc-block-components-totals-shipping { margin: 0.5rem 0; }
.wc-block-components-totals-shipping__fieldset {
	border: 1px solid var(--wpx-border);
	border-radius: var(--wpx-radius);
	padding: 0.75rem;
	margin-top: 0.5rem;
	background: #f8fafc;
}
.wc-block-components-totals-shipping__via { font-size: 0.8rem; color: #6b7280; }

/* Grand total */
.wp-block-woocommerce-cart-order-summary-totals-block { margin-top: 0.5rem; }
.wc-block-components-totals-footer-item {
	border-top: 2px solid var(--wpx-border);
	border-bottom: none;
	padding-top: 1rem;
	margin-top: 0.75rem;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	font-size: 1.05rem;
	font-weight: 800;
	color: var(--wpx-navy);
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-size: 1.25rem;
	font-weight: 800;
	color: var(--wpx-brand);
}

/* Proceed to checkout */
.wc-block-cart__submit-container { margin-top: 1.25rem; }
.wc-block-cart__submit { display: block; width: 100%; }
.wc-block-cart__submit-button {
	width: 100%;
	padding: 0.95rem 1.5rem;
	background: linear-gradient(135deg, var(--wpx-navy) 0%, #1d3c8f 100%);
	color: #fff;
	border: none;
	border-radius: var(--wpx-radius-lg);
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: 0.01em;
	cursor: pointer;
	text-align: center;
	box-shadow: var(--wpx-shadow);
	transition: box-shadow 0.18s ease, transform 0.18s ease, opacity 0.15s ease;
}
.wc-block-cart__submit-button:hover {
	background: linear-gradient(135deg, var(--wpx-navy-700) 0%, var(--wpx-brand) 100%);
	box-shadow: var(--wpx-shadow-lg);
	transform: translateY(-1px);
}
.wc-block-cart__submit-button--loading { opacity: 0.7; cursor: default; transform: none; }

/* Express payment */
.wp-block-woocommerce-cart-express-payment-block { margin-top: 1rem; }

/* --- Empty cart --- */
.wp-block-woocommerce-empty-cart-block {
	text-align: center;
	padding: 3rem 1.5rem;
	background: #ffffff;
	border: 1px solid var(--wpx-border);
	border-radius: var(--wpx-radius-xl);
	box-shadow: var(--wpx-shadow);
}
.wc-block-cart__empty-cart__title {
	font-size: 1.4rem;
	font-weight: 800;
	color: var(--wpx-navy);
	margin-bottom: 0.5rem;
}
.wp-block-woocommerce-empty-cart-block .wp-block-paragraph {
	font-size: 0.95rem;
	color: #6474a0;
	margin: 0 0 0.25rem;
}
.wp-block-woocommerce-empty-cart-block .wp-block-paragraph a {
	display: inline-block;
	margin-top: 0.75rem;
	background: var(--wpx-navy);
	color: #fff;
	font-weight: 700;
	padding: 0.75rem 1.75rem;
	border-radius: var(--wpx-radius-lg);
	box-shadow: var(--wpx-shadow);
	transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.wp-block-woocommerce-empty-cart-block .wp-block-paragraph a:hover {
	background: var(--wpx-navy-700);
	text-decoration: none;
	transform: translateY(-1px);
	box-shadow: var(--wpx-shadow-lg);
}

/* Accepted payment icons */
.wp-block-woocommerce-cart-accepted-payment-methods-block {
	margin-top: 1.25rem;
	padding-top: 1rem;
	border-top: 1px dashed #e6e9f0;
	text-align: center;
}
.wp-block-woocommerce-cart-accepted-payment-methods-block img {
	height: 24px;
	opacity: 0.6;
	margin: 0 0.1rem;
}

/* Loading skeleton fallback */
.wp-block-woocommerce-cart.is-loading { min-height: 220px; }

/* Mobile */
@media (max-width: 1023px) {
	.wc-block-cart-items__row { padding: 0.75rem; }
	.wc-block-cart-item__wrap { gap: 0.25rem; }
	.wp-block-woocommerce-cart-order-summary-block { padding: 1.25rem; }
}

@media (max-width: 767px) {
	.wpexpert-cart-head { padding-bottom: 1.25rem; margin-bottom: 1.25rem; }
	.wc-block-cart-items__row td { padding: 0 0.6rem; }
	.wc-block-cart-item__image img { width: 60px; height: 60px; }
	.wc-block-components-totals-coupon__form { flex-direction: column; }
	.wc-block-components-totals-coupon__form .wc-block-components-totals-coupon__button { width: 100%; }
	.wp-block-woocommerce-empty-cart-block { padding: 2.25rem 1.25rem; }
}

/* ==========================================================================
   WooCommerce Checkout (FSE block)
   ==========================================================================
   The cart CSS above already turns every `.wc-block-components-sidebar-layout`
   into a grid, so the checkout's hydrated two-column wrapper inherits that.
   On checkout the WooCommerce markup renders the ORDER-SUMMARY SIDEBAR FIRST in
   the DOM (before the `.wc-block-components-main` fields column), unlike the
   cart. We place the main fields on the left and the summary sidebar on the
   right with explicit grid areas so the visual order is stable on both the SSR
   skeleton and the hydrated tree. */

/* Page container -- checkout is a wide, functional page, so widen past the
   doc-page cap to the site container (80rem), same as the cart. */
.wpexpert-checkout-page.wpexpert-doc-wrap {
	max-width: var(--wpx-container);
	padding-top: 2.5rem;
}

/* --- Page header (mirrors the cart header) --- */
.wpexpert-checkout-head {
	position: relative;
	border-bottom: 1px solid var(--wpx-border);
	padding: 0.5rem 0 1.75rem;
	margin-bottom: 2rem;
}
.wpexpert-checkout-head::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 4.5rem;
	height: 0.35rem;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--wpx-brand) 0%, var(--wpx-accent) 100%);
	box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.12);
}
.wpexpert-checkout-kicker { display: flex; align-items: center; }
.wpexpert-checkout-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.75rem;
	padding: 0.3rem 0.7rem 0.3rem 0.4rem;
	border: 1px solid rgba(37, 99, 235, 0.18);
	border-radius: 999px;
	background: rgba(37, 99, 235, 0.06);
	color: var(--wpx-brand);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
.wpexpert-checkout-eyebrow-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	background: var(--wpx-brand);
	color: #fff;
	font-size: 0.62rem;
	line-height: 1;
}
.wpexpert-checkout-page h1.wp-block-heading {
	margin: 0;
	font-size: 2.5rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: var(--wpx-navy);
}
.wpexpert-checkout-sub {
	margin: 0.75rem 0 0;
	color: #5a6b94;
	font-size: 1rem;
	line-height: 1.6;
	max-width: 36rem;
}
.wpexpert-checkout-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.25rem;
	margin-top: 1.35rem;
}
.wpexpert-checkout-cart {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.6rem 1.15rem;
	border: 1px solid var(--wpx-border);
	border-radius: 999px;
	background: #ffffff;
	color: var(--wpx-navy);
	font-size: 0.85rem;
	font-weight: 700;
	text-decoration: none;
	box-shadow: var(--wpx-shadow-sm);
	transition: border-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.wpexpert-checkout-cart:hover {
	border-color: var(--wpx-brand);
	color: var(--wpx-brand);
	transform: translateY(-1px);
	box-shadow: var(--wpx-shadow);
	text-decoration: none;
}
.wpexpert-checkout-note {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: #8a93ad;
	font-size: 0.78rem;
	font-weight: 600;
}
.wpexpert-checkout-note i {
	font-style: normal;
	font-size: 0.42rem;
	line-height: 1;
	color: #22c55e;
}


/* --- Two-column layout (main fields / order-summary sidebar) --- */
.wp-block-woocommerce-checkout .wc-block-components-sidebar-layout,
.wc-block-components-sidebar-layout.wc-block-checkout {
	grid-template-columns: minmax(0, 1fr) 400px;
	grid-template-areas: "main sidebar";
	align-items: start;
	gap: 2rem;
}
.wp-block-woocommerce-checkout .wc-block-components-main,
.wc-block-checkout .wc-block-components-main,
.wc-block-components-sidebar-layout.wc-block-checkout .wc-block-components-main {
	grid-area: main;
	min-width: 0;
}
.wp-block-woocommerce-checkout .wc-block-components-sidebar,
.wc-block-checkout .wc-block-components-sidebar,
.wc-block-components-sidebar-layout.wc-block-checkout .wc-block-components-sidebar {
	grid-area: sidebar;
	min-width: 0;
}
/* Neutralise WooCommerce percentage widths and keep both columns fluid inside
   the grid (inherited from the cart section, restated for the checkout tree). */
.wp-block-woocommerce-checkout .wc-block-components-main,
.wp-block-woocommerce-checkout .wc-block-components-sidebar,
.wc-block-components-sidebar-layout.wc-block-checkout .wc-block-components-main,
.wc-block-components-sidebar-layout.wc-block-checkout .wc-block-components-sidebar {
	box-sizing: border-box;
	width: auto;
	margin: 0;
}
@media (min-width: 1200px) {
	.wc-block-components-sidebar-layout.wc-block-checkout .wc-block-components-sidebar {
		position: sticky;
		top: 6rem;
		align-self: start;
	}
}

/* --- Checkout steps (Contact / Billing / Shipping / Payment) --- */
/* WooCommerce renders these as <fieldset> and its own stylesheet resets them
   with higher specificity, so scope under the block wrapper. */
.wp-block-woocommerce-checkout .wc-block-components-checkout-step,
.wc-block-checkout .wc-block-components-checkout-step {
	margin: 0 0 1.5rem;
	padding: 1.5rem;
	background: #ffffff;
	border: 1px solid var(--wpx-border);
	border-radius: var(--wpx-radius-xl);
	box-shadow: var(--wpx-shadow-sm);
}
.wp-block-woocommerce-checkout .wc-block-components-checkout-step__heading-container,
.wc-block-checkout .wc-block-components-checkout-step__heading-container {
	margin-bottom: 1.1rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid #eef1f7;
}
.wp-block-woocommerce-checkout .wc-block-components-checkout-step__heading,
.wc-block-checkout .wc-block-components-checkout-step__heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}
.wp-block-woocommerce-checkout .wc-block-components-checkout-step__title,
.wc-block-checkout .wc-block-components-checkout-step__title {
	margin: 0;
	font-size: 1.15rem;
	font-weight: 800;
	color: var(--wpx-navy);
	letter-spacing: -0.01em;
}
.wp-block-woocommerce-checkout .wc-block-components-checkout-step__heading-content,
.wc-block-checkout .wc-block-components-checkout-step__heading-content {
	font-size: 0.8rem;
	color: #6474a0;
	font-weight: 600;
}
.wc-block-checkout__login-prompt {
	display: inline-flex;
	align-items: center;
	padding: 0.35rem 0.85rem;
	border: 1px solid rgba(37, 99, 235, 0.2);
	border-radius: 999px;
	background: rgba(37, 99, 235, 0.06);
	color: var(--wpx-brand);
	font-weight: 700;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.wc-block-checkout__login-prompt:hover {
	background: var(--wpx-brand);
	color: #fff;
	border-color: var(--wpx-brand);
	text-decoration: none;
}
.wc-block-checkout__guest-checkout-notice,
.wc-block-checkout__guest-checkout-notice p {
	font-size: 0.8rem;
	color: #6474a0;
}


/* --- Address / contact form fields --- */
.wc-block-components-address-form {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}
.wc-block-components-address-form__address_1,
.wc-block-components-address-form__address_2,
.wc-block-components-address-form__state,
.wc-block-components-address-form__city,
.wc-block-components-address-form__postcode {
	grid-column: 1 / -1;
}
@media (min-width: 640px) {
	.wc-block-components-address-form__first_name,
	.wc-block-components-address-form__last_name {
		grid-column: span 1;
	}
}

/* Text inputs -- wrapper holds the raw <input> + a floating <label>.
   WooCommerce renders them 50px tall (`height:50px; padding:16px 12px`) and
   switches to `padding:24px 9px 8px` when filled/focused (`.is-active`,
   autofill) to make room for its shrunken floating label. That asymmetric
   padding pushed the typed text toward the bottom of the field ("aligned in
   the lower end"). The theme hides those floating labels, so that reserve is
   dead space: symmetric padding makes the content box equal the 25px
   line-height and centres the text vertically. `!important` is required --
   WooCommerce's own rules are more specific
   (`.wc-block-components-form .wc-block-components-text-input input[type=…]`). */
.wc-block-checkout__form .wc-block-components-text-input input,
.wp-block-woocommerce-checkout-fields-block .wc-block-components-text-input input {
	width: 100%;
	box-sizing: border-box;
	height: 50px;
	padding: 11.5px 14px !important;
	border: 1px solid #d6dae3;
	border-radius: var(--wpx-radius);
	background: #ffffff;
	color: var(--wpx-navy);
	font-size: 0.9rem;
	line-height: 25px;
	outline: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.wc-block-checkout__form .wc-block-components-text-input input::placeholder {
	color: #9aa4bd;
}
.wc-block-checkout__form .wc-block-components-text-input input:focus {
	border-color: var(--wpx-brand);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16);
}
.wc-block-checkout__form .wc-block-components-text-input input:disabled {
	background: #f3f4f6;
	cursor: not-allowed;
}
/* WooCommerce floats the label on the focused/with-value input; hide that
   floater and rely on the visible placeholder + aria-label. */
.wc-block-checkout__form .wc-block-components-text-input label,
.wp-block-woocommerce-checkout-fields-block .wc-block-components-text-input label {
	display: none !important;
}

/* Select (country / state via wc-blocks-components-select). */
/* Neutralise WooCommerce's floating containers so we own the field. */
.wc-block-checkout__form .wc-blocks-components-select,
.wp-block-woocommerce-checkout-fields-block .wc-blocks-components-select {
	margin: 0;
	width: 100%;
}
.wc-block-checkout__form .wc-blocks-components-select__container,
.wp-block-woocommerce-checkout-fields-block .wc-blocks-components-select__container {
	position: relative;
	width: 100%;
	box-sizing: border-box;
	background: none;
	border-radius: 0;
}
/* WooCommerce floats the label absolutely on top of the field (its
   floating-label pattern). We switch to a normal stacked label above the
   field -- consistent with the theme's text-input treatment -- so the
   label text no longer scrubs against the field's own value text. */
.wc-block-checkout__form .wc-blocks-components-select__label,
.wp-block-woocommerce-checkout-fields-block .wc-blocks-components-select__label {
	position: static;
	display: block;
	margin: 0 0 0.35rem;
	font-size: 0.8rem;
	font-weight: 600;
	color: #6474a0;
}
/* Billing/Shipping "State (optional)" label: hidden visually -- the select's
   own placeholder ("Select a state (optional)") carries the meaning -- but
   kept in the accessibility tree (sr-only), because the <select> has no
   aria-label and would otherwise lose its accessible name for screen readers.
   The state field then lines up with the City input it sits beside. */
.wc-block-checkout__form .wc-block-components-address-form__state .wc-blocks-components-select__label,
.wp-block-woocommerce-checkout-fields-block .wc-block-components-address-form__state .wc-blocks-components-select__label {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}
/* With the label gone, the state field must keep the same vertical rhythm as
   the City input beside it: WooCommerce gives the address-form text inputs a
   12px top margin, which (via the flex line) was stretching the state wrapper
   and leaving the select floating 12px above the City input. */
.wc-block-checkout__form .wc-block-components-address-form__state,
.wp-block-woocommerce-checkout-fields-block .wc-block-components-address-form__state {
	margin-top: 12px;
}
/* The field itself -- matches the text inputs' rendered 50px height
   (border/radius/focus identical). */
.wc-block-checkout__form .wc-blocks-components-select__select,
.wp-block-woocommerce-checkout-fields-block .wc-blocks-components-select__select {
	width: 100%;
	height: 50px;
	box-sizing: border-box;
	padding: 0 2.6rem 0 0.9rem;
	border: 1px solid #d6dae3;
	border-radius: var(--wpx-radius);
	background: #ffffff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236474a0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.9rem center / 12px 12px;
	-webkit-appearance: none;
	appearance: none;
	color: var(--wpx-navy);
	font-family: inherit;
	font-size: 0.9rem;
	line-height: 1.3;
	cursor: pointer;
	outline: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.wc-block-checkout__form .wc-blocks-components-select__select:focus,
.wp-block-woocommerce-checkout-fields-block .wc-blocks-components-select__select:focus {
	border-color: var(--wpx-brand);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16);
}
.wc-block-checkout__form .wc-blocks-components-select__select:disabled,
.wp-block-woocommerce-checkout-fields-block .wc-blocks-components-select__select:disabled {
	background-color: #f3f4f6;
	cursor: not-allowed;
}
/* Hide WooCommerce's own expand icon so only our chevron shows (no double
   arrow overlapping on the right edge). */
.wc-block-checkout__form .wc-blocks-components-select__expand,
.wp-block-woocommerce-checkout-fields-block .wc-blocks-components-select__expand {
	display: none;
}
/* While a select is unset (no value chosen) it shows its placeholder option;
   theme.js toggles .wpx-select-empty so that text reads as muted placeholder
   text instead of a navy value. In the open list the disabled placeholder
   option is muted too. */
.wc-block-checkout__form .wc-blocks-components-select__select.wpx-select-empty,
.wp-block-woocommerce-checkout-fields-block .wc-blocks-components-select__select.wpx-select-empty {
	color: #9aa4bd;
}
.wc-block-checkout__form .wc-blocks-components-select__select option:disabled,
.wp-block-woocommerce-checkout-fields-block .wc-blocks-components-select__select option:disabled {
	color: #9aa4bd;
}

/* Order note textarea */
.wc-block-checkout__add-note textarea,
.wc-block-checkout__order-notes textarea,
.wc-block-checkout__form .wc-block-components-textarea {
	width: 100%;
	box-sizing: border-box;
	min-height: 84px;
	padding: 0.85rem 0.9rem;
	border: 1px solid #d6dae3;
	border-radius: var(--wpx-radius);
	background: #ffffff;
	color: var(--wpx-navy);
	font-size: 0.9rem;
	line-height: 1.5;
	font-family: inherit;
	resize: vertical;
	outline: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.wc-block-checkout__add-note textarea:focus,
.wc-block-checkout__form .wc-block-components-textarea:focus {
	border-color: var(--wpx-brand);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16);
}

/* Checkbox (order note toggle, terms) -- brand tick. */
.wc-block-components-checkbox label {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	cursor: pointer;
	position: relative;
}
.wc-block-components-checkbox .wc-block-components-checkbox__input {
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--wpx-brand);
	cursor: pointer;
}
.wc-block-components-checkbox .wc-block-components-checkbox__label {
	font-size: 0.875rem;
	color: #475569;
	line-height: 1.45;
}
.wc-block-components-checkbox .wc-block-components-checkbox__label a {
	color: var(--wpx-brand);
	text-decoration: underline;
	text-underline-offset: 2px;
}


/* --- Express payment --- */
.wc-block-components-express-payment__title-container {
	margin-bottom: 0.5rem;
}
.wc-block-components-express-payment__title {
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #8a93ad;
}
.wc-block-components-express-payment__content {
	background: #f8fafc;
	border: 1px dashed #dbe1ec;
	border-radius: var(--wpx-radius-lg);
	padding: 1rem;
}
.wc-block-components-express-payment__event-buttons {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: grid !important;
	gap: 0.75rem !important;
}
.wc-block-components-express-payment-continue-rule {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 1rem 0;
	color: #8a93ad;
	font-size: 0.78rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.wc-block-components-express-payment-continue-rule::before,
.wc-block-components-express-payment-continue-rule::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--wpx-border);
}

/* Express Checkout (PayPal / Apple-Pay family) is a USD-only feature — INR visitors
   are offered Stripe only, so hide the express section + its "or" divider for them
   (cart + checkout). The continue-rule sits outside the express wrapper, so target it
   explicitly too. */
body.wpx-currency-inr .wc-block-components-express-payment,
body.wpx-currency-inr .wc-block-components-express-payment-continue-rule,
body.wpx-currency-inr .wc-block-components-express-payment-continue-rule--checkout,
body.wpx-currency-inr .wp-block-woocommerce-checkout-express-payment-block,
body.wpx-currency-inr .wp-block-woocommerce-cart-express-payment-block { display: none !important; }

/* --- Payment methods --- */
.wc-block-components-radio-control {
	display: grid;
	gap: 0.6rem;
}

/* Each gateway renders as a <label> card. WooCommerce's own CSS positions the
   radio absolutely (`position:relative; padding-left:48px` on the option +
   `position:absolute; left:0; top:16px` on the input) to reserve a gutter for
   it. The original card styles switched the option to `display:flex` but
   dropped that gutter while the radio stayed absolute -- so the dot landed on
   the label text. We keep the card, restore the radio as a normal flex item,
   and nullify its absolute positioning so the dot sits beside the text. */
.wc-block-components-radio-control__option {
	position: relative;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 0.85rem;
	width: 100%;
	padding: 0.95rem 1.1rem;
	border: 1px solid var(--wpx-border);
	border-radius: var(--wpx-radius-lg);
	background: #ffffff;
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.wc-block-components-radio-control__option:hover {
	border-color: #c9d4ef;
}
.wc-block-components-radio-control__option-checked {
	border-color: var(--wpx-brand);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.10);
	background: #f5f8ff;
}
.wc-block-components-radio-control__option input[type="radio"],
.wc-block-components-radio-control__accordion-option input[type="radio"] {
	position: static;
	left: auto;
	top: auto;
	transform: none;
	appearance: auto;
	accent-color: var(--wpx-brand);
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 0;
	cursor: pointer;
}
/* WooCommerce renders a custom radio via `appearance:none` + a `:checked:before`
   dot (absolutely centered on the nearest positioned ancestor). We switch to
   the native branded radio, so neutralise that pseudo-element -- otherwise a
   stray black dot floats in the middle of the label text. `!important` is
   required: WooCommerce's own rule
   `.radio-control .recadio-control__input:checked:before` is highly specific. */
.wc-block-components-radio-control .wc-block-components-radio-control__option input[type="radio"]::before,
.wc-block-components-radio-control .wc-block-components-radio-control__accordion-option input[type="radio"]::before,
.wc-block-components-radio-control .wc-block-components-radio-control__option input[type="radio"]::after,
.wc-block-components-radio-control .wc-block-components-radio-control__accordion-option input[type="radio"]::after {
	display: none !important;
}
.wc-block-components-radio-control__option input[type="radio"]:focus-visible {
	outline: 2px solid var(--wpx-brand);
	outline-offset: 3px;
}
.wc-block-components-radio-control__label-group,
.wc-block-components-radio-control__option-layout {
	flex: 1;
	min-width: 0;
}
.wc-block-components-radio-control__label,
.wc-block-components-radio-control__option-layout .wc-block-components-radio-control__label {
	font-weight: 700;
	color: var(--wpx-navy);
	font-size: 0.95rem;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}
.wc-block-components-radio-control__description {
	font-size: 0.8rem;
	color: #6b7280;
	margin-top: 0.15rem;
}

/* --- Accordion payment options (the real, hydrated markup) --- */
/* On the live checkout each gateway renders as an OUTER
   `.wc-block-components-radio-control-accordion-option` that wraps the inner
   `label.__option` (radio + title) plus an appended `.accordion-content`
   description. WooCommerce groups them as one list: it draws borders via
   pseudo `:after` dividers and paints a dark inset ring
   (`box-shadow: inset 0 0 0 1.5px currentColor`) on the checked
   `--checked-option-highlighted` option. That inset ring stacks on top of the
   card's border and looks like a doubled border, so we neutralise it and
   instead build one clean card per gateway (outer option = the card border +
   radius; inner label just hosts the radio + title row). */
.wc-block-components-radio-control-accordion-option {
	box-sizing: border-box;
	margin: 0;
	border: 1px solid var(--wpx-border);
	border-radius: var(--wpx-radius-lg);
	background: #ffffff;
	width: 100%;
	overflow: hidden;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.wc-block-components-radio-control-accordion-option:last-child {
	margin-bottom: 0;
}
/* WooCommerce's pseudo dividers/inset ring below the card; we manage our own. */
.wc-block-components-radio-control .wc-block-components-radio-control-accordion-option::after,
.wc-block-components-radio-control .wc-block-components-radio-control-accordion-option--checked-option-highlighted::after {
	display: none !important;
}
/* Neutralise WooCommerce's dark `inset 0 0 0 1.5px currentColor` ring (that
   "double border" on the checked option) and apply our brand ring instead. */
.wc-block-components-radio-control .wc-block-components-radio-control-accordion-option--checked-option-highlighted {
	border-color: var(--wpx-brand);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.10) !important;
	border-radius: var(--wpx-radius-lg);
}
/* Let the inner label be a transparent header row (its border lives on the
   outer card). */
.wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option {
	position: relative;
	border: 0;
	border-radius: 0;
	background: transparent;
}
.wc-block-components-radio-control-accordion-option--checked-option-highlighted
	.wc-block-components-radio-control__option {
	border: 0;
	box-shadow: none;
	background: transparent;
}
.wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__label img {
	height: 22px;
	max-height: 22px;
	max-width: 100%;
	object-fit: contain;
	object-position: left;
}

/* Checkout side: the description that WooCommerce appends under the selected
   payment method (`...__content` / `.wc-block-components-radio-control-accordion-content`).
   Align it left, keep it inside the card's horizontal padding, and separate it
   from the title row with a soft divider. */
.wc-block-components-radio-control-accordion-content {
	padding: 0.4rem 1.1rem 1.05rem;
	border-top: 1px solid #eef1f7;
	font-size: 0.825rem;
	line-height: 1.55;
	color: #5b6b94;
}
.wc-block-components-radio-control-accordion-content > div {
	text-align: left;
}
.wc-block-components-radio-control-accordion-content p {
	margin: 0.3rem 0;
	text-align: left;
}
.wc-block-components-radio-control-accordion-content p:first-child {
	margin-top: 0;
}
.wc-block-components-radio-control-accordion-content p.ppcp-place-order-description {
	text-align: left !important;
	font-size: 0.78rem;
	color: #8a93ad;
}

.wc-block-components-payment-method-icons img {
	height: 22px;
	max-height: 22px;
	width: auto;
}

/* --- Terms --- */
.wc-block-checkout__terms {
	font-size: 0.85rem;
	color: #475569;
	padding: 1rem 0;
}
.wc-block-checkout__terms--with-separator {
	border-top: 1px solid var(--wpx-border);
	margin-top: 0.25rem;
}
.wc-block-checkout__terms a {
	color: var(--wpx-brand);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* --- Place order / actions --- */
.wc-block-checkout__actions {
	margin-top: 0.5rem;
}
.wc-block-checkout__actions_row--justify-flex-end {
	display: flex;
	justify-content: flex-end;
}
.wc-block-components-checkout-place-order-button {
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 1rem 1.5rem;
	background: linear-gradient(135deg, var(--wpx-navy) 0%, #1d3c8f 100%);
	color: #fff;
	border: none;
	border-radius: var(--wpx-radius-lg);
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: 0.01em;
	cursor: pointer;
	text-align: center;
	box-shadow: var(--wpx-shadow);
	transition: box-shadow 0.18s ease, transform 0.18s ease, opacity 0.15s ease, background 0.18s ease;
}
.wc-block-components-checkout-place-order-button:hover {
	background: linear-gradient(135deg, var(--wpx-navy-700) 0%, var(--wpx-brand) 100%);
	box-shadow: var(--wpx-shadow-lg);
	transform: translateY(-1px);
	color: #fff;
}
.wc-block-components-checkout-place-order-button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}


/* --- Order summary (sidebar) card --- */
.wc-block-components-sidebar.wc-block-checkout__sidebar {
	background: #ffffff;
	border: 1px solid var(--wpx-border);
	border-radius: var(--wpx-radius-xl);
	padding: 1.75rem;
	box-shadow: var(--wpx-shadow);
}
.wp-block-woocommerce-checkout-order-summary-block {
	margin: 0;
}
/* Summary title row (collapsible). */
.wc-block-components-checkout-order-summary__title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.25rem;
	/* Horizontal padding matches the 6px inset of the summary content below,
	   so the header lines up with the product rows; the divider still spans
	   the full card content width. */
	padding: 0 6px 0.9rem;
	border-bottom: 1px solid #eef1f7;
	cursor: pointer;
}
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title-text {
	flex: 1;
	display: flex;
	align-items: center;
	/* WooCommerce adds `margin: 0 0 8px 16px`, which shoved the title text
	   off-centre inside the flex row and out of line with the items. */
	margin: 0 !important;
	font-size: 1.02rem !important;
	font-weight: 800 !important;
	letter-spacing: -0.01em;
	color: var(--wpx-navy);
	text-transform: none;
}
/* Receipt chip ahead of the title -- gives the header a clear focal point. */
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title-text::before {
	content: "";
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	margin-right: 0.65rem;
	border-radius: 9px;
	background-color: rgba(37, 99, 235, 0.09);
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1-2 1-2-1z'/%3E%3Cpath d='M8 7h8'/%3E%3Cpath d='M8 11h8'/%3E%3Cpath d='M8 15h5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 16px 16px;
}
.wc-block-components-checkout-order-summary__title-price {
	font-size: 0.95rem;
	font-weight: 800;
	color: var(--wpx-brand);
	padding: 0.28rem 0.75rem;
	border-radius: 999px;
	background: rgba(37, 99, 235, 0.08);
	white-space: nowrap;
}
.wc-block-components-checkout-order-summary__title-icon {
	display: inline-flex;
	align-items: center;
	color: #8a93ad;
	transition: transform 0.2s ease;
}
.wc-block-components-checkout-order-summary__title-icon svg {
	width: 16px;
	height: 16px;
}
.wc-block-components-checkout-order-summary__title.is-open .wc-block-components-checkout-order-summary__title-icon {
	transform: rotate(180deg);
}
/* Summary items */
.wc-block-components-checkout-order-summary__content .wc-block-components-order-summary {
	margin: 0.35rem 0 0;
}
/* Inset every block inside the card (items, coupon, totals) so nothing runs
   flush against the card's border. */
.wc-block-components-checkout-order-summary__content {
	padding: 0 6px;
}
.wc-block-components-order-summary {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: grid !important;
	gap: 0.1rem !important;
}
.wc-block-components-order-summary-item {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.75rem 0;
	border-bottom: 1px dashed #e6e9f0;
}
.wc-block-components-order-summary-item:last-child { border-bottom: none; }
.wc-block-components-order-summary-item__image {
	flex: 0 0 54px;
	width: 54px;
	height: 54px;
	overflow: hidden;
	border-radius: var(--wpx-radius);
	background: #f8fafc;
	border: 1px solid #eef1f7;
	display: flex;
	align-items: center;
	justify-content: center;
}
.wc-block-components-order-summary-item__image img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	display: block;
}
.wc-block-components-order-summary-item__description {
	flex: 1;
	min-width: 0;
	line-height: 1.35;
	/* WooCommerce indents this column 24px (room for its quantity badge
	   overlay) which crammed the product text in the 400px card -- the badge
	   lives inside the image tile here, so drop the indent. `!important`
	   matches WC's own `.order-summary .order-summary-item__description`
	   (0,2,0) rule that sets `padding: 4px 12px 12px 24px`. */
	padding: 0 !important;
}
/* Only the product name (and price) in the checkout summary -- the long
   product description wrapped into several lines and crowded the card. */
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-product-metadata {
	display: none !important;
}
/* Quantity badge: WooCommerce straddles it across the image's top-right
   corner (`right:0; top:0; transform:translate(50%,-50%)`), and the image
   tile's `overflow:hidden` clipped the outer half -- rendering as "half a
   dot". Seat it fully inside the corner as a navy pill with a white ring so
   it reads as a proper quantity badge. */
.wc-block-components-order-summary .wc-block-components-order-summary-item__quantity {
	top: 3px !important;
	right: 3px !important;
	left: auto !important;
	transform: none !important;
	min-width: 18px;
	min-height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--wpx-navy) !important;
	box-shadow: 0 0 0 2px #ffffff;
	font-size: 0.68rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.02em;
}
.wc-block-components-order-summary .wc-block-components-order-summary-item__quantity span {
	color: #ffffff !important;
	padding: 0 !important;
}
.wc-block-components-order-summary-item__total-price {
	font-weight: 800;
	font-size: 0.95rem;
	color: var(--wpx-navy);
	white-space: nowrap;
}
.wc-block-components-order-summary-item__individual-prices {
	display: flex;
	gap: 0.4rem;
	align-items: baseline;
	flex-wrap: wrap;
}
.wc-block-components-order-summary-item__individual-price {
	font-size: 0.78rem;
	color: #6474a0;
	font-weight: 600;
}
/* Checkout order summary totals reuse the cart totals styles
   (`.wc-block-components-totals-item` etc. defined above). */
/* WooCommerce paints a 1px separator on every `.totals-wrapper`; above the
   Total that stacked with the footer row's own 2px divider (two borders).
   The card structure + the footer divider carry the separation now. */
.wc-block-components-checkout-order-summary__content .wc-block-components-totals-wrapper {
	border-top: 0 !important;
}
/* Align the Subtotal / Total rows with the product rows above (WooCommerce
   pads them 16px horizontally, which left them floating out of line). */
.wc-block-components-checkout-order-summary__content .wc-block-components-totals-item {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Coupon inside the checkout order summary (mirrors the cart coupon block). */
/* WooCommerce pads the coupon panel 16px horizontally, which offset the pill
   from the items/totals above it once the content is inset -- align it. */
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-coupon.wc-block-components-panel {
	padding-left: 0;
	padding-right: 0;
}
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-panel__button {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	width: 100%;
	margin-top: 0.5rem;
	/* WooCommerce zeroes the button's left padding, so the "Add coupon" text
	   touched the pill's rounded edge -- give the label room on both sides. */
	padding: 0.5rem 1rem !important;
	border: 1px solid rgba(37, 99, 235, 0.18);
	border-radius: 999px;
	background: rgba(37, 99, 235, 0.06);
	color: var(--wpx-brand);
	font-size: 0.8rem;
	font-weight: 700;
	cursor: pointer;
}
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-panel__button-icon svg {
	transition: transform 0.2s ease;
}
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-panel__button:focus,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-panel__button:hover {
	background: rgba(37, 99, 235, 0.12);
}
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-coupon__form {
	display: flex;
	gap: 0.5rem;
	margin-top: 0.5rem;
}
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-coupon__input {
	flex: 1;
}
.wp-block-woocommerce-checkout-order-summary-block input.wc-block-components-totals-coupon__input-input,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-coupon__input input {
	width: 100%;
	height: 42px;
	box-sizing: border-box;
	padding: 0 0.85rem;
	border: 1px solid #d6dae3;
	border-radius: var(--wpx-radius);
	background: #fff;
	color: var(--wpx-navy);
	font-size: 0.85rem;
	outline: none;
}
.wp-block-woocommerce-checkout-order-summary-block input.wc-block-components-totals-coupon__input-input:focus,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-coupon__input input:focus {
	border-color: var(--wpx-brand);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-coupon__button {
	height: 42px;
	padding: 0 1.15rem;
	background: linear-gradient(135deg, var(--wpx-navy) 0%, #1d3c8f 100%);
	color: #fff;
	border: none;
	border-radius: var(--wpx-radius);
	font-size: 0.85rem;
	font-weight: 700;
	cursor: pointer;
}
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-coupon__button:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}


/* ============================================================
   WooCommerce Order Confirmation (order-received) page
   ============================================================ */
.wpexpert-order-page.wpexpert-doc-wrap {
	max-width: 80rem;
	padding: 2.5rem 1rem 3.5rem;
}

/* --- Hero / status block --- */
.wc-block-order-confirmation-status {
	position: relative;
	text-align: center;
	max-width: 46rem;
	margin: 0 auto 2rem;
	padding: 2.75rem 1.5rem 2.25rem;
	background: linear-gradient(160deg, #ffffff 0%, #f4f8ff 100%);
	border: 1px solid var(--wpx-border);
	border-radius: var(--wpx-radius-xl);
	box-shadow: var(--wpx-shadow);
}
.wc-block-order-confirmation-status::before {
	content: "";
	display: block;
	width: 64px;
	height: 64px;
	margin: 0 auto 1.1rem;
	border-radius: 50%;
	background-color: #16a34a;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 32px;
	box-shadow: 0 8px 18px rgba(22, 163, 74, 0.35);
}
.wc-block-order-confirmation-status h1 {
	margin: 0 0 0.4rem;
	font-size: 1.9rem;
	font-weight: 800;
	color: var(--wpx-navy);
}
.wc-block-order-confirmation-status p {
	margin: 0;
	color: #5b6478;
	font-size: 1.02rem;
}
.wpexpert-order-num {
	color: var(--wpx-brand);
}
.wc-block-order-confirmation-status-description {
	max-width: 46rem;
	margin: -1.1rem auto 2rem;
	text-align: center;
	color: #5b6478;
}
.wc-block-order-confirmation-status-description .button {
	display: inline-block;
	margin-top: 0.5rem;
	padding: 0.55rem 1.1rem;
	border-radius: var(--wpx-radius);
	background: var(--wpx-brand);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
}

/* --- Two-column grid (collapses to a centered single column when the
       side column has no address/additional data, e.g. digital orders) --- */
.wpexpert-order-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem;
	align-items: start;
	max-width: 64rem;
	margin: 0 auto 2rem;
}
.wpexpert-order-grid:has(.wpexpert-order-side > *) {
	grid-template-columns: minmax(0, 1fr) 340px;
	max-width: none;
}

/* --- Card wrapper for each order block --- */
.wpexpert-order-main > .wc-block-order-confirmation-summary,
.wpexpert-order-main > .wc-block-order-confirmation-totals,
.wpexpert-order-main > .wc-block-order-confirmation-downloads,
.wpexpert-order-main > .wc-block-order-confirmation-additional-information,
.wpexpert-order-side > .wc-block-order-confirmation-billing-address,
.wpexpert-order-side > .wc-block-order-confirmation-shipping-address,
.wpexpert-order-side > .wc-block-order-confirmation-additional-fields {
	display: block;
	background: #fff;
	border: 1px solid var(--wpx-border);
	border-radius: var(--wpx-radius-lg);
	box-shadow: var(--wpx-shadow-sm);
	padding: 1.5rem 1.5rem 1.6rem;
	margin-bottom: 1.25rem;
}

/* Card titles (added via ::before because the blocks ship no heading) */
.wc-block-order-confirmation-summary::before { content: "Order summary"; }
.wc-block-order-confirmation-totals::before { content: "Order details"; }
.wc-block-order-confirmation-downloads::before { content: "Downloads"; }
.wc-block-order-confirmation-billing-address::before { content: "Billing details"; }
.wc-block-order-confirmation-shipping-address::before { content: "Shipping details"; }
.wc-block-order-confirmation-additional-fields::before { content: "Additional information"; }
.wpexpert-order-main > [class*="wc-block-order-confirmation"]::before,
.wpexpert-order-side > [class*="wc-block-order-confirmation"]::before {
	display: flex;
	align-items: center;
	margin-bottom: 1rem;
	padding-bottom: 0.7rem;
	border-bottom: 1px solid #eef1f7;
	font-size: 0.82rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wpx-navy);
}

/* --- Summary list (Order #, Date, Total, Email, Payment) --- */
.wc-block-order-confirmation-summary-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem 1.5rem;
}
.wc-block-order-confirmation-summary-list-item {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding: 0.7rem 0.9rem;
	background: #f7f9fc;
	border: 1px solid #eef1f7;
	border-radius: var(--wpx-radius);
}
.wc-block-order-confirmation-summary-list-item__key {
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #8a93ad;
	font-weight: 700;
}
.wc-block-order-confirmation-summary-list-item__value {
	font-size: 0.98rem;
	font-weight: 600;
	color: var(--wpx-navy);
}

/* --- Totals + Downloads tables --- */
.wc-block-order-confirmation-totals__table,
.wc-block-order-confirmation-downloads__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.92rem;
}
.wc-block-order-confirmation-totals__table thead th,
.wc-block-order-confirmation-downloads__table thead th {
	text-align: left;
	padding: 0.5rem 0.75rem;
	border-bottom: 2px solid #eef1f7;
	font-size: 0.74rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #8a93ad;
}
.wc-block-order-confirmation-totals__table tbody td,
.wc-block-order-confirmation-downloads__table tbody td {
	padding: 0.85rem 0.75rem;
	border-bottom: 1px solid #f0f2f6;
	vertical-align: middle;
}
.wc-block-order-confirmation-totals__table tbody tr:last-child td,
.wc-block-order-confirmation-downloads__table tbody tr:last-child td {
	border-bottom: none;
}
.wc-block-order-confirmation-totals__product,
.wc-block-order-confirmation-downloads__table .download-product {
	font-weight: 600;
	color: var(--wpx-navy);
}
.wc-block-order-confirmation-totals__total {
	text-align: right;
	font-weight: 600;
	color: var(--wpx-navy);
}
.wc-block-order-confirmation-totals__table tfoot th {
	text-align: left;
	padding: 0.7rem 0.75rem;
	color: var(--wpx-navy);
	font-weight: 600;
}
.wc-block-order-confirmation-totals__table tfoot td {
	text-align: right;
	padding: 0.7rem 0.75rem;
	font-weight: 700;
	color: var(--wpx-navy);
}
.wc-block-order-confirmation-totals__table tfoot tr:last-child th,
.wc-block-order-confirmation-totals__table tfoot tr:last-child td {
	border-top: 2px solid #e5e7eb;
	font-size: 1.05rem;
}
.download-remaining,
.download-expires {
	color: #8a93ad;
	white-space: nowrap;
}
.wc-block-order-confirmation-downloads__table .download-file a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	background: var(--wpx-brand);
	color: #fff !important;
	text-decoration: none !important;
	padding: 0.5rem 0.9rem;
	border-radius: var(--wpx-radius);
	font-size: 0.82rem;
	font-weight: 600;
}
.wc-block-order-confirmation-downloads__table .download-file a:hover {
	background: #1d4fd0;
}

/* License key shown beneath each download on the order-received page */
.wpexpert-licence-key {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.4rem 0.5rem;
	margin-top: 0.6rem;
	padding: 0.55rem 0.65rem;
	background: #f1f5ff;
	border: 1px dashed #b9c9f0;
	border-radius: var(--wpx-radius);
}
.wpexpert-licence-key__label {
	font-size: 0.68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--wpx-brand);
}
.wpexpert-licence-key__value {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--wpx-navy);
	word-break: break-all;
}
.wpexpert-licence-key__copy {
	margin-left: auto;
	padding: 0.3rem 0.7rem;
	border: 1px solid var(--wpx-brand);
	border-radius: var(--wpx-radius);
	background: #fff;
	color: var(--wpx-brand);
	font-size: 0.72rem;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.wpexpert-licence-key__copy:hover,
.wpexpert-licence-key__copy.is-copied {
	background: var(--wpx-brand);
	color: #fff;
}

/* Licence key rendered inside the My Account downloads table cell */
.woocommerce-table--order-downloads td.licence-key {
	min-width: 220px;
}
.woocommerce-table--order-downloads td.licence-key .wpexpert-licence-key {
	margin-top: 0;
}
.wc-block-order-confirmation-order-note {
	margin-top: 1rem;
	padding: 0.9rem 1rem;
	background: #fffbeb;
	border: 1px solid #fde68a;
	border-radius: var(--wpx-radius);
	font-size: 0.9rem;
	color: #7c5e10;
}
.wc-block-order-confirmation-order-note__label {
	font-weight: 700;
	margin-right: 0.3rem;
}

/* --- Billing / Shipping address --- */
.wc-block-order-confirmation-billing-address address,
.wc-block-order-confirmation-shipping-address address {
	font-style: normal;
	color: var(--wpx-ink);
	line-height: 1.7;
	font-size: 0.94rem;
}
.wc-block-order-confirmation-billing-address .woocommerce-customer-details--phone {
	margin: 0.4rem 0 0;
	color: #5b6478;
}

/* --- Additional fields --- */
.wc-block-order-confirmation-additional-fields .wc-block-components-additional-fields-list {
	margin: 0;
}
.wc-block-order-confirmation-additional-fields dt {
	margin-top: 0.6rem;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #8a93ad;
	font-weight: 700;
}
.wc-block-order-confirmation-additional-fields dd {
	margin: 0 0 0.4rem;
	font-weight: 600;
	color: var(--wpx-navy);
}

/* --- "What's next" CTA --- */
.wpexpert-order-cta {
	max-width: 46rem;
	margin: 1rem auto 0;
	padding: 2rem 1.5rem;
	text-align: center;
	background: linear-gradient(160deg, #0a183d 0%, #122254 100%);
	border-radius: var(--wpx-radius-xl);
	box-shadow: var(--wpx-shadow-lg);
	color: #fff;
}
.wpexpert-order-cta-eyebrow {
	display: inline-block;
	margin-bottom: 0.5rem;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: 700;
	color: var(--wpx-accent);
}
.wpexpert-order-cta-title {
	margin: 0 0 0.4rem;
	font-size: 1.5rem;
	color: #fff;
}
.wpexpert-order-cta-sub {
	margin: 0 0 1.25rem;
	color: rgba(255, 255, 255, 0.78);
}
.wpexpert-order-cta-actions {
	display: flex;
	gap: 0.75rem;
	justify-content: center;
	flex-wrap: wrap;
}
.wpexpert-order-cta-actions .wpexpert-btn-primary {
	background: var(--wpx-accent);
	color: var(--wpx-navy);
}
.wpexpert-order-cta-actions .wpexpert-btn-primary:hover {
	opacity: 0.92;
	color: var(--wpx-navy);
}
.wpexpert-order-cta-actions .wpexpert-btn-outline {
	border-color: rgba(255, 255, 255, 0.5);
	color: #fff;
}
.wpexpert-order-cta-actions .wpexpert-btn-outline:hover {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
}

/* --- Responsive --- */
@media (max-width: 1023px) {
	.wpexpert-order-grid {
		grid-template-columns: 1fr;
	}
	.wc-block-components-checkout-step {
		padding: 1.25rem;
		margin-bottom: 1.25rem;
	}
	.wc-block-components-sidebar.wc-block-checkout__sidebar {
		padding: 1.5rem;
	}
}
@media (max-width: 767px) {
	.wpexpert-checkout-head { padding-bottom: 1.25rem; margin-bottom: 1.25rem; }
	.wp-block-woocommerce-checkout .wc-block-components-checkout-step,
	.wc-block-checkout .wc-block-components-checkout-step {
		padding: 1rem;
	}
	.wp-block-woocommerce-checkout .wc-block-components-checkout-step__heading-container,
	.wc-block-checkout .wc-block-components-checkout-step__heading-container {
		padding-bottom: 0.6rem;
		margin-bottom: 0.9rem;
	}
	.wp-block-woocommerce-checkout .wc-block-components-sidebar-layout,
	.wc-block-components-sidebar-layout.wc-block-checkout {
		grid-template-columns: 1fr;
		grid-template-areas: "main" "sidebar";
	}
	.wc-block-components-order-summary-item__image {
		flex-basis: 46px;
		width: 46px;
		height: 46px;
	}
	.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-coupon__form {
		flex-direction: column;
	}
}
@media (max-width: 600px) {
	.wc-block-order-confirmation-summary-list {
		grid-template-columns: 1fr;
	}
	.wc-block-order-confirmation-status {
		padding: 2.25rem 1rem 1.75rem;
	}
	.wc-block-order-confirmation-status h1 {
		font-size: 1.5rem;
	}
	.wc-block-order-confirmation-totals__table,
	.wc-block-order-confirmation-downloads__table {
		display: block;
		overflow-x: auto;
		white-space: nowrap;
	}
}