/*
Theme Name: PhytoFamily
Theme URI: https://phytofamily.com
Author: PhytoFamily
Description: Custom block theme for PhytoFamily — dark canvas, product-driven color system.
Version: 0.1.0
Requires at least: 6.5
Tested up to: 6.9
Requires PHP: 7.4
License: Private
Text Domain: phytofamily
*/

/* ============================================
   Header Icons
   ============================================ */
.pf-header-icon:hover,
.pf-header-cart:hover {
	opacity: 0.8;
}
.pf-cart-count-wrap {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--text-primary);
}

/* Footer payment methods: the source artwork stays untouched while a shared
   neutral field gives six differently proportioned marks equal visual weight. */
.pf-payment-methods {
	margin: 0 auto var(--wp--preset--spacing--m);
	text-align: center;
}
.pf-payment-methods__label {
	margin: 0 0 12px;
	color: var(--wp--preset--color--text-secondary);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.pf-payment-methods__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	max-width: 420px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}
.pf-payment-methods__list li {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 38px;
	box-sizing: border-box;
	padding: 5px 7px;
	border-radius: 4px;
	background: #fff;
}
.pf-payment-methods__list img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

@media (max-width: 480px) {
	.pf-payment-methods__list {
		max-width: 190px;
	}
}

/* Touch targets: keep header controls ≥44×44 (WCAG 2.5.5 / Apple HIG). The
   visible icons are unchanged — only the tappable area around them grows. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	min-width: 44px;
	min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.pf-header-icon,
.pf-header-cart {
	min-width: 44px;
	min-height: 44px;
	justify-content: center;
}
/* Open mobile menu: give each link a ~44px tap height. !important overrides the
   core nav-block CSS, which zeroes this padding and loads after the theme sheet. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	padding-top: 12px !important;
	padding-bottom: 12px !important;
}

/* Shipping promo bar — always ONE line. Desktop: full message, static + centered
   (it fits). Mobile: short message, static when it fits; a seamless marquee ONLY
   when it would clip (JS toggles .is-overflowing). */
.pf-shipping-bar { overflow: hidden; }
.pf-ship-marquee { overflow: hidden; }
.pf-ship-track { display: flex; justify-content: center; }
.pf-ship-msg {
	color: var(--wp--preset--color--text-dark);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.05em;
	white-space: nowrap;
}
/* desktop: full message only, static */
.pf-ship-short { display: none; }

@media (max-width: 768px) {
	/* Tighter side padding gives the message more room, so it sits static on most
	   large phones (~390px+) and only scrolls on genuinely small screens. */
	.pf-shipping-bar { padding-left: 14px !important; padding-right: 14px !important; }
	.pf-ship-full { display: none; }
	.pf-ship-short { display: inline; }
	/* the 2nd short copy only exists for the scrolling loop */
	.pf-ship-short + .pf-ship-short { display: none; }

	/* only when JS detects the message would clip: scroll it */
	.pf-ship-marquee.is-overflowing .pf-ship-track {
		justify-content: flex-start;
		width: max-content;
		will-change: transform;
		animation: pf-ship-scroll 16s linear infinite;
	}
	.pf-ship-marquee.is-overflowing .pf-ship-short { padding-right: 3rem; }
	.pf-ship-marquee.is-overflowing .pf-ship-short + .pf-ship-short { display: inline; }
	.pf-ship-marquee.is-overflowing:hover .pf-ship-track,
	.pf-ship-marquee.is-overflowing:active .pf-ship-track { animation-play-state: paused; }
}
@keyframes pf-ship-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
/* Motion-sensitive users: never scroll — let the short line wrap instead of clip. */
@media (prefers-reduced-motion: reduce) and (max-width: 768px) {
	.pf-ship-marquee.is-overflowing .pf-ship-track { animation: none; justify-content: center; width: auto; }
	.pf-ship-marquee.is-overflowing .pf-ship-short { white-space: normal; padding-right: 0; }
	.pf-ship-marquee.is-overflowing .pf-ship-short + .pf-ship-short { display: none; }
}

/* Force consistent header layout: logo left, nav center, icons right */
.pf-header-bar {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	flex-wrap: nowrap !important;
	/* Constrain header content to the hero's 1400px container (1400 + 2×32 pad)
	   and center it, so the logo's left edge aligns with the hero headline at
	   every width. Full-width on mobile (just the 32px gutter). */
	max-width: 1464px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 32px !important;
	padding-right: 32px !important;
	box-sizing: border-box;
}
/* Logo + icons size to their content; the nav takes the whole middle. The old
   equal-thirds boxed the nav into 1/3 (~389px at 1280) while the 5 links need
   ~423px, forcing a 2-row wrap. With the full middle width they sit on one row at
   every desktop width (the hamburger takes over below ~768px). */
.pf-header-bar > .wp-block-site-logo,
.pf-header-bar > .wp-block-group {
	flex: 0 0 auto;
}
.pf-header-bar > .wp-block-navigation {
	flex: 1 1 auto;
	min-width: 0;
	/* Trimmed from the inline 0.1em so the 5 links keep to one row all the way down
	   to the hamburger breakpoint (~768px) — still spaced, just a hair tighter. */
	letter-spacing: 0.05em !important;
}
.pf-header-bar > .wp-block-navigation .wp-block-navigation__container {
	gap: 0.6em 1.4em;
}
/* Logo: align left */
.pf-header-bar > .wp-block-site-logo {
	text-align: left;
}
.pf-header-bar > .wp-block-site-logo a {
	display: inline-block;
}
/* Nav: center */
.pf-header-bar > .wp-block-navigation {
	justify-content: center;
}
/* Icons: align right */
.pf-header-bar > .wp-block-group {
	justify-content: flex-end;
}

/* ---- Mobile / tablet overlay menu ---- */
/* Brand the overlay: the WP nav block opens a WHITE full-screen menu by default
   (off-brand vs the dark site). Make it the dark surface + light text everywhere
   the overlay appears (mobile + the 600–768 band added below). */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--background) !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open a,
.wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--text-primary) !important;
}

/* Extend the hamburger + overlay up to 899px. WP's nav block switches to the
   overlay only below ~600px, but the 5 links only fit one inline row at >=900px
   (the desktop 32px side padding squeezes them below that). So 600–899 uses the
   hamburger, >=900 is the inline one-row nav. We re-apply the overlay styles the
   block's >=600px rules reset. */
@media (min-width: 600px) and (max-width: 899px) {
	.pf-header-bar .wp-block-navigation__responsive-container-open {
		display: flex !important;
	}
	.pf-header-bar .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}
	.pf-header-bar .wp-block-navigation__responsive-container.is-menu-open {
		display: flex !important;
		position: fixed !important;
		top: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		left: 0 !important;
		z-index: 100000 !important;
	}
	.pf-header-bar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		width: 100% !important;
	}
	.pf-header-bar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		gap: 24px !important;
	}
	.pf-header-bar .wp-block-navigation__responsive-container-close {
		display: flex !important;
	}
}


/* Mobile header presence: tighter side padding lets the logo grow (it fills its
   column, so it scales safely with the screen — no overflow on small phones),
   plus slightly larger menu/account/cart icons. Desktop unchanged. */
@media (max-width: 768px) {
	.pf-header-bar {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
	/* Content-size the columns so the equal-thirds flex stops squeezing the logo;
	   the nav grows to keep the hamburger centered. Logo + icons + menu total
	   well under the viewport even at 320px, so a fixed 125px logo never overflows. */
	.pf-header-bar > * { flex: 0 0 auto !important; }
	.pf-header-bar > .wp-block-navigation { flex: 1 1 auto !important; }
	.pf-header-bar > .wp-block-site-logo img,
	.pf-header-bar .custom-logo {
		width: 125px !important;
		max-width: 125px !important;
		height: auto !important;
	}
	.wp-block-navigation__responsive-container-open svg,
	.wp-block-navigation__responsive-container-close svg {
		width: 30px !important;
		height: 30px !important;
	}
	.pf-header-icon svg,
	.pf-header-cart svg {
		width: 26px !important;
		height: 26px !important;
	}
}
/* Very small phones (<=359px): trim the logo + padding so the row never overflows. */
@media (max-width: 359px) {
	.pf-header-bar {
		padding-left: 10px !important;
		padding-right: 10px !important;
	}
	.pf-header-bar > .wp-block-site-logo img,
	.pf-header-bar .custom-logo {
		width: 100px !important;
		max-width: 100px !important;
	}
}

/* Hide WooCommerce's auto-injected account/cart icons in block theme header */
.wc-block-mini-cart,
.wc-block-customer-account,
.wp-block-woocommerce-mini-cart,
.wp-block-woocommerce-customer-account {
	display: none !important;
}

/* ============================================
   Product Card Hover Effects
   ============================================ */
.pf-product-card {
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	cursor: pointer;
}

.pf-product-card:hover {
	transform: translateY(-4px) scale(1.02);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* ============================================
   Button System
   ============================================ */

/* Canonical button = rounded/soft ("Style H"). Shape, type, radius and
   colours now come from theme.json styles.elements.button (the default), so
   the old .pf-btn-h-primary !important pile is gone — that class is now a
   harmless no-op left on existing markup. Only the soft-depth shadow + hover
   lift live here (theme.json can't express them). */
.wp-block-button__link {
	transition: all 0.25s ease;
	box-shadow: var(--wp--custom--shadow--button);
}
.wp-block-button__link:hover {
	box-shadow: var(--wp--custom--shadow--button-hover);
	transform: translateY(-3px);
}

/* Secondary: translucent outline variant. Radius, case, weight and
   letter-spacing inherit from the default button; this only changes fill,
   border, size and removes the drop shadow. Higher specificity than the
   default selector, so no !important needed. */
.pf-btn-h-secondary .wp-block-button__link {
	background: rgba(240,236,228,0.06);
	color: var(--wp--preset--color--text-primary);
	border: 1px solid rgba(240,236,228,0.3);
	font-size: 0.95rem;
	padding: 13px 28px;
	box-shadow: none;
}
.pf-btn-h-secondary .wp-block-button__link:hover {
	background: rgba(240,236,228,0.12);
	border-color: rgba(240,236,228,0.5);
	box-shadow: none;
	transform: translateY(-2px);
}

/* Purple deal-system accents (brand plum lifted for dark surfaces = #c084fc,
   deep plum for light surfaces = #7a3e9d). Purple = the deal system: builder,
   bundles, savings navigation. */
.pf-btn-h-build .wp-block-button__link {
	background: #c084fc;
	color: #0a0a0a;
	font-weight: 700;
	box-shadow: 0 6px 24px rgba(192, 132, 252, 0.3);
}
.pf-btn-h-build .wp-block-button__link:hover {
	background: #cf9dff;
	box-shadow: 0 10px 32px rgba(192, 132, 252, 0.45);
}
/* Nav "Build & Save" — the one colored item in the nav. */
.pf-nav-build a,
.pf-nav-build a:hover {
	color: #c084fc !important;
	font-weight: 700;
}
/* Announcement-bar builder callout: deep plum (lavender fails on cream). */
.pf-ship-build,
.pf-ship-build:hover {
	color: #7a3e9d;
	font-weight: 800;
	text-decoration: none;
}
/* Brand-purple form controls (size radios in the PDP buy panel, checkboxes). */
input[type="radio"],
input[type="checkbox"] {
	accent-color: #c084fc;
}
/* Blocks-checkout Shipping/Payment boxes: their outline is an inset
   box-shadow in FULL-opacity cream, harsh against the soft-bordered inputs
   above. Soften to input weight; selected radio goes deal purple (matches
   the PDP size radios). Place Order stays cream — the loud element should
   be the final CTA. Founder-approved from the 2026-07-03 mockup. */
.wc-block-components-radio-control__option,
.wc-block-components-radio-control-accordion-option {
	box-shadow: rgba(240, 236, 228, 0.25) 0 0 0 1px inset !important;
}
.wc-block-components-radio-control__input {
	background: transparent !important;
	border: 1.5px solid rgba(240, 236, 228, 0.45) !important;
}
.wc-block-components-radio-control__input:checked {
	border-color: #c084fc !important;
}
.wc-block-components-radio-control__input:checked::before {
	background: #c084fc !important;
}
/* Arrow-style text links ("Learn About The Program →", "View all X →",
   "Read more →") pick up the deal purple. !important because the template
   anchors carry inline color/border styles. All sit on dark surfaces. */
.pf-link-accent,
.pf-shop-category-link,
.wp-block-post-excerpt__more-link {
	color: #c084fc !important;
	border-bottom: 1px solid rgba(192, 132, 252, 0.35) !important;
	text-decoration: none;
}
.pf-link-accent:hover,
.pf-shop-category-link:hover,
.wp-block-post-excerpt__more-link:hover {
	color: #cf9dff !important;
	border-bottom-color: #c084fc !important;
}

/* Hero buttons: larger, equal size for primary + secondary. */
.pf-hero-buttons .wp-block-button__link {
	font-size: 1.05rem;
	padding: 16px 40px;
}

/* Mobile: lead with the hero image, then heading + CTAs.
   Desktop keeps text-left / image-right (DOM source order). WordPress stacks
   columns at <=781px via flex-basis:100% (row + wrap), so we reorder the image
   column with `order` rather than flipping flex-direction. .pf-hero-image is
   unique to the hero, so this self-scopes — no content/DB edit needed. */
@media (max-width: 781px) {
	.wp-block-column:has(.pf-hero-image) {
		order: -1;
	}
	/* Breathing room between the now-leading image and the heading below it. */
	.pf-hero-image {
		margin-bottom: var(--wp--preset--spacing--m);
	}

	/* Mobile: the hero photo is a 2:1 landscape (1536x768), so on a phone-width
	   column it renders only ~170px tall and the bottles/labels are tiny. Crop
	   it to a square frame (object-fit: cover) — ~2x taller — which enlarges the
	   bottles enough to read the terpene labels while still keeping all three
	   bottles in shot (a tighter portrait crop drops the right-hand bottle).
	   The middle (LIMONENE) bottle sits at ~64% of the source width, so the crop
	   is biased to 78% horizontally to land that bottle on the frame's centre
	   line (square cover window = 50% of width, so window-centre = X/2 + 0.25;
	   solving for centre 0.64 gives X≈0.78). All three bottles stay fully in
	   frame; 42% vertical keeps the dropper caps and a row of gummies. Desktop is
	   untouched — full wide cinematic shot. */
	.pf-hero-image img {
		width: 100%;
		aspect-ratio: 1 / 1;
		object-fit: cover;
		object-position: 78% 42%;
	}

	/* Shrink the large vertical spacing tokens on mobile.
	   `section` (8rem) and `xl` (6rem) are tuned for desktop, where they give
	   sections elegant breathing room. On a phone they stack — a section's
	   `section` bottom padding + the next section's `section` top padding =
	   16rem (~256px) of dead space at every boundary, which read as "weird
	   empty gaps". Redefining the tokens on <body> (html body beats WP's
	   `body{}` global-styles rule on specificity) cascades to every inline
	   `padding:var(--wp--preset--spacing--section)` without editing markup.
	   Horizontal padding uses `m`, which we leave untouched. Desktop is wholly
	   unaffected — this lives inside the max-width:781px query. */
	html body {
		--wp--preset--spacing--section: 3rem; /* 48px (was 128px) */
		--wp--preset--spacing--xl: 3rem;       /* 48px (was 96px)  */
	}
}

/* Hover: Outline buttons */
.is-style-outline .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--text-primary) !important;
	background-color: rgba(240, 236, 228, 0.1) !important;
	transform: translateY(-1px);
}


/* ============================================
   Product Archive / Category Page
   Aesop-inspired layout
   ============================================ */

/* Archive container */
.pf-archive {
	background-color: var(--wp--preset--color--background);
	min-height: 100vh;
	color: var(--wp--preset--color--text-primary);
	font-family: var(--wp--preset--font-family--body);
}

/* Header area */
.pf-archive-header {
	max-width: 1200px;
	margin: 0 auto;
	padding: 2rem 2rem 0;
}

/* Breadcrumbs */
.pf-breadcrumbs {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--text-secondary);
	margin-bottom: 2rem;
	letter-spacing: 0.02em;
}
.pf-breadcrumbs a {
	color: var(--wp--preset--color--text-secondary);
	text-decoration: none;
}
.pf-breadcrumbs a:hover {
	color: var(--wp--preset--color--text-primary);
}
.pf-breadcrumb-sep {
	margin: 0 0.5rem;
	color: var(--wp--custom--color--gray-faint);
}
.pf-breadcrumb-current {
	color: var(--wp--preset--color--text-primary);
}

/* Category title */
.pf-archive-title {
	font-family: var(--wp--preset--font-family--body);
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 400;
	margin: 0 0 var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--text-primary);
}

/* Category description */
.pf-archive-description {
	font-size: 1rem;
	line-height: 1.7;
	color: var(--wp--preset--color--text-secondary);
	max-width: 640px;
	margin: 0 0 2rem;
}

/* Toolbar: filter + count + sort */
.pf-archive-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.25rem 0;
	border-top: 1px solid var(--wp--custom--color--border-subtle);
	border-bottom: 1px solid var(--wp--custom--color--border-subtle);
	margin-bottom: 2.5rem;
}
.pf-toolbar-left {
	display: flex;
	align-items: center;
	gap: 1.5rem;
}
.pf-toolbar-right {
	display: flex;
	align-items: center;
}

/* Filter button */
.pf-filter-btn {
	background: none;
	border: 1px solid var(--wp--custom--color--border-strong);
	color: var(--wp--preset--color--text-primary);
	padding: 8px 16px;
	font-size: var(--wp--preset--font-size--small);
	font-family: inherit;
	cursor: pointer;
	display: flex;
	align-items: center;
	transition: all 0.2s ease;
}
.pf-filter-btn:hover {
	border-color: var(--wp--preset--color--text-primary);
}

/* Product count */
.pf-product-count {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-secondary);
}

/* WooCommerce ordering dropdown override */
.pf-archive .woocommerce-ordering {
	margin: 0;
}
.pf-archive .woocommerce-ordering .orderby {
	background-color: var(--wp--preset--color--background);
	color: var(--wp--preset--color--text-primary);
	border: 1px solid var(--wp--custom--color--border-strong);
	padding: 8px 32px 8px 12px;
	font-size: var(--wp--preset--font-size--small);
	font-family: inherit;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23888888' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
}
.pf-archive .woocommerce-ordering .orderby:hover {
	border-color: var(--wp--preset--color--text-primary);
}

/* Product Grid — uses CSS subgrid so card elements align across rows */
.pf-product-grid {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 2rem 4rem;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem;
}

/* Product Card — flex column. Cards stretch to the grid row height (so each
   row of cards is equal-height and the bottom CTAs line up), and the
   variant+price+button group is pinned to the bottom (margin-top:auto on
   .pf-card-variant). Any height difference from uneven content (long titles,
   a description on one card, a dosage subtitle on another) collapses into ONE
   gap above that group — instead of the old subgrid, which stretched every
   row equally and left big gaps throughout on mixed content. */
.pf-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--surface-dark);
	border-radius: var(--wp--custom--radius--card);
	padding: 20px 20px 24px;
	text-align: center;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* The homepage product shortcode passes through wpautop, which can append an
   empty paragraph after an in-stock card's form. Do not let that generated
   node consume flex space and misalign the bottom-pinned card controls. */
.pf-card > p:empty {
	display: none;
}
/* wp:shortcode applies wpautop to expanded output on the homepage. It can also
   place empty paragraphs inside card titles/text and after the final grid item.
   An inline title link split around its block heading can leave an otherwise
   empty, unclassed paragraph containing an empty continuation of that link. */
.pf-products-shortcode p:empty,
.pf-products-shortcode .pf-card-text > p:not([class]) {
	display: none;
}
.pf-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
/* Temporarily discontinued: muted image so the state reads at a glance */
.pf-card.is-discontinued .pf-card-image { opacity: 0.55; }

/* Badge slot — always present to maintain subgrid row alignment */
.pf-badge-slot {
	min-height: 1.2em;
}
.pf-badge {
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.02em;
}
.pf-badge-new {
	color: var(--wp--custom--color--badge-gold);
}
.pf-badge-featured {
	color: var(--wp--preset--color--text-secondary);
	font-style: italic;
}
.pf-badge-discontinued {
	color: var(--wp--custom--color--oos-red);
	letter-spacing: 0.04em;
}

/* Theme-owned stock overlay. One accessible text node replaces the former
   plugin image and its site-wide CSS/JavaScript payload. */
.pf-stock-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	border: 1px solid var(--wp--custom--color--oos-red);
	border-radius: 999px;
	background: rgba(10, 10, 10, 0.92);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
	color: var(--wp--preset--color--text-primary);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.09em;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
	pointer-events: none;
}
.pf-stock-badge::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--wp--custom--color--oos-red);
	flex: none;
}

/* Shelf-tier badge (Gold / Platinum / Silver) — sourced from the product's
   shelf-tier category via pf_shelf_badge(). Shown over the card image (top-left)
   and above the PDP title. Tier colour carries the meaning; the pill stays dark
   and on-brand. */
.pf-shelf-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 10.5px;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	line-height: 1;
	white-space: nowrap;
	padding: 5px 10px;
	border-radius: 99px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid currentColor;
}
.pf-shelf-badge .pf-shelf-gem {
	width: 7px;
	height: 7px;
	border-radius: 1px;
	transform: rotate(45deg);
	background: currentColor;
	flex: none;
}
.pf-shelf-gold { color: #c9a14a; }
.pf-shelf-platinum { color: #cfd3d8; }
.pf-shelf-silver { color: #9aa0a6; }

/* Card overlay placement (top-left over the image). */
.pf-card-image-frame { position: relative; }
.pf-card-shelf {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 3;
}
.pf-stock-badge-card {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 4;
	gap: 4px;
	padding: 5px 7px;
	font-size: 8px;
	letter-spacing: 0.06em;
}
.pf-stock-badge-card::before {
	width: 4px;
	height: 4px;
}
/* PDP placement (above the title). */
.pf-pdp-shelf { margin-bottom: 12px; }

/* Card image */
.pf-card-image-link {
	display: block;
	aspect-ratio: 1;
	overflow: hidden;
	margin-bottom: 1rem;
	/* Soft dark vignette (Row C): gives transparent renders depth and lets
	   real product photos sit on a cohesive dark surface — replaces the white
	   box, which only flattered transparent renders. */
	background: radial-gradient(120% 120% at 50% 35%, #232323 0%, #141414 75%);
	border-radius: 6px;
}
.pf-card-image {
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 1rem;
	transition: transform 0.4s ease;
}
.pf-card:hover .pf-card-image {
	transform: scale(1.05);
}

/* Flavor card style (gummies): handwritten flavor name overlaid on the image,
   with a top scrim so it stays legible on any photo. */
.pf-card-image-link.pf-has-flavor-overlay {
	position: relative;
}
.pf-has-flavor-overlay::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 46%;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.5), transparent);
	pointer-events: none;
	z-index: 1;
}
.pf-card-flavor-overlay {
	position: absolute;
	top: 12px;
	left: 10px;
	right: 10px;
	z-index: 2;
	text-align: center;
	pointer-events: none;
	font-family: 'Caveat', cursive;
	font-size: 1.6rem;
	line-height: 1.05;
	color: var(--wp--custom--color--white);
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}
.pf-stock-badge-card + .pf-has-flavor-overlay .pf-card-flavor-overlay {
	top: 38px;
}

/* Card title + description container */
/* Type eyebrow above the name (e.g. "Drops") */
.pf-card-eyebrow {
	display: block;
	font-size: var(--wp--preset--font-size--x-small);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--wp--preset--color--text-secondary);
	margin-bottom: 0.4rem;
}
.pf-card-title-link {
	text-decoration: none;
}
.pf-card-title {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.95rem;
	font-weight: 400;
	color: var(--wp--preset--color--text-primary);
	margin: 0 0 0.2rem;
	line-height: 1.4;
}
/* Flavor style: handwritten card title + small dosage subtitle */
.pf-card-title.pf-card-title-script {
	font-family: 'Caveat', cursive;
	font-size: 1.45rem;
	font-weight: 700;
	margin-bottom: 0.1rem;
}
.pf-card-subtitle {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--text-secondary);
	margin: 0 0 0.25rem;
}

/* Card description (short description under title) */
.pf-card-description {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--text-secondary);
	line-height: 1.5;
	margin: 0;
}

/* Variant selector — pins the variant+price+button group to the card bottom,
   so the gap from uneven content above collapses here (one clean gap). */
.pf-card-variant {
	margin-top: auto;
	margin-bottom: 0.25rem;
}
.pf-variant-label {
	display: block;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--text-secondary);
	margin-bottom: 0.35rem;
}
.pf-variant-select {
	width: 100%;
	background-color: var(--wp--preset--color--background);
	color: var(--wp--preset--color--text-primary);
	border: 1px solid var(--wp--custom--color--border);
	padding: 8px 32px 8px 10px;
	font-size: var(--wp--preset--font-size--x-small);
	font-family: inherit;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23888888' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
}
.pf-variant-select:hover {
	border-color: var(--wp--custom--color--gray-muted);
}
.pf-variant-select:focus {
	border-color: var(--wp--preset--color--text-primary);
	outline: none;
}

/* Single-variant label */
.pf-variant-single {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--text-secondary);
}
.pf-variant-size {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--text-primary);
	display: block;
	margin-top: 0.15rem;
}

/* Price */
.pf-card-price {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-primary);
	margin-bottom: 0.25rem;
}
.pf-card-price del {
	color: var(--wp--custom--color--gray-muted);
	margin-right: 0.5rem;
}
.pf-card-price ins {
	text-decoration: none;
}

/* Add to Cart button */
.pf-card-cart-form {
	width: 100%;
}
.pf-add-to-cart {
	display: block;
	width: 100%;
	padding: 13px 0;
	background-color: var(--wp--preset--color--text-primary);
	color: var(--wp--preset--color--background);
	border: none;
	border-radius: var(--wp--custom--radius--button);
	box-shadow: var(--wp--custom--shadow--button);
	font-family: inherit;
	font-size: 0.95rem;
	font-weight: 400;
	letter-spacing: -0.01em;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	transition: all 0.25s ease;
}
.pf-add-to-cart:hover {
	background-color: var(--wp--custom--color--white);
	transform: translateY(-2px);
	box-shadow: var(--wp--custom--shadow--button-hover);
}
.pf-add-to-cart:focus-visible {
	outline: 2px solid var(--wp--preset--color--text-primary);
	outline-offset: 2px;
}
.pf-add-to-cart.pf-loading {
	opacity: 0.6;
	cursor: wait;
}
.pf-add-to-cart.pf-added {
	background-color: var(--wp--preset--color--in-stock);
	color: var(--wp--custom--color--white);
}
.pf-add-to-cart.pf-out-of-stock {
	background-color: var(--wp--custom--color--border-subtle);
	color: var(--wp--custom--color--gray-muted);
	cursor: default;
}
.pf-add-to-cart.pf-out-of-stock:hover {
	transform: none;
	box-shadow: none;
}

/* No products */
.pf-no-products {
	grid-column: 1 / -1;
	text-align: center;
	padding: 4rem 0;
	color: var(--wp--preset--color--text-secondary);
}
.pf-no-products a {
	color: var(--wp--preset--color--text-primary);
}

/* WooCommerce pagination override */
.pf-archive .woocommerce-pagination {
	grid-column: 1 / -1;
	text-align: center;
	padding: 2rem 0;
}
.pf-archive .woocommerce-pagination ul {
	list-style: none;
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	padding: 0;
	margin: 0;
}
.pf-archive .woocommerce-pagination ul li a,
.pf-archive .woocommerce-pagination ul li span {
	display: inline-block;
	padding: 8px 14px;
	color: var(--wp--preset--color--text-secondary);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--small);
	border: 1px solid var(--wp--custom--color--border);
}
.pf-archive .woocommerce-pagination ul li span.current {
	color: var(--wp--preset--color--text-primary);
	border-color: var(--wp--preset--color--text-primary);
}
.pf-archive .woocommerce-pagination ul li a:hover {
	color: var(--wp--preset--color--text-primary);
	border-color: var(--wp--custom--color--gray-muted);
}

/* Hide default WooCommerce result count (we have our own) */
.pf-archive .woocommerce-result-count {
	display: none;
}

/* ============================================
   Shop Page: Category Sections
   ============================================ */
.pf-shop-category-section {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 2rem 3rem;
	border-bottom: 1px solid var(--wp--custom--color--border-subtle);
	margin-bottom: 2rem;
}
.pf-shop-category-section:last-child {
	border-bottom: none;
}
.pf-shop-category-header {
	padding: 2rem 0 1.5rem;
}
.pf-shop-category-title {
	font-family: var(--wp--preset--font-family--body);
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	font-weight: 400;
	color: var(--wp--preset--color--text-primary);
	margin: 0 0 0.5rem;
}
.pf-shop-category-desc {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-secondary);
	line-height: 1.6;
	max-width: 600px;
	margin: 0 0 var(--wp--preset--font-size--x-small);
}
.pf-shop-category-link {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--text-secondary);
	text-decoration: none;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.pf-shop-category-link:hover {
	color: var(--wp--preset--color--text-primary);
}
.pf-shop-category-section .pf-product-grid {
	padding: 0;
}


/* ============================================
   Single Product Page
   ============================================ */

/* Single product page: two-column layout (image left, summary right) */
.single-product div.product {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
	align-items: start;
	padding-top: 2rem;
}
.single-product div.product .woocommerce-product-gallery {
	grid-column: 1;
}
.single-product div.product .summary.entry-summary {
	grid-column: 2;
}
.single-product div.product .woocommerce-tabs,
.single-product div.product .related.products,
.single-product div.product .woocommerce-notices-wrapper {
	grid-column: 1 / -1;
}
@media (max-width: 768px) {
	.single-product div.product {
		grid-template-columns: 1fr;
	}
	.single-product div.product .woocommerce-product-gallery,
	.single-product div.product .summary.entry-summary {
		grid-column: 1;
	}
}

/* Single product page wrappers */
.pf-single-product-wrap {
	background-color: var(--wp--preset--color--background);
	min-height: 100vh;
}
.pf-single-product-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 2rem;
}

/* Product page container */
.single-product .woocommerce {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 2rem;
}

/* Product title */
.single-product .product_title {
	font-family: var(--wp--preset--font-family--body);
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 400;
	color: var(--wp--preset--color--text-primary);
	line-height: 1.3;
	margin-bottom: 1rem;
}

/* Price */
.single-product .price {
	font-size: 1.5rem;
	color: var(--wp--preset--color--text-primary);
	font-weight: 400;
	margin-bottom: 1.5rem;
}
.single-product .price del {
	color: var(--wp--custom--color--gray-muted);
	font-size: 1.1rem;
	margin-right: 0.5rem;
}
.single-product .price ins {
	text-decoration: none;
}
.single-product .woocommerce-variation-price .price {
	font-size: 1.5rem;
	margin-bottom: 0.5rem;
}

/* Variant selector (Bottle Size, Weight, etc.) */
.single-product .variations {
	margin-bottom: 1.5rem;
}
.single-product .variations td {
	padding: 0.5rem 0;
}
.single-product .variations .label label {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	color: var(--wp--preset--color--text-primary);
	letter-spacing: 0.03em;
	text-transform: uppercase;
}
.single-product .variations .value select,
.single-product .variations select {
	width: 100%;
	background-color: var(--wp--preset--color--surface-dark);
	color: var(--wp--preset--color--text-primary);
	border: 1px solid var(--wp--custom--color--border);
	padding: 12px 36px 12px 14px;
	font-size: var(--wp--preset--font-size--small);
	font-family: inherit;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23888888' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	transition: border-color 0.2s ease;
}
.single-product .variations select:hover {
	border-color: var(--wp--custom--color--gray-muted);
}
.single-product .variations select:focus {
	border-color: var(--wp--preset--color--text-primary);
	outline: none;
}

/* Reset variations link */
.single-product .reset_variations {
	color: var(--wp--preset--color--text-secondary);
	font-size: var(--wp--preset--font-size--x-small);
	text-decoration: none;
	margin-left: 0.5rem;
}
.single-product .reset_variations:hover {
	color: var(--wp--preset--color--text-primary);
}

/* Quantity input */
.single-product .quantity {
	display: inline-flex;
	align-items: center;
	margin-right: 1rem;
}
.single-product .quantity .qty {
	width: 60px;
	background-color: var(--wp--preset--color--surface-dark);
	color: var(--wp--preset--color--text-primary);
	border: 1px solid var(--wp--custom--color--border);
	padding: 12px 8px;
	font-size: var(--wp--preset--font-size--small);
	font-family: inherit;
	text-align: center;
	-moz-appearance: textfield;
}
.single-product .quantity .qty::-webkit-inner-spin-button,
.single-product .quantity .qty::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.single-product .quantity .qty:focus {
	border-color: var(--wp--preset--color--text-primary);
	outline: none;
}

/* Add to Cart button — high specificity to override WooCommerce defaults */
.single-product .cart .single_add_to_cart_button,
.single-product button.single_add_to_cart_button {
	background: var(--wp--preset--color--text-primary) !important;
	color: var(--wp--preset--color--background) !important;
	border-radius: var(--wp--custom--radius--button) !important;
	border: none !important;
	border-bottom: none !important;
	box-shadow: var(--wp--custom--shadow--button) !important;
	font-family: inherit !important;
	font-size: 1.05rem !important;
	font-weight: 400 !important;
	letter-spacing: -0.01em !important;
	text-transform: none !important;
	padding: 14px 48px !important;
	cursor: pointer;
	transition: all 0.25s ease;
}
.single-product .cart .single_add_to_cart_button:hover,
.single-product button.single_add_to_cart_button:hover {
	background: var(--wp--custom--color--white) !important;
	box-shadow: var(--wp--custom--shadow--button-hover) !important;
	transform: translateY(-3px);
}
.single-product .cart .single_add_to_cart_button:active,
.single-product button.single_add_to_cart_button:active {
	transform: translateY(0);
	box-shadow: var(--wp--custom--shadow--button) !important;
}

/* Add to cart row layout */
.single-product .woocommerce-variation-add-to-cart,
.single-product .cart:not(.variations_form) {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--font-size--x-small);
	margin-top: 1.5rem;
	flex-wrap: wrap;
}

/* SKU, Category, Tags meta */
.single-product .product_meta {
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--wp--custom--color--border-subtle);
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--custom--color--gray-muted);
	line-height: 2;
}
.single-product .product_meta > span {
	display: block;
}
.single-product .product_meta a {
	color: var(--wp--preset--color--text-secondary);
	text-decoration: none;
}
.single-product .product_meta a:hover {
	color: var(--wp--preset--color--text-primary);
}
.single-product .sku_wrapper,
.single-product .posted_in,
.single-product .tagged_as {
	display: block;
}

/* WooCommerce Tabs */
.single-product .woocommerce-tabs {
	margin-top: 3rem;
	border-top: 1px solid var(--wp--custom--color--border-subtle);
}
.single-product .woocommerce-tabs ul.tabs {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	gap: 0;
	border-bottom: 1px solid var(--wp--custom--color--border-subtle);
}
.single-product .woocommerce-tabs ul.tabs li {
	margin: 0;
}
.single-product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 1rem 1.5rem;
	color: var(--wp--preset--color--text-secondary);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	border-bottom: 2px solid transparent;
	transition: all 0.2s ease;
}
.single-product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--wp--preset--color--text-primary);
}
.single-product .woocommerce-tabs ul.tabs li.active a {
	color: var(--wp--preset--color--text-primary);
	border-bottom-color: var(--wp--preset--color--text-primary);
}
.single-product .woocommerce-tabs .panel {
	padding: 2rem 0;
	color: var(--wp--preset--color--text-secondary);
	font-size: 0.95rem;
	line-height: 1.8;
}
.single-product .woocommerce-tabs .panel h2 {
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.25rem;
	font-weight: 400;
	color: var(--wp--preset--color--text-primary);
	margin-bottom: 1rem;
}

/* Product image gallery — force visible and dark background.
 * Override WC's default float:left + width:48% which would otherwise shrink
 * the gallery to 48% of its grid cell instead of filling it. */
.single-product .woocommerce-product-gallery {
	margin-bottom: 2rem;
	opacity: 1 !important;
	background-color: var(--wp--preset--color--background) !important;
	width: 100% !important;
	float: none !important;
}
.single-product div.product .summary.entry-summary {
	width: 100% !important;
	float: none !important;
}
.single-product .woocommerce-product-gallery__image img {
	border-radius: 4px;
	width: 100%;
	height: auto;
	display: block;
}
.single-product .woocommerce-product-gallery__wrapper,
.single-product .woocommerce-product-gallery__image,
.single-product .woocommerce-product-gallery a {
	display: block;
	width: 100%;
}

/* Related Products */
.single-product .related.products {
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var(--wp--custom--color--border-subtle);
}
.single-product .related.products h2 {
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.75rem;
	font-weight: 400;
	color: var(--wp--preset--color--text-primary);
	margin-bottom: 1.5rem;
}
.single-product .related.products .products {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
}
.single-product .related.products .product {
	background-color: var(--wp--preset--color--surface-dark);
	border-radius: 8px;
	padding: 1rem;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.single-product .related.products .product:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.single-product .related.products .product a {
	text-decoration: none;
}
.single-product .related.products .product img {
	border-radius: 4px;
	margin-bottom: var(--wp--preset--font-size--x-small);
}
.single-product .related.products .product .woocommerce-loop-product__title {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-primary);
	font-weight: 400;
	margin-bottom: 0.25rem;
}
.single-product .related.products .product .price {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-secondary);
}
.single-product .related.products .product .button {
	display: block;
	width: 100%;
	margin-top: var(--wp--preset--font-size--x-small);
	padding: 11px 0;
	background-color: var(--wp--preset--color--text-primary);
	color: var(--wp--preset--color--background);
	border: none;
	border-radius: var(--wp--custom--radius--button);
	box-shadow: var(--wp--custom--shadow--button);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	text-align: center;
	cursor: pointer;
	text-decoration: none;
	transition: all 0.2s ease;
}
.single-product .related.products .product .button:hover {
	background-color: var(--wp--custom--color--white);
}

/* Breadcrumbs on product page */
.single-product .woocommerce-breadcrumb {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--text-secondary);
	margin-bottom: 1.5rem;
	padding-top: 1rem;
}
.single-product .woocommerce-breadcrumb a {
	color: var(--wp--preset--color--text-secondary);
	text-decoration: none;
}
.single-product .woocommerce-breadcrumb a:hover {
	color: var(--wp--preset--color--text-primary);
}

/* Out of stock badge */
.single-product .out-of-stock {
	color: var(--wp--custom--color--oos-red);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* Sale badge */
.single-product .onsale {
	background-color: var(--wp--custom--color--badge-gold);
	color: var(--wp--custom--color--white);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	padding: 4px 12px;
	border-radius: 0;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* Responsive */
@media (max-width: 768px) {
	.single-product .related.products .products {
		grid-template-columns: repeat(2, 1fr);
	}
	.single-product .woocommerce-variation-add-to-cart,
	.single-product .cart:not(.variations_form) {
		flex-direction: column;
		align-items: stretch;
	}
	.single-product .quantity {
		margin-right: 0;
		margin-bottom: var(--wp--preset--font-size--x-small);
	}
	.single-product .single_add_to_cart_button {
		width: 100%;
		text-align: center;
	}
}

/* ============================================
   Archive Responsive
   ============================================ */
@media (max-width: 1024px) {
	.pf-product-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}
@media (max-width: 768px) {
	.pf-product-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.5rem;
		padding: 0 1rem 3rem;
	}
	.pf-archive-header {
		padding: 1.5rem 1rem 0;
	}
	.pf-archive-toolbar {
		flex-direction: column;
		gap: 1rem;
		align-items: flex-start;
	}
}
@media (max-width: 480px) {
	.pf-product-grid {
		grid-template-columns: 1fr;
	}
}

/* ============================================
   WooCommerce Pages (Cart, Checkout, My Account)
   ============================================ */
.pf-wc-page {
	background-color: var(--wp--preset--color--background);
	min-height: 100vh;
}
.pf-wc-page-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 2rem;
}
.pf-wc-page-title {
	font-family: var(--wp--preset--font-family--body);
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 400;
	color: var(--wp--preset--color--text-primary);
	margin-bottom: 2rem;
}

/* WC notice panels — dark-theme treatment. Subtle translucent surface with a
 * semantic left border so info/message/error read as distinct without the
 * default light-gray box clashing against the page bg. */
.pf-wc-page .woocommerce-info,
.pf-wc-page .woocommerce-message,
.pf-wc-page .woocommerce-error {
	background-color: rgba(240, 236, 228, 0.06) !important;
	color: var(--wp--preset--color--text-primary) !important;
	border-top: none !important;
	border-right: none !important;
	border-bottom: none !important;
	border-left: 3px solid var(--wp--custom--color--info-blue) !important;
	border-radius: 4px !important;
	box-shadow: none !important;
	padding: 1rem 1.25rem !important;
	margin-bottom: 2rem !important;
}
.pf-wc-page .woocommerce-message {
	border-left-color: var(--wp--custom--color--success-green) !important;
}
.pf-wc-page .woocommerce-error {
	border-left-color: var(--wp--custom--color--error-red) !important;
}
.pf-wc-page .woocommerce-info a,
.pf-wc-page .woocommerce-message a,
.pf-wc-page .woocommerce-error a {
	color: var(--wp--preset--color--text-primary) !important;
	text-decoration: underline;
}

/* WC notice icons — override WC's broken icon font rule with a plain Unicode
 * info glyph so notices render with a visible icon regardless of whether the
 * proprietary WooCommerce icon font loads. */
.pf-wc-page .woocommerce-info::before,
.pf-wc-page .woocommerce-message::before {
	font-family: inherit !important;
	content: "\2139" !important;
	font-size: 1rem !important;
	line-height: 1 !important;
	font-weight: 700 !important;
	color: var(--wp--custom--color--info-blue) !important;
}
.pf-wc-page .woocommerce-message::before {
	color: var(--wp--custom--color--success-green) !important;
}
.pf-wc-page .woocommerce-error::before {
	font-family: inherit !important;
	content: "\26A0" !important;
	color: var(--wp--custom--color--error-red) !important;
}

/* My Account — login/register card treatment.
 * Default WC markup wraps each form in .u-column1 / .u-column2 with the h2
 * heading as a sibling of the form. Treat the whole column as a card so the
 * heading sits inside the surface instead of floating on the page bg. */
.pf-wc-page #customer_login.u-columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
	margin: 0;
}
/* WC's clearfix ::before/::after become grid items and break the layout —
 * the first column ends up in cell 2, the second wraps to a new row. */
.pf-wc-page #customer_login.u-columns::before,
.pf-wc-page #customer_login.u-columns::after {
	display: none;
}
.pf-wc-page #customer_login .u-column1,
.pf-wc-page #customer_login .u-column2 {
	background-color: var(--wp--preset--color--surface-dark);
	border-radius: 4px;
	padding: 2rem;
	float: none;
	width: auto;
}
.pf-wc-page #customer_login .u-column1 > h2,
.pf-wc-page #customer_login .u-column2 > h2 {
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.5rem;
	font-weight: 400;
	color: var(--wp--preset--color--text-primary);
	margin: 0 0 1.5rem;
}
/* Kill WC's default form border — the card itself is the container now. */
.pf-wc-page #customer_login form.login,
.pf-wc-page #customer_login form.register {
	border: none;
	padding: 0;
	margin: 0;
	background: transparent;
}
@media (max-width: 768px) {
	.pf-wc-page #customer_login.u-columns {
		grid-template-columns: 1fr;
	}
}

/* My Account — logged-in dashboard.
 * WC renders a two-column layout: .woocommerce-MyAccount-navigation sidebar +
 * .woocommerce-MyAccount-content panel. Both get the card treatment so inputs
 * and notices inside sit on a cushion instead of pure black.
 *
 * WC's default layout uses floats with % widths on content-box children. Our
 * card padding pushes the total width past 100% and makes content wrap below
 * the nav. Force a grid on the parent to lock a reliable sidebar + main shape. */
/* Scope the grid to only the logged-in dashboard (when the sidebar nav
 * exists). Without :has(), this rule would also apply to the logged-out
 * login/register page and crush those cards into a 260px left column. */
.pf-wc-page .woocommerce:has(.woocommerce-MyAccount-navigation) {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 1.5rem;
	align-items: start;
}
/* WC's clearfix pseudos become grid items and push nav + content into the
 * wrong cells (same failure mode as the login page). */
.pf-wc-page .woocommerce:has(.woocommerce-MyAccount-navigation)::before,
.pf-wc-page .woocommerce:has(.woocommerce-MyAccount-navigation)::after {
	display: none;
}
.pf-wc-page .woocommerce-MyAccount-navigation,
.pf-wc-page .woocommerce-MyAccount-content {
	float: none;
	width: auto;
	box-sizing: border-box;
}
.pf-wc-page .woocommerce-MyAccount-navigation {
	background-color: var(--wp--preset--color--surface-dark);
	border-radius: 4px;
	padding: 1.5rem;
}
.pf-wc-page .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.pf-wc-page .woocommerce-MyAccount-navigation li {
	margin: 0;
	padding: 0;
}
.pf-wc-page .woocommerce-MyAccount-navigation li + li {
	margin-top: 0.25rem;
}
.pf-wc-page .woocommerce-MyAccount-navigation a {
	display: block;
	padding: 0.6rem var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--text-primary);
	text-decoration: none;
	border-radius: 3px;
	transition: background-color 0.2s ease;
}
.pf-wc-page .woocommerce-MyAccount-navigation a:hover {
	background-color: rgba(240, 236, 228, 0.06);
}
.pf-wc-page .woocommerce-MyAccount-navigation .is-active a {
	background-color: rgba(240, 236, 228, 0.1);
	font-weight: 500;
}

.pf-wc-page .woocommerce-MyAccount-content {
	background-color: var(--wp--preset--color--surface-dark);
	border-radius: 4px;
	padding: 2rem;
}

/* Block-based WC notices (replaces legacy .woocommerce-info markup on newer
 * versions). Same dark-panel treatment with semantic left-border. */
.pf-wc-page .wc-block-components-notice-banner {
	background-color: rgba(240, 236, 228, 0.06) !important;
	color: var(--wp--preset--color--text-primary) !important;
	border: none !important;
	border-left: 3px solid var(--wp--custom--color--info-blue) !important;
	border-radius: 4px !important;
	box-shadow: none !important;
	padding: 1rem 1.25rem !important;
	margin-bottom: 1.5rem !important;
}
.pf-wc-page .wc-block-components-notice-banner.is-success {
	border-left-color: var(--wp--custom--color--success-green) !important;
}
.pf-wc-page .wc-block-components-notice-banner.is-error {
	border-left-color: var(--wp--custom--color--error-red) !important;
}
.pf-wc-page .wc-block-components-notice-banner svg {
	fill: var(--wp--custom--color--info-blue);
}
.pf-wc-page .wc-block-components-notice-banner.is-success svg {
	fill: var(--wp--custom--color--success-green);
}
.pf-wc-page .wc-block-components-notice-banner.is-error svg {
	fill: var(--wp--custom--color--error-red);
}
.pf-wc-page .wc-block-components-notice-banner a {
	color: var(--wp--preset--color--text-primary) !important;
	text-decoration: underline;
}

/* Fieldset inside My Account forms — strip the browser's default groove
 * border. Treat <legend> as a section heading. */
.pf-wc-page .woocommerce-MyAccount-content fieldset {
	border: 1px solid rgba(240, 236, 228, 0.08);
	border-radius: 4px;
	padding: 1.5rem;
	margin: 1.5rem 0;
}
.pf-wc-page .woocommerce-MyAccount-content fieldset legend {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 400;
	color: var(--wp--preset--color--text-primary);
	padding: 0 0.5rem;
}

/* Stack nav above content on mobile. Needs the same :has() scope as the
 * desktop rule to beat its specificity, otherwise the two-column layout wins. */
@media (max-width: 768px) {
	.pf-wc-page .woocommerce:has(.woocommerce-MyAccount-navigation) {
		grid-template-columns: 1fr;
	}
}

/* ============================================
   Card-Grid Height Equalization
   In .wp-block-columns layouts, the columns stretch but the inner
   .wp-block-group card only grows to its content, so neighbors with
   different copy lengths render as mismatched boxes. Scoped to grids
   we've explicitly marked as card-grids so unrelated column layouts
   are untouched. Only applies above the mobile stacking breakpoint.
   ============================================ */
@media (min-width: 782px) {
	/* Homepage "Drops & Tinctures" featured-products row. Some cards lack
	   the size-selector block (catalog tiles) — stretch the card background
	   and let the extra space sit below the CTA instead of gapping inside
	   the card content. */
	.pf-products-section .wp-block-columns > .wp-block-column {
		display: flex;
	}
	.pf-products-section .pf-product-card {
		width: 100%;
		flex: 1;
	}

	/* "Shop by Category" style tiles with a CTA button (phytofamily page).
	   Pin the button row to the bottom so CTAs align across cards even
	   when descriptions wrap to different line counts. */
	.pf-card-grid.wp-block-columns > .wp-block-column,
	.pf-card-grid .wp-block-columns > .wp-block-column {
		display: flex;
	}
	.pf-card-grid.wp-block-columns > .wp-block-column > .wp-block-group,
	.pf-card-grid .wp-block-columns > .wp-block-column > .wp-block-group {
		flex: 1;
		display: flex;
		flex-direction: column;
	}
	.pf-card-grid.wp-block-columns > .wp-block-column > .wp-block-group > .wp-block-buttons,
	.pf-card-grid .wp-block-columns > .wp-block-column > .wp-block-group > .wp-block-buttons {
		margin-top: auto;
	}

	/* /categories/ tiles are image + heading only. Reserve two lines of
	   heading space (with the text centered) so single-line titles align
	   with two-line titles across the row. */
	.pf-category-card :is(h2, h3, h4) {
		min-height: 3em;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

/* ============================================
   Checkout / WC form fields — dark theme
   Inputs, select2, and the Authorize.Net payment box render light by default
   and break the dark checkout at the payment step. Scope to .pf-wc-page so
   cart / checkout / my-account fields all read consistently.
   ============================================ */
.pf-wc-page .input-text,
.pf-wc-page textarea.input-text,
.pf-wc-page textarea,
.pf-wc-page input[type="text"],
.pf-wc-page input[type="email"],
.pf-wc-page input[type="tel"],
.pf-wc-page input[type="password"],
.pf-wc-page input[type="number"] {
	background-color: var(--wp--preset--color--surface-dark) !important;
	color: var(--wp--preset--color--text-primary) !important;
	border: 1px solid var(--wp--custom--color--border) !important;
	border-radius: 4px !important;
}
.pf-wc-page .input-text::placeholder,
.pf-wc-page textarea::placeholder {
	color: var(--wp--preset--color--text-secondary) !important;
}
.pf-wc-page .input-text:focus,
.pf-wc-page textarea:focus {
	border-color: var(--wp--preset--color--text-primary) !important;
	outline: none;
}

/* select2 country/state */
.pf-wc-page .select2-selection,
.pf-wc-page .select2-selection--single {
	background-color: var(--wp--preset--color--surface-dark) !important;
	border: 1px solid var(--wp--custom--color--border) !important;
	height: 48px !important;
	display: flex !important;
	align-items: center !important;
}
.pf-wc-page .select2-selection__rendered {
	color: var(--wp--preset--color--text-primary) !important;
}
/* select2 dropdown is appended to <body>, so it's outside .pf-wc-page */
.select2-dropdown {
	background-color: var(--wp--preset--color--surface-dark) !important;
	border: 1px solid var(--wp--custom--color--border) !important;
}
.select2-results__option {
	color: var(--wp--preset--color--text-primary) !important;
	background-color: var(--wp--preset--color--surface-dark) !important;
}
.select2-results__option--highlighted {
	background-color: rgba(240, 236, 228, 0.1) !important;
}
.select2-search__field {
	background-color: var(--wp--custom--color--background) !important;
	color: var(--wp--preset--color--text-primary) !important;
	border: 1px solid var(--wp--custom--color--border) !important;
}

/* Payment box (Authorize.Net) — kill the pale lavender panel */
.pf-wc-page #payment,
.pf-wc-page .woocommerce-checkout-payment,
.pf-wc-page ul.payment_methods,
.pf-wc-page .wc_payment_methods {
	background: transparent !important;
	border: none !important;
}
.pf-wc-page .payment_box,
.pf-wc-page .payment_box.payment_method_authnet {
	background-color: var(--wp--preset--color--surface-dark) !important;
	color: var(--wp--preset--color--text-primary) !important;
	border-radius: 4px !important;
}
.pf-wc-page .payment_box::before {
	border-bottom-color: var(--wp--preset--color--surface-dark) !important;
	border-top-color: var(--wp--preset--color--surface-dark) !important;
}
.pf-wc-page .payment_box p,
.pf-wc-page .payment_box label,
.pf-wc-page .payment_box span,
.pf-wc-page ul.payment_methods label {
	color: var(--wp--preset--color--text-primary) !important;
}

/* ============================================
   WooCommerce BLOCK cart/checkout — dark theme
   The live Cart block and the Checkout block (migration candidate, tested on
   /checkout-block-test/) render inputs/labels light by default. These rules use
   the block component classes directly, so they apply WITH or WITHOUT the
   .pf-wc-page wrapper (the block cart is wrapped; a future block-checkout
   template may render the block on a bare page). Scoped to .wc-block-* so they
   never bleed into the custom archive/PDP cards.
   ============================================ */

/* Text / email / tel / number / textarea inside block forms */
.wc-block-components-text-input input,
.wc-block-components-text-input textarea,
.wc-block-checkout textarea,
.wc-block-cart textarea {
	background-color: var(--wp--preset--color--surface-dark) !important;
	color: var(--wp--preset--color--text-primary) !important;
	border: 1px solid var(--wp--custom--color--border) !important;
	border-radius: 4px !important;
}

/* Floating labels read as muted placeholder text against the dark field */
.wc-block-components-text-input label,
.wc-block-components-combobox label,
.wc-block-checkout .wc-block-components-checkout-step__description {
	color: var(--wp--preset--color--text-secondary) !important;
}

/* Country / state comboboxes + native selects */
.wc-block-components-combobox .components-form-token-field,
.wc-block-components-combobox-control input,
.wc-block-components-combobox input,
.wc-blocks-components-select .wc-blocks-components-select__select {
	background-color: var(--wp--preset--color--surface-dark) !important;
	color: var(--wp--preset--color--text-primary) !important;
	border: 1px solid var(--wp--custom--color--border) !important;
	border-radius: 4px !important;
}

/* Combobox suggestion list (rendered inside the block) */
.wc-block-components-combobox-list {
	background-color: var(--wp--preset--color--surface-dark) !important;
	border: 1px solid var(--wp--custom--color--border) !important;
}
.wc-block-components-combobox-list-item.is-highlighted,
.wc-block-components-combobox-list-item:hover {
	background-color: rgba(240, 236, 228, 0.1) !important;
}

/* Authorize.Net card fields inside the block payment area.
   :not(radio/checkbox) so the "Credit card" radio keeps its native circle.
   min-height/padding/font match the address fields (50px / 16px) — the
   gateway's card inputs default to ~18px, which looks undersized. This only
   grows the CARD inputs; the address fields keep WC's default sizing untouched. */
.wc-block-components-payment-methods input[type="text"],
.wc-block-components-payment-methods input[type="tel"],
.wc-block-checkout__payment-method input[type="text"],
.wc-block-checkout__payment-method input[type="tel"],
.wp-block-woocommerce-checkout-payment-block input:not([type="radio"]):not([type="checkbox"]) {
	background-color: var(--wp--preset--color--surface-dark) !important;
	color: var(--wp--preset--color--text-primary) !important;
	border: 1px solid var(--wp--custom--color--border) !important;
	border-radius: 4px !important;
	min-height: 50px;
	padding: 14px 12px !important;
	font-size: 16px !important;
	box-sizing: border-box !important;
}
/* The Authorize.Net card-field wrapper is a styled-components div (white by
   default). The hash class (e.g. .qaJVi) is build-generated and not stable, so
   match the stable styled-components "sc-" prefix, scoped to the payment block,
   to darken the wrapper without depending on the hash. */
.wp-block-woocommerce-checkout-payment-block [class*="sc-"] {
	background-color: var(--wp--preset--color--surface-dark) !important;
	border-color: var(--wp--custom--color--border) !important;
}

/* Placeholders + focus */
.wc-block-checkout input::placeholder,
.wc-block-checkout textarea::placeholder,
.wc-block-cart input::placeholder {
	color: var(--wp--preset--color--text-secondary) !important;
}
.wc-block-checkout input:focus,
.wc-block-checkout textarea:focus,
.wc-block-cart input:focus {
	border-color: var(--wp--preset--color--text-primary) !important;
	outline: none;
}

/* "Edit cart" back-link above the block-checkout order summary — gives an exit
   back to the editable cart without cluttering the read-only summary. */
.pf-edit-cart-link {
	margin: 0 0 var(--wp--preset--font-size--x-small);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.02em;
}
.pf-edit-cart-link a {
	color: var(--wp--preset--color--text-secondary) !important;
	text-decoration: none;
	transition: color 0.2s ease;
}
.pf-edit-cart-link a:hover {
	color: var(--wp--preset--color--text-primary) !important;
}