/*
 * The home page.
 *
 * Mobile first, min-width only, each breakpoint after the last (trap 2). No
 * global rules on bare elements, nothing hidden by tag (trap 1).
 *
 * Hero values measured off frames 7d (390), 7a (1240) and 7b (1600). The three
 * scrims are genuinely different, not one gradient scaled:
 *
 *   phone    180deg  .5 0%  / .2 26% / .9 66% / solid 100%   copy at the BASE
 *   tablet   100deg  .94 0% / .82 38% / .15 72% / 0 100%     copy centred
 *   desktop  100deg  .94 0% / .80 34% / .12 66% / 0 100%     copy centred
 *
 * The phone one is vertical and the copy is pinned to the bottom because the
 * render is composed for landscape - a portrait squeeze puts the vial behind
 * the text. That is the reason the handoff gives and the frames implement it.
 */

/* ------------------------------------------------------- hero (PORTED) */

/*
 * PORTED VERBATIM from novapep-theme/assets/section-novapep-hero.css plus the
 * aspect-ratio rules from that section's inline style block.
 *
 * The comments explaining WHY a value is what it is are kept. Several are bugs
 * The owner found live and they must not be reintroduced by someone "simplifying"
 * a selector.
 *
 * Mobile-first is deliberately NOT used here: the source is desktop-first with
 * a max-width: 749px block, and reordering it changes which rule wins at equal
 * specificity. A port is exact or it is not a port.
 */

.novapep-hero {
	position: relative;
	overflow: hidden;
	background: #0a0a0a;
	width: 100%;
}

/*
 * Derived from the uploaded image so a new upload cannot silently reintroduce
 * an upscale/crop mismatch. No min/max-height: those clamped the box shorter
 * than the image's real ratio height at wide viewports, which is what forced
 * object-fit: cover to crop ~245px vertically.
 */
.novapep-hero__background {
	position: relative;
	width: 100%;

	/*
	 * THE RATIO COMES FROM THE IMAGE, NOT FROM A CONSTANT. The Liquid reads
	 * `aspect-ratio: {{ section.settings.image.aspect_ratio | default: 4.08 }}`,
	 * so live renders the UPLOADED IMAGE'S OWN RATIO and 4.08 is only what
	 * shows when no image exists. inc/home.php publishes --np-hero-ratio from
	 * the attachment's real dimensions, which is the mechanism live uses.
	 *
	 * THE FALLBACK IS 2.88, NOT 4.08, and that is deliberate. Live's current
	 * render is 2.88:1 - the source's own comment names it - so 4.08 made the
	 * hero 141px shorter than live at 1400px with no image present. The owner,
	 * 11/09/26 20:16: "hero background is not as tall as the one in shopifies
	 * one". 2.88 is therefore right now AND stays right when the render is
	 * uploaded, because the custom property then takes over with the same
	 * number. Re-check this line only if the render is replaced with art of a
	 * different shape.
	 */
	aspect-ratio: var(--np-hero-ratio, 2.88);
	height: auto;
}

.novapep-hero__background picture {
	position: absolute;
	inset: 0;
	display: block;
}

.novapep-hero__background-image {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Two classes deep on purpose (04/09/26): a global div:empty { display: none }
   -- :empty has class-level specificity -- hid this empty overlay div at every
   width, so neither scrim layer below had ever rendered. traps.md #1. */
.novapep-hero__background .novapep-hero__overlay {
	display: block;
}

.novapep-hero__overlay {
	position: absolute;
	inset: 0;
	/* Two layers: a top scrim so the ticker stays legible over whatever part
	   of the image sits behind it, plus the left-to-right legibility gradient
	   behind the copy block. First-listed paints on top. */
	background:
		linear-gradient(to bottom, rgba(0, 0, 0, 0.6), transparent 140px),
		linear-gradient(to right, rgba(0, 0, 0, 0.5), transparent 55%);
}

.novapep-hero__inner {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	align-items: center;
}

/*
 * THE SHARED CONTAINER, 12/09/26. Was 1440/40 against the nav's 1440/12, which
 * is why the wordmark and the hero copy did not start on the same left edge -
 * fault 1 on the owner's 16:03 list.
 *
 * Now identical to .np-container: 1400px with the 60/40/12 gutter tokens. The
 * nav, the ticker and this all resolve to the same numbers from one place, so
 * they cannot drift apart again the way two hardcoded pairs did.
 *
 * This also settles the "1400/60 vs 1440/40" question that has been sitting on
 * The owner's owed list since 11/09 - the handoff answers it, and the handoff now
 * outranks live.
 */
/* 17/09/26 handoff: content capped at 1400 with 60px gutters, 40px on tablet.
   Scoped to the hero rather than moved onto --np-container / --np-gutter,
   which every other section on the site reads - a token change here would
   silently re-lay-out surfaces nobody asked about. */
.novapep-hero__container {
	width: 100%;
	min-width: 0;
	max-width: 1400px;
	margin-inline: auto;
	padding-inline: 60px;
}

@media screen and (max-width: 1239px) {

	.novapep-hero__container {
		padding-inline: 40px;
	}
}

.novapep-hero__content {
	max-width: 704px; /* 06/09/26: hero copy ~10% larger, left edge unchanged */
}

/* The handoff's small-text rule, 17/09/26: letterspaced mono at 13px reads as
   decoration rather than as a label. ~~Space Mono 13 / 400 / 2.64px /
   rgba(255,255,255,0.72)~~ -> Sora 13 / 700 / 0.1em / #C4CCD6. 12.6:1 against
   the 0.72 alpha's effective 11:1, and it reads as type instead of texture. */
.novapep-hero__eyebrow {
	display: block;
	font-family: var(--np-font-body);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #C4CCD6;
	margin: 0 0 26px;
	line-height: 1.17391;
}

.novapep-hero__wordmark {
	font-family: var(--np-font-heading);
	/* 17/09/26 handoff: 92 / 600 / -0.045em / lh 0.96 desktop, 76 / -0.042em
	   tablet. ~~clamp(62px, 6.6vw, 97px), -1.7px, lh 0.98~~
	   THE PHONE VALUE IS DELIBERATELY PRESERVED at 62px in the phone block
	   below: the handoff says in as many words that the phone hero is locked
	   from the earlier pass and unchanged, and the old clamp floored at 62 at
	   390. Replacing a clamp with fixed steps is exactly where a locked
	   breakpoint gets lost by accident. */
	font-size: 92px;
	font-weight: 600;
	letter-spacing: -0.045em;
	line-height: 0.96;
	margin: 0 0 22px;
	color: #FFFFFF;
}

@media screen and (max-width: 1239px) {

	.novapep-hero__wordmark {
		font-size: 76px;
		letter-spacing: -0.042em;
	}
}

@media screen and (max-width: 749px) {

	/* Locked, unchanged: the old clamp's floor at 390. */
	.novapep-hero__wordmark {
		font-size: 62px;
		letter-spacing: -1.7px;
		line-height: 0.98;
	}
}

.novapep-hero__wordmark-strong {
	font-weight: inherit;
}

/*
 * "Pep" - the light half of the home hero wordmark. UNCHANGED, and that is a
 * decision, not an oversight.
 *
 * The owner 17/09/26 23:17 made the no-grey rule absolute - "no grey ending text
 * from now on anywhere. period" - and named Nova(Pep) as an example. At 23:37,
 * before the push, he carved this one back out: "make the Pep in novapep in
 * the home page not change colour keep as is."
 *
 * So the wordmark on THIS page keeps --np-hero-pep (#9CA3AF, 7.8:1 on the
 * #050607 hero). The rule applies to HEADLINES; the brand lockup here is
 * exempt by his explicit instruction. Do not "fix" this back to white - it was
 * white for twenty minutes tonight and was reverted on purpose.
 */
.novapep-hero__wordmark-light {
	font-style: normal;
	font-weight: 400;
	color: var(--np-hero-pep);
}

/* Phone headline -- only exists on phones (5d frame). */
.novapep-hero__headline {
	display: none;
}

/* 17/09/26 handoff: Sora 20 / 500 / lh 1.55 / #D3D9E0, measure tightened to
   48ch. ~~46ch, 400, lh 32px, rgba(255,255,255,0.84)~~ - weight 400 at 20px on
   a dark ground is the readability fault the handoff's small-text rule names,
   and the copy ran to about 70 characters, which is past comfortable at this
   size. 48ch puts it at roughly three lines on desktop. */
.novapep-hero__tagline {
	max-width: 48ch;
	font-family: var(--np-font-body);
	font-size: 20px;
	font-weight: 500;
	line-height: 1.55;
	color: #D3D9E0;
	/* The tablet steps for this and the eyebrow sit in a media block AFTER
	   both rules, further down. Written next to them first and moved when the
	   trap check pointed out that an unconditional rule declared later would
	   have eaten both (trap 2, in the same session it was fixed twice). */
	/* PORTED REM RESOLVES AGAINST AN 11.5px ROOT, NOT 16px. Dawn sets the
	   root to 62.5% scaled by --font-body-scale 1.15, so every rem in the
	   Shopify source is 11.5px. Copied as rem it silently grew ~39%.
	   Measured on live 11/09/26 20:10: 2rem = 23px. */
	margin-bottom: 23px;
	letter-spacing: 0.69px;
}

/* Tablet steps for the two rules above - 17/09/26 handoff, eyebrow 12, sub 18.
   Placed after both declarations so the cascade actually reaches them. */
@media screen and (max-width: 1239px) {

	.novapep-hero__eyebrow {
		font-size: 12px;
	}

	.novapep-hero__tagline {
		font-size: 18px;
	}
}

.novapep-hero__tagline p {
	margin: 0;
}

.novapep-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	/* PORTED REM RESOLVES AGAINST AN 11.5px ROOT, NOT 16px. Dawn sets the
	   root to 62.5% scaled by --font-body-scale 1.15, so every rem in the
	   Shopify source is 11.5px. Copied as rem it silently grew ~39%.
	   Measured on live 11/09/26 20:10: 1rem = 11.5px. */
	gap: 11.5px;
	margin-bottom: 40px;
}

.novapep-hero__ctas .button {
	font-family: var(--np-font-body);
	font-size: 16px;
	font-weight: 600;
	/* Inherited from Dawn on live: 18.7826px / 16px = 1.17391 (1 + 0.2/1.15)
	   and 0.1rem of tracking. Phone drops the tracking; see the phone block. */
	line-height: 1.17391;
	letter-spacing: 1.15px;
	min-height: 0;
	padding: 16px 33px;
	border-radius: 0;
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	box-sizing: border-box;
}

.novapep-hero__button-primary {
	background: #ffffff;
	color: #0b0b0d;
	border: 1px solid transparent;
}

.novapep-hero__button-primary:hover {
	background: #f1f1f1;
	color: #0b0b0d;
}

.novapep-hero__button-secondary {
	background: transparent;
	color: #ffffff;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 0;
}

.novapep-hero__button-secondary:hover {
	background: rgba(255, 255, 255, 0.08);
	color: #ffffff;
}

/* Border-top on the wrapper itself IS the divider -- a separate empty div here
   previously matched the global div:empty rule and silently never rendered. */
.novapep-hero__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 29px;
	width: fit-content;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding-top: 22px;
	margin-top: 32px;
}

.novapep-hero__stat {
	display: flex;
	flex-direction: column;
	/* PORTED REM RESOLVES AGAINST AN 11.5px ROOT, NOT 16px. Dawn sets the
	   root to 62.5% scaled by --font-body-scale 1.15, so every rem in the
	   Shopify source is 11.5px. Copied as rem it silently grew ~39%.
	   Measured on live 11/09/26 20:10: 0.35rem = 4.025px. */
	gap: 4.025px;
}

.novapep-hero__stat-value {
	font-family: var(--np-font-heading);
	font-size: 26px;
	font-weight: 600;
	letter-spacing: -0.48px;
	color: #ffffff;
	line-height: 1;
}

.novapep-hero__stat-label {
	font-family: var(--np-font-body);
	font-size: 13px;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.72);
	line-height: 1.69565;
	letter-spacing: 0.69px;
}

/* The primary CTA's trailing arrow is its own span. The button is a flex box,
   so the plain space between label and arrow collapses -- this restores it. */
.novapep-hero__button-arrow::before {
	content: ' ';
}

/* Mobile hero -- rebuilt to the Claude Design 5d frame, 04/09/26. One block,
   boxed CTA pair, stats on a hairline pinned to the base; THE WORDMARK LEAVES
   THE HERO (the nav says NovaPep 60px above) and the claim becomes the
   headline. */
@media screen and (max-width: 749px) {

	.novapep-hero__background {
		aspect-ratio: unset;
		height: 560px; /* 5d frame */
		/* Until a portrait mobile image is uploaded this gradient IS the
		   background. */
		background: linear-gradient(150deg, #2A2E35 0%, #14171B 55%, #23272E 100%);
	}

	/* Class+element on purpose: the unconditional
	   .novapep-hero__background picture rule above is (0,1,1) and beat a bare
	   class here -- measured live, the desktop picture still rendered. */
	.novapep-hero__background .novapep-hero__picture--desktop-only {
		display: none;
	}

	/* Bottom-weighted: 5% at the top so the render is barely touched, 90% at
	   the base so the copy sits on near-black. */
	.novapep-hero__overlay {
		background: linear-gradient(180deg, rgba(10, 10, 10, 0.05) 0%, rgba(10, 10, 10, 0.3) 44%, rgba(10, 10, 10, 0.9) 100%);
	}

	.novapep-hero__inner {
		align-items: flex-end;
	}

	.novapep-hero__container {
		padding: 0 20px 20px;
	}

	.novapep-hero__content {
		max-width: none;
	}

	.novapep-hero__eyebrow {
		font-size: 9px;
		letter-spacing: 0.2em;
		color: rgba(255, 255, 255, 0.7);
		margin: 0;
	}

	.novapep-hero__wordmark {
		display: none;
	}

	.novapep-hero__headline {
		display: block;
		margin: 10px 0 0;
		font-family: var(--np-font-heading);
		font-size: 34px;
		line-height: 1.08;
		font-weight: 600;
		letter-spacing: -0.03em;
		color: #FFFFFF;
	}

	.novapep-hero__headline-muted {
		color: #FFFFFF; /* 06/09/26: the owner -- white, not muted, over the render */
	}

	.novapep-hero__tagline {
		font-size: 14px;
		line-height: 1.6;
		color: rgba(255, 255, 255, 0.82);
		max-width: none;
		margin: 11px 0 0;
	}

	.novapep-hero__ctas {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
		margin: 18px 0 0;
	}

	.novapep-hero__ctas .button {
		display: flex;
		align-items: center;
		justify-content: center;
		width: auto;
		min-width: 0;
		height: 50px;
		box-sizing: border-box; /* required: the outlined button's borders otherwise add to its height */
		padding: 0 6px;
		font-size: 13px; /* 06/09/26: was 14 -- the label wrapped to two lines */
		font-weight: 600;
		letter-spacing: normal;
		white-space: nowrap;
		border-radius: 0;
	}

	.novapep-hero__button-primary {
		gap: 6px;
		background: #FFFFFF;
		color: #0A0A0A;
		border: none;
	}

	/* 06/09/26: the arrow rendered hairline-thin and hugged the right edge. */
	.novapep-hero__button-arrow {
		flex: 0 0 auto;
		font-size: 16px;
		font-weight: 700;
		line-height: 1;
	}

	.novapep-hero__button-arrow::before {
		content: none;
	}

	.novapep-hero__button-secondary {
		background: transparent;
		color: #FFFFFF;
		border: 1px solid rgba(255, 255, 255, 0.55);
	}

	.novapep-hero__stats {
		display: flex;
		flex-wrap: nowrap;
		align-items: flex-start;
		justify-content: space-between;
		gap: 8px;
		width: auto;
		margin-top: 22px;
		padding-top: 18px;
		border-top: 1px solid rgba(255, 255, 255, 0.22);
	}

	.novapep-hero__stat {
		gap: 4px;
	}

	.novapep-hero__stat-value {
		font-size: 23px;
		letter-spacing: -0.02em;
		line-height: 1;
	}

	.novapep-hero__stat-label {
		font-family: 'Space Mono', ui-monospace, Consolas, monospace;
		font-size: 9px;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		line-height: 1.3;
		color: #9CA3AF;
	}
}

/* -------------------------------------------------- catalogue (PORTED) */

/*
 * PORTED from novapep-theme/assets/section-novapep-featured.css. The first
 * version was built from frame 7a and had a right-hand availability line; the
 * live head is a left-aligned column of heading + sub-label.
 */

.novapep-catalogue {
	padding-top: 42px;
	padding-bottom: 18px;
}

.novapep-catalogue__container {
	/*
	 * THIS IS THE ONE PLACE THE HOME CATALOGUE DELIBERATELY DOES NOT MATCH LIVE,
	 * and the reason is the card.
	 *
	 * Three facts collide here. (1) The ported 1240/20/48 came from
	 * section-novapep-featured.css, whose __container rules are DEAD - live wraps
	 * this section in Dawn's .page-width and never uses the class. (2) Live's
	 * .page-width is 1610/17.25px on phone and 1440/40px above 750, which gives a
	 * 1360px content box at 1920. (3) Live's grid is `repeat(4, 1fr)` and FILLS
	 * that box, but this theme uses the NEW card, whose columns are FIXED at
	 * 304px - README section 1, and slice 2 measured them. 4x304 + 3x20 = 1276,
	 * which fits a 1280 box almost exactly and leaves 84px of slack in a 1360
	 * one, so the cards would sit visibly inset from the heading and the pills.
	 *
	 * A fixed-width card cannot be picture-perfect against a fluid grid, so the
	 * card wins and the container follows it: the same 1400/60 as `.np-container`,
	 * which is what the catalogue archive uses and what the 304px column was
	 * measured inside. Home and the archive now compose identically, which is the
	 * point of the card being one component.
	 *
	 * Flagged to the owner 11/09/26 20:20 rather than buried.
	 */
	max-width: var(--np-container);
	margin: 0 auto;
	padding-inline: var(--np-gutter);
}

/* Stacked, left-aligned per the redesign (24/08/26) -- was a side-by-side
   heading/pills row. Spec: heading, then filter pills 26px beneath, both
   left-aligned. */
.novapep-catalogue__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 26px;
	/* PORTED REM RESOLVES AGAINST AN 11.5px ROOT, NOT 16px. Dawn sets the
	   root to 62.5% scaled by --font-body-scale 1.15, so every rem in the
	   Shopify source is 11.5px. Copied as rem it silently grew ~39%.
	   Measured on live 11/09/26 20:10: 2rem = 23px. */
	margin-bottom: 23px;
}

/* Not __title: that class already belongs to the product-card title
   (overflow: hidden + clamped height), which swallowed the sub-label. */
.novapep-catalogue__headgroup {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

/*
 * "Our Catalogue" takes the hero wordmark's light half, 12/09/26. The owner: "the
 * out catalgoue test needs to be the colour of PEP from the hero".
 *
 * Written as var(--np-hero-pep) rather than a second literal #9CA3AF, so the
 * two cannot drift: "Pep" moved from #8E959D to #9CA3AF earlier today and a
 * copied hex would have had to be found and changed twice.
 */
.novapep-catalogue__heading {
	font-family: var(--np-font-heading);
	font-size: 30px;
	line-height: 1.1;
	margin: 0;
	color: var(--np-hero-pep);
	letter-spacing: 0.66px;
}

/* UNUSED SINCE 12/09/26 - the "In stock" sub-label was removed from the markup
   on the owner's instruction, overriding the 04/09 lock. See inc/home.php for the
   reasoning. The rule is kept so restoring the label is a one-line markup
   change; delete it if the decision is still standing at phase 9.

   Original note: same face as the heading, a step bigger than the eyebrow,
   black (the owner, 04/09/26 -- third pass: Sora read as a stray body font, the
   mono eyebrow was too small). Weight 600 and 0.015em tracking; 500 had no
   loaded face, so the browser fell back to regular and it read as a different
   font. */
.novapep-catalogue__subheading {
	font-family: var(--np-font-heading);
	font-size: 20px;
	font-weight: 600;
	letter-spacing: 0.015em;
	line-height: 1.2;
	color: #0A0A0A;
	margin: 0;
}

.novapep-catalogue__filters {
	display: flex;
	flex-wrap: wrap;
	/* PORTED REM RESOLVES AGAINST AN 11.5px ROOT, NOT 16px. Dawn sets the
	   root to 62.5% scaled by --font-body-scale 1.15, so every rem in the
	   Shopify source is 11.5px. Copied as rem it silently grew ~39%.
	   Measured on live 11/09/26 20:10: 0.5rem = 5.75px. */
	gap: 5.75px;
}

.novapep-catalogue__filter-pill {
	appearance: none;
	display: inline-flex;
	align-items: center;
	height: 38px;
	border: 1px solid #D6DAE0;
	background: #FFFFFF;
	box-shadow: 0 1px 2px rgba(10, 10, 10, 0.04);
	border-radius: 999px;
	padding: 0 16px;
	font-family: var(--np-font-body);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	/* The owner 17/09/26 23:17: "the pep type selection in the home page colour is
	   grey make it black." ~~#4A5568~~ -> #14161A, 16.9:1 on the white fill.
	   COLOUR ONLY here. The type this pill actually renders is NOT the 11px /
	   0.1em / uppercase written above it: an unconditional rule far below in
	   this same file resets it to Sora 14px / 600 / normal tracking / sentence
	   case, and that later rule wins at every width. That 600 is the "font
	   thickness" the legal meta line is told to copy - read off the winning
	   rule, not off this one. */
	color: #14161A;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
	line-height: normal;
	font-weight: 400;
}

.novapep-catalogue__filter-pill:hover {
	border-color: #0A0A0A;
}

.novapep-catalogue__filter-pill.is-active {
	background: #0A0A0A;
	border-color: #0A0A0A;
	color: #FFFFFF;
}

/* The framework grid classes are removed from this section's markup entirely
   rather than fought with overrides -- a two-class rule capping every card to
   ~114px was higher specificity than any single-class override could beat. */
/*
 * PHONE SHOWS IN-STOCK ONLY. The owner, 11/09/26 20:40: "only in mobile remove the
 * out of stock items from the home". Desktop keeps them under the in-stock ones
 * per his 20:16 instruction, so this is a per-breakpoint presentation rule and
 * not a second query - one server render, one source of truth for the order.
 *
 * Unconditional because the file is mobile-first; the 768px block re-shows them.
 */
.novapep-catalogue__grid .np-card--out {
	display: none;
}

/*
 * COLUMNS AND GAP DELIBERATELY ABSENT. They live on `.np-grid` in card.css -
 * 1-up phone, 3-up centred 300px tablet, 4-up 304px desktop, gap 20 - which is
 * the locked card spec (README section 1: "the single-card phone layout was
 * chosen over 2-up"). The Shopify source's 2-up-below-990 grid was ported here
 * and it was wrong for this theme's card; the owner caught it 11/09/26 20:16.
 *
 * card.css is enqueued BEFORE home.css, so a `grid-template-columns` here would
 * beat `.np-grid` at equal specificity. Leaving it out is what makes one
 * definition authoritative for home, the catalogue archive and the PDP row.
 */
.novapep-catalogue__grid {
	display: grid;
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
	justify-items: stretch;
	align-items: stretch;
}

.novapep-catalogue__view-all-wrap {
	text-align: center;
	/* PORTED REM RESOLVES AGAINST AN 11.5px ROOT, NOT 16px. Dawn sets the
	   root to 62.5% scaled by --font-body-scale 1.15, so every rem in the
	   Shopify source is 11.5px. Copied as rem it silently grew ~39%.
	   Measured on live 11/09/26 20:10: 2.5rem = 28.75px. */
	margin-top: 28.75px;
}

.novapep-catalogue__view-all {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 48px;
	padding: 0;
	font-family: var(--np-font-body);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.17391;
	letter-spacing: 1.15px;
	border: 1px solid #D6DAE0;
	background: transparent;
	color: #0A0A0A;
	border-radius: 2px;
	text-decoration: none;
}

.novapep-catalogue__view-all:hover {
	border-color: #0A0A0A;
}

@media screen and (max-width: 749px) {

	/* Parent is a column flex container with align-items: flex-start, so
	   without align-self the row sizes to its own nowrap content width
	   (880px+) instead of the viewport -- overflow-x: auto never engages
	   because the box itself is oversized. This was the real cause of the
	   Home-only mobile overflow bug, 25/08/26. */
	.novapep-catalogue__filters {
		align-self: stretch;
		width: 100%;
		max-width: 100%;
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		margin: 0 -20px;
		padding: 0 20px 4px;
		gap: 6px;
	}

	.novapep-catalogue__filters::-webkit-scrollbar {
		display: none;
	}

	.novapep-catalogue__filter-pill {
		flex-shrink: 0;
		height: 34px;
		padding: 0 14px;
		/* ~~font-size: 10px~~ DELETED 17/09/26 23:30. It has never rendered at
		   any width: an unconditional `.novapep-catalogue__filter-pill` rule
		   further down this file sets 14px, and a media query adds no
		   specificity, so the later rule wins everywhere (trap 2, fourth time
		   on this project). The 10px belonged to the uppercase 11px design
		   that same later rule replaced, so there is nothing to preserve -
		   deleting it changes no pixel and removes a line that reads as a
		   phone override while being dead. A real phone size, if one is ever
		   wanted, has to be authored AFTER the winning rule. The other three
		   declarations here are untouched by it and do apply. */
	}
}

@media screen and (min-width: 750px) {

	.novapep-catalogue {
		padding-top: 56px;
		padding-bottom: 24px;
	}

	/*
	 * ~~.novapep-catalogue__heading { font-size: 44px }~~ DELETED 17/09/26.
	 * The 17/09 handoff sets this heading unconditionally at the foot of this
	 * file - 46 desktop, 40 tablet, 32 phone - and an unconditional rule beats
	 * a media query at equal specificity, so 44 could only ever have been
	 * dead once that block existed. Removed in the same edit that created the
	 * conflict rather than left to be found later (trap 2).
	 */

	/* Sold-out cards are hidden on phone only - see the rule above. */
	.novapep-catalogue__grid .np-card--out {
		display: flex;
	}

	.novapep-catalogue__view-all {
		display: inline-flex;
		width: auto;
		height: auto;
		font-size: 17.25px;
		/* Dawn's .button min-height, 4.5rem on an 11.5px root. The hero pair
		   sets min-height: 0 explicitly; this button does not, so it keeps it. */
		min-height: 51.75px;
		padding: 14px 32px;
		white-space: nowrap;
	}
}

@media screen and (min-width: 990px) {

}

/* ------------------------------------------------- what you get (PORTED) */

/*
 * PORTED VERBATIM from novapep-theme/assets/section-novapep-what-you-get.css.
 * Two earlier attempts were reconstructed from sampled values and both had the
 * card's SHAPE wrong - image-then-text-below, where the real card is one stack
 * with the content sitting ON the image behind a scrim.
 *
 * Two comments from the source are kept because they are load-bearing and the
 * rules look "simplifiable" without them.
 */

.novapep-what-you-get {
	position: relative;
	background-color: #0A0A0A;
	padding-top: 96px;
	padding-bottom: 96px;
}

.novapep-what-you-get__container {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 24px;
}

.novapep-what-you-get__header {
	text-align: center;
}

.novapep-what-you-get__eyebrow {
	margin: 0;
	font-family: 'Space Mono', ui-monospace, Consolas, monospace;
	font-size: 10px;
	font-weight: 400;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
	line-height: 1.69565;
}

.novapep-what-you-get__heading {
	margin: 12px 0 0;
	font-family: var(--np-font-heading);
	font-size: 30px;
	font-weight: 600;
	line-height: 1.15;
	color: #FFFFFF;
	letter-spacing: 0.66px;
}

.novapep-what-you-get__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	margin-top: 26px;
}

.novapep-what-you-get__card {
	position: relative;
	/* Square on phone: a 220px strip centre-cropped the portrait-composed
	   images into nonsense and pushed the text over bright areas. Square
	   shows the composition without the full 4:5 scroll cost (the owner,
	   03/09/26). */
	aspect-ratio: 1 / 1;
	height: auto;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.10);
}

.novapep-what-you-get__media {
	position: absolute;
	inset: 0;
	background-color: #141414;
}

.novapep-what-you-get__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform 260ms ease;
	/* translateZ keeps the image on its own compositor layer permanently --
	   without it the browser drops the layer when scale returns to identity,
	   and that repaint snap is the "shaky zoom-out" (the owner, 03/09/26). */
	transform: translateZ(0);
	backface-visibility: hidden;
	will-change: transform;
	/* Untouchable like the hero image: no drag-to-tab, no selection. */
	pointer-events: none;
	-webkit-user-drag: none;
	user-select: none;
}

@media (hover: hover) {

	.novapep-what-you-get__card:hover .novapep-what-you-get__image {
		transform: scale(1.02) translateZ(0);
	}
}

/* THE PARENT CLASS IS IN THIS SELECTOR ON PURPOSE - do not "simplify" it.
   A global `div:empty { display: none }` scores (0,1,1) and a lone class
   scores (0,1,0), so a single class LOSES on specificity regardless of source
   order - and this scrim never rendered from the day it was built until
   08/09/26 because of exactly that. Scoping to the card makes it (0,2,0).
   traps.md #1, fifth instance on this project. */
.novapep-what-you-get__card .novapep-what-you-get__scrim {
	display: block;
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.96) 0%, rgba(0, 0, 0, 0.72) 52%, transparent 86%);
}

.novapep-what-you-get__content {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 20px;
}

.novapep-what-you-get__card-eyebrow {
	margin: 0 0 8px;
	font-family: 'Space Mono', ui-monospace, Consolas, monospace;
	font-size: 9px;
	font-weight: 400;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
	line-height: 1.69565;
}

.novapep-what-you-get__card-title {
	margin: 0 0 8px;
	font-family: var(--np-font-heading);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.25;
	color: #FFFFFF;
	letter-spacing: 0.66px;
}

.novapep-what-you-get__card-text {
	margin: 0;
	font-family: var(--np-font-body);
	font-size: 13px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.75);
	letter-spacing: 0.69px;
	font-weight: 400;
}

/* Downward notch marking the handoff into the light section below.
   A <span>, not a <div>: the same div:empty rule swallowed this exact shape in
   the hero and featured sections. z-index 2 so it paints above the next
   section's background instead of being covered by it. */
.novapep-what-you-get__notch {
	display: block;
	position: absolute;
	left: 50%;
	bottom: -20px;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-top: 20px solid #0A0A0A;
	z-index: 2;
	pointer-events: none;
}

@media screen and (min-width: 750px) {

	.novapep-what-you-get__container {
		padding: 0 48px;
	}

	.novapep-what-you-get__eyebrow {
		font-size: 12px;
		letter-spacing: 2.6px;
	}

	.novapep-what-you-get__heading {
		margin-top: 16px;
		font-size: 44px;
	}

	.novapep-what-you-get__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 24px;
		margin-top: 56px;
	}

	.novapep-what-you-get__card {
		aspect-ratio: 4 / 5;
	}

	/* Matches the phone rule's (0,2,0) on purpose. A bare class here would
	   lose to the scoped rule above at every width - trap 2, the override
	   that silently does nothing. */
	.novapep-what-you-get__card .novapep-what-you-get__scrim {
		background: linear-gradient(to top, rgba(0, 0, 0, 0.94) 0%, rgba(0, 0, 0, 0.6) 45%, transparent 78%);
	}

	.novapep-what-you-get__content {
		padding: 28px;
	}

	.novapep-what-you-get__card-eyebrow {
		font-size: 10px;
		letter-spacing: 1.6px;
	}

	.novapep-what-you-get__card-title {
		font-size: 22px;
	}

	.novapep-what-you-get__card-text {
		font-size: 14px;
	}
}

@media screen and (min-width: 990px) {

	.novapep-what-you-get__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ------------------------------------------------- FAQ preview (PORTED) */

/*
 * PORTED VERBATIM from novapep-theme/assets/section-novapep-faq-preview.css.
 * The first version was a plain bordered list; the real one is six cards with
 * a three-layer shadow, an eyebrow rule, a two-tone 48px heading and a
 * rotating + indicator.
 *
 * The source's --np-ink / --np-grey / --np-grey-light resolve to #0A0A0A,
 * #6B7280 and #9CA3AF. They are written literally here rather than mapped onto
 * this theme's tokens, because the ink in this component is #0A0A0A and this
 * theme's --np-ink is #14161A - close, and not the same. A port is exact or it
 * is not a port.
 *
 * DELIBERATE DEVIATION FROM LIVE, the owner 12/09/26 15:43. The grey in this
 * component is now #6B6B6B, not the source's #6B7280, because the two greys
 * were SWAPPED: the hero eyebrow/breadcrumb/subheading greys took #6B7280 and
 * this block took #6B6B6B. Three rules here (__eyebrow-label, __answer,
 * __footer-text) and four in pages.css are the whole change. Nothing else that
 * carries either grey was touched - #6B6B6B appears 48 times site-wide and 27
 * remain in pages.css alone, all outside the heroes, all untouched.
 *
 * So this component is no longer byte-exact against the Liquid, and that is a
 * decision rather than drift. Do not "restore" it to #6B7280 on the strength of
 * the paragraph above.
 */

.novapep-faq-preview {
	/* 17/09/26 handoff: flat #FFFFFF, 72 / 68. ~~a radial pool of #F2F4F7~~,
	   which existed because a flat white read as empty - the centred eyebrow
	   with rules on both sides and a 52px heading now carry that on their own.
	   If it reads empty on the render, the pool comes back and this comment is
	   the reason it was removed. */
	background: #FFFFFF;
	padding-top: 72px;
	padding-bottom: 68px;
}

.novapep-faq-preview__container {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 24px;
}

/* 17/09/26 handoff: the row centres. The rule used to be a single 1px line to
   the LEFT of the label, which left a centred heading sitting under an
   off-centre eyebrow; it is now 2px solid ink on BOTH sides. The second rule
   is added in the markup. */
.novapep-faq-preview__eyebrow-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
}

.novapep-faq-preview__eyebrow-rule {
	display: block;
	width: 26px;
	height: 2px;
	background: #14161A;
}

/* Small-text rule: letterspaced mono at 11px reads as decoration. Sora 13 /
   700 / 0.1em in solid ink - 16.9:1 here against the old 4.79. */
.novapep-faq-preview__eyebrow-label {
	font-family: var(--np-font-body);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #14161A;
	line-height: 1.69565;
}

.novapep-faq-preview__heading {
	margin: 18px 0 0;
	font-family: var(--np-font-heading);
	font-size: 52px;
	font-weight: 600;
	letter-spacing: -0.035em;
	line-height: 1.02;
	text-align: center;
	color: #14161A;
}

/* The owner 17/09/26 23:17, sitewide: no grey tail in any heading. ~~#7F868E,
   itself a contrast fix over #8e959d~~ -> solid ink at 400 against the strong
   half's weight, 16.1:1 on this #EDF1F5 ground instead of 3.24. The contrast
   note it replaces is left in the history rather than the rule, because the
   colour it argued about is gone. */
.novapep-faq-preview__heading-soft {
	color: #14161A;
	font-weight: 400;
}

/* The heavy half - "Questions?" after the 17/09 swap. */
.novapep-faq-preview__heading-strong {
	color: #14161A;
	font-weight: 600;
}

/* 17/09/26 handoff: white ground, centred, 72/68. The radial pool goes - the
   handoff draws a flat #FFFFFF panel and the pool was there to stop a flat
   white reading as empty, which a centred eyebrow and a 52px heading now do
   on their own. */
@media screen and (max-width: 1239px) {

	.novapep-faq-preview__eyebrow-rule { width: 24px; }
	.novapep-faq-preview__heading { font-size: 44px; }
}

@media screen and (max-width: 749px) {

	.novapep-faq-preview__eyebrow-rule { width: 20px; }
	.novapep-faq-preview__heading { font-size: 32px; }
}

.novapep-faq-preview__accordion {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 22px;
}

.novapep-faq-preview__item {
	background: linear-gradient(180deg, #FFFFFF 0%, #FBFCFD 100%);
	border-radius: 12px;
	border: 1px solid rgba(10, 10, 10, 0.07);
	box-shadow:
		0 1px 2px rgba(10, 10, 10, 0.04),
		0 8px 24px rgba(10, 10, 10, 0.05),
		0 24px 48px rgba(10, 10, 10, 0.03);
	padding: 16px;
	transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.novapep-faq-preview__item:not([open]):hover {
	border-color: rgba(10, 10, 10, 0.18);
	box-shadow: 0 12px 32px rgba(10, 10, 10, 0.09);
}

@media (prefers-reduced-motion: no-preference) {

	.novapep-faq-preview__item:not([open]):hover {
		transform: translateY(-1px);
	}
}

.novapep-faq-preview__item[open] {
	border-color: #0A0A0A;
	box-shadow: 0 16px 40px rgba(10, 10, 10, 0.10);
}

.novapep-faq-preview__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	cursor: pointer;
	list-style: none;
}

.novapep-faq-preview__item summary::-webkit-details-marker {
	display: none;
}

.novapep-faq-preview__question {
	font-family: var(--np-font-body);
	font-size: 14px;
	font-weight: 600;
	color: #0A0A0A;
	text-align: left;
	line-height: 1.69565;
	letter-spacing: 0.69px;
}

.novapep-faq-preview__indicator {
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #FFFFFF;
	border: 1px solid rgba(10, 10, 10, 0.10);
	box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.05);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 200ms ease;
}

.novapep-faq-preview__indicator::before {
	content: '+';
	font-size: 14px;
	line-height: 1;
	color: #0A0A0A;
}

.novapep-faq-preview__item[open] .novapep-faq-preview__indicator {
	transform: rotate(45deg);
}

/* Overrides the UA's `details:not([open]) > *:not(summary) { display: none }`
   (author styles always win over UA styles regardless of specificity) so the
   answer stays in normal flow and its reveal can be animated via max-height
   instead of popping in and out. */
.novapep-faq-preview__answer {
	display: block;
	max-height: 0;
	margin-top: 0;
	overflow: hidden;
	font-family: var(--np-font-body);
	font-size: 13px;
	line-height: 1.7;
	color: #636A77; /* was #6B7280: 4.26 on #EDF1F5, below AA. Now 4.79. */
	transition: max-height 250ms ease, margin-top 250ms ease;
	letter-spacing: 0.69px;
	font-weight: 400;
}

.novapep-faq-preview__item[open] .novapep-faq-preview__answer {
	max-height: 300px;
	margin-top: 16px;
}

.novapep-faq-preview__answer p {
	margin: 0;
}

.novapep-faq-preview__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 18px;
}

.novapep-faq-preview__footer-text {
	font-family: var(--np-font-body);
	font-size: 14px;
	color: #636A77; /* was #6B7280: 4.26 on #EDF1F5, below AA. Now 4.79. */
	margin: 0;
	line-height: 1.69565;
	letter-spacing: 0.69px;
	font-weight: 400;
}

.novapep-faq-preview__footer-text p {
	margin: 0;
}

.novapep-faq-preview__footer-text a {
	color: #0A0A0A;
}

/* Phone: the read-more becomes a full-width pill button. */
.novapep-faq-preview__read-more {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 46px;
	border: 1px solid #0A0A0A;
	border-radius: 999px;
	text-decoration: none;
	font-family: var(--np-font-body);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
	color: #0A0A0A;
	line-height: 1.69565;
}

@media screen and (min-width: 750px) {

	.novapep-faq-preview {
		padding-top: 112px;
		padding-bottom: 96px;
	}

	.novapep-faq-preview__container {
		padding: 0 48px;
	}

	.novapep-faq-preview__heading {
		margin-top: 20px;
		/* ~~font-size: 48px~~ DELETED 17/09/26. This block is min-width:750 and
		   sits AFTER the handoff's steps above, so it was beating both of them
		   from 750 up - tablet would have rendered 48 against the specified 44
		   and desktop 48 against 52. The scale now lives in one place: 52
		   unconditional, 44 at <=1239, 32 at <=749. */
	}

	.novapep-faq-preview__accordion {
		gap: 14px;
		margin-top: 56px;
	}

	.novapep-faq-preview__item {
		padding: 22px 26px;
		border-radius: 14px;
	}

	.novapep-faq-preview__question {
		font-size: 17px;
	}

	.novapep-faq-preview__indicator {
		width: 30px;
		height: 30px;
	}

	.novapep-faq-preview__answer {
		font-size: 15px;
	}

	.novapep-faq-preview__footer {
		margin-top: 32px;
	}

	/* Back to an inline mono link above phone. */
	.novapep-faq-preview__read-more {
		flex-shrink: 0;
		width: auto;
		display: inline;
		height: auto;
		border: 0;
		border-radius: 0;
		font-family: 'Space Mono', ui-monospace, Consolas, monospace;
		font-size: 12px;
		font-weight: 400;
		letter-spacing: 1.4px;
		text-transform: uppercase;
		text-decoration: underline;
		text-underline-offset: 3px;
	}
}

/* ================================================================ tablet */
@media (min-width: 768px) {

	/* Horizontal, and steeper on the left so the copy sits on near-black
	   rather than on the render. */

	/* Heading left, availability line right, both on the same baseline. */

}

/* ================================================================ desktop */
@media (min-width: 1520px) {

}

/* =====================================================================
   THE OWNER'S FOUR ON HOME AND FOOTER - 12/09/26 23:13

   Measured on the live pages at 390 and on /shop/ before writing:

     hero eyebrow   .novapep-hero__eyebrow, Space Mono 13/400, 2.64px,
                    rgba(255,255,255,.72), "EUROPEAN-BASED RESEARCH
                    PEPTIDES" - hardcoded, never through __()
     catalogue      .np-cat-hero__pill: 30px tall, 0 14px, radius 999,
     eyebrow        1px rgba(255,255,255,.24), Space Mono 10/500 at
                    1.6px uppercase white, with a 5px #3FBE6A dot, and
                    the text "Reference-grade catalogue"
     Our Catalogue  #9CA3AF via --np-hero-pep - the same light grey the
                    wordmark's "Pep" uses. Every other section heading
                    on a light ground is ink.
     footer form    flex-WRAP with the input at width:100%, so Join was
                    pushed onto a second line: input T=6061, button
                    T=6113

   1. THE EYEBROW IS REPLACED IN THE TEMPLATE, NOT RESTYLED HERE.
      inc/home.php now prints the catalogue's own markup and classes, so
      card.css draws both and they cannot drift apart. Nothing in this
      file needs to restate the pill.

   2. SHOWN EVERYWHERE. "in mobile remove the european reseach based
      peptides completely" is satisfied by the REPLACEMENT: that string
      no longer exists at any width. Hiding the new pill on the phone
      as well was a misreading and is corrected below.

   3. "Our Catalogue" goes to --np-body, the dark grey. NOT the token:
      --np-hero-pep is the wordmark's light grey and is used by the
      hero and the menu note as well, so changing it would repaint
      three other things.

   4. The footer row stops wrapping. min-width:0 is the load-bearing
      part - a flex item defaults to min-width:auto and will not shrink
      below its content, so `flex:1` alone would not have done it. The
      8px gap stays as the separation; both boxes stay 44px.
      font-size stays 16px on the input: anything smaller force-zooms
      the page on iOS focus, which is recorded where that was set.
   ===================================================================== */

/*
 * 2. THE HERO EYEBROW IS HIDDEN ON THE PHONE - that is all item 1 asked for.
 *
 * 23:13 I replaced this span with the catalogue pill as well. Wrong element:
 * The owner, 23:28, "why the hero? im talking about the eyebrow" - he meant the
 * CATEGORY ROW below. The span is restored in inc/home.php and only the phone
 * rule remains: "in mobile remove the european reseach based peptides
 * completely".
 */
@media (max-width: 767px) {

	.novapep-hero__content .novapep-hero__eyebrow {
		display: none;
	}
}

/*
 * THE CATEGORY ROW TAKES THE CATALOGUE PAGE'S TYPE - 12/09/26 23:30.
 *
 * The owner: "just change the type of text in the home page as to the one of the
 * catalgoue". TYPE ONLY. The row's geometry, gap, wrap and colours are left
 * exactly as they are - he did not ask for the catalogue page's pill, he asked
 * for its lettering.
 *
 * Measured, home against /shop/ .np-pill:
 *
 *   size        11px       ->  14px
 *   weight      400        ->  600
 *   tracking    1.1px      ->  normal
 *   transform   uppercase  ->  none
 */
.novapep-catalogue__filter-pill {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
}

/*
 * 3. ~~Dark grey, at every width.~~ SUPERSEDED by the 17/09/26 handoff.
 *
 * The heading takes Space Grotesk 46 / 600 / -0.032em / lh 1 in solid ink,
 * with a new eyebrow 11px above it. Written HERE, in the same block as the
 * rule that was winning, rather than beside the original declaration at the
 * top of this file - that one is out-specified by this block at every width
 * and a treatment written up there would never render (trap 2, and trap 55:
 * put the override where the winning rule is, not where the editor is open).
 */
.novapep-catalogue__eyebrow {
	margin: 0;
	font-family: var(--np-font-body);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	/* The owner 18/09/26 01:10: "make the text black". ~~#4A5568, the handoff's
	   value~~ -> #14161A, 15.9:1 on this #EDF1F5 ground. Applied at every
	   width on purpose - a colour that changes at a breakpoint is a bug
	   rather than a design. */
	color: #14161A;
}

.novapep-catalogue__heading {
	margin-top: 11px;
	font-family: var(--np-font-heading);
	font-size: 46px;
	font-weight: 600;
	letter-spacing: -0.032em;
	line-height: 1;
	color: #14161A;
}

@media screen and (max-width: 1239px) {

	.novapep-catalogue__eyebrow { font-size: 12px; }
	.novapep-catalogue__heading { font-size: 40px; }
}

@media screen and (max-width: 749px) {

	.novapep-catalogue__eyebrow { font-size: 11px; }
	.novapep-catalogue__heading { font-size: 32px; }
}

/* ---------------------------------------------------------------------------
   "EXPLORE THE COLLECTION" ON PHONE - 18/09/26 01:06

   The owner: "the explore the collection text is not aligned with our catalgoue
   and the spacing is also to far apart", then "mobile in desktop spacing is
   ojk" - so phone only.

   Measured at 390: both boxes start at left 12, so the two ARE aligned by box.
   What reads as misalignment is the LINE BOX. The eyebrow is 11px text in a
   17.6px line box, so ~3px of half-leading sits under its glyphs while the
   heading's line-height is 1.0 and hugs its caps. The gap measured 17px
   against the 11px the margin says.

   line-height: 1 on the eyebrow makes the box hug the text, so the 11px
   margin is the whole gap and the two baselines sit where the frame draws
   them. Desktop is left alone - he says it is fine there.
--------------------------------------------------------------------------- */

@media screen and (max-width: 749px) {

	.novapep-catalogue__eyebrow {
		line-height: 1;
		/*
		 * OPTICAL ALIGNMENT, measured not guessed - 18/09/26 01:07. The owner:
		 * "the E in explore is more on the left than the O from our".
		 *
		 * Both boxes start at left 12. The INK does not: measured with
		 * canvas actualBoundingBoxLeft, Sora's "E" at 11/700 has 0px of left
		 * side bearing and Space Grotesk's "O" at 32/600 has 1px, because a
		 * round glyph is inset where a flat stem is not. So the eyebrow's
		 * first letter really does start 1px further left.
		 *
		 * MEASURED AGAIN AT 10x SUPERSAMPLING, 01:09, because 1px was a
		 * rounded reading and he said it was still off. The true bearings are
		 * Sora "E" 0.80px and Space Grotesk "O" 1.60px, so the real delta is
		 * 0.80px and the 1px over-corrected by 0.2.
		 *
		 * It is a typographic correction, not a layout one, which is why it
		 * lives here and not on the container.
		 */
		margin-left: 0.8px;
		/* "abit lower", 01:10. 6px of top margin, which is small enough to
		   read as a nudge and large enough to see. Say a number if it wants
		   to be more. */
		margin-top: 6px;
	}
}