/* =========================================================================
   HollaJack — storefront
   Style guide §8 (home), §9 (product), §10 (shop), §11 (artist pages)
   ========================================================================= */

/* -------------------------------------------------------------------------
   Site header — slim, bone, hairline bottom border, 4–5 links max (§8)
   ---------------------------------------------------------------------- */

.hj-header {
	background: var(--hj-bone);
	border-bottom: 1px solid var(--hj-line);
	position: sticky;
	top: 0;
	z-index: 50;
}

.hj-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--hj-5);
	min-height: 72px;
}

.hj-brand {
	display: inline-flex;
	align-items: center;
	gap: var(--hj-3);
	font-family: var(--hj-display);
	font-size: 1.375rem;
	font-weight: 500;
	color: var(--hj-ink);
	letter-spacing: 0.01em;
}

.hj-brand:hover {
	text-decoration: none;
}

.hj-nav {
	display: flex;
	align-items: center;
	gap: var(--hj-6);
}

.hj-nav ul {
	display: flex;
	align-items: center;
	gap: var(--hj-6);
	list-style: none;
	margin: 0;
	padding: 0;
}

.hj-nav a {
	font-size: var(--hj-size-small);
	font-weight: 500;
	color: var(--hj-ink);
}

.hj-nav a:hover {
	text-decoration: underline;
	text-underline-offset: 5px;
}

.hj-nav__has-sub {
	position: relative;
}

.hj-nav__has-sub > a {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
}

.hj-nav__has-sub > a::after {
	content: "";
	width: 7px;
	height: 7px;
	margin-top: -3px;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.15s ease;
}

.hj-nav__has-sub:hover > a::after,
.hj-nav__has-sub:focus-within > a::after {
	transform: rotate(225deg);
	margin-top: 3px;
}

/* Specificity note: .hj-nav__sub is also a <ul> inside .hj-nav, so the base
   ".hj-nav ul { display: flex }" rule above would otherwise win over a bare
   ".hj-nav__sub" selector and force the dropdown permanently open. Pairing it
   with the parent class here (0,2,0) is what actually beats that rule. */
.hj-nav__has-sub .hj-nav__sub {
	display: none;
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	min-width: 200px;
	margin-top: var(--hj-3);
	padding: var(--hj-2);
	background: var(--hj-bone);
	border: 1px solid var(--hj-line);
	border-radius: var(--hj-radius-mat);
	box-shadow: 0 8px 24px rgba(22, 19, 15, 0.08);
	z-index: 60;
}

.hj-nav__has-sub:hover .hj-nav__sub,
.hj-nav__has-sub:focus-within .hj-nav__sub {
	display: flex;
}

/* Invisible bridge over the margin-top gap above: without it, moving the
   mouse from the "Artists" link down into the dropdown crosses a dead zone
   that isn't part of .hj-nav__has-sub or .hj-nav__sub, so :hover drops and
   the menu closes before the pointer ever reaches it. */
.hj-nav__has-sub .hj-nav__sub::before {
	content: "";
	position: absolute;
	top: calc(-1 * var(--hj-3));
	left: 0;
	right: 0;
	height: var(--hj-3);
}

.hj-nav__sub li {
	width: 100%;
}

.hj-nav__sub a {
	display: block;
	padding: var(--hj-2) var(--hj-3);
	white-space: nowrap;
}

.hj-nav__sub a:hover {
	background: var(--hj-bone-deep);
	text-decoration: none;
}

.hj-header__cart {
	display: inline-flex;
	align-items: baseline;
	gap: var(--hj-2);
	font-size: var(--hj-size-small);
	font-weight: 500;
}

.hj-header__count {
	font-variant-numeric: tabular-nums;
	color: var(--hj-stone);
}

@media (max-width: 860px) {
	.hj-nav ul {
		gap: var(--hj-4);
	}

	.hj-nav a {
		font-size: var(--hj-size-eyebrow);
	}
}

/* -------------------------------------------------------------------------
   Footer — chop / colophon, minimal columns, quiet (§8)
   ---------------------------------------------------------------------- */

.hj-footer {
	background: var(--hj-bone-deep);
	border-top: 1px solid var(--hj-line);
	padding-block: var(--hj-8) var(--hj-6);
	margin-top: var(--hj-9);
}

.hj-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr repeat(2, 1fr);
	gap: var(--hj-7);
}

@media (max-width: 760px) {
	.hj-footer__grid {
		grid-template-columns: 1fr;
		gap: var(--hj-6);
	}
}

.hj-footer h3 {
	font-family: var(--hj-ui);
	font-size: var(--hj-size-eyebrow);
	font-weight: 500;
	letter-spacing: var(--hj-track-eyebrow);
	text-transform: uppercase;
	color: var(--hj-stone);
	margin: 0 0 var(--hj-4);
}

.hj-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--hj-3);
}

.hj-footer a {
	font-size: var(--hj-size-small);
	color: var(--hj-ink-soft);
}

.hj-colophon {
	display: flex;
	align-items: center;
	gap: var(--hj-3);
	margin-bottom: var(--hj-4);
}

.hj-colophon__mark {
	font-family: var(--hj-display);
	font-size: 1.25rem;
	color: var(--hj-ink);
}

.hj-footer__legal {
	margin-top: var(--hj-8);
	padding-top: var(--hj-5);
	border-top: 1px solid var(--hj-line);
	display: flex;
	justify-content: space-between;
	gap: var(--hj-4);
	flex-wrap: wrap;
	font-size: var(--hj-size-small);
	color: var(--hj-stone);
}

/* -------------------------------------------------------------------------
   Hero (§8) — the gallery entrance
   ---------------------------------------------------------------------- */

.hj-hero {
	padding-block: var(--hj-9);
	position: relative;
}

.hj-hero__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--hj-8);
	align-items: center;
}

@media (max-width: 900px) {
	.hj-hero__grid {
		grid-template-columns: 1fr;
		gap: var(--hj-7);
	}
}

.hj-hero__topline {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--hj-5);
	margin-bottom: var(--hj-6);
}

/* The live edition number floats top-right in brass — the signature (§8). */
.hj-hero__edition {
	text-align: right;
	flex: none;
}

.hj-hero__edition .hj-numeral {
	font-size: 1.5rem;
	display: block;
}

.hj-hero__edition span.hj-hero__edition-cap {
	display: block;
	font-size: var(--hj-size-eyebrow);
	letter-spacing: var(--hj-track-eyebrow);
	text-transform: uppercase;
	color: var(--hj-stone);
	margin-top: var(--hj-1);
}

.hj-hero__lede {
	max-width: 46ch;
	margin-top: var(--hj-5);
}

.hj-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hj-3);
	margin-top: var(--hj-7);
}

.hj-hero__art .hj-mat {
	padding: var(--hj-7);
}

/* The hero piece keeps its own proportions — forcing a portrait ratio here
   letterboxes landscape artwork into a tall empty box. */
.hj-hero__art img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 58vh;
	object-fit: contain;
	mix-blend-mode: multiply;
}

/* One orchestrated moment: the hero settles on load (§13). */
@media (prefers-reduced-motion: no-preference) {
	.hj-hero__copy > *,
	.hj-hero__art {
		animation: hj-settle 620ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
	}

	.hj-hero__copy > *:nth-child(2) { animation-delay: 60ms; }
	.hj-hero__copy > *:nth-child(3) { animation-delay: 110ms; }
	.hj-hero__copy > *:nth-child(4) { animation-delay: 160ms; }
	.hj-hero__art               { animation-delay: 80ms; }
}

@keyframes hj-settle {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}

/* -------------------------------------------------------------------------
   "How the number works" — three calm steps, no hype (§8)
   ---------------------------------------------------------------------- */

.hj-steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--hj-6);
	counter-reset: hj-step;
}

@media (max-width: 820px) {
	.hj-steps {
		grid-template-columns: 1fr;
		gap: var(--hj-5);
	}
}

.hj-step {
	padding-top: var(--hj-4);
	border-top: 1px solid var(--hj-line-strong);
}

.hj-step__n {
	font-family: var(--hj-display);
	font-size: var(--hj-size-small);
	color: var(--hj-stone);
	display: block;
	margin-bottom: var(--hj-3);
}

.hj-step h3 {
	font-family: var(--hj-display);
	font-size: var(--hj-size-display-m);
	line-height: var(--hj-leading-display-m);
	margin-bottom: var(--hj-3);
}

.hj-step p {
	font-size: var(--hj-size-small);
	color: var(--hj-ink-soft);
	margin: 0;
}

/* -------------------------------------------------------------------------
   For artists (§8, §11)
   ---------------------------------------------------------------------- */

.hj-artists__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--hj-8);
	align-items: center;
}

@media (max-width: 900px) {
	.hj-artists__grid {
		grid-template-columns: 1fr;
		gap: var(--hj-6);
	}
}

.hj-facts {
	display: grid;
	gap: var(--hj-4);
	margin: var(--hj-6) 0 0;
	padding: 0;
	list-style: none;
}

.hj-facts li {
	display: flex;
	gap: var(--hj-3);
	align-items: baseline;
	font-size: var(--hj-size-small);
	color: var(--hj-ink-soft);
	padding-bottom: var(--hj-4);
	border-bottom: 1px solid var(--hj-line);
}

.hj-facts strong {
	font-weight: 500;
	color: var(--hj-ink);
}

/* -------------------------------------------------------------------------
   Newsletter — single field, one button (§8)
   ---------------------------------------------------------------------- */

.hj-signup {
	max-width: 46ch;
}

.hj-signup__row {
	display: flex;
	gap: var(--hj-2);
	margin-top: var(--hj-5);
}

.hj-signup__row input {
	flex: 1 1 auto;
}

.hj-signup__row .hj-btn {
	flex: none;
}

/* -------------------------------------------------------------------------
   Contact form — stacked fields, same input styling as the rest of the site
   (base.css), just laid out for multi-field forms instead of a single row.
   ---------------------------------------------------------------------- */

.hj-form {
	display: grid;
	gap: var(--hj-5);
	max-width: 46ch;
}

.hj-form__row {
	display: grid;
	gap: var(--hj-2);
}

.hj-form textarea {
	resize: vertical;
}

.hj-form .hj-btn {
	justify-self: start;
}

/* -------------------------------------------------------------------------
   Single post (single.php) — article header + prose typography. Nothing
   here existed before; posts previously rendered inside a generic
   .page-content wrapper with no heading/list/quote styling of its own.
   ---------------------------------------------------------------------- */

.hj-post__wrap {
	max-width: var(--hj-maxw-prose);
	margin-inline: auto;
}

.hj-post__cat {
	text-decoration: none;
	display: inline-block;
}

.hj-post__head {
	margin-bottom: var(--hj-6);
}

.hj-post__meta {
	font-size: var(--hj-size-small);
	color: var(--hj-stone);
	margin-top: var(--hj-2);
}

.hj-prose {
	font-size: var(--hj-size-body);
	color: var(--hj-ink-soft);
}

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

.hj-prose p {
	max-width: var(--hj-maxw-prose);
}

.hj-prose h2 {
	font-size: var(--hj-size-display-m);
	line-height: var(--hj-leading-display-m);
	color: var(--hj-ink);
	margin: var(--hj-8) 0 var(--hj-4);
}

.hj-prose h3 {
	font-family: var(--hj-ui);
	font-size: var(--hj-size-body);
	font-weight: 500;
	color: var(--hj-ink);
	margin: var(--hj-6) 0 var(--hj-3);
}

.hj-prose ul,
.hj-prose ol {
	margin: 0 0 var(--hj-4);
	padding-left: var(--hj-5);
	display: grid;
	gap: var(--hj-2);
}

.hj-prose li {
	max-width: var(--hj-maxw-prose);
}

.hj-prose strong {
	color: var(--hj-ink);
	font-weight: 500;
}

.hj-prose .hj-quote {
	margin-left: 0;
}

.hj-prose .hj-figure {
	margin-bottom: var(--hj-7);
}

.hj-post__foot {
	margin-top: var(--hj-8);
	padding-top: var(--hj-5);
	border-top: 1px solid var(--hj-line);
}

/* -------------------------------------------------------------------------
   Blog index (home.php) — reuses .hj-grid/.hj-card, just adds the excerpt
   line and a simple prev/next row.
   ---------------------------------------------------------------------- */

.hj-blog-card__excerpt {
	font-size: var(--hj-size-small);
	color: var(--hj-ink-soft);
	margin: var(--hj-2) 0 0;
}

.hj-blog-cats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hj-3);
	margin: var(--hj-6) 0 var(--hj-7);
}

.hj-blog-cats__item {
	font-size: var(--hj-size-small);
	color: var(--hj-ink-soft);
	text-decoration: none;
	padding: var(--hj-2) var(--hj-4);
	border: 1px solid var(--hj-line);
	border-radius: var(--hj-radius-control);
}

.hj-blog-cats__item:hover {
	border-color: var(--hj-line-strong);
	text-decoration: none;
}

.hj-blog-cats__item.is-active {
	background: var(--hj-ink);
	border-color: var(--hj-ink);
	color: var(--hj-bone);
}

.hj-blog-pagination {
	display: flex;
	justify-content: space-between;
	gap: var(--hj-4);
	margin-top: var(--hj-8);
}

.hj-blog-pagination a {
	text-decoration: none;
}

/* -------------------------------------------------------------------------
   Shop / archive (§10)
   ---------------------------------------------------------------------- */

.hj-shop__head {
	padding-block: var(--hj-8) var(--hj-7);
	border-bottom: 1px solid var(--hj-line);
	margin-bottom: var(--hj-8);
}

.hj-shop__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--hj-4);
	flex-wrap: wrap;
	margin-top: var(--hj-5);
}

.hj-shop__count {
	font-size: var(--hj-size-small);
	color: var(--hj-stone);
}

.hj-shop__bar select {
	width: auto;
	min-width: 220px;
}

/* WooCommerce's default notice/ordering chrome, quieted. */
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error {
	background: var(--hj-card);
	border: 1px solid var(--hj-line);
	border-left: 2px solid var(--hj-ink);
	border-radius: var(--hj-radius-placard);
	color: var(--hj-ink-soft);
	font-family: var(--hj-ui);
	font-size: var(--hj-size-small);
	line-height: var(--hj-leading-body);
	padding: var(--hj-4) var(--hj-5) !important;
	margin-bottom: var(--hj-5);
	list-style: none;
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--hj-3);
}

/* WooCommerce's default tick/cross icon font was overlapping the first
   character of the message — and the site's own "never a badge, never a
   sticker" language doesn't want an icon here regardless. */
.woocommerce-notices-wrapper .woocommerce-message::before,
.woocommerce-notices-wrapper .woocommerce-info::before,
.woocommerce-notices-wrapper .woocommerce-error::before {
	content: none !important;
}

.woocommerce-notices-wrapper .woocommerce-error {
	border-left-color: var(--hj-error);
}

.woocommerce-notices-wrapper .woocommerce-message a.button.wc-forward {
	font-family: var(--hj-ui);
	white-space: nowrap;
}

.hj-cart-claim strong {
	font-weight: 600;
	color: var(--hj-ink);
}

.hj-cart-claim .hj-numeral {
	font-size: 1.05em;
}

.hj-pagination {
	margin-top: var(--hj-9);
	padding-top: var(--hj-5);
	border-top: 1px solid var(--hj-line);
}

.hj-pagination .page-numbers {
	display: inline-flex;
	gap: var(--hj-3);
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--hj-size-small);
}

.hj-pagination .page-numbers .current {
	color: var(--hj-ink);
	font-weight: 500;
	border-bottom: 1px solid var(--hj-ink);
}

/* -------------------------------------------------------------------------
   Single product (§9) — matted artwork + gallery placard
   ---------------------------------------------------------------------- */

.hj-product {
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) minmax(360px, 0.85fr);
	gap: var(--hj-8);
	align-items: start;
	padding-block: var(--hj-7) var(--hj-8);
}

@media (max-width: 1000px) {
	.hj-product {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--hj-7);
	}
}

.hj-product__back {
	display: inline-block;
	font-size: var(--hj-size-small);
	color: var(--hj-stone);
	padding-top: var(--hj-5);
}

.hj-product__art .hj-mat {
	padding: var(--hj-6);
}

/* --- The placard ------------------------------------------------------- */

.hj-placard {
	position: sticky;
	top: 104px;
}

@media (max-width: 1000px) {
	.hj-placard {
		position: static;
	}
}

.hj-placard__artist {
	display: flex;
	align-items: center;
	gap: var(--hj-3);
	margin-bottom: var(--hj-5);
}

.hj-placard__artist a {
	font-size: var(--hj-size-body);
	font-weight: 500;
	color: var(--hj-ink);
}

.hj-placard__name {
	margin-bottom: var(--hj-5);
}

.hj-placard__ledger {
	margin-bottom: var(--hj-6);
}

.hj-placard__cta {
	margin-top: var(--hj-5);
}

.hj-placard__detail {
	margin-top: var(--hj-6);
	padding-top: var(--hj-5);
	border-top: 1px solid var(--hj-line);
	font-size: var(--hj-size-small);
	color: var(--hj-ink-soft);
}

.hj-placard__detail p:last-child {
	margin-bottom: 0;
}

/* --- About the piece / more from this artist --------------------------- */

.hj-piece-note {
	max-width: var(--hj-maxw-prose);
}

.hj-piece-note p {
	font-size: var(--hj-size-body);
	color: var(--hj-ink-soft);
}

/* -------------------------------------------------------------------------
   Composing around the t-shirt designer plugin.

   Its views are hard-included (no locate_template), so we own the layout from
   outside and restyle its emitted classes here. Its stylesheet pins
   `.single-product div.product` to a flex row with a 68/30 split and forces
   the design container to 68% with !important — the two rules below are the
   minimum needed to release that so our own grid drives the page. Everything
   after them is plain, unforced styling.

   Do NOT touch the overlay's inline percentage positions or aspect-ratio:
   those are what keep the artwork aligned on the garment.
   ---------------------------------------------------------------------- */

.single-product div.product {
	display: block !important;
}

/* The plugin's frontend.js sets `float: left` on this container at runtime
   (frontend.js:1193). A floated child contributes no height to its parent, so
   the mat collapsed to its padding and the artwork painted outside the frame.
   Clearing the float removes the cause; flow-root on the mat is belt-and-braces. */
.single-product div.product .wcfm-tshirt-design-container {
	width: 100% !important;
	max-width: 100% !important;
	flex: none !important;
	float: none !important;
	margin-bottom: 0;
}

.hj-mat--art {
	display: flow-root;
}

.wcfm-tshirt-design-wrapper {
	border: 0;
	outline: 0;
	box-shadow: none;
	max-width: 100%;
	margin: 0 auto;
}

.wcfm-tshirt-design-heading,
.wcfm-tshirt-design-title,
/* The selection view prints its own <h1 class="product_title">; the piece name
   already leads the placard, so the duplicate goes. */
.wcfm-tshirt-product-selection .product_title {
	display: none;
}

/* A debug button the plugin's frontend.js injects into the live page with
   inline styles, so this needs !important to win. */
.wcfm-tshirt-debug-button,
.wcfm-debug-message {
	display: none !important;
}

/* Crossfade, not slide (§13). The plugin toggles these with display, which
   isn't animatable, so fade the incoming view in as it becomes active. */
@media (prefers-reduced-motion: no-preference) {
	.wcfm-tshirt-design-wrapper .wcfm-tshirt-design-view.active {
		animation: hj-fade-in var(--hj-fade) both;
	}
}

@keyframes hj-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.wcfm-tshirt-design-image {
	object-fit: contain;
}

/* Front / back toggle — quiet text options with an ink underline (§9). */
.wcfm-tshirt-design-controls {
	display: flex;
	justify-content: center;
	gap: var(--hj-5);
	margin-top: var(--hj-5);
	flex-wrap: wrap;
}

.wcfm-tshirt-side-button {
	background: none;
	border: 0;
	border-bottom: 1px solid transparent;
	border-radius: 0;
	padding: var(--hj-2) 0;
	font-family: var(--hj-ui);
	font-size: var(--hj-size-eyebrow);
	font-weight: 500;
	letter-spacing: var(--hj-track-eyebrow);
	text-transform: uppercase;
	color: var(--hj-stone);
	cursor: pointer;
	min-height: 44px;
	transition: color var(--hj-fade), border-color var(--hj-fade);
}

/* The plugin gives these a grey pill and a #333 filled active state. Strip the
   fills so the toggle reads as quiet text options with an ink underline. */
.wcfm-tshirt-side-button:hover,
.wcfm-tshirt-side-button.active,
.wcfm-tshirt-side-button.active:hover {
	background: none;
	background-color: transparent;
}

.wcfm-tshirt-side-button:hover {
	color: var(--hj-ink);
}

.wcfm-tshirt-side-button.active {
	color: var(--hj-ink);
	border-bottom-color: var(--hj-ink);
}

/* Selectors are quiet — no chunky dropdowns (§9). */
.single-product .wcfm-tshirt-product-selection {
	width: 100% !important;
	max-width: 100% !important;
	margin-bottom: 0;
}

.wcfm-tshirt-product-description {
	font-size: var(--hj-size-small);
	color: var(--hj-ink-soft);
}

.wcfm-tshirt-product-options {
	display: grid;
	gap: var(--hj-4);
}

.wcfm-tshirt-product-option label {
	display: block;
	font-size: var(--hj-size-eyebrow);
	font-weight: 500;
	letter-spacing: var(--hj-track-eyebrow);
	text-transform: uppercase;
	color: var(--hj-stone);
	margin-bottom: var(--hj-2);
}

.wcfm-tshirt-select {
	font-family: var(--hj-ui);
	font-size: var(--hj-size-small);
	padding: var(--hj-3);
	min-height: 44px;
	background: var(--hj-card);
	border: 1px solid var(--hj-line);
	border-radius: var(--hj-radius-control);
}

/* Price breakdown reads as ledger data, not a receipt.
   The plugin injects this inline from class-wcfm-tshirt-frontend-product.php
   as a royal-blue (#4169e1) box with white text. We drop the blue box, so the
   white text has to go with it or it turns invisible on bone. */
.wcfm-tshirt-price-breakdown-container,
.wcfm-tshirt-price-breakdown {
	font-family: var(--hj-ui);
	font-size: var(--hj-size-small);
	font-variant-numeric: tabular-nums;
	background: transparent !important;
	border: 0;
	border-radius: 0;
	padding: 0;
}

.wcfm-tshirt-price-breakdown {
	border-top: 1px solid var(--hj-line);
	padding-top: var(--hj-4);
	margin-top: var(--hj-4);
}

.hj-placard .wcfm-tshirt-price-breakdown,
.hj-placard .wcfm-tshirt-price-breakdown p {
	color: var(--hj-ink-soft) !important;
}

.hj-placard .wcfm-tshirt-price-breakdown p:last-child,
.hj-placard .wcfm-tshirt-price-breakdown strong {
	color: var(--hj-ink) !important;
	font-weight: 500;
}

/* The same inline block hides every .woocommerce-Price-amount outside its own
   breakdown, which would silently blank the edition ledger's price. Restore it
   for the ledger only — specificity has to clear the plugin's (0,3,0). */
.single-product .hj-ledger .hj-price .woocommerce-Price-amount {
	display: inline !important;
}

/* The add-to-cart button adopts the primary button (§7).
   !important here is deliberate and narrow: the Elementor kit and the plugin
   both colour this button, and it is the one primary action on the page. */
.woocommerce .wcfm-tshirt-add-to-cart button.single_add_to_cart_button,
.woocommerce div.product form.cart .single_add_to_cart_button,
.wcfm-tshirt-cart-form button[type='submit'] {
	background: var(--hj-ink) !important;
	background-color: var(--hj-ink) !important;
	color: var(--hj-bone) !important;
	border-color: var(--hj-ink) !important;
}

.woocommerce .wcfm-tshirt-add-to-cart button.single_add_to_cart_button:hover,
.woocommerce div.product form.cart .single_add_to_cart_button:hover,
.wcfm-tshirt-cart-form button[type='submit']:hover {
	background: #000 !important;
	background-color: #000 !important;
	color: var(--hj-bone) !important;
}

.wcfm-tshirt-cart-form button[type='submit'],
.wcfm-tshirt-cart-form .single_add_to_cart_button,
.woocommerce .single_add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	background: var(--hj-ink);
	color: var(--hj-bone);
	border: 1px solid var(--hj-ink);
	border-radius: var(--hj-radius-control);
	font-family: var(--hj-ui);
	font-size: var(--hj-size-small);
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	padding: var(--hj-3) var(--hj-5);
	min-height: 48px;
	cursor: pointer;
	transition: background var(--hj-fade);
}

.woocommerce .single_add_to_cart_button:hover {
	background: #000;
	color: var(--hj-bone);
}

.wcfm-tshirt-artist-info,
.wcfm-tshirt-artist-link {
	font-size: var(--hj-size-small);
	color: var(--hj-ink-soft);
}

/* -------------------------------------------------------------------------
   Artist store / dashboard surfaces (§11)
   ---------------------------------------------------------------------- */

.hj-store-head {
	padding-block: var(--hj-8);
	border-bottom: 1px solid var(--hj-line);
	margin-bottom: var(--hj-8);
}

.hj-store-head__name {
	display: flex;
	align-items: center;
	gap: var(--hj-4);
}

.hj-store-head__bio {
	max-width: var(--hj-maxw-prose);
	margin-top: var(--hj-4);
	color: var(--hj-ink-soft);
}

/* -------------------------------------------------------------------------
   WCFM vendor dashboard restrictions.

   Carried over from the previous child theme's inline <style> blocks. The
   real enforcement is the capability check in functions.php; this only stops
   the links from flashing before the redirect.
   ---------------------------------------------------------------------- */

body:not(.hj-is-admin) #wcfm_menu .wcfm_menu_items .products .wcfm_submenu li a[href*='products-manage'],
body:not(.hj-is-admin) .products_manage a[href*='products-manage'].wcfm-action-icon,
body:not(.hj-is-admin) .wcfm_products_listing a[href*='products-manage'] .wcfmfa.fa-edit,
body:not(.hj-is-admin) .wcfm_product_popup_button_wrapper {
	display: none;
}

/* -------------------------------------------------------------------------
   Cart & checkout — quiet, consistent with the frame
   ---------------------------------------------------------------------- */

.woocommerce table.shop_table {
	border: 1px solid var(--hj-line);
	border-radius: var(--hj-radius-placard);
	font-size: var(--hj-size-small);
}

.woocommerce table.shop_table th {
	font-family: var(--hj-ui);
	font-size: var(--hj-size-eyebrow);
	font-weight: 500;
	letter-spacing: var(--hj-track-eyebrow);
	text-transform: uppercase;
	color: var(--hj-stone);
}

.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button {
	background: var(--hj-ink);
	color: var(--hj-bone);
	border-radius: var(--hj-radius-control);
	font-family: var(--hj-ui);
	font-size: var(--hj-size-small);
	font-weight: 500;
	text-transform: none;
	padding: var(--hj-3) var(--hj-5);
	min-height: 44px;
}

.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
	background: #000;
	color: var(--hj-bone);
}

/* -------------------------------------------------------------------------
   Editorial imagery placements (§12)
   ---------------------------------------------------------------------- */

/* A letterboxed process strip above the three steps. */
.hj-figure--band {
	margin-bottom: var(--hj-8);
}

.hj-figure--band .hj-figure__img {
	aspect-ratio: 16 / 6;
}

@media (max-width: 820px) {
	.hj-figure--band .hj-figure__img {
		aspect-ratio: 3 / 2;
	}
}

.hj-figure--artists {
	margin-bottom: var(--hj-6);
}

.hj-figure--artists .hj-figure__img {
	aspect-ratio: 4 / 3;
}

/* The garment stand-in follows the hero rules already set above, but without a
   forced ratio it can run tall on mobile — cap it the way the hero art is. */
.hj-figure--hero .hj-figure__img {
	max-height: 58vh;
	object-fit: contain;
}

/* =========================================================================
   Homepage elaboration — flash spent on editorial confidence, never urgency
   ========================================================================= */

/* --- Global polish ------------------------------------------------------ */

::selection {
	background: var(--hj-ink);
	color: var(--hj-bone);
}

/* The header stays quiet but gains a whisper of depth when content slides
   beneath it. Falls back to solid bone where backdrop-filter is unsupported. */
.hj-header {
	background: rgba(245, 242, 234, 0.88);
	-webkit-backdrop-filter: blur(10px) saturate(1.05);
	backdrop-filter: blur(10px) saturate(1.05);
}

/* --- Hero: paper depth, certificate plate, trust line ------------------- */

/* Soft radial paper tone behind the artwork side — depth from paper, not
   shadows (§6). */
.hj-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(90% 75% at 78% 18%, var(--hj-bone-deep) 0%, rgba(236, 231, 219, 0) 62%);
	pointer-events: none;
}

.hj-hero > .hj-wrap {
	position: relative;
}

.hj-hero__flag {
	text-align: right;
	flex: none;
}

.hj-hero__frame {
	position: relative;
}

/* The certificate plate: a printed label pinned over the mat's corner.
   Sharp corners (radius 0 — placards read as printed labels, §6), hairline,
   card surface. The hero's entire brass budget lives here. */
.hj-hero__plate {
	position: absolute;
	top: var(--hj-6);
	right: calc(-1 * var(--hj-3));
	background: var(--hj-card);
	border: 1px solid var(--hj-line-strong);
	border-radius: var(--hj-radius-placard);
	padding: var(--hj-3) var(--hj-4);
	text-align: right;
	box-shadow: none;
}

.hj-hero__plate .hj-numeral {
	font-size: 1.75rem;
	display: block;
}

.hj-hero__plate-cap {
	display: block;
	font-size: var(--hj-size-eyebrow);
	letter-spacing: var(--hj-track-eyebrow);
	text-transform: uppercase;
	color: var(--hj-stone);
	margin-top: var(--hj-1);
}

/* A graphite stroke beneath the numeral — signed in pencil, not stickered (§5). */
.hj-hero__plate .hj-numeral::after {
	content: '';
	display: block;
	width: 100%;
	height: 1px;
	margin-top: var(--hj-2);
	background: var(--hj-graphite);
	opacity: 0.55;
}

@media (max-width: 900px) {
	.hj-hero__plate {
		right: var(--hj-3);
	}
}

/* Trust microline under the CTAs: three true statements, middot-separated. */
.hj-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hj-2) var(--hj-4);
	margin: var(--hj-5) 0 0;
	font-size: var(--hj-size-eyebrow);
	letter-spacing: var(--hj-track-eyebrow);
	text-transform: uppercase;
	color: var(--hj-stone);
}

.hj-hero__meta span + span::before {
	content: '\00b7';
	margin-right: var(--hj-4);
	color: var(--hj-line-strong);
}

/* --- Ticker: the promises in motion ------------------------------------- */

.hj-ticker {
	overflow: hidden;
	border-block: 1px solid var(--hj-line);
	background: var(--hj-card);
	padding-block: var(--hj-3);
}

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

.hj-ticker:hover .hj-ticker__track {
	animation-play-state: paused;
}

.hj-ticker__set {
	display: flex;
	align-items: center;
	flex: none;
}

.hj-ticker__item {
	font-size: var(--hj-size-eyebrow);
	font-weight: 500;
	letter-spacing: var(--hj-track-eyebrow);
	text-transform: uppercase;
	color: var(--hj-ink-soft);
	white-space: nowrap;
	padding-inline: var(--hj-5);
}

.hj-ticker__dot {
	color: var(--hj-brass);
	flex: none;
}

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

/* Reduced motion: the global 1ms rule freezes the track at its start — the
   strip simply reads as a static line of statements. */

/* --- Reserved plinths (pre-launch "Now climbing") ------------------------ */

.hj-reserved__mat {
	display: block;
}

.hj-reserved__inner {
	aspect-ratio: 4 / 5;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--hj-3);
	border: 1px dashed var(--hj-line-strong);
	border-radius: var(--hj-radius-mat);
	padding: var(--hj-5);
	text-align: center;
}

/* Stone, not brass: the accent is reserved for real editions (§15). */
.hj-reserved__numeral {
	color: var(--hj-stone);
	font-size: 1.5rem;
}

.hj-reserved__cap {
	font-size: var(--hj-size-eyebrow);
	letter-spacing: var(--hj-track-eyebrow);
	text-transform: uppercase;
	color: var(--hj-stone);
}

.hj-reserved__note {
	margin-top: var(--hj-7);
	text-align: center;
	font-size: var(--hj-size-small);
	color: var(--hj-stone);
}

/* --- The signature: number, ledger specimen, chop ------------------------ */

.hj-signature__grid {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: var(--hj-8);
	align-items: center;
}

@media (max-width: 900px) {
	.hj-signature__grid {
		grid-template-columns: 1fr;
		gap: var(--hj-7);
	}
}

.hj-signature__points {
	list-style: none;
	margin: var(--hj-6) 0 0;
	padding: 0;
	display: grid;
	gap: var(--hj-4);
}

.hj-signature__points li {
	font-size: var(--hj-size-small);
	color: var(--hj-ink-soft);
	padding-bottom: var(--hj-4);
	border-bottom: 1px solid var(--hj-line);
	max-width: var(--hj-maxw-prose);
}

.hj-signature__points strong {
	display: block;
	font-weight: 500;
	color: var(--hj-ink);
	margin-bottom: var(--hj-1);
}

/* The specimen sits on card even inside the band — a label pinned to the wall. */
.hj-ledger--specimen {
	background: var(--hj-card);
	max-width: 400px;
}

.hj-signature__specimen-cap {
	margin: var(--hj-3) 0 0;
	font-size: var(--hj-size-eyebrow);
	letter-spacing: var(--hj-track-eyebrow);
	text-transform: uppercase;
	color: var(--hj-stone);
}

.hj-signature__chop {
	display: flex;
	align-items: center;
	gap: var(--hj-4);
	margin-top: var(--hj-7);
	padding-top: var(--hj-5);
	border-top: 1px solid var(--hj-line);
}

.hj-signature__chop-cap {
	font-size: var(--hj-size-small);
	color: var(--hj-ink-soft);
	max-width: 26ch;
}

/* --- Steps: oversized graphite numerals ---------------------------------- */

.hj-step__n {
	font-family: var(--hj-display);
	font-size: 2.25rem;
	line-height: 1;
	color: var(--hj-graphite);
	opacity: 0.35;
	display: block;
	margin-bottom: var(--hj-4);
	font-variant-numeric: tabular-nums;
}

/* --- Brand-voice pull-quote (not a testimonial — those are banned, §15) --- */

.hj-quote {
	font-family: var(--hj-display);
	font-style: italic;
	font-size: var(--hj-size-display-m);
	line-height: var(--hj-leading-display-m);
	color: var(--hj-ink);
	border-left: 1px solid var(--hj-line-strong);
	padding-left: var(--hj-5);
	margin: var(--hj-6) 0;
	max-width: 30ch;
}

/* --- Assurance strip ------------------------------------------------------ */

.hj-assure {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--hj-6);
	padding-block: var(--hj-6);
	border-block: 1px solid var(--hj-line);
	margin-bottom: var(--hj-9);
}

@media (max-width: 820px) {
	.hj-assure {
		grid-template-columns: 1fr;
		gap: var(--hj-5);
	}
}

.hj-assure__item h3 {
	font-family: var(--hj-ui);
	font-size: var(--hj-size-small);
	font-weight: 500;
	color: var(--hj-ink);
	margin-bottom: var(--hj-2);
}

.hj-assure__item p {
	font-size: var(--hj-size-small);
	color: var(--hj-ink-soft);
	margin: 0;
	max-width: 44ch;
}

/* --- FAQ: quiet accordion, no JS ------------------------------------------ */

.hj-faq {
	max-width: 760px;
}

.hj-faq .hj-section__head {
	margin-bottom: var(--hj-6);
}

.hj-faq__item {
	border-bottom: 1px solid var(--hj-line);
}

.hj-faq__item summary {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--hj-4);
	padding-block: var(--hj-4);
	font-size: var(--hj-size-body);
	font-weight: 500;
	color: var(--hj-ink);
	cursor: pointer;
	list-style: none;
}

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

.hj-faq__item summary::after {
	content: '+';
	font-family: var(--hj-display);
	font-size: 1.25rem;
	line-height: 1;
	color: var(--hj-stone);
	flex: none;
	transition: transform var(--hj-fade);
}

.hj-faq__item[open] summary::after {
	content: '\2212';
	color: var(--hj-ink);
}

.hj-faq__a {
	padding-bottom: var(--hj-5);
}

.hj-faq__a p {
	margin: 0;
	font-size: var(--hj-size-small);
	color: var(--hj-ink-soft);
	max-width: var(--hj-maxw-prose);
}

.hj-faq__a a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --- Newsletter: centred, editorial --------------------------------------- */

.hj-signup--center {
	margin-inline: auto;
	max-width: 52ch;
	text-align: center;
}

.hj-signup--center .hj-signup__row {
	margin-top: var(--hj-6);
}