/*
Theme Name: Hugo North
Theme URI: https://hugonorth.com
Author: Hugo North
Author URI: https://hugonorth.com
Description: A modern, block-based (Full Site Editing) WooCommerce theme for the Hugo North store. Built with theme.json, block templates and template parts.
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hugonorth
Tags: full-site-editing, block-styles, e-commerce, woocommerce, custom-colors, custom-logo, custom-menu, editor-style, featured-images, block-patterns, wide-blocks
*/

/*
 * Hugo North is a block theme. Almost all styling lives in theme.json.
 * Use this file only for CSS that cannot be expressed in theme.json.
 */

/* --- Hero headline: small "BRING" over a single-line statement --- */
.hn-hero-bring {
	font-size: 50%;
	font-weight: 350;
	letter-spacing: 0.1em;
}

.hn-hero-rest {
	font-weight: 350;
	white-space: nowrap;
}

/* On phones the single line won't fit — let it wrap instead of overflowing. */
@media (max-width: 600px) {
	.hn-hero-rest {
		white-space: normal;
	}
}

/* --- Hero copy block: sits in the image's quiet right-hand negative space,
   pinned to the wide-content right edge so the headline lines up with the
   collection cards below rather than hugging the viewport edge --- */
.hn-hero-copy {
	max-width: 480px;
	margin-left: auto !important;
	margin-right: 0 !important;
}

/* Desktop: anchor the image crop to the top so the whole framed print stays
   in shot (the default centre crop trims the top of the frame). Mobile keeps
   its own centred crop. */
@media (min-width: 782px) {
	.hn-hero .wp-block-cover__image-background {
		object-position: center top !important;
	}
}

/* On mobile the copy overlays the image with a dark tint and white text
   (the desktop light wash / dark text can't hold up over the tighter crop).
   The lead paragraph is dropped for a cleaner, punchier mobile hero. */
@media (max-width: 781px) {
	/* Shorter hero on mobile. */
	.hn-hero.wp-block-cover {
		min-height: 60vh !important;
	}

	/* Darken the whole image so white text reads over any part of the crop.
	   Weighted a touch heavier through the centre, where the headline sits over
	   the pale framed painting. */
	.hn-hero .wp-block-cover__background {
		background: linear-gradient(
			180deg,
			rgba(20, 20, 18, 0.55) 0%,
			rgba(20, 20, 18, 0.72) 55%,
			rgba(20, 20, 18, 0.66) 100%
		) !important;
	}

	/* Copy spans the full width over the image, centre-aligned. */
	.hn-hero-copy {
		max-width: none !important;
		margin: 0 !important;
		text-align: center !important;
	}

	/* Centre the button too. */
	.hn-hero .wp-block-buttons {
		justify-content: center !important;
	}

	/* White headline, a touch smaller on mobile. Soft shadow keeps it crisp over
	   the lightest patches of the painting. */
	.hn-hero-copy h1 {
		color: var(--wp--preset--color--base) !important;
		font-size: 1.55rem !important;
		overflow-wrap: break-word;
		text-shadow: 0 1px 16px rgba(15, 15, 13, 0.4);
	}

	/* White overline too. */
	.hn-hero-copy .has-small-font-size {
		color: var(--wp--preset--color--base) !important;
		text-shadow: 0 1px 12px rgba(15, 15, 13, 0.35);
	}

	/* Hide the lead paragraph on mobile only. */
	.hn-hero-lead {
		display: none !important;
	}

	/* Light button pops against the dark overlay. */
	.hn-hero .wp-block-button__link {
		background-color: var(--wp--preset--color--base) !important;
		color: var(--wp--preset--color--contrast) !important;
	}
}

/* --- Tablet hero (portrait iPads etc.): the desktop light-wash/dark-text
   layout relies on a "quiet right-hand negative space" that doesn't exist at
   this width — the framed painting fills the centre and the 480px copy block
   gets pinned right over it, where the left-to-right gradient has faded out,
   leaving dark text unreadable over the busy image. So tablets get the same
   dark-overlay + white-text treatment as phones, but keep the lead paragraph
   and a larger headline since there's room. --- */
@media (min-width: 782px) and (max-width: 1023px) {
	.hn-hero.wp-block-cover {
		min-height: 66vh !important;
	}

	/* Full-image dark wash so white text reads over any part of the crop. */
	.hn-hero .wp-block-cover__background {
		background: linear-gradient(
			180deg,
			rgba(20, 20, 18, 0.5) 0%,
			rgba(20, 20, 18, 0.66) 55%,
			rgba(20, 20, 18, 0.6) 100%
		) !important;
	}

	/* Copy spans the full width over the image, centre-aligned. */
	.hn-hero-copy {
		max-width: 620px !important;
		margin-left: auto !important;
		margin-right: auto !important;
		text-align: center !important;
	}

	.hn-hero .wp-block-buttons {
		justify-content: center !important;
	}

	/* White headline + overline, sized for the larger canvas. */
	.hn-hero-copy h1 {
		color: var(--wp--preset--color--base) !important;
		text-shadow: 0 1px 16px rgba(15, 15, 13, 0.4);
	}

	.hn-hero-copy .has-small-font-size {
		color: var(--wp--preset--color--base) !important;
		text-shadow: 0 1px 12px rgba(15, 15, 13, 0.35);
	}

	/* Keep the lead paragraph on tablet, but in white over the wash. */
	.hn-hero-lead {
		color: var(--wp--preset--color--base) !important;
		text-shadow: 0 1px 12px rgba(15, 15, 13, 0.35);
	}

	/* Light button pops against the dark overlay. */
	.hn-hero .wp-block-button__link {
		background-color: var(--wp--preset--color--base) !important;
		color: var(--wp--preset--color--contrast) !important;
	}
}

/* --- Main content sits flush under the header, and the section divs
   inside it lose the default 24px block-gap top margin (each section
   provides its own padding) --- */
.wp-site-blocks > main,
.wp-site-blocks > main > *,
.wp-site-blocks > footer {
	margin-top: 0;
	margin-block-start: 0;
}

/* --- Sticky site header --- */
.wp-site-blocks > header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--wp--preset--color--base);
}

/* --- One-line header: tight centred cluster, icons far right --- */
/* Equal-width left/right zones keep the centre cluster (logo) centred. */
.hn-header-left {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.hn-header-right {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.hn-header-center {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}

/* Centre everything in the bar vertically, including nav items,
   the account icon and the mini-cart. */
.hn-headerbar {
	align-items: center;
}

.hn-headerbar .wp-block-navigation,
.hn-headerbar .wp-block-navigation__container,
.hn-headerbar .wc-block-mini-cart {
	align-items: center;
}

/* Tighten the link spacing in the desktop cluster */
.hn-nav-left .wp-block-navigation__container,
.hn-nav-right .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--40);
}

/* Brand lockup: arrow mark + the site title rendered as text.
   The anchor's line-height would add phantom space below the SVG,
   pushing the arrow above the bar's centre line. */
.hn-nav-arrow {
	display: block;
	line-height: 0;
	color: var(--wp--preset--color--contrast);
}

.hn-nav-arrow svg {
	display: block;
	width: 38px;
	height: 38px;
}

.hn-nav-brand .wp-block-site-title {
	margin: 0;
	white-space: nowrap;
}

/* Breathing space either side of the brand lockup (desktop only —
   the mobile bar is too tight for it) */
@media (min-width: 901px) {
	.hn-nav-brand {
		padding-left: var(--wp--preset--spacing--50);
		padding-right: var(--wp--preset--spacing--50);
	}
}

/* Keep the wordmark out of the global link style (primary + underline) */
.hn-nav-brand .wp-block-site-title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

/* Account + cart icons */
.hn-header-right .hn-icon-account {
	color: var(--wp--preset--color--contrast);
	display: inline-flex;
}

.hn-header-right .hn-icon-account:hover {
	color: var(--wp--preset--color--secondary);
}

/* Hamburger hidden on desktop (scoped to beat the navigation block's own
   display rule, which has equal specificity). */
.hn-headerbar .hn-nav-mobile {
	display: none;
}

/* Desktop dropdown panels (scoped to >=901px so the card styling never leaks
   into the mobile overlay, where submenus flow inline instead). */
@media (min-width: 901px) {
	.hn-headerbar .wp-block-navigation .wp-block-navigation__submenu-container {
		background-color: var(--wp--preset--color--base);
		border: 1px solid var(--wp--preset--color--base-2);
		box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
		padding: 0.5rem 0;
		min-width: 230px;
	}

	.hn-headerbar .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		padding: 0.55rem 1.3rem;
	}
}

/* Mobile: single hamburger (left), logo centred, icons right */
@media (max-width: 900px) {
	.hn-headerbar .hn-nav-left,
	.hn-headerbar .hn-nav-right {
		display: none;
	}

	.hn-headerbar .hn-nav-mobile {
		display: flex;
	}

	.hn-nav-arrow svg {
		width: 28px;
		height: 28px;
	}

	.hn-nav-brand .wp-block-site-title {
		font-size: 1.2rem;
	}

	/* Tighter zone gap so the equal-width side zones (and with them the
	   logo's centring) survive down to 360px-wide phones. */
	.hn-headerbar {
		gap: 12px;
	}
}

/* ============================================================
   Mobile menu overlay — full-screen, editorial, on-brand
   ============================================================ */
@media (max-width: 900px) {
	/* Warm cream backdrop instead of stark white. Mirrors core's own
	   ".wp-block-navigation:not(.has-background) ...is-menu-open" selector (plus
	   .hn-headerbar) so it out-specifies core's default white. */
	.hn-headerbar .wp-block-navigation:not(.has-background)
		.wp-block-navigation__responsive-container.is-menu-open {
		background-color: var(--wp--preset--color--base);
	}

	/* Comfortable gutters; clear the close control at the top */
	.hn-headerbar .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__responsive-container-content {
		padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50)
			var(--wp--preset--spacing--60);
	}

	/* Full-width vertical list, no inherited row gap */
	.hn-headerbar .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__container {
		gap: 0;
		width: 100%;
		align-items: stretch;
	}

	/* Top-level items separated by hairline rules */
	.hn-headerbar .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__container > .wp-block-navigation-item {
		width: 100%;
		border-top: 1px solid var(--wp--preset--color--base-2);
	}

	.hn-headerbar .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__container > .wp-block-navigation-item:first-child {
		border-top: 0;
	}

	/* Top-level labels: large display type, generous tap target */
	.hn-headerbar .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__container > .wp-block-navigation-item
		> .wp-block-navigation-item__content {
		font-family: var(--wp--preset--font-family--display);
		font-size: 1.45rem;
		font-weight: 350;
		letter-spacing: 0.05em;
		line-height: 1.1;
		color: var(--wp--preset--color--contrast);
		padding: 1rem 0;
	}

	/* Submenus: drop the desktop dropdown card and flow inline as a nested,
	   indented list under their parent (Explore / About). */
	.hn-headerbar .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__submenu-container {
		position: static;
		background: transparent;
		border: 0;
		box-shadow: none;
		min-width: 0;
		width: 100%;
		margin: 0;
		padding: 0 0 0.85rem;
	}

	.hn-headerbar .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		font-family: var(--wp--preset--font-family--sans);
		font-size: 1rem;
		font-weight: 400;
		letter-spacing: 0.02em;
		text-transform: none;
		color: var(--wp--preset--color--contrast-2);
		padding: 0.5rem 0 0.5rem 1rem;
	}

	/* Gold accent on press/focus */
	.hn-headerbar .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item__content:hover,
	.hn-headerbar .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item__content:focus {
		color: var(--wp--preset--color--secondary);
	}

	/* Submenu arrow reads as a quiet gold cue */
	.hn-headerbar .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-submenu__toggle {
		color: var(--wp--preset--color--secondary);
	}

	/* Close control: aligned to the gutter, gold on press */
	.hn-headerbar .wp-block-navigation__responsive-container-close {
		top: var(--wp--preset--spacing--40);
		right: var(--wp--preset--spacing--50);
		color: var(--wp--preset--color--contrast);
	}

	.hn-headerbar .wp-block-navigation__responsive-container-close:hover {
		color: var(--wp--preset--color--secondary);
	}

	/* Account moves off the header bar and into the menu as the last item. */
	.hn-header-right .hn-icon-account {
		display: none;
	}

	/* "My Account": the final menu item, with the person icon, reading as a
	   quiet utility action rather than a top-level heading. */
	.hn-headerbar .wp-block-navigation__responsive-container.is-menu-open
		.hn-menu-account {
		--hn-account-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 3.6-7 8-7s8 3 8 7'/%3E%3C/svg%3E");
	}

	.hn-headerbar .wp-block-navigation__responsive-container.is-menu-open
		.hn-menu-account > .wp-block-navigation-item__content {
		display: inline-flex;
		align-items: center;
		font-size: 1.2rem;
		letter-spacing: 0.04em;
	}

	.hn-headerbar .wp-block-navigation__responsive-container.is-menu-open
		.hn-menu-account > .wp-block-navigation-item__content::before {
		content: "";
		display: inline-block;
		width: 1.05em;
		height: 1.05em;
		margin-right: 0.6em;
		background-color: currentColor;
		-webkit-mask: var(--hn-account-icon) no-repeat center / contain;
		mask: var(--hn-account-icon) no-repeat center / contain;
	}
}

/* ---- Mobile menu: finishing touches ---- */
@media (max-width: 900px) {
	/* Monogram anchors the top of the panel, opposite the close control. */
	.hn-headerbar .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__container::before {
		content: "";
		display: block;
		width: 42px;
		height: 42px;
		margin: 0 0 var(--wp--preset--spacing--40);
		background-color: var(--wp--preset--color--contrast);
		-webkit-mask: url("assets/images/hn-arrow.svg") no-repeat center / contain;
		mask: url("assets/images/hn-arrow.svg") no-repeat center / contain;
	}

	/* "Explore" / "About" read as gold eyebrow labels rather than headings,
	   matching the section labels used elsewhere on the site. */
	.hn-headerbar .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__container > .wp-block-navigation-submenu
		> .wp-block-navigation-item__content {
		font-family: var(--wp--preset--font-family--sans);
		font-size: 0.8rem;
		font-weight: 500;
		letter-spacing: 0.2em;
		color: var(--wp--preset--color--secondary);
		padding: 1rem 0 0.4rem;
	}

	/* Current page shows in gold — the menu doubles as wayfinding. */
	.hn-headerbar .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item__content[aria-current] {
		color: var(--wp--preset--color--secondary);
	}
}

/* Gentle staggered entrance, skipped for visitors who prefer reduced motion. */
@keyframes hnMenuItemIn {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
	.hn-headerbar .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__container > .wp-block-navigation-item {
		opacity: 0;
		animation: hnMenuItemIn 0.5s ease forwards;
	}

	.hn-headerbar .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__container > .wp-block-navigation-item:nth-child(1) { animation-delay: 0.06s; }
	.hn-headerbar .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__container > .wp-block-navigation-item:nth-child(2) { animation-delay: 0.12s; }
	.hn-headerbar .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__container > .wp-block-navigation-item:nth-child(3) { animation-delay: 0.18s; }
	.hn-headerbar .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__container > .wp-block-navigation-item:nth-child(4) { animation-delay: 0.24s; }
	.hn-headerbar .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__container > .wp-block-navigation-item:nth-child(5) { animation-delay: 0.30s; }
}

/* --- Size guide: the size list doubles as the image toggle --- */
/* Core's :where(.wp-block-columns) default margin-bottom (1.75em)
   collapses out of the wrappers and shows as a white strip before
   the footer — the band must sit flush. */
.wp-block-columns.hn-size-guide {
	margin-bottom: 0;
}

.hn-size-picker {
	margin-top: var(--wp--preset--spacing--40);
}

.hn-size-picker .hn-size-option {
	display: block;
	width: 100%;
	text-align: left;
	background: none;
	border: 0;
	border-left: 2px solid transparent;
	padding: 0.5rem 0 0.5rem 1rem;
	margin: 0 0 0.4rem;
	cursor: pointer;
	font-family: inherit;
	opacity: 0.55;
	transition: opacity 0.2s ease, border-color 0.2s ease;
}

.hn-size-picker .hn-size-option:hover,
.hn-size-picker .hn-size-option[aria-pressed="true"] {
	opacity: 1;
}

.hn-size-picker .hn-size-option[aria-pressed="true"] {
	border-left-color: var(--wp--preset--color--secondary);
}

.hn-size-picker .hn-size-name {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--contrast);
}

.hn-size-picker .hn-size-desc {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-2);
	margin-top: 2px;
}

/* --- Policy pages: label-left rows under a quiet hairline --- */
.hn-policy-row {
	border-top: 1px solid var(--wp--preset--color--base-2);
	padding-top: var(--wp--preset--spacing--40);
}

.hn-policy-list li {
	margin-bottom: 0.8em;
}

.hn-policy-list li > ul {
	margin-top: 0.8em;
}

/* --- FAQ accordion: quiet hairline rows, chevron that opens --- */
.hn-faq-section {
	margin-bottom: var(--wp--preset--spacing--30);
}

.hn-faq .wp-block-details {
	border-top: 1px solid var(--wp--preset--color--base-2);
}

.hn-faq .wp-block-details:last-child {
	border-bottom: 1px solid var(--wp--preset--color--base-2);
}

.hn-faq .wp-block-details > summary {
	list-style: none;
	cursor: pointer;
	position: relative;
	padding: var(--wp--preset--spacing--40) 2.2rem var(--wp--preset--spacing--40) 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.4;
	color: var(--wp--preset--color--contrast);
	transition: color 0.2s ease;
}

.hn-faq .wp-block-details > summary::-webkit-details-marker {
	display: none;
}

@media (hover: hover) {
	.hn-faq .wp-block-details > summary:hover {
		color: var(--wp--preset--color--secondary);
	}
}

/* Chevron indicator on the right, rotates when open */
.hn-faq .wp-block-details > summary::after {
	content: "";
	position: absolute;
	right: 0.4rem;
	top: calc(var(--wp--preset--spacing--40) + 0.55em);
	width: 0.6rem;
	height: 0.6rem;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	transform-origin: center;
	transition: transform 0.2s ease;
	opacity: 0.7;
}

.hn-faq .wp-block-details[open] > summary::after {
	transform: rotate(-135deg);
}

.hn-faq .wp-block-details[open] > summary {
	color: var(--wp--preset--color--secondary);
}

.hn-faq .wp-block-details > summary + * {
	margin-top: 0;
}

.hn-faq .wp-block-details > :not(summary) {
	color: var(--wp--preset--color--contrast-2);
}

.hn-faq .wp-block-details > p:last-child {
	margin-bottom: var(--wp--preset--spacing--50);
}

/* --- Buttons: smooth transitions + subtle hover lift --- */
.wp-element-button,
.wp-block-button__link {
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}

@media (hover: hover) {
	.wp-block-button__link:hover {
		transform: translateY(-2px);
	}
}

/* Hero "Explore collections" outline button: the transparent outline style can
   wash out over lighter parts of the hero image, so give it a translucent dark
   fill and a crisper white edge for legible contrast in every spot. */
.hn-hero-outline .wp-block-button__link {
	background-color: rgba(22, 22, 20, 0.32);
	border-color: rgba(255, 255, 255, 0.92);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}

@media (hover: hover) {
	.hn-hero-outline .wp-block-button__link:hover {
		background-color: rgba(22, 22, 20, 0.5);
	}
}

/* --- Reviews: a quiet hairline above each quote --- */
.hn-reviews .wp-block-column {
	border-top: 1px solid var(--wp--preset--color--base-2);
	padding-top: var(--wp--preset--spacing--50);
}

/* --- Collections grid: wrap to N per row (handles any number) ---
   !important needed: core block-library forces nowrap!important ≥782px.
   Cards per row is controlled by --hn-cols below: set it to 2 while there are
   four collections (a balanced 2x2), and bump it back to 3 once there are five
   or more so the grid fills out. Mobile always stacks 1-per-row via core CSS. */
.wp-block-columns.hn-collections {
	--hn-cols: 2;
	flex-wrap: wrap !important;
	gap: var(--wp--preset--spacing--50);
	justify-content: center;
}

.wp-block-columns.hn-collections > .wp-block-column {
	flex: 0 1 calc((100% - (var(--hn-cols) - 1) * var(--wp--preset--spacing--50)) / var(--hn-cols));
}

/* --- Collection cards: gradient label, whole-card link, hover zoom --- */
.hn-collection-card {
	overflow: hidden;
}

/* Card labels read as labels, not section headings */
.hn-collection-card .wp-block-heading {
	font-size: var(--wp--preset--font-size--medium);
}

/* Core renders the cover overlay span at opacity .5, halving the
   gradient — run it at full strength so the alpha in the markup is
   what actually shows */
.hn-collection-card .wp-block-cover__background {
	opacity: 1;
}

.hn-collection-card a {
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

/* Make the whole card — image included — a single click target. The heading's
   stretched link (a::after, inset:0) anchors to its nearest positioned ancestor,
   which is the cover's inner container. By default that container shrink-wraps to
   the bottom-left label, so the overlay only covered the label. Stretch the inner
   container across the whole card (kept positioned, so it still stacks above the
   gradient) and re-pin the label to bottom-left within it — now the overlay, and
   the click, cover the image too. */
.hn-collection-card .wp-block-cover__inner-container {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	padding: var(--wp--preset--spacing--40);
}

/* Stretch the heading link across the whole card so it is all clickable. */
.hn-collection-card a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.hn-collection-card .wp-block-cover__image-background {
	transition: transform 0.6s ease;
}

@media (hover: hover) {
	.hn-collection-card:hover .wp-block-cover__image-background {
		transform: scale(1.05);
	}
}

/* --- Frame options gallery (parts/frame-guide.html): five finishes in a row,
   wrapping to 3 then 2 on smaller screens --- */
.wp-block-columns.hn-frames {
	flex-wrap: wrap !important;
	gap: var(--wp--preset--spacing--50);
	justify-content: center;
	margin-top: var(--wp--preset--spacing--60);
}

.wp-block-columns.hn-frames > .wp-block-column {
	flex: 0 1 calc((100% - 4 * var(--wp--preset--spacing--50)) / 5);
	min-width: 150px;
}

@media (max-width: 900px) {
	.wp-block-columns.hn-frames > .wp-block-column {
		flex-basis: calc((100% - 2 * var(--wp--preset--spacing--50)) / 3);
	}
}

@media (max-width: 600px) {
	.wp-block-columns.hn-frames > .wp-block-column {
		flex-basis: calc((100% - var(--wp--preset--spacing--50)) / 2);
	}
}

.hn-frame-card {
	margin: 0 0 0.7em;
}

.hn-frame-card img {
	width: 100%;
	border-radius: 2px;
}

.hn-frame-name {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.hn-frame-desc {
	margin: 0.15em 0 0;
	font-size: var(--wp--preset--font-size--small);
}

/* --- Product grid: editorial cards with lifestyle hover-swap --- */
ul.products li.product {
	position: relative;
	text-align: left;
	transition: transform 0.3s ease;
}

/* Image wrapper crops the hover zoom and stacks the two images.
   .hn-loop-thumb is output by hugonorth_loop_thumbnail() in functions.php;
   the secondary image is the product's first gallery image (lifestyle ->
   clean), and is absent (so nothing swaps) when there is no gallery image. */
.hn-loop-thumb {
	position: relative;
	overflow: hidden;
	margin-bottom: 0.6em;
	/* Lock every card to a square. Today's WooCommerce thumbnails are already
	   square, so this is invisible now — but it keeps the grid perfectly
	   aligned if a non-square featured image is ever uploaded, instead of one
	   card growing taller than its neighbours. */
	aspect-ratio: 1 / 1;
}

.hn-loop-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
}

/* WooCommerce block grids (e.g. "New in store" on the basket page) don't lock
   their thumbnails, so the cards collapse until each image loads and the row
   jumps as they arrive. Reserve a square up front — same idea as .hn-loop-thumb
   above — so the layout is stable from first paint. The link and wrapper must be
   full-width blocks for the aspect-ratio to resolve before the image loads. */
.wc-block-grid__product-link {
	display: block;
	width: 100%;
}

.wc-block-grid__product-image {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.wc-block-grid__product-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
}

/* Secondary image waits off to the right, then slides across on hover. */
.hn-loop-thumb .hn-secondary-image {
	position: absolute;
	inset: 0;
	transform: translateX(100%);
	transition: transform 0.5s ease;
	pointer-events: none;
}

/* Canonical product-card title. The .woocommerce prefix is needed to outrank
   woocommerce-blocktheme.css (which forces 1.2em); 1rem is the site-wide card
   title size — see the matching block-grid rules on the basket. */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 350;
	font-size: 1rem;
	line-height: 1.2;
	margin-top: 0;
	margin-bottom: 0.15em;
	/* Reserve two lines so a single-line title (e.g. "Curiosity") holds the same
	   height as a wrapped one (e.g. "Peonies & Hydrangeas"), keeping the price
	   aligned across a row. min-height, not height, so an unusually long title
	   can still grow rather than clip. 2 lines = 2 x line-height (1.2). */
	min-height: 2.4em;
}

/* Product names stay in normal case (override the uppercase heading style) */
ul.products li.product .woocommerce-loop-product__title,
.woocommerce div.product .product_title {
	text-transform: none;
	letter-spacing: 0;
}

ul.products li.product .price {
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.2;
	margin: 0;
}

/* Subtle hover lift; the secondary image slides across (cards rest as
   image + title + price). */
@media (hover: hover) {
	ul.products li.product:hover {
		transform: translateY(-4px);
	}

	ul.products li.product:hover .hn-loop-thumb .hn-secondary-image {
		transform: translateX(0);
	}
}

/* ============================================================
   Collection / shop archive — curated gallery
   ============================================================ */

.woocommerce-products-header {
	text-align: center;
	max-width: 760px;
	margin: 0 auto var(--wp--preset--spacing--60);
	padding-top: var(--wp--preset--spacing--40);
}

/* Eyebrow above the collection name */
.woocommerce-products-header::before {
	content: "Fine Art Prints";
	display: block;
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--small);
	text-transform: uppercase;
	letter-spacing: 0.2em;
	margin-bottom: var(--wp--preset--spacing--30);
}

.woocommerce-products-header__title.page-title {
	font-size: var(--wp--preset--font-size--x-large);
	margin: 0 0 0.4em;
}

.woocommerce-products-header .term-description {
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--medium);
	text-align: center;
}

.woocommerce-products-header .term-description p:last-child {
	margin-bottom: 0;
}

/* Long-form content pages (Privacy Policy, and any other default-template page):
   the theme gives every heading one identical style, so h2 section headings and
   h3 sub-headings render the same size with no gap. Restore a clear hierarchy and
   vertical rhythm. Scoped to .hn-page so bespoke templates are untouched. */
.hn-page h2.wp-block-heading {
	font-size: var(--wp--preset--font-size--large);
	margin-top: 2.75rem;
	margin-bottom: 0.6rem;
}

.hn-page h3.wp-block-heading {
	font-size: 1.4rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--contrast-2);
	margin-top: 1.9rem;
	margin-bottom: 0.4rem;
}

.hn-page .wp-block-post-content > *:first-child {
	margin-top: 0;
}

/* Shop / Best Sellers branded intro + collection quick-nav chips */
.hn-shop-intro {
	margin: 0 auto;
	max-width: 620px;
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--medium);
}

/* Collection quick-nav strip: sits below the hero. Slate pill, gold stroke,
   white text (inverts to a gold fill on hover). */
.hn-shop-chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6em;
	max-width: 900px;
	margin: 0 auto var(--wp--preset--spacing--60);
}

.hn-shop-chip {
	display: inline-block;
	padding: 0.55em 1.25em;
	border: 1px solid var(--wp--preset--color--secondary);
	border-radius: 999px;
	background-color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.04em;
	color: #fff;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

@media (hover: hover) {
	.hn-shop-chip:hover {
		background-color: var(--wp--preset--color--secondary);
		border-color: var(--wp--preset--color--secondary);
		color: var(--wp--preset--color--primary);
	}
}

/* --- Shop / Best Sellers: strong hero banner --- */
/* The WooCommerce archive header becomes a full-bleed hero: a lifestyle image
   sits behind it (via ::after), with the eyebrow / title / intro / chips in
   light text on top. Scoped to the main shop archive only (collections keep
   their plain, on-white intro). */
.post-type-archive-product .woocommerce-products-header {
	position: relative;
	z-index: 0;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* Fixed depth + centred content so Shop All and Best Sellers match regardless
	   of how many lines their intro runs to. */
	min-height: 600px;
	max-width: 640px;
	margin: 0 auto var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	color: #fff;
}

.post-type-archive-product .woocommerce-products-header::after {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	/* Centre-weighted scrim: darkest through the middle where the eyebrow, title
	   and intro sit (over the pale framed print), lifting again top and bottom so
	   the room still reads. Replaces the flat 0.32 wash that left "Shop" faint. */
	background-image:
		linear-gradient(
			180deg,
			rgba(20, 22, 25, 0.3) 0%,
			rgba(20, 22, 25, 0.55) 50%,
			rgba(20, 22, 25, 0.3) 100%
		),
		url("/wp-content/themes/1ClickPrint/assets/images/hero-living-room.webp");
	background-size: cover;
	background-position: center 40%;
}

/* Clip the outer template main so the 100vw hero adds no horizontal scrollbar,
   and drop its top padding so the hero sits flush under the announcement bar
   (the inline template padding needs !important to override). */
.post-type-archive-product main.wp-block-group {
	overflow-x: clip;
	padding-top: 0 !important;
}

/* Hero text reads light on the image */
.post-type-archive-product .woocommerce-products-header::before {
	color: rgba(255, 255, 255, 0.85);
}

.post-type-archive-product .woocommerce-products-header__title.page-title {
	color: #fff;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.post-type-archive-product .hn-shop-intro {
	color: #fff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.38);
}

/* Hugo's signature beneath the collection intro */
.hn-signature {
	display: block;
	width: 190px;
	max-width: 55%;
	height: auto;
	margin: var(--wp--preset--spacing--40) auto 0;
}

/* Refined sort control */
.woocommerce .woocommerce-ordering {
	margin-bottom: var(--wp--preset--spacing--50);
}

.woocommerce .woocommerce-ordering select {
	padding: 0.6em 0.9em;
	border: 1px solid var(--wp--preset--color--base-2);
	border-radius: 2px;
	background-color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
}

/* Gallery grid: centred, so partial last rows sit in the middle too */
.woocommerce ul.products {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wp--preset--spacing--60) 3.8%;
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: 0;
	list-style: none;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
	display: none;
}

.woocommerce ul.products li.product {
	float: none !important;
	clear: none !important;
	width: 22% !important;
	margin: 0 !important;
}

/* Tablet: 3 across (4-up gets cramped and wraps titles below ~1024px) */
@media (max-width: 1024px) {
	.woocommerce ul.products li.product {
		width: 30.5% !important;
	}
}

/* Phones: 2 across */
@media (max-width: 600px) {
	.woocommerce ul.products {
		gap: var(--wp--preset--spacing--50) 6%;
	}

	.woocommerce ul.products li.product {
		width: 47% !important;
	}
}

/* Shop / Best Sellers: 3 large columns (2 on phones). Card title stays at the
   canonical 1rem — no size override here, so every grid on the site matches. */
.woocommerce.post-type-archive-product ul.products li.product {
	width: 30.5% !important;
}

@media (max-width: 600px) {
	.woocommerce.post-type-archive-product ul.products li.product {
		width: 47% !important;
	}
}

/* Related products: size the cards to how many actually relate, so a short
   related list reads as a deliberate 2-up / 3-up rather than a sparse row of
   small cards adrift in a 4-wide grid (e.g. a product in a 3-item category has
   only 2 related). Uses :has() quantity queries, scoped to .related.products so
   the shop / collection archives keep their fixed columns. Browsers without
   :has() simply fall back to the default sizing. */
@media (min-width: 1025px) {
	.related.products ul.products:has(li.product:nth-child(2):last-child) li.product {
		width: 48% !important;
	}

	.related.products ul.products:has(li.product:nth-child(3):last-child) li.product,
	.related.products ul.products:has(li.product:nth-child(1):last-child) li.product {
		width: 30.5% !important;
	}
}

@media (min-width: 601px) and (max-width: 1024px) {
	.related.products ul.products:has(li.product:nth-child(2):last-child) li.product,
	.related.products ul.products:has(li.product:nth-child(1):last-child) li.product {
		width: 48% !important;
	}
}

/* Collection archives: fit the column count to how many prints the collection
   holds, so every row is complete rather than trailing off with empty slots —
   the same :has() quantity trick as .related.products, extended to product_cat
   archives. Only counts that divide cleanly are remapped (e.g. 3/6/9 -> 3-up);
   any other count keeps the default columns and, because the grid is
   justify-content:center, its leftover row simply sits centred. Shop All /
   Best Sellers (post-type-archive-product) are paginated at 12 and keep their
   own fixed columns, so they're deliberately not touched here. */
@media (min-width: 1025px) {
	/* Default is 4-up. */
	.tax-product_cat ul.products:has(li.product:nth-child(2):last-child) li.product {
		width: 48% !important;
	}

	.tax-product_cat ul.products:has(li.product:nth-child(3):last-child) li.product,
	.tax-product_cat ul.products:has(li.product:nth-child(6):last-child) li.product,
	.tax-product_cat ul.products:has(li.product:nth-child(9):last-child) li.product {
		width: 30.5% !important;
	}
}

@media (min-width: 601px) and (max-width: 1024px) {
	/* Default is 3-up; 2 and 4 sit better as a full 2-up (2 x 2). */
	.tax-product_cat ul.products:has(li.product:nth-child(2):last-child) li.product,
	.tax-product_cat ul.products:has(li.product:nth-child(4):last-child) li.product {
		width: 48% !important;
	}
}

/* Centre the page title on WooCommerce cart/checkout/account pages. Cart &
   checkout use WooCommerce's own block templates (an alignwide post-title), so
   the page.html change doesn't reach them — do it in CSS for all three.
   Generous margins here give the title room to breathe under the sticky
   announcement bar and open a clear gap before the content below. */
.woocommerce-cart .wp-block-post-title,
.woocommerce-checkout .wp-block-post-title,
.woocommerce-account .wp-block-post-title {
	text-align: center;
	margin-top: var(--wp--preset--spacing--70);
	margin-bottom: var(--wp--preset--spacing--60);
}

/* Let the basket sit off the footer rather than butting against it. */
.woocommerce-cart .wp-block-woocommerce-cart {
	margin-bottom: var(--wp--preset--spacing--80);
}

/* Centre WooCommerce section headings (e.g. "Login" on My account, cart
   cross-sell headings) to sit under the now-centred page title. */
.woocommerce-account .woocommerce h2,
.woocommerce-cart .woocommerce h2 {
	text-align: center;
}

/* ============================================================
   Basket page (WooCommerce Cart block)
   ------------------------------------------------------------
   The Cart block ships very plain. Dress it up to match the
   gallery aesthetic: each print reads as framed art, the totals
   sit in a quiet summary card, and the empty state drops
   WooCommerce's off-brand crying-face emoji for clean type.
   ============================================================ */

/* Column header ("Product … Total"): a quiet uppercase gallery label
   with a firm rule beneath it. */
.wc-block-cart-items {
	border: 0;
}

.wc-block-cart-items__header th {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--contrast-2);
	border-bottom: 1px solid var(--wp--preset--color--contrast);
	padding-bottom: 1em;
}

/* Line-item rows: generous rhythm, hairline separators. */
.wc-block-cart-items__row {
	border-bottom: 1px solid var(--wp--preset--color--base-2);
}

.wc-block-cart-items__row td {
	padding-top: var(--wp--preset--spacing--40);
	padding-bottom: var(--wp--preset--spacing--40);
}

/* Framed thumbnails — larger than the default 80px, with a hairline
   border and soft shadow so each print looks like a piece of art on a
   wall rather than a tiny icon. Height stays auto to keep the source
   aspect ratio. */
.wc-block-cart-item__image {
	padding-right: var(--wp--preset--spacing--30);
}

.wc-block-cart-item__image img {
	width: 104px;
	max-width: none;
	height: auto;
	border: 1px solid var(--wp--preset--color--base-2);
	border-radius: 2px;
	box-shadow: 0 8px 22px rgba(43, 48, 52, 0.10);
}

/* Product title in the display face; the per-line price and the
   variation meta stay quiet beneath it. */
.wc-block-components-product-name {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.2rem;
	font-weight: 500;
	line-height: 1.25;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.wc-block-components-product-name:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.wc-block-cart-item__product .wc-block-components-product-metadata {
	margin-top: 0.35em;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-2);
}

.wc-block-cart-item__prices .wc-block-components-product-price {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-2);
}

.wc-block-cart-item__total .wc-block-components-product-price {
	font-weight: 500;
	color: var(--wp--preset--color--contrast);
}

/* Quantity stepper: squared to match the theme's buttons. */
.wc-block-components-quantity-selector {
	max-width: 104px;
	margin-top: 0.9em;
	border: 1px solid var(--wp--preset--color--base-2);
	border-radius: 2px;
}

.wc-block-components-quantity-selector__input {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast);
}

.wc-block-components-quantity-selector__button {
	color: var(--wp--preset--color--contrast-2);
}

.wc-block-components-quantity-selector__button:hover {
	color: var(--wp--preset--color--contrast);
}

/* Remove link: muted until hovered, then the brand gold. */
.wc-block-cart-item__remove-link {
	margin-top: 0.6em;
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
	color: var(--wp--preset--color--contrast-2) !important;
}

.wc-block-cart-item__remove-link:hover {
	color: var(--wp--preset--color--secondary) !important;
}

/* Totals sidebar → a quiet summary card that anchors the page. */
.wp-block-woocommerce-cart-totals-block {
	padding: var(--wp--preset--spacing--40);
	background: #fff;
	border: 1px solid var(--wp--preset--color--base-2);
	border-radius: 3px;
	box-shadow: 0 10px 30px rgba(43, 48, 52, 0.06);
}

.wc-block-cart__totals-title {
	margin-bottom: 0.6em;
	font-family: var(--wp--preset--font-family--sans) !important;
	font-size: var(--wp--preset--font-size--small) !important;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--contrast-2);
}

.wc-block-components-totals-item {
	color: var(--wp--preset--color--contrast-2);
}

/* Estimated-total footer row: the figure in the display face so it carries
   weight (the summary card is kept line-free — see the border reset below). */
.wc-block-components-totals-footer-item {
	margin-top: 0.4em;
	padding-top: 1em;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
	color: var(--wp--preset--color--contrast);
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.35rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}

.wc-block-cart__submit-button.contained {
	padding-top: 1.15em;
	padding-bottom: 1.15em;
	letter-spacing: 0.1em;
	border-radius: 2px;
	transition: background-color 0.2s ease;
}

.wc-block-cart__submit-button.contained:hover {
	background-color: var(--wp--preset--color--primary);
}

.wc-block-components-panel__button {
	color: var(--wp--preset--color--contrast) !important;
}

/* Keep the summary card line-free: WooCommerce rules the order-summary
   sub-blocks off from each other with hairline borders (under "Basket totals",
   around the coupon, above "Estimated total"). Strip them so the card reads as
   one calm block — the input box and button outlines keep their own borders. */
.wp-block-woocommerce-cart-totals-block [class*="cart-order-summary"],
.wp-block-woocommerce-cart-totals-block .wc-block-components-totals-wrapper,
.wp-block-woocommerce-cart-totals-block .wc-block-components-totals-footer-item {
	border-top: 0;
	border-bottom: 0;
}

/* Coupon field is opened (and kept open) on the cart page via a small script
   in functions.php, so present "Add coupons" as a permanent label rather than
   a collapsible: no chevron, no toggle cursor. */
.wc-block-components-totals-coupon .wc-block-components-panel__button-icon {
	display: none;
}

.wc-block-components-totals-coupon .wc-block-components-panel__button {
	cursor: default;
}

/* Empty basket: bin WooCommerce's crying-face emoji and let the type +
   gold dotted rule carry the moment, then "New in store" below. */
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
	display: none !important;
}

.wc-block-cart__empty-cart__title {
	margin-top: var(--wp--preset--spacing--50);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
	color: var(--wp--preset--color--contrast);
}

.wp-block-woocommerce-empty-cart-block .is-style-dots {
	max-width: 200px;
	margin: 1.6em auto 2.6em;
	color: var(--wp--preset--color--secondary);
}

/* Empty basket "New in store" grid uses WooCommerce's legacy Newest Products
   block, which ships default cards: a tiny sans title and an add-to-basket
   button. Bring it in line with the site's button-less gallery cards and the
   filled basket's "You may also like" row — drop the button, set the title in
   the display face. (Thumbnails are already squared by the global
   .wc-block-grid__product-image rule.) */
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart {
	display: none;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-title {
	margin: var(--wp--preset--spacing--30) 0 0.15em;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1rem;
	font-weight: 350;
	line-height: 1.2;
	min-height: 2.4em;
	text-align: left;
	text-transform: none;
	letter-spacing: 0;
	color: var(--wp--preset--color--primary);
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-price {
	font-size: var(--wp--preset--font-size--small);
	text-align: left;
	color: var(--wp--preset--color--contrast-2);
}

/* "Continue shopping" — a gold outline button in the summary card, directly
   under "Proceed to checkout": the calm secondary action to the checkout's
   dominant one, matching its width and uppercase weight. */
.hn-continue-shopping.wp-block-buttons {
	margin-top: 0.85rem;
}

.hn-continue-shopping .wp-block-button {
	width: 100%;
	margin: 0;
}

.hn-continue-shopping .wp-block-button__link {
	display: block;
	width: 100%;
	padding: 1.15em 1em;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--secondary);
	background: transparent;
	border: 1px solid var(--wp--preset--color--secondary);
	border-radius: 2px;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.hn-continue-shopping .wp-block-button__link:hover,
.hn-continue-shopping .wp-block-button__link:focus {
	color: #fff;
	background: var(--wp--preset--color--secondary);
	border-color: var(--wp--preset--color--secondary);
}

/* Basket layout: the items list (60%) and the totals card (40%) share the top
   row, with "You may also like" as a full-width band beneath them. The related
   block is moved (in the page content) out of the items column to be the last
   child of the filled-cart flex container. Scoped to the block's wide
   (is-large) state so the narrow layout keeps WooCommerce's stacking. */
.wc-block-cart.is-large .wc-block-cart__main {
	flex: 1 1 60%;
	max-width: 60%;
}

.wc-block-cart.is-large .wc-block-cart__sidebar {
	flex: 1 1 40%;
	max-width: 40%;
}

.wc-block-cart .hn-related-fullwidth {
	flex: 1 0 100%;
	max-width: 100%;
	width: 100%;
}

/* "You may also like" — a full-width row of related prints beneath the basket,
   auto-filled from the same collection as the basket items (see the
   cross-sells fallback in functions.php). Set off with a hairline rule and a
   centred display heading, echoing the empty basket's "New in store" row. */
.wp-block-woocommerce-cart .wp-block-woocommerce-product-collection {
	margin-top: var(--wp--preset--spacing--70);
	padding-top: var(--wp--preset--spacing--60);
	border-top: 1px solid var(--wp--preset--color--base-2);
}

.wp-block-woocommerce-cart .wp-block-woocommerce-product-collection .wp-block-heading {
	margin-bottom: var(--wp--preset--spacing--50);
	font-family: var(--wp--preset--font-family--display);
	text-align: left;
}

/* Match the rest of the site's product rows (shop, PDP related): the discovery
   sections read left-aligned, and their card titles + prices sit left in normal
   case — not the centred, uppercase heading treatment the blocks inherit by
   default. "New in store" heading is targeted without touching the centred
   "Your basket is currently empty!" message above it. */
.wp-block-woocommerce-empty-cart-block
	.wp-block-heading.has-text-align-center:not(.wc-block-cart__empty-cart__title) {
	text-align: left;
}

.hn-related-fullwidth .wp-block-post-title,
.hn-related-fullwidth .wp-block-post-title a,
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-title {
	text-align: left;
	text-transform: none;
	letter-spacing: 0;
}

/* "You may also like" title → the canonical card title (1rem Montserrat 350,
   primary), with a two-line min-height so prices align across the row. */
.hn-related-fullwidth .wp-block-post-title,
.hn-related-fullwidth .wp-block-post-title a {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1rem;
	font-weight: 350;
	line-height: 1.2;
	color: var(--wp--preset--color--primary);
}

.hn-related-fullwidth .wp-block-post-title {
	min-height: 2.4em;
}

/* No underline on the card links — the shop-loop cards have none. */
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-link,
.hn-related-fullwidth .wp-block-post-title a {
	text-decoration: none;
}

.hn-related-fullwidth .wc-block-components-product-price,
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-price {
	font-size: var(--wp--preset--font-size--small);
	text-align: left;
	color: var(--wp--preset--color--contrast-2);
}

/* Related cards: lock each thumbnail to a square so every card's image is the
   same height and the columns line up (the add-to-basket button is removed in
   the page content to match the site's button-less gallery cards). */
.hn-related-fullwidth .wc-block-components-product-image {
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.hn-related-fullwidth .wc-block-components-product-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ============================================================
   Checkout page (WooCommerce Checkout block)
   ------------------------------------------------------------
   Bring the checkout in line with the basket: the order summary sits in the
   same quiet white card, the hairline section dividers are stripped, and a
   brand reassurance panel fills the sidebar so the right column doesn't read
   as empty next to the (necessarily long) form.
   ============================================================ */

/* Order summary → white summary card, matching the basket totals. */
.wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block {
	padding: var(--wp--preset--spacing--40);
	background: #fff;
	border: 1px solid var(--wp--preset--color--base-2);
	border-radius: 3px;
	box-shadow: 0 10px 30px rgba(43, 48, 52, 0.06);
}

/* One order summary on mobile. WooCommerce shows its collapsible summary in the
   sidebar AND a second "fill" copy down by the Place Order actions once the
   checkout container drops below 700px — a duplicate. Keep the collapsible
   dropdown at the top (total up front) and hide the fill copy. Uses the same
   700px container query WooCommerce uses, so desktop (where the fill copy is
   already display:none) is untouched. */
@container (max-width: 699px) {
	.checkout-order-summary-block-fill-wrapper {
		display: none !important;
	}
}

/* Strip the hairline dividers between the summary's sub-blocks. */
.wc-block-checkout__sidebar .wc-block-components-totals-wrapper,
.wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-coupon-form-block,
.wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-subtotal-block,
.wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-totals-block,
.wc-block-checkout__sidebar .wc-block-components-totals-footer-item {
	border-top: 0;
	border-bottom: 0;
}

/* Total in the display face, echoing the basket's estimated total. */
.wc-block-checkout__sidebar .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	color: var(--wp--preset--color--contrast);
}

.wc-block-checkout__sidebar .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.35rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}

/* Reassurance panel beneath the summary — reinstates the trust points from the
   announcement bar (hidden on the distraction-free checkout header) and fills
   the sidebar void. Block added in the checkout page content. */
.hn-checkout-trust {
	margin-top: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--base-2);
	border-radius: 3px;
}

.hn-checkout-trust .wp-block-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.hn-checkout-trust .wp-block-list li {
	margin: 0 0 0.7em 0;
	padding-left: 1.5em;
	position: relative;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
	color: var(--wp--preset--color--contrast-2);
}

.hn-checkout-trust .wp-block-list li:last-child {
	margin-bottom: 0;
}

.hn-checkout-trust .wp-block-list li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	color: var(--wp--preset--color--secondary);
	font-weight: 700;
}

/* Checkout sign-off: a single non-clickable brand band (framing photo + a
   made-in-Yorkshire line + Hugo's signature) so the page has a warm, finished
   bottom without product links to tempt an exit mid-payment. Sits on a
   full-width light-grey ground (the group is alignfull) to set the whole
   bottom section apart from the off-white form above. */
.hn-checkout-signoff {
	background: var(--wp--preset--color--base-2);
}

/* The checkout's post-content is capped at wideSize, so `alignfull` can't
   reach the edges on its own. Break both bottom-section bands out by the root
   padding — the same edge the site's other full-width sections sit against —
   without the horizontal-scroll a 100vw hack would cause. */
.hn-checkout-signoff,
.hn-checkout-trustbar {
	margin-left: calc(-1 * var(--wp--style--root--padding-left));
	margin-right: calc(-1 * var(--wp--style--root--padding-right));
}

.hn-checkout-signoff .hn-signoff-image {
	margin: 0;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: 2px;
}

.hn-checkout-signoff .hn-signoff-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hn-checkout-signoff h2 {
	margin: 0.1em 0 0.4em;
	font-size: 1.6rem;
	line-height: 1.2;
}

.hn-checkout-signoff .hn-signoff-signature {
	margin-left: 0;
	margin-right: auto;
}

/* Slim trust strip under the sign-off: quiet, uppercase, non-distracting.
   Continues the same grey ground (no top margin, so it abuts the sign-off as
   one section) with a faint divider between the two. */
.hn-checkout-trustbar {
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	gap: 0.5em 2.2em;
	background: var(--wp--preset--color--base-2);
	border-top: 1px solid rgba(43, 48, 52, 0.08);
}

.hn-checkout-trustbar p {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--contrast-2);
}

.hn-checkout-trustbar a {
	color: var(--wp--preset--color--secondary);
	text-decoration: none;
}

.hn-checkout-trustbar a:hover {
	text-decoration: underline;
}

/* ============================================================
   Single product page
   ============================================================ */

.woocommerce .woocommerce-breadcrumb {
	margin-bottom: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-2);
}

.woocommerce div.product div.summary {
	padding-left: var(--wp--preset--spacing--30);
}

.woocommerce div.product .product_title {
	font-size: var(--wp--preset--font-size--x-large);
	margin: 0 0 0.3em;
}

/* Prominent single-product price */
.woocommerce div.product p.price,
.woocommerce div.product div.summary .price {
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--medium);
	margin-bottom: 1.2em;
}

/* First-order offer under the price (hugonorth_pdp_offer), matching the
   Facebook ads, with a tap-to-copy code. */
.woocommerce div.product div.summary .price + .hn-pdp-offer,
.hn-pdp-offer {
	margin: -0.6em 0 1.4em;
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--wp--preset--color--contrast-2);
}

.hn-offer-code {
	position: relative;
	margin: 0 0.15em;
	padding: 0.1em 0.5em;
	border: 1px dashed var(--wp--preset--color--secondary);
	border-radius: 2px;
	background: none;
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-weight: 600;
	letter-spacing: 0.05em;
	cursor: copy;
}

.hn-offer-code.is-copied::after {
	content: "Copied";
	position: absolute;
	left: 50%;
	bottom: calc(100% + 6px);
	transform: translateX(-50%);
	padding: 0.2em 0.6em;
	border-radius: 2px;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0;
	white-space: nowrap;
}

.hn-pdp-offer__from {
	white-space: nowrap;
}

/* Product gallery: WooCommerce hides the whole gallery (opacity 0) until its
   slider script has run, then fades it in, so the main photo, the page's
   largest element, stayed invisible until every script had loaded (about 4s
   on a phone). Show it immediately. Before the slider runs, WooCommerce's
   own CSS already lays the other photos out as small thumbnails under the
   main one, so the layout barely moves when the slider takes over (8px). */
.woocommerce div.product div.images.woocommerce-product-gallery {
	opacity: 1 !important;
}

/* Header offer banner: tighter letter-spacing on phones so it fits in two lines. */
@media (max-width: 480px) {
	.hn-offer-banner {
		letter-spacing: 0.04em !important;
	}
}

.woocommerce div.product div.summary .woocommerce-product-details__short-description {
	color: var(--wp--preset--color--contrast-2);
	margin-bottom: 1.5em;
}

/* Size selector */
.woocommerce div.product form.cart .variations {
	margin-bottom: 1.6em;
}

.woocommerce div.product form.cart .variations td.label,
.woocommerce div.product form.cart .variations th.label {
	font-size: var(--wp--preset--font-size--small);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.woocommerce div.product form.cart .variations select {
	padding: 0.7em 0.9em;
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 2px;
	background-color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--sans);
	min-height: 0;
}

/* ---- Variation swatches (Size pills + Finish framed-thumbnail swatches) ----
   The native <select>s are the source of truth and stay in the DOM; once the
   swatch UI is wired up (hugonorth_variation_swatches) they are visually hidden
   but remain accessible to WooCommerce. */
.hn-swatches-active .variations select {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	opacity: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	pointer-events: none;
}

/* Stacked layout: each option's label sits on its own line above its choices
   (with the chosen finish named beside it), instead of WooCommerce's two-column
   table, whose label and value cells never line up with pills and swatches. */
.woocommerce div.product form.hn-swatches-active .variations,
.woocommerce div.product form.hn-swatches-active .variations tbody,
.woocommerce div.product form.hn-swatches-active .variations tr,
.woocommerce div.product form.hn-swatches-active .variations th,
.woocommerce div.product form.hn-swatches-active .variations td {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
}

.woocommerce div.product form.hn-swatches-active .variations tr + tr {
	margin-top: 1.4em;
}

.woocommerce div.product form.hn-swatches-active .variations th.label {
	display: flex;
	align-items: baseline;
	gap: 0.7em;
	margin-bottom: 0.7em;
	line-height: 1.4;
	text-align: left;
}

.woocommerce div.product form.hn-swatches-active .variations th.label label {
	margin: 0;
	font-weight: 600;
}

/* The "Clear" reset link sits at the end of the last option's label line */
.woocommerce div.product form.hn-swatches-active .variations .reset_variations {
	margin-left: auto;
	font-size: 0.8rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--preset--color--contrast-2);
}

.hn-swatch-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	margin-top: 0.2em;
}

.hn-swatch {
	cursor: pointer;
	font-family: var(--wp--preset--font-family--sans);
	background: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Size pills */
.hn-swatch-row--pill {
	gap: 0.6rem;
}

.hn-swatch--pill {
	min-width: 3.4em;
	padding: 0.6em 1em;
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 2px;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.05em;
	line-height: 1;
}

.hn-swatch--pill.is-selected {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* Finish swatches: the artwork shown inside each frame style. The chosen
   finish's full name sits beside the "Finish" label. */
.hn-swatch-selected {
	font-size: 0.85rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--preset--color--contrast-2);
}

.hn-swatch-row--finish {
	gap: 0.95rem;
}

.hn-swatch--frame {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.45em;
	width: 66px;
	padding: 0;
	border: 0;
}

.hn-swatch__chip {
	position: relative;
	display: block;
	box-sizing: border-box; /* frame borders draw inside, so every swatch is the same size */
	width: 56px;
	height: 56px;
	border-radius: 2px;
	background-color: #ece8e0;
}

.hn-swatch__label {
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-2);
}

/* Frame styles (CSS only — no per-product photography needed). The border reads
   as the frame and the inner ring as the mat; unframed is a flat print and
   canvas a raised, wrapped block (directional shading gives it depth). */
.hn-frame-unframed {
	background: #fcfbf7;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.10), 0 4px 7px rgba(0, 0, 0, 0.06);
}

/* Turned-up corner: reads as a bare sheet of paper, distinct from canvas. */
.hn-frame-unframed::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	border-style: solid;
	border-width: 0 0 12px 12px;
	border-color: transparent transparent rgba(0, 0, 0, 0.14) transparent;
}

.hn-frame-canvas {
	background:
		repeating-linear-gradient(0deg, rgba(120, 100, 70, 0.06) 0 1px, transparent 1px 3px),
		repeating-linear-gradient(90deg, rgba(120, 100, 70, 0.06) 0 1px, transparent 1px 3px),
		#e6dcc7;
	box-shadow: inset -5px -5px 0 rgba(0, 0, 0, 0.10), inset 5px 5px 0 rgba(255, 255, 255, 0.5), 4px 5px 9px rgba(0, 0, 0, 0.22);
}

.hn-frame-black {
	border: 5px solid #17181a;
	box-shadow: inset 0 0 0 3px #fff;
}

.hn-frame-white {
	border: 5px solid #f7f7f4;
	box-shadow: inset 0 0 0 3px #e2e0d8, 0 0 0 1px #c4c4bd, 2px 3px 7px rgba(0, 0, 0, 0.16);
}

.hn-frame-natural {
	border: 5px solid #c69b64;
	box-shadow: inset 0 0 0 3px #fff;
}

/* Selected + hover + disabled states */
.hn-swatch--frame .hn-swatch__chip {
	outline: 2px solid transparent;
	outline-offset: 3px;
}

.hn-swatch--frame.is-selected .hn-swatch__chip {
	outline-color: var(--wp--preset--color--secondary);
}

.hn-swatch--frame.is-selected .hn-swatch__label {
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
}

@media (hover: hover) {
	.hn-swatch--frame:not(:disabled):hover .hn-swatch__chip {
		transform: translateY(-2px);
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.16);
	}

	.hn-swatch--pill:not(:disabled):hover {
		border-color: var(--wp--preset--color--contrast);
		background-color: var(--wp--preset--color--base-2);
	}
}

.hn-swatch:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

/* Phones: keep all five finishes on one row (they wrapped, stranding one on
   a line of its own) by sharing the width equally and shrinking the chips. */
@media (max-width: 480px) {
	.hn-swatch-row--finish {
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 0.5rem;
	}

	.hn-swatch--frame {
		width: auto;
	}

	.hn-swatch__chip {
		width: 100%;
		max-width: 56px;
		height: auto;
		aspect-ratio: 1;
	}

	.hn-swatch__label {
		font-size: 0.62rem;
		letter-spacing: 0.02em;
	}
}

/* Keyboard focus only (no browser focus box after a mouse click), drawn on the
   chip or pill itself in the theme's colours. */
.hn-swatch:focus {
	outline: none;
}

.hn-swatch--frame:focus-visible .hn-swatch__chip {
	outline-color: var(--wp--preset--color--contrast);
}

.hn-swatch--pill:focus-visible {
	outline: 2px solid var(--wp--preset--color--secondary);
	outline-offset: 2px;
}

/* Add-to-basket row: compact quantity + a dominant, full-width CTA. The row
   container differs by product type (variable products wrap it in
   .woocommerce-variation-add-to-cart), so both are laid out the same way. */
.woocommerce div.product form.cart:not(.variations_form),
.woocommerce div.product .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0.8em;
	margin-top: 0.4em;
}

.woocommerce div.product form.cart .quantity {
	flex: 0 0 auto;
	margin: 0;
}

.woocommerce div.product form.cart .quantity input.qty {
	box-sizing: border-box; /* padding inside the 100% height, so it matches the button */
	height: 100%;
	width: 4.5em;
	padding: 0.7em 0.5em;
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 2px;
	background-color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--sans);
	text-align: center;
}

/* Enabled: a confident, full-width purchase action (dark steel comes from the
   theme.json button element; here we give it presence and width). */
.woocommerce div.product form.cart .single_add_to_cart_button {
	flex: 1 1 auto;
	min-width: 55%;
	padding: 1.05em 2.6em;
	font-size: var(--wp--preset--font-size--small);
}

/* Disabled (variable product before Size + Finish are chosen): read as
   "waiting for your choice", not broken. Replace WooCommerce's 50%-opacity
   wash — which looks like a dead grey button — with an intentional, legible
   muted state that snaps to the solid dark CTA once options are selected. */
.woocommerce div.product form.cart .single_add_to_cart_button.disabled,
.woocommerce div.product form.cart .single_add_to_cart_button:disabled {
	opacity: 1;
	background-color: var(--wp--preset--color--base-2);
	color: var(--wp--preset--color--contrast-2);
	cursor: not-allowed;
	transform: none;
}

/* Stripe's express checkout (Apple Pay / Google Pay / Link) under the basket
   button: an "or" rule sets it apart as the quick alternative. The buttons
   themselves are Stripe iframes, so their look is set in the Stripe settings.
   Stripe lays the buttons out as a wrapping flex row (10px gap), so the rule is
   a full-width flex item on a line of its own above them. */
#wc-stripe-express-checkout-element {
	margin-top: 1.4em !important;
}

#wc-stripe-express-checkout-element::before {
	content: "or";
	display: block;
	flex: 0 0 100%;
	margin-bottom: 0.4em;
	background: linear-gradient(to right, rgba(0, 0, 0, 0.14) calc(50% - 1.6em), transparent calc(50% - 1.6em) calc(50% + 1.6em), rgba(0, 0, 0, 0.14) calc(50% + 1.6em)) no-repeat center / 100% 1px;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	line-height: 1.4;
	text-align: center;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-2);
}

/* Craft / trust list under the add-to-cart */
.hn-pdp-craft {
	list-style: none;
	margin: 1.6em 0 0;
	padding: 1.6em 0 0;
	border-top: 1px solid var(--wp--preset--color--base-2);
}

.hn-pdp-craft li {
	display: flex;
	align-items: center;
	gap: 0.75em;
	margin: 0 0 0.7em;
	font-size: var(--wp--preset--font-size--small);
}

.hn-pdp-craft li svg {
	color: var(--wp--preset--color--secondary);
	flex: 0 0 auto;
}

.hn-pdp-delivery {
	margin-top: 1.1em;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-2);
}

/* Product detail sections (replace the default WooCommerce tabs) */
.hn-pdp-sections {
	clear: both; /* drop below WooCommerce's floated gallery + summary so the band sits under them, not behind them */
	margin-top: var(--wp--preset--spacing--80);
}

/* "Hugo's Thoughts" — full-width tinted band echoing the collection "How it began".
   Breaks out of the constrained product column to the viewport edges; the clip on
   the product's <main> keeps that breakout from adding a horizontal scrollbar. */
.hn-pdp-full {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	background-color: var(--wp--preset--color--base-2);
	padding-top: var(--wp--preset--spacing--80);
	padding-bottom: var(--wp--preset--spacing--80);
}

/* Clip only the OUTER full-width template main (not WooCommerce's nested,
   content-width main.site-main — clipping that one cropped the band back to
   1200px). This lets the band break out through the inner wrappers and reach
   the viewport edges, while the outer main still absorbs the 100vw scrollbar. */
.single-product main.wp-block-group {
	overflow-x: clip;
}

.hn-pdp-thoughts-inner {
	max-width: 820px;
	margin: 0 auto;
	padding-left: var(--wp--preset--spacing--50);
	padding-right: var(--wp--preset--spacing--50);
}

.hn-eyebrow {
	margin: 0 0 var(--wp--preset--spacing--30);
	text-transform: uppercase;
	letter-spacing: 0.2em;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--secondary);
}

.hn-pdp-thoughts-title {
	margin: 0 0 var(--wp--preset--spacing--40);
}

.hn-pdp-thoughts-inner .hn-pdp-body {
	font-size: var(--wp--preset--font-size--medium);
}

.hn-pdp-thoughts-inner .hn-pdp-body > :first-child {
	margin-top: 0;
}

.hn-pdp-thoughts-inner .hn-pdp-body > :last-child {
	margin-bottom: 0;
}

/* Sign-off: Hugo's signature, centred under the reflection. */
.hn-pdp-signature {
	width: 150px;
	margin: var(--wp--preset--spacing--40) auto 0;
}

/* "Materials & framing / Delivery & returns" — two columns on the page ground */
.hn-pdp-details {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--preset--spacing--70);
	margin-top: var(--wp--preset--spacing--80);
}

/* Centre each text column within its grid cell (text stays left-aligned) */
.hn-pdp-detail {
	max-width: 400px;
	margin-inline: auto;
}

.hn-pdp-detail h3 {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--secondary);
}

.hn-pdp-detail p {
	margin: 0;
	color: var(--wp--preset--color--contrast-2);
}

@media (max-width: 781px) {
	.hn-pdp-details {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--40);
	}
}

/* Related products */
/* Page break between the Choose-your-finish band and the bottom Related Products */
.hn-page-break {
	margin-top: var(--wp--preset--spacing--80);
	margin-bottom: 0;
	border-top-color: var(--wp--preset--color--base-2);
	opacity: 1;
}

.woocommerce .related.products,
.woocommerce .upsells.products {
	margin-top: var(--wp--preset--spacing--80);
}

.woocommerce .related.products > h2,
.woocommerce .upsells.products > h2 {
	margin-bottom: var(--wp--preset--spacing--50);
}

/* ============================================================
   Footer
   ============================================================ */

/* Links read light on the ink background, gold on hover */
footer a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--base-2);
	text-decoration: none;
}

footer a:where(:not(.wp-element-button)):hover {
	color: var(--wp--preset--color--secondary);
}

/* Keep the "Subscribe" button on one line — it wrapped in the narrow footer
   column at tablet widths. */
footer .wp-block-button__link {
	white-space: nowrap;
}

.hn-footer-links {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
}

.hn-footer-links li {
	margin: 0 0 0.7em;
}

/* Thin divider above the copyright/legal row */
.hn-footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.hn-footer-bottom p {
	margin: 0;
}

/* Footer brand lockup: white emblem + wordmark */
.hn-footer-emblem {
	margin: 0;
	flex: 0 0 auto;
}

.hn-footer-brand .wp-block-site-title {
	margin: 0;
}

/* On mobile, drop the "Powered by 1ClickPrint" block to the very bottom of
   the stacked footer. The block is nested in the brand column, so we promote
   that column's children into the columns flex row (display:contents) and push
   the 1ClickPrint block last with flex order. Desktop layout is unchanged. */
@media (max-width: 781px) {
	.hn-footer-col-brand {
		display: contents;
	}

	.hn-footer-col-brand > * {
		flex-basis: 100%;
		width: 100%;
	}

	.hn-footer-powered {
		order: 1;
	}
}