/* ==========================================================================
   ZORA STOREFRONT — Phase 3
   Homepage (hero, trust strip, sections, footer), shop/category grid, and
   single-product presentation. Loaded on front page + WooCommerce catalog
   pages only. Builds on zora-design-system.css tokens.
   ========================================================================== */

/* --------------------------------------------------------------------------
   HOMEPAGE SHELL (page template: Zora Home)
   -------------------------------------------------------------------------- */

.zora-home { background: var(--zora-surface-light); }
.zora-home .zora-section-inner { margin: 0 auto; max-width: var(--zora-container); padding: 0 var(--zs-4); }

/* --------------------------------------------------------------------------
   HERO — rounded dark container, crimson glow, layered composition
   -------------------------------------------------------------------------- */

.zora-hero { padding: var(--zs-5) var(--zs-4) 0; }
.zora-hero-box {
	background:
		radial-gradient(680px 340px at 82% 18%, rgba(188, 19, 43, 0.28), transparent 62%),
		radial-gradient(480px 300px at 8% 92%, rgba(188, 19, 43, 0.12), transparent 60%),
		linear-gradient(160deg, #101010 0%, var(--zora-black) 55%, #16090c 100%);
	border: 1px solid rgba(188, 19, 43, 0.25);
	border-radius: var(--zr-xl);
	box-shadow: var(--zsh-lg), var(--zsh-glow-red);
	margin: 0 auto;
	max-width: var(--zora-container);
	overflow: hidden;
	position: relative;
}
/* Subtle molecular linework texture (pure CSS — no image request). */
.zora-hero-box::before {
	background-image:
		radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1.6px);
	background-size: 26px 26px;
	content: "";
	inset: 0;
	mask-image: linear-gradient(120deg, transparent 35%, #000 75%);
	-webkit-mask-image: linear-gradient(120deg, transparent 35%, #000 75%);
	pointer-events: none;
	position: absolute;
}
.zora-hero-grid {
	align-items: center;
	display: grid;
	gap: var(--zs-6);
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	padding: clamp(36px, 6vw, 72px);
	position: relative;
}
.zora-hero-label {
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--zr-pill);
	color: var(--zora-text-muted-on-dark);
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	margin-bottom: var(--zs-4);
	padding: 6px 14px;
	text-transform: uppercase;
}
.zora-hero h1 {
	color: var(--zora-white);
	font-size: clamp(34px, 5.4vw, 60px);
	font-weight: 800;
	line-height: 1.05;
	margin: 0 0 var(--zs-4);
}
.zora-hero h1 .zora-accent { color: #ff4d67; }
.zora-hero-sub { color: var(--zora-text-muted-on-dark); font-size: 17px; line-height: 1.65; margin: 0 0 var(--zs-5); max-width: 520px; }
.zora-hero-actions { display: flex; flex-wrap: wrap; gap: var(--zs-3); margin-bottom: var(--zs-5); }

.zora-hero-media { position: relative; text-align: center; }
.zora-hero-media img {
	border-radius: var(--zr-lg);
	filter: drop-shadow(0 24px 44px rgba(0, 0, 0, 0.5));
	height: auto;
	max-width: 100%;
}
.zora-hero-media-fallback {
	align-items: center;
	aspect-ratio: 4 / 3;
	background: rgba(255, 255, 255, 0.04);
	border: 1px dashed rgba(255, 255, 255, 0.18);
	border-radius: var(--zr-lg);
	color: var(--zora-text-muted-on-dark);
	display: flex;
	font-size: 14px;
	justify-content: center;
	padding: var(--zs-5);
	text-align: center;
}

/* Hero mini trust indicators — render only verified items (PHP-gated). */
.zora-hero-trust { display: flex; flex-wrap: wrap; gap: var(--zs-2); list-style: none; margin: 0; padding: 0; }
.zora-hero-trust li {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--zr-pill);
	color: var(--zora-text-on-dark);
	font-size: 13px;
	font-weight: 600;
	padding: 7px 14px;
}
.zora-hero-trust li::before { color: #ff4d67; content: "\2713\0020"; }

@media (max-width: 880px) {
	.zora-hero-grid { grid-template-columns: 1fr; padding: 28px 22px 34px; }
	.zora-hero-media { order: -1; }
	.zora-hero-media img { max-height: 240px; width: auto; }
}

/* --------------------------------------------------------------------------
   TRUST STRIP
   -------------------------------------------------------------------------- */

.zora-trust-strip {
	background: var(--zora-white);
	border: 1px solid var(--zora-border);
	border-radius: var(--zr-lg);
	box-shadow: var(--zsh-sm);
	display: flex;
	flex-wrap: wrap;
	gap: var(--zs-3) var(--zs-6);
	justify-content: center;
	margin: var(--zs-6) auto 0;
	max-width: var(--zora-container);
	padding: var(--zs-4) var(--zs-5);
}
.zora-trust-strip span { align-items: center; color: var(--zora-text); display: flex; font-size: 14px; font-weight: 600; gap: var(--zs-2); }
.zora-trust-strip span::before { color: var(--zora-red); content: "\2713"; font-weight: 800; }

/* --------------------------------------------------------------------------
   HOMEPAGE SECTIONS
   -------------------------------------------------------------------------- */

.zora-home .zora-section { padding: var(--zs-8) var(--zs-4); }
.zora-section-head { margin: 0 auto var(--zs-6); max-width: 720px; text-align: center; }
.zora-section-head .zora-lede { margin: 0 auto; }

/* Category cards */
.zora-cat-grid { display: grid; gap: var(--zs-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.zora-cat-card {
	background: var(--zora-white);
	border: 1px solid var(--zora-border);
	border-radius: var(--zr-md);
	box-shadow: var(--zsh-sm);
	color: var(--zora-text);
	display: block;
	padding: var(--zs-5);
	text-decoration: none;
	transition: transform var(--zt-med), box-shadow var(--zt-med), border-color var(--zt-med);
}
.zora-cat-card:hover { border-color: rgba(188, 19, 43, 0.4); box-shadow: var(--zsh-md); transform: translateY(-3px); }
.zora-cat-card h3 { color: var(--zora-text); font-size: 17px; margin: 0 0 var(--zs-1); }
.zora-cat-card span { color: var(--zora-text-muted); font-size: 13px; }
.zora-cat-card .zora-cat-arrow { color: var(--zora-red); display: block; font-weight: 800; margin-top: var(--zs-3); }

/* Dark feature panel (testing & COA transparency) */
.zora-feature-panel {
	background:
		radial-gradient(560px 300px at 88% 10%, rgba(188, 19, 43, 0.22), transparent 60%),
		linear-gradient(160deg, var(--zora-charcoal), var(--zora-black));
	border: 1px solid rgba(188, 19, 43, 0.25);
	border-radius: var(--zr-xl);
	box-shadow: var(--zsh-lg);
	color: var(--zora-text-on-dark);
	display: grid;
	gap: var(--zs-6);
	grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
	margin: 0 auto;
	max-width: var(--zora-container);
	overflow: hidden;
	padding: clamp(30px, 5vw, 60px);
}
.zora-feature-panel h2 { color: var(--zora-white); }
.zora-feature-panel p { color: var(--zora-text-muted-on-dark); }
.zora-feature-cells { display: grid; gap: var(--zs-3); grid-template-columns: 1fr 1fr; }
.zora-feature-cell {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--zr-md);
	padding: var(--zs-4);
}
.zora-feature-cell strong { color: #ff8fa0; display: block; font-size: 12px; letter-spacing: 0.1em; margin-bottom: var(--zs-1); text-transform: uppercase; }
.zora-feature-cell span { color: var(--zora-text-on-dark); font-size: 14px; line-height: 1.5; }
@media (max-width: 880px) { .zora-feature-panel { grid-template-columns: 1fr; } }

/* Process steps */
.zora-steps { counter-reset: zstep; display: grid; gap: var(--zs-4); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.zora-step { background: var(--zora-white); border: 1px solid var(--zora-border); border-radius: var(--zr-md); box-shadow: var(--zsh-sm); padding: var(--zs-5); }
.zora-step::before {
	background: rgba(188, 19, 43, 0.1);
	border-radius: var(--zr-pill);
	color: var(--zora-red);
	content: counter(zstep);
	counter-increment: zstep;
	display: inline-block;
	font-weight: 800;
	height: 34px;
	line-height: 34px;
	margin-bottom: var(--zs-3);
	text-align: center;
	width: 34px;
}
.zora-step h3 { font-size: 16px; margin: 0 0 var(--zs-2); }
.zora-step p { color: var(--zora-text-muted); font-size: 14px; line-height: 1.55; margin: 0; }

/* FAQ preview */
.zora-faq { margin: 0 auto; max-width: 760px; }
.zora-faq details { background: var(--zora-white); border: 1px solid var(--zora-border); border-radius: var(--zr-md); margin-bottom: var(--zs-3); padding: var(--zs-4) var(--zs-5); }
.zora-faq summary { color: var(--zora-text); cursor: pointer; font-size: 15px; font-weight: 700; }
.zora-faq details p { color: var(--zora-text-muted); font-size: 14px; line-height: 1.6; margin: var(--zs-3) 0 0; }

/* Premium footer (homepage template) */
.zora-footer { padding: 0 var(--zs-4) var(--zs-6); }
.zora-footer-box {
	background: var(--zora-white);
	border: 1px solid var(--zora-border);
	border-radius: var(--zr-xl);
	box-shadow: var(--zsh-sm);
	display: grid;
	gap: var(--zs-6);
	grid-template-columns: minmax(240px, 4fr) repeat(3, minmax(140px, 2fr));
	margin: 0 auto;
	max-width: var(--zora-container);
	padding: clamp(28px, 4vw, 52px);
}
.zora-footer-brand img { height: auto; margin-bottom: var(--zs-3); width: 140px; }
.zora-footer-brand p { color: var(--zora-text-muted); font-size: 13px; line-height: 1.6; }
.zora-footer h4 { color: var(--zora-text); font-size: 13px; letter-spacing: 0.08em; margin: 0 0 var(--zs-3); text-transform: uppercase; }
.zora-footer ul { list-style: none; margin: 0; padding: 0; }
.zora-footer li { margin-bottom: var(--zs-2); }
.zora-footer a { color: var(--zora-text-muted); font-size: 14px; text-decoration: none; }
.zora-footer a:hover { color: var(--zora-red); }
.zora-footer-legal { color: var(--zora-text-muted); font-size: 12px; margin: var(--zs-5) auto 0; max-width: var(--zora-container); text-align: center; }
@media (max-width: 880px) { .zora-footer-box { grid-template-columns: 1fr 1fr; } .zora-footer-brand { grid-column: 1 / -1; } }

/* --------------------------------------------------------------------------
   SHOP / CATEGORY — premium product grid over WooCommerce's markup
   -------------------------------------------------------------------------- */

.woocommerce ul.products { display: grid !important; gap: var(--zs-4); grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); margin: 0; }
.woocommerce ul.products::before,
.woocommerce ul.products::after { display: none; }
.woocommerce ul.products li.product {
	background: var(--zora-white);
	border: 1px solid var(--zora-border);
	border-radius: var(--zr-md);
	box-shadow: var(--zsh-sm);
	display: flex;
	flex-direction: column;
	float: none !important;
	margin: 0 !important;
	overflow: hidden;
	padding: 0 !important;
	transition: transform var(--zt-med), box-shadow var(--zt-med), border-color var(--zt-med);
	width: auto !important;
}
.woocommerce ul.products li.product:hover { border-color: rgba(188, 19, 43, 0.35); box-shadow: var(--zsh-md); transform: translateY(-4px); }
.woocommerce ul.products li.product a img { border-radius: 0; margin: 0; }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	color: var(--zora-text);
	font-size: 15px;
	font-weight: 700;
	padding: var(--zs-3) var(--zs-4) 0;
}
.woocommerce ul.products li.product .price {
	color: var(--zora-text) !important;
	font-size: 15px;
	font-weight: 700;
	padding: var(--zs-1) var(--zs-4) 0;
}
.woocommerce ul.products li.product .price del { color: var(--zora-text-muted); font-weight: 400; }
.woocommerce ul.products li.product .button {
	background: var(--zora-red) !important;
	border-radius: var(--zr-pill) !important;
	color: var(--zora-white) !important;
	font-weight: 700 !important;
	margin: var(--zs-3) var(--zs-4) var(--zs-4) !important;
	text-align: center;
}
.woocommerce ul.products li.product .button:hover { background: var(--zora-red-bright) !important; }
.woocommerce ul.products li.product .onsale {
	background: var(--zora-red);
	border-radius: var(--zr-pill);
	font-weight: 700;
	left: var(--zs-3);
	line-height: 1;
	min-height: 0;
	padding: 7px 12px;
	top: var(--zs-3);
}

/* Result count / ordering row */
.woocommerce .woocommerce-result-count { color: var(--zora-text-muted); font-size: 14px; }
.woocommerce .woocommerce-ordering select { border: 1px solid var(--zora-border); border-radius: var(--zr-sm); padding: 8px 12px; }

/* Sidebar filters card (built in earlier phases — token alignment) */
.zora-shop-filters { background: var(--zora-white); border: 1px solid var(--zora-border); border-radius: var(--zr-md); box-shadow: var(--zsh-sm); }
.zora-shop-filter-apply { background: var(--zora-red); border-radius: var(--zr-pill); }
.zora-shop-filter-apply:hover { background: var(--zora-red-bright); }

/* --------------------------------------------------------------------------
   SINGLE PRODUCT
   -------------------------------------------------------------------------- */

.woocommerce div.product div.images img { border: 1px solid var(--zora-border); border-radius: var(--zr-lg); }
.woocommerce div.product .product_title { color: var(--zora-text); font-size: clamp(24px, 3vw, 34px); font-weight: 800; }
.woocommerce div.product p.price { color: var(--zora-text) !important; font-size: 24px; font-weight: 800; }
.woocommerce div.product form.cart .button {
	background: var(--zora-red);
	border-radius: var(--zr-pill);
	font-size: 16px;
	font-weight: 700;
	padding: 14px 30px;
}
.woocommerce div.product form.cart .button:hover { background: var(--zora-red-bright); }
.woocommerce div.product form.cart .quantity .qty { border: 1px solid var(--zora-border); border-radius: var(--zr-sm); padding: 12px; }

.zora-research-notice {
	background: var(--zora-surface-light);
	border-left: 3px solid var(--zora-red);
	border-radius: var(--zr-sm);
	color: var(--zora-text);
	font-size: 13px;
	line-height: 1.55;
	margin: var(--zs-4) 0 var(--zs-3);
	padding: var(--zs-3) var(--zs-4);
}
.zora-trust-row { display: flex; flex-wrap: wrap; gap: var(--zs-2); list-style: none; margin: 0 0 var(--zs-4); padding: 0; }
.zora-trust-row li { background: var(--zora-white); border: 1px solid var(--zora-border); border-radius: var(--zr-pill); color: var(--zora-text-muted); font-size: 12px; font-weight: 600; padding: 6px 12px; }
.zora-trust-row li::before { color: var(--zora-red); content: "\2713\0020"; }

.woocommerce div.product .woocommerce-tabs ul.tabs { border: none; padding: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border-color: var(--zora-border); }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent;
	border: none;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	margin: 0 var(--zs-4) 0 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { border-bottom-color: var(--zora-red); }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { color: var(--zora-text-muted); font-weight: 700; padding: 12px 4px; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--zora-text); }

.zora-save-btn {
	background: none;
	border: 1px solid var(--zora-border);
	border-radius: var(--zr-pill);
	color: var(--zora-text-muted);
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	margin-top: var(--zs-2);
	padding: 9px 18px;
	transition: color var(--zt-fast), border-color var(--zt-fast);
}
.zora-save-btn:hover, .zora-save-btn.is-saved { border-color: var(--zora-red); color: var(--zora-red); }
.zora-save-login a { color: var(--zora-red); font-size: 13px; }

.zora-restock-form { background: var(--zora-white); border: 1px solid var(--zora-border); border-radius: var(--zr-md); }
.zora-restock-row .button { background: var(--zora-charcoal); border-radius: var(--zr-pill); }

/* Related products heading */
.woocommerce .related.products > h2,
.woocommerce .up-sells > h2 { font-size: 24px; font-weight: 800; margin-bottom: var(--zs-5); }

/* Breadcrumbs */
.woocommerce .woocommerce-breadcrumb { color: var(--zora-text-muted); font-size: 13px; margin-bottom: var(--zs-5); }
.woocommerce .woocommerce-breadcrumb a { color: var(--zora-text-muted); }
.woocommerce .woocommerce-breadcrumb a:hover { color: var(--zora-red); }

/* --------------------------------------------------------------------------
   PHASE 3.1 — homepage polish
   -------------------------------------------------------------------------- */

/* Hide the global Elementor/theme footer ONLY on the Zora Home template —
   the template renders its own premium footer, so this kills the doubled
   footer + duplicated newsletter block. Scoped: every other page keeps the
   global footer untouched. */
.page-template-zora-home .elementor-location-footer,
.page-template-zora-home footer[data-elementor-type="footer"],
.page-template-zora-home .site-footer { display: none; }

/* Category card imagery */
.zora-cat-thumb {
	aspect-ratio: 16 / 10;
	border-radius: var(--zr-sm);
	display: block;
	height: auto;
	margin-bottom: var(--zs-3);
	object-fit: cover;
	width: 100%;
}
.zora-cat-monogram {
	align-items: center;
	aspect-ratio: 16 / 10;
	background:
		radial-gradient(220px 130px at 78% 22%, rgba(188, 19, 43, 0.16), transparent 65%),
		linear-gradient(160deg, #1a1a1a, var(--zora-black));
	border-radius: var(--zr-sm);
	color: #ff4d67;
	display: flex;
	font-size: 38px;
	font-weight: 800;
	justify-content: center;
	margin-bottom: var(--zs-3);
}
.zora-cat-card:hover .zora-cat-arrow { transform: translateX(4px); }
.zora-cat-arrow { display: inline-block; transition: transform var(--zt-fast); }

/* Hero media: tuned for the feathered transparent vial composition —
   no frame, just a soft red under-glow that follows the alpha. */
.zora-hero-media img { border-radius: 0; filter: drop-shadow(0 26px 40px rgba(188, 19, 43, 0.22)); }

/* ==========================================================================
   ZORA PRECISION LABORATORY — homepage v2 + product card v2
   Full-bleed sections, 1360px content width, editorial type scale,
   alternating surface rhythm. v1 .zora-hero/.zora-cat/.zora-footer classes
   above are retired by the v2 template (kept for rollback safety).
   ========================================================================== */

.zh2-container { margin: 0 auto; max-width: 1360px; padding: 0 clamp(20px, 4vw, 48px); }
.zora-home--v2 { background: var(--zora-white); }

/* Scoped page cleanup: one footer, no fixed bottom bar. */
.page-template-zora-home .zora-shipping-banner { display: none !important; }
body.page-template-zora-home { padding-bottom: 0 !important; }

/* Labels */
.zh2-label {
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--zr-pill);
	color: var(--zora-text-muted-on-dark);
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	margin-bottom: var(--zs-4);
	padding: 6px 14px;
	text-transform: uppercase;
}
.zh2-label--red { border-color: rgba(188, 19, 43, 0.5); color: #ff8fa0; }

/* Section heads — editorial, left-aligned, red rule */
.zh2-section { padding: clamp(64px, 8vw, 112px) 0; }
.zh2-section--tight { padding-top: 0; }
.zh2-section-head { align-items: baseline; display: flex; gap: var(--zs-4); justify-content: space-between; margin-bottom: clamp(28px, 4vw, 48px); }
.zh2-section-head h2 { color: var(--zora-text); font-size: clamp(28px, 3.2vw, 42px); font-weight: 800; line-height: 1.1; margin: 0; padding-left: 18px; position: relative; }
.zh2-section-head h2::before { background: var(--zora-red); border-radius: 2px; bottom: 0.14em; content: ""; left: 0; position: absolute; top: 0.14em; width: 4px; }
.zh2-section-head--center { justify-content: center; text-align: center; }
.zh2-section-head--center h2 { padding-left: 0; }
.zh2-section-head--center h2::before { display: none; }
.zh2-head-link { color: var(--zora-red); font-size: 15px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.zh2-head-link:hover { color: var(--zora-red-bright); }

/* ---------------- 1. HERO ---------------- */
.zh2-hero {
	background:
		radial-gradient(1000px 560px at 76% 26%, rgba(188, 19, 43, 0.32), transparent 62%),
		radial-gradient(720px 460px at 6% 100%, rgba(188, 19, 43, 0.14), transparent 60%),
		linear-gradient(168deg, #0e0e0e 0%, var(--zora-black) 52%, #170a0d 100%);
	color: var(--zora-white);
	overflow: hidden;
	position: relative;
}
.zh2-hero::before { /* fine precision grid */
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
	background-size: 56px 56px;
	content: "";
	inset: 0;
	mask-image: radial-gradient(900px 600px at 70% 30%, #000, transparent 75%);
	-webkit-mask-image: radial-gradient(900px 600px at 70% 30%, #000, transparent 75%);
	pointer-events: none;
	position: absolute;
}
.zh2-hero-inner {
	align-items: center;
	display: grid;
	gap: clamp(28px, 5vw, 72px);
	grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
	margin: 0 auto;
	max-width: 1360px;
	min-height: min(800px, 92vh);
	padding: clamp(56px, 8vh, 110px) clamp(20px, 4vw, 48px) clamp(110px, 14vh, 160px);
	position: relative;
}
.zh2-hero h1 { font-size: clamp(40px, 5.4vw, 72px); font-weight: 800; letter-spacing: -0.015em; line-height: 1.03; margin: 0 0 var(--zs-4); }
.zh2-hero h1 em { color: #ff4d67; font-style: normal; }
.zh2-sub { color: var(--zora-text-muted-on-dark); font-size: clamp(16px, 1.35vw, 19px); line-height: 1.65; margin: 0 0 var(--zs-5); max-width: 520px; }
.zh2-actions { display: flex; flex-wrap: wrap; gap: var(--zs-3); }
.zh2-btn-main { font-size: 16px; padding: 16px 32px; }
.zh2-hero-media { position: relative; text-align: center; }
.zh2-hero-media img { filter: drop-shadow(0 32px 48px rgba(188, 19, 43, 0.26)); height: auto; max-width: min(100%, 680px); }

/* Embedded verification layer */
.zh2-verify {
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	align-items: center;
	background: rgba(255, 255, 255, 0.05);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	bottom: 0;
	display: flex;
	flex-wrap: wrap;
	font-size: 14px;
	gap: var(--zs-3);
	justify-content: center;
	left: 0;
	padding: 14px clamp(20px, 4vw, 48px);
	position: absolute;
	right: 0;
}
.zh2-verify-dot { background: #3ddc84; border-radius: 50%; box-shadow: 0 0 12px rgba(61, 220, 132, 0.8); flex-shrink: 0; height: 8px; width: 8px; }
.zh2-verify-text { color: #d6d6db; }
.zh2-verify-text strong { color: var(--zora-white); font-family: var(--zf-mono); letter-spacing: 0.03em; }
.zh2-verify-sep { color: rgba(255, 255, 255, 0.3); margin: 0 6px; }
.zh2-verify-link { color: #ff8fa0; font-weight: 700; text-decoration: none; white-space: nowrap; }
.zh2-verify-link:hover { color: var(--zora-white); }

/* ---------------- 2. EDITORIAL SPLIT ---------------- */
.zh2-editorial { background: var(--zora-white); padding: clamp(72px, 9vw, 128px) 0; }
.zh2-editorial-grid { align-items: center; display: grid; gap: clamp(32px, 6vw, 96px); grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.zh2-statement { color: var(--zora-text); font-size: clamp(30px, 3.8vw, 54px); font-weight: 800; letter-spacing: -0.015em; line-height: 1.12; margin: 0 0 var(--zs-4); }
.zh2-statement em { color: var(--zora-red); font-style: normal; }
.zh2-statement-sub { color: var(--zora-text-muted); font-size: 17px; line-height: 1.7; margin: 0; max-width: 560px; }
.zh2-stats { display: grid; gap: var(--zs-3); }
.zh2-stat { background: var(--zora-off-white); border-left: 3px solid var(--zora-red); border-radius: 0 var(--zr-md) var(--zr-md) 0; padding: var(--zs-4) var(--zs-5); }
.zh2-stat-num { color: var(--zora-text); display: block; font-size: clamp(30px, 3vw, 44px); font-weight: 800; line-height: 1; }
.zh2-stat-label { color: var(--zora-text-muted); font-size: 14px; font-weight: 600; }
.zh2-stat--dark { background: var(--zora-charcoal); }
.zh2-stat--dark .zh2-stat-num { color: #ff4d67; }
.zh2-stat--dark .zh2-stat-label { color: var(--zora-text-muted-on-dark); }

/* ---------------- 3. CATEGORY MOSAIC ---------------- */
.zh2-mosaic { display: grid; gap: var(--zs-4); grid-auto-rows: 168px; grid-template-columns: repeat(4, 1fr); }
.zh2-tile {
	background-color: var(--zora-charcoal);
	background-position: center;
	background-size: cover;
	border-radius: var(--zr-lg);
	display: flex;
	overflow: hidden;
	position: relative;
	text-decoration: none;
	transition: transform var(--zt-med), box-shadow var(--zt-med);
}
.zh2-tile:hover { box-shadow: var(--zsh-md); transform: translateY(-4px); }
.zh2-tile--lg { grid-column: span 2; grid-row: span 2; }
.zh2-tile--type {
	background-image:
		radial-gradient(320px 200px at 80% 15%, rgba(188, 19, 43, 0.28), transparent 62%),
		linear-gradient(160deg, #1b1b1b, var(--zora-black));
}
.zh2-tile-scrim { background: linear-gradient(180deg, transparent 30%, rgba(8, 8, 8, 0.82)); inset: 0; position: absolute; }
.zh2-tile--type .zh2-tile-scrim { background: none; }
.zh2-tile-body { align-self: flex-end; padding: var(--zs-4) var(--zs-5); position: relative; width: 100%; }
.zh2-tile-name { color: var(--zora-white); display: block; font-size: 20px; font-weight: 800; letter-spacing: -0.01em; }
.zh2-tile--lg .zh2-tile-name { font-size: clamp(24px, 2.4vw, 32px); }
.zh2-tile-meta { color: rgba(255, 255, 255, 0.72); font-size: 13px; font-weight: 600; }
.zh2-tile:hover .zh2-tile-meta { color: #ff8fa0; }

/* ---------------- 4. PRODUCT CARD v2 (sitewide) ---------------- */
.woocommerce ul.products li.product.zora-pcard {
	border: 1px solid var(--zora-border);
	border-radius: var(--zr-lg);
	overflow: hidden;
	transition: transform var(--zt-med), box-shadow var(--zt-med), border-color var(--zt-med);
}
.woocommerce ul.products li.product.zora-pcard:hover { border-color: rgba(188, 19, 43, 0.35); box-shadow: var(--zsh-md); transform: translateY(-5px); }
.zora-pcard-media { background: linear-gradient(172deg, #f8f8f9 0%, #ebebee 100%); display: block; padding: clamp(18px, 2vw, 30px); position: relative; }
.zora-pcard-media img { aspect-ratio: 1 / 1; display: block; height: auto; margin: 0 !important; object-fit: contain; transition: transform 0.35s ease; width: 100%; }
.woocommerce ul.products li.product.zora-pcard:hover .zora-pcard-media img { transform: translateY(-6px) scale(1.04); }
.zora-pcard-sale { background: var(--zora-red); border-radius: var(--zr-pill); color: var(--zora-white); font-size: 12px; font-weight: 800; left: var(--zs-3); letter-spacing: 0.04em; padding: 6px 12px; position: absolute; top: var(--zs-3); z-index: 2; }
.zora-pcard-body { flex: 1; padding: var(--zs-4) var(--zs-4) 0; }
.zora-pcard-badges { display: flex; flex-wrap: wrap; gap: var(--zs-1); margin-bottom: var(--zs-2); }
.zora-pcard-name { font-size: 17px; font-weight: 800; line-height: 1.3; margin: 0 0 var(--zs-1); padding: 0; }
.zora-pcard-name a { color: var(--zora-text); text-decoration: none; }
.zora-pcard-name a:hover { color: var(--zora-red); }
.woocommerce ul.products li.product.zora-pcard .zora-pcard-price,
.zora-pcard-price { color: var(--zora-text); font-size: 19px; font-weight: 800; padding: 0; }
.zora-pcard-price del { color: var(--zora-text-muted); font-weight: 500; }
.zora-pcard-actions { padding: var(--zs-3) var(--zs-4) var(--zs-4); }
.woocommerce ul.products li.product.zora-pcard .button { display: block; margin: 0 !important; width: 100%; }

/* ---------------- 5. VERIFICATION INTERFACE ---------------- */
.zh2-verifysec {
	background:
		radial-gradient(760px 420px at 86% 8%, rgba(188, 19, 43, 0.24), transparent 60%),
		linear-gradient(165deg, #121212, var(--zora-black));
	color: var(--zora-text-on-dark);
	padding: clamp(72px, 9vw, 120px) 0;
}
.zh2-verifysec-grid { align-items: center; display: grid; gap: clamp(32px, 5vw, 80px); grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
.zh2-verifysec h2 { color: var(--zora-white); font-size: clamp(28px, 3.2vw, 44px); font-weight: 800; line-height: 1.1; margin: 0 0 var(--zs-4); }
.zh2-verifysec-copy p { color: var(--zora-text-muted-on-dark); font-size: 17px; line-height: 1.7; margin: 0 0 var(--zs-5); max-width: 520px; }
.zh2-report { background: var(--zora-white); border-radius: var(--zr-lg); box-shadow: var(--zsh-lg); overflow: hidden; }
.zh2-report-chrome { align-items: center; background: var(--zora-surface-light); border-bottom: 1px solid var(--zora-border); display: flex; gap: 7px; padding: 12px 18px; }
.zh2-report-chrome span { background: #d3d3d8; border-radius: 50%; height: 10px; width: 10px; }
.zh2-report-chrome em { color: var(--zora-text-muted); font-size: 12px; font-style: normal; font-weight: 700; letter-spacing: 0.06em; margin-left: var(--zs-2); text-transform: uppercase; }
.zh2-report-row { align-items: center; border-bottom: 1px solid var(--zora-surface-light); color: var(--zora-text-muted); display: flex; font-size: 15px; gap: var(--zs-3); justify-content: space-between; padding: 15px 22px; }
.zh2-report-row strong { color: var(--zora-text); font-family: var(--zf-mono); font-size: 15px; }
.zh2-report-row--head { background: #fcfcfd; }
.zh2-report-row--head span:first-child { color: var(--zora-text); font-size: 16px; font-weight: 800; }
.zh2-chip { background: var(--zora-info-bg); border-radius: var(--zr-pill); color: var(--zora-info-fg); font-size: 12px; font-weight: 800; padding: 5px 12px; }
.zh2-chip--ok { background: var(--zora-ok-bg); color: var(--zora-ok-fg); }
.zh2-report-action { color: var(--zora-red); display: block; font-size: 15px; font-weight: 800; padding: 16px 22px; text-decoration: none; }
.zh2-report-action:hover { background: #fff5f6; color: var(--zora-red-bright); }

/* ---------------- 6. CONNECTED JOURNEY ---------------- */
.zh2-journey { counter-reset: none; display: grid; gap: clamp(24px, 3vw, 48px); grid-template-columns: repeat(3, 1fr); list-style: none; margin: 0; padding: var(--zs-5) 0 0; position: relative; }
.zh2-journey::before { background: linear-gradient(90deg, transparent, rgba(188, 19, 43, 0.55) 18%, rgba(188, 19, 43, 0.55) 82%, transparent); content: ""; height: 2px; left: 6%; position: absolute; right: 6%; top: calc(var(--zs-5) + 24px); }
.zh2-jstep { position: relative; text-align: center; }
.zh2-jnode { align-items: center; background: var(--zora-red); border: 4px solid var(--zora-white); border-radius: 50%; box-shadow: 0 6px 18px rgba(188, 19, 43, 0.35); color: var(--zora-white); display: inline-flex; font-size: 17px; font-weight: 800; height: 48px; justify-content: center; margin-bottom: var(--zs-4); position: relative; width: 48px; z-index: 1; }
.zh2-jstep h3 { color: var(--zora-text); font-size: 18px; font-weight: 800; margin: 0 0 var(--zs-2); }
.zh2-jstep p { color: var(--zora-text-muted); font-size: 15px; line-height: 1.6; margin: 0 auto; max-width: 300px; }

/* ---------------- 7. FAQ — EDITORIAL ---------------- */
.zh2-faqsec { background: var(--zora-surface-light); padding: clamp(64px, 8vw, 112px) 0; }
.zh2-faq-grid { align-items: start; display: grid; gap: clamp(32px, 5vw, 88px); grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.zh2-faq-side { position: sticky; top: var(--zs-5); }
.zh2-faq-side h2 { color: var(--zora-text); font-size: clamp(28px, 3vw, 40px); font-weight: 800; margin: 0 0 var(--zs-3); }
.zh2-faq-side p { color: var(--zora-text-muted); font-size: 16px; line-height: 1.65; margin: 0 0 var(--zs-4); }
.zh2-faq-list details { border-bottom: 1px solid var(--zora-border); }
.zh2-faq-list summary { color: var(--zora-text); cursor: pointer; font-size: 17px; font-weight: 700; list-style: none; padding: 20px 36px 20px 0; position: relative; }
.zh2-faq-list summary::-webkit-details-marker { display: none; }
.zh2-faq-list summary::after { color: var(--zora-red); content: "+"; font-size: 24px; font-weight: 400; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); transition: transform var(--zt-fast); }
.zh2-faq-list details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.zh2-faq-list details p { color: var(--zora-text-muted); font-size: 15px; line-height: 1.7; margin: 0; padding: 0 0 20px; }

/* ---------------- 8. UNIFIED FOOTER ---------------- */
.zh2-footer { background: linear-gradient(180deg, #111111, var(--zora-black)); color: var(--zora-text-muted-on-dark); padding: clamp(56px, 7vw, 92px) 0 28px; }
.zh2-news { align-items: center; border-bottom: 1px solid rgba(255, 255, 255, 0.1); display: grid; gap: clamp(20px, 4vw, 64px); grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); margin-bottom: clamp(36px, 5vw, 60px); padding-bottom: clamp(36px, 5vw, 60px); }
.zh2-news h2 { color: var(--zora-white); font-size: clamp(24px, 2.6vw, 34px); font-weight: 800; margin: 0 0 var(--zs-2); }
.zh2-news p { font-size: 15px; margin: 0; }
.zh2-hsform { min-height: 56px; }
.zh2-hs-loading { align-items: center; color: var(--zora-text-muted-on-dark); display: flex; font-size: 14px; gap: var(--zs-2); }
.zh2-hs-success { color: #3ddc84; font-size: 15px; font-weight: 700; margin: var(--zs-2) 0 0; }
.zh2-hs-error a { color: #ff8fa0; }
.zh2-hs-adminnote { color: #ff8fa0; font-size: 12px; margin-top: var(--zs-2); }
/* HubSpot raw-HTML embed styling (applies when the form renders inline;
   iframe embeds keep HubSpot-side styling — see implementation notes). */
.zh2-hsform .hs-form { align-items: flex-start; display: flex; flex-wrap: wrap; gap: var(--zs-2); }
.zh2-hsform .hs-form-field { flex: 1 1 260px; margin: 0; }
.zh2-hsform .hs-form-field label { color: var(--zora-text-muted-on-dark); font-size: 13px; }
.zh2-hsform .hs-input { background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--zr-pill); color: var(--zora-white); font-size: 15px; padding: 14px 20px; width: 100%; }
.zh2-hsform .hs-input:focus { border-color: var(--zora-red-bright); outline: none; }
.zh2-hsform .hs-button { background: var(--zora-red); border: none; border-radius: var(--zr-pill); color: var(--zora-white); cursor: pointer; font-size: 15px; font-weight: 800; padding: 14px 30px; transition: background var(--zt-fast); }
.zh2-hsform .hs-button:hover { background: var(--zora-red-bright); }
.zh2-hsform .hs-error-msgs { color: #ff8fa0; font-size: 13px; list-style: none; margin: 6px 0 0; padding: 0; }
.zh2-hsform .legal-consent-container, .zh2-hsform .legal-consent-container p { color: rgba(255, 255, 255, 0.55); font-size: 12px; }
.zh2-footer-grid { display: grid; gap: clamp(24px, 4vw, 56px); grid-template-columns: minmax(240px, 4fr) repeat(4, minmax(120px, 2fr)); }
.zh2-footer-brand img { height: auto; margin-bottom: var(--zs-3); width: 150px; }
.zh2-footer-brand p { font-size: 13px; line-height: 1.65; margin: 0; }
.zh2-footer h4 { color: var(--zora-white); font-size: 13px; letter-spacing: 0.1em; margin: 0 0 var(--zs-3); text-transform: uppercase; }
.zh2-footer ul { list-style: none; margin: 0; padding: 0; }
.zh2-footer li { margin-bottom: var(--zs-2); }
.zh2-footer-grid a { color: var(--zora-text-muted-on-dark); font-size: 14px; text-decoration: none; }
.zh2-footer-grid a:hover { color: #ff8fa0; }
.zh2-footer-legal { border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 12px; margin-top: clamp(36px, 5vw, 56px); padding-top: var(--zs-4); text-align: center; }
.zh2-footer-legal p { margin: 0 0 var(--zs-1); }

/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 1024px) {
	.zh2-hero-inner { grid-template-columns: 1fr; min-height: 0; padding-bottom: 130px; text-align: left; }
	.zh2-hero-media { order: -1; }
	.zh2-hero-media img { max-height: 300px; width: auto; }
	.zh2-editorial-grid, .zh2-verifysec-grid { grid-template-columns: 1fr; }
	.zh2-mosaic { grid-auto-rows: 150px; grid-template-columns: repeat(2, 1fr); }
	.zh2-tile--lg { grid-column: span 2; grid-row: span 1; min-height: 200px; }
	.zh2-faq-grid { grid-template-columns: 1fr; }
	.zh2-faq-side { position: static; }
	.zh2-news { grid-template-columns: 1fr; }
	.zh2-footer-grid { grid-template-columns: 1fr 1fr; }
	.zh2-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
	.zh2-verify { font-size: 12px; gap: var(--zs-2); justify-content: flex-start; padding: 10px 16px; }
	.zh2-journey { gap: var(--zs-5); grid-template-columns: 1fr; padding-left: 8px; }
	.zh2-journey::before { bottom: 40px; height: auto; left: 31px; right: auto; top: 48px; width: 2px; background: linear-gradient(180deg, rgba(188,19,43,0.55), rgba(188,19,43,0.15)); }
	.zh2-jstep { display: grid; gap: 4px var(--zs-4); grid-template-columns: 48px 1fr; text-align: left; }
	.zh2-jnode { grid-row: 1 / span 2; margin: 0; }
	.zh2-jstep p { margin: 0; max-width: none; }
	.zh2-section-head { align-items: flex-start; flex-direction: column; gap: var(--zs-2); }
	.woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: var(--zs-3); }
	.zora-pcard-name { font-size: 15px; }
}