/*
Theme Name:   The Hydroponist
Theme URI:    https://thehydroponist.com
Description:  Kadence child theme for The Hydroponist. Implements the brand style guide: Hydro Green / Fresh Sprout / Harvest Gold palette, Poppins + Inter typography, and the .hp-* component system.
Author:       Maple Leaf Agency
Author URI:   https://mapleleafagency.co.za
Template:     kadence
Version:      1.0.0
Text Domain:  hydroponist-child
*/

/* ==========================================================================
   1. Self-hosted fonts
   ========================================================================== */
@font-face {
	font-family: 'Poppins';
	src: url('assets/fonts/poppins-600-latin.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Poppins';
	src: url('assets/fonts/poppins-700-latin.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Inter';
	src: url('assets/fonts/inter-var-latin.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Merriweather';
	src: url('assets/fonts/merriweather-italic-latin.woff2') format('woff2');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

/* ==========================================================================
   2. Design tokens
   ========================================================================== */
:root {
	/* Primary palette */
	--hp-green: #1B5E3B;
	--hp-green-dark: #145A32;
	--hp-green-deep: #123F28;
	--hp-sprout: #4ADE80;
	--hp-gold: #F59E0B;
	--hp-gold-dark: #D98806;

	/* Neutrals */
	--hp-charcoal: #1F2937;
	--hp-slate: #4B5563;
	--hp-cloud: #F3F4F6;
	--hp-line: #E5E7EB;
	--hp-white: #FFFFFF;

	/* Functional */
	--hp-success: #22C55E;
	--hp-warning: #EAB308;
	--hp-error: #EF4444;
	--hp-info: #3B82F6;

	/* Type */
	--hp-font-head: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--hp-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--hp-font-quote: 'Merriweather', Georgia, serif;

	/* Shape */
	--hp-radius: 12px;
	--hp-radius-sm: 8px;
	--hp-shadow: 0 2px 8px rgba(0, 0, 0, .08);
	--hp-shadow-lg: 0 12px 28px rgba(17, 39, 28, .13);

	/* Rhythm */
	--hp-section-y: clamp(56px, 7vw, 92px);
	--hp-wrap: 1200px;
}

/* ==========================================================================
   3. Base typography
   ========================================================================== */
body,
.entry-content {
	font-family: var(--hp-font-body);
	font-size: 1.125rem;
	line-height: 1.6;
	color: var(--hp-charcoal);
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.hp-h {
	font-family: var(--hp-font-head);
	letter-spacing: -.018em;
	hyphens: none;
}

h1 { font-size: clamp(2.125rem, 4.4vw, 3rem);   font-weight: 700; line-height: 1.1; color: var(--hp-green); }
h2 { font-size: clamp(1.75rem, 3.2vw, 2.25rem); font-weight: 600; line-height: 1.2; color: var(--hp-charcoal); }
h3 { font-size: clamp(1.375rem, 2.4vw, 1.75rem);font-weight: 600; line-height: 1.3; color: var(--hp-charcoal); }
h4 { font-size: 1.375rem;                        font-weight: 600; line-height: 1.4; color: var(--hp-charcoal); }

/* Article prose column.
   Full-bleed blocks (.hp-section, .hp-hero) run edge to edge; every other direct
   child of the content area is centred in a readable measure with a gutter. */
.entry-content > *:not(.hp-section):not(.hp-hero):not(.alignfull):not(.alignwide) {
	max-width: 720px;
	width: calc(100% - 48px);
	margin-left: auto;
	margin-right: auto;
}
/* Full-bleed bands carry their own vertical padding, but the first prose element
   AFTER one has nothing to separate it, so it butts straight against the band.
   (Before the removal of the old wrapper divs this gap came from their padding.)
   A band that FOLLOWS prose needs no rule here: .hp-section's own padding-top
   already supplies the space. */
.entry-content > .hp-hero + *:not(.hp-section):not(.hp-hero),
.entry-content > .hp-section + *:not(.hp-section):not(.hp-hero) {
	margin-top: clamp(40px, 5vw, 64px);
}

/* Spec strip at the top of build/system pages.
   NOTE: no margin-top here on purpose. The band-to-prose rule above supplies it,
   and any margin-top set here (or inline) would block that rule. */
.hp-specstrip {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 26px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 2rem;
}
.hp-specstrip .hp-stat { text-align: left; }
.hp-specstrip .hp-stat__num { font-size: 1.3125rem; white-space: normal; }
/* Grid items stretch to the row height, so pushing the label down with auto
   keeps all four labels on one baseline even when a value wraps to two lines. */
.hp-specstrip .hp-stat__lab { margin-top: auto; padding-top: .3rem; }
@media (max-width: 620px) {
	.hp-specstrip { grid-template-columns: 1fr 1fr; gap: 20px; }
}

/* Tabular data earns a little more room than running text. Selector repeats the
   :not() chain so it matches the specificity of the column rule above. */
.entry-content > .hp-tablewrap:not(.hp-section):not(.hp-hero):not(.alignfull):not(.alignwide),
.entry-content > .hp-calc:not(.hp-section):not(.hp-hero):not(.alignfull):not(.alignwide),
.entry-content > .hp-syscmp:not(.hp-section):not(.hp-hero):not(.alignfull):not(.alignwide),
.entry-content > .hp-chart:not(.hp-section):not(.hp-hero):not(.alignfull):not(.alignwide),
.entry-content > figure.wp-block-table:not(.alignfull):not(.alignwide) { max-width: 900px; }

/* Prose links only. Component links (.hp-btn, .hp-arrow, cards, nav) opt out,
   otherwise this rule out-specifies their own colour and underline. */
.entry-content a:not([class]),
.entry-content p > a:not([class]),
.entry-content li > a:not([class]) {
	color: var(--hp-green);
	text-decoration: none;
	border-bottom: 1px solid rgba(27, 94, 59, .28);
}
.entry-content a:not([class]):hover,
.entry-content p > a:not([class]):hover,
.entry-content li > a:not([class]):hover {
	color: var(--hp-green-dark);
	border-bottom-color: var(--hp-green);
}
/* NOTE: do NOT add a `border-bottom: 0` reset for .hp-btn here. It out-specifies
   .hp-btn--ghost and strips the ghost button's bottom border, and it removes 2px
   of transparent border from solid buttons so they no longer align with ghost
   ones. The prose rule above is already scoped to a:not([class]), so component
   links never pick up the underline in the first place. */

/* Lead paragraph */
.entry-content p.lead,
.hp-lead {
	font-size: 1.25rem;
	line-height: 1.6;
	color: var(--hp-slate);
	font-weight: 400;
	max-width: 66ch;
}

/* Block quotes */
.entry-content blockquote,
.hp-quote {
	font-family: var(--hp-font-quote);
	font-style: italic;
	font-size: 1.375rem;
	line-height: 1.55;
	color: var(--hp-charcoal);
	border-left: 4px solid var(--hp-green);
	background: none;
	margin: 2rem 0;
	padding: .35rem 0 .35rem 1.5rem;
}
.entry-content blockquote cite,
.hp-quote cite {
	display: block;
	margin-top: .85rem;
	font-family: var(--hp-font-body);
	font-style: normal;
	font-size: .95rem;
	font-weight: 600;
	color: var(--hp-slate);
}

/* Lists */
.entry-content ul li,
.entry-content ol li { margin-bottom: .55em; }


/* Tables */
.entry-content table,
.hp-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 1rem;
	margin: 1.75rem 0;
	background: var(--hp-white);
	border-radius: var(--hp-radius-sm);
	overflow: hidden;
	box-shadow: var(--hp-shadow);
}
.entry-content table th,
.hp-table th {
	background: var(--hp-green);
	color: #fff;
	font-family: var(--hp-font-head);
	font-weight: 600;
	font-size: .95rem;
	text-align: left;
	padding: 13px 16px;
}
.entry-content table td,
.hp-table td {
	padding: 13px 16px;
	border-top: 1px solid var(--hp-line);
	vertical-align: top;
}
.entry-content table tbody tr:nth-child(even),
.hp-table tbody tr:nth-child(even) { background: #FAFBFC; }
.entry-content table tbody tr:last-child td strong { color: var(--hp-green); }
.hp-tablewrap { overflow-x: auto; margin: 1.75rem 0; }
.hp-tablewrap table { margin: 0; }

/* ==========================================================================
   4. Buttons
   ========================================================================== */
.hp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	font-family: var(--hp-font-head);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	border: 2px solid transparent;
	border-radius: var(--hp-radius-sm);
	padding: 14px 28px;
	cursor: pointer;
	transition: background-color .17s ease, color .17s ease, box-shadow .17s ease, transform .17s ease;
}
.hp-btn:focus-visible { outline: 3px solid var(--hp-gold); outline-offset: 2px; }

.hp-btn--primary { background: var(--hp-gold); color: #fff; }
.hp-btn--primary:hover,
.hp-btn--primary:focus { background: var(--hp-gold-dark); color: #fff; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(217, 136, 6, .32); }

.hp-btn--secondary { background: var(--hp-green); color: #fff; }
.hp-btn--secondary:hover,
.hp-btn--secondary:focus { background: var(--hp-green-dark); color: #fff; }

.hp-btn--ghost { background: transparent; border-color: var(--hp-green); color: var(--hp-green); padding: 12px 26px; }
.hp-btn--ghost:hover,
.hp-btn--ghost:focus { background: var(--hp-green); color: #fff; }

.hp-btn--ghost-light { background: transparent; border-color: rgba(255, 255, 255, .6); color: #fff; padding: 12px 26px; }
.hp-btn--ghost-light:hover,
.hp-btn--ghost-light:focus { background: #fff; border-color: #fff; color: var(--hp-green); }

.hp-btn--lg { font-size: 1.0625rem; padding: 17px 34px; }

.hp-btnrow { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* Inline text link with arrow */
.hp-arrow {
	font-family: var(--hp-font-head);
	font-weight: 600;
	color: var(--hp-green);
	text-decoration: none;
	border-bottom: 0 !important;
	display: inline-flex;
	align-items: center;
	gap: .4em;
}
.hp-arrow:after { content: "\2192"; transition: transform .17s ease; }
.hp-arrow:hover:after { transform: translateX(4px); }

/* ==========================================================================
   5. Layout helpers
   ========================================================================== */
.hp-section { padding: var(--hp-section-y) 24px; }
.hp-section--cloud { background: var(--hp-cloud); }
.hp-section--green { background: var(--hp-green); color: #fff; }
.hp-section--green h2,
.hp-section--green h3 { color: #fff; }
.hp-section--tight { padding-top: clamp(36px, 4.5vw, 56px); padding-bottom: clamp(36px, 4.5vw, 56px); }

.hp-wrap { max-width: var(--hp-wrap); margin: 0 auto; }
.hp-wrap--narrow { max-width: 820px; }

.hp-eyebrow {
	font-family: var(--hp-font-head);
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--hp-green);
	margin: 0 0 .65rem;
}
.hp-section--green .hp-eyebrow { color: var(--hp-sprout); }

.hp-center { text-align: center; }
.hp-center .hp-btnrow { justify-content: center; }
.hp-center p { margin-left: auto; margin-right: auto; }

.hp-grid { display: grid; gap: 26px; }
.hp-grid--2 { grid-template-columns: repeat(2, 1fr); }
.hp-grid--3 { grid-template-columns: repeat(3, 1fr); }
.hp-grid--4 { grid-template-columns: repeat(4, 1fr); }

.hp-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(32px, 5vw, 64px);
	align-items: center;
}

/* ==========================================================================
   6. Hero
   ========================================================================== */
.hp-hero { background: var(--hp-cloud); padding: clamp(48px, 6vw, 84px) 24px clamp(40px, 5vw, 64px); }
.hp-hero h1 { margin: 0 0 1rem; }
.hp-hero .hp-lead { margin: 0 0 1.9rem; }
.hp-hero__art {
	border-radius: var(--hp-radius);
	overflow: hidden;
	box-shadow: var(--hp-shadow-lg);
	aspect-ratio: 4 / 3;
	background: linear-gradient(148deg, #1B5E3B 0%, #2F8A57 55%, #4ADE80 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, .9);
	position: relative;
}
.hp-hero__art .hp-ph { text-align: center; padding: 24px; }
/* Photo variant: the gradient + icon block was always a placeholder. A real
   photo fills the frame, so drop the 4:3 crop to something closer to the
   source ratio and let the image supply the colour. */
.hp-hero__art--photo { aspect-ratio: 3 / 2; background: var(--hp-cloud); }
.hp-hero__art--photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.hp-hero__art svg { width: 76px; height: 76px; opacity: .95; }
.hp-hero__art p {
	font-family: var(--hp-font-head);
	font-weight: 600;
	font-size: .9rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	margin: 14px 0 0;
	opacity: .85;
}

/* Trust bar */
.hp-trustbar {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 30px;
	margin-top: 1.9rem;
	padding-top: 1.4rem;
	border-top: 1px solid rgba(31, 41, 55, .12);
	font-size: .975rem;
	font-weight: 500;
	color: var(--hp-slate);
}
.hp-trustbar span { display: inline-flex; align-items: center; gap: .5em; }
.hp-trustbar svg { width: 1.05em; height: 1.05em; color: var(--hp-green); flex: none; }

/* ==========================================================================
   7. Stats
   ========================================================================== */
.hp-stat { text-align: center; display: flex; flex-direction: column; }
.hp-stat__num {
	font-family: var(--hp-font-head);
	font-weight: 700;
	font-size: clamp(1.75rem, 3.2vw, 2.5rem);
	line-height: 1.05;
	color: var(--hp-green);
	display: block;
	white-space: nowrap;
}
.hp-stat__lab {
	display: block;
	margin-top: .6rem;
	font-size: .975rem;
	color: var(--hp-slate);
	line-height: 1.4;
}
.hp-section--green .hp-stat__num { color: var(--hp-sprout); }
.hp-section--green .hp-stat__lab { color: rgba(255, 255, 255, .85); }

/* ==========================================================================
   8. Cards
   ========================================================================== */
.hp-card {
	background: var(--hp-white);
	border-radius: var(--hp-radius);
	box-shadow: var(--hp-shadow);
	padding: 26px;
	display: flex;
	flex-direction: column;
	transition: box-shadow .2s ease, transform .2s ease;
}
.hp-card:hover { box-shadow: var(--hp-shadow-lg); transform: translateY(-3px); }
/* The card is a flex column, so inline-ish children would stretch full width. */
.hp-card > .hp-badge { align-self: flex-start; }
.hp-card h3 { margin: 0 0 .6rem; font-size: 1.3125rem; }
.hp-card p { margin: 0 0 1.1rem; color: var(--hp-slate); font-size: 1rem; }
.hp-card .hp-arrow { margin-top: auto; }

.hp-card__ico {
	width: 52px;
	height: 52px;
	border-radius: var(--hp-radius-sm);
	background: rgba(27, 94, 59, .09);
	color: var(--hp-green);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.05rem;
}
.hp-card__ico svg { width: 26px; height: 26px; }

/* Card with a coloured top strip (used for plan cards) */
.hp-card--plan { border: 2px solid var(--hp-cloud); box-shadow: none; }
.hp-card--plan:hover { border-color: rgba(27, 94, 59, .3); transform: none; box-shadow: var(--hp-shadow); }
.hp-card--featured { border-color: var(--hp-gold); }

.hp-card__price {
	font-family: var(--hp-font-head);
	font-weight: 700;
	font-size: 1.75rem;
	color: var(--hp-green);
	margin: 0 0 .5rem;
}

/* Article / post card */
.hp-postcard { background: #fff; border-radius: var(--hp-radius); box-shadow: var(--hp-shadow); overflow: hidden; display: flex; flex-direction: column; }
.hp-postcard__thumb {
	aspect-ratio: 16 / 10;
	background: linear-gradient(140deg, #1B5E3B, #358A5C);
	display: flex; align-items: center; justify-content: center;
}
.hp-postcard__thumb svg { width: 46px; height: 46px; color: rgba(255, 255, 255, .75); }
.hp-postcard__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hp-postcard__thumb:has(img) { background: var(--hp-cloud); }
.hp-postcard__body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.hp-postcard h3 { font-size: 1.1875rem; margin: .5rem 0 .55rem; }
.hp-postcard p { font-size: .975rem; color: var(--hp-slate); margin: 0 0 1.1rem; }

.hp-cat {
	display: inline-block;
	font-family: var(--hp-font-head);
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .085em;
	text-transform: uppercase;
	color: var(--hp-green);
	background: rgba(27, 94, 59, .1);
	padding: 5px 10px;
	border-radius: 4px;
	align-self: flex-start;
}

/* Badges */
.hp-badge {
	display: inline-block;
	font-family: var(--hp-font-head);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	padding: 6px 13px;
	border-radius: 999px;
	background: var(--hp-gold);
	color: #fff;
}
.hp-badge--green { background: var(--hp-green); }
.hp-badge--sprout { background: var(--hp-sprout); color: var(--hp-green-deep); }

/* ==========================================================================
   9. Callouts
   ========================================================================== */
.hp-callout {
	border-left: 4px solid var(--hp-info);
	background: rgba(59, 130, 246, .09);
	border-radius: 0 var(--hp-radius-sm) var(--hp-radius-sm) 0;
	padding: 20px 22px;
	margin: 1.9rem 0;
}
.hp-callout__head {
	display: flex;
	align-items: center;
	gap: .55em;
	font-family: var(--hp-font-head);
	font-weight: 600;
	font-size: 1rem;
	color: var(--hp-charcoal);
	margin: 0 0 .5rem;
}
.hp-callout__head svg { width: 1.15em; height: 1.15em; flex: none; color: var(--hp-info); }
.hp-callout p:last-child { margin-bottom: 0; }
.hp-callout p { font-size: 1.0625rem; }

.hp-callout--warning { border-left-color: var(--hp-warning); background: rgba(234, 179, 8, .11); }
.hp-callout--warning .hp-callout__head svg { color: #A16207; }
.hp-callout--success { border-left-color: var(--hp-success); background: rgba(34, 197, 94, .1); }
.hp-callout--success .hp-callout__head svg { color: #15803D; }
.hp-callout--error { border-left-color: var(--hp-error); background: rgba(239, 68, 68, .09); }
.hp-callout--error .hp-callout__head svg { color: #B91C1C; }
.hp-callout--tool { border-left-color: var(--hp-green); background: rgba(27, 94, 59, .07); }
.hp-callout--tool .hp-callout__head svg { color: var(--hp-green); }

/* ==========================================================================
   10. Steps, checklists, FAQ
   ========================================================================== */
.hp-steps { counter-reset: hpstep; list-style: none; margin: 1.75rem 0; padding: 0; max-width: 68ch; }
.hp-steps > li {
	counter-increment: hpstep;
	position: relative;
	padding-left: 58px;
	margin-bottom: 1.6rem;
}
.hp-steps > li:before {
	content: counter(hpstep);
	position: absolute;
	left: 0;
	top: -2px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--hp-green);
	color: #fff;
	font-family: var(--hp-font-head);
	font-weight: 700;
	font-size: 1.0625rem;
	display: flex;
	align-items: center;
	justify-content: center;
}
.hp-steps h3, .hp-steps h4 { margin: 0 0 .5rem; }

.hp-check { list-style: none; padding: 0; margin: 1.4rem 0; }
.hp-check li {
	position: relative;
	padding-left: 30px;
	margin-bottom: .65rem;
}
.hp-check li:before {
	content: "";
	position: absolute;
	left: 0;
	top: .42em;
	width: 17px;
	height: 17px;
	border-radius: 50%;
	background: var(--hp-success);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
	background-size: 12px 12px;
	background-position: center;
	background-repeat: no-repeat;
}
.hp-section--green .hp-check li { color: rgba(255, 255, 255, .93); }

.hp-faq { max-width: 820px; margin: 0 auto; }
.hp-faq details {
	background: #fff;
	border: 1px solid var(--hp-line);
	border-radius: var(--hp-radius-sm);
	margin-bottom: 12px;
	overflow: hidden;
}
.hp-faq details[open] { border-color: rgba(27, 94, 59, .35); }
.hp-faq summary {
	cursor: pointer;
	list-style: none;
	padding: 18px 52px 18px 20px;
	font-family: var(--hp-font-head);
	font-weight: 600;
	font-size: 1.0625rem;
	color: var(--hp-charcoal);
	position: relative;
}
.hp-faq summary::-webkit-details-marker { display: none; }
.hp-faq summary:after {
	content: "";
	position: absolute;
	right: 21px;
	top: 50%;
	width: 9px;
	height: 9px;
	border-right: 2.5px solid var(--hp-green);
	border-bottom: 2.5px solid var(--hp-green);
	transform: translateY(-70%) rotate(45deg);
	transition: transform .2s ease;
}
.hp-faq details[open] summary:after { transform: translateY(-30%) rotate(-135deg); }
.hp-faq details > div { padding: 0 20px 18px; }
.hp-faq details p { margin: 0; color: var(--hp-slate); font-size: 1.0625rem; }

/* ==========================================================================
   11. Table of contents
   ========================================================================== */
.hp-toc {
	background: var(--hp-cloud);
	border-radius: var(--hp-radius);
	padding: 24px 26px;
	margin: 2rem 0;
}
.hp-toc h2, .hp-toc p.hp-toc__t {
	font-family: var(--hp-font-head);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--hp-green);
	margin: 0 0 .9rem;
}
.hp-toc ol, .hp-toc ul { margin: 0; padding-left: 1.15rem; }
.hp-toc li { margin-bottom: .45rem; font-size: 1.0625rem; }
.hp-toc a { color: var(--hp-charcoal); border-bottom: 1px solid rgba(31, 41, 55, .2); text-decoration: none; }
.hp-toc a:hover { color: var(--hp-green); border-bottom-color: var(--hp-green); }

/* ==========================================================================
   12. Testimonials
   ========================================================================== */
.hp-quotecard {
	background: #fff;
	border-radius: var(--hp-radius);
	box-shadow: var(--hp-shadow);
	padding: 28px;
	display: flex;
	flex-direction: column;
}
.hp-quotecard p {
	font-family: var(--hp-font-quote);
	font-style: italic;
	font-size: 1.0625rem;
	line-height: 1.62;
	color: var(--hp-charcoal);
	margin: 0 0 1.2rem;
}
.hp-quotecard footer { margin-top: auto; font-size: .95rem; color: var(--hp-slate); }
.hp-quotecard strong { display: block; font-family: var(--hp-font-head); font-weight: 600; color: var(--hp-charcoal); }

/* ==========================================================================
   13. Newsletter block
   ========================================================================== */
.hp-signup { max-width: 620px; margin: 0 auto; }
.hp-signup .hp-form { display: flex; gap: 10px; margin: 1.6rem 0 .9rem; }
.hp-signup input[type=email] {
	flex: 1;
	min-width: 0;
	border: 2px solid transparent;
	border-radius: var(--hp-radius-sm);
	padding: 14px 16px;
	font-family: var(--hp-font-body);
	font-size: 1rem;
	background: #fff;
	color: var(--hp-charcoal);
}
.hp-signup input[type=email]:focus { outline: none; border-color: var(--hp-gold); }
.hp-signup .hp-fineprint { font-size: .875rem; color: rgba(255, 255, 255, .75); margin: 0; }
.hp-section--green .hp-signup p { color: rgba(255, 255, 255, .9); }

/* Fluent Forms inside a green band: single email field, laid out inline. */
.hp-section--green .fluentform { max-width: 520px; margin: 1.7rem auto 1rem; }
.hp-section--green .fluentform .ff-el-input--label { display: none; }
.hp-section--green .fluentform .ff-el-group { margin-bottom: 0; }
.hp-section--green .fluentform .ff-el-form-control {
	border-radius: var(--hp-radius-sm);
	border: 2px solid transparent;
	padding: 14px 16px;
	font-size: 1rem;
	height: auto;
	line-height: 1.3;
}
.hp-section--green .fluentform .ff-el-form-control:focus { border-color: var(--hp-gold); box-shadow: none; }
.hp-section--green .fluentform .ff-el-is-error .text-danger { color: #FEF3C7; text-align: left; }

@media (min-width: 620px) {
	/* Fluent Forms wraps the groups in a fieldset, so that is what has to flex. */
	.hp-section--green .fluentform form.frm-fluent-form > fieldset {
		display: flex;
		gap: 10px;
		align-items: flex-start;
	}
	.hp-section--green .fluentform legend { flex: none; width: 0; }
	.hp-section--green .fluentform .ff-el-group:not(.ff_submit_btn_wrapper) { flex: 1; min-width: 0; }
	.hp-section--green .fluentform .ff_submit_btn_wrapper { flex: none; margin: 0; }
	.hp-section--green .fluentform .ff-btn-submit { white-space: nowrap; }
}

/* Contact form on a light background keeps its labels. */
#hp-contact-form .fluentform { margin-top: 1.4rem; }
#hp-contact-form .ff-el-input--label label { font-family: var(--hp-font-head); font-weight: 600; font-size: .95rem; }
#hp-contact-form .ff-el-form-control {
	border-radius: var(--hp-radius-sm);
	border: 1px solid var(--hp-line);
	padding: 13px 15px;
	font-size: 1rem;
	font-family: var(--hp-font-body);
}
#hp-contact-form .ff-el-form-control:focus { border-color: var(--hp-green); box-shadow: none; }
.fluentform .ff-btn-submit {
	background: var(--hp-gold) !important;
	border-color: var(--hp-gold) !important;
	font-family: var(--hp-font-head);
	font-weight: 600;
	border-radius: var(--hp-radius-sm) !important;
	padding: 14px 28px !important;
}
.fluentform .ff-btn-submit:hover { background: var(--hp-gold-dark) !important; border-color: var(--hp-gold-dark) !important; }

/* ==========================================================================
   14. Affiliate disclosure
   ========================================================================== */
.hp-disclosure {
	background: var(--hp-cloud);
	border-radius: var(--hp-radius-sm);
	padding: 14px 18px;
	font-size: .9375rem;
	color: var(--hp-slate);
	margin: 0 0 1.9rem;
	line-height: 1.55;
}
.hp-disclosure strong { color: var(--hp-charcoal); }

/* ==========================================================================
   15. Header tweaks
   ========================================================================== */
.site-branding img,
.site-header-item .custom-logo-link img { max-height: 46px; width: auto; }

/* Eight top-level items plus a CTA is a tight fit at 1280px, so the desktop
   nav runs slightly smaller and tighter than Kadence's default. */
@media (min-width: 1025px) {
	.header-navigation .header-menu-container > ul > li > a {
		padding-left: 11px;
		padding-right: 11px;
		font-size: .9375rem;
		white-space: nowrap;
	}
	.header-navigation .header-menu-container > ul > li.hp-navcta > a {
		margin-left: 9px;
	}
}

.hp-navcta > a,
.header-navigation .hp-navcta > a {
	background: var(--hp-gold);
	color: #fff !important;
	border-radius: var(--hp-radius-sm);
	padding: 10px 17px !important;
	font-weight: 600;
	line-height: 1.2;
}
.hp-navcta > a:hover,
.header-navigation .hp-navcta > a:hover { background: var(--hp-gold-dark); }
.hp-navcta > a .nav-drop-title-wrap { color: #fff; }

/* ==========================================================================
   16. Branded footer
   ========================================================================== */
.hp-footer { background: var(--hp-green-deep); color: rgba(255, 255, 255, .78); font-size: 1rem; }
.hp-footer a { color: rgba(255, 255, 255, .78); text-decoration: none; }
.hp-footer a:hover { color: #fff; }
.hp-footer__inner {
	max-width: var(--hp-wrap);
	margin: 0 auto;
	padding: clamp(48px, 5.5vw, 68px) 24px clamp(30px, 3.5vw, 42px);
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
	gap: 40px;
}
.hp-footer__logo img { height: 42px; width: auto; display: block; margin-bottom: 16px; }
.hp-footer__brand p { font-size: .975rem; line-height: 1.6; margin: 0 0 18px; max-width: 34ch; }
.hp-footer h3 {
	font-family: var(--hp-font-head);
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--hp-sprout);
	margin: 0 0 16px;
}
.hp-footer ul { list-style: none; margin: 0; padding: 0; }
.hp-footer li { margin-bottom: 10px; font-size: .975rem; }
.hp-footer__social { display: flex; gap: 12px; margin-top: 4px; }
.hp-footer__social a {
	width: 36px;
	height: 36px;
	border-radius: 8px;
	background: rgba(255, 255, 255, .1);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color .17s ease;
}
.hp-footer__social a:hover { background: rgba(255, 255, 255, .22); }
.hp-footer__social svg { width: 17px; height: 17px; }
.hp-footer__bar {
	border-top: 1px solid rgba(255, 255, 255, .14);
	padding: 20px 24px 26px;
}
.hp-footer__bar-inner {
	max-width: var(--hp-wrap);
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	justify-content: space-between;
	align-items: center;
	font-size: .875rem;
	color: rgba(255, 255, 255, .6);
}
.hp-footer__bar-inner nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.hp-footer__note {
	max-width: var(--hp-wrap);
	margin: 0 auto;
	padding: 0 24px 26px;
	font-size: .8125rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, .5);
}

/* Hide Kadence's own footer rows, we render our own */
.site-footer-row-container { display: none !important; }

/* ==========================================================================
   17. Icon base
   ========================================================================== */
.hp-ico { width: 1em; height: 1em; flex: none; vertical-align: -.125em; }

/* ==========================================================================
   18. Responsive
   ========================================================================== */
@media (max-width: 1024px) {
	.hp-grid--4 { grid-template-columns: repeat(2, 1fr); }
	.hp-footer__inner { grid-template-columns: 1fr 1fr; gap: 34px; }
}

@media (max-width: 860px) {
	.hp-grid--3 { grid-template-columns: 1fr; }
	.hp-split { grid-template-columns: 1fr; }
	.hp-split--flip > *:first-child { order: 2; }
	.hp-hero__art { aspect-ratio: 16 / 10; }
}

@media (max-width: 620px) {
	body, .entry-content { font-size: 1.0625rem; }
	.hp-grid--2 { grid-template-columns: 1fr; }
	.hp-grid--4 { grid-template-columns: 1fr 1fr; gap: 22px; }
	.hp-footer__inner { grid-template-columns: 1fr; }
	.hp-signup .hp-form { flex-direction: column; }
	.hp-btn { width: 100%; }
	.hp-btnrow { flex-direction: column; align-items: stretch; }
	.hp-steps > li { padding-left: 48px; }
	.hp-steps > li:before { width: 34px; height: 34px; font-size: .95rem; }
}

/* ==========================================================================
   19. WooCommerce
   ========================================================================== */

/* Shop page intro, rendered above the product grid. */
.hp-shopintro {
	max-width: var(--hp-wrap);
	margin: 0 auto;
	padding: clamp(40px, 5vw, 68px) 24px clamp(20px, 2.5vw, 32px);
	text-align: center;
}
.hp-shopintro h1 { margin: 0 0 1rem; }
.hp-shopintro .hp-lead { margin: 0 auto; }
.hp-shopnote {
	display: inline-flex;
	align-items: center;
	gap: .6em;
	margin: 1.8rem auto 0;
	padding: 13px 20px;
	background: rgba(59, 130, 246, .09);
	border-left: 4px solid var(--hp-info);
	border-radius: 0 var(--hp-radius-sm) var(--hp-radius-sm) 0;
	font-size: 1rem;
	text-align: left;
}
.hp-shopnote svg { width: 1.15em; height: 1.15em; color: var(--hp-info); flex: none; }

.woocommerce .page-description { padding: 0; }

/* Catalogue layout */
.woocommerce ul.products,
.woocommerce-page ul.products {
	max-width: var(--hp-wrap);
	margin: 0 auto clamp(48px, 6vw, 80px);
	padding: 0 24px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	list-style: none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { display: none; }
.woocommerce ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	background: #fff;
	border-radius: var(--hp-radius);
	box-shadow: var(--hp-shadow);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow .2s ease, transform .2s ease;
}
.woocommerce ul.products li.product:hover { box-shadow: var(--hp-shadow-lg); transform: translateY(-3px); }
.woocommerce ul.products li.product a img { margin: 0; border-radius: 0; }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--hp-font-head);
	font-size: 1.1875rem !important;
	font-weight: 600;
	color: var(--hp-charcoal);
	padding: 20px 22px 0;
	margin: 0 0 .5rem;
}
.woocommerce ul.products li.product .price {
	font-family: var(--hp-font-head);
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--hp-green);
	padding: 0 22px;
	margin: 0 0 1rem;
}
.woocommerce ul.products li.product .price del { color: var(--hp-slate); font-weight: 400; font-size: .85em; }
.woocommerce ul.products li.product .button { margin: auto 22px 22px; }

/* Sale flash */
.woocommerce span.onsale {
	background: var(--hp-gold);
	color: #fff;
	font-family: var(--hp-font-head);
	font-weight: 700;
	font-size: .75rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	border-radius: 999px;
	padding: 6px 14px;
	min-height: 0;
	min-width: 0;
	line-height: 1.2;
	top: 14px;
	left: 14px;
	margin: 0;
}

/* Buttons: reuse the brand button, do not let Woo's defaults win. */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
	background: var(--hp-gold);
	color: #fff;
	font-family: var(--hp-font-head);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1;
	border: 2px solid transparent;
	border-radius: var(--hp-radius-sm);
	padding: 14px 26px;
	transition: background-color .17s ease, transform .17s ease, box-shadow .17s ease;
}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	background: var(--hp-gold-dark);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(217, 136, 6, .3);
}
.woocommerce a.button.added_to_cart {
	display: inline-block;
	margin: 0 22px 22px;
	color: var(--hp-green);
	font-family: var(--hp-font-head);
	font-weight: 600;
}
/* Secondary actions read as the green button. */
.woocommerce .cart .button[name="update_cart"],
.woocommerce a.button.wc-backward {
	background: var(--hp-green);
}
.woocommerce .cart .button[name="update_cart"]:hover,
.woocommerce a.button.wc-backward:hover { background: var(--hp-green-dark); box-shadow: none; }

/* Single product */
.woocommerce div.product {
	max-width: var(--hp-wrap);
	margin: 0 auto;
	padding: clamp(36px, 4.5vw, 60px) 24px clamp(48px, 6vw, 80px);
}
.woocommerce div.product .product_title { margin: 0 0 .75rem; }
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-family: var(--hp-font-head);
	font-weight: 700;
	font-size: 1.875rem;
	color: var(--hp-green);
	margin-bottom: 1.2rem;
}
.woocommerce div.product .woocommerce-product-details__short-description {
	font-size: 1.125rem;
	color: var(--hp-slate);
	line-height: 1.6;
	margin-bottom: 1.6rem;
}
.woocommerce div.product form.cart { margin-bottom: 2rem; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: var(--hp-cloud);
	border: 0;
	border-radius: var(--hp-radius-sm) var(--hp-radius-sm) 0 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	font-family: var(--hp-font-head);
	font-weight: 600;
	color: var(--hp-slate);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: #fff; box-shadow: var(--hp-shadow); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--hp-green); }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border-bottom-color: var(--hp-line); }
.woocommerce div.product .woocommerce-tabs .panel h2 { font-size: 1.5rem; }
.woocommerce .quantity .qty {
	border: 1px solid var(--hp-line);
	border-radius: var(--hp-radius-sm);
	padding: 12px 8px;
	font-family: var(--hp-font-body);
}
.woocommerce div.product .product_meta { font-size: .95rem; color: var(--hp-slate); }

/* Cart, checkout, account */
.woocommerce-cart .entry-content,
.woocommerce-checkout .entry-content,
.woocommerce-account .entry-content {
	max-width: var(--hp-wrap);
	margin: 0 auto;
	padding: clamp(36px, 4.5vw, 60px) 24px clamp(48px, 6vw, 80px);
}
.woocommerce table.shop_table {
	border: 1px solid var(--hp-line);
	border-radius: var(--hp-radius);
	border-collapse: separate;
	box-shadow: none;
}
.woocommerce table.shop_table th {
	background: var(--hp-cloud);
	color: var(--hp-charcoal);
	font-family: var(--hp-font-head);
	font-weight: 600;
}
.woocommerce-checkout #payment { background: var(--hp-cloud); border-radius: var(--hp-radius); }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text {
	border: 1px solid var(--hp-line);
	border-radius: var(--hp-radius-sm);
	padding: 12px 14px;
	font-family: var(--hp-font-body);
	font-size: 1rem;
	line-height: 1.4;
}
.woocommerce form .form-row label { font-family: var(--hp-font-head); font-weight: 600; font-size: .95rem; }

/* Notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	max-width: var(--hp-wrap);
	margin: 0 auto 1.6rem;
	border-top: 0;
	border-left: 4px solid var(--hp-green);
	border-radius: 0 var(--hp-radius-sm) var(--hp-radius-sm) 0;
	background: rgba(34, 197, 94, .1);
	font-size: 1.0625rem;
}
.woocommerce-info { border-left-color: var(--hp-info); background: rgba(59, 130, 246, .09); }
.woocommerce-error { border-left-color: var(--hp-error); background: rgba(239, 68, 68, .09); }
.woocommerce-message::before { color: var(--hp-green); }
.woocommerce-info::before { color: var(--hp-info); }
.woocommerce-error::before { color: var(--hp-error); }

/* Breadcrumb + result count */
.woocommerce .woocommerce-breadcrumb,
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
	max-width: var(--hp-wrap);
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
	color: var(--hp-slate);
	font-size: .95rem;
}
.woocommerce .woocommerce-ordering select {
	border: 1px solid var(--hp-line);
	border-radius: var(--hp-radius-sm);
	padding: 9px 12px;
	font-family: var(--hp-font-body);
}

@media (max-width: 1024px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products { grid-template-columns: 1fr; }
	.woocommerce #respond input#submit,
	.woocommerce a.button,
	.woocommerce button.button,
	.woocommerce input.button { width: 100%; text-align: center; }
	.woocommerce a.button.added_to_cart { text-align: center; }
}

/* Archive add-to-cart. Layout (always visible, bottom aligned) comes from the
   Kadence customizer settings product_archive_style=action-visible and
   product_archive_button_align, so only the appearance is set here. */
.woocommerce ul.products li.product .product-details,
.woocommerce-page ul.products li.product .product-details {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding-bottom: 0;
}
.woocommerce ul.products li.product .product-action-wrap,
.woocommerce-page ul.products li.product .product-action-wrap {
	padding: 4px 22px 22px;
	margin-top: auto;
}
.woocommerce ul.products li.product .product-action-wrap .button,
.woocommerce-page ul.products li.product .product-action-wrap .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	width: 100%;
	background: var(--hp-gold);
	color: #fff;
	font-family: var(--hp-font-head);
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1;
	padding: 13px 20px;
	border: 2px solid transparent;
	border-radius: var(--hp-radius-sm);
	margin: 0;
}
.woocommerce ul.products li.product .product-action-wrap .button:hover,
.woocommerce-page ul.products li.product .product-action-wrap .button:hover {
	background: var(--hp-gold-dark);
	color: #fff;
}
.woocommerce ul.products li.product .product-action-wrap .added_to_cart {
	display: block;
	width: 100%;
	text-align: center;
	margin: 10px 0 0;
	font-family: var(--hp-font-head);
	font-weight: 600;
	font-size: .9375rem;
	color: var(--hp-green);
}

/* Kadence colours the whole meta SPAN with palette6 (our Harvest Gold) at 70%
   size and bold, and the anchor just inherits it. Styling only the anchor is not
   enough: the "Category:" label stays gold. Restyle the span. */
.woocommerce div.product .product_meta > span {
	color: var(--hp-slate);
	font-size: .9375rem;
	font-weight: 400;
	margin-bottom: .35rem;
}
.woocommerce div.product .product_meta > span a { color: var(--hp-green); text-decoration: underline; }
.woocommerce div.product .product_meta > span a:hover { color: var(--hp-green-dark); }
/* Woo pads the tab panel on both sides. Zeroing only the left made the
   description column sit 17px off centre at narrow widths, because this panel
   also carries the .entry-content class and so gets the prose-column rule. */
.woocommerce div.product .woocommerce-tabs .panel { padding-left: 0; padding-right: 0; }

/* On single posts Kadence's "narrow" layout already provides the measure, and
   the title/byline header sits in that container. Let the prose match it exactly
   instead of applying our own 720px cap, otherwise body copy is indented
   relative to the heading above it. */
.single-post .entry-content > *:not(.hp-section):not(.hp-hero):not(.alignfull):not(.alignwide),
.single-post .entry-content > .hp-tablewrap:not(.hp-section):not(.hp-hero):not(.alignfull):not(.alignwide) {
	max-width: none;
	width: auto;
}

/* ==========================================================================
   20. Blog and category archives
   ========================================================================== */

/* Archive header, styled like a page hero so the blog does not start abruptly.
   NOTE: the wrapper Kadence uses here is .post-archive-hero-section, not
   .entry-hero-container, and it is transparent by default. */
/* The element Kadence actually paints is .entry-hero-container-inner, using
   --global-palette7 (our Line grey), which is a shade darker than the Cloud
   every other hero on the site uses. */
.post-archive-hero-section,
.search .entry-hero-container,
.post-archive-hero-section .entry-hero-container-inner,
.search .entry-hero-container-inner {
	background: var(--hp-cloud);
	border-bottom: 0;
}
.post-archive-hero-section .entry-header,
.search .entry-hero-container .entry-header {
	padding: clamp(48px, 6vw, 78px) 24px clamp(40px, 5vw, 60px);
	max-width: 820px;
	margin: 0 auto;
	text-align: center;
}
.post-archive-hero-section h1,
.search .entry-hero-container h1 { margin: 0; }
.blog .archive-description,
.archive .archive-description {
	font-size: 1.25rem;
	line-height: 1.6;
	color: var(--hp-slate);
	margin-top: 1rem;
}

/* Post loop as cards, matching .hp-postcard on the home page. */
.post-archive.grid-cols {
	max-width: var(--hp-wrap);
	margin: 0 auto;
	padding: clamp(44px, 5vw, 70px) 24px clamp(56px, 6vw, 84px);
	gap: 28px;
}
.post-archive .loop-entry.content-bg {
	background: #fff;
	border-radius: var(--hp-radius);
	box-shadow: var(--hp-shadow);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow .2s ease, transform .2s ease;
}
.post-archive .loop-entry.content-bg:hover { box-shadow: var(--hp-shadow-lg); transform: translateY(-3px); }
.post-archive .loop-entry .entry-content-wrap { padding: 24px; display: flex; flex-direction: column; flex: 1; }

/* The loop inherited the full h2 scale, which dominated each card. */
.post-archive .loop-entry .entry-title { font-size: 1.1875rem; line-height: 1.35; margin: 0 0 .6rem; }
.post-archive .loop-entry .entry-title a { color: var(--hp-charcoal); text-decoration: none; }
.post-archive .loop-entry .entry-title a:hover { color: var(--hp-green); }

.post-archive .loop-entry .entry-taxonomies,
.post-archive .loop-entry .entry-taxonomies a {
	font-family: var(--hp-font-head);
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .085em;
	text-transform: uppercase;
	color: var(--hp-green);
	text-decoration: none;
}
.post-archive .loop-entry .entry-meta { font-size: .85rem; color: var(--hp-slate); margin-bottom: .5rem; }
.post-archive .loop-entry .entry-summary { font-size: .975rem; color: var(--hp-slate); margin-bottom: 1.1rem; }
.post-archive .loop-entry .entry-summary p:last-child { margin-bottom: 0; }
/* The flex child is footer.entry-footer, not .entry-actions inside it, so the
   auto margin has to go on the footer or the read-more never bottom-aligns. */
.post-archive .loop-entry .entry-footer { margin-top: auto; padding-top: 1rem; }
.post-archive .loop-entry .entry-actions,
.post-archive .loop-entry .more-link-wrap { margin: 0; }
.post-archive .loop-entry .post-more-link a,
.post-archive .loop-entry .more-link-wrap a {
	font-family: var(--hp-font-head);
	font-weight: 600;
	font-size: .9375rem;
	color: var(--hp-green);
	text-decoration: none;
}

/* Placeholder thumb so cards without a featured image still have a top band. */
.post-archive .loop-entry .post-thumbnail { margin: 0; }
.post-archive .loop-entry:not(.has-post-thumbnail) .entry-content-wrap::before {
	content: "";
	display: block;
	height: 6px;
	background: linear-gradient(90deg, var(--hp-green), var(--hp-sprout));
	border-radius: 3px;
	margin: 0 0 16px;
	width: 46px;
}

@media (max-width: 1024px) { .post-archive.grid-cols { gap: 22px; } }

/* ==========================================================================
   21. Grow light running cost calculator
   ========================================================================== */
.hp-calc {
	background: var(--hp-cloud);
	border-radius: var(--hp-radius);
	padding: clamp(22px, 3vw, 34px);
	margin: 2.2rem 0;
}
.hp-calc__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 20px; }
.hp-calc__field label {
	display: block;
	font-family: var(--hp-font-head);
	font-weight: 600;
	font-size: .9375rem;
	color: var(--hp-charcoal);
	margin-bottom: .45rem;
}
.hp-calc__field label span {
	display: block;
	font-family: var(--hp-font-body);
	font-weight: 400;
	font-size: .8125rem;
	color: var(--hp-slate);
	margin-top: 2px;
}
.hp-calc__input { display: flex; align-items: stretch; background: #fff; border: 1px solid var(--hp-line); border-radius: var(--hp-radius-sm); overflow: hidden; }
.hp-calc__input:focus-within { border-color: var(--hp-green); box-shadow: 0 0 0 3px rgba(27, 94, 59, .12); }
.hp-calc__input input,
.hp-calc__input select {
	flex: 1;
	min-width: 0;
	border: 0;
	background: transparent;
	padding: 12px 14px;
	font-family: var(--hp-font-body);
	font-size: 1rem;
	color: var(--hp-charcoal);
	-webkit-appearance: none;
	appearance: none;
}
.hp-calc__input select { appearance: auto; cursor: pointer; }
.hp-calc__input input:focus, .hp-calc__input select:focus { outline: none; }
.hp-calc__unit {
	display: flex;
	align-items: center;
	padding: 0 14px;
	background: #FAFBFC;
	border-left: 1px solid var(--hp-line);
	font-size: .9375rem;
	color: var(--hp-slate);
	white-space: nowrap;
}

/* Extra equipment */
.hp-calc__extra { margin-top: 22px; border-top: 1px solid var(--hp-line); padding-top: 16px; }
.hp-calc__extra summary {
	cursor: pointer;
	font-family: var(--hp-font-head);
	font-weight: 600;
	font-size: .9375rem;
	color: var(--hp-green);
	list-style: none;
}
.hp-calc__extra summary::-webkit-details-marker { display: none; }
.hp-calc__extra summary:before { content: "+ "; }
.hp-calc__extra[open] summary:before { content: "\2212 "; }
.hp-calc__note { font-size: .9375rem; color: var(--hp-slate); margin: .9rem 0 1rem; max-width: 62ch; }
.hp-calc__row { display: grid; grid-template-columns: 1fr 116px 116px 38px; gap: 10px; margin-bottom: 10px; }
.hp-calc__row input {
	width: 100%;
	border: 1px solid var(--hp-line);
	border-radius: var(--hp-radius-sm);
	padding: 10px 12px;
	font-family: var(--hp-font-body);
	font-size: .9375rem;
	background: #fff;
	min-width: 0;
}
.hp-calc__rowin { position: relative; display: flex; }
.hp-calc__rowin em { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: .8125rem; color: var(--hp-slate); pointer-events: none; }
.hp-calc__rowin input { padding-right: 34px; }
.hpc-r-del { border: 1px solid var(--hp-line); background: #fff; border-radius: var(--hp-radius-sm); color: var(--hp-slate); font-size: 1.25rem; line-height: 1; cursor: pointer; }
.hpc-r-del:hover { background: rgba(239, 68, 68, .08); color: var(--hp-error); border-color: rgba(239, 68, 68, .4); }
.hp-calc__add {
	background: transparent;
	border: 1px dashed var(--hp-green);
	color: var(--hp-green);
	border-radius: var(--hp-radius-sm);
	padding: 9px 16px;
	font-family: var(--hp-font-head);
	font-weight: 600;
	font-size: .875rem;
	cursor: pointer;
}
.hp-calc__add:hover { background: rgba(27, 94, 59, .07); }

/* Results */
.hp-calc__results { background: var(--hp-green); color: #fff; border-radius: var(--hp-radius); padding: clamp(20px, 2.6vw, 28px); margin-top: 24px; }
.hp-calc__label { font-family: var(--hp-font-head); font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--hp-sprout); margin: 0 0 .4rem; }
.hp-calc__big { font-family: var(--hp-font-head); font-weight: 700; font-size: clamp(2.25rem, 5vw, 3rem); line-height: 1; margin: 0 0 1.4rem; color: #fff; }
.hp-calc__per { font-size: 1rem; font-weight: 400; color: rgba(255, 255, 255, .75); }
.hp-calc__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding-top: 1.2rem; border-top: 1px solid rgba(255, 255, 255, .18); }
.hp-calc__n { display: block; font-family: var(--hp-font-head); font-weight: 600; font-size: 1.375rem; color: #fff; }
.hp-calc__l { display: block; font-size: .8125rem; color: rgba(255, 255, 255, .72); margin-top: 3px; }
.hp-calc__saving { margin: 1.3rem 0 0; font-size: .975rem; line-height: 1.6; color: rgba(255, 255, 255, .9); }
.hp-calc__saving strong { color: var(--hp-sprout); }
.hp-calc__maths { margin-top: 1.2rem; border-top: 1px solid rgba(255, 255, 255, .18); padding-top: 1rem; }
.hp-calc__maths summary { cursor: pointer; font-family: var(--hp-font-head); font-weight: 600; font-size: .9375rem; color: var(--hp-sprout); list-style: none; }
.hp-calc__maths summary::-webkit-details-marker { display: none; }
.hp-calc__maths summary:before { content: "+ "; }
.hp-calc__maths[open] summary:before { content: "\2212 "; }
.hp-calc__maths p, .hp-calc__maths li { font-size: .9375rem; color: rgba(255, 255, 255, .88); margin: .7rem 0 0; }
.hp-calc__maths ul { margin: .4rem 0 0 1.1rem; }
.hp-calc__maths strong { color: #fff; }

.hp-calc__source { font-size: .8125rem; line-height: 1.55; color: var(--hp-slate); margin: 1rem 0 0; }
.hp-calc__source a { color: var(--hp-green); }

@media (max-width: 860px) {
	.hp-calc__grid { grid-template-columns: repeat(2, 1fr); }
	.hp-calc__stats { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
@media (max-width: 560px) {
	.hp-calc__grid { grid-template-columns: 1fr; }
	.hp-calc__row { grid-template-columns: 1fr 1fr 38px; }
	.hp-calc__row .hpc-r-name { grid-column: 1 / -1; }
}

/* ---------------------------- nutrient dosing calculator (shares .hp-calc) */
.hp-calc__legend {
	font-family: var(--hp-font-head);
	font-weight: 600;
	font-size: 1rem;
	color: var(--hp-green);
	margin: 0 0 .9rem;
}
.hp-calc__legend:not(:first-child) { margin-top: 1.8rem; }
.hp-calc__grid--3 { grid-template-columns: 2fr 1fr 1fr; }

.hp-calc__nrow {
	display: grid;
	grid-template-columns: 1.4fr 84px 96px auto 108px 38px;
	gap: 8px;
	align-items: center;
	margin-bottom: 10px;
}
.hp-calc__nrow input,
.hp-calc__nrow select {
	width: 100%;
	min-width: 0;
	border: 1px solid var(--hp-line);
	border-radius: var(--hp-radius-sm);
	padding: 10px 11px;
	font-family: var(--hp-font-body);
	font-size: .9375rem;
	background: #fff;
}
.hpn-per { font-size: .875rem; color: var(--hp-slate); text-align: center; }
.hpn-del {
	border: 1px solid var(--hp-line);
	background: #fff;
	border-radius: var(--hp-radius-sm);
	color: var(--hp-slate);
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	height: 40px;
}
.hpn-del:hover { background: rgba(239, 68, 68, .08); color: var(--hp-error); border-color: rgba(239, 68, 68, .4); }

.hp-calc__nrow--cost { grid-template-columns: 1.4fr 140px 140px; }
.hpn-cname { font-size: .9375rem; font-weight: 600; font-family: var(--hp-font-head); color: var(--hp-charcoal); }

/* Strength selector */
.hp-calc__strength { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.hp-calc__strength button {
	background: #fff;
	border: 1px solid var(--hp-line);
	border-radius: var(--hp-radius-sm);
	padding: 12px 8px;
	cursor: pointer;
	font-family: var(--hp-font-head);
	font-weight: 600;
	font-size: .9375rem;
	color: var(--hp-charcoal);
	text-align: center;
	line-height: 1.25;
}
.hp-calc__strength button span { display: block; font-family: var(--hp-font-body); font-weight: 400; font-size: .8125rem; color: var(--hp-slate); margin-top: 3px; }
.hp-calc__strength button:hover { border-color: var(--hp-green); }
.hp-calc__strength button.is-on { background: var(--hp-green); border-color: var(--hp-green); color: #fff; }
.hp-calc__strength button.is-on span { color: rgba(255, 255, 255, .8); }
.hp-calc__custom { max-width: 220px; margin-top: 14px; }

/* Dose output */
.hp-calc__doses { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px; }
.hp-calc__dose { border-left: 3px solid var(--hp-sprout); padding-left: 14px; }
.hp-calc__dname { display: block; font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; color: var(--hp-sprout); font-family: var(--hp-font-head); font-weight: 600; }
.hp-calc__dval { display: block; font-family: var(--hp-font-head); font-weight: 700; font-size: clamp(1.5rem, 3vw, 2rem); color: #fff; line-height: 1.15; margin: .3rem 0 .15rem; }
.hp-calc__dsub { display: block; font-size: .875rem; color: rgba(255, 255, 255, .72); }
.hp-calc--nutrient .hp-calc__label { margin-bottom: 1.1rem; }
.hp-calc--nutrient .hp-calc__label span { color: #fff; text-transform: none; letter-spacing: 0; font-size: .9375rem; }

.hp-calc__warn {
	margin-top: 1rem;
	background: rgba(234, 179, 8, .12);
	border-left: 4px solid var(--hp-warning);
	border-radius: 0 var(--hp-radius-sm) var(--hp-radius-sm) 0;
	padding: 14px 18px;
	font-size: .9375rem;
	line-height: 1.6;
	color: var(--hp-charcoal);
}

@media (max-width: 860px) {
	.hp-calc__grid--3 { grid-template-columns: 1fr 1fr; }
	.hp-calc__nrow { grid-template-columns: 1fr 76px 90px 100px 38px; }
	.hpn-per { display: none; }
	.hp-calc__strength { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.hp-calc__grid--3 { grid-template-columns: 1fr; }
	.hp-calc__nrow { grid-template-columns: 1fr 1fr 38px; }
	.hp-calc__nrow .hpn-name { grid-column: 1 / -1; }
	.hp-calc__nrow--cost { grid-template-columns: 1fr 1fr; }
	.hp-calc__nrow--cost .hpn-cname { grid-column: 1 / -1; }
}

/* ---------------------------------------- figures / charts in article prose */
.hp-chart {
	margin: 2rem 0;
	background: #fff;
	border: 1px solid var(--hp-line);
	border-radius: var(--hp-radius);
	padding: 22px 20px 16px;
}
.hp-chart svg { width: 100%; height: auto; display: block; }
.hp-chart figcaption {
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--hp-line);
	font-size: .9375rem;
	line-height: 1.55;
	color: var(--hp-slate);
}
@media (max-width: 620px) {
	/* The chart needs its labels legible, so let it scroll rather than shrink. */
	.hp-chart { padding: 16px 14px 12px; overflow-x: auto; }
	.hp-chart svg { min-width: 560px; }
	.hp-chart figcaption { min-width: 0; }
}

/* ------------------------------------------- scroll affordance on wide content
   Wide tables and the pH chart scroll inside their own container on narrow
   screens, but nothing signalled that. These are the classic CSS-only scroll
   shadows: the white "cover" layers use background-attachment:local so they
   travel with the content and uncover the shadow only when there is more to
   see, which means no false affordance when everything already fits. */
.hp-tablewrap,
.hp-chart {
	background-image:
		linear-gradient(to right, #fff 40%, rgba(255, 255, 255, 0)),
		linear-gradient(to left, #fff 40%, rgba(255, 255, 255, 0)),
		radial-gradient(farthest-side at 0 50%, rgba(17, 39, 28, .16), rgba(17, 39, 28, 0)),
		radial-gradient(farthest-side at 100% 50%, rgba(17, 39, 28, .16), rgba(17, 39, 28, 0));
	background-position: left center, right center, left center, right center;
	background-repeat: no-repeat;
	background-size: 44px 100%, 44px 100%, 15px 100%, 15px 100%;
	background-attachment: local, local, scroll, scroll;
}
/* The chart already paints its own white card, so keep that as the base layer. */
.hp-chart { background-color: #fff; }

/* ==========================================================================
   22. System comparison and recommender
   ========================================================================== */
.hp-syscmp__opts { display: flex; flex-wrap: wrap; gap: 8px; }
.hp-syscmp__opts button {
	background: #fff;
	border: 1px solid var(--hp-line);
	border-radius: var(--hp-radius-sm);
	padding: 11px 16px;
	cursor: pointer;
	font-family: var(--hp-font-head);
	font-weight: 600;
	font-size: .9375rem;
	color: var(--hp-charcoal);
}
.hp-syscmp__opts button:hover { border-color: var(--hp-green); }
.hp-syscmp__opts button.is-on { background: var(--hp-green); border-color: var(--hp-green); color: #fff; }

.hp-syscmp__results { margin-top: 26px; }
.hp-syscmp__results .hp-calc__label { color: var(--hp-green); margin-bottom: 1rem; }

.hp-syscmp__card {
	background: #fff;
	border: 1px solid var(--hp-line);
	border-radius: var(--hp-radius);
	padding: 20px 22px;
	margin-bottom: 14px;
}
.hp-syscmp__card.is-top { border-color: var(--hp-green); border-width: 2px; box-shadow: var(--hp-shadow); }
.hp-syscmp__head { display: flex; align-items: flex-start; gap: 14px; }
.hp-syscmp__rank {
	flex: none;
	width: 30px; height: 30px;
	border-radius: 50%;
	background: var(--hp-cloud);
	color: var(--hp-slate);
	font-family: var(--hp-font-head);
	font-weight: 700;
	font-size: .9375rem;
	display: flex; align-items: center; justify-content: center;
}
.hp-syscmp__card.is-top .hp-syscmp__rank { background: var(--hp-green); color: #fff; }
.hp-syscmp__head h3 { margin: 0 0 .3rem; font-size: 1.1875rem; }
.hp-syscmp__badge {
	display: inline-block;
	background: var(--hp-gold);
	color: #fff;
	font-family: var(--hp-font-head);
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	padding: 4px 9px;
	border-radius: 999px;
	vertical-align: middle;
	margin-left: 6px;
}
.hp-syscmp__sum { margin: 0; font-size: .975rem; color: var(--hp-slate); line-height: 1.5; }
.hp-syscmp__score { margin-left: auto; text-align: right; flex: none; }
.hp-syscmp__score span { display: block; font-family: var(--hp-font-head); font-weight: 700; font-size: 1.375rem; color: var(--hp-green); line-height: 1; }
.hp-syscmp__score em { font-style: normal; font-size: .75rem; color: var(--hp-slate); }

.hp-syscmp__bar { height: 6px; background: var(--hp-cloud); border-radius: 3px; margin: 14px 0 12px; overflow: hidden; }
.hp-syscmp__bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--hp-green), var(--hp-sprout)); border-radius: 3px; }

.hp-syscmp__meta { font-size: .875rem; color: var(--hp-slate); margin-bottom: .8rem; }
.hp-syscmp__why, .hp-syscmp__warn { list-style: none; margin: 0 0 .6rem; padding: 0; }
.hp-syscmp__why li, .hp-syscmp__warn li { position: relative; padding-left: 22px; font-size: .9375rem; margin-bottom: .3rem; }
.hp-syscmp__why li:before { content: "\2713"; position: absolute; left: 0; color: var(--hp-success); font-weight: 700; }
.hp-syscmp__warn li:before { content: "\0021"; position: absolute; left: 6px; color: #A16207; font-weight: 700; }
.hp-syscmp__warn li { color: var(--hp-slate); }
.hp-syscmp__bad { font-size: .9375rem; color: var(--hp-slate); margin: .5rem 0 .9rem; line-height: 1.55; }
.hp-syscmp__links { margin: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.hp-syscmp__links a { font-family: var(--hp-font-head); font-weight: 600; font-size: .9375rem; color: var(--hp-green); text-decoration: none; }
.hp-syscmp__links a:hover { text-decoration: underline; }

.hp-syscmp__table { margin-top: 22px; border-top: 1px solid var(--hp-line); padding-top: 16px; }
.hp-syscmp__table summary {
	cursor: pointer;
	font-family: var(--hp-font-head);
	font-weight: 600;
	font-size: .9375rem;
	color: var(--hp-green);
	list-style: none;
}
.hp-syscmp__table summary::-webkit-details-marker { display: none; }
.hp-syscmp__table summary:before { content: "+ "; }
.hp-syscmp__table[open] summary:before { content: "\2212 "; }

/* Shown when the top score is weak: an honest "nothing fits" beats a badge. */
.hp-syscmp__nofit {
	margin: 0 0 20px;
	padding: 16px 20px;
	border-left: 3px solid var(--hp-warning);
	background: rgba(234, 179, 8, .11);
	border-radius: 0 var(--hp-radius-sm) var(--hp-radius-sm) 0;
	line-height: 1.6;
}

@media (max-width: 620px) {
	.hp-syscmp__opts button { flex: 1 1 calc(50% - 4px); text-align: center; }
	.hp-syscmp__head { flex-wrap: wrap; }
	.hp-syscmp__score { margin-left: 0; text-align: left; width: 100%; display: flex; align-items: baseline; gap: 6px; }
}

/* ==========================================================================
   23. Affiliate links
   ========================================================================== */
/* These sit inside table cells, so they must not inherit the prose link's
   underline-on-a-baseline treatment. Colour carries the affordance instead. */
.hp-afflink {
	color: var(--hp-green);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid rgba(27, 94, 59, .35);
}
.hp-afflink:hover,
.hp-afflink:focus-visible { color: var(--hp-green-dark); border-bottom-color: var(--hp-green); }
.hp-table .hp-afflink { white-space: normal; }

/* ==========================================================================
   24. Cookie banner
   ========================================================================== */
/* Fixed, never in flow: this site measures CLS at 0.001 and a banner that
   pushed content down would destroy that. Reject and Accept are deliberately
   the same size and weight — under GDPR, refusing has to be as easy as
   agreeing, so this is a compliance property, not a style choice. */
.hp-consent {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 9999;
	background: var(--hp-white);
	border-top: 3px solid var(--hp-green);
	box-shadow: 0 -6px 24px rgba(31, 41, 55, .16);
}
.hp-consent[hidden] { display: none; }

.hp-consent__inner {
	max-width: 1200px;
	margin-inline: auto;
	padding: 20px 24px;
	display: flex;
	align-items: center;
	gap: clamp(16px, 3vw, 40px);
}
.hp-consent__copy { flex: 1 1 auto; }

.hp-consent__title {
	font-family: var(--hp-font-head);
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--hp-charcoal);
	margin: 0 0 4px;
	line-height: 1.3;
}
.hp-consent__text {
	font-size: .9375rem;
	line-height: 1.55;
	color: var(--hp-slate);
	margin: 0;
	max-width: 68ch;
}
.hp-consent__text a {
	color: var(--hp-green);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.hp-consent__text a:hover,
.hp-consent__text a:focus-visible { color: var(--hp-green-dark); }

/* Grid with equal auto columns, so both buttons take the width of the wider
   label instead of shrinking to their own text. "Accept" is a much shorter word
   than "Reject non-essential" and would otherwise render as the smaller target.
   No magic widths: the grid equalises whatever the labels happen to be. */
.hp-consent__actions {
	flex: 0 0 auto;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: 12px;
}
/* Both choices are SOLID buttons of the same size on purpose. Equal prominence
   for reject is a compliance property, and an outline-vs-filled pair is exactly
   the pattern regulators have objected to, even when the boxes measure the
   same. Green reject, gold accept — same weight, still on brand. */
.hp-consent__btn {
	padding: 12px 24px;
	font-size: .9375rem;
	white-space: nowrap;
}

@media (max-width: 860px) {
	.hp-consent__inner {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
		padding: 18px 20px;
	}
	.hp-consent__btn { text-align: center; }
}
/* Below ~380px two buttons side by side start truncating their labels. Stack in
   DOM order, not reversed — reversing would make the visual order disagree with
   the tab order for no benefit. */
@media (max-width: 380px) {
	.hp-consent__actions { grid-auto-flow: row; }
}