/*
Theme Name: Sparo
Theme URI: https://sparo.local
Description: Sparo — fine leather footwear & belts. A TOPGRAIN company. Child theme of Twenty Twenty-Five.
Author: Sparo / T G Leathers Private Limited
Template: twentytwentyfive
Version: 2.50.0
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sparo
*/

/* =====================================================
   Sparo design system v2 — editorial leather house
   Canvas: ivory. Ink text. Camel used sparingly.
   Labels: 0.06–0.14em tracking, never more.
   ===================================================== */

:root {
	--sparo-ivory: #f6f2eb;
	--sparo-ink: #16110d;
	--sparo-camel: #a98352;
	/* Camel taken down until it clears WCAG AA on the ivory ground (5.5:1
	   against camel's 3.1:1). Same hue, usable for body-sized text. */
	--sparo-camel-deep: #7a5c33;
	--sparo-umber: #6e5d4c;
	--sparo-hairline: #e5ded2;
	--sparo-white: #ffffff;
	--sparo-espresso: #1b130d;
	--sparo-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* ---------- Micro-labels (eyebrows) ---------- */

.sparo-eyebrow {
	font-family: Manrope, sans-serif;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

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

.sparo-topbar {
	font-size: 0.67rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sparo-topbar p {
	margin: 0;
}

/* Sticky main bar: the 32px topbar scrolls away, the rest holds. */
:root {
	--sparo-header-h: 78px;
}

header.wp-block-template-part {
	position: sticky;
	/* top: -33px when the 32px .sparo-topbar is present (scrolls away);
	   0 while it's removed so the nav bar sticks flush. */
	top: 0;
	z-index: 90;
}

/* While the mobile menu is open, nothing outranks the header */
header.wp-block-template-part.menu-open {
	z-index: 100000;
}

/* The blur creates a containing block that traps the fixed-position
   menu inside the header bar — lift it while the menu is open */
header.wp-block-template-part.menu-open .sparo-header-main {
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

.wp-block-navigation__responsive-container.has-modal-open {
	z-index: 100000 !important;
}

/* No injected block-gap inside the header — topbar and main bar sit flush */
header.wp-block-template-part > * {
	margin-block-start: 0 !important;
}

.sparo-header-main {
	background: rgba(246, 242, 235, 0.92);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--sparo-hairline);
	transition: background-color 0.35s var(--sparo-ease), border-color 0.35s var(--sparo-ease);
	/* Fixed height keeps the sticky bar stable across pages */
	height: var(--sparo-header-h);
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	display: flex;
	align-items: center;
}

/* The bar is a fixed height, so it can never be allowed to become two lines:
   a wrapped row overflows the bar top and bottom, and `space-between` leaves
   the orphaned second line hard against the left edge. Below ~340px the logo
   plus the three icons would otherwise wrap — the gaps tighten instead (see
   the narrow-screen block further down). */
.sparo-header-main > .wp-block-group.alignwide {
	width: 100%;
	flex-wrap: nowrap;
}

/* ---------- Brand marks ---------- */

/* Two lockups ship with the theme. The header uses the oxblood mark on its
   light ground; the ivory mark is used on dark grounds (the footer). */
.sparo-logo {
	display: flex;
	align-items: center;
	line-height: 0;
	text-decoration: none;
}

/* Sizing only — no `display` here. Selectors include the img element and
   parent class because WooCommerce's layout stylesheet sets
   `.woocommerce-page img {height:auto}`, which outranks a lone class and
   would otherwise blow the marks up on shop, cart, checkout and account
   pages. Visibility is handled separately below so these rules can't
   outrank the light/dark swap. */
.sparo-logo img.sparo-logo__mark {
	width: auto;
	height: 26px;
	max-width: none;
}

/* Default ground is light: show the oxblood mark. */
.sparo-logo img.sparo-logo__mark--oxblood {
	display: block;
}

.sparo-logo img.sparo-logo__mark--ivory {
	display: none;
}

.sparo-footer img.sparo-footer-logo {
	display: block;
	width: auto;
	height: 30px;
	max-width: none;
	margin-bottom: 1.1rem;
}

@media (max-width: 781px) {
	.sparo-logo img.sparo-logo__mark {
		height: 22px;
	}

	.sparo-footer img.sparo-footer-logo {
		height: 26px;
	}
}

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

.wp-block-site-title a {
	font-family: Literata, Georgia, serif;
	font-weight: 600;
	font-size: 1.1rem;
	letter-spacing: 0.3em;
	text-indent: 0.3em; /* optically recenter tracked caps */
	text-transform: uppercase;
	text-decoration: none;
}

.wp-block-navigation .wp-block-navigation-item__content {
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	position: relative;
	padding-bottom: 2px;
}

/* One underline only: kill the browser/theme default, keep our animated line */
.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation-item__content:focus {
	text-decoration: none;
}

/* Quiet underline reveal on nav hover */
.wp-block-navigation .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.35s var(--sparo-ease);
}

.wp-block-navigation .wp-block-navigation-item__content:hover::after,
.wp-block-navigation .wp-block-navigation-item__content.is-active::after,
.wp-block-navigation .wp-block-navigation-item__content[aria-current="page"]::after {
	transform: scaleX(1);
	transform-origin: left;
}

/* Current page: unmistakably marked, not just a hairline */
.wp-block-navigation .wp-block-navigation-item__content.is-active,
.wp-block-navigation .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--sparo-camel) !important;
	font-weight: 700;
}

.wp-block-navigation .wp-block-navigation-item__content.is-active::after,
.wp-block-navigation .wp-block-navigation-item__content[aria-current="page"]::after {
	height: 2px;
}

.wc-block-cart-link,
.wc-block-customer-account__link {
	color: inherit;
}

/* No black focus box on mouse click — but keep a quiet camel ring for
   keyboard users (accessibility) via :focus-visible. */
.wp-block-site-title a:focus:not(:focus-visible),
.wp-block-navigation a:focus:not(:focus-visible),
.sparo-header-main a:focus:not(:focus-visible),
.sparo-header-main button:focus:not(:focus-visible),
.wp-block-navigation button:focus:not(:focus-visible) {
	outline: none;
	box-shadow: none;
}

.wp-block-site-title a:focus-visible,
.wp-block-navigation a:focus-visible,
.sparo-header-main a:focus-visible,
.sparo-header-main button:focus-visible,
.wp-block-navigation button:focus-visible {
	outline: 2px solid var(--sparo-camel);
	outline-offset: 3px;
	border-radius: 0;
}

/* Open mobile menu overlay: always ink on ivory, overriding the
   transparent-over-hero ivory link color */
.wp-block-navigation__responsive-container.has-modal-open {
	background-color: var(--sparo-ivory) !important;
	padding: 1.5rem;
}

.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.has-modal-open .wp-block-search__button,
.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__responsive-container-close {
	color: var(--sparo-ink) !important;
}

.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation-item__content {
	font-size: 1rem;
	letter-spacing: 0.16em;
	padding: 0.4rem 0;
}

/* ---------- Campaign banners ---------- */

/* Banners carry their own typography, so they're shown whole rather than
   cropped: the natural aspect ratio drives the height and nothing is cut.
   Art direction happens in the markup — a square crop below 782px, the
   cinematic crop above it. */
.sparo-banner {
	display: block;
	width: 100%;
	overflow: hidden;
	background: #efe9de;
}

.sparo-banner__link {
	display: block;
	line-height: 0;
}

.sparo-banner img.sparo-banner__img,
.sparo-banner picture,
.sparo-banner source {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
}

.sparo-banner img.sparo-banner__img {
	transition: transform 0.9s var(--sparo-ease);
}

.sparo-banner__link:hover img.sparo-banner__img {
	transform: scale(1.015);
}

/* Sits flush against whatever follows it — no trailing ivory band before
   the footer. Separation from the section above comes from that section's
   own bottom padding. */
.sparo-banner--editorial {
	margin-block: 0;
}

/* ---------- Home hero: a carousel the client owns ---------- */

/* The hero's slides live in two galleries in the Home page's content, not in
   the template — see the comment in templates/page-home.html. Until sparo.js
   folds them into a carousel they render as ordinary galleries, which is also
   the no-JavaScript fallback: the artwork still shows, it just doesn't move. */
.sparo-hero-source {
	margin-block: 0;
}

/* post-content is a constrained layout, which would sit the hero in a ~1140px
   column. Overriding here rather than leaning on an alignfull class keeps the
   full bleed true for the fallback galleries too. */
.sparo-hero-source > .sparo-hero,
.sparo-hero-source > .wp-block-gallery.sparo-hero-slides {
	width: 100%;
	max-width: none;
	margin-inline: 0;
}

.sparo-hero-source .wp-block-gallery.sparo-hero-slides {
	gap: 0;
	margin-block: 0;
}

/* Only ever one gallery is the right one for the width — before the carousel
   exists and after, since the discarded originals stay in the DOM. */
@media (min-width: 782px) {
	.sparo-hero-source .wp-block-gallery.sparo-hero-slides--mob {
		display: none;
	}
}

@media (max-width: 781px) {
	.sparo-hero-source .wp-block-gallery.sparo-hero-slides--web {
		display: none;
	}
}

/* Once the carousel is built the source galleries have done their job. */
.sparo-hero-source.is-carousel .wp-block-gallery.sparo-hero-slides {
	display: none;
}

/* From tablet up the hero runs to the very top of the page and the header sits
   on it. Pulling the hero up by the bar's height, rather than taking the header
   out of flow, keeps position:sticky working and leaves every other page alone.
   Scoped by :has() rather than a body class so it follows the hero if it ever
   moves to another page. */
@media (min-width: 782px) {
	body:has(.sparo-hero-source) .sparo-hero-source {
		margin-top: calc(var(--sparo-header-h) * -1);
	}

	/* Translucent enough to read the artwork through, opaque enough that the
	   nav keeps its usual ink rather than needing a light variant. Measured
	   against all three slides: the darkest thing behind the nav is #170b07,
	   which composites to 5.53:1 at this alpha. 0.50 would leave 4.74:1 —
	   passing, but with no headroom for slides nobody has designed yet. */
	body:has(.sparo-hero-source) header.wp-block-template-part:not(.is-scrolled) .sparo-header-main {
		background: rgba(246, 242, 235, 0.55);
		border-bottom-color: transparent;
	}
}

/* #cabdac is the artwork's own field colour, sampled from all three slides.
   Any pixel the frame shows that the image doesn't cover lands on it, so the
   seam is invisible. */
.sparo-hero {
	position: relative;
	background: #cabdac;
	overflow: hidden;
}

.sparo-hero__track {
	display: flex;
	overflow-x: auto;
	overscroll-behavior-x: contain;

	/* No scrollbar and no CSS scroll-snap, for the same reason as the picks
	   rail: the track is repositioned by a whole block as it wraps, and snap
	   points fight those jumps. Snapping is done in script once a gesture has
	   settled, which leaves the wrap free to happen unobserved. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.sparo-hero__track::-webkit-scrollbar {
	display: none;
}

/* One slide, one viewport. The frame owns the shape so a slide whose artwork
   is a little off-ratio can't change the hero's height as it comes round —
   Mob Banner 3 is 1.11:1 where the others are square. */
.sparo-hero__slide {
	flex: 0 0 100%;
	min-width: 0;
	aspect-ratio: 1 / 1;
}

@media (min-width: 782px) {
	.sparo-hero__slide {
		aspect-ratio: 16 / 9;
	}
}

.sparo-hero__link {
	display: block;
	width: 100%;
	height: 100%;
	line-height: 0;
}

.sparo-hero__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
}

/* Art direction: the wide file above the breakpoint, the square below. A slide
   with no mobile counterpart is marked is-web-only and keeps the wide file at
   both widths, cropped by the frame — so a half-finished pair degrades instead
   of leaving a hole. */
@media (min-width: 782px) {
	.sparo-hero__img--mob {
		display: none;
	}
}

@media (max-width: 781px) {
	.sparo-hero__slide:not(.is-web-only) .sparo-hero__img--web {
		display: none;
	}
}

.sparo-hero__nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.86);
	color: var(--sparo-ink);
	cursor: pointer;
	opacity: 0;
	transform: translateY(-50%);
	transition: opacity 0.25s var(--sparo-ease), background 0.25s var(--sparo-ease);
}

.sparo-hero__nav--prev {
	left: clamp(0.75rem, 2vw, 1.5rem);
}

.sparo-hero__nav--next {
	right: clamp(0.75rem, 2vw, 1.5rem);
}

.sparo-hero:hover .sparo-hero__nav,
.sparo-hero__nav:focus-visible {
	opacity: 1;
}

.sparo-hero__nav:hover {
	background: var(--sparo-white);
}

.sparo-hero__nav svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.75;
}

/* Touch has no hover to reveal them, and a finger has the whole slide to
   swipe on. The dots still say how many there are. */
@media (max-width: 781px) {
	.sparo-hero__nav {
		display: none;
	}
}

.sparo-hero__dots {
	position: absolute;
	right: 0;
	bottom: clamp(0.6rem, 1.6vw, 1rem);
	left: 0;
	z-index: 2;
	display: flex;
	justify-content: center;
	gap: 0.5rem;
}

/* White with a hairline ring, because the strip these sit on is pale beige on
   one slide and a dark photograph on the next. */
.sparo-hero__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.55);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18);
	cursor: pointer;
	transition: width 0.3s var(--sparo-ease), background 0.3s var(--sparo-ease);
}

.sparo-hero__dot[aria-current="true"] {
	width: 22px;
	border-radius: 4px;
	background: var(--sparo-white);
}

.sparo-hero__dot:focus-visible,
.sparo-hero__nav:focus-visible {
	outline: 2px solid var(--sparo-ink);
	outline-offset: 3px;
}

/* Hero copy sits beneath the banner, since the artwork carries its own words */
.sparo-intro {
	padding: clamp(2.75rem, 6vw, 4.5rem) clamp(1.25rem, 4vw, 3rem);
}

/* Same doubling as stacked sections: the intro's bottom padding lands on top
   of the following section's top padding, giving 187px where the page's
   rhythm is 115px. The section owns the gap, so the intro stops adding to it. */
.sparo-intro:has(+ .sparo-section) {
	padding-bottom: 0;
}

.sparo-intro h1 {
	max-width: 18ch;
	margin-inline: auto;
}

.sparo-intro__lede {
	max-width: 52ch;
	margin-inline: auto;
	color: var(--sparo-umber);
	font-size: 1.02rem;
}

/* ---------- Collection tiles ---------- */

/* The whole tile is the link, not just the wording inside it. */
.sparo-tiles {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
}

/* 4:5 to match the collection photography, so nothing is cropped away */
.sparo-tile {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	text-decoration: none;
	background: var(--sparo-ink);
}

.sparo-tile img.sparo-tile__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform 0.7s var(--sparo-ease);
}

/* Legible ground for the label without flattening the photograph */
.sparo-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(22, 17, 13, 0.62) 0%, rgba(22, 17, 13, 0.12) 55%, rgba(22, 17, 13, 0.05) 100%);
}

.sparo-tile__body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.55rem;
	padding: 2rem;
}

.sparo-tile__title {
	font-family: Literata, Georgia, serif;
	font-weight: 500;
	font-size: clamp(1.5rem, 3vw, 2rem);
	line-height: 1.15;
	color: var(--sparo-ivory);
}

.sparo-tile__cta {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sparo-ivory);
	border-bottom: 1px solid currentColor;
	padding-bottom: 3px;
	transition: opacity 0.25s;
}

.sparo-tile:hover img.sparo-tile__img {
	transform: scale(1.05);
}

.sparo-tile:hover .sparo-tile__cta {
	opacity: 0.75;
}

.sparo-tile:focus-visible {
	outline: 2px solid var(--sparo-camel);
	outline-offset: 3px;
}

@media (max-width: 781px) {
	.sparo-tiles {
		grid-template-columns: 1fr;
	}

	.sparo-tile {
		aspect-ratio: 1 / 1;
	}
}

/* ---------- Section rhythm ---------- */

.sparo-section {
	padding-top: clamp(4.5rem, 9vw, 7.5rem);
	padding-bottom: clamp(4.5rem, 9vw, 7.5rem);
}

.sparo-section--flush-top {
	padding-top: 0;
}

/* Two stacked sections each contribute their own vertical padding, so the
   gap between them lands at double the intended rhythm — 230px between the
   footwear and belt rows on the homepage. When product rows sit back to
   back the second one drops its top padding, leaving a single section's
   worth of air between them. */
.sparo-product-row + .sparo-product-row {
	padding-top: 0;
}

/* A featured-product row collapses when nothing is featured in its
   category — the Product Collection block renders no markup at all when
   empty, so an untagged heading would otherwise sit over blank space.
   The row reappears on its own once a product is starred. */
.sparo-product-row:not(:has(.wp-block-woocommerce-product-collection)) {
	display: none;
}

/* Kept in the document for search engines and screen readers, off screen for
   everyone else. The shop archive's h1 uses this — see archive-product.html. */
.sparo-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Section header row: title left, "view all" right */
.sparo-section-head {
	border-bottom: 1px solid var(--sparo-hairline);
	padding-bottom: 1.1rem;
	margin-bottom: clamp(1.75rem, 4vw, 3rem);
}

.sparo-section-head h2 {
	margin: 0;
}

/* On the shop front the section headings are wayfinding, not editorial — the
   display serif cost 60px a piece and repeated for every line. Demoted to the
   same quiet label the archive title used to wear. Scoped to .sparo-shop-row
   because .sparo-section-head is shared with the homepage and the product
   page, where the large headings still carry the page. */
.sparo-shop-row .sparo-section-head {
	padding-bottom: 0.7rem;
	margin-bottom: clamp(1.25rem, 3vw, 2rem);
}

/* A section heading has to outrank the products beneath it. At 0.72rem in
   camel it was both smaller and fainter than the product titles it labels
   (11.5px against 14.1px, 3.1:1 against 16.8:1), so it read as part of the
   grid rather than as its own header. Ink takes contrast past the 4.5:1 the
   old camel failed at this size. Tracking eases to 0.14em — the top of the
   range this stylesheet sets itself — because caps need less of it as they
   grow, and 0.18em reads loose once the type has weight. */
.sparo-shop-row .sparo-section-head h2 {
	font-family: Manrope, sans-serif;
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sparo-ink);
	line-height: 1.4;
}

/* ---------- Our picks: a sideways rail, not a grid ---------- */

/* Nothing tagged, nothing shown — otherwise the heading strands above an
   empty row. */
.sparo-picks:not(:has(.wc-block-product)) {
	display: none;
}

/* The count of cards in view is the only thing that changes across
   breakpoints; the track width is derived from it, so a card is always a
   whole fraction of the rail minus its gaps. The fractional values are
   deliberate — half a card at the right edge is what tells a shopper there
   is more to scroll to. */
.sparo-picks .wc-block-product-template.wc-block-product-template__responsive.columns-4 {
	--picks-gap: 1.5rem;
	--picks-visible: 1.5;

	display: grid;
	grid-auto-flow: column;
	/* cancel the wrapping track from the collection block */
	grid-template-columns: none;
	grid-auto-columns: calc(
		(100% - (var(--picks-visible) - 1) * var(--picks-gap)) / var(--picks-visible)
	);
	gap: 0 var(--picks-gap);

	overflow-x: auto;
	overscroll-behavior-x: contain;
	/* room for the focus ring without clipping the cards */
	padding-bottom: 0.75rem;

	/* No scrollbar: the rail loops, so a thumb would show a position that
	   does not exist and would jump as the scroll wraps. The half card at
	   the edge, and the fact that it moves on its own, are the affordance. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.sparo-picks .wc-block-product-template::-webkit-scrollbar {
	display: none;
}

/* Snapping is deliberately absent. The rail is repositioned by whole blocks
   as it wraps, and snap points fight those jumps — the browser re-snaps mid
   shift and the seam becomes visible. */

@media (min-width: 480px) {
	.sparo-picks .wc-block-product-template.wc-block-product-template__responsive.columns-4 {
		--picks-visible: 2.5;
	}
}

@media (min-width: 768px) {
	.sparo-picks .wc-block-product-template.wc-block-product-template__responsive.columns-4 {
		--picks-visible: 3.5;
	}
}

@media (min-width: 1024px) {
	.sparo-picks .wc-block-product-template.wc-block-product-template__responsive.columns-4 {
		--picks-visible: 5;
	}
}

/* A hint rather than a link — the rail has no "view all" to point at. */
.sparo-picks-hint span {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sparo-umber);
}

/* Chrome, Edge and Firefox now make overflowing scrollers keyboard-focusable
   on their own, so arrow-key scrolling works there and this marks it. Safari
   does not yet; tabbing through the product links still scrolls the rail into
   view, so the row stays reachable either way. */
.sparo-picks .wc-block-product-template:focus-visible {
	outline: 2px solid var(--sparo-camel);
	outline-offset: 4px;
}

.sparo-viewall a {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 1px solid var(--sparo-ink);
	padding-bottom: 3px;
	transition: color 0.25s, border-color 0.25s;
}

.sparo-viewall a:hover {
	color: var(--sparo-camel);
	border-color: var(--sparo-camel);
}

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

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

.wp-block-button__link,
.wc-block-components-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce .button[type="submit"] {
	border-radius: 0 !important;
	transition: background-color 0.3s var(--sparo-ease), color 0.3s var(--sparo-ease),
		border-color 0.3s var(--sparo-ease);
}

.is-style-outline .wp-block-button__link {
	border-width: 1px;
}

/* Quiet text-link CTA — inherits its parent's color so it stays
   ivory on dark tiles instead of taking the global ink link color */
.sparo-textlink a {
	color: inherit;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 3px;
	transition: opacity 0.25s;
}

.sparo-tile .sparo-textlink a:hover {
	opacity: 0.75;
}

/* ---------- Product cards: one grid to rule them all ---------- */

/* Shortcode grids ([products]) — replace WC floats with CSS grid */
.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: 2.75rem 1.5rem;
	margin: 0;
	width: 100%;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0;
	text-align: left;
}

.woocommerce ul.products.columns-2 { grid-template-columns: repeat(2, 1fr); }
.woocommerce ul.products.columns-3 { grid-template-columns: repeat(3, 1fr); }

/* Product Collection block grid */
.wc-block-product-template.wc-block-product-template {
	gap: 2.75rem 1.5rem;
}

/* WooCommerce sizes its columns with
   `minmax(max(150px, 25% - 0.9375em), 1fr)` and auto-fill, where the
   0.9375em is meant to absorb the column gap. This theme widens that gap to
   1.5rem, so four tracks need more room than the row has and auto-fill quietly
   drops to three. Pin four explicitly from tablet up. Phones stay on
   WooCommerce's own calculation, which already lands on two. */
@media (min-width: 768px) {
	.wc-block-product-template.wc-block-product-template__responsive.columns-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Card imagery: full-bleed editorial crops — the photography IS the card */
.woocommerce ul.products li.product a img,
.wc-block-components-product-image img,
.wc-block-product-template .wc-block-components-product-image img {
	aspect-ratio: 4 / 5;
	width: 100%;
	object-fit: cover;
	background: var(--sparo-white);
	transition: transform 0.55s var(--sparo-ease);
	display: block;
}

.woocommerce ul.products li.product a:hover img,
.wc-block-product-template li:hover .wc-block-components-product-image img {
	transform: scale(1.045);
}

.woocommerce ul.products li.product .woocommerce-loop-product__link {
	display: block;
	overflow: hidden;
}

/* Card text */
/* The photo-to-name gap was two rules stacking: WooCommerce puts 12px under
   the image block, and the title added another 0.9rem of padding on top —
   ~26px of dead space. Zeroing the image margin and halving the padding
   brings it to ~7px. The 2.75rem row gap below the price is untouched, so
   cards stay separated from the row beneath. */
.wc-block-product-template .wc-block-components-product-image,
.wc-block-product-template .wp-block-woocommerce-product-image {
	margin-bottom: 0;
}

/* Product names in the brand's brown rather than ink, at the client's
   request. Straight camel measured 3.11:1 on the ivory ground — below the
   4.5:1 AA asks at this size, and these are the links people are meant to
   click. The deepened camel keeps the hue and reaches 5.5:1, so it also
   stops the name being fainter than its own price. */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wc-block-product-template h3 a,
.wc-block-product-template .wp-block-post-title {
	font-family: Manrope, sans-serif;
	font-size: 0.88rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.45;
	padding: 0.45rem 0 0.15rem;
	margin: 0;
	color: var(--sparo-camel-deep);
	text-decoration: none;
}

.woocommerce ul.products li.product .price,
.wc-block-product-template .wc-block-components-product-price {
	font-size: 0.84rem;
	font-weight: 500;
	color: var(--sparo-umber);
	letter-spacing: 0.02em;
	margin: 0;
}

.woocommerce ul.products li.product .price ins {
	text-decoration: none;
	color: var(--sparo-camel);
	font-weight: 600;
}

.woocommerce ul.products li.product .price del {
	opacity: 0.4;
	margin-right: 0.45em;
}

/* No add-to-cart noise on cards — the product page sells */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
	display: none;
}

/* Sale badge: quiet ink chip */
.woocommerce span.onsale,
.wc-block-components-product-sale-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	right: auto;
	background: var(--sparo-ink);
	color: var(--sparo-ivory);
	border: 0;
	border-radius: 0;
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 0.4em 0.9em;
	line-height: 1.4;
	min-height: 0;
	min-width: 0;
	z-index: 2;
}

.woocommerce ul.products li.product {
	position: relative;
}

/* ---------- Shop / category archives ---------- */

.sparo-archive-title h1 {
	margin: 0;
}

.sparo-archive-desc p {
	color: var(--sparo-umber);
	max-width: 44ch;
	font-size: 0.92rem;
	line-height: 1.7;
	margin: 0;
}

/* Header search: icon that expands into a hairline field */
.sparo-search .wp-block-search__button {
	background: transparent;
	border: 0;
	color: inherit;
	padding: 0.3rem;
	margin-left: 0;
	cursor: pointer;
}

.sparo-search .wp-block-search__button svg {
	width: 21px;
	height: 21px;
	fill: currentColor;
}

.sparo-search .wp-block-search__input {
	border: 0;
	border-bottom: 1px solid currentColor;
	border-radius: 0;
	background: transparent;
	font-family: Manrope, sans-serif;
	font-size: 0.82rem;
	letter-spacing: 0.04em;
	padding: 0.35rem 0.2rem;
	color: inherit;
	width: 170px;
}

.sparo-search .wp-block-search__input::placeholder {
	color: currentColor;
	opacity: 0.55;
	text-transform: uppercase;
	font-size: 0.68rem;
	letter-spacing: 0.12em;
}

.sparo-search .wp-block-search__inside-wrapper {
	border: 0;
	padding: 0;
	gap: 0.4rem;
}

.wp-block-navigation .sparo-search {
	margin-left: 0.5rem;
}

.sparo-search .wp-block-search__button {
	color: inherit;
}

/* Once the overlay takes over, the block is just a trigger icon */
.sparo-search--overlay .wp-block-search__input,
.sparo-search--overlay .wp-block-search__inside-wrapper > :not(.wp-block-search__button) {
	display: none !important;
}

/* ---------- Search overlay ---------- */

body.sparo-no-scroll {
	overflow: hidden;
}

.sparo-search-overlay {
	position: fixed;
	inset: 0;
	z-index: 200;
	background: rgba(22, 17, 13, 0.4);
}

.sparo-search-overlay__panel {
	position: relative;
	background: var(--sparo-ivory);
	border-bottom: 1px solid var(--sparo-hairline);
	padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.25rem, 4vw, 3rem) clamp(2rem, 4vw, 3rem);
	max-height: 88vh;
	overflow-y: auto;
}

.sparo-search-overlay__close {
	position: absolute;
	top: clamp(1rem, 2.5vw, 1.75rem);
	right: clamp(1.25rem, 4vw, 3rem);
	background: transparent;
	border: 0;
	color: var(--sparo-ink);
	cursor: pointer;
	padding: 0.4rem;
}

.sparo-search-overlay__close:hover {
	color: var(--sparo-camel);
}

.sparo-search-overlay__form {
	max-width: 1320px;
	margin: 0 auto;
}

.sparo-search-overlay__form input[type="search"] {
	width: 100%;
	border: 0;
	border-bottom: 1px solid var(--sparo-ink);
	border-radius: 0;
	background: transparent;
	font-family: Literata, Georgia, serif;
	font-weight: 400;
	font-size: clamp(1.5rem, 3.6vw, 2.4rem);
	line-height: 1.3;
	padding: 0.3em 0;
	color: var(--sparo-ink);
	outline: none;
}

.sparo-search-overlay__form input[type="search"]::placeholder {
	color: var(--sparo-umber);
	opacity: 0.55;
}

.sparo-search-overlay__form input[type="search"]::-webkit-search-cancel-button {
	display: none;
}

.sparo-search-overlay__hint {
	max-width: 1320px;
	margin: 0.9rem auto 0;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sparo-umber);
}

.sparo-search-overlay__results {
	max-width: 1320px;
	margin: 1.75rem auto 0;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 1.5rem 1.1rem;
}

.sparo-sr {
	text-decoration: none;
	display: block;
}

.sparo-sr img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	background: var(--sparo-white);
	display: block;
	margin-bottom: 0.6rem;
}

.sparo-sr__name {
	display: block;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--sparo-ink);
	line-height: 1.4;
}

.sparo-sr__price {
	display: block;
	font-size: 0.75rem;
	color: var(--sparo-umber);
	margin-top: 0.15rem;
}

.sparo-sr:hover .sparo-sr__name {
	color: var(--sparo-camel);
}

.sparo-search-overlay__all {
	grid-column: 1 / -1;
	justify-self: start;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 1px solid var(--sparo-ink);
	padding-bottom: 3px;
	margin-top: 0.5rem;
}

.sparo-search-overlay__empty {
	grid-column: 1 / -1;
	color: var(--sparo-umber);
	font-size: 0.95rem;
	margin: 0;
}

@media (max-width: 900px) {
	.sparo-search-overlay__results {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 600px) {
	.sparo-search-overlay__results {
		grid-template-columns: repeat(2, 1fr);
	}
}

.sparo-shop-toolbar {
	border-bottom: 1px solid var(--sparo-hairline);
	padding: 0.85rem 0;
}

/* Archive title lives inside the toolbar as a quiet tagline */
.sparo-shop-toolbar h1 {
	font-family: Manrope, sans-serif;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--sparo-camel);
	line-height: 1.4;
	margin: 0;
}

.woocommerce-result-count,
.wc-block-product-results-count p.woocommerce-result-count {
	font-size: 0.6rem !important;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sparo-umber);
	margin: 0 !important;
	line-height: 1.4;
}

/* Kill the root block-gap between header and page content (the hero
   manages its own overlap on the homepage) */
/* Every top-level section manages its own padding, so the block-gap
   WordPress injects between them is dead space — including the strip that
   showed between the header and the hero banner. */
.wp-site-blocks > * {
	margin-block-start: 0;
}

/* ---------- Custom searchable sort dropdown ---------- */

.has-sparo-sort > select {
	display: none;
}

.sparo-sort {
	position: relative;
}

.sparo-sort__trigger {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	background: transparent;
	border: 0;
	padding: 0;
	cursor: pointer;
	font-family: Manrope, sans-serif;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sparo-ink);
	line-height: 1.4;
}

.sparo-sort__trigger:hover {
	color: var(--sparo-camel);
}

.sparo-sort__panel {
	position: absolute;
	top: calc(100% + 0.75rem);
	right: 0;
	z-index: 60;
	min-width: 240px;
	background: var(--sparo-white);
	border: 1px solid var(--sparo-hairline);
	box-shadow: 0 14px 40px rgba(22, 17, 13, 0.08);
	padding: 0.4rem 0 0.5rem;
}

.sparo-sort__search {
	width: 100%;
	border: 0;
	border-bottom: 1px solid var(--sparo-hairline);
	background: transparent;
	font-family: Manrope, sans-serif;
	font-size: 0.78rem;
	padding: 0.55rem 1rem 0.6rem;
	outline: none;
	color: var(--sparo-ink);
}

.sparo-sort__search::placeholder {
	color: var(--sparo-umber);
	opacity: 0.6;
}

.sparo-sort__list {
	list-style: none;
	margin: 0.35rem 0 0;
	padding: 0;
	max-height: 240px;
	overflow-y: auto;
}

.sparo-sort__list button {
	display: block;
	width: 100%;
	text-align: left;
	background: transparent;
	border: 0;
	cursor: pointer;
	font-family: Manrope, sans-serif;
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sparo-ink);
	padding: 0.5rem 1rem;
}

.sparo-sort__list button:hover {
	background: var(--sparo-ivory);
	color: var(--sparo-camel);
}

.sparo-sort__list button.is-current {
	color: var(--sparo-camel);
}

.sparo-sort__list button.is-current::after {
	content: "·";
	margin-left: 0.5rem;
}

/* Selects: custom-drawn, no raw browser chrome */
.wc-block-catalog-sorting select,
.woocommerce-ordering select,
.wc-blocks-components-select select,
form select {
	appearance: none;
	-webkit-appearance: none;
	border: 1px solid var(--sparo-hairline);
	border-radius: 0;
	background-color: var(--sparo-white);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2316110d' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.9rem center;
	background-size: 10px 6px;
	padding: 0.6rem 2.5rem 0.6rem 1rem;
	font-family: Manrope, sans-serif;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sparo-ink);
	cursor: pointer;
	transition: border-color 0.25s;
}

.wc-block-catalog-sorting select:hover,
.woocommerce-ordering select:hover,
form select:hover {
	border-color: var(--sparo-ink);
}

.wc-block-catalog-sorting select:focus-visible,
form select:focus-visible {
	outline: 1px solid var(--sparo-camel);
	outline-offset: 2px;
}

/* Pagination: quiet numerals */
.wp-block-query-pagination {
	margin-top: clamp(2.5rem, 5vw, 4rem);
}

.wp-block-query-pagination a,
.wp-block-query-pagination .page-numbers {
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-decoration: none;
	padding: 0.35em 0.7em;
}

.wp-block-query-pagination .current {
	border-bottom: 1px solid var(--sparo-ink);
}

/* ---------- Single product ---------- */

.sparo-product-main h1 {
	font-size: clamp(1.7rem, 3.4vw, 2.4rem);
	margin: 0.2em 0 0.25em;
}

.sparo-product-main .wc-block-components-product-price,
.sparo-product-main .wp-block-woocommerce-product-price {
	font-size: 1.05rem;
	font-weight: 500;
	color: var(--sparo-camel);
	letter-spacing: 0.02em;
}

.sparo-product-main .wp-block-post-excerpt__excerpt {
	color: var(--sparo-umber);
	font-size: 0.95rem;
	line-height: 1.75;
}

/* Short description with real markup: label + spec list */
.sparo-short-desc {
	color: var(--sparo-umber);
	font-size: 0.95rem;
	line-height: 1.75;
}

.sparo-short-desc p strong:only-child {
	display: block;
	font-family: Manrope, sans-serif;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sparo-camel);
}

.sparo-short-desc ul {
	list-style: none;
	margin: 0.4rem 0 0;
	padding: 0;
}

.sparo-short-desc li {
	position: relative;
	padding-left: 1.15rem;
	margin-bottom: 0.2rem;
}

.sparo-short-desc li::before {
	content: "—";
	position: absolute;
	left: 0;
	color: var(--sparo-camel);
}

.wp-block-woocommerce-product-image-gallery img {
	background: var(--sparo-white);
}

/* WooCommerce's own gallery ships a zoom button at z-index:99 while the
   gallery itself sets no z-index — so with no stacking context to contain it,
   that 99 competed at page level and painted over the sticky header (z-index:
   90) when scrolling. Giving the gallery its own stacking context scopes the
   button inside it. The PhotoSwipe lightbox is appended to <body>, not to the
   gallery, so it is unaffected. */
.woocommerce-product-gallery {
	position: relative;
	z-index: 0;
}

/* Variation gallery (woo-variation-gallery plugin): blend into the system.
   The plugin sizes itself for WooCommerce's default layout — inside our
   gallery column it must always fill the column. */
.sparo-product-main .woo-variation-product-gallery {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
}

/* Empty gallery space shows the ivory canvas; only the images
   themselves sit on white */
.woo-variation-gallery-container,
.woo-variation-gallery-wrapper,
.woo-variation-gallery-thumbnail-wrapper,
.woo-variation-gallery-slider-wrapper {
	background: transparent;
}

.woo-variation-gallery-container img {
	background: var(--sparo-white);
}

.woo-variation-gallery-thumbnail-wrapper .wvg-gallery-thumbnail-image {
	border: 1px solid var(--sparo-hairline);
	cursor: pointer;
	background: var(--sparo-white);
}

.woo-variation-gallery-thumbnail-wrapper .slick-current .wvg-gallery-thumbnail-image {
	border-color: var(--sparo-ink);
}

.woo-variation-gallery-trigger {
	color: var(--sparo-ink);
	background: rgba(246, 242, 235, 0.9) !important;
	border-radius: 0 !important;
}

/* ---------- Variation picker: size pills + colour swatches ---------- */

/* The native selects drive the logic; the pills are the interface */
.sparo-vf .variations select {
	display: none !important;
}

.sparo-vf table.variations,
.sparo-vf table.variations tbody,
.sparo-vf table.variations tr,
.sparo-vf table.variations th,
.sparo-vf table.variations td {
	display: block;
	width: 100%;
	border: 0;
	padding: 0;
	margin: 0;
	text-align: left;
}

.sparo-vf table.variations tr {
	margin-bottom: 1.25rem;
}

.sparo-vf table.variations th.label label {
	font-family: Manrope, sans-serif;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sparo-umber);
}

/* Echoes the chosen pill, so it needs the same separation. */
.sparo-opt-current {
	color: var(--sparo-ink);
	text-transform: none;
	letter-spacing: 0.04em;
	word-spacing: 0.4em;
}

.sparo-opts {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.6rem;
}

/* Size pills */
.sparo-opt {
	border: 1px solid var(--sparo-hairline);
	background: var(--sparo-white);
	padding: 0.55rem 0.9rem;
	font-family: Manrope, sans-serif;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	/* Footwear reads "6 | 40". At this size a plain space either side of a thin
	   pipe closes up and the pill reads as one number — 6140. Widening the
	   spaces separates the two systems; belt sizes are bare numerals with no
	   space in them, so they are untouched. */
	word-spacing: 0.4em;
	color: var(--sparo-ink);
	cursor: pointer;
	border-radius: 0;
	transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}

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

.sparo-opt.is-selected {
	background: var(--sparo-ink);
	border-color: var(--sparo-ink);
	color: var(--sparo-ivory);
}

.sparo-opt.is-soldout {
	text-decoration: line-through;
	opacity: 0.55;
	background: transparent;
}

.sparo-opt.is-soldout.is-selected {
	background: var(--sparo-umber);
	border-color: var(--sparo-umber);
	color: var(--sparo-ivory);
	opacity: 1;
}

/* Greyed add-to-cart while an out-of-stock variation is selected */
.woocommerce div.product form.cart .single_add_to_cart_button.disabled,
.woocommerce div.product form.cart .single_add_to_cart_button.wc-variation-is-unavailable {
	opacity: 0.35;
	cursor: not-allowed;
	background: var(--sparo-umber);
}

/* Colour swatches */
.sparo-opt--swatch {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	padding: 0;
	border: 1px solid rgba(22, 17, 13, 0.18);
}

.sparo-opt--swatch.is-selected {
	outline: 1px solid var(--sparo-ink);
	outline-offset: 3px;
}

.sparo-opt--swatch.is-soldout {
	text-decoration: none;
	opacity: 0.3;
}

/* WooCommerce's reset link + variation price/stock area */
.sparo-vf .reset_variations {
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sparo-umber);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}

.woocommerce-variation.single_variation {
	margin-bottom: 0.75rem;
}

.woocommerce-variation-price .price {
	font-size: 1.05rem;
	font-weight: 500;
	color: var(--sparo-camel);
}

.woocommerce-variation-availability p.stock {
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sparo-umber);
	margin: 0.3rem 0 0;
}

.woocommerce-variation-availability p.stock.out-of-stock {
	color: #9c3a2e;
}

/* Add-to-cart form */
.wc-block-add-to-cart-form form.cart,
.woocommerce div.product form.cart {
	display: flex;
	gap: 0.75rem;
	align-items: stretch;
	flex-wrap: wrap;
	margin: 1.5rem 0 1rem;
}

.woocommerce div.product form.cart .quantity .qty,
.wc-block-add-to-cart-form .quantity .qty {
	height: 100%;
	min-height: 48px;
	width: 4.2rem;
	border: 1px solid var(--sparo-ink);
	border-radius: 0;
	background: transparent;
	font-size: 0.9rem;
	text-align: center;
}

.woocommerce div.product form.cart .single_add_to_cart_button {
	flex: 1;
	min-height: 48px;
	background: var(--sparo-ink);
	color: var(--sparo-ivory);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 1em 2em;
}

.woocommerce div.product form.cart .single_add_to_cart_button:hover {
	background: var(--sparo-camel);
	color: #fff;
}

/* Meta: sku / category */
.wp-block-woocommerce-product-meta,
.woocommerce div.product .product_meta {
	border-top: 1px solid var(--sparo-hairline);
	padding-top: 1.1rem;
	margin-top: 1.4rem;
	font-size: 0.74rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sparo-umber);
}

.wp-block-woocommerce-product-meta a,
.woocommerce div.product .product_meta a {
	color: var(--sparo-ink);
	text-decoration: none;
}

/* Trust line under the buy box */
.sparo-trust p {
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sparo-umber);
	margin: 0;
}

/* Details accordion / tabs */
.wp-block-woocommerce-product-details {
	margin-top: clamp(3rem, 6vw, 5rem);
}

/* Breadcrumbs */
.woocommerce-breadcrumb,
.wp-block-woocommerce-breadcrumbs {
	font-size: 0.72rem !important;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sparo-umber) !important;
}

.woocommerce-breadcrumb a,
.wp-block-woocommerce-breadcrumbs a {
	color: var(--sparo-umber);
	text-decoration: none;
}

/* Related products heading */
.sparo-related h2 {
	margin-bottom: 0;
}

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

.sparo-footer {
	background: var(--sparo-espresso);
	color: #c3b4a2;
}

.sparo-footer a {
	color: #e8e0d4;
	text-decoration: none;
	font-size: 0.85rem;
}

.sparo-footer a:hover {
	color: var(--sparo-camel);
}

.sparo-footer p {
	font-size: 0.85rem;
}

.sparo-footer-heading {
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #8a7663;
}

.sparo-footer ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.sparo-footer-fine p,
.sparo-footer-fine a {
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	color: #8a7663;
}

/* ---------- Cart / checkout blocks: strip the plastic ---------- */

.wc-block-components-button {
	background: var(--sparo-ink);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.78rem;
	font-weight: 600;
}

.wc-block-components-button:hover {
	background: var(--sparo-camel);
}

.wc-block-components-order-summary,
.wc-block-components-sidebar .wc-block-components-panel,
.wc-block-cart-items {
	border-radius: 0;
}

/* ---------- Forms ---------- */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
textarea {
	border-radius: 0;
}

/* ---------- Content pages ---------- */

/* Identical bar treatment to .sparo-shop-toolbar so static pages
   and shop archives open the same way. No top border — the header's
   own bottom hairline draws that line. */
.sparo-page-header {
	border-bottom: 1px solid var(--sparo-hairline);
	padding: 0.85rem 0;
	margin-bottom: clamp(1.75rem, 4vw, 3rem);
}

/* Page titles render as quiet taglines, not display headers —
   the content carries the visual weight. */
.sparo-page-header h1 {
	font-family: Manrope, sans-serif;
	font-size: 0.72rem !important;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--sparo-camel);
	line-height: 1.4;
	margin: 0;
}

.sparo-lead {
	font-size: 1.08rem;
	line-height: 1.75;
	color: var(--sparo-umber);
}

/* Left-anchored article layout: blocks start at the wide edge,
   text lines capped for readability */
.sparo-article > p,
.sparo-article .sparo-lead {
	max-width: 64ch;
}

.sparo-article > h2 {
	max-width: 26ch;
}

.sparo-article > .wp-block-quote {
	max-width: 56ch;
}

.sparo-article img {
	max-width: 100%;
	height: auto;
}

.sparo-panel {
	background: var(--sparo-white);
	border: 1px solid var(--sparo-hairline);
}

.sparo-panel h3 {
	font-size: 0.72rem;
	font-family: Manrope, sans-serif;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sparo-camel);
	margin: 0 0 0.9rem;
}

.sparo-panel p {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.8;
}

blockquote.sparo-quote {
	border-left: 2px solid var(--sparo-camel);
	margin: 0;
	padding-left: 1.75rem;
}

blockquote.sparo-quote p {
	font-family: Literata, Georgia, serif;
	font-size: 1.35rem;
	font-style: italic;
	line-height: 1.5;
	color: var(--sparo-ink);
}

blockquote.sparo-quote cite {
	font-family: Manrope, sans-serif;
	font-size: 0.72rem;
	font-style: normal;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sparo-umber);
}

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: repeat(3, 1fr);
		gap: 2rem 1.1rem;
	}
}

/* Desktop: account icon in the bar, mobile search trigger hidden,
   "My Account" nav link reserved for the mobile overlay */
/* ---------- Where the nav becomes a hamburger ----------

   Core's navigation block collapses to the overlay at 600px and no other
   width; that number is baked into wp-includes/blocks/navigation/style.css.
   The six items plus the search, cart and account icons need roughly 1000px
   of content width, so between 600px and ~980px core kept them horizontal
   and they wrapped onto two or three lines inside a bar that is a fixed
   78px tall — the whole 600–980px band, which is every iPad in portrait.

   So the collapse point moves to 1024px: tablets get the overlay, and the
   horizontal nav only appears at 1025px and up, where it genuinely fits
   with room to spare. Everything below reads from the same number, so the
   bar layout and the menu agree at every width.

   To hand tablets back the horizontal nav, change 1024/1025 here and in the
   two blocks below — but the items only fit above ~1000px without shrinking
   the type. */
@media (max-width: 1024px) {
	/* Undo core's min-width:600px rule, which turns the overlay back into an
	   inline list. Selectors are scoped to the header and lead with the
	   element so they outrank core's `:not(.hidden-by-default):not(.is-menu-open)`
	   without needing !important. */
	header .sparo-header-main .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
		position: fixed;
		width: auto;
	}

	header .sparo-header-main .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
}

@media (min-width: 1025px) {
	.sparo-search-mobile {
		display: none !important;
	}

	.wp-block-navigation-item.sparo-mobile-only {
		display: none;
	}
}

@media (max-width: 1024px) {
	/* Bar order: search · cart · hamburger — account lives in the menu */
	.sparo-header-main .wp-block-woocommerce-customer-account {
		display: none;
	}

	.sparo-search-mobile {
		order: 1;
	}

	.sparo-header-main .wc-block-mini-cart {
		order: 2;
	}

	.sparo-header-main .wp-block-navigation {
		order: 3;
	}

	/* The in-nav search is redundant inside the overlay */
	.wp-block-navigation__responsive-container .sparo-search:not(.sparo-search-mobile) {
		display: none;
	}
}

/* Small handsets (320px and up). At the theme's normal 1.75rem icon spacing
   the bar needs ~301px of a 280px content box, so it wraps; tightening the
   gaps brings it to ~262px and it stays on one line. Touch targets are
   unchanged — only the space between them shrinks. */
@media (max-width: 400px) {
	.sparo-header-main > .wp-block-group.alignwide {
		gap: 0.75rem;
	}

	.sparo-header-main > .wp-block-group.alignwide > .wp-block-group {
		gap: 0.75rem;
	}
}

@media (max-width: 781px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products,
	.woocommerce ul.products.columns-3,
	.woocommerce ul.products.columns-2 {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.9rem 0.9rem;
	}

	}