/* =========================================================================
   myGoods — design system
   ========================================================================= */

@font-face {
	font-family: 'Anton';
	src: url('../fonts/anton-400.woff2') format('woff2');
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: 'InterVar';
	src: url('../fonts/inter-var.woff2') format('woff2');
	font-weight: 100 900;
	font-display: swap;
}

:root {
	--ink: #0b0b0c;
	--ink-soft: #17171a;
	--paper: #f7f6f1;
	--paper-warm: #efece2;
	--acid: #d8ff3d;
	--heat: #ff4a26;
	--line: rgba(11, 11, 12, 0.12);
	--line-strong: rgba(11, 11, 12, 0.28);
	--muted: #6b6b70;

	--font-display: 'Anton', 'Arial Narrow', 'Haettenschweiler', Impact, sans-serif;
	/* The wordmark alone; body copy and headings stay on the display face. */
	--font-logo: 'RubikSprayPaint', 'Anton', Impact, sans-serif;
	--font-body: 'InterVar', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

	--wrap: 1320px;
	--gutter: clamp(1rem, 4vw, 3rem);
	--radius: 4px;

	--step--1: clamp(0.78rem, 0.74rem + 0.2vw, 0.88rem);
	--step-0: clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem);
	--step-1: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
	--step-2: clamp(1.5rem, 1.25rem + 1.2vw, 2.2rem);
	--step-3: clamp(2.1rem, 1.5rem + 3vw, 3.6rem);
	--step-4: clamp(3rem, 1.6rem + 7vw, 8rem);
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: var(--step-0);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

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

a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

h1,
h2,
h3,
h4 {
	font-family: var(--font-display);
	font-weight: 400;
	line-height: 0.92;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	margin: 0 0 0.4em;
}

h1 { font-size: var(--step-3); }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); }

p { margin: 0 0 1em; }

.wrap {
	width: min(100% - var(--gutter) * 2, var(--wrap));
	margin-inline: auto;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.skip-link:focus {
	position: fixed;
	z-index: 999;
	top: 0.5rem;
	left: 0.5rem;
	background: var(--ink);
	color: var(--acid);
	padding: 0.75rem 1rem;
	clip: auto;
	width: auto;
	height: auto;
}

/* ---------- Buttons ------------------------------------------------------ */

.btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: var(--step--1);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.95rem 1.6rem;
	border: 1.5px solid var(--ink);
	border-radius: 999px;
	background: var(--ink);
	color: var(--paper);
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
	line-height: 1;
}

.btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
	background: var(--acid);
	color: var(--ink);
	transform: translateY(-2px);
}

.btn--ghost {
	background: transparent;
	color: var(--ink);
}

.btn--acid,
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
	background: var(--acid);
	color: var(--ink);
	border-color: var(--ink);
}

.btn--acid:hover,
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce input.button.alt:hover {
	background: var(--ink);
	color: var(--acid);
}

.btn--on-dark {
	background: var(--acid);
	color: var(--ink);
	border-color: var(--acid);
}

.btn--on-dark:hover {
	background: transparent;
	color: var(--acid);
}

/* ---------- Ticker ------------------------------------------------------- */

.ticker {
	background: var(--ink);
	color: var(--acid);
	overflow: hidden;
	border-bottom: 1px solid var(--ink);
	padding: 0.55rem 0;
}

.ticker__track {
	display: flex;
	width: max-content;
	animation: ticker 38s linear infinite;
}

.ticker__group {
	display: flex;
	align-items: center;
	gap: 2.5rem;
	padding-right: 2.5rem;
	font-family: var(--font-display);
	font-size: 0.82rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	white-space: nowrap;
}

.ticker__group span::after {
	content: '✦';
	margin-left: 2.5rem;
	color: var(--paper);
}

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

@media (prefers-reduced-motion: reduce) {
	.ticker__track { animation: none; }
}

/* ---------- Header ------------------------------------------------------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 90;
	background: var(--paper);
	border-bottom: 1px solid var(--line);
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 3vw, 2.5rem);
	min-height: 74px;
}

.brand {
	font-family: var(--font-logo);
	font-size: 1.6rem;
	letter-spacing: 0;
	text-transform: uppercase;
	text-decoration: none;
	display: inline-flex;
	align-items: baseline;
	gap: 0.1em;
}

.brand em {
	font-style: normal;
	color: var(--heat);
}

.nav {
	margin-left: auto;
}

.nav ul {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2.2vw, 2rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav a {
	font-size: var(--step--1);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 0.35rem 0;
	border-bottom: 2px solid transparent;
}

.nav a:hover,
.nav .current-menu-item > a {
	border-bottom-color: var(--heat);
}

.header-tools {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-left: auto;
}

.nav + .header-tools { margin-left: 0; }

.lang-switch {
	font-size: var(--step--1);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.lang-switch ul {
	display: flex;
	gap: 0.4rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.lang-switch a {
	text-decoration: none;
	opacity: 0.45;
	padding: 0.2rem 0.35rem;
}

.lang-switch .trp-ls-shortcode-current-language a,
.lang-switch a:hover {
	opacity: 1;
}

.cart-link {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-size: var(--step--1);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	border: 1.5px solid var(--ink);
	border-radius: 999px;
	padding: 0.5rem 0.95rem;
}

.cart-link:hover {
	background: var(--ink);
	color: var(--paper);
}

.cart-link__count {
	background: var(--heat);
	color: #fff;
	border-radius: 999px;
	min-width: 1.35em;
	height: 1.35em;
	display: inline-grid;
	place-items: center;
	font-size: 0.72rem;
}

.nav-toggle {
	display: none;
	background: none;
	border: 1.5px solid var(--ink);
	border-radius: 999px;
	padding: 0.5rem 0.9rem;
	font: inherit;
	font-size: var(--step--1);
	font-weight: 700;
	text-transform: uppercase;
	cursor: pointer;
}

@media (max-width: 900px) {
	.nav-toggle { display: block; order: 3; }
	.nav {
		order: 5;
		flex-basis: 100%;
		margin-left: 0;
		display: none;
		padding-bottom: 1rem;
	}
	.nav.is-open { display: block; }
	.nav ul {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.75rem;
	}
	.site-header__inner { flex-wrap: wrap; }
	.header-tools { margin-left: auto; }
}

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

.hero {
	position: relative;
	background: var(--ink);
	color: var(--paper);
	padding: clamp(3.5rem, 9vw, 7.5rem) 0 clamp(3rem, 7vw, 6rem);
	overflow: hidden;
}

.hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
	background-size: 4px 4px;
	pointer-events: none;
}

.hero__inner {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

.hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	font-size: var(--step--1);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--acid);
	margin-bottom: 1.4rem;
}

.hero__eyebrow::before {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--acid);
	animation: pulse 1.8s ease-in-out infinite;
}

@keyframes pulse {
	50% { opacity: 0.25; transform: scale(0.7); }
}

.hero h1 {
	font-size: var(--step-4);
	line-height: 0.84;
	margin-bottom: 1.2rem;
}

.hero h1 .outline {
	-webkit-text-stroke: 2px var(--paper);
	color: transparent;
	display: block;
}

.hero h1 .acid { color: var(--acid); display: block; }

.hero__lede {
	font-size: var(--step-1);
	max-width: 46ch;
	color: rgba(247, 246, 241, 0.75);
	margin-bottom: 2rem;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
	margin-bottom: 2.5rem;
}

.hero__stats {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1.5rem, 4vw, 3rem);
	border-top: 1px solid rgba(247, 246, 241, 0.18);
	padding-top: 1.5rem;
}

.hero__stat b {
	display: block;
	font-family: var(--font-display);
	font-size: var(--step-2);
	color: var(--acid);
	line-height: 1;
}

.hero__stat span {
	font-size: var(--step--1);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(247, 246, 241, 0.6);
}

.hero__gallery {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	position: relative;
}

.hero__card {
	border-radius: var(--radius);
	overflow: hidden;
	/* Pale card, so a dark garment still has an edge to sit against. */
	background: var(--paper);
	aspect-ratio: 4 / 5;
	position: relative;
	z-index: 1;
}

.hero__card--a { transform: rotate(-2deg); }
.hero__card--b { transform: rotate(2deg) translateY(1.5rem); }

/* The third shot peeks out from behind the pair: out of the grid flow, dimmed
   and set back so it reads as depth rather than a third column. */
.hero__card--back {
	position: absolute;
	z-index: 0;
	top: 0;
	left: 50%;
	width: 54%;
	/* Shifted by its own height, so the peek keeps its proportion at any width. */
	transform: translate(-50%, -32%) rotate(4deg);
	filter: brightness(0.62) saturate(0.85);
}

.hero__card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 860px) {
	.hero__inner { grid-template-columns: 1fr; }
	.hero__gallery { max-width: 26rem; }
	.hero__card--back { width: 58%; transform: translate(-50%, -26%) rotate(4deg); }
}

/* ---------- Sections ----------------------------------------------------- */

.section {
	padding: clamp(3rem, 8vw, 6rem) 0;
}

.section--paper { background: var(--paper-warm); }

.section--dark {
	background: var(--ink);
	color: var(--paper);
}

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

.section__head h2 {
	font-size: var(--step-3);
	margin: 0;
}

.section__kicker {
	font-size: var(--step--1);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--heat);
	margin-bottom: 0.6rem;
	display: block;
}

.section__link {
	font-size: var(--step--1);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* ---------- Product grid ------------------------------------------------- */

/* WooCommerce's float clearfix pseudo-elements become real cells in a grid,
   which pushes the first product out of the first slot. */
ul.products::before,
ul.products::after {
	display: none !important;
}

ul.products {
	display: grid !important;
	/* Explicit steps: auto-fill either crowds the desktop or starves the phone. */
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1rem, 2.5vw, 2rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

ul.products li.product {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	position: relative;
	text-align: left;
}

ul.products li.product a img {
	margin: 0 0 1rem;
	border-radius: var(--radius);
	background: var(--paper-warm);
	aspect-ratio: 4 / 5;
	object-fit: cover;
	transition: transform 0.4s ease;
}

ul.products li.product:hover a img { transform: scale(1.03); }

ul.products li.product .woocommerce-loop-product__link {
	display: block;
	text-decoration: none;
	overflow: hidden;
	border-radius: var(--radius);
}

ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--font-display);
	font-size: var(--step-1) !important;
	text-transform: uppercase;
	line-height: 1;
	padding: 0 !important;
	margin: 0 0 0.35rem !important;
}

ul.products li.product .price {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: var(--step-0);
	color: var(--ink) !important;
	display: block;
	margin-bottom: 0.75rem;
}

ul.products li.product .price del { opacity: 0.4; font-weight: 400; }
ul.products li.product .price ins { text-decoration: none; color: var(--heat); }

ul.products li.product .button {
	font-size: 0.72rem;
	padding: 0.7rem 1.1rem;
}

.woocommerce span.onsale,
ul.products li.product span.onsale {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 3;
	background: var(--heat);
	color: #fff;
	font-family: var(--font-body);
	font-weight: 800;
	font-size: 0.68rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border-radius: 999px;
	padding: 0.35rem 0.75rem;
	min-height: 0;
	min-width: 0;
	line-height: 1.2;
	margin: 0;
}

/* ---------- Category cards ---------------------------------------------- */

.cat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: clamp(1rem, 2.5vw, 1.75rem);
}

.cat-card {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(260px, 34vw, 400px);
	padding: 1.75rem;
	border-radius: var(--radius);
	overflow: hidden;
	text-decoration: none;
	background: var(--ink-soft);
	color: var(--paper);
	isolation: isolate;
}

.cat-card img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
	transition: transform 0.5s ease;
}

.cat-card::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to top, rgba(11, 11, 12, 0.85) 8%, rgba(11, 11, 12, 0.1) 60%);
}

.cat-card:hover img { transform: scale(1.05); }

.cat-card h3 {
	font-size: var(--step-2);
	margin: 0;
}

.cat-card span {
	display: block;
	font-family: var(--font-body);
	font-size: var(--step--1);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--acid);
	margin-top: 0.5rem;
}

/* ---------- Steps -------------------------------------------------------- */

.steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: clamp(1.5rem, 4vw, 3rem);
	counter-reset: step;
}

.step {
	border-top: 2px solid var(--acid);
	padding-top: 1.25rem;
}

.step::before {
	counter-increment: step;
	content: '0' counter(step);
	font-family: var(--font-display);
	font-size: var(--step-2);
	color: var(--acid);
	display: block;
	line-height: 1;
	margin-bottom: 0.75rem;
}

.step h3 { margin-bottom: 0.5rem; }

.step p {
	color: rgba(247, 246, 241, 0.7);
	margin: 0;
}

/* ---------- Newsletter --------------------------------------------------- */

.drop-alert {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
	background: var(--acid);
	color: var(--ink);
	border-radius: var(--radius);
	padding: clamp(2rem, 5vw, 3.5rem);
}

.drop-alert h2 { margin-bottom: 0.5rem; }
.drop-alert p { margin: 0; max-width: 40ch; }

.drop-alert form {
	display: flex;
	gap: 0.6rem;
	flex-wrap: wrap;
}

.drop-alert input[type='email'] {
	flex: 1 1 14rem;
	border: 1.5px solid var(--ink);
	border-radius: 999px;
	padding: 0.9rem 1.3rem;
	font: inherit;
	background: transparent;
}

.drop-alert input[type='email']::placeholder { color: rgba(11, 11, 12, 0.5); }

@media (max-width: 780px) {
	.drop-alert { grid-template-columns: 1fr; }
}

/* ---------- Footer ------------------------------------------------------- */

.site-footer {
	background: var(--ink);
	color: rgba(247, 246, 241, 0.72);
	padding: clamp(3rem, 7vw, 5rem) 0 2rem;
}

.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--acid); }

.footer-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(140px, 1fr));
	gap: clamp(1.5rem, 4vw, 3rem);
	padding-bottom: 2.5rem;
	border-bottom: 1px solid rgba(247, 246, 241, 0.15);
}

.footer-brand .brand {
	color: var(--paper);
	font-size: 2rem;
	margin-bottom: 0.75rem;
}

.footer-brand p { max-width: 34ch; }

.site-footer h4 {
	color: var(--paper);
	font-size: 0.95rem;
	letter-spacing: 0.1em;
	margin-bottom: 1rem;
}

.site-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.55rem;
	font-size: var(--step--1);
}

.footer-bottom {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: space-between;
	padding-top: 1.5rem;
	font-size: var(--step--1);
}

/* ---------- WooCommerce pages ------------------------------------------- */

.page-hero {
	background: var(--ink);
	color: var(--paper);
	padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(2rem, 5vw, 3.5rem);
}

.page-hero h1 {
	font-size: var(--step-3);
	margin: 0;
}

.page-hero .woocommerce-breadcrumb,
.page-hero .breadcrumb {
	font-size: var(--step--1);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(247, 246, 241, 0.55);
	margin-bottom: 0.75rem;
}

.page-hero a { color: var(--acid); }

.site-main {
	padding: clamp(2.5rem, 6vw, 4.5rem) 0;
}

.woocommerce-result-count,
.woocommerce-ordering {
	font-size: var(--step--1);
}

.woocommerce-ordering select,
.woocommerce select,
.woocommerce input[type='text'],
.woocommerce input[type='email'],
.woocommerce input[type='tel'],
.woocommerce input[type='password'],
.woocommerce textarea {
	border: 1.5px solid var(--line-strong);
	border-radius: var(--radius);
	padding: 0.7rem 0.9rem;
	font: inherit;
	background: #fff;
	max-width: 100%;
}

.woocommerce div.product .product_title {
	font-size: var(--step-3);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--ink);
	font-family: var(--font-body);
	font-weight: 700;
	font-size: var(--step-1);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent;
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	padding: 0;
	margin: 0 1.5rem 0 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	border-bottom-color: var(--heat);
	background: transparent;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
	border-bottom: 1px solid var(--line);
	padding: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	font-weight: 700;
	font-size: var(--step--1);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.75rem 0;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-top-color: var(--heat);
	background: var(--paper-warm);
	border-radius: var(--radius);
}

.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--heat);
}

.woocommerce table.shop_table {
	border-radius: var(--radius);
	border-color: var(--line);
}

.woocommerce .quantity input.qty {
	border: 1.5px solid var(--line-strong);
	border-radius: var(--radius);
	padding: 0.6rem 0.4rem;
}

.entry-content {
	max-width: 68ch;
}

.entry-content h2,
.entry-content h3 {
	margin-top: 1.6em;
}

/* ---------- Utilities ---------------------------------------------------- */

.marquee-band {
	background: var(--heat);
	color: #fff;
	padding: 0.9rem 0;
	overflow: hidden;
	font-family: var(--font-display);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: clamp(1.1rem, 3vw, 1.8rem);
}

.marquee-band__track {
	display: flex;
	width: max-content;
	gap: 3rem;
	animation: ticker 30s linear infinite;
}

.marquee-band__track span { white-space: nowrap; }

/* ---------- Size guide modal -------------------------------------------- */

.size-guide-open {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	background: none;
	border: 0;
	border-bottom: 1.5px solid var(--ink);
	padding: 0 0 2px;
	margin: 0 0 1rem;
	font: inherit;
	font-size: var(--step--1);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
}

.size-guide-open::before { content: '↔'; }
.size-guide-open:hover { color: var(--heat); border-bottom-color: var(--heat); }

.size-guide[hidden] { display: none; }

.size-guide {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: grid;
	place-items: center;
	padding: var(--gutter);
}

.size-guide__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(11, 11, 12, 0.65);
}

.size-guide__panel {
	position: relative;
	background: var(--paper);
	border-radius: var(--radius);
	padding: clamp(1.5rem, 4vw, 2.5rem);
	width: min(100%, 720px);
	max-height: 85vh;
	overflow-y: auto;
}

.size-guide__close {
	position: absolute;
	top: 0.75rem;
	right: 1rem;
	background: none;
	border: 0;
	font-size: 2rem;
	line-height: 1;
	cursor: pointer;
}

.size-guide__body table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1.5rem;
	font-size: var(--step--1);
}

.size-guide__body th,
.size-guide__body td {
	border-bottom: 1px solid var(--line);
	padding: 0.6rem 0.5rem;
	text-align: left;
}

.size-guide__body th {
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.72rem;
}

/* ---------- Sticky add to cart ------------------------------------------ */

.sticky-atc {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 95;
	background: var(--paper);
	border-top: 1px solid var(--line);
	padding: 0.7rem 0;
	transform: translateY(110%);
	transition: transform 0.25s ease;
	box-shadow: 0 -8px 24px rgba(11, 11, 12, 0.08);
}

.sticky-atc.is-visible {
	transform: translateY(0);
}

.sticky-atc__inner {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.sticky-atc__thumb {
	width: 48px;
	height: 60px;
	object-fit: cover;
	border-radius: 3px;
	flex: none;
}

.sticky-atc__meta {
	display: grid;
	line-height: 1.25;
	min-width: 0;
}

.sticky-atc__meta strong {
	font-family: var(--font-display);
	font-size: 1.05rem;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sticky-atc__meta span { font-size: var(--step--1); }

.sticky-atc__cta {
	margin-left: auto;
	white-space: nowrap;
}

@media (max-width: 560px) {
	.sticky-atc__thumb { display: none; }
	.sticky-atc__meta strong { font-size: 0.95rem; }
}

.currency-code {
	font-size: 0.7em;
	font-weight: 600;
	opacity: 0.55;
	letter-spacing: 0.06em;
}

/* ---------- Reassurance list -------------------------------------------- */

/* Origin badge: house, community, or a paid collaboration. */
.mg-origin {
	display: inline-block;
	margin: 0 0 0.6rem;
	padding: 0.2em 0.7em;
	border-radius: 999px;
	font-size: var(--step--1);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	background: rgba(17, 17, 20, 0.08);
}

.mg-origin--communaute { background: rgba(215, 251, 60, 0.35); }
.mg-origin--sponsorise { background: rgba(226, 58, 46, 0.16); }

.reassurance {
	list-style: none;
	margin: 1.5rem 0 0;
	padding: 1.25rem 0 0;
	border-top: 1px solid var(--line);
	display: grid;
	gap: 0.6rem;
	font-size: var(--step--1);
}

.reassurance li {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
}

.reassurance li::before {
	content: '✓';
	color: var(--heat);
	font-weight: 700;
	flex: none;
}

/* ---------- Variation swatches ------------------------------------------ */

.woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item) {
	border-radius: 3px;
	box-shadow: 0 0 0 1.5px var(--line-strong);
	min-width: 3rem;
	height: 2.75rem;
}

.woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item).selected,
.woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item):hover {
	box-shadow: 0 0 0 2px var(--ink);
}

.woo-variation-swatches .variable-items-wrapper .button-variable-item span {
	font-weight: 700;
	font-size: var(--step--1);
	letter-spacing: 0.04em;
}

/* ---------- Community creator ------------------------------------------- */

/* The creator page drops the narrow reading column so the garment can breathe. */
.entry-content:has(.creator) {
	max-width: none;
}

/* The garment leads: one centred column, controls underneath. Capped at 1.2x
   the 580px catalogue photo — past that the blank goes visibly soft. */
.creator {
	display: grid;
	grid-template-columns: 210px minmax(0, 1fr) 190px;
	grid-template-areas:
		'garments stage colors'
		'actions  actions actions';
	gap: clamp(1.25rem, 3vw, 2.5rem);
	align-items: start;
	justify-content: center;
}

.creator__side--garments { grid-area: garments; }
.creator__stage { grid-area: stage; justify-self: center; }
.creator__side--colors { grid-area: colors; }
.creator__actions { grid-area: actions; }

/* Both control columns stay level with the top of the garment. */
.creator__side {
	position: sticky;
	top: 100px;
}

.creator__actions {
	display: grid;
	justify-items: center;
	gap: 0.75rem;
	max-width: 420px;
	margin-inline: auto;
	width: 100%;
}

.creator__actions .creator__submit { width: 100%; }

.creator__preview {
	background: var(--paper-warm);
	border-radius: var(--radius);
	overflow: hidden;
	position: sticky;
	top: 100px;
}

.creator__canvas {
	width: 100%;
	height: auto;
	display: block;
}

.creator__label {
	display: block;
	font-family: var(--font-display);
	font-size: var(--step-2);
	text-transform: uppercase;
	margin-bottom: 0.5rem;
}

.creator__form input[type='text'] {
	width: 100%;
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 4vw, 2.4rem);
	text-transform: uppercase;
	padding: 0.6rem 0.9rem;
	border: 2px solid var(--ink);
	border-radius: var(--radius);
	background: #fff;
}

.creator__form input[type='text']:focus {
	outline: 3px solid var(--acid);
	outline-offset: 2px;
}

.creator__count {
	font-size: var(--step--1);
	color: var(--muted);
	margin: 0.4rem 0 1.5rem;
	text-align: right;
}

.creator__garments {
	border: 0;
	padding: 0;
	margin: 0 0 1.75rem;
	display: grid;
	gap: 0.6rem;
}

.creator__garments legend {
	font-size: var(--step--1);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: 0.6rem;
	padding: 0;
}

.creator__garments label {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	border: 1.5px solid var(--line-strong);
	border-radius: var(--radius);
	padding: 0.85rem 1rem;
	cursor: pointer;
	font-weight: 600;
}

.creator__garments label:has(input:checked) {
	border-color: var(--ink);
	background: var(--paper-warm);
}

.creator__submit {
	width: 100%;
}

.creator__status {
	margin: 1rem 0 0;
	font-size: var(--step--1);
	font-weight: 600;
	min-height: 1.4em;
}

.creator__status.is-error { color: var(--heat); }
.creator__status.is-ok { color: #1c7c3f; }



.community-badge {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	z-index: 3;
	background: var(--ink);
	color: var(--acid);
	font-size: 0.62rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: 999px;
	padding: 0.3rem 0.65rem;
}

/* ---------- Creator: direct-on-garment editing --------------------------- */

.creator__stage {
	width: min(620px, 100%);
}

.creator__shirt {
	position: relative;
	cursor: text;
}

.creator__photo {
	width: 100%;
	height: auto;
	display: block;
}

/* Positioned from JS to match the printable area of the current garment. The
   two lines stack: a headline and an optional smaller line under it. */
.creator__print {
	position: absolute;
	display: grid;
	align-content: center;
	justify-items: center;
	gap: 0.15em;
	pointer-events: none;
}

.creator__text--sub:empty::before {
	opacity: 0.3;
}

.creator__text--sub {
	pointer-events: auto;
}

.creator__print::after {
	content: '';
	position: absolute;
	inset: -6px;
	border: 1px dashed rgba(255, 255, 255, 0.45);
	border-radius: 2px;
	opacity: 0;
	transition: opacity 0.2s ease;
	pointer-events: none;
}

.creator__shirt:hover .creator__print::after,
.creator__text:focus ~ .creator__print::after,
.creator__print:focus-within::after {
	opacity: 1;
}

/* Same emoji face as the print: the browser would otherwise fall back to its
   own colour set and promise something the shirt cannot deliver. */
@font-face {
	font-family: 'NotoEmojiPrint';
	src: url('../fonts/notoemoji.woff2') format('woff2');
	font-display: swap;
}

.creator__text {
	pointer-events: auto;
	width: 100%;
	/* A grid item refuses to shrink below its longest word by default, so at a
	   big type size the field grew past the print area and the auto-fit loop
	   never saw an overflow to correct. */
	min-width: 0;
	max-width: 100%;
	font-family: var(--font-display);
	line-height: 1.08;
	text-transform: uppercase;
	text-align: center;
	outline: none;
	white-space: normal;
	/* A slogan may wrap between words, never inside one: a broken word on a
	   shirt reads as a printing mistake. */
	overflow-wrap: normal;
	word-break: keep-all;
	caret-color: currentColor;
}

.creator__text:empty::before {
	content: attr(data-placeholder);
	opacity: 0.45;
	/* Size comes from the print area via JS, not from the viewport: the
	   placeholder has to sit where the real slogan will be printed. */
}

/* While the product is being built, the garment stays visible under a veil —
   the wait belongs on the thing being made, not in a line of status text. */
.creator__loading {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background: rgba(10, 10, 12, 0.55);
	backdrop-filter: blur(2px);
	border-radius: var(--radius);
	z-index: 2;
}

.creator__loading[hidden] { display: none; }

.creator__spinner {
	width: 2.6rem;
	height: 2.6rem;
	border-radius: 50%;
	border: 3px solid rgba(247, 245, 240, 0.25);
	border-top-color: var(--acid);
	animation: mygoods-spin 0.8s linear infinite;
}

@keyframes mygoods-spin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.creator__spinner { animation-duration: 2.4s; }
}

/* The picker sits above everything: it is a choice, not a panel. */
/* Same footprint as the swatch boxes above it, so the column reads as one
   stack rather than three widths. */
.btn.creator__emojibtn {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: 1rem 0 0;
	background: #e23a2e;
	border-color: #e23a2e;
	color: #fff;
	text-align: center;
}

.btn.creator__emojibtn:hover,
.btn.creator__emojibtn:focus-visible {
	background: #c92f24;
	border-color: #c92f24;
	color: #fff;
}

.creator__emojimodal {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: grid;
	place-items: center;
	padding: 1rem;
	background: rgba(8, 8, 10, 0.72);
	backdrop-filter: blur(3px);
}

.creator__emojimodal[hidden] { display: none; }

.creator__emojibox {
	width: min(30rem, 100%);
	max-height: min(70vh, 40rem);
	display: flex;
	flex-direction: column;
	background: var(--ink-soft, #17171a);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	overflow: hidden;
}

.creator__emojihead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.9rem 1rem;
	border-bottom: 1px solid var(--line);
}

.creator__emojiclose {
	background: none;
	border: 0;
	color: inherit;
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	padding: 0 0.25rem;
}

/* Second step: the emoji is picked, the line is not. */
.creator__emojiask {
	display: grid;
	justify-items: center;
	gap: 0.9rem;
	padding: 1.6rem 1rem 1.8rem;
	text-align: center;
}

.creator__emojiask[hidden] { display: none; }

.creator__emojichosen { font-size: 3.4rem; line-height: 1; }

.creator__emojiask p { margin: 0; opacity: 0.75; }

.creator__emojiwhere {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
}

.creator__emojiback {
	background: none;
	border: 0;
	color: inherit;
	opacity: 0.6;
	cursor: pointer;
	font-size: var(--step--1);
}

.creator__emojiscroll {
	overflow-y: auto;
	padding: 0.5rem 1rem 1rem;
}

.creator__emojifamily {
	margin: 0.9rem 0 0.4rem;
	font-size: var(--step--1);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.6;
}

.creator__emojigrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(2.4rem, 1fr));
	gap: 0.25rem;
}

.creator__emoji {
	font-size: 1.5rem;
	line-height: 1;
	padding: 0.35rem;
	background: none;
	border: 0;
	border-radius: 0.4rem;
	cursor: pointer;
	transition: background 0.12s ease, transform 0.12s ease;
}

.creator__emoji:hover,
.creator__emoji:focus-visible {
	background: rgba(247, 245, 240, 0.12);
	transform: scale(1.15);
}

.creator__hint {
	text-align: center;
	font-size: var(--step--1);
	color: var(--muted);
	margin: 0.75rem 0 0;
}

.creator__garments {
	display: grid;
	gap: 0.6rem;
}

.creator__garments label span b {
	display: block;
	font-weight: 700;
}

.creator__garments label small {
	display: block;
	font-weight: 400;
	opacity: 0.55;
	font-size: 0.72rem;
	letter-spacing: 0.04em;
}

.creator__count {
	margin: 0;
	text-align: center;
}

.creator__colors legend b {
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
}

.creator__colors {
	width: 100%;
	box-sizing: border-box;
	margin: 0;
}

.creator__swatches {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.5rem;
	max-height: 60vh;
	overflow-y: auto;
	padding-right: 0.25rem;
}

.creator__colors legend {
	display: grid;
	gap: 0.15rem;
}

.creator__colors legend b {
	font-size: var(--step--1);
	opacity: 0.7;
}

.creator__swatch {
	width: 2.1rem;
	height: 2.1rem;
	border-radius: 50%;
	border: 0;
	padding: 0;
	cursor: pointer;
	background: var(--swatch);
	box-shadow: 0 0 0 1px var(--line-strong);
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}

/* The ink row sits under the garment colours; "auto" shows both inks split
   down the middle, since it picks one according to the blank. Same grid and
   same width as the garment palette above, so the two blocks line up. */
.creator__colors--ink { margin-top: 1rem; }

.creator__swatches--ink {
	max-height: none;
	overflow: visible;
}

.creator__swatch.is-muted {
	opacity: 0.22;
	cursor: not-allowed;
	box-shadow: 0 0 0 1px var(--line);
}

.creator__swatch--auto {
	background: linear-gradient(135deg, #f7f5f0 0 50%, #111114 50% 100%);
}

.creator__swatch:hover {
	transform: scale(1.1);
}

.creator__swatch.is-active {
	box-shadow: 0 0 0 2px var(--ink);
	transform: scale(1.1);
}

@media (max-width: 1040px) {
	.creator {
		grid-template-columns: 1fr;
		grid-template-areas: 'stage' 'garments' 'colors' 'actions';
		justify-items: center;
	}
	.creator__side { position: static; width: min(420px, 100%); }
	.creator__swatches { grid-template-columns: repeat(8, 1fr); max-height: none; }
	.creator__text:empty::before { font-size: 5vw; }
}

/* ---------- Pending community idea -------------------------------------- */

.pending-idea {
	background: var(--acid);
	color: var(--ink);
	border-radius: var(--radius);
	padding: 0.9rem 1.1rem;
	font-size: var(--step--1);
	font-weight: 600;
	margin: 0 0 1.25rem;
}

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

.hero-carousel {
	position: relative;
	background: var(--ink);
}

.hero-carousel__track {
	display: grid;
}

/* Slides stack so the tallest sets the height and nothing jumps on change. */
.hero-slide {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.45s ease;
}

.hero-slide.is-active {
	opacity: 1;
	visibility: visible;
}

.hero-carousel .hero {
	height: 100%;
}

.btn--outline-light {
	background: transparent;
	color: var(--paper);
	border-color: rgba(247, 246, 241, 0.4);
}

.btn--outline-light:hover {
	background: var(--paper);
	color: var(--ink);
	border-color: var(--paper);
}

.hero__head {
	text-align: center;
	margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.hero__head h2 {
	font-size: var(--step-3);
	color: var(--paper);
	margin: 0;
}

.hero-carousel__nav {
	position: absolute;
	left: 0;
	right: 0;
	bottom: clamp(0.75rem, 2vw, 1.5rem);
	z-index: 5;
	pointer-events: none;
}

.hero-carousel__nav-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
}

.hero-carousel__arrow,
.hero-carousel__dots button {
	pointer-events: auto;
	cursor: pointer;
	border: 0;
	background: none;
	font: inherit;
}

.hero-carousel__arrow {
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 50%;
	border: 1.5px solid rgba(247, 246, 241, 0.35);
	color: var(--paper);
	display: grid;
	place-items: center;
	transition: background 0.15s ease, color 0.15s ease;
}

.hero-carousel__arrow:hover {
	background: var(--acid);
	color: var(--ink);
	border-color: var(--acid);
}

.hero-carousel__dots {
	display: flex;
	gap: 0.5rem;
}

.hero-carousel__dots button {
	width: 2.2rem;
	height: 4px;
	border-radius: 999px;
	background: rgba(247, 246, 241, 0.3);
	padding: 0;
	transition: background 0.2s ease;
}

.hero-carousel__dots button.is-active {
	background: var(--acid);
}

/* ---- Slide 2: the creator on a dark ground ---------------------------- */

.hero--creator {
	/* 40% less headroom above the eyebrow than the other slides. */
	padding-top: clamp(2.1rem, 5.4vw, 4.5rem);
	padding-bottom: clamp(3.5rem, 8vw, 5rem);
}

.hero--creator .hero__head {
	margin-bottom: clamp(0.9rem, 2.4vw, 1.5rem);
}

.hero--creator .creator legend,
.hero--creator .creator__hint,
.hero--creator .creator__count,
.hero--creator .creator__garments label {
	color: var(--paper);
}

.hero--creator .creator__garments label {
	border-color: rgba(247, 246, 241, 0.28);
}

.hero--creator .creator__garments label:has(input:checked) {
	border-color: var(--acid);
	background: rgba(216, 255, 61, 0.08);
}

.hero--creator .creator__swatch {
	box-shadow: 0 0 0 1px rgba(247, 246, 241, 0.35);
}

.hero--creator .creator__swatch.is-active {
	box-shadow: 0 0 0 2px var(--acid);
}

.hero--creator .creator__stage { width: min(460px, 100%); }
.hero--creator .creator { grid-template-columns: 200px minmax(0, 1fr) 180px; }
.hero--creator .creator__side { position: static; }
.hero--creator .creator__swatches { max-height: 22rem; }

/* ---- Slide 3: the slogan wall ----------------------------------------- */

.hero--wall {
	position: relative;
	display: grid;
	place-items: center;
	padding: clamp(3rem, 8vw, 6rem) 0;
	overflow: hidden;
}

.wall {
	position: absolute;
	inset: 0;
	display: grid;
	align-content: center;
	gap: clamp(0.5rem, 2vw, 1.5rem);
}

.wall__row {
	overflow: hidden;
}

.wall__track {
	display: flex;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	width: max-content;
	font-family: var(--font-display);
	font-size: clamp(2.5rem, 7vw, 5.5rem);
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
}

.wall__row--ltr .wall__track { animation: ticker 42s linear infinite; }
.wall__row--rtl .wall__track { animation: ticker 52s linear infinite reverse; }

.wall__word--0 { color: rgba(247, 246, 241, 0.13); }
.wall__word--1 { color: rgba(216, 255, 61, 0.22); }
.wall__word--2 {
	color: transparent;
	-webkit-text-stroke: 1px rgba(247, 246, 241, 0.28);
}

.wall__message {
	position: relative;
	z-index: 2;
	text-align: center;
	max-width: 44rem;
}

.wall__message h2 {
	font-size: var(--step-4);
	/* The two lines used to touch; the sentence under them is gone, so the
	   heading owns that space and can take some. */
	line-height: 1.06;
	color: var(--paper);
	margin-bottom: 1.75rem;
}

.wall__message p {
	color: rgba(247, 246, 241, 0.75);
	font-size: var(--step-1);
	margin-bottom: 1.75rem;
}

.wall__message .hero__actions {
	justify-content: center;
	margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
	.wall__track { animation: none; }
	.hero-slide { transition: none; }
}

@media (max-width: 1040px) {
	.hero--creator .creator { grid-template-columns: 1fr; }
	.hero--creator .creator__stage { width: min(420px, 100%); }
}

/* ---------- Related products -------------------------------------------- */

.related.products,
.upsells.products {
	margin-top: clamp(3rem, 7vw, 5rem);
	clear: both;
	width: 100%;
}

.related.products > h2,
.upsells.products > h2 {
	font-size: var(--step-2);
	margin-bottom: 1.5rem;
}

/* ---------- Product grid steps ------------------------------------------ */

@media (min-width: 620px) {
	ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 960px) {
	ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Related and up-sells always sit in one row on a wide screen. */
.related.products ul.products,
.upsells.products ul.products {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 960px) {
	.related.products ul.products,
	.upsells.products ul.products {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ---------- Customer account -------------------------------------------- */

.account-link {
	font-size: var(--step--1);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

.account-link:hover { color: var(--heat); }

.account-intro {
	margin-bottom: 2rem;
}

.account-intro h2 { font-size: var(--step-2); margin-bottom: 0.35rem; }
.account-intro p { color: var(--muted); margin: 0; }

.woocommerce-account .woocommerce {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3rem);
}

.woocommerce-account .u-columns.col2-set {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: clamp(1.5rem, 4vw, 3rem);
}

.woocommerce-account .u-column1,
.woocommerce-account .u-column2 {
	width: auto !important;
	float: none !important;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: clamp(1.25rem, 3vw, 2rem);
	background: #fff;
}

.woocommerce-account .u-column1 h2,
.woocommerce-account .u-column2 h2 {
	font-size: var(--step-1);
	margin-bottom: 1rem;
}

.woocommerce form.login,
.woocommerce form.register {
	border: 0;
	padding: 0;
	margin: 0;
	border-radius: 0;
}

.woocommerce form .form-row label {
	display: block;
	font-size: var(--step--1);
	font-weight: 700;
	letter-spacing: 0.04em;
	margin-bottom: 0.35rem;
}

.woocommerce form .form-row input.input-text {
	width: 100%;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.woocommerce-account .woocommerce-MyAccount-navigation a {
	display: inline-block;
	border: 1.5px solid var(--line-strong);
	border-radius: 999px;
	padding: 0.5rem 1rem;
	font-size: var(--step--1);
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation a:hover {
	background: var(--ink);
	color: var(--paper);
	border-color: var(--ink);
}

/* ---------- Creator typefaces -------------------------------------------- */


/* ---------- Creator dropdowns ------------------------------------------- */

.creator__field {
	margin: 0;
	display: grid;
	gap: 0.4rem;
}

.creator__field label {
	font-size: var(--step--1);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.creator__select {
	width: 100%;
	font: inherit;
	font-size: var(--step-0);
	padding: 0.7rem 0.9rem;
	border: 1.5px solid var(--line-strong);
	border-radius: var(--radius);
	background: #fff;
	color: var(--ink);
	cursor: pointer;
}

.creator__select:focus {
	outline: 2px solid var(--acid);
	outline-offset: 1px;
	border-color: var(--ink);
}

.creator__select--font {
	font-size: 1.1rem;
}

.creator__select option {
	font-size: 1.05rem;
	padding: 0.35rem;
	background: #fff;
	color: var(--ink);
}

.hero--creator .creator__field label { color: var(--paper); }

.creator__typefaces {
	display: grid;
	gap: 0.4rem;
}

.creator__typeface {
	/* Pixel and gothic faces need room; keep the button height even. */
	min-height: 2.9rem;
	display: grid;
	place-items: center;
	overflow: hidden;
	border: 1.5px solid var(--line-strong);
	background: none;
	border-radius: var(--radius);
	padding: 0.5rem 0.75rem;
	font-size: 0.95rem;
	line-height: 1.15;
	text-transform: uppercase;
	cursor: pointer;
	color: inherit;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.creator__typeface:hover { border-color: var(--ink); }

.creator__typeface.is-active {
	border-color: var(--ink);
	background: var(--ink);
	color: var(--paper);
}

.hero--creator .creator__typeface {
	border-color: rgba(247, 246, 241, 0.28);
	color: var(--paper);
}

.hero--creator .creator__typeface.is-active {
	border-color: var(--acid);
	background: var(--acid);
	color: var(--ink);
}

.creator__side > * + * { margin-top: 1.75rem; }

/* ---------- Font picker -------------------------------------------------- */

.creator__fontpicker {
	position: relative;
}

.creator__field-label {
	display: block;
	font-size: var(--step--1);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: 0.4rem;
}

.creator__fonttoggle {
	width: 100%;
	text-align: left;
	font: inherit;
	font-size: 1.15rem;
	padding: 0.65rem 2rem 0.65rem 0.9rem;
	border: 1.5px solid var(--line-strong);
	border-radius: var(--radius);
	background: #fff;
	color: var(--ink);
	cursor: pointer;
	position: relative;
	line-height: 1.3;
	min-height: 3rem;
}

.creator__fonttoggle::after {
	content: '▾';
	position: absolute;
	right: 0.75rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 0.8rem;
	opacity: 0.6;
}

.creator__fontlist[hidden] { display: none; }

.creator__fontlist {
	position: absolute;
	z-index: 40;
	top: calc(100% + 0.3rem);
	left: 0;
	right: 0;
	max-height: 22rem;
	overflow-y: auto;
	margin: 0;
	padding: 0.3rem;
	list-style: none;
	background: #fff;
	border: 1.5px solid var(--ink);
	border-radius: var(--radius);
	box-shadow: 0 12px 32px rgba(11, 11, 12, 0.22);
}

.creator__fontoption {
	display: block;
	width: 100%;
	text-align: left;
	font: inherit;
	font-size: 1.25rem;
	line-height: 1.35;
	padding: 0.5rem 0.7rem;
	border: 0;
	border-radius: 3px;
	background: none;
	color: var(--ink);
	cursor: pointer;
}

.creator__fontoption:hover { background: var(--paper-warm); }

.creator__fontoption.is-active {
	background: var(--ink);
	color: var(--paper);
}

.hero--creator .creator__field-label { color: var(--paper); }