/*
Theme Name: Dahurian Bioactives
Theme URI: https://dahurianbioactives.com/
Author: Dahurian Bioactives
Author URI: https://dahurianbioactives.com/
Description: Brand block theme for Dahurian Bioactives — From Nature, Refined by Science.
Requires at least: 6.3
Tested up to: 6.6
Requires PHP: 7.4
Version: 1.0.4 (versioning aligned with theme.json; '.4' changes the ?ver= query string WordPress outputs and forces new CSS to load)
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dahurian-bioactives
Tags: full-site-editing, block-patterns, editor-style, one-column, custom-colors, custom-menu
*/

/* Small global niceties; most styling comes from theme.json */
html {  scroll-behavior: smooth;
}


/* =============================================================================
   DAHURIAN BIOACTIVES — STYLE.CSS INDEX
   Use Ctrl/Cmd+F with the bracket tags to jump fast.

   [10 TABLES]            db-spec-table / db-compare-table / db-research-table
   [20 HERO]              .is-style-dahurian-hero / .hero-ingredients / hero buttons
   [30 HEADER + MEGA]      fixed header / mega panels / mega nav pills / chevrons
   [40 PANELS + PAGE LAYOUT] db-panel / db-page / rails (1600) / spacing rhythms
   [50 CTA]               db-cta-forest / CTA button / CTA doc link
   [60 APPLICATIONS]      applications overview grid / application hero tags
   [70 COMPONENTS + GRIDS] note cards / figures / products mega-style grid
   [80 FOOTER]            footer panel / footer columns
   [90 MISC]              everything else

   Tip: also search for "====" to hop between section headers.
   ============================================================================= */

/* =============================================================================
   [10 TABLES] Dahurian Bioactives table styles
   ----------------------------------------------------------------------------- */

/* Shared table basics */
.db-spec-table table,
.db-compare-table table,
.db-research-table table {  width: 100%;
}

/* -------- Key Specifications tables -------- */
.db-spec-table table {  border-collapse: collapse;
  font-size: 0.95rem;
}

.db-spec-table td {  padding: 0.55rem 0.5rem;
  border-bottom: 1px solid var(--wp--preset--color--soft-line);
}

/* =============================================================================
   [10 TABLES] Compare table — Editorial (single separator under header)
   ----------------------------------------------------------------------------- */

/* Wrapper + line token */
figure.wp-block-table.db-compare-table{  --db-table-line: rgba(16,63,46,0.14);
  display: block !important;
  position: relative;
  overflow-x: auto;
/* allow scroll */
  overflow-y: hidden;
/* keep frame clean */
  -webkit-overflow-scrolling: touch;
}

/* Outer frame (reliable) */
figure.wp-block-table.db-compare-table::after{  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 1px solid var(--db-table-line);
}

/* Table base */
figure.wp-block-table.db-compare-table table{  width: 100%;
  min-width: 720px;
/* ensures the 4-column intent survives; adjust if needed */
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
  border: 0;
}

/* Base cell padding (no borders by default) */
figure.wp-block-table.db-compare-table th,
figure.wp-block-table.db-compare-table td{  border: 0;
  padding-left: 0.6rem;
  padding-right: 0.6rem;
}

/* IMPORTANT: remove any header separator styling */
figure.wp-block-table.db-compare-table thead,
figure.wp-block-table.db-compare-table thead tr,
figure.wp-block-table.db-compare-table thead th{  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* Body row rules via TOP borders (editorial) */
figure.wp-block-table.db-compare-table tbody td{  border-top: 1px solid var(--db-table-line);
}

/* First body row provides the single separator under the header*/
figure.wp-block-table.db-compare-table tbody tr:first-child td{  border-top: 1.5px solid rgba(16,63,46,0.22) !important;
}

/* Header typography + alignment */
figure.wp-block-table.db-compare-table th{  text-align: left;
  vertical-align: middle;
  padding-top: 0.80rem;
  padding-bottom: 0.80rem;
  line-height: 1.15;
  font-weight: 650;
  font-size: clamp(0.82rem, 0.55vw + 0.70rem, 0.90rem);
}

/* Body typography */
figure.wp-block-table.db-compare-table td{  vertical-align: top;
  padding-top: 0.84rem;
  padding-bottom: 0.84rem;
  line-height: 1.45;
  font-size: clamp(0.92rem, 0.55vw + 0.78rem, 0.99rem);
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

/* Column allocation to reduce wrapping in "Best for" (col 3) */
figure.wp-block-table.db-compare-table th:nth-child(1),
figure.wp-block-table.db-compare-table td:nth-child(1){  width: 18%;
  min-width: 180px;
}

figure.wp-block-table.db-compare-table th:nth-child(2),
figure.wp-block-table.db-compare-table td:nth-child(2){  width: 24%;
}

figure.wp-block-table.db-compare-table th:nth-child(3),
figure.wp-block-table.db-compare-table td:nth-child(3){  width: 34%;
}

figure.wp-block-table.db-compare-table th:nth-child(4),
figure.wp-block-table.db-compare-table td:nth-child(4){  width: 24%;
}

/* =============================================================================
   [10 TABLES] Science-only: mechanistic comparison table
   ----------------------------------------------------------------------------- */

.db-panel--science figure.wp-block-table.db-compare-table th:nth-child(1),
.db-panel--science figure.wp-block-table.db-compare-table td:nth-child(1){  width: 22%;
  min-width: 200px;
}
.db-panel--science figure.wp-block-table.db-compare-table th:nth-child(2),
.db-panel--science figure.wp-block-table.db-compare-table td:nth-child(2){  width: 26%;
}
.db-panel--science figure.wp-block-table.db-compare-table th:nth-child(3),
.db-panel--science figure.wp-block-table.db-compare-table td:nth-child(3){  width: 26%;
}
.db-panel--science figure.wp-block-table.db-compare-table th:nth-child(4),
.db-panel--science figure.wp-block-table.db-compare-table td:nth-child(4){  width: 26%;
}

/* =============================================================================
   [10 TABLES] --- Research / library tables --
   ----------------------------------------------------------------------------- */
.db-research-table table {  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.95rem;
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--soft-line);
  border-radius: 12px;
  overflow: hidden;
}

/* Header: subtle, journal-like */
.db-research-table th {  text-align: left;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
  background: var(--wp--preset--color--background);
  padding: 0.75rem 0.75rem;
  border-bottom: 1px solid var(--wp--preset--color--soft-line);
}

/* Body cells */
.db-research-table td {  padding: 0.75rem 0.75rem;
  vertical-align: top;
  border-bottom: 1px solid var(--wp--preset--color--soft-line);
}

/* Optional: subtle row hover to aid scanning */
.db-research-table tbody tr:hover td {  background: rgba(0, 0, 0, 0.02);
}

/* Optional: very light zebra striping */
.db-research-table tbody tr:nth-child(even) td {  background: rgba(0, 0, 0, 0.015);
}

/* =============================================================================
   [20 HERO] Dahurian Hero cover style (video or image)
   ----------------------------------------------------------------------------- */
 .wp-block-cover.is-style-dahurian-hero {  border-radius: 20px;
  min-height: 420px;
  overflow: hidden;
  background-position: center center;
  background-size: cover;
}

/* Make sure the video fills the area nicely */
.wp-block-cover.is-style-dahurian-hero video {  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Refine inner content width */
.wp-block-cover.is-style-dahurian-hero .wp-block-cover__inner-container {  max-width: 1600px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* Front page only: widen constrained layout */
.db-frontpage-1600 {  --wp--style--global--content-size: 1600px;
  --wp--style--global--wide-size: 1600px;
}

/* Hero headline only */
.is-style-dahurian-hero .wp-block-cover__inner-container h1.wp-block-heading{  font-size: clamp(2.0rem, 2.0vw, 2.2rem);
/* headline range */
  line-height: 1.08;
  font-weight: 500;
  letter-spacing: -0.01em;
  max-width: 70ch;
  margin: 0 0 .75rem 0;
  text-shadow: 0 2px 18px rgba(0,0,0,.55);
  margin-left: auto;
  margin-right: auto;
}

/* HERO ingredients chip: clear glass + brand color */
.is-style-dahurian-hero .hero-ingredients{  display: inline-block;
  padding: .45rem .7rem;
  border-radius: 999px;
  background-color: rgba(255,255,255,.12);
  border: none;
/*border: 0.5px solid rgba(255,255,255,.8);*/
/*border-color: rgba(255,255,255,.28);  */
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
  color: var(--wp--preset--color--background);
/*text-shadow: 0 1px 12px rgba(0,0,0,55);*/
/* legibility over video */
  -webkit-text-stroke: 0.35px rgba(0,0,0,.32);
/*this crisps edges without looking hazy.*/
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
/*tiny drop-shadow filter (more visible than text-shadow)*/
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.25;
  font-weight: 500;
  margin: 0 0 2.5rem 0;
}

/* Brighten hero video slightly */
.is-style-dahurian-hero .wp-block-cover__video-background {  filter: brightness(1.20) contrast(1.06) saturate(1.05);
}

/* Hero cover: ensure tint overlays the video properly */
.is-style-dahurian-hero.wp-block-cover{  position: relative;
  z-index: auto !important;
  isolation: isolate;
}

/* Tint layer */
.is-style-dahurian-hero.wp-block-cover .wp-block-cover__background{
  opacity: .1!important;                 /* tune this */
  background: #000 !important;             /* or your forest tint */
}

.is-style-dahurian-hero.wp-block-cover .wp-block-cover__video-background,
.is-style-dahurian-hero.wp-block-cover .wp-block-cover__image-background{  position: absolute;
  inset: 0;
  z-index: 0;
}

.is-style-dahurian-hero.wp-block-cover .wp-block-cover__background{  position: absolute;
  inset: 0;
  z-index: 1;
/* tint layer */
}

.is-style-dahurian-hero.wp-block-cover .wp-block-cover__inner-container{  position: relative;
  z-index: 2;
/* text/buttons */
}

/* =============================================================================
   [30 HEADER + MEGA] Dahurian Bioactives — Mega Panels (fixed)
   ----------------------------------------------------------------------------- */

/* Mega panel base (hidden by default) */
.db-mega{  position: fixed;
  left: 50%;
  top: calc(var(--db-mega-top, 92px) + 8px);
/* 8px gap from header */
  transform: translateX(-50%) translateY(6px);
  width: min(1500px, calc(100vw - 2rem));
  z-index: 100000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms ease, visibility 180ms ease, transform 180ms ease;
}

/* Open state */
.db-mega.is-open{  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
/* Panels hidden by default */
.db-header-row .db-mega{}
.db-header-row .db-mega.is-open{  display: block;
}    

/* Panel surface */
.db-mega-inner{  position: relative;
/* needed for ::before hover bridge */
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--soft-line);
  border-radius: 18px;
  box-shadow: 0 16px 42px rgba(0,0,0,0.12);
  padding: 1.35rem;
/* Safety: if content ever gets tall, scroll inside panel */
  max-height: calc(100vh - var(--db-mega-top, 92px) - 16px);
  overflow: auto;
}

/* Hover “bridge” to prevent flicker when moving from nav to panel */
.db-mega-inner::before{  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 14px;
}

/* Grid */
.db-mega-grid{  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.1rem;
}

/* Column heading = Domain label (copper) */
.db-mega-head{  font-weight: 650;
  color: var(--wp--preset--color--forest);
/* #9B4F33 */
  letter-spacing: 0.06em;
  opacity: 0.90;
  margin-bottom: 0.65rem;
}

/* PRODUCTS mega: column heads are Domains → copper */
.db-mega-products .db-mega-head{  color: var(--wp--preset--color--copper);
/* #9B4F33 */
  letter-spacing: 0.06em;
  opacity: 0.90;
}

/* Center the column headers in Products + Applications megamenus */
.db-mega-products .db-mega-head,
.db-mega-applications .db-mega-head{  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
/* Center the label line within each column */
.db-mega-products .db-mega-item .db-mega-label,
.db-mega-applications .db-mega-item .db-mega-label{  text-align: center;
  width: 100%;
}

.db-mega-applications .db-mega-head{  letter-spacing: 0.06em;
  text-transform: none;
/* keep title case */
}

/* “Card link” items */
.db-mega-item{  display: block;
  padding: 0.9rem;
  border-radius: 14px;
  text-decoration: none;
  border: 1px solid rgba(0,0,0,0.07);
  background: rgba(12,59,42,0.02);
  transition: transform 120ms ease, background-color 120ms ease, border-color 120ms ease;
}

.db-mega-item:hover{  transform: translateY(-2px);
  background: rgba(12,59,42,0.05);
  border-color: rgba(12,59,42,0.16);
}

.db-mega-item:focus-visible{  outline: 2px solid rgba(12,59,42,0.35);
  outline-offset: 3px;
}

/* Label + subtext */
.db-mega-label{  font-weight: 600;
  color: rgba(17, 24, 39, 0.92);
  line-height: 1.2;
  margin-bottom: 0.35rem;
}

/* Product/app names: forest only on interaction */
.db-mega-item:hover .db-mega-label,
.db-mega-item:focus-visible .db-mega-label,
.db-mega-item:active .db-mega-label{  color: var(--wp--preset--color--forest);
}

/* Subtext */
.db-mega-sub{  color: rgba(17, 24, 39, 0.74);
  font-size: 0.92rem;
  line-height: 1.35;
}

/* Domain taxonomy label (copper) — use anywhere outside mega menus */
.db-domain-label{  color: var(--wp--preset--color--copper);
  font-size: var(--wp--preset--font-size--xs);
  letter-spacing: 0.06em;
  opacity: 0.88;
  margin: 0 0 0.35rem 0;
}

/* =============================================================================
   [30 HEADER + MEGA] Products mega-menu: Three column grid
   ----------------------------------------------------------------------------- */
.db-mega-products .db-mega-grid{  grid-template-columns: repeat(3, minmax(0, 1fr));
/* 1 | 2 | 4 */
  gap: 1.1rem;
/* keep your current rhythm */
  align-items: start;
}

/* Explicit placement (stable even if content heights change) */
.db-mega-products .db-mega-grid > .db-mega-col:nth-child(1){  grid-column: 1;
  grid-row: 1;
}

.db-mega-products .db-mega-grid > .db-mega-col:nth-child(2){  grid-column: 2;
  grid-row: 1;
}

/* Synergy: becomes a second-row module spanning columns 1–2 */
.db-mega-products .db-mega-grid > .db-mega-col:nth-child(3){  grid-column: 1 / span 2;
  grid-row: 2;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  justify-self: stretch;
/* fill the two-column span */
  width: auto !important;
/* no intrinsic sizing */
}

.db-mega-products .db-mega-grid > .db-mega-col:nth-child(3) .db-mega-item{  background: rgba(12,59,42,0.035);
  border-color: rgba(12,59,42,0.12);
}

/* Oil & Resin stays in column 3; optionally spans both rows */
.db-mega-products .db-mega-grid > .db-mega-col:nth-child(4){  grid-column: 3;
  grid-row: 1 / span 2;
/* remove if you don’t like the “pillar” behavior */
}

/* Optional: give Synergy a subtle container so it reads as a “system” */
.db-mega-products .db-mega-grid > .db-mega-col:nth-child(3){  padding: 0.65rem;
  border-radius: 16px;
  background: rgba(12,59,42,0.015);
  border: 1px solid rgba(0,0,0,0.06);
}

/* Space only between stacked cards */
.db-mega-col .db-mega-item + .db-mega-item{  margin-top: 2.2rem;
/* tweak as needed */
}

/* Responsive */
@media (max-width: 1100px){  .db-mega{
    width: calc(100vw - 2rem);
  }
  .db-mega-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

@media (max-width: 720px){
  .db-mega{  display: none;
}
}

/* =============================================================================
   [30 HEADER + MEGA] Mega nav: hide in editor
   ----------------------------------------------------------------------------- */
.editor-styles-wrapper .db-mega{  display: none !important;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){  .db-mega{
    transition: none;
  }
  .db-mega-item{
    transition: none;
  }
  .db-mega-item: hover{
    transform: none;
}
}

/* =============================================================================
   [30 HEADER + MEGA] Mega nav: pill hover for ALL top-level items
   ----------------------------------------------------------------------------- */

/* 1) Kill any background that might be applied to the LI (prevents rectangles) */
.db-header-row .db-mega-nav .wp-block-navigation__container > .wp-block-navigation-item{  background: transparent !important;
}

/* 2) Style top-level anchors as pills */
.db-header-row .db-mega-nav
.wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content{  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.42rem 0.80rem;
  border-radius: 999px;
  background: transparent;
/* default */
  text-decoration: none;
  transition: background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease, opacity 160ms ease;
}

/* 3) Hover/focus pill */
.db-header-row .db-mega-nav
.wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover{  background-color: rgba(12, 59, 42, 0.08);
  transform: translateY(-1px);
}

.db-header-row .db-mega-nav
.wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible{  background-color: rgba(12, 59, 42, 0.10);
  box-shadow: 0 0 0 3px rgba(12, 59, 42, 0.18);
  outline: none;
}

/* =============================================================================
   [60 APPLICATIONS] Active page indicator — unified + Products/Applications
   ----------------------------------------------------------------------------- */
 
.db-header-row .db-mega-nav
.wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content[aria-current="page"],
.db-header-row .db-mega-nav .current-menu-item > .wp-block-navigation-item__content,
.db-header-row .db-mega-nav .current-menu-ancestor > .wp-block-navigation-item__content,
.db-header-row .db-mega-nav .current_page_item > .wp-block-navigation-item__content,
body.page-id-61 .db-header-row .db-mega-nav .db-nav-products > .wp-block-navigation-item__content,
body.page-id-63 .db-header-row .db-mega-nav .db-nav-applications > .wp-block-navigation-item__content{  background-color: rgba(12, 59, 42, 0.06);
  opacity: 0.96;
}

/* Active page hover: slightly stronger than normal hover */
.db-header-row .db-mega-nav
.wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content[aria-current="page"]:hover,
.db-header-row .db-mega-nav .current-menu-item > .wp-block-navigation-item__content:hover,
.db-header-row .db-mega-nav .current-menu-ancestor > .wp-block-navigation-item__content:hover,
.db-header-row .db-mega-nav .current_page_item > .wp-block-navigation-item__content:hover,
body.page-id-61 .db-header-row .db-mega-nav .db-nav-products > .wp-block-navigation-item__content:hover,
body.page-id-63 .db-header-row .db-mega-nav .db-nav-applications > .wp-block-navigation-item__content:hover{  background-color: rgba(12, 59, 42, 0.12);
}

/* Active/open cue (requires :has()) */
.db-header-row:has(.db-mega-products.is-open)
  .db-mega-nav .db-nav-products > .wp-block-navigation-item__content{  background-color: rgba(12, 59, 42, 0.10);
}

.db-header-row:has(.db-mega-products.is-open)
  .db-mega-nav .db-nav-products > .wp-block-navigation-item__content::after{  opacity: 0.90;
  transform: translateY(-0.05em) rotate(180deg);
}

.db-header-row:has(.db-mega-applications.is-open)
  .db-mega-nav .db-nav-applications > .wp-block-navigation-item__content{  background-color: rgba(12, 59, 42, 0.10);
}

.db-header-row:has(.db-mega-applications.is-open)
  .db-mega-nav .db-nav-applications > .wp-block-navigation-item__content::after{  opacity: 0.90;
  transform: translateY(-0.05em) rotate(180deg);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){  .db-header-row .db-mega-nav
  .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content{
    transition: none;
  }
  .db-header-row .db-mega-nav
  .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content: hover{
    transform: none;
}
}

/* Tighter horizontal spacing between top-level nav items */
.db-header-row .db-mega-nav .wp-block-navigation__container{  gap: 0.25rem;
}

/* =============================================================================
   [30 HEADER + MEGA] Mega-menu trigger indicators
   ----------------------------------------------------------------------------- */

/* Safer selector (no direct-child assumption) */
.db-header-row .db-mega-nav .db-nav-parent .wp-block-navigation-item__content{  display: inline-flex;
  align-items: center;
  gap: 0.35em;
}

/* Chevron always visible */
.db-header-row .db-mega-nav .db-nav-parent .wp-block-navigation-item__content::after{  content: "▾";
  display: inline-block;
  font-size: 1.0em;
  line-height: 1;
  opacity: 0.7;
  transform: translateY(-0.05em);
  transition: transform 160ms ease, opacity 160ms ease;
  pointer-events: none;
}

/* Panels hidden by default */
.db-header-row .db-mega{  display: none;
}

/* Show active panel (JS toggles .is-open on the panel) */
.db-header-row .db-mega.is-open{  display: block;
}

/* Keep trigger visually "active" while its panel is open (uses :has()) */
.db-header-row:has(.db-mega-products.is-open)
  .db-mega-nav .db-nav-products .wp-block-navigation-item__content{  background-color: rgba(12, 59, 42, 0.08);
}

/* Rotate chevron while the corresponding panel is open (requires :has()) */
.db-header-row:has(.db-mega-products.is-open)
  .db-mega-nav .db-nav-products .wp-block-navigation-item__content::after{  opacity: 0.95;
  transform: translateY(-0.05em) rotate(180deg);
}

/* Same for Applications */
.db-header-row:has(.db-mega-applications.is-open)
  .db-mega-nav .db-nav-applications .wp-block-navigation-item__content{  background-color: rgba(12, 59, 42, 0.08);
}

/* Same for Applications */
.db-header-row:has(.db-mega-applications.is-open)
  .db-mega-nav .db-nav-applications .wp-block-navigation-item__content::after{  opacity: 0.95;
  transform: translateY(-0.05em) rotate(180deg);
}

/* =============================================================================
   [20 HERO] HERO buttons styling
   ----------------------------------------------------------------------------- */

.is-style-dahurian-hero .wp-block-buttons{  justify-content: center;
  gap: .9rem;
}

/* HERO buttons: clear glass */
.is-style-dahurian-hero .wp-block-buttons .wp-block-button__link{  min-width: 220px;
  text-align: center;
  font-size: clamp(15px, 1.05vw, 17px);
  font-weight: 600;
  background-color: rgba(255,255,255,.08);
  background-image: none;
  color: rgba(255,255,255,.94);
  border: 1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
  box-shadow: 0 6px 18px rgba(0,0,0,.10);
  transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease;
}

.is-style-dahurian-hero .wp-block-buttons .wp-block-button__link:hover{  background-color: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.28);
  transform: translateY(-1px);
}

.is-style-dahurian-hero .wp-block-buttons .wp-block-button__link:active{  transform: translateY(0px);
}

.is-style-dahurian-hero .wp-block-buttons .wp-block-button__link:focus-visible{  outline: 2px solid rgba(255,255,255,.55);
  outline-offset: 3px;
}

/* =============================================================================
   [30 HEADER + MEGA] Header sizing "levers"
   ----------------------------------------------------------------------------- */

/* =============================================================================
   [30 HEADER + MEGA] GUARANTEED "stay on top" header (fixed) + content offset
   ----------------------------------------------------------------------------- */

/* 1) Set this once. Tweak until the separator sits exactly where you want. */
:root{  --db-header-h: 118px;
/* adjust: 104–132px is a typical range */
  --db-mega-top: 118px;
/* keeps dropdown panels aligned */
}

/* 2) Fix the header to the top */
header.wp-block-group.has-background{  position: fixed;
  top: var(--wp-admin--admin-bar--height, 0px);
  left: 0;
  right: 0;
  width: 100%;
  z-index: 10000;
  background: var(--wp--preset--color--background);
  overflow: visible;
  isolation: isolate;
}

/* Optional: prevent layout jump if fonts load late */
header.wp-block-group.has-background{  -webkit-transform: translateZ(0);
/* helps some browsers paint fixed headers cleanly */
}

/* 3) Push page content down so it doesn't slide under the fixed header */
.wp-site-blocks{  padding-top: calc(var(--db-header-h) + var(--wp-admin--admin-bar--height, 0px));
}

:root{  --db-mega-top: var(--db-header-h);
  --db-emblem-h: 64px;
  --db-brand-name: 28px;
  --db-brand-sub: 20px;
  --db-brand-tag: 15px;
  --db-header-gap: 1rem;
  --db-sub-rule-gap: 3.2rem;
  --db-sub-rule-len: 2.8rem;
  --db-sub-rule-thick: 1px;
  --db-ink-1: #0C3B2A;
/* Dahurian (base) */
  --db-ink-2: #103F2E;
/* Tagline (mid) */
  --db-ink-3: #215C47;
/* Bioactives (light) */
}

/* =============================================================================
   [30 HEADER + MEGA] Header layout (flex row)
   ----------------------------------------------------------------------------- */
.db-header-row{  flex-wrap: nowrap;
/* enforce single-line header */
  gap: 1rem;
/* spacing between brand | descriptor | nav */
}

/* Left cluster: emblem + text */
.db-header-brand{  display: flex;
  align-items: center;
  gap: var(--db-header-gap);
  min-width: 0;
  flex: 0 1 auto;
}

/* Emblem: control height only */
.db-emblem img{  height: var(--db-emblem-h);
  width: auto;
  display: block;
  max-width: none;
  max-height: none;
}

/* Wordmark stack */
.db-wordmark{  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.05;
  min-width: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  padding-top: 0;
/* remove your current 12px */
  position: relative;
  top: 16px;
/* adjust: try 4px–12px */
}

/* Remove extra space around the wordmark block */
.db-wordmark p{  margin: 0;
}

/* Line 1 */
.db-brand-name{  font-size: var(--db-brand-name);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  display: inline-block;
/* required for transform to behave predictably */
  transform-origin: center;
  transform: scaleX(1.40);
  color: var(--db-ink-1);
}

/* Line 2 with rules */
.db-brand-sub{  font-size: var(--db-brand-sub);
  margin-top: 0.55rem;
  position: relative;
  padding: 0 var(--db-sub-rule-gap);
  font-weight: 400;
  display: inline-block;
/* required for transform to behave predictably */
  transform-origin: center;
  transform: scaleX(1.30);
  color: var(--db-ink-3);
  opacity: 1;
}

.db-brand-sub::before,
.db-brand-sub::after{  content: "";
  position: absolute;
  top: 50%;
  width: var(--db-sub-rule-len);
  height: var(--db-sub-rule-thick);
  background: currentColor;
  opacity: 0.59;
  transform: translateY(-50%);
}

.db-brand-sub::before{  left: 0;
}
.db-brand-sub::after{  right: 0;
}

/* Line 3 */
/* Tagline — typography-only hierarchy (no label, no rule) */
.db-wordmark > .db-brand-tag{  margin: 0;
  margin-block-start: 1.2rem;
  font-size: var(--db-brand-tag);
  font-style: italic;
  font-weight: 450;
/* softer than 500 */
  letter-spacing: 0.08em;
/* a bit more “tagline” */
  color: rgba(16, 63, 46, 0.88);
/* derived from #103F2E, quieter */
}

/* Descriptor sits between brand and nav */
.db-header-descriptor{  flex: 1 1 auto;
  min-width: 12rem;
  margin: 0;
  text-align: center;
  white-space: normal;
  overflow: hidden;
  overflow-wrap: anywhere;
  text-overflow: clip;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-size: 1.0rem;
  line-height: 1.22;
  opacity: 0.95;
  max-width: 39ch;
  transform: translateY(12px) scaleX(1.00);
/* slight horizontal stretch */
  transform-origin: center;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Handwritten accent for line 2 only */
.db-header-descriptor-sub{  display: inline-block;
/* enables margin-top after <br> */
  margin-top: 0.43rem;
/* try 0.20–0.45rem */
  font-family: "Allura", cursive;
/* ensure this font is loaded in theme.json; Petit Formal Script */
  font-size: 1.55em;
/* small bump improves readability */
  font-weight: 450;
  text-transform: none;
  line-height: 1.0;
  letter-spacing: 0.01em;
/* scripts look odd with wide tracking */
  opacity: 0.99;
/* keep it understated */
}

/* =============================================================================
   [30 HEADER + MEGA] Header adaptive tweaks
   ----------------------------------------------------------------------------- */
/* 1) Tighten sub-brand text + rules progressively */

/* Step 1: subtle tightening */
@media (max-width: 1550px){  
  : root{
    --db-sub-rule-gap: 2.45rem;
  --db-sub-rule-len: 2.0rem;
  }
  .db-brand-sub{ transform: scaleX(1.24);
}
}

/* Step 2: stronger tightening as it gets cramped */
@media (max-width: 1400px){  : root{
    --db-sub-rule-gap: 2.3rem;
  --db-sub-rule-len: 1.8rem;
  }
  .db-brand-sub{ transform: scaleX(1.18);
}
}

/* 2) Hide descriptor earlier (start point: 1120px; tune as needed) */
@media (max-width: 1230px){  .db-header-descriptor{ display: none;
}
}

/*.db-header-descriptor{ font-weight: 500; }
.db-header-descriptor-sub{ font-weight: 400; }*/

/* =============================================================================
   [30 HEADER + MEGA] FORCE header scrim overlay (final override)
   ----------------------------------------------------------------------------- */
header.wp-block-group.has-background{/* ensure a positioning context for ::before */
  position: fixed;
/* keep your current fixed-header architecture */
  top: var(--wp-admin--admin-bar--height, 0px);
  left: 0;
  right: 0;
  z-index: 10000;
/* keep megas safe */
  overflow: visible;
  isolation: isolate;
}

/* keep normal header content above scrim */
header.wp-block-group.has-background > :not(.db-mega){  position: relative;
  z-index: 2;
}

/* scrim itself */
header.wp-block-group.has-background::before{  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(12, 59, 42, 0.23) 0%,
    rgba(12, 59, 42, 0.10) 28%,
    rgba(12, 59, 42, 0.00) 70%
  );
}

/* =============================================================================
   [30 HEADER + MEGA] Mega-menu nav tweaks
   ----------------------------------------------------------------------------- */
.db-mega-nav .wp-block-navigation__container
> .wp-block-navigation-item
> .wp-block-navigation-item__content{  font-weight: 500;
}

/* Nav stays right, does not wrap */
.db-mega-nav{  flex: 0 0 auto;
  white-space: nowrap;
}

/* Slight right padding inside nav container */
.db-mega-nav .wp-block-navigation__container{  padding-right: 0.75rem;
}

/* Panel padding inside mega-menu */
#choose.db-panel{  padding: clamp(1.5rem, 3.4vw, 3.4rem);
}

/* Hide mega footer (not needed with this layout) */
.db-mega-products .db-mega-foot{  display: none;
}

/* 3) Scale down emblem + text on smaller screens */
@media (max-width: 782px){  : root{
    --db-emblem-h: 52px;
  --db-brand-name: 24px;
  --db-brand-sub: 18px;
  --db-brand-tag: 14px;
  --db-sub-rule-gap: 1.6rem;
  --db-sub-rule-len: 2.2rem;
}
}

@media (max-width: 520px){
  .db-brand-tag{  display: none;
}
}

/* Reusable “pattern panel” wrapper */
.db-panel{  padding: clamp(1.25rem, 2.5vw, 2.25rem);
  border-radius: 20px;
/* optional, but matches your design language */
  overflow: hidden;
/* keeps background inside radius */
  box-sizing: border-box;
/* ensures padding is included in width */
}

/* =============================================================================
   [40 PANELS + PAGE LAYOUT] Db-Page — panels
   ----------------------------------------------------------------------------- */

/* Rail: the only place gutters live */
.db-page{
  --db-gutter: clamp(1rem, 3.2vw, 1.5rem);
  padding-left: var(--db-gutter);
  padding-right: var(--db-gutter);
}

/* Optional 1600 rail vars for pages that want it */
.db-rail-1600,
.db-page-1600{
  --wp--style--global--content-size: 1600px;
  --wp--style--global--wide-size: 1600px;
}

/* Panel stack rhythm */
.db-page .db-panels{
  display: grid;
  gap: clamp(1.25rem, 2.2vw, 2rem);
}

/* Panel shell */
.db-page .db-panel{
  background: var(--wp--preset--color--surface);
  border: 1px solid rgba(16,63,46,0.10);
  box-shadow: 0 10px 22px rgba(0,0,0,0.05);
  border-radius: 20px;
  overflow: hidden;
  padding: 0;
}

/* Panel inner padding */
.db-page .db-panel > .wp-block-group{
  padding: clamp(1.25rem, 2.5vw, 2.25rem);
  box-sizing: border-box;
}

.db-page .db-panel > .wp-block-group > :first-child{ margin-top: 0; }
.db-page .db-panel .wp-block-list{ padding-left: 1.15rem; }

/* Wide shells should just respect wideSize and center */
.db-page .db-panels.alignwide,
.db-page .db-panel.alignwide{
  max-width: var(--wp--style--global--wide-size);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* On narrower viewports: do NOT add extra gutters (db-page already has them) */
@media (max-width: 1620px){
  .db-page .db-panels.alignwide,
  .db-page .db-panel.alignwide{
    width: 100%;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 600px){
  .db-page .db-panel{ border-radius: 16px; }
  .db-page .db-panel > .wp-block-group{ padding: clamp(1rem, 4vw, 1.5rem); }
}

/* =============================================================================
   [40 PANELS + PAGE LAYOUT] WIDE content area (1600px)
   ----------------------------------------------------------------------------- */

   .db-page-1600{ 
  --wp--style--global--content-size: 1600px;
  --wp--style--global--wide-size: 1600px;
}

   /* Widen content area for specific pages */
.db-rail-1600{  --wp--style--global--content-size: 1600px;
  --wp--style--global--wide-size: 1600px;
}

/* Subtle shadow to separate header from content */
header.wp-block-group.has-background{  backface-visibility: hidden;
  will-change: transform;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

/* Slightly crisper separator under a fixed header */
header.wp-block-group.has-background .wp-block-separator{  opacity: 0.9;
}

/* Smooth-ish feel on touch scroll (doesn't animate, just reduces perceived jitter) */
@media (prefers-reduced-motion: no-preference){  header.wp-block-group.has-background{
    transform: translateZ(0);
}
}

/* =============================================================================
   [40 PANELS + PAGE LAYOUT] Page: typography tweaks
   ----------------------------------------------------------------------------- */

/* H2 → next content */
.db-page .db-panel > .wp-block-group > h2.wp-block-heading{  margin-bottom: 0.8rem;
}

/* If an H3 follows immediately after H2: breathing room + subtle rule */
.db-page .db-panel > .wp-block-group > h2.wp-block-heading + h3.wp-block-heading{  margin-top: 1.0rem;
  padding-top: 1.30rem;
  border-top: 1px solid rgba(16,63,46,0.10);
}

/* Default H3 spacing inside panels */
.db-page .db-panel h3.wp-block-heading{  margin-top: 2.3rem;
  margin-bottom: 0.35rem;
}

.db-page .db-panel h3.wp-block-heading + p{  margin-top: 0.35rem !important;
}

/* Lists: general spacing */
.db-page .db-panel .wp-block-list{  margin-top: 0.65rem;
  margin-bottom: 0;
}

/* If the list is a direct child of the panel group, tighten bottom spacing */
.db-page .db-panel > .wp-block-group > .wp-block-list{  margin-bottom: 0;
}

/* Tighten spacing when a paragraph follows a direct-child list */
.db-page .db-panel > .wp-block-group > .wp-block-list + p{  margin-top: 0.7rem !important;
}

/* =============================================================================
   [40 PANELS + PAGE LAYOUT] Page: keep relevance note close to preceding content
   ----------------------------------------------------------------------------- */
.db-page .db-panel .db-relevance{  margin-top: 0.30rem;
}

/* Make the relevance line feel like a muted note (not a new paragraph) */
.db-page .db-panel .db-relevance{  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--sm);
  line-height: 1.55;
}

/* Make ONLY the label look like a quiet field name */
.db-page .db-panel .db-relevance strong{  color: var(--wp--preset--color--forest);
  font-weight: 500;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.02em;
  opacity: 0.95;
}

/* =============================================================================
   [80 FOOTER] Footer panel styling
   ----------------------------------------------------------------------------- */

/* Footer panel container */
.db-footer-panel{  box-sizing: border-box;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: clamp(1.5rem, 2.5vw, 2.5rem);
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(16, 63, 46, 0.08);
/* subtle forest-tinted edge */
  box-shadow: 0 10px 22px rgba(0,0,0,0.04);
}

/* Footer panel background: one notch darker than CTA (#EDF2EF) */
.db-footer-panel.has-footer-panel-background-color{  background: linear-gradient(180deg,
    #E3ECE5 0%,
    #E6EDE8 60%,
    #DEE6E0 100%
  );
}

.db-footer-panel.has-footer-panel-background-color{  background: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 18%),
    linear-gradient(180deg, #EAF1EC 0%, #E6EDE8 60%, #E2E9E4 100%);
}

/* =============================================================================
   [80 FOOTER] Footer columns (62/20/18)
   ----------------------------------------------------------------------------- */

.db-footer-panel .wp-block-columns{  display: flex;
  flex-wrap: nowrap;
  gap: 2rem;
  align-items: flex-start;
}

.db-footer-panel .wp-block-columns > .wp-block-column{  flex: 0 0 auto !important;
/* overrides WP equal-width columns */
}

.db-footer-panel .wp-block-columns > .wp-block-column:nth-child(1){  flex-basis: 35% !important;
  max-width: 35%;
}

.db-footer-panel .wp-block-columns > .wp-block-column:nth-child(2){  flex-basis: 39% !important;
  max-width: 39%;
}

.db-footer-panel .wp-block-columns > .wp-block-column:nth-child(3){  flex-basis: 26% !important;
  max-width: 26%;
}

/* Responsive stack */
@media (max-width: 900px){  .db-footer-panel .wp-block-columns{
    flex-wrap: wrap;
  gap: 1.5rem;
  }

  .db-footer-panel .wp-block-columns > .wp-block-column{
    flex-basis: 100% !important;
  max-width: 100%;
}
}

/* =============================================================================
   [80 FOOTER] Footer columns: centered middle (grid)
   ----------------------------------------------------------------------------- */

/* Use grid for this specific footer row */
.db-footer-panel .wp-block-columns.db-footer-cols{  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem) minmax(0, 1fr);
  column-gap: 2rem;
  align-items: start;
}

/* IMPORTANT: neutralize the earlier flex-basis/max-width rules for this row */
.db-footer-panel .wp-block-columns.db-footer-cols > .wp-block-column{  flex: initial !important;
  flex-basis: auto !important;
  max-width: none !important;
  margin: 0 !important;
  justify-self: stretch;
/* do not shrink-to-content */
  min-width: 0;
/* prevents weird overflow/wrapping */
}

/* Center the nav column as a block, but keep its text left-aligned */
.db-footer-panel .wp-block-columns.db-footer-cols > .db-footer-nav{  margin-inline: auto;
/* centers within the middle track */
  width: 100%;
  max-width: 20rem;
/* match the middle track upper bound */
}

/* Move the entire Navigate column content to the right */
.db-footer-panel .wp-block-columns.db-footer-cols > .db-footer-nav{  padding-left: 12rem;
/* try 1.5–3rem */
}

.db-footer-panel .wp-block-columns.db-footer-cols > .db-footer-col-right{  padding-left: 7rem;
/* try 1.5–3rem */
}

/* Left-align content inside Navigate column */
.db-footer-panel .db-footer-nav-inner{  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 0.6rem;
}

.db-footer-panel .db-footer-nav-inner .wp-block-navigation__container{  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
  padding-left: 0;
}

.db-footer-panel .db-footer-nav-inner .wp-block-navigation-item{  width: auto;
}

/* Footer: db-footer-cols = 3 equal columns, all content left-aligned */
.db-footer-panel .wp-block-columns.db-footer-cols{  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Do not constrain/center the middle column */
.db-footer-panel .wp-block-columns.db-footer-cols > .db-footer-nav{  margin: 0;
  max-width: none;
  width: auto;
}

/* Ensure right column is left-aligned (override prior rule) */
.db-footer-panel .wp-block-columns.db-footer-cols > .db-footer-col-right{  text-align: left !important;
}

/* =============================================================================
   [50 CTA] CTA typography
   ----------------------------------------------------------------------------- */

/* CTA block wrapper— tinted surface */
.db-cta-forest{  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background-color: #F2F6F3;
/* light forest tint */
  border: 1px solid rgba(16,63,46,0.10);
  box-shadow: 0 10px 22px rgba(0,0,0,0.05);
}

/* Soft overlay wash;  */
.db-cta-forest .wp-block-heading{  color: var(--wp--preset--color--forest);
  font-weight: 600;
/* strengthens hierarchy */
}
/* CTA paragraph text */
.db-cta-forest p{  color: rgba(17, 24, 39, 0.88);
/* dark but softer than pure black */
  line-height: 1.65;
  font-weight: 450;
/* use 500 if your font doesn’t support 450 */
}

.db-cta-forest::before{  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(12,59,42,0.035) 0%,
    rgba(12,59,42,0.000) 65%
  );
  pointer-events: none;
}
.db-cta-forest > *{  position: relative;
}

/* =============================================================================
   [50 CTA] CTA button: base style
   ----------------------------------------------------------------------------- */

 /* Normal: slight shadow + subtle lift */
 .db-cta-forest .wp-block-button__link.has-cta-button-background-color{  transform: translateY(0);
  transition: filter 150ms ease, transform 150ms ease, box-shadow 150ms ease;
  box-shadow: 0 8px 18px rgba(0,0,0,0.10);
  border: 1px solid rgba(255,255,255,0.18);
}

/* Hover: slightly darker + subtle lift */
.db-cta-forest .wp-block-button__link.has-cta-button-background-color:hover{  filter: brightness(0.92);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.14);
}

/* Active: pressed */
.db-cta-forest .wp-block-button__link.has-cta-button-background-color:active{  filter: brightness(0.88);
  transform: translateY(1px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.10);
}

/* Keyboard focus */
.db-cta-forest .wp-block-button__link.has-cta-button-background-color:focus-visible{  outline: 2px solid rgba(255,255,255,0.55);
  outline-offset: 2px;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){  .db-cta-forest .wp-block-button__link.has-cta-button-background-color{
    transition: none;
}
}

/* =============================================================================
   [50 CTA] CTA secondary doc link
   ----------------------------------------------------------------------------- */

/* CTA panel: secondary doc link */
.db-cta-forest .db-cta-doclink{  margin-top: 1.2rem;
  margin-bottom: 0;
}

.db-cta-forest .db-cta-doclink a{  color: rgba(16, 63, 46, 0.78);
  text-decoration: none;
  border-bottom: 1px solid rgba(16, 63, 46, 0.22);
  padding-bottom: 2px;
  transition: color 150ms ease, border-color 150ms ease;
}

.db-cta-forest .db-cta-doclink a:hover{/*color: rgba(16, 63, 46, 0.92);
  border-bottom-color: rgba(16, 63, 46, 0.38);*/
  color: var(--wp--preset--color--copper);
  border-bottom-color: var(--wp--preset--color--copper);
  border-bottom-width: 1px;
}

.db-cta-forest .db-cta-doclink a:focus-visible{  color: var(--wp--preset--color--copper);
  border-bottom-color: var(--wp--preset--color--copper);
  outline: 2px solid rgba(155, 79, 51, 0.25);
/* optional */
  outline-offset: 3px;
}

/* Native hash scroll offset */
html{  scroll-padding-top: var(--db-anchor-offset);
}

/* Offset for hashlink headings */
:where(#choose, #compare, #request)::before{  content: "";
  display: block;
  height: var(--db-anchor-offset);
  margin-top: calc(-1 * var(--db-anchor-offset));
  visibility: hidden;
  pointer-events: none;
}

:root{  --db-products-offset: 5px;
/* choose/compare/request */
  --db-anchor-offset: 190px;
/* portfolio */
} 

#products::before{  content: "";
  display: block;
  height: var(--db-products-offset);
  margin-top: calc(-1 * var(--db-products-offset));
  visibility: hidden;
  pointer-events: none;
}

/* =============================================================================
   [60 APPLICATIONS] Applications overview: grid tweaks
   ----------------------------------------------------------------------------- */

/* Give each card more usable width */
.db-applications-overview-grid{  gap: clamp(0.9rem, 1.4vw, 1.2rem);
}

/* Reduce “thick” internal padding */
.db-applications-overview-grid .wp-block-column > .wp-block-group{  padding: 1.0rem 1.1rem;
}

/* Specificity boost for wide-aligned variant */
.db-applications-overview-grid.wp-block-columns{  gap: clamp(0.9rem, 1.4vw, 1.2rem) !important;
  --wp--style--block-gap: clamp(0.9rem, 1.4vw, 1.2rem) !important;
}

/* Make each card fill its column */
.db-applications-overview-grid .wp-block-column > .wp-block-group{  width: 100%;
  max-width: none !important;
  padding: 1.0rem 1.1rem !important;
}

/* Make the columns fill the db-panel inner width */
.db-panel .wp-block-columns.alignwide.db-applications-overview-grid{  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* =============================================================================
   [60 APPLICATIONS] Applications cards: equal height + consistent rhythm
   ----------------------------------------------------------------------------- */

/* Make the row stretch so cards can equalize */
.wp-block-columns.alignwide.db-applications-overview-grid{  align-items: stretch;
}

/* Make each column a flex container so the card can fill height */
.wp-block-columns.alignwide.db-applications-overview-grid > .wp-block-column{  display: flex;
  align-self: stretch;
}

/* The card itself */
.wp-block-columns.alignwide.db-applications-overview-grid > .wp-block-column > .wp-block-group{  width: 100%;
  display: flex;
  flex-direction: column;
  height: 100%;
/* Stop WP Group spacing from drifting */
  --wp--style--block-gap: 0;
}

/* Remove WP’s injected margin-top between inner blocks */
.wp-block-columns.alignwide.db-applications-overview-grid > .wp-block-column > .wp-block-group > *{  margin-block-start: 0 !important;
}

/* Reintroduce a consistent vertical rhythm inside each card */
.wp-block-columns.alignwide.db-applications-overview-grid > .wp-block-column > .wp-block-group > * + *{  margin-top: 0.85rem;
}

/* Push the final link paragraph to the bottom */
.wp-block-columns.alignwide.db-applications-overview-grid > .wp-block-column > .wp-block-group > p:last-of-type{  margin-top: auto !important;
}

/* =============================================================================
   [60 APPLICATIONS] Application page: copper color tag
   ----------------------------------------------------------------------------- */
.db-application-page .db-domains span.has-copper-color{  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(155,79,51,0.25);
  line-height: 1.2;
}

/* =============================================================================
   [70 COMPONENTS + GRIDS] Dahurian Bioactives — Note Card (reusable)
   ----------------------------------------------------------------------------- */

.db-note-card{  background: var(--wp--preset--color--background);
  border: 1px solid rgba(16, 63, 46, 0.10);
/* subtle forest-tinted border */
  border-radius: 16px;
  box-shadow: 0 10px 22px rgba(0,0,0,0.05);
  padding: clamp(1rem, 1.6vw, 1.25rem);
}

.db-note-card .wp-block-heading{  margin-top: 0;
  margin-bottom: 0.75rem;
}

/* Optional: keep note-card H3 from getting oversized on wide screens */
.db-note-card h3.wp-block-heading{  font-size: clamp(1.15rem, 1.2vw, 1.35rem);
  line-height: 1.2;
}

.db-note-card .wp-block-list{  margin: 0;
  padding-left: 1.1rem;
}

.db-note-card .wp-block-list li{  margin: 0.35rem 0;
}

.db-note-card .wp-block-list li strong{  color: var(--wp--preset--color--forest);
  font-weight: 600;
}

/* Variant: tighter padding + denser bullets */
.db-note-card.db-note-card--tight{  padding: clamp(0.75rem, 1.2vw, 1rem);
}

.db-note-card.db-note-card--tight .wp-block-heading{  margin-bottom: 0.55rem;
}

.db-note-card.db-note-card--tight .wp-block-list li{  margin: 0.25rem 0;
}

/* Variant: surface background */
.db-note-card.db-note-card--surface{  background: var(--wp--preset--color--surface);
}

/* Fix: remove extra top gap above first heading inside note cards */
.db-note-card > .wp-block-heading:first-child,
.db-note-card > h3.wp-block-heading:first-child{  margin-top: 0 !important;
  margin-block-start: 0 !important;
}

/* Optional: tighten overall top padding slightly (especially noticeable with big H3s) */
.db-note-card{  padding-top: clamp(0.75rem, 1.2vw, 1rem);
}

/* If you're using the tight variant, make the top even tighter */
.db-note-card.db-note-card--tight{  padding-top: clamp(0.6rem, 1vw, 0.85rem);
}


/* Keep image from visually "touching" the panel edge */
.db-figure-panel .wp-block-image{  margin: 0;
}

/* =============================================================================
   [70 COMPONENTS + GRIDS] Dual-domain figure styling
   ----------------------------------------------------------------------------- */

.db-dual-domain-figure{  width: min(780px, 100%);
  margin-left: auto;
  margin-right: auto;
}

.db-dual-domain-figure img{  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
  border: 0;
  box-shadow: none;
  outline: 0;
}

/* =============================================================================
   [30 HEADER + MEGA] Portfolio-grid (mega-menu styling)
   ----------------------------------------------------------------------------- */

/* Products grid: mega-menu-like layout (layout only) */
.db-products-mega{  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
/* Critical: prevent WP block-gap margins from shifting grid items */
  --wp--style--block-gap: 0;
}

/* Also neutralize margin-top WP injects between blocks inside a Group */
.db-products-mega > *{  margin-block-start: 0 !important;
}

/* Place Synergy under BioGala + BioQin */
.db-products-mega .db-cell--synergy{  grid-column: 1 / span 2;
}

/* Keep Oil & Resin in the right column; occupy two rows like mega-menu */
.db-products-mega .db-cell--oil{  grid-column: 3;
  grid-row: 1 / span 2;
}

/* Mobile stack */
@media (max-width: 980px){  .db-products-mega{
    grid-template-columns: 1fr;
  }
  .db-products-mega .db-cell--synergy,
  .db-products-mega .db-cell--oil{
    grid-column: auto;
  grid-row: auto;
}
}

#products > .db-panel {
    padding-top: 0;
}

/* How to choose: equal-height cards + aligned borders */
#choose .wp-block-columns{
  align-items: stretch;              /* columns become equal height */
}

#choose .wp-block-columns > .wp-block-column{
  display: flex;                     /* allow child to stretch */
}

#choose .wp-block-columns > .wp-block-column > .wp-block-group{
  flex: 1;                           /* make the bordered group fill height */
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* Optional: tighten/normalize inner spacing so text starts consistently */
#choose .wp-block-columns > .wp-block-column > .wp-block-group > .wp-block-heading{
  margin-top: 0;
}

#choose .wp-block-columns > .wp-block-column > .wp-block-group > p{
  margin-bottom: 0;
}

#choose .wp-block-columns > .wp-block-column > .wp-block-group > .wp-block-heading{
  min-height: 3.2em;   /* tweak (e.g., 3.0–3.6em) */
  display: flex;
  align-items: center;
  justify-content: center;
}