/**
 * Life in Bold — the Story design layer.
 *
 * Loaded on every page after base, shop and cart styles (inc/story.php), so it
 * can restyle the shared chrome — header, footer, buttons — without editing
 * each component's own stylesheet.
 *
 * The language, from the brand's story site:
 *   - a near-black ground, paper chapters, one electric-blue chapter;
 *   - very large uppercase statements, one word or line picked out in colour;
 *   - small mono labels with red chapter numbers ("01 / A familiar feeling");
 *   - hairline rules instead of boxes;
 *   - a Georgia italic "note" voice for the personal lines;
 *   - a solid red closing bar.
 *
 * Orange-red (#FF5133) is only 2.8:1 on paper, so on light grounds small red
 * text uses --signal-deep; the bright red is kept for dark grounds, large type
 * and button fills (with ink text, 5.8:1).
 */

:root {
	/*
	 * Side padding that also holds everything to the shop's 1180px measure,
	 * so the header, story sections, product grid and footer share one edge.
	 */
	--lib-pad: max(clamp(1.5rem, 5.5vw, 5.6rem), calc(50vw - 590px));
	--lib-hair-dark: 1px solid var(--wp--preset--color--rule-dark);
	--lib-hair-light: 1px solid var(--wp--preset--color--rule);
}

/* -------------------------------------------------------------------------
 * 1. Voices
 * ---------------------------------------------------------------------- */

.lib-meta {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8125rem;
	font-weight: 400;
	letter-spacing: 0.06em;
	line-height: 1.45;
	text-transform: uppercase;
}

.lib-note {
	font-family: var(--wp--preset--font-family--serif);
	font-style: italic;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.25;
	text-transform: none;
}

/* -------------------------------------------------------------------------
 * 2. Buttons — red fill with ink text; hairline ghost
 * ---------------------------------------------------------------------- */

.lib-btn {
	letter-spacing: 0.12em;
	padding: 1rem 1.5rem;
}

a.lib-btn.lib-btn--solid,
button.lib-btn.lib-btn--solid,
.lib-btn--solid {
	background: var(--wp--preset--color--signal);
	color: var(--wp--preset--color--ink) !important;
	text-decoration: none;
}

a.lib-btn.lib-btn--solid:hover,
a.lib-btn.lib-btn--solid:focus-visible,
button.lib-btn.lib-btn--solid:hover,
button.lib-btn.lib-btn--solid:focus-visible {
	background: var(--wp--preset--color--signal-ink);
	color: var(--wp--preset--color--ink) !important;
}

.lib-btn--ghost {
	box-shadow: inset 0 0 0 1px currentColor;
	text-decoration: none;
}

/* On dark grounds the ghost button is drawn in paper. */
:is(.lib-band, .lib-s--dark, .lib-s--blue, .lib-hero, .lib-pg-hero, .lib-pg-final, .lib-pg-feature) .lib-btn--ghost {
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--bone);
	color: var(--wp--preset--color--bone);
}

:is(.lib-band, .lib-s--dark, .lib-s--blue, .lib-hero, .lib-pg-hero, .lib-pg-final, .lib-pg-feature) .lib-btn--ghost:hover,
:is(.lib-band, .lib-s--dark, .lib-s--blue, .lib-hero, .lib-pg-hero, .lib-pg-final, .lib-pg-feature) .lib-btn--ghost:focus-visible {
	background: var(--wp--preset--color--bone);
	color: var(--wp--preset--color--ink);
}

/* WooCommerce's own bag and checkout buttons follow the same fill. */
.woocommerce .wc-proceed-to-checkout a.checkout-button,
.lib-checkout #place_order,
.woocommerce .single_add_to_cart_button {
	background: var(--wp--preset--color--signal) !important;
	color: var(--wp--preset--color--ink) !important;
}

.woocommerce .wc-proceed-to-checkout a.checkout-button:hover,
.lib-checkout #place_order:hover,
.woocommerce .single_add_to_cart_button:hover {
	background: var(--wp--preset--color--signal-ink) !important;
}

.lib-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

/* Small red text on light grounds uses the deeper red — see the file header. */
.lib-card__price ins,
.lib-buy__price ins,
.lib-line__remove:hover,
.lib-label--signal {
	color: var(--wp--preset--color--signal-deep);
}

:is(.lib-band, .lib-s--dark) .lib-label--signal {
	color: var(--wp--preset--color--signal);
}

/* -------------------------------------------------------------------------
 * 3. Header — wordmark, three quiet links, a hairline
 * ---------------------------------------------------------------------- */

.lib-header {
	border-bottom: var(--lib-hair-dark);
	padding: 1.35rem var(--lib-pad);
}

.lib-header__inner {
	margin: 0;
	max-width: none;
}

.lib-brand {
	align-items: center;
	color: var(--wp--preset--color--bone);
	display: inline-flex;
	gap: 0.75rem;
	text-decoration: none;
}

.lib-band .lib-brand {
	color: var(--wp--preset--color--bone);
	text-decoration: none;
}

.lib-wordmark {
	color: inherit;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.75rem;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
}

.lib-wordmark span {
	color: var(--wp--preset--color--signal);
}

/* With the wordmark beside it, the logo mark steps down in size. */
.lib-brand:has(.lib-wordmark) .lib-mark,
.lib-brand:has(.lib-wordmark) .lib-brand__logo {
	height: 2.25rem;
}

@media (max-width: 599px) {
	.lib-wordmark {
		font-size: 1.45rem;
	}

	.lib-header {
		padding-block: 1.1rem;
	}
}

/* Desktop links: sentence case, body face — the story site's quiet nav. */
@media (min-width: 600px) {
	.lib-nav--header .wp-block-navigation__container {
		gap: 2rem !important;
	}

	.lib-nav--header .wp-block-navigation-item__content {
		font-family: var(--wp--preset--font-family--body);
		font-size: 0.9375rem;
		font-weight: 500;
		letter-spacing: 0;
		text-transform: none;
	}

	.lib-nav--header .wp-block-navigation-item__content:hover {
		text-decoration: underline;
		text-decoration-color: var(--wp--preset--color--signal);
		text-decoration-thickness: 2px;
		text-underline-offset: 6px;
	}
}

.lib-cart-trigger .lib-label {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
}

.lib-cart-count.is-filled {
	background: var(--wp--preset--color--signal);
	color: var(--wp--preset--color--ink);
}

/* The phone menu: full-screen ink, statements in the display face. */
.lib-nav--header .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--ink) !important;
	border-top: 4px solid var(--wp--preset--color--signal);
}

/* -------------------------------------------------------------------------
 * 4. Footer — an index, the small print, then the red bar
 * ---------------------------------------------------------------------- */

.lib-footer {
	border-top: 0;
	padding: 0;
}

.lib-footer__index {
	border-top: var(--lib-hair-dark);
	display: grid;
	gap: 2.5rem 2rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0;
	padding: clamp(3.5rem, 7vw, 5.5rem) var(--lib-pad) clamp(2.5rem, 5vw, 3.5rem);
}

@media (min-width: 900px) {
	.lib-footer__index {
		grid-template-columns: minmax(0, 1.8fr) repeat(3, minmax(0, 1fr));
	}
}

.lib-footer__brand {
	grid-column: 1 / -1;
}

@media (min-width: 900px) {
	.lib-footer__brand {
		grid-column: auto;
	}
}

.lib-footer__word {
	margin: 0;
}

.lib-footer__word .lib-wordmark {
	font-size: clamp(2.6rem, 5vw, 4.25rem);
}

.lib-footer__slogan {
	color: var(--wp--preset--color--concrete);
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(1.15rem, 1.8vw, 1.45rem);
	font-style: italic;
	margin: 0.75rem 0 0;
	max-width: 22ch;
}

.lib-footer__col {
	margin: 0;
}

.lib-footer__head {
	color: var(--wp--preset--color--concrete);
	margin: 0 0 1rem !important;
}

.lib-footer__links {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.lib-footer .lib-footer__links a,
.lib-footer .wp-block-navigation-item__content {
	color: var(--wp--preset--color--bone);
	display: inline-block;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: 0;
	padding-block: 0.4rem;
	text-decoration: none;
	text-transform: none;
}

.lib-footer .lib-footer__links a:hover,
.lib-footer .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--signal);
}

.lib-footer .wp-block-navigation__container {
	gap: 0.15rem !important;
	row-gap: 0.15rem !important;
}

/* Undo the earlier touch-target offsets; these links carry their own padding. */
.lib-footer .lib-nav--footer .wp-block-navigation-item__content {
	margin-block: 0;
}

.lib-footer__small {
	border-top: var(--lib-hair-dark);
	color: var(--wp--preset--color--concrete);
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 2rem;
	justify-content: space-between;
	padding: 1.25rem var(--lib-pad);
}

.lib-footer__bar {
	align-items: center;
	background: var(--wp--preset--color--signal);
	color: var(--wp--preset--color--ink);
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 2rem;
	justify-content: space-between;
	padding: 1.6rem var(--lib-pad);
}

.lib-footer .lib-footer__bar a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.lib-footer .lib-footer__bar a:hover {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--ink);
}

.lib-footer__bar-word {
	font-family: var(--wp--preset--font-family--display);
	font-size: 2rem;
	line-height: 1;
	text-transform: uppercase;
}

.lib-footer__bar :focus-visible {
	outline-color: var(--wp--preset--color--ink) !important;
}

@media (max-width: 599px) {
	.lib-footer__bar {
		align-items: flex-start;
		flex-direction: column;
	}
}

/* -------------------------------------------------------------------------
 * 5. Story sections
 * ---------------------------------------------------------------------- */

.lib-story {
	margin: 0;
}

.lib-s {
	margin: 0;
	padding: clamp(3.75rem, 7vw, 6rem) var(--lib-pad);
}

.lib-s--dark {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--bone);
	--lib-dim: var(--wp--preset--color--concrete);
}

.lib-s--paper {
	background: var(--wp--preset--color--bone);
	color: var(--wp--preset--color--ink);
	--lib-dim: var(--wp--preset--color--ash);
}

.lib-s--blue {
	background: var(--wp--preset--color--volt);
	color: #fff;
	--lib-dim: #dce3ff;
}

.lib-s--dark :is(h1, h2, h3, h4),
.lib-s--blue :is(h1, h2, h3, h4) {
	color: inherit;
}

.lib-s :is(h1, h2, h3) {
	margin: 0;
}

.lib-s p {
	margin: 0;
}

.lib-s--dark a:not(.lib-btn),
.lib-s--blue a:not(.lib-btn) {
	color: inherit;
}

.lib-s__label {
	color: var(--lib-dim);
	display: flex;
	gap: 1.6rem;
	margin: 0 0 1.5rem !important;
}

.lib-s__n {
	color: var(--wp--preset--color--signal);
}

.lib-s--paper .lib-s__n {
	color: var(--wp--preset--color--volt);
}

.lib-s--blue .lib-s__n {
	color: #fff;
}

.lib-s__heading {
	align-items: end;
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem 3rem;
	justify-content: space-between;
	margin-bottom: clamp(2rem, 4vw, 2.75rem);
}

.lib-s__heading h2 {
	font-size: clamp(2.9rem, 6.5vw, 6rem);
	line-height: 0.92;
}

.lib-s__heading p {
	color: var(--lib-dim);
	font-size: 1.0625rem;
	max-width: 22rem;
}

/* 5.1 Opening ------------------------------------------------------------ */

.lib-opening {
	padding-bottom: 0;
	padding-top: 1.75rem;
}

.lib-opening__meta,
.lib-opening__caption {
	color: var(--lib-dim);
	display: flex;
	gap: 1rem 2rem;
	justify-content: space-between;
}

.lib-opening__title {
	color: var(--wp--preset--color--bone);
	font-size: clamp(3.8rem, 16.5vw, 12.5rem);
	letter-spacing: -0.02em;
	line-height: 0.88;
	margin: 0 !important;
}

.lib-opening__title span {
	color: var(--wp--preset--color--signal);
}

.lib-opening__caption {
	padding-block: 1.1rem 1.6rem;
}

@media (max-width: 599px) {
	.lib-opening__meta span:last-child,
	.lib-opening__caption span:last-child {
		display: none;
	}
}

/* 5.2 Calm face. Loud mind. --------------------------------------------- */

.lib-recognition__title {
	font-size: clamp(3.6rem, 10.5vw, 10.5rem);
	line-height: 0.94;
}

.lib-recognition__title em {
	color: var(--wp--preset--color--volt);
	font-style: normal;
}

.lib-recognition__foot {
	border-top: var(--lib-hair-light);
	display: grid;
	gap: 1.5rem 3rem;
	margin-top: clamp(2rem, 4vw, 2.75rem);
	padding-top: 1.5rem;
}

@media (min-width: 800px) {
	.lib-recognition__foot {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.lib-recognition__foot .lib-note {
	font-size: clamp(1.6rem, 3vw, 2.6rem);
	max-width: 17ch;
}

.lib-recognition__foot p:not(.lib-note) {
	max-width: 36rem;
}

/* 5.3 There's a story in the statement ---------------------------------- */

.lib-statements__grid {
	display: grid;
	gap: 2.5rem 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 800px) {
	.lib-statements__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* Staggered, as the story site hangs them. */
	.lib-statement:nth-child(2) {
		padding-top: 4.5rem;
	}

	.lib-statement:nth-child(3) {
		padding-top: 9rem;
	}
}

.lib-statement__link {
	color: inherit;
	display: block;
	text-decoration: none;
}

.lib-statement__window {
	aspect-ratio: 3 / 4;
	background: var(--wp--preset--color--ink-soft);
	display: block;
	overflow: hidden;
}

.lib-statement__window img {
	display: block;
	height: 100%;
	object-fit: cover;
	transition: transform var(--wp--custom--transition--base);
	width: 100%;
}

.lib-statement__link:hover img {
	transform: scale(1.03);
}

.lib-statement__feeling {
	color: var(--wp--preset--color--signal);
	display: block;
	margin-top: 1.25rem;
}

.lib-statement__title {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.8rem, 2.8vw, 2.7rem);
	line-height: 0.95;
	margin: 0.6rem 0 0.75rem;
	text-transform: uppercase;
}

.lib-statement__link:hover .lib-statement__title {
	color: var(--wp--preset--color--signal);
}

.lib-statement__line {
	color: var(--lib-dim);
	font-size: 1rem;
	max-width: 22rem;
}

.lib-statement__price {
	color: var(--wp--preset--color--bone);
	margin-top: 0.75rem !important;
}

.lib-statements__foot {
	align-items: center;
	border-top: var(--lib-hair-dark);
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem 3rem;
	justify-content: space-between;
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
	padding-top: 1.5rem;
}

.lib-statements__foot p {
	color: var(--lib-dim);
	max-width: 46rem;
}

@media (max-width: 799px) {
	/* Phones: image and words side by side, alternating, as on the story site. */
	.lib-statement {
		align-items: center;
		display: grid;
		gap: 0 1.25rem;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.lib-statement__link {
		display: contents;
	}

	.lib-statement__window {
		grid-row: 1 / span 4;
	}

	.lib-statement:nth-child(even) .lib-statement__window {
		grid-column: 2;
	}

	.lib-statement__feeling {
		margin-top: 0;
	}
}

/* 5.4 Which one says you ------------------------------------------------- */

.lib-story-shop .lib-grid {
	margin-top: 0;
}

.lib-story-shop__more {
	margin-top: clamp(2rem, 4vw, 3rem);
}

/* 5.5 Ruled rows (worlds, drops, FAQs, steps, details) ------------------ */

.lib-rows {
	border-bottom: var(--lib-hair-light);
	list-style: none;
	margin: 0;
	padding: 0;
}

.lib-s--dark .lib-rows,
.lib-band .lib-rows {
	border-bottom: var(--lib-hair-dark);
}

.lib-row {
	align-items: baseline;
	border-top: var(--lib-hair-light);
	display: grid;
	gap: 0.5rem 1.5rem;
	grid-template-columns: 2.5rem minmax(0, 1fr);
	padding-block: 1.6rem;
}

.lib-s--dark .lib-row,
.lib-band .lib-row {
	border-top: var(--lib-hair-dark);
}

@media (min-width: 800px) {
	.lib-row {
		grid-template-columns: 4rem minmax(0, 1.1fr) minmax(0, 1fr);
	}
}

.lib-row__n {
	color: var(--wp--preset--color--volt);
}

.lib-s--dark .lib-row__n,
.lib-band .lib-row__n {
	color: var(--wp--preset--color--signal);
}

.lib-row__title {
	font-size: clamp(1.9rem, 3.9vw, 3.9rem);
	line-height: 0.95;
	margin: 0;
}

.lib-row__title a {
	color: inherit;
	text-decoration: none;
}

.lib-row__title a span {
	color: var(--wp--preset--color--volt);
	display: inline-block;
	font-size: 0.6em;
	transition: transform var(--wp--custom--transition--swift);
	vertical-align: 0.2em;
}

.lib-s--dark .lib-row__title a span,
.lib-band .lib-row__title a span {
	color: var(--wp--preset--color--signal);
}

.lib-row__title a:hover {
	color: var(--wp--preset--color--volt);
}

.lib-s--dark .lib-row__title a:hover,
.lib-band .lib-row__title a:hover {
	color: var(--wp--preset--color--signal);
}

.lib-row__title a:hover span {
	transform: translateX(6px);
}

.lib-row__text {
	color: var(--lib-dim);
	font-size: 1.0625rem;
	max-width: 27rem;
}

.lib-row__text p {
	margin: 0;
}

.lib-row__meta {
	color: var(--lib-dim);
	margin-bottom: 0.35rem !important;
}

@media (max-width: 799px) {
	.lib-row__text {
		grid-column: 2;
	}
}

/* A compact size for rows inside panels and product pages. */
.lib-rows--compact .lib-row {
	padding-block: 1rem;
}

.lib-rows--compact .lib-row__title {
	font-size: clamp(1.35rem, 2vw, 1.6rem);
}

/* 5.6 The promise -------------------------------------------------------- */

.lib-closing {
	border-top: var(--lib-hair-dark);
}

.lib-closing__label {
	color: var(--wp--preset--color--signal);
	margin-bottom: 2rem !important;
}

.lib-closing__title {
	font-size: clamp(3.7rem, 11.5vw, 11.5rem);
	line-height: 0.93;
}

.lib-closing__title span {
	color: var(--wp--preset--color--signal);
}

.lib-closing__text {
	font-size: clamp(1.1875rem, 1.6vw, 1.3125rem);
	margin-top: clamp(1.75rem, 3vw, 2.5rem) !important;
	max-width: 32rem;
}

.lib-closing__sign {
	font-size: clamp(1.6rem, 2.4vw, 1.9rem);
	margin: 1.75rem 0 2rem !important;
}

/* 5.7 How we make it (blue) ---------------------------------------------- */

.lib-process__title {
	font-size: clamp(3.2rem, 7.5vw, 7.4rem);
	line-height: 0.92;
	margin-bottom: clamp(2rem, 4vw, 3rem) !important;
}

.lib-process__grid,
.lib-beliefs__grid {
	display: grid;
	gap: 2rem 2.8rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 800px) {
	.lib-process__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.lib-beliefs__grid {
		gap: 2rem 4.4rem;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.lib-process__grid li {
	border-top: 1px solid #9aaaee;
	padding-top: 1.4rem;
}

.lib-process__grid h3,
.lib-beliefs__grid h3 {
	font-size: clamp(1.9rem, 2.6vw, 2.4rem);
	line-height: 0.95;
	margin: 1rem 0 0.9rem !important;
}

.lib-process__grid p {
	max-width: 22rem;
}

.lib-beliefs__title {
	font-size: clamp(3rem, 6.5vw, 6.4rem);
	line-height: 0.92;
	margin-bottom: clamp(2rem, 4vw, 3rem) !important;
	max-width: 14ch;
}

.lib-beliefs__grid li {
	border-top: var(--lib-hair-dark);
	padding-top: 1.4rem;
}

.lib-beliefs__grid h3 {
	margin-top: 0 !important;
}

.lib-beliefs__grid p {
	color: var(--lib-dim);
	max-width: 31rem;
}

/* 5.8 A familiar feeling (chapter) --------------------------------------- */

.lib-chapter {
	display: grid;
	gap: 1.75rem 7vw;
}

@media (min-width: 900px) {
	.lib-chapter {
		grid-template-columns: minmax(0, 0.65fr) minmax(0, 1.35fr);
	}
}

.lib-chapter__copy h2 {
	font-size: clamp(2.8rem, 5.5vw, 5.5rem);
	line-height: 0.94;
	margin-bottom: 2rem !important;
}

.lib-chapter__copy p {
	color: #c5c5bf;
	max-width: 40rem;
}

.lib-chapter__copy p + p {
	margin-top: 1.4rem;
}

.lib-chapter__copy .lib-chapter__last {
	color: var(--wp--preset--color--bone);
	font-size: clamp(1.3rem, 1.8vw, 1.5rem);
	margin-top: 1.9rem;
}

/* -------------------------------------------------------------------------
 * 6. Commerce surfaces in the same voice
 * ---------------------------------------------------------------------- */

/* Archive masthead: the opening's scale and meta line. */
.lib-archive-band {
	border-bottom: var(--lib-hair-dark);
	padding-inline: var(--lib-pad);
}

.lib-archive-band__title {
	font-size: clamp(3.4rem, 10vw, 9rem);
	letter-spacing: -0.02em;
	line-height: 0.9;
}

.lib-archive-band .lib-swash {
	display: none;
}

.lib-archive-band__count {
	color: var(--wp--preset--color--signal);
}

/* Product cards: the statement type, a red feeling line on hover. */
.lib-card__title {
	letter-spacing: -0.005em;
}

.lib-card__link:hover .lib-card__title {
	color: var(--wp--preset--color--signal-deep);
}

/* The Personality feature and promo follow the section rhythm. */
.lib-pg-feature {
	padding-inline: var(--lib-pad);
}

/* Newsletter band on the homepage keeps to the same edges. */
.lib-story .lib-newsletter {
	padding-inline: var(--lib-pad);
}

/* The story page's opening is a title only — no photograph under it. */
.lib-opening--page {
	padding-bottom: clamp(3rem, 6vw, 5rem);
}

.lib-opening--page .lib-opening__title {
	margin-bottom: 0 !important;
}

/* -------------------------------------------------------------------------
 * 7. Information pages (templates/page.html)
 * ---------------------------------------------------------------------- */

.lib-page__head {
	padding-bottom: clamp(2.5rem, 5vw, 4rem);
	padding-top: clamp(2rem, 4vw, 3rem);
}

.lib-page__meta {
	color: var(--wp--preset--color--signal);
	margin: 0 0 1.25rem !important;
}

.lib-page__title {
	color: var(--wp--preset--color--bone);
	font-size: clamp(3.2rem, 9vw, 8rem) !important;
	letter-spacing: -0.02em;
	line-height: 0.9;
	margin: 0 !important;
}

.lib-page__body {
	padding-top: clamp(2.5rem, 5vw, 4rem);
}

/* The body is left-aligned to the same edge as the title above it. */
.lib-page__body > .entry-content {
	margin-left: 0 !important;
	max-width: 46rem;
}

.lib-page__body .entry-content h2 {
	font-size: clamp(1.9rem, 3.4vw, 2.8rem);
	margin-top: 2.5rem;
}

/* Section rules zero paragraph margins; running page text needs them back. */
.lib-page__body .entry-content p,
.lib-page__body .entry-content ul,
.lib-page__body .entry-content ol {
	margin-block: 0 1.1rem;
}

.lib-page__body .entry-content h2,
.lib-page__body .entry-content h3 {
	margin-bottom: 0.9rem !important;
}

/* -------------------------------------------------------------------------
 * 8. Shared parts (inc/components.php)
 * ---------------------------------------------------------------------- */

/* 8.1 Page head — one for every page ------------------------------------- */

.lib-head {
	padding-bottom: clamp(2.5rem, 5vw, 4rem);
	padding-top: clamp(1.5rem, 3vw, 2rem);
}

.lib-head__meta {
	color: var(--lib-dim);
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 2rem;
	justify-content: space-between;
	margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.lib-head__meta .lib-crumbs {
	margin: 0;
}

.lib-head__meta .lib-crumbs,
.lib-head__meta .lib-crumbs a {
	color: var(--lib-dim);
	font-size: inherit;
	letter-spacing: inherit;
}

.lib-head__meta .lib-crumbs a:hover {
	color: var(--wp--preset--color--bone);
}

.lib-head__title {
	color: var(--wp--preset--color--bone);
	font-size: clamp(3.2rem, 10vw, 9rem);
	letter-spacing: -0.02em;
	line-height: 0.9;
	margin: 0 !important;
	max-width: 14ch;
}

.lib-head__title span {
	color: var(--wp--preset--color--signal);
}

.lib-head__title--quiet {
	font-size: clamp(2.6rem, 6vw, 5rem);
}

.lib-head__lede {
	color: var(--wp--preset--color--bone);
	font-size: clamp(1.1rem, 1.5vw, 1.25rem);
	margin-top: clamp(1.25rem, 2.5vw, 1.75rem) !important;
	max-width: 36rem;
}

.lib-head__note {
	color: var(--wp--preset--color--concrete);
	font-size: clamp(1.35rem, 2.2vw, 1.75rem);
	margin-top: 1rem !important;
	max-width: 28ch;
}

@media (max-width: 599px) {
	.lib-head__right {
		display: none;
	}
}

/* 8.2 Statement cards, unstaggered ---------------------------------------- */

@media (min-width: 800px) {
	.lib-statements__grid.is-flat .lib-statement:nth-child(n) {
		padding-top: 0;
	}
}

.lib-s--paper .lib-statement__feeling {
	color: var(--wp--preset--color--signal-deep);
}

.lib-s--paper .lib-statement__price {
	color: var(--wp--preset--color--ink);
}

.lib-s--paper .lib-statement__window {
	background: var(--wp--preset--color--bone-deep);
}

.lib-s--paper .lib-statement__link:hover .lib-statement__title {
	color: var(--wp--preset--color--signal-deep);
}

/* 8.3 Empty state ---------------------------------------------------------- */

.lib-empty-state {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding-block: clamp(1rem, 3vw, 2rem);
}

.lib-empty-state__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.6rem, 6vw, 5rem);
	line-height: 0.92;
	margin: 0;
	text-transform: uppercase;
}

.lib-empty-state__title span {
	color: var(--wp--preset--color--signal);
}

.lib-s--paper .lib-empty-state__title span {
	color: var(--wp--preset--color--signal-deep);
}

.lib-empty-state__text {
	color: var(--lib-dim);
	font-size: 1.125rem;
	margin: 0;
	max-width: 34rem;
}

.lib-empty-state > .lib-rows,
.lib-empty-state > .lib-statements__grid {
	margin-top: 1.5rem;
}

/* 8.4 Forms on paper -------------------------------------------------------- */

.lib-form-row {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin: 0 0 1.1rem;
}

.lib-form-row label {
	font-size: 0.875rem;
	font-weight: 600;
}

.lib-form-row :is(input, textarea, select) {
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 0;
	color: var(--wp--preset--color--ink);
	font: inherit;
	padding: 0.8rem 0.9rem;
	width: 100%;
}

.lib-form-row :is(input, textarea, select):focus {
	border-color: var(--wp--preset--color--ink);
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--signal-deep);
	outline-offset: 0;
}

.lib-form-row .lib-form-hint {
	color: var(--lib-dim);
	font-size: 0.8125rem;
}

.lib-form-notice {
	border-left: 4px solid var(--wp--preset--color--volt);
	margin: 0 0 1.5rem;
	padding: 0.75rem 1rem;
}

.lib-form-notice.is-error {
	border-color: var(--wp--preset--color--signal-deep);
}

/* The spam trap stays out of sight and out of the tab order. */
.lib-hp {
	height: 1px;
	left: -9999px;
	overflow: hidden;
	position: absolute;
	width: 1px;
}

/* 8.5 Retired devices ------------------------------------------------------ */

/*
 * The marker swash, the caption bar and the torn edges belonged to the
 * previous design. Statements now pick out a word in colour instead; the
 * promise line and hairlines do the caption bar's job.
 */
.lib-swash,
.lib-caption-bar {
	display: none !important;
}

.lib-torn-top::before,
.lib-torn-bottom::after {
	display: none;
}

.wp-block-image.is-style-torn img,
.lib-hero__figure {
	-webkit-mask-image: none;
	mask-image: none;
}

/* -------------------------------------------------------------------------
 * 9. Browse — header search, shop head, tabs, filters, cards
 * ---------------------------------------------------------------------- */

/* 9.1 Header search ---------------------------------------------------------- */

.lib-search {
	position: static;
}

.lib-search__toggle {
	align-items: center;
	color: var(--wp--preset--color--bone);
	cursor: pointer;
	display: inline-flex;
	gap: 0.4rem;
	font-size: 0.9375rem;
	font-weight: 500;
	list-style: none;
	min-height: 44px;
	min-width: 44px;
	justify-content: center;
}

.lib-search__toggle::-webkit-details-marker {
	display: none;
}

.lib-search__toggle:hover .lib-search__label {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--signal);
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

@media (max-width: 599px) {
	.lib-search__label {
		clip-path: inset(50%);
		height: 1px;
		overflow: hidden;
		position: absolute;
		width: 1px;
	}
}

@media (min-width: 600px) {
	.lib-search__icon {
		display: none;
	}
}

/* The panel spans the header, under its hairline. */
.lib-search__panel {
	background: var(--wp--preset--color--ink);
	border-bottom: var(--lib-hair-dark);
	display: flex;
	gap: 0.6rem;
	left: 0;
	padding: 1rem var(--lib-pad) 1.25rem;
	position: absolute;
	right: 0;
	top: 100%;
	z-index: 120;
}

.lib-search__field {
	background: var(--wp--preset--color--ink-soft);
	border: 1px solid var(--wp--preset--color--rule-dark);
	color: var(--wp--preset--color--bone);
	flex: 1;
	font: inherit;
	font-size: 1.125rem;
	min-width: 0;
	padding: 0.8rem 1rem;
}

.lib-search__field::placeholder {
	color: var(--wp--preset--color--concrete);
}

.lib-search__field:focus {
	border-color: var(--wp--preset--color--bone);
	outline: 3px solid var(--wp--preset--color--acid);
	outline-offset: 0;
}

.lib-header__end {
	gap: clamp(0.75rem, 2.5vw, 2rem) !important;
}

/* 9.2 Shop head — the shared page head inside WooCommerce's header -------------- */

.lib-archive-band.lib-head {
	padding-bottom: clamp(2rem, 4vw, 3rem);
	padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
}

.lib-archive-band .lib-head__meta {
	margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}

.lib-archive-band .lib-head__meta .lib-crumbs {
	margin-bottom: 0;
}

.lib-archive-band__count {
	color: var(--wp--preset--color--signal);
	margin-top: 1rem !important;
}

/* 9.3 World tabs ------------------------------------------------------------ */

.lib-worldtabs {
	border-bottom: var(--lib-hair-light);
	display: flex;
	gap: 0 1.75rem;
	margin: 0 0 1rem;
	overflow-x: auto;
	scrollbar-width: none;
}

.lib-worldtabs::-webkit-scrollbar {
	display: none;
}

.lib-worldtabs__tab {
	border-bottom: 3px solid transparent;
	color: var(--wp--preset--color--ash);
	flex: none;
	font-size: 0.9375rem;
	font-weight: 600;
	padding: 0.75rem 0 0.6rem;
	text-decoration: none;
	white-space: nowrap;
}

.lib-worldtabs__tab:hover {
	color: var(--wp--preset--color--ink);
}

.lib-worldtabs__tab[aria-current="page"] {
	border-bottom-color: var(--wp--preset--color--signal);
	color: var(--wp--preset--color--ink);
}

/* 9.4 The filter row --------------------------------------------------------- */

.lib-filters {
	border-block: var(--lib-hair-light);
}

.lib-filters__inner {
	align-items: flex-end;
	gap: 1rem 2rem;
}

/* Colours as swatches; the name is the tooltip and the screen-reader label. */
.lib-chip--swatch {
	border: 0;
	height: 2rem;
	justify-content: center;
	padding: 0;
	position: relative;
	width: 2rem;
}

.lib-chip--swatch span {
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.lib-chip--swatch .lib-chip__dot {
	height: 100%;
	width: 100%;
}

.lib-chip--swatch:hover .lib-chip__dot {
	box-shadow: inset 0 0 0 1px rgba(18, 18, 18, 0.3), 0 0 0 2px var(--wp--preset--color--ink);
}

.lib-chip--swatch:has(input:checked) {
	background: transparent;
}

.lib-chip--swatch:has(input:checked) .lib-chip__dot {
	box-shadow: inset 0 0 0 1px rgba(18, 18, 18, 0.3), 0 0 0 3px var(--wp--preset--color--signal-deep);
}

.lib-filters__done {
	display: none;
}

/* Phones: a sticky Filter bar; the panel opens as a sheet from the bottom. */
@media (max-width: 899px) {
	.lib-filters {
		background: var(--wp--preset--color--bone);
		position: sticky;
		top: calc(var(--lib-admin-bar, 0px) + 80px);
		z-index: 60;
	}

	.lib-filters__panel[open]::before {
		background: rgba(18, 18, 18, 0.55);
		content: "";
		inset: 0;
		position: fixed;
		z-index: 140;
	}

	.lib-filters__panel[open] > .lib-filters__inner {
		background: var(--wp--preset--color--bone);
		bottom: 0;
		left: 0;
		max-height: 78vh;
		overflow-y: auto;
		padding: 1.5rem var(--lib-pad) calc(1.5rem + env(safe-area-inset-bottom));
		position: fixed;
		right: 0;
		z-index: 150;
	}

	.lib-filters__done {
		display: block;
		width: 100%;
	}

	.lib-filters__actions {
		width: 100%;
	}
}

/* 9.5 Product cards ------------------------------------------------------------ */

.lib-card__feeling {
	color: var(--wp--preset--color--signal-deep);
	display: block;
	margin-top: 0.9rem;
}

.lib-card__feeling + .lib-card__title {
	margin-top: 0.3rem;
}

/* The per-card button only shows on hover, on devices that hover. */
.lib-card__cta {
	display: none !important;
}

@media (hover: hover) and (min-width: 900px) {
	.lib-card {
		position: relative;
	}

	.lib-card__cta {
		display: inline-block !important;
		left: 0.75rem;
		opacity: 0;
		position: absolute;
		top: 0.75rem;
		transform: translateY(-4px);
		transition: opacity var(--wp--custom--transition--swift), transform var(--wp--custom--transition--swift);
	}

	.lib-card:hover .lib-card__cta,
	.lib-card:focus-within .lib-card__cta {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lib-card__cta {
		transition: none;
	}
}

/* 9.6 End of the grid, and search's page results ------------------------------ */

.lib-archive-worlds {
	margin-top: clamp(2.5rem, 5vw, 4rem);
}

.lib-archive-worlds__promise {
	border-top: var(--lib-hair-light);
	color: var(--wp--preset--color--ash);
	margin: 0 0 clamp(2rem, 4vw, 3rem) !important;
	padding-top: 1rem;
}

.lib-search-pages {
	margin-top: clamp(2.5rem, 5vw, 4rem);
}

.lib-search-pages ul {
	display: none;
}

/* -------------------------------------------------------------------------
 * 10. Product page
 * ---------------------------------------------------------------------- */

/* Sections that escape the product page's 1180px column to the full width. */
.lib-bleed {
	margin-inline: calc(50% - 50vw);
	padding-inline: var(--lib-pad);
}

.single-product #lib-content {
	padding-bottom: 0 !important;
}

.lib-pdp__meta {
	color: var(--wp--preset--color--ash);
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 2rem;
	justify-content: space-between;
	margin-bottom: clamp(1rem, 2vw, 1.5rem);
}

.lib-pdp__meta .lib-crumbs {
	margin: 0;
}

.lib-pdp__meta .lib-crumbs,
.lib-pdp__meta .lib-crumbs a {
	font-size: inherit;
	letter-spacing: inherit;
}

/* Desktop gallery: thumbnails in a column beside the photograph. */
@media (min-width: 900px) {
	.lib-gallery {
		display: grid;
		gap: 0.75rem;
		grid-template-columns: 4.5rem minmax(0, 1fr);
	}

	.lib-gallery__thumbs {
		align-content: start;
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
		grid-column: 1;
		grid-row: 1;
		margin: 0;
		max-height: min(80vh, 44rem);
		overflow-y: auto;
		scrollbar-width: thin;
	}

	.lib-gallery__stage {
		grid-column: 2;
	}
}

.lib-buy__eyebrow {
	margin: 0;
}

.lib-buy__eyebrow a {
	color: var(--wp--preset--color--signal-deep);
	text-decoration: none;
}

.lib-buy__eyebrow a:hover {
	text-decoration: underline;
}

.lib-buy__title {
	font-size: clamp(2.4rem, 4.5vw, 3.8rem);
	line-height: 0.92;
}

.single_add_to_cart_button {
	width: 100%;
}

/* The delivery promise as ruled rows, not bullets. */
.lib-buy .lib-delivery {
	border-top: var(--lib-hair-light);
	margin-top: 0.5rem;
}

.lib-buy .lib-delivery li {
	border-bottom: var(--lib-hair-light);
	padding: 0.7rem 0;
}

.lib-buy .lib-delivery li::before {
	display: none;
}

/* 10.1 The meaning ---------------------------------------------------------- */

.lib-s.lib-meaning {
	border: 0;
	margin-top: clamp(3rem, 6vw, 5rem);
	max-width: none;
}

.lib-meaning__grid {
	display: grid;
	gap: 1.5rem 4rem;
}

@media (min-width: 900px) {
	.lib-meaning__grid {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	}
}

.lib-meaning__statement {
	font-size: clamp(3rem, 7vw, 6.5rem);
	line-height: 0.9;
}

.lib-meaning__body {
	color: #c5c5bf;
	font-size: 1.125rem;
	max-width: 36rem;
}

.lib-meaning__body p + p {
	margin-top: 1.1rem;
}

/* 10.2 Details and the size chart --------------------------------------------- */

.lib-details__grid {
	display: grid;
	gap: 2.5rem 4rem;
	/* The size chart is wider than a phone; it scrolls in its own box rather
	   than stretching the column and clipping everything beside it. */
	grid-template-columns: minmax(0, 1fr);
}

.lib-details__grid > * {
	min-width: 0;
}

@media (min-width: 1000px) {
	.lib-details__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	/* Two-column rows are too wide beside the chart; stack title over text. */
	.lib-details .lib-row {
		grid-template-columns: 7rem minmax(0, 1fr);
	}

	.lib-details .lib-row__n {
		display: none;
	}
}

.lib-details .lib-row__n:empty {
	display: none;
}

.lib-details .lib-row {
	grid-template-columns: 7rem minmax(0, 1fr);
}

.lib-details .lib-row__text {
	grid-column: auto;
}

.lib-details__label {
	color: var(--wp--preset--color--ash);
	margin: 0 0 0.75rem !important;
}

.lib-size-table {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.lib-units {
	display: inline-flex;
	gap: 0;
}

.lib-units input {
	height: 1px;
	opacity: 0;
	position: absolute;
	width: 1px;
}

.lib-units label {
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--rule);
	cursor: pointer;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	padding: 0.45rem 0.9rem;
	text-transform: uppercase;
}

.lib-units input:checked + label {
	background: var(--wp--preset--color--ink);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--ink);
	color: var(--wp--preset--color--bone);
}

.lib-units input:focus-visible + label {
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--signal-deep);
	outline-offset: 2px;
}

.lib-size-table:has(.lib-units__cm:checked) .lib-sizes__in,
.lib-size-table:has(.lib-units__in:checked) .lib-sizes__cm {
	display: none;
}

.lib-size-table__scroll {
	overflow-x: auto;
}

.lib-size-table .lib-sizes {
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
	width: 100%;
}

.lib-size-table .lib-sizes :is(th, td) {
	border-bottom: var(--lib-hair-light);
	font-size: 0.9375rem;
	padding: 0.6rem 0.75rem 0.6rem 0;
	text-align: left;
	white-space: nowrap;
}

.lib-size-table .lib-sizes thead th {
	color: var(--wp--preset--color--ash);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.lib-size-table .lib-sizes tbody th {
	font-weight: 700;
}

.lib-size-table .lib-sizes :is(.lib-sizes__cm, .lib-sizes__in) {
	display: inline;
	font-family: var(--wp--preset--font-family--mono);
}

.lib-size-table__note {
	color: var(--wp--preset--color--ash);
	margin: 0 !important;
}

/* 10.3 Worn and more designs --------------------------------------------------- */

.lib-worn {
	padding-right: 0;
}

.lib-worn .lib-s__heading,
.lib-worn .lib-s__label {
	padding-right: var(--lib-pad);
}

.lib-worn__strip {
	display: flex;
	gap: 1rem;
	list-style: none;
	margin: 0;
	overflow-x: auto;
	padding: 0 var(--lib-pad) 0.5rem 0;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
}

.lib-worn__strip li {
	flex: 0 0 min(70vw, 20rem);
	scroll-snap-align: start;
}

.lib-worn__strip img {
	aspect-ratio: 4 / 5;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.lib-more-designs__foot {
	margin-top: clamp(2rem, 4vw, 3rem);
}

.lib-sticky-buy__choice {
	color: var(--wp--preset--color--concrete);
}

/* Picked-out words in statements: upright, coloured — never a faux italic. */
:is(.lib-s__heading h2, .lib-head__title, .lib-empty-state__title, .lib-meaning__statement) :is(em, span) {
	color: var(--wp--preset--color--signal);
	font-style: normal;
}

.lib-s--paper :is(.lib-s__heading h2, .lib-empty-state__title) em {
	color: var(--wp--preset--color--volt);
}

.lib-s--paper :is(.lib-s__heading h2, .lib-empty-state__title) span {
	color: var(--wp--preset--color--signal-deep);
}

/* -------------------------------------------------------------------------
 * 11. Bag, checkout, confirmation
 * ---------------------------------------------------------------------- */

/* 11.1 The flow head's steps, as its meta line ------------------------------- */

.lib-flowhead .lib-steps {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.lib-flowhead .lib-steps li {
	align-items: center;
	color: var(--wp--preset--color--concrete);
	display: flex;
	font-size: inherit;
	gap: 0.5rem;
	letter-spacing: inherit;
}

.lib-flowhead .lib-steps__n {
	border: 0;
	height: auto;
	width: auto;
}

.lib-flowhead .lib-steps .is-current {
	color: var(--wp--preset--color--bone);
}

.lib-flowhead .lib-steps .is-current .lib-steps__n,
.lib-flowhead .lib-steps .is-done .lib-steps__n {
	background: none;
	color: var(--wp--preset--color--signal);
}

.lib-flowhead .lib-steps .is-done {
	text-decoration: line-through;
	text-decoration-color: var(--wp--preset--color--signal);
}

.lib-cartpage .lib-flow-head,
.lib-checkoutpage .lib-flow-head {
	display: none;
}

/* 11.2 Bag page -------------------------------------------------------------- */

.lib-cart__items {
	border-top: 2px solid var(--wp--preset--color--ink);
}

.lib-cart__aside {
	background: var(--wp--preset--color--bone-deep);
	border-top: 4px solid var(--wp--preset--color--signal);
	padding: clamp(1.25rem, 3vw, 1.75rem);
}

/* Long Printify titles ("PERSONALITY: NOT GENERATED.") wrap instead of running into the price. */
.lib-cart-item__name {
	overflow-wrap: anywhere;
}

/* One panel: the totals sit on the aside's ground, not in a second card. */
.lib-cart__aside .cart_totals {
	background: none;
	border-top: 0;
	padding: 0;
}

/*
 * WooCommerce's block-theme stylesheet caps `main .woocommerce` at 1000px on
 * the bag, checkout and account pages; the theme runs them on the 1180px measure.
 */
body main.lib-shop .woocommerce {
	max-width: none;
}

/* Bag and checkout share the page head's edge, not WordPress's root padding. */
body main:is(.lib-cartpage, .lib-checkoutpage) {
	padding-left: var(--lib-pad) !important;
	padding-right: var(--lib-pad) !important;
}

body main:is(.lib-cartpage, .lib-checkoutpage) > * {
	margin-left: 0 !important;
	margin-right: 0 !important;
	max-width: none !important;
}

.lib-cart__coupon {
	border-top: var(--lib-hair-light);
	padding-top: 1rem;
}

/* 11.3 Checkout groups --------------------------------------------------------- */

.lib-step {
	align-items: baseline;
	border-top: 2px solid var(--wp--preset--color--ink);
	clear: both;
	display: flex;
	flex-basis: 100%;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.6rem, 2.6vw, 2.2rem);
	font-weight: 400;
	gap: 0.9rem;
	grid-column: 1 / -1;
	line-height: 1;
	margin: 2rem 0 1.25rem !important;
	padding-top: 1rem;
	text-transform: uppercase;
	width: 100%;
}

.lib-step__n {
	color: var(--wp--preset--color--signal-deep);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
}

.woocommerce-billing-fields__field-wrapper > .lib-step:first-child {
	margin-top: 0 !important;
}

/* WooCommerce's own "Billing details" heading is replaced by the groups. */
.lib-checkout .woocommerce-billing-fields > h3 {
	display: none;
}

.lib-checkout #payment {
	background: transparent !important;
}

.lib-checkout #place_order {
	width: 100%;
}

/* The order column: first in the markup, right-hand and sticky on desktop. */
.lib-summary__toggle {
	align-items: center;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--bone);
	cursor: pointer;
	display: flex;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8125rem;
	justify-content: space-between;
	letter-spacing: 0.06em;
	list-style: none;
	padding: 1rem 1.25rem;
	text-transform: uppercase;
}

.lib-summary__toggle::-webkit-details-marker {
	display: none;
}

.lib-summary[open] .lib-summary__toggle span:first-child::after {
	content: " ↑";
}

.lib-summary:not([open]) .lib-summary__toggle span:first-child::after {
	content: " ↓";
}

.lib-summary__total {
	font-size: 1rem;
	font-weight: 600;
}

@media (min-width: 960px) {
	.lib-checkout__aside {
		align-self: start;
		grid-column: 2;
		grid-row: 1;
		position: sticky;
		top: calc(var(--lib-admin-bar, 0px) + 6rem);
	}

	.lib-checkout__main {
		grid-column: 1;
		grid-row: 1;
	}

	.lib-checkout .lib-checkout__sticky {
		position: static;
	}

	.lib-summary__toggle {
		display: none;
	}
}

/* 11.4 Confirmation ------------------------------------------------------------- */

.lib-order-next,
.lib-order-wait {
	margin-block: clamp(2rem, 4vw, 3rem);
}

.lib-confirmation .wc-block-order-confirmation-status {
	display: none;
}

.lib-empty-state .lib-rows {
	width: 100%;
}

/* A group heading inside a field row sits above the label, full width. */
.form-row .lib-step {
	margin-top: 1rem !important;
}

#billing_email_field .lib-step {
	margin-top: 0 !important;
}

/* WooCommerce's order blocks: square hairlines instead of rounded boxes. */
.lib-confirmation :is(.wc-block-order-confirmation-totals__table, .wc-block-order-confirmation-address, .wc-block-order-confirmation-summary) {
	border-color: var(--wp--preset--color--rule) !important;
	border-radius: 0 !important;
}

.lib-confirmation .wc-block-order-confirmation-totals__table a {
	color: var(--wp--preset--color--ink);
}

/* -------------------------------------------------------------------------
 * 12. Discovery — drops, lookbook
 * ---------------------------------------------------------------------- */

.lib-drop-chapter {
	border-top: 4px solid var(--lib-accent, var(--wp--preset--color--signal));
}

.lib-drop-chapter__status {
	border: 1px solid currentColor;
	padding: 0.1rem 0.5rem;
}

.lib-drop-chapter__status.is-out {
	background: var(--wp--preset--color--signal);
	border-color: var(--wp--preset--color--signal);
	color: var(--wp--preset--color--ink);
}

.lib-drop-chapter__soon {
	border-top: var(--lib-hair-light);
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding-top: 1.5rem;
}

.lib-s--dark .lib-drop-chapter__soon {
	border-top: var(--lib-hair-dark);
}

.lib-drop-chapter__soon .lib-note {
	color: var(--lib-dim);
	font-size: clamp(1.5rem, 2.6vw, 2.1rem);
	margin: 0;
}

.lib-drop-chapter__foot {
	margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}

.lib-notify .lib-meta {
	color: var(--lib-dim);
	margin: 0 0 0.6rem;
}

/* Lookbook chapters: poster beside the story; a wide poster runs full width. */
.lib-campaign-chapter {
	align-items: center;
	display: grid;
	gap: clamp(1.75rem, 4vw, 3.5rem);
}

@media (min-width: 900px) {
	.lib-campaign-chapter:not(.is-wide) {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.lib-campaign-chapter:not(.is-wide):nth-of-type(odd) .lib-campaign-chapter__poster {
		order: 2;
	}
}

.lib-campaign-chapter__poster {
	margin: 0;
}

.lib-campaign-chapter__poster img {
	display: block;
	height: auto;
	width: 100%;
}

.lib-campaign-chapter:not(.is-wide) .lib-campaign-chapter__poster img {
	max-height: 86vh;
	object-fit: contain;
}

.lib-campaign-chapter__title {
	font-size: clamp(2.8rem, 6vw, 5.5rem);
	line-height: 0.92;
}

.lib-campaign-chapter__story {
	font-size: clamp(1.1rem, 1.5vw, 1.25rem);
	margin-top: 1.25rem !important;
	max-width: 32rem;
}

.lib-campaign-chapter__label {
	color: var(--lib-dim);
	margin: 2rem 0 0.75rem !important;
}

.lib-look {
	border-top: var(--lib-hair-light);
	list-style: none;
	margin: 0;
	padding: 0;
}

.lib-s--dark .lib-look {
	border-top: var(--lib-hair-dark);
}

.lib-look li {
	border-bottom: var(--lib-hair-light);
}

.lib-s--dark .lib-look li {
	border-bottom: var(--lib-hair-dark);
}

.lib-look__item {
	align-items: center;
	color: inherit;
	display: grid;
	gap: 1rem;
	grid-template-columns: 3.5rem minmax(0, 1fr) auto;
	padding: 0.6rem 0;
	text-decoration: none;
}

.lib-look__item img {
	aspect-ratio: 1;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.lib-look__name {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.35rem;
	line-height: 1;
	text-transform: uppercase;
}

.lib-look__item:hover .lib-look__name {
	color: var(--wp--preset--color--signal);
}

.lib-s--paper .lib-look__item:hover .lib-look__name {
	color: var(--wp--preset--color--signal-deep);
}

.lib-look__price {
	color: var(--lib-dim);
}

/* Personality page: one word in colour replaces the retired swash. */
:is(.lib-pg-hero__title, .lib-pg-feature__title, .lib-pg-final__title, .lib-pg-lookbook__title) span {
	color: var(--wp--preset--color--signal);
}

/* FAQ — expanding ruled rows; used on the Personality and help pages. */
.lib-faq {
	border-bottom: var(--lib-hair-light);
	max-width: 52rem;
}

.lib-faq__item {
	border-top: var(--lib-hair-light);
}

.lib-faq__item summary {
	align-items: center;
	cursor: pointer;
	display: flex;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.35rem, 2.2vw, 1.75rem);
	gap: 1rem;
	justify-content: space-between;
	line-height: 1.05;
	list-style: none;
	padding: 1.1rem 0;
	text-transform: uppercase;
}

.lib-faq__item summary::-webkit-details-marker {
	display: none;
}

.lib-faq__item summary::after {
	color: var(--wp--preset--color--signal-deep);
	content: "+";
	font-family: var(--wp--preset--font-family--mono);
	font-size: 1.25rem;
}

.lib-faq__item[open] summary::after {
	content: "−";
}

.lib-faq__item p {
	color: var(--lib-dim);
	margin: 0 0 1.25rem !important;
	max-width: 42rem;
}

.lib-campaign-chapter__title span {
	color: var(--wp--preset--color--signal);
}

.lib-s--paper .lib-campaign-chapter__title span {
	color: var(--wp--preset--color--volt);
}

/* -------------------------------------------------------------------------
 * 13. Brand, help & trust (phase 3)
 * ---------------------------------------------------------------------- */

/* 13.2 Story page — one photograph, edge to edge ---------------------------- */

.lib-photo-chapter {
	padding: 0 !important;
}

.lib-photo-chapter__figure {
	margin: 0;
}

.lib-photo-chapter__figure img {
	display: block;
	height: auto;
	width: 100%;
}

/* A wide poster stays whole: on a phone it scrolls sideways instead of cropping. */
@media (max-width: 699px) {
	.lib-photo-chapter__scroll {
		overflow-x: auto;
		scrollbar-width: none;
	}

	.lib-photo-chapter__figure img {
		height: 75vw;
		max-width: none;
		width: auto;
	}
}

.lib-photo-chapter__caption {
	border-top: var(--lib-hair-dark);
	color: var(--wp--preset--color--concrete);
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 2rem;
	justify-content: space-between;
	padding: 1rem var(--lib-pad);
}

.lib-photo-chapter__caption a {
	color: var(--wp--preset--color--bone);
	text-decoration: none;
}

.lib-photo-chapter__caption a:hover {
	color: var(--wp--preset--color--signal);
}

/* 13.3 Long pages — "On this page" beside the text -------------------------- */

.lib-longpage {
	display: grid;
	gap: 2rem 4rem;
}

@media (min-width: 1000px) {
	.lib-page__body > .entry-content:has(.lib-longpage) {
		max-width: none;
	}

	.lib-longpage {
		align-items: start;
		grid-template-columns: 15rem minmax(0, 46rem);
	}

	.lib-toc {
		position: sticky;
		top: 6rem;
	}
}

.lib-toc {
	border-top: 2px solid var(--wp--preset--color--ink);
	padding-top: 0.9rem;
}

.lib-toc__label {
	color: var(--wp--preset--color--ash);
	margin: 0 0 0.6rem !important;
}

.lib-toc ol {
	counter-reset: lib-toc;
	list-style: none;
	margin: 0 !important;
	padding: 0;
}

.lib-toc li {
	border-bottom: var(--lib-hair-light);
	counter-increment: lib-toc;
}

.lib-toc a {
	color: var(--wp--preset--color--ink);
	display: flex;
	font-size: 0.9375rem;
	gap: 0.75rem;
	padding: 0.5rem 0;
	text-decoration: none;
}

.lib-toc a::before {
	color: var(--wp--preset--color--signal-deep);
	content: counter(lib-toc, decimal-leading-zero);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	padding-top: 0.2rem;
}

.lib-toc a:hover {
	color: var(--wp--preset--color--signal-deep);
}

@media (max-width: 999px) {
	.lib-toc li:nth-child(n+2) {
		display: inline-block;
	}

	.lib-toc ol {
		display: flex;
		flex-wrap: wrap;
		gap: 0 1.25rem;
	}

	.lib-toc li {
		border-bottom: 0;
	}
}

.lib-longpage__body h2 {
	scroll-margin-top: 6rem;
}

.lib-longpage__body > :first-child,
.lib-longpage__body > .lib-longform > :first-child {
	margin-top: 0 !important;
}

/* 13.4 Help pages ------------------------------------------------------------ */

.lib-page--help .lib-page__body {
	border-top: var(--lib-hair-light);
}

.lib-help-size__grid,
.lib-help-ship__grid {
	display: grid;
	gap: 2.5rem 4rem;
}

@media (min-width: 1000px) {
	.lib-help-size__grid {
		align-items: start;
		grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	}

	.lib-help-ship__grid {
		align-items: start;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

.lib-measure {
	margin: 0;
}

.lib-measure__drawing {
	display: block;
	height: auto;
	margin: 0 auto 1.25rem;
	max-width: 22rem;
	width: 100%;
}

.lib-measure__tee {
	fill: var(--wp--preset--color--bone);
	stroke: var(--wp--preset--color--ink);
	stroke-linejoin: round;
	stroke-width: 2;
}

.lib-measure__line path {
	fill: none;
	stroke: var(--wp--preset--color--signal-deep);
	stroke-width: 2;
}

.lib-measure__line path:nth-child(3),
.lib-measure__line path:nth-child(4) {
	stroke: var(--wp--preset--color--volt);
}

.lib-measure__key {
	fill: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 16px;
	font-weight: 700;
}

.lib-help-size .lib-row,
.lib-help-ship .lib-row {
	grid-template-columns: 7rem minmax(0, 1fr);
}

.lib-help-size .lib-row__text,
.lib-help-ship .lib-row__text,
.lib-contact__card .lib-row__text {
	grid-column: auto;
}

.lib-rows--plain .lib-row__n:empty {
	display: none;
}

.lib-help-size .lib-row__title::before {
	color: var(--wp--preset--color--signal-deep);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8125rem;
	margin-right: 0.5rem;
}

.lib-help-size .lib-row:nth-child(1) .lib-row__title::before {
	content: "A";
}

.lib-help-size .lib-row:nth-child(2) .lib-row__title::before {
	color: var(--wp--preset--color--volt);
	content: "B";
}

.lib-zones__table th[scope="row"] {
	text-align: left;
}

/* 13.5 Contact ---------------------------------------------------------------- */

.lib-contact {
	display: grid;
	gap: 3rem 4rem;
}

@media (min-width: 1000px) {
	.lib-contact {
		align-items: start;
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	}

	.lib-contact__card {
		position: sticky;
		top: 6rem;
	}
}

.lib-contact__words {
	max-width: 40rem;
}

.lib-contact__words h2 {
	font-size: clamp(1.6rem, 2.6vw, 2.1rem);
	margin: 1.75rem 0 0.6rem !important;
}

.lib-contact__words p {
	margin: 0 0 1rem !important;
}

.lib-contact__form {
	border-top: 2px solid var(--wp--preset--color--ink);
	margin-top: 2.5rem;
	max-width: 40rem;
	padding-top: 1.5rem;
	scroll-margin-top: 6rem;
}

.lib-contact__title {
	font-size: clamp(2rem, 3.4vw, 2.8rem);
	margin: 0 0 1.25rem !important;
}

.lib-contact-form {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1rem;
}

.lib-contact-form .lib-form-row {
	flex: 1 1 100%;
}

.lib-contact-form .lib-form-row--half {
	flex: 1 1 14rem;
}

.lib-form-row__hint {
	color: var(--wp--preset--color--ash);
	font-weight: 400;
}

.lib-form-notice.is-ok {
	border-color: var(--wp--preset--color--volt);
}

.lib-contact__card {
	background: var(--wp--preset--color--bone);
	border: var(--lib-hair-light);
	padding: clamp(1.5rem, 3vw, 2rem);
}

.lib-contact__card > .lib-meta {
	color: var(--wp--preset--color--ash);
	margin: 1.5rem 0 0.4rem !important;
}

.lib-contact__card > .lib-meta:first-child {
	margin-top: 0 !important;
}

.lib-contact__email {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.35rem, 2.4vw, 1.75rem);
	margin: 0 !important;
	overflow-wrap: anywhere;
	text-transform: uppercase;
}

.lib-contact__email a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.lib-contact__email a:hover {
	color: var(--wp--preset--color--signal-deep);
}

.lib-contact__social {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.25rem;
	list-style: none;
	margin: 0 !important;
	padding: 0;
}

.lib-contact__social a {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}

.lib-contact__reply {
	margin: 0 !important;
}

/* 13.6 404 --------------------------------------------------------------------- */

.lib-head__search {
	display: flex;
	gap: 0.6rem;
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
	max-width: 40rem;
}

.lib-404__designs {
	margin-top: clamp(2.5rem, 5vw, 4rem);
}

.lib-404 .lib-actions {
	margin-top: 2rem;
}

@media (max-width: 499px) {
	.lib-head__search {
		flex-direction: column;
	}
}

/* 13.7 Long text sits on the page edge, not centred by WordPress's constrained layout */

.entry-content > .lib-longpage {
	margin-left: 0 !important;
	max-width: none !important;
}

:is(.lib-longpage__body, .lib-contact__words) .is-layout-constrained > *,
.lib-contact__words.is-layout-constrained > * {
	margin-left: 0 !important;
	max-width: none;
}

.lib-contact__card .lib-row {
	gap: 0.25rem;
	grid-template-columns: minmax(0, 1fr);
}

:is(.lib-longpage__body, .lib-contact__words) .has-global-padding {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* -------------------------------------------------------------------------
 * 14. Design stories (inc/stories.php) — the product page's story section
 * ---------------------------------------------------------------------- */

.lib-s.lib-design-story {
	border: 0;
	margin-top: clamp(3rem, 6vw, 5rem);
	max-width: none;
}

.lib-design-story__grid,
.lib-design-story__text {
	display: grid;
	gap: 1.5rem 4rem;
}

.lib-design-story__title {
	font-size: clamp(3rem, 7vw, 6.5rem);
	line-height: 0.9;
	margin: 0 !important;
}

.lib-design-story__body {
	color: #c5c5bf;
	font-size: 1.125rem;
	max-width: 36rem;
}

.lib-design-story__body p {
	margin: 0 !important;
}

.lib-design-story__body p + p {
	margin-top: 1.1rem !important;
}

.lib-design-story__lead {
	color: var(--wp--preset--color--bone);
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(1.4rem, 2.2vw, 1.75rem);
	font-style: italic;
	line-height: 1.25;
}

.lib-design-story__body b {
	color: var(--wp--preset--color--bone);
	font-weight: 700;
}

.lib-design-story__close {
	border-top: var(--lib-hair-dark);
	color: var(--wp--preset--color--signal);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.6rem, 2.8vw, 2.4rem);
	line-height: 1;
	margin: 0.5rem 0 0 !important;
	max-width: 36rem;
	padding-top: 1.25rem;
	text-transform: uppercase;
}

.lib-design-story__image {
	margin: 0;
}

.lib-design-story__image img {
	display: block;
	height: auto;
	width: 100%;
}

@media (min-width: 900px) {
	/*
	 * The text: title in the left column, story in the right — the same with
	 * or without an image, since the image now sits above it.
	 */
	.lib-design-story .lib-design-story__text {
		align-items: start;
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	}

	.lib-design-story .lib-design-story__title {
		grid-row: span 2;
	}
}

/*
 * The campaign image runs the full width of the section, at its own shape —
 * a wide five-panel strip or a portrait poster alike — with the text under it.
 */
.lib-design-story.has-image .lib-design-story__grid {
	gap: clamp(2rem, 4vw, 3.5rem);
	grid-template-columns: minmax(0, 1fr);
}

.lib-design-story.has-image .lib-design-story__image img {
	height: auto;
	/* A tall portrait poster is kept to the screen's height, centred. */
	max-height: 90vh;
	object-fit: contain;
	width: 100%;
}

/* -------------------------------------------------------------------------
 * 15. Drop stories (inc/drop-stories.php)
 * ---------------------------------------------------------------------- */

.lib-s.lib-drop-story {
	border-top: 4px solid var(--lib-accent, var(--wp--preset--color--signal));
	margin-top: clamp(3rem, 6vw, 5rem);
	scroll-margin-top: 4rem;
}

.lib-drop-story__grid {
	display: grid;
	gap: 1.5rem 4rem;
}

@media (min-width: 900px) {
	.lib-drop-story__grid {
		align-items: start;
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	}

	.lib-drop-story__grid--end .lib-drop-story__body {
		grid-column: 2;
		grid-row: 1;
	}

	.lib-drop-story__grid--end .lib-drop-story__close {
		grid-column: 1;
		grid-row: 1;
	}
}

.lib-drop-story__title {
	font-size: clamp(2.8rem, 6.5vw, 6rem);
	line-height: 0.9;
	margin: 0 !important;
}

.lib-drop-story__body {
	color: #c5c5bf;
	font-size: 1.125rem;
	max-width: 36rem;
}

.lib-drop-story__body p {
	margin: 0 !important;
}

.lib-drop-story__body p + p {
	margin-top: 1.1rem !important;
}

.lib-drop-story__body p:first-child {
	color: var(--wp--preset--color--bone);
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(1.4rem, 2.2vw, 1.75rem);
	font-style: italic;
	line-height: 1.25;
}

.lib-drop-story__grid--end .lib-drop-story__body p:first-child {
	color: #c5c5bf;
	font-family: inherit;
	font-size: inherit;
	font-style: normal;
	line-height: inherit;
}

.lib-drop-story__body b {
	color: var(--wp--preset--color--bone);
}

/* The designs the story names, as a ruled list of statements. */
.lib-drop-designs {
	border-bottom: var(--lib-hair-dark);
	counter-reset: lib-design;
	list-style: none;
	margin: clamp(2.5rem, 5vw, 4rem) 0 !important;
	padding: 0;
}

.lib-drop-designs__item {
	border-top: var(--lib-hair-dark);
}

.lib-drop-designs__item > a {
	align-items: baseline;
	color: var(--wp--preset--color--bone);
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 2rem;
	justify-content: space-between;
	padding: 1.1rem 0;
	text-decoration: none;
}

.lib-drop-designs__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.9rem, 4.4vw, 3.6rem);
	line-height: 0.95;
	text-transform: uppercase;
}

.lib-drop-designs__item > a:hover .lib-drop-designs__title {
	color: var(--wp--preset--color--signal);
}

.lib-drop-designs__state {
	color: var(--wp--preset--color--signal);
	white-space: nowrap;
}

.lib-drop-story__close {
	color: var(--wp--preset--color--signal);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2rem, 4vw, 3.4rem);
	line-height: 0.95;
	margin: 0 !important;
	text-transform: uppercase;
}

/* Drops page: the story's headline above the one-line summary. */
.lib-drop-chapter__headline {
	display: block;
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(1.25rem, 2vw, 1.6rem);
	font-style: italic;
	line-height: 1.2;
	margin-bottom: 0.5rem;
}

.lib-drop-chapter__foot {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 1.75rem;
}

.lib-drop-chapter__story {
	color: inherit;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.lib-drop-chapter__story:hover {
	color: var(--wp--preset--color--signal-deep);
}

.lib-s--dark .lib-drop-chapter__story:hover {
	color: var(--wp--preset--color--signal);
}

/* The story runs into the footer; the drop page's bottom padding would leave a strip. */
main.lib-shop--drop:has(.lib-drop-story) {
	padding-bottom: 0 !important;
}

/* -------------------------------------------------------------------------
 * 16. Homepage hero (patterns/story-opening.php)
 *
 * The campaign photograph runs to the right edge beside the statement; pins
 * on it open the designs worn; a ticker of the store's promises closes it.
 * ---------------------------------------------------------------------- */

.lib-hero {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--bone);
}

.lib-hero__body {
	display: grid;
}

.lib-hero__content {
	display: flex;
	flex-direction: column;
	gap: 1.4rem;
	padding: clamp(2rem, 5vw, 3rem) var(--lib-pad) clamp(2.5rem, 5vw, 3.5rem);
}

.lib-hero__eyebrow {
	align-items: center;
	color: var(--wp--preset--color--concrete);
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0.9rem;
	margin: 0 !important;
}

.lib-hero__eyebrow a {
	color: var(--wp--preset--color--bone);
	text-decoration: none;
}

.lib-hero__eyebrow a:hover {
	color: var(--wp--preset--color--signal);
}

.lib-hero__status {
	background: var(--wp--preset--color--signal);
	color: var(--wp--preset--color--ink);
	padding: 0.15rem 0.5rem;
}

.lib-hero__title {
	color: var(--wp--preset--color--bone);
	font-size: clamp(3.2rem, 15vw, 7.4rem);
	letter-spacing: -0.02em;
	line-height: 0.88;
	margin: 0 !important;
}

.lib-hero__title span {
	color: var(--wp--preset--color--signal);
}

.lib-hero__text {
	color: #c5c5bf;
	font-size: 1.125rem;
	margin: 0 !important;
	max-width: 27rem;
}

.lib-hero__actions {
	margin-top: 0.4rem;
}

.lib-hero__story {
	align-self: flex-start;
	color: var(--wp--preset--color--bone);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-underline-offset: 0.3em;
}

.lib-hero__story:hover {
	color: var(--wp--preset--color--signal);
}

/* Media: a square frame so the pins stay on the shirts at every size. */
.lib-hero__media {
	margin: 0;
	order: -1;
	overflow: hidden;
	position: relative;
}

.lib-hero__frame {
	aspect-ratio: 1;
	position: relative;
	width: 100%;
}

.lib-hero__frame img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}


@media (min-width: 900px) {
	.lib-hero__body {
		align-items: center;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.lib-hero__content {
		padding-right: clamp(1.5rem, 4vw, 4rem);
	}

	.lib-hero__media {
		order: 0;
	}

	/*
	 * Sized from the column, so "Than explain." — the longest line, about
	 * 5.2 times the font size — fills it on one line at every width.
	 */
	.lib-hero__title {
		font-size: min(7rem, calc((50vw - var(--lib-pad) - clamp(1.5rem, 4vw, 4rem)) / 5.3));
	}
}

/* Ticker */
.lib-hero__ticker {
	border-top: var(--lib-hair-dark);
	overflow: hidden;
	padding-block: 0.9rem;
}

.lib-hero__track {
	display: flex;
	width: max-content;
}

.lib-hero__run {
	color: var(--wp--preset--color--bone);
	display: flex;
	flex-shrink: 0;
	gap: 1.75rem;
	margin: 0 !important;
	padding-right: 1.75rem;
	white-space: nowrap;
}

.lib-hero__tick-dot {
	color: var(--wp--preset--color--signal);
}

/* The extra passes are read once, not four times; they still sit in the row. */
.lib-hero__repeat {
	display: contents;
}

@media (prefers-reduced-motion: no-preference) {
	.lib-hero__track {
		/* Four passes per run, so about 30px a second. */
		animation: lib-ticker 120s linear infinite;
	}

	.lib-hero__ticker:hover .lib-hero__track {
		animation-play-state: paused;
	}
}

@keyframes lib-ticker {
	to {
		transform: translateX(-50%);
	}
}

/* -------------------------------------------------------------------------
 * 18. Drops — room after the designs and after the story
 * ---------------------------------------------------------------------- */

.lib-drop-chapter .lib-statements__grid {
	margin-bottom: clamp(1rem, 2vw, 1.5rem);
}

.lib-drop-chapter__foot {
	margin-top: clamp(2.5rem, 5vw, 4rem) !important;
}

.lib-s.lib-drop-chapter {
	padding-bottom: clamp(4.5rem, 9vw, 7.5rem);
}

/* A drop's own page: space between its designs and its story, and under it. */
.lib-s.lib-drop-story {
	margin-top: clamp(4.5rem, 9vw, 7.5rem);
	padding-bottom: clamp(4.5rem, 9vw, 7.5rem);
}

/* -------------------------------------------------------------------------
 * 19. One measure for every page head
 *
 * Header → breadcrumb line, and breadcrumb line → title, are the same on
 * every page: information and help pages, the shop and its drops, search,
 * the story page, the Personality page, the bag, checkout and product pages.
 * ---------------------------------------------------------------------- */

:root {
	--lib-head-top: clamp(1.5rem, 3vw, 2rem);
	--lib-head-gap: clamp(1.5rem, 3vw, 2.25rem);
}

.lib-head,
.lib-archive-band.lib-head,
.lib-s.lib-opening--page,
.lib-pg-hero {
	padding-top: var(--lib-head-top) !important;
}

:is(.lib-head, .lib-archive-band, .lib-pg-hero) > .lib-head__meta,
.lib-opening--page .lib-opening__meta,
.lib-pdp__meta {
	margin-bottom: var(--lib-head-gap) !important;
}

.lib-pg-hero > .lib-head__meta {
	color: var(--lib-dim);
}

/* Product pages: the breadcrumb bar sits the same distance under the header. */
.single-product #lib-content {
	padding-top: var(--lib-head-top) !important;
}

/* -------------------------------------------------------------------------
 * 20. One gap above buttons
 *
 * A button, or a row of them, that follows text sits the same distance under
 * it on every page: 32px on a desktop, 28px on a phone. Buttons after a grid
 * of products keep their larger gap, set where those grids are styled.
 * ---------------------------------------------------------------------- */

:root {
	--lib-btn-gap: clamp(1.75rem, 3vw, 2rem);
}

:where(main) :where(p, .lib-note, .lib-rows, dl, table, h2, h3, h4, .lib-campaign-chapter__story) + :is(.lib-actions, .wp-block-buttons) {
	margin-top: var(--lib-btn-gap) !important;
}

/* Personality: its column already puts 0.6rem between children. */
.lib-pg-edition__body > .lib-pg-edition__colours + .lib-btn {
	margin-top: calc(var(--lib-btn-gap) - 0.6rem) !important;
}

/* An empty state's column already puts 1rem between children. */
.lib-empty-state > .lib-actions {
	margin-top: calc(var(--lib-btn-gap) - 1rem) !important;
}

/* The colour picker's own bottom margin would add to the gap. */
.lib-pg-edition__colours:has(+ .lib-btn) {
	margin-bottom: 0 !important;
}

/* Flex columns that already space their children: top up to the same gap. */
.lib-hero__content > .lib-hero__actions {
	margin-top: calc(var(--lib-btn-gap) - 1.4rem) !important;
}

/* Contact form: the last field keeps its margin; the button tops it up. */
.lib-contact-form > .lib-btn {
	margin-top: calc(var(--lib-btn-gap) - 1.1rem);
}

/* -------------------------------------------------------------------------
 * 21. What the tee is made of, and how to wash it
 * ---------------------------------------------------------------------- */

.lib-spec {
	border-top: var(--lib-hair-light);
	display: grid;
	gap: 1.75rem clamp(2rem, 4vw, 4rem);
	grid-column: 1 / -1;
	padding-top: clamp(1.5rem, 3vw, 2.25rem);
}

@media (min-width: 700px) {
	.lib-spec {
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	}
}

.lib-spec__list {
	display: grid;
	gap: 0.6rem;
	list-style: none;
	margin: 0 !important;
	padding: 0;
}

.lib-spec__list li {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: 0.75rem minmax(0, 1fr);
	line-height: 1.5;
	max-width: 34rem;
}

/* An en dash instead of a bullet, as the care label is written. */
.lib-spec__list li::before {
	color: var(--wp--preset--color--signal-deep);
	content: "–";
}

/* A design whose story isn't written yet: banner and title, nothing to balance. */
.lib-design-story__text.is-quiet {
	grid-template-columns: minmax(0, 1fr) !important;
}