/* =====================================================================
   Power Home — ZDX3-PH theme
   Unified light/dark design system for the Tier 1 (gifting portal),
   Tier 2, and Tier 3 product-selection pages.
   Theme is controlled via <html data-theme="light|dark">.
   Page-specific intro layouts are scoped under .ph-portal / .ph-tier
   (set on the <main> element of each template).
   ===================================================================== */

:root {
	color-scheme: light;
	--bg: #f7f5f0;
	--bg-radial-1: rgba(168, 204, 26, 0.16);
	--bg-radial-2: rgba(30, 88, 160, 0.07);
	--text: #102F48;
	--muted: #59606b;
	--subtle: #838a95;

	--panel: rgba(255, 255, 255, 0.72);
	--panel-strong: rgba(255, 255, 255, 0.94);
	--panel-border: rgba(15, 23, 42, 0.10);
	--section-border: #d3d8e0;
	--panel-hover: rgba(255, 255, 255, 0.97);
	--card-bg: rgba(255, 255, 255, 0.62);
	--media-bg: rgba(15, 23, 42, 0.04);
	--icon-bg: rgba(15, 23, 42, 0.05);

	--alert-bg: #f7f0cf;
	--alert-border: rgba(180, 150, 20, 0.28);
	--alert-text: #7a6410;
	--alert-icon: #b9971a;

	--lime: #a3c614;
	--lime-strong: #82a005;
	--quest-window-date: #649600;
	--lime-tint: rgba(163, 198, 20, 0.16);
	--green: #2f9a57;
	--danger: #b3261e;

	--cta-bg: linear-gradient(135deg, #16222f, #0c1621);
	--cta-text: #ffffff;
	--cta-border: rgba(255, 255, 255, 0.14);

	--check-bg: #16222f;
	--check-fg: #ffffff;

	--shadow-soft: 0px 0px 0px rgba(15, 23, 42, 0.11);
	--shadow-card: 0 6px 18px rgba(15, 23, 42, 0.12);

	--radius-lg: 10px;
	--radius-md: 14px;
	--radius-sm: 10px;
	--radius-xs: 8px;
	--radius-pill: 999px;

	--font-display: "Poppins", "Segoe UI", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
	--font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* =====================================================================
   Quest staff apparel portal — home experience
   Built on the shared ZDX3 design system rather than beside it: every
   colour, radius, shadow and font below resolves through the :root /
   html[data-theme="dark"] tokens above, so the light/dark toggle drives
   this page exactly like the Tier 1/2/3 pages. Do not reintroduce literal
   hex values here — hardcoded light colours are what left the home page
   stuck in light mode while data-theme flipped underneath it.

   Class names mirror the markup in home.php (which assets/js/quest.js
   binds to), but each component is the token-level twin of its PH
   counterpart: .quest-summary ↔ .info-panel, .quest-selections ↔
   .selections, .quest-card ↔ .option-card, .quest-sizes button ↔
   .size-chip--mini, .quest-action ↔ .action-bar.
   ===================================================================== */

/* The Quest sections are plain <section>/<aside> elements — they do not carry
   the .glass-panel class the PH templates use — so the panel treatment is
   applied here to keep the two themes visually identical. */
.quest-summary,
.quest-selections,
.quest-action {
	background: var(--panel);
	border: 1px solid var(--section-border);
	box-shadow: var(--shadow-soft);
	backdrop-filter: blur(18px) saturate(135%);
	-webkit-backdrop-filter: blur(18px) saturate(135%);
}

/* Inline brand mark stands in for the PH logo lockup pair. The hexagon takes
   the ink colour and the wordmark is knocked out in the page background, so
   one piece of artwork reads correctly in both themes. */
.quest-brand-mark { display: block; width: 44px; height: 44px; color: var(--text); }
.quest-brand-text { fill: var(--bg); font-family: var(--font-display); }

/* ---------------- Intro: hero + selection summary ---------------- */
.quest-intro {
	display: grid;
	grid-template-columns: minmax(300px, 1.05fr) minmax(0, 1.72fr);
	gap: 22px;
	align-items: stretch;
	margin: 24px 4px 12px;
}

.quest-hero { padding: 6px 20px 6px 12px; align-self: stretch; }
.quest-hero h1 {
	margin: 0 0 20px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(2.2rem, 3vw, 3.1rem);
	line-height: 1.04;
	letter-spacing: -0.02em;
}
.quest-hero h1 span { color: var(--lime); }
.quest-hero p {
	margin: 0 0 12px;
	color: var(--muted);
	font-size: 1.02rem;
	line-height: 1.6;
}
.quest-hero > strong {
	display: block;
	margin: 0;
	color: var(--lime-strong);
	font-weight: 700;
	line-height: 1.5;
}

.quest-rule {
	display: block;
	width: 54px; height: 4px;
	border-radius: 4px;
	background: var(--lime);
	margin: 0 0 20px;
}

.quest-summary {
	border-radius: var(--radius-lg);
	background: var(--panel-strong);
	box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
	padding: 20px 30px;
	height: 70%;
	box-sizing: border-box;
	align-self: center;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
	align-items: stretch;
	gap: 0 32px;
}
.quest-summary-item { display: flex; gap: 16px; align-items: center; }
.quest-summary-item > div { min-width: 0; }
.quest-summary-icon {
	flex: 0 0 auto;
	width: 54px; height: 54px;
	border-radius: 50%;
	background: transparent;
	display: grid; place-items: center;
	color: var(--text);
	font-size: 40px;
}
.quest-summary-icon img { display: block; width: 54px; height: 54px; object-fit: contain; }
.quest-summary-item h2 {
	margin: 0 0 6px;
	font-family: var(--font-display);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: var(--text);
	line-height: 1.4;
}
.quest-summary-item strong {
	display: block;
	margin: 0;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 26px;
	letter-spacing: -0.01em;
	color: var(--quest-window-date);
	line-height: 1.2;
}
.quest-summary-item p {
	margin: 0 0 6px;
	color: var(--muted);
	font-size: 0.94rem;
	line-height: 1.5;
}
.quest-summary-item p:last-child { margin-bottom: 0; }
.quest-summary-divider { width: 1px; background: var(--section-border); }

/* ---------------- Selections panel ---------------- */
.quest-selections {
	border-radius: var(--radius-lg);
	padding: 34px 34px 38px;
	margin: 0 4px 12px;
}
.quest-section-header { text-align: center; margin-bottom: 30px; }
.quest-pill {
	display: inline-block;
	padding: 7px 15px;
	border-radius: var(--radius-pill);
	background: var(--lime-tint);
	color: var(--lime-strong);
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.quest-section-header h2 {
	margin: 10px 0;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	letter-spacing: 0.01em;
	text-transform: uppercase;
}
.quest-section-header .quest-rule {
	display: inline-block;
	width: 46px; height: 3px;
	border-radius: 3px;
	margin: 0 auto 16px;
}
.quest-section-header p { margin: 0; color: var(--muted); font-size: 1.02rem; }

.quest-step-heading { display: flex; align-items: center; gap: 14px; margin: 0 0 20px; }
.quest-step-heading > span {
	flex: 0 0 auto;
	width: 32px; height: 32px;
	border-radius: 50%;
	display: grid; place-items: center;
	background: var(--lime-tint);
	color: var(--lime-strong);
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 1rem;
}
.quest-step-heading h3 {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 1.05rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.quest-step-heading p { margin: 3px 0 0; color: var(--muted); font-size: 0.94rem; }

/* ---------------- Style cards ---------------- */
.quest-products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: 1fr;
	gap: 20px;
}
.quest-card {
	position: relative;
	min-width: 0;
	border: 1px solid var(--panel-border);
	background: var(--card-bg);
	border-radius: var(--radius-md);
	padding: 18px 18px 20px;
	display: flex;
	flex-direction: column;
	transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
/* Cards in a row share row tracks (media, title, description, controls), so
   every "Select your color" block starts on the same line no matter how many
   lines a title or description wraps to. The badge and check mark are
   absolutely positioned, leaving exactly four in-flow children. */
@supports (grid-template-rows: subgrid) {
	.quest-products { grid-auto-rows: auto; row-gap: 0; }
	.quest-card {
		display: grid;
		grid-row: span 4;
		grid-template-rows: subgrid;
		row-gap: 0;
		margin-bottom: 20px;
	}
}
.quest-card:hover {
	transform: translateY(-3px);
	border-color: var(--lime);
	box-shadow: var(--shadow-card);
}
.quest-card.is-selected {
	border-color: var(--lime);
	box-shadow: 0 0 0 1px var(--lime), var(--shadow-card);
}

.quest-style-badge {
	position: absolute;
	z-index: 2;
	top: 14px; left: 14px;
	padding: 5px 11px;
	border-radius: var(--radius-pill);
	background: var(--lime-tint);
	color: var(--lime-strong);
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.quest-card.is-selected .quest-style-badge { background: var(--check-bg); color: var(--check-fg); }

.quest-selected-mark {
	display: none;
	position: absolute;
	z-index: 2;
	top: 14px; right: 14px;
	width: 30px; height: 30px;
	place-items: center;
	border-radius: 50%;
	background: var(--check-bg);
	color: var(--check-fg);
	font-size: 1rem;
	font-weight: 800;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.quest-card.is-selected .quest-selected-mark { display: grid; }

.quest-product-media {
	background: var(--media-bg);
	border: 1px solid var(--panel-border);
	border-radius: var(--radius-sm);
	min-height: 190px;
	display: grid;
	place-items: center;
	padding: 12px;
	margin-bottom: 14px;
	overflow: hidden;
}
.quest-product-media img {
	width: min(100%, 244px);
	max-height: 166px;
	object-fit: contain;
	filter: drop-shadow(0 16px 22px rgba(15, 23, 42, 0.20));
}

.quest-card > h3 {
	margin: 0 0 8px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.3;
	letter-spacing: -0.01em;
	text-align: center;
}
.quest-product-desc {
	margin: 0 0 14px;
	color: var(--muted);
	font-size: 0.88rem;
	line-height: 1.45;
	text-align: center;
}

/* ---------------- Card controls ---------------- */
.quest-controls { margin-top: 0; }
.quest-control-label { margin: 0 0 10px; color: var(--muted); font-size: 0.86rem; }
.quest-size-label {
	margin-top: 14px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}
.quest-size-chart-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 0.85em;
	text-decoration: none;
}

.quest-colors { display: flex; flex-wrap: wrap; gap: 12px; }
.quest-color {
	position: relative;
	width: 32px; height: 32px;
	padding: 0;
	border: 1.5px solid var(--panel-border);
	border-radius: 50%;
	background: var(--swatch);
	cursor: pointer;
	transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.quest-color:hover { transform: translateY(-2px); }
/* The selected ring is drawn as two stacked shadows so the gap between the
   swatch and the lime ring is the page background in whichever theme is on. */
.quest-color[aria-checked="true"],
.quest-color:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--lime);
}
.quest-color-name { margin: 10px 0 0; color: var(--muted); font-size: 0.84rem; }
.quest-color-name strong { color: var(--text); font-weight: 700; }

.quest-sizes { display: flex; flex-wrap: wrap; gap: 7px; }
.quest-sizes button {
	position: relative;
	min-width: 44px;
	min-height: 36px;
	padding: 6px 9px;
	border: 1.5px solid var(--panel-border);
	border-radius: var(--radius-xs);
	background: var(--panel-strong);
	color: var(--text);
	font-weight: 700;
	font-size: 0.82rem;
	cursor: pointer;
	transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}
html[data-theme="dark"] .quest-sizes button { background: rgba(255, 255, 255, 0.02); }
.quest-sizes button:hover,
.quest-sizes button:focus-visible {
	border-color: var(--lime);
	transform: translateY(-2px);
}

.quest-card-selections {
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--panel-border);
	color: var(--muted);
	font-size: 0.84rem;
}
.quest-card-selections > p { margin: 0 0 8px; }
.quest-selection-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	color: var(--text);
	font-size: 0.82rem;
}
.quest-selection-row + .quest-selection-row { margin-top: 6px; }
.quest-selection-row > span { display: flex; align-items: center; gap: 6px; }
.quest-selection-row b { min-width: 16px; text-align: center; font-weight: 700; }
.quest-selection-row button {
	width: 24px; height: 24px;
	padding: 0;
	display: grid; place-items: center;
	border: 1px solid var(--panel-border);
	border-radius: var(--radius-xs);
	background: transparent;
	color: var(--text);
	font-size: 0.95rem;
	line-height: 1;
	cursor: pointer;
	transition: border-color 0.16s ease, color 0.16s ease;
}
.quest-selection-row button:hover,
.quest-selection-row button:focus-visible { border-color: var(--lime); color: var(--lime-strong); }
.quest-selection-row .quest-remove { margin-left: 4px; border-color: transparent; }

.quest-empty {
	grid-column: 1 / -1;
	margin: 0;
	padding: 34px;
	border: 1px dashed var(--section-border);
	border-radius: var(--radius-md);
	color: var(--muted);
	text-align: center;
}

.quest-feedback {
	margin: 0 4px 12px;
	color: var(--muted);
	font-size: 0.94rem;
	text-align: right;
}
.quest-feedback.is-error { color: var(--danger); font-weight: 700; }

/* ---------------- Action bar ---------------- */
.quest-action {
	margin: 0 4px;
	min-height: 92px;
	border-radius: var(--radius-lg);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 18px 26px;
}
.quest-action .security-note { display: flex; gap: 16px; align-items: center; }
.quest-action .security-note strong { font-size: 1.02rem; }
.quest-action .security-note p { margin: 4px 0 0; color: var(--muted); font-size: 0.9rem; line-height: 1.45; }
.quest-action .shield {
	flex: 0 0 auto;
	width: 46px; height: 46px;
	display: grid; place-items: center;
	color: var(--lime-strong);
	font-size: 1.5rem;
}
.quest-total { margin: 0; color: var(--muted); font-size: 0.98rem; }
.quest-total strong {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.22rem;
	color: var(--lime-strong);
}
.selection-unavailable { margin: 0 4px 8px; color: var(--danger); text-align: right; font-size: 0.9rem; font-weight: 600; }
.selection-unavailable[hidden] { display: none; }
.quest-continue {
	min-width: min(100%, 320px);
	min-height: 62px;
	padding: 0 30px;
	border: 1px solid var(--cta-border);
	border-radius: var(--radius-md);
	background: var(--cta-bg);
	color: var(--cta-text);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.14rem;
	letter-spacing: 0.01em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	cursor: pointer;
	transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
}
.quest-continue .quest-continue-arrow { margin: 0; font-size: 1.2rem; line-height: 1; }
.quest-continue:disabled { opacity: 0.42; cursor: not-allowed; }
.quest-continue:not(:disabled):hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }
.security-note.quest-security-mobile { display: none; }

/* ---------------- Responsive (matches the PH breakpoints) ---------------- */
@media (max-width: 1080px) {
	.quest-intro { grid-template-columns: 1fr; }
	.quest-summary { height: auto; }
	.quest-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.quest-action { flex-direction: column; align-items: stretch; }
	.quest-continue { width: 100%; min-width: 0; }
}

@media (max-width: 760px) {
	.quest-intro { margin: 24px 0 16px; }
	.quest-hero { padding: 0; }
	.quest-summary { grid-template-columns: 1fr; gap: 0; padding: 22px; }
	.quest-summary-item { padding: 18px 0; }
	.quest-summary-divider { width: auto; height: 1px; }
	.quest-selections, .quest-action-area { margin: 0 0 16px; }
	.quest-selections { padding: 24px 20px 28px; }
	.quest-feedback { margin: 0 0 12px; }
	.quest-action-area { position: sticky; bottom: 12px; z-index: 10; }
	/* Compact sticky bar: count + button only; the security note sits at the page bottom instead. */
	.quest-action { margin: 0; min-height: 0; flex-direction: row; align-items: center; gap: 14px; padding: 12px 14px; }
	.quest-action .security-note { display: none; }
	.quest-total { flex: 0 0 auto; white-space: nowrap; font-size: 0.9rem; }
	.quest-continue { flex: 1 1 auto; width: auto; min-height: 50px; padding: 0 16px; font-size: 1rem; }
	.security-note.quest-security-mobile {
		display: flex;
		margin: 0 0 16px;
		padding: 18px 20px;
		border-radius: var(--radius-lg);
		background: var(--panel);
		border: 1px solid var(--section-border);
	}
	.quest-security-mobile .shield { flex: 0 0 auto; width: 46px; height: 46px; display: grid; place-items: center; color: var(--lime-strong); font-size: 1.5rem; }
}

@media (max-width: 480px) {
	.quest-products { grid-template-columns: 1fr; }
	.quest-product-media { min-height: 220px; }
	.quest-product-media img { max-height: 200px; }
}

html[data-theme="dark"] {
	color-scheme: dark;
	--bg: #050b12;
	--bg-radial-1: rgba(168, 204, 26, 0.14);
	--bg-radial-2: rgba(38, 106, 242, 0.16);
	--text: #f6f3eb;
	--muted: #c2cad5;
	--subtle: #8d98a8;

	--panel: rgba(14, 22, 32, 0.72);
	--panel-strong: rgba(13, 20, 29, 0.92);
	--panel-border: rgba(255, 255, 255, 0.11);
	--section-border: rgba(255, 255, 255, 0.16);
	--panel-hover: rgba(20, 31, 44, 0.92);
	--card-bg: rgba(255, 255, 255, 0.02);
	--media-bg: rgba(255, 255, 255, 0.03);
	--icon-bg: rgba(255, 255, 255, 0.06);

	--alert-bg: rgba(198, 232, 79, 0.05);
	--alert-border: rgba(198, 232, 79, 0.28);
	--alert-text: #dfe6ef;
	--alert-icon: #c6e84f;

	--lime: #c6e84f;
	--lime-strong: #d4f168;
	--quest-window-date: #d4f168;
	--lime-tint: rgba(198, 232, 79, 0.13);
	--green: #68d391;
	--danger: #ff8a80;

	--cta-bg: linear-gradient(135deg, #b6e02a, #a3c614);
	--cta-text: #102F48;
	--cta-border: rgba(255, 255, 255, 0.10);

	--check-bg: var(--lime);
	--check-fg: #102F48;

	--shadow-soft: 0px 0px 0px rgba(0, 0, 0, 0.42);
	--shadow-card: 0 8px 22px rgba(0, 0, 0, 0.36);
}

* { box-sizing: border-box; }

body {
	margin: 0;
	font-family: var(--font-body);
	color: var(--text);
	background:
		radial-gradient(circle at 8% 6%, var(--bg-radial-1), transparent 26rem),
		radial-gradient(circle at 88% 8%, var(--bg-radial-2), transparent 34rem),
		var(--bg);
	min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; }

.page-shell {
	width: min(1340px, calc(100% - 44px));
	margin: 0 auto;
	padding: 20px 0 26px;
}

.glass-panel {
	background: var(--panel);
	border: 1px solid var(--section-border);
	box-shadow: var(--shadow-soft);
	backdrop-filter: blur(18px) saturate(135%);
	-webkit-backdrop-filter: blur(18px) saturate(135%);
}

.nowrap { white-space: nowrap; }

/* Standard WordPress pages and the selectable Quest Page template. */
.quest-content-page { max-width: 1180px; margin: 32px auto 64px; }
.quest-page-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	font-size: 0.82rem;
	color: var(--muted);
}
.quest-page-breadcrumb a:hover { color: var(--text); text-decoration: underline; }
.quest-page-heading { padding: 38px 0 32px; }
.quest-page-eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
}
.quest-page-eyebrow::before { content: ''; width: 24px; height: 3px; border-radius: 2px; background: var(--lime); }
.quest-page-heading .entry-title {
	font-family: var(--font-display);
	font-size: clamp(2rem, 4.5vw, 3.5rem);
	line-height: 1.15;
	letter-spacing: -0.035em;
	margin: 0;
	overflow-wrap: anywhere;
}
.quest-page-intro { max-width: 700px; margin-top: 18px; color: var(--muted); font-size: 1.06rem; line-height: 1.7; }
.quest-page-intro p { margin: 0; }
.quest-page-layout { max-width: 960px; }
.quest-page-layout--legal { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: 28px; max-width: none; align-items: start; }
.quest-page-sidebar { position: sticky; top: 24px; }
.quest-page-nav { padding: 22px 12px 12px; border-radius: var(--radius-lg); }
.quest-page-nav-title { margin: 0 12px 16px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.quest-page-nav a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 12px; border-radius: 6px; font-size: 0.86rem; line-height: 1.45; color: var(--muted); }
.quest-page-nav a span { opacity: 0; flex-shrink: 0; }
.quest-page-nav a:hover { background: var(--icon-bg); color: var(--text); }
.quest-page-nav a[aria-current="page"] { background: var(--lime-tint); color: var(--text); font-weight: 600; }
.quest-page-nav a[aria-current="page"] span { opacity: 1; }
.quest-page-panel {
	min-width: 0;
	padding: clamp(24px, 4vw, 48px);
	border-radius: var(--radius-lg);
	background: var(--panel-strong);
}
.quest-page-image { margin-bottom: 32px; }
.quest-page-image img { display: block; width: 100%; height: auto; border-radius: var(--radius-sm); }
.quest-content-page .entry-content {
	font-size: 0.98rem;
	line-height: 1.85;
	overflow-wrap: anywhere;
}
.quest-content-page .entry-content h2 { font-size: clamp(1.2rem, 2vw, 1.5rem); padding-top: 24px; border-top: 1px solid var(--section-border); }
.quest-content-page .entry-content h3 { font-size: 1.1rem; }
.quest-content-page .entry-content h2,
.quest-content-page .entry-content h3,
.quest-content-page .entry-content h4 {
	font-family: var(--font-display);
	line-height: 1.35;
	margin: 1.8em 0 0.65em;
}
.quest-content-page .entry-content p { margin: 0 0 1.25em; }
.quest-content-page .entry-content ul,
.quest-content-page .entry-content ol { padding-inline-start: 1.5em; margin: 0 0 1.25em; }
.quest-content-page .entry-content li { margin-bottom: 0.5em; }
.quest-content-page .entry-content li::marker { color: var(--lime-strong); }
.quest-content-page .entry-content li > ul,
.quest-content-page .entry-content li > ol { margin-top: 0.5em; }
.quest-content-page .entry-content a { text-decoration: underline; text-underline-offset: 3px; }
.quest-content-page .entry-content a:hover { color: var(--lime-strong); }
.quest-content-page .entry-content img { max-width: 100%; height: auto; }
.quest-content-page .entry-content figure { max-width: 100%; margin-inline: 0; }
.quest-content-page .entry-content blockquote { margin: 24px 0; padding: 16px 24px; border-inline-start: 3px solid var(--lime); background: var(--lime-tint); }
.quest-content-page .entry-content pre { max-width: 100%; overflow-x: auto; padding: 20px; border-radius: var(--radius-xs); background: var(--icon-bg); }
.quest-content-page .entry-content table { width: 100%; border-collapse: collapse; }
.quest-content-page .entry-content th,
.quest-content-page .entry-content td { padding: 12px; border: 1px solid var(--section-border); text-align: start; }
.quest-content-page .entry-content th { background: var(--icon-bg); }
.quest-content-page .entry-content .wp-block-table { overflow-x: auto; }
.quest-content-page .entry-content > :first-child { margin-top: 0; }
.quest-content-page .entry-content > h2:first-child { padding-top: 0; border-top: 0; }
.quest-content-page .entry-content > :last-child { margin-bottom: 0; }
.quest-page-pagination { display: flex; gap: 12px; margin-top: 32px; }
.quest-content-page a:focus-visible { outline: 2px solid var(--lime-strong); outline-offset: 4px; }

@media (max-width: 800px) {
	.quest-content-page { margin: 24px auto 40px; }
	.quest-page-heading { padding: 28px 0; }
	.quest-page-layout--legal { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.quest-page-sidebar { position: static; }
	.quest-page-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 14px 10px 10px; }
	.quest-page-nav-title { grid-column: 1 / -1; margin: 4px 12px 10px; }
	.quest-page-nav a { font-size: 0.8rem; padding: 11px 12px; }
}

/* Accessibility helpers */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}
.skip-link:focus {
	position: fixed;
	top: 12px; left: 12px;
	width: auto; height: auto;
	clip: auto;
	z-index: 100;
	padding: 10px 16px;
	background: var(--panel-strong);
	border: 1px solid var(--panel-border);
	border-radius: var(--radius-sm);
	color: var(--text);
}

/* Icon system (mask-based, inherits currentColor) */
.theme-icon {
	width: 1em; height: 1em;
	display: inline-block;
	flex: 0 0 auto;
	background: currentColor;
	-webkit-mask: var(--icon-url) center / contain no-repeat;
	mask: var(--icon-url) center / contain no-repeat;
	vertical-align: -0.14em;
}
.button-icon, .inline-icon { width: 1.05em; height: 1.05em; }

/* ============================ HEADER ============================ */
.site-header {
	position: relative;
	z-index: 200;
	min-height: 78px;
	border-radius: var(--radius-lg);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 28px;
}

.brand { display: inline-flex; align-items: center; gap: 14px; }

.brand-logo { height: 44px; width: auto; }

/* Keep the portrait Quest mark compact on the checkout review screen. */
.woocommerce-checkout .brand-logo { height: 32px; }

/* Theme-swapped logo pairs. Each artwork is drawn for one background:
   the --light lockup is navy ink, the --dark lockup is lime.
   These rules own `display` for both pairs — sizing rules elsewhere must
   not set it, or they would win on order and reveal both variants. */
.brand-logo--light,
.zagwear-logo--light { display: block; }
.brand-logo--dark,
.zagwear-logo--dark { display: none; }
html[data-theme="dark"] .brand-logo--light,
html[data-theme="dark"] .zagwear-logo--light { display: none; }
html[data-theme="dark"] .brand-logo--dark,
html[data-theme="dark"] .zagwear-logo--dark { display: block; }

.top-nav {
	display: flex;
	align-items: center;
	gap: 26px;
	font-size: 1rem;
	font-weight: 500;
}

.nav-divider { width: 1px; height: 30px; background: var(--panel-border); }

.help-menu { position: relative; }
.help-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--text);
	cursor: pointer;
}
.help-badge {
	width: 22px; height: 22px;
	border: 1.5px solid currentColor;
	border-radius: 50%;
	display: inline-grid; place-items: center;
	font-size: 0.78rem; font-weight: 700;
	color: var(--muted);
}
.help-dropdown[hidden] { display: none; }
.help-dropdown {
	position: absolute;
	top: calc(100% + 18px);
	right: -12px;
	z-index: 210;
	width: min(300px, calc(100vw - 28px));
	padding: 22px 24px 24px;
	border: 1px solid var(--panel-border);
	border-radius: 16px;
	background: var(--panel-strong);
	box-shadow: 0 18px 38px rgba(15, 23, 42, 0.18);
	color: var(--text);
}
.help-dropdown-arrow {
	position: absolute;
	top: -8px;
	right: 38px;
	width: 15px;
	height: 15px;
	border-top: 1px solid var(--panel-border);
	border-left: 1px solid var(--panel-border);
	background: var(--panel-strong);
	transform: rotate(45deg);
}
.help-dropdown-title {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--font-display);
	font-size: 1.12rem;
}
.help-dropdown-icon {
	width: 30px;
	height: 30px;
	border: 1.5px solid currentColor;
	border-radius: 50%;
	display: inline-grid;
	place-items: center;
	font-family: var(--font-body);
	font-size: 0.84rem;
	font-weight: 800;
}
.help-dropdown p {
	margin: 17px 0;
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.55;
}
.help-dropdown-rule {
	display: block;
	height: 1px;
	margin-bottom: 18px;
	background: var(--panel-border);
}
.help-dropdown-email {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	color: var(--lime);
	font-size: 0.9rem;
	font-weight: 700;
	line-height: 1.45;
	overflow-wrap: anywhere;
}
.help-dropdown-email svg { flex: 0 0 auto; margin-top: 1px; }
.help-dropdown-email:hover { text-decoration: underline; }
.help-link:focus-visible,
.help-dropdown-email:focus-visible {
	outline: 2px solid #102F48;
	outline-offset: 4px;
}

.theme-toggle {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	height: 40px;
	border: 1px solid var(--panel-border);
	border-radius: var(--radius-pill);
	padding: 0 12px;
	background: var(--panel);
	color: var(--muted);
	cursor: pointer;
}
.toggle-icon { font-size: 1rem; line-height: 1; }
.toggle-icon.sun { color: var(--lime-strong); }
html[data-theme="dark"] .toggle-icon.sun { color: #f2c94c; }
.toggle-icon.moon { color: var(--muted); }
.toggle-track {
	width: 46px; height: 23px;
	border-radius: var(--radius-pill);
	background: rgba(110, 118, 129, 0.28);
	position: relative;
	display: inline-flex; align-items: center;
	padding: 3px;
}
html[data-theme="dark"] .toggle-track { background: rgba(52, 120, 255, 0.55); }
.toggle-thumb {
	width: 17px; height: 17px;
	background: #fff;
	border-radius: 50%;
	transform: translateX(0);
	transition: transform 0.25s ease;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
html[data-theme="dark"] .toggle-thumb { transform: translateX(23px); }

/* ============================ INTRO (shared) ============================ */
.intro-grid {
	display: grid;
	gap: 22px;
	align-items: stretch;
	margin: 24px 4px 12px;
}
.ph-tier .intro-grid {
	grid-template-columns: minmax(300px, 1.05fr) minmax(0, 1.72fr);
}

.hero-copy { padding: 6px 20px 6px 12px; align-self: center; }

.eyebrow {
	margin: 0 0 12px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.82rem;
	font-weight: 800;
	color: var(--lime-strong);
}

h1 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(2.2rem, 3vw, 3.1rem);
	line-height: 1.04;
	letter-spacing: -0.02em;
	margin: 0 0 20px;
}
h1 span { color: var(--lime); }
.hero-copy h1 .foundation-name { color: #D4AF37; }

.hero-rule {
	display: block;
	width: 54px; height: 4px;
	border-radius: 4px;
	background: var(--lime);
	margin: 0 0 20px;
}

.hero-body {
	color: var(--muted);
	font-size: 1.02rem;
	line-height: 1.6;
	margin: 0 0 12px;
}

.compliance-line {
	color: var(--lime-strong);
	font-weight: 700;
	margin: 0;
}

/* -------- Info / bento panel (Tier 2 / Tier 3) -------- */
.info-panel {
	border-radius: var(--radius-lg);
	padding: 30px 32px;
	display: grid;
	grid-template-columns: 1.18fr auto 1fr auto 1fr;
	align-items: stretch;
	gap: 0 26px;
}
.info-item { display: flex; gap: 16px; align-items: flex-start; }
.info-icon {
	flex: 0 0 auto;
	width: 46px; height: 46px;
	border-radius: 50%;
	background: var(--icon-bg);
	display: grid; place-items: center;
	color: var(--text);
}
.info-text { min-width: 0; }
.info-label {
	margin: 2px 0 8px;
	text-transform: uppercase;
	letter-spacing: 0.10em;
	font-size: 0.78rem;
	font-weight: 800;
	color: var(--text);
}
.info-strong {
	margin: 0 0 8px;
	font-weight: 700;
	font-size: 1.02rem;
	color: var(--text);
	white-space: nowrap;
}
.info-body {
	margin: 0;
	color: var(--muted);
	font-size: 0.94rem;
	line-height: 1.5;
	max-width: 21ch;
}
.info-body--tall { max-width: 20ch; }
.info-divider { width: 1px; background: var(--panel-border); }

/* -------- Tier 3 "you qualify" hero card -------- */
.qualify-panel {
	border-radius: var(--radius-lg);
	padding: 26px 30px;
	display: grid;
	grid-template-columns: 1.5fr auto 1fr;
	align-items: stretch;
	gap: 0 28px;
}
.qualify-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.qualify-head { display: flex; align-items: center; gap: 11px; }
.qualify-gift {
	flex: 0 0 auto;
	width: 34px; height: 34px;
	border-radius: var(--radius-xs);
	background: var(--icon-bg);
	display: grid; place-items: center;
	color: var(--text);
}
.qualify-title {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.12rem;
	letter-spacing: -0.01em;
	color: var(--text);
}
.qualify-tiers { display: flex; flex-wrap: wrap; gap: 8px; }
.qualify-pill {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	min-width: 88px;
	padding: 7px 12px;
	border-radius: 7px;
	font-weight: 700;
	font-size: 0.86rem;
	border: 1.5px solid var(--panel-border);
	background: var(--panel-strong);
	color: var(--text);
}
.qualify-pill.is-done {
	border-color: var(--lime);
	color: var(--lime-strong);
}
.qualify-pill.is-muted {
	color: var(--muted);
	background: #dedfdc;
	border-color: var(--panel-border);
}
.qualify-pill.is-current {
	background: var(--check-bg);
	border-color: var(--check-bg);
	color: var(--check-fg);
}
.qualify-check {
	display: inline-flex;
	align-items: center;
	color: var(--lime);
}
.qualify-legend { display: grid; gap: 7px; margin: 2px 0 0; }
.qualify-legend-row {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.4;
	color: var(--muted);
}
.qualify-legend-row strong { color: var(--text); font-weight: 700; margin-right: 6px; }
.qualify-divider { width: 1px; background: var(--panel-border); }
.qualify-aside { display: flex; flex-direction: column; gap: 10px; }
.qualify-aside-head { display: flex; align-items: center; gap: 11px; margin-bottom: 2px; }
.qualify-cal {
	flex: 0 0 auto;
	width: 40px; height: 40px;
	border-radius: var(--radius-sm);
	background: var(--check-bg);
	display: grid; place-items: center;
	color: var(--check-fg);
}
.qualify-window-label {
	margin: 0;
	font-weight: 700;
	font-size: 1rem;
	color: var(--text);
}
.qualify-window-dates {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.22rem;
	letter-spacing: -0.01em;
	color: var(--lime-strong);
}
.qualify-window-note {
	margin: 0;
	color: var(--muted);
	font-size: 0.92rem;
	line-height: 1.45;
}

/* -------- Portal intro (Tier 1): hero + step-card + status-card -------- */
.ph-portal .intro-grid {
	grid-template-columns: minmax(300px, 1fr) minmax(0, 1.32fr);
}
.ph-portal .hero-copy { grid-row: 1 / span 2; }

.step-card, .status-card {
	border-radius: var(--radius-lg);
	padding: 30px 32px;
}
.step-label {
	margin: 0 0 12px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.82rem;
	font-weight: 800;
	color: var(--lime-strong);
}
.card-heading-row { display: flex; align-items: center; gap: 14px; }
.card-heading-row h2 {
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.05;
	margin: 0;
}
.gift-icon { color: var(--lime); font-size: 1.6rem; }
.step-card p:last-child {
	color: var(--muted);
	font-size: 1rem;
	line-height: 1.6;
	margin: 12px 0 0;
	max-width: 420px;
}

.status-card {
	display: grid;
	grid-template-columns: 88px 1fr;
	gap: 24px;
	align-items: center;
	border-color: color-mix(in srgb, var(--lime) 42%, var(--panel-border));
}
.status-icon {
	width: 88px; height: 88px;
	border: 5px solid var(--lime);
	border-radius: 50%;
	display: grid; place-items: center;
	font-size: 1.9rem;
	color: var(--lime-strong);
}
.status-count {
	margin: 0 0 8px;
	color: var(--lime-strong);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.status-card p { color: var(--muted); line-height: 1.45; margin: 0; }
.status-rule {
	border-top: 1px solid var(--panel-border);
	margin-top: 18px;
	padding-top: 16px;
	color: var(--muted);
	display: flex; gap: 10px; align-items: center;
}
.status-dot {
	width: 18px; height: 18px;
	border: 2px solid var(--subtle);
	border-radius: 50%;
	display: inline-flex;
}
.status-rule.is-complete .status-dot {
	border-color: var(--green);
	background: var(--green);
	box-shadow: inset 0 0 0 4px var(--panel-strong);
}

/* ============================ SIZE CHIPS (shared) ============================ */
/* Chips wrap rather than sit in fixed tracks: sizes come from the store's own
   attribute terms, so a run can read "S, M, L" or "Small, Medium, Large". Each
   chip keeps a column-width basis (identical to the old grid for short runs)
   but never shrinks below its own label, so wide labels take fewer per row
   instead of spilling past the chip border. */
.size-grid {
	--chip-cols: 6;
	--chip-gap: 12px;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: var(--chip-gap);
}
.size-grid > .size-chip {
	flex: 0 1 calc((100% - (var(--chip-cols) - 1) * var(--chip-gap)) / var(--chip-cols));
	min-width: min(100%, max-content);
	max-width: 100%;
}
.size-grid--chips { max-width: 440px; }
.size-grid--mini { --chip-gap: 7px; }
.size-grid--wide { --chip-cols: 2; max-width: 190px; }
.size-grid--sizes7 { --chip-cols: 7; --chip-gap: 6px; }
.size-grid--onesize { --chip-cols: 1; width: fit-content; max-width: 100%; }
.size-grid--onesize > .size-chip { flex-basis: 104px; }

.size-chip {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 8px 12px;
	text-align: center;
	line-height: 1.2;
	overflow-wrap: break-word;
	border-radius: var(--radius-sm);
	border: 1.5px solid var(--panel-border);
	background: var(--panel-strong);
	color: var(--text);
	font-weight: 700;
	font-size: 0.98rem;
	cursor: pointer;
	transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}
html[data-theme="dark"] .size-chip { background: rgba(255, 255, 255, 0.02); }
.size-chip--mini {
	min-height: 36px;
	padding: 6px 9px;
	border-radius: var(--radius-xs);
	font-size: 0.82rem;
}
.size-chip:hover {
	border-color: #102F48;
	transform: translateY(-2px);
}
.size-chip[aria-checked="true"] {
	border-color: #102F48;
	background: #102F48;
	color: #ffffff;
	box-shadow: 0 0 0 1px #102F48;
}
html[data-theme="dark"] .size-chip[aria-checked="true"] {
	border-color: var(--lime);
	background: var(--lime);
	color: #102F48;
	box-shadow: 0 0 0 1px var(--lime);
}
.size-chip[aria-checked="true"]::after {
	content: "";
	position: absolute;
	top: -8px; right: -8px;
	width: 20px; height: 20px;
	border-radius: 50%;
	background: var(--lime);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101820' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.2 4.2L19 7'/></svg>");
	background-size: 12px 12px;
	background-repeat: no-repeat;
	background-position: center;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.size-chip--mini[aria-checked="true"]::after {
	top: -7px; right: -7px;
	width: 17px; height: 17px;
	background-size: 10px 10px;
}

.size-help {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--muted);
	font-size: 0.96rem;
	margin: 0;
}
.ruler-icon { color: var(--muted); display: inline-flex; }
.size-guide-link { color: var(--lime-strong); font-weight: 700; }
.size-guide-link:hover { text-decoration: underline; }

.tier-badge {
	display: inline-block;
	padding: 7px 15px;
	border-radius: var(--radius-pill);
	background: var(--lime-tint);
	color: var(--lime-strong);
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.tier-badge--included { border: 1px solid color-mix(in srgb, var(--lime) 55%, transparent); }

/* ============================ TIER 1 PRODUCT CARD ============================ */
.product-card {
	border-radius: var(--radius-lg);
	padding: 24px;
	margin: 0 4px 12px;
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: 34px;
	align-items: stretch;
}
.product-media {
	background: var(--media-bg);
	border: 1px solid var(--panel-border);
	border-radius: var(--radius-md);
	min-height: 380px;
	display: grid;
	place-items: center;
	padding: 24px;
}
.product-media img {
	width: min(100%, 430px);
	max-height: 400px;
	object-fit: contain;
	filter: drop-shadow(0 26px 30px rgba(15, 23, 42, 0.22));
}
.product-details { align-self: center; padding: 8px 22px 8px 6px; }
.product-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(1.9rem, 2.7vw, 2.65rem);
	letter-spacing: -0.02em;
	line-height: 1.05;
	margin: 18px 0 14px;
}
.product-desc {
	color: var(--muted);
	font-size: 1.04rem;
	line-height: 1.55;
	margin: 0;
}
.product-divider {
	border: 0;
	border-top: 1px solid var(--panel-border);
	margin: 26px 0;
}
.size-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	margin-top: 22px;
}
.size-alert {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 12px 18px;
	border-radius: var(--radius-sm);
	background: var(--alert-bg);
	border: 1px solid var(--alert-border);
	color: var(--alert-text);
	font-size: 0.94rem;
	font-weight: 500;
}
.alert-icon { color: var(--alert-icon); display: inline-flex; }
.size-alert.is-complete {
	background: var(--lime-tint);
	border-color: color-mix(in srgb, var(--lime) 45%, transparent);
	color: var(--lime-strong);
}
.size-alert.is-complete .alert-icon { color: var(--lime-strong); }

/* ============================ TIER 1 INCLUDED CARD ============================ */
.included-card {
	border-radius: var(--radius-lg);
	padding: 30px 34px;
	margin: 0 4px 12px;
	display: grid;
	grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr) auto minmax(0, 1.9fr);
	gap: 30px;
	align-items: stretch;
}
.included-media {
	border-radius: var(--radius-md);
	display: grid;
	place-items: center;
	padding: 20px;
	min-height: 240px;
}
.included-media img {
	width: min(100%, 260px);
	max-height: 240px;
	object-fit: contain;
	filter: drop-shadow(0 16px 22px rgba(15, 23, 42, 0.20));
}
.included-header { grid-column: 1 / -1; margin-bottom: 0; }
.selections-header > .tier-badge { margin-bottom: 12px; }
.included-info { align-self: center; padding: 4px 0; }
#includedTitle {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(1.5rem, 2vw, 1.95rem);
	letter-spacing: -0.015em;
	line-height: 1.08;
	margin: 0 0 12px;
}
.included-desc {
	color: var(--muted);
	font-size: 1rem;
	line-height: 1.55;
	margin: 0;
}
.included-divider { width: 1px; background: var(--panel-border); }
.included-sizing { display: flex; flex-direction: column; padding: 4px 0; }
.size-label { font-weight: 700; font-size: 1.06rem; margin: 0 0 16px; }
.size-label--caps {
	text-transform: uppercase;
	letter-spacing: 0.10em;
	font-size: 0.82rem;
	font-weight: 800;
}
.included-sizing .size-help { margin-top: 18px; }
.included-note {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	align-self: flex-end;
	margin-top: auto;
	padding-top: 24px;
	max-width: 320px;
	text-align: left;
}
.included-check {
	flex: 0 0 auto;
	width: 24px; height: 24px;
	border-radius: 50%;
	display: grid; place-items: center;
	background: var(--check-bg);
	color: var(--check-fg);
	margin-top: 2px;
}
.included-note strong { display: block; font-size: 0.98rem; margin-bottom: 4px; }
.included-note p { margin: 0; color: var(--muted); font-size: 0.9rem; line-height: 1.45; }

/* ============================ TIER 2 / TIER 3 SELECTIONS ============================ */
.selections {
	border-radius: var(--radius-lg);
	padding: 34px 34px 38px;
	margin: 0 4px 12px;
}
.selections-header { text-align: center; margin-bottom: 30px; }
.selections-title-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 10px;
}
.selections-header h2 {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	letter-spacing: 0.01em;
	text-transform: uppercase;
	margin: 0 0 10px;
}
.selections-title-row h2 { margin: 0; }
.selections-sub { color: var(--muted); font-size: 1.02rem; margin: 0 0 16px; }
.selections-sub strong { color: var(--lime-strong); font-weight: 700; }
.selections-rule {
	display: inline-block;
	width: 46px; height: 3px;
	border-radius: 3px;
	background: var(--lime);
}

.selection-group + .selection-group { margin-top: 34px; }
.group-heading { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.step-number {
	flex: 0 0 auto;
	width: 32px; height: 32px;
	border-radius: 50%;
	display: grid; place-items: center;
	background: var(--lime-tint);
	color: var(--lime-strong);
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 1rem;
}
.group-heading h3 {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 1.05rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.group-heading p { margin: 3px 0 0; color: var(--muted); font-size: 0.94rem; }

/* -------- Tier selection option cards -------- */
/* Columns follow the number of real products in the group and each section's
   desktop cap (up to 4). Tier 3 uses a cap of 3 so five gifts render 3 + 2.
   --option-cols is emitted by zdx_theme_ph_render_selection_group(). */
.option-grid {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(var(--option-cols, 4), minmax(0, 1fr));
	/* Keep simple-product cards as tall as variable-product cards, including
	   when they wrap onto a different grid row. */
	grid-auto-rows: 1fr;
}
.option-grid--4 { --option-cols: 4; }
.option-card {
	position: relative;
	border: 1px solid var(--panel-border);
	background: var(--card-bg);
	border-radius: var(--radius-md);
	padding: 18px 18px 20px;
	display: flex;
	flex-direction: column;
	transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.option-card:hover {
	transform: translateY(-3px);
	border-color: #102F48;
	box-shadow: var(--shadow-card);
}
.option-card.is-selected {
	border-color: #102F48;
	box-shadow: 0 0 0 1px #102F48, var(--shadow-card);
}
.option-card.is-selected .option-badge {
	background: var(--lime);
	color: #102F48;
}
.option-badge {
	position: absolute;
	top: 14px; left: 14px;
	z-index: 1;
	padding: 5px 11px;
	border-radius: var(--radius-pill);
	background: var(--lime-tint);
	color: #102F48;
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
html[data-theme="dark"] .option-card:not(.is-selected) .option-badge {
	color: #ffffff;
}
.option-media {
	border-radius: var(--radius-sm);
	display: grid;
	place-items: center;
	min-height: 190px;
	padding: 8px;
	margin-bottom: 14px;
}
.option-media img {
	width: min(100%, 244px);
	max-height: 196px;
	object-fit: contain;
	filter: drop-shadow(0 16px 22px rgba(15, 23, 42, 0.20));
}
.option-card h4 {
	margin: 0 0 12px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.3;
	text-align: center;
	letter-spacing: -0.01em;
}
.option-desc {
	margin: -4px 0 14px;
	color: #59606B;
	font-size: 14px;
	line-height: 1.45;
	text-align: center;
}
.option-size-label { margin: 0 0 10px; color: var(--muted); font-size: 0.86rem; }
.option-size-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 0 0 10px;
}
.option-size-head .option-size-label { margin: 0; }
.option-size-guide {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 0.82rem;
	white-space: nowrap;
}
.option-size-guide .ruler-icon svg { width: 15px; height: 15px; }
/* Size controls follow the title directly. */
.option-card .size-grid { margin-top: 0; }
.option-card .option-size-head, .option-card .option-size-label { margin-top: 0; }

/* Simple products offer no size choice, so their card carries a select button
   where the size grid would otherwise sit — same place, same panel treatment as
   the size chips, so a sizeless card reads like a sized one. */
.choose-button {
	margin-top: 0;
	min-height: 46px;
	padding: 0 22px;
	border: 1.5px solid var(--panel-border);
	border-radius: var(--radius-sm);
	background: var(--panel-strong);
	color: var(--text);
	font-weight: 700;
	cursor: pointer;
	transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}
html[data-theme="dark"] .choose-button { background: rgba(255, 255, 255, 0.02); }
.choose-button:hover {
	border-color: var(--lime);
	transform: translateY(-2px);
}
.choose-button.is-selected {
	border-color: #102F48;
	background: #102F48;
	color: #ffffff;
	box-shadow: 0 0 0 1px #102F48;
}
html[data-theme="dark"] .choose-button.is-selected {
	border-color: var(--lime);
	background: var(--lime);
	color: #102F48;
	box-shadow: 0 0 0 1px var(--lime);
}
.option-card .choose-button { width: 100%; margin-top: auto; }
/* In the Tier 1 card the button follows the label; the note below it keeps the
   `margin-top: auto` that pins it to the bottom of the column. */
.included-sizing .choose-button { margin-top: 4px; align-self: flex-start; min-width: min(100%, 240px); }

/* Store-manager diagnostic on the tier pages. Never shown to members. */
.tier-notice {
	margin: 16px auto 0;
	max-width: 780px;
	padding: 12px 16px;
	border: 1px solid var(--alert-border);
	border-radius: var(--radius-sm);
	background: var(--alert-bg);
	color: var(--alert-text);
	font-size: 0.9rem;
	line-height: 1.5;
	text-align: left;
}
.tier-notice strong { color: var(--alert-icon); margin-right: 6px; }

/* ============================ GIFT GRID (Tier 1 portal) ============================ */
.gift-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
	margin: 0 4px 12px;
}
.gift-card {
	position: relative;
	overflow: hidden;
	min-height: 300px;
	border-radius: var(--radius-md);
	padding: 26px;
	display: grid;
	grid-template-columns: 52% 48%;
	gap: 8px;
	align-items: center;
	transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
}
.gift-card:hover {
	transform: translateY(-5px);
	background: var(--panel-hover);
	box-shadow: var(--shadow-card);
}
.gift-card.is-selected {
	border-color: var(--lime);
	box-shadow: 0 0 0 1px var(--lime), var(--shadow-card);
}
.gift-card.is-selected::after {
	content: "";
	position: absolute;
	top: 18px; right: 18px;
	width: 34px; height: 34px;
	border-radius: 50%;
	background: var(--lime);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101820' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.2 4.2L19 7'/></svg>");
	background-size: 18px 18px;
	background-repeat: no-repeat;
	background-position: center;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.product-image { min-height: 210px; display: grid; place-items: center; }
.product-image-swap {
	display: grid;
	grid-template-areas: "image";
	place-items: center;
}
.product-image-swap > img { grid-area: image; }
.product-image-swap .product-image-primary { transition: opacity 0.22s ease; }
.product-image-swap .product-image-secondary {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.22s ease;
}
.product-image-tooltip {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	max-width: min(280px, calc(100vw - 20px));
	padding: 8px 11px;
	border: 1px solid var(--panel-border);
	border-radius: var(--radius-sm);
	background: var(--text);
	box-shadow: 0 10px 24px rgba(15, 23, 42, 0.22);
	color: var(--bg);
	font-size: 0.78rem;
	font-weight: 700;
	line-height: 1.35;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.12s ease;
	will-change: transform;
}
.product-image-tooltip.is-visible { opacity: 1; }
.product-image img {
	width: min(100%, 300px);
	max-height: 235px;
	object-fit: contain;
	filter: drop-shadow(0 24px 25px rgba(15, 23, 42, 0.18));
	transition: transform 0.22s ease;
}
.gift-card:hover .product-image img { transform: scale(1.045); }
@media (hover: hover) {
	.gift-card:hover .product-image-swap .product-image-primary,
	.included-media:hover .product-image-swap .product-image-primary,
	.option-card:hover .product-image-swap .product-image-primary,
	.option-media:hover .product-image-swap .product-image-primary,
	.woocommerce ul.products li.product:hover .product-image-swap .product-image-primary { opacity: 0; }
	.gift-card:hover .product-image-swap .product-image-secondary,
	.included-media:hover .product-image-swap .product-image-secondary,
	.option-card:hover .product-image-swap .product-image-secondary,
	.option-media:hover .product-image-swap .product-image-secondary,
	.woocommerce ul.products li.product:hover .product-image-swap .product-image-secondary { opacity: 1; }
}
.product-content { align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.product-content h3 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(1.2rem, 1.6vw, 1.6rem);
	line-height: 1.15;
	margin: 0 0 14px;
	letter-spacing: -0.02em;
}
.product-content p { color: var(--muted); line-height: 1.55; margin: 0 0 24px; }
.gift-price { color: var(--lime-strong); font-weight: 800; margin: -14px 0 20px; }
.gift-empty {
	grid-column: 1 / -1;
	border-radius: var(--radius-md);
	padding: 28px;
	color: var(--muted);
	text-align: center;
}
.details-button, .select-button {
	border-radius: var(--radius-sm);
	min-height: 46px;
	padding: 0 22px;
	border: 1px solid var(--panel-border);
	cursor: pointer;
	transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}
.details-button {
	width: min(190px, 100%);
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	background: transparent;
	color: var(--text);
}
.details-button:hover { border-color: var(--lime); transform: translateX(2px); }
.select-button {
	display: none;
	margin-top: 10px;
	border-color: transparent;
	background: var(--lime);
	color: #102F48;
	font-weight: 800;
}
.gift-card:hover .select-button,
.gift-card.is-selected .select-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.gift-card.is-selected .select-button { background: var(--lime-strong); }

/* ============================ ACTION BAR (shared) ============================ */
.action-bar {
	margin: 0 4px;
	min-height: 92px;
	border-radius: var(--radius-lg);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 18px 26px;
}
.security-note { display: flex; gap: 16px; align-items: center; }
.security-note strong { font-size: 1.02rem; }
.security-note p { color: var(--muted); margin: 4px 0 0; font-size: 0.9rem; line-height: 1.45; }
.shield {
	flex: 0 0 auto;
	width: 46px; height: 46px;
	display: grid; place-items: center;
	color: var(--lime-strong);
	font-size: 1.5rem;
}
html[data-theme="dark"] .shield { color: var(--lime); }

.continue-button {
	min-width: min(100%, 420px);
	min-height: 62px;
	padding: 0 30px;
	border-radius: var(--radius-md);
	background: var(--cta-bg);
	color: var(--cta-text);
	border: 1px solid var(--cta-border);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.14rem;
	letter-spacing: 0.01em;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
}
.continue-button .button-icon { font-size: 1.2rem; }
.continue-button:disabled { opacity: 0.42; cursor: not-allowed; }
.continue-button:not(:disabled):hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }

/* ============================ FOOTER ============================ */
.site-footer {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 20px;
	padding: 22px 24px 4px;
	color: var(--muted);
}

.footer-legal { display: flex; flex-direction: column; gap: 8px; }
.site-footer nav {
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: clamp(16px, 3vw, 44px);
	font-size: 0.92rem;
}
.site-footer nav a:hover { color: var(--text); }
.footer-copyright { margin: 0; font-size: 0.85rem; color: var(--subtle); }
.powered { margin: 0; font-size: 0.92rem; display: inline-flex; align-items: center; gap: 8px; }
.powered-label { white-space: nowrap; }
.zagwear-logo { height: 18px; width: auto; }

/* ======================== ACCESS DENIED ======================== */
.tier-access-denied .page-shell {
	width: min(1300px, calc(100% - 48px));
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	padding: 19px 0 24px;
}
.tier-access-denied .site-header {
	width: min(1176px, 100%);
	min-height: 87px;
	margin: 0 auto;
	padding: 14px 29px;
}
.tier-access-denied .theme-toggle { display: none; }
.tier-access-denied .brand-logo { height: 54px; }
.tier-access-denied .top-nav {
	gap: 27px;
	font-size: 1.05rem;
}
.tier-access-denied .site-footer {
	margin-top: 0;
	border-top: 1px solid var(--section-border);
	padding: 24px 0 4px;
}
.access-denied-main {
	width: min(860px, 100%);
	margin: 60px auto 55px;
}
.access-denied-card {
	min-height: 736px;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 40px 54px;
	border-radius: 10px;
	text-align: center;
}
.access-denied-lock {
	width: 190px;
	height: 190px;
	margin-bottom: 0;
	color: var(--lime);
}
.access-denied-lock svg { display: block; width: 100%; height: 100%; }
.access-denied-padlock { color: #102F48; }
.access-denied-card h1 {
	margin: 0;
	color: #102F48;
	font-family: var(--font-display);
	font-size: clamp(2.5rem, 3.5vw, 3.125rem);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.035em;
}
.access-denied-rule {
	width: 63px;
	height: 4px;
	margin: 24px 0 28px;
	border-radius: 99px;
	background: var(--lime);
}
.access-denied-copy {
	margin: 0;
	color: #41566b;
	font-size: 1.19rem;
	line-height: 1.62;
}
.access-denied-notice {
	width: min(708px, 100%);
	min-height: 86px;
	margin-top: 28px;
	display: flex;
	align-items: center;
	gap: 23px;
	padding: 17px 38px;
	border: 1px solid rgba(163, 198, 20, 0.24);
	border-radius: 9px;
	background: rgba(163, 198, 20, 0.055);
	color: #3f566d;
	text-align: left;
}
.access-denied-notice p { margin: 0; font-size: 1.02rem; line-height: 1.45; }
.access-denied-info {
	width: 32px;
	height: 32px;
	flex: 0 0 32px;
	display: inline-grid;
	place-items: center;
	border: 3px solid var(--lime);
	border-radius: 50%;
	color: var(--lime-strong);
	font-family: Georgia, serif;
	font-size: 1.24rem;
	font-weight: 700;
	line-height: 1;
}
.access-denied-button {
	width: min(445px, 100%);
	min-height: 72px;
	margin-top: 26px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	border: 1px solid var(--cta-border);
	border-radius: 13px;
	background: var(--cta-bg);
	color: #fff;
	font-family: var(--font-display);
	font-size: 1.18rem;
	font-weight: 700;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.access-denied-button:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }
.access-denied-button:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }

/* ============================ TOAST + MODAL ============================ */
.toast {
	position: fixed;
	left: 50%;
	bottom: 30px;
	transform: translate(-50%, 120px);
	opacity: 0;
	background: var(--panel-strong);
	border: 1px solid var(--panel-border);
	color: var(--text);
	box-shadow: var(--shadow-card);
	padding: 13px 20px;
	border-radius: var(--radius-pill);
	font-weight: 600;
	transition: transform 0.24s ease, opacity 0.24s ease;
	z-index: 50;
}
.toast.is-visible { transform: translate(-50%, 0); opacity: 1; }

.details-modal {
	width: min(560px, calc(100% - 32px));
	border: 1px solid var(--panel-border);
	border-radius: var(--radius-lg);
	background: var(--panel-strong);
	color: var(--text);
	box-shadow: var(--shadow-soft);
	padding: 32px;
}
.details-modal::backdrop { background: rgba(0, 0, 0, 0.48); backdrop-filter: blur(8px); }
.details-modal h2 { font-family: var(--font-display); margin: 4px 0 12px; }
.modal-close {
	position: absolute;
	top: 16px; right: 18px;
	border: 0;
	background: transparent;
	color: var(--muted);
	font-size: 2rem;
	cursor: pointer;
}

/* The size-guide dialog: a framed chart page, so it is sized as a window
   rather than as a text panel and the iframe takes all the room left over. */
.size-guide-modal {
	width: min(880px, calc(100% - 28px));
	height: min(78vh, 780px);
	max-width: none;
	max-height: calc(100% - 40px);
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--panel-border);
	border-radius: var(--radius-lg);
	background: var(--panel-strong);
	color: var(--text);
	box-shadow: var(--shadow-soft);
}
.size-guide-modal[open] { display: flex; flex-direction: column; }
.size-guide-modal::backdrop { background: rgba(0, 0, 0, 0.48); backdrop-filter: blur(8px); }
.size-guide-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 20px;
	border-bottom: 1px solid var(--panel-border);
}
.size-guide-head h2 {
	margin: 0;
	font-family: var(--font-display);
	font-size: 1.06rem;
	font-weight: 700;
}
.size-guide-close {
	flex: 0 0 auto;
	border: 0;
	padding: 0 4px;
	background: transparent;
	color: var(--muted);
	font-size: 1.8rem;
	line-height: 1;
	cursor: pointer;
}
.size-guide-close:hover { color: var(--text); }
.size-guide-body { flex: 1 1 auto; min-height: 0; }
.size-guide-frame {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	background: #fff;
}

/* ============================ CHECKOUT / REVIEW ============================ */
/* The "review your selections and claim your gift" step. Scoped under
   .ph-checkout, which form-checkout.php wraps around the whole page. */

.ph-checkout .intro-grid {
	grid-template-columns: minmax(300px, 1.05fr) minmax(0, 1.72fr);
	align-items: stretch;
	margin-bottom: 20px;
}

.ph-checkout .hero-copy { align-self: stretch; }
.ph-checkout .summary-card,
.ph-checkout .address-card {
	background: var(--panel-strong);
	border: 1px solid var(--section-border);
	box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
}

.ph-checkout .hero-copy h1 span {
	color: #D4AF37;
}

.window-panel {
	border-radius: var(--radius-lg);
	padding: 30px 34px;
	display: flex;
	gap: 20px;
	align-items: flex-start;
}
.window-icon {
	width: 30px; height: 30px;
	color: var(--text);
	margin-top: 2px;
}
.window-text { display: grid; gap: 12px; }
.window-label {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.06rem;
	color: var(--text);
}
.window-dates {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.5rem;
	letter-spacing: -0.01em;
	color: var(--lime-strong);
}
.window-note {
	margin: 0;
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--text);
}

/* -------- Your Selections -------- */
.summary-card {
	border-radius: var(--radius-lg);
	padding: 30px 34px 34px;
	margin: 0 4px 20px;
}

.summary-head { margin-bottom: 22px; }
.summary-head h2 {
	margin: 0 0 16px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.5rem;
	letter-spacing: -0.01em;
}

.back-button {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-height: 46px;
	padding: 0 22px;
	border: 1.5px solid var(--check-bg);
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--text);
	font-weight: 700;
	font-size: 0.98rem;
	transition: transform 0.16s ease, background 0.16s ease;
}
.back-button:hover { transform: translateX(-2px); background: var(--panel-strong); }
html[data-theme="dark"] .back-button { border-color: var(--section-border); }

/* One column per selected item, so every item is the same width and each tier
   band ends up proportional to how many items it holds (a lone Tier 1 item
   spans the full card). --summary-cols and the badge spans are emitted by
   form-checkout.php from the actual cart contents. */
.summary-grid {
	display: grid;
	grid-template-columns: repeat(var(--summary-cols, 1), minmax(0, 1fr));
	row-gap: 18px;
}

.summary-badge {
	justify-self: center;
	margin: 0;
	grid-row: 1;
}

/* Padding is asymmetric on purpose: the outer edges sit flush with the card's
   own padding, so only the gutters around each divider are spaced. */
.summary-item {
	grid-row: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding-right: 18px;
}
.summary-item + .summary-item {
	border-left: 1px solid var(--section-border);
	padding-left: 18px;
}
.summary-item:last-child { padding-right: 0; }

.summary-media {
	display: grid;
	place-items: center;
	min-height: 150px;
	margin-bottom: 18px;
}
.summary-media img {
	width: min(100%, 150px);
	max-height: 140px;
	object-fit: contain;
	filter: drop-shadow(0 14px 20px rgba(15, 23, 42, 0.18));
}

.summary-item h3 {
	margin: 0 0 12px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: -0.01em;
	line-height: 1.3;
}

.summary-specs { display: grid; justify-items: center; gap: 8px; margin: 0; }
.spec { display: flex; align-items: baseline; justify-content: center; gap: 7px; }
.spec dt { color: var(--muted); font-size: 0.875rem; white-space: nowrap; }
.spec dd {
	margin: 0;
	color: var(--text);
	font-weight: 600;
	font-size: 0.875rem;
}

/* -------- Ship to address -------- */
.address-card {
	border-radius: var(--radius-lg);
	margin: 0 4px 20px;
	padding: 26px 34px;
	display: flex;
	align-items: center;
	gap: 26px;
}
.address-icon {
	flex: 0 0 auto;
	width: 62px; height: 62px;
	border-radius: 50%;
	display: grid; place-items: center;
	background: var(--check-bg);
	color: var(--check-fg);
}
.address-icon .theme-icon { width: 28px; height: 28px; }

.address-intro h2 {
	margin: 0 0 8px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.12rem;
}
.address-intro p {
	margin: 0;
	color: var(--muted);
	font-size: 0.95rem;
	line-height: 1.55;
}

.address-divider {
	flex: 0 0 auto;
	align-self: stretch;
	width: 1px;
	background: var(--section-border);
	margin: 0 24px;
}

.address-block {
	display: grid;
	gap: 8px;
	font-style: normal;
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.35;
	color: var(--text);
}
.address-block strong { font-weight: 700; }

.address-card--remote {
	align-items: flex-start;
	padding-top: 32px;
	padding-bottom: 32px;
}
.address-card--remote .address-icon { margin-top: 24px; }
.address-card--remote .address-intro {
	flex: 0 0 210px;
	padding-top: 24px;
}
.remote-address-fields {
	flex: 0 1 700px;
	width: 100%;
	max-width: 700px;
	min-width: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 20px;
}
.remote-address-fields .form-row {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
}
.gift-claim-form--remote .remote-address-fields .form-row-first,
.gift-claim-form--remote .remote-address-fields .form-row-last {
	float: none;
	width: 100%;
}
.remote-address-fields .woocommerce-input-wrapper {
	display: block;
	width: 100%;
}
.remote-address-fields .form-row-wide { grid-column: 1 / -1; }
.remote-address-fields label {
	display: block;
	margin: 0 0 7px;
	color: var(--text);
	font-size: 0.84rem;
	font-weight: 700;
}
.remote-address-fields .required { color: #b42318; }
.remote-address-fields .input-text,
.remote-address-fields select,
.remote-address-fields .select2-container .select2-selection--single {
	width: 100%;
	min-height: 48px;
	border: 1px solid var(--section-border);
	border-radius: var(--radius-sm);
	background: var(--panel-strong);
	color: var(--text);
	font: inherit;
}
.remote-address-fields .input-text,
.remote-address-fields select { padding: 10px 13px; }
.remote-address-fields .select2-container { width: 100% !important; }
.remote-address-fields .select2-container .select2-selection--single .select2-selection__rendered {
	padding: 9px 38px 9px 13px;
	color: var(--text);
	line-height: 28px;
}
.remote-address-fields .select2-container .select2-selection--single .select2-selection__arrow {
	top: 10px;
	right: 9px;
}
.remote-address-fields .input-text:focus,
.remote-address-fields select:focus,
.remote-address-fields .select2-container--focus .select2-selection--single {
	border-color: var(--lime-strong);
	box-shadow: 0 0 0 3px var(--lime-tint);
	outline: 0;
}
.remote-address-fields .woocommerce-invalid .input-text,
.remote-address-fields .woocommerce-invalid select,
.remote-address-fields .woocommerce-invalid .select2-selection--single {
	border-color: #b42318;
}

/* The review step draws the shield in ink rather than lime, and gives the
   claim CTA a little more room than the shared selection-page button. */
.shield--ink,
html[data-theme="dark"] .shield--ink { color: var(--text); }
.shield .theme-icon { width: 42px; height: 42px; }
.ph-checkout .continue-button { min-width: min(100%, 500px); }
.ph-checkout .continue-button .button-icon { width: 1.25em; height: 1.25em; }

/* ============================ THANK YOU ============================ */
.ph-thankyou { padding-top: 20px; }
.thankyou-intro {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: 22px;
	align-items: center;
	margin: 0 4px 12px;
}
.thankyou-hero {
	display: flex;
	align-items: center;
	gap: 28px;
	padding: 14px 4px;
}
.thankyou-check {
	flex: 0 0 auto;
	width: 148px;
	height: 148px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--lime-tint);
	color: var(--lime-strong);
}
.thankyou-check .theme-icon { width: 92px; height: 92px; }
.thankyou-hero h1 {
	font-size: clamp(2.2rem, 3.1vw, 3.25rem);
	margin: 0 0 14px;
	color: var(--text);
}
.thankyou-hero h1 span { color: var(--lime-strong); }
.thankyou-hero p { margin: 0; color: var(--muted); font-size: 0.98rem; }
.thankyou-eyebrow {
	margin: 0 0 8px !important;
	color: var(--lime-strong) !important;
	font-size: 0.72rem !important;
	font-weight: 800;
	letter-spacing: 0.12em;
	line-height: 1.2;
	text-transform: uppercase;
}
.thankyou-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	margin-top: 22px;
}
.thankyou-meta p { display: grid; gap: 2px; color: var(--text); }
.thankyou-meta span { color: var(--muted); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.thankyou-meta strong { color: var(--text); font-size: 0.9rem; }

.thankyou-next {
	border-radius: var(--radius-lg);
	padding: 20px 34px 24px;
}
.thankyou-next h2,
.thankyou-summary h2,
.thankyou-address h2 {
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--text);
}
.thankyou-next-heading,
.thankyou-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.thankyou-next h2 { font-size: 1.08rem; margin: 0 0 18px; }
.thankyou-lock-note,
.thankyou-item-count {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	border: 1px solid color-mix(in srgb, var(--lime) 45%, transparent);
	border-radius: var(--radius-pill);
	background: var(--lime-tint);
	color: var(--text);
	font-size: 0.72rem;
	font-weight: 800;
	line-height: 1;
	padding: 8px 10px;
}
.thankyou-lock-note .theme-icon { width: 15px; height: 15px; color: var(--lime-strong); }
.thankyou-steps {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(20px, 0.42fr) minmax(0, 1fr) minmax(20px, 0.42fr) minmax(0, 1fr);
	align-items: start;
}
.thankyou-step { display: grid; justify-items: center; text-align: center; gap: 7px; min-width: 0; max-width: 100%; }
.thankyou-step-icon {
	width: 64px;
	height: 64px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--icon-bg);
	color: var(--text);
}
.thankyou-step-icon .theme-icon { width: 33px; height: 33px; }
.thankyou-step strong { font-family: var(--font-display); font-size: 0.92rem; }
.thankyou-step strong,
.thankyou-step > span:last-child { max-width: 100%; overflow-wrap: break-word; }
.thankyou-step > span:last-child { color: var(--muted); font-size: 0.75rem; line-height: 1.35; }
.thankyou-step .thankyou-shipping-note { color: var(--lime); }
.thankyou-connector { height: 2px; background: var(--lime); margin: 31px 8px 0; }

.thankyou-summary,
.thankyou-address { border-radius: var(--radius-lg); margin: 0 4px 12px; }
.thankyou-summary { padding: 20px 30px 26px; }
.thankyou-summary h2 { font-size: 1.42rem; margin: 0 0 16px; }
.thankyou-section-heading .thankyou-eyebrow { margin-bottom: 5px !important; }
.thankyou-section-heading .thankyou-item-count { margin-top: 4px; }
.thankyou-product-grid { display: flex; align-items: stretch; }
.thankyou-tier { flex: var(--thankyou-tier-items) 1 0; min-width: 0; }
.thankyou-tier + .thankyou-tier { border-left: 1px solid var(--section-border); }
.thankyou-tier > .tier-badge { display: table; margin: 0 auto 8px; padding: 6px 13px; font-size: 0.69rem; white-space: nowrap; }
.thankyou-tier-items { display: grid; grid-template-columns: repeat(var(--thankyou-tier-items), minmax(0, 1fr)); }
.thankyou-product { min-width: 0; padding: 0 14px; text-align: center; }
.thankyou-product + .thankyou-product { border-left: 1px solid var(--section-border); }
.thankyou-product-media { height: 126px; display: grid; place-items: center; margin-bottom: 10px; }
.thankyou-product-media img { width: min(100%, 150px); height: 120px; object-fit: contain; filter: drop-shadow(0 12px 15px rgba(15, 23, 42, 0.18)); }
.thankyou-product h3 { margin: 0 0 8px; font-family: var(--font-display); font-size: 0.98rem; line-height: 1.3; }
.thankyou-product dl { display: grid; gap: 5px; margin: 0; }
.thankyou-product dl div { display: flex; justify-content: center; gap: 6px; font-size: 0.8rem; line-height: 1.35; }
.thankyou-product dt { color: var(--muted); white-space: nowrap; }
.thankyou-product dd { margin: 0; color: var(--text); }

.thankyou-address {
	display: grid;
	/* The intro column hugs its copy (its line break is set in the template),
	   leaving the leftover width to the address itself. */
	grid-template-columns: 66px auto 1px minmax(220px, 1fr);
	align-items: center;
	gap: 24px;
	padding: 20px 34px;
	min-height: 106px;
}
.thankyou-round-icon { flex: 0 0 auto; width: 66px; height: 66px; display: grid; place-items: center; border-radius: 50%; background: var(--check-bg); color: var(--check-fg); }
.thankyou-round-icon .theme-icon { width: 30px; height: 30px; }
.thankyou-address h2 { margin: 0 0 7px; font-size: 1rem; }
.thankyou-address p { margin: 0; color: var(--muted); font-size: 0.9rem; line-height: 1.5; }
.thankyou-address .thankyou-eyebrow { margin-bottom: 5px !important; }
.thankyou-divider { align-self: stretch; width: 1px; min-height: 66px; background: var(--section-border); margin: 0; }
/* The address itself is the shared .address-block from the checkout review
   card. Its column here is narrower, so it gets a wrap guard. */
.thankyou-address .address-block { min-width: 0; overflow-wrap: anywhere; }

/* Defensive fallback when a WooCommerce extension prints its standard order
   tables outside the thank-you template hook buffer. The portal summary above
   is the only order presentation on this endpoint. */
body.woocommerce-order-received .woocommerce-order-overview,
body.woocommerce-order-received .woocommerce-order-details,
body.woocommerce-order-received .woocommerce-customer-details,
body.woocommerce-order-received table.woocommerce-table--order-details {
	display: none !important;
}

.thankyou-failed {
	margin: 28px 4px;
	padding: 34px;
	border-radius: var(--radius-lg);
}
.thankyou-failed h1 { margin-top: 0; }
.thankyou-failed-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.thankyou-failed-actions .continue-button { min-width: 180px; }

/* ============================ RESPONSIVE ============================ */
@media (max-width: 1080px) {
	.thankyou-intro { grid-template-columns: 1fr; }
	.thankyou-hero { justify-content: center; }
	.thankyou-address { grid-template-columns: 66px minmax(0, 1fr); }
	.thankyou-address .thankyou-divider { grid-column: 1 / -1; width: 100%; height: 1px; min-height: 0; }
	.thankyou-address address { grid-column: 2; }

	.ph-tier .intro-grid { grid-template-columns: 1fr; }
	.ph-portal .intro-grid { grid-template-columns: 1fr; }
	.ph-portal .hero-copy { grid-row: auto; }

	.included-card {
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.5fr);
		gap: 24px 30px;
	}
	.included-media { grid-row: span 2; }
	.included-divider { display: none; }

	.product-card { grid-template-columns: 1fr; gap: 24px; }
	.product-media { min-height: 320px; }
	.product-details { padding: 0; }

	.option-grid { grid-template-columns: repeat(min(var(--option-cols, 4), 2), minmax(0, 1fr)); }
	.gift-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.action-bar { flex-direction: column; align-items: stretch; }
	.continue-button { width: 100%; min-width: 0; }
	.ph-checkout .continue-button { min-width: 0; }

	.ph-checkout .intro-grid { grid-template-columns: 1fr; }
	/* Stack each tier band; items inside a band sit side by side. */
	.summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.summary-badge, .summary-item { grid-row: auto; grid-column: 1 / -1; }
	.summary-badge { justify-self: start; }
	.summary-item { grid-column: auto; padding: 0; }
	.summary-item + .summary-item { border-left: 0; padding-left: 0; }
}

@media (max-width: 760px) {
	.page-shell { width: min(100% - 26px, 1340px); padding-top: 14px; }
	.site-header { padding: 14px 16px; }
	.brand-logo { height: 36px; }
	.woocommerce-checkout .brand-logo { height: 28px; }
	.top-nav { gap: 12px; }
	.portal-label, .nav-divider { display: none; }
	.help-dropdown { right: -112px; }

	.intro-grid { margin: 24px 0 16px; }
	.hero-copy { padding: 0; }

	.info-panel { grid-template-columns: 1fr; gap: 0; padding: 22px; }
	.info-item { padding: 18px 0; }
	.info-divider { width: auto; height: 1px; }
	.info-body, .info-body--tall { max-width: none; }

	.qualify-panel { grid-template-columns: 1fr; gap: 22px; padding: 24px 22px; }
	.qualify-divider { width: auto; height: 1px; }

	.status-card { grid-template-columns: 1fr; text-align: left; }

	.included-card, .selections, .action-bar, .gift-grid { margin: 0 0 16px; }
	.included-card { grid-template-columns: 1fr; padding: 22px; }
	.included-media { grid-row: auto; min-height: 220px; }
	.included-note { align-self: flex-start; max-width: none; }

	.selections { padding: 24px 20px 28px; }
	.size-grid--chips { max-width: none; --chip-cols: 3; }
	.size-guide-modal { width: calc(100% - 16px); height: min(88vh, 100%); }
	.product-card { margin: 0 0 16px; padding: 22px; }
	.size-footer { flex-direction: column; align-items: flex-start; }
	.size-alert { width: 100%; }
	.option-grid, .gift-grid { grid-template-columns: 1fr; }
	.gift-card { grid-template-columns: 1fr; }

	.action-bar { position: sticky; bottom: 12px; z-index: 10; }

	.summary-card, .address-card { margin: 0 0 16px; }
	.summary-card { padding: 24px 20px 28px; }
	.summary-grid { grid-template-columns: 1fr; }
	.window-panel { padding: 24px 22px; }
	.ph-thankyou { padding-top: 8px; }
	.thankyou-hero { justify-content: flex-start; gap: 18px; padding: 0 0 18px; }
	.thankyou-check { width: 100px; height: 100px; }
	.thankyou-check .theme-icon { width: 64px; height: 64px; }
	.thankyou-hero h1 { font-size: clamp(2rem, 8vw, 2.65rem); }
	.thankyou-next-heading,
	.thankyou-section-heading { gap: 12px; }
	.thankyou-steps { grid-template-columns: 1fr; gap: 10px; }
	.thankyou-connector { width: 2px; height: 20px; margin: 0 auto; }
	.thankyou-product-grid { display: block; }
	.thankyou-tier { padding: 0 0 18px; }
	.thankyou-tier + .thankyou-tier { border-left: 0; border-top: 1px solid var(--section-border); padding-top: 18px; }
	.thankyou-product { padding: 0 8px; }
	.thankyou-summary { padding: 22px 16px 10px; }
	.thankyou-address { margin-left: 0; margin-right: 0; padding: 20px; align-items: flex-start; }
	.thankyou-address { grid-template-columns: 56px minmax(0, 1fr); gap: 16px 18px; }
	.thankyou-address .thankyou-round-icon { width: 56px; height: 56px; }
	.thankyou-address address { grid-column: 1 / -1; width: 100%; margin: 0; }

	.address-card { flex-direction: column; align-items: flex-start; gap: 18px; }
	.address-divider { width: auto; height: 1px; align-self: stretch; margin: 0; }
	.address-card--remote .address-icon { margin-top: 0; }
	.address-card--remote .address-intro { flex-basis: auto; padding-top: 0; }
	.remote-address-fields { width: 100%; flex-basis: auto; grid-template-columns: 1fr; }
	.remote-address-fields .form-row { grid-column: 1; }

	.site-footer {
		grid-template-columns: 1fr;
		justify-items: start;
		text-align: left;
		gap: 16px;
	}

	.tier-access-denied .page-shell { width: min(100% - 26px, 1300px); padding-top: 14px; }
	.tier-access-denied .site-header { min-height: 72px; padding: 12px 16px; }
	.tier-access-denied .brand-logo { height: 38px; }
	.tier-access-denied .help-dropdown { right: -12px; }
	.access-denied-main { margin: 28px auto 36px; }
	.access-denied-card { min-height: 0; padding: 28px 20px 30px; }
	.access-denied-lock { width: 142px; height: 142px; margin-bottom: 8px; }
	.access-denied-card h1 { font-size: clamp(2rem, 10vw, 2.65rem); }
	.access-denied-rule { margin: 22px 0; }
	.access-denied-copy { font-size: 1rem; line-height: 1.6; }
	.access-denied-desktop-break { display: none; }
	.access-denied-notice { min-height: 0; margin-top: 24px; gap: 14px; padding: 16px; }
	.access-denied-notice p { font-size: 0.94rem; }
	.access-denied-button { min-height: 60px; margin-top: 22px; }
}

/* =====================================================================
   Quest card gallery modal (assets/js/quest.js)
   ===================================================================== */
.quest-product-media { cursor: zoom-in; }
.quest-product-media:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }

.quest-gallery-modal {
	width: min(880px, calc(100% - 32px));
	max-height: calc(100% - 32px);
	padding: 20px;
	border: 1px solid var(--panel-border);
	border-radius: var(--radius-lg);
	background: var(--panel-strong);
	color: var(--text);
	box-shadow: var(--shadow-card);
	overflow: auto;
}
.quest-gallery-modal::backdrop { background: rgba(0, 0, 0, 0.48); backdrop-filter: blur(8px); }
.quest-gallery-close {
	position: absolute;
	top: 8px;
	right: 12px;
	z-index: 2;
	border: 0;
	background: transparent;
	color: var(--muted);
	font-size: 2rem;
	line-height: 1;
	cursor: pointer;
}
.quest-gallery-stage {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 8px;
	margin-top: 24px;
}
.quest-gallery-zoom {
	grid-column: 2;
	height: min(62vh, 560px);
	min-width: 0;
	overflow: hidden;
	border-radius: var(--radius-sm);
	background: var(--media-bg);
	cursor: zoom-in;
}
.quest-gallery-zoom img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
	filter: none;
	transition: transform 0.15s ease-out;
}
.quest-gallery-zoom.is-zoomed img { transform: scale(2.2); }
.quest-gallery-nav {
	width: 40px;
	height: 40px;
	border: 1px solid var(--panel-border);
	border-radius: var(--radius-pill);
	background: var(--panel);
	color: var(--text);
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
}
.quest-gallery-prev { grid-column: 1; }
.quest-gallery-next { grid-column: 3; }
.quest-gallery-nav:hover { background: var(--panel-hover); }
.quest-gallery-hint { margin: 10px 0 0; text-align: center; color: var(--subtle); font-size: 0.85rem; }
.quest-gallery-thumbs {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
}
.quest-gallery-thumbs button {
	width: 64px;
	height: 64px;
	padding: 4px;
	border: 2px solid var(--panel-border);
	border-radius: var(--radius-xs);
	background: var(--media-bg);
	cursor: pointer;
}
.quest-gallery-thumbs[hidden],
.quest-gallery-nav[hidden] { display: none; }
.quest-gallery-thumbs button[aria-current="true"] { border-color: var(--lime); }
.quest-gallery-thumbs img { width: 100%; height: 100%; object-fit: contain; }

@media (hover: none) {
	.quest-gallery-hint { display: none; }
	.quest-gallery-zoom { cursor: default; }
}
@media (max-width: 600px) {
	.quest-gallery-modal { padding: 12px; }
	.quest-gallery-zoom { height: 55vh; }
	.quest-gallery-nav { width: 32px; height: 32px; font-size: 1.3rem; }
}