/*
Theme Name: The Spice Fiction
Theme URI: https://thespicefiction.com
Description: The Spice Fiction — spices, pickles & honey from Central Travancore. Child theme of Twenty Twenty-Five.
Author: The Spice Fiction
Template: twentytwentyfive
Version: 0.1.0
Requires at least: 6.7
Tested up to: 7.0
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: thespicefiction
*/

/* =====================================================
   The Spice Fiction design system v2 — brand greens
   Canvas: paper. Green-black ink. Forest #005000 leads,
   logo lime #A1BF1F supports (dark grounds only —
   lime fails contrast on paper). 0.06–0.14em tracking.
   ===================================================== */

:root {
	--tsf-paper: #fafaf6;
	--tsf-ink: #131a0f;
	--tsf-forest: #005000;
	--tsf-umber: #5f6b51;
	--tsf-hairline: #e2e6d5;
	--tsf-white: #ffffff;
	--tsf-deepforest: #10240f;
	--tsf-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

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

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

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

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

:root {
	--tsf-header-h: 78px;
}

header.wp-block-template-part {
	position: sticky;
	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 .tsf-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;
}

.tsf-header-main {
	/* Solid at rest and on scroll — no translucency or blur */
	background: var(--tsf-paper);
	border-bottom: 1px solid var(--tsf-hairline);
	/* Exact height so the homepage hero can tuck underneath precisely */
	height: var(--tsf-header-h);
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	display: flex;
	align-items: center;
}

.tsf-header-main > .wp-block-group.alignwide {
	width: 100%;
}

/* Solid header everywhere — the brand logo is a white-ground JPEG,
   so no transparent-over-hero treatment on the homepage. */
.tsf-logo {
	margin: 0;
	display: flex;
	align-items: center;
}

.tsf-logo img {
	max-height: 58px;
	width: auto;
	mix-blend-mode: multiply; /* white logo ground disappears into the cream bar */
}

/* No square focus box when the logo is clicked with the mouse;
   keyboard users still get a clear focus ring via :focus-visible */
.tsf-logo a:focus {
	outline: none;
}

.tsf-logo a:focus-visible {
	outline: 2px solid var(--tsf-forest);
	outline-offset: 3px;
}

/* Slide the hero up under the (solid, sticky) header so the whole hero —
   header icons included — is visible without scrolling. The hero content is
   bottom-aligned, so only the image's top edge tucks behind the header. */
.wp-site-blocks > .tsf-hero {
	margin-block-start: calc(-1 * var(--tsf-header-h));
}

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

/* No square focus box when a nav link is clicked with the mouse;
   keyboard users still get a clear focus ring via :focus-visible */
.wp-block-navigation .wp-block-navigation-item__content:focus {
	outline: none;
}

.wp-block-navigation .wp-block-navigation-item__content:focus-visible {
	outline: 2px solid var(--tsf-forest);
	outline-offset: 3px;
}

/* 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(--tsf-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(--tsf-forest) !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;
}

/* 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(--tsf-paper) !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(--tsf-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;
}

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

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

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

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

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

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

.tsf-viewall a:hover {
	color: var(--tsf-forest);
	border-color: var(--tsf-forest);
}

/* Hairline facts strip — sits flush against the hero above it */
.tsf-strip {
	border-bottom: 1px solid var(--tsf-hairline);
	margin-block-start: 0 !important;
}

.tsf-strip p {
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tsf-umber);
	margin: 0;
}

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

.tsf-hero .wp-block-cover__inner-container {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: inherit;
}

.tsf-hero h1 {
	max-width: 14ch;
}

/* Editorial gradient: dark at the bottom for the headline,
   dark scrim at the top so the ivory nav always reads */
.tsf-hero .wp-block-cover__background {
	background: linear-gradient(
		to top,
		rgba(15, 10, 6, 0.82) 0%,
		rgba(15, 10, 6, 0.4) 42%,
		rgba(15, 10, 6, 0.18) 70%,
		rgba(15, 10, 6, 0.6) 100%
	) !important;
	opacity: 1 !important;
}

/* A soft dark halo keeps every hero line legible over bright image areas —
   in particular the lime eyebrow, which sits close to the photo's own tone. */
.tsf-hero .tsf-eyebrow,
.tsf-hero h1,
.tsf-hero p {
	text-shadow: 0 2px 22px rgba(10, 7, 3, 0.55), 0 1px 4px rgba(10, 7, 3, 0.5);
}

/* Soft-focus the video so the type carries the frame;
   the slight scale hides the blurred edge halo. */
.tsf-hero .wp-block-cover__video-background {
	filter: blur(4px) brightness(0.94);
	transform: scale(1.06);
}

/* Ghost button on dark hero */
.tsf-hero .is-style-outline .wp-block-button__link {
	border: 1px solid rgba(250, 250, 246, 0.9);
	color: var(--tsf-paper);
	background: transparent;
}

.tsf-hero .is-style-outline .wp-block-button__link:hover {
	background: var(--tsf-paper);
	color: var(--tsf-ink);
	border-color: var(--tsf-paper);
}

/* ---------- 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(--tsf-ease), color 0.3s var(--tsf-ease),
		border-color 0.3s var(--tsf-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 */
.tsf-textlink a,
.tsf-textlink span {
	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;
}

.tsf-tile .tsf-textlink a:hover,
.tsf-tile:hover .tsf-textlink span {
	opacity: 0.75;
}

/* Whole-tile click target: one overlay link covers the entire collection
   card (the visible "Explore the collection" is styled text, not a 2nd link). */
.tsf-tile-link {
	position: absolute;
	inset: 0;
	z-index: 3;
}

/* ---------- 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 — 4 per row on desktop, 3 on tablet, 2 on
   phone. WooCommerce's own columns-4 uses an auto-fill minmax tuned to its
   20px gap; our larger gap breaks that math (drops to 3), so set it explicitly. */
.wc-block-product-template.wc-block-product-template {
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 2.75rem 1.5rem;
}

@media (max-width: 1024px) {
	.wc-block-product-template.wc-block-product-template {
		grid-template-columns: repeat(3, 1fr) !important;
	}
}

@media (max-width: 600px) {
	.wc-block-product-template.wc-block-product-template {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 1.5rem 0.5rem;
	}
	/* Less padding around the shop grid so it fills the phone screen
	   (main.tsf-section is the shop / category / search archive main only). */
	main.tsf-section {
		padding-left: 0.6rem !important;
		padding-right: 0.6rem !important;
	}
}

/* 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: 1 / 1;
	width: 100%;
	object-fit: cover;
	background: var(--tsf-white);
	transition: transform 0.55s var(--tsf-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(--tsf-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(--tsf-umber);
	letter-spacing: 0.02em;
	margin: 0;
}

.woocommerce ul.products li.product .price ins {
	text-decoration: none;
	color: var(--tsf-forest);
	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(--tsf-ink);
	color: var(--tsf-paper);
	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 ---------- */

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

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

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

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

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

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

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

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

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

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

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

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

.tsf-search-overlay {
	position: fixed;
	inset: 0;
	z-index: 200;
	background: rgba(19, 26, 15, 0.4);
}

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

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

.tsf-search-overlay__close:hover {
	color: var(--tsf-forest);
}

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

.tsf-search-overlay__form input[type="search"] {
	width: 100%;
	border: 0;
	border-bottom: 1px solid var(--tsf-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(--tsf-ink);
	outline: none;
}

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

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

.tsf-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(--tsf-umber);
}

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

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

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

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

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

.tsf-sr:hover .tsf-sr__name {
	color: var(--tsf-forest);
}

.tsf-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(--tsf-ink);
	padding-bottom: 3px;
	margin-top: 0.5rem;
}

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

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

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

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

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

/* Result-count typography is unified with the filter/sort labels (see toolbar). */

/* Kill the root block-gap between header and page content (the hero
   manages its own overlap on the homepage) */
.wp-site-blocks > main,
.wp-site-blocks > footer {
	margin-block-start: 0;
}

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

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

.tsf-sort {
	position: relative;
}

.tsf-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(--tsf-ink);
	line-height: 1.4;
}

.tsf-sort__trigger:hover {
	color: var(--tsf-forest);
}

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

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

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

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

.tsf-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(--tsf-ink);
	padding: 0.5rem 1rem;
}

.tsf-sort__list button:hover {
	background: var(--tsf-paper);
	color: var(--tsf-forest);
}

.tsf-sort__list button.is-current {
	color: var(--tsf-forest);
}

.tsf-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(--tsf-hairline);
	border-radius: 0;
	background-color: var(--tsf-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(--tsf-ink);
	cursor: pointer;
	transition: border-color 0.25s;
}

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

.wc-block-catalog-sorting select:focus-visible,
form select:focus-visible {
	outline: 1px solid var(--tsf-forest);
	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(--tsf-ink);
}

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

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

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

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

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

.tsf-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(--tsf-forest);
}

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

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

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

.wp-block-woocommerce-product-image-gallery img {
	background: var(--tsf-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. */
.tsf-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(--tsf-white);
}

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

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

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

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

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

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

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

.tsf-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(--tsf-umber);
}

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

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

/* Size pills */
.tsf-opt {
	border: 1px solid var(--tsf-hairline);
	background: var(--tsf-white);
	padding: 0.55rem 0.9rem;
	font-family: Manrope, sans-serif;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	color: var(--tsf-ink);
	cursor: pointer;
	border-radius: 0;
	transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}

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

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

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

.tsf-opt.is-soldout.is-selected {
	background: var(--tsf-umber);
	border-color: var(--tsf-umber);
	color: var(--tsf-paper);
	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(--tsf-umber);
}

/* Colour swatches */
.tsf-opt--swatch {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	padding: 0;
	border: 1px solid rgba(19, 26, 15, 0.18);
}

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

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

/* WooCommerce's reset link + variation price/stock area */
.tsf-vf .reset_variations {
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tsf-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(--tsf-forest);
}

.woocommerce-variation-availability p.stock {
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tsf-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(--tsf-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(--tsf-ink);
	color: var(--tsf-paper);
	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(--tsf-forest);
	color: #fff;
}

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

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

/* Trust line under the buy box */
.tsf-trust p {
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--tsf-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(--tsf-umber) !important;
}

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

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

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

.tsf-tile {
	overflow: hidden;
	position: relative;
}

.tsf-tile img {
	transition: transform 0.7s var(--tsf-ease);
}

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

.tsf-tile .wp-block-cover__inner-container {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	min-height: inherit;
}

.tsf-tile h3 {
	color: var(--tsf-paper);
	margin: 0 0 0.2rem;
}

/* ---------- Numbered craft columns ---------- */

.tsf-craft .wp-block-column {
	border-top: 1px solid var(--tsf-hairline);
	padding-top: 1.5rem;
}

.tsf-craft-num {
	font-family: Literata, Georgia, serif;
	font-style: italic;
	color: var(--tsf-forest);
	font-size: 0.95rem;
	margin: 0 0 0.8rem;
}

.tsf-craft h3 {
	font-size: 1.05rem;
	margin: 0 0 0.5rem;
}

.tsf-craft p:not(.tsf-craft-num) {
	font-size: 0.9rem;
	color: var(--tsf-umber);
	line-height: 1.7;
}

/* ---------- Dark editorial band ---------- */

.tsf-dark {
	background: var(--tsf-deepforest);
	color: var(--tsf-paper);
}

.tsf-dark h2,
.tsf-dark h3 {
	color: var(--tsf-paper);
}

.tsf-dark p {
	color: #b5c4a8;
}

.tsf-dark .tsf-textlink a {
	color: var(--tsf-paper);
}

.tsf-dark .tsf-textlink a:hover {
	color: var(--tsf-forest);
}

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

.tsf-footer {
	background: var(--tsf-deepforest);
	color: #b5c4a8;
}

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

.tsf-footer a:hover {
	color: var(--tsf-forest);
}

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

.tsf-footer-heading {
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #90a07e;
}

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

.tsf-footer-fine p,
.tsf-footer-fine a {
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	color: #90a07e;
}

/* Payment method icons — quiet, desaturated until hover */
.tsf-pay {
	gap: 1rem;
}

.tsf-pay-icons {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

.tsf-pay-icons img {
	height: 17px;
	width: auto;
	display: block;
	border-radius: 2px;
	opacity: 0.55;
	filter: grayscale(1);
	transition: opacity 0.25s var(--tsf-ease), filter 0.25s var(--tsf-ease);
}

.tsf-pay:hover .tsf-pay-icons img {
	opacity: 1;
	filter: none;
}

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

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

.wc-block-components-button:hover {
	background: var(--tsf-forest);
}

.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 .tsf-shop-toolbar so static pages
   and shop archives open the same way. No top border — the header's
   own bottom hairline draws that line. */
.tsf-page-header {
	border-bottom: 1px solid var(--tsf-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. */
.tsf-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(--tsf-forest);
	line-height: 1.4;
	margin: 0;
}

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

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

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

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

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

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

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

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

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

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

blockquote.tsf-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(--tsf-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 */
@media (min-width: 900px) {
	.tsf-search-mobile {
		display: none !important;
	}

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

@media (max-width: 899px) {
	/* Tablet & phone: the full inline nav doesn't fit, so collapse it to a
	   hamburger here. WordPress core only collapses it below 600px, which
	   leaves the menu overflowing (and leaking mobile-only links) on tablets. */
	.tsf-header-main .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex !important;
	}

	.tsf-header-main .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}

	/* Compact header: a smaller logo keeps the bar to one row */
	:root {
		--tsf-header-h: 64px;
	}

	.tsf-logo img {
		max-height: 36px;
	}

	/* Bar order: search · cart · hamburger — account lives in the menu */
	.tsf-header-main .wp-block-woocommerce-customer-account {
		display: none;
	}

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

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

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

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

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

	.tsf-hero h1 {
		max-width: 100%;
	}
}

/* ---------- Catalog filter toolbar (Availability / Price) ----------
   Woo's product-filters block ships overlay-first markup; all its rules
   are zero-specificity :where() selectors, so these overrides flatten the
   dialog into an inline row of dropdowns. One label voice throughout:
   Manrope caps, 0.72rem, 0.12em tracking — same as the sort trigger. */

.tsf-shop-toolbar {
	border-bottom: 1px solid var(--tsf-hairline);
	padding-bottom: 1.1rem;
}

.tsf-filter-trigger {
	font-family: Manrope, sans-serif;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin: 0;
	line-height: 1.4;
}

/* !important beats WooCommerce's own result-count styling */
.wc-block-product-results-count .woocommerce-result-count {
	font-family: Manrope, sans-serif;
	font-size: 0.68rem !important;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--tsf-umber);
	margin: 0 !important;
	line-height: 1.4;
}

/* ---- Desktop (>=601px): flatten Woo's overlay into an inline row ---- */
@media (min-width: 601px) {

.tsf-filterbar .wc-block-product-filters__open-overlay,
.tsf-filterbar .wc-block-product-filters__overlay-header,
.tsf-filterbar .wc-block-product-filters__overlay-footer {
	display: none !important;
}

.tsf-filterbar .wc-block-product-filters__overlay {
	position: static;
	pointer-events: auto;
	background: none;
	inset: auto;
}

.tsf-filterbar .wc-block-product-filters__overlay-wrapper {
	height: auto;
	width: auto;
}

.tsf-filterbar .wc-block-product-filters__overlay-dialog {
	position: static;
	transform: none !important;
	background: transparent;
	inset: auto;
	max-height: none;
}

.tsf-filterbar .wc-block-product-filters__overlay-content {
	flex-direction: row;
	gap: 1.9rem;
	overflow: visible;
	padding: 0;
}

/* Each filter block becomes a dropdown: heading = trigger, rest = panel */
.wp-block-woocommerce-product-filter-status,
.wp-block-woocommerce-product-filter-price {
	position: relative;
}

.tsf-filter-trigger {
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	user-select: none;
	transition: color 0.2s var(--tsf-ease);
}

.tsf-filter-trigger:hover,
.is-open > .tsf-filter-trigger {
	color: var(--tsf-forest);
}

/* Mouse clicks get no outline box; keyboard focus stays visible */
.tsf-filter-trigger:focus {
	outline: none;
}

.tsf-filter-trigger:focus-visible {
	outline: 2px solid var(--tsf-forest);
	outline-offset: 4px;
}

.tsf-filter-trigger::after {
	content: "";
	width: 6px;
	height: 6px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	margin-top: -4px;
	transition: transform 0.2s var(--tsf-ease), margin 0.2s var(--tsf-ease);
}

.is-open > .tsf-filter-trigger::after {
	transform: rotate(225deg);
	margin-top: 2px;
}

.wp-block-woocommerce-product-filter-status > :not(.tsf-filter-trigger),
.wp-block-woocommerce-product-filter-price > :not(.tsf-filter-trigger) {
	display: none;
}

.wp-block-woocommerce-product-filter-status.is-open > :not(.tsf-filter-trigger),
.wp-block-woocommerce-product-filter-price.is-open > :not(.tsf-filter-trigger) {
	display: block;
	position: absolute;
	top: calc(100% + 1rem);
	left: -1.5rem;
	z-index: 60;
	min-width: 240px;
	background: var(--tsf-white);
	border: 1px solid var(--tsf-hairline);
	box-shadow: 0 18px 40px rgba(19, 26, 15, 0.1);
	padding: 1.35rem 1.5rem;
}

.wp-block-woocommerce-product-filter-price.is-open > :not(.tsf-filter-trigger) {
	min-width: 300px;
	padding-bottom: 1.1rem;
}

} /* end desktop flatten (min-width: 601px) */

/* Panel contents: styled for both the desktop dropdown and the mobile drawer */
.wc-block-product-filter-checkbox-list__items {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
}

.wc-block-product-filter-checkbox-list__label {
	font-family: Manrope, sans-serif;
	font-size: 0.85rem;
	font-weight: 500;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	cursor: pointer;
	margin: 0;
}

.wc-block-product-filter-checkbox-list__input {
	accent-color: var(--tsf-forest);
	width: 15px;
	height: 15px;
	margin: 0;
	cursor: pointer;
}

/* Price slider: forest range on a hairline track, crisp round handles */
.wp-block-woocommerce-product-filter-price-slider {
	--wc-product-filter-price-slider: var(--tsf-forest);
}

.wc-block-product-filter-price-slider__range .range-bar {
	background: var(--tsf-hairline);
	border-radius: 2px;
}

.wc-block-product-filter-price-slider__range input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: var(--tsf-white);
	border: 1.5px solid var(--tsf-ink);
	cursor: grab;
}

.wc-block-product-filter-price-slider__range input[type="range"]::-moz-range-thumb {
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: var(--tsf-white);
	border: 1.5px solid var(--tsf-ink);
	cursor: grab;
}

/* Range readout under the slider */
.wc-block-product-filter-price-slider__left.text,
.wc-block-product-filter-price-slider__right.text {
	font-family: Manrope, sans-serif;
	font-size: 0.78rem;
	font-weight: 500;
	color: var(--tsf-umber);
	font-variant-numeric: tabular-nums;
}

.tsf-sortbar {
	gap: 1.4rem;
}

/* ---------- Flush seams ----------
   Pages that open on a hero tuck it under the header, and pages that
   end on a dark section meet the footer with no cream gap between. */

.wp-site-blocks > main:has(.tsf-pagehero) {
	margin-block-start: 0;
	padding-top: 0 !important;
}

.wp-block-post-content > .tsf-pagehero:first-child {
	margin-block-start: 0;
}

.wp-site-blocks > footer.wp-block-template-part {
	margin-block-start: 0;
}

main:has(.wp-block-post-content > .tsf-dark:last-child) {
	padding-bottom: 0 !important;
}

/* Page hero (Our Story etc.) — inside post-content, wider headline than home */
.tsf-pagehero h1 {
	max-width: 20ch;
}

/* ---------- Mobile (<=600px): Woo's native filter drawer ----------
   Below 601px WooCommerce shows its own "Filter products" button that
   opens a bottom-sheet drawer (Availability · Price · Apply) — the same
   pattern as the Shopify site. The desktop flatten above is scoped out,
   so here we only make the native button and drawer read on-brand. */
@media (max-width: 600px) {
	.tsf-shop-toolbar {
		align-items: center;
		gap: 0.5rem 1.25rem;
	}

	/* Sorting now lives inside the "Filter and sort" drawer, so drop the
	   standalone toolbar sort. Only the result count stays on the right,
	   centered on the same line as the Filter button. */
	.tsf-sortbar .wc-block-catalog-sorting {
		display: none;
	}

	.tsf-sortbar {
		align-items: center;
	}

	/* The native "Filter products" trigger, on-brand */
	.tsf-filterbar .wc-block-product-filters__open-overlay {
		font-family: Manrope, sans-serif;
		font-size: 0.68rem;
		font-weight: 600;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--tsf-ink);
		gap: 0.4rem;
	}

	.tsf-filterbar .wc-block-product-filters__open-overlay:hover {
		color: var(--tsf-forest);
	}

	.tsf-filterbar .wc-block-product-filters__open-overlay svg {
		width: 1.2em;
		height: 1.2em;
	}

	/* Drawer: soft top corners, comfortable header */
	.wc-block-product-filters__overlay-dialog {
		border-top-left-radius: 14px;
		border-top-right-radius: 14px;
	}

	.wc-block-product-filters__overlay-header {
		padding-top: 1.35rem;
	}

	/* In the drawer, the group labels read as headings, not micro-caps */
	.tsf-filterbar .tsf-filter-trigger {
		font-family: Literata, Georgia, serif;
		font-size: 1.05rem;
		font-weight: 500;
		letter-spacing: 0;
		text-transform: none;
		color: var(--tsf-ink);
		margin-bottom: 0.9rem;
	}

	/* Apply button in the theme's ink-button voice */
	.wc-block-product-filters__apply {
		background: var(--tsf-ink);
		color: var(--tsf-paper);
		font-family: Manrope, sans-serif;
		font-size: 0.72rem;
		font-weight: 600;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		padding: 0.95em 2.2em;
		border-radius: 0;
	}
}

/* "Sort by" section injected into the mobile filter drawer (see tsf.js).
   Hidden on desktop, where the drawer content is the inline filter row. */
.tsf-drawer-sort {
	display: none;
}

@media (max-width: 600px) {
	.tsf-drawer-sort {
		display: block;
		border-top: 1px solid var(--tsf-hairline);
		margin-top: 0.6rem;
		padding-top: 1.5rem;
	}

	.tsf-drawer-sort__list {
		display: flex;
		flex-direction: column;
		gap: 0.15rem;
	}

	.tsf-drawer-sort__opt {
		text-align: left;
		background: transparent;
		border: 0;
		cursor: pointer;
		font-family: Manrope, sans-serif;
		font-size: 0.95rem;
		color: var(--tsf-ink);
		padding: 0.5rem 0;
	}

	.tsf-drawer-sort__opt.is-current {
		color: var(--tsf-forest);
		font-weight: 600;
	}
}

/* ---------- Shop by Collection directory page ---------- */
.tsf-collections-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem 0.5rem;
}

/* Neutralize the flow-layout vertical margins on grid children */
.tsf-collections-grid > * {
	margin: 0 !important;
}

/* Collection cards: image on top, title below in ink (like the live site),
   rather than white text overlaid on the photo. Whole card is one link. */
.tsf-coll-card {
	position: relative;
}

.tsf-coll-card figure {
	margin: 0;
	overflow: hidden;
}

.tsf-coll-card img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: var(--tsf-white);
	transition: transform 0.6s var(--tsf-ease);
}

.tsf-coll-card:hover img {
	transform: scale(1.04);
}

.tsf-coll-card__title {
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
	margin: 0.6rem 0 0;
	font-family: Literata, Georgia, serif;
	font-size: 1.05rem;
	font-weight: 500;
	line-height: 1.25;
	color: var(--tsf-ink);
	transition: color 0.25s var(--tsf-ease);
}

.tsf-coll-card__title::after {
	content: "\2192"; /* → */
	transition: transform 0.25s var(--tsf-ease);
}

.tsf-coll-card:hover .tsf-coll-card__title {
	color: var(--tsf-forest);
}

.tsf-coll-card:hover .tsf-coll-card__title::after {
	transform: translateX(4px);
}

@media (max-width: 900px) {
	.tsf-collections-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.tsf-coll-card__title {
		font-size: 0.92rem;
	}
}

/* Mobile: let the grid reach closer to the screen edges and start higher,
   so the collections fill the page. Negative side margins pull it out of the
   shared page padding (kept smaller than that padding, so no overflow). */
@media (max-width: 600px) {
	.tsf-collections-grid {
		margin-left: -0.9rem !important;
		margin-right: -0.9rem !important;
		padding-top: 1.1rem !important;
		gap: 0.7rem 0.5rem;
	}
}

/* ---------- "Sold out" badge on product cards (Shop + collections) ----------
   WooCommerce flips a variable product's card class to `outofstock` only when
   EVERY variation is sold out, so this badge means "all variations sold out". */
.wc-block-product.outofstock {
	position: relative;
}

.wc-block-product.outofstock::before {
	content: "Sold out";
	position: absolute;
	top: 0.7rem;
	left: 0.7rem;
	z-index: 2;
	background: var(--tsf-ink);
	color: var(--tsf-paper);
	font-family: Manrope, sans-serif;
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 0.32rem 0.6rem;
	pointer-events: none;
}

/* Quietly fade the sold-out product's image so the badge reads clearly */
.wc-block-product.outofstock .wc-block-components-product-image img,
.wc-block-product.outofstock img {
	opacity: 0.68;
}

/* ---------- Product-card button: Add to cart / Choose options ---------- */
/* Make each card an equal-height column and pin the button to the bottom,
   so buttons align across a row even when titles wrap to 1 vs 2 lines. */
.wc-block-product-template .wc-block-product {
	display: flex;
	flex-direction: column;
}

.wc-block-product-template .wp-block-woocommerce-product-button {
	margin-top: auto;
	padding-top: 0.8rem;
}

/* Full card width + fixed height so Sold out / Add to cart / Choose options
   are all identical in size (WooCommerce otherwise sizes them to their text). */
.wc-block-product-template .wp-block-button,
.wc-block-product-template .wp-block-woocommerce-product-button {
	width: 100%;
	max-width: none;
}

.wc-block-product-template .wp-block-button__link {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100% !important;
	min-height: 2.9rem;
	background: transparent;
	color: var(--tsf-ink);
	/* WooCommerce sets border-style:none at higher specificity, so force it */
	border: 1px solid var(--tsf-ink) !important;
	border-radius: 0;
	font-family: Manrope, sans-serif;
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 0.4rem 0.9rem;
	text-align: center;
	line-height: 1.2;
	transition: background 0.25s var(--tsf-ease), color 0.25s var(--tsf-ease),
		border-color 0.25s var(--tsf-ease);
}

.wc-block-product-template .wp-block-button__link:hover {
	background: var(--tsf-ink);
	color: var(--tsf-paper);
}

/* Sold-out card: quiet, non-actionable button */
.wc-block-product.outofstock .wp-block-button__link {
	background: transparent;
	color: var(--tsf-umber);
	border-color: var(--tsf-hairline) !important;
	pointer-events: none;
	cursor: default;
}

/* ---------- Checkout / order-pay (Razorpay receipt) ----------
   WooCommerce's order-pay screen + the Razorpay plugin's bare markup, styled
   to the theme. Razorpay prints button/notice elements with fixed IDs and no
   classes, so its own IDs are the only stable hook. */
.tsf-checkout ul.order_details {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem 2.5rem;
	margin: 0 0 clamp(1.75rem, 4vw, 2.5rem);
	padding: 0 0 1.25rem;
	border-bottom: 1px solid var(--tsf-hairline);
}

.tsf-checkout ul.order_details li {
	font-family: Manrope, sans-serif;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tsf-umber);
	margin: 0;
	max-width: none;
}

.tsf-checkout ul.order_details li strong {
	display: block;
	font-family: Literata, Georgia, serif;
	font-size: 1.05rem;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--tsf-ink);
	margin-top: 0.25rem;
}

p:has(> #btn-razorpay) {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
}

#btn-razorpay,
#btn-razorpay-cancel {
	font-family: Manrope, sans-serif;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	border-radius: 0;
	border: 1px solid var(--tsf-ink);
	padding: 1.05em 2.4em;
	min-height: 52px;
	cursor: pointer;
	transition: background-color 0.25s var(--tsf-ease), color 0.25s var(--tsf-ease),
		border-color 0.25s var(--tsf-ease);
}

#btn-razorpay {
	background: var(--tsf-ink);
	color: var(--tsf-paper);
}

#btn-razorpay:hover:not([disabled]) {
	background: var(--tsf-forest);
	border-color: var(--tsf-forest);
	color: var(--tsf-paper);
}

#btn-razorpay[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
}

/* Cancel stays quiet — it must not compete with Pay Now */
#btn-razorpay-cancel {
	background: transparent;
	color: var(--tsf-umber);
	border-color: var(--tsf-hairline);
}

#btn-razorpay-cancel:hover {
	background: var(--wp--preset--color--accent-3);
	color: var(--tsf-ink);
	border-color: var(--tsf-ink);
}

/* The plugin hardcodes an inline grey background + border on this notice,
   so every contested property needs !important to reach it. */
#msg-razorpay-success {
	background: var(--wp--preset--color--accent-3) !important;
	border: 1px solid var(--tsf-ink) !important;
	border-radius: 0 !important;
	padding: 1rem 1.25rem !important;
	color: var(--tsf-ink) !important;
	font-family: Manrope, sans-serif;
	font-weight: 500;
}

.tsf-checkout-trust {
	padding-top: 1.25rem;
}

.tsf-checkout-trust p {
	font-size: 0.78rem;
	color: var(--tsf-umber);
	margin: 0;
}