/*
Theme Name: Planter Babe
Theme URI: https://planterbabe.com
Author: Madison
Author URI: https://planterbabe.com
Description: Custom theme for Planter Babe — handmade planters, grown with love. Earthy, warm, plant-lady aesthetic built for editing with custom Gutenberg blocks.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: planter-babe
*/

/* ==========================================================================
   1. Brand tokens
   Palette pulled from the Planter Babe logo:
   forest green, rust/terracotta, cream, sage, tan, deep brown
   ========================================================================== */
:root {
	--pb-forest: #2b3620;
	--pb-forest-dark: #1d2516;
	--pb-rust: #c1602c;
	--pb-rust-dark: #a34f22;
	--pb-cream: #edd7bb;
	--pb-cream-light: #faf3e6;
	--pb-sage: #8a9a5b;
	--pb-tan: #a9906e;
	--pb-brown: #6b4226;
	--pb-white: #ffffff;
	--pb-charcoal: #2b2b28;

	--pb-font-heading: "Poppins", "Trebuchet MS", sans-serif;
	--pb-font-script: "Caveat", cursive;
	--pb-font-body: "Karla", "Helvetica Neue", Arial, sans-serif;

	--pb-container: 1240px;
	--pb-container-narrow: 760px;
	--pb-radius-sm: 10px;
	--pb-radius: 20px;
	--pb-radius-lg: 28px;

	/* Premium, minimal spacing scale — generous white space by default. */
	--pb-space-xs: 8px;
	--pb-space-sm: 16px;
	--pb-space-md: 24px;
	--pb-space-lg: 48px;
	--pb-space-xl: 80px;
	--pb-space-2xl: 120px;

	/* Soft shadows only — no hard drop shadows anywhere in the system. */
	--pb-shadow-sm: 0 4px 16px rgba(43, 54, 32, 0.06);
	--pb-shadow-md: 0 12px 32px rgba(43, 54, 32, 0.10);
	--pb-shadow-lg: 0 24px 64px rgba(43, 54, 32, 0.14);

	--pb-header-height: 84px;
	--pb-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   2. Reset & base
   ========================================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background-color: var(--pb-white);
	color: var(--pb-charcoal);
	font-family: var(--pb-font-body);
	font-size: 17px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

/* Large, confident type scale — mobile-first, scales up with clamp(). */
h1 { font-size: clamp(2.25rem, 4vw + 1rem, 4rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.75rem, 2.5vw + 1rem, 2.75rem); letter-spacing: -0.01em; }
h3 { font-size: clamp(1.25rem, 1vw + 1rem, 1.5rem); }

.pb-eyebrow {
	display: inline-block;
	font-family: var(--pb-font-heading);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pb-sage);
	margin-bottom: var(--pb-space-sm);
}

.pb-section {
	padding: 0;
}

/* Anchor scroll offset: every custom section block gets a
   wp-block-planter-babe-* class from get_block_wrapper_attributes(), so this
   one rule covers all of them. --pb-header-height is kept in sync with the
   sticky nav's real height by js/animations.js (it can grow on small screens
   when the header wraps), plus a little extra breathing room so content
   doesn't start flush against the nav. */
.pb-section,
[class*="wp-block-planter-babe-"] {
	scroll-margin-top: calc(var(--pb-header-height) + 24px);
}

.pb-section--cream { background-color: var(--pb-cream-light); }
.pb-section--tight { padding: var(--pb-space-xl) 0; }

.pb-section-header {
	max-width: var(--pb-container-narrow);
	margin: 0 auto var(--pb-space-lg);
	text-align: center;
}

.pb-section-header p {
	color: var(--pb-brown);
	font-size: 18px;
}

/* Subtle scroll-reveal — elements fade/rise in once, respects reduced motion. */
.pb-fade-in {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s var(--pb-ease), transform 0.7s var(--pb-ease);
}

.pb-fade-in.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Per-item scroll-reveal for repeating cards, steps, and photos — same soft
   fade/rise as .pb-fade-in above, but meant to be stacked on many siblings
   at once. animations.js computes a short stagger delay between siblings
   so items cascade in one after another instead of all popping in together.
   .pb-faq-item is included here directly (rather than adding a new class)
   since it's a static InnerBlocks save and we don't want to touch that markup. */
.pb-fade-item,
.pb-faq-item {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s var(--pb-ease), transform 0.6s var(--pb-ease);
}

.pb-fade-item.is-visible,
.pb-faq-item.is-visible {
	opacity: 1;
	transform: translateY(0);
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--pb-rust);
	text-decoration: none;
	transition: color 0.2s ease;
}

a:hover,
a:focus {
	color: var(--pb-rust-dark);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--pb-font-heading);
	color: var(--pb-forest);
	line-height: 1.2;
	margin: 0 0 0.5em;
	font-weight: 700;
}

.pb-script {
	font-family: var(--pb-font-script);
	color: var(--pb-rust);
	font-weight: 400;
}

.pb-container {
	max-width: var(--pb-container);
	margin: 0 auto;
	padding: 0 24px;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	overflow: hidden;
	position: absolute !important;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background: var(--pb-white);
	color: var(--pb-forest);
	clip: auto !important;
	clip-path: none;
	height: auto;
	width: auto;
	display: block;
	padding: 12px 16px;
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 100000;
	border-radius: 6px;
}

.pb-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--pb-font-heading);
	font-weight: 600;
	font-size: 16px;
	letter-spacing: 0.01em;
	padding: 16px 34px;
	border-radius: 999px;
	background-color: var(--pb-rust);
	color: var(--pb-white);
	border: 2px solid var(--pb-rust);
	cursor: pointer;
	box-shadow: var(--pb-shadow-sm);
	transition: transform 0.25s var(--pb-ease), box-shadow 0.25s var(--pb-ease), background-color 0.2s ease, color 0.2s ease;
}

.pb-btn:hover,
.pb-btn:focus-visible {
	background-color: var(--pb-rust-dark);
	border-color: var(--pb-rust-dark);
	color: var(--pb-white);
	transform: translateY(-2px);
	box-shadow: var(--pb-shadow-md);
}

.pb-btn--outline {
	background-color: transparent;
	color: var(--pb-forest);
	border-color: var(--pb-forest);
	box-shadow: none;
}

.pb-btn--outline:hover,
.pb-btn--outline:focus-visible {
	background-color: var(--pb-forest);
	border-color: var(--pb-forest);
	color: var(--pb-white);
}

.pb-btn--small {
	padding: 10px 22px;
	font-size: 14px;
}

*:focus-visible {
	outline: 3px solid var(--pb-sage);
	outline-offset: 2px;
}

/* ==========================================================================
   3. Site header
   ========================================================================== */
.site-header {
	background-color: rgba(250, 243, 230, 0.85);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid rgba(43, 54, 32, 0.08);
	position: sticky;
	top: 0;
	z-index: 100;
	transition: box-shadow 0.3s ease;
}

.site-header.is-scrolled {
	box-shadow: var(--pb-shadow-sm);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 16px 24px;
	min-height: var(--pb-header-height);
}

.site-header__cta {
	white-space: nowrap;
}

@media (max-width: 860px) {
	.site-header__cta {
		display: none;
	}
}

.site-branding {
	display: flex;
	align-items: center;
	gap: 12px;
}

.site-branding img {
	max-height: 64px;
	width: auto;
	border-radius: 50%;
}

.site-branding__wordmark {
	margin: 0;
	line-height: 1;
}

.site-branding__wordmark a {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
}

.site-branding__word-planter {
	font-family: "Cooper Black", "Cooper Std Black", "Cooper Std", Georgia, serif;
	font-size: 22px;
	color: var(--pb-forest);
}

.site-branding__word-babe {
	font-family: "Bree Serif", Georgia, serif;
	font-weight: 800;
	font-size: 26px;
	color: var(--pb-rust);
}

.site-branding__text .site-title {
	margin: 0;
	font-size: 22px;
	line-height: 1.1;
}

.site-branding__text .site-title a {
	color: var(--pb-forest);
}

.site-branding__text .site-description {
	margin: 0;
	font-size: 13px;
	color: var(--pb-brown);
	font-style: italic;
}

.menu-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	background: transparent;
	border: none;
	padding: 8px;
	cursor: pointer;
}

.menu-toggle span {
	display: block;
	width: 24px;
	height: 2px;
	border-radius: 1px;
	background-color: var(--pb-forest);
	transition: transform 0.25s var(--pb-ease), opacity 0.25s var(--pb-ease);
}

.menu-toggle[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
}

.menu-toggle[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

.primary-navigation ul {
	list-style: none;
	display: flex;
	gap: 28px;
	margin: 0;
	padding: 0;
}

.primary-navigation li {
	position: relative;
}

.primary-navigation a {
	color: var(--pb-forest);
	font-family: var(--pb-font-heading);
	font-weight: 600;
	font-size: 15px;
}

.primary-navigation a:hover,
.primary-navigation a:focus {
	color: var(--pb-rust);
}

.primary-navigation a.is-current {
	color: var(--pb-rust);
	position: relative;
}

.primary-navigation a.is-current::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -6px;
	height: 2px;
	background-color: var(--pb-rust);
	border-radius: 2px;
}

.primary-navigation .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	background: var(--pb-white);
	min-width: 200px;
	padding: 10px 0;
	border-radius: 10px;
	box-shadow: 0 12px 24px rgba(43, 54, 32, 0.15);
}

.primary-navigation li:hover > .sub-menu,
.primary-navigation li:focus-within > .sub-menu {
	display: block;
}

.primary-navigation .sub-menu li a {
	display: block;
	padding: 8px 20px;
}

@media (max-width: 860px) {
	.menu-toggle {
		display: inline-flex;
		align-items: center;
	}

	.primary-navigation {
		display: none;
		width: 100%;
		order: 3;
		background-color: var(--pb-cream);
	}

	.primary-navigation.is-open {
		display: block;
	}

	.primary-navigation ul {
		flex-direction: column;
		gap: 0;
		padding: 12px 24px 20px;
	}

	.primary-navigation .sub-menu {
		display: block;
		position: static;
		box-shadow: none;
		padding-left: 16px;
	}

	.site-header__inner {
		flex-wrap: wrap;
	}
}

/* ==========================================================================
   4. Site footer
   ========================================================================== */
.site-footer {
	background-color: var(--pb-forest);
	color: var(--pb-cream-light);
	margin-top: var(--pb-space-2xl);
}

/* Product pages always end with the full-bleed .pb-custom-size band, which
   should run straight into the footer with no gap. */
body.single-pb_product .site-footer {
	margin-top: 0;
}

/* The PB Subscribe CTA block and the shop page's rust CTA banner can each
   end up as the last thing on the page, so instead of body-class rules tied
   to one specific template (which proved unreliable for the shop page —
   the gap persisted even with body.woocommerce-shop targeted), this checks
   directly whether the block is the last one on the page — if so, run it
   straight into the footer with no trailing gap. */
.site-main:has(.pb-subscribe:last-child),
.site-main:has(.pb-shop-cta:last-child) {
	padding-bottom: 0;
}

body:has(.pb-subscribe:last-child) .site-footer,
body:has(.pb-shop-cta:last-child) .site-footer {
	margin-top: 0;
}

.site-footer a {
	color: var(--pb-cream-light);
}

.site-footer a:hover,
.site-footer a:focus-visible {
	color: var(--pb-rust);
}

.site-footer__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--pb-space-md);
	padding: var(--pb-space-xl) 24px;
}

.footer-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--pb-space-lg);
}

.footer-navigation a {
	font-family: var(--pb-font-heading);
	font-weight: 600;
	font-size: 15px;
}

.footer-social {
	display: flex;
	gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid rgba(245, 230, 208, 0.3);
	transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.footer-social a:hover,
.footer-social a:focus-visible {
	background-color: var(--pb-rust);
	border-color: var(--pb-rust);
	color: var(--pb-white);
	transform: translateY(-2px);
}

.site-footer__divider {
	width: 100%;
	max-width: var(--pb-container);
	border: none;
	border-top: 1px solid rgba(245, 230, 208, 0.2);
	margin: 0;
}

.site-footer__copyright {
	font-size: 13px;
	color: rgba(245, 230, 208, 0.7);
	margin: 0;
}

/* ==========================================================================
   5. Main content wrapper
   ========================================================================== */
.site-main {
	min-height: 40vh;
	padding-bottom: 48px;
}

/* Product pages end with the full-bleed .pb-custom-size band, which supplies
   its own bottom padding — this blanket 48px would otherwise show up as a
   plain white strip between the rust band and the footer. */
body.single-pb_product .site-main {
	padding-bottom: 0;
}

/* Every custom section block supplies its own vertical padding, so
   .site-main no longer adds a blanket top padding — this lets full-bleed
   blocks like the video hero sit flush against the sticky header. */

/* ==========================================================================
   6. Content defaults (blog index, single post, default page)
   ========================================================================== */
.pb-blog-page {
	/* Clears the sticky nav, since .site-main no longer adds a blanket top
	   padding (full-bleed blocks like the video hero rely on that). */
	padding-top: calc(var(--pb-header-height) + 40px);
}

.pb-blog-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--pb-space-lg);
}

@media (min-width: 640px) {
	.pb-blog-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 960px) {
	.pb-blog-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--pb-space-md);
	}
}

.pb-post {
	display: flex;
	flex-direction: column;
	background-color: var(--pb-white);
	border-radius: var(--pb-radius);
	overflow: hidden;
	box-shadow: var(--pb-shadow-sm);
	transition: transform 0.3s var(--pb-ease), box-shadow 0.3s var(--pb-ease);
}

.pb-post:hover {
	transform: translateY(-6px);
	box-shadow: var(--pb-shadow-lg);
}

.pb-post__thumbnail {
	display: block;
	aspect-ratio: 4 / 3;
	background-color: var(--pb-cream);
	overflow: hidden;
}

.pb-post__thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s var(--pb-ease);
}

.pb-post:hover .pb-post__thumbnail img {
	transform: scale(1.05);
}

.pb-post__thumbnail-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--pb-cream) 0%, var(--pb-tan) 100%);
}

.pb-post__body {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	padding: var(--pb-space-md);
}

.pb-post__title {
	font-size: 20px;
	margin: 0 0 var(--pb-space-xs);
}

.pb-post__title a {
	color: var(--pb-forest);
}

.pb-post__excerpt {
	color: var(--pb-brown);
	font-size: 15px;
	line-height: 1.6;
	margin-bottom: var(--pb-space-sm);
}

.pb-post__button {
	margin-top: auto;
	align-self: flex-start;
}

.pb-pagination {
	text-align: center;
	margin-top: var(--pb-space-lg);
	grid-column: 1 / -1;
}

.pb-page__header {
	padding: 40px 24px 0;
}

.pb-page__title {
	font-size: 36px;
}

.pb-single-page {
	/* Clears the sticky nav, since .site-main no longer adds a blanket top
	   padding (full-bleed blocks like the video hero rely on that). */
	padding-top: calc(var(--pb-header-height) + 40px);
}

.pb-single__header {
	margin-bottom: 24px;
}

.pb-single__title {
	font-size: 36px;
	margin-bottom: 8px;
}

.pb-single__meta {
	color: var(--pb-brown);
	font-size: 14px;
	margin: 0;
}

.pb-single__thumbnail {
	margin-bottom: 24px;
	border-radius: var(--pb-radius);
	overflow: hidden;
}

.pb-single__thumbnail img {
	width: 100%;
	aspect-ratio: 16 / 7;
	object-fit: cover;
	display: block;
}

/* ---- Colorful Post template (alternate, opt-in per post) ---- */
.pb-single-colorful-page {
	padding-top: var(--pb-header-height);
}

.pb-single-colorful__band {
	background: linear-gradient(135deg, var(--pb-rust) 0%, var(--pb-forest-dark) 100%);
	padding: calc(var(--pb-space-2xl) + 16px) var(--pb-space-md) var(--pb-space-xl);
	text-align: center;
}

.pb-single-colorful__eyebrow {
	font-family: var(--pb-font-script);
	font-size: 24px;
	color: var(--pb-cream-light);
	margin: 0 0 4px;
}

.pb-single-colorful__title {
	font-family: var(--pb-font-heading);
	font-weight: 700;
	font-size: 36px;
	color: var(--pb-white);
	margin: 0 0 12px;
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

.pb-single-colorful__meta {
	color: var(--pb-cream);
	font-size: 14px;
	margin: 0;
	display: flex;
	gap: 8px;
	justify-content: center;
}

.pb-single-colorful__thumbnail {
	margin-top: -40px;
	margin-bottom: var(--pb-space-lg);
	border-radius: var(--pb-radius-lg);
	overflow: hidden;
	box-shadow: var(--pb-shadow-lg);
	position: relative;
}

.pb-single-colorful__thumbnail img {
	width: 100%;
	aspect-ratio: 16 / 7;
	object-fit: cover;
	display: block;
}

.pb-single-colorful__content {
	background-color: var(--pb-cream-light);
	border-radius: var(--pb-radius-lg);
	padding: var(--pb-space-xl);
	max-width: 760px;
	margin: 0 auto var(--pb-space-2xl);
}

/* ==========================================================================
   7. Products post type (single product, archive, related-products cards)
   ========================================================================== */
.pb-product-archive {
	/* Clears the sticky nav, since .site-main no longer adds a blanket top
	   padding (full-bleed blocks like the video hero rely on that). */
	padding-top: calc(var(--pb-header-height) + 40px);
	padding-bottom: var(--pb-space-2xl);
}

.pb-product-page {
	/* The product hero (below) already sits flush under the nav and clears
	   it on its own, so this is just normal breathing room between the
	   hero and the sections that follow — not a nav-clearance offset.
	   No bottom padding: the page always ends with the full-bleed
	   .pb-custom-size band, which supplies its own breathing room via its
	   own background/padding, so extra padding here would just leave a
	   blank gap between it and the footer. */
	padding-top: var(--pb-space-2xl);
}

/* ---- Hero ---- */
.pb-product-hero {
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	min-height: 60vh;
	background-color: var(--pb-cream);
}

@media (min-width: 900px) {
	.pb-product-hero {
		grid-template-columns: 1fr 1fr;
		min-height: 70vh;
	}
}

.pb-product-hero__media {
	height: 320px;
}

@media (min-width: 900px) {
	.pb-product-hero__media {
		height: 100%;
		min-height: 70vh;
	}
}

.pb-product-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.pb-product-hero__media-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--pb-cream) 0%, var(--pb-tan) 100%);
}

.pb-product-hero__content {
	padding: var(--pb-space-lg) var(--pb-space-md);
	max-width: 760px;
	background-color: var(--pb-rust);
}

@media (min-width: 900px) {
	.pb-product-hero__content {
		padding: var(--pb-space-2xl);
		max-width: none;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
}

.pb-product-hero__title {
	font-size: 40px;
	margin: 0 0 var(--pb-space-xs);
	color: var(--pb-white);
}

.pb-product-hero__description {
	font-size: 18px;
	color: rgba(255, 255, 255, 0.9);
	line-height: 1.6;
	margin: 0 0 var(--pb-space-sm);
}

.pb-product-hero__description p {
	margin: 0 0 var(--pb-space-xs);
}

.pb-product-hero__description p:last-child {
	margin-bottom: 0;
}

.pb-product-hero__price {
	font-family: var(--pb-font-heading);
	font-size: 30px;
	font-weight: 700;
	color: var(--pb-cream-light);
	margin: 0 0 var(--pb-space-md);
}

.pb-product-hero__scroll-cue {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--pb-cream-light);
	font-family: var(--pb-font-heading);
	font-weight: 600;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.pb-product-hero__scroll-cue svg {
	animation: pb-bounce-y 1.6s ease-in-out infinite;
}

@keyframes pb-bounce-y {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(6px); }
}

@media (prefers-reduced-motion: reduce) {
	.pb-product-hero__scroll-cue svg {
		animation: none;
	}
}

/* ---- Details / info ---- */
.pb-product-info,
.pb-product-colorful-collage {
	margin-bottom: var(--pb-space-2xl);
	/* Not a block wrapper, so it's outside the generic
	   wp-block-planter-babe-* anchor-offset rule above — the hero's
	   "See the details" scroll-cue link targets this section directly,
	   so it needs its own offset to clear the sticky nav. */
	scroll-margin-top: calc(var(--pb-header-height) + 24px);
}

.pb-product-info__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--pb-space-lg);
}

@media (min-width: 780px) {
	.pb-product-info__grid {
		grid-template-columns: 1fr 2fr;
	}
}

.pb-product-info__card {
	background-color: var(--pb-cream-light);
	border-radius: var(--pb-radius);
	padding: var(--pb-space-lg);
}

.pb-product-info__card h3 {
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--pb-forest);
	margin: 0 0 var(--pb-space-xs);
}

.pb-product-info__content {
	color: var(--pb-brown);
	font-size: 16px;
	line-height: 1.7;
}

/* ---- Colorful Product template (alternate, opt-in per product) ---- */
.pb-product-colorful-hero {
	position: relative;
	background-color: var(--pb-cream);
	padding: calc(var(--pb-header-height) + var(--pb-space-lg)) 0 var(--pb-space-xl);
	overflow: hidden;
}

.pb-product-colorful-hero__badge {
	position: absolute;
	top: var(--pb-space-lg);
	right: var(--pb-space-md);
	background-color: var(--pb-rust);
	color: var(--pb-white);
	font-family: var(--pb-font-script);
	font-size: 20px;
	padding: 8px 20px;
	border-radius: 999px;
	transform: rotate(6deg);
	z-index: 1;
}

.pb-product-colorful-hero__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--pb-space-lg);
	align-items: center;
}

@media (min-width: 780px) {
	.pb-product-colorful-hero__grid {
		grid-template-columns: 1fr 1.2fr;
	}
}

.pb-product-colorful-hero__media {
	aspect-ratio: 4 / 3;
	border-radius: var(--pb-radius-lg);
	overflow: hidden;
	background-color: var(--pb-white);
}

.pb-product-colorful-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.pb-product-colorful-hero__media-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--pb-cream) 0%, var(--pb-tan) 100%);
}

.pb-product-colorful-hero__eyebrow {
	font-family: var(--pb-font-script);
	font-size: 24px;
	color: var(--pb-rust);
	margin: 0 0 4px;
}

.pb-product-colorful-hero__title {
	font-size: 34px;
	margin: 0 0 var(--pb-space-xs);
	color: var(--pb-forest-dark);
}

.pb-product-colorful-hero__tagline {
	font-size: 16px;
	color: var(--pb-brown);
	line-height: 1.6;
	margin: 0 0 var(--pb-space-sm);
	max-width: 52ch;
}

.pb-product-colorful-hero__tagline p {
	margin: 0 0 var(--pb-space-xs);
}

.pb-product-colorful-hero__tagline p:last-child {
	margin-bottom: 0;
}

.pb-product-colorful-hero__price {
	display: inline-block;
	font-family: var(--pb-font-heading);
	font-size: 24px;
	font-weight: 700;
	color: var(--pb-rust);
	margin: 0 0 var(--pb-space-md);
}

.pb-product-colorful-hero__scroll-cue {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--pb-forest);
	font-family: var(--pb-font-heading);
	font-weight: 600;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.pb-product-colorful-hero__scroll-cue svg {
	animation: pb-bounce-y 1.6s ease-in-out infinite;
}

.pb-product-colorful-collage__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 780px) {
	.pb-product-colorful-collage__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.pb-product-colorful-collage__cell {
	padding: var(--pb-space-lg) var(--pb-space-md);
	min-height: 160px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.pb-product-colorful-collage__cell h3 {
	font-family: var(--pb-font-heading);
	font-size: 14px;
	margin: 0 0 6px;
}

.pb-product-colorful-collage__cell p {
	font-size: 14px;
	line-height: 1.5;
	margin: 0;
}

.pb-product-colorful-collage__cell--forest {
	background-color: var(--pb-forest-dark);
}
.pb-product-colorful-collage__cell--forest h3,
.pb-product-colorful-collage__cell--forest p {
	color: var(--pb-cream-light);
}

.pb-product-colorful-collage__cell--rust {
	background-color: var(--pb-rust);
}
.pb-product-colorful-collage__cell--rust h3,
.pb-product-colorful-collage__cell--rust p {
	color: var(--pb-white);
}

.pb-product-colorful-collage__cell--cream {
	background-color: var(--pb-cream-light);
}
.pb-product-colorful-collage__cell--cream h3,
.pb-product-colorful-collage__cell--cream p {
	color: var(--pb-forest-dark);
}

.pb-product-colorful-collage__cell--tan {
	background-color: var(--pb-tan);
}
.pb-product-colorful-collage__cell--tan h3,
.pb-product-colorful-collage__cell--tan p {
	color: var(--pb-forest-dark);
}

/* ---- Gallery ---- */
.pb-product-gallery-section {
	max-width: 900px;
	margin: 0 auto var(--pb-space-2xl);
}

@media (min-width: 780px) {
	.pb-product-gallery-section {
		display: grid;
		grid-template-columns: 1fr 140px;
		gap: var(--pb-space-lg);
		align-items: start;
	}
}

.pb-product-single__main-media {
	border-radius: var(--pb-radius-lg);
	overflow: hidden;
	box-shadow: var(--pb-shadow-md);
	aspect-ratio: 1 / 1;
	background-color: var(--pb-cream);
}

.pb-product-single__main-media img,
.pb-product-single__main-media video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.pb-product-single__main-media--placeholder {
	background: linear-gradient(135deg, var(--pb-cream) 0%, var(--pb-tan) 100%);
}

.pb-product-single__thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: var(--pb-space-sm);
}

@media (min-width: 780px) {
	.pb-product-single__thumbs {
		flex-direction: column;
		flex-wrap: nowrap;
		margin-top: 0;
	}
}

.pb-product-single__thumb {
	position: relative;
	width: 72px;
	height: 72px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: var(--pb-radius-sm);
	overflow: hidden;
	cursor: pointer;
	background-color: var(--pb-cream);
	transition: border-color 0.2s ease;
}

@media (min-width: 780px) {
	.pb-product-single__thumb {
		width: 100%;
		height: auto;
		aspect-ratio: 1 / 1;
	}
}

.pb-product-single__thumb img,
.pb-product-single__thumb video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.pb-product-single__thumb.is-active,
.pb-product-single__thumb:hover,
.pb-product-single__thumb:focus-visible {
	border-color: var(--pb-rust);
}

.pb-product-single__thumb-video-badge {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--pb-white);
	background-color: rgba(43, 54, 32, 0.35);
	font-size: 14px;
}

/* ---- Order form ---- */
.pb-product-order {
	background-color: var(--pb-forest);
	border-radius: var(--pb-radius-lg);
	padding: var(--pb-space-lg);
	margin: 0 0 var(--pb-space-2xl);
}

.pb-product-order .pb-eyebrow {
	color: var(--pb-tan);
}

.pb-product-order .pb-section-header h2 {
	color: var(--pb-cream-light);
}

@media (min-width: 700px) {
	.pb-product-order {
		padding: var(--pb-space-xl);
	}
}

.pb-product-order__fieldset-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 var(--pb-space-xl);
}

@media (min-width: 700px) {
	.pb-product-order__fieldset-row {
		grid-template-columns: 1fr 1fr;
	}
}

.pb-product-order__form {
	margin-top: var(--pb-space-md);
}

.pb-product-order__hp {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
}

.pb-product-order__fieldset {
	border: none;
	padding: 0;
	margin: 0 0 var(--pb-space-md);
}

.pb-product-order__fieldset legend {
	font-weight: 600;
	font-size: 14px;
	color: var(--pb-cream-light);
	margin-bottom: 8px;
	padding: 0;
}

.pb-product-order__radio {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-right: var(--pb-space-md);
	font-size: 15px;
	color: var(--pb-cream-light);
}

.pb-product-order__field {
	margin-bottom: var(--pb-space-md);
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.pb-product-order__field label {
	font-weight: 600;
	font-size: 14px;
	color: var(--pb-cream-light);
}

.pb-product-order__field input {
	width: 100%;
	min-width: 0;
	font-family: var(--pb-font-body);
	font-size: 16px;
	padding: 12px 16px;
	border-radius: var(--pb-radius-sm);
	border: 1px solid rgba(43, 54, 32, 0.2);
	background-color: var(--pb-white);
}

.pb-product-order__field input:focus {
	outline: none;
	border-color: var(--pb-rust);
	box-shadow: 0 0 0 3px rgba(193, 96, 44, 0.15);
}

.pb-product-order__field-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--pb-space-md);
}

@media (min-width: 600px) {
	.pb-product-order__field-row {
		grid-template-columns: repeat(3, 1fr);
	}
}

.pb-product-order__address {
	margin-bottom: var(--pb-space-md);
}

.pb-product-order__address .pb-product-order__field {
	margin-bottom: var(--pb-space-md);
}

.pb-product-order__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	padding: var(--pb-space-sm) 0;
	border-top: 1px solid rgba(245, 230, 208, 0.2);
	margin-bottom: var(--pb-space-md);
	font-size: 15px;
	color: var(--pb-tan);
}

.pb-product-order__total-value {
	font-family: var(--pb-font-heading);
	font-size: 24px;
	color: var(--pb-white);
}

.pb-product-order__submit {
	width: 100%;
	justify-content: center;
}

.pb-product-order__notice {
	padding: 14px 18px;
	border-radius: var(--pb-radius-sm);
	margin-bottom: var(--pb-space-md);
	font-size: 15px;
}

.pb-product-order__notice--success {
	background-color: var(--pb-cream-light);
	color: var(--pb-forest-dark);
}

.pb-product-order__notice--error {
	background-color: var(--pb-cream-light);
	color: var(--pb-rust-dark);
}

/* ---- Colorful Product template: carry the color down into the gallery
   and order sections too, instead of leaving them plain/cream like the
   default template. Scoped to .pb-product-colorful-page so
   single-pb_product.php's gallery/order styling is untouched. ---- */
.pb-product-colorful-page .pb-product-order {
	background-color: var(--pb-forest);
}

.pb-product-colorful-page .pb-product-order .pb-eyebrow {
	color: var(--pb-tan);
}

.pb-product-colorful-page .pb-product-order .pb-section-header h2 {
	color: var(--pb-cream-light);
}

.pb-product-colorful-page .pb-product-order__fieldset legend,
.pb-product-colorful-page .pb-product-order__radio,
.pb-product-colorful-page .pb-product-order__field label {
	color: var(--pb-cream-light);
}

.pb-product-colorful-page .pb-product-order__total span {
	color: var(--pb-tan);
}

.pb-product-colorful-page .pb-product-order__total-value {
	color: var(--pb-white);
}

.pb-product-colorful-page .pb-product-order__notice--success {
	background-color: var(--pb-cream-light);
	color: var(--pb-forest-dark);
}

.pb-product-colorful-page .pb-product-order__notice--error {
	background-color: var(--pb-cream-light);
	color: var(--pb-rust-dark);
}

.pb-related-products {
	/* Full-bleed breakout: this section sits nested inside .pb-container
	   (which has its own max-width + side padding), so 100vw + the
	   negative-margin trick is needed to escape it and span the whole
	   viewport regardless of how narrow the parent container is. */
	background-color: var(--pb-white);
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	padding: var(--pb-space-xl) 24px;
}

.pb-related-products__title {
	font-size: 26px;
	margin: 0 auto var(--pb-space-md);
	max-width: var(--pb-container);
	color: var(--pb-forest-dark);
}

.pb-related-products__grid,
.pb-product-archive__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--pb-space-md);
	max-width: var(--pb-container);
	margin-left: auto;
	margin-right: auto;
}

@media (min-width: 640px) {
	.pb-related-products__grid,
	.pb-product-archive__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 960px) {
	.pb-related-products__grid,
	.pb-product-archive__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ---- DIY Kit cross-sell teaser (shown under Related Products) ---- */
.pb-custom-size {
	/* Full-bleed breakout, same technique as the sections above. This is
	   the last thing on the page before the footer (.site-main's own
	   padding-bottom and .site-footer's margin-top are both zeroed out on
	   product pages), so the bottom padding here is the only breathing
	   room between the content and the footer seam — kept inside this
	   band on purpose so that gap reads as its own background, not
	   blank white. */
	background-color: var(--pb-cream);
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	padding: var(--pb-space-xl) 24px var(--pb-space-lg);
}

.pb-custom-size__inner {
	max-width: var(--pb-container-narrow);
	margin: 0 auto;
	text-align: center;
}

.pb-custom-size__eyebrow {
	font-family: var(--pb-font-heading);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pb-forest-dark);
	margin: 0 0 8px;
}

.pb-custom-size__title {
	color: var(--pb-forest-dark);
	font-size: 30px;
	margin: 0 0 var(--pb-space-sm);
}

.pb-custom-size__desc {
	color: var(--pb-brown);
	font-size: 16px;
	line-height: 1.6;
	margin: 0 0 var(--pb-space-lg);
}

.pb-custom-size__button {
	background-color: var(--pb-forest);
	border-color: var(--pb-forest);
	color: var(--pb-cream-light);
}

.pb-custom-size__button:hover,
.pb-custom-size__button:focus-visible {
	background-color: var(--pb-forest-dark);
	border-color: var(--pb-forest-dark);
	color: var(--pb-white);
}

.pb-related-product-card {
	display: block;
	background-color: var(--pb-white);
	border-radius: var(--pb-radius);
	overflow: hidden;
	box-shadow: var(--pb-shadow-sm);
	transition: transform 0.3s var(--pb-ease), box-shadow 0.3s var(--pb-ease);
}

.pb-related-product-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--pb-shadow-lg);
}

.pb-related-product-card__image-wrap {
	aspect-ratio: 1 / 1;
	background-color: var(--pb-cream);
	overflow: hidden;
}

.pb-related-product-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pb-related-product-card__placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--pb-cream) 0%, var(--pb-tan) 100%);
}

.pb-related-product-card__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: var(--pb-space-md);
	background-color: var(--pb-white);
}

.pb-related-product-card__name {
	font-size: 17px;
	margin: 0;
	color: var(--pb-forest-dark);
}

.pb-related-product-card__size {
	display: block;
	font-size: 13px;
	color: var(--pb-forest);
	opacity: 0.65;
}

/* ==========================================================================
   9. WooCommerce (Mini Planter DIY Kit — the one product sold via real
   checkout/payment). Baseline brand styling for the shop/product/cart/
   checkout pages so they don't look like default unstyled WooCommerce.
   ========================================================================== */
.pb-woocommerce-page {
	padding-top: calc(var(--pb-header-height) + 40px);
	padding-bottom: var(--pb-space-2xl);
}

/* The shop page's full-bleed rust CTA banner breaks out of this container
   horizontally (via negative margins in the .pb-shop-cta rule below), but
   the container's own padding-bottom was still reserving 120px of blank
   space underneath it before the footer. Zero it out specifically when the
   CTA banner is the last thing in the container. */
.pb-woocommerce-page:has(.pb-shop-cta:last-child) {
	padding-bottom: 0;
}

.pb-back-to-cart {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: var(--pb-space-md);
	font-family: var(--pb-font-heading);
	font-weight: 600;
	font-size: 14px;
	color: var(--pb-forest);
	text-decoration: none;
	transition: color 0.2s ease;
}

.pb-back-to-cart:hover {
	color: var(--pb-rust);
}

/* WooCommerce's own stylesheet sets its default purple button color via
   these custom properties (and some fairly specific selectors) — redefine
   them to the brand rust so nothing falls back to WooCommerce purple. */
:root {
	--wc-primary: var(--pb-rust);
	--wc-primary-text: var(--pb-white);
	--wc-secondary: var(--pb-cream-light);
	--wc-secondary-text: var(--pb-forest-dark);
	--wc-highlight: var(--pb-forest);
	--wc-highlight-text: var(--pb-white);
}

.woocommerce .button,
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .single_add_to_cart_button,
.woocommerce a.add_to_cart_button,
.woocommerce button.single_add_to_cart_button.alt,
.woocommerce .button.alt,
.woocommerce a.button.alt,
.woocommerce .checkout-button,
.woocommerce a.checkout-button,
.woocommerce #place_order,
.woocommerce-cart .wc-proceed-to-checkout a.button {
	font-family: var(--pb-font-heading);
	font-weight: 600;
	font-size: 15px;
	background-color: var(--pb-rust) !important;
	color: var(--pb-white) !important;
	border-radius: 999px;
	padding: 14px 28px;
	border: 2px solid var(--pb-rust) !important;
	transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce a.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce a.add_to_cart_button:hover,
.woocommerce .button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce .checkout-button:hover,
.woocommerce a.checkout-button:hover,
.woocommerce #place_order:hover {
	background-color: var(--pb-rust-dark) !important;
	border-color: var(--pb-rust-dark) !important;
	color: var(--pb-white) !important;
	transform: translateY(-2px);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce ul.products li.product .price,
.woocommerce-Price-amount {
	color: var(--pb-rust);
	font-family: var(--pb-font-heading);
	font-weight: 700;
}

.woocommerce div.product .product_title {
	font-family: var(--pb-font-heading);
	color: var(--pb-forest-dark);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce table.shop_table {
	border-radius: var(--pb-radius-sm);
	border-color: rgba(43, 54, 32, 0.2);
}

/* WooCommerce gives each notice type (message/info/error) its own
   specific border-top-color in its own stylesheet (green for success is
   the default WooCommerce is showing here), which otherwise beats a
   same-specificity rule of ours — !important to make sure rust wins for
   all three regardless. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-top-color: var(--pb-rust) !important;
	border-radius: var(--pb-radius-sm);
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	color: var(--pb-rust) !important;
}

.woocommerce span.onsale {
	background-color: var(--pb-rust);
	font-family: var(--pb-font-heading);
}

/* ---- Cart page (/cart/) ---- */
.woocommerce-cart table.shop_table,
.woocommerce-cart .cart_totals table {
	border: none;
	border-collapse: separate;
	border-spacing: 0;
}

.woocommerce-cart table.shop_table thead th {
	font-family: var(--pb-font-heading);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pb-forest-dark);
	background-color: var(--pb-cream-light);
	border: none;
	padding: 16px var(--pb-space-sm);
}

.woocommerce-cart table.shop_table thead th:first-child {
	border-radius: var(--pb-radius-sm) 0 0 var(--pb-radius-sm);
}

.woocommerce-cart table.shop_table thead th:last-child {
	border-radius: 0 var(--pb-radius-sm) var(--pb-radius-sm) 0;
}

.woocommerce-cart table.shop_table td {
	border: none;
	border-bottom: 1px solid rgba(43, 54, 32, 0.1);
	padding: 20px var(--pb-space-sm);
	vertical-align: middle;
}

.woocommerce-cart table.shop_table td.product-thumbnail img {
	border-radius: var(--pb-radius-sm);
	width: 80px;
	height: 80px;
	object-fit: cover;
}

.woocommerce-cart table.shop_table td.product-name a {
	font-family: var(--pb-font-heading);
	font-weight: 600;
	color: var(--pb-rust);
}

.woocommerce-cart table.shop_table td.product-price,
.woocommerce-cart table.shop_table td.product-subtotal {
	font-family: var(--pb-font-heading);
	font-weight: 700;
	color: var(--pb-forest-dark);
}

.woocommerce-cart table.shop_table .quantity .qty {
	width: 64px;
	padding: 10px 12px;
	border-radius: var(--pb-radius-sm);
	border: 1px solid rgba(43, 54, 32, 0.2);
	font-family: var(--pb-font-body);
	text-align: center;
}

.woocommerce-cart table.shop_table td.product-remove a.remove {
	background-color: transparent !important;
	color: var(--pb-brown) !important;
	font-size: 20px;
	transition: color 0.2s ease;
}

.woocommerce-cart table.shop_table td.product-remove a.remove:hover {
	color: var(--pb-rust) !important;
	background-color: transparent !important;
}

.woocommerce-cart .coupon .input-text {
	border-radius: var(--pb-radius-sm);
	border: 1px solid rgba(43, 54, 32, 0.2);
	padding: 12px 16px;
	font-family: var(--pb-font-body);
	margin-right: 8px;
}

.woocommerce-cart .coupon .button {
	padding: 12px 24px !important;
}

.woocommerce-cart .cart_totals {
	background-color: var(--pb-cream-light);
	border-radius: var(--pb-radius);
	padding: var(--pb-space-md);
	box-shadow: var(--pb-shadow-sm);
}

.woocommerce-cart .cart_totals h2 {
	font-family: var(--pb-font-heading);
	color: var(--pb-forest-dark);
	font-size: 22px;
	margin-top: 0;
}

.woocommerce-cart .cart_totals table.shop_table th,
.woocommerce-cart .cart_totals table.shop_table td {
	border: none;
	border-bottom: 1px solid rgba(43, 54, 32, 0.12);
	padding: 14px 0;
	background: none;
}

.woocommerce-cart .cart_totals table.shop_table tr:last-child th,
.woocommerce-cart .cart_totals table.shop_table tr:last-child td {
	border-bottom: none;
}

.woocommerce-cart .cart_totals .order-total .amount {
	font-family: var(--pb-font-heading);
	font-weight: 700;
	color: var(--pb-rust);
	font-size: 18px;
}

.woocommerce-cart .wc-proceed-to-checkout {
	padding: var(--pb-space-sm) 0 0;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	display: block;
	width: 100%;
	text-align: center;
	background-color: var(--pb-forest) !important;
	border-color: var(--pb-forest) !important;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
	background-color: var(--pb-forest-dark) !important;
	border-color: var(--pb-forest-dark) !important;
}

/* The Cart/Checkout pages on this install render via WooCommerce's newer
   block-based Cart & Checkout (not the classic shortcode markup) — the
   "Add coupons" accordion in the screenshots is the tell. Blocks use their
   own class names (wc-block-*) instead of the classic .checkout-button /
   .wc-proceed-to-checkout ones above, so the checkout button is styled
   again here to make sure whichever version is actually rendering ends up
   on-brand. */
.wc-block-cart__submit-button,
.wp-block-woocommerce-proceed-to-checkout-block .wc-block-components-button,
.wc-block-checkout__actions .wc-block-components-button {
	font-family: var(--pb-font-heading) !important;
	font-weight: 600 !important;
	border-radius: 999px !important;
	background-color: var(--pb-forest) !important;
	border-color: var(--pb-forest) !important;
	color: var(--pb-white) !important;
}

.wc-block-cart__submit-button:hover,
.wp-block-woocommerce-proceed-to-checkout-block .wc-block-components-button:hover,
.wc-block-checkout__actions .wc-block-components-button:hover {
	background-color: var(--pb-forest-dark) !important;
	border-color: var(--pb-forest-dark) !important;
}

/* ---- Cart icon (nav) ---- */
.pb-cart-toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-left: 8px;
	background: none;
	border: none;
	padding: 0;
	color: var(--pb-forest);
	cursor: pointer;
}

.pb-cart-toggle:hover {
	color: var(--pb-rust);
}

.pb-cart-count {
	position: absolute;
	top: -2px;
	right: -2px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 999px;
	background-color: var(--pb-rust);
	color: var(--pb-white);
	font-family: var(--pb-font-heading);
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
}

/* ---- Slide-out cart drawer ---- */
.pb-cart-drawer__overlay {
	position: fixed;
	inset: 0;
	background-color: rgba(29, 37, 22, 0.5);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
	z-index: 1000;
}

.pb-cart-drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(400px, 100vw);
	background-color: var(--pb-white);
	box-shadow: var(--pb-shadow-lg);
	transform: translateX(100%);
	transition: transform 0.3s var(--pb-ease);
	z-index: 1001;
	display: flex;
	flex-direction: column;
}

body.pb-cart-drawer-open {
	overflow: hidden;
}

body.pb-cart-drawer-open .pb-cart-drawer__overlay {
	opacity: 1;
	pointer-events: auto;
}

body.pb-cart-drawer-open .pb-cart-drawer {
	transform: translateX(0);
}

.pb-cart-drawer__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--pb-space-md);
	border-bottom: 1px solid rgba(43, 54, 32, 0.12);
	flex-shrink: 0;
}

.pb-cart-drawer__header h2 {
	font-size: 18px;
	margin: 0;
	color: var(--pb-forest-dark);
}

.pb-cart-drawer__close {
	background: none;
	border: none;
	cursor: pointer;
	color: var(--pb-forest);
	padding: 4px;
	display: flex;
}

.pb-cart-drawer__close:hover {
	color: var(--pb-rust);
}

.pb-cart-drawer__content {
	padding: var(--pb-space-md);
	overflow-y: auto;
	flex: 1;
}

.pb-cart-drawer__content .widget_shopping_cart,
.pb-cart-drawer__content .widget_shopping_cart_content {
	width: 100%;
}

.pb-cart-drawer__content .cart_list li,
.pb-cart-drawer__content .woocommerce-mini-cart__empty-message {
	font-size: 14px;
	color: var(--pb-brown);
}

.pb-cart-drawer__content .woocommerce-mini-cart__total {
	font-family: var(--pb-font-heading);
	font-weight: 700;
	color: var(--pb-forest-dark);
}

.pb-cart-drawer__content .woocommerce-mini-cart__buttons .button {
	width: 100%;
	justify-content: center;
	margin-bottom: 8px;
}

/* ---- Shop page: single-product showcase (see archive-product.php) ---- */
.pb-shop-showcase__hero {
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	gap: var(--pb-space-lg);
}

@media (min-width: 900px) {
	.pb-shop-showcase__hero {
		grid-template-columns: 1fr 1fr;
		gap: var(--pb-space-2xl);
	}
}

.pb-shop-showcase__media {
	border-radius: var(--pb-radius-lg);
	overflow: hidden;
	box-shadow: var(--pb-shadow-md);
	aspect-ratio: 1 / 1;
	background-color: var(--pb-cream);
}

.pb-shop-showcase__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.pb-shop-showcase__title {
	margin: 0 0 var(--pb-space-xs);
}

.pb-shop-showcase__price {
	font-family: var(--pb-font-heading);
	font-size: 26px;
	font-weight: 700;
	color: var(--pb-rust);
	margin: 0 0 var(--pb-space-sm);
}

.pb-shop-showcase__description {
	color: var(--pb-brown);
	font-size: 17px;
	line-height: 1.7;
	margin-bottom: var(--pb-space-md);
}

.pb-shop-showcase__description p:last-child {
	margin-bottom: 0;
}

.pb-shop-showcase__cta {
	display: inline-block;
}

.pb-shop-showcase__empty {
	text-align: center;
	color: var(--pb-brown);
	padding: var(--pb-space-xl) 0;
}

/* Shop page only.
   - "Shipping & Delivery" and "How It Works" both use their blocks'
     default look, same as the homepage — no overrides needed for either.
   - "What You Can Grow" keeps its transparent/white section background
     (no colored panel) but its cards go dark instead of light. Scoped to
     .pb-shop-grow-section (wrapped around just that one render_block()
     call in archive-product.php) so it never touches the Shipping section,
     which uses this same Feature Grid block elsewhere on the page. */
.pb-shop-grow-section .pb-feature-card {
	background-color: var(--pb-forest);
}

.pb-shop-grow-section .pb-feature-card__title {
	color: var(--pb-white);
}

.pb-shop-grow-section .pb-feature-card__text {
	color: rgba(245, 230, 208, 0.85);
}

/* Shop page's closing CTA banner: full-bleed edge-to-edge and sitting flush
   against the footer (no rounded card, no side margins, no gap below),
   instead of floating as a small centered card like this same CTA Banner
   block does elsewhere (e.g. the homepage). Scoped to .pb-shop-cta so that
   default look is untouched everywhere else. */
.pb-shop-cta .pb-cta {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	max-width: none;
	border-radius: 0;
	margin-bottom: 0;
	padding: var(--pb-space-2xl) var(--pb-space-md);
}

@media (min-width: 700px) {
	.pb-shop-cta .pb-cta {
		padding: 96px var(--pb-space-md);
	}
}

.pb-related-product-card__price {
	display: block;
	font-family: var(--pb-font-heading);
	font-weight: 700;
	font-size: 16px;
	color: var(--pb-rust);
	margin-top: 2px;
}

/* ==========================================================================
   10. Site-wide Coming Soon page (coming-soon.php + inc/coming-soon.php)
   ========================================================================== */
body.pb-coming-soon {
	background-color: var(--pb-forest);
	min-height: 100vh;
}

.pb-coming-soon__wrap {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--pb-space-lg) 24px;
}

.pb-coming-soon__card {
	width: 100%;
	max-width: 560px;
	text-align: center;
}

.pb-coming-soon__wordmark {
	margin: 0 0 var(--pb-space-lg);
	line-height: 1;
}

.pb-coming-soon__word-planter {
	font-family: "Cooper Black", "Cooper Std Black", "Cooper Std", Georgia, serif;
	font-size: 26px;
	color: var(--pb-cream-light);
}

.pb-coming-soon__word-babe {
	font-family: "Bree Serif", Georgia, serif;
	font-weight: 800;
	font-size: 30px;
	color: var(--pb-rust);
	margin-left: 6px;
}

.pb-coming-soon__eyebrow {
	display: inline-block;
	font-family: var(--pb-font-heading);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pb-tan, var(--pb-sage));
	margin-bottom: var(--pb-space-sm);
}

.pb-coming-soon__headline {
	color: var(--pb-white);
	margin: 0 0 var(--pb-space-sm);
}

.pb-coming-soon__message {
	color: rgba(245, 230, 208, 0.85);
	max-width: 440px;
	margin: 0 auto var(--pb-space-lg);
	font-size: 17px;
	line-height: 1.6;
}

.pb-coming-soon__notice {
	background-color: var(--pb-cream-light);
	color: var(--pb-forest-dark, var(--pb-forest));
	border-radius: var(--pb-radius-lg);
	padding: 14px 20px;
	font-weight: 600;
	max-width: 440px;
	margin: 0 auto;
}

.pb-coming-soon__notice--error {
	color: var(--pb-rust);
}

.pb-coming-soon__hp {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
}

.pb-coming-soon__row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	max-width: 440px;
	margin: 0 auto;
}

.pb-coming-soon__input {
	flex: 1 1 220px;
	padding: 14px 18px;
	border-radius: var(--pb-radius-lg);
	border: 1px solid rgba(245, 230, 208, 0.3);
	background-color: rgba(255, 255, 255, 0.08);
	color: var(--pb-white);
	font-size: 16px;
	font-family: var(--pb-font-body);
}

.pb-coming-soon__input::placeholder {
	color: rgba(245, 230, 208, 0.55);
}

.pb-coming-soon__input:focus-visible {
	outline: 2px solid var(--pb-rust);
	outline-offset: 2px;
}

.pb-coming-soon__submit {
	flex: 0 0 auto;
	white-space: nowrap;
}

.pb-coming-soon__social {
	display: flex;
	justify-content: center;
	gap: 12px;
	list-style: none;
	margin: var(--pb-space-lg) 0 var(--pb-space-md);
	padding: 0;
}

.pb-coming-soon__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid rgba(245, 230, 208, 0.3);
	color: var(--pb-cream-light);
	transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.pb-coming-soon__social a:hover,
.pb-coming-soon__social a:focus-visible {
	background-color: var(--pb-rust);
	border-color: var(--pb-rust);
	color: var(--pb-white);
	transform: translateY(-2px);
}

.pb-coming-soon__copyright {
	font-size: 13px;
	color: rgba(245, 230, 208, 0.6);
	margin: 0;
}