/*
Theme Name:  Wildfire
Theme URI:   https://wildfiretrading.ca
Description: Blocksy child theme for Wildfire Trading Co. Dark, resinous,
             Canadian wildcraft. Every value here resolves to a token from
             assets/tokens.css — no literal colours, sizes or spacing.
Author:      Wildfire Trading Co.
Template:    blocksy
Version:     0.2.0
Text Domain: wildfire
*/

/* ==========================================================================
   Blocksy palette remap
   ==========================================================================
   Blocksy drives its entire UI from ~49 --theme-* custom properties, and ships
   them blue: palette 1/2 are #2872fa/#1559ed, headings are #192a3d, and those
   feed links, buttons, form focus rings and ::selection. Overriding rule by
   rule meant Woo blue kept surfacing somewhere new — the active PDP tab was
   still #1559ED after four passes. Rebinding the variables fixes every
   descendant at once and keeps a single source of truth: our tokens.
   ========================================================================== */

/* `:root:root` rather than `:root` on purpose. Blocksy prints its dynamic CSS
   inline on wp_head at priority 10 — after this stylesheet's <link> — so at
   equal specificity its :root block wins on source order and the remap did
   nothing. Doubling the selector outranks it without needing !important on
   every line. */
:root:root {
	--theme-palette-color-1: var(--wf-ember);
	--theme-palette-color-2: var(--wf-ember-deep);
	--theme-palette-color-3: var(--wf-smoke);
	--theme-palette-color-4: var(--wf-ash);
	--theme-palette-color-5: var(--wf-border);
	--theme-palette-color-6: var(--wf-birch);
	--theme-palette-color-7: var(--wf-birch);
	--theme-palette-color-8: var(--wf-surface);

	--theme-text-color: var(--wf-ash);
	--theme-headings-color: var(--wf-ash);
	--theme-border-color: var(--wf-border);

	--theme-link-initial-color: var(--wf-ember);
	--theme-link-hover-color: var(--wf-ember-deep);

	--theme-button-background-initial-color: var(--wf-ember);
	--theme-button-background-hover-color: var(--wf-ember-deep);
	--theme-button-text-initial-color: var(--wf-birch);
	--theme-button-text-hover-color: var(--wf-birch);
	--theme-button-border: 0;
	--theme-button-shadow: none;
	--theme-button-font-size: var(--wf-size-small);
	--theme-button-font-weight: 600;

	--theme-form-field-border-initial-color: var(--wf-border);
	--theme-form-field-border-focus-color: var(--wf-ember);
	--theme-form-selection-field-initial-color: var(--wf-border);
	--theme-form-selection-field-active-color: var(--wf-ember);

	--theme-selection-background-color: var(--wf-ember);
	--theme-selection-text-color: var(--wf-birch);

	--theme-font-family: var(--wf-font-body);
	--theme-font-stack-default: var(--wf-font-body);
	--theme-font-size: var(--wf-size-body);
	--theme-line-height: var(--wf-leading-body);
	--theme-normal-container-max-width: var(--wf-maxw);
}

/* ==========================================================================
   Base
   ========================================================================== */

body {
	background: var(--wf-bg);
	color: var(--wf-text);
	font-family: var(--wf-font-body);
	font-size: var(--wf-size-body);
	line-height: var(--wf-leading-body);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4,
.wf-display {
	font-family: var(--wf-font-display);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--wf-track-display);
	line-height: 1.1;
}

h1 { font-size: var(--wf-size-h1); }
h2 { font-size: var(--wf-size-h2); }
h3 { font-size: var(--wf-size-h3); }

p { max-width: var(--wf-measure); }

/* Blocksy applies its container width to every direct child of .entry-content,
   which outranks the bare `p` rule above and gave the long-form pages a 151
   character measure — more than double the 68ch BRAND.md §4 specifies. Reading
   copy gets the measure; media and embeds keep the full column. */
/* Declaring layout.contentSize in theme.json makes WordPress core emit:
     .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull))
       { margin: auto !important }
   That centred every paragraph while the page title and full-width blocks such
   as a form stayed flush left, which reads as a broken column rather than a
   measured one. Core sets it !important, so no amount of specificity wins —
   this is one of the few places the override is genuinely required rather than
   a shortcut. */
body .entry-content > p,
body .entry-content > ul,
body .entry-content > ol,
body .entry-content > h2,
body .entry-content > h3,
body .entry-content > h4,
body .entry-content > blockquote,
body .entry-content > .wp-block-list,
body .entry-content > .wp-block-paragraph {
	max-width: var(--wf-measure);
	margin-inline: 0 !important;
}
.entry-content > .wp-block-table,
.entry-content > figure,
.entry-content > .wp-block-image {
	max-width: none;
}

a { color: var(--wf-accent); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--wf-accent-hover); }

.wf-wrap {
	max-width: var(--wf-maxw);
	margin-inline: auto;
	padding-inline: var(--wf-3);
}

/* Hairline rule — BRAND.md §8 */
.wf-rule,
hr {
	border: 0;
	border-top: 1px solid var(--wf-border);
	margin: var(--wf-5) 0;
}

/* ==========================================================================
   Buttons — no stock Woo blue anywhere (CLAUDE.md §5)
   Blocksy and WooCommerce both ship their own button colours; this covers the
   selectors each of them actually emits rather than relying on one of them.
   ========================================================================== */

.wf-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .product a.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #place_order,
.wc-block-components-button,
.wp-block-button__link {
	font-family: var(--wf-font-display);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--wf-track-display);
	font-size: var(--wf-size-small);
	background: var(--wf-accent);
	background-image: none;
	color: var(--wf-birch);
	border: 0;
	border-radius: var(--wf-radius);
	padding: 0.9rem 2rem;
	box-shadow: var(--wf-shadow);
	cursor: pointer;
	transition: background 160ms var(--wf-ease);
}

.wf-btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #place_order:hover,
.wc-block-components-button:hover,
.wp-block-button__link:hover {
	background: var(--wf-accent-hover);
	color: var(--wf-birch);
}

.wf-btn--ghost {
	background: transparent;
	color: currentColor;
	border: 1px solid var(--wf-border);
}
.wf-btn--ghost:hover {
	background: var(--wf-accent);
	color: var(--wf-birch);
	border-color: var(--wf-accent);
}

/* Woo's own status colours lean blue; bring them onto the palette.
   Both families are covered: the classic .woocommerce-message markup and the
   block notice banner used by the block cart/checkout and the order-received
   page, which ships its own grey-blue and ignores the classic selectors. */
.woocommerce-info,
.woocommerce-message,
.wc-block-components-notice-banner,
.wc-block-components-notice-banner.is-info,
.wc-block-components-notice-banner.is-success {
	border-top-color: var(--wf-accent);
	border-color: var(--wf-border);
	background: rgba(196, 164, 132, 0.10);
	color: var(--wf-text);
	border-radius: var(--wf-radius);
}
.woocommerce-info::before,
.woocommerce-message::before { color: var(--wf-accent); }
.wc-block-components-notice-banner > svg {
	fill: var(--wf-accent);
	background: transparent;
}

/* ==========================================================================
   Dark sections
   ========================================================================== */

.wf-dark {
	background: var(--wf-bg-inverse);
	color: var(--wf-text-inverse);
	--wf-text: var(--wf-birch);
	--wf-text-muted: rgba(242, 235, 224, 0.62);
	--wf-border: rgba(196, 164, 132, 0.24);
}
.wf-dark h1, .wf-dark h2, .wf-dark h3, .wf-dark p { color: var(--wf-text-inverse); }

/* ==========================================================================
   Header
   ========================================================================== */

.wf-header {
	background: var(--wf-bg);
	border-bottom: 1px solid var(--wf-border);
}
.wf-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wf-3);
	max-width: var(--wf-maxw);
	margin-inline: auto;
	padding: var(--wf-2) var(--wf-3);
}
/* The logo must never be the thing that gives way. Without an explicit
   flex-basis the nav's intrinsic width squeezed it to zero at 390px, so the
   header rendered with no mark at all and the nav running off the edge. */
.wf-header__logo { flex: 0 0 auto; }
.wf-header__logo img,
.wf-header__logo svg { display: block; height: 34px; width: auto; }
.wf-nav-wrap { min-width: 0; }
.wf-cart { flex: 0 0 auto; }

@media (max-width: 860px) {
	/* Two rows: identity + cart, then the nav across the full width. Keeps the
	   lockup and the cart count visible, which are the two things a shopper
	   needs, without a JS drawer. */
	.wf-header__inner {
		flex-wrap: wrap;
		gap: var(--wf-2);
		padding-inline: var(--wf-2);
	}
	.wf-header__logo { order: 1; }
	.wf-cart { order: 2; margin-left: auto; }
	.wf-nav-wrap {
		order: 3;
		flex: 1 0 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.wf-nav-wrap::-webkit-scrollbar { display: none; }
	.wf-nav {
		gap: var(--wf-2);
		flex-wrap: nowrap;
		white-space: nowrap;
		padding-bottom: 0.25rem;
	}
	.wf-nav a { font-size: var(--wf-size-micro); }
	.wf-header__logo img { height: 26px; }
}

.wf-nav {
	display: flex;
	gap: var(--wf-3);
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
}
.wf-nav a {
	font-family: var(--wf-font-display);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--wf-track-display);
	font-size: var(--wf-size-small);
	color: var(--wf-text);
	text-decoration: none;
}
.wf-nav a:hover { color: var(--wf-accent); }

.wf-cart {
	position: relative;
	font-family: var(--wf-font-display);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--wf-track-display);
	font-size: var(--wf-size-small);
	color: var(--wf-text);
	text-decoration: none;
	white-space: nowrap;
}
.wf-cart__count {
	display: inline-block;
	min-width: 1.5em;
	padding: 0.1em 0.4em;
	margin-left: 0.35em;
	background: var(--wf-accent);
	color: var(--wf-birch);
	border-radius: var(--wf-radius);
	text-align: center;
	font-size: var(--wf-size-micro);
}

/* ==========================================================================
   Home — hero (BRAND.md §8: full-bleed dark, 70vh, text lower third)
   ========================================================================== */

.wf-hero {
	position: relative;
	min-height: 70vh;
	display: flex;
	align-items: flex-end;
	background: var(--wf-ash);
	color: var(--wf-birch);
	overflow: hidden;
}
/* The banner is an <img> so it can carry a srcset and fetchpriority; it is
   pinned behind the scrim rather than set as a background. Explicit width/height
   on the element keeps CLS at zero while it loads. */
.wf-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	z-index: 0;
}
/* Scrim only under the text side, so the image stays readable on the right. */
.wf-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		100deg,
		rgba(20, 17, 15, 0.86) 0%,
		rgba(20, 17, 15, 0.68) 38%,
		rgba(20, 17, 15, 0.18) 70%,
		rgba(20, 17, 15, 0.05) 100%
	);
}
.wf-hero__inner {
	position: relative;
	z-index: 2;
	max-width: var(--wf-maxw);
	margin-inline: auto;
	width: 100%;
	padding: var(--wf-7) var(--wf-3) var(--wf-6);
}
.wf-hero__eyebrow {
	font-family: var(--wf-font-display);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--wf-track-wordmark);
	font-size: var(--wf-size-micro);
	color: var(--wf-kraft);
	margin-bottom: var(--wf-2);
}
.wf-hero__title {
	font-size: var(--wf-size-hero);
	color: var(--wf-birch);
	margin: 0 0 var(--wf-2);
	max-width: 16ch;
}
.wf-hero__lede {
	color: rgba(242, 235, 224, 0.82);
	max-width: 46ch;
	margin-bottom: var(--wf-3);
}

/* ==========================================================================
   Collections — 2x3 asymmetric grid, one tall tile + four square
   ========================================================================== */

.wf-collections {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 220px;
	gap: var(--wf-2);
}
.wf-collections .wf-tile:first-child {
	grid-column: span 2;
	grid-row: span 2;
}
.wf-tile {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--wf-charcoal);
	border-radius: var(--wf-radius);
	text-decoration: none;
}
.wf-tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 400ms var(--wf-ease);
}
.wf-tile:hover img { transform: scale(1.03); }
.wf-tile__label {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding: var(--wf-3) var(--wf-2) var(--wf-2);
	background: linear-gradient(to top, rgba(20, 17, 15, 0.88), rgba(20, 17, 15, 0));
	color: var(--wf-birch);
	font-family: var(--wf-font-display);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--wf-track-display);
	font-size: var(--wf-size-h3);
}
.wf-tile__count {
	display: block;
	font-family: var(--wf-font-body);
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	font-size: var(--wf-size-micro);
	color: var(--wf-kraft);
}

@media (max-width: 860px) {
	.wf-collections { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 170px; }
	.wf-collections .wf-tile:first-child { grid-column: span 2; grid-row: span 1; }
}

/* ==========================================================================
   Section rhythm — generous on birch, tight on dark (BRAND.md §8)
   ========================================================================== */

.wf-section { padding-block: var(--wf-7); }
.wf-section--tight { padding-block: var(--wf-5); }
.wf-section__head { margin-bottom: var(--wf-4); }
.wf-section__title { font-size: var(--wf-size-h2); margin: 0 0 var(--wf-1); }
.wf-section__sub { color: var(--wf-text-muted); margin: 0; }

.wf-steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wf-4);
}
.wf-step__n {
	font-family: var(--wf-font-display);
	font-weight: 600;
	font-size: var(--wf-size-h2);
	color: var(--wf-kraft);
	display: block;
	margin-bottom: var(--wf-1);
}
@media (max-width: 720px) { .wf-steps { grid-template-columns: 1fr; gap: var(--wf-3); } }

/* ==========================================================================
   Product grids — 3-up desktop / 2-up mobile (CLAUDE.md §5)
   ========================================================================== */

/* Bare `ul.products` is matched too, not just the .woocommerce-wrapped form:
   front-page.php and the "pairs with" row build their own loops outside any
   .woocommerce container, and without this they stack single-column. */
ul.products,
.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wf-4) var(--wf-3);
	margin: 0;
	padding: 0;
	list-style: none;
}
ul.products li.product,
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	width: 100% !important;
	margin: 0 !important;
	float: none !important;
	text-align: left;
}
ul.products li.product a img,
.woocommerce ul.products li.product a img {
	background: var(--wf-charcoal);
	border-radius: var(--wf-radius);
	margin-bottom: var(--wf-2);
}
/* Card links inherit the body colour, not the accent. Left to the global
   `a { color: accent }` rule every product title on the shop page renders in
   ember, which puts it far past the ~5% ceiling BRAND.md §3 sets for it. */
ul.products li.product a,
.woocommerce ul.products li.product a {
	color: var(--wf-text);
	text-decoration: none;
}
ul.products li.product a:hover .woocommerce-loop-product__title,
.woocommerce ul.products li.product a:hover .woocommerce-loop-product__title {
	color: var(--wf-accent);
}
ul.products li.product .wc-loop-product__category,
ul.products li.product .posted_in,
.woocommerce ul.products li.product .wc-loop-product__category {
	color: var(--wf-text-muted);
	font-size: var(--wf-size-micro);
	text-transform: uppercase;
	letter-spacing: var(--wf-track-display);
}

ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--wf-font-display);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--wf-track-display);
	font-size: var(--wf-size-h3);
	padding: 0;
	margin: 0 0 var(--wf-1);
}
ul.products li.product .price,
.woocommerce ul.products li.product .price {
	color: var(--wf-text);
	font-family: var(--wf-font-body);
	font-size: var(--wf-size-body);
}
.woocommerce ul.products li.product .price del { color: var(--wf-text-muted); }
.woocommerce ul.products li.product .price ins { text-decoration: none; color: var(--wf-accent); }

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

/* Archive layout: filter rail left, no sidebar clutter */
.wf-shop {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: var(--wf-5);
	align-items: start;
}
.wf-filters { position: sticky; top: var(--wf-3); }
.wf-filters h3 {
	font-size: var(--wf-size-small);
	color: var(--wf-text-muted);
	margin: 0 0 var(--wf-2);
}
.wf-filters ul { list-style: none; margin: 0 0 var(--wf-4); padding: 0; }
.wf-filters li { margin-bottom: var(--wf-1); }
.wf-filters a {
	color: var(--wf-text);
	text-decoration: none;
	font-size: var(--wf-size-small);
}
.wf-filters a:hover,
.wf-filters .is-active a { color: var(--wf-accent); }
@media (max-width: 860px) {
	.wf-shop { grid-template-columns: 1fr; gap: var(--wf-3); }
	.wf-filters { position: static; }
	.wf-filters ul { display: flex; flex-wrap: wrap; gap: var(--wf-2); margin-bottom: var(--wf-3); }
}

/* ==========================================================================
   PDP — sticky gallery left, details right
   ========================================================================== */

/* single-product.php renders the two columns directly, so this is a plain grid
   on .wf-pdp — no wrapper to work around and no !important anywhere. The
   earlier version fought Blocksy's .product-entry-wrapper and Woo's float
   layout at the same time, and collapsed the gallery to half its track twice. */
.wf-pdp {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: var(--wf-5);
	align-items: start;
}

.wf-pdp__gallery {
	position: sticky;
	top: var(--wf-3);
	min-width: 0;
}

.wf-pdp__summary {
	min-width: 0;
}

/* Woo still sets width/float on these from its own stylesheet. */
.wf-pdp .woocommerce-product-gallery,
.wf-pdp .summary {
	width: 100%;
	max-width: 100%;
	float: none;
	margin: 0;
}

.wf-pdp .woocommerce-product-gallery img {
	background: var(--wf-charcoal);
	border-radius: var(--wf-radius);
}

.wf-pdp .product_title {
	font-size: var(--wf-size-h1);
	margin: 0 0 var(--wf-2);
}

.wf-pdp p.price,
.wf-pdp span.price {
	color: var(--wf-text);
	font-family: var(--wf-font-body);
	font-size: var(--wf-size-h3);
	margin-bottom: var(--wf-2);
}

/* Size and SKU, directly under the price. */
.wf-specs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wf-1) var(--wf-3);
	list-style: none;
	margin: 0 0 var(--wf-3);
	padding: 0;
	border-bottom: 1px solid var(--wf-border);
	padding-bottom: var(--wf-3);
}

.wf-specs__item {
	font-size: var(--wf-size-small);
	color: var(--wf-text);
}

.wf-specs__label {
	display: block;
	font-family: var(--wf-font-display);
	font-weight: 600;
	font-size: var(--wf-size-micro);
	text-transform: uppercase;
	letter-spacing: var(--wf-track-display);
	color: var(--wf-text-muted);
	margin-bottom: 0.15rem;
}

/* Tabs and the rows beneath span both columns. */
.wf-pdp .woocommerce-tabs,
.wf-pdp .related,
.wf-pdp .upsells,
.wf-pdp .wf-pairs {
	grid-column: 1 / -1;
}

/* The scent notes live in the details column now. The imported description
   still carries its own copy so the content stays editable in wp-admin, but
   showing both is just duplication on the page. */
.woocommerce-Tabs-panel .wf-notes,
.woocommerce-tabs .wf-notes { display: none; }

@media (max-width: 860px) {
	.wf-pdp {
		grid-template-columns: 1fr;
		gap: var(--wf-3);
	}
	.wf-pdp__gallery { position: static; }
}

/* Scent notes panel */
.wf-notes {
	border: 1px solid var(--wf-border);
	background: rgba(196, 164, 132, 0.08);
	border-radius: var(--wf-radius);
	padding: var(--wf-3);
	font-family: var(--wf-font-accent);
	font-style: italic;
	color: var(--wf-text-muted);
	margin-block: var(--wf-3);
}
.wf-notes__label {
	display: block;
	font-family: var(--wf-font-display);
	font-style: normal;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--wf-track-display);
	font-size: var(--wf-size-micro);
	color: var(--wf-text);
	margin-bottom: var(--wf-1);
}

/* Ingredients accordion */
.wf-accordion {
	border-top: 1px solid var(--wf-border);
	margin-top: var(--wf-3);
}
.wf-accordion summary {
	cursor: pointer;
	list-style: none;
	padding: var(--wf-2) 0;
	font-family: var(--wf-font-display);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--wf-track-display);
	font-size: var(--wf-size-small);
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.wf-accordion summary::-webkit-details-marker { display: none; }
.wf-accordion summary::after { content: "+"; color: var(--wf-accent); font-size: var(--wf-size-h3); }
.wf-accordion[open] summary::after { content: "\2013"; }
.wf-accordion__body { padding-bottom: var(--wf-3); color: var(--wf-text-muted); }

/* Tabs — strip Woo's blue active state */
.woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0; margin-bottom: var(--wf-3); }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border-bottom-color: var(--wf-border); }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	font-family: var(--wf-font-display);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--wf-track-display);
	font-size: var(--wf-size-small);
	color: var(--wf-text-muted);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--wf-text); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	border-bottom: 2px solid var(--wf-accent);
}

/* Quantity + stock */
.woocommerce .quantity .qty {
	border: 1px solid var(--wf-border-strong);
	border-radius: var(--wf-radius);
	padding: 0.6rem;
	font-family: var(--wf-font-body);
}
.woocommerce div.product .stock { color: var(--wf-lichen); font-size: var(--wf-size-small); }

/* ==========================================================================
   Cart + checkout
   ========================================================================== */

.woocommerce table.shop_table {
	border: 1px solid var(--wf-border);
	border-radius: var(--wf-radius);
	border-collapse: collapse;
}
.woocommerce table.shop_table th {
	font-family: var(--wf-font-display);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--wf-track-display);
	font-size: var(--wf-size-micro);
	color: var(--wf-text-muted);
	border-bottom: 1px solid var(--wf-border);
}
.woocommerce table.shop_table td { border-top: 1px solid var(--wf-border); }
.woocommerce-cart table.cart img { width: 72px; border-radius: var(--wf-radius); background: var(--wf-charcoal); }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.wc-block-components-text-input input {
	border: 1px solid var(--wf-border-strong);
	border-radius: var(--wf-radius);
	padding: 0.7rem;
	font-family: var(--wf-font-body);
	font-size: var(--wf-size-body);
	background: var(--wf-surface);
}
.woocommerce form .form-row label,
.wc-block-components-checkout-step__title {
	font-family: var(--wf-font-display);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--wf-track-display);
	font-size: var(--wf-size-micro);
	color: var(--wf-text-muted);
}
#payment, .woocommerce-checkout #payment {
	background: rgba(196, 164, 132, 0.08);
	border: 1px solid var(--wf-border);
	border-radius: var(--wf-radius);
}
#payment div.payment_box { background: transparent; }
#payment div.payment_box::before { display: none; }

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

.wf-footer {
	background: var(--wf-bg-inverse);
	color: var(--wf-text-inverse);
	padding-block: var(--wf-6) var(--wf-4);
	margin-top: var(--wf-7);
}
.wf-footer a { color: var(--wf-kraft); text-decoration: none; }
.wf-footer a:hover { color: var(--wf-accent); }
.wf-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr repeat(3, 1fr);
	gap: var(--wf-4);
	max-width: var(--wf-maxw);
	margin-inline: auto;
	padding-inline: var(--wf-3);
}
.wf-footer h4 {
	font-size: var(--wf-size-micro);
	color: var(--wf-kraft);
	letter-spacing: var(--wf-track-wordmark);
	margin: 0 0 var(--wf-2);
}
.wf-footer ul { list-style: none; margin: 0; padding: 0; }
.wf-footer li { margin-bottom: var(--wf-1); font-size: var(--wf-size-small); }
.wf-footer__logo img { height: 40px; width: auto; margin-bottom: var(--wf-2); }
.wf-footer__legal {
	max-width: var(--wf-maxw);
	margin: var(--wf-4) auto 0;
	padding: var(--wf-3) var(--wf-3) 0;
	border-top: 1px solid var(--wf-border);
	font-size: var(--wf-size-micro);
	color: rgba(242, 235, 224, 0.62);
}
@media (max-width: 860px) {
	.wf-footer__grid { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--wf-accent);
	outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}