/*!
Theme Name: Paradise Compounds
Theme URI: https://underscores.me/
Author: Automattic
Author URI: https://automattic.com/
Description: Hi. I'm a starter theme called <code>_s</code>, or <em>underscores</em>, if you like. I'm a theme meant for hacking so don't use me as a <em>Parent Theme</em>. Instead try turning me into the next, most awesome, WordPress theme out there. That's what I'm here for.
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: Paradise Compounds
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

_s is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');

:root {
	/* Harmonious Clinical Light Palette */
	--bg-base: #ffffff;                    /* Pure White Background */
	--bg-section-alt: #f8fafc;             /* Soft Light Slate Background */
	--bg-surface: #ffffff;                 /* Pure White Card Surfaces */
	--bg-image-holder: #f1f5f9;            /* Soft Blueish-Grey for Image Backdrops */
	--border-light: #e2e8f0;               /* Clean Border */
	--border-hover: #cbd5e1;               /* Slightly darker border on neutral hover */
	--border-focus: #0ea5e9;               /* Light Focus Blue/Teal */
	
	--text-primary: #0f172a;               /* Dark Slate Navy */
	--text-secondary: #475569;             /* Slate Grey */
	--text-muted: #94a3b8;                 /* Muted Grey */
	
	--accent-green: #10b981;               /* Vivid Mint Green (Purity / Status) */
	--accent-green-bg: rgba(16, 185, 129, 0.08);
	--accent-blue: #0ea5e9;                /* Telemetry Blue (Buttons / Links) */
	--accent-blue-bg: rgba(14, 165, 233, 0.08);
	
	--btn-primary-bg: #0f172a;             /* Solid Dark Slate Button */
	--btn-primary-text: #ffffff;
	
	/* Compatibility variables for our existing layouts */
	--bg-glass: #ffffff;
	--border-glass: #e2e8f0;
	--border-glow: #e2e8f0;
	--accent: #0ea5e9;
	--accent-glow: rgba(14, 165, 233, 0.15);
	--accent-hover: #0284c7;
	--accent-alt: #d97706;                 /* Telemetry Amber/Dark Orange */
	--accent-alt-glow: rgba(217, 119, 6, 0.15);

	/* Interaction states */
	--btn-primary-hover: #1e293b;          /* Darker slate for primary button hover */
	--text-on-dark: #ffffff;               /* Text/icons on dark (slate/green) surfaces */
	--focus-ring: 0 0 0 3px var(--accent-blue-bg);  /* Unified accessible focus ring */

	/* Accent surface tints (soft bg + border for badges, tags, notices) */
	--accent-blue-soft: #f0f9ff;           /* Sky-50 surface */
	--accent-blue-border: #bae6fd;         /* Sky-200 border */
	--accent-green-soft: #ecfdf5;          /* Emerald-50 surface */
	--accent-green-border: #a7f3d0;        /* Emerald-200 border */

	/* Brand sage — Paradise accent, used sparingly for verification/trust cues.
	   Ties to the palm-leaf logo. NOT for primary buttons. */
	--brand-sage: #78C5A7;                 /* Brand accent (verified dots, stamp) */
	--brand-sage-soft: #eef7f3;            /* Faint sage surface for badge tints */
	--brand-sage-border: #cfe9dd;          /* Soft sage hairline border */

	/* Semantic feedback colors */
	--color-success: #166534;
	--color-success-bg: #f0fdf4;
	--color-success-border: #bbf7d0;
	--color-info: #0369a1;
	--color-info-bg: var(--accent-blue-soft);
	--color-info-border: var(--accent-blue-border);
	--color-danger: #991b1b;
	--color-danger-strong: #7f1d1d;
	--color-danger-accent: #ef4444;        /* Bright accent: left borders, required marks */
	--color-danger-bg: #fef2f2;
	--color-danger-border: #fecaca;

	/* Typography */
	--font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--font-mono: 'Space Mono', 'Fira Code', 'Courier New', monospace;
	
	/* Spacing & Borders */
	--radius-sm: 4px;
	--radius-md: 6px;
	--radius-lg: 8px;
	--radius-xl: 16px;                      /* IP-style soft card corners */
	--radius-pill: 999px;                   /* IP-style fully-rounded pill buttons */
	--transition-smooth: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

	/* IP-inspired neutral surfaces (kept on Paradise slate palette) */
	--bg-page: #f5f5f6;                     /* Light gray page backdrop */
	--bg-card: #ffffff;                     /* White card surface */
	--bg-card-muted: #f1f2f4;               /* Subtle inset/well surface */
	--border-soft: #e6e8eb;                 /* Hairline card border */
	--eyebrow-color: #8a93a3;               /* Uppercase letter-spaced eyebrow */
	--ink: #0f172a;                         /* Near-black primary ink (slate) */
	--ink-soft: #475569;                    /* Body text */
	--container-wide: 1240px;               /* Page content max width */
	
	/* Shadows */
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
	--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
	--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
	--shadow-glow: 0 0 15px var(--accent-glow);
	--shadow-glow-amber: 0 0 15px var(--accent-alt-glow);
	--shadow-card: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
}

/*--------------------------------------------------------------
# Responsive breakpoint policy
----------------------------------------------------------------
Use these three canonical breakpoints site-wide (in px, not em):
	600px  — phone / small tablet boundary (single-column grids)
	768px  — tablet boundary (header switches to mobile nav)
	900px  — small-desktop boundary (multi-column content layouts collapse)
Always use px, never em (no 37.5em / 48em). When a min/max pair must not overlap,
the max-width complement is one less than the next breakpoint: 599 / 767 / 899.
--------------------------------------------------------------*/

/*--------------------------------------------------------------

>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
	margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
	display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
	background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
	font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
	border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
	vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
	display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
	display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	color: var(--text-primary);
	font-family: var(--font-sans);
	font-size: 1rem;
	line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
	font-family: var(--font-sans);
	font-weight: 700;
	line-height: 1.25;
	color: var(--text-primary);
}

/* Shared content heading scale. Component title classes (.hero-title,
   .section-title, .page-title, etc.) override these via higher specificity. */
h1 {
	font-size: 2.5rem;
}

h2 {
	font-size: 2rem;
}

h3 {
	font-size: 1.5rem;
}

h4 {
	font-size: 1.25rem;
}

h5 {
	font-size: 1.1rem;
}

h6 {
	font-size: 0.95rem;
}

p {
	margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: var(--bg-section-alt);
	font-family: "Courier 10 Pitch", courier, monospace;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
	border-bottom: 1px dotted var(--text-muted);
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
	background: var(--bg-base);
}

hr {
	background-color: var(--border-light);
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 0 0 1.5em 3em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: 700;
}

dd {
	margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

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

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/* Links
--------------------------------------------- */
a {
	color: var(--accent);
	text-decoration: none;
	transition: var(--transition-smooth);
}

a:visited {
	color: var(--accent);
}

a:hover,
a:focus,
a:active {
	color: var(--accent-hover);
	text-shadow: 0 0 8px var(--accent-glow);
}

a:focus {
	outline: none;
}

/* Visible keyboard focus (does not show on mouse click). */
a:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid var(--accent);
	border-radius: var(--radius-sm);
	background: var(--bg-surface);
	color: var(--accent);
	font-family: var(--font-mono);
	font-weight: 700;
	line-height: 1;
	padding: 0.8em 1.4em;
	cursor: pointer;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	transition: var(--transition-smooth);
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	background: var(--accent);
	color: var(--bg-base);
	box-shadow: var(--shadow-glow);
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	outline: none;
	border-color: var(--accent-hover);
}

/* Visible keyboard focus for buttons. */
button:focus-visible,
input[type="button"]:focus-visible,
input[type="reset"]:focus-visible,
input[type="submit"]:focus-visible {
	outline: none;
	border-color: var(--accent);
	box-shadow: var(--focus-ring);
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: var(--text-primary);
	background-color: var(--bg-surface);
	border: 1px solid var(--border-glass);
	border-radius: var(--radius-sm);
	padding: 8px 12px;
	font-family: var(--font-sans);
	transition: var(--transition-smooth);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: var(--focus-ring);
}

select {
	border: 1px solid var(--border-light);
}

textarea {
	width: 100%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/
#page {
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
	background: var(--bg-base);
	overflow-x: hidden;
}

/* Seafoam green gradient backdrop on every page except the home page,
   matching the hero overlay used on the front page. */
body:not(.home) #page {
	background: linear-gradient(180deg, rgba(180, 232, 205, 0.92) 0%, rgba(160, 222, 196, 0.82) 55%, var(--bg-page) 100%);
	background-attachment: fixed;
	background-repeat: no-repeat;
}

.site-header {
	width: 100%;
	background: #ffffff;
	border-bottom: 1px solid var(--border-glass);
	margin-bottom: 3rem;
	position: relative;
}

.header-container {
	max-width: 100% !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 1.5rem 2rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.site-branding {
	flex: 1;
	display: flex;
	align-items: center;
}

.branding-link {
	display: inline-flex;
	align-items: center;
	gap: 0.9rem;
	text-decoration: none;
}

.site-logo-img {
	display: block;
	height: 56px;
	width: auto;
	flex: 0 0 auto;
}

.site-title {
	display: flex;
	flex-direction: column;
	justify-content: center;
	font-family: var(--font-sans);
	font-weight: 700;
	line-height: 1.02;
	margin: 0;
}

.site-title .wordmark-top,
.site-title .wordmark-bottom {
	display: block;
	font-size: 1.5rem;
	color: var(--text-primary);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.site-title a {
	color: var(--text-primary);
}

.site-description {
	font-family: var(--font-mono);
	font-size: 0.8rem;
	color: var(--text-muted);
	margin: 0.25rem 0 0;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.main-navigation {
	flex: 0;
}

.main-navigation ul {
	display: flex;
	gap: 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.main-navigation a {
	font-family: var(--font-mono);
	font-size: 0.9rem;
	color: var(--text-secondary);
	text-transform: uppercase;
	transition: var(--transition-smooth);
}

.main-navigation a:hover {
	color: var(--accent);
	text-shadow: var(--shadow-glow);
}

.site-main {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 2rem 4rem;
}

.site-footer {
	text-align: center;
	background: #ffffff;
	padding: 3rem 0;
	border-top: 1px solid var(--border-glass);
	color: var(--text-muted);
	font-family: var(--font-mono);
	font-size: 0.8rem;
}


/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Navigation
--------------------------------------------- */
.main-navigation {
	display: block;
	width: auto;
}

.main-navigation ul {
	display: none;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation ul ul {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	float: left;
	position: absolute;
	top: 100%;
	left: -999em;
	z-index: 99999;
}

.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	display: block;
	left: auto;
}

.main-navigation ul ul a {
	width: 200px;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	left: auto;
}

.main-navigation li {
	position: relative;
}

.main-navigation a {
	display: block;
	text-decoration: none;
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
	display: block;
}

@media screen and (min-width: 600px) {

	.menu-toggle {
		display: none;
	}

	.main-navigation ul {
		display: flex;
	}
}

.site-main .comment-navigation,
.site-main
.posts-navigation,
.site-main
.post-navigation {
	margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
	display: block;
}

.post,
.page {
	margin: 0 0 1.5em;
}

.updated:not(.published) {
	display: none;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
	margin: 0 0 1.5em;
}

.widget select {
	max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--text-primary);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-md);
	clip: auto !important;
	clip-path: none;
	color: var(--text-on-dark);
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}

/*--------------------------------------------------------------
# Home Page Layouts
--------------------------------------------------------------*/

/* Hero Section */
.home-hero {
	position: relative;
	/* Full-bleed: break out of the .site-main max-width so the background spans edge to edge. */
	width: 100vw;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	background: url('assets/images/hero-bg.png') no-repeat center center;
	background-size: cover;
	min-height: 580px;
	display: flex;
	align-items: center;
	padding: 4rem 0;
	overflow: hidden;
	margin-bottom: 0;
	box-shadow: var(--shadow-md);
	border-top: 1px solid var(--border-light);
	border-bottom: 1px solid var(--border-light);
}

/* Hero sits flush against the header on the front page. */
.home .site-header {
	margin-bottom: 0;
}

.hero-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.7) 60%, rgba(240, 249, 255, 0.85) 100%);
	z-index: 1;
}

.hero-content {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 2rem;
}

/* Keeps the hero text/buttons at their original column width, aligned with the page content. */
.hero-content-inner {
	max-width: 650px;
}

.iso-badge {
	display: inline-block;
	font-family: var(--font-sans);
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--color-success);
	background: var(--brand-sage-soft);
	border: 1px solid var(--brand-sage-border);
	padding: 0.35rem 0.85rem;
	border-radius: 50px;
	letter-spacing: 0.05em;
	margin-bottom: 1.5rem;
}

.hero-title {
	font-family: var(--font-sans);
	font-size: 3rem;
	font-weight: 700;
	line-height: 1.15;
	color: var(--text-primary);
	margin: 0 0 1.5rem;
}

.hero-subtitle {
	font-size: 1.1rem;
	color: var(--text-secondary);
	line-height: 1.6;
	margin-bottom: 2.5rem;
}

.hero-actions {
	display: flex;
	gap: 1rem;
}

.btn-explore,
.btn-outline {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	padding: 0.8rem 1.6rem !important;
	height: auto !important;
	line-height: 1.2 !important;
	font-size: 0.9rem !important;
	font-weight: 700 !important;
	font-family: var(--font-mono) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
	border-radius: var(--radius-sm) !important;
	transition: var(--transition-smooth) !important;
}

.btn-explore {
	background: var(--text-primary) !important;
	color: var(--bg-base) !important;
	border: 1px solid var(--text-primary) !important;
}

.btn-explore:hover {
	background: var(--btn-primary-hover) !important;
	border-color: var(--btn-primary-hover) !important;
	color: var(--bg-base) !important;
	box-shadow: var(--shadow-md) !important;
}

.btn-outline {
	background: transparent !important;
	color: var(--accent-blue) !important;
	border: 1px solid var(--accent-blue-border) !important;
}

.btn-outline:hover {
	background: var(--accent-blue-soft) !important;
	border-color: var(--accent-blue) !important;
	box-shadow: none !important;
}

/* Value Highlights */
.value-highlights {
	/* Full-bleed so the border/banner spans edge to edge. */
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	border-top: 1px solid var(--border-light);
	border-bottom: 1px solid var(--border-light);
	padding: 1.5rem 0;
	margin-bottom: 4rem;
	background: transparent;
}

.value-highlights-inner {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 2rem;
}

.highlight-item {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.25rem;
	background: transparent;
	border: none;
	border-radius: 0;
	padding: 0 1.5rem;
	box-shadow: none;
}

.highlight-item:not(:last-child) {
	border-right: 1px solid var(--border-light);
}

.highlight-icon {
	font-size: 1.75rem;
	background: transparent;
	border: none;
	padding: 0;
	border-radius: 0;
	color: var(--text-primary);
}

.highlight-text {
	display: flex;
	flex-direction: column;
}

.highlight-label {
	font-family: var(--font-sans);
	font-size: 0.75rem;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 500;
}

.highlight-value {
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--text-primary);
}

/* Featured Compounds Section */
.featured-compounds-section {
	margin-bottom: 5rem;
}

.section-header-wrap {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 2.5rem;
	border-bottom: 1px solid var(--border-light);
	padding-bottom: 1rem;
}

.section-title {
	font-family: var(--font-sans);
	font-size: 2rem;
	font-weight: 700;
	color: var(--text-primary);
	margin: 0 0 0.5rem;
}

.section-subtitle {
	color: var(--text-secondary);
	margin: 0;
	font-size: 0.95rem;
}

.view-all-link {
	font-family: var(--font-mono);
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--accent);
	text-transform: uppercase;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	transition: var(--transition-smooth);
}

.view-all-link:hover {
	color: var(--accent-hover);
}

.view-all-link:hover .arrow {
	transform: translateX(4px);
}

.view-all-link .arrow {
	transition: var(--transition-smooth);
	display: inline-block;
}

/* Scientific Rigor Section */
.rigor-section {
	background: var(--bg-section-alt);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-lg);
	padding: 4rem 3rem;
	margin-bottom: 5rem;
	box-shadow: var(--shadow-sm);
}

.rigor-grid {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 4rem;
	align-items: center;
}

.rigor-description {
	color: var(--text-secondary);
	font-size: 1.05rem;
	line-height: 1.6;
	margin-bottom: 2.5rem;
}

.rigor-features-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.rigor-feature-item {
	display: flex;
	gap: 1.25rem;
	background: var(--bg-surface);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-md);
	padding: 1.25rem;
	box-shadow: var(--shadow-sm);
}

.feature-icon {
	font-size: 1.25rem;
	flex-shrink: 0;
	background: var(--bg-section-alt);
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-sm);
	border: 1px solid var(--border-light);
}

.feature-text {
	display: flex;
	flex-direction: column;
}

.feature-title {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--text-primary);
	margin: 0 0 0.25rem;
}

.feature-desc {
	color: var(--text-secondary);
	font-size: 0.9rem;
	margin: 0;
	line-height: 1.5;
}

.rigor-image-wrap {
	display: flex;
	justify-content: center;
}

.coa-shadow-box {
	position: relative;
	background: var(--bg-surface);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-md);
	padding: 1rem;
	max-width: 420px;
	box-shadow: var(--shadow-lg);
}

.coa-image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-sm);
}

.verified-stamp {
	position: absolute;
	bottom: -1rem;
	right: -1rem;
	background: var(--text-primary);
	border: 1px solid var(--text-primary);
	padding: 0.6rem 1.2rem;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
	display: flex;
	align-items: center;
	gap: 0.65rem;
}

.stamp-icon {
	font-size: 1.1rem;
}

.stamp-text {
	display: flex;
	flex-direction: column;
}

.stamp-label {
	font-family: var(--font-mono);
	font-size: 0.65rem;
	color: var(--text-muted);
	text-transform: uppercase;
	line-height: 1;
}

.stamp-value {
	font-family: var(--font-sans);
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--brand-sage);
	line-height: 1.2;
}

/* Info Grid Section */
.info-grid-section {
	margin-bottom: 5rem;
}

.info-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 2rem;
}

.info-card {
	background: var(--bg-surface);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-md);
	padding: 2.5rem 2rem;
	box-shadow: var(--shadow-md);
	transition: var(--transition-smooth);
}

.info-card:hover {
	border-color: var(--border-focus);
	transform: translateY(-3px);
}

.info-tag {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: 0.65rem;
	font-weight: 700;
	color: var(--accent-blue);
	border: 1px solid var(--accent-blue-border);
	background: var(--accent-blue-soft);
	padding: 0.25rem 0.5rem;
	border-radius: var(--radius-sm);
	letter-spacing: 0.05em;
	margin-bottom: 1.25rem;
}

.info-title {
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--text-primary);
	margin: 0 0 0.75rem;
}

.info-desc {
	color: var(--text-secondary);
	font-size: 0.9rem;
	line-height: 1.6;
	margin: 0;
}

/* Responsive Overrides */
@media screen and (max-width: 900px) {
	.rigor-section {
		padding: 3rem 1.5rem;
	}
	.rigor-grid {
		grid-template-columns: 1fr;
		gap: 3rem;
	}
	.rigor-image-wrap {
		order: -1;
	}
	.home-hero {
		min-height: auto;
		padding: 3rem 0;
	}
	.hero-title {
		font-size: 2.25rem;
	}
	.value-highlights-inner {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
	.highlight-item:not(:last-child) {
		border-right: none;
		border-bottom: 1px solid var(--border-light);
		padding-bottom: 1rem;
	}
}

/* Stack section headers (title + "view all" link) on phones so they don't collide. */
@media screen and (max-width: 600px) {
	.section-header-wrap {
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
	}
}

/* Legal Compliance Pages Styling */
.legal-page-content {
	max-width: 100%;
	margin: 0 auto;
	padding: 2rem 2.5rem;
	color: var(--text-secondary);
	line-height: 1.7;
}

.legal-page-content h2 {
	font-family: var(--font-sans);
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--text-primary);
	margin: 2.5rem 0 1rem;
	border-bottom: 1px solid var(--border-light);
	padding-bottom: 0.5rem;
}

.legal-page-content p {
	margin-bottom: 1.5rem;
}

.legal-highlight {
	background-color: var(--color-danger-bg);
	border-left: 4px solid var(--color-danger-accent);
	color: var(--color-danger);
	padding: 1.25rem 1.5rem;
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
	font-size: 0.95rem;
	margin-bottom: 2.5rem;
	line-height: 1.6;
}

.legal-highlight strong {
	color: var(--color-danger-strong);
}

/* FAQ Page Styling */
.faq-page-content {
	max-width: 100%;
	margin: 0 auto;
	padding: 2rem 0;
}

.faq-item {
	background: var(--bg-surface);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-md);
	padding: 1.75rem 2rem;
	margin-bottom: 1.5rem;
	box-shadow: var(--shadow-sm);
	transition: var(--transition-smooth);
}

.faq-item:hover {
	border-color: var(--border-focus);
	box-shadow: var(--shadow-md);
}

.faq-question {
	font-family: var(--font-sans);
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--text-primary);
	margin: 0 0 0.75rem;
}

.faq-answer {
	color: var(--text-secondary);
	line-height: 1.6;
	margin: 0;
}

.faq-answer strong {
	color: var(--text-primary);
}

.faq-answer a {
	color: var(--accent-blue);
	font-weight: 500;
	text-decoration: underline;
}

/* COA Library Page Styling */
.coa-library-wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: 2rem 0;
}

.coa-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 2rem;
	margin-top: 2rem;
}

.coa-card {
	background: var(--bg-surface);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-md);
	padding: 2rem;
	box-shadow: var(--shadow-sm);
	transition: var(--transition-smooth);
	display: flex;
	flex-direction: column;
}

.coa-card:hover {
	border-color: var(--brand-sage);
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

.coa-card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1.25rem;
	font-size: 0.75rem;
}

.coa-badge-tag {
	font-family: var(--font-mono);
	font-weight: 700;
	color: var(--accent-green);
	background: var(--accent-green-bg);
	padding: 0.2rem 0.5rem;
	border-radius: var(--radius-sm);
	letter-spacing: 0.05em;
}

.coa-tested-date {
	color: var(--text-muted);
	font-family: var(--font-mono);
}

.coa-compound-name {
	font-family: var(--font-sans);
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--text-primary);
	margin: 0 0 1rem;
}

.coa-meta-list {
	list-style: none;
	margin: 0 0 1.5rem 0;
	padding: 0;
	border-top: 1px solid var(--border-light);
	border-bottom: 1px solid var(--border-light);
	padding: 1rem 0;
	flex-grow: 1;
}

.coa-meta-list li {
	display: flex;
	justify-content: space-between;
	margin-bottom: 0.5rem;
	font-size: 0.9rem;
}

.coa-meta-list li:last-child {
	margin-bottom: 0;
}

.meta-label {
	color: var(--text-secondary);
}

.meta-value {
	color: var(--text-primary);
	font-weight: 500;
}

.meta-value.font-mono {
	font-family: var(--font-mono);
}

.meta-value.text-green {
	color: var(--accent-green);
	font-weight: 700;
}

.coa-download-btn {
	text-align: center;
	display: block;
	width: 100%;
	font-size: 0.85rem;
	padding: 0.75rem 1rem;
	border: 1px solid var(--text-primary);
	background: var(--text-primary);
	color: var(--text-on-dark);
	border-radius: var(--radius-sm);
	font-family: var(--font-mono);
	font-weight: 600;
	text-transform: uppercase;
	transition: var(--transition-smooth);
}

.coa-download-btn:hover {
	background: var(--btn-primary-hover);
	border-color: var(--btn-primary-hover);
	color: var(--text-on-dark);
	box-shadow: var(--shadow-sm);
}

/* Compliance Footer Styling */
.site-footer {
	border-top: 1px solid var(--border-light);
	background: #ffffff;
	padding: 4rem 2rem 2rem;
	color: var(--text-secondary);
	font-family: var(--font-sans);
}

.footer-widgets {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1.5fr;
	gap: 3rem;
	padding-bottom: 3rem;
	border-bottom: 1px solid var(--border-light);
	text-align: left;
}

.footer-column h3.footer-title {
	font-family: var(--font-sans);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--text-primary);
	margin: 0 0 1rem;
}

.footer-column h4.footer-heading {
	font-family: var(--font-mono);
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--text-primary);
	margin: 0 0 1.25rem;
	letter-spacing: 0.05em;
}

/* Footer brand lockup — mirrors the header (logo + stacked wordmark). */
.footer-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.9rem;
	text-decoration: none;
	margin: 0 0 1.25rem;
}

.footer-logo-img {
	display: block;
	height: 56px;
	width: auto;
	flex: 0 0 auto;
}

.footer-wordmark {
	display: flex;
	flex-direction: column;
	justify-content: center;
	font-family: var(--font-sans);
	font-weight: 700;
	line-height: 1.02;
}

.footer-wordmark .wordmark-top,
.footer-wordmark .wordmark-bottom {
	display: block;
	font-size: 1.5rem;
	color: var(--text-primary);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.footer-disclaimer {
	font-size: 0.85rem;
	line-height: 1.6;
	color: var(--text-secondary);
}

.footer-disclaimer strong {
	color: var(--text-primary);
}

.footer-links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-links li {
	margin-bottom: 0.75rem;
}

.footer-links a {
	color: var(--text-secondary);
	font-size: 0.9rem;
	transition: var(--transition-smooth);
}

.footer-links a:hover {
	color: var(--accent-blue);
	text-shadow: none;
}

.security-text {
	font-size: 0.85rem;
	line-height: 1.5;
	margin-bottom: 1.25rem;
}

.security-badges {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.security-badge {
	font-family: var(--font-mono);
	font-weight: 700;
	font-size: 0.7rem;
	color: var(--text-secondary);
	border: 1px solid var(--border-light);
	background: var(--bg-base);
	padding: 0.3rem 0.6rem;
	border-radius: var(--radius-sm);
}

.site-info {
	max-width: 1200px;
	margin: 0 auto;
	padding-top: 2rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 0.8rem;
	color: var(--text-muted);
}

.site-info p.copyright {
	margin: 0;
}

@media screen and (max-width: 900px) {
	.footer-widgets {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}
}

/* Page Header & Title Styling */
.page .entry-header,
.page-header {
	text-align: center;
	margin-bottom: 3rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--border-light);
}

.page .entry-title,
.page-title {
	font-family: var(--font-sans);
	font-size: 2.25rem;
	font-weight: 700;
	color: var(--text-primary);
	margin: 0 0 0.5rem;
	letter-spacing: -0.02em;
}

.page-description {
	font-size: 1.05rem;
	color: var(--text-secondary);
	max-width: 700px;
	margin: 0 auto;
	line-height: 1.6;
}

/* Page Content Area Styling */
.page .entry-content {
	max-width: 100%;
	margin: 0 auto;
}

/* Full Width Overrides for Custom Templates and WooCommerce */
.page-template-page-coa-library .site-main,
.woocommerce-page .site-main {
	max-width: 1200px;
	margin: 0 auto;
}

.page-template-page-coa-library .entry-content,
.woocommerce-page .entry-content {
	max-width: 100%;
}

/* Center main content container on pages, single posts, and archives when there is no sidebar */
.page #primary,
.single-post #primary,
.archive:not(.post-type-archive-product):not(.tax-product_cat):not(.tax-product_tag) #primary,
.search #primary {
	max-width: 1200px;
	margin: 0 auto;
}

/* Custom Header Navigation & Icon Links */
.nav-container {
	display: flex;
	align-items: center;
	gap: 2.5rem;
	flex-wrap: nowrap !important;
}

.nav-menu {
	display: flex;
	gap: 2rem;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	white-space: nowrap !important;
	flex-wrap: nowrap !important;
}

.nav-menu li {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

/* "My Account" lives in the hamburger dropdown on mobile only. */
.nav-menu-account {
	display: none;
}

.nav-menu a {
	font-family: var(--font-mono);
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--text-secondary);
	text-transform: uppercase;
	transition: var(--transition-smooth);
}

.nav-menu a:hover {
	color: var(--accent-blue) !important;
	text-shadow: none !important;
}

.nav-icons {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	border-left: 1px solid var(--border-light);
	padding-left: 1.25rem;
}

.nav-icon-link {
	font-size: 1.25rem;
	color: var(--text-secondary);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	transition: var(--transition-smooth);
	text-decoration: none !important;
	text-shadow: none !important;
}

.nav-icon-link:hover {
	color: var(--accent-blue) !important;
}

.cart-icon-link {
	position: relative;
}

.cart-count-badge {
	position: absolute;
	top: -6px;
	right: -8px;
	background: var(--accent-green);
	color: var(--text-on-dark);
	font-family: var(--font-mono);
	font-size: 0.65rem;
	font-weight: 700;
	min-width: 16px;
	height: 16px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 3px;
	box-shadow: var(--shadow-sm);
	line-height: 1;
}

/* Mobile menu toggle (hamburger) — hidden on desktop. */
.menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid var(--border-light);
	border-radius: 6px;
	color: var(--text-secondary);
	cursor: pointer;
	padding: 0.4rem;
	line-height: 0;
	transition: var(--transition-smooth);
}

.menu-toggle:hover {
	color: var(--accent-blue);
	border-color: var(--accent-blue);
}

.menu-toggle .menu-toggle-icon {
	display: block;
}

.menu-toggle .icon-close {
	display: none;
}

.main-navigation.toggled .menu-toggle .icon-menu {
	display: none;
}

.main-navigation.toggled .menu-toggle .icon-close {
	display: block;
}

@media screen and (max-width: 768px) {
	.header-container {
		flex-direction: row;
		gap: 1rem;
		padding: 1.25rem 0.85rem;
	}

	/* Scale the logo + wordmark down on mobile. */
	.site-logo-img {
		height: 42px;
	}

	.site-title .wordmark-top,
	.site-title .wordmark-bottom {
		font-size: 1.1rem;
	}

	.main-navigation {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 1rem;
	}

	/* Show the hamburger button on mobile. */
	.menu-toggle {
		display: flex;
		order: 2;
	}

	.nav-container {
		flex-direction: row !important;
		gap: 1.25rem !important;
		flex-wrap: nowrap !important;
	}

	.nav-icons {
		order: 1;
		border-left: none !important;
		padding-left: 0 !important;
		margin-top: 0 !important;
		flex-wrap: nowrap !important;
	}

	/* Account moves into the hamburger dropdown; keep only cart in the bar. */
	.nav-icons .account-pill-link {
		display: none !important;
	}

	.nav-menu-account {
		display: block;
	}

	/* Collapse the menu links by default; reveal as a dropdown panel when toggled. */
	.nav-menu {
		display: none !important;
	}

	.main-navigation.toggled .nav-menu {
		display: flex !important;
		flex-direction: column !important;
		gap: 0 !important;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: #ffffff;
		border-bottom: 1px solid var(--border-glass);
		box-shadow: var(--shadow-sm);
		padding: 0.5rem 0;
		z-index: 999;
	}

	.main-navigation.toggled .nav-menu li {
		width: 100%;
	}

	.main-navigation.toggled .nav-menu a {
		display: block;
		padding: 0.85rem 1.5rem;
	}

	.main-navigation.toggled .nav-menu li + li a {
		border-top: 1px solid var(--border-light);
	}
}

/*--------------------------------------------------------------
# IP Redesign Layer
----------------------------------------------------------------
InstantPeptides-inspired restyle (June 2026). Keeps the Paradise
palette (slate ink, blue/green accents, Outfit) but adopts the IP
visual language: light-gray page, white hairline cards, large
radii, fully-rounded pill buttons, uppercase eyebrows, sentence-
case nav. Appended last on purpose so it wins the cascade —
edit here, not in the sections above.
--------------------------------------------------------------*/

/* ---- Page canvas ---- */
body,
#page {
	background: var(--bg-page);
}

/* ---- Global buttons → pills ---- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button {
	font-family: var(--font-sans);
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
	border-radius: var(--radius-pill);
	background: var(--btn-primary-bg);
	color: var(--btn-primary-text);
	border: 1px solid var(--btn-primary-bg);
	padding: 0.75em 1.6em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.button:hover {
	background: var(--btn-primary-hover);
	border-color: var(--btn-primary-hover);
	color: var(--btn-primary-text);
	box-shadow: var(--shadow-md);
}

/* Anchors styled as buttons: override the global link colors so the
   label stays white on the dark pill (a:visited would otherwise win). */
a.button,
a.button:link,
a.button:visited {
	color: var(--btn-primary-text);
}

a.button:hover,
a.button:focus,
a.button:active {
	color: var(--btn-primary-text);
	text-shadow: none;
}

/* ---- Eyebrow utility (uppercase letter-spaced section label) ---- */
.section-eyebrow {
	display: block;
	font-family: var(--font-sans);
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--eyebrow-color);
	text-transform: uppercase;
	letter-spacing: 0.18em;
	margin-bottom: 0.6rem;
}

/* ---- Header ---- */
/* ---- Top promo banner ---- */
.promo-banner {
	background: var(--ink);
	color: var(--text-on-dark);
	text-align: center;
}

.promo-banner-text {
	max-width: var(--container-wide);
	margin: 0 auto;
	padding: 0.55rem 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	font-family: var(--font-sans);
	font-size: 0.82rem;
	font-weight: 500;
	letter-spacing: 0.02em;
}

.promo-banner-text strong {
	font-weight: 700;
}

.promo-banner-icon {
	color: var(--brand-sage);
	flex: 0 0 auto;
}

.site-header {
	background: #ffffff;
	border-bottom: 1px solid var(--border-soft);
}

.header-container {
	max-width: var(--container-wide) !important;
	margin: 0 auto !important;
	padding: 0.85rem 1.25rem;
}

.site-logo-img {
	height: 48px;
	border-radius: var(--radius-md);
}

.site-title .wordmark-top,
.site-title .wordmark-bottom {
	font-size: 1.05rem;
	letter-spacing: 0.04em;
}

.main-navigation {
	flex: 1;
}

.nav-container {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 2rem;
}

.nav-menu {
	margin: 0 auto !important;
}

.main-navigation .nav-menu a {
	font-family: var(--font-sans);
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--text-secondary);
	text-transform: none;
	letter-spacing: 0;
}

.main-navigation .nav-menu a:hover {
	color: var(--ink);
	text-shadow: none;
}

/* Account pill + cart circle (IP right cluster) */
.main-navigation .account-pill-link,
.main-navigation .account-pill-link:visited {
	display: inline-flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0.5rem;
	background: var(--bg-card);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-pill);
	padding: 0.5rem 1.1rem;
	color: var(--ink);
	font-family: var(--font-sans);
	font-size: 0.88rem;
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
	white-space: nowrap;
	transition: var(--transition-smooth);
}

.main-navigation .account-pill-link:hover {
	border-color: var(--border-hover);
	box-shadow: var(--shadow-sm);
	color: var(--ink);
	text-shadow: none;
}

.account-pill-label {
	white-space: nowrap;
}

.main-navigation .cart-icon-link,
.main-navigation .cart-icon-link:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: var(--bg-card);
	border: 1px solid var(--border-soft);
	border-radius: 50%;
	color: var(--ink);
	transition: var(--transition-smooth);
}

.main-navigation .cart-icon-link:hover {
	border-color: var(--border-hover);
	box-shadow: var(--shadow-sm);
	color: var(--ink);
	text-shadow: none;
}

/* ---- Hero (IP centered layout) ---- */
.home-hero.ip-hero {
	background:
		radial-gradient(ellipse 70% 60% at 50% 0%, rgba(255, 255, 255, 0.9) 0%, rgba(245, 245, 246, 0) 70%),
		url('assets/images/hero-bg.png') no-repeat center center;
	background-size: cover;
	min-height: 0;
	padding: 5.5rem 0 4.5rem;
	border-top: none;
	box-shadow: none;
	border-bottom: 1px solid var(--border-soft);
}

.ip-hero .hero-overlay {
	background: linear-gradient(180deg, rgba(180, 232, 205, 0.92) 0%, rgba(160, 222, 196, 0.82) 55%, var(--bg-page) 100%);
}

.ip-hero .hero-content-inner {
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.hero-eyebrow-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--font-sans);
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--text-secondary);
	background: var(--bg-card);
	border: 1px solid var(--brand-sage-border);
	border-radius: var(--radius-pill);
	padding: 0.4rem 1rem;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	margin-bottom: 2rem;
}

.hero-eyebrow-pill::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--brand-sage);
	flex: 0 0 auto;
}

.ip-hero .hero-title {
	font-size: 4.2rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1.04;
	text-transform: uppercase;
	margin-bottom: 1.25rem;
}

.hero-title-strong {
	color: var(--ink);
}

.hero-title-muted {
	color: #4a5252;
}

.hero-tagline {
	font-family: var(--font-sans);
	font-size: 0.8rem;
	font-weight: 600;
	color: #000000;
	text-transform: uppercase;
	letter-spacing: 0.28em;
	margin: 0 0 1.5rem;
}

.ip-hero .hero-subtitle {
	max-width: 560px;
	margin: 0 auto 2.25rem;
	font-size: 1.05rem;
}

.ip-hero .hero-actions {
	justify-content: center;
	margin-bottom: 3.5rem;
}

/* Hero stats row */
.hero-stats {
	display: flex;
	justify-content: center;
	gap: 4rem;
	border-top: 1px solid var(--border-soft);
	padding-top: 2.25rem;
	width: 100%;
	max-width: 560px;
}

.hero-stat {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.hero-stat-value {
	font-family: var(--font-sans);
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--ink);
	line-height: 1;
}

.hero-stat-label {
	font-family: var(--font-sans);
	font-size: 0.7rem;
	font-weight: 500;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.12em;
}

/* Hero buttons → pills */
.btn-explore,
.btn-outline {
	font-family: var(--font-sans) !important;
	font-weight: 600 !important;
	font-size: 0.95rem !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	border-radius: var(--radius-pill) !important;
	padding: 0.85rem 2rem !important;
}

.btn-outline {
	background: var(--bg-card) !important;
	color: var(--ink) !important;
	border: 1px solid var(--border-soft) !important;
}

.btn-outline:hover {
	background: var(--bg-card) !important;
	border-color: var(--border-hover) !important;
	box-shadow: var(--shadow-sm) !important;
}

/* ---- Value highlights → 4 white feature cards ---- */
.value-highlights {
	border-top: none;
	border-bottom: none;
	padding: 3.5rem 0;
	margin-bottom: 1.5rem;
	background: transparent;
}

.value-highlights-inner {
	grid-template-columns: repeat(4, 1fr);
	gap: 1.25rem;
	max-width: var(--container-wide);
}

.highlight-item {
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 0.85rem;
	background: var(--bg-card);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-xl);
	padding: 1.6rem;
	text-align: left;
}

.highlight-item:not(:last-child) {
	border-right: 1px solid var(--border-soft);
}

.highlight-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--ink);
}

.highlight-value {
	font-size: 1rem;
}

.highlight-desc {
	font-size: 0.85rem;
	color: var(--text-secondary);
	line-height: 1.55;
	margin-top: 0.25rem;
}

/* ---- Section headers ---- */
.section-header-wrap {
	border-bottom: none;
	padding-bottom: 0;
}

.section-title {
	font-size: 2.1rem;
	letter-spacing: -0.01em;
}

.view-all-link,
.view-all-link:visited {
	font-family: var(--font-sans);
	font-size: 0.92rem;
	font-weight: 500;
	color: var(--text-secondary);
	text-transform: none;
	letter-spacing: 0;
}

.view-all-link:hover {
	color: var(--ink);
	text-shadow: none;
}

/* ---- Rigor + info cards: soften to IP card language ---- */
.rigor-section {
	background: var(--bg-card);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-xl);
	box-shadow: none;
}

.rigor-feature-item {
	background: var(--bg-card-muted);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-lg);
	box-shadow: none;
}

.feature-icon {
	background: var(--bg-card);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-md);
	color: var(--ink);
}

.info-card {
	background: var(--bg-card);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-xl);
	box-shadow: none;
}

/* ---- Footer (IP 4-column + legal block) ---- */
.site-footer {
	text-align: left;
	background: #ffffff;
	border-top: 1px solid var(--border-soft);
	padding: 4rem 0 2rem;
	font-family: var(--font-sans);
}

.footer-widgets {
	max-width: var(--container-wide);
	margin: 0 auto;
	padding: 0 2rem 2.5rem;
}

.footer-tagline {
	font-size: 0.9rem;
	color: var(--text-secondary);
	line-height: 1.6;
	margin: 1rem 0 1.25rem;
	max-width: 280px;
}

.footer-support-pill,
.footer-support-pill:visited {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: var(--bg-card);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-pill);
	padding: 0.55rem 1.2rem;
	color: var(--ink);
	font-size: 0.85rem;
	font-weight: 500;
	transition: var(--transition-smooth);
}

.footer-support-pill:hover {
	border-color: var(--border-hover);
	box-shadow: var(--shadow-sm);
	color: var(--ink);
	text-shadow: none;
}

.footer-heading {
	font-family: var(--font-sans);
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--eyebrow-color);
	text-transform: uppercase;
	letter-spacing: 0.16em;
}

.footer-links a {
	font-family: var(--font-sans);
	font-size: 0.92rem;
	color: var(--text-secondary);
	text-transform: none;
}

.footer-links a:hover {
	color: var(--ink);
}

.footer-legal {
	max-width: var(--container-wide);
	margin: 0 auto;
	padding: 2rem 2rem 0;
	border-top: 1px solid var(--border-soft);
}

.footer-legal-text {
	font-family: var(--font-sans);
	font-size: 0.8rem;
	color: var(--text-muted);
	line-height: 1.6;
	margin: 0 0 0.85rem;
	max-width: 880px;
}

.site-info {
	max-width: var(--container-wide);
	margin: 0 auto;
	padding: 1rem 2rem 0;
	border-top: none;
	text-align: left;
}

.site-info .copyright {
	font-family: var(--font-sans);
	font-size: 0.8rem;
	color: var(--text-muted);
}

/* ---- Responsive ---- */
@media screen and (max-width: 900px) {
	.value-highlights-inner {
		grid-template-columns: repeat(2, 1fr);
	}

	.ip-hero .hero-title {
		font-size: 3rem;
	}

	.hero-stats {
		gap: 2.5rem;
	}
}

@media screen and (max-width: 600px) {
	.value-highlights-inner {
		grid-template-columns: 1fr;
	}

	.legal-page-content {
		padding: 1.5rem 1.25rem;
	}

	.ip-hero .hero-title {
		font-size: 2.4rem;
	}

	.hero-stats {
		flex-direction: column;
		gap: 1.5rem;
		align-items: center;
	}

	.ip-hero .hero-actions {
		flex-direction: column;
		width: 100%;
	}

	.account-pill-label {
		display: none;
	}

	.account-pill-link {
		width: 40px;
		height: 40px;
		padding: 0;
		justify-content: center;
		border-radius: 50%;
	}
}

/* ---- Page headers (About / Contact / COA / legal pages) ---- */
.page .entry-header,
.page-header {
	text-align: left;
	border-bottom: none;
	padding: 1.5rem 0 0.5rem;
	margin-bottom: 1.5rem;
}

.page .entry-title,
.page-title {
	font-family: var(--font-sans);
	font-size: 3rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--ink);
	text-transform: none;
}

.page-description {
	font-size: 1.05rem;
	color: var(--text-secondary);
	max-width: 640px;
	margin: 0;
}

/* ---- COA library → IP "Lab Test Results" card language ---- */
.coa-card {
	background: var(--bg-card);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-xl);
	box-shadow: none;
}

.coa-badge-tag {
	font-family: var(--font-sans);
	background: var(--brand-sage-soft);
	border: 1px solid var(--brand-sage-border);
	color: var(--color-success);
	border-radius: var(--radius-pill);
	padding: 0.2rem 0.6rem;
	letter-spacing: 0.06em;
}

.coa-download-btn,
.coa-download-btn:visited {
	border-radius: var(--radius-pill) !important;
	font-family: var(--font-sans) !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	font-weight: 600 !important;
	color: var(--text-on-dark) !important;
}

.coa-filter-btn {
	border-radius: var(--radius-pill) !important;
	font-family: var(--font-sans) !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	font-weight: 500 !important;
	border: 1px solid var(--border-soft) !important;
	background: var(--bg-card) !important;
}

.coa-filter-btn.active {
	background: var(--btn-primary-bg) !important;
	color: var(--btn-primary-text) !important;
	border-color: var(--btn-primary-bg) !important;
}

/* ---- Generic entry content cards on legal/FAQ pages ---- */
.legal-page-content,
.faq-item {
	background: var(--bg-card);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-xl);
	box-shadow: none;
}

/* ============================================================
   Content pages (About / Contact / FAQ) — shared theme language
   Mirrors the COA Library card system: soft xl radius, hairline
   border, dark-slate headings, pill buttons. No inline styles.
   ============================================================ */

/* Lead/intro paragraph that sits directly under the page title */
.page-lead {
	font-size: 1.15rem;
	line-height: 1.7;
	color: var(--text-secondary);
	max-width: 760px;
	margin: 0 0 2.5rem;
}

/* Responsive card grid (About feature cards, Contact methods) */
.content-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.5rem;
	margin-bottom: 3rem;
}

/* Generic content card — matches COA / FAQ card language */
.content-card {
	background: var(--bg-card);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-xl);
	padding: 2rem;
	transition: var(--transition-smooth);
}

.content-card:hover {
	border-color: var(--border-hover);
	box-shadow: var(--shadow-sm);
}

.content-card h3 {
	font-family: var(--font-sans);
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--text-primary);
	margin: 0 0 0.75rem;
}

.content-card p {
	margin: 0;
	color: var(--text-secondary);
	line-height: 1.7;
}

.content-card p + p {
	margin-top: 0.75rem;
}

.content-card a {
	color: var(--accent-blue);
	font-weight: 500;
	word-break: break-word;
}

/* Uppercase letter-spaced label inside a card (e.g. contact method) */
.card-eyebrow {
	display: block;
	font-family: var(--font-sans);
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--eyebrow-color);
	text-transform: uppercase;
	letter-spacing: 0.18em;
	margin-bottom: 0.6rem;
}

/* Centered call-to-action panel */
.cta-panel {
	text-align: center;
	background: var(--bg-card);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-xl);
	padding: 3rem 2rem;
	margin-bottom: 1rem;
}

.cta-panel h2 {
	font-size: 1.6rem;
	margin: 0 0 0.75rem;
	color: var(--text-primary);
}

.cta-panel p {
	color: var(--text-secondary);
	max-width: 560px;
	margin: 0 auto 1.75rem;
	line-height: 1.6;
}

/* Left-align the FAQ intro to match the rest of the content pages */
.faq-intro {
	text-align: left;
	padding: 0;
}

/* ----------------------------------------------------------------
   Mobile typography scale
   ----------------------------------------------------------------
   The desktop heading sizes (page titles 3rem, section titles 2.1rem,
   product titles 2.4rem, base h1/h2 2.5/2rem) are oversized on phones.
   These overrides tune the type down for small screens across every
   page. Appended last so they win over the IP-layer rules above.
---------------------------------------------------------------- */
@media screen and (max-width: 768px) {
	.page .entry-title,
	.page-title {
		font-size: 2.25rem;
	}

	.section-title {
		font-size: 1.85rem;
	}

	.single-product div.product .summary .product_title {
		font-size: 2rem;
	}
}

@media screen and (max-width: 600px) {
	h1 {
		font-size: 1.9rem;
	}

	h2 {
		font-size: 1.6rem;
	}

	h3 {
		font-size: 1.3rem;
	}

	.page .entry-title,
	.page-title {
		font-size: 1.85rem;
	}

	.page-description {
		font-size: 0.98rem;
	}

	.section-title {
		font-size: 1.55rem;
	}

	.single-product div.product .summary .product_title {
		font-size: 1.7rem;
	}

	.ip-hero .hero-title {
		font-size: 2.4rem;
	}

	.hero-subtitle,
	.ip-hero .hero-subtitle {
		font-size: 1rem;
	}
}