/*
Theme Name: PtyLaunchpad
Theme URI: https://ptylaunchpad.co.za
Author: InkyPyrus Publishing
Description: Bespoke block-friendly theme for PtyLaunchpad — a South African business-education storefront (start & run a Pty Ltd). Modern corporate-education look (Investec/Standard Bank meets Coursera). WooCommerce + Fluent Forms + FluentCRM; course delivery on Moodle.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: ptylaunchpad
*/

/* ============================================================
   DESIGN TOKENS — Comprehensive Theme Definition palette
   ============================================================ */
:root {
	--ink:       #162230;   /* deep ink navy — header/footer, matches logo bg */
	--ink-2:     #0e1a26;
	--navy:      #003087;   /* primary brand — trust/professionalism */
	--navy-2:    #1E3A8A;
	--emerald:   #15803D;   /* growth / secondary */
	--emerald-2: #166534;
	--gold:      #CA8A04;   /* accent — success, energy, CTAs */
	--gold-2:    #EAB308;
	--bg:        #F8FAFC;   /* light slate background */
	--surface:   #FFFFFF;
	--text:      #1E2937;   /* dark slate text */
	--muted:     #64748B;   /* light grey */
	--line:      #E2E8F0;
	--error:     #B91C1C;
	--ok:        #15803D;

	--maxw: 1180px;
	--radius: 12px;
	--radius-sm: 8px;
	--shadow-sm: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.08);
	--shadow:    0 4px 6px -1px rgba(15,23,42,.08), 0 2px 4px -2px rgba(15,23,42,.06);
	--shadow-lg: 0 20px 25px -5px rgba(15,23,42,.12), 0 8px 10px -6px rgba(15,23,42,.08);

	--font-head: "Poppins", "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
	--font-body: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 1.125rem;          /* 18px body per spec */
	line-height: 1.7;
	color: var(--text);
	background: var(--bg);
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--navy); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4, h5 {
	font-family: var(--font-head);
	font-weight: 700;
	line-height: 1.18;
	color: var(--ink);
	margin: 0 0 .6em;
	letter-spacing: -0.01em;
}
h1 { font-size: clamp(2rem, 4.2vw, 3rem); }       /* 2.5–3rem */
h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); }    /* 1.875–2.25rem */
h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); }
h4 { font-size: 1.15rem; }
p  { margin: 0 0 1rem; }
small { font-size: .9rem; }

/* ============================================================
   LAYOUT
   ============================================================ */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 1.25rem; }
.section { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.section--tight { padding: clamp(2rem, 4vw, 3rem) 0; }
.section--slate { background: var(--bg); }
.section--white { background: var(--surface); }
.section--ink { background: var(--ink); color: #dbe4ee; }
.section--ink h2, .section--ink h3 { color: #fff; }
.section--navy { background: linear-gradient(135deg, var(--navy) 0%, var(--ink) 100%); color: #e7eefb; }
.section--navy h1, .section--navy h2, .section--navy h3 { color: #fff; }
.eyebrow {
	display: inline-block; font-family: var(--font-head); font-weight: 600;
	font-size: .8rem; letter-spacing: .08em; text-transform: uppercase;
	color: var(--emerald); margin-bottom: .75rem;
}
/* On any dark/navy band the eyebrow must be bright gold — dark emerald is unreadable there */
.section--navy .eyebrow, .section--ink .eyebrow,
.hero .eyebrow, .page-hero .eyebrow { color: var(--gold-2); }
/* Inline links on dark bands must be light too (navy-on-navy is invisible).
   Exclude .btn so styled buttons keep their own colours. */
.hero p a:not(.btn), .page-hero p a:not(.btn), .section--navy p a:not(.btn),
.section--ink p a:not(.btn), .cta-band a:not(.btn), .hero__proof a:not(.btn) {
	color: var(--gold-2); text-decoration: underline;
}
.hero p a:not(.btn):hover, .page-hero p a:not(.btn):hover, .section--navy p a:not(.btn):hover,
.section--ink p a:not(.btn):hover, .cta-band a:not(.btn):hover, .hero__proof a:not(.btn):hover { color: #fff; }
.lede { font-size: 1.22rem; color: var(--muted); max-width: 60ch; }
.section--navy .lede, .section--ink .lede { color: #c6d4e8; }
.center { text-align: center; }
.center .lede, .center .eyebrow { margin-left: auto; margin-right: auto; }
.measure { max-width: 70ch; margin-left: auto; margin-right: auto; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	font-family: var(--font-head); font-weight: 600; font-size: 1rem;
	padding: .85rem 1.6rem; border-radius: var(--radius-sm);
	border: 2px solid transparent; cursor: pointer; text-decoration: none;
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
	line-height: 1; white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow); }
.btn--primary { background: var(--gold); color: #1a1407; border-color: var(--gold); }
.btn--primary:hover { background: var(--gold-2); color: #1a1407; }
.btn--navy { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn--navy:hover { background: var(--navy-2); color: #fff; }
.btn--emerald { background: var(--emerald); color: #fff; border-color: var(--emerald); }
.btn--emerald:hover { background: var(--emerald-2); color: #fff; }
.btn--outline { background: transparent; color: var(--emerald); border-color: var(--emerald); }
.btn--outline:hover { background: var(--emerald); color: #fff; }
.btn--ghost-light { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.4); }
.btn--ghost-light:hover { background: rgba(255,255,255,.16); color: #fff; }
.btn--lg { padding: 1.05rem 2.1rem; font-size: 1.1rem; }
.btn--sm { padding: .6rem 1.1rem; font-size: .9rem; }
.btn--block { display: flex; width: 100%; }

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header {
	position: sticky; top: 0; z-index: 60;
	background: var(--ink);
	border-bottom: 1px solid rgba(255,255,255,.07);
}
.nav { display: flex; align-items: center; gap: 1.25rem; max-width: var(--maxw);
	margin: 0 auto; padding: .55rem 1.25rem; }
.brand { display: flex; align-items: center; margin-right: auto; }
.brand img { height: 46px; width: auto; }
.menu { list-style: none; display: flex; align-items: center; gap: .25rem; margin: 0; padding: 0; }
.menu > li { position: relative; }
.menu > li > a {
	display: block; padding: .55rem .75rem; color: #d7e0ec; font-family: var(--font-head);
	font-weight: 500; font-size: .95rem; border-radius: 6px;
}
.menu > li > a:hover { color: #fff; background: rgba(255,255,255,.06); text-decoration: none; }
.menu .has-sub > a::after { content: "▾"; font-size: .7em; margin-left: .35rem; opacity: .7; }
.submenu {
	list-style: none; margin: 0; padding: .4rem; position: absolute; top: calc(100% + 6px); left: 0;
	min-width: 240px; background: #fff; border: 1px solid var(--line); border-radius: 10px;
	box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: .16s ease; z-index: 70;
}
.menu .has-sub:hover .submenu,
.menu .has-sub:focus-within .submenu { opacity: 1; visibility: visible; transform: translateY(0); }
.submenu a { display: block; padding: .55rem .7rem; border-radius: 6px; color: var(--text);
	font-size: .92rem; font-weight: 500; }
.submenu a:hover { background: var(--bg); color: var(--navy); text-decoration: none; }
.submenu small { display: block; color: var(--muted); font-weight: 400; }
.nav__cta { display: flex; align-items: center; gap: .65rem; }
.cartlink { color: #d7e0ec; font-weight: 600; font-size: .95rem; position: relative; }
.cartlink:hover { color: #fff; text-decoration: none; }
.cartcount {
	display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem; padding: 0 .3rem;
	background: var(--gold); color: #1a1407; border-radius: 999px; font-size: .72rem; font-weight: 700;
	margin-left: .15rem; vertical-align: middle;
}
.nav__toggle { display: none; background: none; border: 0; cursor: pointer; padding: .4rem;
	flex-direction: column; gap: 5px; }
.nav__toggle span { width: 24px; height: 2px; background: #fff; border-radius: 2px; transition: .2s; }

@media (max-width: 960px) {
	.nav__toggle { display: flex; }
	.menu {
		position: fixed; inset: 56px 0 auto 0; flex-direction: column; align-items: stretch;
		background: var(--ink); padding: .75rem 1rem 1.25rem; gap: .15rem; max-height: 0; overflow: hidden;
		border-bottom: 1px solid rgba(255,255,255,.08);
	}
	.menu.open { max-height: 85vh; overflow-y: auto; }
	.menu > li > a { padding: .8rem .6rem; font-size: 1.05rem; }
	.submenu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none;
		background: transparent; border: 0; padding: 0 0 .4rem 1rem; }
	.submenu a { color: #b9c6d6; }
	.submenu a:hover { background: rgba(255,255,255,.05); color: #fff; }
	.menu .has-sub > a::after { float: right; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero { position: relative; overflow: hidden;
	background: radial-gradient(120% 120% at 80% 0%, #1E3A8A 0%, var(--navy) 38%, var(--ink) 100%);
	color: #e7eefb; padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(3.5rem, 8vw, 6rem); }
.hero__grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 2.5rem; align-items: center; }
.hero h1 { color: #fff; font-size: clamp(2.1rem, 4.4vw, 3.1rem); }
.hero__sub { color: #cfdcf2; font-weight: 600; font-size: clamp(1.25rem, 2vw, 1.6rem);
	margin: .5rem 0 .9rem; }
.hero p.lede { color: #cfdcf2; font-size: 1.12rem; max-width: 52ch; }
.hero__chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.4rem 0 1.8rem; }
.chip {
	display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; font-weight: 500;
	padding: .4rem .8rem; border-radius: 999px; background: rgba(255,255,255,.1);
	border: 1px solid rgba(255,255,255,.18); color: #eaf1fc;
}
.chip svg { width: 15px; height: 15px; fill: var(--gold-2); }
.hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
/* keep both hero CTAs on one line in the narrower text column */
.hero__cta .btn--lg { padding: 1.05rem 1.5rem; font-size: 1.05rem; }
.hero__proof { margin-top: 1.5rem; font-size: .95rem; color: #aebfda; }
.hero__media {
	background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12);
	border-radius: 16px; padding: .6rem; box-shadow: var(--shadow-lg);
}
.hero__media img { border-radius: 10px; }
.hero__caption { display: flex; align-items: center; gap: .45rem; margin: .6rem .25rem .15rem;
	font-size: .88rem; color: #aebfda; }
.hero__caption svg { color: var(--gold-2); flex: none; }
.hero__vsl {
	aspect-ratio: 16/10; border-radius: 10px; display: grid; place-items: center;
	background: linear-gradient(135deg, rgba(202,138,4,.18), rgba(21,128,61,.18));
	border: 1px dashed rgba(255,255,255,.25); color: #cfdcf2; text-align: center; gap: .5rem;
}
.hero__vsl .play { width: 64px; height: 64px; border-radius: 999px; background: var(--gold);
	display: grid; place-items: center; color: #1a1407; font-size: 1.5rem; box-shadow: var(--shadow); }
.hero__reel { width: 100%; display: block; border-radius: 10px; aspect-ratio: 16/9; object-fit: cover; background: #0e1a26; }
@media (max-width: 880px) {
	.hero__grid { grid-template-columns: 1fr; gap: 1.5rem; }
	.hero p.lede { font-size: 1.02rem; }
	.hero__chips { margin: 1rem 0 1.2rem; }
	.hero__proof { margin-top: 1rem; }
}

/* ============================================================
   CARDS / GRIDS
   ============================================================ */
.grid { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.card {
	background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
	padding: 1.6rem; box-shadow: var(--shadow-sm);
	transition: transform .18s ease, box-shadow .18s ease;
}
.card--hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.card__icon {
	width: 48px; height: 48px; border-radius: 10px; display: grid; place-items: center;
	background: rgba(0,48,135,.08); color: var(--navy); margin-bottom: 1rem;
}
.card__icon svg { width: 24px; height: 24px; stroke: var(--navy); fill: none; stroke-width: 2; }
.card--emerald .card__icon { background: rgba(21,128,61,.1); }
.card--emerald .card__icon svg { stroke: var(--emerald); }
.card--gold .card__icon { background: rgba(202,138,4,.12); }
.card--gold .card__icon svg { stroke: var(--gold); }
.card h3 { font-size: 1.2rem; margin-bottom: .4rem; }
.card p { color: var(--muted); font-size: 1rem; margin: 0; }

/* Stat tiles */
.stat { text-align: center; }
.stat__num { font-family: var(--font-head); font-weight: 700; font-size: 2.4rem; color: var(--navy);
	line-height: 1; }
.stat__label { color: var(--muted); font-size: .98rem; }

/* For-you / Not-for-you */
.foryou { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 720px) { .foryou { grid-template-columns: 1fr; } }
.foryou__col { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
	padding: 1.6rem; }
.foryou__col h3 { display: flex; align-items: center; gap: .5rem; }
.foryou ul { list-style: none; margin: 0; padding: 0; }
.foryou li { position: relative; padding: .4rem 0 .4rem 2rem; font-size: 1.02rem; }
.foryou li::before { content: ""; position: absolute; left: 0; top: .55rem; width: 22px; height: 22px; border-radius: 999px;
	background-size: 14px; background-repeat: no-repeat; background-position: center; }
.foryou--yes li::before { background-color: rgba(21,128,61,.12);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2315803D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); }
.foryou--no li::before { background-color: rgba(185,28,28,.1);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23B91C1C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E"); }

/* Checklist */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.checklist.cols-2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 680px) { .checklist.cols-2 { grid-template-columns: 1fr; } }
.checklist li { position: relative; padding-left: 2rem; font-size: 1.04rem; }
.checklist li::before { content: ""; position: absolute; left: 0; top: .2rem; width: 22px; height: 22px;
	border-radius: 999px; background-color: rgba(21,128,61,.12); background-repeat: no-repeat; background-position: center;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2315803D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); }

/* Comparison table */
.cmp { width: 100%; border-collapse: collapse; background: var(--surface);
	border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.cmp th, .cmp td { text-align: left; padding: 1rem 1.1rem; border-bottom: 1px solid var(--line);
	vertical-align: top; font-size: 1rem; }
.cmp th { background: var(--ink); color: #fff; font-family: var(--font-head); font-weight: 600; }
.cmp tr:last-child td { border-bottom: 0; }
.cmp td:first-child { font-weight: 600; color: var(--ink); width: 32%; }
.cmp--wrap { overflow-x: auto; }

/* ============================================================
   PRICING
   ============================================================ */
.pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; align-items: stretch; }
@media (max-width: 880px) { .pricing { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } }
.price-card {
	background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
	padding: 1.8rem; display: flex; flex-direction: column; position: relative; box-shadow: var(--shadow-sm);
}
.price-card--featured { border: 2px solid var(--gold); box-shadow: var(--shadow-lg); }
.price-card__tag { position: absolute; top: -.85rem; left: 50%; transform: translateX(-50%);
	background: var(--gold); color: #1a1407; font-family: var(--font-head); font-weight: 600;
	font-size: .78rem; padding: .3rem .85rem; border-radius: 999px; letter-spacing: .02em; }
.price-card h3 { font-size: 1.3rem; margin-bottom: .25rem; }
.price-card .who { color: var(--muted); font-size: .96rem; min-height: 2.6em; }
.price { font-family: var(--font-head); font-weight: 700; color: var(--navy); font-size: 2.6rem;
	line-height: 1; margin: .8rem 0 .2rem; }
.price s { color: var(--muted); font-size: 1.2rem; font-weight: 500; margin-right: .4rem; }
.price small { font-size: .95rem; color: var(--muted); font-weight: 500; }
.price-card ul { list-style: none; margin: 1rem 0 1.4rem; padding: 0; display: grid; gap: .55rem; }
.price-card li { position: relative; padding-left: 1.5rem; font-size: .98rem; }
.price-card li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--emerald); font-weight: 700; }
.price-card .btn { margin-top: auto; }

/* ============================================================
   FAQ ACCORDION
   ============================================================ */
.faq { max-width: 800px; margin: 0 auto; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
	margin-bottom: .8rem; overflow: hidden; }
.faq summary { list-style: none; cursor: pointer; padding: 1.1rem 1.3rem; font-family: var(--font-head);
	font-weight: 600; font-size: 1.08rem; color: var(--ink); display: flex; justify-content: space-between;
	align-items: center; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.5rem; color: var(--emerald); font-weight: 400;
	transition: transform .2s; line-height: 1; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 1.3rem 1.2rem; color: var(--text); }
.faq details > div p:last-child { margin-bottom: 0; }

/* ============================================================
   VALUE STACK / GUARANTEE / TRUST
   ============================================================ */
.stack { display: grid; gap: 1rem; max-width: 820px; margin: 0 auto; }
.stack__item { display: flex; gap: 1rem; align-items: flex-start; background: var(--surface);
	border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1.4rem; }
.stack__item .mark { flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid;
	place-items: center; background: rgba(0,48,135,.08); color: var(--navy); font-size: 1.2rem; }
.stack__item h4 { margin: 0 0 .2rem; font-size: 1.1rem; }
.stack__item p { margin: 0; color: var(--muted); font-size: .98rem; }

.guarantee { display: flex; gap: 1.5rem; align-items: center; background: var(--surface);
	border: 1px solid var(--line); border-left: 5px solid var(--emerald); border-radius: var(--radius);
	padding: 1.8rem 2rem; max-width: 820px; margin: 0 auto; }
.guarantee .badge { flex: none; width: 116px; height: 116px; border-radius: 999px; padding: .55rem;
	background: radial-gradient(circle at 50% 35%, var(--emerald), var(--emerald-2));
	color: #fff; display: grid; place-items: center; text-align: center; font-family: var(--font-head);
	font-weight: 700; line-height: 1.12; font-size: .72rem; box-shadow: var(--shadow); }
.guarantee .badge b { font-size: 1.7rem; display: block; margin-bottom: .08rem; }
.guarantee .badge-img { flex: none; width: 124px; height: auto; display: block; }
@media (max-width: 600px) { .guarantee .badge-img { margin: 0 auto; } }
@media (max-width: 600px) { .guarantee { flex-direction: column; text-align: center; } }

.trust-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 2.2rem;
	color: #aebfda; font-size: .95rem; }
.trust-strip span { display: inline-flex; align-items: center; gap: .45rem; }

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band { background: linear-gradient(135deg, var(--navy) 0%, var(--ink) 100%); color: #fff;
	border-radius: 18px; padding: clamp(2rem, 5vw, 3.2rem); text-align: center; }
.cta-band h2 { color: #fff; }
.cta-band p { color: #cfdcf2; max-width: 60ch; margin-left: auto; margin-right: auto; }

/* ============================================================
   PAGE HEADER (interior pages)
   ============================================================ */
.page-hero { background: linear-gradient(135deg, var(--navy) 0%, var(--ink) 100%); color: #e7eefb;
	padding: clamp(2.5rem, 6vw, 4rem) 0; }
.page-hero h1 { color: #fff; }
.page-hero p { color: #cfdcf2; max-width: 65ch; }
.prose { max-width: 760px; }
.prose h2 { margin-top: 2rem; }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li { margin-bottom: .4rem; }
.prose blockquote { border-left: 4px solid var(--emerald); margin: 1.5rem 0; padding: .4rem 0 .4rem 1.2rem;
	color: var(--muted); font-style: italic; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--ink); color: #aebccd; padding: 3.5rem 0 1.5rem; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; }
@media (max-width: 760px) { .footer__grid { grid-template-columns: 1fr; gap: 2rem; } }
.site-footer .brand img { height: 42px; margin-bottom: 1rem; }
.site-footer h5 { color: #fff; font-size: .9rem; letter-spacing: .06em; text-transform: uppercase;
	margin: 0 0 1rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.site-footer a { color: #aebccd; font-size: .98rem; }
.site-footer a:hover { color: #fff; }
.footer__disclaimer { font-size: .92rem; color: #8a9bb0; max-width: 42ch; }
.footer__bottom { border-top: 1px solid rgba(255,255,255,.08); margin-top: 2.5rem; padding-top: 1.5rem;
	display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-size: .9rem; color: #8a9bb0; }
.footer__note { background: rgba(202,138,4,.12); border: 1px solid rgba(202,138,4,.3); color: #e8d6a6;
	border-radius: 8px; padding: .7rem 1rem; font-size: .9rem; margin-top: 1rem; }

/* ============================================================
   WOOCOMMERCE OVERRIDES
   ============================================================ */
.woocommerce-wrap { padding: clamp(2rem,5vw,3.5rem) 0; }
.woocommerce ul.products { display: grid !important; grid-template-columns: repeat(3,1fr); gap: 1.5rem;
	margin: 0; padding: 0; list-style: none; }
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none; }
@media (max-width: 900px) { .woocommerce ul.products { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px) { .woocommerce ul.products { grid-template-columns: 1fr; } }
.woocommerce ul.products li.product { width: auto !important; margin: 0 !important; float: none !important;
	background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
	padding: 1.2rem; box-shadow: var(--shadow-sm); transition: .18s; }
.woocommerce ul.products li.product:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: var(--font-head);
	font-size: 1.15rem; color: var(--ink); padding: .6rem 0 .2rem; }
.woocommerce ul.products li.product .price { color: var(--navy); font-weight: 700; font-family: var(--font-head); }
.woocommerce ul.products li.product .price del { color: var(--muted); font-weight: 400; }
.woocommerce span.onsale { background: var(--emerald); color: #fff; border-radius: 999px; }
.woocommerce a.button, .woocommerce button.button, .woocommerce #respond input#submit,
.woocommerce .button.alt, .woocommerce-page .button {
	background: var(--gold) !important; color: #1a1407 !important; font-family: var(--font-head);
	font-weight: 600; border-radius: var(--radius-sm); border: 0; padding: .7rem 1.3rem;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce .button.alt:hover {
	background: var(--gold-2) !important; }
.woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--navy); font-weight: 700; }
.woocommerce .woocommerce-message, .woocommerce .woocommerce-info { border-top-color: var(--emerald); }
.woocommerce-breadcrumb { color: var(--muted); font-size: .92rem; }

/* ============================================================
   BLOCK CART & CHECKOUT — normalize money rendering
   The theme's broad .price / heading styles were leaking into the
   React-rendered block components, blowing prices up to heading size.
   Re-assert sane, body-font money sizing inside the blocks only.
   ============================================================ */
.wp-block-woocommerce-checkout, .wp-block-woocommerce-cart,
.wc-block-checkout, .wc-block-cart { font-family: var(--font-body); }

.wc-block-components-product-price,
.wc-block-components-product-price__value,
.wc-block-components-product-price__regular,
.wc-block-components-formatted-money-amount,
.wc-block-formatted-money-amount,
.wc-block-components-order-summary-item__total-price,
.wc-block-checkout .woocommerce-Price-amount,
.wc-block-cart .woocommerce-Price-amount {
	font-family: var(--font-body) !important;
	font-size: .98rem !important;
	font-weight: 600 !important;
	color: var(--ink) !important;
	line-height: 1.45 !important;
	letter-spacing: normal !important;
	white-space: nowrap;
}
.wc-block-components-order-summary-item__total-price { font-weight: 700 !important; }
.wc-block-components-totals-item__value {
	font-family: var(--font-body) !important;
	font-size: 1rem !important; font-weight: 700 !important; color: var(--ink) !important;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font-size: 1.18rem !important; }
.wc-block-components-order-summary-item__individual-prices,
.wc-block-components-order-summary-item__description { color: var(--muted); }

/* ============================================================
   CHECKOUT PAYMENT NOTICE — who you're paying (InkyPyrus + iKhokha)
   ============================================================ */
.pay-notice {
	display: flex; align-items: center; gap: 1.15rem;
	max-width: 760px; margin: 0 auto 1.9rem;
	background: linear-gradient(135deg, var(--navy) 0%, var(--ink) 100%); color: #dbe6f7;
	border: 1px solid rgba(255,255,255,.12); border-left: 6px solid var(--gold);
	border-radius: var(--radius); padding: 1.15rem 1.35rem; box-shadow: var(--shadow-lg);
}
.pay-notice__logo { flex: none; width: 84px; height: 84px; border-radius: 14px; background: #fff;
	display: grid; place-items: center; padding: 9px; box-shadow: var(--shadow-sm); }
.pay-notice__logo img { width: 100%; height: 100%; object-fit: contain; }
.pay-notice__body { font-size: .92rem; line-height: 1.5; color: #cdddf3; }
.pay-notice__title { display: flex; align-items: center; gap: .4rem; font-family: var(--font-head);
	font-weight: 700; font-size: 1.02rem; color: #fff; margin-bottom: .2rem; }
.pay-notice__title svg { width: 1.05em; height: 1.05em; stroke: var(--gold-2); flex: none; }
.pay-notice__body strong { color: #fff; }
.pay-notice__body a { color: var(--gold-2); text-decoration: underline; }
.pay-notice__body a:hover { color: #fff; }
@media (max-width: 540px) { .pay-notice { flex-direction: column; text-align: center; gap: .8rem; }
	.pay-notice__title { justify-content: center; } }

/* ============================================================
   SINGLE PRODUCT (bespoke sales page)
   ============================================================ */
.prod-hero__grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: 2.5rem; align-items: center; }
@media (max-width: 880px) { .prod-hero__grid { grid-template-columns: 1fr; gap: 1.75rem; } }
.prod-price { font-family: var(--font-head); font-weight: 700; font-size: 2rem; color: #fff; line-height: 1; }
.prod-price del { color: #9fb2cf; font-weight: 500; font-size: 1.2rem; margin-right: .5rem; }
.prod-price ins { text-decoration: none; }
.prod-buy { margin: 1.3rem 0 .4rem; display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.prod-buy form.cart { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin: 0; }
.prod-buy .quantity input.qty { width: 64px; padding: .6rem; border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,.3);
	background: rgba(255,255,255,.06); color: #fff; font-family: var(--font-body); }
.prod-media img { border-radius: 14px; box-shadow: var(--shadow-lg); }
.prod-media--ph { aspect-ratio: 4/3; border-radius: 14px; display: grid; place-items: center; color: #9fb2cf;
	background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.12); }
.prod-media--ph svg { width: 46px; height: 46px; stroke: var(--gold-2); fill: none; stroke-width: 1.6; }

/* ============================================================
   BUILT BY — InkyPyrus Publishing credit (About page)
   ============================================================ */
.builtby { display: flex; align-items: center; gap: 2rem; max-width: 860px; margin: 0 auto;
	background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
	padding: 1.8rem 2rem; box-shadow: var(--shadow); }
.builtby__logo { flex: none; width: 120px; height: 120px; display: block; }
.builtby__logo img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
.builtby__body .eyebrow { color: var(--emerald); }
.builtby__body h2 { margin: .15rem 0 .5rem; }
.builtby__body p { color: var(--text); }
@media (max-width: 620px) { .builtby { flex-direction: column; text-align: center; gap: 1.2rem; padding: 1.5rem; } }

/* ============================================================
   DEMO NOTICE — fixed floating badge (bottom-right)
   ============================================================ */
.demobadge { position: fixed; right: 18px; bottom: 18px; z-index: 200; display: flex; align-items: center; gap: .6rem;
	background: var(--gold-2); color: var(--ink); border: 2px solid var(--ink); border-radius: 999px; padding: .55rem 1rem;
	box-shadow: var(--shadow-lg); font-family: var(--font-head); font-weight: 700; line-height: 1.05; }
.demobadge__dot { width: 11px; height: 11px; border-radius: 50%; background: var(--ink); flex: none;
	animation: demopulse 1.4s ease-in-out infinite; }
.demobadge__txt { display: flex; flex-direction: column; gap: .1rem; text-align: left; font-size: .68rem; font-weight: 600; color: #5b4a0a; }
.demobadge__txt strong { font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
@keyframes demopulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.75); } }
@media (prefers-reduced-motion: reduce) { .demobadge__dot { animation: none; } }
@media (max-width: 540px) { .demobadge { right: 10px; bottom: 10px; padding: .5rem .8rem; } }

/* Utilities */
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; }
.mb-0 { margin-bottom: 0; }
.hide { display: none !important; }
.flag-line { font-size: .85rem; color: var(--muted); }