/*
 * Purely Infused — storefront styling
 * ----------------------------------
 * Loaded by purelyinfused-ui.php (an mu-plugin). Front end only. No theme
 * files touched, no colours changed: depth comes from neutral black/white
 * alphas only.
 *
 * File layout, top to bottom:
 *   1  Tokens
 *   2  Type
 *   3  Buttons
 *   4  Header and navigation
 *   5  Section rhythm
 *   6  Hero
 *   7  Product cards
 *   8  Single product
 *   9  Cart and checkout      (state we cannot load without items in a cart)
 *  10  My account            (state we cannot load while logged out)
 *  11  Footer
 *  12  Focus, motion, small screens
 *
 * Reverting: copy the .before snapshot from /root/backups/css-audit-<date>/
 * back over this file, or delete this file and purelyinfused-ui.php.
 * Snapshot before editing anything, then edit.
 *
 * Things worth knowing before editing:
 *   - The theme sets section padding through generated
 *     wp-container-core-group-is-layout-* classes, so the section rhythm
 *     rules need !important. Every other !important in this file is
 *     commented at the rule that carries it.
 *   - Product cards are a flex container with fixed percentage item widths;
 *     raising `gap` pushes the third card onto its own row and doubles the
 *     page height.
 *   - Blocks carry font-size presets (.has-small-font-size etc.) emitted
 *     with !important, so font-size on prices and card buttons is inert.
 *     Change the block in the editor, not here.
 *   - Some rules are scoped to .wc-block-product without a .woocommerce
 *     prefix on purpose: the homepage <body> has no woocommerce class, and
 *     an extra class is also how the old file beat the theme on specificity.
 */

/* ===============================================================
 * 1. TOKENS
 * Values that were repeated across the old file, named once. Every
 * value here matches what the site rendered before, so these are
 * rename-only unless noted.
 * ============================================================= */
:root {
	--pi-ink: #111;
	/* The logo is two colours: black and this green (#1a8f1b, sampled from
	   the logo PNG). Used as the brand accent. */
	--pi-green: #1a8f1b;
	--pi-line: rgba(0, 0, 0, 0.08);
	--pi-pill: 999px;

	--pi-radius: 6px;
	--pi-radius-card: 10px;

	--pi-lift: 0 8px 22px rgba(0, 0, 0, 0.2);
	--pi-ease: 160ms ease;

	--pi-measure: 68ch;
	--pi-measure-hero: 46ch;
}

/* ===============================================================
 * 2. TYPE
 * The theme renders every heading at the same size. This puts a
 * real hierarchy back: h1 60px down to h6 at body size.
 * ============================================================= */
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	line-height: 1.65;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	letter-spacing: -0.015em;
	line-height: 1.15;
	text-wrap: balance;
}

/* Block headings carry .wp-block-heading, and the theme styles that class
   at (0,1,0), so each rule names both the tag and the class variant. Doing
   it this way (rather than a bare ".wp-block-heading") keeps h3 and h4
   blocks from being rendered at h2 size, which is what the old file did. */
h1,
.wp-block-heading.is-style-h1 {
	font-size: clamp(2.5rem, 4.6vw, 3.75rem);
	font-weight: 500;
	letter-spacing: -0.03em;
	line-height: 1.04;
}

h2,
h2.wp-block-heading {
	font-size: clamp(1.9rem, 3.1vw, 2.7rem);
	font-weight: 500;
	letter-spacing: -0.024em;
	line-height: 1.1;
}

/* h3 and below sit inside copy rather than heading a section */
h3,
h3.wp-block-heading {
	font-size: clamp(1.25rem, 1.7vw, 1.5rem);
	font-weight: 500;
	letter-spacing: -0.012em;
	line-height: 1.25;
}

/* Margins are scoped to block headings on purpose: the mini-cart, the
   account forms and the card titles all render plain <h2>s that already
   carry their own spacing, and resetting it closed up those panels. */
h2.wp-block-heading {
	margin-block: 0 0.6em;
}

h3.wp-block-heading {
	margin-block: 1.4em 0.5em;
}

/* h4-h6 are sub-headings inside product copy */
h4 {
	font-size: 1.125rem;
	font-weight: 500;
	letter-spacing: 0;
}

h5 {
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: 0;
}

h6 {
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: 0.01em;
}

/* Full-width 1232px lines are hard to read */
:where(.wp-block-post-content, .wp-block-group.is-layout-constrained) p {
	max-width: var(--pi-measure);
	text-wrap: pretty;
}

/* Prose links get an inset rule that grows on hover. Scoped to anchors
   that are a direct child of a sentence: buttons, card links and store
   UI links are excluded, which is what stopped a double underline
   appearing on "Browse products" in the empty-orders state. */
:is(.wp-block-post-content, .entry-content, .woocommerce-Tabs-panel)
	:is(p, li, blockquote) > a:not(.wp-block-button__link):not(.button):not(.wp-element-button) {
	text-decoration: none;
	box-shadow: inset 0 -1px 0 currentColor;
	transition: box-shadow var(--pi-ease);
}

:is(.wp-block-post-content, .entry-content, .woocommerce-Tabs-panel)
	:is(p, li, blockquote) > a:not(.wp-block-button__link):not(.button):not(.wp-element-button):hover {
	box-shadow: inset 0 -2px 0 currentColor;
}

/* Classic WooCommerce links (notices, legacy shortcode buttons) sit in
   <p> tags too, so they need the inset rule switched off explicitly. */
.woocommerce a.button,
.woocommerce a.wp-element-button,
.woocommerce-MyAccount-content a.button,
.woocommerce-info a,
.woocommerce-message a,
.woocommerce-error a {
	box-shadow: none !important;
	text-decoration: none !important;
}

/* ===============================================================
 * 3. BUTTONS
 * One treatment everywhere. The old file had a site version and a
 * separate, smaller store version (4px radius, a softer hover), so
 * a card button and a page button looked like different components.
 * ============================================================= */
.wp-element-button,
.wp-block-button__link,
button.wp-element-button,
input[type="submit"].wp-element-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: 0.05em;
	line-height: 1.2;
	padding: 1em 2.1em;
	min-height: 50px;
	border-radius: var(--pi-radius);
	transition: transform var(--pi-ease), box-shadow var(--pi-ease), opacity var(--pi-ease);
}

.wp-element-button:hover,
.wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: var(--pi-lift);
}

.wp-element-button:active,
.wp-block-button__link:active {
	transform: none;
	box-shadow: none;
}

/* Classic template buttons */
.woocommerce a.button,
.woocommerce a.wp-element-button,
.woocommerce-MyAccount-content a.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 1em 2.1em;
	border-radius: var(--pi-radius);
}

/* Single product add to cart is a .wp-element-button too, and the theme
   lays it out in a grid cell that hugs its content unless told to fill */
.woocommerce .single_add_to_cart_button {
	width: 100%;
	white-space: nowrap;
	text-align: center;
}

/* ===============================================================
 * 4. HEADER AND NAVIGATION
 * ============================================================= */

/* Sticky, translucent, with a single hairline. The border-bottom the
   theme's own header rule added sat directly on top of the shadow,
   rendering a 2px edge. */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 60;
	background-color: rgba(255, 255, 255, 0.88);
	-webkit-backdrop-filter: saturate(140%) blur(12px);
	backdrop-filter: saturate(140%) blur(12px);
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.07);
}

header.wp-block-template-part > .wp-block-group {
	padding-top: 14px !important;
	padding-bottom: 14px !important;
}

/* Logo: original size, block display so there is no inline gap */
header.wp-block-template-part .wp-block-site-logo img,
header.wp-block-template-part .custom-logo {
	display: block;
	width: auto;
	height: auto;
}

header.wp-block-template-part .wp-block-group.is-content-justification-space-between,
header.wp-block-template-part .wp-block-group.is-layout-flex {
	align-items: center;
}

header.wp-block-template-part .wp-block-group.is-content-justification-space-between > .wp-block-group {
	gap: 0.25em;
}

/* -- Nav links: capitals, 44px tap targets --------------------- */
header.wp-block-template-part .wp-block-navigation__container {
	gap: 0.25em 0.75em;
}

/* Logo left, navigation centred, account and cart right. Turning the row
   into a three-column grid puts the nav on the page's actual centre line
   instead of letting the logo and icon widths push it around. The two 1fr
   columns are equal, so the auto-width middle column is dead centre. */
header.wp-block-template-part .pi-header-row {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	column-gap: clamp(12px, 2.5vw, 32px);
}

header.wp-block-template-part .pi-header-row > :first-child {
	justify-self: start;
}

header.wp-block-template-part .pi-header-row > .wp-block-navigation {
	justify-self: center;
}

header.wp-block-template-part .pi-header-row > :last-child {
	justify-self: end;
}

/* A full nav bar plus a 111px logo plus two icons needs about 900px. Below
   that the nav takes its own centred row rather than colliding with the
   icons; below 601 the nav block is a hamburger again and one row fits. */
@media (min-width: 600px) and (max-width: 999px) {
	header.wp-block-template-part .pi-header-row {
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"logo icons"
			"nav nav";
		row-gap: 4px;
	}

	header.wp-block-template-part .pi-header-row > :first-child {
		grid-area: logo;
	}

	header.wp-block-template-part .pi-header-row > .wp-block-navigation {
		grid-area: nav;
	}

	header.wp-block-template-part .pi-header-row > :last-child {
		grid-area: icons;
	}
}

header.wp-block-template-part .wp-block-navigation-item__content {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0.5em 0.75em;
	font-size: 0.9375rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.07em;
}

/* The bar below is the only hover indicator a navigation link gets, so
   the theme's own underline is switched off in every state, everywhere
   a navigation block appears (header, footer, account). :visited is
   pointless here: browsers refuse to apply it to text-decoration. */
.wp-block-navigation .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation-item__content:focus,
.wp-block-navigation .wp-block-navigation-item__content:active {
	position: relative;
	text-decoration: none !important;
	border-bottom: 0 !important;
}

/* -- One animated bar per navigation link ---------------------
   Same mechanism in the header, the footer and the account menu;
   only its offsets differ, below. */
.wp-block-navigation .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0.75em;
	right: 0.75em;
	bottom: 0.4em;
	height: 1.5px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 220ms ease;
}

/* The main navigation's indicator is the brand green rather than the text
   colour. The current page uses the same bar, so the active item is marked in
   green too. Footer links keep currentColor, since the request was for the
   main nav; add this same rule scoped to the footer to change those. */
header.wp-block-template-part .wp-block-navigation-item__content::after {
	background: var(--pi-green);
}

.wp-block-navigation .wp-block-navigation-item__content:hover::after,
.wp-block-navigation .wp-block-navigation-item__content:focus-visible::after,
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content::after,
.wp-block-navigation .current_page_item > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

/* -- Account and basket icons --------------------------------- */
header.wp-block-template-part .wc-block-customer-account__link,
header.wp-block-template-part .wc-block-mini-cart__button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 44px !important;
	height: 44px !important;
	min-width: 44px;
	padding: 0 !important;
	border-radius: 50%;
	transition: background-color var(--pi-ease), transform var(--pi-ease);
}

/* The account block wraps its icon in a block-level div that forced a
   63x63 box, so the two icons never lined up. */
header.wp-block-template-part .wc-block-customer-account__link > div {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
}

header.wp-block-template-part .wc-block-mini-cart__quantity-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

header.wp-block-template-part .wc-block-customer-account__link:hover,
header.wp-block-template-part .wc-block-mini-cart__button:hover {
	background-color: rgba(0, 0, 0, 0.05);
	transform: translateY(-1px);
}

header.wp-block-template-part .wc-block-customer-account__link svg,
header.wp-block-template-part .wc-block-mini-cart__button svg {
	width: 22px;
	height: 22px;
}

/* ===============================================================
 * 5. SECTION RHYTHM
 * The theme sets section padding through generated container
 * classes, so these need !important. The hero's own padding in
 * section 6 follows and wins where the two overlap, which is why
 * the order matters.
 * ============================================================= */
.wp-site-blocks > .wp-block-group.alignfull {
	padding-top: clamp(56px, 6.5vw, 96px) !important;
	padding-bottom: clamp(56px, 6.5vw, 96px) !important;
}

/* The product catalogue band was the tightest thing on the page */
.wp-site-blocks > .wp-block-group:has(.wp-block-woocommerce-product-collection) {
	padding-top: clamp(52px, 7vw, 88px) !important;
	padding-bottom: clamp(52px, 7vw, 88px) !important;
	background-color: rgba(0, 0, 0, 0.022);
	border-top: 1px solid rgba(0, 0, 0, 0.06);
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/* ===============================================================
 * 6. HERO
 * The hero image carries an inline aspect-ratio in the block markup,
 * so anything overriding it needs !important. Its source file is
 * 1024x1024 and is cropped to 16/9, which is a content question, not
 * a styling one.
 * ============================================================= */
.wp-site-blocks > .wp-block-group.has-background {
	padding-top: clamp(40px, 5vw, 72px) !important;
	padding-bottom: clamp(40px, 5vw, 72px) !important;
	background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.028) 0%, rgba(0, 0, 0, 0) 62%);
}

.wp-site-blocks > .wp-block-group.has-background .wp-block-columns {
	gap: clamp(24px, 4vw, 56px);
	align-items: center;
}

.wp-site-blocks > .wp-block-group.has-background .wp-block-columns > .wp-block-column:first-child,
.wp-site-blocks > .wp-block-group.has-background .wp-block-columns > .wp-block-column:last-child {
	flex-basis: 50% !important;
}

.wp-site-blocks > .wp-block-group.has-background .wp-block-columns h2 {
	font-size: clamp(2.5rem, 4vw, 3.5rem);
	font-weight: 500;
	letter-spacing: -0.03em;
	line-height: 1.05;
	margin-bottom: 0.45em;
}

.wp-site-blocks > .wp-block-group.has-background .wp-block-columns p {
	font-size: 1.125rem;
	line-height: 1.7;
	max-width: var(--pi-measure-hero);
	margin-bottom: 1.75em;
}

/* The one call to action on the page, given more weight than a card
   button on purpose */
.wp-site-blocks > .wp-block-group.has-background .wp-block-button__link {
	font-size: 1rem;
	letter-spacing: 0.06em;
	padding: 1.05em 2.6em;
	min-height: 54px;
}

.wp-site-blocks > .wp-block-group.has-background .wp-block-button__link:hover {
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.2);
}

/* Column images get a soft lift */
.wp-block-image.is-style-rounded img,
.wp-block-columns .wp-block-image img {
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.wp-site-blocks > .wp-block-group.has-background .wp-block-columns .wp-block-image img {
	border-radius: 14px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.16);
}

/* ===============================================================
 * 7. PRODUCT CARDS
 * The cards are <li class="wc-block-product"> inside a
 * ul.wc-block-product-template. Note the old rules were scoped to
 * .woocommerce, and the homepage <body> has no woocommerce class, so
 * homepage cards were never laid out as columns and never equalised.
 * ============================================================= */

/* -- Layout: equal height, button pinned to the bottom --------- */
ul.wc-block-product-template > li.wc-block-product,
li.wc-block-product {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.wc-block-product .wc-block-components-product-image {
	flex: 0 0 auto;
	margin-bottom: 0.75rem;
}

/* One consistent card title size across both grids, and the card title is
   the size it was always meant to be (the old file styled
   .wc-block-components-product-title, which WooCommerce never renders — it
   emits .wp-block-post-title).

   font-size needs !important: the shop's product-collection title block
   carries WP's .has-medium-font-size preset, which is emitted with
   !important and pins those titles at 19.2px while the homepage ones sit
   at 16px. Without this, the two grids keep different title sizes. */
.wc-block-product .wp-block-post-title {
	margin-block: 0 0.6em;
	font-size: 1.0625rem !important;
	font-weight: 500;
	line-height: 1.35;
}

/* Card titles are links. The whole card is the affordance and it
   lifts and scales on hover, so the title itself stays plain: no
   second hover indicator. */
.wc-block-product .wp-block-post-title a {
	text-decoration: none;
}

.wc-block-product .wc-block-components-product-price {
	font-size: 1.125rem;
	font-weight: 600;
	letter-spacing: 0.005em;
}

/* Sale: the struck-through original price should not compete */
.wc-block-components-product-price del,
.wc-block-components-product-price__regular {
	font-weight: 400;
	opacity: 0.7;
}

.wc-block-product .wp-block-button {
	width: 100%;
	margin-bottom: 0;
}

/* Card buttons fill the card. The extra class in each selector is not
   decoration: the theme sets width/white-space/line-height on
   ".wp-block-button.wc-block-components-product-button .wp-block-button__link"
   at (0,3,0), so a shorter selector loses the tie and the button shrinks
   to its label. Verified against computed styles, not by eye. */
.wc-block-product .wp-block-button .wp-block-button__link,
.wc-block-product .wc-block-components-product-button .wc-block-components-product-button__button {
	width: 100%;
	white-space: nowrap;
	text-align: center;
	line-height: 1.2;
}

/* The price block is the flex child (WooCommerce wraps the price in its
   own div), and it carries margin-top: auto, so the price and the button
   under it sit on the same line in every card of a row, at every width. */
.wc-block-product .wp-block-woocommerce-product-price {
	margin-top: auto;
}

.wc-block-components-product-button {
	margin-top: 0;
}

/* -- Surface: white card on the tinted band -------------------- */
.wc-block-product,
.wc-block-grid__product {
	background-color: #fff;
	border: 1px solid rgba(0, 0, 0, 0.07);
	border-radius: var(--pi-radius-card);
	padding: 12px 12px 16px;
	box-sizing: border-box;
	transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.wc-block-grid__product {
	padding-bottom: 18px;
}

.wc-block-product:hover,
.wc-block-grid__product:hover {
	transform: translateY(-2px);
	border-color: rgba(0, 0, 0, 0.12);
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.1);
}

/* Every product image, wherever the block puts it (cards, mini-cart,
   galleries), shares the button radius */
.wc-block-components-product-image img {
	border-radius: var(--pi-radius);
}

.wc-block-product .wc-block-components-product-image img,
.wc-block-grid__product img {
	border-radius: var(--pi-radius);
	transition: transform 320ms ease, box-shadow 320ms ease;
}

.wc-block-product:hover .wc-block-components-product-image img {
	transform: scale(1.025);
}

/* 4 Pack Hemp Seed Oil (post 272): the image is 3:2 landscape in a
   square card, so object-fit:cover enlarged it 1.5x and cropped a
   third of the width. Scoped to this product by body class. */
.wc-block-product.post-272 .wc-block-components-product-image img {
	object-fit: contain !important;
	object-position: center;
}

/* -- Out of stock --------------------------------------------- */
.wc-block-product.outofstock .wc-block-components-product-image,
.wc-block-grid__product.outofstock .wc-block-grid__product-image {
	position: relative;
}

.wc-block-product.outofstock .wc-block-components-product-image::after,
.wc-block-grid__product.outofstock .wc-block-grid__product-image::after {
	content: "Out of stock";
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 3;
	background-color: rgba(17, 17, 17, 0.92);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	line-height: 1;
	padding: 0.55em 0.8em;
	border-radius: var(--pi-pill);
}

/* Dimmed so the badge reads as a state rather than a label */
.wc-block-product.outofstock .wc-block-components-product-image img,
.wc-block-grid__product.outofstock img {
	opacity: 0.55;
}

.wc-block-product.outofstock .wc-block-components-product-price {
	opacity: 0.6;
}

/* A card you cannot buy should not behave like one */
.wc-block-product.outofstock:hover {
	transform: none;
}

.wc-block-product.outofstock:hover .wc-block-components-product-image img {
	transform: none;
}

.wc-block-product.outofstock .wp-block-button__link,
.wc-block-product.outofstock .wc-block-components-product-button__button {
	background-color: transparent !important;
	color: var(--pi-ink) !important;
	border: 1px solid rgba(17, 17, 17, 0.3) !important;
	box-shadow: none !important;
	font-weight: 500;
}

.wc-block-product.outofstock .wp-block-button__link:hover,
.wc-block-product.outofstock .wc-block-components-product-button__button:hover {
	transform: none;
	box-shadow: none;
	border-color: rgba(17, 17, 17, 0.5) !important;
}

/* ===============================================================
 * 8. SINGLE PRODUCT
 * The block template renders the description and reviews as
 * .woocommerce-Tabs-panel inside .wc-tabs, and the theme sets those
 * panel headings larger than the product title itself.
 * ============================================================= */
.woocommerce div.product .woocommerce-Tabs-panel h2 {
	font-size: 1.375rem;
	line-height: 1.3;
	margin: 1.75em 0 0.5em;
	font-weight: 600;
}

.woocommerce div.product .woocommerce-Tabs-panel h3 {
	font-size: 1.0625rem;
	line-height: 1.4;
	margin: 1.5em 0 0.4em;
	font-weight: 600;
}

.woocommerce div.product .woocommerce-Tabs-panel > h2:first-child,
.woocommerce div.product .woocommerce-Tabs-panel > h3:first-child {
	margin-top: 0;
}

.woocommerce div.product .woocommerce-Tabs-panel p {
	max-width: var(--pi-measure);
	margin-bottom: 1em;
}

.woocommerce div.product .woocommerce-Tabs-panel li {
	max-width: var(--pi-measure);
	margin-bottom: 0.45em;
}

.woocommerce div.product .woocommerce-Tabs-panel li:last-child {
	margin-bottom: 0;
}

.woocommerce div.product .woocommerce-Tabs-panel ul {
	margin: 0 0 1.25em;
	padding-left: 1.15em;
}

/* Tab strip: consistent hit area */
.woocommerce div.product .wc-tabs {
	gap: 0 1.5em;
}

.woocommerce div.product .wc-tabs li a {
	display: inline-block;
	padding: 0.35em 0;
}

/* Price emphasis, block and classic markup both */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-weight: 600;
}

/* The stock line on an unavailable product */
.woocommerce div.product p.stock.out-of-stock {
	display: inline-block;
	background-color: rgba(17, 17, 17, 0.92);
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.55em 0.9em;
	border-radius: var(--pi-pill);
	margin-bottom: 1.25em;
}

/* ===============================================================
 * 9. CART AND CHECKOUT
 * Kept as it was. These states need items in a cart, which we cannot
 * load without a customer session, so the selectors are unverified
 * rather than unused.
 * ============================================================= */
.woocommerce-cart .wc-block-cart-items__row td,
.woocommerce-cart .wc-block-cart-items__row th {
	padding-top: 1.25em;
	padding-bottom: 1.25em;
}

.woocommerce-cart .wc-block-components-totals-item__label,
.woocommerce-checkout .wc-block-components-totals-item__label {
	font-weight: 500;
}

.woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-weight: 600;
}

.woocommerce-cart .wc-block-cart__submit-button,
.woocommerce-checkout .wc-block-components-checkout-place-order-button {
	transition: transform var(--pi-ease), box-shadow var(--pi-ease);
}

.woocommerce-cart .wc-block-cart__submit-button:hover,
.woocommerce-checkout .wc-block-components-checkout-place-order-button:hover {
	transform: translateY(-1px);
	box-shadow: var(--pi-lift);
}

.woocommerce .wc-block-components-text-input input,
.woocommerce-checkout .wc-block-components-text-input input,
.woocommerce .wc-block-components-select__label + select {
	min-height: 48px;
}

/* ===============================================================
 * 10. MY ACCOUNT
 * Also unverified: the navigation only renders for a logged-in
 * customer. One hover indicator (a left rule), no stacked underline.
 * ============================================================= */
.woocommerce-MyAccount-navigation a,
.woocommerce-MyAccount-navigation a:hover,
.woocommerce-MyAccount-navigation a:focus {
	text-decoration: none !important;
	box-shadow: none !important;
}

.woocommerce-MyAccount-navigation ul li a {
	display: block;
	padding: 0.35em 0 0.35em 0.75em;
	border-left: 2px solid transparent;
	opacity: 0.8;
	transition: border-color var(--pi-ease), opacity var(--pi-ease);
}

.woocommerce-MyAccount-navigation ul li a:hover,
.woocommerce-MyAccount-navigation ul li.is-active a {
	border-left-color: currentColor;
	opacity: 1;
}

/* ===============================================================
 * 11. FOOTER
 * ============================================================= */
footer.wp-block-template-part {
	background-color: rgba(0, 0, 0, 0.03);
	border-top: 1px solid var(--pi-line);
	margin-top: clamp(40px, 6vw, 80px);
}

footer.wp-block-template-part > .wp-block-group {
	padding-top: clamp(48px, 6vw, 80px) !important;
	padding-bottom: clamp(48px, 6vw, 80px) !important;
}

footer.wp-block-template-part .wp-block-navigation__container {
	gap: 0.35em 1.5em;
}

footer.wp-block-template-part .wp-block-navigation-item__content {
	padding: 0.15em 0;
	font-size: 0.9375rem;
	letter-spacing: 0.01em;
	opacity: 0.85;
	transition: opacity 140ms ease;
}

footer.wp-block-template-part .wp-block-navigation-item__content:hover {
	opacity: 1;
}

/* Footer links keep the same bar, positioned for tighter spacing */
footer.wp-block-template-part .wp-block-navigation-item__content::after {
	left: 0;
	right: 0;
	bottom: 0.15em;
	height: 1px;
}

footer.wp-block-template-part p {
	font-size: 0.875rem;
	opacity: 0.75;
	margin-top: 1.5em;
}

/* ===============================================================
 * 12. FOCUS, MOTION, SMALL SCREENS
 * ============================================================= */

/* One visible keyboard focus ring, site-wide. The old rule was scoped
   to .woocommerce and skipped inputs on .woocommerce-page. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

@media (max-width: 782px) {
	h1,
	.wp-block-heading.is-style-h1 {
		font-size: 2.25rem;
	}

	h2,
	h2.wp-block-heading {
		font-size: 1.75rem;
	}

	h3,
	h3.wp-block-heading {
		font-size: 1.1875rem;
	}

	.wp-element-button,
	.wp-block-button__link {
		font-size: 0.9375rem;
		padding: 0.9em 1.5em;
		min-height: 48px;
	}

	header.wp-block-template-part {
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
	}

	header.wp-block-template-part > .wp-block-group {
		padding-top: 10px !important;
		padding-bottom: 10px !important;
	}

	header.wp-block-template-part .wp-block-navigation-item__content {
		font-size: 0.875rem;
		letter-spacing: 0.06em;
		/* Six nav items (Home / Shop / Blog / My account / Cart / Checkout)
		   no longer fit on one line in the two-row header below ~645px, so
		   the horizontal padding and gap tighten to keep them on one line.
		   The hover bar inset follows the padding so it stays under the text. */
		padding-left: 0.45em;
		padding-right: 0.45em;
	}

	header.wp-block-template-part .wp-block-navigation-item__content::after {
		left: 0.45em;
		right: 0.45em;
	}

	header.wp-block-template-part .wp-block-navigation__container {
		gap: 0.25em 0.4em;
	}

	/* Stacked hero: full-width columns and a full-width call to action */
	.wp-site-blocks > .wp-block-group.has-background {
		padding-top: 36px !important;
		padding-bottom: 36px !important;
	}

	.wp-site-blocks > .wp-block-group.has-background .wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
	}

	.wp-site-blocks > .wp-block-group.has-background .wp-block-columns h2 {
		font-size: 2.125rem;
	}

	.wp-site-blocks > .wp-block-group.has-background .wp-block-columns p {
		font-size: 1.0625rem;
		margin-bottom: 1.5em;
	}

	.wp-site-blocks > .wp-block-group.has-background .wp-block-buttons,
	.wp-site-blocks > .wp-block-group.has-background .wp-block-button {
		width: 100%;
	}

	.wp-site-blocks > .wp-block-group.has-background .wp-block-button__link {
		width: 100%;
		padding: 1em 1.5em;
		min-height: 52px;
	}

	footer.wp-block-template-part p {
		margin-top: 1.25em;
	}
}

@media (max-width: 600px) {
	/* Sections breathe less where 96px reads as a gap */
	.wp-site-blocks > .wp-block-group.alignfull,
	.wp-site-blocks > .wp-block-group:has(.wp-block-woocommerce-product-collection) {
		padding-top: clamp(36px, 9vw, 56px) !important;
		padding-bottom: clamp(36px, 9vw, 56px) !important;
	}

	/* Two-column cards: tighter padding, and the label is allowed to wrap.
	   Forcing one line here overflowed the button: WP's font-size preset on
	   these buttons is emitted with !important (16px, not our 14px), so
	   "Select options" is wider than the button and spilled past its edge.
	   Wrapping costs a second line on the longest label and nothing else. */
	.wc-block-product .wp-block-button .wp-block-button__link,
	.wc-block-product .wc-block-components-product-button .wc-block-components-product-button__button {
		font-size: 0.875rem;
		padding: 0.7em 0.5em;
		white-space: normal;
	}

	.wc-block-product .wp-block-post-title {
		font-size: 1rem !important;
	}

	.wc-block-product,
	.wc-block-grid__product {
		padding: 10px 10px 14px;
		border-radius: 8px;
	}

	.woocommerce ul.wc-block-product-template {
		row-gap: 1.75em;
	}

	.woocommerce div.product .woocommerce-Tabs-panel h2 {
		font-size: 1.25rem;
	}

	.woocommerce div.product .woocommerce-Tabs-panel h3 {
		font-size: 1rem;
	}

	.wc-block-product.outofstock .wc-block-components-product-image::after {
		font-size: 0.625rem;
		padding: 0.5em 0.65em;
		top: 6px;
		left: 6px;
	}
}

/* One block, with the lifts and the transitions both accounted for */
@media (prefers-reduced-motion: reduce) {
	.woocommerce *,
	.woocommerce-page *,
	.wc-block-product,
	.wp-block-navigation .wp-block-navigation-item__content::after {
		transition-duration: 0.01ms !important;
	}

	.wp-element-button:hover,
	.wp-block-button__link:hover,
	.wc-block-product:hover,
	.wc-block-product:hover .wc-block-components-product-image img,
	.wp-site-blocks > .wp-block-group.has-background .wp-block-button__link:hover,
	.woocommerce .single_add_to_cart_button:hover,
	.woocommerce-cart .wc-block-cart__submit-button:hover,
	.woocommerce-checkout .wc-block-components-checkout-place-order-button:hover {
		transform: none;
	}

	header.wp-block-template-part .wp-block-navigation-item__content::after {
		transition: none;
	}
}

/* ===============================================================
 * 13. SHOP CATEGORY NAVIGATION
 * Markup comes from purelyinfused-shop-categories.php: a card grid on
 * the shop page, and a category strip plus subcategory cards when
 * browsing a category. No images are stored on the categories, so
 * .pi-cat__image holds a representative product shot.
 * ============================================================= */

/* As wide as the product grid below. A bare child of the constrained
   layout group would otherwise be capped at the 620px content size. */
.pi-cats,
.pi-cats-bar {
	width: 100%;
	max-width: var(--wp--style--global--wide-size, 1280px);
	margin-inline: auto;
	box-sizing: border-box;
}

.pi-cats {
	margin-bottom: clamp(24px, 3vw, 40px);
}

.pi-cats__title {
	margin: 0 0 0.85rem;
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.62;
}

/* -- Card grid ------------------------------------------------ */
.pi-cats__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: clamp(12px, 1.4vw, 20px);
	list-style: none;
	margin: 0;
	padding: 0;
}

.pi-cat {
	margin: 0;
}

.pi-cat__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
	background-color: #fff;
	border: 1px solid rgba(0, 0, 0, 0.07);
	border-radius: var(--pi-radius-card);
	overflow: hidden;
	transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.pi-cat__link:hover,
.pi-cat__link:focus-visible {
	transform: translateY(-2px);
	border-color: rgba(0, 0, 0, 0.12);
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.1);
}

/* Square tile, so a row of mismatched product shots still lines up.
   contain rather than cover: cropping a bottle is worse than a little
   white space on a white-backed product photo. */
.pi-cat__media {
	display: block;
	aspect-ratio: 1 / 1;
	background-color: #fbfbfb;
}

.pi-cat__image {
	display: block;
	width: 100%;
	height: 100%;
	padding: 10px;
	box-sizing: border-box;
	object-fit: contain;
}

.pi-cat__image--empty {
	background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.015));
}

.pi-cat__body {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding: 0.85rem 0.95rem 1rem;
}

.pi-cat__name {
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.3;
}

.pi-cat__count {
	font-size: 0.8125rem;
	opacity: 0.62;
}

/* Subcategory cards are secondary: a little smaller all round */
.pi-cats--sub {
	margin-bottom: clamp(20px, 2.5vw, 32px);
}

.pi-cats--sub .pi-cats__grid {
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.pi-cat--small .pi-cat__name {
	font-size: 0.9375rem;
}

.pi-cat--small .pi-cat__body {
	padding: 0.7rem 0.8rem 0.85rem;
}

/* -- Category strip ------------------------------------------- */
.pi-cats-bar {
	margin-bottom: clamp(20px, 2.5vw, 32px);
}

/* Scrolls sideways rather than wrapping into a wall of chips */
.pi-cats-bar__list {
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 0 0 6px;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}

.pi-cats-bar__list > li {
	flex: 0 0 auto;
	margin: 0;
}

.pi-chip {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	padding: 0.5em 0.95em;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: var(--pi-pill);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.2;
	color: inherit;
	text-decoration: none;
	transition: background-color var(--pi-ease), border-color var(--pi-ease), color var(--pi-ease);
}

.pi-chip:hover,
.pi-chip:focus-visible {
	background-color: rgba(0, 0, 0, 0.04);
	border-color: rgba(0, 0, 0, 0.2);
}

.pi-chip.is-active {
	background-color: var(--pi-ink);
	border-color: var(--pi-ink);
	color: #fff;
}

/* -- Small screens -------------------------------------------- */
@media (max-width: 600px) {
	/* Two columns keeps 15 categories to a scroll or two instead of a
	   full page of tiles before the products */
	.pi-cats__grid,
	.pi-cats--sub .pi-cats__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.pi-cat__name {
		font-size: 0.9375rem;
	}

	.pi-cat__image {
		padding: 6px;
	}

	/* The strip's last chip should not sit flush against the edge */
	.pi-cats-bar__list {
		padding-right: 8px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pi-cat__link,
	.pi-chip {
		transition-duration: 0.01ms !important;
	}

	.pi-cat__link:hover,
	.pi-cat__link:focus-visible {
		transform: none;
	}
}