/* ==========================================================================
   NexPep design tokens
   ========================================================================== */
:root {
	--nxp-bg: #f7f8f4;
	--nxp-bg-alt: #eef1e8;
	--nxp-bg-footer: #eef1e8;
	--nxp-card-bg: #ffffff;

	--nxp-text: #141a15;
	--nxp-text-muted: #5b655a;
	--nxp-text-faint: #838d80;
	--nxp-text-dim: #aab3a6;

	--nxp-accent: #8be000;
	--nxp-accent-hover: #6fb800;
	--nxp-on-accent: #0c130f;

	--nxp-border: rgba(12, 19, 15, 0.1);
	--nxp-border-strong: rgba(12, 19, 15, 0.2);

	--nxp-radius-sm: 6px;
	--nxp-radius-md: 10px;
	--nxp-radius-lg: 16px;

	--nxp-font-heading: 'Archivo', sans-serif;
	--nxp-font-body: 'Inter', sans-serif;
}

* {
	box-sizing: border-box;
}

body.nxp {
	margin: 0;
	background: var(--nxp-bg);
	color: var(--nxp-text);
	font-family: var(--nxp-font-body);
	font-size: 15px;
	line-height: 1.5;
}

.nxp a {
	color: inherit;
	text-decoration: none;
}
.nxp a:hover {
	color: var(--nxp-accent);
}

.nxp h1,
.nxp h2,
.nxp h3 {
	font-family: var(--nxp-font-heading);
	font-weight: 800;
	margin: 0;
}

/* ---------- Buttons ---------- */
.nxp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 30px;
	border-radius: var(--nxp-radius-sm);
	font-size: 14px;
	font-weight: 700;
	border: none;
	cursor: pointer;
	white-space: nowrap;
}
.nxp-btn-primary {
	background: var(--nxp-accent);
	color: var(--nxp-on-accent);
}
.nxp-btn-primary:hover {
	background: var(--nxp-accent-hover);
	color: var(--nxp-on-accent);
}
.nxp-btn-outline {
	background: transparent;
	color: var(--nxp-text);
	border: 1px solid var(--nxp-border-strong);
}
.nxp-btn-sm {
	padding: 8px 14px;
	font-size: 11px;
}

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

/* Theme-colored placeholder for products with no real photo yet
   (nexpep_product_image() in functions.php falls back to this). */
.nxp-img-placeholder {
	width: 100%;
	height: 100%;
	min-height: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #e7efdd, #f7f8f4);
	color: #4f7d0c;
	font-family: var(--nxp-font-heading);
	font-size: 28px;
	font-weight: 800;
	border-radius: inherit;
}

/* ==========================================================================
   Nav
   ========================================================================== */
.nxp-nav {
	border-bottom: 1px solid var(--nxp-border);
}
.nxp-nav-inner {
	max-width: 1280px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 24px;
}
.nxp-logo {
	font-family: var(--nxp-font-heading);
	font-weight: 900;
	font-size: 22px;
	letter-spacing: -0.5px;
	flex-shrink: 0;
}
.nxp-accent {
	color: var(--nxp-accent);
}
.nxp-nav-links {
	display: flex;
	gap: 32px;
	font-size: 14px;
	color: var(--nxp-text-muted);
}
/* wp_nav_menu() wraps real menu items in a <ul> (the fallback callback in
   functions.php doesn't — it prints bare <a> tags directly into
   .nxp-nav-links / .nxp-mobile-menu, which already handle that case via
   their own flex rules above/below). This just makes the <ul> case lay
   out the same way once a real "Primary Menu" is assigned in wp-admin. */
.nxp-nav-links .nxp-nav-list {
	display: flex;
	gap: 32px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.nxp-mobile-menu .nxp-nav-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.nxp-nav-actions {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-shrink: 0;
}
.nxp-cart-link {
	font-size: 17px;
	color: var(--nxp-text-muted);
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.nxp-cart-count {
	font-size: 12px;
}
.nxp-menu-toggle {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	font-size: 22px;
	line-height: 1;
	color: var(--nxp-text);
	padding: 4px;
}
.nxp-mobile-menu {
	display: flex;
	flex-direction: column;
	padding: 4px 24px 22px;
	gap: 16px;
	font-size: 15px;
	color: var(--nxp-text-muted);
	border-top: 1px solid var(--nxp-border);
}
.nxp-mobile-menu[hidden] {
	display: none;
}
.nxp-mobile-cta {
	text-align: center;
	margin-top: 4px;
}

@media (max-width: 900px) {
	.nxp-nav-links,
	.nxp-nav-cta {
		display: none;
	}
	.nxp-menu-toggle {
		display: block;
	}
}

/* ==========================================================================
   Footer
   ========================================================================== */
.nxp-footer {
	background: var(--nxp-bg-footer);
	padding: 56px 32px 28px;
}
.nxp-footer-top {
	max-width: 1280px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: 48px;
	justify-content: space-between;
	padding-bottom: 36px;
	border-bottom: 1px solid var(--nxp-border);
}
.nxp-footer-brand {
	max-width: 260px;
}
.nxp-footer-logo {
	font-family: var(--nxp-font-heading);
	font-weight: 900;
	font-size: 20px;
	margin-bottom: 12px;
}
.nxp-footer-contact {
	font-size: 13px;
	line-height: 1.7;
	color: var(--nxp-text-faint);
}
.nxp-footer-heading {
	font-size: 13px;
	font-weight: 700;
	margin-bottom: 14px;
}
.nxp-footer-col {
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 13px;
	color: var(--nxp-text-faint);
}
.nxp-footer-bottom {
	max-width: 1280px;
	margin: 0 auto;
	padding-top: 22px;
	font-size: 12px;
	color: var(--nxp-text-dim);
	text-align: center;
}

/* ==========================================================================
   Home
   ========================================================================== */
.nxp-hero {
	position: relative;
	min-height: min(70vh, 600px);
	display: flex;
	align-items: stretch;
	background: linear-gradient(100deg, #e7efdd 0%, var(--nxp-bg) 60%);
}
.nxp-hero-inner {
	flex: 1;
	max-width: 1360px;
	width: 100%;
	margin: 0 auto;
	padding: clamp(24px, 4vw, 56px) clamp(20px, 4vw, 48px);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 32px;
}
.nxp-hero-title {
	font-size: clamp(44px, 9vw, 110px);
	line-height: 0.92;
	letter-spacing: -3px;
	max-width: 900px;
}
.nxp-hero-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
}
.nxp-hero-copy {
	max-width: 440px;
}
.nxp-hero-copy p {
	font-size: 15px;
	line-height: 1.7;
	color: var(--nxp-text-muted);
	margin: 0 0 22px;
}
.nxp-hero-actions {
	display: flex;
	gap: 14px;
	align-items: center;
	flex-wrap: wrap;
}
.nxp-hero-watch {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	color: var(--nxp-text);
}
.nxp-play-badge {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var(--nxp-border-strong);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.nxp-hero-stats {
	display: flex;
	gap: 40px;
	flex-wrap: wrap;
}
.nxp-stat-num {
	font-family: var(--nxp-font-heading);
	font-size: 32px;
	font-weight: 800;
	color: var(--nxp-accent);
}
.nxp-stat-label {
	font-size: 12px;
	color: var(--nxp-text-muted);
	white-space: nowrap;
}

.nxp-trust-strip {
	border-top: 1px solid var(--nxp-border);
	border-bottom: 1px solid var(--nxp-border);
	max-width: 1280px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	justify-content: space-around;
	padding: 36px 32px;
}
.nxp-trust-item {
	display: flex;
	align-items: center;
	gap: 12px;
}
.nxp-trust-icon {
	font-size: 20px;
}
.nxp-trust-title {
	font-size: 13px;
	font-weight: 700;
}
.nxp-trust-sub {
	font-size: 12px;
	color: var(--nxp-text-faint);
}

.nxp-featured {
	max-width: 1280px;
	margin: 0 auto;
	padding: 80px 32px;
}
.nxp-featured-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 44px;
}
.nxp-featured-header h2 {
	font-size: 32px;
}
.nxp-featured-header p {
	font-size: 14px;
	color: var(--nxp-text-faint);
	max-width: 420px;
	margin: 0;
}
.nxp-featured-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 24px;
}
.nxp-featured-hero {
	background: var(--nxp-card-bg);
	border: 1px solid var(--nxp-border);
	border-radius: var(--nxp-radius-lg);
	padding: 28px;
	display: flex;
	flex-direction: column;
}
.nxp-featured-hero-top {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	color: var(--nxp-text-faint);
	margin-bottom: 16px;
}
.nxp-featured-hero img,
.nxp-featured-hero .nxp-img-placeholder {
	width: 100%;
	height: 300px;
	min-height: 0;
	object-fit: cover;
	border-radius: var(--nxp-radius-md);
	background: linear-gradient(135deg, #e7efdd, #f7f8f4);
}
.nxp-featured-hero-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 20px;
}
.nxp-featured-hero-name {
	font-size: 16px;
	font-weight: 700;
}
.nxp-featured-hero-spec {
	font-size: 12px;
	color: var(--nxp-text-faint);
}
.nxp-featured-hero-price {
	font-family: var(--nxp-font-heading);
	font-size: 20px;
	font-weight: 800;
	color: var(--nxp-accent);
}
.nxp-featured-side {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.nxp-featured-side-item {
	background: var(--nxp-card-bg);
	border: 1px solid var(--nxp-border);
	border-radius: 14px;
	padding: 16px;
	display: flex;
	align-items: center;
	gap: 16px;
}
.nxp-featured-side-thumb img,
.nxp-featured-side-thumb .nxp-img-placeholder {
	width: 80px;
	height: 80px;
	min-height: 0;
	font-size: 16px;
	object-fit: cover;
	border-radius: 10px;
	flex-shrink: 0;
	background: linear-gradient(135deg, #e7efdd, #f7f8f4);
}
.nxp-featured-side-info {
	flex: 1;
}
.nxp-featured-side-sku {
	font-size: 12px;
	color: var(--nxp-text-faint);
}
.nxp-featured-side-name {
	display: block;
	font-size: 15px;
	font-weight: 700;
}
.nxp-featured-side-spec {
	font-size: 12px;
	color: var(--nxp-text-faint);
}
.nxp-featured-side-action {
	text-align: right;
}
.nxp-featured-side-price {
	font-size: 14px;
	font-weight: 700;
	color: var(--nxp-accent);
	margin-bottom: 8px;
}
.nxp-featured-cta {
	text-align: center;
	margin-top: 36px;
}

.nxp-why-us {
	background: var(--nxp-bg-alt);
	padding: 80px 32px;
}
.nxp-why-us > h2 {
	max-width: 1280px;
	margin: 0 auto 48px;
	font-size: 32px;
	text-align: center;
}
.nxp-why-grid {
	max-width: 1280px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}
.nxp-why-card {
	flex: 1 1 240px;
	background: var(--nxp-card-bg);
	border: 1px solid var(--nxp-border);
	border-radius: 14px;
	padding: 28px;
}
.nxp-why-icon {
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: rgba(139, 224, 0, 0.12);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	color: var(--nxp-accent);
	margin-bottom: 16px;
}
.nxp-why-title {
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 8px;
}
.nxp-why-desc {
	font-size: 13px;
	line-height: 1.6;
	color: var(--nxp-text-faint);
}

.nxp-testimonial {
	max-width: 900px;
	margin: 0 auto;
	padding: 88px 32px;
	text-align: center;
}
.nxp-quote-mark {
	font-size: 38px;
	color: var(--nxp-accent);
	font-family: Georgia, serif;
}
.nxp-testimonial blockquote {
	font-family: var(--nxp-font-heading);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.5;
	margin: 0 0 24px;
}
.nxp-quote-author {
	font-size: 13px;
	color: var(--nxp-text-faint);
}

.nxp-cta {
	background: var(--nxp-bg-alt);
	border-top: 1px solid var(--nxp-border);
	padding: 72px 32px;
	text-align: center;
}
.nxp-cta h2 {
	font-size: 30px;
	margin-bottom: 24px;
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}
/* ==========================================================================
   Shop
   ========================================================================== */
.nxp-shop-page {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 24px 88px;
}
.nxp-shop-header-band {
	background: var(--nxp-bg-alt);
	border-bottom: 1px solid var(--nxp-border);
}
.nxp-shop-header {
	max-width: 1280px;
	margin: 0 auto;
	padding: 44px 24px 28px;
}
.nxp-breadcrumb {
	font-size: 12px;
	color: var(--nxp-text-faint);
	margin-bottom: 12px;
}
.nxp-breadcrumb a {
	color: var(--nxp-text-faint);
}
.nxp-page-title {
	font-size: clamp(28px, 6vw, 40px);
}
.nxp-shop-layout {
	padding: 32px 0 0;
	display: flex;
	gap: 32px;
	align-items: flex-start;
	flex-wrap: wrap;
}
.nxp-shop-filters {
	flex: 1 1 220px;
	max-width: 260px;
}
.nxp-filter-heading {
	font-size: 13px;
	font-weight: 700;
	margin-bottom: 12px;
}
.nxp-filter-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 9px;
	font-size: 13px;
}
.nxp-filter-list a {
	color: var(--nxp-text-muted);
}
.nxp-filter-list a.is-active {
	color: var(--nxp-accent);
	font-weight: 700;
}
.nxp-filter-count {
	color: var(--nxp-text-dim);
}
.nxp-shop-grid-wrap {
	flex: 1;
	min-width: 280px;
}
.nxp-shop-toolbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 24px;
	font-size: 13px;
	color: var(--nxp-text-faint);
}
.nxp-product-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 20px;
}
.nxp-product-card {
	background: var(--nxp-card-bg);
	border: 1px solid var(--nxp-border);
	border-radius: 14px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.nxp-product-card-image {
	position: relative;
	display: block;
}
.nxp-product-card-image img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	display: block;
	background: linear-gradient(135deg, #e7efdd, #f7f8f4);
}
.nxp-product-sku {
	position: absolute;
	top: 10px;
	left: 10px;
	background: rgba(12, 19, 15, 0.85);
	color: var(--nxp-accent);
	font-size: 10px;
	font-weight: 700;
	padding: 4px 8px;
	border-radius: 5px;
}
.nxp-product-card-body {
	padding: 16px;
	flex: 1;
	display: flex;
	flex-direction: column;
}
.nxp-product-card-title {
	display: block;
	font-size: 15px;
	font-weight: 700;
	margin-bottom: 4px;
}
.nxp-product-card-spec {
	font-size: 12px;
	color: var(--nxp-text-faint);
	margin-bottom: 14px;
}
.nxp-product-card-footer {
	margin-top: auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.nxp-product-card-price {
	font-family: var(--nxp-font-heading);
	font-size: 16px;
	font-weight: 800;
	color: var(--nxp-accent);
}

/* Pagination + no-products fallback (core markup, restyled) */
.woocommerce-pagination {
	margin-top: 44px;
	text-align: center;
}
.woocommerce-pagination ul {
	list-style: none;
	display: inline-flex;
	gap: 8px;
	padding: 0;
	margin: 0;
}
.woocommerce-pagination a,
.woocommerce-pagination span.current {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 6px;
	border: 1px solid var(--nxp-border-strong);
	color: var(--nxp-text-muted);
	font-size: 13px;
}
.woocommerce-pagination span.current {
	background: var(--nxp-accent);
	border-color: var(--nxp-accent);
	color: var(--nxp-on-accent);
	font-weight: 700;
}

/* ==========================================================================
   Product Detail
   ========================================================================== */
.nxp-product-page {
	max-width: 1280px;
	margin: 0 auto;
	padding: 24px 24px 72px;
}
.nxp-product-breadcrumb {
	font-size: 12px;
	color: var(--nxp-text-faint);
	margin-bottom: 8px;
}
.nxp-product-breadcrumb a {
	color: var(--nxp-text-faint);
}
.nxp-product-main {
	display: flex;
	gap: 48px;
	flex-wrap: wrap;
	align-items: flex-start;
}
.nxp-product-gallery {
	flex: 1 1 440px;
}
/* Mockup layout: thumbnail column on the left, main image filling the
   rest. WC's flexslider JS (wc-product-gallery-slider theme support)
   appends .flex-control-thumbs as a sibling of .woocommerce-product-
   gallery__wrapper at runtime, so both are flexed as a row here and the
   thumb list is reordered before the wrapper with `order`. */
.woocommerce-product-gallery {
	max-width: 560px;
	display: flex;
	gap: 16px;
}
.woocommerce-product-gallery__wrapper {
	flex: 1;
	order: 2;
	min-width: 0;
}
.woocommerce-product-gallery__image {
	background: var(--nxp-card-bg);
	border-radius: 16px;
	overflow: hidden;
}
.woocommerce-product-gallery__image img {
	width: 100%;
	height: auto;
	display: block;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}
.flex-control-thumbs {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 0;
	margin: 0;
	order: 1;
	flex-shrink: 0;
}
.flex-control-thumbs li img {
	width: 68px;
	height: 68px;
	border-radius: 8px;
	object-fit: cover;
	cursor: pointer;
	border: 2px solid transparent;
}
/* The mockup's left thumbnail column reads fine at desktop widths, but
   squeezes the main image into a sliver on narrow screens — drop to a
   full-width main image with the thumbs as a row underneath instead,
   matching how every other responsive section on this site degrades. */
@media (max-width: 600px) {
	.woocommerce-product-gallery {
		flex-direction: column;
	}
	.flex-control-thumbs {
		flex-direction: row;
		order: 2;
		padding-top: 12px;
	}
	.woocommerce-product-gallery__wrapper {
		order: 1;
	}
	.flex-control-thumbs li img {
		width: 64px;
		height: 64px;
	}
}
.flex-control-thumbs li img.flex-active {
	border-color: var(--nxp-accent);
}

.nxp-product-info {
	flex: 1 1 380px;
}
.nxp-eyebrow {
	font-size: 12px;
	color: var(--nxp-accent);
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	margin-bottom: 10px;
}
.nxp-product-info .product_title {
	font-family: var(--nxp-font-heading);
	font-size: 34px;
	font-weight: 800;
	line-height: 1.2;
	margin-bottom: 14px;
}
.nxp-product-info .woocommerce-product-rating {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 20px;
	font-size: 13px;
	color: var(--nxp-text-faint);
}
/* WC's own star-rating CSS lives in the woocommerce-general stylesheet we
   dequeue in functions.php; without it the raw "Rated X out of 5" screen-
   reader text renders visibly instead of being replaced by star glyphs.
   Rebuilt here with Unicode stars instead of WC's icon font (avoids an
   extra @font-face load). span[style="width:X%"] is WC's own inline output. */
.star-rating {
	position: relative;
	height: 16px;
	line-height: 1;
	width: 104px;
	font-size: 16px;
	overflow: hidden;
}
.star-rating::before {
	content: "\2606\2606\2606\2606\2606";
	position: absolute;
	top: 0;
	left: 0;
	letter-spacing: 3px;
	color: var(--nxp-border-strong);
	white-space: nowrap;
}
.star-rating span {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	overflow: hidden;
	white-space: nowrap;
	font-size: 0;
}
.star-rating span::before {
	content: "\2605\2605\2605\2605\2605";
	font-size: 16px;
	letter-spacing: 3px;
	line-height: 1;
}
.nxp-product-info .star-rating {
	color: var(--nxp-accent);
}
.nxp-product-info .price {
	display: block;
	font-family: var(--nxp-font-heading);
	font-size: 26px;
	font-weight: 800;
	color: var(--nxp-accent);
	margin-bottom: 20px;
}
.nxp-product-info .woocommerce-product-details__short-description {
	font-size: 14px;
	line-height: 1.7;
	color: var(--nxp-text-muted);
	margin-bottom: 28px;
	max-width: 440px;
}

/* Quick-spec grid (Purity/Form/CAS/Storage — functions.php) */
.nxp-quick-specs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-bottom: 28px;
	max-width: 440px;
}
.nxp-quick-spec-label {
	font-size: 11px;
	color: var(--nxp-text-dim);
	margin-bottom: 4px;
	letter-spacing: 0.3px;
}
.nxp-quick-spec-value {
	font-size: 14px;
	font-weight: 600;
	color: var(--nxp-text);
}

/* Variation form — real <select> hidden, pill buttons drive it */
.nxp-variation-label {
	font-size: 12px;
	font-weight: 700;
	color: var(--nxp-text-faint);
	letter-spacing: 0.5px;
	text-transform: uppercase;
	margin-bottom: 10px;
}
.nxp-variation-pills {
	display: flex;
	gap: 10px;
	margin-bottom: 24px;
	flex-wrap: wrap;
}
.nxp-variation-pill {
	cursor: pointer;
	flex: 1;
	min-width: 70px;
	text-align: center;
	border: 1.5px solid var(--nxp-border-strong);
	background: transparent;
	color: var(--nxp-text);
	padding: 11px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 700;
}
.nxp-variation-pill.is-active {
	border-color: var(--nxp-accent);
	background: var(--nxp-accent);
	color: var(--nxp-on-accent);
}
table.variations {
	margin-bottom: 4px;
}
/* Visually hide the attribute label (e.g. "Size") rather than
   `display: none` it — the pills convey it sighted, but the underlying
   <select> is also aria-hidden (theme.js), so this label is the ONLY
   remaining accessible name for the pill group; display:none would strip
   it from the accessibility tree entirely and leave screen-reader/keyboard
   users with no way to tell what a given row of pills selects. Same
   clip-based technique as .nxp-visually-hidden (Task 2), duplicated here
   since it targets WooCommerce's own rendered <label>, not an element we
   control the class list of. */
table.variations label {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
	padding: 0;
	margin: -1px;
}
.woocommerce-variation-price .price {
	font-size: 20px;
}
.single_variation_wrap {
	margin-bottom: 4px;
}

/* Quantity stepper + Add to Cart row. For a SIMPLE product, .cart *is*
   this row (form.cart directly wraps quantity+button, nothing else) — flex
   it directly. For a VARIABLE product, .cart is the outer <form
   class="variations_form cart"> that also wraps the whole Size table and
   .single_variation_wrap above this row; flexing .cart there would squash
   the entire form (table + price + row) onto one line. WC gives the
   variable-product's actual quantity+button row its own class,
   .woocommerce-variation-add-to-cart — target that instead in that case,
   and leave the outer form as normal block flow so the table/price/row
   stack top to bottom like everywhere else on the page. */
.cart:not(.variations_form),
.woocommerce-variation-add-to-cart {
	display: flex;
	gap: 14px;
	align-items: center;
	margin-bottom: 24px;
	flex-wrap: wrap;
}
/* The reset link WC puts next to the (hidden) <select> — sits on its own
   line below the pills naturally; just needs to look intentional. */
.reset_variations {
	display: inline-block;
	margin-top: 8px;
	font-size: 12px;
	color: var(--nxp-text-faint);
}
.quantity {
	display: flex;
	align-items: center;
	border: 1.5px solid var(--nxp-border-strong);
	border-radius: 8px;
	overflow: hidden;
}
.quantity input.qty {
	width: 44px;
	text-align: center;
	background: transparent;
	border: none;
	color: var(--nxp-text);
	font-size: 14px;
	padding: 14px 4px;
	border-left: 1px solid var(--nxp-border-strong);
	border-right: 1px solid var(--nxp-border-strong);
	-moz-appearance: textfield;
}
.quantity input.qty::-webkit-outer-spin-button,
.quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.nxp-qty-btn {
	cursor: pointer;
	background: transparent;
	border: none;
	color: var(--nxp-text);
	font-size: 16px;
	padding: 14px 18px;
	user-select: none;
}
.single_add_to_cart_button {
	flex: 1;
	background: var(--nxp-accent) !important;
	color: var(--nxp-on-accent) !important;
	text-align: center;
	padding: 14px !important;
	border-radius: 8px !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	border: none !important;
	cursor: pointer;
}
.single_add_to_cart_button:hover {
	background: var(--nxp-accent-hover) !important;
}

.nxp-product-disclaimer {
	font-size: 12px;
	color: var(--nxp-text-dim);
	text-align: center;
}

/* Product meta table (SKU/categories — WooCommerce default) */
.product_meta {
	font-size: 12px;
	color: var(--nxp-text-dim);
	margin-top: 16px;
}
.product_meta a {
	color: var(--nxp-text-faint);
}

/* Tabs (Description / Reviews / Additional Information — WC default) */
.nxp-product-tabs {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 24px 72px;
}
.woocommerce-tabs ul.tabs {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 12px 28px;
	border-bottom: 1px solid var(--nxp-border-strong);
	margin: 0 0 28px;
	padding: 0;
}
.woocommerce-tabs ul.tabs li {
	padding-bottom: 14px;
	font-size: 14px;
	font-weight: 600;
	color: var(--nxp-text-faint);
	border-bottom: 2px solid transparent;
	cursor: pointer;
}
.woocommerce-tabs ul.tabs li.active {
	color: var(--nxp-text);
	border-bottom-color: var(--nxp-accent);
}
.woocommerce-tabs .panel {
	font-size: 14px;
	line-height: 1.75;
	color: var(--nxp-text-muted);
	max-width: 760px;
}
.woocommerce-tabs .panel h2 {
	font-size: 20px;
	margin-bottom: 16px;
}

/* Reviews (inside the Reviews tab — WC's native comment/rating system) */
#reviews .commentlist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
#reviews .comment_container {
	background: var(--nxp-card-bg);
	border: 1px solid var(--nxp-border);
	border-radius: 14px;
	padding: 24px;
}
#reviews .star-rating {
	color: var(--nxp-accent);
	margin-bottom: 12px;
}
#reviews .description p {
	font-size: 14px;
	line-height: 1.65;
	color: var(--nxp-text-muted);
	margin: 0 0 16px;
}
#reviews .woocommerce-review__author {
	font-size: 12px;
	color: var(--nxp-text-faint);
}
#reviews .comment-form-rating,
#reviews .comment-form-comment,
#reviews .comment-form-author,
#reviews .comment-form-email {
	margin-bottom: 16px;
}
#reviews input[type='text'],
#reviews input[type='email'],
#reviews textarea {
	width: 100%;
	background: var(--nxp-card-bg);
	border: 1px solid var(--nxp-border-strong);
	border-radius: 8px;
	color: var(--nxp-text);
	padding: 11px 14px;
	font-family: var(--nxp-font-body);
	font-size: 13px;
}

/* Related products (WC default, after tabs) */
.related.products {
	margin-top: 64px;
}
.related.products > h2 {
	font-size: 24px;
	margin-bottom: 24px;
}
.related.products ul.products {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 20px;
}
/* ==========================================================================
   Cart
   ========================================================================== */
.nxp-cart-page {
	max-width: 1280px;
	margin: 0 auto;
	padding: 40px 24px 88px;
}
.nxp-cart-page > .nxp-page-title {
	font-size: 34px;
	margin-bottom: 36px;
}
.nxp-cart-layout {
	display: flex;
	gap: 48px;
	flex-wrap: wrap;
	align-items: flex-start;
}
.nxp-cart-items {
	flex: 2;
	min-width: 340px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.nxp-cart-item {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px 20px;
	background: var(--nxp-card-bg);
	border: 1px solid var(--nxp-border);
	border-radius: 14px;
	padding: 16px;
}
.nxp-cart-item-thumb img {
	width: 72px;
	height: 72px;
	object-fit: cover;
	border-radius: 10px;
	flex-shrink: 0;
	background: linear-gradient(135deg, #e7efdd, #f7f8f4);
}
.nxp-cart-item-name {
	flex: 1 1 140px;
	min-width: 140px;
}
.nxp-cart-item-title {
	font-size: 15px;
	font-weight: 700;
	margin-bottom: 2px;
}
.nxp-cart-item-meta {
	font-size: 12px;
	color: var(--nxp-text-faint);
}
.nxp-cart-item-controls {
	flex: 1 1 220px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.nxp-cart-item-qty .quantity input.qty {
	min-width: 36px;
	padding: 9px 4px;
}
.nxp-cart-item-qty .nxp-qty-btn {
	padding: 9px 14px;
	font-size: 14px;
}
.nxp-cart-item-price-remove {
	display: flex;
	align-items: center;
	gap: 16px;
}
.nxp-cart-item-price {
	text-align: right;
	font-family: var(--nxp-font-heading);
	font-size: 15px;
	font-weight: 800;
	color: var(--nxp-accent);
	white-space: nowrap;
}
.nxp-cart-item-remove {
	color: var(--nxp-text-faint);
	font-size: 18px;
	padding: 4px;
}
.nxp-cart-empty {
	text-align: center;
	padding: 60px 0;
	color: var(--nxp-text-faint);
	font-size: 14px;
}
.nxp-cart-continue {
	margin-top: 12px;
	font-size: 13px;
	color: var(--nxp-text-faint);
}

.nxp-cart-summary {
	flex: 1;
	min-width: 300px;
	position: sticky;
	top: 24px;
}
.cart_totals {
	background: var(--nxp-card-bg);
	border: 1px solid var(--nxp-border);
	border-radius: 16px;
	padding: 28px;
}
.nxp-summary-title {
	font-size: 18px;
	margin-bottom: 20px;
}
.nxp-summary-row {
	display: flex;
	justify-content: space-between;
	font-size: 14px;
	color: var(--nxp-text-muted);
	margin-bottom: 12px;
}
/* Coupon card — lives in the left column now, below the item list (see
   cart.php's doc-comment for why: keeping it in the right sidebar meant
   either a broken coupon form or a broken shipping calculator or, worst
   of all, a form that silently duplicates itself on every AJAX action). */
.nxp-coupon-card {
	background: var(--nxp-card-bg);
	border: 1px solid var(--nxp-border);
	border-radius: 14px;
	padding: 16px;
	margin-top: 4px;
}
.nxp-coupon-card-label {
	font-size: 12px;
	color: var(--nxp-text-faint);
	margin-bottom: 10px;
}
.nxp-coupon-form {
	display: flex;
	gap: 10px;
}
.nxp-coupon-input {
	flex: 1;
	background: transparent;
	border: 1px solid var(--nxp-border-strong);
	border-radius: 8px;
	padding: 11px 14px;
	font-size: 13px;
	color: var(--nxp-text);
}
.nxp-coupon-input::placeholder {
	color: var(--nxp-text-dim);
}
.nxp-summary-total {
	display: flex;
	justify-content: space-between;
	font-family: var(--nxp-font-heading);
	font-size: 20px;
	font-weight: 800;
	border-top: 1px solid var(--nxp-border-strong);
	padding-top: 18px;
	margin-bottom: 24px;
}
.nxp-summary-total span:last-child {
	color: var(--nxp-accent);
}
.checkout-button {
	display: block;
	width: 100%;
	background: var(--nxp-accent) !important;
	color: var(--nxp-on-accent) !important;
	text-align: center;
	padding: 15px !important;
	border-radius: 8px !important;
	font-size: 14px !important;
	font-weight: 700 !important;
}
.checkout-button:hover {
	background: var(--nxp-accent-hover) !important;
}
.nxp-cart-disclaimer {
	font-size: 11px;
	color: var(--nxp-text-dim);
	text-align: center;
	margin-top: 14px;
}

/* WooCommerce notices (coupon applied/removed, errors) shown by AJAX */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
	list-style: none;
	background: var(--nxp-card-bg);
	border: 1px solid var(--nxp-border-strong);
	border-left: 4px solid var(--nxp-accent);
	border-radius: 8px;
	padding: 14px 18px;
	margin: 0 0 20px;
	font-size: 13px;
	color: var(--nxp-text);
}
.woocommerce-error {
	border-left-color: #e05c5c;
}

/* ==========================================================================
   Checkout / My Account — re-skin WooCommerce's default structure with
   the same tokens, no layout changes (payment-flow markup stays as-is).
   ========================================================================== */
.woocommerce-checkout,
.woocommerce-account {
	max-width: 1280px;
	margin: 0 auto;
	padding: 40px 24px 88px;
}
.woocommerce-checkout h3,
.woocommerce-account h2 {
	font-size: 20px;
	margin-bottom: 16px;
}
.woocommerce-checkout table.shop_table,
.woocommerce-account table.shop_table {
	width: 100%;
	border-collapse: collapse;
	background: var(--nxp-card-bg);
	border: 1px solid var(--nxp-border);
	border-radius: 14px;
	overflow: hidden;
	font-size: 13px;
}
.woocommerce-checkout table.shop_table th,
.woocommerce-checkout table.shop_table td,
.woocommerce-account table.shop_table th,
.woocommerce-account table.shop_table td {
	padding: 12px 16px;
	border-bottom: 1px solid var(--nxp-border);
	color: var(--nxp-text-muted);
}
.woocommerce-checkout input[type='text'],
.woocommerce-checkout input[type='email'],
.woocommerce-checkout input[type='tel'],
.woocommerce-checkout input[type='password'],
.woocommerce-checkout select,
.woocommerce-checkout textarea,
.woocommerce-account input[type='text'],
.woocommerce-account input[type='email'],
.woocommerce-account input[type='password'],
.woocommerce-account textarea {
	width: 100%;
	background: var(--nxp-bg);
	border: 1px solid var(--nxp-border-strong);
	border-radius: 8px;
	color: var(--nxp-text);
	padding: 11px 14px;
	font-family: var(--nxp-font-body);
	font-size: 13px;
}
.woocommerce-checkout label,
.woocommerce-account label {
	font-size: 12px;
	color: var(--nxp-text-faint);
	margin-bottom: 6px;
	display: inline-block;
}
.woocommerce-checkout #place_order,
.woocommerce-account button[type='submit'] {
	background: var(--nxp-accent) !important;
	color: var(--nxp-on-accent) !important;
	border: none !important;
	border-radius: 8px !important;
	padding: 15px 32px !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	cursor: pointer;
}
.woocommerce-checkout #place_order:hover,
.woocommerce-account button[type='submit']:hover {
	background: var(--nxp-accent-hover) !important;
}
.woocommerce-checkout .woocommerce-form-login,
.woocommerce-checkout .woocommerce-additional-fields,
.woocommerce-checkout #order_review {
	background: var(--nxp-card-bg);
	border: 1px solid var(--nxp-border);
	border-radius: 14px;
	padding: 24px;
	margin-bottom: 24px;
}

/* ==========================================================================
   Cart empty state (woocommerce/cart/cart-empty.php override) — the
   .woocommerce-info notice styling already exists from the Cart task;
   this just adds the page wrapper/centering around it.
   ========================================================================== */
.nxp-cart-empty-state {
	max-width: 640px;
	margin: 0 auto;
	padding: 60px 24px 100px;
	text-align: center;
}
.nxp-cart-empty-state .woocommerce-info {
	margin-bottom: 24px;
}