/* ==========================================================================
   Peptyde theme layer — simple, clean design system over Porto.
   Class-only (MCP content is run through wp_kses_post; no inline styles).
   ========================================================================== */

:root {
	/* Navy core */
	--pep-navy-900: #0b1b34;
	--pep-navy-800: #102a4c;
	--pep-navy-700: #163963;

	/* Neutrals */
	--pep-ink: #14233a;
	--pep-bg: #ffffff;
	--pep-bg-alt: #f5f7fa;
	--pep-line: #e6eaf0;
	--pep-muted: #5b6678;

	/* Single accent */
	--pep-accent: #2f80ed;
	--pep-accent-dark: #1f63c0;

	/* Gradient */
	--pep-grad: linear-gradient(135deg, var(--pep-navy-900) 0%, var(--pep-navy-700) 100%);

	/* Spacing scale */
	--pep-s1: .5rem;
	--pep-s2: 1rem;
	--pep-s3: 1.5rem;
	--pep-s4: 2.5rem;
	--pep-s5: 4rem;
	--pep-s6: 6rem;

	--pep-radius: 14px;
	--pep-radius-sm: 8px;
	--pep-pill: 999px;
	--pep-shadow: 0 10px 30px rgba(11, 27, 52, .08);
	--pep-shadow-hover: 0 16px 40px rgba(11, 27, 52, .14);
	--pep-maxw: 1180px;
	--pep-ease: cubic-bezier(.22, .61, .36, 1);

	/* Make Porto/Woo accents match ours */
	--porto-primary-color: var(--pep-accent);
	--porto-skin-color: var(--pep-accent);
}

/* --------------------------------------------------------------------------
   Header — floating-pill nav over navy gradient
   -------------------------------------------------------------------------- */
#header,
#header .header-wrapper {
	background: var(--pep-grad);
}

#header .main-menu li.menu-item > a {
	border-radius: var(--pep-pill);
	padding: .5rem 1.1rem;
	color: rgba(255, 255, 255, .82);
	transition: background .25s var(--pep-ease), color .25s var(--pep-ease);
}

#header .main-menu li.menu-item > a:hover,
#header .main-menu li.menu-item.active > a,
#header .main-menu li.menu-item > a.current {
	background: rgba(255, 255, 255, .14);
	color: #fff;
}

/* Sticky shrink (Porto toggles #header.sticky-header) */
#header.sticky-header .main-menu-wrap {
	background: var(--pep-grad);
	box-shadow: var(--pep-shadow);
	padding-block: .35rem;
}

#header.sticky-header .main-menu-wrap .logo img {
	max-height: 34px;
	transition: max-height .25s var(--pep-ease);
}

/* --------------------------------------------------------------------------
   Layout helpers
   -------------------------------------------------------------------------- */
.pep-section {
	padding: var(--pep-s6) 0;
}

.pep-container {
	max-width: var(--pep-maxw);
	margin-inline: auto;
	padding-inline: var(--pep-s3);
}

.pep-bg-alt {
	background: var(--pep-bg-alt);
}

.pep-bg-navy {
	background: var(--pep-grad);
	color: #fff;
}

.pep-center {
	text-align: center;
}

.pep-eyebrow {
	display: inline-block;
	font-size: .8rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--pep-accent);
	margin-bottom: var(--pep-s2);
}

.pep-bg-navy .pep-eyebrow,
.pep-hero .pep-eyebrow {
	color: #8fb8ff;
}

.pep-section h2 {
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	line-height: 1.2;
	margin-bottom: var(--pep-s3);
	color: var(--pep-ink);
}

.pep-bg-navy h2 {
	color: #fff;
}

.pep-bg-navy .pep-lede {
	color: rgba(255, 255, 255, .85);
}

.pep-lede {
	font-size: 1.1rem;
	color: var(--pep-muted);
	max-width: 60ch;
}

.pep-center .pep-lede {
	margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.pep-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pep-s2);
	margin-top: var(--pep-s3);
}

.pep-center .pep-actions {
	justify-content: center;
}

.pep-btn {
	display: inline-block;
	padding: .8rem 1.6rem;
	border-radius: var(--pep-pill);
	font-weight: 600;
	text-decoration: none;
	transition: background .2s var(--pep-ease), transform .2s var(--pep-ease), box-shadow .2s var(--pep-ease);
}

.pep-btn--primary {
	background: var(--pep-accent);
	color: #fff;
}

.pep-btn--primary:hover {
	background: var(--pep-accent-dark);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: var(--pep-shadow);
}

.pep-btn--ghost {
	background: transparent;
	color: var(--pep-accent);
	box-shadow: inset 0 0 0 1.5px var(--pep-accent);
}

.pep-bg-navy .pep-btn--ghost {
	color: #fff;
	box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55);
}

.pep-bg-navy .pep-btn--ghost:hover {
	background: rgba(255, 255, 255, .1);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.pep-hero {
	background: var(--pep-grad);
	color: #fff;
	text-align: center;
	padding: var(--pep-s6) var(--pep-s3);
}

.pep-hero h1 {
	font-size: clamp(2rem, 5vw, 3.2rem);
	line-height: 1.1;
	margin-bottom: var(--pep-s3);
	color: #fff;
}

.pep-hero .pep-lede {
	color: rgba(255, 255, 255, .85);
	margin-inline: auto;
}

.pep-hero--compact {
	padding: var(--pep-s5) var(--pep-s3);
}

.pep-compliance {
	margin-top: var(--pep-s3);
	font-size: .82rem;
	color: rgba(255, 255, 255, .6);
	max-width: 64ch;
	margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Trust strip
   -------------------------------------------------------------------------- */
.pep-trust__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--pep-s3);
}

.pep-trust__item {
	display: flex;
	align-items: center;
	gap: .6rem;
	font-weight: 600;
	color: var(--pep-ink);
}

.pep-trust__item::before {
	content: "✓";
	display: grid;
	place-items: center;
	width: 1.6rem;
	height: 1.6rem;
	flex: 0 0 auto;
	border-radius: var(--pep-pill);
	background: rgba(47, 128, 237, .12);
	color: var(--pep-accent);
	font-size: .85rem;
}

/* --------------------------------------------------------------------------
   Card grid (features / products)
   -------------------------------------------------------------------------- */
.pep-grid {
	display: grid;
	gap: var(--pep-s3);
}

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

.pep-card {
	background: var(--pep-bg);
	border: 1px solid var(--pep-line);
	border-radius: var(--pep-radius);
	padding: var(--pep-s3);
	transition: transform .25s var(--pep-ease), box-shadow .25s var(--pep-ease);
}

.pep-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--pep-shadow-hover);
}

.pep-card h3 {
	font-size: 1.15rem;
	margin-bottom: var(--pep-s1);
	color: var(--pep-ink);
}

.pep-card p {
	color: var(--pep-muted);
	margin: 0 0 var(--pep-s1);
}

.pep-card__media {
	display: block;
	margin-bottom: var(--pep-s2);
}

.pep-card__media img {
	width: 100%;
	height: auto;
	border-radius: var(--pep-radius-sm);
}

.pep-card h3 a {
	color: inherit;
	text-decoration: none;
}

.pep-card__meta {
	font-size: .85rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--pep-muted);
}

.pep-card__price {
	font-weight: 700;
	color: var(--pep-ink);
}

.pep-card .pep-btn {
	margin-top: var(--pep-s1);
}

/* --------------------------------------------------------------------------
   Steps (how it works)
   -------------------------------------------------------------------------- */
.pep-steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--pep-s4);
	counter-reset: pep-step;
}

.pep-step {
	counter-increment: pep-step;
}

.pep-step::before {
	content: counter(pep-step);
	display: grid;
	place-items: center;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: var(--pep-pill);
	background: var(--pep-grad);
	color: #fff;
	font-weight: 700;
	margin-bottom: var(--pep-s2);
}

.pep-step h3 {
	font-size: 1.1rem;
	margin-bottom: var(--pep-s1);
	color: var(--pep-ink);
}

.pep-step p {
	color: var(--pep-muted);
	margin: 0;
}

/* --------------------------------------------------------------------------
   Accordion (native details/summary — no JS, kses-safe)
   -------------------------------------------------------------------------- */
.pep-accordion {
	max-width: 820px;
	margin-inline: auto;
}

.pep-accordion details {
	border: 1px solid var(--pep-line);
	border-radius: var(--pep-radius-sm);
	margin-bottom: var(--pep-s2);
	background: var(--pep-bg);
	overflow: hidden;
}

.pep-accordion summary {
	cursor: pointer;
	padding: var(--pep-s2) var(--pep-s3);
	font-weight: 600;
	color: var(--pep-ink);
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.pep-accordion summary::-webkit-details-marker { display: none; }

.pep-accordion summary::after {
	content: "+";
	color: var(--pep-accent);
	font-size: 1.3rem;
	transition: transform .2s var(--pep-ease);
}

.pep-accordion details[open] summary::after {
	transform: rotate(45deg);
}

.pep-accordion details > *:not(summary) {
	padding: 0 var(--pep-s3) var(--pep-s3);
	color: var(--pep-muted);
	margin: 0;
}

/* --------------------------------------------------------------------------
   CTA band
   -------------------------------------------------------------------------- */
.pep-cta {
	text-align: center;
}

.pep-cta h2 {
	color: #fff;
}

/* --------------------------------------------------------------------------
   Prose (legal / long-form) + disclaimer
   -------------------------------------------------------------------------- */
.pep-prose {
	max-width: 72ch;
	margin-inline: auto;
	color: var(--pep-ink);
	line-height: 1.7;
}

.pep-prose h2 {
	font-size: 1.4rem;
	margin: var(--pep-s4) 0 var(--pep-s2);
}

.pep-prose h3 {
	font-size: 1.1rem;
	margin: var(--pep-s3) 0 var(--pep-s1);
}

.pep-prose p,
.pep-prose li {
	color: var(--pep-muted);
}

.pep-updated {
	font-size: .85rem;
	color: var(--pep-muted);
	font-style: italic;
}

.pep-disclaimer {
	max-width: 820px;
	margin-inline: auto;
	border: 1px solid var(--pep-line);
	border-left: 4px solid var(--pep-accent);
	border-radius: var(--pep-radius-sm);
	background: var(--pep-bg-alt);
	padding: var(--pep-s3);
	color: var(--pep-muted);
	font-size: .92rem;
}

.pep-disclaimer strong {
	color: var(--pep-ink);
}

/* --------------------------------------------------------------------------
   COA block (single product)
   -------------------------------------------------------------------------- */
.pep-coa {
	display: flex;
	gap: var(--pep-s2);
	align-items: center;
	border: 1px solid var(--pep-line);
	border-radius: var(--pep-radius-sm);
	padding: var(--pep-s2);
	margin: var(--pep-s2) 0;
}

.pep-coa__thumb {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: var(--pep-radius-sm);
	flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   WooCommerce — COA block, badge, specs, pricing, checkout gate
   -------------------------------------------------------------------------- */
.pep-coa {
	display: flex;
	gap: var(--pep-s2);
	align-items: center;
	border: 1px solid var(--pep-line);
	border-radius: var(--pep-radius-sm);
	padding: var(--pep-s2);
	margin: var(--pep-s3) 0;
	background: var(--pep-bg-alt);
}

.pep-coa__media img {
	width: 72px;
	height: 72px;
	object-fit: cover;
	border-radius: var(--pep-radius-sm);
	display: block;
}

.pep-coa__meta {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	align-items: flex-start;
}

.pep-coa__label {
	font-weight: 700;
	color: var(--pep-ink);
}

.pep-coa__batch {
	font-size: .85rem;
	color: var(--pep-muted);
}

.pep-coa-badge {
	display: inline-block;
	margin-top: .4rem;
	padding: .15rem .6rem;
	border-radius: var(--pep-pill);
	font-size: .72rem;
	letter-spacing: .03em;
	background: rgba(47, 128, 237, .12);
	color: var(--pep-accent);
}

.pep-spec-table {
	width: 100%;
	border-collapse: collapse;
}

.pep-spec-table th,
.pep-spec-table td {
	text-align: left;
	padding: .6rem .8rem;
	border-bottom: 1px solid var(--pep-line);
}

.pep-spec-table th {
	width: 38%;
	color: var(--pep-ink);
	font-weight: 600;
}

.pep-spec-table td {
	color: var(--pep-muted);
}

.pep-from {
	font-size: .8rem;
	color: var(--pep-muted);
	text-transform: uppercase;
	letter-spacing: .04em;
	margin-right: .25rem;
}

/* Variation pills (our enhancer over the Woo <select>) */
.pep-pills {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.pep-pill {
	border: 1.5px solid var(--pep-line);
	background: var(--pep-bg);
	color: var(--pep-ink);
	border-radius: var(--pep-pill);
	padding: .45rem 1.1rem;
	font-size: .9rem;
	font-weight: 600;
	cursor: pointer;
	transition: border-color .2s var(--pep-ease), background .2s var(--pep-ease), color .2s var(--pep-ease);
}

.pep-pill:hover {
	border-color: var(--pep-accent);
}

.pep-pill.is-active {
	background: var(--pep-navy-900);
	border-color: var(--pep-navy-900);
	color: #fff;
}

.pep-select-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	opacity: 0;
	pointer-events: none;
}

/* Checkout research-use acknowledgement */
.pep-ack {
	border: 1px solid var(--pep-line);
	border-left: 4px solid var(--pep-accent);
	border-radius: var(--pep-radius-sm);
	background: var(--pep-bg-alt);
	padding: var(--pep-s2);
	margin: var(--pep-s2) 0;
}

.pep-ack label {
	color: var(--pep-ink);
	font-size: .92rem;
}

/* --------------------------------------------------------------------------
   Footer — 4 columns on navy
   -------------------------------------------------------------------------- */
#footer {
	background: var(--pep-navy-900);
	color: rgba(255, 255, 255, .72);
}

#footer a {
	color: rgba(255, 255, 255, .85);
}

#footer a:hover {
	color: #fff;
}

#footer .footer-main .row {
	row-gap: var(--pep-s4);
}

#footer .widget-title,
#footer .widgettitle {
	color: #fff;
}

/* --------------------------------------------------------------------------
   Scroll reveal
   -------------------------------------------------------------------------- */
.pep-reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .6s var(--pep-ease), transform .6s var(--pep-ease);
}

.pep-reveal.is-in {
	opacity: 1;
	transform: none;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
	.pep-trust__grid,
	.pep-grid--4 { grid-template-columns: repeat(2, 1fr); }
	.pep-grid--3,
	.pep-steps { grid-template-columns: 1fr; }
	.pep-section { padding: var(--pep-s5) 0; }
}

@media (max-width: 575px) {
	.pep-trust__grid,
	.pep-grid--2,
	.pep-grid--4 { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
	}
	.pep-reveal { opacity: 1; transform: none; }
}