/* ==========================================================================
   ZORA PEPTIDE — Phase 1 Commerce Stylesheet
   The single frontend stylesheet for the child theme. Replaces every inline
   <style> block that previously lived in functions.php / templates.
   Sections:
     1. Utilities & focus states
     2. Promo banner (top) + Shipping banner (bottom, fixed)
     3. Login / registration UI ([zora_login_ui] + form-login.php)
     4. Thank-you page: outcome states, guarantee banner, Venmo & Zelle panels
     5. Researcher acknowledgement gate
     6. COA / lab results (accordion + modern) + modal
     7. Shop archive layout
     8. Account area (dashboard, addresses, orders, edit-account, reset)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. UTILITIES & FOCUS
   -------------------------------------------------------------------------- */

.zora-field-hint {
	color: #7a7a7a;
	display: block;
	font-size: 12px;
	line-height: 1.4;
	margin-top: 4px;
}
.zora-optional { color: #8a8a8a; font-weight: 400; }

.zora-copy-btn:focus-visible,
.zora-promo-code:focus-visible,
.zora-promo-close:focus-visible,
.zora-shipping-close:focus-visible,
.ion-tab:focus-visible,
.zag-enter:focus-visible,
.zag-exit:focus-visible,
.zag-check input:focus-visible,
.dp-coa-lotbtn:focus-visible,
.dp-img-trigger:focus-visible,
.dp-modal-close:focus-visible {
	outline: 2px solid #e11d48;
	outline-offset: 2px;
}

/* Generic copy button (Venmo / Zelle field rows). */
.zora-copy-btn {
	background: #e11d48;
	border: none;
	border-radius: 6px;
	color: #fff;
	cursor: pointer;
	font-size: 12px;
	font-weight: 600;
	padding: 5px 12px;
	transition: background 0.15s;
}
.zora-copy-btn:hover { background: #c1133b; }
.zora-copy-btn.zora-copied { background: #16a34a; }

/* --------------------------------------------------------------------------
   2. BANNERS
   -------------------------------------------------------------------------- */

.zora-promo-banner {
	background: linear-gradient(90deg, #0a0a0a, #1c060b);
	border-bottom: 1px solid rgba(225, 29, 72, 0.35);
	color: #fff;
	font-size: 14px;
	line-height: 1.5;
	position: relative;
	z-index: 999;
}
.zora-promo-inner {
	align-items: center;
	display: flex;
	gap: 10px;
	justify-content: center;
	margin: 0 auto;
	max-width: 1200px;
	padding: 9px 48px 9px 16px;
	text-align: center;
}
.zora-promo-text strong { color: #ff6b8a; }
.zora-promo-divider { color: #666; margin: 0 6px; }

.zora-promo-code {
	background: rgba(225, 29, 72, 0.15);
	border: 1px dashed rgba(225, 29, 72, 0.55);
	border-radius: 6px;
	color: #ff8fa6;
	cursor: pointer;
	font-family: monospace;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.03em;
	margin: 0 4px;
	padding: 3px 10px;
	transition: background 0.15s, color 0.15s;
}
.zora-promo-code:hover { background: rgba(225, 29, 72, 0.3); color: #fff; }
.zora-promo-code.zora-copied { background: #16a34a; border-color: #16a34a; color: #fff; }

.zora-promo-close,
.zora-shipping-close {
	background: transparent;
	border: none;
	color: #999;
	cursor: pointer;
	font-size: 20px;
	line-height: 1;
	padding: 8px 12px;
	position: absolute;
	right: 4px;
	top: 50%;
	transform: translateY(-50%);
}
.zora-promo-close:hover,
.zora-shipping-close:hover { color: #fff; }

.zora-shipping-banner {
	background: #0a0a0a;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	bottom: 0;
	color: #e0e0e0;
	font-size: 13px;
	left: 0;
	position: fixed;
	right: 0;
	z-index: 998;
}
.zora-shipping-inner {
	align-items: center;
	display: flex;
	justify-content: center;
	margin: 0 auto;
	max-width: 1200px;
	padding: 10px 48px 10px 16px;
	position: relative;
	text-align: center;
}
/* JS adds this class to <body> while the fixed banner is visible. */
body.zora-has-shipping-banner { padding-bottom: 46px; }

/* --------------------------------------------------------------------------
   3. LOGIN / REGISTRATION UI
   -------------------------------------------------------------------------- */

/* Hide theme chrome only on the login page (body class set in PHP). */
body.zora-login-page header.elementor-location-header,
body.zora-login-page footer.elementor-location-footer,
body.zora-login-page .site-header,
body.zora-login-page .site-footer {
	display: none;
}
body.zora-login-page { background: #060608; }

#ion-auth-page {
	background: linear-gradient(160deg, #050505 0%, #170409 100%);
	min-height: 100vh;
}
.ion-auth-container {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 0 auto;
	max-width: 1120px;
	min-height: 100vh;
}
.ion-auth-left,
.ion-auth-right {
	box-sizing: border-box;
	flex: 1 1 460px;
	padding: 56px 40px;
}

.ion-auth-box {
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(225, 29, 72, 0.25);
	border-radius: 16px;
	box-shadow: 0 18px 60px rgba(0, 0, 0, 0.6);
	color: #e8e8e8;
	margin: 0 auto;
	max-width: 460px;
	padding: 34px 30px;
}
.ion-auth-logo { display: block; height: auto; margin: 0 auto 10px; width: 160px; }
.ion-brand-sub { color: #9a9a9a; font-size: 13px; margin: 0 0 22px; text-align: center; }

.ion-auth-tabs {
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	display: flex;
	gap: 4px;
	margin-bottom: 22px;
}
.ion-tab {
	background: transparent;
	border: none;
	border-bottom: 2px solid transparent;
	color: #999;
	cursor: pointer;
	flex: 1;
	font-size: 15px;
	font-weight: 600;
	padding: 12px 8px;
	transition: color 0.15s, border-color 0.15s;
}
.ion-tab:hover { color: #fff; }
.ion-tab.active,
.ion-tab[aria-selected="true"] {
	border-bottom-color: #e11d48;
	color: #fff;
}

/* WooCommerce login/register columns inside the card.
   No-JS fallback: both columns visible, stacked. JS toggles .zora-hidden. */
.ion-woo-account .u-columns { display: block; }
.ion-woo-account .u-column1,
.ion-woo-account .u-column2 { float: none; margin: 0 0 26px; width: 100%; }
.ion-woo-account .zora-hidden { display: none; }

.ion-woo-account h2,
.ion-woo-account h3 { color: #fff; font-size: 18px; margin: 0 0 14px; }

.ion-woo-account label { color: #ccc; display: block; font-size: 13px; margin-bottom: 6px; }
.ion-woo-account input[type="text"],
.ion-woo-account input[type="email"],
.ion-woo-account input[type="tel"],
.ion-woo-account input[type="date"],
.ion-woo-account input[type="password"],
.ion-woo-account select {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 8px;
	box-sizing: border-box;
	color: #fff;
	font-size: 15px;
	padding: 11px 14px;
	width: 100%;
}
.ion-woo-account input:focus,
.ion-woo-account select:focus { border-color: #e11d48; outline: none; }
.ion-woo-account ::placeholder { color: #777; }

.ion-woo-account .button,
.ion-woo-account button[type="submit"] {
	background: #e11d48;
	border: none;
	border-radius: 8px;
	color: #fff;
	cursor: pointer;
	font-size: 16px;
	font-weight: 700;
	padding: 13px;
	transition: background 0.15s;
	width: 100%;
}
.ion-woo-account .button:hover { background: #c1133b; }
.ion-woo-account a { color: #ff6b8a; }

.zora-terms-summary {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 8px;
	color: #b5b5b5;
	font-size: 13px;
	line-height: 1.55;
	margin: 6px 0 14px;
	padding: 12px 14px;
}
.zora-terms-summary-heading { color: #fff; font-size: 13px; margin: 0 0 6px; }
.zora-terms-check {
	align-items: flex-start;
	cursor: pointer;
	display: flex;
	gap: 10px;
	margin-top: 10px;
}
.zora-terms-check input { flex-shrink: 0; height: 18px; margin-top: 2px; width: 18px; }

/* Right marketing panel. */
.ion-right-content { color: #ddd; margin: 0 auto; max-width: 480px; }
.ion-right-content h1 { color: #fff; font-size: 28px; line-height: 1.25; margin: 0 0 14px; }
.ion-right-content > p { color: #b5b5b5; font-size: 15px; line-height: 1.6; }
.ion-feature { border-left: 3px solid #e11d48; margin-top: 20px; padding-left: 16px; }
.ion-feature h4 { color: #fff; font-size: 15px; margin: 0 0 6px; }
.ion-feature p { color: #a8a8a8; font-size: 14px; line-height: 1.55; margin: 0; }

@media (max-width: 880px) {
	.ion-auth-right { padding-top: 0; }
	.ion-right-content h1 { font-size: 22px; }
}

/* --------------------------------------------------------------------------
   4. THANK-YOU PAGE
   -------------------------------------------------------------------------- */

.zora-thankyou { margin-bottom: 20px; }
.zora-thankyou--awaiting-payment .woocommerce-thankyou-order-received { color: #9a6b00; }
.zora-thankyou--failed .woocommerce-thankyou-order-received { color: #b42323; }

.zora-guarantee-banner {
	background: linear-gradient(135deg, #0a0a0a, #17060c);
	border: 1px solid rgba(225, 29, 72, 0.35);
	border-radius: 12px;
	color: #eee;
	margin: 0 0 22px;
	padding: 16px 20px;
}
.zora-guarantee-banner-inner { align-items: center; display: flex; gap: 14px; }
.zora-guarantee-banner-icon { flex-shrink: 0; font-size: 26px; }
.zora-guarantee-banner-title { color: #fff; font-size: 17px; font-weight: 700; margin: 0 0 4px; }
.zora-guarantee-banner-sub { color: #bbb; font-size: 13px; margin: 0; }
.zora-guarantee-banner-sub a { color: #ff6b8a; }

.zora-pay-panel {
	background: #0d0d0d;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 12px;
	color: #e8e8e8;
	margin: 0 0 22px;
	padding: 22px;
}

/* Venmo */
.zora-venmo-pay__header { align-items: center; display: flex; gap: 10px; margin-bottom: 12px; }
.zora-venmo-pay__icon { font-size: 24px; }
.zora-venmo-pay__header h2 { color: #fff; font-size: 19px; margin: 0; }
.zora-venmo-pay__step { color: #ccc; font-size: 14px; margin: 8px 0; }
.zora-venmo-pay__button {
	background: #008cff;
	border-radius: 8px;
	color: #fff !important;
	display: inline-block;
	font-weight: 700;
	margin: 8px 0 14px;
	padding: 13px 24px;
	text-decoration: none;
	transition: background 0.15s;
}
.zora-venmo-pay__button:hover { background: #0074d4; }
.zora-venmo-pay__manual { border-top: 1px solid rgba(255, 255, 255, 0.08); margin-top: 12px; padding-top: 12px; }
.zora-venmo-pay__field { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.zora-venmo-pay__label { color: #999; font-size: 13px; min-width: 88px; }
.zora-venmo-pay__field code {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 6px;
	color: #ffd166;
	font-size: 14px;
	padding: 5px 10px;
}
.zora-venmo-pay__warn { color: #b5b5b5; font-size: 13px; margin-top: 10px; }

/* Zelle */
.zora-zelle-header { align-items: center; display: flex; gap: 10px; margin-bottom: 12px; }
.zora-zelle-header h2 { color: #fff; font-size: 19px; margin: 0; }
.zora-zelle-step { color: #ccc; font-size: 14px; margin: 8px 0; }
.zora-zelle-copy-fields { border-top: 1px solid rgba(255, 255, 255, 0.08); margin-top: 12px; padding-top: 12px; }
.zora-zelle-field { margin: 10px 0; }
.zora-zelle-field > span:first-child { color: #999; display: block; font-size: 13px; margin-bottom: 4px; }
.zora-zelle-copy-row { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; }
.zora-zelle-copy-row code {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 6px;
	color: #ffd166;
	font-size: 14px;
	padding: 5px 10px;
}
.zora-zelle-instructions { margin-top: 12px; }
.zora-zelle-instructions summary { color: #ff6b8a; cursor: pointer; font-weight: 600; }
.zora-zelle-instructions ol { color: #ccc; font-size: 14px; line-height: 1.6; margin: 12px 0 0 18px; padding: 0; }
.zora-zelle-note { color: #b5b5b5; font-size: 13px; margin-top: 10px; }

/* --------------------------------------------------------------------------
   5. RESEARCHER ACKNOWLEDGEMENT GATE
   -------------------------------------------------------------------------- */

#zora-age-gate {
	align-items: center;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	background: rgba(0, 0, 0, 0.92);
	display: flex;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	inset: 0;
	justify-content: center;
	overflow-y: auto;
	padding: 20px;
	position: fixed;
	z-index: 2147483647;
}
#zora-age-gate[hidden] { display: none; }

.zag-box {
	background: linear-gradient(160deg, #0a0a0a 0%, #1a0505 100%);
	border: 1px solid rgba(225, 29, 72, 0.4);
	border-radius: 16px;
	box-shadow: 0 20px 70px rgba(0, 0, 0, 0.7), 0 0 60px rgba(225, 29, 72, 0.15);
	color: #fff;
	max-width: 460px;
	padding: 36px 30px 28px;
	text-align: center;
	width: 100%;
}
.zag-logo { display: block; height: auto; margin: 0 auto 18px; width: 150px; }
.zag-divider { border: none; border-top: 1px solid rgba(255, 255, 255, 0.08); margin: 0 0 22px; }

#zora-age-gate h2 { color: #fff; font-size: 26px; font-weight: 700; margin: 0 0 12px; }
.zag-intro { color: #b8b8b8; font-size: 14px; line-height: 1.55; margin: 0 0 24px; }

.zag-check {
	align-items: flex-start;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 10px;
	cursor: pointer;
	display: flex;
	gap: 12px;
	margin-bottom: 12px;
	padding: 14px 16px;
	text-align: left;
	transition: border-color 0.15s, background 0.15s;
}
.zag-check:hover { border-color: rgba(225, 29, 72, 0.4); }
.zag-check input {
	accent-color: #e11d48;
	cursor: pointer;
	flex-shrink: 0;
	height: 22px;
	margin: 0;
	width: 22px;
}
.zag-check span { color: #e0e0e0; font-size: 14px; line-height: 1.45; }
.zag-check strong { color: #fff; }

.zag-enter {
	background: #e11d48;
	border: none;
	border-radius: 10px;
	color: #fff;
	cursor: pointer;
	font-size: 17px;
	font-weight: 700;
	margin-top: 14px;
	padding: 16px;
	transition: background 0.15s, transform 0.1s, opacity 0.15s;
	width: 100%;
}
.zag-enter:not(:disabled):hover { background: #c1133b; transform: translateY(-1px); }
.zag-enter:disabled { background: #555; cursor: not-allowed; opacity: 0.4; }

.zag-exit {
	color: #888;
	display: inline-block;
	font-size: 13px;
	margin-top: 16px;
	text-decoration: none;
}
.zag-exit:hover { color: #ff6b8a; }

@media (max-width: 480px) {
	.zag-box { padding: 28px 20px 22px; }
	#zora-age-gate h2 { font-size: 22px; }
	.zag-logo { width: 130px; }
}

/* --------------------------------------------------------------------------
   6. COA / LAB RESULTS
   -------------------------------------------------------------------------- */

.zora-coa-search { display: flex; gap: 8px; margin-bottom: 25px; }
.zora-coa-search-input {
	border: 1px solid #ddd;
	border-radius: 8px;
	flex: 1;
	font-size: 16px;
	padding: 12px 16px;
}
.zora-coa-search-btn {
	background: #e11d48;
	border: none;
	border-radius: 8px;
	color: #fff;
	cursor: pointer;
	font-weight: 600;
	padding: 12px 20px;
}
.zora-coa-empty { color: #666; padding: 12px 0; }

.dp-filter-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.dp-filter-bar select,
.dp-filter-bar input {
	border: 1px solid #ddd;
	border-radius: 8px;
	font-size: 15px;
	padding: 10px 14px;
}
.dp-filter-bar input { flex: 1; min-width: 220px; }

.dp-coa-card {
	align-items: flex-start;
	background: #fff;
	border: 1px solid #e6e6e6;
	border-radius: 12px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
	display: flex;
	gap: 20px;
	justify-content: space-between;
	margin-bottom: 18px;
	padding: 20px;
}
.dp-coa-left { flex: 1; min-width: 0; }
.dp-coa-left > span { color: #999; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; }
.dp-coa-title,
.dp-coa-left h3 { color: #111; font-size: 19px; font-weight: 700; margin: 4px 0 12px; }
.dp-dose { color: #666; font-size: 13px; font-weight: 600; margin: 10px 0 6px; }

.dp-coa-lots { display: flex; flex-wrap: wrap; gap: 8px; }
.dp-coa-lotbtn {
	align-items: center;
	background: #f6f6f6;
	border: 1px solid #ddd;
	border-radius: 8px;
	color: #222;
	cursor: pointer;
	display: inline-flex;
	font-size: 13px;
	gap: 6px;
	padding: 7px 12px;
	text-decoration: none;
	transition: border-color 0.15s, background 0.15s;
}
.dp-coa-lotbtn:hover { background: #fdeef2; border-color: #e11d48; color: #111; }

.dp-badge {
	background: #e11d48;
	border-radius: 999px;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	padding: 2px 8px;
}
.dp-badge-updated { background: #0d6efd; }

.dp-coa-right { flex-shrink: 0; }
.dp-img-trigger {
	background: none;
	border: 1px solid #e6e6e6;
	border-radius: 10px;
	cursor: pointer;
	display: block;
	overflow: hidden;
	padding: 0;
}
.dp-img-trigger img { display: block; height: auto; max-width: 120px; }

/* COA modal */
.dp-modal {
	align-items: center;
	background: rgba(0, 0, 0, 0.75);
	display: flex;
	inset: 0;
	justify-content: center;
	padding: 20px;
	position: fixed;
	z-index: 100000;
}
.dp-modal[hidden] { display: none; }
.dp-modal-content {
	background: #fff;
	border-radius: 14px;
	max-height: 90vh;
	max-width: 620px;
	overflow-y: auto;
	padding: 24px;
	text-align: center;
	width: 100%;
}
.dp-modal-img { border: 1px solid #eee; border-radius: 8px; height: auto; margin-bottom: 14px; max-width: 100%; }
.dp-modal-content p { color: #333; font-size: 14px; margin: 4px 0; }
.dp-modal-close {
	background: #e11d48;
	border: none;
	border-radius: 8px;
	color: #fff;
	cursor: pointer;
	font-weight: 600;
	margin-top: 14px;
	padding: 10px 26px;
}

.dp-pagination { margin-top: 24px; text-align: center; }
.dp-pagination .page-numbers {
	border: 1px solid #ddd;
	border-radius: 6px;
	display: inline-block;
	margin: 0 3px;
	padding: 7px 13px;
	text-decoration: none;
}
.dp-pagination .page-numbers.current { background: #e11d48; border-color: #e11d48; color: #fff; }

@media (max-width: 640px) {
	.dp-coa-card { flex-direction: column; }
	.dp-coa-right { order: -1; }
}

/* --------------------------------------------------------------------------
   7. SHOP ARCHIVE
   -------------------------------------------------------------------------- */

.zora-shop-wrapper { display: flex; flex-wrap: wrap; gap: 32px; }
.zora-shop-content { flex: 1 1 640px; min-width: 0; }
.zora-shop-sidebar { flex: 0 0 240px; }

.zora-shop-sidebar-heading { font-size: 16px; margin: 0 0 12px; }
.zora-shop-sidebar-search { margin-bottom: 24px; }
.zora-shop-category-list { list-style: none; margin: 0 0 24px; padding: 0; }
.zora-shop-category-list li { margin-bottom: 8px; }
.zora-shop-category-list a { color: inherit; text-decoration: none; }
.zora-shop-category-list a:hover { color: #e11d48; }
.zora-shop-category-count { color: #999; font-size: 12px; }
.zora-shop-catalog-nav { margin-bottom: 18px; }

@media (max-width: 880px) {
	.zora-shop-sidebar { flex-basis: 100%; order: 2; }
}

/* --------------------------------------------------------------------------
   8. ACCOUNT AREA
   -------------------------------------------------------------------------- */

.zora-account-wrapper { display: block; }

.zora-dashboard-card,
.zora-address-card {
	background: #fff;
	border: 1px solid #e6e6e6;
	border-radius: 12px;
	margin-bottom: 20px;
	padding: 20px;
}
.zora-dashboard-card h2,
.zora-address-card h2,
.zora-address-card h3 { font-size: 17px; margin: 0 0 12px; }

.zora-dashboard-latest-order p { margin: 4px 0; }
.zora-dashboard-reminder {
	background: #fff8e8;
	border: 1px solid #f0dfae;
	border-radius: 10px;
	color: #7a5c00;
	font-size: 14px;
	margin-bottom: 20px;
	padding: 14px 16px;
}
.zora-dashboard-reminder a { color: #9a6b00; font-weight: 600; }

.zora-dashboard-actions-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
}
.zora-dashboard-actions-list a {
	background: #f4f4f4;
	border: 1px solid #ddd;
	border-radius: 8px;
	color: #222;
	display: inline-block;
	font-size: 14px;
	padding: 9px 14px;
	text-decoration: none;
}
.zora-dashboard-actions-list a:hover { border-color: #e11d48; color: #e11d48; }

.zora-address-cards { display: flex; flex-wrap: wrap; gap: 20px; }
.zora-address-cards .zora-address-card { flex: 1 1 280px; }
.zora-address-empty { color: #777; font-size: 14px; }

/* Order status pills (orders.php uses zora-order-status--{status}). */
.zora-order-status {
	border-radius: 999px;
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	padding: 3px 10px;
}
.zora-order-status--processing { background: #e7f5ec; color: #1a7a3c; }
.zora-order-status--pending,
.zora-order-status--on-hold { background: #fff5e0; color: #9a6b00; }
.zora-order-status--completed { background: #e8f0fe; color: #1a4fb8; }
.zora-order-status--cancelled,
.zora-order-status--failed,
.zora-order-status--refunded { background: #fdecec; color: #b42323; }

/* Read-only terms acceptance record (form-edit-account.php). */
.zora-terms-record {
	background: #f8f8f8;
	border: 1px solid #e6e6e6;
	border-radius: 8px;
	color: #555;
	font-size: 13px;
	margin-bottom: 16px;
	padding: 12px 14px;
}

/* Password-reset confirmation (lost-password-confirmation.php). */
.zora-reset-next-steps { margin: 12px 0 16px 18px; }
.zora-reset-actions { margin: 14px 0; }
.zora-reset-support { color: #777; font-size: 13px; }

/* ==========================================================================
   PHASE 2 ADDITIONS
   9.  Design tokens (single palette across light + dark surfaces)
   10. Product page: research notice, trust row, COA tab, restock form
   11. Shop filters
   12. Offline-payment lifecycle UI
   Brand decision: navy #0D0D67 (from the email suite) is the primary;
   red #e11d48 stays the accent. Dark surfaces (gate, login) keep their
   Phase 1 look; light surfaces adopt navy for structure and red for action.
   ========================================================================== */

:root {
	--zora-navy: #0D0D67;
	--zora-navy-soft: #ecedf8;
	--zora-red: #e11d48;
	--zora-red-dark: #c1133b;
	--zora-ink: #1c1e26;
	--zora-muted: #6b6e7b;
	--zora-line: #e6e7ee;
	--zora-radius: 12px;
}

/* Unify light-surface cards on the token palette. */
.dp-coa-card,
.zora-dashboard-card,
.zora-address-card {
	border-color: var(--zora-line);
}
.dp-coa-title,
.dp-coa-left h3,
.zora-dashboard-card h2,
.zora-address-card h2,
.zora-address-card h3 {
	color: var(--zora-navy);
}
.zora-shop-sidebar-heading { color: var(--zora-navy); }

/* --------------------------------------------------------------------------
   10. PRODUCT PAGE
   -------------------------------------------------------------------------- */

.zora-research-notice {
	background: var(--zora-navy-soft);
	border-left: 3px solid var(--zora-navy);
	border-radius: 6px;
	color: var(--zora-navy);
	font-size: 13px;
	line-height: 1.5;
	margin: 14px 0 10px;
	padding: 10px 14px;
}

.zora-trust-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
}
.zora-trust-row li {
	background: #fff;
	border: 1px solid var(--zora-line);
	border-radius: 999px;
	color: var(--zora-muted);
	font-size: 12px;
	font-weight: 600;
	padding: 5px 12px;
}
.zora-trust-row li::before {
	color: var(--zora-navy);
	content: "\2713\0020";
}

/* Lab Results (COA) product tab. */
.zora-product-coa-intro { color: var(--zora-muted); font-size: 14px; }
.zora-product-coa h3 { color: var(--zora-navy); font-size: 16px; margin: 18px 0 8px; }
.zora-coa-table {
	border: 1px solid var(--zora-line);
	border-collapse: collapse;
	border-radius: 8px;
	width: 100%;
}
.zora-coa-table th,
.zora-coa-table td {
	border-bottom: 1px solid var(--zora-line);
	font-size: 14px;
	padding: 10px 12px;
	text-align: left;
}
.zora-coa-table th {
	background: var(--zora-navy-soft);
	color: var(--zora-navy);
	font-weight: 700;
}
.zora-coa-table tr:last-child td { border-bottom: none; }
.zora-coa-table a { color: var(--zora-red); font-weight: 600; }

/* Back-in-stock form. */
.zora-restock-form {
	background: #fff;
	border: 1px solid var(--zora-line);
	border-radius: var(--zora-radius);
	margin: 16px 0;
	padding: 16px;
}
.zora-restock-form label {
	color: var(--zora-navy);
	display: block;
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 8px;
}
.zora-restock-row { display: flex; gap: 8px; }
.zora-restock-row input[type="email"] {
	border: 1px solid var(--zora-line);
	border-radius: 8px;
	flex: 1;
	font-size: 14px;
	padding: 10px 12px;
}
.zora-restock-row .button {
	background: var(--zora-navy);
	border: none;
	border-radius: 8px;
	color: #fff;
	font-weight: 700;
}
.zora-restock-row .button:hover { background: #090947; }
.zora-restock-done {
	background: #e7f5ec;
	border: 1px solid #bfe3cc;
	border-radius: 8px;
	color: #1a7a3c;
	font-size: 14px;
	margin: 14px 0;
	padding: 10px 14px;
}

/* --------------------------------------------------------------------------
   11. SHOP FILTERS
   -------------------------------------------------------------------------- */

.zora-shop-filters {
	background: #fff;
	border: 1px solid var(--zora-line);
	border-radius: var(--zora-radius);
	margin-top: 20px;
	padding: 16px;
}
.zora-shop-filter-price label {
	color: var(--zora-navy);
	display: block;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 6px;
}
.zora-shop-filter-price-row {
	align-items: center;
	color: var(--zora-muted);
	display: flex;
	gap: 6px;
	margin-bottom: 12px;
}
.zora-shop-filter-price-row input {
	border: 1px solid var(--zora-line);
	border-radius: 8px;
	font-size: 14px;
	min-width: 0;
	padding: 8px 10px;
	width: 50%;
}
.zora-shop-filter-stock {
	align-items: center;
	color: var(--zora-ink);
	cursor: pointer;
	display: flex;
	font-size: 14px;
	gap: 8px;
	margin-bottom: 14px;
}
.zora-shop-filter-apply {
	background: var(--zora-red);
	border: none;
	border-radius: 8px;
	color: #fff;
	font-weight: 700;
	padding: 10px 18px;
	width: 100%;
}
.zora-shop-filter-apply:hover { background: var(--zora-red-dark); }
.zora-shop-filter-clear {
	color: var(--zora-muted);
	display: inline-block;
	font-size: 13px;
	margin-top: 10px;
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   12. OFFLINE-PAYMENT LIFECYCLE UI
   -------------------------------------------------------------------------- */

.zora-payment-claim { margin: 0 0 24px; }
.zora-payment-claim-btn {
	background: var(--zora-navy) !important;
	border: none;
	border-radius: 8px;
	color: #fff !important;
	font-weight: 700;
	padding: 12px 22px;
}
.zora-payment-claim-btn:hover { background: #090947 !important; }
.zora-payment-claim .zora-field-hint { display: block; margin-top: 6px; }

.zora-payment-claimed {
	background: #e7f5ec;
	border: 1px solid #bfe3cc;
	border-radius: 8px;
	color: #1a7a3c;
	font-size: 14px;
	margin: 0 0 24px;
	padding: 12px 14px;
}

/* --------------------------------------------------------------------------
   13. VIEW-ORDER + PAYMENT METHODS (Phase 2 addendum)
   -------------------------------------------------------------------------- */

.zora-view-order-status mark { background: none; }

.zora-view-order-awaiting {
	background: #fff5e0;
	border: 1px solid #f0dfae;
	border-radius: 8px;
	color: #7a5c00;
	font-size: 14px;
	margin: 0 0 20px;
	padding: 12px 16px;
}
.zora-view-order-awaiting a { color: #9a6b00; font-weight: 700; }

.woocommerce-OrderUpdates {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
}
.woocommerce-OrderUpdate {
	background: #fff;
	border: 1px solid var(--zora-line);
	border-radius: 10px;
	margin-bottom: 10px;
	padding: 12px 16px;
}
.woocommerce-OrderUpdate-meta {
	color: var(--zora-muted);
	font-size: 12px;
	margin: 0 0 6px;
}

.zora-default-method-pill {
	background: var(--zora-navy-soft);
	border-radius: 999px;
	color: var(--zora-navy);
	font-size: 11px;
	font-weight: 700;
	margin-left: 6px;
	padding: 2px 8px;
	vertical-align: middle;
}
.zora-payment-methods-empty { margin-bottom: 16px; }
.zora-add-payment-method {
	background: var(--zora-navy) !important;
	border-radius: 8px;
	color: #fff !important;
	font-weight: 700;
}
