/* ==========================================================================
   DecaBio — front-end stylesheet
   Complements theme.json. Holds things that theme.json can't express cleanly:
   - block-style class hooks (is-style-*, .site-header, .site-footer, etc.)
   - custom-block component styles (loaded per-block too, but kept here for
     editor/front-end parity and easy global tweaks)
   - hover / focus / animation states
   - responsive overrides specific to the design
   ========================================================================== */

/* ---------- Reset polish ---------- */
img { max-width: 100%; height: auto; display: block; }
a { transition: color 0.2s ease; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.site-header.is-scrolled {
	box-shadow: 0 2px 20px rgba(0,0,0,0.08);
	border-bottom-color: transparent !important;
}
.site-header .header-inner { gap: 24px; }
/* Brand lockup — a flex group holding a core/image and a core/paragraph, so it
   stays editable in the Site Editor. The rules below keep the front-end output
   identical to the old raw-HTML version. */
.site-header .header-brand {
	display: inline-flex;
	align-items: center;
	gap: 10px !important;
	text-decoration: none;
	color: inherit;
	margin: 0;
}
.site-header .header-brand-img,
.site-header .header-brand-img a { display: block; margin: 0; line-height: 0; }
.site-header .header-brand-img img { height: 40px; width: auto; display: block; }
.site-header .header-brand-text {
	font-family: Montserrat, sans-serif;
	font-size: 22px !important;
	font-weight: 700;
	letter-spacing: 0.5px;
	color: var(--wp--preset--color--dark);
	line-height: 1;
	margin: 0;
}
.site-header .header-brand-text a {
	color: inherit;
	text-decoration: none;
}

/* Navigation */
.site-header .wp-block-navigation .wp-block-navigation-item__content {
	padding: 8px 18px;
	color: var(--wp--preset--color--text);
	font-size: 14px;
	letter-spacing: 0.5px;
	transition: color 0.2s ease;
}
.site-header .wp-block-navigation .wp-block-navigation-item__content:hover,
.site-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--primary);
}
.site-header .wp-block-navigation .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 6px;
	box-shadow: 0 4px 16px rgba(0,0,0,0.08);
	padding: 8px 0;
	min-width: 220px;
}
.site-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 8px 20px;
	font-size: 14px;
}
.site-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--bg-light);
	color: var(--wp--preset--color--primary);
}

/* Header CTA button */
.header-cta .wp-block-button__link {
	background: var(--wp--preset--color--accent);
	color: #fff;
	border-radius: 6px;
}
.header-cta .wp-block-button__link:hover {
	background: var(--wp--preset--color--accent-hover);
}

/* ==========================================================================
   Section variants (block styles on core/group)
   ========================================================================== */
/* Section variants — !important needed because WP-FSE has-global-padding
   emits inline-style root padding that wins over class selectors. */
.wp-block-group.is-style-section,
.wp-block-group.is-style-section-light,
.wp-block-group.is-style-section-dark,
.wp-block-group.is-style-section-gradient {
	padding-top:    var(--wp--preset--spacing--huge) !important;
	padding-bottom: var(--wp--preset--spacing--huge) !important;
	padding-left:   var(--wp--preset--spacing--md)   !important;
	padding-right:  var(--wp--preset--spacing--md)   !important;
	margin-top:     0 !important;
	margin-bottom:  0 !important;
}

/* Kill the blockGap that puts 24px white seams between full-width sections.
   We control internal spacing with section padding instead. */
main, .wp-site-blocks > main {
	margin: 0 !important;
}
main > .wp-block-group.alignfull,
main > section.alignfull,
main > .decabio-hero {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
.wp-block-group.is-style-section-light { background: var(--wp--preset--color--bg-light); }
.wp-block-group.is-style-section-dark {
	background: var(--wp--preset--color--primary-dark);
	color: rgba(255,255,255,0.9) !important;
}
/* !important on dark/gradient text colors is required because theme.json
   emits a `:root :where(h2) { color: ... }` rule that wins over inline styles
   at equal specificity. We deliberately force white inside these section
   variants so any nested heading/paragraph reads correctly on dark bg. */
.wp-block-group.is-style-section-dark :is(h1,h2,h3,h4,h5,h6) { color: #ffffff !important; }
.wp-block-group.is-style-section-dark :is(p, li) { color: rgba(255,255,255,0.85) !important; }
.wp-block-group.is-style-section-dark a:not(.wp-block-button__link) { color: var(--wp--preset--color--primary-light) !important; }
.wp-block-group.is-style-section-dark .is-style-section-label { color: var(--wp--preset--color--primary-light) !important; }

.wp-block-group.is-style-section-gradient {
	background: var(--wp--preset--gradient--dark-teal);
	color: rgba(255,255,255,0.9) !important;
}
.wp-block-group.is-style-section-gradient :is(h1,h2,h3,h4,h5,h6) { color: #ffffff !important; }
.wp-block-group.is-style-section-gradient :is(p, li) { color: rgba(255,255,255,0.85) !important; }
.wp-block-group.is-style-section-gradient a:not(.wp-block-button__link) { color: var(--wp--preset--color--primary-light) !important; }
.wp-block-group.is-style-section-gradient .is-style-section-label { color: var(--wp--preset--color--primary-light) !important; }

/* Outline button when placed on a dark/gradient section — needs to be visible */
.wp-block-group.is-style-section-dark .wp-block-button.is-style-outline a,
.wp-block-group.is-style-section-gradient .wp-block-button.is-style-outline a {
	background: transparent !important;
	color: #ffffff !important;
	border: 2px solid rgba(255,255,255,0.7) !important;
}
.wp-block-group.is-style-section-dark .wp-block-button.is-style-outline a:hover,
.wp-block-group.is-style-section-gradient .wp-block-button.is-style-outline a:hover {
	background: rgba(255,255,255,0.1) !important;
	border-color: #ffffff !important;
}

/* CTA box */
.wp-block-group.is-style-cta-box {
	background: var(--wp--preset--color--bg-light);
	border-left: 4px solid var(--wp--preset--color--accent);
	padding: var(--wp--preset--spacing--md);
	border-radius: 0 6px 6px 0;
	margin: var(--wp--preset--spacing--lg) 0;
}

/* ==========================================================================
   Inline block styles
   ========================================================================== */
.is-style-section-label {
	display: inline-block;
	font-size: 12px !important;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--wp--preset--color--accent);
	margin-bottom: var(--wp--preset--spacing--sm);
}
.is-style-product-badge {
	display: inline-block;
	padding: 4px 12px;
	font-size: 13px !important;
	font-weight: 500;
	border-radius: 20px;
	background: var(--wp--preset--color--primary-light);
	color: var(--wp--preset--color--primary-dark);
	margin-right: 8px;
}
.is-style-feature-list {
	list-style: none;
	padding-left: 0;
}
.is-style-feature-list li {
	position: relative;
	padding-left: 28px;
	margin-bottom: var(--wp--preset--spacing--sm);
	line-height: 1.6;
}
.is-style-feature-list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 6px;
	width: 18px;
	height: 18px;
	background: var(--wp--preset--color--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'/%3E%3C/svg%3E") center/12px no-repeat;
	border-radius: 50%;
}

/* ==========================================================================
   Custom blocks — front-end + editor styling
   ========================================================================== */

/* decabio/hero */
.decabio-hero {
	position: relative;
	overflow: hidden;
	padding: calc(var(--wp--preset--spacing--huge) + 60px) var(--wp--preset--spacing--md) var(--wp--preset--spacing--huge);
	background: linear-gradient(135deg, #0c2d3f 0%, #0d5c63 60%, #0a7e6e 100%);
	color: #fff;
}
.decabio-hero::before {
	content: '';
	position: absolute;
	top: -50%; right: -20%;
	width: 600px; height: 600px;
	background: radial-gradient(circle, rgba(160,216,213,0.12) 0%, transparent 70%);
	border-radius: 50%;
	pointer-events: none;
}
.decabio-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 1140px;
	margin: 0 auto;
}
.decabio-hero__label {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--wp--preset--color--primary-light);
	margin-bottom: var(--wp--preset--spacing--sm);
}
.decabio-hero__heading {
	font-size: 3rem;
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
	margin: 0 0 var(--wp--preset--spacing--sm);
	max-width: 700px;
}
.decabio-hero--page .decabio-hero__heading { font-size: 2.5rem; }
.decabio-hero__lead {
	font-size: 1.2rem;
	line-height: 1.7;
	color: rgba(255,255,255,0.8);
	max-width: 600px;
	margin: 0 0 var(--wp--preset--spacing--lg);
}
.decabio-hero__actions {
	display: flex;
	gap: var(--wp--preset--spacing--sm);
	flex-wrap: wrap;
}
.decabio-hero__btn {
	display: inline-block;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.5px;
	padding: 14px 36px;
	border-radius: 6px;
	border: 2px solid transparent;
	cursor: pointer;
	transition: all 0.2s ease;
	text-decoration: none;
	text-align: center;
}
.decabio-hero__btn--primary {
	background: var(--wp--preset--color--accent);
	color: #fff;
	border-color: var(--wp--preset--color--accent);
}
.decabio-hero__btn--primary:hover {
	background: var(--wp--preset--color--accent-hover);
	border-color: var(--wp--preset--color--accent-hover);
	color: #fff;
}
.decabio-hero__btn--outline {
	background: transparent;
	color: #fff;
	border-color: rgba(255,255,255,0.4);
}
.decabio-hero__btn--outline:hover {
	background: rgba(255,255,255,0.1);
	border-color: #fff;
}

/* Blog cards (archive / home template) */
.blog-card {
	box-shadow: 0 1px 3px rgba(0,0,0,0.08);
	transition: box-shadow 0.3s ease, transform 0.3s ease;
	overflow: hidden;
}
.blog-card:hover {
	box-shadow: 0 8px 24px rgba(0,0,0,0.12);
	transform: translateY(-2px);
}
.blog-card .wp-block-post-featured-image { margin: 0; }
.blog-card .wp-block-post-featured-image img { width: 100%; height: 200px; object-fit: cover; display: block; border-radius: 0; }
.blog-card .wp-block-post-date { color: var(--wp--preset--color--text-light); font-size: 13px; margin-bottom: var(--wp--preset--spacing--xs); }
.blog-card .wp-block-post-title { font-size: 1.1rem; margin: 0 0 var(--wp--preset--spacing--xs); }
.blog-card .wp-block-post-title a { color: var(--wp--preset--color--dark); text-decoration: none; }
.blog-card .wp-block-post-title a:hover { color: var(--wp--preset--color--accent); }
.blog-card .wp-block-post-excerpt { color: var(--wp--preset--color--text-light); font-size: 14px; }
.blog-card .wp-block-post-excerpt__more-link { display: inline-block; margin-top: var(--wp--preset--spacing--xs); color: var(--wp--preset--color--accent); font-size: 14px; font-weight: 500; }

/* When a post has no featured image, draw a teal gradient placeholder so the
   card still has visual weight. The mockup blog cards have a coloured header. */
.blog-card .wp-block-post-featured-image:empty {
	display: block;
	height: 200px;
	background: linear-gradient(135deg, var(--wp--preset--color--primary) 0%, var(--wp--preset--color--accent) 100%);
}
.blog-card:not(:has(.wp-block-post-featured-image img))::before {
	content: '';
	display: block;
	height: 200px;
	background: linear-gradient(135deg, var(--wp--preset--color--primary-dark) 0%, var(--wp--preset--color--primary) 50%, var(--wp--preset--color--accent) 100%);
}

/* decabio/card */
.decabio-card {
	background: #fff;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0,0,0,0.08);
	transition: box-shadow 0.3s ease, transform 0.3s ease;
	display: block;
	text-decoration: none;
	color: inherit;
	height: 100%;
}
.decabio-card:hover {
	box-shadow: 0 8px 24px rgba(0,0,0,0.12);
	transform: translateY(-2px);
}
.decabio-card__body {
	padding: var(--wp--preset--spacing--md);
}
.decabio-card__icon {
	font-size: 2rem;
	line-height: 1;
	margin-bottom: var(--wp--preset--spacing--sm);
	color: var(--wp--preset--color--accent);
	display: block;
}
.decabio-card__heading {
	font-family: Montserrat, sans-serif;
	font-size: 1.375rem;
	font-weight: 600;
	color: var(--wp--preset--color--dark);
	margin: 0 0 var(--wp--preset--spacing--xs);
	line-height: 1.3;
}
.decabio-card__body p { color: var(--wp--preset--color--text-light); font-size: 14px; margin: 0 0 var(--wp--preset--spacing--sm); line-height: 1.6; }
.decabio-card__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 500;
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}
.decabio-card__link:hover {
	color: var(--wp--preset--color--accent-hover);
	gap: 10px;
}
.decabio-card--muted { opacity: 0.55; filter: grayscale(40%); pointer-events: none; }
.decabio-card--muted .decabio-card__heading { color: var(--wp--preset--color--text-light); }
.decabio-card--app-benefit { background: #fff; padding: var(--wp--preset--spacing--md); border-radius: 8px; }
.decabio-card--app-benefit .decabio-card__heading { color: var(--wp--preset--color--primary); font-size: 1.125rem; }

/* decabio/spec-table */
.decabio-spec-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}
.decabio-spec-table th,
.decabio-spec-table td {
	padding: 12px 16px;
	text-align: left;
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.decabio-spec-table th {
	font-weight: 600;
	color: var(--wp--preset--color--dark);
	background: var(--wp--preset--color--bg-light);
	width: 45%;
}
.decabio-spec-table td.is-pending {
	background: #fef9e7;
	color: #92780c;
	font-style: italic;
	font-size: 13px;
}

/* ==========================================================================
   Hero — photo-backed variant (front page)
   ========================================================================== */
.decabio-hero--image {
	/* The gradient is replaced by the photo + scrim below. */
	background: var(--wp--preset--color--primary-dark);
	padding-top: 132px;
	padding-bottom: 120px;
}
.decabio-hero--image::before { display: none; }   /* kill the radial glow */
.decabio-hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
	z-index: 0;
}
.decabio-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(180deg, rgba(12,45,63,0.72) 0%, rgba(8,28,20,0.82) 100%);
}
.decabio-hero--center .decabio-hero__inner {
	text-align: center;
	max-width: 820px;
}
.decabio-hero--center .decabio-hero__heading {
	max-width: none;
	font-size: 3rem;
}
.decabio-hero--center .decabio-hero__lead {
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}
.decabio-hero--center .decabio-hero__actions { justify-content: center; }

/* ==========================================================================
   Trust strip — the credential row under the hero
   ========================================================================== */
.decabio-trust-strip {
	background: var(--wp--preset--color--bg-light);
	border-top: 1px solid var(--wp--preset--color--border);
	border-bottom: 1px solid var(--wp--preset--color--border);
	padding: 22px var(--wp--preset--spacing--md) !important;
}
.decabio-trust-strip .wp-block-group__inner-container,
.decabio-trust-strip > .wp-block-group {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 40px;
	justify-content: center;
	align-items: center;
}
.decabio-trust-strip p {
	margin: 0;
	font-size: 14px !important;
	color: var(--wp--preset--color--text-light);
	text-align: center;
}
.decabio-trust-strip strong {
	color: var(--wp--preset--color--dark);
	font-weight: 600;
}

/* ==========================================================================
   decabio/media-card — photo card for applications and trials
   ========================================================================== */
.decabio-media-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0,0,0,0.08);
	transition: box-shadow .3s ease, transform .3s ease;
	height: 100%;
}
.decabio-media-card--feature { border-radius: 14px; }
.decabio-media-card:hover {
	box-shadow: 0 8px 24px rgba(0,0,0,0.12);
	transform: translateY(-3px);
}
.decabio-media-card--feature:hover { transform: none; }
.decabio-media-card__image {
	width: 100%;
	height: 170px;
	object-fit: cover;
	margin: 0;
	display: block;
}
.decabio-media-card--feature .decabio-media-card__image { height: 200px; }
.decabio-media-card__body { padding: 24px; }
.decabio-media-card--feature .decabio-media-card__body { padding: 26px; }
.decabio-media-card__pill {
	display: inline-block;
	padding: 5px 12px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border-radius: 20px;
}
.decabio-media-card__pill--amber { background: #fef9e7; color: #92780c; }
.decabio-media-card__pill--teal  { background: var(--wp--preset--color--primary-light); color: var(--wp--preset--color--primary-dark); }
.decabio-media-card__heading {
	font-size: 1.125rem !important;
	font-weight: 600;
	color: var(--wp--preset--color--dark);
	margin: 0 0 8px !important;
	line-height: 1.35;
}
.decabio-media-card__pill + .decabio-media-card__heading { margin-top: 14px !important; }
.decabio-media-card--feature .decabio-media-card__heading { font-size: 1.25rem !important; margin-bottom: 10px !important; }
.decabio-media-card__text {
	color: var(--wp--preset--color--text-light);
	font-size: 14px !important;
	line-height: 1.6;
	margin: 0 !important;
}
.decabio-media-card--feature .decabio-media-card__text { font-size: 14.5px !important; }
.decabio-media-card__tags {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 16px;
}
.decabio-media-card__tag {
	font-size: 12.5px;
	color: var(--wp--preset--color--text-light);
	background: var(--wp--preset--color--bg-light);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 6px;
	padding: 4px 9px;
}
.decabio-media-card__link {
	display: inline-block;
	margin-top: 16px;
	font-size: 14px;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
}

/* Line icons on decabio/card (front-page science + research sections) */
.decabio-card__icon--line {
	display: block;
	color: var(--wp--preset--color--accent);
	margin-bottom: 14px;
}
.decabio-card__icon--line .decabio-icon {
	width: 34px;
	height: 34px;
	display: block;
}

/* Cards sitting on a dark section — the "For Researchers" band */
.wp-block-group.is-style-section-dark .decabio-card {
	background: rgba(255,255,255,0.06) !important;
	border: 1px solid rgba(255,255,255,0.12) !important;
	box-shadow: none !important;
}
.wp-block-group.is-style-section-dark .decabio-card:hover { transform: none; }
.wp-block-group.is-style-section-dark .decabio-card__icon--line { color: var(--wp--preset--color--primary-light); }
.wp-block-group.is-style-section-dark .decabio-card__heading { color: #ffffff !important; }
.wp-block-group.is-style-section-dark .decabio-card p { color: rgba(255,255,255,0.7) !important; }
.wp-block-group.is-style-section-dark .decabio-card__link { color: var(--wp--preset--color--primary-light) !important; }

/* Note strip under the trials cards */
.decabio-note-strip {
	border-left: 4px solid var(--wp--preset--color--accent);
	background: var(--wp--preset--color--bg-light);
	border-radius: 0 8px 8px 0;
	padding: 16px 20px !important;
	margin-top: var(--wp--preset--spacing--md) !important;
}
.decabio-note-strip p {
	margin: 0;
	font-size: 13.5px !important;
	color: var(--wp--preset--color--text-light);
}

/* Contact side boxes */
.decabio-info-box {
	background: var(--wp--preset--color--bg-light);
	border-radius: 12px;
	padding: 32px !important;
}
.decabio-info-box h3 {
	font-size: 1.25rem !important;
	font-weight: 600;
	color: var(--wp--preset--color--dark);
	margin: 0 0 10px !important;
}
.decabio-info-box p { font-size: 14.5px !important; margin: 0 0 14px; }
.decabio-info-box p:last-child { margin-bottom: 0; }
.decabio-info-box strong {
	display: block;
	color: var(--wp--preset--color--dark);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 3px;
	font-weight: 600;
}

@media (max-width: 820px) {
	.decabio-hero--image { padding-top: 96px; padding-bottom: 80px; }
	.decabio-hero--center .decabio-hero__heading { font-size: 2rem; }
}

/* ==========================================================================
   decabio/product-family + decabio/product-card  (Products page)
   Colours map to theme.json tokens, not the raw mockup hexes.
   ========================================================================== */
.decabio-product-family {
	margin-bottom: var(--wp--preset--spacing--xl);
	/* Anchor targets (#high-mw etc.) sit under the sticky header without this. */
	scroll-margin-top: 100px;
}
.decabio-product-family:last-child { margin-bottom: 0; }

/* "Preferred grade" family gets a card outline around the whole block.
   box-sizing is explicit: without it the padding + border sit OUTSIDE the
   1140px max-width, so this family overhangs the others (and the hero) by
   ~25px on each side. */
.decabio-product-family.is-preferred {
	box-sizing: border-box;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--md) var(--wp--preset--spacing--sm);
	background: #fbfefe;
}
.decabio-product-family__cards,
.decabio-product-card { box-sizing: border-box; }

.decabio-product-family__head {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: 6px;
}
/* h2 in render.php — reset the theme.json heading rhythm inside the flex row. */
.decabio-product-family__name {
	font-size: 1.5rem !important;
	font-weight: 700;
	line-height: 1.25;
	color: var(--wp--preset--color--dark);
	margin: 0 !important;
}
.decabio-product-family__mw {
	font-size: 13px;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
	background: #e5f5f2;
	padding: 3px 10px;
	border-radius: 20px;
	white-space: nowrap;
}
.decabio-product-family__badge {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: #fff;
	background: var(--wp--preset--color--primary);
	padding: 3px 10px;
	border-radius: 20px;
	white-space: nowrap;
}
.decabio-product-family__desc {
	max-width: 640px;
	margin: 6px 0 var(--wp--preset--spacing--md);
	font-size: 0.95rem;
	color: var(--wp--preset--color--text-light);
}

.decabio-product-family__cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

/* decabio/product-card */
.decabio-product-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 18px;
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
}
.decabio-product-card.is-highlight {
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 0 0 1px var(--wp--preset--color--accent);
}
.decabio-product-card__tag {
	position: absolute;
	top: -10px;
	left: 16px;
	padding: 2px 9px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #fff;
	background: var(--wp--preset--color--accent);
	border-radius: 20px;
}
.decabio-product-card__name {
	margin: 6px 0 2px !important;
	font-size: 1.0625rem !important;
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--dark);
}
.decabio-product-card__sku {
	margin: 0 0 10px !important;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12px !important;
	color: var(--wp--preset--color--text-light);
}
.decabio-product-card__spec {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 5px 0;
	font-size: 13px;
	border-top: 1px solid #eef2f2;
}
.decabio-product-card__specs > .decabio-product-card__spec:first-child {
	border-top: none;
}
.decabio-product-card__spec-label { color: var(--wp--preset--color--text-light); }
.decabio-product-card__spec-value { font-weight: 600; }
.decabio-product-card__fit {
	margin: 10px 0 0 !important;
	padding-top: 10px;
	font-size: 13px !important;
	line-height: 1.55;
	color: var(--wp--preset--color--text-light);
	border-top: 1px solid #eef2f2;
}

/* Request box — core/group block style used for "Purity & quality". */
.wp-block-group.is-style-request-box {
	gap: 20px;
	padding: 22px 24px;
	background: var(--wp--preset--color--bg-light);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
}
.wp-block-group.is-style-request-box .decabio-request-box__text { max-width: 560px; }
.wp-block-group.is-style-request-box h3 { margin: 0 0 4px !important; font-size: 1.05rem !important; }
.wp-block-group.is-style-request-box p { margin: 0; font-size: 0.9rem; color: var(--wp--preset--color--text-light); }

@media (max-width: 820px) {
	.decabio-product-family__cards { grid-template-columns: 1fr; }
}

/* decabio/sdg-card */
.decabio-sdg-card {
	display: flex;
	gap: 20px;
	padding: 28px;
	border-radius: 8px;
	background: #fff;
	border-left: 5px solid #ccc;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.decabio-sdg-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.decabio-sdg-card--12 { border-left-color: #bf8b2e; }
.decabio-sdg-card--13 { border-left-color: #3f7e44; }
.decabio-sdg-card--14 { border-left-color: #0a97d9; }
.decabio-sdg-card--15 { border-left-color: #56c02b; }
.decabio-sdg-card__num {
	flex-shrink: 0;
	width: 56px; height: 56px;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-size: 20px; font-weight: 700; color: #fff;
}
.decabio-sdg-card--12 .decabio-sdg-card__num { background: #bf8b2e; }
.decabio-sdg-card--13 .decabio-sdg-card__num { background: #3f7e44; }
.decabio-sdg-card--14 .decabio-sdg-card__num { background: #0a97d9; }
.decabio-sdg-card--15 .decabio-sdg-card__num { background: #56c02b; }
.decabio-sdg-card__heading { font-size: 16px; font-weight: 600; margin: 0 0 6px; color: var(--wp--preset--color--dark); }
.decabio-sdg-card__body { font-size: 14px; line-height: 1.5; color: var(--wp--preset--color--text-light); margin: 0; }

/* decabio/stat-item */
.decabio-stat { text-align: center; }
.decabio-stat__value { display: block; font-size: 2rem; font-weight: 700; color: var(--wp--preset--color--accent); margin-bottom: 4px; line-height: 1.2; }
.decabio-stat__label { font-size: 14px; color: var(--wp--preset--color--text-light); }

/* decabio/circular-step */
.decabio-circular-step { text-align: center; flex: 1; min-width: 140px; max-width: 180px; }
.decabio-circular-step__icon {
	width: 80px; height: 80px; margin: 0 auto var(--wp--preset--spacing--sm);
	border-radius: 50%; background: var(--wp--preset--color--primary);
	display: flex; align-items: center; justify-content: center;
	font-size: 2rem; color: #fff;
}
.decabio-circular-step__title { font-size: 14px; font-weight: 600; margin: 0 0 4px; color: var(--wp--preset--color--dark); }
.decabio-circular-step__body { font-size: 13px; color: var(--wp--preset--color--text-light); margin: 0; }

/* Container that holds circular steps (parent pattern) */
.decabio-circular-diagram {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wp--preset--spacing--md);
	max-width: 900px;
	margin: var(--wp--preset--spacing--lg) auto;
}

/* ==========================================================================
   Footer styles
   ========================================================================== */
.site-footer { font-family: Montserrat, sans-serif; }
.site-footer .footer-brand .wp-block-image img,
.site-footer .footer-brand-img img { filter: brightness(0) invert(1); }

/* Force white text inside the dark footer — beats theme.json defaults */
.site-footer :is(h1,h2,h3,h4,h5,h6) { color: #ffffff !important; }
.site-footer p,
.site-footer li,
.site-footer span,
.site-footer .wp-block-paragraph { color: rgba(255,255,255,0.85) !important; }
.site-footer a { color: rgba(255,255,255,0.85) !important; text-decoration: none; }
.site-footer a:hover { color: #ffffff !important; }
.site-footer .footer-list li { margin-bottom: 4px; }
.site-footer .footer-list { padding-left: 0; list-style: none; }

/* Brand row — crab + "DecaBio". Mockup uses 10px gap between icon and text.
   The theme.json blockGap (24px) was inheriting onto the flex group, pushing
   the text far from the icon. */
.site-footer .footer-brand {
	gap: 10px !important;
	margin-bottom: 12px !important;
}
.site-footer .footer-brand img { height: 36px; width: auto; }
.site-footer .footer-brand p {
	font-size: 18px !important;
	font-weight: 700 !important;
	color: #ffffff !important;
	margin: 0 !important;
	line-height: 1;
}

/* Vertical rhythm inside the brand column. Override theme.json's 24px blockGap
   between brand → tagline → contact → social. */
.site-footer .footer-col-brand > * + * { margin-top: 0 !important; }
.site-footer .footer-tagline {
	font-size: 14px !important;
	font-style: italic;
	color: rgba(255,255,255,0.5) !important;
	line-height: 1.5;
	margin: 0 0 12px !important;
}
.site-footer .footer-contact {
	font-size: 13px !important;
	color: rgba(255,255,255,0.75) !important;
	line-height: 1.8;
	margin: 0 0 8px !important;
}
.site-footer .footer-social { margin-top: 14px !important; gap: 12px !important; }

/* Footer headings (Applications / Products / Company / Locations) */
.site-footer .footer-col h4 {
	font-size: 13px !important;
	font-weight: 600 !important;
	text-transform: uppercase;
	letter-spacing: 1.5px !important;
	color: rgba(255,255,255,0.5) !important;
	margin: 0 0 14px !important;
}
.site-footer .footer-col > h4 + * { margin-top: 0 !important; }

/* Column list spacing */
.site-footer .footer-col ul,
.site-footer .footer-col .wp-block-list { margin: 0; padding: 0; list-style: none; }
.site-footer .footer-col ul li { margin: 0 0 4px; line-height: 1.8; font-size: 14px; }

/* Company column — second h4 ("Locations") needs top spacing.
   Scoped with :not(.footer-col-brand) so it doesn't shrink the brand text. */
.site-footer .footer-col:not(.footer-col-brand) h4 + h4,
.site-footer .footer-col:not(.footer-col-brand) p + h4 { margin-top: 18px !important; }
.site-footer .footer-col:not(.footer-col-brand) p { font-size: 13px !important; line-height: 1.6 !important; margin: 0 0 6px !important; }

/* Footer columns container — kill blockGap-derived row margins on direct kids */
.site-footer .footer-col > * + * { margin-top: 0; }
.site-footer .footer-social a { color: rgba(255,255,255,0.7); }
.site-footer .footer-social .wp-block-social-link {
	background: transparent;
	border: 1px solid rgba(255,255,255,0.3);
	border-radius: 50%;
}
.site-footer .footer-social .wp-block-social-link:hover {
	border-color: #fff;
	background: rgba(255,255,255,0.1);
}
.site-footer .footer-divider {
	margin: 32px 0 0 !important;
	border: none !important;
	height: 1px !important;
	background-color: rgba(255,255,255,0.1) !important;
	max-width: 100% !important;
	width: 100% !important;
}
.site-footer .footer-bottom {
	gap: 8px !important;
	padding-top: 24px !important;
	font-size: 12px !important;
	color: rgba(255,255,255,0.4) !important;
}
.site-footer .footer-bottom p {
	font-size: 12px !important;
	color: rgba(255,255,255,0.4) !important;
	margin: 0 !important;
}
.site-footer .footer-bottom a {
	color: rgba(255,255,255,0.4) !important;
}
.site-footer .footer-bottom a:hover { color: rgba(255,255,255,0.7) !important; }

/* ==========================================================================
   Stats strip wrapper (when stats are placed in a 4-col group)
   ========================================================================== */
.decabio-stats-strip {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--wp--preset--spacing--md);
	text-align: center;
}

/* ==========================================================================
   Animations
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
	.decabio-fade-in {
		opacity: 0;
		transform: translateY(20px);
		transition: opacity 0.6s ease, transform 0.6s ease;
	}
	.decabio-fade-in.is-visible {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ==========================================================================
   Page hero (smaller variant — same gradient as home hero)
   ========================================================================== */
.decabio-hero--page {
	padding: calc(var(--wp--preset--spacing--xl) + 60px) var(--wp--preset--spacing--md) var(--wp--preset--spacing--xl);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 921px) {
	.decabio-hero__heading { font-size: 2.25rem; }
	.decabio-hero--page .decabio-hero__heading { font-size: 2rem; }
	.decabio-hero__lead { font-size: 1.05rem; }
	.decabio-stats-strip { grid-template-columns: repeat(2, 1fr); }
	.site-header { position: relative; }
	.site-footer .footer-inner { gap: 30px !important; }
}
@media (max-width: 768px) {
	.decabio-hero { padding-top: calc(var(--wp--preset--spacing--xl) + 60px); }
	.decabio-hero__actions { flex-direction: column; align-items: stretch; }
	.decabio-hero__btn { width: 100%; }
	.site-footer .footer-bottom { flex-direction: column; text-align: center; }
}
@media (max-width: 480px) {
	.decabio-stats-strip { grid-template-columns: 1fr; }
}