/**
 * Craftrove by T — main site stylesheet.
 *
 * Soft, whimsical handmade-crochet brand system: white base, blush-pink
 * organic blobs, berry/magenta accents, warm brown headings, playful yarn
 * decoration. GeneratePress child theme (GRO-432).
 *
 * Contents:
 *   1.  Design tokens
 *   2.  Base / GeneratePress resets
 *   3.  Layout utilities
 *   4.  Decorative SVG helpers (blob / thread / wave / scallop / icon)
 *   5.  Accessibility helpers
 *   6.  Section header pattern
 *   7.  Buttons
 *   8.  Promo bar
 *   9.  Header / nav / search
 *   10. Hero
 *   11. About split
 *   12. USP circles
 *   13. Product grid section
 *   14. Craft ethos
 *   15. Band heading
 *   16. Process steps
 *   17. Contact info / socials / contact form
 *   18. FAQ
 *   19. Offer band
 *   20. Footer
 *   21. Utility / misc components
 *   22. AOS + motion safety
 *   23. Mobile menu + cart drawers (GRO-476)
 */

/* =====================================================================
   1. Design tokens
   ===================================================================== */

:root {
	--crt-berry: #AC3A7E;
	--crt-berry-dark: #8f2f68;
	--crt-heading: #55494F;
	--crt-green: #456B5F;
	--crt-yellow: #F7D868;
	--crt-pink: #FFF0F5;
	--crt-peach: #FADADD;
	--crt-cream: #FAF5EF;
	--crt-border: #D4D4D4;
	/* GRO-479 card-QA: a shade darker than --crt-peach so the product-card
	   shell reads as a clear boundary on white page backgrounds (--crt-peach
	   alone was too close to white to be legible as an edge). */
	--crt-card-border: #E9C3C8;
	--crt-body: #221d20;

	/* Yarn/thread decorative accent palette (GRO-442 §3.8 motifs — sampled from
	   the approved section screenshots since no source photo cutouts exist). */
	--crt-yarn-red: #C23B4A;
	--crt-yarn-purple: #9B65D1;
	--crt-yarn-blue: #6BA3D6;
	--crt-yarn-pink: #F14D8B;
	--crt-thread-cord: #A9BAC9;
	--crt-rope: #C7A468;

	--crt-font-head: 'Nunito', sans-serif;
	--crt-font-body: 'Plus Jakarta Sans', sans-serif;
	--crt-font-script: 'Celliad', 'Dancing Script', cursive;
	--crt-type-eyebrow: clamp(1.75rem, calc(1.5rem + 1.25vw), 2.25rem);

	/* Derived rhythm tokens (internal). */
	--crt-section-pad: 5rem;
	--crt-radius-pill: 1.875rem;
	--crt-radius-card: 1rem;
	--crt-radius-field: 0.5rem;
	--crt-transition: 0.2s ease;
	--crt-shadow-soft: 0 0.625rem 1.875rem rgba(85, 73, 79, 0.10);

	/* GRO-487: semantic aliases for the product-page rebuild — additive over
	   the tokens above, not a re-theme. Every color inside the redesigned
	   single-product template resolves through one of these (or an existing
	   --crt-* token directly where the mockup color IS the brand color). */
	--crt-color-text: var(--crt-body);
	--crt-color-heading: var(--crt-heading);
	--crt-color-surface: #FFFFFF;
	--crt-color-surface-warm: var(--crt-cream);
	--crt-color-border: var(--crt-border);
	--crt-color-accent: var(--crt-yellow);
	--crt-color-accent-soft: #FBEBA9;
	--crt-color-success: var(--crt-green);
	--crt-color-ink-strong: #1A1512;
}

/* =====================================================================
   2. Base / GeneratePress resets
   ===================================================================== */

/* GRO-481 §7: `overflow-x: clip`, not `hidden`. Both clip horizontal bleed
   identically, but `hidden` (like `auto`/`scroll`) makes the element a scroll
   container and containing block for `position: sticky` descendants — and
   per the CSS overflow spec, setting only overflow-x to a non-visible value
   forces the computed overflow-y to `auto` too (never real `visible`), so
   there's no safe combination of hidden/auto/scroll on just one axis here.
   `overflow: clip` was added specifically to allow one-axis clipping without
   any of that: it doesn't create a scroll container, so it doesn't block
   sticky. This was a real, site-wide, pre-existing bug, not something newly
   introduced by this ticket — `.crt-header` itself is `position: sticky; top:
   0;` and, with `overflow-x: hidden` here, silently never stuck to the top on
   scroll (verified via getBoundingClientRect() tracking scrollY 1:1). Fixing
   it here was required to make the new sticky filter panel (§7) work at all,
   and also fixes the header's own long-standing sticky behavior as a side
   effect. */
html,
body {
	max-width: 100%;
	overflow-x: clip;
}

body {
	background: #fff;
	color: var(--crt-body);
	font-family: var(--crt-font-body);
	font-size: clamp(1.125rem, calc(1.125rem + 0.08vw), 1.18125rem);
	line-height: 1.875rem;
	-webkit-font-smoothing: antialiased;
}

/* GeneratePress' inline customizer CSS sets body{background-color:var(--base-2)}
   and enqueues after this stylesheet, so bump specificity to keep the page white. */
html body {
	background: #fff;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--crt-font-head);
	color: var(--crt-heading);
	line-height: 1.15;
}

/* Let our sections run edge-to-edge: neutralise GP wrappers. */
.site-content {
	padding: 0;
	display: block !important;
}

.container.grid-container,
.grid-container {
	max-width: none;
	padding: 0;
}

.site-main {
	margin: 0 !important;
}

.separate-containers .inside-article,
.inside-article {
	padding: 0 !important;
}

.separate-containers .site-main > * {
	margin-bottom: 0;
}

.entry-content {
	margin-top: 0;
}

.is-right-sidebar,
.is-left-sidebar {
	display: none;
}

/* Global interactive polish. */
a {
	color: var(--crt-berry);
	transition: color var(--crt-transition), background-color var(--crt-transition), border-color var(--crt-transition);
}

a:hover {
	color: var(--crt-berry-dark);
}

button {
	font-family: inherit;
}

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

/* Focus visibility everywhere. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
	outline: 0.125rem solid var(--crt-berry);
	outline-offset: 0.125rem;
	border-radius: 0.25rem;
}

/* Attribute-hidden must always win over our display rules. */
[hidden] {
	display: none !important;
}

/* =====================================================================
   3. Layout utilities
   ===================================================================== */

.crt-container {
	max-width: 80rem;
	margin-inline: auto;
	padding-inline: 1.5rem;
}

/* =====================================================================
   4. Decorative SVG helpers
   ===================================================================== */

/* Organic blob — colour comes from the parent context via currentColor. */
.crt-blob {
	display: block;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

/* Wrapping decor spans are always non-interactive backdrops. */
[class*="__blob"],
[class*="__yarn"],
[class*="__decor"] {
	pointer-events: none;
}

/* Dashed thread + needle (USP rows). */
.crt-thread {
	position: absolute;
	color: var(--crt-berry);
	width: 100%;
	pointer-events: none;
}

/* Footer wavy top edge. */
.crt-wave {
	display: block;
	width: 100%;
	height: 4.375rem;
}

.crt-wave__fill {
	fill: #F5F5F5;
}

.crt-wave__stroke {
	stroke: var(--crt-berry);
}

/* Scalloped strip (hero underline motif). */
.crt-scallop {
	display: block;
	width: 100%;
	height: 1.75rem;
	color: var(--crt-pink);
}

/* Inline icon wrapper — font-size controls the icon size. */
.crt-icon {
	display: inline-grid;
	place-items: center;
	line-height: 1;
}

.crt-icon svg {
	width: 1.25em;
	height: 1.25em;
	display: block;
}

/* =====================================================================
   5. Accessibility helpers
   ===================================================================== */

.screen-reader-text {
	border: 0;
	clip: rect(0.0625rem, 0.0625rem, 0.0625rem, 0.0625rem);
	clip-path: inset(50%);
	height: 0.0625rem;
	width: 0.0625rem;
	margin: -0.0625rem;
	overflow: hidden;
	padding: 0;
	position: absolute;
	word-wrap: normal;
}

.screen-reader-text:focus {
	background-color: #fff;
	clip: auto;
	clip-path: none;
	color: var(--crt-berry);
	display: block;
	font-size: clamp(0.9375rem, calc(0.9375rem + 0.08vw), 0.984375rem);
	font-weight: 600;
	height: auto;
	left: 0.5rem;
	line-height: normal;
	padding: 0.875rem 1.375rem;
	text-decoration: none;
	top: 0.5rem;
	width: auto;
	z-index: 100000;
	box-shadow: var(--crt-shadow-soft);
	border-radius: var(--crt-radius-field);
}

/* =====================================================================
   6. Section header pattern
   ===================================================================== */

.crt-sec-head {
	position: relative;
	z-index: 1;
	margin-bottom: 2rem;
}

.crt-eyebrow {
	display: block;
	font-family: var(--crt-font-script);
	font-weight: 400;
	font-size: var(--crt-type-eyebrow);
	line-height: 1.3;
	color: var(--crt-berry);
	letter-spacing: 0.06em;
	margin-bottom: 0.25rem;
}

.crt-sec-head__title {
	margin: 0 0 1.125rem;
	font-family: var(--crt-font-head);
	font-weight: 700;
	font-size: clamp(1.875rem, 4.5vw, 3rem);
	line-height: 1.15;
	color: var(--crt-heading);
}

.crt-divider {
	display: block;
	width: 5.125rem;
	height: 0.3125rem;
	border-radius: 0.1875rem;
	background: var(--crt-berry);
}

.crt-sec-head__body {
	max-width: 45rem;
	margin-top: 1.25rem;
	font-size: clamp(1.125rem, calc(1.125rem + 0.08vw), 1.18125rem);
	line-height: 1.875rem;
}

/* Centered variant. */
.crt-sec-head--center {
	text-align: center;
}

.crt-sec-head--center .crt-divider {
	margin-inline: auto;
}

.crt-sec-head--center .crt-sec-head__body {
	margin-inline: auto;
}

/* Left variant. */
.crt-sec-head--left {
	text-align: left;
}

.crt-sec-head--left .crt-divider {
	margin: 0;
}

/* =====================================================================
   7. Buttons
   ===================================================================== */

.crt-btn {
	--crt-btn-transition: 240ms cubic-bezier(0.22, 1, 0.36, 1);
	display: inline-flex;
	align-items: center;
	gap: 0.875rem;
	padding: 1rem 1.625rem;
	border: 0;
	border-radius: var(--crt-radius-pill);
	font-family: var(--crt-font-body);
	font-size: clamp(1.125rem, calc(1.125rem + 0.08vw), 1.18125rem);
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--crt-btn-transition), color var(--crt-btn-transition), border-color var(--crt-btn-transition), transform var(--crt-btn-transition), box-shadow var(--crt-btn-transition);
	min-height: 3.5rem;
}

.crt-btn:hover {
	text-decoration: none;
}

/* Keep AOS entrance transforms off the interactive element so hover/active
   transforms remain available after the entrance animation completes. */
.crt-btn-aos {
	display: inline-flex;
	max-width: 100%;
}

/* Arrow-in-circle suffix. */
.crt-btn__arrow {
	display: inline-grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	flex-shrink: 0;
	transition: background-color var(--crt-btn-transition), color var(--crt-btn-transition), transform var(--crt-btn-transition);
}

.crt-btn:hover .crt-btn__arrow,
.crt-btn:focus-visible .crt-btn__arrow {
	transform: translateX(0.1875rem);
}

.crt-btn:active {
	transform: translateY(0);
	transition-duration: 120ms;
}

.crt-btn__arrow svg {
	width: 1rem;
	height: 1rem;
	display: block;
}

/* Berry (primary). */
.crt-btn--berry {
	background: var(--crt-berry);
	color: #fff;
}

.crt-btn--berry:hover,
.crt-btn--berry:focus-visible {
	background: var(--crt-berry-dark);
	color: #fff;
	transform: translateY(-0.125rem);
	box-shadow: 0 0.5rem 1.125rem rgba(172, 58, 126, 0.28);
}

.crt-btn--berry .crt-btn__arrow {
	background: #fff;
	color: var(--crt-berry);
}

/* Yellow (secondary). */
.crt-btn--yellow {
	background: var(--crt-yellow);
	color: var(--crt-berry);
}

.crt-btn--yellow:hover,
.crt-btn--yellow:focus-visible {
	background: #f3cd47;
	color: var(--crt-berry);
	transform: translateY(-0.125rem);
	box-shadow: 0 0.5rem 1.125rem rgba(247, 216, 104, 0.45);
}

/* Ink-strong (high-contrast — GRO-487 "Buy It Now"). */
.crt-btn--ink {
	background: var(--crt-color-ink-strong);
	color: #fff;
}

.crt-btn--ink:hover,
.crt-btn--ink:focus-visible {
	background: var(--crt-color-ink-strong);
	filter: brightness(1.15);
	color: #fff;
	transform: translateY(-0.125rem);
	box-shadow: 0 0.5rem 1.125rem rgba(26, 21, 18, 0.3);
}

/* Outline (tertiary). */
.crt-btn--outline {
	background: transparent;
	color: var(--crt-heading);
	border: 0.09375rem solid var(--crt-heading);
	padding: 0.90625rem 1.625rem;
}

.crt-btn--outline:hover,
.crt-btn--outline:focus-visible {
	background: var(--crt-heading);
	color: #fff;
	transform: translateY(-0.125rem);
}

.crt-btn--outline .crt-btn__arrow {
	background: var(--crt-heading);
	color: #fff;
}

.crt-btn--outline:hover .crt-btn__arrow {
	background: #fff;
	color: var(--crt-heading);
}

/* Small variant. */
.crt-btn--sm {
	padding: 0.6875rem 1.25rem;
	font-size: clamp(1rem, calc(1rem + 0.08vw), 1.05rem);
	gap: 0.625rem;
	min-height: 2.75rem;
}

.crt-btn--sm .crt-btn__arrow {
	width: 1.625rem;
	height: 1.625rem;
}

.crt-btn--sm .crt-btn__arrow svg {
	width: 0.8125rem;
	height: 0.8125rem;
}

/* =====================================================================
   8. Promo bar
   ===================================================================== */

.crt-promo {
	max-width: 43.875rem;
	margin-inline: auto;
}

.crt-promo__inner {
	display: block;
	background: var(--crt-yellow);
	border-radius: 0 0 1.25rem 1.25rem;
	padding: 0.625rem 1.25rem;
	color: #111;
	font-size: clamp(1.0625rem, calc(1.0625rem + 0.08vw), 1.115625rem);
	line-height: 1.5;
	text-align: center;
	text-decoration: none;
	transition: background-color var(--crt-transition);
}

a.crt-promo__inner:hover {
	background: #f3cd47;
	color: #111;
}

@media (max-width: 48rem) {
	.crt-promo {
		max-width: none;
	}

	.crt-promo__inner {
		border-radius: 0;
		font-size: clamp(0.9375rem, calc(0.9375rem + 0.08vw), 0.984375rem);
		padding: 0.5625rem 1rem;
	}
}

/* =====================================================================
   9. Header / nav / search
   ===================================================================== */

html.crt-header-transitioning {
	overflow-anchor: none;
}

.crt-header-sentinel {
	display: block;
	width: 100%;
	height: 0.0625rem;
	margin-bottom: -0.0625rem;
	pointer-events: none;
}

.crt-header {
	position: sticky;
	top: 0;
	z-index: 50;
	isolation: isolate;
	background: transparent;
}

.crt-header::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	background: #fff;
	box-shadow: 0 0.625rem 1.5rem rgba(85, 73, 79, 0.12);
	opacity: 0;
	pointer-events: none;
	transition: opacity 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.crt-header.is-stuck::after {
	opacity: 1;
}

.crt-header__inner {
	max-width: 80rem;
	margin-inline: auto;
	padding-inline: 1.5rem;
	min-height: 6.875rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
}

.crt-header.is-stuck .crt-header__inner {
	min-height: 4.75rem;
}

/* Wordmark — image version. */
.crt-wordmark {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	flex-shrink: 0;
}

.crt-header .crt-wordmark:not(.crt-wordmark--text) {
	width: clamp(5rem, 3.25rem + 7.5vw, 10rem);
}

.crt-wordmark img {
	width: clamp(5rem, 3.25rem + 7.5vw, 10rem);
	max-width: none;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	display: block;
	transition: width 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.crt-header.is-stuck .crt-wordmark img {
	width: clamp(3.25rem, 2.8rem + 1.5vw, 4.25rem);
}

/* Wordmark — styled-text fallback. */
.crt-wordmark--text {
	flex-direction: column;
	align-items: flex-start;
	line-height: 1;
	gap: 0.125rem;
}

.crt-wordmark__script {
	font-family: var(--crt-font-script);
	font-weight: 600;
	font-size: clamp(1.6875rem, calc(1.5375rem + 0.5vw), 1.875rem);
	color: var(--crt-berry);
	letter-spacing: 0.03em;
}

.crt-wordmark__by {
	font-family: var(--crt-font-head);
	font-size: clamp(0.875rem, calc(0.875rem + 0.08vw), 0.91875rem);
	font-weight: 700;
	color: var(--crt-heading);
	padding-left: 2.125rem;
}

.crt-wordmark__by em {
	font-family: var(--crt-font-script);
	font-style: normal;
	font-size: clamp(1.125rem, calc(1.125rem + 0.08vw), 1.18125rem);
	color: var(--crt-berry);
}

/* Primary nav. */
.crt-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 2.5rem;
}

.crt-nav__list a {
	display: inline-block;
	position: relative;
	padding: 0.375rem 0;
	font-size: clamp(1.125rem, calc(1.125rem + 0.08vw), 1.18125rem);
	font-weight: 500;
	color: #111;
	text-decoration: none;
}

.crt-nav__list a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.125rem;
	height: 0.1875rem;
	border-radius: 0.125rem;
	background: #A83E7C;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--crt-transition);
}

.crt-nav__list a:hover,
.crt-nav__list .current-menu-item > a,
.crt-nav__list a[aria-current="page"] {
	color: #A83E7C;
}

.crt-nav__list a:hover::after,
.crt-nav__list .current-menu-item > a::after,
.crt-nav__list a[aria-current="page"]::after {
	transform: scaleX(1);
}

/* Header icon cluster. */
.crt-header__icons {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-shrink: 0;
}

.crt-iconbtn {
	position: relative;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--crt-peach);
	color: var(--crt-heading);
	cursor: pointer;
	text-decoration: none;
	transition: background-color var(--crt-transition), color var(--crt-transition), transform var(--crt-transition);
}

.crt-iconbtn svg {
	width: 1.25rem;
	height: 1.25rem;
	display: block;
}

.crt-iconbtn:hover,
.crt-iconbtn[aria-expanded="true"] {
	background: var(--crt-berry);
	color: #fff;
}

.crt-iconbtn:hover {
	transform: translateY(-0.0625rem);
}

/* Cart count badge. */
.crt-cart-count {
	position: absolute;
	top: -0.25rem;
	right: -0.25rem;
	min-width: 1.25rem;
	height: 1.25rem;
	padding: 0 0.3125rem;
	display: grid;
	place-items: center;
	border-radius: 0.625rem;
	background: var(--crt-berry);
	border: 0.125rem solid #fff;
	color: #fff;
	font-family: var(--crt-font-head);
	font-size: clamp(0.75rem, calc(0.75rem + 0.08vw), 0.7875rem);
	font-weight: 800;
	line-height: 1;
}

.crt-cart-count[aria-hidden="true"] {
	display: none;
}

/* Hamburger toggle — sized/shaped like the other .crt-iconbtn circles so it
   reads as part of the same button family, with hover/expanded states to match. */
.crt-header__toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 0.375rem;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--crt-peach);
	cursor: pointer;
	transition: background-color var(--crt-transition), transform var(--crt-transition);
}

.crt-header__toggle:hover,
.crt-header__toggle[aria-expanded="true"] {
	background: var(--crt-berry);
}

.crt-header__toggle:hover {
	transform: translateY(-0.0625rem);
}

.crt-header__toggle span {
	display: block;
	width: 1.25rem;
	height: 0.15625rem;
	border-radius: 0.125rem;
	background: var(--crt-heading);
	transition: transform var(--crt-transition), opacity var(--crt-transition), background-color var(--crt-transition);
}

.crt-header__toggle:hover span,
.crt-header__toggle[aria-expanded="true"] span {
	background: #fff;
}

.crt-header__toggle[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(0.53125rem) rotate(45deg);
}

.crt-header__toggle[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
}

.crt-header__toggle[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-0.53125rem) rotate(-45deg);
}

/* Mobile: nav collapses into the off-canvas drawer (see "Mobile drawer" below)
   instead of an inline dropdown. */
@media (max-width: 63.9375rem) {
	.crt-header__inner {
		min-height: 5.25rem;
		padding-inline: 1.25rem;
		gap: 0.75rem;
	}

	.crt-header.is-stuck .crt-header__inner {
		min-height: 4.25rem;
	}

	.crt-header__toggle {
		display: flex;
		order: 3;
	}

	.crt-header__icons {
		order: 2;
		margin-left: auto;
		gap: 0.375rem;
	}

	.crt-nav {
		display: none;
	}
}

/* Search bar (revealed under the header). */
.crt-search-bar {
	border-bottom: 0.0625rem solid #f3e2ec;
	background: #fff;
	padding: 1rem 1.5rem 1.25rem;
}

.crt-search-bar__form {
	position: relative;
	max-width: 40rem;
	margin-inline: auto;
	display: flex;
}

.crt-search-bar input[type="search"] {
	width: 100%;
	border: 0.0625rem solid var(--crt-border);
	border-radius: var(--crt-radius-pill);
	padding: 0.875rem 3.875rem 0.875rem 1.375rem;
	font-family: inherit;
	font-size: clamp(1rem, calc(1rem + 0.08vw), 1.05rem);
	background: #fff;
	color: var(--crt-body);
	transition: border-color var(--crt-transition), box-shadow var(--crt-transition);
}

.crt-search-bar input[type="search"]:focus {
	outline: none;
	border-color: var(--crt-berry);
	box-shadow: 0 0 0 0.1875rem rgba(172, 58, 126, 0.15);
}

.crt-search-bar__submit {
	position: absolute;
	top: 50%;
	right: 0.375rem;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	width: 2.625rem;
	height: 2.625rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--crt-berry);
	color: #fff;
	cursor: pointer;
	transition: background-color var(--crt-transition);
}

.crt-search-bar__submit svg {
	width: 1.125rem;
	height: 1.125rem;
	display: block;
}

.crt-search-bar__submit:hover {
	background: var(--crt-berry-dark);
}

/* =====================================================================
   10. Hero
   ===================================================================== */

.crt-hero {
	position: relative;
	/* Left/right decor blobs and the connector rope are meant to bleed above and
	   below this section (behind the notice bar/header, into the About photo) —
	   html/body already clip horizontal overflow, so this only needs to allow
	   vertical bleed. */
	overflow: visible;
	padding: 5.625rem 0 0;
	background: #fff;
}

.crt-hero__blob {
	position: absolute;
	z-index: 0;
}

.crt-hero__blob--pink {
	color: #DCDCB833;
	width: clamp(26.25rem, 58vw, 47.5rem);
	height: clamp(26.25rem, 86vw, 51.25rem);
	top: clamp(-20rem, -34%, -10rem);
	left: -12%;
	transform: scaleX(-1);
}

.crt-hero__blob--sage {
	color: #FEEAEB;
	width: clamp(26.25rem, 50vw, 41.25rem);
	height: clamp(28.75rem, 62vw, 51.875rem);
	top: 6%;
	right: -14%;
}

/* Red thread spool between the copy and photo columns. */
.crt-hero__yarn {
	position: absolute;
	z-index: 2;
	top: 4.875rem;
	left: 40%;
	width: 9.5rem;
	color: var(--crt-yarn-red);
	filter: drop-shadow(0 0.375rem 0.625rem rgba(85, 73, 79, 0.18));
	transform: rotate(-6deg);
}

.crt-hero__yarn svg,
.crt-hero__yarn img {
	display: block;
	width: 100%;
	height: auto;
}

/* Thread that leaves the hero photo and flows down into the About section —
   rotated into a diagonal rope so it visually bridges the two blocks. */
.crt-hero__connector {
	position: absolute;
	z-index: 0;
	left: 18%;
	bottom: clamp(-41.4375rem, -53vw, -11.1875rem);
	/* Right target edge (~92% of the section, the same % basis as `left`)
	   minus the left offset, instead of an independent vw guess — keeps
	   width and position deriving from one consistent unit. */
	width: clamp(12.5rem, calc(92% - 18%), 52.9375rem);
	height: clamp(10rem, 42vw, 33rem);
	color: var(--crt-thread-cord);
	transform: rotate(-45deg);
	transform-origin: top left;
}

.crt-hero__connector svg,
.crt-hero__connector img {
	display: block;
	position: static !important;
	width: 100% !important;
	height: 100% !important;
	aspect-ratio: auto !important;
	object-fit: contain !important;
	border-radius: 0 !important;
}

.crt-hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 2.5rem;
	align-items: center;
	padding-bottom: 4.375rem;
}

/* Copy column. */
.crt-hero__title {
	margin: 0 0 1.375rem;
}

.crt-hero__script {
	font-family: 'Celliad', var(--crt-font-script);
	font-weight: 500;
	color: var(--crt-berry);
	letter-spacing: 0.06em;
}

.crt-hero__script--accent {
	display: block;
	font-size: clamp(2.25rem, 4vw, 3.5rem);
	line-height: 1.2;
	margin-bottom: 0.25rem;
}

.crt-hero__line1 {
	display: block;
	font-family: var(--crt-font-head);
	font-weight: 700;
	font-size: clamp(2.84375rem, calc(1.96875rem + 3vw), 4.375rem);
	line-height: 1.08;
	color: var(--crt-green);
}

.crt-hero__line2-wrap {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.15em;
}

.crt-hero__line2 {
	display: inline-block;
	font-family: var(--crt-font-head);
	font-weight: 700;
	font-size: clamp(3.65625rem, calc(2.53125rem + 3vw), 5.625rem);
	line-height: 1.05;
	color: var(--crt-heading);
}

.crt-hero__script--overlay {
	display: inline-block;
	transform: rotate(-4deg);
	font-family: 'Celliad', var(--crt-font-script);
	font-weight: 400;
	font-size: clamp(2.35625rem, calc(1.63125rem + 3vw), 3.625rem);
	line-height: 1;
	white-space: nowrap;
}

.crt-hero__body {
	max-width: 35rem;
	font-family: var(--crt-font-body);
	font-weight: 400;
	font-size: clamp(1.25rem, calc(1.25rem + 0.08vw), 1.3125rem);
	line-height: 1.875rem;
	color: #403D3E;
}

.crt-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 1.125rem;
	margin-top: 1.75rem;
}

/* Media column — organic oval crop with an offset berry outline echoing it. */
.crt-hero__media {
	--crt-hero-oval: 62% 38% 41% 59% / 55% 42% 58% 45%;
	position: relative;
	z-index: 1;
	padding: 0.25rem 3.5rem 3.5rem 0;
}

.crt-hero__media-tilt {
	position: relative;
	transform: rotate(6deg);
}

.crt-hero__media img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: center;
	border-radius: var(--crt-hero-oval);
	position: relative;
}

/* Lives inside .crt-hero__media-tilt so it inherits the exact same box and
   rotation as the photo — offset by a small fixed nudge so it reads as a
   deliberate second layer instead of a mismatched border. */
.crt-hero__outline {
	position: absolute;
	inset: 0;
	transform: translate(0.3125rem, 0.3125rem);
	border: 0.0625rem solid var(--crt-berry);
	border-radius: var(--crt-hero-oval);
	z-index: 1;
	pointer-events: none;
}

.crt-hero__placeholder {
	display: grid;
	place-items: center;
	width: 100%;
	aspect-ratio: 1 / 1;
	background: var(--crt-peach);
	border-radius: var(--crt-hero-oval, 0.3125rem);
	color: var(--crt-berry);
	font-size: clamp(3.9rem, calc(2.7rem + 3vw), 6rem);
}

.crt-hero__scallop {
	position: relative;
	z-index: 1;
}

@media (max-width: 56.25rem) {
	.crt-hero {
		padding-top: 3.5rem;
	}

	.crt-hero__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 2rem;
		padding-bottom: 3rem;
		padding-inline: 1.25rem;
	}

	.crt-hero__media {
		max-width: 20rem;
		width: 100%;
		min-width: 0;
		order: -1;
		margin-inline: auto;
		padding: 0.25rem 1.5rem 1.5rem 0;
	}

	.crt-hero__copy {
		min-width: 0;
		text-align: left;
	}

	.crt-hero__title {
		min-width: 0;
	}

	.crt-hero__script--accent {
		font-size: clamp(1.75rem, 7vw, 2.25rem);
	}

	.crt-hero__line1 {
		font-size: clamp(1.875rem, 8vw, 2.5rem);
	}

	.crt-hero__line2 {
		font-size: clamp(2.25rem, 10vw, 3rem);
	}

	.crt-hero__script--overlay {
		font-size: clamp(1.5rem, 6vw, 2rem);
	}

	.crt-hero__line2-wrap {
		justify-content: flex-start;
	}

	.crt-hero__ctas {
		justify-content: flex-start;
	}

	.crt-hero__yarn {
		display: block;
		top: 27.25rem;
		left: auto;
		right: 1.5rem;
		width: 2.75rem;
		transform: rotate(-6deg);
	}

	.crt-hero__connector {
		display: none;
	}
}

@media (max-width: 30rem) {
	.crt-hero__ctas {
		gap: 0.75rem;
	}
}

/* =====================================================================
   11. About split
   ===================================================================== */

.crt-about {
	position: relative;
	padding: var(--crt-section-pad) 0;
	overflow: hidden;
}

.crt-about__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3.75rem;
	align-items: center;
}

.crt-about--img-right .crt-about__media {
	order: 2;
}

.crt-about--img-right .crt-about__copy {
	order: 1;
}

.crt-about__media {
	position: relative;
	z-index: 1;
	aspect-ratio: 640 / 520;
}

.crt-about__blob {
	position: absolute;
	inset: -6%;
	z-index: -1;
	color: var(--crt-pink);
}

.crt-about__photo {
	position: absolute;
	top: -84%;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	overflow: hidden;
	/* Keep the portrait free above the blob; only the lower edge is softly
	   cropped so the pink field appears to mask the cut-out from below. */
	border-radius: 0 0 43% 57% / 0 0 50% 6%;
}

.crt-about__media img {
	display: block;
	position: absolute;
	top: auto;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: auto;
}

.crt-about__placeholder {
	display: grid;
	place-items: center;
	width: 100%;
	aspect-ratio: 640 / 520;
	background: var(--crt-peach);
	border-radius: 46% 54% 50% 50% / 48% 46% 54% 52%;
	border: 0.375rem solid #fff;
	box-shadow: 0 0 0 0.0625rem var(--crt-berry);
	color: var(--crt-berry);
	font-size: clamp(3.25rem, calc(2.25rem + 3vw), 5rem);
}

/* Bigger + vw-relative (not a fixed px offset) so it bleeds toward the page's
   left edge consistently across breakpoints instead of vanishing entirely on
   common desktop widths — same "reach the edge" technique as
   .crt-hero__connector/.crt-about--home .crt-about__blob use elsewhere. */
.crt-about__yarnball {
	position: absolute;
	left: clamp(-18rem, -20vw, -8rem);
	bottom: -3.75rem;
	z-index: 0;
	font-size: clamp(2.6rem, calc(1.8rem + 3vw), 4rem);
	color: var(--crt-berry);
	line-height: 1;
	transform: rotate(-35deg);
}

.crt-about__yarnball img {
	display: block;
	position: static;
	width: clamp(22rem, 30vw, 34rem);
	height: clamp(22rem, 30vw, 34rem);
	object-fit: contain;
}

/* Collage layout — two overlapping circular photos: a smaller one behind/upper-left,
   a larger one in front/lower-right. */
.crt-about__media--collage {
	position: relative;
	aspect-ratio: 640 / 620;
}

/* Cream background blob behind the collage photos — sized as a % of the
   media box (not fixed px) so it scales with the container instead of
   overflowing at narrow widths. */
.crt-about__story-blob {
	position: absolute;
	z-index: 0;
	top: 50%;
	left: 50%;
	width: 92%;
	aspect-ratio: 532 / 531;
	transform: translate(-50%, -50%) scaleX(-1);
	pointer-events: none;
}

.crt-about__story-blob svg {
	display: block;
	width: 100%;
	height: 100%;
}

.crt-about__collage-img {
	position: absolute;
	display: block;
	box-sizing: border-box;
	overflow: hidden;
	box-shadow: 0 0.75rem 1.75rem rgba(85, 73, 79, 0.14);
}

.crt-about__collage-img img {
	position: static;
	display: block;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	object-fit: cover;
}

.crt-about__collage-img--small {
	top: 0;
	left: 8%;
	width: 46%;
	height: 47.5%;
	background: var(--crt-cream);
	border-radius: 42% 58% 55% 45% / 48% 42% 58% 52%;
	z-index: 1;
}

.crt-about__collage-img--main {
	right: 0;
	bottom: 0;
	width: 76%;
	height: 78.5%;
	background: var(--crt-pink);
	border-radius: 58% 42% 46% 54% / 44% 56% 44% 56%;
	z-index: 2;
	border: 0.1875rem solid #fff;
	overflow: visible;
}

.crt-about__collage-img--main img {
	position: absolute;
	top: -42%;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 142%;
}

/* Homepage-only decor: the About Us page keeps the base look.
   The section becomes the inline-size reference so the blob can hold an exact
   viewport relationship while remaining positioned inside the media column. */
.crt-about--home {
	container-type: inline-size;
	padding-top: calc(var(--crt-section-pad) + clamp(8rem, 12vw, 11rem));
}

.crt-about--home .crt-about__media:not(.crt-about__media--collage) {
	--crt-about-blob-left: calc(-3.75rem - max(1.5rem, (100cqw - 80rem) / 2 + 1.5rem));
	--crt-about-blob-right: 4.6875rem;
}

.crt-about--home .crt-about__blob {
	top: auto;
	right: var(--crt-about-blob-right);
	bottom: 0;
	left: var(--crt-about-blob-left);
	aspect-ratio: 674 / 550;
	transform: none;
}

.crt-about--home .crt-about__photo {
	top: auto;
	right: var(--crt-about-blob-right);
	bottom: 0;
	left: var(--crt-about-blob-left);
	width: auto;
	aspect-ratio: 674 / 550;
	overflow: visible;
	border-radius: 0;
}

.crt-about--home .crt-about__photo img {
	left: calc((var(--crt-about-blob-left) + var(--crt-about-blob-right)) / -2);
	right: auto;
	width: calc(100% + var(--crt-about-blob-left) + var(--crt-about-blob-right));
}
/* Small blue yarn ball "between sections" (GRO-432 §2.1.4). */
.crt-about--home .crt-about__yarnball {
	color: var(--crt-yarn-blue);
}

/* Single-photo (blob-masked) layout only — small decoration to the right of the
   photo instead of the big left-side treatment. Collage layout is untouched. */
.crt-about__media:not(.crt-about__media--collage) .crt-about__yarnball {
	left: auto;
	right: -1.25rem;
	bottom: auto;
	top: 15%;
	z-index: 2;
	transform: rotate(-10deg);
}

.crt-about__media:not(.crt-about__media--collage) .crt-about__yarnball img {
	width: 6rem;
	height: 6rem;
}

.crt-about__spool {
	position: absolute;
	top: 0.875rem;
	right: 8%;
	width: clamp(9.375rem, 8.28rem + 4.7vw, 12.5rem);
	color: var(--crt-yarn-purple);
	z-index: 2;
	transform: rotate(8deg);
}

.crt-about__spool svg,
.crt-about__spool img {
	display: block;
	width: 100%;
	height: auto;
}

.crt-about__connector {
	position: absolute;
	top: 0;
	left: 6%;
	width: 1.375rem;
	height: 4.375rem;
	color: var(--crt-thread-cord);
	z-index: 1;
}

.crt-about__connector svg {
	display: block;
	width: 100%;
	height: 100%;
}

.crt-about__copy .crt-btn {
	margin-top: 1.625rem;
}

.crt-about__body {
	margin-bottom: 0.25rem;
}

.crt-about__copy .crt-eyebrow {
	font-family: var(--crt-font-script);
	font-weight: 400;
	font-size: var(--crt-type-eyebrow);
}

.crt-about__copy .crt-sec-head__title {
	width: 100%;
}

.crt-about__body,
.crt-about__body p {
	font-family: var(--crt-font-body);
	font-weight: 400;
	font-size: clamp(1.125rem, calc(1.125rem + 0.08vw), 1.18125rem);
	color: #000;
}

/* Blob gets the outline; the photo itself stays unclipped/unbordered. */
.crt-about__blob svg {
	fill: var(--crt-pink);
	stroke: var(--crt-berry);
	stroke-width: 0.0625rem;
}


@media (max-width: 56.25rem) {
	.crt-about--home .crt-about__media:not(.crt-about__media--collage) {
		--crt-about-blob-left: calc(-3.75rem - (50cqw - 50%));
		--crt-about-blob-right: calc(6% + 4.3125rem);
	}

	.crt-about__inner {
		grid-template-columns: 1fr;
		gap: 2.75rem;
	}

	.crt-about--img-right .crt-about__media,
	.crt-about--img-right .crt-about__copy {
		order: 0;
	}

	.crt-about__media {
		width: 100%;
		max-width: 30rem;
		margin-inline: auto;
	}

	.crt-about__media:not(.crt-about__media--collage) .crt-about__yarnball {
		top: 21.5625rem;
		bottom: auto;
		right: 6%;
		left: auto;
	}

	.crt-about__media:not(.crt-about__media--collage) .crt-about__yarnball img {
		width: 4.375rem;
		height: 4.375rem;
	}

	.crt-about__copy .crt-eyebrow {
		font-size: var(--crt-type-eyebrow);
		font-family: var(--crt-font-script);
		font-weight: 400;
	}

	.crt-about__copy .crt-sec-head__title {
		font-size: clamp(1.875rem, 8vw, 2.5rem);
	}

	.crt-about__body,
	.crt-about__body p {
		font-size: clamp(1rem, calc(1rem + 0.08vw), 1.05rem);
	}

	.crt-about__media--collage .crt-about__yarnball {
		bottom: -8.125rem;
		left: -13.125rem;
	}
}

/* =====================================================================
   12. USP circles
   ===================================================================== */

.crt-usps {
	position: relative;
	padding: 5.625rem 0;
	overflow: hidden;
}

/* Above the mobile-only rotated `.crt-usps__bg` bleed (see the 56.25rem query
   below), the top-left blob and needle are meant to overflow into the
   neighboring sections, so the section itself stops clipping them here. */
@media (min-width: 56.3125rem) {
	.crt-usps {
		overflow: visible;
	}
}

/* Reusable "yarn" texture behind .crt-usps__inner — centered and letterboxed
   (not cropped) so the same image reads consistently wherever this block is
   used, instead of a page-fragile full-bleed cover crop. */
.crt-usps__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
}

.crt-usps__thread {
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	height: 5.625rem;
	opacity: 0.8;
	z-index: 0;
}

/* Homepage-only decor (GRO-442 §Section 3) — background blobs, rope, blue yarn
   ball and the needle+thread touching the middle circle. */
.crt-usps__thread--rope {
	position: absolute;
	width: 100%;
	pointer-events: none;
	color: var(--crt-rope);
	height: 1.375rem;
	opacity: 1;
	z-index: 0;
}

.crt-usps__bgblob {
	position: absolute;
	z-index: 0;
	opacity: 0.12;
	pointer-events: none;
}

.crt-usps__bgblob--1 {
	width: clamp(14rem, 34vw, 38.84rem);
	height: clamp(14rem, 34vw, 38.77rem);
	top: clamp(-10rem, -12vw, -6rem);
	left: clamp(-6rem, -8vw, -2rem);
	opacity: 1;
}

.crt-usps__bgblob--2 {
	color: var(--crt-yellow);
	width: 34%;
	max-width: 26.25rem;
	height: 60%;
	bottom: -20%;
	right: -6%;
}

.crt-usps__blueball {
	position: absolute;
	z-index: 2;
	top: 4%;
	left: 50%;
	width: 6rem;
	transform: translateX(10rem);
	color: var(--crt-yarn-blue);
	filter: drop-shadow(0 0.375rem 0.625rem rgba(85, 73, 79, 0.16));
}

.crt-usps__blueball svg,
.crt-usps__blueball img {
	display: block;
	width: 100%;
	height: auto;
}

.crt-usps__needle {
	position: absolute;
	z-index: 0;
	top: auto;
	bottom: clamp(-3.5rem, -4vw, -1.5rem);
	left: 50%;
	width: clamp(12rem, 22vw, 20rem);
	transform: translateX(7.5rem) rotate(4deg);
	color: var(--crt-yellow);
	opacity: 0.95;
}

.crt-usps__needle svg,
.crt-usps__needle img {
	display: block;
	width: 100%;
	height: auto;
}

@media (max-width: 56.25rem) {
	.crt-usps__bgblob {
		display: none;
	}

	.crt-usps__blueball {
		display: block;
		top: 0;
		left: 3.75rem;
		right: auto;
		width: 4.375rem;
		transform: none;
	}

	.crt-usps__needle {
		display: block;
		top: auto;
		bottom: 0;
		left: auto;
		right: 1.25rem;
		width: 6.25rem;
		transform: none;
	}
}

.crt-usps__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.875rem;
}

.crt-usp {
	aspect-ratio: 1;
	min-width: 0;
}

.crt-usp__surface {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 2.5rem;
	text-align: center;
	border-radius: 38% 62% 55% 45% / 58% 40% 60% 42%;
	transform-origin: center;
	transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.crt-usp:nth-child(2) .crt-usp__surface {
	border-radius: 60% 40% 45% 55% / 42% 58% 40% 60%;
}

.crt-usp:nth-child(3) .crt-usp__surface {
	border-radius: 45% 55% 60% 40% / 50% 45% 55% 50%;
}

@media (hover: hover) and (pointer: fine) {
	.crt-usp:hover .crt-usp__surface {
		transform: translateY(-0.375rem) scale(1.035);
		box-shadow: var(--crt-shadow-soft);
	}

	.crt-usp:hover .crt-usp__icon {
		transform: translateY(-0.1875rem) scale(1.08);
	}

	.crt-usp:hover .crt-usp__title,
	.crt-usp:hover .crt-usp__body {
		transform: translateY(-0.125rem);
	}
}

.crt-usp--dashed .crt-usp__surface {
	background: #fff;
}

.crt-usp--pink .crt-usp__surface {
	background: var(--crt-pink);
}

.crt-usp--cream .crt-usp__surface {
	background: #F5F5EA;
}

.crt-usp--about-1 .crt-usp__surface {
	background: #FFF0F5;
}

.crt-usp--about-2 .crt-usp__surface {
	background: #EEF1FF;
}

.crt-usp--about-3 .crt-usp__surface {
	background: #F5F5EA;
}

.crt-usp__icon {
	font-size: clamp(2.275rem, calc(1.575rem + 3vw), 3.5rem);
	line-height: 1;
	margin-bottom: 0.75rem;
	color: var(--crt-berry);
	transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.crt-usp__icon svg {
	width: 3.5rem;
	height: 3.5rem;
}

.crt-usp__icon img {
	display: block;
	width: 3.5rem;
	height: 3.5rem;
	object-fit: contain;
}

.crt-usp__title {
	margin: 0 0 0.625rem;
	font-size: clamp(1.5rem, 2.4vw, 1.875rem);
	font-weight: 800;
	transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.crt-usp__body {
	margin: 0;
	max-width: 20.625rem;
	font-size: clamp(1.0625rem, calc(1.0625rem + 0.08vw), 1.115625rem);
	line-height: 1.6875rem;
	transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 56.25rem) {
	.crt-usps {
		padding: 4rem 0;
	}

	.crt-usps__thread {
		display: none;
	}

	.crt-usps__inner {
		grid-template-columns: 1fr;
		max-width: 26.25rem;
		margin-inline: auto;
		gap: 1.5rem;
	}

	.crt-usp__surface {
		padding: 2.75rem 2rem;
	}

	.crt-usp__icon {
		font-size: clamp(1.625rem, calc(1.125rem + 3vw), 2.5rem);
	}

	.crt-usp__icon svg,
	.crt-usp__icon img {
		width: 2.5rem;
		height: 2.5rem;
	}

	.crt-usp__title {
		font-size: clamp(1.2375rem, calc(1.1275rem + 0.5vw), 1.375rem);
	}

	.crt-usp__body {
		max-width: 13.75rem;
		margin-inline: auto;
		font-size: clamp(0.9375rem, calc(0.9375rem + 0.08vw), 0.984375rem);
		line-height: 1.375rem;
	}
}

@media (max-width: 30rem) {
	.crt-usp__surface {
		padding: 2rem 1.5rem;
	}
}

/* =====================================================================
   13. Product grid section
   ===================================================================== */

.crt-products {
	position: relative;
	padding: var(--crt-section-pad) 0;
	overflow: hidden;
}

.crt-products__inner {
	position: relative;
	z-index: 1;
}

.crt-products__header-row {
	position: relative;
	margin-bottom: 2rem;
}

.crt-products__header-img {
	display: block;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 15.625rem;
	height: auto;
	object-fit: contain;
}

.crt-products__header-row .crt-sec-head {
	margin-bottom: 0;
}

@media (max-width: 56.25rem) {
	.crt-products__header-img {
		position: relative;
		left: 0;
		top: auto;
		transform: none;
		width: 5.625rem;
		margin: 0 0 0.75rem;
	}

	.crt-products__header-row .crt-eyebrow {
		font-size: var(--crt-type-eyebrow);
		font-family: var(--crt-font-script);
		font-weight: 400;
	}

	.crt-products__header-row .crt-sec-head__title {
		font-size: clamp(1.875rem, 8vw, 2.5rem);
	}
}

/* Card styling lives in woocommerce.css — list reset fallback only. */
.crt-products ul.products {
	list-style: none;
	margin: 0;
	padding: 0;
}

.crt-products__cta {
	display: flex;
	justify-content: center;
	margin-top: 3rem;
}

/* =====================================================================
   14. Craft ethos
   ===================================================================== */

.crt-ethos {
	position: relative;
	padding: 5.625rem 0;
	overflow: hidden;
}

.crt-ethos__band {
	position: absolute;
	inset: 0;
	height: 100%;
	color: var(--crt-pink);
	z-index: 0;
	transform: scaleX(-1);
}

.crt-ethos__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 3.75rem;
	align-items: center;
}

.crt-ethos__bullets {
	list-style: none;
	margin: 1.75rem 0;
	padding: 0;
	display: grid;
	gap: 1.375rem;
}

.crt-ethos__bullet {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.crt-ethos__check {
	display: grid;
	place-items: center;
	width: 2.125rem;
	height: 2.125rem;
	border-radius: 50%;
	background: var(--crt-berry);
	color: #fff;
	flex-shrink: 0;
}

.crt-ethos__check svg {
	width: 1rem;
	height: 1rem;
	display: block;
}

.crt-ethos__bullet-copy strong {
	display: block;
	font-family: var(--crt-font-head);
	font-size: clamp(1.1875rem, calc(1.1875rem + 0.08vw), 1.246875rem);
	font-weight: 700;
	color: #AC3A7E;
	margin-bottom: 0.125rem;
}

.crt-ethos__bullet-copy span {
	font-size: clamp(1rem, calc(1rem + 0.08vw), 1.05rem);
	line-height: 1.625rem;
}

/* Media column. */
.crt-ethos__media {
	position: relative;
	z-index: 1;
}

.crt-ethos__blob {
	display: none;
}

.crt-ethos__media img {
	display: block;
	width: 100%;
	aspect-ratio: 600 / 586;
	object-fit: cover;
	border-radius: 52% 48% 46% 54% / 50% 52% 48% 50%;
	border: 0;
	padding: 0.625rem;
	background: var(--crt-peach);
}

.crt-ethos__placeholder {
	display: grid;
	place-items: center;
	width: 100%;
	aspect-ratio: 600 / 586;
	background: var(--crt-peach);
	border-radius: 52% 48% 46% 54% / 50% 52% 48% 50%;
	border: 0;
	color: var(--crt-berry);
	font-size: clamp(3.25rem, calc(2.25rem + 3vw), 5rem);
}

.crt-ethos .crt-btn--yellow .crt-btn__arrow {
	background: #AC3A7E;
	color: var(--crt-yellow);
}

.crt-ethos__yarnball {
	position: absolute;
	left: -2.125rem;
	bottom: 14%;
	width: 4rem;
	color: var(--crt-yarn-purple);
	line-height: 1;
	transform: rotate(10deg);
	filter: drop-shadow(0 0.375rem 0.625rem rgba(85, 73, 79, 0.16));
	z-index: 2;
}

.crt-ethos__yarnball svg {
	display: block;
	width: 100%;
	height: auto;
}

.crt-ethos__yarnball:has(img) {
	width: 17.5rem;
	left: -11.25rem;
	bottom: 14%;
}

.crt-ethos__yarnball img {
	display: block;
	position: static;
	width: 17.5rem;
	height: 17.5rem;
	aspect-ratio: auto;
	object-fit: contain;
	border-radius: 0;
	border: 0;
	padding: 0;
	background: none;
}

@media (max-width: 56.25rem) {
	.crt-ethos {
		padding: 4rem 0;
	}

	.crt-ethos__inner {
		grid-template-columns: 1fr;
		gap: 2.75rem;
	}

	.crt-ethos__media {
		max-width: 28.75rem;
		margin-inline: auto;
		order: -1;
	}

	.crt-ethos__copy .crt-eyebrow {
		font-size: var(--crt-type-eyebrow);
		font-family: var(--crt-font-script);
		font-weight: 400;
	}

	.crt-ethos__copy .crt-sec-head__title {
		font-size: clamp(1.875rem, 8vw, 2.5rem);
	}

	.crt-ethos__body,
	.crt-ethos__body p {
		font-size: clamp(1rem, calc(1rem + 0.08vw), 1.05rem);
	}

	.crt-ethos__yarnball,
	.crt-ethos__yarnball:has(img) {
		width: 7.5rem;
		left: -0.625rem;
		bottom: -3.4375rem;
	}

	.crt-ethos__yarnball img {
		width: 7.5rem;
		height: 7.5rem;
	}
}

/* =====================================================================
   15. Band heading
   ===================================================================== */

.crt-band {
	position: relative;
	padding: 5.625rem 0;
	text-align: center;
	overflow: hidden;
}

.crt-band__blob {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 92%;
	max-width: 73.75rem;
	aspect-ratio: 1046 / 359;
	z-index: 0;
}

.crt-band__blob svg {
	display: block;
	width: 100%;
	height: 100%;
}

.crt-band__decor {
	position: absolute;
	top: 50%;
	font-size: clamp(3.9rem, calc(2.7rem + 3vw), 6rem);
	color: var(--crt-berry);
	z-index: 0;
	line-height: 1;
}

.crt-band__decor .crt-icon {
	opacity: 0.16;
}

.crt-band__decor img {
	display: block;
	width: 8rem;
	height: 8rem;
	object-fit: contain;
}

.crt-band__decor--left {
	/* Nudged in from the blob's bounding-box edge so the basket overlaps the
	   blob's actual painted curve (which insets from its bounding box) instead
	   of floating in the whitespace outside it. */
	left: 15%;
	transform: translateY(-50%) rotate(-14deg);
}

.crt-band__decor--right img {
	width: 22.5rem;
	height: 22.5rem;
}

.crt-band__decor--right {
	right: -1.25rem;
	transform: translateY(-50%) rotate(12deg);
}

.crt-band__inner {
	position: relative;
	z-index: 1;
}

.crt-band__inner .crt-sec-head {
	margin-bottom: 0;
}

.crt-band__body {
	max-width: 48.75rem;
	margin: 1.5rem auto 0;
	font-family: var(--crt-font-body);
	font-weight: 400;
	font-size: clamp(1.125rem, calc(1.125rem + 0.08vw), 1.18125rem);
	line-height: 2rem;
}

@media (max-width: 56.25rem) {
	.crt-band {
		padding: 4rem 0;
	}

	.crt-band__blob {
		width: 108%;
	}

	.crt-band__inner .crt-eyebrow {
		font-size: var(--crt-type-eyebrow);
		font-family: var(--crt-font-script);
		font-weight: 400;
	}

	.crt-band__inner .crt-sec-head__title {
		font-size: clamp(1.875rem, 8vw, 2.5rem);
	}

	.crt-band__body {
		font-size: clamp(1rem, calc(1rem + 0.08vw), 1.05rem);
		line-height: 1.625rem;
	}

	.crt-band__blob {
		transform: translate(-50%, -50%) rotate(-8deg);
	}

	.crt-band__decor {
		top: 36%;
		font-size: clamp(2.4375rem, calc(1.6875rem + 3vw), 3.75rem);
		opacity: 0.1;
	}

	.crt-band__decor:has(img) {
		opacity: 1;
	}

	.crt-band__decor--left {
		left: 10%;
		transform: translateY(-50%) rotate(-14deg);
	}

	.crt-band__decor--left img {
		width: 3.125rem;
		height: 3.125rem;
	}

	.crt-band__decor--right {
		right: 4%;
		transform: translateY(-50%) rotate(12deg);
	}

	.crt-band__decor--right img {
		width: 6.25rem;
		height: 6.25rem;
	}
}

/* =====================================================================
   16. Process steps
   ===================================================================== */

.crt-steps {
	position: relative;
	overflow: hidden;
	padding: var(--crt-section-pad) 0;
}

/* Decorative yarnball bleeding off the bottom-left corner, behind the step
   cards — mirrors the treatment of .crt-about__yarnball/.crt-usps__blueball. */
.crt-steps__yarnball {
	position: absolute;
	z-index: 0;
	left: clamp(-4rem, -6vw, -2rem);
	bottom: clamp(-4rem, -6vw, -2rem);
	width: clamp(6rem, 10vw, 9rem);
	color: var(--crt-yarn-purple);
	transform: rotate(-20deg);
	pointer-events: none;
}

.crt-steps__yarnball svg {
	display: block;
	width: 100%;
	height: 100%;
}

.crt-steps__inner {
	position: relative;
	z-index: 1;
}

.crt-steps__row {
	list-style: none;
	margin: 2.5rem 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1.25rem;
	counter-reset: crt-step;
}

.crt-step {
	background: #fff;
	border: 0.0625rem solid var(--crt-border);
	border-radius: var(--crt-radius-field);
	padding: 1.5rem 1.25rem;
	transition: border-color var(--crt-transition), box-shadow var(--crt-transition), transform var(--crt-transition);
}

.crt-step:hover {
	border-color: var(--crt-berry);
	box-shadow: var(--crt-shadow-soft);
	transform: translateY(-0.1875rem);
}

.crt-step__num {
	display: block;
	font-family: var(--crt-font-head);
	font-weight: 800;
	font-size: clamp(1.575rem, calc(1.435rem + 0.5vw), 1.75rem);
	color: var(--crt-heading);
	line-height: 1;
}

.crt-step__title {
	margin: 0.5rem 0 0.375rem;
	font-family: var(--crt-font-body);
	font-size: clamp(1rem, calc(1rem + 0.08vw), 1.05rem);
	font-weight: 600;
	color: var(--crt-berry);
	line-height: 1.35;
}

.crt-step__body {
	margin: 0;
	font-size: clamp(0.9375rem, calc(0.9375rem + 0.08vw), 0.984375rem);
	line-height: 1.375rem;
}

@media (max-width: 64rem) {
	.crt-steps__row {
		grid-template-columns: repeat(auto-fit, minmax(11.25rem, 1fr));
	}
}

@media (max-width: 37.5rem) {
	.crt-steps__row {
		grid-template-columns: 1fr;
		gap: 0.875rem;
	}
}

/* =====================================================================
   17. Contact info / socials / contact form
   ===================================================================== */

/* Contact page columns wrapper (Gutenberg columns block). */
.entry-content .wp-block-columns {
	max-width: 80rem;
	margin-inline: auto;
	padding: 2.5rem 1.5rem 5rem;
	gap: 2.5rem;
}

@media (max-width: 56.25rem) {
	.entry-content .wp-block-columns {
		flex-wrap: wrap;
		padding-bottom: 3.5rem;
	}

	.entry-content .wp-block-columns .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* Contact info column. */
.crt-contact-info {
	position: relative;
}

.crt-contact-info__rows {
	list-style: none;
	margin: 1.625rem 0;
	padding: 0;
	display: grid;
	gap: 1.125rem;
}

.crt-contact-info__rows li {
	display: flex;
	align-items: center;
	gap: 0.875rem 1.125rem;
	font-size: clamp(1.0625rem, calc(1.0625rem + 0.08vw), 1.115625rem);
}

.crt-contact-info__icon {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: var(--crt-peach);
	color: var(--crt-berry);
	flex-shrink: 0;
}

.crt-contact-info__icon svg {
	width: 1.125rem;
	height: 1.125rem;
	display: block;
}

.crt-contact-info__rows a {
	color: var(--crt-heading);
	text-decoration: none;
}

.crt-contact-info__rows a:hover {
	color: var(--crt-berry);
	text-decoration: underline;
}

.crt-contact-info__yarnball {
	position: absolute;
	right: 8%;
	bottom: -1rem;
	font-size: clamp(2.925rem, calc(2.025rem + 3vw), 4.5rem);
	color: var(--crt-berry);
	line-height: 1;
	transform: rotate(-8deg);
}

.crt-contact-info__yarnball .crt-icon {
	opacity: 0.18;
}

.crt-contact-info__yarnball img {
	display: block;
	width: 12rem;
	height: 12rem;
	object-fit: contain;
}

/* Social icon row. */
.crt-socials {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.crt-socials a {
	display: grid;
	place-items: center;
	width: 2.375rem;
	height: 2.375rem;
	border-radius: 50%;
	background: var(--crt-berry);
	color: #fff;
	text-decoration: none;
	transition: background-color var(--crt-transition), transform var(--crt-transition);
}

.crt-socials a svg {
	width: 1.0625rem;
	height: 1.0625rem;
	display: block;
}

.crt-socials a:hover {
	background: var(--crt-berry-dark);
	color: #fff;
	transform: translateY(-0.125rem);
}

.crt-socials--contact {
	margin-top: 0.375rem;
}

/* Contact form panel. */
.crt-contact-form {
	background: #FBE4E7;
	border-radius: var(--crt-radius-card);
	padding: 2.75rem;
}

.crt-contact-form__title {
	margin: 0 0 1.5rem;
	font-family: var(--crt-font-head);
	font-weight: 800;
	font-size: clamp(1.625rem, 3vw, 2rem);
	color: var(--crt-heading);
}

.crt-contact-form__missing {
	margin: 0;
	font-size: clamp(1.0625rem, calc(1.0625rem + 0.08vw), 1.115625rem);
	line-height: 1.75rem;
}

/* CF7 internals (and any generic form inside the panel). */
.crt-contact-form .wpcf7 p,
.crt-contact-form form p {
	margin: 0 0 1rem;
}

.crt-contact-form label {
	display: block;
	font-size: clamp(0.9375rem, calc(0.9375rem + 0.08vw), 0.984375rem);
	font-weight: 600;
	color: var(--crt-heading);
	margin-bottom: 0.375rem;
}

.crt-contact-form input[type="text"],
.crt-contact-form input[type="email"],
.crt-contact-form input[type="tel"],
.crt-contact-form input[type="url"],
.crt-contact-form input[type="number"],
.crt-contact-form select,
.crt-contact-form textarea {
	display: block;
	width: 100%;
	background: #fff;
	border: 0.0625rem solid var(--crt-border);
	border-radius: var(--crt-radius-field);
	padding: 0.875rem 1rem;
	font-family: inherit;
	font-size: clamp(1rem, calc(1rem + 0.08vw), 1.05rem);
	line-height: 1.5;
	color: var(--crt-body);
	transition: border-color var(--crt-transition), box-shadow var(--crt-transition);
}

.crt-contact-form input:focus,
.crt-contact-form select:focus,
.crt-contact-form textarea:focus {
	outline: none;
	border-color: var(--crt-berry);
	box-shadow: 0 0 0 0.1875rem rgba(172, 58, 126, 0.15);
}

.crt-contact-form input::placeholder,
.crt-contact-form textarea::placeholder {
	color: #000;
	opacity: 1;
}

.crt-contact-form textarea {
	height: 9.375rem !important;
	min-height: 2.5rem !important;
	resize: vertical;
}

/* Two-column field row utility (used inside CF7 markup). */
.crt-cf-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

@media (max-width: 37.5rem) {
	.crt-cf-row {
		grid-template-columns: 1fr;
	}
}

/* Submit as berry pill. */
.crt-contact-form input[type="submit"],
.crt-contact-form .wpcf7-submit,
.crt-contact-form button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-height: 3.5rem;
	background: var(--crt-berry);
	color: #fff;
	border: 0;
	border-radius: var(--crt-radius-pill);
	padding: 1rem 2rem;
	font-family: var(--crt-font-body);
	font-size: clamp(1.125rem, calc(1.125rem + 0.08vw), 1.18125rem);
	font-weight: 600;
	cursor: pointer;
	transition: background-color var(--crt-transition), transform var(--crt-transition), box-shadow var(--crt-transition);
}

.crt-contact-form input[type="submit"]:hover,
.crt-contact-form .wpcf7-submit:hover,
.crt-contact-form button[type="submit"]:hover {
	background: var(--crt-berry-dark);
	transform: translateY(-0.125rem);
	box-shadow: 0 0.5rem 1.125rem rgba(172, 58, 126, 0.28);
}

.crt-cf-submit {
	gap: 0.875rem;
	min-height: 2.75rem !important;
	padding: 0.375rem 0.375rem 0.375rem 1.75rem !important;
	border-radius: 624.9375rem !important;
}

.crt-cf-submit__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: #fff;
	color: var(--crt-berry);
	flex-shrink: 0;
}

.crt-cf-submit__arrow svg {
	width: 1rem;
	height: 1rem;
}

/* CF7 validation + response notices. */
.crt-contact-form .wpcf7-not-valid-tip {
	display: block;
	color: #c0392b;
	font-size: clamp(0.8125rem, calc(0.8125rem + 0.08vw), 0.853125rem);
	margin-top: 0.3125rem;
}

.crt-contact-form .wpcf7 form .wpcf7-response-output {
	margin: 1.125rem 0 0;
	padding: 0.875rem 1.125rem;
	border: 0.0625rem solid var(--crt-berry);
	border-radius: var(--crt-radius-field);
	background: #fff;
	font-size: clamp(0.9375rem, calc(0.9375rem + 0.08vw), 0.984375rem);
	line-height: 1.5rem;
}

.crt-contact-form .wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--crt-green);
	color: var(--crt-green);
}

.crt-contact-form .wpcf7 form.invalid .wpcf7-response-output,
.crt-contact-form .wpcf7 form.failed .wpcf7-response-output {
	border-color: #c0392b;
	color: #c0392b;
}

.crt-contact-form .wpcf7-spinner {
	margin-left: 0.75rem;
}

@media (max-width: 37.5rem) {
	.crt-contact-form {
		padding: 1.75rem 1.375rem;
	}
}

@media (max-width: 56.25rem) {
	.crt-contact-info .crt-eyebrow {
		font-size: var(--crt-type-eyebrow);
		font-family: var(--crt-font-script);
		font-weight: 400;
	}

	.crt-contact-info .crt-sec-head__title {
		font-size: clamp(1.875rem, 8vw, 2.5rem);
	}

	.crt-contact-info .crt-sec-head__body {
		font-size: clamp(1rem, calc(1rem + 0.08vw), 1.05rem);
		line-height: 1.625rem;
	}
}

/* =====================================================================
   18. FAQ
   ===================================================================== */

.crt-faq {
	padding: var(--crt-section-pad) 0;
	overflow: hidden;
}

.crt-faq__inner {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: 3.75rem;
	align-items: start;
}

/* Decorative media column — bleeds to the viewport's left edge, fixed height so
   accordion open/close on the right never resizes it. */
.crt-faq__media {
	position: relative;
	z-index: 1;
	padding-top: 0.75rem;
	margin-left: calc((100% - 100vw) / 2);
	height: 38.75rem;
}

.crt-faq__blob {
	display: none;
}

.crt-faq__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: left center;
	transform: scale(0.88);
	clip-path: url(#crt-faq-photo-clip);
}

.crt-faq__placeholder {
	display: grid;
	place-items: center;
	width: 100%;
	aspect-ratio: 1;
	background: var(--crt-peach);
	border-radius: 48% 52% 50% 50% / 52% 48% 52% 48%;
	color: var(--crt-berry);
	font-size: clamp(3.65625rem, calc(2.53125rem + 3vw), 5.625rem);
}

/* Accordion list. */
.crt-faq__list {
	display: grid;
	gap: 0.875rem;
	margin-top: 1.75rem;
}

.crt-faq__item {
	background: #fff;
	border: 0.0625rem solid var(--crt-border);
	border-radius: var(--crt-radius-field);
	overflow: hidden;
	transition: border-color var(--crt-transition), box-shadow var(--crt-transition);
}

.crt-faq__item:hover {
	border-color: rgba(172, 58, 126, 0.55);
}

.crt-faq__item.is-open {
	border-color: var(--crt-berry);
	box-shadow: var(--crt-shadow-soft);
}

.crt-faq__q {
	margin: 0;
	font-size: inherit;
}

.crt-faq__toggle {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	width: 100%;
	padding: 1.125rem 1.25rem;
	background: none;
	border: 0;
	cursor: pointer;
	text-align: left;
	font-family: var(--crt-font-body);
	font-size: clamp(1.0625rem, calc(1.0625rem + 0.08vw), 1.115625rem);
	font-weight: 600;
	line-height: 1.4;
	color: var(--crt-heading);
	transition: color var(--crt-transition);
}

.crt-faq__toggle:hover,
.crt-faq__toggle:focus,
.crt-faq__toggle:active,
.crt-faq__item.is-open .crt-faq__toggle {
	background: none !important;
	color: var(--crt-berry);
}

.crt-faq__qmark {
	display: grid;
	place-items: center;
	width: 1.875rem;
	height: 1.875rem;
	border-radius: 50%;
	background: var(--crt-berry);
	color: #fff;
	font-family: var(--crt-font-head);
	font-size: clamp(0.875rem, calc(0.875rem + 0.08vw), 0.91875rem);
	font-weight: 800;
	flex-shrink: 0;
}

.crt-faq__qtext {
	flex: 1;
}

/* Plus/minus swap — the span holds both icons. */
.crt-faq__plus {
	display: grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	font-size: clamp(1.2375rem, calc(1.1275rem + 0.5vw), 1.375rem);
	color: currentColor;
	flex-shrink: 0;
}

.crt-faq__plus .crt-icon:nth-child(2) {
	display: none;
}

.crt-faq__item.is-open .crt-faq__plus .crt-icon:nth-child(1) {
	display: none;
}

.crt-faq__item.is-open .crt-faq__plus .crt-icon:nth-child(2) {
	display: inline-grid;
}

/* Answer panel. */
.crt-faq__a {
	padding: 0 1.25rem 1.25rem 4rem;
	font-size: clamp(1rem, calc(1rem + 0.08vw), 1.05rem);
	line-height: 1.625rem;
}

@media (max-width: 56.25rem) {
	.crt-faq__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 2.25rem;
		padding-inline: 1.25rem;
	}

	.crt-faq__list-col {
		min-width: 0;
	}

	.crt-faq__media {
		position: relative;
		z-index: 0;
		left: -1.25rem;
		width: 18.75rem;
		height: 18.75rem;
		max-width: 18.75rem;
		margin-inline: auto;
		padding-top: 0;
	}

	.crt-faq__media img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: 65% center;
		transform: none;
	}

	.crt-faq__placeholder {
		width: 100%;
		height: 100%;
	}

	.crt-faq__list-col .crt-eyebrow {
		font-size: var(--crt-type-eyebrow);
		font-family: var(--crt-font-script);
		font-weight: 400;
	}

	.crt-faq__list-col .crt-sec-head__title {
		font-size: clamp(1.875rem, 8vw, 2.5rem);
	}

	.crt-faq__list-col .crt-sec-head__body {
		font-size: clamp(1rem, calc(1rem + 0.08vw), 1.05rem);
		line-height: 1.625rem;
	}
}

@media (max-width: 30rem) {
	.crt-faq__toggle {
		padding: 1rem;
		gap: 0.625rem;
		font-size: clamp(1rem, calc(1rem + 0.08vw), 1.05rem);
	}

	.crt-faq__a {
		padding: 0 1rem 1rem 3.5rem;
	}
}

/* =====================================================================
   19. Offer band
   ===================================================================== */

.crt-offer {
	position: relative;
	padding: 6.25rem 0;
	text-align: center;
	overflow: hidden;
}

.crt-offer__blob {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(68.75rem, 92%);
	aspect-ratio: 1062 / 491.12;
	height: auto;
	color: var(--crt-cream);
	z-index: 0;
}

.crt-offer__yarn {
	position: absolute;
	top: 50%;
	font-size: clamp(4.46875rem, calc(3.09375rem + 3vw), 6.875rem);
	line-height: 1;
	z-index: 0;
}

.crt-offer__yarn--left {
	left: 2%;
	color: var(--crt-berry);
	opacity: 0.16;
	transform: translateY(-50%) rotate(-16deg);
}

.crt-offer__yarn--right {
	right: 2%;
	color: var(--crt-green);
	opacity: 0.16;
	transform: translateY(-50%) rotate(14deg);
}

/* Homepage-only ball + needle/heart-thread pairing (GRO-442 §Section 6). */
.crt-offer--home .crt-offer__yarn {
	font-size: clamp(0rem, 0rem, 0rem);
	opacity: 1;
	width: 6rem;
	height: 6rem;
}

.crt-offer--home .crt-offer__yarn--left {
	left: 6%;
	color: var(--crt-yarn-blue);
	transform: translateY(-50%);
}

.crt-offer--home .crt-offer__yarn--right {
	right: 6%;
	color: var(--crt-yarn-red);
	transform: translateY(-50%);
}

.crt-offer--home .crt-offer__yarn svg:first-child {
	display: block;
	width: 100%;
	height: 100%;
}

.crt-offer__needle {
	position: absolute;
	top: -0.875rem;
	right: -1.125rem;
	width: 3.75rem;
	color: #9C9C9C;
	transform: rotate(18deg);
}

.crt-offer__needle svg {
	display: block;
	width: 100%;
	height: auto;
}

.crt-offer__heart-thread {
	position: absolute;
	top: 50%;
	left: 100%;
	width: 9.375rem;
	transform: translateY(-60%);
	color: var(--crt-yarn-red);
}

.crt-offer__heart-thread svg {
	display: block;
	width: 100%;
	height: auto;
}

@media (max-width: 56.25rem) {
	.crt-offer--home .crt-offer__yarn {
		display: none;
	}
}

.crt-offer__inner {
	position: relative;
	z-index: 1;
	max-width: 52.75rem;
	margin-inline: auto;
	padding-inline: 1.5rem;
	display: grid;
	gap: 1.625rem;
	justify-items: center;
}

.crt-offer__title {
	margin: 0;
	max-width: 38.75rem;
	font-family: var(--crt-font-head);
	font-weight: 800;
	font-size: clamp(1.875rem, 4.5vw, 3rem);
	color: var(--crt-heading);
}

/* When a real decoration image is set, bring it inside the blob near the
   heading (instead of the faint edge watermark treatment). */
.crt-offer__yarn:has(img) {
	top: 9.375rem !important;
	opacity: 1 !important;
	width: 11.25rem !important;
	height: 11.25rem !important;
	font-size: clamp(0rem, 0rem, 0rem) !important;
}

.crt-offer__yarn--left:has(img) {
	left: 22% !important;
	color: transparent !important;
	transform: translateY(-50%) !important;
}

.crt-offer__yarn--right:has(img) {
	right: 22% !important;
	top: 2.5rem !important;
	color: transparent !important;
	transform: translateY(-50%) !important;
}

.crt-offer__yarn img {
	display: block;
	max-width: none !important;
	width: 11.25rem !important;
	height: 11.25rem !important;
	object-fit: contain;
}

.crt-offer__yarn--right img {
	width: 31.25rem !important;
	height: 31.25rem !important;
}

.crt-offer__body {
	margin: 0;
	font-size: clamp(1.2375rem, calc(1.1275rem + 0.5vw), 1.375rem);
	line-height: 2.125rem;
}

@media (max-width: 56.25rem) {
	.crt-offer {
		padding: 4.5rem 0;
	}

	.crt-offer__blob {
		width: min(81.25rem, 115%);
		aspect-ratio: 1062 / 491.12;
		height: auto;
	}

	.crt-offer__yarn {
		font-size: clamp(2.6rem, calc(1.8rem + 3vw), 4rem);
		opacity: 0.1;
	}

	.crt-offer__title {
		font-size: clamp(1.625rem, 7vw, 2.125rem);
	}

	.crt-offer__body {
		font-size: clamp(1.125rem, calc(1.125rem + 0.08vw), 1.18125rem);
		line-height: 1.875rem;
	}

	.crt-offer__yarn:has(img) {
		display: block !important;
		top: 34% !important;
		width: 5.625rem !important;
		height: 5.625rem !important;
	}

	.crt-offer__yarn--left:has(img) {
		left: 6% !important;
		width: 4.375rem !important;
		height: 4.375rem !important;
	}

	.crt-offer__yarn--right:has(img) {
		right: -2% !important;
		top: 34% !important;
		width: 8.125rem !important;
		height: 8.125rem !important;
	}

	.crt-offer__yarn img {
		width: 4.375rem !important;
		height: 4.375rem !important;
	}

	.crt-offer__yarn--right img {
		width: 8.125rem !important;
		height: 8.125rem !important;
	}
}

/* =====================================================================
   20. Footer
   ===================================================================== */

.crt-footer {
	margin-top: 2.5rem;
}

.crt-footer__wave {
	margin-bottom: -0.0625rem; /* no hairline gap against the panel */
}

.crt-footer__inner {
	background: #F5F5F5E6;
}

.crt-footer__inner > * {
	max-width: 80rem;
	margin-inline: auto;
}

.crt-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr repeat(3, 0.8fr) 1.2fr;
	gap: 1.875rem;
	padding: 1.875rem 1.5rem 0;
}

/* Pull the Explore / Support / Legal nav columns closer to each other only —
   brand and subscribe columns keep their normal spacing. */
.crt-footer__col:not(.crt-footer__subscribe) + .crt-footer__col:not(.crt-footer__subscribe) {
	margin-left: -0.875rem;
}

/* Nudge the nav/subscribe headings down so they align with the taller logo. */
.crt-footer__col {
	padding-top: 2.5rem;
}

/* Brand column. */
.crt-wordmark--footer {
	display: inline-flex;
	margin-bottom: 1rem;
}

.crt-wordmark--footer img {
	height: 10.625rem;
}

.crt-wordmark--footer.crt-wordmark--text .crt-wordmark__script {
	font-size: clamp(1.7875rem, calc(1.2375rem + 3vw), 2.75rem);
}

.crt-wordmark--footer.crt-wordmark--text .crt-wordmark__by {
	font-size: clamp(1.125rem, calc(1.125rem + 0.08vw), 1.18125rem);
	padding-left: 2.875rem;
}

.crt-wordmark--footer.crt-wordmark--text .crt-wordmark__by em {
	font-size: clamp(1.35rem, calc(1.23rem + 0.5vw), 1.5rem);
}

.crt-footer__blurb {
	margin: 0 0 1.125rem;
	font-size: clamp(0.9375rem, calc(0.9375rem + 0.08vw), 0.984375rem);
	line-height: 1.5rem;
	color: #444;
}

/* Link columns. */
.crt-footer__heading {
	margin: 0 0 0.875rem;
	font-family: var(--crt-font-head);
	font-size: clamp(1.125rem, calc(1.125rem + 0.08vw), 1.18125rem);
	font-weight: 800;
	color: var(--crt-heading);
}

.crt-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.625rem;
}

.crt-footer__col a {
	font-size: clamp(0.9375rem, calc(0.9375rem + 0.08vw), 0.984375rem);
	color: #444;
	text-decoration: none;
}

.crt-footer__col a:hover {
	color: var(--crt-berry);
	text-decoration: underline;
}

.crt-footer__subscribe p {
	margin: 0 0 0.875rem;
	font-size: clamp(0.9375rem, calc(0.9375rem + 0.08vw), 0.984375rem);
	line-height: 1.5rem;
	color: #444;
}

/* Subscribe mini-form. */
.crt-subscribe {
	position: relative;
}

.crt-subscribe input[type="email"] {
	width: 100%;
	background: #fff;
	border: 0.0625rem solid var(--crt-border);
	border-radius: 1.5rem;
	padding: 0.8125rem 3.25rem 0.8125rem 1.125rem;
	font-family: inherit;
	font-size: clamp(0.9375rem, calc(0.9375rem + 0.08vw), 0.984375rem);
	color: var(--crt-body);
	transition: border-color var(--crt-transition), box-shadow var(--crt-transition);
}

.crt-subscribe input[type="email"]:focus {
	outline: none;
	border-color: var(--crt-berry);
	box-shadow: 0 0 0 0.1875rem rgba(172, 58, 126, 0.15);
}

.crt-subscribe button {
	position: absolute;
	right: 0.375rem;
	top: 50%;
	transform: translateY(-50%);
	display: grid !important;
	place-items: center;
	box-sizing: border-box !important;
	width: 2.125rem !important;
	height: 2.125rem !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: var(--crt-berry) !important;
	color: #fff !important;
	cursor: pointer;
	transition: background-color var(--crt-transition);
}

.crt-subscribe button svg {
	width: 0.9375rem;
	height: 0.9375rem;
	display: block;
}

.crt-subscribe button:hover {
	background: var(--crt-berry-dark);
}

/* Bottom strip. */
.crt-footer__bottom {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.625rem;
	border-top: 0.0625rem solid #e4e4e4;
	margin-top: 1.75rem;
	padding: 1.125rem 1.5rem 1.5rem;
	font-size: clamp(0.875rem, calc(0.875rem + 0.08vw), 0.91875rem);
	color: #555;
}

.crt-footer__credit {
	display: inline-flex;
	align-items: center;
	gap: 0.4375rem;
	color: #555;
	text-decoration: none;
	transition: color var(--crt-transition);
}

.crt-footer__credit:hover,
.crt-footer__credit:focus-visible {
	color: var(--crt-berry);
	text-decoration: underline;
}

.crt-gm8-mark {
	width: 1.25rem;
	height: 1.25rem;
	flex: none;
	color: var(--crt-berry);
}

@media (max-width: 64rem) {
	.crt-footer__grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 37.5rem) {
	.crt-footer__grid {
		display: flex;
		flex-wrap: wrap;
		grid-template-columns: 1fr;
		padding: 1.25rem 1.25rem 0;
		gap: 1.625rem;
	}

	.crt-footer__brand {
		width: 100%;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.crt-footer__brand .crt-socials {
		justify-content: center;
	}

	.crt-footer__col {
		padding-top: 0;
	}

	.crt-footer__col:not(.crt-footer__subscribe) {
		margin-left: 0 !important;
	}

	.crt-footer__grid nav.crt-footer__col:nth-of-type(1),
	.crt-footer__grid nav.crt-footer__col:nth-of-type(2) {
		width: calc(50% - 0.8125rem);
	}

	.crt-footer__grid nav.crt-footer__col:nth-of-type(3) {
		width: 100%;
		text-align: left;
	}

	.crt-footer__grid nav.crt-footer__col:nth-of-type(3) ul {
		justify-items: start;
	}

	.crt-footer__subscribe {
		width: 100%;
	}

	.crt-footer__bottom {
		flex-direction: column;
		text-align: center;
	}
}

/* =====================================================================
   21. Utility / misc components
   ===================================================================== */

/* Page title block. */
.crt-page-title {
	text-align: center;
	padding: 3.5rem 1.25rem 0.5rem;
}

.crt-page-title h1 {
	margin: 0 0 1.125rem;
	font-family: var(--crt-font-head);
	font-weight: 800;
	font-size: clamp(2rem, 4.5vw, 3rem);
	color: var(--crt-heading);
}

.crt-page-title .crt-divider {
	margin-inline: auto;
}

.crt-page-title__desc {
	margin: 1.125rem auto 0;
	max-width: 40rem;
	font-size: clamp(1.125rem, calc(1.125rem + 0.08vw), 1.18125rem);
	line-height: 1.875rem;
}

/* Empty state (wishlist / no products found). */
.crt-empty-state {
	display: grid;
	gap: 1.125rem;
	justify-items: center;
	text-align: center;
	padding: 3.75rem 1.5rem;
}

.crt-empty-state__icon {
	font-size: clamp(2.6rem, calc(1.8rem + 3vw), 4rem);
	color: var(--crt-berry);
	opacity: 0.5;
}

/* Editor hint for unconfigured blocks. */
.crt-block-empty {
	border: 0.0625rem dashed var(--crt-border);
	border-radius: var(--crt-radius-field);
	padding: 1.25rem;
	color: #777;
	background: #fafafa;
	font-size: clamp(0.9375rem, calc(0.9375rem + 0.08vw), 0.984375rem);
}

/* Rich text (WYSIWYG output). */
.crt-rich p {
	margin: 0 0 1.1em;
}

.crt-rich p:last-child {
	margin-bottom: 0;
}

.crt-rich a {
	color: var(--crt-berry);
	text-decoration: underline;
}

.crt-rich a:hover {
	color: var(--crt-berry-dark);
}

.crt-rich ul,
.crt-rich ol {
	margin: 0 0 1.1em;
	padding-left: 1.3em;
}

/* =====================================================================
   22. AOS + motion safety
   ===================================================================== */

/* Content must never stay invisible if AOS fails to boot —
   JS adds .crt-aos-ready to <html> right before AOS.init(). */
html:not(.crt-aos-ready) [data-aos] {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.crt-btn,
	.crt-btn__arrow,
	.crt-drawer__close,
	.crt-cart-drawer__item-remove,
	.crt-usp__surface,
	.crt-usp__icon,
	.crt-usp__title,
	.crt-usp__body {
		transition-duration: 0.01ms !important;
	}

	.crt-usp:hover .crt-usp__surface,
	.crt-usp:hover .crt-usp__icon,
	.crt-usp:hover .crt-usp__title,
	.crt-usp:hover .crt-usp__body {
		transform: none;
	}

	[data-aos] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	.crt-header::after,
	.crt-wordmark img {
		transition: none;
	}

	* {
		scroll-behavior: auto !important;
	}
}

/* =====================================================================
   Responsive: shared section rhythm
   ===================================================================== */

@media (max-width: 48rem) {
	:root {
		--crt-section-pad: 3rem;
	}

	body {
		font-size: clamp(1rem, calc(1rem + 0.08vw), 1.05rem);
		line-height: 1.6875rem;
	}

	.crt-hero,
	.crt-usps,
	.crt-ethos,
	.crt-band {
		padding-top: 3.5rem;
		padding-bottom: 3.5rem;
	}

	.crt-hero {
		padding-bottom: 0;
	}

	.crt-offer {
		padding: 3.75rem 0;
	}

	.crt-sec-head__body,
	.crt-hero__body {
		font-size: clamp(1rem, calc(1rem + 0.08vw), 1.05rem);
		line-height: 1.6875rem;
	}

	.crt-page-title {
		padding-top: 2.5rem;
	}

	.crt-products__cta {
		margin-top: 2rem;
	}
}

@media (max-width: 30rem) {
	.crt-btn {
		font-size: clamp(1rem, calc(1rem + 0.08vw), 1.05rem);
		padding: 0.8125rem 1.25rem;
		gap: 0.625rem;
		min-height: 3.125rem;
	}

	.crt-btn__arrow {
		width: 1.75rem;
		height: 1.75rem;
	}

	.crt-btn__arrow svg {
		width: 0.875rem;
		height: 0.875rem;
	}

	.crt-eyebrow {
		font-size: var(--crt-type-eyebrow);
		font-family: var(--crt-font-script);
		font-weight: 400;
	}

	.crt-contact-info__yarnball {
		display: none;
	}
}

/* ===== Toast (wishlist feedback, injected by assets/js/woocommerce.js) ===== */
.crt-toast {
	position: fixed;
	left: 50%;
	bottom: 1.75rem;
	transform: translate(-50%, 1rem);
	background: var(--crt-heading);
	color: #fff;
	font-size: clamp(0.9375rem, calc(0.9375rem + 0.08vw), 0.984375rem);
	line-height: 1.4;
	padding: 0.8125rem 1.375rem;
	border-radius: 1.875rem;
	box-shadow: 0 0.625rem 1.875rem rgba(85, 73, 79, 0.28);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease, transform 0.25s ease;
	z-index: 200;
	max-width: min(92vw, 30rem);
	text-align: center;
}
.crt-toast.is-visible {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* =====================================================================
   23. Mobile menu + cart drawers (GRO-476)
   ===================================================================== */

body.crt-scroll-lock {
	overflow: hidden;
}

.crt-drawer[hidden] {
	display: none;
}

.crt-drawer {
	position: fixed;
	inset: 0;
	z-index: 300;
}

.crt-drawer__overlay {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: rgba(34, 29, 32, 0.45);
	opacity: 0;
	transition: opacity var(--crt-transition);
}

.crt-drawer.is-open .crt-drawer__overlay {
	opacity: 1;
}

.crt-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
	height: 100%;
	width: min(22.5rem, 88vw);
	background: #fff;
	box-shadow: -1.125rem 0 2.5rem rgba(85, 73, 79, 0.18);
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	padding: 1.5rem 1.5rem 2rem;
	overflow-y: auto;
	transform: translateX(100%);
	transition: transform 0.3s ease;
}

.crt-drawer.is-open .crt-drawer__panel {
	transform: translateX(0);
}

.crt-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}

.crt-drawer__logo img {
	height: 4rem;
}

.crt-drawer__close {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0.0625rem solid var(--crt-berry);
	border-radius: 50%;
	background: var(--crt-berry);
	color: #fff;
	cursor: pointer;
	transition: background-color 240ms cubic-bezier(.22, 1, .36, 1), color 240ms cubic-bezier(.22, 1, .36, 1), border-color 240ms cubic-bezier(.22, 1, .36, 1), transform 240ms cubic-bezier(.22, 1, .36, 1), box-shadow 240ms cubic-bezier(.22, 1, .36, 1);
}

.crt-drawer__close:hover,
.crt-drawer__close:focus-visible {
	border-color: var(--crt-berry-dark);
	background: var(--crt-berry-dark);
	color: #fff;
	transform: translateY(-0.125rem);
	box-shadow: 0 0.5rem 1.125rem rgba(172, 58, 126, 0.22);
}

.crt-drawer__close:focus-visible {
	outline: 0.125rem solid var(--crt-heading);
	outline-offset: 0.125rem;
}

.crt-drawer__close:active {
	transform: translateY(0);
}

.crt-drawer__close svg {
	width: 1.125rem;
	height: 1.125rem;
	display: block;
}

.crt-drawer__greeting {
	margin: 0;
	font-family: var(--crt-font-body);
	font-weight: 600;
	font-size: clamp(0.9375rem, calc(0.9375rem + 0.08vw), 0.984375rem);
	color: var(--crt-berry);
	background: var(--crt-pink);
	padding: 0.625rem 0.875rem;
	border-radius: var(--crt-radius-field);
}

.crt-drawer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.crt-drawer__list li {
	border-bottom: 0.0625rem solid #f6ebf1;
}

.crt-drawer__list li:last-child {
	border-bottom: 0;
}

.crt-drawer__list a {
	display: block;
	padding: 0.875rem 0.25rem;
	font-size: clamp(1.0625rem, calc(1.0625rem + 0.08vw), 1.115625rem);
	font-weight: 500;
	color: var(--crt-heading);
	text-decoration: none;
}

.crt-drawer__list a:hover,
.crt-drawer__list a[aria-current="page"] {
	color: var(--crt-berry);
}

.crt-drawer__actions {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding-top: 0.25rem;
	border-top: 0.0625rem solid #f6ebf1;
}

.crt-drawer__action {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.625rem 0.25rem;
	font-size: clamp(0.9375rem, calc(0.9375rem + 0.08vw), 0.984375rem);
	font-weight: 600;
	color: var(--crt-heading);
	text-decoration: none;
}

.crt-drawer__action svg {
	width: 1.25rem;
	height: 1.25rem;
	color: var(--crt-berry);
	display: block;
}

.crt-drawer__action:hover {
	color: var(--crt-berry);
}

.crt-drawer__search {
	position: relative;
	display: flex;
}

.crt-drawer__search input[type="search"] {
	width: 100%;
	border: 0.0625rem solid var(--crt-border);
	border-radius: var(--crt-radius-pill);
	padding: 0.75rem 3.125rem 0.75rem 1.125rem;
	font-family: inherit;
	font-size: clamp(0.9375rem, calc(0.9375rem + 0.08vw), 0.984375rem);
	color: var(--crt-body);
}

.crt-drawer__search input[type="search"]:focus {
	outline: none;
	border-color: var(--crt-berry);
	box-shadow: 0 0 0 0.1875rem rgba(172, 58, 126, 0.15);
}

.crt-drawer__search button {
	position: absolute;
	top: 50%;
	right: 0.3125rem;
	transform: translateY(-50%);
	width: 2.25rem;
	height: 2.25rem;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--crt-berry);
	color: #fff;
	cursor: pointer;
}

.crt-drawer__search button svg {
	width: 1rem;
	height: 1rem;
	display: block;
}

.crt-drawer__socials {
	margin-top: auto;
	padding-top: 1rem;
	border-top: 0.0625rem solid #f6ebf1;
}

/* Cart drawer specifics. */
.crt-drawer__title {
	margin: 0;
	font-family: var(--crt-font-head);
	font-size: clamp(1.2375rem, calc(1.1275rem + 0.5vw), 1.375rem);
	font-weight: 800;
	color: var(--crt-heading);
}

.crt-cart-drawer__summary {
	margin: 0;
	font-size: clamp(0.9375rem, calc(0.9375rem + 0.08vw), 0.984375rem);
	color: var(--crt-heading);
}

/* Product cards inside the cart drawer — name/image/qty/price instead of a
   vague "N item(s) added" line. */
.crt-cart-drawer__items {
	display: flex;
	flex-direction: column;
}

.crt-cart-drawer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
}

.crt-cart-drawer__item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.crt-cart-drawer__item-media {
	flex-shrink: 0;
	display: block;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: var(--crt-radius-field);
	overflow: hidden;
	background: var(--crt-cream);
}

.crt-cart-drawer__item-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.crt-cart-drawer__item-body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.crt-cart-drawer__item-name {
	font-family: var(--crt-font-body);
	font-size: clamp(0.875rem, calc(0.875rem + 0.08vw), 0.91875rem);
	font-weight: 600;
	color: var(--crt-heading);
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

a.crt-cart-drawer__item-name:hover {
	color: var(--crt-berry);
}

.crt-cart-drawer__item-meta {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: clamp(0.8125rem, calc(0.8125rem + 0.08vw), 0.853125rem);
	color: #6b6468;
}

.crt-cart-drawer__item-price {
	font-weight: 700;
	color: var(--crt-berry);
}

.crt-cart-drawer__item-remove {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 0.0625rem solid var(--crt-berry);
	border-radius: 50%;
	background: var(--crt-berry);
	color: #fff;
	text-decoration: none;
	transition: background-color 240ms cubic-bezier(.22, 1, .36, 1), color 240ms cubic-bezier(.22, 1, .36, 1), border-color 240ms cubic-bezier(.22, 1, .36, 1), transform 240ms cubic-bezier(.22, 1, .36, 1), box-shadow 240ms cubic-bezier(.22, 1, .36, 1);
}

.crt-cart-drawer__item-remove .crt-icon {
	font-size: clamp(1.0625rem, calc(1.0625rem + 0.08vw), 1.115625rem);
}

.crt-cart-drawer__item-remove:hover,
.crt-cart-drawer__item-remove:focus-visible {
	border-color: var(--crt-berry-dark);
	background: var(--crt-berry-dark);
	color: #fff;
	text-decoration: none;
	transform: translateY(-0.125rem);
	box-shadow: 0 0.5rem 1.125rem rgba(172, 58, 126, 0.22);
}

.crt-cart-drawer__item-remove:focus-visible {
	outline: 0.125rem solid var(--crt-heading);
	outline-offset: 0.125rem;
}

.crt-cart-drawer__item-remove:active {
	transform: translateY(0);
}

.crt-cart-drawer__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	padding: 1.5rem 0;
	color: #6b6468;
	font-size: clamp(0.875rem, calc(0.875rem + 0.08vw), 0.91875rem);
}

.crt-cart-drawer__empty .crt-icon {
	font-size: clamp(1.8rem, calc(1.64rem + 0.5vw), 2rem);
	color: var(--crt-berry);
}

.crt-cart-drawer__empty p {
	margin: 0;
}

.crt-cart-drawer__actions {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-top: auto;
}

.crt-cart-drawer__actions .crt-btn {
	justify-content: center;
}

.crt-cart-drawer__view-cart {
	text-align: center;
	font-size: clamp(0.8125rem, calc(0.8125rem + 0.08vw), 0.853125rem);
	font-weight: 700;
	color: var(--crt-heading);
	text-decoration: underline;
	text-decoration-color: var(--crt-line);
}

.crt-cart-drawer__view-cart:hover,
.crt-cart-drawer__view-cart:focus-visible {
	color: var(--crt-berry);
}

@media (min-width: 64rem) {
	/* Desktop never shows the hamburger, so the mobile drawer can't be opened
	   there — avoid it intercepting anything if markup is ever left visible. */
	#crt-mobile-drawer {
		display: none;
	}
}

/* =====================================================================
   24. Pattern page blocks (GRO-483 — crt-pattern-* ACF blocks)
   Brand-token build: berry / pink / peach / cream / yellow / green only.
   Rhythm: cream hero → white intro/notes → pink materials → white abbr →
   cream stitches → yellow important → green tag panel → … → peach contact.
   ===================================================================== */

/* Every pattern section is a grid/flex parent: children must be allowed to
   shrink below their content width or long words/tables blow the track out. */
[class*="crt-pattern-"] > .crt-container > *,
.crt-pattern-hero__inner > *,
.crt-pattern-intro__inner > *,
.crt-pattern-notes__card > *,
.crt-pattern-materials__inner > *,
.crt-pattern-important__card > *,
.crt-pattern-tag__panel > *,
.crt-pattern-contact__inner > *,
.crt-pattern-special__card > * {
	min-width: 0;
}

/* Inside pattern blocks the decorative dashed thread is an in-flow divider.
   The global .crt-thread is position:absolute / width:100%, which made every
   divider stretch across (and strike through) its whole section. */
[class*="crt-pattern-"] .crt-thread {
	position: static;
	display: block;
	width: 100%;
	height: auto;
}

/* The thread is a 1200-unit viewBox; drawn at divider size its 2-unit stroke
   would be sub-pixel, so keep the stroke in screen pixels. */
[class*="crt-pattern-"] .crt-thread path,
[class*="crt-pattern-"] .crt-thread circle {
	vector-effect: non-scaling-stroke;
	stroke-width: 2px;
}

/* GeneratePress gives every <table> a bottom margin that leaves a blank strip
   inside our rounded table wrappers. */
.crt-pattern-materials__table,
.crt-pattern-abbr__table,
.crt-pattern-instructions__rounds {
	margin: 0;
}

.crt-pattern-hero,
.crt-pattern-tag,
.crt-pattern-contact,
.crt-pattern-special,
.crt-pattern-materials {
	overflow: clip;
}

.crt-pattern-media {
	display: block;
	position: relative;
	border-radius: var(--crt-radius-card);
	overflow: hidden;
}

.crt-pattern-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.crt-pattern-media--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 10rem;
	background: var(--crt-pink);
	color: var(--crt-berry);
}

.crt-pattern-media--empty .crt-icon svg {
	width: 3rem;
	height: 3rem;
}

/* Shared "framed photo" treatment: white mat, soft shadow, slight tilt. */
.crt-pattern-notes__media .crt-pattern-media,
.crt-pattern-important__media .crt-pattern-media,
.crt-pattern-tag__media .crt-pattern-media,
.crt-pattern-contact__media .crt-pattern-media {
	aspect-ratio: 1 / 1;
	border: 0.5rem solid #fff;
	border-radius: var(--crt-radius-card);
	box-shadow: var(--crt-shadow-soft);
	transform: rotate(3deg);
}

/* ---------- Hero ---------- */

.crt-pattern-hero {
	position: relative;
	padding-block: clamp(3rem, 7vw, 6rem);
	background: var(--crt-cream);
}

.crt-pattern-hero--soft-pink { background: var(--crt-pink); }
.crt-pattern-hero--white { background: #fff; }

.crt-pattern-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}

.crt-pattern-hero__eyebrow {
	margin-bottom: 0.75rem;
}

.crt-pattern-hero__title {
	font-family: var(--crt-font-head);
	font-weight: 800;
	font-size: clamp(2.5rem, 2rem + 3.6vw, 4.75rem);
	color: var(--crt-heading);
	margin: 0 0 1rem;
	line-height: 1.02;
	letter-spacing: -0.02em;
	text-wrap: balance;
	overflow-wrap: break-word;
}

.crt-pattern-hero__subtitle {
	font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
	color: var(--crt-body);
	margin: 0 0 1.75rem;
	max-width: 46ch;
	line-height: 1.55;
}

/* Spec sheet: labelled facts in one white card, not a heap of anonymous pills. */
.crt-pattern-hero__specs {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	margin: 0 0 2rem;
	padding: 0;
	background: #fff;
	border: 0.125rem solid var(--crt-card-border);
	border-radius: var(--crt-radius-card);
	box-shadow: var(--crt-shadow-soft);
	overflow: hidden;
}

.crt-pattern-hero__spec {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem 1.125rem;
	border-right: 0.0625rem solid var(--crt-peach);
	border-bottom: 0.0625rem solid var(--crt-peach);
}

.crt-pattern-hero__spec:nth-child(3n) { border-right: 0; }
.crt-pattern-hero__spec:nth-last-child(-n + 3) { border-bottom: 0; }

.crt-pattern-hero__spec-icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: var(--crt-pink);
	color: var(--crt-berry);
}

.crt-pattern-hero__spec-icon .crt-icon svg { width: 1.25rem; height: 1.25rem; }

.crt-pattern-hero__spec-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.crt-pattern-hero__spec-label {
	font-size: 0.8125rem;
	line-height: 1.3;
	color: var(--crt-heading);
	opacity: 0.8;
}

.crt-pattern-hero__spec-value {
	font-family: var(--crt-font-head);
	font-weight: 800;
	font-size: 1.0625rem;
	line-height: 1.25;
	color: var(--crt-heading);
	overflow-wrap: anywhere;
}

/* Media: cut-out sits on a big peach blob with a yellow sun and stitched ring. */
.crt-pattern-hero__media {
	position: relative;
	isolation: isolate;
	justify-self: center;
	width: 100%;
	max-width: 34rem;
	aspect-ratio: 1 / 1.05;
	display: grid;
	place-items: end center;
}

.crt-pattern-hero__media::before {
	content: "";
	position: absolute;
	inset: 4% 2% 0 2%;
	z-index: -2;
	background: var(--crt-peach);
	border-radius: 58% 42% 52% 48% / 48% 56% 44% 52%;
}

.crt-pattern-hero__media::after {
	content: "";
	position: absolute;
	top: 0;
	right: 3%;
	width: 22%;
	aspect-ratio: 1;
	z-index: -1;
	border-radius: 50%;
	background: var(--crt-yellow);
}

.crt-pattern-hero__thread {
	position: absolute;
	left: -6%;
	right: -6%;
	bottom: 6%;
	z-index: -1;
	color: var(--crt-berry);
	pointer-events: none;
	opacity: 0.55;
}

.crt-pattern-hero__thread .crt-thread { position: static; width: 100%; }

.crt-pattern-hero__image {
	width: 88%;
	height: 100%;
	aspect-ratio: auto;
	border-radius: 0;
	overflow: visible;
	background: none;
}

.crt-pattern-hero__image img {
	object-fit: contain;
	object-position: center bottom;
	filter: drop-shadow(0 1.25rem 1.25rem rgba(85, 73, 79, 0.18));
}

.crt-pattern-hero__image.crt-pattern-media--empty {
	background: var(--crt-pink);
	border-radius: var(--crt-radius-card);
}

.crt-pattern-hero__caption {
	grid-row: 2;
	text-align: center;
	margin-top: 0.75rem;
	color: var(--crt-berry);
	font-size: 0.875rem;
	font-style: italic;
}

@media (max-width: 75rem) {
	.crt-pattern-hero__specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.crt-pattern-hero__spec:nth-child(3n) { border-right: 0.0625rem solid var(--crt-peach); }
	.crt-pattern-hero__spec:nth-child(2n) { border-right: 0; }
	.crt-pattern-hero__spec:nth-last-child(-n + 3) { border-bottom: 0.0625rem solid var(--crt-peach); }
	.crt-pattern-hero__spec:nth-last-child(-n + 2) { border-bottom: 0; }
}

@media (max-width: 56.25rem) {
	.crt-pattern-hero__inner { grid-template-columns: minmax(0, 1fr); }
	.crt-pattern-hero__media {
		order: -1;
		max-width: 26rem;
		aspect-ratio: 1 / 0.95;
	}
	.crt-pattern-hero__title { font-size: clamp(2.25rem, 9vw, 3.5rem); }
}

@media (max-width: 30rem) {
	.crt-pattern-hero__specs { grid-template-columns: minmax(0, 1fr); }
	.crt-pattern-hero__spec,
	.crt-pattern-hero__spec:nth-child(2n),
	.crt-pattern-hero__spec:nth-child(3n) { border-right: 0; }
	.crt-pattern-hero__spec,
	.crt-pattern-hero__spec:nth-last-child(-n + 3),
	.crt-pattern-hero__spec:nth-last-child(-n + 2) { border-bottom: 0.0625rem solid var(--crt-peach); }
	.crt-pattern-hero__spec:last-child { border-bottom: 0; }
	.crt-pattern-hero__cta .crt-btn { width: 100%; justify-content: space-between; }
}

/* ---------- Intro (no heading) ---------- */

.crt-pattern-intro {
	padding-block: clamp(3rem, 6vw, 5.5rem);
}

.crt-pattern-intro--panel {
	background: var(--crt-cream);
}

.crt-pattern-intro__inner {
	display: grid;
	gap: clamp(2rem, 5vw, 4rem);
}

.crt-pattern-intro--image-left .crt-pattern-intro__inner,
.crt-pattern-intro--image-right .crt-pattern-intro__inner {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
}

.crt-pattern-intro--image-left .crt-pattern-intro__media { order: -1; }

.crt-pattern-intro--image-top .crt-pattern-intro__media { margin-bottom: 1.5rem; }

/* Photo with a stitched offset frame + yellow dot. */
.crt-pattern-intro__media {
	position: relative;
	isolation: isolate;
	margin: 0.75rem;
}

.crt-pattern-intro__media::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	transform: translate(1rem, 1rem);
	border: 0.1875rem dashed var(--crt-berry);
	border-radius: calc(var(--crt-radius-card) * 1.5);
}

.crt-pattern-intro__media .crt-pattern-media {
	aspect-ratio: 5 / 4;
	border-radius: calc(var(--crt-radius-card) * 1.5);
	box-shadow: var(--crt-shadow-soft);
}

.crt-pattern-intro__media .crt-pattern-media--empty { min-height: 14rem; }

.crt-pattern-intro__body {
	font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem);
	line-height: 1.7;
	color: var(--crt-heading);
}

.crt-pattern-intro__body p:first-child {
	font-family: var(--crt-font-head);
	font-weight: 700;
	font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem);
	line-height: 1.35;
	color: var(--crt-heading);
}

.crt-pattern-intro__divider {
	display: block;
	width: 10rem;
	color: var(--crt-berry);
	opacity: 0.5;
	margin: 1.25rem 0 0.75rem;
}

.crt-pattern-intro__disclosure {
	font-size: 0.875rem;
	font-style: italic;
	color: var(--crt-heading);
}

.crt-pattern-intro__caption {
	display: block;
	font-size: 0.875rem;
	color: var(--crt-berry);
	margin-top: 0.75rem;
	font-style: italic;
}

.crt-pattern-intro__embed { position: relative; }

.crt-pattern-intro__embed iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: var(--crt-radius-card);
}

@media (max-width: 56.25rem) {
	.crt-pattern-intro--image-left .crt-pattern-intro__inner,
	.crt-pattern-intro--image-right .crt-pattern-intro__inner {
		grid-template-columns: minmax(0, 1fr);
	}
	.crt-pattern-intro--image-left .crt-pattern-intro__media,
	.crt-pattern-intro--image-right .crt-pattern-intro__media {
		order: -1;
		margin: 0 1rem 1rem 0;
	}
	.crt-pattern-intro__media::before { transform: translate(0.75rem, 0.75rem); }
}

/* ---------- Pattern Notes ---------- */

.crt-pattern-notes {
	padding-block: clamp(1.5rem, 4vw, 3rem);
}

.crt-pattern-notes__card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 17rem);
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
	background: var(--crt-pink);
	border: 0.1875rem dashed var(--crt-berry);
	border-radius: calc(var(--crt-radius-card) * 1.5);
	padding: clamp(1.5rem, 4vw, 3.25rem);
	box-shadow: var(--crt-shadow-soft);
}

.crt-pattern-notes--image-left .crt-pattern-notes__media { order: -1; }

.crt-pattern-notes--image-below .crt-pattern-notes__card {
	grid-template-columns: minmax(0, 1fr);
}

.crt-pattern-notes__chips {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	margin: 1.5rem 0 0;
	padding: 0;
}

.crt-pattern-notes__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	max-width: 100%;
	background: #fff;
	border: 0.0625rem solid var(--crt-card-border);
	border-radius: var(--crt-radius-pill);
	padding: 0.5rem 1rem 0.5rem 0.625rem;
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--crt-heading);
	overflow-wrap: anywhere;
}

.crt-pattern-notes__chip .crt-icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background: var(--crt-berry);
	color: #fff;
}

.crt-pattern-notes__chip .crt-icon svg { width: 1rem; height: 1rem; }

.crt-pattern-notes__media { align-self: center; }

@media (max-width: 56.25rem) {
	.crt-pattern-notes__card { grid-template-columns: minmax(0, 1fr); }
	.crt-pattern-notes__media,
	.crt-pattern-notes--image-left .crt-pattern-notes__media {
		order: -1;
		max-width: 14rem;
		margin-inline: 0.5rem auto;
	}
}

/* ---------- Materials ---------- */

.crt-pattern-materials {
	padding-block: clamp(3rem, 6vw, 5.5rem);
	background: var(--crt-pink);
}

.crt-pattern-materials__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 21rem);
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
}

.crt-pattern-materials__media {
	position: sticky;
	top: 2rem;
}

.crt-pattern-materials__media .crt-pattern-media {
	aspect-ratio: 4 / 5;
	border: 0.5rem solid #fff;
	border-radius: 999px 999px var(--crt-radius-card) var(--crt-radius-card);
	box-shadow: var(--crt-shadow-soft);
}

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

.crt-pattern-materials__card {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	background: #fff;
	border: 0.125rem solid var(--crt-card-border);
	border-radius: var(--crt-radius-card);
	padding: 1.375rem;
	transition: transform var(--crt-transition), box-shadow var(--crt-transition), border-color var(--crt-transition);
}

.crt-pattern-materials__card:hover {
	transform: translateY(-0.1875rem);
	border-color: var(--crt-berry);
	box-shadow: var(--crt-shadow-soft);
}

.crt-pattern-materials__card-icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: var(--crt-berry);
	color: #fff;
}

.crt-pattern-materials__card-icon .crt-icon svg,
.crt-pattern-materials__card-icon svg { width: 1.375rem; height: 1.375rem; flex-shrink: 0; color: #fff; }

.crt-pattern-materials__card-name {
	margin: 0;
	font-family: var(--crt-font-head);
	font-weight: 800;
	font-size: 1.25rem;
	line-height: 1.25;
	color: var(--crt-heading);
}

.crt-pattern-materials__card-qty {
	display: inline-block;
	margin-left: 0.25rem;
	padding: 0.125rem 0.625rem;
	border-radius: var(--crt-radius-pill);
	background: var(--crt-yellow);
	font-family: var(--crt-font-body);
	font-weight: 700;
	font-size: 0.8125rem;
	vertical-align: middle;
	color: var(--crt-heading);
}

.crt-pattern-materials__card-details {
	margin: 0.5rem 0 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--crt-body);
	overflow-wrap: anywhere;
}

.crt-pattern-materials__link {
	display: inline-block;
	margin-top: 0.5rem;
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--crt-berry-dark);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.crt-pattern-materials__table-wrap {
	overflow-x: auto;
	margin-top: 1.75rem;
	border-radius: var(--crt-radius-card);
	background: #fff;
	box-shadow: var(--crt-shadow-soft);
}

.crt-pattern-materials__table {
	width: 100%;
	min-width: 30rem;
	border-collapse: collapse;
	font-size: 1rem;
}

.crt-pattern-materials__table th {
	background: var(--crt-berry);
	color: #fff;
	text-align: left;
	padding: 0.875rem 1rem;
}

.crt-pattern-materials__table td {
	padding: 0.75rem 1rem;
	border-bottom: 0.0625rem solid var(--crt-card-border);
}

.crt-pattern-materials__table tr:nth-child(even) td { background: var(--crt-pink); }

@media (max-width: 64rem) {
	.crt-pattern-materials__inner { grid-template-columns: minmax(0, 1fr); }
	.crt-pattern-materials__media {
		position: static;
		order: -1;
		max-width: 15rem;
	}
}

@media (max-width: 40rem) {
	.crt-pattern-materials__grid { grid-template-columns: minmax(0, 1fr); }
	.crt-pattern-materials__card { padding: 1.125rem; }
}

/* ---------- Abbreviations ---------- */

.crt-pattern-abbr {
	padding-block: clamp(3rem, 6vw, 5.5rem);
	position: relative;
}

.crt-pattern-abbr__inner { position: relative; }

.crt-pattern-abbr__inner .crt-sec-head { padding-right: 6rem; }

.crt-pattern-abbr__corner {
	position: absolute;
	top: 0;
	right: 0;
	width: clamp(3.5rem, 8vw, 5.5rem);
	aspect-ratio: 1;
	padding: 0.25rem;
	border-radius: 50%;
	background: var(--crt-yellow);
}

.crt-pattern-abbr__corner-media {
	width: 100%;
	height: 100%;
	border-radius: 50%;
}

.crt-pattern-abbr__corner-media.crt-pattern-media--empty {
	background: transparent;
	min-height: 0;
	color: var(--crt-heading);
}

.crt-pattern-abbr__corner-media.crt-pattern-media--empty .crt-icon svg { width: 60%; height: 60%; }

.crt-pattern-abbr__note {
	color: var(--crt-heading);
	margin: 0 0 1.5rem;
	font-size: 1.0625rem;
}

.crt-pattern-abbr__table-wrap {
	overflow-x: auto;
	border: 0.125rem solid var(--crt-card-border);
	border-radius: var(--crt-radius-card);
	box-shadow: var(--crt-shadow-soft);
}

.crt-pattern-abbr__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 1.0625rem;
}

.crt-pattern-abbr__table th {
	background: var(--crt-berry);
	color: #fff;
	text-align: left;
	padding: 1rem 1.25rem;
	font-family: var(--crt-font-head);
	font-weight: 800;
}

.crt-pattern-abbr__table td {
	padding: 0.875rem 1.25rem;
	border-bottom: 0.0625rem solid var(--crt-card-border);
	overflow-wrap: anywhere;
}

.crt-pattern-abbr__table tbody tr:last-child td { border-bottom: 0; }
.crt-pattern-abbr__table td:first-child { width: 34%; font-weight: 800; color: var(--crt-berry-dark); }
.crt-pattern-abbr__table tbody tr:nth-child(even) td { background: var(--crt-pink); }

.crt-pattern-abbr__pills {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
}

.crt-pattern-abbr__pill {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	background: var(--crt-pink);
	border-radius: var(--crt-radius-pill);
	padding: 0.625rem 1rem 0.625rem 0.625rem;
}

.crt-pattern-abbr__pill-abbr {
	flex: none;
	background: var(--crt-berry);
	color: #fff;
	font-weight: 800;
	font-size: 0.9375rem;
	padding: 0.25rem 0.875rem;
	border-radius: var(--crt-radius-pill);
}

.crt-pattern-abbr__pill-def {
	font-size: 1rem;
	color: var(--crt-body);
	overflow-wrap: anywhere;
}

@media (max-width: 37.5rem) {
	.crt-pattern-abbr__inner .crt-sec-head { padding-right: 4.5rem; }
	.crt-pattern-abbr__pills { grid-template-columns: minmax(0, 1fr); }
	.crt-pattern-abbr__table { font-size: 1rem; }
	.crt-pattern-abbr__table th,
	.crt-pattern-abbr__table td { padding: 0.75rem 0.875rem; }
	.crt-pattern-abbr__table td:first-child { width: 38%; }
}

/* ---------- Special Stitches ---------- */

.crt-pattern-special {
	padding-block: clamp(3rem, 6vw, 5.5rem);
	background: var(--crt-cream);
}

.crt-pattern-special__list {
	display: grid;
	gap: 1.5rem;
	margin-top: 2rem;
}

.crt-pattern-special__list > .crt-pattern-special__divider { display: none; }

.crt-pattern-special__card {
	display: grid;
	grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
	gap: clamp(1.25rem, 3vw, 2.25rem);
	align-items: center;
	padding: clamp(1.25rem, 3vw, 2rem);
	background: #fff;
	border: 0.125rem solid var(--crt-card-border);
	border-radius: calc(var(--crt-radius-card) * 1.5);
	box-shadow: var(--crt-shadow-soft);
}

.crt-pattern-special__media { position: relative; }

.crt-pattern-special__media .crt-pattern-media {
	aspect-ratio: 1 / 1;
	border-radius: var(--crt-radius-card);
}

.crt-pattern-special__video-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.875rem;
	padding: 0.5rem 1rem;
	border-radius: var(--crt-radius-pill);
	background: var(--crt-berry);
	color: #fff;
	font-size: 0.9375rem;
	font-weight: 700;
	text-decoration: none;
	transition: background var(--crt-transition);
}

.crt-pattern-special__video-link:hover { background: var(--crt-berry-dark); color: #fff; }

.crt-pattern-special__video-link .crt-icon svg { width: 1rem; height: 1rem; }

.crt-pattern-special__name {
	font-family: var(--crt-font-head);
	font-weight: 800;
	color: var(--crt-berry);
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
	line-height: 1.2;
	margin: 0 0 0.75rem;
}

@media (max-width: 45rem) {
	.crt-pattern-special__card { grid-template-columns: minmax(0, 1fr); align-items: start; }
	.crt-pattern-special__media .crt-pattern-media { aspect-ratio: 16 / 10; }
}

/* ---------- Important ---------- */

.crt-pattern-important {
	padding-block: clamp(2rem, 5vw, 4rem);
}

.crt-pattern-important__card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 14rem);
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
	background: var(--crt-yellow);
	border: 0.1875rem dashed var(--crt-berry);
	border-radius: calc(var(--crt-radius-card) * 1.5);
	padding: clamp(1.5rem, 4vw, 3.25rem);
	box-shadow: var(--crt-shadow-soft);
}

.crt-pattern-important--soft-pink .crt-pattern-important__card { background: var(--crt-pink); }
.crt-pattern-important--cream .crt-pattern-important__card { background: var(--crt-cream); }

.crt-pattern-important__heading {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	font-family: var(--crt-font-head);
	font-weight: 800;
	color: var(--crt-heading);
	font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
	line-height: 1.1;
	margin: 0;
}

.crt-pattern-important__heading .crt-icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: var(--crt-berry);
	color: #fff;
}

.crt-pattern-important__heading .crt-icon svg { width: 1.5rem; height: 1.5rem; }

.crt-pattern-important__divider {
	display: block;
	width: 10rem;
	color: var(--crt-berry);
	opacity: 0.7;
	margin: 0.75rem 0 1rem;
}

.crt-pattern-important .crt-rich { color: var(--crt-heading); font-size: 1.0625rem; }

.crt-pattern-important__tester-link {
	color: var(--crt-berry-dark);
	font-weight: 800;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.crt-pattern-important__email { margin: 1rem 0 0; }

.crt-pattern-important__email a {
	display: inline-block;
	color: #fff;
	background: var(--crt-berry);
	font-weight: 700;
	padding: 0.625rem 1.25rem;
	border-radius: var(--crt-radius-pill);
	text-decoration: none;
	overflow-wrap: anywhere;
	transition: background var(--crt-transition);
}

.crt-pattern-important__email a:hover { background: var(--crt-berry-dark); color: #fff; }

@media (max-width: 56.25rem) {
	.crt-pattern-important__card { grid-template-columns: minmax(0, 1fr); }
	.crt-pattern-important__media { order: -1; max-width: 10rem; margin-left: 0.5rem; }
}

/* ---------- Tag Me ---------- */

.crt-pattern-tag {
	padding-block: clamp(2rem, 5vw, 4rem);
	position: relative;
}

.crt-pattern-tag__inner { display: block; }

.crt-pattern-tag__panel {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 12rem);
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
	background: var(--crt-green);
	color: #fff;
	border-radius: calc(var(--crt-radius-card) * 2);
	padding: clamp(1.5rem, 4vw, 3.25rem);
	box-shadow: var(--crt-shadow-soft);
}

.crt-pattern-tag__handle {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	font-family: var(--crt-font-head);
	font-weight: 800;
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
	line-height: 1.2;
	color: var(--crt-yellow);
	margin: 0 0 0.75rem;
	overflow-wrap: anywhere;
}

.crt-pattern-tag__handle .crt-icon svg { width: 1.75rem; height: 1.75rem; color: var(--crt-yellow); }

.crt-pattern-tag__copy {
	margin: 0 0 1.5rem;
	font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
	line-height: 1.6;
	color: #fff;
}

.crt-pattern-tag__hashtags {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
}

.crt-pattern-tag__chip {
	background: var(--crt-pink);
	color: var(--crt-heading);
	font-size: 0.9375rem;
	font-weight: 700;
	padding: 0.4375rem 1rem;
	border-radius: var(--crt-radius-pill);
	overflow-wrap: anywhere;
}

.crt-pattern-tag__chip--permanent {
	background: var(--crt-yellow);
	color: var(--crt-heading);
}

.crt-pattern-tag__media .crt-pattern-media { transform: rotate(-3deg); }

@media (max-width: 56.25rem) {
	.crt-pattern-tag__panel { grid-template-columns: minmax(0, 1fr); }
	.crt-pattern-tag__media { order: -1; max-width: 9rem; }
}

/* ---------- Pattern Instructions ---------- */

.crt-pattern-instructions {
	padding-block: clamp(3rem, 6vw, 5.5rem);
}

.crt-pattern-instructions__intro { margin-bottom: 1.25rem; }

.crt-pattern-instructions__divider {
	display: block;
	color: var(--crt-berry);
	opacity: 0.35;
	margin-block: 0.5rem;
}

.crt-pattern-instructions__section {
	padding: clamp(1.25rem, 3vw, 2.25rem);
	border-radius: calc(var(--crt-radius-card) * 1.5);
}

.crt-pattern-instructions__section--alt {
	background: var(--crt-cream);
	border: 0.125rem solid var(--crt-peach);
}

.crt-pattern-instructions__section-eyebrow { margin-bottom: 0.25rem; }

.crt-pattern-instructions__section-heading {
	font-family: var(--crt-font-head);
	font-weight: 800;
	color: var(--crt-heading);
	font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem);
	line-height: 1.15;
	margin: 0 0 1rem;
}

.crt-pattern-instructions__rounds-wrap {
	overflow-x: auto;
	margin-top: 1.25rem;
	border: 0.125rem solid var(--crt-card-border);
	border-radius: var(--crt-radius-card);
	background: #fff;
}

.crt-pattern-instructions__rounds {
	width: 100%;
	min-width: 20rem;
	border-collapse: collapse;
	font-size: 1rem;
}

.crt-pattern-instructions__rounds th {
	background: var(--crt-berry);
	color: #fff;
	text-align: left;
	padding: 0.75rem 1rem;
	font-family: var(--crt-font-head);
}

.crt-pattern-instructions__rounds th:first-child { width: 6.5rem; }

.crt-pattern-instructions__rounds td {
	padding: 0.75rem 1rem;
	border-bottom: 0.0625rem solid var(--crt-card-border);
	vertical-align: top;
}

.crt-pattern-instructions__rounds td:first-child { font-weight: 800; color: var(--crt-berry-dark); white-space: nowrap; }
.crt-pattern-instructions__rounds tbody tr:last-child td { border-bottom: 0; }
.crt-pattern-instructions__rounds tbody tr:nth-child(even) td { background: var(--crt-pink); }

.crt-pattern-instructions__materials-note {
	font-size: 0.9375rem;
	font-style: italic;
	color: var(--crt-heading);
	margin-top: 0.75rem;
}

.crt-pattern-instructions__callout {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	border-radius: var(--crt-radius-card);
	padding: 1rem 1.25rem;
	margin-top: 1.25rem;
	font-size: 1rem;
	font-weight: 700;
}

.crt-pattern-instructions__callout--warning { background: var(--crt-yellow); color: var(--crt-heading); }
.crt-pattern-instructions__callout--tip { background: var(--crt-pink); color: var(--crt-berry-dark); }
.crt-pattern-instructions__callout--note { background: var(--crt-cream); color: var(--crt-body); border: 0.0625rem solid var(--crt-card-border); }

.crt-pattern-instructions__gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.5rem), 1fr));
	gap: 1rem;
	margin-top: 1.25rem;
}

.crt-pattern-instructions__gallery-item { margin: 0; }

.crt-pattern-instructions__gallery-item img {
	width: 100%;
	height: auto;
	border-radius: var(--crt-radius-card);
	display: block;
}

.crt-pattern-instructions__gallery-item figcaption {
	font-size: 0.875rem;
	color: var(--crt-heading);
	margin-top: 0.375rem;
}

.crt-pattern-instructions__nested {
	margin-top: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.crt-pattern-instructions__accordion {
	background: #fff;
	border: 0.125rem solid var(--crt-card-border);
	border-radius: var(--crt-radius-card);
	padding: 0.25rem 1.25rem;
}

.crt-pattern-instructions__accordion[open] { border-color: var(--crt-berry); }

.crt-pattern-instructions__accordion summary {
	cursor: pointer;
	font-weight: 800;
	font-family: var(--crt-font-head);
	color: var(--crt-heading);
	padding-block: 0.875rem;
}

.crt-pattern-instructions__accordion summary:focus-visible {
	outline: 0.125rem solid var(--crt-berry);
	outline-offset: 0.125rem;
}

.crt-pattern-instructions__accordion-body { padding-bottom: 1rem; }

/* ---------- Contact Me ---------- */

.crt-pattern-contact {
	padding-block: clamp(3rem, 7vw, 6rem);
	position: relative;
	background: var(--crt-peach);
}

.crt-pattern-contact__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 17rem);
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: center;
}

.crt-pattern-contact__email { margin: 1.25rem 0 0; }

.crt-pattern-contact__email a {
	color: var(--crt-berry-dark);
	font-family: var(--crt-font-head);
	font-weight: 800;
	font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	overflow-wrap: anywhere;
}

.crt-pattern-contact__cta { margin-top: 1.5rem; }

@media (max-width: 56.25rem) {
	.crt-pattern-contact__inner { grid-template-columns: minmax(0, 1fr); }
	.crt-pattern-contact__media { order: -1; max-width: 11rem; margin-left: 0.5rem; }
}

@media (max-width: 30rem) {
	.crt-pattern-contact__cta .crt-btn { width: 100%; justify-content: space-between; }
}

/* ---------- Picture (standalone) ---------- */

.crt-pattern-picture { padding-block: clamp(1.5rem, 4vw, 3rem); }

.crt-pattern-picture--bg-cream { background: var(--crt-cream); }
.crt-pattern-picture--bg-soft-pink { background: var(--crt-pink); }
.crt-pattern-picture--bg-white { background: #fff; }

.crt-pattern-picture__inner { text-align: center; }

.crt-pattern-picture__figure { margin: 0 auto; }

.crt-pattern-picture__figure img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
}

.crt-pattern-picture--full-width .crt-pattern-picture__figure img {
	width: 100%;
	border-radius: var(--crt-radius-card);
}

.crt-pattern-picture--card-framed .crt-pattern-picture__figure {
	background: var(--crt-pink);
	border: 0.125rem solid var(--crt-card-border);
	border-radius: calc(var(--crt-radius-card) * 1.5);
	padding: clamp(0.75rem, 2vw, 1.25rem);
	max-width: 42rem;
	box-shadow: var(--crt-shadow-soft);
}

.crt-pattern-picture--card-framed .crt-pattern-picture__figure img { border-radius: var(--crt-radius-card); }

.crt-pattern-picture--small-instructional .crt-pattern-picture__figure { max-width: 20rem; }
.crt-pattern-picture--small-instructional .crt-pattern-picture__figure img { border-radius: var(--crt-radius-field); }

.crt-pattern-picture--two-column .crt-pattern-picture__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 2rem;
	align-items: center;
	text-align: left;
}

.crt-pattern-picture--shape-circle .crt-pattern-picture__figure img,
.crt-pattern-picture--shape-pill .crt-pattern-picture__figure img {
	border-radius: 50%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.crt-pattern-picture--shape-pill .crt-pattern-picture__figure img {
	border-radius: var(--crt-radius-pill);
	aspect-ratio: 16 / 9;
}

.crt-pattern-picture--shape-blob .crt-pattern-picture__figure img {
	border-radius: 50% 45% 55% 48% / 48% 55% 45% 52%;
}

.crt-pattern-picture__figure figcaption {
	margin-top: 0.75rem;
	font-size: 0.9375rem;
	color: var(--crt-heading);
}

.crt-pattern-picture__credit {
	display: block;
	font-style: italic;
	opacity: 0.75;
}

@media (max-width: 56.25rem) {
	.crt-pattern-picture--two-column .crt-pattern-picture__inner {
		grid-template-columns: minmax(0, 1fr);
		text-align: center;
	}
}

/* ---------- Gallery / Slider (standalone, Swiper-powered) ---------- */

.crt-pattern-gallery { padding-block: clamp(3rem, 6vw, 5.5rem); }

.crt-pattern-gallery__intro { margin-bottom: 1.5rem; }

.crt-pattern-gallery__slider {
	position: relative;
	padding-bottom: 0.25rem;
}

/* No-JS / pre-init fallback: real grid of images, no reliance on Swiper. */
.crt-pattern-gallery__slider .swiper-wrapper {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.crt-pattern-gallery--two-column .crt-pattern-gallery__slider .swiper-wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.crt-pattern-gallery--three-column .crt-pattern-gallery__slider .swiper-wrapper { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.crt-pattern-gallery__slide { margin: 0; }

.crt-pattern-gallery__slide img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--crt-radius-card);
	aspect-ratio: 4 / 3;
	object-fit: cover;
	box-shadow: var(--crt-shadow-soft);
}

.crt-pattern-gallery__slide figcaption {
	margin-top: 0.625rem;
	font-size: 0.9375rem;
	color: var(--crt-heading);
}

.crt-pattern-gallery__credit {
	display: block;
	font-style: italic;
	opacity: 0.75;
	font-size: 0.8125rem;
}

/* Once site.js upgrades the container to a real Swiper instance. */
.crt-pattern-gallery__slider.swiper-initialized .swiper-wrapper { display: flex; gap: 0; }

.crt-pattern-gallery__slider.swiper-initialized .swiper-slide { flex-shrink: 0; height: auto; }

.crt-pattern-gallery__nav {
	position: absolute;
	top: calc(50% - 1.5rem);
	transform: translateY(-50%);
	z-index: 2;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: var(--crt-berry);
	color: #fff;
	border: 0.1875rem solid #fff;
	display: none;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: var(--crt-shadow-soft);
	transition: background var(--crt-transition), opacity var(--crt-transition);
}

.crt-pattern-gallery__nav:hover { background: var(--crt-berry-dark); }
.crt-pattern-gallery__nav.swiper-button-disabled { opacity: 0.35; cursor: default; }

.crt-pattern-gallery__slider.swiper-initialized .crt-pattern-gallery__nav { display: flex; }

.crt-pattern-gallery__nav:focus-visible {
	outline: 0.125rem solid var(--crt-berry);
	outline-offset: 0.125rem;
}

.crt-pattern-gallery__nav--prev { left: 0.75rem; transform: translateY(-50%) rotate(180deg); }
.crt-pattern-gallery__nav--next { right: 0.75rem; }

.crt-pattern-gallery__nav svg { width: 1.25rem; height: 1.25rem; }

.crt-pattern-gallery .crt-pattern-gallery__pagination {
	position: static;
	display: none;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	width: auto;
	margin-top: 1.25rem;
}

.crt-pattern-gallery__slider.swiper-initialized .crt-pattern-gallery__pagination { display: flex; }

.crt-pattern-gallery__pagination .swiper-pagination-bullet {
	width: 0.625rem;
	height: 0.625rem;
	margin: 0;
	border-radius: 50%;
	background: var(--crt-card-border);
	opacity: 1;
	cursor: pointer;
	transition: background var(--crt-transition);
}

.crt-pattern-gallery__pagination .swiper-pagination-bullet-active {
	width: 1.75rem;
	border-radius: var(--crt-radius-pill);
	background: var(--crt-berry);
}

@media (max-width: 56.25rem) {
	.crt-pattern-gallery__slider .swiper-wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 37.5rem) {
	/* Mobile always behaves as a swipe carousel once Swiper has initialised;
	   arrows step aside for the thumb, dots stay. */
	.crt-pattern-gallery__slider .swiper-wrapper { grid-template-columns: minmax(0, 1fr); }
	.crt-pattern-gallery__slider.swiper-initialized .crt-pattern-gallery__nav { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.crt-pattern-gallery__slider .swiper-slide,
	.crt-pattern-materials__card { transition: none !important; }
	.crt-pattern-materials__card:hover { transform: none; }
}


/* Shared script-label system: one face and one fluid size across every context. */
html body .crt-eyebrow {
	font-family: var(--crt-font-script);
	font-size: var(--crt-type-eyebrow);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.06em;
	text-transform: none;
}


/* =====================================================================
   25. About Us page (page-id-42) — bolder pass, theme tokens only
   Scoped so Home (shared about/usp blocks) and Contact (shared page title)
   are untouched. Rhythm: cream title band → white story → peach band →
   white USPs (peach / green / yellow) → pink process steps.
   ===================================================================== */

/* ---------- Page title: a real hero band ---------- */

.page-id-42 .crt-page-title {
	position: relative;
	isolation: isolate;
	overflow: clip;
	background: var(--crt-cream);
	padding: clamp(3.5rem, 8vw, 6.5rem) 1.25rem clamp(3rem, 7vw, 5.5rem);
}

.page-id-42 .crt-page-title h1 {
	margin: 0 0 1.5rem;
	font-size: clamp(2.75rem, 2rem + 4.5vw, 5.25rem);
	line-height: 1;
	letter-spacing: -0.02em;
}

.page-id-42 .crt-page-title .crt-divider {
	width: 7rem;
	height: 0.5rem;
	border-radius: 0.25rem;
}

.page-id-42 .crt-page-title::before,
.page-id-42 .crt-page-title::after {
	content: "";
	position: absolute;
	z-index: -1;
	pointer-events: none;
}

.page-id-42 .crt-page-title::before {
	top: 16%;
	left: 9%;
	width: clamp(3.5rem, 11vw, 9rem);
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--crt-yellow);
}

.page-id-42 .crt-page-title::after {
	right: -4%;
	bottom: -38%;
	width: clamp(10rem, 28vw, 26rem);
	aspect-ratio: 1;
	border-radius: 58% 42% 52% 48% / 48% 56% 44% 52%;
	background: var(--crt-peach);
}

/* ---------- Story (collage layout) ---------- */

.crt-about__inner:has(.crt-about__media--collage) {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: clamp(2.5rem, 6vw, 5.5rem);
}

@media (max-width: 56.25rem) {
	.crt-about__inner:has(.crt-about__media--collage) {
		grid-template-columns: minmax(0, 1fr);
		gap: 2.75rem;
	}
}

.crt-about__story-blob svg path {
	fill: var(--crt-peach);
	opacity: 1;
}

.crt-about__collage-img--small { background: var(--crt-yellow); }

.crt-about__inner:has(.crt-about__media--collage) .crt-sec-head__title {
	font-size: clamp(2.25rem, 1.6rem + 2.8vw, 3.75rem);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

.crt-about__inner:has(.crt-about__media--collage) .crt-divider {
	width: 6rem;
	height: 0.4375rem;
}

.crt-about__inner:has(.crt-about__media--collage) .crt-about__body,
.crt-about__inner:has(.crt-about__media--collage) .crt-about__body p {
	color: var(--crt-body);
	line-height: 1.75;
}

/* First paragraph is the lead: the story starts loud, then settles. */
.crt-about__inner:has(.crt-about__media--collage) .crt-about__body p:first-child {
	font-family: var(--crt-font-head);
	font-weight: 700;
	font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
	line-height: 1.45;
	color: var(--crt-heading);
}

/* ---------- Band: "Handmade, With Heart" ---------- */

.crt-band__blob svg path {
	fill: var(--crt-peach);
	opacity: 1;
}

.crt-band__inner .crt-sec-head__title {
	font-size: clamp(2.25rem, 1.5rem + 3.4vw, 4.25rem);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

.crt-band__inner .crt-divider {
	width: 6rem;
	height: 0.4375rem;
}

.crt-band__body {
	max-width: 46rem;
	font-size: clamp(1.1875rem, 1.1rem + 0.5vw, 1.5rem);
	line-height: 1.65;
	color: var(--crt-heading);
}

/* Tablet: keep the decor in the top corners, out of the paragraph's lane. */
@media (min-width: 56.3125rem) and (max-width: 75rem) {
	.crt-band__decor { top: 30%; }
	.crt-band__decor--left { left: 6%; }
	.crt-band__decor--left img { width: 5rem; height: 5rem; }
	.crt-band__decor--right { right: 2%; }
	.crt-band__decor--right img { width: 8rem; height: 8rem; }
}

@media (max-width: 56.25rem) {
	/* Phones: the band becomes a solid rounded peach card (the wide blob
	   letterboxes badly at this width); decor sits on its top edge. */
	.crt-band {
		margin-inline: 1rem;
		padding: 6.5rem 0 3.5rem;
		background: var(--crt-peach);
		border-radius: 2rem;
	}

	.crt-band__blob { display: none; }

	.crt-band__decor { top: 2rem; opacity: 1; }

	.crt-band__decor--left { left: 8%; transform: rotate(-14deg); }
	.crt-band__decor--right { right: 6%; transform: rotate(12deg); }

	.crt-band__decor--left img { width: 4.5rem; height: 4.5rem; }
	.crt-band__decor--right img { width: 5.5rem; height: 5.5rem; }

	.crt-band__inner .crt-sec-head__title { font-size: clamp(2.25rem, 10vw, 3rem); }
	.crt-band__body { font-size: 1.125rem; line-height: 1.65; }
}

/* ---------- USPs (about layout): peach / green / yellow ---------- */

.crt-usps:not(.crt-usps--home) .crt-usp--about-1 .crt-usp__surface { background: var(--crt-peach); }

.crt-usps:not(.crt-usps--home) .crt-usp--about-2 .crt-usp__surface {
	background: var(--crt-green);
	color: #fff;
}

.crt-usps:not(.crt-usps--home) .crt-usp--about-3 .crt-usp__surface { background: var(--crt-yellow); }

.crt-usps:not(.crt-usps--home) .crt-usp__icon {
	display: grid;
	place-items: center;
	width: 5rem;
	height: 5rem;
	margin-bottom: 1rem;
	border-radius: 50%;
	background: #fff;
	color: var(--crt-berry);
	box-shadow: var(--crt-shadow-soft);
}

.crt-usps:not(.crt-usps--home) .crt-usp__icon svg { width: 2.5rem; height: 2.5rem; }

.crt-usps:not(.crt-usps--home) .crt-usp--about-2 .crt-usp__icon {
	background: var(--crt-yellow);
	color: var(--crt-heading);
}

.crt-usps:not(.crt-usps--home) .crt-usp__title {
	font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.125rem);
	line-height: 1.15;
	color: var(--crt-heading);
	text-wrap: balance;
}

.crt-usps:not(.crt-usps--home) .crt-usp--about-2 .crt-usp__title,
.crt-usps:not(.crt-usps--home) .crt-usp--about-2 .crt-usp__body { color: #fff; }

.crt-usps:not(.crt-usps--home) .crt-usp__body { color: var(--crt-body); }

/* Just above the stacked breakpoint the circles are ~270px: tighten so the
   copy never spills out of the blob. */
@media (min-width: 56.3125rem) and (max-width: 75rem) {
	.crt-usps:not(.crt-usps--home) .crt-usp__surface { padding: 1.5rem; }
	.crt-usps:not(.crt-usps--home) .crt-usp__icon { width: 4rem; height: 4rem; margin-bottom: 0.5rem; }
	.crt-usps:not(.crt-usps--home) .crt-usp__icon svg { width: 2rem; height: 2rem; }
	.crt-usps:not(.crt-usps--home) .crt-usp__title { font-size: 1.25rem; margin-bottom: 0.375rem; }
	.crt-usps:not(.crt-usps--home) .crt-usp__body { max-width: none; font-size: 0.9375rem; line-height: 1.45; }
}

@media (max-width: 56.25rem) {
	.crt-usps:not(.crt-usps--home) .crt-usp { aspect-ratio: 1 / 0.86; }
	.crt-usps:not(.crt-usps--home) .crt-usp__icon { width: 4rem; height: 4rem; margin-bottom: 0.5rem; }
	.crt-usps:not(.crt-usps--home) .crt-usp__icon svg { width: 2rem; height: 2rem; }
	.crt-usps:not(.crt-usps--home) .crt-usp__body { max-width: 16rem; font-size: 1rem; line-height: 1.5; }
}

/* ---------- Process steps: numbered medallions on a pink band ---------- */

.crt-steps {
	background: var(--crt-pink);
	padding: clamp(3.5rem, 7vw, 6rem) 0;
}

.crt-steps__inner .crt-sec-head__title {
	font-size: clamp(2.25rem, 1.5rem + 3.2vw, 4rem);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

.crt-steps__row {
	margin-top: 4rem;
	gap: 3rem 1.25rem;
}

.crt-step {
	position: relative;
	padding: 2.75rem 1.25rem 1.5rem;
	border: 0.125rem solid var(--crt-card-border);
	border-radius: calc(var(--crt-radius-card) * 1.25);
}

.crt-step__num {
	position: absolute;
	top: -1.875rem;
	left: 1.25rem;
	display: grid;
	place-items: center;
	width: 3.75rem;
	height: 3.75rem;
	border-radius: 50%;
	background: var(--crt-berry);
	color: #fff;
	font-size: 1.375rem;
	box-shadow: 0 0 0 0.375rem var(--crt-pink);
}

.crt-step__title {
	margin: 0 0 0.5rem;
	font-family: var(--crt-font-head);
	font-size: clamp(1.1875rem, 1.05rem + 0.4vw, 1.375rem);
	font-weight: 800;
	color: var(--crt-heading);
	line-height: 1.2;
}

.crt-step__body {
	font-size: 1rem;
	line-height: 1.55;
	color: var(--crt-body);
}

/* Last step is the payoff: it gets the yellow. */
.crt-step:last-child {
	background: var(--crt-yellow);
	border-color: var(--crt-berry);
}

.crt-step:last-child .crt-step__num { box-shadow: 0 0 0 0.375rem var(--crt-pink); }

/* Tablet: 3 + 2 with the second row centred (no orphan card). */
@media (min-width: 37.5625rem) and (max-width: 64rem) {
	.crt-steps__row { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.crt-step { grid-column: span 2; }
	.crt-step:nth-child(4) { grid-column: 2 / span 2; }
	.crt-step:nth-child(5) { grid-column: 4 / span 2; }
}

@media (max-width: 37.5rem) {
	.crt-steps__row {
		margin-top: 2.5rem;
		gap: 1rem;
	}

	/* Medallion moves beside the copy instead of hanging off the top edge. */
	.crt-step { padding: 1.25rem 1.25rem 1.25rem 5.75rem; min-height: 5.5rem; }

	.crt-step__num {
		top: 50%;
		left: 1rem;
		transform: translateY(-50%);
		width: 3.25rem;
		height: 3.25rem;
		font-size: 1.125rem;
		box-shadow: none;
	}

	.crt-step:hover { transform: none; }
}

/* =====================================================================
   26. JetFormBuilder forms (replaces Contact Form 7)
   Contact panel + footer newsletter pill. Field/label/button chrome
   mirrors the old CF7 styles in §17 so the design is unchanged.
   ===================================================================== */

/* Visually-hidden labels (placeholders carry the visible text; labels stay for screen readers). */
.crt-contact-form .jet-form-builder__label,
.crt-footer__subscribe .jet-form-builder__label {
	position: absolute !important;
	width: 0.0625rem;
	height: 0.0625rem;
	margin: -0.0625rem;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --- Contact panel ------------------------------------------------- */
.crt-contact-form .jet-form-builder {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	margin: 0;
}

.crt-contact-form .jet-form-builder > * {
	grid-column: 1 / -1;
}

.crt-contact-form .jet-form-builder > .jet-form-builder-row:has(#your_name),
.crt-contact-form .jet-form-builder > .jet-form-builder-row:has(#your_email) {
	grid-column: auto;
}

.crt-contact-form .jet-form-builder-row {
	margin: 0;
	padding: 0;
}

.crt-contact-form .jet-form-builder__field-wrap {
	display: block;
}

.crt-contact-form .jet-form-builder .jet-form-builder__field {
	display: block;
	width: 100%;
	max-width: none;
	background: #fff;
	border: 0.0625rem solid var(--crt-border);
	border-radius: var(--crt-radius-field);
	padding: 0.875rem 1rem;
	font-family: inherit;
	font-size: clamp(1rem, calc(1rem + 0.08vw), 1.05rem);
	line-height: 1.5;
	color: var(--crt-body);
	box-shadow: none;
	transition: border-color var(--crt-transition), box-shadow var(--crt-transition);
}

.crt-contact-form .jet-form-builder .jet-form-builder__field:focus {
	outline: none;
	border-color: var(--crt-berry);
	box-shadow: 0 0 0 0.1875rem rgba(172, 58, 126, 0.15);
}

.crt-contact-form .jet-form-builder textarea.jet-form-builder__field {
	height: 9.375rem;
	min-height: 2.5rem;
	resize: vertical;
}

.crt-contact-form .jet-form-builder__field::placeholder {
	color: #000;
	opacity: 1;
}

/* Submit — berry pill with the white arrow disc (same as the old .crt-cf-submit). */
.crt-contact-form .jet-form-builder__submit-wrap {
	display: block;
	margin: 0.25rem 0 0;
}

.crt-contact-form .jet-form-builder .jet-form-builder__action-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.875rem;
	width: auto;
	min-height: 2.75rem;
	background: var(--crt-berry);
	color: #fff;
	border: 0;
	border-radius: 624.9375rem;
	padding: 0.375rem 0.375rem 0.375rem 1.75rem;
	font-family: var(--crt-font-body);
	font-size: clamp(1.125rem, calc(1.125rem + 0.08vw), 1.18125rem);
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color var(--crt-transition), transform var(--crt-transition), box-shadow var(--crt-transition);
}

.crt-contact-form .jet-form-builder .jet-form-builder__action-button::after {
	content: "";
	flex: none;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23AC3A7E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 1rem 1rem no-repeat;
}

.crt-contact-form .jet-form-builder .jet-form-builder__action-button:hover,
.crt-contact-form .jet-form-builder .jet-form-builder__action-button:focus-visible {
	background: var(--crt-berry-dark);
	transform: translateY(-0.125rem);
	box-shadow: 0 0.5rem 1.125rem rgba(172, 58, 126, 0.28);
}

.crt-contact-form .jet-form-builder .jet-form-builder__action-button:disabled,
.crt-contact-form .jet-form-builder.is-loading .jet-form-builder__action-button {
	opacity: 0.7;
	cursor: progress;
	transform: none;
}

/* Validation + result messages. */
.crt-contact-form .jet-form-builder__field-error,
.crt-contact-form .jet-form-builder .error-message {
	display: block;
	color: #c0392b;
	font-size: clamp(0.8125rem, calc(0.8125rem + 0.08vw), 0.853125rem);
	margin-top: 0.3125rem;
}

.crt-contact-form .jet-form-builder-messages-wrap:empty {
	display: none;
}

.crt-contact-form .jet-form-builder-message {
	margin: 0.25rem 0 0;
	padding: 0.875rem 1.125rem;
	border: 0.0625rem solid var(--crt-berry);
	border-radius: var(--crt-radius-field);
	background: #fff;
	font-size: clamp(0.9375rem, calc(0.9375rem + 0.08vw), 0.984375rem);
	line-height: 1.5rem;
}

.crt-contact-form .jet-form-builder-message--success {
	border-color: var(--crt-green);
	color: var(--crt-green);
}

.crt-contact-form .jet-form-builder-message--error,
.crt-contact-form .jet-form-builder-message--failed,
.crt-contact-form .jet-form-builder-message--validation_failed {
	border-color: #c0392b;
	color: #c0392b;
}

@media (max-width: 37.5rem) {
	.crt-contact-form .jet-form-builder {
		grid-template-columns: 1fr;
	}

	.crt-contact-form .jet-form-builder > .jet-form-builder-row:has(#your_name),
	.crt-contact-form .jet-form-builder > .jet-form-builder-row:has(#your_email) {
		grid-column: 1 / -1;
	}
}

/* --- Footer newsletter pill ---------------------------------------- */
.crt-footer__subscribe .jet-form-builder {
	position: relative;
	display: block;
	margin: 0;
}

.crt-footer__subscribe .jet-form-builder-row {
	margin: 0;
	padding: 0;
}

.crt-footer__subscribe .jet-form-builder .jet-form-builder__field {
	display: block;
	width: 100%;
	max-width: none;
	background: #fff;
	border: 0.0625rem solid var(--crt-border);
	border-radius: 1.5rem;
	padding: 0.8125rem 3.25rem 0.8125rem 1.125rem;
	font-family: inherit;
	font-size: clamp(0.9375rem, calc(0.9375rem + 0.08vw), 0.984375rem);
	line-height: 1.4;
	color: var(--crt-body);
	box-shadow: none;
	transition: border-color var(--crt-transition), box-shadow var(--crt-transition);
}

.crt-footer__subscribe .jet-form-builder .jet-form-builder__field:focus {
	outline: none;
	border-color: var(--crt-berry);
	box-shadow: 0 0 0 0.1875rem rgba(172, 58, 126, 0.15);
}

/* The submit row sits over the right end of the input as a round arrow button. */
.crt-footer__subscribe .jet-form-builder-row.field-type-submit-field {
	position: absolute;
	top: 0.4375rem;
	right: 0.375rem;
	width: auto;
}

.crt-footer__subscribe .jet-form-builder__submit-wrap {
	display: block;
	margin: 0;
}

.crt-footer__subscribe .jet-form-builder .jet-form-builder__action-button {
	display: block;
	box-sizing: border-box;
	width: 2.125rem;
	height: 2.125rem;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--crt-berry) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 0.9375rem 0.9375rem no-repeat;
	color: transparent;
	font-size: 0;
	line-height: 0;
	overflow: hidden;
	text-indent: -62.5rem;
	cursor: pointer;
	transition: background-color var(--crt-transition);
}

.crt-footer__subscribe .jet-form-builder .jet-form-builder__action-button:hover,
.crt-footer__subscribe .jet-form-builder .jet-form-builder__action-button:focus-visible {
	background-color: var(--crt-berry-dark);
}

.crt-footer__subscribe .jet-form-builder-messages-wrap:empty {
	display: none;
}

.crt-footer__subscribe .jet-form-builder-message {
	margin: 0.625rem 0 0;
	font-size: clamp(0.875rem, calc(0.875rem + 0.08vw), 0.9rem);
	line-height: 1.4;
	color: var(--crt-green);
}

.crt-footer__subscribe .jet-form-builder-message--error,
.crt-footer__subscribe .jet-form-builder-message--failed,
.crt-footer__subscribe .jet-form-builder-message--validation_failed,
.crt-footer__subscribe .jet-form-builder__field-error {
	color: #c0392b;
	font-size: 0.875rem;
}

/* =====================================================================
   27. Footer credit — "Artfully Marketed and Crafted by" + animated logo
   ===================================================================== */

.crt-footer__credit {
	gap: 0.625rem;
	flex-wrap: wrap;
	text-decoration: none;
}

.crt-footer__credit:hover,
.crt-footer__credit:focus-visible {
	text-decoration: none;
}

.crt-footer__credit-text {
	transition: color var(--crt-transition);
}

.crt-footer__credit:hover .crt-footer__credit-text,
.crt-footer__credit:focus-visible .crt-footer__credit-text {
	color: var(--crt-berry);
}

.crt-gm8-logo {
	display: block;
	flex: none;
	width: 10rem;
	height: auto;
	overflow: visible;
}

.crt-gm8-logo--text {
	width: auto;
	font-weight: 700;
	color: var(--crt-berry);
}

/* The logo draws itself on a loop; keep it paused until it scrolls into view and
   whenever it's off screen (site.js toggles .is-in / .is-out; the html.crt-io gate means
   a no-JS visitor still sees the finished logo). */
html.crt-io .crt-gm8-logo:not(.is-in) *,
html.crt-io .crt-gm8-logo.is-out * {
	animation-play-state: paused !important;
}

@media (max-width: 37.5rem) {
	.crt-footer__bottom {
		justify-content: center;
		text-align: center;
	}

	.crt-footer__credit {
		justify-content: center;
	}
}

/* =====================================================================
   28. 404 — "We dropped a stitch"
   Tokens only (§1). One authored moment: the yarn thread draws itself
   from the ball once on load (skipped for reduced motion).
   ===================================================================== */

.crt-404 {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--crt-pink);
	padding: clamp(3.5rem, 9vw, 6.5rem) 0 clamp(4rem, 10vw, 7rem);
	text-align: center;
}

.crt-404 ::selection {
	background: var(--crt-peach);
	color: var(--crt-heading);
}

.crt-404__blob {
	position: absolute;
	z-index: -1;
	left: 50%;
	top: 46%;
	width: min(64rem, 135%);
	height: min(42rem, 92%);
	transform: translate(-50%, -50%);
	color: var(--crt-peach);
	opacity: 0.55;
}

.crt-404__inner {
	max-width: 46rem;
}

/* 4 [yarn ball] 4 */
.crt-404__code {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(0.25rem, 2.5vw, 1rem);
	margin: 0 0 clamp(4.5rem, 11vw, 6rem);
	font-family: var(--crt-font-head);
	font-weight: 800;
	font-size: clamp(4rem, 15vw, 6rem);
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--crt-heading);
}

.crt-404__digit {
	display: block;
}

.crt-404__ball {
	position: relative;
	display: block;
	width: 0.95em;
	height: 0.95em;
	color: var(--crt-berry);
}

.crt-404__ball .crt-yarnball {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
	filter: drop-shadow(0 0.5rem 0.75rem rgba(143, 47, 104, 0.22));
}

/* The thread starts under the ball and runs left/down to a loose curl. */
.crt-404__thread {
	position: absolute;
	z-index: 0;
	top: 62%;
	right: 38%;
	width: clamp(15rem, 62vw, 31rem);
	height: auto;
	overflow: visible;
	pointer-events: none;
}

.crt-404__thread path {
	stroke: var(--crt-berry);
	stroke-width: 3.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
	vector-effect: non-scaling-stroke;
	animation: crt-404-draw 2.1s 0.25s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes crt-404-draw {
	from {
		stroke-dashoffset: 1;
	}

	to {
		stroke-dashoffset: 0;
	}
}

.crt-404__title {
	margin: 0 0 1rem;
	font-family: var(--crt-font-head);
	font-weight: 800;
	font-size: clamp(2rem, 6vw, 3.25rem);
	line-height: 1.1;
	color: var(--crt-heading);
	text-wrap: balance;
}

.crt-404__title em {
	font-family: var(--crt-font-script);
	font-style: normal;
	font-weight: 500;
	font-size: 1.2em;
	line-height: 1;
	color: var(--crt-berry);
}

.crt-404__lead {
	max-width: 34rem;
	margin: 0 auto;
	font-size: clamp(1.0625rem, calc(1.0625rem + 0.1vw), 1.15rem);
	line-height: 1.7;
	color: var(--crt-body);
	text-wrap: pretty;
}

/* Product search pill (mirrors the header search). */
.crt-404__search {
	position: relative;
	max-width: 30rem;
	margin: 2rem auto 1.5rem;
}

.crt-404__search input[type="search"] {
	width: 100%;
	border: 0.0625rem solid var(--crt-border);
	border-radius: var(--crt-radius-pill);
	padding: 0.9375rem 4rem 0.9375rem 1.375rem;
	font-family: inherit;
	font-size: clamp(1rem, calc(1rem + 0.08vw), 1.05rem);
	background: #fff;
	color: var(--crt-body);
	box-shadow: 0 0.375rem 1rem rgba(85, 73, 79, 0.06);
	transition: border-color var(--crt-transition), box-shadow var(--crt-transition);
}

.crt-404__search input[type="search"]::placeholder {
	color: #6f6169;
	opacity: 1;
}

.crt-404__search input[type="search"]:focus {
	outline: none;
	border-color: var(--crt-berry);
	box-shadow: 0 0 0 0.1875rem rgba(172, 58, 126, 0.15);
}

.crt-404__search-btn {
	position: absolute;
	top: 50%;
	right: 0.4375rem;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--crt-berry);
	color: #fff;
	cursor: pointer;
	transition: background-color var(--crt-transition);
}

.crt-404__search-btn:hover,
.crt-404__search-btn:focus-visible {
	background: var(--crt-berry-dark);
}

.crt-404__search-btn svg {
	width: 1.125rem;
	height: 1.125rem;
	display: block;
}

.crt-404__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.875rem 1rem;
}

/* Category chips. */
.crt-404__cats {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.625rem 0.875rem;
	margin-top: 2.5rem;
}

.crt-404__cats-label {
	font-size: 0.9375rem;
	font-weight: 600;
	color: #6f6169;
}

.crt-404__cats ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.crt-404__cats a {
	display: inline-block;
	padding: 0.5rem 1.0625rem;
	border: 0.0625rem solid var(--crt-card-border);
	border-radius: var(--crt-radius-pill);
	background: #fff;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--crt-heading);
	text-decoration: none;
	transition: border-color var(--crt-transition), background-color var(--crt-transition), color var(--crt-transition), transform var(--crt-transition);
}

.crt-404__cats a:hover,
.crt-404__cats a:focus-visible {
	border-color: var(--crt-berry);
	background: var(--crt-berry);
	color: #fff;
	transform: translateY(-0.125rem);
}

.crt-404__help {
	margin: 1.75rem 0 0;
	font-size: 1rem;
	color: var(--crt-body);
}

.crt-404__help a {
	font-weight: 600;
	color: var(--crt-berry-dark);
	text-underline-offset: 0.2em;
}

.crt-404__help a:hover,
.crt-404__help a:focus-visible {
	color: var(--crt-berry);
}

@media (max-width: 37.5rem) {
	.crt-404__thread {
		right: 40%;
		width: 52vw;
	}

	.crt-404__actions .crt-btn {
		width: 100%;
		justify-content: space-between;
	}
}

@media (prefers-reduced-motion: reduce) {
	.crt-404__thread path {
		animation: none;
		stroke-dashoffset: 0;
	}

	.crt-404__cats a {
		transition: none;
		transform: none;
	}
}

/* =====================================================================
   29. Custom order — "Want it your way?" section on every product page
   Reuses the contact panel (§17/§26) for the form; labels are shown
   here (more fields than the contact form) and the upload + date
   fields get brand chrome.
   ===================================================================== */

/* Quick link in the product summary. */
.crt-custom-order-link {
	margin: 1rem 0 0;
}

.crt-custom-order-link a {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.625rem 1.125rem 0.625rem 0.875rem;
	border-radius: var(--crt-radius-pill);
	background: var(--crt-pink);
	font-size: 0.96875rem;
	line-height: 1.35;
	color: var(--crt-heading);
	text-decoration: none;
	transition: background-color var(--crt-transition), transform var(--crt-transition);
}

.crt-custom-order-link a strong {
	color: var(--crt-berry-dark);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.crt-custom-order-link a:hover,
.crt-custom-order-link a:focus-visible {
	background: var(--crt-peach);
	transform: translateY(-0.0625rem);
}

.crt-custom-order-link__icon {
	flex: none;
	width: 1.375rem;
	height: 1.375rem;
	color: var(--crt-berry);
}

/* Section. */
.crt-custom-order {
	background: var(--crt-cream);
	padding: clamp(3.5rem, 8vw, 6rem) 0;
	scroll-margin-top: 6rem;
}

.crt-custom-order__inner {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}

.crt-custom-order__title {
	margin: 0 0 1rem;
	font-family: var(--crt-font-head);
	font-weight: 800;
	font-size: clamp(2rem, 4.5vw, 2.75rem);
	line-height: 1.1;
	color: var(--crt-heading);
	text-wrap: balance;
}

.crt-custom-order__title em {
	font-family: var(--crt-font-script);
	font-style: normal;
	font-weight: 500;
	font-size: 1.2em;
	line-height: 1;
	color: var(--crt-berry);
}

.crt-custom-order__lead {
	max-width: 34rem;
	margin: 0 0 2rem;
	font-size: clamp(1.0625rem, calc(1.0625rem + 0.1vw), 1.15rem);
	line-height: 1.7;
	color: var(--crt-body);
	text-wrap: pretty;
}

.crt-custom-order__steps {
	display: grid;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: crt-co;
}

.crt-custom-order__steps li {
	display: grid;
	grid-template-columns: 2.5rem minmax(0, 1fr);
	column-gap: 1rem;
	counter-increment: crt-co;
	line-height: 1.55;
	color: var(--crt-body);
}

.crt-custom-order__steps li::before {
	content: counter(crt-co);
	grid-row: 1 / span 2;
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: var(--crt-berry);
	color: #fff;
	font-family: var(--crt-font-head);
	font-weight: 800;
	font-size: 1.0625rem;
}

.crt-custom-order__steps strong {
	font-family: var(--crt-font-head);
	font-size: 1.125rem;
	color: var(--crt-heading);
}

/* Form panel — extends .crt-contact-form. */
.crt-custom-order__panel {
	margin: 0;
}

/* Labels are visible here (the contact form hides them behind placeholders). */
.crt-contact-form.crt-custom-order__panel .jet-form-builder__label {
	position: static !important;
	width: auto;
	height: auto;
	margin: 0 0 0.375rem;
	overflow: visible;
	clip: auto;
	white-space: normal;
}

.crt-custom-order__panel .jet-form-builder > .jet-form-builder-row:has(#co_name),
.crt-custom-order__panel .jet-form-builder > .jet-form-builder-row:has(#co_email),
.crt-custom-order__panel .jet-form-builder > .jet-form-builder-row:has(#co_colors),
.crt-custom-order__panel .jet-form-builder > .jet-form-builder-row:has(#co_size),
.crt-custom-order__panel .jet-form-builder > .jet-form-builder-row:has(#co_needed_by) {
	grid-column: auto;
}

.crt-custom-order__panel .jet-form-builder textarea.jet-form-builder__field {
	height: 8rem;
}

.crt-custom-order__panel .jet-form-builder__required {
	color: var(--crt-berry-dark);
}

.crt-custom-order__panel input[type="date"].jet-form-builder__field {
	min-height: 3.25rem;
	accent-color: var(--crt-berry);
}

/* Photo upload. */
.crt-custom-order__panel .jet-form-builder-file-upload {
	padding: 1rem;
	border: 0.125rem dashed var(--crt-card-border);
	border-radius: var(--crt-radius-field);
	background: #fff;
}

.crt-custom-order__panel .jet-form-builder-file-upload__files:empty {
	display: none;
}

.crt-custom-order__panel .jet-form-builder-file-upload__files {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	margin-bottom: 0.75rem;
}

.crt-custom-order__panel .jet-form-builder-file-upload__input.jet-form-builder__field {
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	font-size: 0.96875rem;
	color: var(--crt-body);
}

.crt-custom-order__panel .jet-form-builder-file-upload__input::file-selector-button {
	margin-right: 0.875rem;
	padding: 0.5rem 1.125rem;
	border: 0.0625rem solid var(--crt-berry);
	border-radius: var(--crt-radius-pill);
	background: #fff;
	color: var(--crt-berry);
	font-family: var(--crt-font-body);
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color var(--crt-transition), color var(--crt-transition);
}

.crt-custom-order__panel .jet-form-builder-file-upload__input::file-selector-button:hover {
	background: var(--crt-berry);
	color: #fff;
}

.crt-custom-order__panel .jet-form-builder-file-upload__message small {
	display: block;
	margin-top: 0.5rem;
	font-size: 0.8125rem;
	color: #6f6169;
}

.crt-custom-order__panel .jet-form-builder-file-upload__errors:not(.is-hidden) {
	margin-top: 0.5rem;
	color: #c0392b;
	font-size: 0.875rem;
}

@media (max-width: 56.25rem) {
	.crt-custom-order__inner {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 37.5rem) {
	.crt-custom-order__panel .jet-form-builder > .jet-form-builder-row:has(#co_name),
	.crt-custom-order__panel .jet-form-builder > .jet-form-builder-row:has(#co_email),
	.crt-custom-order__panel .jet-form-builder > .jet-form-builder-row:has(#co_colors),
	.crt-custom-order__panel .jet-form-builder > .jet-form-builder-row:has(#co_size),
	.crt-custom-order__panel .jet-form-builder > .jet-form-builder-row:has(#co_needed_by) {
		grid-column: 1 / -1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.crt-custom-order-link a,
	.crt-custom-order__panel .jet-form-builder-file-upload__input::file-selector-button {
		transition: none;
		transform: none;
	}
}

/* Stack label above field (JetFormBuilder rows are flex by default) and keep fields inside the panel. */
.crt-custom-order__panel .jet-form-builder-row {
	display: block;
	min-width: 0;
}

.crt-custom-order__panel .jet-form-builder__label {
	display: block;
	width: 100%;
	flex: none;
}

.crt-custom-order__panel .jet-form-builder__field-wrap {
	width: 100%;
	min-width: 0;
}

.crt-custom-order__panel .jet-form-builder .jet-form-builder__field {
	box-sizing: border-box;
	max-width: 100%;
}

.crt-custom-order__panel .jet-form-builder {
	min-width: 0;
}

/* =====================================================================
   30. Product page audit fixes (Impeccable audit, 2026-10-11)
   Heading outline, measure, touch targets, breadcrumb spacing.
   ===================================================================== */

/* Readable measure: description/detail copy was running ~100 characters wide. */
.crt-info-tabs__body,
.crt-product-details__body p,
.crt-product-details__body li {
	max-width: 72ch;
	text-wrap: pretty;
}

/* 44px touch targets on the purchase controls. */
.woocommerce div.product .crt-qty-btn,
.woocommerce-page div.product .crt-qty-btn {
	width: 2.75rem;
}

.woocommerce div.product .crt-qa--wish-single,
.woocommerce-page div.product .crt-qa--wish-single {
	min-height: 2.75rem;
}

.woocommerce-product-gallery__trigger {
	width: 2.75rem !important;
	height: 2.75rem !important;
}

/* Native checkboxes (review form "save my details") were 13px. */
.woocommerce #commentform input[type="checkbox"],
.woocommerce form input[type="checkbox"] {
	width: 1.25rem;
	height: 1.25rem;
	accent-color: var(--crt-berry);
}

/* The shop breadcrumb sat tight against the (overhanging) logo. */
.post-type-archive-product .crt-breadcrumb,
.tax-product_cat .crt-breadcrumb {
	margin-top: 1.25rem;
}

/* Product info tabs (desktop): the open panel spans every row (`grid-row: 1 / -1`) but the grid had no
   explicit rows, so the panel's height was pushed into row 1 and the first tab got stretched whenever a later
   tab was open. Compact explicit rows plus one flexible row absorb the panel height instead. */
@media (min-width: 56.3125rem) {
	.crt-info-tabs {
		grid-template-rows: repeat(12, auto) 1fr;
	}
}