/*
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.34.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;
	--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;
}

/* 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);
}

.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;
}

/* 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;
}

/* 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;
}

.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;
}

/* 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 */
.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.9rem 0 0.15rem;
	margin: 0;
	color: var(--sparo-ink);
	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);
}

/* 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);
}

.sparo-opt-current {
	color: var(--sparo-ink);
	text-transform: none;
	letter-spacing: 0.04em;
}

.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;
	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;
	}

	}