/* Home Haven — theme styles on top of theme.json.
   Palette: black, white and the brass of the logo. */
:root {
	--ink: var(--wp--preset--color--ink);
	--stone: var(--wp--preset--color--stone);
	--brass: var(--wp--preset--color--brass);
	--brass-soft: var(--wp--preset--color--brass-soft);
	--muted: var(--wp--preset--color--muted);
	--line: var(--wp--preset--color--line);
	--display: var(--wp--preset--font-family--display);
	--gutter: clamp(16px, 4vw, 56px);
	--hh-header-h: 77px; /* header bar + its bottom border; the hero subtracts it to fill exactly one screen */
	--hh-admin-h: 0px;
	--ease: cubic-bezier(.2, .7, .2, 1);
}

body { -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; } /* keep the rule above from un-hiding WooCommerce's hidden elements */
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
main { display: block; }
.wp-site-blocks > * + * { margin-block-start: 0; }

.hh-label, .hh-footer-h {
	font: 500 11px/1.2 var(--wp--preset--font-family--body);
	letter-spacing: .18em; text-transform: uppercase;
}
.hh-muted { color: var(--muted); }
.hh-text-link, .hh-text-link a {
	font: 500 12px/1 var(--wp--preset--font-family--body); letter-spacing: .16em; text-transform: uppercase;
}
.hh-text-link a, a.hh-text-link { border-bottom: 1px solid currentColor; padding-bottom: 4px; }
.hh-stars { color: var(--brass); letter-spacing: 2px; font-size: 13px; }
.hh-icon { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--brass); stroke-width: 1.3; }

.hh-btn {
	display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 30px;
	font: 500 12px/1 var(--wp--preset--font-family--body); letter-spacing: .16em; text-transform: uppercase;
	background: var(--ink); color: #fff; transition: background .25s var(--ease);
}
.hh-btn:hover { background: #2b2722; color: #fff; }
.hh-btn-light { background: #fff; color: var(--ink); }
.hh-btn-light:hover { background: var(--brass-soft); color: var(--ink); }
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: rgba(255, 255, 255, .55); color: var(--ink); border: 0;
	box-shadow: inset 0 0 0 1px rgba(19, 17, 14, .35); padding: 19px 30px;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: #fff; box-shadow: inset 0 0 0 1px var(--ink); }

/* ---------- Header ---------- */
.hh-header-wrap { position: sticky; top: 0; z-index: 40; }
.admin-bar .hh-header-wrap { top: var(--wp-admin--admin-bar--height, 32px); }
/* Solid, no backdrop-filter: a filter here would trap the fixed mobile menu and cart drawer inside the header. */
.hh-header { background: #fff; border-bottom: 1px solid var(--line); }
.hh-header-inner > * { margin: 0 !important; align-self: center; }
.hh-header-inner {
	max-width: 1360px; margin: 0 auto; padding: 0 var(--gutter); height: 76px;
	display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
}
.hh-brand img { width: 56px; height: 56px; object-fit: contain; }
.hh-header .wp-block-navigation-item__content { position: relative; padding: 6px 0; }
.hh-header .wp-block-navigation-item__content::after {
	content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
	background: var(--brass); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.hh-header .wp-block-navigation-item__content:hover::after,
.hh-header .current-menu-item > .wp-block-navigation-item__content::after { transform: scaleX(1); }
.hh-header .wp-block-navigation-item__content:hover { color: inherit; }
.hh-nav-left .hh-mobile-only { display: none; }
.hh-header-right { justify-self: end; }
.hh-account svg { width: 22px; height: 22px; }
/* Search: an icon that opens a field (core search block, button-only). */
.hh-search { margin: 0 !important; }
.hh-search .wp-block-search__inside-wrapper { border: 0; padding: 0; background: #fff; align-items: center; }
.hh-search .wp-block-search__button { margin: 0; padding: 6px; border: 0; background: none; color: inherit; }
.hh-search .wp-block-search__button svg { width: 22px; height: 22px; min-width: 22px; fill: currentColor; }
.hh-search .wp-block-search__button:hover { color: var(--brass); }
.hh-search .wp-block-search__input {
	min-width: 0; padding: 6px 2px; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0;
	background: transparent; font: inherit; font-size: 14px; color: var(--ink);
}
.hh-search .wp-block-search__input:focus { outline: 0; border-bottom-color: var(--brass); }
.hh-search .wp-block-search__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; } /* browser's blue clear button */
.hh-search:not(.wp-block-search__searchfield-hidden) .wp-block-search__inside-wrapper { width: 240px !important; }
.wc-block-mini-cart__button { padding: 6px 0; font-size: 14px; }
.wc-block-mini-cart__icon { width: 24px; height: 24px; }
.wc-block-mini-cart__badge { background: var(--ink) !important; color: #fff !important; border: 0 !important; font-weight: 500; }

.admin-bar { --hh-admin-h: var(--wp-admin--admin-bar--height, 32px); }

@media (max-width: 860px) {
	:root { --hh-header-h: 65px; }
	.hh-header-inner { height: 64px; }
	.hh-brand img { width: 46px; height: 46px; }
	.hh-nav-right, .hh-account { display: none !important; }
	/* Open search covers the header row so the field has room on a phone. */
	.hh-header-inner { position: relative; }
	.hh-search:not(.wp-block-search__searchfield-hidden) .wp-block-search__inside-wrapper {
		position: absolute; z-index: 5; inset: 0 var(--gutter); width: auto !important; /* full row height, so the logo is fully covered */
	}
	.hh-search:not(.wp-block-search__searchfield-hidden) .wp-block-search__input { flex: 1; font-size: 16px; }
	.hh-nav-left .hh-mobile-only { display: block; }
	.hh-nav-left .wp-block-navigation__responsive-container-open { margin-left: -4px; }
	.hh-nav-left .wp-block-navigation__responsive-container-open svg { width: 26px; height: 26px; }
	.hh-nav-left .wp-block-navigation__responsive-container.is-menu-open { padding: 24px var(--gutter); }
	.hh-nav-left .is-menu-open .wp-block-navigation__container { gap: 0 !important; width: 100%; align-items: stretch !important; }
	.hh-nav-left .is-menu-open .wp-block-navigation-item {
		font-family: var(--display); font-weight: 500; font-size: 26px; border-bottom: 1px solid var(--line); width: 100%;
	}
	.hh-nav-left .is-menu-open .wp-block-navigation-item__content { padding: 12px 0; }
	.hh-nav-left .is-menu-open .wp-block-navigation-item__content::after { display: none; }
}

/* ---------- Header over the photo ----------
   On pages that open with a full-bleed photo (home, About), the header floats over it: white type on a
   soft shade, turning solid white once the page scrolls (theme.js adds .is-solid). Other pages keep the
   plain white header. Opening the menu or search also makes it solid. */
body:has(#main > .hh-hero:first-child, #main > .wp-block-post-content > .hh-about-hero:first-child) {
	--hh-header-h: 0px; /* the hero runs under the header, so it fills the whole screen */

	.hh-header-wrap { position: fixed; left: 0; right: 0; top: var(--hh-admin-h); }
	.hh-header { position: relative; background: transparent; border-bottom-color: transparent; color: #fff;
		transition: background-color .35s, color .35s, border-color .35s; }
	.hh-header::before { content: ''; position: absolute; inset: 0 0 -24px; z-index: -1; pointer-events: none;
		background: linear-gradient(to bottom, rgba(19, 17, 14, .55), rgba(19, 17, 14, 0)); transition: opacity .35s; }
	.hh-header-inner { transition: height .35s var(--ease); }
	.hh-brand img { filter: brightness(0) invert(1); transition: filter .35s, width .35s var(--ease), height .35s var(--ease); }
	.hh-header .wp-block-navigation-item__content::after { background: currentColor; }
	.hh-header .wp-block-navigation-item__content:hover { color: inherit; }
	.hh-search .wp-block-search__inside-wrapper { background: transparent; }
	.wc-block-mini-cart__button { color: inherit; }
	.wc-block-mini-cart__badge { background: #fff !important; color: var(--ink) !important; }

	.hh-header-wrap:is(.is-solid, :has(.is-menu-open, .hh-search:not(.wp-block-search__searchfield-hidden))) {
		.hh-header { background: #fff; color: var(--ink); border-bottom-color: var(--line); }
		.hh-header::before { opacity: 0; }
		.hh-brand img { filter: none; }
		.hh-header .wp-block-navigation-item__content::after { background: var(--brass); }
		.hh-search .wp-block-search__inside-wrapper { background: #fff; }
		.wc-block-mini-cart__badge { background: var(--ink) !important; color: #fff !important; }
	}
	.hh-header-wrap.is-solid {
		.hh-header-inner { height: 64px; }
		.hh-brand img { width: 46px; height: 46px; }
	}
	.wp-block-navigation__responsive-container.is-menu-open { color: var(--ink); }
}
@media (max-width: 860px) {
	body:has(#main > .hh-hero:first-child, #main > .wp-block-post-content > .hh-about-hero:first-child) .hh-header-wrap.is-solid .hh-header-inner { height: 56px; }
	body:has(#main > .hh-hero:first-child, #main > .wp-block-post-content > .hh-about-hero:first-child) .hh-header-wrap.is-solid .hh-brand img { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
	.hh-header, .hh-header::before, .hh-header-inner, .hh-brand img { transition: none !important; }
}

/* ---------- Hero ----------
   The photo fills the whole hero; type sits bottom-left on a shade that darkens toward that
   corner, so the bowls stay bright on the right. Rating and the "shown" link sit bottom-right.
   Header + hero fill exactly one screen. min-height only kicks in if the copy can't fit
   (a phone held sideways), so the text is never cut off. */
.hh-hero {
	position: relative; display: flex; align-items: flex-end; overflow: hidden; background: var(--ink); color: #fff;
	height: calc(100vh - var(--hh-header-h) - var(--hh-admin-h));
	height: calc(100svh - var(--hh-header-h) - var(--hh-admin-h));
	min-height: min-content;
}
.hh-hero > * { margin-block: 0 !important; }
.hh-hero .hh-hero-img { position: absolute; inset: 0; margin: 0; }
.hh-hero .hh-hero-img img {
	width: 100%; height: 100%; object-fit: cover; object-position: center 55%;
	transform: scale(1.04); animation: hh-hero-in 2.4s var(--ease) forwards;
}
@keyframes hh-hero-in { to { transform: none; } }
.hh-hero::before {
	content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background:
		linear-gradient(to top, rgba(19, 17, 14, .78) 0%, rgba(19, 17, 14, .35) 38%, rgba(19, 17, 14, 0) 65%),
		linear-gradient(to right, rgba(19, 17, 14, .55), rgba(19, 17, 14, 0) 60%);
}
.hh-hero-copy {
	position: relative; z-index: 2; width: 100%; padding: 0 var(--gutter) clamp(40px, 7vh, 80px);
	display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap;
}
.hh-hero-copy > *, .hh-hero-main > *, .hh-hero-side > * { margin: 0; }
.hh-eyebrow { color: var(--brass-soft); margin-bottom: 20px !important; }
.hh-hero h1 { font-size: clamp(40px, min(6.4vw, 11svh), 104px); line-height: 1.02; letter-spacing: 0; max-width: 11ch; color: #fff; margin-bottom: 22px !important; }
.hh-hero h1 em { font-style: normal; color: var(--brass-soft); }
.hh-hero-sub { max-width: 400px; font-weight: 400; color: rgba(255, 255, 255, .82); text-wrap: balance; margin-bottom: 32px !important; }
.hh-hero-actions { gap: 12px; }
.hh-hero-actions .wp-block-button__link { min-width: 210px; }
.hh-hero-primary > .wp-block-button__link { background: #fff; color: var(--ink); }
.hh-hero-primary > .wp-block-button__link:hover { background: var(--brass-soft); color: var(--ink); }
.hh-hero .is-style-outline > .wp-block-button__link {
	background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6);
}
.hh-hero .is-style-outline > .wp-block-button__link:hover { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: inset 0 0 0 1px #fff; }
.hh-hero-side { display: grid; gap: 14px; justify-items: end; text-align: right; }
.hh-proof { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #55524c; }
.hh-hero .hh-proof { color: rgba(255, 255, 255, .8); }
.hh-hero .hh-stars { color: var(--brass-soft); }
.hh-hero-tag a { font-size: 13px; letter-spacing: .04em; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .5); padding-bottom: 3px; }
.hh-hero-tag a:hover { color: var(--brass-soft); border-color: currentColor; }
@media (prefers-reduced-motion: reduce) { .hh-hero .hh-hero-img img { animation: none; transform: none; } }
@media (max-width: 860px) {
	.hh-hero::before { background: linear-gradient(to top, rgba(19, 17, 14, .85) 0%, rgba(19, 17, 14, .55) 50%, rgba(19, 17, 14, 0) 82%); }
	.hh-hero .hh-hero-img img { object-position: 40% 55%; }
	.hh-hero-side { display: none; }
	.hh-hero-sub { font-size: 15px; margin-bottom: 24px !important; }
	.hh-hero-actions { width: 100%; flex-direction: column; gap: 10px; }
	.hh-hero-actions .wp-block-button, .hh-hero-actions .wp-block-button__link { width: 100%; min-width: 0; }
}

/* Short screens (a phone held sideways): one row of buttons, no description, so the hero still fits. */
@media (max-height: 520px) {
	.hh-hero h1 { max-width: 18ch; margin-bottom: 16px !important; }
	.hh-hero-sub { display: none; }
	.hh-hero-copy { padding-bottom: 24px; }
	.hh-hero-actions { flex-direction: row; width: auto; }
	.hh-hero-actions .wp-block-button, .hh-hero-actions .wp-block-button__link { width: auto; }
}

/* ---------- Trust strip ----------
   A slow marquee. The view is never wider than one set of promises and its outer tenth is
   fully transparent, so the same promise never shows twice on screen. The trailing copy sits
   just past the end of the first, and sliding one set-width to the left loops seamlessly. */
.hh-strip { border-bottom: 1px solid var(--line); overflow: hidden; }
.hh-strip-view {
	width: fit-content; max-width: 100%; margin: 0 auto; overflow: hidden;
	--fade: linear-gradient(to right, transparent 10%, #000 30%, #000 70%, transparent 90%);
	-webkit-mask-image: var(--fade); mask-image: var(--fade);
}
.hh-strip-track { position: relative; width: max-content; animation: hh-strip 40s linear infinite; }
.hh-strip:hover .hh-strip-track { animation-play-state: paused; }
.hh-strip-set { display: flex; margin: 0; padding: 0; list-style: none; }
.hh-strip-set[aria-hidden] { position: absolute; top: 0; left: 100%; }
.hh-strip-item { display: flex; gap: 12px; align-items: center; padding: 22px 0; font-size: 14px; white-space: nowrap; }
.hh-strip-item::after {
	content: ''; width: 5px; height: 5px; margin: 0 clamp(32px, 4vw, 56px); flex: none;
	background: var(--brass); opacity: .7; transform: rotate(45deg);
}
@keyframes hh-strip { to { transform: translateX(-100%); } }
@media (max-width: 860px) {
	.hh-strip-item { padding: 16px 0; font-size: 13px; }
}
/* Phones are far narrower than one set, so a softer edge is enough there. */
@media (max-width: 640px) {
	.hh-strip-view { --fade: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
	.hh-strip-view { width: auto; -webkit-mask-image: none; mask-image: none; }
	.hh-strip-track { animation: none; width: auto; }
	.hh-strip-set { flex-wrap: wrap; justify-content: center; column-gap: 0; padding: 0 var(--gutter); }
	.hh-strip-set[aria-hidden] { display: none; }
	.hh-strip-item { padding: 12px 0; }
}

/* ---------- Home page content ----------
   The home template carries a Post Content block so Pages → Home shows the design in the editor.
   Empty (the usual case) it takes no space; anything added to the Home page sits above the footer. */
.hh-home-content:empty { display: none; }
.hh-home-content:not(:empty) { padding-bottom: clamp(64px, 9vw, 128px); }

/* ---------- Sections ---------- */
.hh-section { padding-block: clamp(64px, 9vw, 128px); }
.hh-section + .hh-section { padding-top: 0; }
.hh-section-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: clamp(28px, 4vw, 52px); }
.hh-section-head > * { margin: 0 !important; }
.hh-section-head h2 { font-size: clamp(34px, 4.4vw, 60px); }
.hh-section-head > p { max-width: 380px; color: var(--muted); }
@media (max-width: 640px) { .hh-section-head { flex-direction: column; align-items: start; } }

/* ---------- Product grid + cards ---------- */
.hh-grid .wc-block-product-template {
	display: grid !important; grid-template-columns: repeat(4, 1fr);
	gap: clamp(28px, 3vw, 44px) clamp(14px, 2vw, 28px); margin: 0; padding: 0; list-style: none;
}
.hh-grid-3 .wc-block-product-template { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1100px) { .hh-grid .wc-block-product-template { grid-template-columns: repeat(3, 1fr); } }
/* Four-up rows (home, related) go straight to 2 so a lone fourth card never sits on its own row. */
@media (max-width: 1100px) { .hh-grid:not(.hh-grid-3) .wc-block-product-template { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .hh-grid .wc-block-product-template { grid-template-columns: 1fr 1fr; } }
.hh-grid .wc-block-product { width: auto !important; margin: 0 !important; display: flex; flex-direction: column; gap: 14px; text-align: left; }
.hh-grid .wc-block-product > * { margin: 0 !important; }

.hh-card-media { position: relative; aspect-ratio: 2 / 3; background: var(--stone); overflow: hidden; }
.hh-card-media .wc-block-components-product-image { position: absolute; inset: 0; margin: 0 !important; }
.hh-card-media .wc-block-components-product-image a { display: block; height: 100%; }
.hh-card-media img {
	position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover;
	transition: opacity .6s var(--ease), transform 1.2s var(--ease);
}
.hh-card-media .hh-alt { opacity: 0; }
.wc-block-product:hover .hh-card-media .hh-alt { opacity: 1; }
.wc-block-product:hover .hh-card-media img { transform: scale(1.03); }
.hh-badge {
	position: absolute; top: 12px; left: 12px; z-index: 2; background: #fff; padding: 6px 10px;
	font: 500 10px/1 var(--wp--preset--font-family--body); letter-spacing: .16em; text-transform: uppercase;
}
.hh-card-info { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.hh-card-info > * { margin: 0 !important; }
.hh-card-name { font-family: var(--display); font-size: 21px !important; line-height: 1.15; font-weight: 500; letter-spacing: 0; }
.hh-card-price, .hh-card-price .amount { font-size: 15px !important; white-space: nowrap; text-align: right; }
.hh-card-blurb { font-size: 14px; color: var(--muted); margin-top: -6px !important; }
.hh-card-blurb p { margin: 0; }
.hh-card-blurb .wp-block-post-excerpt__more-text { display: none; }
@media (max-width: 760px) {
	.hh-card-info { flex-direction: column; gap: 2px; }
	.hh-card-name { font-size: 18px !important; }
	.hh-card-price { text-align: left; }
	.hh-card-blurb { display: none; }
}

/* ---------- Most loved: one large photo beside a 2x2 ---------- */
.hh-loved-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(14px, 2vw, 28px); }
.hh-loved-grid > * { margin: 0 !important; }
.hh-loved-feature { position: relative; display: flex; align-items: flex-end; min-height: 560px; overflow: hidden; background: var(--stone); color: #fff; }
.hh-loved-feature:hover { color: #fff; }
.hh-loved-feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transition: transform 1.4s var(--ease); }
.hh-loved-feature:hover img { transform: scale(1.03); }
.hh-loved-feature::before {
	content: ''; position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(to top, rgba(19, 17, 14, .78), rgba(19, 17, 14, .25) 55%, rgba(19, 17, 14, 0) 75%);
}
.hh-loved-copy { position: relative; z-index: 2; display: grid; gap: 10px; padding: clamp(20px, 3vw, 36px); }
.hh-loved-copy .hh-label { color: var(--brass-soft); }
.hh-loved-name { font: 500 clamp(30px, 3vw, 44px)/1.05 var(--display); }
.hh-loved-blurb { max-width: 360px; color: rgba(255, 255, 255, .8); }
.hh-loved-cta { display: flex; gap: 20px; align-items: center; margin-top: 8px; }
.hh-loved-cta .hh-stars { color: var(--brass-soft); }
.hh-loved-feature:hover .hh-btn-light { background: var(--brass-soft); }
.hh-loved-four .wc-block-product-template { grid-template-columns: 1fr 1fr !important; gap: clamp(20px, 2.4vw, 32px) clamp(14px, 2vw, 24px); }
.hh-loved-four .hh-card-media { aspect-ratio: 2 / 3; } /* the product photos' own shape, so nothing is cut */
.hh-loved-four .hh-card-name { font-size: 18px !important; }
@media (max-width: 860px) {
	.hh-loved-grid { grid-template-columns: 1fr; }
	.hh-loved-feature { min-height: 0; aspect-ratio: 2 / 3; }
}

/* ---------- Table set ---------- */
.hh-bundle { padding-block: clamp(64px, 9vw, 128px); }
.hh-bundle-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.hh-bundle-grid > * { margin: 0 !important; }
/* One tall photo beside two stacked ones; the fixed box ratio keeps every row a definite height. */
.hh-bundle-media { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; aspect-ratio: 4 / 3; }
.hh-bundle-media img { width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.hh-bundle-media img:first-child { grid-row: span 2; }
.hh-bundle-copy { display: grid; gap: 24px; max-width: 520px; }
.hh-bundle-copy > * { margin: 0; }
.hh-bundle-copy h2 { font-size: clamp(34px, 4.2vw, 58px); }
.hh-bundle-copy p { color: rgba(255, 255, 255, .72); font-size: 17px; }
.hh-bundle-copy .hh-label { color: var(--brass-soft); font-size: 11px; }
.hh-bundle-list { border-top: 1px solid rgba(255, 255, 255, .16); }
.hh-bundle-row { display: grid; grid-template-columns: 56px 1fr auto; gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .16); font-size: 15px; }
.hh-bundle-row:hover { color: var(--brass-soft); }
.hh-bundle-row img { width: 56px; height: 70px; object-fit: cover; }
.hh-bundle-total { display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; }
.hh-bundle-total strong { font-family: var(--display); font-weight: 500; font-size: 32px; }
.hh-bundle-total s { color: rgba(255, 255, 255, .5); margin-right: 10px; }
@media (max-width: 860px) { .hh-bundle-grid { grid-template-columns: 1fr; } }

/* ---------- Etsy band ----------
   A white card on stone: product photo on one side, the Etsy figures and the shop link on the other.
   It follows the dark table-set section directly, so it drops WordPress's usual gap between blocks. */
.hh-etsy { margin-block-start: 0 !important; padding-block: clamp(56px, 7vw, 96px); }
.hh-etsy-card { display: grid; grid-template-columns: 1fr 1fr; background: #fff; }
.hh-etsy-card.no-photo { grid-template-columns: 1fr; }
.hh-etsy-photo { position: relative; min-height: 440px; overflow: hidden; background: var(--stone); }
.hh-etsy-photo img { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; object-position: 40% 50%; }
.hh-etsy-tag {
	position: absolute; left: 16px; top: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; background: #fff;
	font: 500 11px/1 var(--wp--preset--font-family--body); letter-spacing: .16em; text-transform: uppercase;
}
.hh-etsy-tag .hh-icon { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.5; }
.hh-etsy-body { padding: clamp(28px, 4vw, 56px); display: grid; gap: 20px; align-content: center; }
.hh-etsy-body > * { margin: 0; }
.hh-etsy-body .hh-label { color: var(--brass); }
.hh-etsy-body h2 { font-size: clamp(30px, 3.2vw, 44px); }
.hh-etsy-intro { color: var(--muted); max-width: 460px; }
.hh-etsy-stats { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.hh-etsy-stat { display: flex; flex-direction: column-reverse; gap: 4px; padding: 18px 0; }
.hh-etsy-stat + .hh-etsy-stat { padding-left: 18px; border-left: 1px solid var(--line); }
.hh-etsy-stat dd { margin: 0; font: 500 34px/1 var(--wp--preset--font-family--display); }
.hh-etsy-stat dt { font-size: 12px; color: var(--muted); }
.hh-etsy-body .hh-btn { justify-self: start; gap: 8px; }
@media (max-width: 960px) {
	.hh-etsy-card { grid-template-columns: 1fr; }
	.hh-etsy-photo { min-height: 260px; }
}
@media (max-width: 560px) {
	.hh-etsy-body .hh-btn { justify-self: stretch; }
}
/* Visually hidden text for screen readers (e.g. "opens in a new tab"). */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Process ---------- */
.hh-process { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ink); }
.hh-step { padding: 26px 24px 0 0; display: grid; gap: 10px; align-content: start; margin: 0 !important; }
.hh-step > * { margin: 0; }
.hh-step + .hh-step { padding-left: 24px; border-left: 1px solid var(--line); }
.hh-step-n { font-family: var(--display); font-weight: 500; font-size: 15px; color: var(--brass); }
.hh-step p:not(.hh-step-n) { font-size: 15px; color: var(--muted); }
@media (max-width: 860px) {
	.hh-process { grid-template-columns: 1fr 1fr; }
	.hh-step { padding: 22px 16px 22px 0; }
	.hh-step + .hh-step { padding-left: 0; border-left: 0; }
	.hh-step:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--line); }
	.hh-step:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* Home version: a close-up of a finished bloom beside the steps as a connected list. */
.hh-craft { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.hh-craft > * { margin: 0 !important; }
/* Close-up slideshow. Four slides stacked; each is visible for 5s of a 20s loop and cross-fades into the
   next, with a slow zoom. A negative delay per slide (--i) staggers them so slide 0 shows first.
   Pure CSS, so it also runs in the editor. It loops continuously; reduced-motion users see the first photo. */
.hh-craft-photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--stone); --slide: 5s; }
.hh-craft-slide { position: absolute; inset: 0; margin: 0; }
.hh-craft-slide img { width: 100%; height: 100% !important; object-fit: cover; object-position: 50% 55%; }
.hh-craft-slide figcaption { position: absolute; left: 16px; bottom: 28px; margin: 0; background: rgba(255, 255, 255, .92); padding: 8px 12px; font-size: 12px; letter-spacing: .04em; color: var(--ink); }
.hh-craft-photo.is-moving .hh-craft-slide { animation: hh-craft-fade calc(var(--slide) * 4) linear infinite; animation-delay: calc(var(--slide) * var(--i) - var(--slide) * 4); }
.hh-craft-photo.is-moving .hh-craft-slide img { animation: hh-craft-zoom calc(var(--slide) * 4) linear infinite; animation-delay: inherit; }
@keyframes hh-craft-fade { 0%, 25% { opacity: 1; } 30%, 95% { opacity: 0; } 100% { opacity: 1; } }
@keyframes hh-craft-zoom { 0% { transform: scale(1.08); } 30% { transform: scale(1); } 30.01%, 100% { transform: scale(1.08); } }
.hh-craft-bars { position: absolute; left: 16px; right: 16px; bottom: 12px; z-index: 2; display: flex; gap: 6px; }
.hh-craft-bars span { flex: 1; height: 2px; background: rgba(255, 255, 255, .45); overflow: hidden; position: relative; }
.hh-craft-bars span::after {
	content: ''; position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left;
	animation: hh-craft-bar calc(var(--slide) * 4) linear infinite; animation-delay: calc(var(--slide) * var(--i) - var(--slide) * 4);
}
@keyframes hh-craft-bar { 0% { transform: scaleX(0); } 25% { transform: scaleX(1); } 25.01%, 100% { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) {
	.hh-craft-photo.is-moving .hh-craft-slide, .hh-craft-photo.is-moving .hh-craft-slide img { animation: none; }
	.hh-craft-photo.is-moving .hh-craft-slide:not(:first-of-type), .hh-craft-bars { display: none; }
}
.hh-craft-copy { display: grid; gap: 22px; }
.hh-craft-copy > * { margin: 0 !important; }
.hh-craft-copy .hh-label { color: var(--brass); }
.hh-craft-copy h2 { font-size: clamp(34px, 4.4vw, 60px); }
.hh-craft-intro { color: var(--muted); max-width: 440px; }
.hh-craft-steps { list-style: none; margin: 12px 0 0; padding: 0; position: relative; }
.hh-craft-steps::before { content: ''; position: absolute; left: 19px; top: 20px; bottom: 20px; width: 1px; background: var(--line); }
.hh-craft-steps li { display: grid; grid-template-columns: 40px 1fr; gap: 20px; padding: 14px 0; position: relative; }
.hh-craft-n { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--brass); background: #fff; display: grid; place-items: center; font: 400 15px/1 var(--display); color: var(--brass); }
.hh-craft-steps h3 { font-size: 22px; margin: 0 0 4px; }
.hh-craft-steps p { margin: 0; font-size: 15px; color: var(--muted); }
@media (max-width: 860px) {
	.hh-craft { grid-template-columns: 1fr; }
}

/* ---------- Review cards (home) ----------
   Whole cards only, stepped with arrows: 4 per view on desktop, down to 1 on phones. */
.hh-rv-row {
	--per: 4; --gap: 16px; display: grid; grid-auto-flow: column; gap: var(--gap);
	grid-auto-columns: calc((100% - (var(--per) - 1) * var(--gap)) / var(--per));
	overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none;
}
.hh-rv-row::-webkit-scrollbar { display: none; }
.hh-rv-head-right { display: grid; gap: 14px; justify-items: end; }
.hh-rv-head-right p { margin: 0; color: var(--muted); }
.hh-rv-nav { display: flex; gap: 10px; }
.hh-rv-arrow {
	width: 44px; height: 44px; border: 1px solid var(--ink); border-radius: 50%; background: none; color: inherit;
	display: grid; place-items: center; cursor: pointer; transition: background .2s, color .2s, opacity .2s;
}
.hh-rv-arrow .hh-icon { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.5; }
.hh-rv-arrow:hover:not([disabled]) { background: var(--ink); color: #fff; }
.hh-rv-arrow[disabled] { opacity: .25; cursor: default; }
@media (max-width: 1100px) { .hh-rv-row { --per: 3; } }
@media (max-width: 860px) { .hh-rv-row { --per: 2; } }
@media (max-width: 640px) { .hh-rv-row { --per: 1; } .hh-rv-head-right { justify-items: start; } }
.hh-rv-card { margin: 0; scroll-snap-align: start; border: 1px solid var(--line); display: grid; grid-template-rows: auto 1fr; }
/* Same 2:3 shape as the product photos, so the whole piece shows with nothing cropped. */
.hh-rv-img { display: block; aspect-ratio: 2 / 3; overflow: hidden; background: var(--stone); }
.hh-rv-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.hh-rv-card:hover .hh-rv-img img { transform: scale(1.04); }
/* Stars and quote sit at the top; the name and product are pinned to the bottom so they line up across cards. */
.hh-rv-card figcaption { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.hh-rv-card blockquote { margin: 0; font-family: var(--display); font-weight: 500; font-size: 20px; line-height: 1.3; }
.hh-rv-card cite { font-style: normal; font-size: 13px; display: grid; gap: 2px; margin-top: auto; padding-top: 8px; }
.hh-rv-card cite span { color: var(--muted); }
.hh-rv-card cite a { border-bottom: 1px solid var(--line); }

/* ---------- Shop ---------- */
.hh-page-head { padding: clamp(40px, 6vw, 80px) 0 clamp(24px, 3vw, 36px); }
.hh-page-head h1 { font-size: clamp(44px, 6vw, 84px); margin: 0; }
.hh-page-head p { color: var(--muted); max-width: 520px; margin: 14px 0 0; }
.hh-toolbar { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 14px 0; margin-bottom: 36px !important; }
.hh-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.hh-chip { height: 36px; padding: 0 16px; border: 1px solid var(--line); border-radius: 18px; font-size: 13px; display: inline-flex; align-items: center; }
.hh-chip:hover { border-color: var(--ink); color: inherit; }
.hh-chip[aria-current] { background: var(--ink); border-color: var(--ink); color: #fff; }
.woocommerce-ordering { margin: 0 !important; }
.woocommerce-ordering select { font: inherit; font-size: 13px; color: var(--ink); border: 0; background-color: transparent; padding: 6px 0; cursor: pointer; }
.hh-shop { padding-bottom: clamp(64px, 9vw, 110px); }
.hh-shop .wp-block-query-pagination { margin-top: 48px; }

/* ---------- Product page ---------- */
.hh-crumbs, .woocommerce-breadcrumb { font-size: 13px; color: var(--muted); padding: 22px 0; margin: 0 !important; }
.woocommerce-breadcrumb a:hover { color: var(--ink); }
.hh-pdp { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(28px, 5vw, 80px); align-items: start; }
.hh-pdp > * { margin: 0 !important; min-width: 0; }
.hh-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hh-gallery figure { margin: 0; background: var(--stone); aspect-ratio: 2 / 3; overflow: hidden; }
.hh-gallery figure:first-child { grid-column: span 2; aspect-ratio: 4 / 5; }
.hh-gallery img { width: 100%; height: 100%; object-fit: cover; }
.hh-gallery figure.is-wide { grid-column: span 2; aspect-ratio: 3 / 2; }
.hh-gallery figure.is-solo { grid-column: span 2; aspect-ratio: 4 / 5; }
.hh-buy { position: sticky; top: 100px; display: grid; gap: 22px; }
.hh-buy > * { margin: 0 !important; }
.hh-buy h1 { font-size: clamp(38px, 4vw, 56px); }
.hh-buy-cat, .hh-buy-cat a { color: var(--brass); }
.hh-price, .hh-price .amount { font-size: 24px !important; font-weight: 400; }
.hh-buy-desc { color: var(--muted); }
.hh-buy-desc > * { margin: 0; }
.hh-buy .wc-block-components-product-rating { font-size: 14px; }
.hh-buy .wc-block-components-product-rating__stars { color: var(--brass); }

/* Add to cart: quantity + button side by side, sizes as buttons (see theme.js) */
.hh-atc form.cart:not(.variations_form), .hh-atc .woocommerce-variation-add-to-cart { display: grid; grid-template-columns: 120px 1fr; gap: 10px; }
.hh-atc .quantity { margin: 0 !important; }
.hh-atc .quantity .qty { width: 100%; height: 52px; border: 1px solid var(--line); border-radius: 0; text-align: center; font: inherit; }
.hh-atc .single_add_to_cart_button, .hh-atc .button {
	height: 52px; width: 100%; border: 0; border-radius: 0; background: var(--ink) !important; color: #fff !important; cursor: pointer;
	font: 500 12px/1 var(--wp--preset--font-family--body) !important; letter-spacing: .16em; text-transform: uppercase;
}
.hh-atc .single_add_to_cart_button:hover { background: #2b2722 !important; }
.hh-atc .single_add_to_cart_button.disabled { opacity: .5; }
.hh-atc table.variations { border: 0; margin-bottom: 14px; width: 100%; }
.hh-atc table.variations th, .hh-atc table.variations td { display: block; padding: 0; border: 0; text-align: left; }
.hh-atc table.variations th { padding-bottom: 10px; font: 500 11px/1.2 var(--wp--preset--font-family--body); letter-spacing: .18em; text-transform: uppercase; }
.hh-atc .reset_variations { display: none !important; }
.hh-atc .woocommerce-variation-price { display: none; }
.hh-atc .woocommerce-variation-description { display: none; } /* already shown on the size buttons */
.hh-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hh-opt { border: 1px solid var(--line); background: none; padding: 12px 10px; text-align: left; display: grid; gap: 2px; cursor: pointer; font: inherit; color: inherit; transition: border-color .2s; }
.hh-opt:hover { border-color: var(--muted); }
.hh-opt[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.hh-opt b { font-weight: 500; font-size: 14px; }
.hh-opt span { font-size: 12px; color: var(--muted); }
.hh-opts + select { position: absolute !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.hh-atc .stock.out-of-stock { font-weight: 400; color: var(--muted); }

.hh-assure { display: grid; gap: 10px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 14px; }
.hh-assure div { display: flex; gap: 12px; align-items: center; }
.hh-assure .hh-icon { width: 20px; height: 20px; }
.hh-acc details { border-bottom: 1px solid var(--line); }
.hh-acc summary {
	list-style: none; cursor: pointer; padding: 18px 0; display: flex; justify-content: space-between; align-items: center;
	font: 500 12px/1 var(--wp--preset--font-family--body); letter-spacing: .16em; text-transform: uppercase;
}
.hh-acc summary::-webkit-details-marker { display: none; }
.hh-acc summary::after { content: '+'; font-size: 18px; font-weight: 300; transition: transform .3s; }
.hh-acc details[open] summary::after { transform: rotate(45deg); }
.hh-acc-body { padding: 0 0 20px; color: var(--muted); font-size: 15px; }
.hh-acc-body p { margin: 0 0 8px; }
.hh-acc dl { display: grid; grid-template-columns: 120px 1fr; gap: 8px 16px; margin: 0; }
.hh-acc dt { color: var(--ink); font-weight: 400; }
.hh-acc dd { margin: 0; }
.hh-acc ul { margin: 0; padding-left: 18px; }
@media (max-width: 860px) {
	.hh-pdp { grid-template-columns: 1fr; }
	.hh-gallery {
		display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 6px; scrollbar-width: none;
		margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter);
	}
	.hh-gallery::-webkit-scrollbar { display: none; }
	.hh-gallery figure, .hh-gallery figure:first-child, .hh-gallery figure.is-wide, .hh-gallery figure.is-solo { flex: 0 0 86%; scroll-snap-align: center; aspect-ratio: 4 / 5; }
	/* One swipe row of equal tiles on phones: show wide photos whole rather than cropped. */
	.hh-gallery figure.is-wide img { object-fit: contain; }
	.hh-buy { position: static; }
}

/* Product reviews */
.hh-reviews .wp-block-woocommerce-product-reviews { display: grid; grid-template-columns: 1fr 2fr; gap: 0 clamp(28px, 5vw, 80px); align-items: start; }
.hh-reviews .wp-block-woocommerce-product-reviews > * { grid-column: 2; margin: 0; }
.hh-reviews .wp-block-woocommerce-product-reviews > :first-child { grid-column: 1; grid-row: 1 / span 3; font-size: clamp(32px, 3.6vw, 48px); }
.hh-reviews ol, .hh-reviews ul { list-style: none; margin: 0; padding: 0; }
.hh-reviews .wp-block-woocommerce-product-review-template > li, .hh-reviews .comment { padding: 22px 0; border-bottom: 1px solid var(--line); display: grid; gap: 8px; }
.hh-reviews .wp-block-woocommerce-product-review-template > li:first-child { border-top: 1px solid var(--line); }
.hh-reviews .wp-block-woocommerce-product-review-content p { font-size: 17px; margin: 0; }
.hh-review-who { color: var(--muted); font-size: 13px; }
.hh-reviews .star-rating, .hh-reviews .wc-block-components-product-rating__stars { color: var(--brass); }
.hh-reviews .comment-respond { margin-top: 32px; }
.hh-reviews .comment-reply-title { font-family: var(--display); font-weight: 500; font-size: 26px; }
.hh-reviews .wp-block-woocommerce-product-review-rating, .hh-reviews .wc-block-components-product-rating { justify-self: start; text-align: left; justify-content: flex-start; }
.hh-reviews .wc-block-components-product-rating__container { justify-content: flex-start; }
.hh-reviews .wc-block-product-review-rating__stars { margin-left: 0 !important; margin-right: 0 !important; }
.hh-reviews textarea, .hh-reviews input[type="text"], .hh-reviews input[type="email"] { box-sizing: border-box; width: 100%; border: 1px solid var(--line); padding: 12px 14px; font: inherit; border-radius: 0; }
.hh-reviews .stars a { color: var(--brass); }
@media (max-width: 860px) {
	.hh-reviews .wp-block-woocommerce-product-reviews { grid-template-columns: 1fr; }
	.hh-reviews .wp-block-woocommerce-product-reviews > *, .hh-reviews .wp-block-woocommerce-product-reviews > :first-child { grid-column: 1; grid-row: auto; }
}
.hh-related { padding-bottom: clamp(64px, 9vw, 110px); }
.hh-related-h { font-size: clamp(34px, 4.4vw, 60px); margin: 0 0 clamp(28px, 4vw, 52px) !important; }

/* ---------- Pages ---------- */
.hh-page { padding-bottom: clamp(64px, 9vw, 110px); }
.hh-page-title { font-size: clamp(44px, 6vw, 84px); padding-top: clamp(40px, 6vw, 80px); margin-bottom: clamp(24px, 3vw, 40px) !important; }
.hh-page .wp-block-post-content h2 { font-size: 32px; margin-top: 2em; }
.hh-page .wp-block-post-content p, .hh-page .wp-block-post-content li { color: var(--muted); }
.hh-page .wp-block-post-content strong { color: var(--ink); font-weight: 400; }
.hh-empty { padding-top: 110px; }
/* ---------- About ---------- */
/* Split hero: copy on a dark panel, a photo filling the right half. The header floats over it (see above). */
.hh-about-hero { margin-block-start: 0; }
.hh-about-hero-grid { gap: 0 !important; margin: 0 !important; min-height: min(100svh, 920px); align-items: stretch !important; }
.hh-about-hero-copy { display: flex; flex-direction: column; justify-content: flex-end;
	padding: calc(76px + clamp(40px, 6vw, 88px)) clamp(24px, 5vw, 88px) clamp(48px, 7vw, 104px) var(--gutter); }
.hh-about-hero-copy > * { margin: 0; }
.hh-about-hero .hh-label { color: var(--brass-soft); }
.hh-about-hero h1 { font-size: clamp(44px, 5.4vw, 88px); max-width: 12ch; color: #fff; margin: 18px 0 24px; }
.hh-about-hero p:not(.hh-label) { max-width: 400px; color: rgba(255, 255, 255, .72); font-size: 17px; text-wrap: balance;
	padding-top: 24px; border-top: 1px solid rgba(216, 190, 132, .4); }
.hh-about-hero-media { position: relative; min-height: 420px; }
.hh-about-hero-media .wp-block-image { position: absolute; inset: 0; margin: 0; }
.hh-about-hero-media img { width: 100%; height: 100% !important; aspect-ratio: auto !important; object-fit: cover; object-position: center 40%; }

.hh-about-intro { gap: clamp(32px, 6vw, 96px); margin-bottom: clamp(48px, 6vw, 88px) !important; }
.hh-about-intro .wp-block-column > * { margin: 0; }
.hh-about-intro .hh-label { color: var(--brass); margin-bottom: 16px !important; }
.hh-about-intro h2 { font-size: clamp(34px, 4.2vw, 58px); }
.hh-about-intro .hh-lead { font: 500 clamp(22px, 2.2vw, 30px)/1.35 var(--display); margin-bottom: 20px !important; }
.hh-about-intro p:not(.hh-label):not(.hh-lead) { color: var(--muted); font-size: 17px; max-width: 560px; }
.hh-about-collage { gap: clamp(16px, 2.4vw, 32px); align-items: flex-end !important; }
.hh-about-collage .wp-block-image { margin: 0; }
.hh-about-collage img { width: 100%; }

.hh-values { padding-block: clamp(64px, 9vw, 128px); }
.hh-values-grid { gap: clamp(16px, 2.4vw, 32px); }
.hh-values-grid .wp-block-column > * { margin: 0; }
.hh-values-grid .wp-block-image { margin-bottom: 20px; }
.hh-values-grid img { width: 100%; }
.hh-values-grid h3 { font-size: 28px; margin-bottom: 8px; }
.hh-values-grid p { color: var(--muted); font-size: 15px; max-width: 340px; }

/* The process block links to this page from the home page; hide that link here. */
.wp-block-post-content:has(.hh-about-hero) .hh-craft .hh-text-link { display: none; }

.hh-about-cta { padding-block: clamp(64px, 8vw, 112px); border-bottom: 1px solid rgba(255, 255, 255, .12); }
.hh-about-cta-grid { gap: clamp(32px, 6vw, 96px); align-items: center !important; }
.hh-about-cta-copy > * { margin: 0; }
.hh-about-cta .hh-label { color: var(--brass-soft); margin-bottom: 18px; }
.hh-about-cta h2 { font-size: clamp(36px, 4.6vw, 64px); color: #fff; max-width: 15ch; margin-bottom: 20px; }
.hh-about-cta p:not(.hh-label) { color: rgba(255, 255, 255, .72); font-size: 17px; max-width: 420px; margin-bottom: 32px; }
.hh-about-cta .wp-block-button__link { background: #fff; color: var(--ink); }
.hh-about-cta .wp-block-button__link:hover { background: var(--brass-soft); color: var(--ink); }
.hh-about-cta .is-style-outline > .wp-block-button__link { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6); }
.hh-about-cta .is-style-outline > .wp-block-button__link:hover { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: inset 0 0 0 1px #fff; }
.hh-about-cta .wp-block-image { margin: 0; }
.hh-about-cta img { width: 100%; }

@media (max-width: 781px) {
	.hh-about-hero-grid { min-height: 0; }
	.hh-about-hero-media { order: -1; min-height: 0; height: min(62svh, 520px); }
	.hh-about-hero-copy { padding-top: 40px; }
	.hh-about-cta-grid .wp-block-column:last-child { order: -1; }
}

/* ---------- Cart & checkout ---------- */
.wc-block-cart, .wc-block-checkout { padding-bottom: 96px; }
.wc-block-components-button:not(.is-link) { border-radius: 0 !important; }
.wc-block-components-text-input input, .wc-block-components-combobox .components-combobox-control__input,
.wc-blocks-components-select .wc-blocks-components-select__select { border-radius: 0 !important; }
.wc-block-mini-cart__drawer .wc-block-mini-cart__title { font-family: var(--display); font-weight: 500; }

/* ---------- Footer ---------- */
.hh-footer { color: rgba(255, 255, 255, .72); font-size: 14px; }
/* Set link colour explicitly so no global hover or visited style can tint one link differently. */
.hh-footer a, .hh-footer a:visited { color: inherit; }
.hh-footer a:hover, .hh-footer a:focus-visible { color: #fff; }
.hh-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; padding: 72px 0 48px; }
.hh-footer-grid > * { margin: 0 !important; }
.hh-footer-grid p { margin: 0 0 10px; line-height: 2.1; }
.hh-footer-mark { font-family: var(--display); font-weight: 500; font-size: 34px; color: #fff; line-height: 1.2 !important; }
.hh-footer-brand p:last-child { max-width: 320px; line-height: 1.6; }
.hh-footer-h { color: var(--brass-soft); margin-bottom: 6px !important; line-height: 1.2 !important; }
/* Newsletter at the top of the footer (only printed when Hostinger Reach is active).
   Reach form: one row, input + button, label kept for screen readers. */
.hh-footer-signup {
	display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: end;
	padding: clamp(56px, 7vw, 96px) 0 clamp(40px, 5vw, 64px); border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.hh-footer-signup > *, .hh-footer-signup > div > * { margin: 0 !important; }
.hh-footer-signup .hh-footer-h { margin-bottom: 14px !important; }
.hh-footer-signup h2 { font-size: clamp(34px, 4vw, 56px); color: #fff; }
.hh-footer-signup h2 + p { margin-top: 12px !important; max-width: 420px; }
.hh-footer-signup .hostinger-reach-block-form-fields { display: flex; flex-direction: row !important; align-items: stretch; gap: 0 !important; }
.hh-footer-signup .hostinger-reach-block-form-field { flex: 1; min-width: 0; margin: 0; }
.hh-footer-signup .hostinger-reach-block-form-field label { position: absolute; width: 1px; height: 1px; margin: 0 !important; overflow: hidden; clip: rect(0 0 0 0); }
.hh-footer-signup input[type="email"] {
	box-sizing: border-box; width: 100%; height: 54px; padding: 0 18px; border: 1px solid rgba(255, 255, 255, .4); border-right: 0; border-radius: 0;
	background: transparent; color: #fff; font: inherit; font-size: 15px;
}
.hh-footer-signup input[type="email"]::placeholder { color: rgba(255, 255, 255, .5); }
.hh-footer-signup .hostinger-reach-block-submit {
	width: auto !important; flex: none; margin: 0 !important; height: 54px; padding: 0 26px; border: 0; border-radius: 0; cursor: pointer; white-space: nowrap;
	background: #fff !important; color: var(--ink) !important;
	font: 500 12px/1 var(--wp--preset--font-family--body); letter-spacing: .16em; text-transform: uppercase;
}
.hh-footer-signup .hostinger-reach-block-submit:hover { background: var(--brass-soft) !important; }
.hh-footer-signup .reach-subscription-message { margin-top: 14px; color: #fff; }
.hh-footer-social { display: flex; gap: 10px; margin-top: 20px; }
.hh-footer-social a { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .5); color: #fff; }
.hh-footer-social a:hover { border-color: #fff; color: #fff; }
.hh-footer-social .hh-icon { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.4; }
.hh-footer-base { border-top: 1px solid rgba(255, 255, 255, .14); padding: 20px 0; font-size: 13px; margin-top: 0 !important; }
.hh-footer-base p { margin: 0; }
@media (max-width: 860px) {
	.hh-footer-signup { grid-template-columns: 1fr; }
	.hh-footer-signup .hostinger-reach-block-submit { padding: 0 18px; }
}
@media (max-width: 760px) {
	.hh-footer-grid { grid-template-columns: 1fr 1fr; padding-top: 52px; }
	.hh-footer-brand { grid-column: span 2; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}