/* ==========================================================================
   40 — Components
   Shared pieces used by the ported pages: stats, tag lists, contact lists.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Stats — a number over its label.
   -------------------------------------------------------------------------- */

.jn-stat,
.wp-site-blocks .jn-stat {
	margin-block: 0;
}

/* Live's figure is gradient gold at 1.875rem over a 1.125rem label. */
.jn-sec .jn-stat__value,
.jn-sec p.jn-stat__value {
	margin: 0 0 .5rem;
	font-family: "Playfair Display", Georgia, serif;
	font-size: 1.875rem;
	font-weight: 700;
	line-height: 1.1;
	background: var( --jn-gradient-gold );
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.jn-sec .jn-stat__label,
.jn-sec p.jn-stat__label {
	margin: 0;
	color: hsl( var( --jn-foreground ) );
	font-size: 1.125rem;
	opacity: .9;
}

/* --------------------------------------------------------------------------
   Tag lists — specialties, certifications, trading terms.
   -------------------------------------------------------------------------- */

.jn-sec .jn-taglist {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.jn-sec .jn-taglist li {
	margin: 0;
	padding: .3125rem .75rem;
	border: 1px solid hsl( var( --jn-border ) );
	border-radius: 999px;
	background-color: hsl( var( --jn-muted ) );
	color: hsl( var( --jn-foreground ) );
	font-size: .8125rem;
	line-height: 1.4;
}

/* --------------------------------------------------------------------------
   Contact list
   -------------------------------------------------------------------------- */

.jn-sec .jn-contact {
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
}

.jn-sec .jn-contact li {
	margin: 0 0 .5rem;
	line-height: 1.45;
}

.jn-sec .jn-contact a {
	color: hsl( var( --jn-foreground ) );
	text-decoration: none;
}

.jn-sec .jn-contact a:hover {
	color: hsl( var( --jn-primary-text ) );
}

/* --------------------------------------------------------------------------
   Supplier hero
   -------------------------------------------------------------------------- */

.jn-sec--supplier-hero {
	border-bottom: 1px solid hsl( var( --jn-border ) );
	background: linear-gradient( 135deg, hsl( var( --jn-background-secondary ) ), hsl( var( --jn-background ) ) );
	padding-block: 3.5rem;
}

.jn-sec--supplier-hero .jn-grid {
	margin-top: 2rem;
}

.jn-sec .jn-lede {
	max-width: 46rem;
	color: hsl( var( --jn-muted-foreground ) );
	font-size: 1.125rem;
}

/* --------------------------------------------------------------------------
   Prose pages — the help and legal set.
   -------------------------------------------------------------------------- */

.jn-prose,
.wp-site-blocks .jn-prose {
	max-width: 52rem;
	margin-inline: auto;
}

.jn-prose h2 {
	margin-top: 2.5rem;
	font-size: 1.5rem;
}

.jn-prose h3 {
	margin-top: 1.75rem;
	font-size: 1.1875rem;
}

.jn-prose > *:first-child {
	margin-top: 0;
}

.jn-sec .jn-prose p,
.jn-sec .jn-prose li {
	color: hsl( var( --jn-muted-foreground ) );
	line-height: 1.7;
}

.jn-note {
	margin-top: 2.5rem;
	padding: 1rem 1.25rem;
	border: 1px solid hsl( var( --jn-primary ) / .3 );
	border-left-width: 3px;
	border-radius: .5rem;
	background-color: hsl( var( --jn-primary ) / .06 );
}

.jn-sec .jn-note p {
	margin: 0;
	color: hsl( var( --jn-foreground ) );
	font-size: .9375rem;
}

/* --------------------------------------------------------------------------
   Forms — the RFQ and contact forms.
   -------------------------------------------------------------------------- */

.jn-form {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 1.25rem;
	margin-top: 2rem;
}

.jn-form__row--wide,
.jn-form .jn-btnrow {
	grid-column: 1 / -1;
}

.jn-form__row label {
	display: block;
	margin-bottom: .375rem;
	font-size: .875rem;
	font-weight: 500;
	color: hsl( var( --jn-foreground ) );
}

.jn-form input,
.jn-form select,
.jn-form textarea {
	box-sizing: border-box;
	width: 100%;
	min-height: 2.75rem;
	padding: .5rem .75rem;
	border: 1px solid hsl( var( --jn-border ) );
	border-radius: .5rem;
	background-color: hsl( var( --jn-input ) );
	color: hsl( var( --jn-foreground ) );
	font-family: inherit;
	font-size: .9375rem;
}

.jn-form textarea {
	min-height: 7rem;
	resize: vertical;
}

.jn-form input:focus,
.jn-form select:focus,
.jn-form textarea:focus {
	border-color: var( --jn-gold-500 );
	outline: none;
}

.jn-form input:focus-visible,
.jn-form select:focus-visible,
.jn-form textarea:focus-visible {
	outline: 2px solid hsl( var( --jn-ring ) );
	outline-offset: 1px;
}

/* --------------------------------------------------------------------------
   Details/summary — the FAQ disclosures.
   -------------------------------------------------------------------------- */

.jn-sec .wp-block-details {
	margin: 0 0 .75rem;
	padding: 1rem 1.25rem;
	border: 1px solid hsl( var( --jn-border ) );
	border-radius: .75rem;
	background-color: hsl( var( --jn-card ) );
}

.jn-sec .wp-block-details summary {
	font-family: Inter, system-ui, sans-serif;
	font-size: 1rem;
	font-weight: 600;
	color: hsl( var( --jn-foreground ) );
	cursor: pointer;
}

.jn-sec .wp-block-details[ open ] summary {
	margin-bottom: .75rem;
	color: hsl( var( --jn-primary-text ) );
}

.jn-sec .wp-block-details p {
	margin: 0;
	color: hsl( var( --jn-muted-foreground ) );
	line-height: 1.7;
}

@media ( max-width: 640px ) {
	.jn-form {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
   Event filter bar — Trade Shows

   Live's controls are Radix widgets; these are native <input>/<select> so they
   work without JavaScript loaded and stay keyboard accessible.
   -------------------------------------------------------------------------- */

.jn-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem;
	margin: 0 0 3rem;
}

.jn-sec .jn-filters__search {
	flex: 1 1 20rem;
	position: relative;
	margin: 0;
}

.jn-sec .jn-filters__field {
	flex: 0 0 auto;
	margin: 0;
}

.jn-filters__input,
.jn-filters__select {
	box-sizing: border-box;
	width: 100%;
	min-height: 2.75rem;
	padding: 0 .875rem;
	border: 1px solid hsl( var( --jn-border ) );
	border-radius: .5rem;
	background-color: hsl( var( --jn-background ) );
	color: hsl( var( --jn-foreground ) );
	font-family: inherit;
	font-size: .9375rem;
}

.jn-filters__select {
	min-width: 10rem;
	padding-right: 2.25rem;
	background-image: var( --jn-chevron );
	background-repeat: no-repeat;
	background-position: right .75rem center;
	background-size: 1rem;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.jn-filters__input::placeholder {
	color: hsl( var( --jn-muted-foreground ) );
}

.jn-filters__input:focus,
.jn-filters__select:focus {
	border-color: var( --jn-gold-500 );
	outline: none;
}

.jn-filters__input:focus-visible,
.jn-filters__select:focus-visible {
	outline: 2px solid hsl( var( --jn-ring ) );
	outline-offset: 1px;
}

.jn-sec .jn-filters__empty {
	flex: 1 0 100%;
	margin: .5rem 0 0;
	color: hsl( var( --jn-muted-foreground ) );
}

@media ( max-width: 900px ) {
	.jn-sec .jn-filters__field,
	.jn-filters__select {
		flex: 1 1 10rem;
		min-width: 0;
	}
}

/* --------------------------------------------------------------------------
   Carousel

   Live translates a flex track with JavaScript. This is a scroll-snap track
   instead: it swipes on touch and scrolls with the keyboard on its own, so it
   works before — and without — the script. The arrows and dots are injected by
   trade-shows.js purely as enhancement.
   -------------------------------------------------------------------------- */

.jn-carousel,
.wp-site-blocks .jn-carousel {
	position: relative;
	margin-block: 0;
}

.jn-carousel__track,
.wp-site-blocks .jn-carousel__track {
	display: flex;
	gap: 1rem;
	margin-block: 0;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}

.jn-carousel__track::-webkit-scrollbar {
	display: none;
}

.jn-carousel__slide,
.wp-site-blocks .jn-carousel__slide {
	flex: 0 0 100%;
	min-width: 0;
	margin-block: 0;
	scroll-snap-align: center;
}

/* Arrows sit just outside the slide on wide screens, over it when narrow. */
.jn-carousel__nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	transform: translateY( -50% );
	border: 1px solid hsl( var( --jn-primary ) / .3 );
	border-radius: 999px;
	background-color: hsl( var( --jn-card ) );
	color: hsl( var( --jn-primary-text ) );
	cursor: pointer;
	transition: var( --jn-transition );
}

.jn-carousel__nav:hover {
	border-color: hsl( var( --jn-primary ) );
	background-color: hsl( var( --jn-primary ) / .12 );
}

.jn-carousel__nav[ disabled ] {
	opacity: .35;
	cursor: default;
}

.jn-carousel__nav--prev { left: -1.25rem; }
.jn-carousel__nav--next { right: -1.25rem; }

.jn-carousel__nav svg {
	width: 1.25rem;
	height: 1.25rem;
}

.jn-carousel__dots {
	display: flex;
	justify-content: center;
	gap: .5rem;
	margin-top: 1.5rem;
}

.jn-carousel__dot {
	width: .75rem;
	height: .75rem;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background-color: hsl( var( --jn-border ) );
	cursor: pointer;
	transition: var( --jn-transition );
}

.jn-carousel__dot[ aria-current="true" ] {
	background-color: var( --jn-gold-500 );
}

/* The tap target stays 44px even though the dot itself is 12px. */
.jn-carousel__dot::before {
	content: "";
	position: absolute;
	width: 2.75rem;
	height: 2.75rem;
	transform: translate( -50%, -50% );
	margin-left: .375rem;
	margin-top: .375rem;
}

.jn-carousel__dot {
	position: relative;
}

@media ( max-width: 1180px ) {
	.jn-carousel__nav--prev { left: .5rem; }
	.jn-carousel__nav--next { right: .5rem; }
}

/* --------------------------------------------------------------------------
   Avatar images — live's `w-24 h-24 object-cover rounded-full`
   -------------------------------------------------------------------------- */

.jn-sec .jn-img--avatar,
.jn-card .jn-img--avatar,
.jn-cell .jn-img--avatar {
	margin: 0 auto 1.5rem;
	text-align: center;
}

/* `.jn-cell .wp-block-image img` sets a full-width image at the same
   specificity and loads later, so the avatar rule names the block class too. */
.jn-sec .wp-block-image.jn-img--avatar img,
.jn-card .wp-block-image.jn-img--avatar img,
.jn-cell .wp-block-image.jn-img--avatar img {
	width: 6rem;
	height: 6rem;
	max-width: 6rem;
	max-height: none;
	margin-inline: auto;
	border-radius: 999px;
	object-fit: cover;
}

.jn-sec .wp-block-image.jn-img--w12 img { width: 3rem; height: 3rem; max-width: 3rem; }
.jn-sec .wp-block-image.jn-img--w16 img { width: 4rem; height: 4rem; max-width: 4rem; }
.jn-sec .wp-block-image.jn-img--w20 img { width: 5rem; height: 5rem; max-width: 5rem; }
.jn-sec .wp-block-image.jn-img--w24 img { width: 6rem; height: 6rem; max-width: 6rem; }
.jn-sec .wp-block-image.jn-img--w32 img { width: 8rem; height: 8rem; max-width: 8rem; }

/* --------------------------------------------------------------------------
   Sidebar + results split — the Suppliers listing
   -------------------------------------------------------------------------- */

.jn-split,
.wp-site-blocks .jn-split {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	margin-block: 0;
}

.jn-split > *,
.wp-site-blocks .jn-split > * {
	margin-block: 0;
	min-width: 0;
}

.jn-sidebar,
.wp-site-blocks .jn-sidebar {
	flex: 0 0 20rem;
	margin-block: 0;
}

.jn-col-main,
.wp-site-blocks .jn-col-main {
	flex: 1 1 auto;
	min-width: 0;
	margin-block: 0;
}

@media ( min-width: 1024px ) {
	.jn-split,
	.wp-site-blocks .jn-split {
		flex-direction: row;
		align-items: flex-start;
	}
}

/* Live's own responsive visibility: the compact filter toggle belongs to the
   narrow tier, the sidebar to the wide one. */
.jn-hide-lg,
.wp-site-blocks .jn-hide-lg {
	margin-block: 0;
}

.jn-show-lg,
.wp-site-blocks .jn-show-lg {
	display: none;
}

@media ( min-width: 1024px ) {
	.jn-hide-lg,
	.wp-site-blocks .jn-hide-lg {
		display: none;
	}

	.jn-show-lg,
	.wp-site-blocks .jn-show-lg {
		display: block;
	}
}

/* A row whose last child sits at the far end — card headers, listing headers. */
.jn-between,
.wp-site-blocks .jn-between {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	margin-block: 0;
}

.jn-between > *,
.wp-site-blocks .jn-between > * {
	margin-block: 0;
}

/* --------------------------------------------------------------------------
   Breadcrumb — inline, with a chevron between crumbs
   -------------------------------------------------------------------------- */

.jn-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	margin-block: 1.5rem;
	font-size: .875rem;
	color: hsl( var( --jn-muted-foreground ) );
}

.jn-crumbs a {
	color: hsl( var( --jn-muted-foreground ) );
	text-decoration: none;
}

.jn-crumbs a:hover {
	color: hsl( var( --jn-primary-text ) );
}

.jn-crumbs > * + *::before {
	content: "";
	display: inline-block;
	width: .875rem;
	height: .875rem;
	margin-right: .5rem;
	vertical-align: -.15em;
	background-color: currentColor;
	opacity: .5;
	-webkit-mask: var( --jn-chevron-right ) center / contain no-repeat;
	mask: var( --jn-chevron-right ) center / contain no-repeat;
}

/* --------------------------------------------------------------------------
   Image sizing taken from live's own w-N utilities
   -------------------------------------------------------------------------- */

.jn-sec .wp-block-image.jn-img--w8 img  { width: 2rem;    height: 2rem;    max-width: 2rem; }
.jn-sec .wp-block-image.jn-img--w10 img { width: 2.5rem;  height: 2.5rem;  max-width: 2.5rem; }
.jn-sec .wp-block-image.jn-img--w12 img { width: 3rem;    height: 3rem;    max-width: 3rem; }
.jn-sec .wp-block-image.jn-img--w16 img { width: 4rem;    height: 4rem;    max-width: 4rem; }
.jn-sec .wp-block-image.jn-img--w20 img { width: 5rem;    height: 5rem;    max-width: 5rem; }
.jn-sec .wp-block-image.jn-img--w24 img { width: 6rem;    height: 6rem;    max-width: 6rem; }
.jn-sec .wp-block-image.jn-img--w32 img { width: 8rem;    height: 8rem;    max-width: 8rem; }

.jn-sec .wp-block-image.jn-img--contain img {
	object-fit: contain;
	max-height: none;
}

/* A sized image is an inline mark, not a block figure. */
.jn-sec .wp-block-image[ class*="jn-img--w" ] {
	display: inline-flex;
	margin: 0;
}

/* --------------------------------------------------------------------------
   Stat cells inside a grid

   `.jn-sec p` gives every paragraph a 1rem bottom margin, which pushed each
   figure away from its label.
   -------------------------------------------------------------------------- */

.jn-sec .jn-grid > .jn-center p,
.jn-sec .jn-grid > .jn-cell p,
.jn-sec .jn-grid .jn-center > p {
	margin: 0 0 .125rem;
	line-height: 1.35;
}

.jn-sec .jn-grid > .jn-center p:last-child,
.jn-sec .jn-grid > .jn-cell p:last-child {
	margin-bottom: 0;
}

/* The card's meta block — MOQ and business type sit together, not spaced. */
.jn-sec .jn-card .jn-mb-4 p {
	margin: 0;
	font-size: .8125rem;
	line-height: 1.5;
	color: hsl( var( --jn-muted-foreground ) );
}

/* Supplier card: logo tile beside the name, badge pushed to the far end. */
.jn-sec .jn-card > .jn-between {
	align-items: flex-start;
	margin-bottom: 1rem;
}

.jn-sec .jn-card .jn-row {
	align-items: center;
	gap: 1rem;
}

.jn-sec .jn-card .jn-row h3 {
	margin: 0 0 .25rem;
	font-size: 1.0625rem;
}

.jn-sec .jn-card .jn-row p {
	margin: 0;
	font-size: .875rem;
	color: hsl( var( --jn-muted-foreground ) );
}

/* The logo sits in a tinted tile, as live has it. */
.jn-sec .jn-card .wp-block-image.jn-img--w12 {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 4rem;
	width: 4rem;
	height: 4rem;
	border-radius: .5rem;
	background-color: hsl( var( --jn-muted ) );
}

/* Card actions share the width evenly, as live's do. */
.jn-sec .jn-card .jn-btnrow {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .5rem;
	margin-top: 1rem;
}

.jn-sec .jn-card .jn-btnrow > * {
	width: 100%;
}

/* Sidebar variant: the same controls stacked in a card. */
.jn-filters--stack {
	display: block;
	margin: 0;
	padding: 1.5rem;
	border: 1px solid hsl( var( --jn-primary ) / .2 );
	border-radius: var( --jn-radius );
	background-color: hsl( var( --jn-card ) );
}

.jn-sec .jn-filters--stack .jn-filters__field {
	display: block;
	margin: 0 0 1.25rem;
}

.jn-sec .jn-filters--stack .jn-filters__field:last-of-type {
	margin-bottom: 0;
}

.jn-sec .jn-filters .jn-filters__field label,
.jn-sec .jn-filters__search label {
	display: block;
	margin-bottom: .375rem;
	font-size: .875rem;
	font-weight: 600;
	color: hsl( var( --jn-foreground ) );
}

.jn-filters--stack .jn-filters__select,
.jn-filters--stack .jn-filters__input {
	width: 100%;
	min-width: 0;
}

.jn-filters__range {
	width: 100%;
	accent-color: var( --jn-gold-500 );
}

.jn-sec .jn-filters__field--check {
	display: flex;
	align-items: center;
	gap: .5rem;
}

.jn-sec .jn-filters__field--check label {
	margin: 0;
	font-weight: 500;
}

.jn-filters__check {
	width: 1.125rem;
	height: 1.125rem;
	accent-color: var( --jn-gold-500 );
}

/* The bar variant keeps its labels for screen readers only. */
.jn-sec .jn-filters--bar .jn-filters__field label,
.jn-sec .jn-filters--bar .jn-filters__search label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
}

.jn-sec .jn-filters__title {
	margin: 0 0 1.25rem;
	font-family: "Playfair Display", Georgia, serif;
	font-size: 1.25rem;
	font-weight: 700;
	color: hsl( var( --jn-foreground ) );
}

/* Live's panel is already a card, so the stack must not draw a second one
   when it sits inside that wrapper. */
.jn-card .jn-filters--stack,
.jn-sec .jn-card .jn-filters--stack {
	padding: 0;
	border: 0;
	background: none;
}

/* --------------------------------------------------------------------------
   Hero furniture — the stat columns, icon discs, corner badge, status pills
   -------------------------------------------------------------------------- */

.jn-stack-v,
.wp-site-blocks .jn-stack-v {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .25rem;
	margin-block: 0;
}

.jn-stack-v > *,
.wp-site-blocks .jn-stack-v > * {
	margin-block: 0;
}

.jn-sec .jn-stack-v p {
	margin: 0;
}

/* The gold disc behind a Lucide glyph. */
.jn-iconcircle,
.wp-site-blocks .jn-iconcircle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 3rem;
	height: 3rem;
	margin: 0 0 .75rem;
	border-radius: 999px;
	background-color: hsl( var( --jn-primary ) / .15 );
	color: hsl( var( --jn-primary-text ) );
}

.jn-iconcircle svg {
	width: 1.5rem;
	height: 1.5rem;
}

/* A figure over its label, without the gold treatment. */
.jn-sec .jn-stat__num,
.jn-sec p.jn-stat__num {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2;
	color: hsl( var( --jn-foreground ) );
}

/* Live pins this to the panel's corner. */
.jn-badge-corner,
.wp-site-blocks .jn-badge-corner {
	position: absolute;
	top: -1rem;
	right: -1rem;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.25rem;
	height: 3.25rem;
	margin: 0;
	border-radius: 999px;
	background-color: var( --jn-gold-500 );
	box-shadow: var( --jn-shadow-card );
	color: #fff;
	font-size: .875rem;
	font-weight: 700;
	text-align: center;
}

.jn-sec .jn-badge-corner p {
	margin: 0;
	color: #fff;
	font-size: .875rem;
	font-weight: 700;
}

/* The panel the badge hangs off must be a positioning context. */
.jn-sec .jn-card:has( > .jn-badge-corner ),
.jn-sec .jn-cell:has( > .jn-badge-corner ) {
	position: relative;
}

/* A status pill — live's verified marker is green, not gold. */
.jn-sec .jn-pill--ok,
.jn-sec p.jn-pill--ok {
	margin: 0;
	padding: .125rem .5rem;
	border: 0;
	border-radius: 999px;
	background-color: rgba( 34, 197, 94, .18 );
	color: #86efac;
	font-size: .75rem;
	font-weight: 600;
	white-space: nowrap;
}

:root:not( .dark ) .jn-sec .jn-pill--ok {
	background-color: rgba( 34, 197, 94, .16 );
	color: #166534;
}

/* Supplier rows in the hero: avatar, details, badge at the end. */
.jn-sec .jn-card.jn-row {
	align-items: center;
	gap: .75rem;
	padding: .75rem;
}

.jn-sec .jn-card.jn-row > .jn-col-main {
	flex: 1 1 auto;
}

/* A dark filled button — live's "View All Verified Suppliers". */
.jn-sec .jn-btn--dark,
.jn-sec a.jn-btn--dark,
.jn-sec button.jn-btn--dark {
	border-color: transparent;
	background-color: var( --jn-luxury-dark );
	color: #fff;
}

.jn-sec .jn-btn--dark:hover {
	background-color: var( --jn-luxury-darker );
	color: var( --jn-gold-400 );
}

/* A rating sitting on its own line needs no extra rhythm. */
.jn-sec .jn-rating {
	margin: 0;
}

/* --------------------------------------------------------------------------
   Disc variants

   Live uses the same disc solid (the RFQ step numbers, the newsletter mark)
   and tinted per card (the "Why Choose" icons, each a different hue).
   -------------------------------------------------------------------------- */

.jn-iconcircle--solid {
	background-color: var( --jn-gold-500 );
	color: #111;
	font-weight: 700;
}

.jn-iconcircle--solid svg {
	color: #111;
}

.jn-iconcircle--green  { background-color: rgba( 34, 197, 94, .18 );  color: #4ade80; }
.jn-iconcircle--blue   { background-color: rgba( 59, 130, 246, .18 ); color: #60a5fa; }
.jn-iconcircle--purple { background-color: rgba( 168, 85, 247, .18 ); color: #c084fc; }
.jn-iconcircle--rose,
.jn-iconcircle--red    { background-color: rgba( 244, 63, 94, .18 );  color: #fb7185; }

/* A disc centred above a card's title, as live places them. */
.jn-sec .jn-center > .jn-iconcircle,
.jn-sec .jn-card .jn-iconcircle {
	margin-inline: auto;
}

/* Grids that are also width-capped keep both roles. */
.jn-grid.jn-narrow,
.wp-site-blocks .jn-grid.jn-narrow {
	display: grid;
}

/* Disc sizes, taken from live's own w-N utilities. */
.jn-iconcircle--w8  { width: 2rem;   height: 2rem;   font-size: 1rem; }
.jn-iconcircle--w10 { width: 2.5rem; height: 2.5rem; font-size: 1.125rem; }
.jn-iconcircle--w12 { width: 3rem;   height: 3rem;   font-size: 1.5rem; }
.jn-iconcircle--w16 { width: 4rem;   height: 4rem;   font-size: 1.25rem; }
.jn-iconcircle--w20 { width: 5rem;   height: 5rem;   font-size: 1.5rem; }

.jn-iconcircle--w16 svg { width: 2rem;   height: 2rem; }
.jn-iconcircle--w20 svg { width: 2.5rem; height: 2.5rem; }

/* --------------------------------------------------------------------------
   Gold figures

   Live writes these two ways: `gold-text` clips a gradient through a serif
   figure, while `text-gold-500` is a flat gold weight in the body face. They
   are different sizes too, so they get separate components.
   -------------------------------------------------------------------------- */

.jn-sec .jn-stat__figure,
.jn-sec p.jn-stat__figure {
	margin: 0 0 .25rem;
	font-family: Inter, system-ui, sans-serif;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2;
	color: hsl( var( --jn-primary-text ) );
}

/* --------------------------------------------------------------------------
   Forms — the contact form and the newsletter signup share one component
   -------------------------------------------------------------------------- */

.jn-form-block {
	margin: 1.5rem 0 0;
}

.jn-sec .jn-form-block .jn-form__row {
	margin: 0 0 1.25rem;
}

.jn-sec .jn-form-block .jn-form__label {
	display: block;
	margin-bottom: .375rem;
	font-size: .875rem;
	font-weight: 500;
	color: hsl( var( --jn-foreground ) );
}

.jn-form__control {
	box-sizing: border-box;
	width: 100%;
	min-height: 2.75rem;
	padding: .625rem .875rem;
	border: 1px solid hsl( var( --jn-border ) );
	border-radius: .5rem;
	background-color: hsl( var( --jn-input ) );
	color: hsl( var( --jn-foreground ) );
	font-family: inherit;
	font-size: .9375rem;
	line-height: 1.5;
}

textarea.jn-form__control {
	min-height: 8rem;
	resize: vertical;
}

.jn-form__control::placeholder {
	color: hsl( var( --jn-muted-foreground ) );
}

.jn-form__control:focus {
	border-color: var( --jn-gold-500 );
	outline: none;
}

.jn-form__control:focus-visible {
	outline: 2px solid hsl( var( --jn-ring ) );
	outline-offset: 1px;
}

.jn-sec .jn-form-block .jn-btnrow {
	margin-top: 0;
}

.jn-sec .jn-form-block .jn-btn {
	width: 100%;
}

.jn-sec .jn-form__note {
	margin: .5rem 0 0;
	font-size: .75rem;
	text-align: center;
	color: hsl( var( --jn-muted-foreground ) );
}

/* On the dark newsletter band the fields sit on white tints instead. */
.jn-sec--dark .jn-form__control,
.jn-tile .jn-form__control {
	border-color: rgba( 255, 255, 255, .3 );
	background-color: rgba( 255, 255, 255, .12 );
	color: #fff;
}

.jn-sec--dark .jn-form__control::placeholder {
	color: rgba( 255, 255, 255, .6 );
}

.jn-sec--dark .jn-form__note {
	color: rgba( 255, 255, 255, .6 );
}

.jn-signup {
	margin: 1.25rem 0 0;
}

.jn-sec .jn-signup__field {
	margin: 0 0 .75rem;
}

.jn-signup__input {
	box-sizing: border-box;
	width: 100%;
	min-height: 2.75rem;
	padding: 0 .875rem;
	border: 1px solid rgba( 255, 255, 255, .3 );
	border-radius: .5rem;
	background-color: rgba( 255, 255, 255, .12 );
	color: #fff;
	font-family: inherit;
	font-size: .9375rem;
}

.jn-signup__input::placeholder {
	color: rgba( 255, 255, 255, .6 );
}

.jn-signup__input:focus {
	border-color: var( --jn-gold-400 );
	outline: none;
}

.jn-signup__input:focus-visible {
	outline: 2px solid hsl( var( --jn-ring ) );
	outline-offset: 1px;
}

.jn-sec .jn-signup .jn-btnrow {
	margin-top: 0;
}

.jn-sec .jn-signup .jn-btn {
	width: 100%;
}

.jn-sec .jn-signup__note {
	margin: .5rem 0 0;
	font-size: .75rem;
	text-align: center;
	color: rgba( 255, 255, 255, .6 );
}

/* --------------------------------------------------------------------------
   Translucent tile — live's `bg-white/10` blocks on the dark band
   -------------------------------------------------------------------------- */

.jn-tile,
.wp-site-blocks .jn-tile {
	box-sizing: border-box;
	margin-block: 0;
	padding: 1rem;
	border-radius: .75rem;
	background-color: rgba( 255, 255, 255, .1 );
	text-align: center;
}

.jn-sec .jn-tile p {
	margin: 0;
	font-size: .875rem;
	font-weight: 500;
	line-height: 1.4;
}

.jn-sec .jn-tile p + p {
	margin-top: .125rem;
	font-weight: 400;
	opacity: .75;
}

/* A tick row: live's feature lines carry a gold check glyph. Some hold a name
   over its description, so the row is a container rather than a single line. */
.jn-sec .jn-checkrow,
.wp-site-blocks .jn-sec .jn-checkrow {
	position: relative;
	margin: 0 0 .75rem;
	padding-left: 1.875rem;
	line-height: 1.5;
}

.jn-sec .jn-checkrow p {
	margin: 0;
}

.jn-sec .jn-checkrow p + p {
	font-size: .8125rem;
	color: hsl( var( --jn-muted-foreground ) );
}

.jn-sec .jn-checkrow::before {
	content: "";
	position: absolute;
	left: 0;
	top: .2em;
	width: 1.25rem;
	height: 1.25rem;
	background-color: var( --jn-gold-400 );
	-webkit-mask: var( --jn-tick ) center / contain no-repeat;
	mask: var( --jn-tick ) center / contain no-repeat;
}

/* Live centres these two columns against each other. */
.jn-grid--middle,
.wp-site-blocks .jn-grid--middle {
	align-items: center;
}

/* `justify-center` on a flex container, which live sets on its CTA rows. */
.jn-sec .jn-justify-center {
	align-items: center;
	justify-content: center;
}

.jn-sec .jn-justify-center > .jn-btnrow,
.jn-sec .jn-justify-center .jn-btnrow {
	justify-content: center;
	width: 100%;
}

/* A rounded-square icon tile — live's contact cards, smaller than the
   circular discs. */
.jn-feature-icon--sm {
	width: 3rem;
	height: 3rem;
	margin: 0;
	border: 1px solid hsl( var( --jn-primary ) / .2 );
	border-radius: .75rem;
	background-color: hsl( var( --jn-primary ) / .1 );
}

.jn-feature-icon--sm svg {
	width: 1.5rem;
	height: 1.5rem;
}

/* The supplier cards split their two actions in half; a form's single submit
   must not inherit that two-column grid. */
.jn-sec .jn-card .jn-form-block .jn-btnrow {
	display: flex;
	grid-template-columns: none;
}

/* A row aligned to the top of its tallest item — live's contact cards. */
.jn-sec .jn-row--top {
	align-items: flex-start;
	gap: 1rem;
}

.jn-sec .jn-row--top > .jn-feature-icon {
	margin: 0;
	flex: 0 0 auto;
}

.jn-sec .jn-row--top h3,
.jn-sec .jn-row--top h4 {
	margin: 0 0 .5rem;
}

.jn-sec .jn-row--top p {
	margin: 0;
	line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Panels — a padded, rounded block with no shadow

   Live builds the product card's price and supplier blocks this way. They are
   not cards: no shadow, no lift, and they sit inside a card.
   -------------------------------------------------------------------------- */

.jn-box,
.wp-site-blocks .jn-box {
	box-sizing: border-box;
	margin-block: 0 1rem;
	padding: .75rem;
	border-radius: .5rem;
}

.jn-box--muted {
	background-color: hsl( var( --jn-muted ) );
	text-align: center;
}

.jn-box--outline {
	border: 1px solid hsl( var( --jn-border ) );
	background-color: hsl( var( --jn-background ) );
	padding: .5rem .75rem;
}

.jn-sec .jn-box p {
	margin: 0;
	line-height: 1.45;
}

.jn-sec .jn-box p + p {
	margin-top: .125rem;
}

/* The price sits large over its unit, with the trade terms beneath. */
.jn-sec .jn-box--muted p:first-child {
	font-size: 1.0625rem;
	font-weight: 700;
	color: hsl( var( --jn-primary-text ) );
}

.jn-sec .jn-box--muted .jn-row,
.jn-sec .jn-box--muted .jn-between {
	justify-content: center;
	gap: 1rem;
	margin-top: .5rem;
	font-size: .8125rem;
	color: hsl( var( --jn-muted-foreground ) );
}

.jn-sec .jn-box--outline p:first-child {
	font-size: .875rem;
}

.jn-sec .jn-box--outline p + p {
	font-size: .75rem;
	color: hsl( var( --jn-muted-foreground ) );
}

/* A category thumbnail sits inside its tinted circle. */
.jn-sec .jn-iconcircle .wp-block-image,
.jn-sec .jn-iconcircle figure {
	margin: 0;
}

.jn-sec .jn-iconcircle img {
	border-radius: 999px;
	object-fit: cover;
}

/* --------------------------------------------------------------------------
   Product media frame

   Live pins the badge and the wishlist control over the image. Letting them
   sit in normal flow pushed each card's title down by a different amount, so
   a row of cards no longer lined up.
   -------------------------------------------------------------------------- */

.jn-media,
.wp-site-blocks .jn-media {
	position: relative;
	margin-block: 0 1rem;
	overflow: hidden;
	border-radius: .75rem;
}

.jn-media .wp-block-image {
	margin: 0;
}

.jn-media .wp-block-image img {
	display: block;
	width: 100%;
	height: 12rem;
	max-height: none;
	object-fit: cover;
	border-radius: 0;
}

.jn-media__badge,
.wp-site-blocks .jn-media__badge {
	position: absolute;
	top: .75rem;
	left: .75rem;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: .5rem;
	margin: 0;
}

.jn-sec .jn-media__badge p {
	margin: 0;
	padding: .25rem .625rem;
	border-radius: 999px;
	background-color: var( --jn-gold-500 );
	color: #111;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .02em;
	white-space: nowrap;
}

.jn-media__fav {
	position: absolute;
	top: .75rem;
	right: .75rem;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 999px;
	background-color: hsl( var( --jn-background ) / .9 );
	color: hsl( var( --jn-foreground ) );
	box-shadow: var( --jn-shadow-card );
	transition: var( --jn-transition );
}

.jn-media__fav:hover {
	color: hsl( var( --jn-primary-text ) );
}

.jn-media__fav svg {
	width: 1.125rem;
	height: 1.125rem;
}