/* ==========================================================================
   NuMarkt — Design System CSS
   v2.0.0
   ========================================================================== */

:root {
	--numarkt-text-heading: #013D1C;
	--numarkt-text-body: #1A1A1A;
	--numarkt-text-muted: #9AAA9E;

	--numarkt-surface-base: #F9F6EF;
	--numarkt-surface-white: #FFFFFF;
	--numarkt-surface-mint: #E8F4E9;
	--numarkt-surface-sand: #F5EEDB;
	--numarkt-surface-cream: #FFFAEC;
	--numarkt-surface-dark: #0D1F10;
	--numarkt-surface-darkest: #091408;
	--numarkt-surface-earth-dark: #100E00;

	/* Per-division dark surfaces — each division has its own deep colour
	   so dark mode reads as "deeper division", not "everyone goes near-black". */
	--numarkt-dark-mat:  #1A2E1E;
	--numarkt-dark-con:  #3D3000;
	--numarkt-dark-farm: #6B5B3A;

	/* Per-division dark gradients (opt-in via 'use_gradient' toggle) */
	--numarkt-dark-mat-grad:  linear-gradient(160deg, #1A2E1E 0%, #0D1F10 100%);
	--numarkt-dark-con-grad:  linear-gradient(160deg, #3D3000 0%, #241C00 100%);
	--numarkt-dark-farm-grad: linear-gradient(160deg, #8A7555 0%, #6B5B3A 50%, #4A3D28 100%);

	/* Text colours on each division's dark — uses the matching light tint
	   so a green-on-green / sand-on-earth / cream-on-tussock identity. */
	--numarkt-dark-mat-text:        #E8F4E9; /* mint */
	--numarkt-dark-mat-text-muted:  rgba(232,244,233,0.65);
	--numarkt-dark-mat-text-dim:    rgba(232,244,233,0.45);
	--numarkt-dark-mat-text-hover:  #F2F9F0;

	--numarkt-dark-con-text:        #F5EEDB; /* sand */
	--numarkt-dark-con-text-muted:  rgba(245,238,219,0.65);
	--numarkt-dark-con-text-dim:    rgba(245,238,219,0.45);
	--numarkt-dark-con-text-hover:  #FBF3DF;

	--numarkt-dark-farm-text:       #FFFAEC; /* cream */
	--numarkt-dark-farm-text-muted: rgba(255,250,236,0.65);
	--numarkt-dark-farm-text-dim:   rgba(255,250,236,0.45);
	--numarkt-dark-farm-text-hover: #FFFDF4;

	--numarkt-focus-ring: #FED828;
	--numarkt-lime-dark: #E3FDCB;
	--numarkt-gold: #FED828;

	--numarkt-radius-card: 18px;
	--numarkt-radius-pill: 50px;
	--numarkt-easing: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.numarkt-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	border: none;
	border-radius: var(--numarkt-radius-pill);
	padding: 8px 14px 8px 22px;
	font-family: 'Soho Gothic Pro', system-ui, sans-serif;
	font-weight: 500;
	font-size: 15px;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	height: 44px;
	box-sizing: border-box;
	position: relative;
	transition: background 0.5s var(--numarkt-easing),
				background-image 0.5s var(--numarkt-easing);
}
.numarkt-btn:active { transform: scale(0.99); transition-duration: 0.15s; }
.numarkt-btn:focus-visible { outline: 2px solid var(--numarkt-focus-ring); outline-offset: 3px; }

.numarkt-btn-phone { padding: 8px 22px 8px 14px; }

.numarkt-icon {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	background: transparent;
	position: relative;
	transition: background 0.5s var(--numarkt-easing);
}
.numarkt-icon::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--numarkt-circle-bg, rgba(255, 255, 255, 0.18));
	opacity: 0;
	transform: scale(0.6);
	transition: opacity 0.6s var(--numarkt-easing),
				transform 0.6s var(--numarkt-easing);
}
.numarkt-btn.in-view .numarkt-icon::before { opacity: 1; transform: scale(1); }
.numarkt-btn:hover .numarkt-icon::before { opacity: 0; transform: scale(1.3); }
.numarkt-icon svg { position: relative; z-index: 1; }

/* Division primaries (light surfaces) */
.numarkt-btn-mat-pri {
	background-image: linear-gradient(160deg, #019443 0%, #017A37 50%, #013D1C 100%);
	color: #fff;
	--numarkt-circle-bg: rgba(255, 255, 255, 0.18);
}
.numarkt-btn-mat-pri:hover {
	background-image: linear-gradient(160deg, #017A37 0%, #015C2A 50%, #012E15 100%);
	color: #fff;
}
.numarkt-btn-con-pri {
	background-image: linear-gradient(160deg, #5C4900 0%, #3D3000 50%, #241C00 100%);
	color: #FED828;
	--numarkt-circle-bg: rgba(254, 216, 40, 0.25);
}
.numarkt-btn-con-pri:hover {
	background-image: linear-gradient(160deg, #3D3000 0%, #241C00 50%, #100E00 100%);
	color: #FED828;
}
.numarkt-btn-farm-pri {
	background-image: linear-gradient(160deg, #8a7555 0%, #6B5B3A 50%, #4a3d28 100%);
	color: #F0EBE0;
	--numarkt-circle-bg: rgba(240, 235, 224, 0.2);
}
.numarkt-btn-farm-pri:hover {
	background-image: linear-gradient(160deg, #6B5B3A 0%, #4a3d28 50%, #2e2418 100%);
	color: #F0EBE0;
}

/* Dark-section primary — division own text colour (mint / sand / cream)
   so it reads as "this CTA belongs to this division", not a generic lime/gold. */
.numarkt-btn-dark { background-image: none; }
.numarkt-btn-dark-mat {
	background: var(--numarkt-dark-mat-text);
	color: var(--numarkt-dark-mat);
	--numarkt-circle-bg: rgba(26, 46, 30, 0.15);
}
.numarkt-btn-dark-mat:hover {
	background: var(--numarkt-dark-mat-text-hover);
	color: var(--numarkt-dark-mat);
}
.numarkt-btn-dark-con {
	background: var(--numarkt-dark-con-text);
	color: var(--numarkt-dark-con);
	--numarkt-circle-bg: rgba(61, 48, 0, 0.18);
}
.numarkt-btn-dark-con:hover {
	background: var(--numarkt-dark-con-text-hover);
	color: var(--numarkt-dark-con);
}
.numarkt-btn-dark-farm {
	background: var(--numarkt-dark-farm-text);
	color: var(--numarkt-dark-farm);
	--numarkt-circle-bg: rgba(74, 61, 40, 0.18);
}
.numarkt-btn-dark-farm:hover {
	background: var(--numarkt-dark-farm-text-hover);
	color: var(--numarkt-dark-farm);
}

/* Arrow bob (right-bounce) on dark-section button hover */
.numarkt-btn-dark .numarkt-icon svg {
	transition: transform 0.5s var(--numarkt-easing);
}
.numarkt-btn-dark:hover .numarkt-icon svg {
	animation: numarkt-arrow-bob 0.7s var(--numarkt-easing);
}
@keyframes numarkt-arrow-bob {
	0%   { transform: translateX(0); }
	40%  { transform: translateX(4px); }
	70%  { transform: translateX(1px); }
	100% { transform: translateX(0); }
}

/* Ghost buttons — liquid wave fill */
.numarkt-ghost {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: transparent;
	border-radius: var(--numarkt-radius-pill);
	padding: 10px 22px;
	font-family: 'Soho Gothic Pro', system-ui, sans-serif;
	font-weight: 500;
	font-size: 15px;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	height: 44px;
	box-sizing: border-box;
	position: relative;
	overflow: hidden;
	isolation: isolate;
	transition: color 0.55s var(--numarkt-easing),
				border-color 0.5s var(--numarkt-easing);
}
.numarkt-ghost:focus-visible { outline: 2px solid var(--numarkt-focus-ring); outline-offset: 3px; }
.numarkt-ghost:active { transform: scale(0.99); transition-duration: 0.15s; }
.numarkt-ghost > * { position: relative; z-index: 2; }

.numarkt-ghost-fill {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 200%;
	z-index: 0;
	pointer-events: none;
	transform: translateY(100%);
	transition: transform 0.7s var(--numarkt-easing);
}
.numarkt-ghost:hover .numarkt-ghost-fill { transform: translateY(0); }
.numarkt-ghost:hover { color: var(--numarkt-fill-text, #fff); }

.numarkt-ghost-mat  { color: #017A37; border: 1px solid rgba(1, 122, 55, 0.35);  --numarkt-fill-text: #fff; }
.numarkt-ghost-mat:hover  { border-color: #013D1C; }
.numarkt-ghost-con  { color: #8F6B1F; border: 1px solid rgba(61, 48, 0, 0.35);  --numarkt-fill-text: #FED828; }
.numarkt-ghost-con:hover  { border-color: #3D3000; }
.numarkt-ghost-farm { color: #5A4B2E; border: 1px solid rgba(90, 75, 46, 0.35); --numarkt-fill-text: #F0EBE0; }
.numarkt-ghost-farm:hover { border-color: #6B5B3A; }

/* Dark-section ghost — light-tint text + border so it reads on a dark surface;
   the wave fills with the light tint and text inverts to the dark surface on hover. */
.numarkt-ghost-dark-mat  { color: #E8F4E9; border: 1px solid rgba(232, 244, 233, 0.30); --numarkt-fill-text: #1A2E1E; }
.numarkt-ghost-dark-mat:hover  { border-color: #E8F4E9; }
.numarkt-ghost-dark-con  { color: #F5EEDB; border: 1px solid rgba(245, 238, 219, 0.30); --numarkt-fill-text: #3D3000; }
.numarkt-ghost-dark-con:hover  { border-color: #F5EEDB; }
.numarkt-ghost-dark-farm { color: #FFFAEC; border: 1px solid rgba(255, 250, 236, 0.30); --numarkt-fill-text: #6B5B3A; }
.numarkt-ghost-dark-farm:hover { border-color: #FFFAEC; }

/* Underline links */
.numarkt-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: transparent;
	border: none;
	border-radius: 0;
	padding: 10px 4px 6px;
	border-bottom: 1px solid currentColor;
	font-family: 'Soho Gothic Pro', system-ui, sans-serif;
	font-weight: 500;
	font-size: 15px;
	text-decoration: none;
	cursor: pointer;
	transition: color 0.5s var(--numarkt-easing);
}
.numarkt-link svg { transition: transform 0.5s var(--numarkt-easing); }
.numarkt-link:hover svg { transform: translateX(4px); }
.numarkt-link:focus-visible { outline: 2px solid var(--numarkt-focus-ring); outline-offset: 3px; }

.numarkt-link-mat  { color: #017A37; } .numarkt-link-mat:hover  { color: #017A37; }
.numarkt-link-con  { color: #8F6B1F; } .numarkt-link-con:hover  { color: #8F6B1F; }
.numarkt-link-farm { color: #5A4B2E; } .numarkt-link-farm:hover { color: #5A4B2E; }
.numarkt-link-dark { color: #fff; border-bottom-color: rgba(255, 255, 255, 0.5); }
.numarkt-link-dark:hover { color: var(--numarkt-lime-dark); }

/* Button row — for primary + optional link inline */
.numarkt-btn-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}
.numarkt-btn-row.numarkt-align-center { justify-content: center; }
.numarkt-btn-row.numarkt-align-right { justify-content: flex-end; }

/* ==========================================================================
   Shared eyebrow + section-header wrapper + lead
   Retained after Section Header widget removal — still referenced by
   Card Grid (per-item eyebrow), Posts Grid (per-post eyebrow), and
   Stats Bar (wrapper + eyebrow + lead + lead-light dark variant).
   ========================================================================== */

.numarkt-section-header { display: block; }
.numarkt-section-header.numarkt-align-center { text-align: center; }

.numarkt-eyebrow {
	display: inline-block;
	font-family: 'Soho Gothic Pro', system-ui, sans-serif;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 3px;
	text-transform: uppercase;
	line-height: 1;
	margin: 0 0 24px 0;
}
.numarkt-eyebrow-mat       { color: #017A37; }
.numarkt-eyebrow-con       { color: #8F6B1F; }
.numarkt-eyebrow-farm      { color: #5A4B2E; }
.numarkt-eyebrow-neutral   { color: var(--numarkt-text-heading); }
.numarkt-eyebrow-dark-mat  { color: var(--numarkt-dark-mat-text); }
.numarkt-eyebrow-dark-con  { color: var(--numarkt-dark-con-text); }
.numarkt-eyebrow-dark-farm { color: var(--numarkt-dark-farm-text); }
.numarkt-eyebrow-dark-neutral { color: var(--numarkt-dark-mat-text); }

/* Card / spec-card / video-card titles in light mode follow their division.
   Each widget renders a base `.numarkt-[type]-[short]` modifier class on its
   wrapper (added in 2.7.1). */
.numarkt-card-con      .numarkt-card-title,
.numarkt-video-card-con .numarkt-video-card-title,
.numarkt-spec-card-con  .numarkt-spec-card-title { color: #013D1C; }

.numarkt-card-farm      .numarkt-card-title,
.numarkt-video-card-farm .numarkt-video-card-title,
.numarkt-spec-card-farm  .numarkt-spec-card-title { color: #013D1C; }

.numarkt-section-header-lead {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 20px;
	font-weight: 300;
	line-height: 1.55;
	color: var(--numarkt-text-body);
	margin: 0;
}
/* Defensive: WoodMart / WooCommerce content styles can add a left padding /
   margin / text-indent to bare <p> elements. Scope under the wrapper so this
   wins on specificity. */
.numarkt-section-header .numarkt-section-header-lead {
	padding-left: 0;
	margin-left: 0;
	text-indent: 0;
}
.numarkt-section-header.numarkt-align-center .numarkt-section-header-lead {
	margin-left: auto;
	margin-right: auto;
}
.numarkt-lead-light { color: rgba(255, 255, 255, 0.7); }

@media (max-width: 1024px) {
	.numarkt-section-header-lead { font-size: 18px; }
}
@media (max-width: 640px) {
	.numarkt-section-header-lead { font-size: 17px; }
}

/* ==========================================================================
   Card base — shared `.numarkt-card` used by Product Spec Card, Card Grid
   items, and Posts Grid items. Matches the reference design: 26px title,
   mint image placeholder, 17px body, 32/30/36 padding.
   ========================================================================== */

.numarkt-card {
	display: flex;
	flex-direction: column;
	background: var(--numarkt-surface-white);
	border-radius: var(--numarkt-radius-card);
	overflow: hidden;
	text-decoration: none;
	transition: transform 0.6s var(--numarkt-easing);
	color: inherit;
	height: 100%;
}

/* Optional 1px card outline. On by the widget's "Outline" toggle; the colour is
   set per division + light/dark mode via the modifier classes below. */
.numarkt-outline { border: 1px solid var(--numarkt-outline-color, rgba(0, 0, 0, 0.12)) !important; }
.numarkt-outline-mat  { --numarkt-outline-color: rgba(1, 122, 55, 0.22); }
.numarkt-outline-con  { --numarkt-outline-color: rgba(143, 107, 31, 0.22); }
.numarkt-outline-farm { --numarkt-outline-color: rgba(90, 75, 46, 0.22); }
.numarkt-outline-dark-mat  { --numarkt-outline-color: rgba(232, 244, 233, 0.18); }
.numarkt-outline-dark-con  { --numarkt-outline-color: rgba(245, 238, 219, 0.18); }
.numarkt-outline-dark-farm { --numarkt-outline-color: rgba(255, 250, 236, 0.18); }
.numarkt-card:hover { transform: translateY(-4px); }
.numarkt-card-img-wrap {
	aspect-ratio: var(--numarkt-card-img-ratio, 4 / 3) !important;
	width: 100%;
	overflow: hidden;
	background: var(--numarkt-surface-mint);    /* tinted placeholder during image load */
	flex-shrink: 0;
}
.numarkt-card-img {
	/* !important is intentional defence against WoodMart / WP responsive-image rules
	   that set "img { height: auto; max-width: 100%; }" globally and break object-fit. */
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	object-fit: cover !important;
	object-position: center center;
	display: block !important;
	transition: transform 0.8s var(--numarkt-easing);
}
.numarkt-card:hover .numarkt-card-img { transform: scale(1.04); }
.numarkt-card-body {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 32px 30px 36px;
	flex: 1 1 auto;
}

.numarkt-card-title {
	font-family: 'Soho Gothic Pro', system-ui, sans-serif;
	font-size: 26px;
	font-weight: 700;
	color: var(--numarkt-text-heading);
	margin: 0 0 14px;
	letter-spacing: -0.5px;
	line-height: 1.2;
}
.numarkt-card-text {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 18px;
	font-weight: 300;
	color: var(--numarkt-text-body);
	line-height: 1.55;
	margin: 0 0 28px;
}

.numarkt-card-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: 'Soho Gothic Pro', system-ui, sans-serif;
	font-size: 15px;
	font-weight: 500;
	color: var(--numarkt-cta-color, #013D1C);
	border-bottom: 1px solid var(--numarkt-cta-color, #013D1C);
	padding-bottom: 4px;
	align-self: flex-start;
	transition: color 0.5s var(--numarkt-easing),
				border-color 0.5s var(--numarkt-easing);
}
.numarkt-card-cta svg {
	stroke-width: 2.5;
	transition: transform 0.5s var(--numarkt-easing);
}
.numarkt-card:hover .numarkt-card-cta { color: var(--numarkt-cta-hover, #017A37); border-color: var(--numarkt-cta-hover, #017A37); }
.numarkt-card:hover .numarkt-card-cta svg { transform: translateX(4px); }

/* Per-division CTA tokens — applied via wrapper class */
.numarkt-card-mat,
.numarkt-card-grid-item-mat   { --numarkt-cta-color: #017A37; --numarkt-cta-hover: #017A37; }
.numarkt-card-con,
.numarkt-card-grid-item-con   { --numarkt-cta-color: #8F6B1F; --numarkt-cta-hover: #8F6B1F; }
.numarkt-card-farm,
.numarkt-card-grid-item-farm  { --numarkt-cta-color: #5A4B2E; --numarkt-cta-hover: #5A4B2E; }

/* Card Grid titles: black at rest, division colour on hover. Dark cards override
   the resting colour to the division light tint via .numarkt-card-dark-* below.
   --numarkt-title-hover feeds the shared light-mode title-hover rule. */
.numarkt-card-grid-item .numarkt-card-title { color: #1A1A1A; }
.numarkt-card-grid-item-mat  { --numarkt-title-hover: #017A37; }
.numarkt-card-grid-item-con  { --numarkt-title-hover: #8F6B1F; }
.numarkt-card-grid-item-farm { --numarkt-title-hover: #5A4B2E; }

.numarkt-card-tinted-mat  { background: var(--numarkt-surface-mint); }
.numarkt-card-tinted-mat:hover  .numarkt-card-cta { color: #017A37; border-color: #017A37; }
.numarkt-card-tinted-con  { background: var(--numarkt-surface-sand); }
.numarkt-card-tinted-con:hover  .numarkt-card-cta { color: #8F6B1F; border-color: #8F6B1F; }
.numarkt-card-tinted-farm { background: var(--numarkt-surface-cream); }
.numarkt-card-tinted-farm:hover .numarkt-card-cta { color: #5A4B2E; border-color: #5A4B2E; }

/* ==========================================================================
   Dark Mode card — per-division surface (deep version of the division's
   own colour, NOT generic near-black). Text uses the matching light tint:
   mint on forest, sand on earth, cream on tussock. Apple-style flip.
   ========================================================================== */
.numarkt-card-dark-mat  { background: var(--numarkt-dark-mat); }
.numarkt-card-dark-con  { background: var(--numarkt-dark-con); }
.numarkt-card-dark-farm { background: var(--numarkt-dark-farm); }

/* Gradient variant (opt-in via 'use_gradient: yes' setting) */
.numarkt-card-dark-mat.numarkt-use-gradient  { background: var(--numarkt-dark-mat-grad); }
.numarkt-card-dark-con.numarkt-use-gradient  { background: var(--numarkt-dark-con-grad); }
.numarkt-card-dark-farm.numarkt-use-gradient { background: var(--numarkt-dark-farm-grad); }

/* Image placeholder bg on dark cards — a deeper tint that reads as
   "loading" without flashing pale. Each division gets its own placeholder. */
.numarkt-card-dark-mat  .numarkt-card-img-wrap { background: rgba(232, 244, 233, 0.06); }
.numarkt-card-dark-con  .numarkt-card-img-wrap { background: rgba(245, 238, 219, 0.06); }
.numarkt-card-dark-farm .numarkt-card-img-wrap { background: rgba(255, 250, 236, 0.06); }

/* Titles — division text colour (mint/sand/cream), not pure white.
   This keeps the dark card visibly part of its division. */
.numarkt-card-dark-mat  .numarkt-card-title { color: var(--numarkt-dark-mat-text); }
.numarkt-card-dark-con  .numarkt-card-title { color: var(--numarkt-dark-con-text); }
.numarkt-card-dark-farm .numarkt-card-title { color: var(--numarkt-dark-farm-text); }

/* Body text — muted variant of the division text */
.numarkt-card-dark-mat  .numarkt-card-text { color: var(--numarkt-dark-mat-text-muted); }
.numarkt-card-dark-con  .numarkt-card-text { color: var(--numarkt-dark-con-text-muted); }
.numarkt-card-dark-farm .numarkt-card-text { color: var(--numarkt-dark-farm-text-muted); }

/* CTA: division text colour as the default state (mirrors light card's
   forest green default), brighter on hover. No more lime/gold here. */
.numarkt-card-dark-mat  .numarkt-card-cta { color: var(--numarkt-dark-mat-text);  border-bottom-color: var(--numarkt-dark-mat-text); }
.numarkt-card-dark-con  .numarkt-card-cta { color: var(--numarkt-dark-con-text);  border-bottom-color: var(--numarkt-dark-con-text); }
.numarkt-card-dark-farm .numarkt-card-cta { color: var(--numarkt-dark-farm-text); border-bottom-color: var(--numarkt-dark-farm-text); }
.numarkt-card-dark-mat:hover  .numarkt-card-cta { color: var(--numarkt-dark-mat-text-hover);  border-bottom-color: var(--numarkt-dark-mat-text-hover); }
.numarkt-card-dark-con:hover  .numarkt-card-cta { color: var(--numarkt-dark-con-text-hover);  border-bottom-color: var(--numarkt-dark-con-text-hover); }
.numarkt-card-dark-farm:hover .numarkt-card-cta { color: var(--numarkt-dark-farm-text-hover); border-bottom-color: var(--numarkt-dark-farm-text-hover); }

/* ==========================================================================
   Post-it testimonial (simple, no video)
   ========================================================================== */

.numarkt-postit {
	background: var(--numarkt-surface-mint);
	border-radius: var(--numarkt-radius-card);
	padding: 36px 32px 26px;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	transition: transform 0.6s var(--numarkt-easing);
}
.numarkt-postit:hover { transform: translateY(-4px); }
.numarkt-postit-sand  { background: var(--numarkt-surface-sand); }
.numarkt-postit-cream { background: var(--numarkt-surface-cream); }

.numarkt-postit-quote {
	font-family: 'Soho Gothic Pro', system-ui, sans-serif;
	font-size: 22px;
	font-weight: 700;
	color: var(--numarkt-text-heading);
	line-height: 1.3;
	letter-spacing: -0.4px;
	margin: 0 0 24px;
}
.numarkt-postit-name {
	font-family: 'Soho Gothic Pro', system-ui, sans-serif;
	font-size: 17px;
	font-weight: 700;
	color: var(--numarkt-text-heading);
	margin-bottom: 4px;
}
.numarkt-postit-meta {
	display: flex;
	gap: 10px;
	font-family: 'Soho Gothic Pro', system-ui, sans-serif;
	font-size: 14px;
	font-weight: 300;
	color: var(--numarkt-text-body);
	flex-wrap: wrap;
}

/* ==========================================================================
   Video Testimonial (click-to-play)
   ========================================================================== */

.numarkt-vt {
	background: var(--numarkt-surface-mint);
	border-radius: var(--numarkt-radius-card);
	padding: 36px 32px;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 340px;
	transition: transform 0.6s var(--numarkt-easing);
}
.numarkt-vt:hover { transform: translateY(-4px); }
.numarkt-vt-sand  { background: var(--numarkt-surface-sand); }
.numarkt-vt-cream { background: var(--numarkt-surface-cream); }

/* Division accent variable — drives video placeholder background and result accent */
.numarkt-vt-mat,
.numarkt-video-card-mat   { --numarkt-accent: #017A37; }
.numarkt-vt-con,
.numarkt-video-card-con   { --numarkt-accent: #8F6B1F; }
.numarkt-vt-farm,
.numarkt-video-card-farm  { --numarkt-accent: #5A4B2E; }

.numarkt-vt-video {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9 !important;
	border-radius: 14px;
	overflow: hidden;
	margin-bottom: 20px;
	background: var(--numarkt-accent, #013D1C);
	cursor: pointer;
}
.numarkt-vt-video img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	object-fit: cover !important;
	object-position: center center;
	display: block !important;
	transition: transform 0.6s var(--numarkt-easing);
}
.numarkt-vt:hover .numarkt-vt-video img { transform: scale(1.03); }
.numarkt-vt-video:focus-visible,
.numarkt-video-card-frame:focus-visible {
	outline: 2px solid var(--numarkt-focus-ring);
	outline-offset: 3px;
}
.numarkt-vt-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgba(1, 122, 55, 0.92);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
	transition: transform 0.5s var(--numarkt-easing), background 0.5s var(--numarkt-easing);
}
.numarkt-vt-video:hover .numarkt-vt-play {
	transform: translate(-50%, -50%) scale(1.06);
	background: rgba(1, 122, 55, 1);
}
.numarkt-vt-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.numarkt-vt-quote {
	font-family: 'Soho Gothic Pro', system-ui, sans-serif;
	font-size: 20px;
	font-weight: 700;
	color: var(--numarkt-text-heading);
	line-height: 1.35;
	letter-spacing: -0.3px;
	margin: 0 0 24px;
}
.numarkt-vt-footer {
	border-top: 0.5px solid rgba(1, 61, 28, 0.15);
	padding-top: 16px;
}
.numarkt-vt-name {
	font-family: 'Soho Gothic Pro', system-ui, sans-serif;
	font-size: 16px;
	font-weight: 700;
	color: var(--numarkt-text-heading);
}
.numarkt-vt-meta {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 13px;
	font-weight: 300;
	color: var(--numarkt-text-body);
	margin-top: 4px;
	line-height: 1.4;
}
.numarkt-vt-result {
	font-family: 'Soho Gothic Pro', system-ui, sans-serif;
	font-size: 12px;
	font-weight: 500;
	color: var(--numarkt-accent, #017A37);
	margin-top: 10px;
	letter-spacing: 1px;
	text-transform: uppercase;
}

/* ==========================================================================
   Video Card (standalone — single video, no testimonial)
   ========================================================================== */

.numarkt-video-card {
	display: block;
	border-radius: var(--numarkt-radius-card);
	overflow: hidden;
	background: var(--numarkt-surface-white);
}
.numarkt-video-card-frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9 !important;
	overflow: hidden;
	background: var(--numarkt-accent, #013D1C);
	cursor: pointer;
}
.numarkt-video-card-frame img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	object-fit: cover !important;
	object-position: center center;
	display: block !important;
	transition: transform 0.6s var(--numarkt-easing);
}
.numarkt-video-card-frame:hover img { transform: scale(1.03); }
.numarkt-video-card-frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.numarkt-video-card-frame .numarkt-vt-play { background: rgba(1, 122, 55, 0.92); }
.numarkt-video-card-frame:hover .numarkt-vt-play {
	transform: translate(-50%, -50%) scale(1.06);
	background: rgba(1, 122, 55, 1);
}
.numarkt-video-card-body { padding: 24px 28px 28px; }
.numarkt-video-card-title {
	font-family: 'Soho Gothic Pro', system-ui, sans-serif;
	font-size: 22px;
	font-weight: 700;
	color: var(--numarkt-text-heading);
	margin: 0 0 8px;
	letter-spacing: -0.3px;
	line-height: 1.25;
}
.numarkt-video-card-caption {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 15px;
	font-weight: 300;
	color: var(--numarkt-text-body);
	margin: 0;
	line-height: 1.5;
}

/* ==========================================================================
   Spec lines
   ========================================================================== */

.numarkt-spec-list { list-style: none; padding: 0; margin: 0; }
.numarkt-spec-line {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 11px 0;
	border-bottom: 0.5px solid rgba(1, 61, 28, 0.1);
	font-family: 'Soho Gothic Pro', system-ui, sans-serif;
	font-size: 15px;
}
.numarkt-spec-line:last-child { border-bottom: none; }
.numarkt-spec-line .numarkt-spec-label { color: var(--numarkt-text-body); font-weight: 300; }
.numarkt-spec-line .numarkt-spec-value {
	color: var(--numarkt-text-heading);
	font-weight: 500;
	text-align: right;
	max-width: 60%;
}

/* Dark variants */
.numarkt-spec-line-dark-mat  { border-bottom-color: rgba(232, 244, 233, 0.15); }
.numarkt-spec-line-dark-con  { border-bottom-color: rgba(245, 238, 219, 0.15); }
.numarkt-spec-line-dark-farm { border-bottom-color: rgba(255, 250, 236, 0.15); }
.numarkt-spec-line-dark-mat  .numarkt-spec-label { color: var(--numarkt-dark-mat-text-dim); }
.numarkt-spec-line-dark-con  .numarkt-spec-label { color: var(--numarkt-dark-con-text-dim); }
.numarkt-spec-line-dark-farm .numarkt-spec-label { color: var(--numarkt-dark-farm-text-dim); }
.numarkt-spec-line-dark-mat  .numarkt-spec-value { color: var(--numarkt-dark-mat-text); }
.numarkt-spec-line-dark-con  .numarkt-spec-value { color: var(--numarkt-dark-con-text); }
.numarkt-spec-line-dark-farm .numarkt-spec-value { color: var(--numarkt-dark-farm-text); }

/* ==========================================================================
   Stats Bar — eyebrow + lead + dividerd row of stats
   ========================================================================== */

.numarkt-stats-bar {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
}
.numarkt-stats-bar-item {
	flex: 1 1 0;
	min-width: 140px;
	padding: 0 32px;
	text-align: center;
	position: relative;
}
/* Vertical divider between items (skip after last) */
.numarkt-stats-bar-item + .numarkt-stats-bar-item::before {
	content: '';
	position: absolute;
	left: 0;
	top: 8px;
	bottom: 8px;
	width: 1px;
	background: rgba(255, 255, 255, 0.18);
}
/* Light-mode divider tint */
.numarkt-stats-bar-light .numarkt-stats-bar-item + .numarkt-stats-bar-item::before {
	background: rgba(1, 61, 28, 0.18);
}
.numarkt-stats-bar-num {
	font-family: 'Soho Gothic Pro', system-ui, sans-serif;
	font-size: 32px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.5px;
}
/* Dark mode — division text */
.numarkt-stats-bar-num-mat  { color: var(--numarkt-dark-mat-text); }
.numarkt-stats-bar-num-con  { color: var(--numarkt-dark-con-text); }
.numarkt-stats-bar-num-farm { color: var(--numarkt-dark-farm-text); }
/* Light mode — deep division */
.numarkt-stats-bar-num-light-mat  { color: #017A37; }
.numarkt-stats-bar-num-light-con  { color: #8F6B1F; }
.numarkt-stats-bar-num-light-farm { color: #5A4B2E; }

.numarkt-stats-bar-label {
	font-family: 'Soho Gothic Pro', system-ui, sans-serif;
	font-size: 14px;
	font-weight: 300;
	color: rgba(255, 255, 255, 0.75);
	margin-top: 10px;
	letter-spacing: 0.3px;
	line-height: 1.4;
}
/* Dark mode division-specific label muted */
.numarkt-stats-bar-mat  .numarkt-stats-bar-label { color: var(--numarkt-dark-mat-text-muted); }
.numarkt-stats-bar-con  .numarkt-stats-bar-label { color: var(--numarkt-dark-con-text-muted); }
.numarkt-stats-bar-farm .numarkt-stats-bar-label { color: var(--numarkt-dark-farm-text-muted); }
.numarkt-stats-bar-label-light { color: var(--numarkt-text-body); }

/* Dividers — match the division text colour at low opacity */
.numarkt-stats-bar-mat  .numarkt-stats-bar-item + .numarkt-stats-bar-item::before { background: rgba(232, 244, 233, 0.18); }
.numarkt-stats-bar-con  .numarkt-stats-bar-item + .numarkt-stats-bar-item::before { background: rgba(245, 238, 219, 0.18); }
.numarkt-stats-bar-farm .numarkt-stats-bar-item + .numarkt-stats-bar-item::before { background: rgba(255, 250, 236, 0.18); }

@media (max-width: 768px) {
	.numarkt-stats-bar { flex-wrap: wrap; }
	.numarkt-stats-bar-item { flex: 1 1 50%; padding: 16px 16px; min-width: 120px; }
	.numarkt-stats-bar-item + .numarkt-stats-bar-item::before { display: none; }
	.numarkt-stats-bar-num { font-size: 28px; }
}

/* ==========================================================================
   Stats Cards (big number + caption on light surfaces)
   ========================================================================== */

.numarkt-stats-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 20px;
	width: 100%;
}
.numarkt-stats-card {
	background: var(--numarkt-surface-base);
	border-radius: var(--numarkt-radius-card);
	padding: 36px 32px;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 240px;
	transition: transform 0.6s var(--numarkt-easing);
}
.numarkt-stats-card:hover { transform: translateY(-4px); }
.numarkt-stats-card-white { background: var(--numarkt-surface-white); }
.numarkt-stats-card-mint  { background: var(--numarkt-surface-mint); }
.numarkt-stats-card-sand  { background: var(--numarkt-surface-sand); }
.numarkt-stats-card-cream { background: var(--numarkt-surface-cream); }

.numarkt-stats-card-num {
	font-family: 'Soho Gothic Pro', system-ui, sans-serif;
	font-size: 56px;
	font-weight: 700;
	color: var(--numarkt-text-heading);
	line-height: 1;
	letter-spacing: -1.5px;
}
.numarkt-stats-card-headline {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 17px;
	font-weight: 500;
	color: var(--numarkt-text-heading);
	margin-top: 14px;
	line-height: 1.3;
}
.numarkt-stats-card-body {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 15px;
	font-weight: 300;
	color: var(--numarkt-text-body);
	line-height: 1.6;
	margin: 24px 0 0;
}

@media (max-width: 768px) {
	.numarkt-stats-card-num { font-size: 44px; letter-spacing: -1px; }
}

/* ==========================================================================
   Dividers
   ========================================================================== */

.numarkt-divider {
	height: 1px;
	width: 120px;
	margin: 0 auto;
	border: none;
}
.numarkt-divider-mat  { background: linear-gradient(90deg, transparent, rgba(1, 122, 55, 0.3), transparent); }
.numarkt-divider-con  { background: linear-gradient(90deg, transparent, rgba(143, 107, 31, 0.4), transparent); }
.numarkt-divider-farm { background: linear-gradient(90deg, transparent, rgba(90, 75, 46, 0.35), transparent); }

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.numarkt-btn, .numarkt-ghost, .numarkt-link, .numarkt-card,
	.numarkt-postit, .numarkt-vt, .numarkt-video-card-frame,
	.numarkt-card-img, .numarkt-icon, .numarkt-icon::before,
	.numarkt-ghost-fill, .numarkt-card-cta,
	.numarkt-card-cta svg, .numarkt-link svg,
	.numarkt-stats-card, .numarkt-vt-video img, .numarkt-vt-play,
	.numarkt-video-card-frame img, .numarkt-btn-dark .numarkt-icon svg {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}


/* ==========================================================================
   Product Spec Card
   ========================================================================== */

.numarkt-spec-card {
	/* base .numarkt-card already applied */
}
.numarkt-spec-card-img-wrap {
	position: relative;
}
.numarkt-spec-card-badge {
	position: absolute;
	top: 16px;
	left: 16px;
	font-family: 'Soho Gothic Pro', system-ui, sans-serif;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 2px;
	text-transform: uppercase;
	border-radius: 20px;
	padding: 5px 12px;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(4px);
}
.numarkt-spec-card-badge-mat  { color: #017A37; border: 1px solid rgba(1, 122, 55, 0.18); }
.numarkt-spec-card-badge-con  { color: #8F6B1F; border: 1px solid rgba(143, 107, 31, 0.30); }
.numarkt-spec-card-badge-farm { color: #5A4B2E; border: 1px solid rgba(90, 75, 46, 0.22); }

/* Defensive: WooCommerce / WoodMart set text-align:center directly on
   product <p> elements. Pin the spec-card body to left so all of its
   content lines up consistently regardless of the theme's specificity. */
.numarkt-spec-card .numarkt-spec-card-body { text-align: left; }

/* Tighter vertical rhythm + cross-card alignment. The body stacks from the top
   (not space-between, which spread the lines apart) and the CTA is pushed to the
   bottom, so CTAs line up across side-by-side cards; the title reserves ~2 lines
   so the descriptions below start on the same line too. */
.numarkt-spec-card-body { justify-content: flex-start; }
/* Title + description are clamped to a FIXED number of lines (not just a
   min-height) so the spec list starts on the same line on every card in a row,
   regardless of copy length. Longer copy truncates with "…" — raise the line
   counts + matching min-heights if your copy needs more room. */
.numarkt-spec-card-title {
	margin: 0 0 3px !important;
	line-height: 1.2;
	min-height: 2.4em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.numarkt-spec-card .numarkt-card-text {
	margin: 0 0 14px;
	line-height: 1.5;
	min-height: 4.5em;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.numarkt-spec-card-specs { margin: 0 0 16px; }
.numarkt-spec-card .numarkt-card-cta {
	margin-top: auto;
	font-size: 18px;
	border-bottom-color: transparent;
	transition: border-color 0.2s var(--numarkt-easing), color 0.2s var(--numarkt-easing);
}
/* Underline appears ONLY when hovering the View link itself. The higher-
   specificity card-hover rule keeps it transparent on whole-card hover
   (overriding .numarkt-card:hover .numarkt-card-cta); !important on the link
   hover makes it win when the pointer is actually on the link. */
.numarkt-spec-card.numarkt-card:hover .numarkt-card-cta { border-bottom-color: transparent; }
.numarkt-spec-card .numarkt-card-cta:hover { border-bottom-color: currentColor !important; }

/* ==========================================================================
   Audit additions — light/dark variants for stats, post-it, video, divider
   ========================================================================== */

/* Stats Cards — dark variant per division */
.numarkt-stats-card-dark-mat  { background: var(--numarkt-dark-mat); }
.numarkt-stats-card-dark-con  { background: var(--numarkt-dark-con); }
.numarkt-stats-card-dark-farm { background: var(--numarkt-dark-farm); }
.numarkt-stats-card-dark-mat.numarkt-use-gradient  { background: var(--numarkt-dark-mat-grad); }
.numarkt-stats-card-dark-con.numarkt-use-gradient  { background: var(--numarkt-dark-con-grad); }
.numarkt-stats-card-dark-farm.numarkt-use-gradient { background: var(--numarkt-dark-farm-grad); }

/* Post-it — dark variants per division */
.numarkt-postit-dark-mat  { background: var(--numarkt-dark-mat);  border: 1px solid rgba(232, 244, 233, 0.08); }
.numarkt-postit-dark-con  { background: var(--numarkt-dark-con);  border: 1px solid rgba(245, 238, 219, 0.10); }
.numarkt-postit-dark-farm { background: var(--numarkt-dark-farm); border: 1px solid rgba(255, 250, 236, 0.10); }
/* Gradient option */
.numarkt-postit-dark-mat.numarkt-use-gradient  { background: var(--numarkt-dark-mat-grad); }
.numarkt-postit-dark-con.numarkt-use-gradient  { background: var(--numarkt-dark-con-grad); }
.numarkt-postit-dark-farm.numarkt-use-gradient { background: var(--numarkt-dark-farm-grad); }

.numarkt-postit-dark-mat  .numarkt-postit-quote { color: var(--numarkt-dark-mat-text); }
.numarkt-postit-dark-con  .numarkt-postit-quote { color: var(--numarkt-dark-con-text); }
.numarkt-postit-dark-farm .numarkt-postit-quote { color: var(--numarkt-dark-farm-text); }
.numarkt-postit-dark-mat  .numarkt-postit-name  { color: var(--numarkt-dark-mat-text); }
.numarkt-postit-dark-con  .numarkt-postit-name  { color: var(--numarkt-dark-con-text); }
.numarkt-postit-dark-farm .numarkt-postit-name  { color: var(--numarkt-dark-farm-text); }
.numarkt-postit-dark-mat  .numarkt-postit-meta  { color: var(--numarkt-dark-mat-text-dim); }
.numarkt-postit-dark-con  .numarkt-postit-meta  { color: var(--numarkt-dark-con-text-dim); }
.numarkt-postit-dark-farm .numarkt-postit-meta  { color: var(--numarkt-dark-farm-text-dim); }

/* Video Testimonial — dark variants per division */
.numarkt-vt-dark-mat  { background: var(--numarkt-dark-mat);  border: 1px solid rgba(232, 244, 233, 0.08); }
.numarkt-vt-dark-con  { background: var(--numarkt-dark-con);  border: 1px solid rgba(245, 238, 219, 0.10); }
.numarkt-vt-dark-farm { background: var(--numarkt-dark-farm); border: 1px solid rgba(255, 250, 236, 0.10); }
.numarkt-vt-dark-mat.numarkt-use-gradient  { background: var(--numarkt-dark-mat-grad); }
.numarkt-vt-dark-con.numarkt-use-gradient  { background: var(--numarkt-dark-con-grad); }
.numarkt-vt-dark-farm.numarkt-use-gradient { background: var(--numarkt-dark-farm-grad); }

.numarkt-vt-dark-mat  .numarkt-vt-quote  { color: var(--numarkt-dark-mat-text); }
.numarkt-vt-dark-con  .numarkt-vt-quote  { color: var(--numarkt-dark-con-text); }
.numarkt-vt-dark-farm .numarkt-vt-quote  { color: var(--numarkt-dark-farm-text); }
.numarkt-vt-dark-mat  .numarkt-vt-footer { border-top-color: rgba(232, 244, 233, 0.15); }
.numarkt-vt-dark-con  .numarkt-vt-footer { border-top-color: rgba(245, 238, 219, 0.15); }
.numarkt-vt-dark-farm .numarkt-vt-footer { border-top-color: rgba(255, 250, 236, 0.15); }
.numarkt-vt-dark-mat  .numarkt-vt-name   { color: var(--numarkt-dark-mat-text); }
.numarkt-vt-dark-con  .numarkt-vt-name   { color: var(--numarkt-dark-con-text); }
.numarkt-vt-dark-farm .numarkt-vt-name   { color: var(--numarkt-dark-farm-text); }
.numarkt-vt-dark-mat  .numarkt-vt-meta   { color: var(--numarkt-dark-mat-text-dim); }
.numarkt-vt-dark-con  .numarkt-vt-meta   { color: var(--numarkt-dark-con-text-dim); }
.numarkt-vt-dark-farm .numarkt-vt-meta   { color: var(--numarkt-dark-farm-text-dim); }
.numarkt-vt-dark-mat  .numarkt-vt-result { color: var(--numarkt-dark-mat-text); }
.numarkt-vt-dark-con  .numarkt-vt-result { color: var(--numarkt-dark-con-text); }
.numarkt-vt-dark-farm .numarkt-vt-result { color: var(--numarkt-dark-farm-text); }

/* Video Card — dark variants per division */
.numarkt-video-card-dark-mat  { background: var(--numarkt-dark-mat); }
.numarkt-video-card-dark-con  { background: var(--numarkt-dark-con); }
.numarkt-video-card-dark-farm { background: var(--numarkt-dark-farm); }
.numarkt-video-card-dark-mat.numarkt-use-gradient  { background: var(--numarkt-dark-mat-grad); }
.numarkt-video-card-dark-con.numarkt-use-gradient  { background: var(--numarkt-dark-con-grad); }
.numarkt-video-card-dark-farm.numarkt-use-gradient { background: var(--numarkt-dark-farm-grad); }
.numarkt-video-card-dark-mat  .numarkt-video-card-title { color: var(--numarkt-dark-mat-text); }
.numarkt-video-card-dark-con  .numarkt-video-card-title { color: var(--numarkt-dark-con-text); }
.numarkt-video-card-dark-farm .numarkt-video-card-title { color: var(--numarkt-dark-farm-text); }
.numarkt-video-card-dark-mat  .numarkt-video-card-caption { color: var(--numarkt-dark-mat-text-muted); }
.numarkt-video-card-dark-con  .numarkt-video-card-caption { color: var(--numarkt-dark-con-text-muted); }
.numarkt-video-card-dark-farm .numarkt-video-card-caption { color: var(--numarkt-dark-farm-text-muted); }

/* Divider — division-tinted on dark */
.numarkt-divider-dark-mode.numarkt-divider-mat  { background: linear-gradient(90deg, transparent, rgba(232, 244, 233, 0.45), transparent); }
.numarkt-divider-dark-mode.numarkt-divider-con  { background: linear-gradient(90deg, transparent, rgba(245, 238, 219, 0.45), transparent); }
.numarkt-divider-dark-mode.numarkt-divider-farm { background: linear-gradient(90deg, transparent, rgba(255, 250, 236, 0.45), transparent); }

/* ==========================================================================
   Grid-align: stretch the Elementor widget wrapper to full column height
   so cards (height:100%) actually fill their column when in a row.
   This keeps every card in a row the same height regardless of content.
   ========================================================================== */
.elementor-widget-numarkt-product-spec-card,
.elementor-widget-numarkt-postit,
.elementor-widget-numarkt-video-testimonial,
.elementor-widget-numarkt-video-card {
	height: 100%;
	display: flex;
	flex-direction: column;
	align-self: stretch;
}
.elementor-widget-numarkt-product-spec-card > .elementor-widget-container,
.elementor-widget-numarkt-postit > .elementor-widget-container,
.elementor-widget-numarkt-video-testimonial > .elementor-widget-container,
.elementor-widget-numarkt-video-card > .elementor-widget-container {
	height: 100%;
	flex: 1;
	display: flex;
	flex-direction: column;
}
.elementor-widget-numarkt-product-spec-card > .elementor-widget-container > .numarkt-card,
.elementor-widget-numarkt-postit > .elementor-widget-container > .numarkt-postit,
.elementor-widget-numarkt-video-testimonial > .elementor-widget-container > .numarkt-vt,
.elementor-widget-numarkt-video-card > .elementor-widget-container > .numarkt-video-card {
	flex: 1;
}




/* ==========================================================================
   Product Grid — repeater of square-image product cards (one widget)
   ========================================================================== */

.numarkt-product-grid-item {
	display: flex;
	flex-direction: column;
	background: var(--numarkt-surface-white);
	border-radius: var(--numarkt-radius-card);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	height: 100%;
	transition: transform 0.6s var(--numarkt-easing);
}
.numarkt-product-grid-item:hover { transform: translateY(-4px); }
.numarkt-product-grid-item:focus-visible { outline: 2px solid var(--numarkt-focus-ring); outline-offset: 3px; }

/* Square image placeholder — division-tinted. Ratio overridable via --numarkt-card-img-ratio. */
.numarkt-product-grid-img-wrap {
	aspect-ratio: var(--numarkt-card-img-ratio, 1 / 1) !important;
	overflow: hidden;
	background: var(--numarkt-surface-mint);
	flex-shrink: 0;
}
.numarkt-product-grid-mat  .numarkt-product-grid-img-wrap { background: var(--numarkt-surface-mint); }
.numarkt-product-grid-con  .numarkt-product-grid-img-wrap { background: var(--numarkt-surface-sand); }
.numarkt-product-grid-farm .numarkt-product-grid-img-wrap { background: var(--numarkt-surface-cream); }

.numarkt-product-grid-img {
	/* !important defence — see .numarkt-card-img note above. */
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	object-fit: cover !important;
	object-position: center center;
	display: block !important;
	transition: transform 0.8s var(--numarkt-easing);
}
.numarkt-product-grid-item:hover .numarkt-product-grid-img { transform: scale(1.04); }

.numarkt-product-grid-body {
	padding: 22px 22px 24px;
	display: flex;
	flex-direction: column;
	flex: 1;
}
.numarkt-product-grid-title {
	font-family: 'Soho Gothic Pro', system-ui, sans-serif;
	font-size: 20px;
	font-weight: 700;
	color: #1A1A1A;
	margin: 0 0 6px;
	letter-spacing: -0.3px;
	line-height: 1.2;
}
.numarkt-product-grid-footer {
	margin-top: auto;
	display: flex;
	align-items: flex-end;
	gap: 12px;
}
.numarkt-product-grid-price-line {
	display: flex;
	align-items: baseline;
	gap: 6px;
	font-family: 'Soho Gothic Pro', system-ui, sans-serif;
}
.numarkt-product-grid-price {
	font-size: 22px;
	font-weight: 700;
	color: var(--numarkt-text-heading);
	letter-spacing: -0.3px;
}
.numarkt-product-grid-price-suffix {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 13px;
	font-weight: 300;
	color: var(--numarkt-text-body);
}

/* Light mode — price carries the division signature accent (title stays heading green) */
.numarkt-product-grid-mat  .numarkt-product-grid-price { color: #017A37; }
.numarkt-product-grid-con  .numarkt-product-grid-price { color: #8F6B1F; }
.numarkt-product-grid-farm .numarkt-product-grid-price { color: #5A4B2E; }

/* Title hover follows the division (feeds the shared card title-hover rule).
   Without this the product-grid title fell back to matting #017A37 for every
   division, flashing matting green on construction / farm cards. */
.numarkt-product-grid-mat  { --numarkt-title-hover: #017A37; }
.numarkt-product-grid-con  { --numarkt-title-hover: #8F6B1F; }
.numarkt-product-grid-farm { --numarkt-title-hover: #5A4B2E; }

/* Dark mode — title hovers to the brighter light tint (not the dark accent,
   which would be near-invisible on the dark card). Same variable the shared
   card title-hover rule reads; the dark class sits on the same container as
   the light one and comes later, so it wins in dark mode. */
.numarkt-product-grid-dark-mat  { --numarkt-title-hover: var(--numarkt-dark-mat-text-hover); }
.numarkt-product-grid-dark-con  { --numarkt-title-hover: var(--numarkt-dark-con-text-hover); }
.numarkt-product-grid-dark-farm { --numarkt-title-hover: var(--numarkt-dark-farm-text-hover); }

/* Hover CTA — hidden at rest, fades up on card hover / keyboard focus. Colour is
   the division accent (light) / bright light tint (dark) via --numarkt-title-hover,
   so it reads on both surfaces. Reserves its own line height, so no layout jump. */
.numarkt-product-grid-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
	flex-shrink: 0;
	white-space: nowrap;
	font-family: 'Soho Gothic Pro', system-ui, sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: -0.1px;
	text-decoration: none;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity 0.3s var(--numarkt-easing), transform 0.3s var(--numarkt-easing);
}
/* Colour stays the division accent (light) / bright tint (dark) in every state —
   pinned so the theme's a:hover can't turn it black. */
.numarkt-product-grid-cta,
.numarkt-product-grid-cta:link,
.numarkt-product-grid-cta:visited,
.numarkt-product-grid-cta:hover,
.numarkt-product-grid-cta:focus {
	color: var(--numarkt-title-hover, #017A37) !important;
}
.numarkt-product-grid-item:hover .numarkt-product-grid-cta,
.numarkt-product-grid-item:focus-within .numarkt-product-grid-cta {
	opacity: 1;
	transform: translateY(0);
}

/* Dark mode — division-dark card surface, light-tint text (overrides light rules above) */
.numarkt-product-grid-dark-mat  .numarkt-product-grid-item { background: var(--numarkt-dark-mat); }
.numarkt-product-grid-dark-con  .numarkt-product-grid-item { background: var(--numarkt-dark-con); }
.numarkt-product-grid-dark-farm .numarkt-product-grid-item { background: var(--numarkt-dark-farm); }
.numarkt-product-grid-dark-mat.numarkt-use-gradient  .numarkt-product-grid-item { background: var(--numarkt-dark-mat-grad); }
.numarkt-product-grid-dark-con.numarkt-use-gradient  .numarkt-product-grid-item { background: var(--numarkt-dark-con-grad); }
.numarkt-product-grid-dark-farm.numarkt-use-gradient .numarkt-product-grid-item { background: var(--numarkt-dark-farm-grad); }
.numarkt-product-grid-dark-mat  .numarkt-product-grid-title,
.numarkt-product-grid-dark-mat  .numarkt-product-grid-price  { color: var(--numarkt-dark-mat-text); }
.numarkt-product-grid-dark-con  .numarkt-product-grid-title,
.numarkt-product-grid-dark-con  .numarkt-product-grid-price  { color: var(--numarkt-dark-con-text); }
.numarkt-product-grid-dark-farm .numarkt-product-grid-title,
.numarkt-product-grid-dark-farm .numarkt-product-grid-price  { color: var(--numarkt-dark-farm-text); }
.numarkt-product-grid-dark-mat  .numarkt-product-grid-price-suffix { color: var(--numarkt-dark-mat-text-muted); }
.numarkt-product-grid-dark-con  .numarkt-product-grid-price-suffix { color: var(--numarkt-dark-con-text-muted); }
.numarkt-product-grid-dark-farm .numarkt-product-grid-price-suffix { color: var(--numarkt-dark-farm-text-muted); }

/* Stretch the Elementor wrapper so all items match the tallest in row */
.elementor-widget-numarkt-product-grid > .elementor-widget-container { display: block; }

/* ==========================================================================
   Card Grid — repeater of card-style items (one widget)
   Reuses .numarkt-card styling from the Service Card. .numarkt-card-grid-item
   is just a marker class for the wrapper, no extra styling needed.
   ========================================================================== */
.numarkt-card-grid .numarkt-card { height: 100%; }

/* ==========================================================================
   Posts Grid — neutral WP-post grid (no division identity)
   Reuses the .numarkt-card shell, overrides CTA colour to heading-green,
   adds a neutral dark variant for placement on dark sections.

   Markup is <ul><li><article> for semantic post-listing — strip default
   list styling so the visual output matches other card grids.
   ========================================================================== */
ul.numarkt-posts-grid {
	list-style: none;
	padding: 0;
	margin: 0;
}
.numarkt-posts-grid-cell {
	display: flex;
	margin: 0;
	padding: 0;
}
.numarkt-posts-grid-cell > article {
	width: 100%;
	display: flex;
	flex-direction: column;
}
.numarkt-posts-grid .numarkt-card { height: 100%; }

.numarkt-posts-grid-item {
	--numarkt-cta-color: var(--numarkt-text-heading);
	--numarkt-cta-hover: #017A37;
}

/* ----------------------------------------------------------------------------
   Block-link pattern (a11y + text selection)
   The card is a <div> (not <a>), only the title is the link.
   The title's anchor stretches via ::after to cover the card, so clicks
   anywhere on the card-but-not-on-text trigger the link. Text elements
   sit in a higher stacking context (z-index:1) so they can be selected
   directly. Browsers distinguish click-to-navigate from drag-to-select
   via mouse movement threshold, so this Just Works.
   See: https://inclusive-components.design/cards/
   ---------------------------------------------------------------------------- */
.numarkt-card-blocklink {
	position: relative;
	cursor: pointer;
}

.numarkt-card-blocklink .numarkt-card-link,
.numarkt-card-blocklink .numarkt-card-link:link,
.numarkt-card-blocklink .numarkt-card-link:visited,
.numarkt-card-blocklink .numarkt-card-link:active {
	color: inherit !important;
	text-decoration: none !important;
	background-image: none;
}
/* Anchor hover sometimes gets clobbered by theme rules (WoodMart, Woo, etc).
   Force inherit on hover so the title's own colour rule wins.
   Note: the more specific hover rules further down (.numarkt-card-blocklink:hover
   .numarkt-card-link) override this with the actual hover colour. */
.numarkt-card-blocklink .numarkt-card-link:hover,
.numarkt-card-blocklink .numarkt-card-link:focus {
	text-decoration: none !important;
}
.numarkt-card-blocklink .numarkt-card-link::after {
	content: "";
	position: absolute;
	inset: 0;
	/* z-index:1 (not 0) so the overlay sits above the image and any background
	   element that might paint above static content. pointer-events:auto is
	   defence against themes that set pointer-events:none on pseudo-elements. */
	z-index: 1;
	pointer-events: auto;
}

/* Text and CTA paint above the stretched ::after so they're selectable
   and the CTA's hover/focus state is interactive. Covers every card variant:
   card grid + posts grid (.numarkt-card-*), product grid
   (.numarkt-product-grid-*), product spec (.numarkt-spec-card-*). */
.numarkt-card-blocklink .numarkt-eyebrow,
.numarkt-card-blocklink .numarkt-card-title,
.numarkt-card-blocklink .numarkt-card-text,
.numarkt-card-blocklink .numarkt-card-cta,
.numarkt-card-blocklink .numarkt-product-grid-title,
.numarkt-card-blocklink .numarkt-product-grid-price-line,
.numarkt-card-blocklink .numarkt-spec-card-title,
.numarkt-card-blocklink .numarkt-spec-list {
	position: relative;
	/* z-index:2 — above the link's ::after overlay (z-index:1) so text remains
	   selectable and the CTA's own hover state still triggers. */
	z-index: 2;
}

/* Focus ring on the card via :focus-within so keyboard users see the same
   affordance the mouse hover provides. Uses the design system's focus colour. */
.numarkt-card-blocklink:focus-within {
	outline: 2px solid var(--numarkt-focus-ring);
	outline-offset: 3px;
}
.numarkt-card-blocklink .numarkt-card-link:focus,
.numarkt-card-blocklink .numarkt-card-link:focus-visible {
	outline: none;
}

/* Title hover colour shift mirrors the CTA — picks up the per-card token.
   Targets the heading and the inner anchor to beat theme a:hover specificity.
   Light cards: division-aware hover (or heading-green for neutral).
   Dark cards: use the per-division text-hover tokens (mint/sand/cream tints).
   !important is intentional defence against WoodMart / Woo theme rules
   that use !important on global a:hover. */

/* Light-mode hover */
.numarkt-card-blocklink:not(.numarkt-card-dark-mat):not(.numarkt-card-dark-con):not(.numarkt-card-dark-farm):not(.numarkt-card-dark-neutral):hover .numarkt-card-title,
.numarkt-card-blocklink:not(.numarkt-card-dark-mat):not(.numarkt-card-dark-con):not(.numarkt-card-dark-farm):not(.numarkt-card-dark-neutral):hover .numarkt-product-grid-title,
.numarkt-card-blocklink:not(.numarkt-card-dark-mat):not(.numarkt-card-dark-con):not(.numarkt-card-dark-farm):not(.numarkt-card-dark-neutral):hover .numarkt-spec-card-title,
.numarkt-card-blocklink:not(.numarkt-card-dark-mat):not(.numarkt-card-dark-con):not(.numarkt-card-dark-farm):not(.numarkt-card-dark-neutral):hover .numarkt-card-link {
	color: var(--numarkt-title-hover, var(--numarkt-cta-hover, #017A37)) !important;
	transition: color 0.5s var(--numarkt-easing);
}

/* Dark-mode hover — per division, uses the matching text-hover token */
.numarkt-card-dark-mat.numarkt-card-blocklink:hover .numarkt-card-title,
.numarkt-card-dark-mat.numarkt-card-blocklink:hover .numarkt-spec-card-title,
.numarkt-card-dark-mat.numarkt-card-blocklink:hover .numarkt-card-link {
	color: var(--numarkt-dark-mat-text-hover) !important;
	transition: color 0.5s var(--numarkt-easing);
}
.numarkt-card-dark-con.numarkt-card-blocklink:hover .numarkt-card-title,
.numarkt-card-dark-con.numarkt-card-blocklink:hover .numarkt-spec-card-title,
.numarkt-card-dark-con.numarkt-card-blocklink:hover .numarkt-card-link {
	color: var(--numarkt-dark-con-text-hover) !important;
	transition: color 0.5s var(--numarkt-easing);
}
.numarkt-card-dark-farm.numarkt-card-blocklink:hover .numarkt-card-title,
.numarkt-card-dark-farm.numarkt-card-blocklink:hover .numarkt-spec-card-title,
.numarkt-card-dark-farm.numarkt-card-blocklink:hover .numarkt-card-link {
	color: var(--numarkt-dark-farm-text-hover) !important;
	transition: color 0.5s var(--numarkt-easing);
}
.numarkt-card-dark-neutral.numarkt-card-blocklink:hover .numarkt-card-title,
.numarkt-card-dark-neutral.numarkt-card-blocklink:hover .numarkt-card-link {
	color: var(--numarkt-dark-mat-text-hover) !important;
	transition: color 0.5s var(--numarkt-easing);
}

/* ==========================================================================
   LINKED CARDS (2.7.16) — discrete, crawlable links
   --------------------------------------------------------------------------
   Each card has up to three real <a href> elements pointing at the same
   destination:
     - .numarkt-card-img-link / .numarkt-product-grid-img-link /
       .numarkt-spec-card-img-link — wraps the image. Redundant for screen
       readers (aria-hidden + tabindex=-1 in markup), but a genuine link so
       the browser shows the URL on hover and Google sees it.
     - .numarkt-card-link — the title link (primary, labelled).
     - .numarkt-card-cta — the CTA, now an <a>.
   Only these are links; body copy, eyebrow, price, specs etc. are plain.
   The whole-card click overlay is gone — clicks land on the real links.

   Hover treatment matches the old block-link cards (title colour shift, CTA
   colour + arrow nudge, image zoom) so the visual design is unchanged.
   ========================================================================== */

/* The image link is a transparent wrapper — it must not change layout. */
.numarkt-card-img-link,
.numarkt-product-grid-img-link,
.numarkt-spec-card-img-link {
	display: block;
	width: 100%;
	height: 100%;
	line-height: 0;
	text-decoration: none;
	cursor: pointer;
}

/* Title + CTA links: strip the theme's underline / colour, inherit ours.
   Mirrors the old .numarkt-card-link reset so WoodMart/Woo can't intrude. */
.numarkt-card-linked .numarkt-card-link,
.numarkt-card-linked .numarkt-card-link:link,
.numarkt-card-linked .numarkt-card-link:visited,
.numarkt-card-linked .numarkt-card-link:active,
.numarkt-card-linked .numarkt-card-link:hover,
.numarkt-card-linked .numarkt-card-link:focus {
	color: inherit !important;
	text-decoration: none !important;
	background-image: none;
}
.numarkt-card-linked .numarkt-card-cta,
.numarkt-card-linked .numarkt-card-cta:hover {
	text-decoration: none !important;
}

/* Keyboard focus affordance — same focus ring the block-link cards used,
   now driven by any inner link receiving focus. */
.numarkt-card-linked:focus-within {
	outline: 2px solid var(--numarkt-focus-ring);
	outline-offset: 3px;
}
.numarkt-card-linked .numarkt-card-link:focus,
.numarkt-card-linked .numarkt-card-link:focus-visible,
.numarkt-card-linked .numarkt-card-img-link:focus,
.numarkt-card-linked .numarkt-product-grid-img-link:focus,
.numarkt-card-linked .numarkt-spec-card-img-link:focus {
	outline: none;
}

/* Title hover colour — light mode (division-aware, heading-green default). */
.numarkt-card-linked:not(.numarkt-card-dark-mat):not(.numarkt-card-dark-con):not(.numarkt-card-dark-farm):not(.numarkt-card-dark-neutral):hover .numarkt-card-title,
.numarkt-card-linked:not(.numarkt-card-dark-mat):not(.numarkt-card-dark-con):not(.numarkt-card-dark-farm):not(.numarkt-card-dark-neutral):hover .numarkt-product-grid-title,
.numarkt-card-linked:not(.numarkt-card-dark-mat):not(.numarkt-card-dark-con):not(.numarkt-card-dark-farm):not(.numarkt-card-dark-neutral):hover .numarkt-spec-card-title,
.numarkt-card-linked:not(.numarkt-card-dark-mat):not(.numarkt-card-dark-con):not(.numarkt-card-dark-farm):not(.numarkt-card-dark-neutral):hover .numarkt-card-link {
	color: var(--numarkt-title-hover, var(--numarkt-cta-hover, #017A37)) !important;
	transition: color 0.5s var(--numarkt-easing);
}

/* Title hover colour — dark mode, per division. */
.numarkt-card-dark-mat.numarkt-card-linked:hover .numarkt-card-title,
.numarkt-card-dark-mat.numarkt-card-linked:hover .numarkt-spec-card-title,
.numarkt-card-dark-mat.numarkt-card-linked:hover .numarkt-card-link {
	color: var(--numarkt-dark-mat-text-hover) !important;
}
.numarkt-card-dark-con.numarkt-card-linked:hover .numarkt-card-title,
.numarkt-card-dark-con.numarkt-card-linked:hover .numarkt-spec-card-title,
.numarkt-card-dark-con.numarkt-card-linked:hover .numarkt-card-link {
	color: var(--numarkt-dark-con-text-hover) !important;
}
.numarkt-card-dark-farm.numarkt-card-linked:hover .numarkt-card-title,
.numarkt-card-dark-farm.numarkt-card-linked:hover .numarkt-spec-card-title,
.numarkt-card-dark-farm.numarkt-card-linked:hover .numarkt-card-link {
	color: var(--numarkt-dark-farm-text-hover) !important;
}
.numarkt-card-dark-neutral.numarkt-card-linked:hover .numarkt-card-title,
.numarkt-card-dark-neutral.numarkt-card-linked:hover .numarkt-card-link {
	color: var(--numarkt-dark-mat-text-hover) !important;
}


/* Dark mode — neutral surface (no division gradient).
   Uses --numarkt-surface-dark (#0D1F10) with mint text — the same neutral
   dark used elsewhere in the system. */
.numarkt-card-dark-neutral {
	background: var(--numarkt-surface-dark);
	border: 1px solid rgba(232, 244, 233, 0.08);
}
.numarkt-card-dark-neutral .numarkt-card-img-wrap { background: rgba(232, 244, 233, 0.06); }
.numarkt-card-dark-neutral .numarkt-card-title    { color: var(--numarkt-dark-mat-text); }
.numarkt-card-dark-neutral .numarkt-card-text     { color: var(--numarkt-dark-mat-text-muted); }
.numarkt-card-dark-neutral .numarkt-card-cta {
	color: var(--numarkt-dark-mat-text);
	border-bottom-color: var(--numarkt-dark-mat-text);
}
.numarkt-card-dark-neutral:hover .numarkt-card-cta {
	color: var(--numarkt-dark-mat-text-hover);
	border-bottom-color: var(--numarkt-dark-mat-text-hover);
}

/* Posts Grid dark mode — card heading + excerpt are white (not the mint tint).
   Scoped to the posts grid so other neutral-dark cards keep the tint. */
.numarkt-posts-grid-dark .numarkt-card-title { color: #FFFFFF; }
.numarkt-posts-grid-dark .numarkt-card-text { color: rgba(255, 255, 255, 0.8); }
.numarkt-posts-grid-dark .numarkt-card-dark-neutral.numarkt-card-linked:hover .numarkt-card-title,
.numarkt-posts-grid-dark .numarkt-card-dark-neutral.numarkt-card-linked:hover .numarkt-card-link { color: #FFFFFF; }

/* Empty state */
.numarkt-posts-grid-empty {
	padding: 48px 24px;
	text-align: center;
	font-family: 'Soho Gothic Pro', system-ui, sans-serif;
	font-size: 15px;
	color: var(--numarkt-text-muted);
	background: var(--numarkt-surface-white);
	border: 1px dashed rgba(0, 0, 0, 0.08);
	border-radius: 12px;
	width: 100%;
}
.numarkt-posts-grid-empty-dark {
	background: var(--numarkt-surface-dark);
	color: var(--numarkt-dark-mat-text-muted);
	border-color: rgba(232, 244, 233, 0.12);
}

/* ----------------------------------------------------------------------------
   Video popup (lightbox) — YouTube in a centred overlay (matches the OPG page)
   ---------------------------------------------------------------------------- */
.numarkt-yt-modal {
	position: fixed;
	inset: 0;
	z-index: 1100;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px 20px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.28s ease;
}
.numarkt-yt-modal.is-open {
	opacity: 1;
	pointer-events: auto;
}
.numarkt-yt-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.88);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	opacity: 0;
	transition: opacity 0.32s ease;
}
.numarkt-yt-modal.is-open .numarkt-yt-modal-backdrop { opacity: 1; }
.numarkt-yt-modal-shell {
	position: relative;
	width: 100%;
	max-width: 1200px;
	aspect-ratio: 16 / 9;
	max-height: calc(100vh - 120px);
	background: #000;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6);
	transform: scale(0.96);
	transition: transform 0.36s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.numarkt-yt-modal.is-open .numarkt-yt-modal-shell { transform: scale(1); }
.numarkt-yt-modal-shell iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: none;
}
.numarkt-yt-modal .numarkt-yt-modal-close {
	position: absolute !important;
	top: 20px !important;
	right: 20px !important;
	left: auto !important;
	bottom: auto !important;
	z-index: 10;
	width: 44px !important;
	height: 44px !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 50% !important;
	background: rgba(0, 0, 0, 0.55) !important;
	border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
	box-shadow: none !important;
	color: #fff !important;
	cursor: pointer;
	display: flex !important;
	align-items: center;
	justify-content: center;
	line-height: 1 !important;
	transition: background 0.2s ease, transform 0.25s ease, border-color 0.2s ease;
	-webkit-tap-highlight-color: transparent;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	-webkit-appearance: none;
	appearance: none;
}
.numarkt-yt-modal .numarkt-yt-modal-close svg {
	width: 20px !important;
	height: 20px !important;
	display: block;
}
.numarkt-yt-modal .numarkt-yt-modal-close:hover {
	background: rgba(0, 0, 0, 0.85) !important;
	border-color: #F5EEDB !important;
	color: #F5EEDB !important;
	transform: rotate(90deg);
}
.numarkt-yt-modal .numarkt-yt-modal-close:focus-visible {
	outline: 2px solid #F5EEDB;
	outline-offset: 3px;
}
@media (max-width: 768px) {
	.numarkt-yt-modal { padding: 16px; }
	.numarkt-yt-modal-shell { max-height: calc(100vh - 80px); }
	.numarkt-yt-modal .numarkt-yt-modal-close { top: 14px !important; right: 14px !important; width: 40px !important; height: 40px !important; }
}

/* ----------------------------------------------------------------------------
   Posts Grid filter bar — buttons on desktop, dropdown on mobile
   ---------------------------------------------------------------------------- */
.numarkt-posts-filter {
	margin-bottom: 32px;
}
.numarkt-posts-filter-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.numarkt-posts-filter-btn {
	display: inline-flex;
	align-items: center;
	padding: 8px 18px;
	font-family: 'Soho Gothic Pro', system-ui, sans-serif;
	font-size: 14px;
	font-weight: 500;
	color: #1A1A1A;
	background: transparent;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 999px;
	text-decoration: none;
	cursor: pointer;
	transition: color 0.2s var(--numarkt-easing), background 0.2s var(--numarkt-easing), border-color 0.2s var(--numarkt-easing);
}
.numarkt-posts-filter-btn:hover {
	border-color: rgba(0, 0, 0, 0.45);
}
.numarkt-posts-filter-btn.is-active {
	color: #FFFFFF;
	background: #017A37;
	border-color: #017A37;
}
.numarkt-posts-filter-select {
	display: none;
	width: 100%;
	padding: 12px 16px;
	font-family: 'Soho Gothic Pro', system-ui, sans-serif;
	font-size: 15px;
	color: #1A1A1A;
	background: #FFFFFF;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 8px;
}
.numarkt-posts-filter-dark .numarkt-posts-filter-btn {
	color: #FFFFFF;
	border-color: rgba(255, 255, 255, 0.25);
}
.numarkt-posts-filter-dark .numarkt-posts-filter-btn:hover {
	border-color: rgba(255, 255, 255, 0.55);
}
.numarkt-posts-filter-dark .numarkt-posts-filter-btn.is-active {
	background: #017A37;
	border-color: #017A37;
}
.numarkt-posts-filter-dark .numarkt-posts-filter-select {
	color: #FFFFFF;
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.25);
}
@media (max-width: 767px) {
	.numarkt-posts-filter-buttons { display: none; }
	.numarkt-posts-filter-select { display: block; }
}

/* ----------------------------------------------------------------------------
   Posts Grid pagination — plain numbers + arrows, no dots, no boxes
   ---------------------------------------------------------------------------- */
.numarkt-pagination {
	width: 100%;
	margin-top: 56px;
	display: flex;
	justify-content: center;
}
.numarkt-pagination-list {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	align-items: center;
	list-style: none;
	padding: 0;
	margin: 0;
}
.numarkt-pagination-item {
	display: flex;
}
.numarkt-pagination-item .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 40px;
	height: 40px;
	padding: 0 8px;
	font-family: 'Soho Gothic Pro', system-ui, sans-serif;
	font-size: 15px;
	font-weight: 400;
	color: #1A1A1A;
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	text-decoration: none;
	transition: color 0.2s var(--numarkt-easing);
}
/* Kill any box or arrow the theme injects via pseudo-elements. */
.numarkt-pagination-item .page-numbers::before,
.numarkt-pagination-item .page-numbers::after {
	content: none !important;
}
.numarkt-pagination-item a.page-numbers:hover {
	color: #555555;
}
.numarkt-pagination-item a.page-numbers:focus-visible {
	outline: 2px solid var(--numarkt-focus-ring);
	outline-offset: 2px;
}
.numarkt-pagination-item .page-numbers.current {
	color: #017A37;
}

/* Prev / next — just the arrow; the label is screen-reader only */
.numarkt-pagination-arrow {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}
.numarkt-pagination-arrow-prev {
	transform: scaleX(-1);
}
.numarkt-pagination-label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Dark sections — same plain style, light text; hover dims to light grey */
.numarkt-pagination-dark .page-numbers { color: #FFFFFF; }
.numarkt-pagination-dark a.page-numbers:hover { color: rgba(255, 255, 255, 0.6); }
.numarkt-pagination-dark .page-numbers.current { color: #6FCF97; }

/* ==========================================================================
   MOBILE POLISH — covers widgets that don't already have their own breakpoints.
   Reduces internal padding on small screens, drops over-large text, stacks
   2-up grids inside cards to single column on very narrow viewports.
   ========================================================================== */

@media (max-width: 640px) {
	/* Card body padding — slightly tighter on small screens */
	.numarkt-card-body { padding: 26px 22px 28px; }
	.numarkt-product-grid-body { padding: 18px 18px 20px; }
	.numarkt-product-grid-title { font-size: 18px; }
	.numarkt-product-grid-price { font-size: 20px; }

	/* Section header — lead margins tighter */
	.numarkt-section-header-lead { margin-top: 16px; }

	/* Spec card — drop title size in case it overflows */
	.numarkt-spec-card-title { font-size: 22px; }
	.numarkt-spec-card-body { padding: 22px; }
}

@media (max-width: 420px) {
	/* Card body title shrinks further to avoid wrapping awkwardly */
	.numarkt-card-title { font-size: 22px; }
}

/* Make all card grids leave a sensible side margin on phones so cards
   don't kiss the screen edge */
@media (max-width: 480px) {
	.numarkt-product-grid,
	.numarkt-card-grid {
		gap: 16px;
	}
}

/* ==========================================================================
   Unified grid column system (used by card-grid, product-grid)
   Desktop: honour the column count exactly.
   Tablet (≤1024px): drop to 3 columns max.
   Mobile (≤640px): stack to 1 column.
   align-items: stretch + height:100% on the children produces equal-height
   cards regardless of content length.
   ========================================================================== */
.numarkt-card-grid,
.numarkt-product-grid,
.numarkt-posts-grid {
	display: grid;
	width: 100%;
	gap: 24px;
	align-items: stretch;
}
.numarkt-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.numarkt-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.numarkt-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.numarkt-grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.numarkt-grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

@media (max-width: 1024px) {
	.numarkt-grid-cols-4,
	.numarkt-grid-cols-5,
	.numarkt-grid-cols-6 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
@media (max-width: 640px) {
	.numarkt-grid-cols-2,
	.numarkt-grid-cols-3,
	.numarkt-grid-cols-4,
	.numarkt-grid-cols-5,
	.numarkt-grid-cols-6 {
		grid-template-columns: 1fr;
	}
}

/* Grid children stretch to row height */
.numarkt-card-grid > *,
.numarkt-product-grid > *,
.numarkt-posts-grid > * {
	height: 100%;
	min-height: 0;
}