/* ============================================
   CLEAN AF LIFE — THEME CSS
   ============================================ */

:root {
	--green:    #00bf63;
	--black:    #040504;
	--white:    #fafafa;
	--mid-gray: #1a1a1a;
	--dim:      #888888;
	--muted:    #cccccc;
}

/* ============================================
   WORDPRESS NATIVE BLOCK OVERRIDES
   These neutralise WP defaults inside custom sections
   ============================================ */

/* Remove default WP block margins inside our sections */
.home-hero .wp-block-heading,
.home-hero .wp-block-paragraph,
.home-hero .wp-block-buttons,
.home-deal-text .wp-block-heading,
.home-deal-text .wp-block-paragraph,
.swap-guide-section .wp-block-heading,
.top5-section .wp-block-heading,
.blog-teaser-section .wp-block-heading,
.blog-teaser-section .wp-block-paragraph,
.email-signup-section .wp-block-heading,
.email-signup-section .wp-block-paragraph {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* Columns: let our CSS grid take over in custom sections */
.top5-grid.wp-block-columns {
	display: grid !important;
	gap: 12px !important;
	flex-wrap: unset !important;
	align-items: unset !important;
	grid-template-columns: repeat(5, 1fr) !important;
}

.top5-grid .wp-block-column {
	flex-basis: auto !important;
	flex-grow: unset !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

.home-deal-inner.wp-block-columns {
	display: grid !important;
	grid-template-columns: 1.3fr 0.9fr !important;
	column-gap: 4rem !important;
	row-gap: 0 !important;
	align-items: stretch !important;
	min-height: 480px;
	overflow: visible !important;
}

.home-deal.wp-block-group {
	overflow: visible !important;
}

.home-deal-inner .wp-block-column {
	flex-basis: auto !important;
	flex-grow: unset !important;
}

/* WP image blocks: remove default figure margins */
.swap-guide-img.wp-block-image,
.swap-card-img.wp-block-image,
.home-deal-image .wp-block-image,
.blog-card-white-img .wp-block-image,
.swap-guide-img figure,
.swap-card-img figure {
	margin: 0 !important;
}

.swap-guide-img a,
.swap-card-img a {
	display: block;
	width: 100%;
	height: 100%;
}

.swap-guide-img img,
.swap-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	margin: 0;
}

/* WP button blocks: square corners, our font/sizing */
.wp-block-button__link {
	border-radius: 0 !important;
}

.home-hero .wp-block-buttons {
	display: flex !important;
	justify-content: flex-start !important;
}

.home-hero .wp-block-button {
	display: inline-block !important;
	width: auto !important;
	max-width: fit-content !important;
	flex-shrink: 1 !important;
	flex-grow: 0 !important;
}

.home-hero .wp-block-button__link,
.btn-primary .wp-block-button__link {
	font-family: 'Montserrat', sans-serif !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 0.2em !important;
	text-transform: uppercase !important;
	padding: 0.65rem 0.8rem !important;
	background-color: var(--green) !important;
	color: var(--white) !important;
	text-align: left !important;
	width: auto !important;
	display: inline-block !important;
}

.swap-cta-btn .wp-block-button__link {
	font-family: 'Montserrat', sans-serif !important;
	font-size: 0.6rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.15em !important;
	text-transform: uppercase !important;
	padding: 0.55rem 1rem !important;
	background-color: var(--green) !important;
	color: var(--black) !important;
}

.btn-green-pill .wp-block-button__link {
	font-family: 'Montserrat', sans-serif !important;
	font-size: 0.7rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.15em !important;
	text-transform: uppercase !important;
	padding: 0.85rem 2rem !important;
	background-color: var(--green) !important;
	color: var(--black) !important;
}

/* WP query / post template grid */
.blog-cards-grid.wp-block-post-template {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 2.5rem !important;
	margin: 0 !important;
}

.blog-card-white.wp-block-group {
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
	background: transparent !important;
}

.blog-card-white-img .wp-block-post-featured-image img {
	width: 100%;
	aspect-ratio: 16/10;
	object-fit: cover;
}

.blog-card-white-title.wp-block-post-title a {
	font-family: 'Platypi', serif;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	color: #111;
	text-decoration: none;
}

.blog-card-white-excerpt.wp-block-post-excerpt p {
	font-size: 0.8rem;
	color: #666;
	line-height: 1.6;
	margin: 0;
}

/* Cover block for deal image */
.home-deal-cover {
	height: 100% !important;
	min-height: 100% !important;
}

.home-deal-cover .wp-block-cover__inner-container {
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	height: 100%;
	padding: 2rem;
}


/* ============================================
   BASE
   ============================================ */

*, *::before, *::after {
	box-sizing: border-box;
}

html, body {
	background: var(--black);
	color: var(--white);
	font-family: 'Montserrat', sans-serif;
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
	margin: 0;
	padding: 0;
}

body .wp-site-blocks {
	background: var(--black);
}


a {
	color: var(--white);
	text-decoration: none;
	transition: color 0.2s;
}
a:hover { color: var(--green); }

em { font-style: italic; color: var(--green); }

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

/* ============================================
   ANIMATIONS
   ============================================ */

@keyframes fadeUp {
	from { opacity: 0; transform: translateY(20px); }
	to   { opacity: 1; transform: translateY(0); }
}
.fade-up {
	animation: fadeUp 0.6s ease forwards;
}

/* ============================================
   NAVIGATION
   ============================================ */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--black);
	border-bottom: 1px solid var(--mid-gray);
}

.site-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1.2rem 2.5rem;
	max-width: 1400px;
	margin: 0 auto;
}

/* Logo: CLEAN [AF] LIFE — AF in green */
.site-logo {
	font-family: 'Bebas Neue', sans-serif;
	font-weight: 700;
	font-size: 2.2rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--white);
	text-decoration: none;
}
.site-logo:hover { color: var(--white); }
.site-logo .af { color: var(--green); }

/* Block navigation overrides */
.wp-block-navigation {
	gap: 2rem;
}
.wp-block-navigation a {
	font-family: 'Montserrat', sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted) !important;
	text-decoration: none;
	transition: color 0.2s;
}
.wp-block-navigation a:hover { color: var(--green) !important; }

.wp-block-navigation__container {
	gap: 2rem;
}

/* Active nav link */
.nav-active {
	color: var(--green) !important;
	border-bottom: 2px solid var(--green);
	padding-bottom: 2px;
}

/* ============================================
   FOOTER
   ============================================ */

.site-footer {
	background: var(--black);
	border-top: 1px solid #333 !important;
	width: 100%;
}

.site-footer-inner {
	max-width: 1400px;
	margin: 0 auto;
	padding: 1.2rem 2.5rem;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 2rem;
}

.site-footer .footer-copy {
	text-align: right;
}

.footer-logo {
	font-family: 'Bebas Neue', sans-serif;
	font-weight: 700;
	font-size: 1.9rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--white);
	text-decoration: none;
}
.footer-logo .af { color: var(--green); }
.footer-logo:hover { color: var(--white); }

.footer-links {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
}

.footer-links a {
	font-family: 'Montserrat', sans-serif;
	font-size: 14px;
	font-weight: 400;
	color: var(--dim);
	text-decoration: none;
	padding: 0 0.6rem;
	transition: color 0.2s;
}
.footer-links a:hover { color: var(--white); }

.footer-links .sep {
	color: #333;
	font-size: 0.75rem;
}

.footer-copy {
	color: var(--dim);
	font-size: 14px;
	text-align: right;
	font-family: 'Montserrat', sans-serif;
	white-space: nowrap;
}

/* ============================================
   BREADCRUMB
   ============================================ */

.breadcrumb {
	max-width: 1100px;
	margin: 0 auto;
	padding: 1.2rem 2.5rem 0;
	font-size: 0.65rem;
	color: #444;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.breadcrumb a { color: #444; }
.breadcrumb a:hover { color: var(--green); }
.breadcrumb span { margin: 0 0.5rem; }

/* ============================================
   HERO — SHOP / PAGE
   ============================================ */

.page-hero {
	max-width: 1100px;
	margin: 0 auto;
	padding: 3rem 2.5rem 3.5rem !important;
	animation: fadeUp 0.6s ease forwards;
}

.hero-eyebrow {
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--dim);
	margin: 0 0 1.2rem;
}

.page-hero h1 {
	font-family: 'Montserrat', sans-serif !important;
	font-size: 14px !important;
	font-weight: 700;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--green);
	margin: 0 0 1.2rem;
}

.page-hero h2 {
	font-family: 'Platypi', serif;
	font-size: clamp(2.5rem, 8vw, 5.25rem);
	font-weight: 700;
	line-height: 1.05;
	margin: 0 0 1.5rem;
}

.page-hero h2 em {
	font-style: italic;
	color: var(--green);
}

.hero-divider {
	width: 60px;
	height: 3px;
	background: var(--green);
	margin: 0 0 1.5rem;
}

.hero-sub {
	font-family: 'Montserrat', sans-serif;
	font-size: 18px !important;
	color: var(--dim);
	line-height: 1.7;
	max-width: 580px;
	margin: 0;
}

/* ============================================
   BLOG POST — ALL SECTIONS
   Single wrapper controls all margins.
   ============================================ */

.blog-post-wrap {
	display: contents;
}

.post-hero {
	max-width: 1100px;
	margin: 0 auto;
	padding: 3rem 2.5rem 2.5rem;
	animation: fadeUp 0.6s ease forwards;
}

.post-meta {
	display: flex;
	align-items: center;
	gap: 1.2rem;
	margin-bottom: 1.5rem;
	flex-wrap: wrap;
}

.post-category-badge {
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--black);
	background: var(--green);
	padding: 0.3rem 0.7rem;
}

.post-read-time,
.post-date {
	font-size: 0.65rem;
	color: #888888;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.post-hero h1 {
	font-family: 'Platypi', serif;
	font-size: clamp(2rem, 4.5vw, 3.2rem);
	font-weight: 700;
	line-height: 1.1;
	margin: 0 0 1.2rem;
}

.post-hero h1 em {
	font-style: italic !important;
	color: var(--green) !important;
}

.post-deck {
	font-size: 18px !important;
	line-height: 1.7;
	color: var(--dim);
	margin: 0 0 2rem;
}

.hero-image-wrap,
.hero-image {
	max-width: 1100px;
	margin: 0 auto 2.5rem;
	padding: 0 2.5rem;
}

.hero-image-wrap img,
.hero-image img {
	width: 100%;
	aspect-ratio: 16/7;
	object-fit: cover;
	display: block;
}

.post-disclosure {
	max-width: 1100px;
	margin: 0 auto 5rem;
	padding: 0 2.5rem;
}

.post-disclosure p {
	font-family: 'Montserrat', sans-serif;
	font-size: 14px !important;
	font-style: italic;
	color: #888888 !important;
	line-height: 1.6;
	border-left: 4px solid #333;
	padding: 0.3rem 0 0.3rem 1rem;
	margin: 0;
}

.post-disclosure p strong {
	color: #888888 !important;
	font-size: 14px !important;
}

.toc {
	max-width: 1100px;
	margin: 0 auto 5rem;
	padding: 0 2.5rem;
}

.toc-inner {
	border: 1px solid #1a1a1a;
	padding: 1.8rem 2rem;
	background: #040504;
}

.toc-label {
	font-family: 'Montserrat', sans-serif !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 0.2em !important;
	text-transform: uppercase !important;
	color: var(--green) !important;
	margin: 0 0 1rem !important;
}

.toc-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.toc-list li {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
}

.toc-num {
	font-family: 'Montserrat', sans-serif;
	font-size: 12px;
	font-weight: 400;
	color: #888888;
	flex-shrink: 0;
	width: 1.5rem;
}

.toc-list a {
	font-family: 'Montserrat', sans-serif;
	font-size: 16px;
	font-weight: 400;
	color: #888888 !important;
	transition: color 0.2s;
}
.toc-list a:hover { color: var(--green) !important; }

/* ============================================
   POST BODY
   ============================================ */

.post-body {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 2.5rem 5rem;
}

.post-body > p {
	font-family: 'Montserrat', sans-serif !important;
	font-size: 18px !important;
	line-height: 1.85 !important;
	color: #cccccc !important;
	margin-bottom: 1.4rem !important;
}

.post-body > p a {
	color: var(--green) !important;
	font-weight: 700;
	text-decoration: none;
	transition: color 0.2s, opacity 0.2s;
}

.post-body > p a:hover {
	color: #fafafa !important;
	opacity: 0.9;
}

.post-body h2 {
	font-family: 'Platypi', serif;
	font-size: 32px;
	font-weight: 600;
	line-height: 1.2;
	margin: 8rem 0 2rem;
	padding-top: 2rem;
	border-top: 1px solid var(--mid-gray);
	color: var(--white);
}

.post-body h2 em { font-style: italic; color: var(--green); }

.post-body h2 + h3 { margin-top: 1.5rem; }

.post-body h3 {
	font-family: 'Platypi', serif;
	font-size: 24px;
	font-weight: 600;
	margin: 8rem 0 0.8rem;
	color: var(--white);
}

.post-body h3 em { font-style: italic; color: var(--green); }

.post-body h4 {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--green);
	margin: 2rem 0 0.6rem;
}

.post-body strong { color: var(--white); font-weight: 700; }

.post-body ul {
	list-style: none;
	margin: 0.5rem 0 1.5rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.post-body ul li {
	font-size: 16px;
	color: #cccccc;
	line-height: 1.6;
	padding-left: 1.2rem;
	position: relative;
}

.post-body ul li::before {
	content: '—';
	position: absolute;
	left: 0;
	color: var(--green);
	font-size: 0.75rem;
}

.post-body ol {
	padding-left: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.post-body ol li {
	font-size: 0.9rem;
	color: #cccccc;
	line-height: 1.6;
}

/* ============================================
   HERO IMAGE (blog) — kept for .hero-image-wrap usage
   ============================================ */

/* ============================================
   PRODUCT CALLOUT (in-post)
   ============================================ */

.product-callout {
	border: 1px solid #555555;
	padding: 1.8rem 2rem;
	margin: 2.5rem 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	background: #111111;
}

.product-callout .callout-cta-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 0.8rem;
}

.product-callout .callout-cta-wrap .callout-cta {
	margin-top: 0;
}

.callout-label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--green);
}

.callout-brand {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: #888888;
}

.callout-name {
	font-family: 'Montserrat', sans-serif;
	font-size: 1rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--white);
	margin: 0;
}

.callout-desc {
	font-size: 16px;
	color: #888888 !important;
	line-height: 1.6;
	margin: 0;
}

.callout-desc a,
.callout-desc a:visited {
	color: #888888 !important;
}

.callout-cta {
	display: inline-block;
	margin-top: 0.8rem;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--black);
	background: var(--green);
	padding: 0.55rem 1.1rem;
	text-align: center;
	text-decoration: none;
	transition: opacity 0.2s;
	align-self: flex-start;
	white-space: nowrap;
}
.callout-cta:hover { opacity: 0.85; color: var(--black); }

/* ============================================
   TIP BOX
   ============================================ */

.tip-box {
	border-left: 3px solid var(--green);
	padding: 1.2rem 1.5rem;
	margin: 4rem 0 4rem;
	background: #111111;
}

.tip-box .tip-box-label {
	font-size: 14px !important;
	margin-bottom: 8px !important;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--green);
	margin: 0 0 0.5rem;
}

.tip-box p:not(.tip-box-label) {
	font-size: 16px !important;
	color: #888888 !important;
	line-height: 1.6 !important;
	margin: 0 !important;
}

/* ============================================
   UPDATE BOX
   ============================================ */

.update-box {
	border: 1px solid #2a2a2a;
	border-left: 3px solid var(--green);
	padding: 1.2rem 1.5rem;
	margin: 0 0 5rem;
	background: #060606;
}

.update-box-label {
	font-family: 'Montserrat', sans-serif;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #888888 !important;
	margin-bottom: 0.5rem;
}

.update-box p:not(.update-box-label) {
	font-size: 16px !important;
	color: #888888 !important;
	line-height: 1.6 !important;
	margin: 0 !important;
}

/* ============================================
   FAQ SECTION
   ============================================ */

.faq-section {
	margin-top: 8rem;
	padding-top: 1rem;
	border-top: 1px solid var(--mid-gray);
}

.faq-section h2 {
	font-family: 'Platypi', serif;
	font-size: 2rem !important;
	font-weight: 600;
	margin-bottom: 2rem !important;
	border-top: none !important;
	padding-top: 0 !important;
	margin-top: 0 !important;
}

.faq-section h2 em { font-style: italic; color: var(--green); }

.faq-item {
	border-bottom: 1px solid var(--mid-gray);
	padding: 1.5rem 0;
}

.faq-item:last-child {
	border-bottom: none;
}

.faq-item h3 {
	font-family: 'Platypi', serif;
	font-size: 18px !important;
	font-weight: 600;
	margin: 0 0 0.7rem !important;
	color: var(--white);
}

.faq-item p {
	font-size: 16px !important;
	color: #cccccc !important;
	line-height: 1.75 !important;
	margin: 0 !important;
}

/* ============================================
   POST IMAGE
   ============================================ */

.post-body figure {
	margin: 2.5rem 0;
}

.post-body figure.pad-top {
	margin-top: 6rem;
	margin-bottom: 6rem;
}

.post-body figure img {
	width: 100%;
	aspect-ratio: 16/7;
	object-fit: cover;
	object-position: center center;
	display: block;
}

.post-body figcaption {
	font-size: 14px;
	color: #888888;
	margin-top: 0.6rem;
	font-style: italic;
	text-align: center;
}

/* ============================================
   EMAIL CAPTURE (in-post)
   ============================================ */

.email-capture {
	background: #0f0f0f;
	padding: 2.5rem 2rem;
	margin: 4rem 0;
	text-align: center;
}

.email-capture h4 {
	font-family: 'Platypi', serif;
	font-size: 32px !important;
	font-weight: 700;
	color: #fafafa !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	margin: 0 0 0.6rem;
}

.email-capture p {
	font-size: 18px !important;
	color: var(--dim) !important;
	line-height: 1.6 !important;
	margin: 0 auto 1.2rem !important;
	max-width: 640px;
}

.email-capture input[type="email"] {
	background: #1a1a1a;
	border: 1px solid #333;
	color: #fafafa;
	padding: 0.7rem 1rem;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	width: 100%;
	max-width: 340px;
	margin: 0 auto 0.8rem;
	display: block;
	outline: none;
}

.email-capture input[type="email"]::placeholder {
	color: #555;
}

.start-quiz-cta {
	max-width: 860px;
	margin: 4rem auto;
	border: 1px solid #1a1a1a;
}

/* ============================================
   CTA BUTTON
   ============================================ */

.cta-btn {
	display: inline-block;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--black);
	background: var(--green);
	padding: 0.7rem 1.5rem;
	text-decoration: none;
	transition: opacity 0.2s;
	border: none;
	outline: none;
	cursor: pointer;
	font-family: 'Montserrat', sans-serif;
	white-space: nowrap;
}
.cta-btn:hover { opacity: 0.85; color: var(--black); }

.post-signoff {
	color: #fafafa !important;
	font-size: 18px !important;
	line-height: 1.85 !important;
	margin-top: 2rem !important;
}

.post-body > p.post-signoff,
.blog-post-wrap .post-body > p.post-signoff {
	color: #fafafa !important;
}

.post-signoff-peace {
	color: #facc15 !important;
}

/* ============================================
   AUTHOR BOX
   ============================================ */

.author-box {
	border-top: 1px solid var(--mid-gray);
	max-width: 1100px;
	margin: 8rem auto 6rem;
	padding: 2.5rem 2.5rem 0;
}

.author-top {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1rem;
}

.author-avatar {
	font-size: 2.2rem;
	line-height: 1;
	flex-shrink: 0;
	width: 2.5rem;
}

.author-info {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.author-label {
	font-size: 0.6rem !important;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--green);
}

.author-name {
	font-family: 'Bebas Neue', sans-serif;
	font-size: 40px !important;
	font-weight: 700;
	color: var(--white);
	line-height: 1;
	letter-spacing: 0.02em;
}

.author-name em {
	font-style: normal;
	color: var(--green);
}

.author-bio {
	font-size: 16px !important;
	color: #cccccc !important;
	line-height: 1.7 !important;
	margin: 0 !important;
	padding-left: calc(2.5rem + 1rem);
}

/* ============================================
   PRODUCT GRID
   ============================================ */

.product-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: #0f0f0f;
	border: 1px solid var(--mid-gray);
	margin-bottom: 1px;
}

.product-grid.two-col   { grid-template-columns: repeat(2, 1fr); }
.product-grid.four-col  { grid-template-columns: repeat(4, 1fr); }

/* ============================================
   PRODUCT CARD
   ============================================ */

.product-card {
	background: var(--black);
	padding: 2rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	transition: background 0.2s;
}
.product-card:hover { background: #1a1a1a; }

.product-card.featured {
	background: #050505;
	border-left: 3px solid var(--green);
}
.product-card.featured:hover { background: #1a1a1a; }

.featured-badge {
	font-size: 0.55rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--black);
	background: var(--green);
	padding: 0.25rem 0.6rem;
	align-self: flex-start;
	margin-bottom: 0.3rem;
}

.product-img {
	width: 100%;
	aspect-ratio: 4/3;
	background: #111;
	border: 1px solid #1e1e1e;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	margin-bottom: 0.5rem;
	overflow: hidden;
}

.product-img img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

.product-brand {
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--green);
}

.product-name {
	font-family: 'Montserrat', sans-serif;
	font-size: 1rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	line-height: 1.2;
	color: var(--white);
	margin-bottom: 0.3rem;
}

.product-bullets {
	list-style: disc;
	padding-left: 1.2rem;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	flex-grow: 1;
	margin-bottom: 0.5rem;
}

.product-bullets li {
	font-size: 0.78rem;
	color: var(--muted);
	line-height: 1.5;
	padding-left: 0.25rem;
}

.product-bullets li::marker {
	color: var(--green);
	font-size: 0.7rem;
}

.product-cta {
	display: inline-block;
	margin-top: 1rem;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--black);
	background: var(--green);
	padding: 0.6rem 1.2rem;
	text-decoration: none;
	transition: opacity 0.2s;
	align-self: flex-start;
}
.product-cta:hover { opacity: 0.85; color: var(--black); }

.product-card.placeholder {
	opacity: 0;
	pointer-events: none;
	min-height: 200px;
}

/* ============================================
   SECTION HEADER
   ============================================ */

.section-header {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 2.5rem;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	border-bottom: 1px solid var(--mid-gray);
	padding-bottom: 1rem;
	margin-bottom: 0;
}

.section-header h2 {
	font-family: 'Platypi', serif;
	font-size: 1.6rem;
	font-weight: 600;
	margin: 0;
}

.section-blurb {
	font-size: 0.85rem;
	color: var(--dim);
	line-height: 1.7;
	max-width: 660px;
	margin: 0 auto 2rem;
	padding: 0 2.5rem;
}

.section-wrap {
	max-width: 1100px;
	margin: 0 auto 5rem;
	padding: 0 2.5rem;
}

/* ============================================
   JUMP NAV (shop index)
   ============================================ */

.jump-nav {
	display: flex;
	gap: 1px;
	background: #0f0f0f;
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;
	border: 1px solid var(--mid-gray);
	margin-bottom: 5rem;
}

.jump-nav a {
	flex: 1;
	padding: 1.4rem 1rem;
	text-align: center;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #666;
	text-decoration: none;
	background: var(--black);
	transition: all 0.2s;
}
.jump-nav a:hover {
	color: var(--green);
	background: #1a1a1a;
}

/* ============================================
   TILE GRID (shop index categories)
   ============================================ */

.tile-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: #0f0f0f;
	border: 1px solid var(--mid-gray);
}

.tile {
	background: var(--black);
	padding: 2rem 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	text-decoration: none;
	color: var(--white);
	transition: background 0.2s;
	position: relative;
}
.tile:hover { background: #1a1a1a; }
.tile:hover .tile-arrow { color: var(--green); transform: translateX(4px); }

.tile.coming-soon { cursor: default; }
.tile.coming-soon:hover { background: var(--black); }

.tile-emoji { font-size: 1.4rem; margin-bottom: 0.3rem; }

.tile-title {
	font-family: 'Platypi', serif;
	font-size: 1.1rem;
	font-weight: 600;
	line-height: 1.2;
}

.tile-cta {
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--green);
	margin-top: auto;
	padding-top: 0.8rem;
}

.tile-arrow {
	display: inline-block;
	transition: color 0.2s, transform 0.2s;
}

.tile.coming-soon .tile-cta { color: #333; }

.coming-soon-badge {
	position: absolute;
	top: 1rem;
	right: 1rem;
	font-size: 0.55rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: #333;
	border: 1px solid #222;
	padding: 0.25rem 0.5rem;
}

/* ============================================
   BACK TO TOP
   ============================================ */

.back-to-top {
	display: block;
	text-align: right;
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #333;
	padding: 1rem 0;
	transition: color 0.2s;
	margin-top: 1px;
}
.back-to-top:hover { color: var(--green); }

/* ============================================
   BANNER (green CTA strip)
   ============================================ */

.banner {
	background: var(--green);
	color: var(--black);
	padding: 2.5rem 2.5rem;
	text-align: center;
	margin-top: 5rem;
	margin-bottom: 5rem;
}

.banner h3 {
	font-family: 'Platypi', serif;
	font-size: 32px !important;
	font-weight: 700;
	margin: 0 0 0.8rem;
	color: var(--black);
}

.banner p {
	font-family: 'Montserrat', sans-serif;
	font-size: 16px;
	max-width: 480px;
	margin: 0 auto 1.5rem;
	color: var(--black) !important;
}

.banner a {
	display: inline-block;
	background: var(--black);
	color: var(--white);
	padding: 0.8rem 2rem;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	text-decoration: none;
	transition: opacity 0.2s;
}
.banner a:hover { opacity: 0.85; color: var(--white); }

.banner-email-form {
	max-width: 420px;
	margin: 1.5rem auto 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.banner-email-input {
	width: 100%;
	background: rgba(0, 0, 0, 0.15);
	border: 1px solid rgba(0, 0, 0, 0.2);
	color: var(--black);
	padding: 1rem 1.2rem;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	outline: none;
	box-sizing: border-box;
}

.banner-email-input::placeholder {
	color: rgba(0, 0, 0, 0.45);
}

.banner-email-submit {
	background: var(--black);
	color: var(--white);
	border: none;
	padding: 1rem 2.5rem;
	font-family: 'Montserrat', sans-serif;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	cursor: pointer;
	align-self: center;
	min-width: 220px;
	transition: opacity 0.2s;
}

.banner-email-submit:hover { opacity: 0.85; }

/* ============================================
   RELATED POSTS
   ============================================ */

.related {
	max-width: 1100px;
	margin: 0 auto 5rem;
	padding: 0 2.5rem;
}

.related h3 {
	font-family: 'Platypi', serif;
	font-size: 24px !important;
	font-weight: 600;
	margin: 0 0 1.5rem;
	border-bottom: 1px solid var(--mid-gray);
	padding-bottom: 1rem;
}

.related-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: #0f0f0f;
	border: 1px solid var(--mid-gray);
}

.related-card {
	background: var(--black);
	padding: 1.8rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	text-decoration: none;
	color: var(--white);
	transition: background 0.2s;
}
.related-card:hover { background: #1a1a1a; }

.related-tag {
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--green);
}

.related-title {
	font-family: 'Platypi', serif;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
	flex-grow: 1;
}

.related-arrow {
	font-size: 0.75rem;
	color: var(--green);
	margin-top: 0.8rem;
	transition: color 0.2s;
}
.related-card:hover .related-arrow { color: var(--green); }

/* ============================================
   BLOG CARD GRID (archive)
   ============================================ */

.wp-block-group.blog-grid {
	background: transparent;
	border: none;
	display: block !important;
	width: 100% !important;
	max-width: none !important;
}

.blog-grid .wp-block-post-template {
	border: 1px solid var(--mid-gray) !important;
	background: var(--black) !important;
}

.blog-index-hero {
	max-width: 1100px;
}

.blog-index-hero .shop-page-intro {
	max-width: 100%;
}

.blog-index-hero + .section-wrap {
	max-width: 1100px;
	margin-top: 3rem;
	margin-left: auto;
	margin-right: auto;
	padding-left: 2.5rem;
	padding-right: 2.5rem;
}

.blog-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	padding-top: 4rem;
	margin: 0 0 4rem;
	width: 100%;
}

.blog-filter .blog-filter-pill {
	flex: 1;
	text-align: center;
}

.blog-filter-pill {
	align-items: center;
	background: #0f0f0f;
	border: 1px solid #242424;
	border-radius: 0;
	color: var(--white);
	display: inline-flex;
	font-size: 0.68rem;
	font-weight: 800;
	justify-content: center;
	letter-spacing: 0.08em;
	line-height: 1;
	min-height: 2.35rem;
	padding: 0.7rem 0.75rem;
	text-decoration: none !important;
	text-transform: uppercase;
	transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.blog-filter-pill:hover,
.blog-filter-pill.is-active {
	background: var(--green);
	border-color: var(--green);
	color: var(--black) !important;
}

@media (min-width: 900px) {
	.blog-filter {
		flex-wrap: nowrap;
	}
}

.blog-grid .wp-block-query {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
}

.blog-grid .wp-block-post-template {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 1px !important;
	margin: 0 !important;
	padding: 0 !important;
	width: 100% !important;
	max-width: none !important;
	box-sizing: border-box;
}

.blog-grid .wp-block-post {
	margin: 0 !important;
	list-style: none !important;
	width: 100% !important;
	max-width: none !important;
}

.blog-grid .wp-block-query-pagination {
	align-items: center !important;
	display: flex !important;
	gap: 1rem !important;
	justify-content: center !important;
	margin: 2.5rem 0 0 !important;
}

.blog-grid .wp-block-query-pagination a,
.blog-grid .wp-block-query-pagination .page-numbers {
	align-items: center;
	color: var(--white);
	display: inline-flex;
	font-size: 0.75rem;
	font-weight: 700;
	height: 1.8rem;
	justify-content: center;
	letter-spacing: 0.08em;
	line-height: 1;
	min-width: 1.8rem;
	text-decoration: none;
	text-transform: uppercase;
}

.blog-grid .wp-block-query-pagination a:hover,
.blog-grid .wp-block-query-pagination .current {
	color: var(--green);
}

.blog-card {
	background: var(--black);
	padding: 0.8rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	text-decoration: none;
	color: var(--white);
	transition: background 0.2s;
}
.blog-card:hover { background: #1a1a1a; }

.blog-card-img {
	width: 100%;
	aspect-ratio: 16/9;
	background: var(--black);
	border: 1px solid #1e1e1e;
	overflow: hidden;
	margin-bottom: 0.5rem;
	position: relative;
	padding: 0 !important;
}

.blog-card-img .wp-block-post-featured-image,
.blog-card-img .wp-block-post-featured-image a,
.blog-card-img .wp-block-post-featured-image figure,
.blog-card-img img {
	display: block !important;
	width: 100% !important;
	height: 220px !important;
	margin: 0 !important;
	padding: 0 !important;
	aspect-ratio: unset !important;
	object-fit: cover !important;
}

.blog-card-category {
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--green);
}

.blog-card-category a {
	color: var(--green) !important;
	text-decoration: none !important;
}

.blog-card-title {
	font-family: 'Platypi', serif;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
	flex-grow: 1;
}

.blog-card-title a,
.blog-card-title a:hover {
	color: var(--white) !important;
	text-decoration: none !important;
}

.blog-card-excerpt {
	font-size: 0.78rem;
	color: var(--dim);
	line-height: 1.5;
}

.blog-card-excerpt p {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.blog-card-arrow {
	font-size: 0.75rem;
	color: var(--green);
	margin-top: 0.5rem;
	margin-bottom: 1rem;
	transition: color 0.2s;
}
.blog-card:hover .blog-card-arrow { color: var(--green); }

/* ============================================
   CERTIFICATION CARDS (blog)
   ============================================ */

.cert-grid {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	margin: 2rem 0;
}

.cert-card {
	background: var(--black);
	border: 1px solid var(--mid-gray);
	padding: 1.8rem;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	transition: background 0.2s;
}
.cert-card:hover { background: #1a1a1a; }

.cert-name {
	font-family: 'Montserrat', sans-serif;
	font-size: 0.85rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--white);
}

.cert-applies {
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--green);
}

.cert-desc {
	font-size: 0.8rem;
	color: #aaa;
	line-height: 1.6;
	margin: 0.4rem 0 0;
}

.cert-verdict {
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--white);
	text-transform: uppercase;
	margin-top: 0.6rem;
}

/* ============================================
   HOMEPAGE — SWAP SHOP TEASER
   ============================================ */

.home-categories {
	max-width: 1100px;
	margin: 0 auto 5rem;
	padding: 0 2.5rem;
}

.home-categories-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	border-bottom: 1px solid var(--mid-gray);
	padding-bottom: 1rem;
	margin-bottom: 0;
}

.home-categories-header h2 {
	font-family: 'Platypi', serif;
	font-size: 1.6rem;
	font-weight: 600;
	margin: 0;
}

.see-all-link {
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--green);
}

/* ============================================
   HOMEPAGE HERO
   ============================================ */

.home-hero {
	background: linear-gradient(113deg, #040504, #1c2e1e) !important;
	padding: 8rem 5rem 8rem max(calc((100vw - 1400px) / 2 + 2.5rem), 2.5rem);
	animation: fadeUp 0.6s ease forwards;
	min-height: 70vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-bottom: 0 !important;
}

.home-hero-eyebrow {
	font-family: 'Montserrat', sans-serif !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	letter-spacing: 0.25em !important;
	text-transform: uppercase !important;
	color: var(--green) !important;
	margin: 0 0 3rem;
}

.home-hero h1 {
	font-family: 'Bebas Neue', sans-serif;
	font-size: 200px;
	font-weight: 700;
	line-height: 0.98;
	margin: 0 0 0.1em;
	letter-spacing: 0.01em;
}

.home-hero h1 .hero-line-green {
	color: var(--green);
	display: block;
}

.home-hero-sub {
	font-family: 'Montserrat', sans-serif;
	font-size: 20px !important;
	color: #888888;
	line-height: 1.6;
	max-width: 460px;
	margin: 1.5rem 0 2.5rem;
}

.home-hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; align-self: flex-start !important; margin-top: 1.5rem !important; }

/* ============================================
   HOMEPAGE — "THE DEAL" / LESS GOOGLING
   ============================================ */

.home-deal {
	background: #fafafa !important;
	color: #111;
	margin-top: 0 !important;
}

.home-deal-inner {
	display: grid;
	grid-template-columns: 1.3fr 0.9fr;
	column-gap: 4rem;
	align-items: stretch;
	min-height: 480px;
	max-width: 1100px;
	margin: 0 auto;
}

.home-deal-text {
	padding: 5rem 4rem 5rem 5rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1.2rem;
}

.home-deal-eyebrow,
.home-deal-text .home-deal-eyebrow,
.home-deal-text p.home-deal-eyebrow {
	font-family: 'Montserrat', sans-serif !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	letter-spacing: 0.25em !important;
	text-transform: uppercase !important;
	color: #00bf63 !important;
	margin: 0 0 0.8rem !important;
	line-height: 1 !important;
}

.home-deal-text h2 {
	font-family: 'Platypi', serif;
	font-size: 3rem;
	font-weight: 700;
	line-height: 1.1;
	color: #111;
	margin: 0;
}

.home-deal-text h2 em {
	font-style: italic;
	color: var(--green);
}

.home-deal-text p {
	font-size: 1.125rem !important;
	font-family: 'Montserrat', sans-serif !important;
	color: #111 !important;
	line-height: 1.8 !important;
	margin: 0 !important;
	max-width: 420px;
}

.home-deal-text p em {
	font-style: italic;
	color: #111;
}

.home-deal-link {
	font-family: 'Montserrat', sans-serif !important;
	font-size: 0.875rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.2em !important;
	text-transform: uppercase !important;
	color: #111 !important;
	text-decoration: none !important;
	border-bottom: 3px solid var(--green) !important;
	padding-bottom: 2px !important;
	align-self: flex-start;
}

.home-deal-image {
	position: relative;
	overflow: visible;
	padding: 10rem 0;
}

.home-deal-img-wrap {
	position: relative;
	display: block;
}

.home-deal-image img,
.home-deal-img {
	width: 100%;
	height: 600px;
	object-fit: cover;
	display: block;
}

.home-deal-badge {
	position: absolute;
	bottom: 3rem;
	left: -4rem;
	right: auto;
	background: var(--black);
	padding: 1.2rem 1.5rem;
	white-space: nowrap;
}

.home-deal-badge p,
.home-deal-badge .wp-block-paragraph {
	font-family: 'Platypi', serif !important;
	font-size: 22px !important;
	font-weight: 700 !important;
	line-height: 1.05 !important;
	color: #fafafa !important;
	margin: 0 !important;
	padding: 0 !important;
}

.home-deal-badge p em,
.home-deal-badge .wp-block-paragraph em {
	font-style: italic !important;
	color: var(--green) !important;
	display: block !important;
}

/* ============================================
   HOMEPAGE — STEP-BY-STEP SWAP GUIDE
   ============================================ */

.swap-guide-section {
	background: var(--black);
	padding: 8rem 2.5rem;
}

.swap-guide-header {
	text-align: center;
	margin-bottom: 5rem;
}

.swap-guide-eyebrow {
	font-family: 'Montserrat', sans-serif;
	font-size: 13px !important;
	font-weight: 700;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--green) !important;
	margin: 0 0 2rem;
}

.swap-guide-section h2,
.swap-guide-heading {
	font-family: 'Bebas Neue', sans-serif;
	font-size: 90px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--white);
	margin: 0;
	line-height: 1;
}

.swap-guide {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1.25rem;
	max-width: 1400px;
	margin: 0 auto;
}

.swap-guide-step {
	background: transparent;
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: var(--white);
	transition: opacity 0.2s;
	position: relative;
}
.swap-guide-step:hover { opacity: 0.85; }

.swap-guide-img {
	width: 90%;
	margin: 0 auto;
	aspect-ratio: 3/2;
	object-fit: cover;
	display: block;
	flex-shrink: 0;
	position: relative;
	z-index: 1;
	transition: transform 0.3s ease;
}
.swap-guide-step:hover .swap-guide-img { transform: scale(1.03); }

.swap-guide-info {
	background: linear-gradient(0deg, #1c2e1e, #0f0f0f);
	padding: 3rem 1.5rem 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
	margin-top: -2rem;
	position: relative;
	z-index: 0;
}

.swap-guide-num {
	font-family: 'Bebas Neue', sans-serif !important;
	font-size: 60px !important;
	line-height: 1 !important;
	color: var(--green) !important;
	margin: 0 !important;
}

.swap-guide-title {
	font-family: 'Platypi', serif !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	color: #fafafa !important;
	margin: 0 !important;
}

.swap-guide-title a {
	color: #fafafa !important;
	text-decoration: none !important;
}

.swap-guide-copy {
	font-family: 'Montserrat', sans-serif !important;
	font-size: 14px !important;
	color: #aaaaaa !important;
	line-height: 1.5 !important;
	margin: 0 !important;
}

/* ============================================
   HOMEPAGE — TOP 5 / EDITOR'S PICKS
   ============================================ */

.top5-section {
	background: #fafafa !important;
	padding: 8rem 2.5rem;
}
.top5-section .wp-block-group,
.top5-section .wp-block-paragraph,
.top5-section .wp-block-columns {
	background: transparent !important;
}

.top5-inner {
	max-width: 1400px;
	margin: 0 auto;
}

.top5-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 2.5rem;
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;
	background: transparent !important;
}

.top5-header-left { display: flex; flex-direction: column; gap: 2rem; background: transparent !important; }

.top5-eyebrow {
	font-family: 'Montserrat', sans-serif;
	font-size: 13px !important;
	font-weight: 700;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--green) !important;
	margin: 0;
}

.top5-section h2 {
	font-family: 'Bebas Neue', sans-serif;
	font-size: 66px !important;
	font-weight: 700 !important;
	letter-spacing: 0.02em;
	color: #111;
	margin: 0;
	line-height: 0.95;
}

.top5-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 12px;
	background: transparent;
	border: none;
	max-width: 1100px;
	margin-left: auto !important;
	margin-right: auto !important;
}

.swap-card {
	background: #ffffff !important;
	padding: 0;
	display: flex;
	flex-direction: column;
	border: none;
	overflow: hidden;
	transition: background 0.2s;
}
.swap-card:hover { background: #fafafa !important; }

.swap-badge {
	background: #000;
	color: #fff;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	text-align: center;
	padding: 0.45rem 1rem;
}

.swap-card-img {
	width: 100%;
	aspect-ratio: 1/1;
	background: #fff;
	overflow: hidden;
	margin-bottom: 0;
}
.swap-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.swap-card figure.swap-card-img { margin: 0; border: 1px solid #ddd; }

.swap-type {
	font-family: 'Platypi', serif;
	font-size: 14px !important;
	font-style: italic;
	font-weight: 400;
	color: var(--green) !important;
	margin: 0 0 8px;
	padding: 1rem 1rem 0;
}

.swap-name {
	font-family: 'Montserrat', sans-serif;
	font-size: 14px !important;
	font-weight: 700;
	line-height: 1.3;
	color: #000;
	margin: 0 0 8px !important;
	padding: 0 1rem;
}

.swap-desc {
	font-family: 'Montserrat', sans-serif;
	font-size: 13px !important;
	color: #888888 !important;
	line-height: 1.3 !important;
	flex-grow: 1;
	margin: 0;
	padding: 0 1rem 1rem;
}

.swap-card .wp-block-buttons {
	margin-top: auto;
	width: 100%;
}
.swap-card .wp-block-button,
.swap-card .wp-block-button__link {
	width: 100% !important;
}
.swap-card .wp-block-button__link {
	background: #000 !important;
	color: #fff !important;
	border-radius: 0 !important;
	display: block !important;
	text-align: center !important;
	font-family: 'Montserrat', sans-serif !important;
	font-size: 0.6rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.15em !important;
	text-transform: uppercase !important;
	padding: 0.55rem 1rem !important;
	text-decoration: none !important;
}
.swap-card .wp-block-button__link:hover { opacity: 0.85; color: #fff !important; }

.see-all-link {
	font-family: 'Montserrat', sans-serif;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: #111;
	text-decoration: none;
	border-bottom: 4px solid var(--green);
	padding-bottom: 2px;
}
.see-all-link:hover { color: var(--green); }

/* ============================================
   HOMEPAGE — BLOG TEASER (mint bg)
   ============================================ */

.blog-teaser-section {
	background: #f0fbf5 !important;
	padding: 8rem 2.5rem 8rem;
	text-align: center;
	margin-top: 0 !important;
}

.blog-teaser-eyebrow {
	font-family: 'Montserrat', sans-serif;
	font-size: 13px !important;
	font-weight: 700;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--green) !important;
	width: 100% !important;
	max-width: 100% !important;
	text-align: center !important;
	margin: 0 0 2rem;
}

.blog-teaser-section h2 {
	font-family: 'Platypi', serif;
	font-size: 48px !important;
	font-weight: 700;
	line-height: 1.15;
	color: #111;
	text-align: center !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 0 2.5rem !important;
}

.blog-teaser-section h2 em {
	font-style: italic;
	color: var(--green);
	display: block;
}

.blog-teaser-intro {
	font-family: 'Montserrat', sans-serif;
	font-size: 18px !important;
	color: #555 !important;
	line-height: 1.7;
	max-width: 980px !important;
	margin: 0 auto 3.5rem !important;
}

.btn-green-pill .wp-block-button__link {
	background: var(--green) !important;
	color: var(--white) !important;
	font-family: 'Montserrat', sans-serif !important;
	font-size: 0.7rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.15em !important;
	text-transform: uppercase !important;
	padding: 0.85rem 2.5rem !important;
	border-radius: 2px !important;
	text-decoration: none;
	transition: opacity 0.2s;
}
.btn-green-pill .wp-block-button__link:hover { opacity: 0.85; }

/* Blog cards below teaser (same bg as teaser) */
.blog-cards-section {
	background: #f0fbf5 !important;
	padding: 4rem 2.5rem 5rem;
	margin-top: 0 !important;
}

.blog-cards-inner {
	max-width: 1200px;
	margin: 0 auto;
}

.blog-cards-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2.5rem;
}

.blog-card-white {
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
	text-decoration: none;
	color: #111;
}

.blog-card-white-img {
	width: 100%;
	aspect-ratio: 16/10;
	overflow: hidden;
	background: #eee !important;
}
.blog-card-white-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}
.blog-card-white:hover .blog-card-white-img img { transform: scale(1.03); }

.blog-card-white-title {
	font-family: 'Platypi', serif;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	color: #111;
}

.blog-card-white-excerpt {
	font-size: 0.8rem;
	color: #666;
	line-height: 1.6;
}

/* ============================================
   HOMEPAGE — EMAIL SIGNUP
   ============================================ */

.email-signup-section {
	background: var(--black);
	padding: 6rem 2.5rem;
	text-align: center;
	position: relative;
	overflow: hidden;
}

/* Faded watermark */
.email-signup-section::before {
	content: 'CLEAN AF';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-family: 'Bebas Neue', sans-serif;
	font-size: 225px;
	font-weight: 700;
	color: #141414;
	white-space: nowrap;
	pointer-events: none;
	letter-spacing: 0.05em;
	line-height: 1;
}

.email-signup-eyebrow {
	font-family: 'Montserrat', sans-serif;
	font-size: 13px !important;
	font-weight: 700;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--green) !important;
	margin: 0 0 2rem;
	position: relative;
}

.email-signup-section h2 {
	font-family: 'Bebas Neue', sans-serif !important;
	font-size: 96px !important;
	font-weight: 700 !important;
	line-height: 0.9;
	color: var(--white) !important;
	margin: 0 0 1.5rem;
	letter-spacing: 0.02em;
	position: relative;
	width: 100% !important;
	max-width: 100% !important;
}

.email-signup-section h2 .af { color: var(--green); }

.email-signup-body {
	font-family: 'Montserrat', sans-serif !important;
	font-size: 16px !important;
	color: #888888 !important;
	line-height: 1.7;
	max-width: 600px;
	margin: 0 auto 2rem;
	position: relative;
}

.email-form-stacked {
	width: 340px !important;
	max-width: 340px !important;
	margin: 0 auto !important;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.8rem;
	position: relative;
}

.email-label {
	font-family: 'Montserrat', sans-serif;
	font-size: 0.7rem;
	font-weight: 600;
	color: #888888;
	text-align: left;
	letter-spacing: 0.05em;
	width: 100%;
}

.email-input {
	width: 100% !important;
	max-width: 100% !important;
	background: #0f0f0f;
	border: 1px solid #2a2a2a;
	color: var(--white);
	font-family: 'Montserrat', sans-serif;
	font-size: 0.85rem;
	padding: 1rem 1.2rem;
	outline: none;
	box-sizing: border-box;
}
.email-input::placeholder { color: #555; }

.email-submit {
	width: auto;
	align-self: center;
	background: var(--green);
	color: var(--white);
	border: none;
	font-family: 'Montserrat', sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	padding: 0.9rem 2rem;
	margin-top: 0.6rem;
	cursor: pointer;
	transition: opacity 0.2s;
}
.email-submit:hover { opacity: 0.85; }

.email-disclaimer {
	font-family: 'Montserrat', sans-serif !important;
	font-size: 14px !important;
	color: #888888 !important;
	margin-top: 1.5rem;
	position: relative;
}

.btn-primary {
	display: inline-block;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--black);
	background: var(--green);
	padding: 0.8rem 2rem;
	text-decoration: none;
	transition: opacity 0.2s;
}
.btn-primary:hover { opacity: 0.85; color: var(--black); }

.btn-secondary {
	display: inline-block;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--white);
	border: 1px solid var(--mid-gray);
	padding: 0.8rem 2rem;
	text-decoration: none;
	transition: border-color 0.2s, color 0.2s;
}
.btn-secondary:hover { border-color: var(--green); color: var(--green); }

/* ============================================
   SHOP PAGE — INDIVIDUAL PAGE HERO
   ============================================ */

.shop-page-hero {
	max-width: 1100px;
	margin: 0 auto;
	padding: 3rem 2.5rem 0;
}

.shop-page-hero h1 {
	font-family: 'Platypi', serif;
	font-size: clamp(2.5rem, 8vw, 5.25rem);
	font-weight: 700;
	line-height: 1.05;
	margin: 1rem 0 1rem;
}

.shop-page-intro {
	font-size: 0.88rem;
	color: var(--dim);
	line-height: 1.7;
	max-width: 640px;
	margin: 0 0 3rem;
}

/* ============================================
   SHOP SECTION (group within swap-shop)
   ============================================ */

.shop-section {
	max-width: 1100px;
	margin: 0 auto 5rem;
	padding: 0 2.5rem;
}

.shop-section-header {
	border-bottom: 1px solid var(--mid-gray);
	padding-bottom: 1rem;
	margin-bottom: 0;
}

.shop-section-header h2 {
	font-family: 'Platypi', serif;
	font-size: 2rem;
	font-weight: 600;
	margin: 0;
}

.shop-section-header h2 em {
	font-style: italic;
	color: var(--green);
}

.shop-section-blurb {
	font-family: 'Montserrat', sans-serif;
	font-size: 16px !important;
	color: var(--dim);
	line-height: 1.7;
	max-width: 660px;
	margin: 1.2rem 0 1.5rem;
}

/* ============================================
   CATEGORY LANDING PAGE
   ============================================ */

.category-hero {
	max-width: 1100px;
	margin: 0 auto;
	padding: 3rem 2.5rem 2rem;
}

.category-hero h1 {
	font-family: 'Platypi', serif;
	font-size: clamp(2.5rem, 8vw, 5.25rem);
	font-weight: 700;
	line-height: 1.1;
	margin: 1rem 0 1rem;
}

.category-desc {
	font-size: 0.9rem;
	color: var(--dim);
	line-height: 1.7;
	max-width: 600px;
	margin: 0 0 3rem;
}

/* ============================================
   UTILITY
   ============================================ */

.text-green  { color: var(--green); }
.text-dim    { color: var(--dim); }
.text-muted  { color: #ccc; }
.uppercase   { text-transform: uppercase; }
.mono-label  {
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

/* ============================================
   WORDPRESS BLOCK OVERRIDES
   ============================================ */

.wp-block-group {
	background: var(--black);
}

main.wp-block-group {
	background: transparent !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}


.wp-block-post-content p {
	font-size: 16px;
	line-height: 1.85;
	color: #cccccc;
}

/* Remove default WP padding */
.wp-site-blocks > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	max-width: var(--wp--style--global--content-size);
}


/* ============================================
   SHOP PAGE — NEUTRALIZE WP POST-CONTENT PADDING
   theme.json contentSize (760px) can constrain inner blocks;
   the raw HTML block needs a clean, unpaddded wrapper.
   ============================================ */

.wp-block-post-content {
	padding-left: 0 !important;
	padding-right: 0 !important;
	max-width: none !important;
}

.wp-block-post-content .wp-block-html {
	max-width: none !important;
	padding: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* ============================================
   SHOP PAGE — BREADCRUMB
   ============================================ */

.shop-breadcrumb {
	max-width: 1200px;
	margin: 0 auto !important;
	padding: 1.2rem 40px 0 !important;
	font-family: 'Montserrat', sans-serif;
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.shop-breadcrumb a {
	color: var(--green);
	text-decoration: none;
}

.shop-breadcrumb a:hover { opacity: 0.75; }

.shop-breadcrumb .breadcrumb-sep {
	color: var(--green);
	margin: 0 0.4em;
}

.shop-breadcrumb .breadcrumb-current {
	color: #888888;
}

/* ============================================
   SHOP PAGE — HERO (supplied in page content)
   ============================================ */

.shop-page-hero {
	max-width: 1200px;
	margin: 0 auto !important;
	padding: 3rem 40px 0 !important;
}

.shop-page-hero .hero-eyebrow {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--green);
	margin-bottom: 1rem;
}

/* H1: "NON-TOXIC BAKEWARE" — Montserrat, uppercase, green, small label size */
.shop-page-h1 {
	font-family: 'Montserrat', sans-serif !important;
	font-size: 12px !important;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.25em;
	color: var(--green);
	line-height: 1.1;
	margin: 0 0 1rem;
}

.hero-centered .shop-page-h1 {
	font-weight: 400;
}

.hero-divider {
	width: 60px;
	height: 3px;
	background: var(--green);
	margin: 1.8rem 0;
}

.shop-page-hero.hero-centered {
	text-align: center;
	padding-top: 6rem;
	padding-bottom: 0;
	position: relative;
	overflow: hidden;
	max-width: 100%;
}

.shop-page-hero.hero-centered::before {
	content: '';
	position: absolute;
	width: 220px;
	height: 220px;
	border-radius: 50%;
	background: #04120b;
	pointer-events: none;
	z-index: 0;
	top: 50px;
	left: calc(50% - 560px);
}

.shop-page-hero.hero-centered::after {
	content: '';
	position: absolute;
	width: 310px;
	height: 310px;
	border-radius: 50%;
	background: #04120b;
	pointer-events: none;
	z-index: 0;
	top: 20px;
	right: calc(50% - 600px);
}

.shop-page-hero.hero-centered > * {
	position: relative;
	z-index: 1;
}

.shop-page-hero.hero-centered .shop-page-h1 {
	margin-bottom: 2rem;
}

.shop-page-hero.hero-centered .shop-page-tagline {
	margin: 0 auto 2rem;
	font-size: 48px !important;
	max-width: 900px;
}

.shop-page-hero.hero-centered .shop-page-intro {
	font-size: 18px !important;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 2.5rem;
}

.shop-page-hero.hero-centered .hero-divider {
	width: 100%;
	max-width: 860px;
	height: 1px;
	background: #0f0f0f;
	margin: 0 auto;
}

/* Tagline: the big punchy Platypi statement */
.shop-page-tagline {
	font-family: 'Platypi', serif !important;
	font-size: clamp(2.2rem, 5vw, 3.8rem) !important;
	font-weight: 700;
	line-height: 1.05 !important;
	color: var(--white) !important;
	margin: 0;
	max-width: 680px;
}

.shop-page-tagline em {
	font-style: italic;
	color: var(--green);
}

.shop-page-hero .shop-page-intro {
	font-family: 'Montserrat', sans-serif;
	font-size: 18px;
	line-height: 1.7;
	color: var(--muted);
	max-width: none;
	margin: 0 0 3rem;
}

.shop-page-hero .shop-page-intro a { color: var(--green); }

/* ============================================
   SHOP PAGE — DISCLOSURE
   ============================================ */

.disclosure {
	max-width: 1200px;
	margin: 0 auto 3rem;
	padding: 0 40px;
}

.disclosure p {
	font-size: 14px;
	color: var(--dim);
	line-height: 1.6;
	border-left: 4px solid var(--muted);
	padding-left: 1rem;
	font-style: italic;
}

/* ============================================
   SHOP PAGE — INLINE JUMP NAV
   ============================================ */

.jump-nav-wrap {
	max-width: 1200px;
	margin: 0 auto 7rem;
	padding: 0 40px;
}

.jump-nav-label {
	font-family: 'Montserrat', sans-serif !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	letter-spacing: 0.25em !important;
	text-transform: uppercase !important;
	color: var(--green) !important;
	line-height: 1 !important;
	margin-bottom: 0.8rem;
}

/* Scoped: override the full-width swap-shop-index jump-nav style */
.jump-nav-wrap .jump-nav {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	background: none;
	border: none;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	max-width: none;
}

.jump-nav-wrap .jump-nav a {
	flex: none;
	padding: 0.5rem 1rem;
	border: 1px solid #222;
	color: var(--dim);
	text-align: left;
	background: var(--black);
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	text-decoration: none;
	transition: border-color 0.2s, color 0.2s;
}

.jump-nav-wrap .jump-nav a:hover {
	border-color: var(--green);
	color: var(--green);
	background: var(--black);
}

/* ============================================
   SHOP PAGE — PRODUCT SECTIONS
   ============================================ */

.product-section {
	max-width: 1200px;
	margin: 0 auto 5rem !important;
	padding: 0 40px !important;
}

/* Scoped to .product-section to avoid clashing with the swap-shop-index .section-header */
.product-section .section-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin: 0 0 0.8rem 0;
	padding: 0 0 1.2rem 0;
	border-bottom: 1px solid var(--mid-gray);
	max-width: none;
}

.product-section .section-header h2 {
	font-family: 'Platypi', serif;
	font-size: 1.6rem;
	font-weight: 600;
	margin: 0;
	padding: 0;
	text-align: left;
}

.product-section .section-header h2 em {
	font-style: italic;
	color: var(--green);
}

.product-section .section-blurb {
	font-family: 'Montserrat', sans-serif;
	font-size: 16px;
	color: var(--muted);
	line-height: 1.7;
	max-width: none;
	margin: 0 0 0.6rem 0;
	padding: 0;
}

.product-section .section-tip {
	font-family: 'Montserrat', sans-serif;
	font-size: 14px;
	font-style: italic;
	color: var(--dim);
	line-height: 1.6;
	margin: 0 0 2rem 0;
	padding: 0;
}

.product-section .section-tip strong {
	color: var(--green);
	font-weight: 700;
	font-style: normal;
}

.product-section .section-blurb strong {
	color: #fafafa;
}

.product-section .back-to-top {
	display: block;
	text-align: right;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--dim);
	text-decoration: none;
	margin-top: 2rem;
	transition: color 0.2s;
}
.product-section .back-to-top:hover { color: var(--green); }

/* ============================================
   SHOP PAGE — MORE FROM SHOP + BLOG LINKS
   ============================================ */

.more-section {
	max-width: 1200px;
	margin: 0 auto 5rem;
	padding: 0 40px;
}

.more-section h3 {
	font-family: 'Platypi', serif;
	font-size: 1.2rem;
	font-weight: 600;
	margin-bottom: 1.5rem;
	border-bottom: 1px solid var(--mid-gray);
	padding-bottom: 1rem;
}

.more-section h3 em {
	font-style: italic;
	color: var(--green);
}

.more-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: #0f0f0f;
	border: 1px solid var(--mid-gray);
}

.more-tile {
	background: var(--black);
	padding: 1.5rem;
	text-decoration: none;
	color: var(--white);
	transition: background 0.2s;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}
.more-tile:hover { background: #1a1a1a; }
.more-tile:hover .more-arrow { color: var(--green); }

.more-tile-label {
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--dim);
}

.more-tile-title {
	font-family: 'Platypi', serif;
	font-size: 1rem;
	font-weight: 600;
}

.more-arrow {
	font-size: 0.8rem;
	color: var(--green);
	margin-top: 0.5rem;
}

.blog-section {
	max-width: 1200px;
	margin: 0 auto 5rem;
	padding: 0 40px;
}

.blog-section h3 {
	font-family: 'Platypi', serif;
	font-size: 1.2rem;
	font-weight: 600;
	margin-bottom: 1.5rem;
	border-bottom: 1px solid var(--mid-gray);
	padding-bottom: 1rem;
}

.blog-section h3 em {
	font-style: italic;
	color: var(--green);
}

.blog-callout {
	max-width: 1200px;
	margin: 0 auto 5rem;
	padding: 0 40px;
}

.blog-callout-inner {
	border: 1px solid var(--mid-gray);
	padding: 2rem 2.5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	background: #111111;
}

.blog-callout-text { flex: 1; }

.blog-callout .blog-callout-label {
	font-family: 'Montserrat', sans-serif;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--green);
	margin-bottom: 0.5rem;
}

.blog-callout .blog-callout-title {
	font-family: 'Platypi', serif;
	font-size: 22px;
	font-weight: 600;
	margin-bottom: 0.5rem;
	color: #fafafa;
}

.blog-callout .blog-callout-desc {
	font-size: 14px;
	color: var(--dim);
	line-height: 1.6;
}

.blog-callout-cta {
	display: inline-block;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--black);
	background: var(--green);
	padding: 0.6rem 1.2rem;
	text-decoration: none;
	transition: opacity 0.2s;
	flex-shrink: 0;
}

.blog-callout-cta:hover { opacity: 0.85; }

.blog-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--black);
	border: 1px solid var(--black);
}

.blog-section .blog-grid {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 1px !important;
}

.blog-tile {
	background: #0f0f0f;
	padding: 1.5rem;
	text-decoration: none;
	color: var(--white);
	transition: background 0.2s;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}
.blog-tile:hover { background: var(--black); }
.blog-tile:hover .more-arrow { color: var(--green); }

.blog-tile-label {
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--green);
}

.blog-tile-title {
	font-family: 'Platypi', serif;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
}

/* ============================================
   EXPLAINER CARD
   ============================================ */

.explainer-card-wrap {
	max-width: 1200px;
	margin: 0 auto 4rem;
	padding: 0 40px;
}

.explainer-card {
	background: #111111;
	border: 1px solid var(--mid-gray);
	padding: 1.75rem 2rem;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.explainer-card-eyebrow {
	font-family: 'Montserrat', sans-serif;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--green);
	margin-bottom: 0.2rem;
}

.explainer-card .explainer-card-title {
	font-family: 'Platypi', serif;
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.3;
	color: #fafafa;
}

.explainer-card .explainer-card-body {
	font-size: 0.875rem;
	color: #cccccc;
	line-height: 1.7;
}

.explainer-card .explainer-card-body strong { color: #fafafa; }

/* ============================================
   CATEGORY HUB — product spotlight cards
   ============================================ */

/* ============================================
   POST-SPECIFIC MIGRATION STYLES
   ============================================ */

body.postid-365 .blog-post-wrap .product-callout,
body.postid-564 .blog-post-wrap .product-callout,
body.postid-388 .blog-post-wrap .product-callout {
	margin: 0.8rem 0;
	border-color: #1a1a1a;
	background: #0f0f0f;
}

body.postid-365 .blog-post-wrap .checklist-capture { grid-template-columns: 0.45fr 0.55fr; }
body.postid-365 .blog-post-wrap .checklist-content { padding: 2.5rem 5rem 2.5rem 1.5rem; }
body.postid-365 .blog-post-wrap .checklist-content h3 { font-size: 32px !important; }
body.postid-365 .blog-post-wrap .checklist-content p { font-size: 16px !important; }

body.postid-365 .blog-post-wrap .quick-picks-label,
body.postid-388 .blog-post-wrap .quick-picks-label,
body.postid-396 .blog-post-wrap .quick-picks-label {
	margin-bottom: 0.8rem !important;
}

body.postid-564 .blog-post-wrap .compact-pet-card,
body.postid-564 .blog-post-wrap .pet-pick-card,
body.postid-388 .blog-post-wrap .pet-pick-card {
	align-items: flex-start;
	background: #0f0f0f;
	border: 1px solid #1a1a1a;
	border-radius: 0;
	display: grid !important;
	gap: 1rem;
	grid-template-columns: minmax(0, 1fr) max-content;
	padding: 1.1rem;
}

body.postid-564 .blog-post-wrap .compact-pet-card {
	padding: 1rem 1.15rem !important;
}

body.postid-564 .blog-post-wrap .compact-pet-copy,
body.postid-388 .blog-post-wrap .pet-pick-content {
	min-width: 0;
}

body.postid-564 .blog-post-wrap .compact-pet-copy .callout-label,
body.postid-564 .blog-post-wrap .compact-pet-copy .callout-name,
body.postid-564 .blog-post-wrap .pet-pick-card span,
body.postid-388 .blog-post-wrap .pet-pick-card span {
	display: block;
}

body.postid-564 .blog-post-wrap .compact-pet-cta,
body.postid-564 .blog-post-wrap .pet-pick-button-wrap,
body.postid-388 .blog-post-wrap .pet-pick-button-wrap {
	align-self: center;
	justify-self: end;
	text-align: right;
}

body.postid-564 .blog-post-wrap .compact-pet-cta .callout-cta,
body.postid-564 .blog-post-wrap .pet-pick-card a,
body.postid-388 .blog-post-wrap .pet-pick-card a {
	background: var(--green);
	border-radius: 0;
	color: #000000;
	display: inline-block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	margin-top: 0 !important;
	padding: 0.6rem 0.75rem;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

body.postid-564 .blog-post-wrap .compact-pet-card .callout-label { font-size: 10px; }
body.postid-564 .blog-post-wrap .compact-pet-card .callout-name { margin-top: 0.25rem; }
body.postid-564 .blog-post-wrap .compact-pet-card .callout-desc {
	margin: 0.55rem 0 0.75rem;
	line-height: 1.5;
}

body.postid-564 .blog-post-wrap .pet-pick-grid,
body.postid-388 .blog-post-wrap .pet-pick-grid {
	display: grid;
	gap: 1rem;
	margin: 1.75rem 0 2.5rem;
}

body.postid-564 .blog-post-wrap .pet-pick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.postid-388 .blog-post-wrap .pet-pick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

body.postid-564 .blog-post-wrap .pet-pick-label,
body.postid-388 .blog-post-wrap .pet-pick-label {
	color: var(--green);
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	margin-bottom: 0.35rem;
	text-transform: uppercase;
}

body.postid-388 .blog-post-wrap .image-pick-inner,
body.postid-390 .blog-post-wrap .image-pick-inner,
body.postid-396 .blog-post-wrap .image-pick-inner {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
}

body.postid-359 .blog-post-wrap .product-callout {
	background: #0f0f0f !important;
	border-color: #1a1a1a !important;
}

body.postid-359 .blog-post-wrap .pfas-claim-decoder {
	margin: 2.2rem 0 2.8rem;
	overflow-x: auto;
	width: 100%;
}

body.postid-359 .blog-post-wrap .pfas-claim-grid {
	column-gap: 2rem;
	display: grid;
	grid-template-columns: 1.2fr 1.45fr 0.65fr;
	min-width: 680px;
	row-gap: 0;
}

body.postid-359 .blog-post-wrap .pfas-claim-head,
body.postid-359 .blog-post-wrap .pfas-claim-cell {
	border-bottom: 1px solid #1a1a1a;
	padding: 1rem;
}

body.postid-359 .blog-post-wrap .pfas-claim-head {
	color: #00bf63;
	font-size: 0.62rem;
	font-weight: 800;
	letter-spacing: 0.15em;
	padding-top: 0;
	text-transform: uppercase;
}

body.postid-359 .blog-post-wrap .pfas-claim-cell {
	color: #d7d7d7;
	font-size: 0.92rem;
	line-height: 1.55;
}

body.postid-359 .blog-post-wrap .pfas-claim-label,
body.postid-359 .blog-post-wrap .pfas-verdict {
	color: #ffffff;
	font-weight: 800;
}

body.postid-359 .blog-post-wrap .pfas-claim-grid .pfas-claim-cell:nth-last-child(-n+3) {
	border-bottom: none;
}

body.postid-359 .blog-post-wrap .pfas-claim-cell p {
	margin: 0;
}

body.postid-388 .blog-post-wrap .image-pick-copy,
body.postid-390 .blog-post-wrap .image-pick-copy,
body.postid-396 .blog-post-wrap .image-pick-copy {
	flex: 1 1 360px;
	min-width: 260px;
}

body.postid-388 .blog-post-wrap .image-pick-media,
body.postid-390 .blog-post-wrap .image-pick-media,
body.postid-396 .blog-post-wrap .image-pick-media {
	align-items: center;
	background: #0f0f0f;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	overflow: hidden;
}

body.postid-388 .blog-post-wrap .image-pick-media {
	flex: 0 0 190px;
	height: 190px;
	padding: 0.65rem;
	width: 190px;
}

body.postid-390 .blog-post-wrap .image-pick-media {
	flex: 0 0 200px;
	height: 260px;
	padding: 0.75rem;
	width: 200px;
}

body.postid-396 .blog-post-wrap .image-pick-media {
	flex: 0 0 200px;
	height: 260px;
	padding: 0.75rem;
	width: 200px;
}

body.postid-388 .blog-post-wrap .image-pick-media img,
body.postid-390 .blog-post-wrap .image-pick-media img,
body.postid-396 .blog-post-wrap .image-pick-media img {
	display: block;
	height: 100%;
	object-fit: contain;
	width: 100%;
}

body.postid-396 .blog-post-wrap .image-pick-right {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	flex: 0 0 200px;
	width: 200px;
}

body.postid-396 .blog-post-wrap .image-pick-right .image-pick-media {
	flex: none;
	width: 100%;
}

body.postid-396 .blog-post-wrap .image-pick-right .callout-cta {
	width: 100%;
	box-sizing: border-box;
	text-align: center;
}

body.postid-396 .blog-post-wrap .quick-picks {
	margin-top: 5rem;
}

body.postid-396 .blog-post-wrap .dirty-details {
	margin-top: 1.5rem;
	padding: 1.1rem 1.2rem;
	background: #0f0f0f;
	border-left: 4px solid var(--green);
}

body.postid-396 .blog-post-wrap .dirty-details-label {
	margin: 0 0 0.7rem 0 !important;
	color: #cccccc !important;
	font-size: 0.82rem !important;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 700;
}

body.postid-396 .blog-post-wrap .dirty-details-text {
	margin: 0 !important;
	color: #888888 !important;
	font-size: 0.95rem !important;
	line-height: 1.7 !important;
}

body.postid-388 .blog-post-wrap #chefpaw-maker { margin-top: 3rem !important; }
body.postid-388 .blog-post-wrap #zeal-backup,
body.postid-388 .blog-post-wrap #native-pet-stack,
body.postid-388 .blog-post-wrap #native-pet-yak-chews {
	margin: 3rem 0 !important;
}

body.postid-388 .blog-post-wrap .pet-tool-card {
	background: #0f0f0f;
	border: 1px solid #1a1a1a;
	margin: 2rem 0 2.5rem;
}

body.postid-388 .blog-post-wrap .pet-tool-inner {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
}

body.postid-388 .blog-post-wrap .pet-tool-copy {
	flex: 1 1 360px;
	min-width: 260px;
}

body.postid-388 .blog-post-wrap .pet-tool-card span {
	display: block;
}

body.postid-388 .blog-post-wrap .pet-tool-card .callout-brand {
	margin-top: 0.35rem;
}

body.postid-388 .blog-post-wrap .pet-tool-card .callout-name {
	margin-top: 0.25rem;
}

body.postid-388 .blog-post-wrap .pet-tool-card .callout-desc {
	margin-top: 0.8rem;
}

body.postid-388 .blog-post-wrap .pet-tool-action {
	align-items: center;
	display: flex;
	flex: 0 0 190px;
	justify-content: center;
	width: 190px;
}

body.postid-388 .blog-post-wrap .pet-tool-action img {
	background: #0f0f0f;
	display: block;
	height: 190px;
	object-fit: contain;
	padding: 0.75rem;
	width: 100%;
}

body.postid-388 .blog-post-wrap .pet-tool-card .callout-cta {
	border-radius: 0;
	margin-top: 1rem;
	text-align: center;
}

body.postid-388 .blog-post-wrap .post-body li { margin-bottom: 10px !important; }
body.postid-388 .blog-post-wrap .quick-pick-card a { border-radius: 0; }
body.postid-388 .blog-post-wrap .section-image img {
	display: block;
	width: 100%;
}

body.postid-388 .blog-post-wrap .jerky-image-grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 1.5rem 0 2rem;
}

body.postid-388 .blog-post-wrap .jerky-image-grid figure {
	background: #0f0f0f;
	border: 1px solid #1a1a1a;
	margin: 0;
	overflow: hidden;
}

body.postid-388 .blog-post-wrap .jerky-image-grid img {
	aspect-ratio: 4 / 3;
	display: block;
	object-fit: cover;
	width: 100%;
}

body.postid-390 .blog-post-wrap .image-pick-card {
	background: #0f0f0f;
	border-color: #1a1a1a;
	margin: 3rem 0 3rem;
}

body.postid-390 .blog-post-wrap .image-pick-card .callout-desc strong { color: #cccccc; }

body.postid-392 .blog-post-wrap .stainless-pick-card {
	background: #0f0f0f;
	border: 1px solid #1a1a1a;
	margin: 2.5rem 0 3rem;
}

body.postid-392 .blog-post-wrap .stainless-pick-inner {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
}

body.postid-392 .blog-post-wrap .stainless-pick-copy {
	flex: 1 1 360px;
	min-width: 260px;
}

body.postid-392 .blog-post-wrap .stainless-pick-card span {
	display: block;
}

body.postid-392 .blog-post-wrap .stainless-pick-card .callout-brand {
	margin-top: 0.45rem;
}

body.postid-392 .blog-post-wrap .stainless-pick-card .callout-name {
	margin-top: 0.3rem;
}

body.postid-392 .blog-post-wrap .stainless-pick-card .callout-desc {
	margin-top: 1rem;
}

body.postid-392 .blog-post-wrap .stainless-pick-card .callout-cta {
	margin-top: 1.25rem;
}

body.postid-392 .blog-post-wrap .stainless-pick-action {
	align-items: center;
	display: flex;
	flex: 0 0 190px;
	flex-direction: column;
	gap: 0.9rem;
	justify-content: center;
	width: 190px;
}

body.postid-392 .blog-post-wrap .stainless-pick-action img {
	background: #0f0f0f;
	display: block;
	height: 180px;
	object-fit: contain;
	padding: 0.75rem;
	width: 100%;
}

body.postid-392 .blog-post-wrap .stainless-pick-action .callout-cta {
	margin-top: 0;
	text-align: center;
	width: 100%;
}

body.postid-394 .blog-post-wrap .rosehip-pick-card {
	background: #0f0f0f;
	border: 1px solid #1a1a1a;
	margin: 2.5rem 0 3rem;
}

body.postid-394 .blog-post-wrap .rosehip-pick-inner {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
}

body.postid-394 .blog-post-wrap .rosehip-pick-copy {
	flex: 1 1 360px;
	min-width: 260px;
}

body.postid-394 .blog-post-wrap .rosehip-pick-card span {
	display: block;
}

body.postid-394 .blog-post-wrap .rosehip-pick-card .callout-name {
	margin-top: 0.45rem;
}

body.postid-394 .blog-post-wrap .rosehip-pick-card .callout-cta {
	display: flex;
	justify-content: center;
	margin-top: 0;
	text-align: center;
	width: 100%;
}

body.postid-394 .blog-post-wrap .rosehip-pick-action {
	align-items: center;
	display: flex;
	flex: 0 0 190px;
	flex-direction: column;
	gap: 0.9rem;
	justify-content: center;
	width: 190px;
}

body.postid-394 .blog-post-wrap .rosehip-pick-action img {
	background: #0f0f0f;
	display: block;
	height: 180px;
	object-fit: contain;
	padding: 0.75rem;
	width: 100%;
}

body.postid-380 .ballin-budget-post .post-disclosure,
body.postid-382 .ballin-budget-post .post-disclosure {
	margin-bottom: 3rem;
}

body.postid-380 .ballin-budget-post .toc,
body.postid-382 .ballin-budget-post .toc {
	margin-bottom: 4rem;
}

body.postid-380 .ballin-budget-post .quick-picks,
body.postid-382 .ballin-budget-post .quick-picks {
	margin: 7rem 0 4rem !important;
}

body.postid-380 .ballin-budget-post .quick-pick-card,
body.postid-382 .ballin-budget-post .quick-pick-card {
	border-radius: 0;
}

body.postid-380 .ballin-budget-post .quick-pick-cta,
body.postid-380 .ballin-budget-post .callout-cta,
body.postid-382 .ballin-budget-post .quick-pick-cta,
body.postid-382 .ballin-budget-post .callout-cta {
	border-radius: 0;
	font-size: 10px;
	letter-spacing: 0.12em;
	padding: 0.55rem 0.85rem;
}

body.postid-380 .ballin-budget-post .quick-pick-cta {
	text-align: center;
	width: 170px;
}

body.postid-382 .ballin-budget-post .quick-pick-cta {
	text-align: right;
	width: 270px;
}

body.postid-380 .ballin-budget-post .ballin-section-image,
body.postid-382 .ballin-budget-post .ballin-section-image {
	margin: 1rem 0 2.2rem;
	overflow: hidden;
}

body.postid-380 .ballin-budget-post .ballin-section-image img,
body.postid-382 .ballin-budget-post .ballin-section-image img {
	display: block;
	object-fit: cover;
	width: 100%;
}

body.postid-380 .ballin-budget-post .ballin-section-image img {
	aspect-ratio: 16 / 7;
}

body.postid-382 .ballin-budget-post .ballin-section-image img {
	aspect-ratio: 16 / 8;
}

body.postid-382 .ballin-budget-post .ballin-section-image--cutting-board img {
	object-position: center 68%;
}

body.postid-380 .ballin-budget-post .ballin-product-card,
body.postid-382 .ballin-budget-post .ballin-product-card {
	align-items: start;
	background: #0f0f0f;
	border: 1px solid #1a1a1a;
	border-radius: 0;
	display: grid;
	gap: 1rem;
	grid-template-columns: minmax(0, 1fr) max-content;
	margin: 3rem 0 3rem;
	padding: 1.2rem 1.35rem;
}

body.postid-380 .ballin-budget-post .ballin-product-card span,
body.postid-382 .ballin-budget-post .ballin-product-card span {
	display: block;
}

body.postid-380 .ballin-budget-post .ballin-product-card .callout-brand,
body.postid-382 .ballin-budget-post .ballin-product-card .callout-brand {
	margin-top: 0.4rem;
}

body.postid-380 .ballin-budget-post .ballin-product-card .callout-name,
body.postid-382 .ballin-budget-post .ballin-product-card .callout-name {
	margin-top: 0.25rem;
}

body.postid-380 .ballin-budget-post .ballin-product-card .callout-desc,
body.postid-382 .ballin-budget-post .ballin-product-card .callout-desc {
	margin-top: 0.75rem;
}

body.postid-380 .ballin-budget-post .ballin-card-desc,
body.postid-382 .ballin-budget-post .ballin-card-desc {
	grid-column: 1 / -1;
}

body.postid-380 .ballin-budget-post .ballin-card-button,
body.postid-382 .ballin-budget-post .ballin-card-button {
	align-self: start;
	justify-self: end;
	text-align: right;
}

body.postid-382 .ballin-budget-post .budget-note {
	border-left: 4px solid var(--green);
	color: #888888 !important;
	font-size: 16px !important;
	padding-left: 1rem;
}

body.postid-380 .ballin-budget-post .image-note {
	color: #888888 !important;
	font-size: 12px !important;
	letter-spacing: 0.08em;
	margin: -1.4rem 0 2.2rem !important;
	text-transform: uppercase;
}

body.postid-380 .ballin-budget-post .email-capture p,
body.postid-382 .ballin-budget-post .email-capture p {
	max-width: 760px;
}

body.postid-380 .ballin-budget-post .faq-list p,
body.postid-382 .ballin-budget-post .faq-list p {
	font-size: 16px !important;
	line-height: 1.7 !important;
	margin-bottom: 36px !important;
}

body.postid-380 .ballin-budget-post .faq-list p {
	margin-bottom: 24px !important;
}

body.postid-380 .ballin-budget-post .faq-list p > strong:first-child,
body.postid-382 .ballin-budget-post .faq-list p > strong:first-child {
	display: block;
	font-size: 20px !important;
	line-height: 1.2;
	margin-bottom: 0;
}

body.postid-380 .ballin-budget-post .faq-answer,
body.postid-382 .ballin-budget-post .faq-answer {
	display: block;
	margin-top: 10px;
}

body.postid-370 .blog-post-wrap .avocado-faq {
	margin-top: 4rem;
}

body.postid-370 .blog-post-wrap .avocado-faq h2 {
	margin-bottom: 1.5rem;
}

body.postid-370 .blog-post-wrap .avocado-faq h3 {
	font-size: 20px !important;
	line-height: 1.3;
	margin: 1.6rem 0 0.45rem !important;
}

body.postid-370 .blog-post-wrap .avocado-faq p {
	font-size: 16px !important;
	line-height: 1.65 !important;
	margin-bottom: 0 !important;
}

@media (max-width: 900px) {
	body.postid-388 .blog-post-wrap .pet-pick-grid,
	body.postid-388 .blog-post-wrap .jerky-image-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 720px) {
	body.postid-564 .blog-post-wrap .pet-pick-grid { grid-template-columns: 1fr; }
	body.postid-564 .blog-post-wrap .pet-pick-card,
	body.postid-564 .blog-post-wrap .compact-pet-card {
		align-items: flex-start;
	}
}

@media (max-width: 620px) {
	body.postid-388 .blog-post-wrap .pet-pick-card { grid-template-columns: 1fr; }
	body.postid-388 .blog-post-wrap .pet-pick-button-wrap {
		justify-self: start;
		text-align: left;
	}
	body.postid-390 .blog-post-wrap .image-pick-media,
	body.postid-396 .blog-post-wrap .image-pick-media {
		flex: 0 0 140px;
		height: 180px;
		width: 140px;
	}
	body.postid-380 .ballin-budget-post .ballin-product-card,
	body.postid-382 .ballin-budget-post .ballin-product-card {
		grid-template-columns: 1fr;
	}
	body.postid-380 .ballin-budget-post .ballin-card-button,
	body.postid-382 .ballin-budget-post .ballin-card-button {
		justify-self: start;
		text-align: left;
	}
	body.postid-380 .ballin-budget-post .ballin-section-image img {
		aspect-ratio: 16 / 7;
	}
	body.postid-382 .ballin-budget-post .ballin-section-image img {
		aspect-ratio: 4 / 3;
	}
}

.hub-section {
	max-width: 1200px;
	margin: 0 auto 9rem !important;
	padding: 0 40px !important;
}

.hub-section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	border-bottom: 1px solid var(--mid-gray);
	padding-bottom: 1.25rem;
	margin-bottom: 1.75rem;
}

.hub-section-head h2 {
	font-family: 'Platypi', serif;
	font-size: 2rem;
	font-weight: 600;
	margin: 0;
}

.hub-section-head h2 em {
	font-style: italic;
	color: var(--green);
}

.hub-section-link {
	font-family: 'Montserrat', sans-serif;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--green);
	text-decoration: none;
	white-space: nowrap;
}

.hub-section-link:hover { opacity: 0.75; }

.hub-hero {
	padding-top: 5rem;
	padding-bottom: 1rem;
}

.hub-hero .shop-page-h1 {
	margin-bottom: 2rem;
}

.hub-page-tagline {
	font-family: 'Platypi', serif !important;
	font-size: 72px !important;
	font-weight: 700;
	line-height: 1.05 !important;
	color: var(--white) !important;
	margin: 0 0 2.5rem;
	max-width: 780px;
}

.hub-page-tagline em {
	font-style: italic;
	color: var(--green);
}

.blog-index-hero .shop-page-tagline {
	font-size: clamp(3rem, 8vw, 84px) !important;
}

.shop-page-hero.blog-index-hero,
.shop-page-hero.blog-index-hero .shop-page-intro {
	max-width: 1100px !important;
}

.hub-section-blurb {
	font-family: 'Montserrat', sans-serif;
	font-size: 16px !important;
	color: var(--muted);
	line-height: 1.7;
	margin: 0 0 2rem;
}

.hub-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	margin-bottom: 2rem;
}

.hub-card {
	border: 1px solid var(--mid-gray);
	padding: 2rem 1.75rem;
	display: flex;
	flex-direction: column;
}

.hub-card-label {
	font-family: 'Platypi', serif;
	font-size: 0.85rem;
	font-weight: 700;
	font-style: italic;
	color: var(--dim);
	margin: 0 0 0.6rem;
}

.hub-card-name {
	font-family: 'Montserrat', sans-serif;
	font-size: 1.05rem;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--white);
	margin: 0 0 0.85rem;
}

.hub-card-desc {
	font-family: 'Montserrat', sans-serif;
	font-size: 14px !important;
	color: var(--muted);
	line-height: 1.65;
	flex: 1;
	margin: 0 0 1.5rem;
}

.hub-card-cta {
	display: inline-block;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: #000;
	background: var(--green);
	text-decoration: none;
	padding: 0.65rem 1.1rem;
	margin-top: auto;
	align-self: flex-start;
}

.hub-card-cta:hover { opacity: 0.85; color: #000; }

.hub-avoid {
	font-family: 'Montserrat', sans-serif;
	font-size: 13px !important;
	color: var(--dim) !important;
	font-style: italic;
	line-height: 1.65;
	margin: 0 0 1.5rem;
}

.hub-avoid strong { color: var(--green); font-style: normal; }

.hub-start-here {
	max-width: 1100px;
	margin: 0 auto 5rem;
	padding: 2.5rem;
	border-top: 1px solid var(--mid-gray);
}

.hub-start-here p {
	font-family: 'Montserrat', sans-serif;
	font-size: 15px !important;
	color: var(--dim);
	line-height: 1.7;
	max-width: 600px;
	margin: 0 0 1.25rem;
}

.hub-start-here a {
	font-family: 'Montserrat', sans-serif;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--green);
	text-decoration: none;
}

.hub-start-here a:hover { opacity: 0.75; }

/* ============================================
   START HERE PAGE
   ============================================ */

.sh-body {
	max-width: 860px;
	margin: 0 auto;
	padding: 4.5rem 40px 5rem !important;
}

.sh-body p {
	font-family: 'Montserrat', sans-serif;
	font-size: 17px !important;
	color: var(--muted);
	line-height: 1.85;
	margin-bottom: 1.4rem;
}

.sh-section {
	max-width: 860px;
	margin: 0 auto !important;
	padding: 6rem 40px !important;
	border-top: 1px solid var(--mid-gray);
}

.sh-section-label,
.wp-block-post-content .sh-section-label {
	font-family: 'Montserrat', sans-serif !important;
	font-size: 12px !important;
	font-weight: 400 !important;
	color: var(--green) !important;
	line-height: 1.4 !important;
	margin: 0 0 1rem !important;
}

.sh-section h2 {
	font-family: 'Platypi', serif;
	font-size: clamp(1.4rem, 3.5vw, 2rem) !important;
	font-weight: 600;
	color: var(--white);
	line-height: 1.25;
	margin: 0 0 1.25rem;
}

.sh-section p {
	font-family: 'Montserrat', sans-serif;
	font-size: 17px !important;
	color: var(--muted);
	line-height: 1.85;
	margin-bottom: 1.25rem;
}

.sh-section p strong {
	color: var(--white);
}

.sh-section p a {
	color: var(--green);
	text-decoration: underline;
}

.sh-section p a:hover { opacity: 0.8; }

.sh-five {
	list-style: none;
	padding: 0;
	margin: 1.75rem 0 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
	background: #0f0f0f;
	border: 1px solid var(--mid-gray);
}

.sh-five li {
	background: var(--black);
	padding: 1rem 1.5rem;
	font-family: 'Montserrat', sans-serif;
	font-size: 14px !important;
	color: var(--muted);
	display: flex;
	align-items: baseline;
	gap: 0.85rem;
	line-height: 1.65;
}

.sh-five li .sh-num {
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--dim);
	white-space: nowrap;
	flex-shrink: 0;
}

.sh-five li a {
	color: var(--green);
	font-weight: 700;
	text-decoration: none;
}

.sh-five li a:hover { opacity: 0.8; }

.sh-cta {
	max-width: 100%;
	margin: 0 auto;
	padding: 7rem 40px 8rem;
	position: relative;
	overflow: hidden;
}

.sh-cta::before {
	content: '';
	position: absolute;
	width: 260px;
	height: 260px;
	border-radius: 50%;
	background: #04120b;
	pointer-events: none;
	z-index: 0;
	bottom: 40px;
	left: calc(50% - 520px);
}

.sh-cta::after {
	content: '';
	position: absolute;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background: #04120b;
	pointer-events: none;
	z-index: 0;
	top: 50px;
	right: calc(50% - 490px);
}

.sh-cta-inner {
	position: relative;
	z-index: 1;
	max-width: 860px;
	margin: 0 auto;
	text-align: center;
}

.sh-cta-inner > p:first-child {
	font-family: 'Platypi', serif;
	font-size: clamp(1.3rem, 3vw, 1.75rem) !important;
	color: var(--white);
	line-height: 1.45;
	margin: 0 0 0.75rem;
}

.sh-cta-sub {
	font-family: 'Montserrat', sans-serif !important;
	font-size: 18px !important;
	color: var(--muted) !important;
	line-height: 1.7 !important;
	margin: 0 0 2.5rem !important;
}

.sh-cta-btn {
	font-family: 'Montserrat', sans-serif;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	background: var(--green);
	color: var(--black);
	padding: 0.8rem 1.75rem;
	text-decoration: none;
	display: inline-block;
}

.sh-cta-btn:hover { opacity: 0.85; color: var(--black); }

/* Green rule divider (between sections) */
.sh-green-rule {
	width: 120px;
	height: 4px;
	background: var(--green);
	margin: 5rem auto;
}

/* Honest Disclaimer card */
.sh-disclaimer {
	max-width: 860px;
	margin: 0 auto;
	padding: 6rem 40px;
	border-top: 1px solid var(--mid-gray);
}

.sh-disclaimer-inner {
	background: #111;
	padding: 1.75rem 2rem 2rem;
	position: relative;
}

.sh-disclaimer-label {
	font-family: 'Montserrat', sans-serif !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	letter-spacing: 0.15em !important;
	text-transform: uppercase !important;
	color: var(--green) !important;
	margin: 0 0 1.25rem !important;
}

.sh-disclaimer-quote {
	position: absolute;
	top: 1.5rem;
	right: 1.75rem;
	font-size: 2.5rem;
	color: var(--green);
	line-height: 1;
	font-family: Georgia, serif;
}

.sh-disclaimer-text {
	font-family: 'Montserrat', sans-serif !important;
	font-size: 17px !important;
	color: var(--white) !important;
	line-height: 1.8 !important;
	margin: 0 !important;
}

.sh-disclaimer-text a {
	color: var(--green);
	text-decoration: underline;
}

.sh-section .tip-box {
	margin: 3.5rem 0 0 !important;
}

.sh-section .tip-box p {
	font-size: 17px !important;
	color: var(--muted) !important;
	line-height: 1.85 !important;
	margin: 0 0 0.9rem !important;
}

.sh-section .tip-box p:last-child {
	margin-bottom: 0 !important;
}

.sh-section .tip-box p a {
	color: var(--green);
	text-decoration: underline;
}

.sh-explore {
	max-width: 1100px;
	margin: 0 auto 5rem;
	padding: 2.5rem 40px 0;
}

.sh-explore h3 {
	font-family: 'Platypi', serif;
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--white);
	margin: 0 0 0;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--mid-gray);
}

.sh-explore h3 em {
	color: var(--green);
	font-style: italic;
}

.sh-explore-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 0;
	border: 1px solid var(--mid-gray);
	margin-top: 2.5rem;
}

.sh-explore-tile {
	background: var(--black);
	padding: 1.5rem;
	text-decoration: none;
	color: var(--white);
	transition: background 0.2s;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	border-right: 1px solid var(--mid-gray);
}

.sh-explore-tile:last-child { border-right: none; }
.sh-explore-tile:hover { background: #1a1a1a; }

.sh-explore-num {
	font-family: 'Montserrat', sans-serif;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--green);
}

.sh-explore-title {
	font-family: 'Platypi', serif;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--white);
	line-height: 1.3;
}

.sh-explore-arrow {
	font-size: 0.85rem;
	color: var(--green);
	margin-top: 0.25rem;
}

/* ============================================
   CHECKLIST CAPTURE (blog post email opt-in with image)
   ============================================ */

.checklist-capture {
	border: 1px solid var(--mid-gray);
	margin: 4rem 0 2.5rem;
	display: grid;
	grid-template-columns: 1fr 1fr;
	background: #0f0f0f;
	overflow: hidden;
}

.checklist-image {
	background: #0f0f0f;
	min-height: 240px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem;
}

.checklist-image img {
	width: auto !important;
	height: 100% !important;
	max-height: 340px;
	object-fit: contain;
	display: block;
}

.checklist-content {
	padding: 2.5rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1.4rem;
}

.checklist-content h3 {
	font-family: 'Platypi', serif;
	font-size: 48px !important;
	font-weight: 700;
	line-height: 1.2;
	margin: 0 !important;
}

.checklist-content h3 em { font-style: italic; color: var(--green); }

.checklist-content p {
	font-size: 18px !important;
	color: var(--dim) !important;
	line-height: 1.6 !important;
	margin: 0 !important;
}


.checklist-content form {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	margin-top: 1.2rem;
}

.checklist-content input[type="email"] {
	background: #1a1a1a;
	border: 1px solid #333;
	color: var(--white);
	padding: 0.75rem 1rem;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	width: 100%;
	outline: none;
}

.checklist-content input[type="email"]::placeholder { color: #555; }

.checklist-content .cta-btn {
	display: inline-block;
	width: auto;
	text-align: center;
	padding: 0.75rem 1.5rem;
}

@media (max-width: 600px) {
	.checklist-capture { grid-template-columns: 1fr; }
	.checklist-image { min-height: 160px; }
}

/* ============================================
   QUICK PICKS (blog post TL;DR card rows)
   ============================================ */

.quick-picks {
	border: 1px solid var(--mid-gray);
	padding: 2rem;
	margin: 2.5rem 0 4rem;
	background: #080808;
}

.quick-picks-label,
.wp-block-post-content .quick-picks-label {
	font-size: 14px !important;
	font-weight: 700;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--green) !important;
	margin: 0 0 0.2rem !important;
}

.quick-picks h3 {
	font-family: 'Platypi', serif;
	font-size: 24px !important;
	font-weight: 600;
	margin: 0 0 0.4rem !important;
}

.quick-picks p {
	font-size: 16px !important;
	color: var(--dim) !important;
	line-height: 1.6 !important;
	margin-bottom: 1.4rem !important;
}

.quick-picks-grid {
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
}

.quick-pick-card {
	background: var(--mid-gray);
	padding: 1.2rem 1.5rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
}

.quick-pick-label {
	font-size: 14px;
	color: var(--green);
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.quick-pick-name {
	font-size: 16px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--white);
}

.quick-pick-cta {
	display: inline-block;
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--black);
	background: var(--green);
	padding: 0.55rem 1.1rem;
	text-decoration: none;
	white-space: nowrap;
	flex-shrink: 0;
}

/* ============================================
   COMPARISON TABLE (clean-af-table)
   ============================================ */

.clean-table-container {
	width: 100%;
	overflow-x: auto;
	margin: 2rem 0;
	-webkit-overflow-scrolling: touch;
}

.clean-af-table {
	width: 100%;
	border-collapse: collapse;
	min-width: 600px;
	font-family: 'Montserrat', sans-serif;
	background-color: #0d0d0d;
	text-align: left;
}

.clean-af-table th {
	background-color: var(--green);
	color: var(--black);
	padding: 12px 15px;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 0.65rem;
	letter-spacing: 0.1em;
}

.clean-af-table td {
	padding: 13px 15px;
	border-bottom: 1px solid #1e1e1e;
	vertical-align: top;
	line-height: 1.5;
	color: #bbb;
	font-size: 0.82rem;
}

.clean-af-table tr:nth-child(even) td { background-color: #111; }
.clean-af-table td:first-child { font-weight: 700; color: var(--green); }

.scroll-hint {
	display: none;
	font-size: 0.65rem;
	color: #555;
	margin-bottom: 0.4rem;
	text-align: right;
	letter-spacing: 0.05em;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
	.product-grid         { grid-template-columns: repeat(2, 1fr); }
	.product-grid.four-col { grid-template-columns: repeat(2, 1fr); }
	.tile-grid            { grid-template-columns: repeat(2, 1fr); }
	.related-grid         { grid-template-columns: repeat(2, 1fr); }
	.blog-grid            { grid-template-columns: repeat(2, 1fr); }
	.blog-section .blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
	.more-grid            { grid-template-columns: repeat(2, 1fr); }
	.hub-grid             { grid-template-columns: 1fr; gap: 1rem; }
	.quick-picks-grid     { grid-template-columns: 1fr; }
	.scroll-hint          { display: block; }
	.home-hero            { grid-template-columns: 1fr; }
	.home-hero-image      { display: none; }
	.home-intro-inner     { grid-template-columns: 1fr; gap: 1.5rem; }
	.swap-guide           { grid-template-columns: repeat(3, 1fr); }
	.top5-grid            { grid-template-columns: repeat(2, 1fr); }
	.editors-picks-grid   { grid-template-columns: repeat(3, 1fr); }
	.sh-explore-grid      { grid-template-columns: repeat(3, 1fr); }
	.sh-explore-tile      { border-bottom: 1px solid var(--mid-gray); border-right: 1px solid var(--mid-gray); }
	.sh-explore-tile:last-child { border-right: 1px solid var(--mid-gray); }
}

@media (max-width: 640px) {

	/* ── GLOBAL PADDING RESET — tighter everywhere ── */
	.site-nav             { padding: 0.8rem 1.2rem; }
	.page-hero,
	.post-hero,
	.shop-page-hero,
	.home-hero,
	.blog-index-hero      { padding: 2rem 1.2rem !important; min-height: auto !important; }
	.post-body            { padding-left: 1.2rem; padding-right: 1.2rem; }
	.section-wrap,
	.related,
	.shop-section,
	.home-categories,
	.product-section,
	.disclosure,
	.jump-nav-wrap,
	.more-section,
	.blog-section,
	.hub-section,
	.hub-start-here,
	.sh-body,
	.sh-section,
	.sh-cta,
	.sh-explore,
	.home-deal,
	.top5-section,
	.swap-guide-section,
	.blog-teaser-section,
	.blog-cards-section,
	.email-signup-section { padding-left: 1.2rem !important; padding-right: 1.2rem !important; }
	.banner               { padding: 2rem 1.2rem !important; }
	.hub-section          { padding-top: 2rem !important; padding-bottom: 2rem !important; }

	/* ── HERO — big headline, small eyebrow ── */
	.home-hero            { padding-top: 2rem !important; padding-bottom: 2rem !important; }
	.home-hero h1,
	.home-hero .wp-block-heading { font-size: clamp(3.5rem, 21vw, 85px) !important; line-height: 0.88 !important; letter-spacing: -0.01em !important; }
	.home-hero-eyebrow    { font-size: 0.55rem !important; letter-spacing: 0.22em !important; margin-bottom: 0.8rem !important; }
	.home-hero-sub        { font-size: 0.9rem !important; margin-top: 1rem !important; margin-bottom: 1.2rem !important; }
	.home-hero .wp-block-buttons              { justify-content: flex-start !important; }
	.home-hero .wp-block-button,
	.home-hero .btn-primary                   { display: inline-block !important; width: auto !important; max-width: none !important; }
	.home-hero .wp-block-button__link,
	.btn-primary .wp-block-button__link       { font-size: 10px !important; padding: 0.7rem 1rem !important; white-space: nowrap !important; width: auto !important; display: inline-block !important; }

	/* ── ALL HEADINGS — explicit px, unaffected by html font-size ── */
	.has-bebas-neue-font-family          { font-size: 28px !important; line-height: 1 !important; }
	.has-platypi-font-family             { font-size: 24px !important; line-height: 1.2 !important; }
	h2                                   { font-size: 22px !important; }
	h3                                   { font-size: 18px !important; }

	/* ── SHOP/HUB/BLOG page heroes ── */
	.page-hero h2,
	.shop-page-tagline,
	.blog-index-hero .shop-page-tagline  { font-size: clamp(22px, 7vw, 36px) !important; }
	.hub-page-tagline                    { font-size: clamp(22px, 7vw, 36px) !important; }
	.post-hero h1                        { font-size: clamp(20px, 5.5vw, 30px) !important; }
	.shop-page-h1                        { font-size: 9px !important; }
	.banner h2, .banner h3               { font-size: 22px !important; }
	.banner p                            { font-size: 14px !important; margin-top: 0.5rem !important; }

	/* ── HOMEPAGE SECTIONS ── */
	/* home-deal: force single column */
	.home-deal-inner.wp-block-columns,
	.home-deal .wp-block-columns         { display: flex !important; flex-direction: column !important; grid-template-columns: none !important; column-gap: 0 !important; gap: 1.5rem !important; }
	.home-deal-text.wp-block-column,
	.home-deal-inner .wp-block-column    { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; min-width: 0 !important; margin: 0 !important; }
	.home-deal-image,
	.home-deal-image.wp-block-column     { display: none !important; }
	.home-deal-eyebrow                   { font-size: 0.55rem !important; }

	/* swap guide */
	.swap-guide                          { grid-template-columns: 1fr !important; gap: 1rem !important; }
	.swap-guide-section                  { padding-top: 2rem !important; padding-bottom: 2rem !important; }
	.swap-guide-header                   { margin-bottom: 1.2rem !important; }
	.swap-guide-eyebrow                  { font-size: 0.55rem !important; }
	.swap-guide-heading                  { font-size: 0.9rem !important; letter-spacing: 0.08em !important; margin-top: 0.3rem !important; }
	.swap-guide-step                     { display: grid !important; grid-template-columns: 90px 1fr !important; gap: 1rem !important; align-items: start !important; }
	.swap-guide-img                      { width: 90px !important; height: 90px !important; object-fit: cover !important; display: block !important; border-radius: 4px; }
	.swap-guide-num                      { font-size: 1.2rem !important; margin-bottom: 0.2rem !important; }
	.swap-guide-title                    { font-size: 0.9rem !important; margin: 0.2rem 0 !important; }
	.swap-guide-copy                     { font-size: 0.8rem !important; color: var(--dim); }

	/* top5 */
	.top5-section                        { padding-top: 2rem !important; padding-bottom: 2rem !important; }
	.top5-grid.wp-block-columns          { grid-template-columns: 1fr !important; gap: 1rem !important; }
	.top5-grid .wp-block-column          { width: 100% !important; }
	.top5-header                         { flex-direction: column !important; align-items: flex-start !important; gap: 0.3rem !important; margin-bottom: 1.2rem !important; }
	.top5-eyebrow                        { font-size: 0.55rem !important; }

	/* blog teaser */
	.blog-teaser-section                 { padding-top: 2rem !important; padding-bottom: 1.5rem !important; }
	.blog-teaser-eyebrow                 { font-size: 0.55rem !important; }

	/* blog cards */
	.blog-cards-grid.wp-block-post-template { grid-template-columns: 1fr !important; }
	.blog-card-white                     { margin-bottom: 1.2rem !important; }

	/* email signup */
	.email-signup-section                { padding-top: 2rem !important; padding-bottom: 2.5rem !important; }
	.email-signup-eyebrow                { font-size: 0.55rem !important; }
	.email-signup-body                   { font-size: 0.85rem !important; }

	/* ── GRIDS ── */
	.sh-explore-grid      { grid-template-columns: repeat(2, 1fr); }
	.product-grid         { grid-template-columns: 1fr; }
	.product-grid.two-col { grid-template-columns: 1fr; }
	.tile-grid            { grid-template-columns: repeat(2, 1fr); }
	.related-grid         { grid-template-columns: 1fr; }
	.blog-grid            { grid-template-columns: 1fr; }
	.blog-section .blog-grid { grid-template-columns: 1fr !important; }
	.more-grid            { grid-template-columns: repeat(2, 1fr); }
	.editors-picks-grid   { grid-template-columns: repeat(2, 1fr); }

	/* ── SPECIFIC HIGH-SPECIFICITY OVERRIDES (beat !important px values in desktop CSS) ── */
	.swap-guide-num                      { font-size: 20px !important; }
	.swap-guide-heading                  { font-size: 13px !important; }
	.top5-section h2                     { font-size: 28px !important; line-height: 1 !important; }
	.blog-teaser-section h2              { font-size: 26px !important; }
	.email-signup-section h2             { font-size: 48px !important; line-height: 0.95 !important; }
	.hub-page-tagline                    { font-size: clamp(22px, 7vw, 36px) !important; }
	.blog-index-hero .shop-page-tagline  { font-size: clamp(22px, 7vw, 36px) !important; }
	.author-name                         { font-size: 22px !important; }
	.checklist-content h3               { font-size: 20px !important; }

	/* ── MISC ── */
	.jump-nav             { flex-wrap: wrap; }
	.jump-nav a           { flex: 1 0 40%; }
	.blog-callout-inner   { flex-direction: column; }
	.site-footer          { flex-direction: column; gap: 0.8rem; text-align: center; }
	.footer-links         { flex-wrap: wrap; justify-content: center; gap: 0.3rem; }
	.blog-filter .blog-filter-pill { flex: 0 0 calc(33.33% - 0.35rem); font-size: 0.5rem; letter-spacing: 0.06em; }

	/* ── BODY & UI TEXT ── */
	.product-card-desc    { font-size: 13px !important; }
	.hub-card-desc        { font-size: 12px !important; }
	.hub-section-blurb    { font-size: 13px !important; }
	.blog-card-excerpt    { font-size: 13px !important; }
	.author-box p         { font-size: 13px !important; }
	.post-disclosure      { font-size: 12px !important; }
	.toc                  { font-size: 13px !important; }
	.shop-page-intro,
	.hero-sub             { font-size: 14px !important; }
	.home-hero-sub        { font-size: 14px !important; }
	.home-deal-eyebrow,
	.top5-eyebrow,
	.swap-guide-eyebrow,
	.blog-teaser-eyebrow,
	.email-signup-eyebrow { font-size: 9px !important; letter-spacing: 0.2em !important; }
}

/* ── MOBILE NAV OVERLAY ── */
.wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation__responsive-container-overlay {
	background: #000000 !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container a {
	color: #fafafa !important;
	font-family: 'Montserrat', sans-serif !important;
	font-size: 1.1rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
	color: #00bf63 !important;
}
.wp-block-navigation__responsive-container-close svg,
.wp-block-navigation__responsive-container-open svg {
	color: #fafafa !important;
	stroke: #fafafa !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	color: #fafafa !important;
}

/* ============================================
   MOBILE LAYOUT FIXES — specificity overrides
   ============================================ */

@media (max-width: 768px) {
	.top5-grid.wp-block-columns { grid-template-columns: repeat(2, 1fr) !important; }
	.home-deal-inner.wp-block-columns { grid-template-columns: 1fr !important; min-height: unset !important; }
}

@media (max-width: 640px) {
	.top5-grid.wp-block-columns { grid-template-columns: 1fr !important; }
	.home-deal-inner.wp-block-columns { grid-template-columns: 1fr !important; min-height: unset !important; }
}

@media (max-width: 640px) {
	.email-signup-section h2 { font-size: clamp(2.2rem, 14vw, 72px) !important; font-weight: 700 !important; }
	.email-signup-section::before { font-size: 30vw !important; }
}

@media (max-width: 640px) {
	.email-signup-section::before { top: 30% !important; }
	.email-submit { width: 100% !important; align-self: stretch !important; }
}

@media (max-width: 640px) {
	.site-footer-inner    { grid-template-columns: 1fr !important; text-align: center !important; gap: 0.6rem !important; padding: 1.5rem !important; }
	.site-footer .footer-copy { text-align: center !important; }
	.footer-links         { flex-wrap: wrap !important; justify-content: center !important; }
}

@media (max-width: 640px) {
	.email-signup-section::before { font-size: 18vw !important; top: 28% !important; opacity: 0.5; }
}