/**
 * Colossus — supplemental styles (things theme.json can't express).
 * Brand guidelines §04: DM Mono for anything that reads as data — prices, SKUs, dosages.
 */

/* Safety net: never allow horizontal page scroll (clip, so sticky header still works). */
html { overflow-x: clip; }

/* Prices, amounts, SKUs, and dosage figures use DM Mono (the "audited number" face). */
.woocommerce-Price-amount,
.woocommerce-Price-amount .amount,
span.price,
p.price,
.price .amount,
.wc-block-components-product-price,
.wc-block-formatted-money-amount,
.product_meta .sku,
.colossus-bulk-note {
	font-family: var(--wp--preset--font-family--mono), ui-monospace, monospace;
	font-feature-settings: "tnum" 1;
	letter-spacing: 0;
}

/* Keep price weight readable against Bebas headings. */
span.price,
p.price {
	font-weight: 500;
}

/* Bebas Neue is a single-weight caps face; prevent faux-bold synthesis on headings. */
h1, h2, h3, h4, h5, h6,
.wp-block-heading,
.wp-block-post-title,
.woocommerce-loop-product__title,
.product_title {
	font-synthesis: none;
}

/* App-style fixed bottom tab bar (mobile only). */
.mobile-tabbar { display: none; }
@media (max-width: 782px) {
	.mobile-tabbar {
		display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
		background: #0b0c0c; border-top: 1px solid rgba(255, 255, 255, 0.1);
		padding: 0.4rem 0.25rem calc(0.4rem + env(safe-area-inset-bottom));
		box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.4);
	}
	.mtb-item {
		flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
		color: rgba(255, 255, 255, 0.72); text-decoration: none;
		font-family: var(--wp--preset--font-family--body);
		font-size: 0.64rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; padding: 0.3rem 0;
	}
	.mtb-item svg { width: 23px; height: 23px; }
	.mtb-item:active, .mtb-item:hover { color: #fff; }
	.mtb-icon-wrap { position: relative; display: inline-flex; }
	.mtb-badge {
		position: absolute; top: -6px; right: -9px; min-width: 16px; height: 16px; padding: 0 4px;
		background: var(--wp--preset--color--primary); color: #fff; border-radius: 100px;
		font-size: 0.6rem; font-weight: 700; display: flex; align-items: center; justify-content: center;
	}
	.mtb-badge[hidden] { display: none; }
	body { padding-bottom: 66px; }
}

/* Animated molecular-network hero — compact so the finder sits above the fold. */
.hero-section { position: relative; overflow: hidden; min-height: calc(100svh - 108px); }
.hero-title { font-size: clamp(2.1rem, 5vw, 3.4rem) !important; }
.hero-section::before {
	content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background: radial-gradient(60% 55% at 80% 22%, rgba(62, 109, 156, 0.18), transparent 64%);
}
.hero-fx { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.55; }
.hero-fx canvas { display: block; width: 100%; height: 100%; }
.hero-section > .hero-inner,
.hero-section .hero-inner { position: relative; z-index: 2; width: 100%; max-width: 1280px; margin-left: auto; margin-right: auto; }
/* Headline + goal finder fill the full header-aligned width. */
.hero-section .hero-title { max-width: none; }

/* Goal Finder (hero recommender). */
.goal-finder { margin-top: 1.4rem; }
.goal-finder__label {
	font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 700;
	color: var(--wp--preset--color--accent); margin-bottom: 0.75rem;
}
.goal-finder__chips { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.gf-chip {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9rem; font-weight: 600; color: #fff; cursor: pointer;
	background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.22);
	border-radius: 100px; padding: 0.55em 1.1em; transition: all .15s ease;
}
.gf-chip:hover { border-color: var(--wp--preset--color--accent); }
.gf-chip.is-active { background: var(--wp--preset--color--primary); border-color: var(--wp--preset--color--primary); }
.goal-finder__panels { margin-top: 1rem; }
.gf-panel { display: none; }
.gf-panel.is-active { display: block; animation: gfFade .25s ease; }
@keyframes gfFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.gf-blurb { color: rgba(255,255,255,0.7); font-size: 0.9rem; margin: 0 0 0.7rem; }
.gf-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.8rem; }
.gf-card {
	display: flex; flex-direction: column; text-decoration: none;
	background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
	border-radius: 12px; overflow: hidden;
	box-shadow: 0 16px 34px rgba(0, 0, 0, 0.42);
	transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.gf-card:hover { transform: translateY(-5px); border-color: var(--wp--preset--color--accent); box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55); }
.gf-card__img { display: block; aspect-ratio: 3 / 2; background-size: cover; background-position: center; background-color: #d7d7d7; }
.gf-card__name { color: #fff; font-weight: 600; font-size: 0.88rem; padding: 0.6rem 0.75rem 0.1rem; line-height: 1.2; }
.gf-card__price { color: var(--wp--preset--color--accent); font-family: var(--wp--preset--font-family--mono); font-size: 0.82rem; padding: 0 0.75rem 0.7rem; }
.gf-card__price .woocommerce-Price-amount { color: var(--wp--preset--color--accent); }
.gf-shopall { display: inline-block; margin-top: 0.9rem; color: #fff; font-weight: 600; font-size: 0.88rem; }
.gf-shopall:hover { color: var(--wp--preset--color--accent); }

/* App-like mobile: chips become a horizontal scroll strip, cards a 2-up grid. */
@media (max-width: 782px) {
	.hero-section { min-height: auto; }
	.goal-finder__chips {
		flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory; padding-bottom: 0.4rem; margin: 0 -1rem; padding-left: 1rem; padding-right: 1rem;
	}
	.goal-finder__chips::-webkit-scrollbar { display: none; }
	.goal-finder__chips { scrollbar-width: none; }
	.gf-chip { flex: 0 0 auto; scroll-snap-align: start; }
	/* One product at a time: horizontal swipe carousel with snap. */
	.gf-cards {
		display: flex; grid-template-columns: none;
		overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none;
		gap: 0.85rem; margin: 0 -1.25rem; padding: 0.25rem 1.25rem 0.5rem;
	}
	.gf-cards::-webkit-scrollbar { display: none; }
	.gf-card { flex: 0 0 84%; scroll-snap-align: center; }
}

/* WP puts a 24px block gap between top-level blocks, letting the white body show
   through as a seam between the dark footer and whatever sits above it. */
.wp-site-blocks > footer { margin-block-start: 0; }

/* Catalog index: dark full-bleed reference list, molecular background.
   Sits in an alignfull group; max-width:none defeats the constrained-layout clamp. */
.cat-index { position: relative; overflow: hidden; background: linear-gradient(160deg, #0b0c0c 0%, #13223f 58%, #0b0c0c 100%); padding: clamp(3.5rem, 6vw, 5.5rem) 0; max-width: none !important; width: 100%; }
.cat-index__fx { position: absolute; inset: 0; z-index: 0; opacity: 0.5; pointer-events: none; }
.cat-index__fx canvas { display: block; width: 100%; height: 100%; }
.cat-index__inner { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; padding: 0 var(--wp--preset--spacing--30); }
.cat-index__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; padding-bottom: 1.4rem; }
.cat-index__title { color: #fff; font-family: var(--wp--preset--font-family--heading); text-transform: uppercase; letter-spacing: 0.01em; font-size: clamp(1.7rem, 3.2vw, 2.3rem); line-height: 1; margin: 0; }
.cat-index__sub { margin: 0; color: rgba(255, 255, 255, 0.42); font-family: var(--wp--preset--font-family--mono); font-size: 0.74rem; letter-spacing: 0.02em; }

/* Two columns of four rows: 8 areas divide evenly, so no orphan row. */
.cat-index__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 4vw, 4rem); border-top: 1px solid rgba(255, 255, 255, 0.16); }
.cat-index__item { margin: 0; }
.cat-row { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; column-gap: 1.1rem; padding: 1.15rem 0.4rem 1.15rem 0; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.11); transition: background-color .16s ease, padding-left .16s ease; }
.cat-row:hover, .cat-row:focus-visible { background-color: rgba(255, 255, 255, 0.05); padding-left: 0.7rem; }
.cat-row__num { font-family: var(--wp--preset--font-family--mono); font-size: 0.68rem; color: rgba(255, 255, 255, 0.32); letter-spacing: 0.04em; }
.cat-row:hover .cat-row__num { color: var(--wp--preset--color--accent); }
.cat-row__body { min-width: 0; }
.cat-row__name { display: block; color: #fff; font-family: var(--wp--preset--font-family--heading); text-transform: uppercase; font-size: 1.22rem; line-height: 1.1; letter-spacing: 0.005em; }
.cat-row:hover .cat-row__name { color: var(--wp--preset--color--accent); }
.cat-row__desc { display: block; margin-top: 0.22rem; color: rgba(255, 255, 255, 0.5); font-size: 0.79rem; line-height: 1.45; }
.cat-row__count { font-family: var(--wp--preset--font-family--mono); font-size: 0.72rem; color: rgba(255, 255, 255, 0.34); font-variant-numeric: tabular-nums; }
.cat-index__note { max-width: 760px; margin: 2.5rem 0 0; color: rgba(255, 255, 255, 0.38); font-size: 0.72rem; line-height: 1.6; }
@media (max-width: 782px) { .cat-index__list { grid-template-columns: 1fr; } .cat-index__note { text-align: left; } }

/* Shop-by-category filter row (shop + category archives). */
.shop-cat-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.75rem; }
.shop-cat-nav__label { font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.78rem; color: var(--wp--preset--color--contrast-2); }
.shop-cat-nav__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.scn-chip {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.85rem; font-weight: 600; text-decoration: none;
	color: var(--wp--preset--color--contrast); background: #fff;
	border: 1px solid var(--wp--preset--color--border); border-radius: 100px;
	padding: 0.45em 0.95em; transition: all .15s ease; white-space: nowrap;
}
.scn-chip:hover { border-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--primary); }
.scn-chip.is-active { background: var(--wp--preset--color--primary); color: #fff; border-color: var(--wp--preset--color--primary); }
@media (max-width: 782px) {
	.shop-cat-nav__chips { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
	.shop-cat-nav__chips::-webkit-scrollbar { display: none; }
	.scn-chip { flex: 0 0 auto; }
}

/* Research-Use-Only chip under the product title. */
.colossus-ruo-chip {
	display: inline-block;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--base-2);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 4px;
	padding: 0.4em 0.7em;
	margin: 0 0 0.75em;
}

/* Nav + buttons stay in DM Sans (body), not Bebas. */
.wp-block-navigation,
.wp-block-button__link {
	font-family: var(--wp--preset--font-family--body);
	text-transform: none;
	letter-spacing: 0;
}

/* Premium dark header: logo left, centered nav, icons right; sticky (app-like). */
.site-header { box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55); position: sticky; top: 0; z-index: 100; }
/* Prominent, site-wide Research-Use-Only bar. */
.ruo-bar {
	text-align: center; font-family: var(--wp--preset--font-family--body);
	font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em;
	color: var(--wp--preset--color--accent);
	padding-bottom: 0.55rem; margin-bottom: 0.55rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.site-header .header-row {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 1.5rem;
	width: 100%;
}
.site-header .site-brand { justify-self: start; margin: 0; }
.site-header .header-nav-center { justify-self: center; }
.site-header .header-icons { justify-self: end; display: flex; align-items: center; gap: 1.5rem; }
.site-header .wp-block-navigation { font-family: var(--wp--preset--font-family--body); }
.site-header .wp-block-navigation a {
	color: #fff;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 1.05rem;
}
.site-header .wp-block-navigation a:hover { color: var(--wp--preset--color--accent); }
/* White account + cart icons, visible on the dark bar. */
.site-header .wc-block-mini-cart__button,
.site-header .wp-block-woocommerce-customer-account a,
.site-header .wp-block-woocommerce-customer-account svg,
.site-header .wc-block-mini-cart__button svg { color: #fff; fill: #fff; stroke: #fff; }
.site-header .wc-block-mini-cart__quantity-badge .wc-block-mini-cart__badge {
	background: var(--wp--preset--color--primary); color: #fff;
}
.site-header .wp-block-site-logo img { height: auto; }

@media (max-width: 782px) {
	.site-header .header-icons { gap: 1rem; }
	.site-header .wp-block-navigation a { font-size: 0.95rem; letter-spacing: 0.06em; }
}