/* Desert Bloom — global overflow guard.
 * `overflow-x: clip` on the root contains any rogue wide child (mega-menu
 * panels, mobile carousels, off-canvas drawers, etc.) without breaking
 * `position: sticky` on the header (which is what `overflow-x: hidden`
 * on body would do). Supported in Chromium 90+, Firefox 81+, Safari 16+. */
html { overflow-x: clip; }

/* Eyebrow chip pill — single source for all dbcb blocks (added 2026-06-11) */
p.eyebrow-chip,
.eyebrow-chip { width: max-content; align-self: flex-start;
  display: inline-flex;
  align-items: center;
  font-size: 11px !important;
  line-height: 1 !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600;
  color: #9e4a2a;
  background: #faf0ec;
  padding: 6px 10px;
  border-radius: 4px;
}

/* 2026-06-11 — на хабах standalone wp:heading / wp:paragraph / wp:list ограничиваем
   so content area = 800px (matches dbcb prose blocks max-w-prose).
   Box-sizing border-box: max-width includes padding, so we add padding to max-width
   to give same effective content width as dbcb max-w-prose (which has no inner padding).
   Updated 2026-06-12 — Tatyana noted width mismatch between native blocks and dbcb.
   Updated 2026-06-12 — на экранах < 992px ограничение снимается полностью; блоки
   растягиваются до max-w-shell (1280px) минус padding, чтобы не было гуттеров на
   планшетах. Constraint включается обратно от 992px и шире. */
/* 2026-06-16 Tatyana — body prose на hub ограничено 800px (как другие
   constrained блоки spec-card list, candidacy, etc), mx-auto центрирует
   на viewport. 864 = 800 content + 64 padding lg:px-8. */
.single-enhancedcategory .content-body > h1,
.single-enhancedcategory .content-body > h2,
.single-enhancedcategory .content-body > h3,
.single-enhancedcategory .content-body > h4,
.single-enhancedcategory .content-body > p,
.single-enhancedcategory .content-body > ul,
.single-enhancedcategory .content-body > ol,
.single-enhancedcategory .content-body > blockquote {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
@media (min-width: 992px) {
  .single-enhancedcategory .content-body > h1,
  .single-enhancedcategory .content-body > h2,
  .single-enhancedcategory .content-body > h3,
  .single-enhancedcategory .content-body > h4,
  .single-enhancedcategory .content-body > p,
  .single-enhancedcategory .content-body > ul,
  .single-enhancedcategory .content-body > ol,
  .single-enhancedcategory .content-body > blockquote {
    padding-left: 2rem; /* lg:px-8 — matches dbcb section padding */
    padding-right: 2rem;
  }
}

/* 2026-06-12 — dbcb max-w-prose (800px) constraint applies only ≥ 992px.
   Below that, content stretches to full max-w-shell (parent constraint, 1280px
   minus padding) so tablets get a comfortable single-column layout without
   awkward 800px gutters. */
@media (max-width: 991.98px) {
  .max-w-prose {
    max-width: none;
  }
}

/* 2026-06-11 — bloom-pink — used on the highlighted Path-router card.
   Multi-layer radial gradient that adds a warm glow vs flat pink. */
.bg-bloom-pink {
  background-color: #fae8e5;
  background-image:
    radial-gradient(135% 95% at 88% -12%, rgba(158, 74, 42, .13), rgba(158, 74, 42, 0) 55%),
    radial-gradient(110% 120% at 2% 112%, rgba(255, 247, 242, .85), rgba(255, 247, 242, 0) 48%);
}

/* 2026-06-12 — comparison-table footer link styling (Tatyana feedback).
   Default theme <a> color is too close to text-muted on dbcb-comparison footer
   so the link blends into the paragraph. Make it explicitly primary + underlined. */
/* Canonical inline-link styling in dbcb prose contexts (intros, body
   paragraphs, footers, FAQ answers, alert/callout bodies).
   Plain <a> inside text gets text-primary + underline.
   Tailwind-styled CTA links (which carry their own text-/inline-flex/bg-/font-
   classes) are excluded via :not() chain. Tatyana 2026-06-15. */
section[class*="dbcb-"] p > a:not([class*="text-"]):not([class*="inline-flex"]):not([class*="bg-"]):not([class*="font-"]):not([class*="hover:"]),
section[class*="dbcb-"] dd > a:not([class*="text-"]):not([class*="inline-flex"]):not([class*="bg-"]),
section[class*="dbcb-"] li > a:not([class*="text-"]):not([class*="inline-flex"]):not([class*="bg-"]):not([class*="font-"]),
section[class*="dbcb-"] .dbcb-comparison-footer a,
section[class*="dbcb-"] .dbcb-feature__text p a,
section[class*="dbcb-"] .dbcb-feature__body p a,
section[class*="dbcb-"] .dbcb-faq__answer a,
section[class*="dbcb-"] .dbcb-alert__body a,
section[class*="dbcb-"] .dbcb-candidacy__footer a,
aside[class*="dbcb-"] p > a:not([class*="text-"]):not([class*="inline-flex"]):not([class*="bg-"]):not([class*="font-"]) {
  color: #9e4a2a;            /* text-primary */
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}
section[class*="dbcb-"] p > a:not([class*="text-"]):not([class*="inline-flex"]):not([class*="bg-"]):not([class*="font-"]):hover,
section[class*="dbcb-"] dd > a:not([class*="text-"]):not([class*="inline-flex"]):not([class*="bg-"]):hover,
section[class*="dbcb-"] li > a:not([class*="text-"]):not([class*="inline-flex"]):not([class*="bg-"]):not([class*="font-"]):hover,
section[class*="dbcb-"] .dbcb-comparison-footer a:hover,
section[class*="dbcb-"] .dbcb-feature__text p a:hover,
section[class*="dbcb-"] .dbcb-feature__body p a:hover,
section[class*="dbcb-"] .dbcb-faq__answer a:hover,
section[class*="dbcb-"] .dbcb-alert__body a:hover,
section[class*="dbcb-"] .dbcb-candidacy__footer a:hover,
aside[class*="dbcb-"] p > a:not([class*="text-"]):not([class*="inline-flex"]):not([class*="bg-"]):not([class*="font-"]):hover {
  color: #7a3820;            /* text-primary-dark */
}

/* 2026-06-12 — native wp:image (infographics, custom images) constrained to
   max-w-shell (1280px) with the same px-5 / lg:px-8 padding as dbcb sections.
   Box-sizing border-box: padding counts inside max-width so content area stays
   ≤ 1280px at any breakpoint.
   Note: article-images.css has `.content-body figure.wp-block-image { margin: 0 }`
   at specificity (0,2,1) which kills our vertical margin via the (0,1,0) class
   selector. We use `figure.wp-block-image` here (same specificity, later in
   cascade) so margin-top/bottom actually apply on the real figure element. */
.content-body figure.wp-block-image,
.content-body .wp-block-image,
figure.wp-block-image,
.wp-block-image {
  box-sizing: border-box;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 3rem;
  margin-bottom: 3rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
@media (min-width: 992px) {
  .content-body figure.wp-block-image,
  .content-body .wp-block-image,
  figure.wp-block-image,
  .wp-block-image {
    padding-left: 2rem;
    padding-right: 2rem;
    margin-top: 4rem;
    margin-bottom: 4rem;
  }
}
.wp-block-image img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  border-radius: 12px;
}
.wp-block-image figcaption {
  margin-top: 0.75rem;
  text-align: center;
  color: #6b5b4f;
  font-size: 0.875rem;
  line-height: 1.5;
}

/* Override article-images.css breakout on hub-type pages.
   Blog/treatment pages use 800px prose where 21:9 infographics need to break
   wide via `figure[data-wide-auto]` (margin-left/right: -6vw). On enhancedcategory
   hubs the content is already at 1280px max-w-shell, so the breakout pushes
   images edge-to-edge of the viewport. Reset to the shell constraint here. */
.single-enhancedcategory .content-body figure[data-wide-auto],
.single-enhancedcategory .content-body .wp-block-image.alignwide,
.single-enhancedcategory .content-body .wp-block-image.alignfull {
  margin-left: auto;
  margin-right: auto;
  max-width: 1280px;
  width: auto;
  box-sizing: border-box;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
@media (min-width: 992px) {
  .single-enhancedcategory .content-body figure[data-wide-auto],
  .single-enhancedcategory .content-body .wp-block-image.alignwide,
  .single-enhancedcategory .content-body .wp-block-image.alignfull {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* Treatment pages: .content-body is 800px with its own 32px padding, so the
   extra wp-block-image padding (above) double-insets the image, making the
   infographic NARROWER than the body text. Zero it here so images sit flush
   with the prose column (Tatyana 2026-06-20). */
.single-treatment .content-body figure.wp-block-image,
.single-treatment .content-body .wp-block-image {
  padding-left: 0;
  padding-right: 0;
  max-width: 100%;
}

/* 2026-06-12 — Tailwind utility classes missing from the compiled bundle.
   Used by procedure-cards CTA (pin to bottom in flex-col card) and other
   layouts that need auto-margin in a flex container. */
.mt-auto { margin-top: auto; }
.mb-auto { margin-bottom: auto; }
.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }
/* face-zone-explorer photo column switches from aspect-square (mobile) to
   stretched-to-zones-column-height at the md breakpoint, matching the
   md:grid-cols-2 layout switch. md:aspect-auto / md:h-full weren't in the
   Tailwind bundle so we define them here. */
@media (min-width: 768px) {
  .md\:aspect-auto { aspect-ratio: auto; }
  .md\:h-full { height: 100%; }
  /* dbcb-feature grid placement — head/body in one text column,
     media spans both rows alongside. */
  .md\:col-start-1 { grid-column-start: 1; }
  .md\:col-start-2 { grid-column-start: 2; }
  .md\:row-start-1 { grid-row-start: 1; }
  .md\:row-start-2 { grid-row-start: 2; }
  .md\:row-span-2  { grid-row: span 2 / span 2; }
  .md\:self-start  { align-self: start; }
  .md\:self-center { align-self: center; }
}

/* 2026-06-12 — Native wp:heading (<h2 class="wp-block-heading"> etc) was
   rendering with browser default sans-serif at random sizes, jarring next to
   dbcb section headings (font-display 36-52px). Apply the same font family
   and per-level sizes so on-page headings behave consistently regardless of
   whether they live inside a dbcb block or as standalone Gutenberg headings. */
.content-body > h1,
.content-body > h2,
.content-body > h3,
.content-body > h4,
.content-body > h5,
.content-body > h6 {
  font-family: "Cormorant Garamond", Georgia, serif;
  color: #2d2419;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  line-height: 1.15;
}
.content-body > h1,
.content-body > h1.wp-block-heading,
.content-body h1.wp-block-heading { font-size: 40px; }
.content-body > h2,
.content-body > h2.wp-block-heading,
.content-body h2.wp-block-heading { font-size: 32px; }
.content-body > h3,
.content-body > h3.wp-block-heading,
.content-body h3.wp-block-heading {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -0.005em;
}
/* h4 must not stick to a preceding list/paragraph — give authored h4 a top
   margin in all content contexts (posts use .article, hubs use .content-body). Tanya 2026-06-26 */
.content-body h4.wp-block-heading,
.article h4.wp-block-heading { margin-top: 1.5rem; }

.content-body > h4,
.content-body > h4.wp-block-heading,
.content-body h4.wp-block-heading {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 18px;
  line-height: 1.3;
}
.content-body > h5,
.content-body > h6 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 16px;
  line-height: 1.4;
}
@media (min-width: 992px) {
  .content-body > h1,
  .content-body h1.wp-block-heading { font-size: 56px; line-height: 1.08; letter-spacing: -0.015em; }
  .content-body > h2,
  .content-body h2.wp-block-heading { font-size: 40px; line-height: 1.12; letter-spacing: -0.01em; }
  .content-body > h3,
  .content-body h3.wp-block-heading { font-size: 28px; line-height: 1.3; }
  .content-body > h4,
  .content-body h4.wp-block-heading { font-size: 20px; }
  /* dbcb section h2 (font-display text-h1-lg = 52px по умолчанию) — приводим
     к тому же масштабу что и body-h2, чтобы между блоками и текстом не было
     резкого скачка. */
  [class*="dbcb-"] h2.font-display.lg\:text-h1-lg {
    font-size: 40px;
    line-height: 1.12;
    letter-spacing: -0.01em;
  }
}

/* 2026-06-23 — Tanya: unify all H3/H4 headings at medium weight 500.
   Standalone .content-body headings + dbcb section h2 are already 500
   (font-medium); dbcb card/item h3/h4 inherit 400 because Tailwind preflight
   resets headings to font-weight:inherit. Bring them to 500 so heading weight
   is consistent sitewide (size classes untouched — purely a weight change). */
[class*="dbcb-"] h3,
[class*="dbcb-"] h4 {
  font-weight: 500;
}

/* 2026-06-12 — Heading scale rules (Tatyana spec for <1024px):
   - Hero h1 (db-hero-h1 — added to hub-hero template): 42px
   - Article-body h1 (.content-body > h1): 40px  (from rules above)
   - Article-body h2 (.content-body > h2) AND dbcb section h2: 32px
   - Article-body h3 (.content-body > h3): 24px  (from rules above)
   - Card h3 (font-serif text-h3 inside dbcb cards): 20px (kept via Tailwind)
   - Feature block heading: 24px (set via text-h3-lg in feature.php)
*/
.db-hero-h1 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.08;
}
@media (max-width: 991.98px) {
  .db-hero-h1 { font-size: 42px; }
  /* dbcb section h2 — the "font-display text-h1" heading used in section
     headers (concern-router, procedure-cards, brand-cards heading area, etc.)
     Override the Tailwind text-h1 (36px) to 32px to match body h2. */
  [class*="dbcb-"] h2.font-display.text-h1 {
    font-size: 32px;
  }
}
@media (min-width: 992px) {
  .db-hero-h1 { font-size: 56px; }
}

/* Feature block heading — uses h2 or h3 selected by author. Sizes match
   article body headings (32/40 for h2, 24/28 for h3). */
.dbcb-feature h2.dbcb-feature__heading {
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.dbcb-feature h3.dbcb-feature__heading {
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -0.005em;
}
@media (min-width: 992px) {
  .dbcb-feature h2.dbcb-feature__heading {
    font-size: 40px;
    line-height: 1.12;
  }
  .dbcb-feature h3.dbcb-feature__heading {
    font-size: 28px;
  }
}


/* 2026-06-15 — dbcb/feature 2-cell layout (replaced 3-cell row-span trick).
   Desktop: text-cell + media-cell side by side, both top-aligned. */
@media (min-width: 768px) {
  .dbcb-feature-grid {
    align-items: start;
  }
}


/* 2026-06-14 — drop divider line between consecutive dbcb sections when the
   NEXT section has its own background (sand / bloom-pink). The border-b on
   the previous section becomes a thin grey line floating in the white gap
   right above the colored block — Tatyana caught it on /non-surgical-facelift/
   between concern-router (white) → brand-cards (sand). */
section[class*="border-b"]:has(+ section[class*="bg-"]:not([class*="bg-white"])),
section[class*="border-y"]:has(+ section[class*="bg-"]:not([class*="bg-white"])) {
  border-bottom-color: transparent !important;
}
/* Same for the ::after divider line (concern-router/comparison/face-zone/path-router):
   drop it when the next section has a real (non-white) background. Tanya 2026-06-24 */
.dbcb-concern-router:has(+ section[class*="bg-"]:not([class*="bg-white"]))::after,
.dbcb-comparison:has(+ section[class*="bg-"]:not([class*="bg-white"]))::after,
.dbcb-face-zone-explorer:has(+ section[class*="bg-"]:not([class*="bg-white"]))::after,
.dbcb-path-router:has(+ section[class*="bg-"]:not([class*="bg-white"]))::after {
  display: none;
}

/* ========================================================================
   Treatment template — dbcb block padding alignment (Tatyana 2026-06-15)
   The article wrapper (.content-body) already adds px-5 lg:px-8 horizontal
   padding. dbcb section blocks (designed for full-bleed hub context) add
   their OWN px-5 lg:px-8 inside `.max-w-shell` — which double-pads them in
   treatment context, making them visually inset more than plain `<p>`/`<h2>`.
   Zero out the dbcb-section inner horizontal padding when inside a
   treatment article so block content aligns with body text/headings.
   ======================================================================== */
/* Zero-out horizontal padding on dbcb section inner div AND on Pattern B
   sections themselves when they're inside templates that have their OWN
   wrapper padding (treatment / page / blog). Pattern A blocks use inner div,
   Pattern B blocks have max-w on the section itself. Cover both. */
.single-treatment article.content-body section[class*="dbcb-"] > div.max-w-shell,
.dbcb-page-shell > section[class*="dbcb-"] > div.max-w-shell,
.single-post .article section[class*="dbcb-"] > div.max-w-shell,
.single-treatment article.content-body > section[class*="dbcb-"].max-w-shell:not(.dbcb-treatment-prices):not(.dbcb-bna-slider),
.dbcb-page-shell > section[class*="dbcb-"].max-w-shell:not(.dbcb-treatment-prices):not(.dbcb-bna-slider),
.single-post .article > section[class*="dbcb-"].max-w-shell:not(.dbcb-treatment-prices):not(.dbcb-bna-slider) {
    padding-left: 0;
    padding-right: 0;
}
@media (min-width: 992px) {
    .single-treatment article.content-body section[class*="dbcb-"] > div.max-w-shell,
    .dbcb-page-shell > section[class*="dbcb-"] > div.max-w-shell,
    .single-post .article section[class*="dbcb-"] > div.max-w-shell,
    .single-treatment article.content-body > section[class*="dbcb-"].max-w-shell:not(.dbcb-treatment-prices):not(.dbcb-bna-slider),
    .dbcb-page-shell > section[class*="dbcb-"].max-w-shell:not(.dbcb-treatment-prices):not(.dbcb-bna-slider),
    .single-post .article > section[class*="dbcb-"].max-w-shell:not(.dbcb-treatment-prices):not(.dbcb-bna-slider) {
        padding-left: 0;
        padding-right: 0;
    }
}

/* Harmonize <p> color across treatment body — Tatyana 2026-06-15 noted
   feature/text-photo body looked different shade than standalone <p>. */
.content-body p,
.dbcb-feature__text p,
.dbcb-feature__body p,
.dbcb-text-photo__text p,
.dbcb-feature p {
    color: #2d2419;
}

/* dbcb/spec-card variant "list" — explicit 2-col row layout
   (Tailwind JIT doesn't always pick up arbitrary `grid-cols-[]` from PHP-emitted markup). */
.dbcb-spec-card--list .dbcb-spec-card__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px 32px;
    /* Vertical breathing — Tatyana 2026-06-15. Tailwind pt-6/mt-6 from PHP
       didn't always apply (JIT scan miss); explicit values are reliable. */
    padding-top: 16px;
    margin-top: 16px;
}
.dbcb-spec-card--list .dbcb-spec-card__row:first-child {
    padding-top: 0;
    margin-top: 0;
    border-top: 0;
}
@media (min-width: 640px) {
    .dbcb-spec-card--list .dbcb-spec-card__row {
        grid-template-columns: minmax(140px, 240px) 1fr;
        align-items: baseline;
    }
}

/* list-variant labels — match standard card H3 (20px). Tanya 2026-06-26 (was 18px). */
.dbcb-spec-card--list .dbcb-spec-card__label {
    font-size: 20px;
    line-height: 1.3;
}

/* Hub-context blocks with toggleable background — when bg is enabled
   the inner content needs vertical breathing room from the colored area.
   Scoped to brand-cards + procedure-cards (the blocks that have an authoring
   toggle for bg). Tatyana 2026-06-15. */
.dbcb-brand-cards.bg-sand > div.max-w-shell,
.dbcb-brand-cards.bg-bloom-pink > div.max-w-shell,
.dbcb-procedure-cards.bg-sand > div.max-w-shell,
.dbcb-procedure-cards.bg-bloom-pink > div.max-w-shell,
.dbcb-severity-tier.bg-sand > div.max-w-shell,
.dbcb-severity-tier.bg-bloom-pink > div.max-w-shell,
.dbcb-concern-router.bg-sand > div.max-w-shell,
.dbcb-concern-router.bg-bloom-pink > div.max-w-shell,
.dbcb-path-router.bg-sand > div.max-w-shell,
.dbcb-combinations.bg-sand > div.max-w-shell {
    padding-top: 3rem;
    padding-bottom: 3rem;
}
@media (min-width: 992px) {
    .dbcb-brand-cards.bg-sand > div.max-w-shell,
    .dbcb-brand-cards.bg-bloom-pink > div.max-w-shell,
    .dbcb-procedure-cards.bg-sand > div.max-w-shell,
    .dbcb-procedure-cards.bg-bloom-pink > div.max-w-shell,
    .dbcb-severity-tier.bg-sand > div.max-w-shell,
    .dbcb-severity-tier.bg-bloom-pink > div.max-w-shell,
    .dbcb-concern-router.bg-sand > div.max-w-shell,
    .dbcb-concern-router.bg-bloom-pink > div.max-w-shell,
    .dbcb-path-router.bg-sand > div.max-w-shell,
    .dbcb-combinations.bg-sand > div.max-w-shell {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
}

/* Treatment: brand-cards / procedure-cards / severity-tier / concern-router shed
   their colored bg in the gutter column — kill the bg-band vertical padding
   (3rem base / 4rem desktop) so content isn't inset an extra 3-4rem vs other
   blocks. Higher specificity than the rules above → covers both. Tanya 2026-06-24. */
.single-treatment .dbcb-brand-cards.bg-sand > div.max-w-shell,
.single-treatment .dbcb-brand-cards.bg-bloom-pink > div.max-w-shell,
.single-treatment .dbcb-procedure-cards.bg-sand > div.max-w-shell,
.single-treatment .dbcb-procedure-cards.bg-bloom-pink > div.max-w-shell,
.single-treatment .dbcb-severity-tier.bg-sand > div.max-w-shell,
.single-treatment .dbcb-severity-tier.bg-bloom-pink > div.max-w-shell,
.single-treatment .dbcb-concern-router.bg-sand > div.max-w-shell,
.single-treatment .dbcb-concern-router.bg-bloom-pink > div.max-w-shell {
    padding-top: 0;
    padding-bottom: 0;
}

/* Divider line below specific section blocks — inset from page edges with
   vertical breathing room above. Tatyana 2026-06-15. */
.dbcb-concern-router::after,
.dbcb-face-zone-explorer::after,
.dbcb-path-router::after {
    content: '';
    display: block;
    height: 1px;
    background: rgb(229, 226, 217);  /* matches Tailwind border-line color */
    margin: 3rem 1.25rem 0;
}
@media (min-width: 992px) {
    .dbcb-concern-router::after,
    .dbcb-face-zone-explorer::after,
    .dbcb-path-router::after {
        margin: 4rem 2rem 0;
    }
}

/* When these section blocks have a colored bg, the band itself separates them —
   the ::after divider is redundant and its margin-top stacked on the band's
   padding-bottom doubled the bottom spacing. Hide it for bg variants. Tanya 2026-06-26 */
.dbcb-concern-router.bg-sand::after, .dbcb-concern-router.bg-bloom-pink::after,
.dbcb-face-zone-explorer.bg-sand::after, .dbcb-face-zone-explorer.bg-bloom-pink::after,
.dbcb-path-router.bg-sand::after, .dbcb-path-router.bg-bloom-pink::after { display: none; }


/* Full-bleed bg blocks on treatment + page templates — bg color extends
   edge-to-edge of viewport (breaks out of 800px content constraint).
   Inner content stays centered + indented via inner div padding.
   Tatyana 2026-06-15. */
/* Only explicit COLORED bg classes trigger full-bleed — bg-white is default
   neutral backdrop on many sections (spec-card / concern-router / comparison /
   doctor-card / faq) and must NOT break out of content column. List the
   toggle colors explicitly. */
/* treatment light bands no longer full-bleed (bg removed) — Tanya 2026-06-24 */
.single-treatment article.content-body > section.bg-primary-deep:not(.rounded-feature),
.dbcb-page-shell > section.bg-sand:not(.rounded-feature),
.dbcb-page-shell > section.bg-cream:not(.rounded-feature),
.dbcb-page-shell > section.bg-bloom-pink:not(.rounded-feature),
.dbcb-page-shell > section.bg-primary-soft:not(.rounded-feature),
.dbcb-page-shell > section.bg-primary-deep:not(.rounded-feature) {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}
/* treatment LIGHT bands are in-column now (bg + full-bleed removed) → drop the
   inner 1.25rem padding, else content staircases +20px vs body (severity-tier,
   procedure-cards). Kept for primary-deep (full-bleed) + page-shell. Tanya 2026-06-24. */
.single-treatment article.content-body > section.bg-primary-deep > div.max-w-shell,
.dbcb-page-shell > section.bg-sand > div.max-w-shell,
.dbcb-page-shell > section.bg-cream > div.max-w-shell,
.dbcb-page-shell > section.bg-bloom-pink > div.max-w-shell,
.dbcb-page-shell > section.bg-primary-soft > div.max-w-shell,
.dbcb-page-shell > section.bg-primary-deep > div.max-w-shell {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}
@media (min-width: 992px) {
    .single-treatment article.content-body > section.bg-sand > div.max-w-shell,
    .single-treatment article.content-body > section.bg-cream > div.max-w-shell,
    .single-treatment article.content-body > section.bg-bloom-pink > div.max-w-shell,
    .single-treatment article.content-body > section.bg-primary-soft > div.max-w-shell,
    .single-treatment article.content-body > section.bg-primary-deep > div.max-w-shell,
    .dbcb-page-shell > section.bg-sand > div.max-w-shell,
    .dbcb-page-shell > section.bg-cream > div.max-w-shell,
    .dbcb-page-shell > section.bg-bloom-pink > div.max-w-shell,
    .dbcb-page-shell > section.bg-primary-soft > div.max-w-shell,
    .dbcb-page-shell > section.bg-primary-deep > div.max-w-shell {
        /* padding-left: 2rem; removed — colored-band content now aligns with body (Tanya 2026-06-24) */
        /* padding-right: 2rem; */
    }
}


/* On treatment template (.content-body 800px column), bg-flagged sections
   still full-bleed (bg color edge-to-edge), but INNER content constrained
   to 800px column so cards/heading align with body text. Tatyana 2026-06-15. */
.single-treatment article.content-body > section.bg-sand > div.max-w-shell,
.single-treatment article.content-body > section.bg-cream > div.max-w-shell,
.single-treatment article.content-body > section.bg-bloom-pink > div.max-w-shell,
.single-treatment article.content-body > section.bg-primary-soft > div.max-w-shell,
.single-treatment article.content-body > section.bg-primary-deep > div.max-w-shell {
    max-width: 864px;  /* 800 content + 64 padding (px-8) — matches .content-body > p */
}
@media (max-width: 991.98px) {
    .single-treatment article.content-body > section.bg-sand > div.max-w-shell,
    .single-treatment article.content-body > section.bg-cream > div.max-w-shell,
    .single-treatment article.content-body > section.bg-bloom-pink > div.max-w-shell,
    .single-treatment article.content-body > section.bg-primary-soft > div.max-w-shell,
    .single-treatment article.content-body > section.bg-primary-deep > div.max-w-shell {
        max-width: 840px;  /* 800 + 40 padding (px-5) */
    }
}
@media (max-width: 991.98px) {
    /* On mobile/tablet content-body content stretches to full shell width,
       so bg-section inner div should match — drop the 800px cap. */
    .single-treatment article.content-body > section.bg-sand > div.max-w-shell,
    .single-treatment article.content-body > section.bg-cream > div.max-w-shell,
    .single-treatment article.content-body > section.bg-bloom-pink > div.max-w-shell,
    .single-treatment article.content-body > section.bg-primary-soft > div.max-w-shell,
    .single-treatment article.content-body > section.bg-primary-deep > div.max-w-shell {
        max-width: none;
    }
}


/* article-images.css ставит overflow-x: clip на .content-body как safety net
   для wide images/carousels. Это режет full-bleed bg sections через
   negative-margin. Снимаем clip на treatment template — html уровень всё
   равно catches viewport-level overflow (см. строку 6: html { overflow-x: clip }).
   Tatyana 2026-06-15. */
.single-treatment article.content-body {
    overflow: visible;
    overflow-x: visible;
}



/* ============================================================
   2026-06-15 — hub-template layout constraints
   Width per-block: spec-card list = 800px, strip = 1280px etc.
   ============================================================ */

/* spec-card list: NO own max-width — it fills its container (gutter column when
   the CTA is present, full shell width when not). Tatyana 2026-06-24. */

/* hub-cta + visit-us — vertical breathing room when block has colored bg.
   Same pattern as brand-cards / procedure-cards / severity-tier. */
.dbcb-hub-cta > div.max-w-shell,
.dbcb-visit-us > div.max-w-shell {
    padding-top: 3rem;
    padding-bottom: 3rem;
}
/* (hub-cta/visit-us desktop padding now = 4rem via the rhythm rule below) */

/* method-hubs dark CTA card — ensure white text wins over any inherited dark color. */
.dbcb-method-hubs .bg-primary-deep h3,
.dbcb-method-hubs .bg-primary-deep p,
.dbcb-method-hubs .bg-primary-deep span {
    color: #fff !important;
}
.dbcb-method-hubs .bg-primary-deep p {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* mid-cta dark — same safety net */
.dbcb-mid-cta h2,
.dbcb-mid-cta h3 {
    color: #fff !important;
}
.dbcb-mid-cta p {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* 2026-06-16 — blog-card grid: flexbox with wrap для предсказуемого поведения.
   Auto-fit + justify-content: center конфликтовали (треки max-content sized,
   auto-fit уменьшал количество треков до помещения, на 736px-узких контейнерах
   получался single column). Tatyana. */
.dbcb-blog-card__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
}
.dbcb-blog-card__grid > * {
    flex: 1 1 260px;
    max-width: 360px;
    min-width: 0;
}

/* 2026-06-15 — blog template (single.php): body prose now FULL article column width (was 800px reading column; cap removed 2026-06-21 per Tatyana so text aligns with dbcb blocks on both edges)
   reading column; dbcb blocks use full available article column width.
   Tatyana. */
.single-post .article > p,
.single-post .article > h2,
.single-post .article > h3,
.single-post .article > h4,
.single-post .article > h5,
.single-post .article > h6,
.single-post .article > ul,
.single-post .article > ol,
.single-post .article > blockquote,
.single-post .article > figure.wp-block-image,
.single-post .article > .wp-block-paragraph,
.single-post .article > .wp-block-heading,
.single-post .article > .wp-block-list,
.single-post .article > .wp-block-group {
    max-width: none;
    /* 2026-06-16 Tatyana — без mx-auto: body prose выравнено по левому краю
       чтобы совпадать с dbcb-блоками (которые fill article col). */
}

/* 2026-06-15 — single.php blog layout 2-col (TOC + article).
   Tailwind JIT не подхватывает arbitrary grid-cols со вложенным minmax(0,1fr) — direct CSS. */
@media (min-width: 992px) {
    .db-blog-grid {
        grid-template-columns: 280px minmax(0, 1fr);
    }
}
/* 2026-06-16 Tatyana — blog main wrapper cap 1280px. Tailwind не пресобрал
   arbitrary `max-w-[1280px]` → дублируем напрямую. */
.single-post main > .max-w-\[1280px\] {
    max-width: 1280px;
}

/* 2026-06-15 — blog body typography norm (Tatyana).
   Body paragraphs/lists 16px; captions/small-text 14px. */
.single-post .article > p,
.single-post .article > ul,
.single-post .article > ol,
.single-post .article > blockquote,
.single-post .article > .wp-block-paragraph,
.single-post .article > .wp-block-list {
    font-size: 16px;
    line-height: 1.7;
    color: #2d2419;
}
.single-post .article figcaption,
.single-post .article .wp-element-caption {
    font-size: 14px;
    line-height: 1.5;
}

/* 2026-06-15 — blog template: remove 800px (max-w-prose) constraint for
   selected blocks so they expand to full article column. Tatyana. */
.single-post .article .dbcb-spec-card--list > div.max-w-shell,
.single-post .article .dbcb-concern-router .max-w-prose,
.single-post .article .dbcb-comparison .max-w-prose,
.single-post .article .dbcb-candidacy-section .max-w-prose,
.single-post .article .dbcb-candidacy,
.single-post .article .dbcb-alert-section .max-w-prose,
.single-post .article .dbcb-alert,
.single-post .article .dbcb-pull-quote-section .max-w-prose,
.single-post .article .dbcb-doctor-card .max-w-prose,
.single-post .article .dbcb-faq .max-w-prose,
.single-post .article .dbcb-references-section .max-w-prose,
.single-post .article .dbcb-blog-card .max-w-prose,
.single-post .article .dbcb-case-gallery .max-w-prose,
.single-post .article .dbcb-combinations .max-w-prose,
.single-post .article .dbcb-face-zone-explorer .max-w-prose,
.single-post .article .dbcb-feature .max-w-prose,
.single-post .article .dbcb-path-router .max-w-prose,
.single-post .article .dbcb-reviews-carousel .max-w-prose,
.single-post .article .dbcb-spec-card,
.single-post .article .dbcb-concern-router,
.single-post .article .dbcb-comparison,
.single-post .article .dbcb-candidacy-section,
.single-post .article .dbcb-alert-section,
.single-post .article .dbcb-pull-quote-section,
.single-post .article .dbcb-doctor-card,
.single-post .article .dbcb-faq,
.single-post .article .dbcb-references-section,
.single-post .article .dbcb-blog-card,
.single-post .article .dbcb-case-gallery,
.single-post .article .dbcb-combinations,
.single-post .article .dbcb-face-zone-explorer,
.single-post .article .dbcb-feature,
.single-post .article .dbcb-path-router,
.single-post .article .dbcb-reviews-carousel {
    max-width: none;
}

/* Citation number aligns to the first line of the reference text — the number's
   line-height is smaller than the paragraph's, so top-aligned it floated above
   the text. Baseline-align the flex row. Tanya 2026-06-26 */
.dbcb-references li { align-items: baseline; }

/* 2026-06-21 Tatyana — blog fixes: timeline + lists align to the article
   column (kill the 800px staircase); h3 matches the h2 Cormorant font. */
.single-post .article .dbcb-timeline {
    max-width: none !important;
    margin-left: 0;
    margin-right: 0;
}
.single-post .article > ul,
.single-post .article > ol,
.single-post .article > ul.wp-block-list,
.single-post .article > ol.wp-block-list,
.single-post .article > .wp-block-list {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
/* 2026-06-21 Tatyana — body h2/h3 inherit the EXACT feature-block heading
   styles (font/size/weight/line-height) for cross-block uniformity. */
.single-post .article > h2,
.single-post .article > h2.wp-block-heading {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 32px;
    line-height: 1.15;
    font-weight: 500;
    letter-spacing: -0.01em;
}
.single-post .article > h3,
.single-post .article > h3.wp-block-heading,
.single-post .article > h4 {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 24px;
    line-height: 1.25;
    font-weight: 500;
    letter-spacing: -0.005em;
}
@media (min-width: 992px) {
    .single-post .article > h2,
    .single-post .article > h2.wp-block-heading { font-size: 40px; line-height: 1.12; }
    .single-post .article > h3,
    .single-post .article > h3.wp-block-heading { font-size: 28px; }
}

/* 2026-06-21 Tatyana — body prose links need a visible color/underline. */
.single-post .article > p a,
.single-post .article > ul a,
.single-post .article > ol a,
.single-post .article > .wp-block-list a,
.single-post .article > blockquote a {
    color: #9e4a2a;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
.single-post .article > p a:hover,
.single-post .article > ul a:hover,
.single-post .article > ol a:hover,
.single-post .article > .wp-block-list a:hover,
.single-post .article > blockquote a:hover {
    color: #7a3820;
}

/* 2026-06-21 Tatyana — blog separator: soft brand line (not black) + spacing. */
.single-post .article .wp-block-separator,
.single-post .article hr {
    border: 0;
    border-top: 1px solid rgba(158, 74, 42, 0.3);
    background: transparent;
    height: 0;
    max-width: 800px;
    margin: 2rem 0;
    opacity: 1;
}



/* ========================================================================
   Tag (.tax-topics) template overrides — Tatyana 2026-06-16
   Тег страница использует injected audit content (post 4174) внутри
   `div.max-w-shell.mx-auto.px-5 lg:px-8 py-12 lg:py-16` обёртки.
   Поведение:
   - Body prose (p/h2/h3/etc) constrained 800px центрированы
   - bg-блоки (brand-cards, procedure-cards, hub-cta, severity-tier, visit-us)
     full-bleed до края viewport через `margin: 50% - 50vw` трюк
   - timeline steps / inline-cta / treatment-prices ограничены 800px
   ======================================================================== */

/* 1. Body prose constrained 800 (864 with padding lg:px-8) */
.tax-topics div.max-w-shell.mx-auto > p,
.tax-topics div.max-w-shell.mx-auto > h1,
.tax-topics div.max-w-shell.mx-auto > h2,
.tax-topics div.max-w-shell.mx-auto > h3,
.tax-topics div.max-w-shell.mx-auto > h4,
.tax-topics div.max-w-shell.mx-auto > ul,
.tax-topics div.max-w-shell.mx-auto > ol,
.tax-topics div.max-w-shell.mx-auto > blockquote,
.tax-topics div.max-w-shell.mx-auto > .wp-block-paragraph,
.tax-topics div.max-w-shell.mx-auto > .wp-block-heading,
.tax-topics div.max-w-shell.mx-auto > .wp-block-list {
    max-width: 864px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}
@media (min-width: 992px) {
    .tax-topics div.max-w-shell.mx-auto > p,
    .tax-topics div.max-w-shell.mx-auto > h1,
    .tax-topics div.max-w-shell.mx-auto > h2,
    .tax-topics div.max-w-shell.mx-auto > h3,
    .tax-topics div.max-w-shell.mx-auto > h4,
    .tax-topics div.max-w-shell.mx-auto > ul,
    .tax-topics div.max-w-shell.mx-auto > ol,
    .tax-topics div.max-w-shell.mx-auto > blockquote,
    .tax-topics div.max-w-shell.mx-auto > .wp-block-paragraph,
    .tax-topics div.max-w-shell.mx-auto > .wp-block-heading,
    .tax-topics div.max-w-shell.mx-auto > .wp-block-list {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* 2. Full-bleed bg-блоки (margin: 50% - 50vw трюк ломает constrain parent'a).
   For Pattern A (brand-cards, procedure-cards, hub-cta, visit-us) inner div
   max-w-shell mx-auto автоматически центрирует контент.
   For Pattern B (severity-tier) добавляем padding'и чтобы контент центрировался
   в max-w 1280 области даже когда секция растянута на 100vw. */
.tax-topics .dbcb-brand-cards,
.tax-topics .dbcb-procedure-cards,
.tax-topics .dbcb-hub-cta,
.tax-topics .dbcb-visit-us {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.tax-topics .dbcb-severity-tier {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: none;
    padding-left: max(1.25rem, calc((100vw - 1280px) / 2 + 1.25rem));
    padding-right: max(1.25rem, calc((100vw - 1280px) / 2 + 1.25rem));
}
@media (min-width: 992px) {
    .tax-topics .dbcb-severity-tier {
        padding-left: max(2rem, calc((100vw - 1280px) / 2 + 2rem));
        padding-right: max(2rem, calc((100vw - 1280px) / 2 + 2rem));
    }
}

/* 3. Narrow constrain (800) для отдельных блоков на tag template. */
.tax-topics .dbcb-timeline--steps,
.tax-topics .dbcb-inline-cta,
.tax-topics .dbcb-treatment-prices {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}


/* 2026-06-16 Tatyana — timeline milestones dot positioning.
   Tailwind JIT не пресобрал `lg:top-0` → direct CSS. Dot сидит на border-top
   каждого <li> (translate-y -50% центрирует на линии). */
@media (min-width: 992px) {
    .dbcb-timeline__milestone > span:first-child {
        top: 0;
        transform: translateY(-50%);
    }
}


/* ========================================================================
   .enhanced-type-tag (single-enhancedcategory with enhanced_type=tag) —
   mirror styling rules from .tax-topics so tag CPT pages match the look
   of the prior topics archive audit. 2026-06-16 Tatyana.
   ======================================================================== */

/* Body prose constrained 800 (864 with padding) */
.enhanced-type-tag .content-body > p,
.enhanced-type-tag .content-body > h1,
.enhanced-type-tag .content-body > h2,
.enhanced-type-tag .content-body > h3,
.enhanced-type-tag .content-body > h4,
.enhanced-type-tag .content-body > ul,
.enhanced-type-tag .content-body > ol,
.enhanced-type-tag .content-body > blockquote,
.enhanced-type-tag .content-body > .wp-block-paragraph,
.enhanced-type-tag .content-body > .wp-block-heading,
.enhanced-type-tag .content-body > .wp-block-list {
    max-width: 864px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

/* Tag template: headings fill the shell (1280) and align with the blocks like on hubs —
   override the 864 readable cap (kept for paragraphs/lists). Tanya 2026-06-25. */
.enhanced-type-tag .content-body > h1,
.enhanced-type-tag .content-body > h2,
.enhanced-type-tag .content-body > h3,
.enhanced-type-tag .content-body > h4,
.enhanced-type-tag .content-body > .wp-block-heading {
  max-width: 1280px;
}
@media (min-width: 992px) {
    .enhanced-type-tag .content-body > p,
    .enhanced-type-tag .content-body > h1,
    .enhanced-type-tag .content-body > h2,
    .enhanced-type-tag .content-body > h3,
    .enhanced-type-tag .content-body > h4,
    .enhanced-type-tag .content-body > ul,
    .enhanced-type-tag .content-body > ol,
    .enhanced-type-tag .content-body > blockquote,
    .enhanced-type-tag .content-body > .wp-block-paragraph,
    .enhanced-type-tag .content-body > .wp-block-heading,
    .enhanced-type-tag .content-body > .wp-block-list {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* Full-bleed bg-blocks via negative margin trick */
.enhanced-type-tag .dbcb-brand-cards,
.enhanced-type-tag .dbcb-procedure-cards,
.enhanced-type-tag .dbcb-hub-cta,
.enhanced-type-tag .dbcb-visit-us,
.enhanced-type-tag .dbcb-severity-tier {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}
/* severity-tier: same full-bleed as brand-cards (negative margin only); the inner
   max-w-shell div provides the single px padding — no extra section calc-padding
   (that double-padded content +20px = staircase). Tanya 2026-06-25. */

/* Narrow constrain (800) для отдельных блоков */
.enhanced-type-tag .dbcb-timeline--steps,
.enhanced-type-tag .dbcb-inline-cta,
.enhanced-type-tag .dbcb-treatment-prices {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* ============================================================
   Single-gallery (CPT=gallery) page layout overrides.
   Tatyana 2026-06-19.
   - Educational text inside the_content centered at 800px
   - dbcb/before-after-slider full shell width on gallery pages
   - Featured-cases (gallery mode) 3-col tablet, 4-col desktop
   ============================================================ */
.single-gallery .content-body {
    max-width: 100%;
    /* Vertical breathing room — match the hub section py-14 lg:py-20 cadence
       so the educational block doesn't butt up against the next section's
       background. */
    padding: 56px 0;
}
@media (min-width: 992px) {
    .single-gallery .content-body {
        padding: 80px 0;
    }
}
.single-gallery .content-body > p,
.single-gallery .content-body > h2:not([class*="dbcb-"]),
.single-gallery .content-body > h3:not([class*="dbcb-"]),
.single-gallery .content-body > h4:not([class*="dbcb-"]),
.single-gallery .content-body > ul,
.single-gallery .content-body > ol {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}
/* Featured-cases section: block CSS pins max-width to 800px (treatment-page
   default). On the gallery CPT we want the wider shell (1280px) so the 3-4 col
   grid has room to breathe. Higher specificity overrides the plugin rule. */
.single-gallery .dbcb-bna-slider {
    max-width: none;          /* let the bg span full-width */
    padding-top: 56px;
    padding-bottom: 56px;
    background: #faf6f3;       /* sand — matches bg-sand token */
    margin-block: 0;           /* remove the my-12 gap so bg connects to neighbors */
}
.single-gallery .dbcb-bna-slider > * {
    max-width: 1280px;
    margin-inline: auto;
    /* side padding so the slider title/subtitle/images don't touch the screen
       edge on mobile (inner wrapper had none). Tanya 2026-06-26. */
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}
@media (min-width: 992px) {
    .single-gallery .dbcb-bna-slider > * {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}
@media (min-width: 992px) {
    .single-gallery .dbcb-bna-slider {
        padding-top: 80px;
        padding-bottom: 80px;
    }
}
@media (min-width: 768px) {
    .single-gallery .dbcb-bna-slider[data-mode="gallery"] .dbcb-bna-stage {
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }
}
@media (min-width: 1280px) {
    .single-gallery .dbcb-bna-slider[data-mode="gallery"] .dbcb-bna-stage {
        grid-template-columns: repeat(4, 1fr);
    }
}
/* At-a-glance dl — desktop grid columns driven by inline --cols custom property
   (Tailwind JIT can't compile dynamic lg:grid-cols-N class names). */
@media (min-width: 992px) {
    .single-gallery section dl[style*="--cols"] {
        grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr));
    }
}
/* Hide BEFORE/AFTER corner chips in gallery mode on single-gallery pages —
   our composite source photos already carry script labels baked in, so the
   chips become redundant (and visually wrong on vertical composites where
   after sits BELOW before, not to the right). Tatyana 2026-06-19. */
.single-gallery .dbcb-bna-slider[data-mode="gallery"] .dbcb-bna-label-corner {
    display: none;
}

/* Restore numbers on ordered lists in content. Tailwind preflight resets
   ol/ul -> list-style:none; theme restores ul (disc) but missed ol (decimal),
   so numbered lists showed no numbers on the frontend. dbcb blocks use
   .list-none and are excluded. Tatyana 2026-06-20. */
ol.wp-block-list:not(.list-none) {
    list-style: decimal;
    padding-left: 1.5rem;
    margin-top: 16px;
}
ol.wp-block-list:not(.list-none) li { margin-bottom: 0.4rem; }
ol.wp-block-list:not(.list-none) ol { list-style: lower-alpha; }

/* 2026-06-23 — Tanya: treatment-prices procedure NAME bigger/heavier.
   Was text-h3 = 20px / weight 400. Make it medium 500 always, 24px on desktop. */
.dbcb-treatment-prices__name { font-weight: 500; }
@media (min-width: 992px) {
  .dbcb-treatment-prices__name { font-size: 24px; }
}

/* 2026-06-23 — Tanya: /price-list/ page (page-price.php) procedure NAMES bigger
   to match the treatment-prices block. Names are <a class="font-serif text-h3 ..">
   = 20px/400. Make medium 500 always, 24px on desktop. Scoped to the price page. */
.page-template-page-price-php a.font-serif.text-h3 { font-weight: 500; }
@media (min-width: 992px) {
  .page-template-page-price-php a.font-serif.text-h3 { font-size: 24px; }
}



/* Homepage gutter-CTA zone (2026-06-23): feature + banner left-align and fill
   the left column; CTA rides in the right column (sticky) and releases at the
   zone's end (the next wide block). */
@media (min-width: 992px) {
  .dbcb-home-gutter__main > .dbcb-feature,
  .dbcb-home-gutter__main > .dbcb-uy-banner {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }
  .dbcb-home-gutter__main .dbcb-feature > .max-w-prose { max-width: none; margin: 0; }
}

/* Hub gutter-CTA zone (2026-06-23): narrow blocks left-align + fill the left
   column; CTA rides in the sticky right column, releases at the next wide block. */
@media (min-width: 992px) {
  .single-enhancedcategory .dbcb-hub-gutter__main > section { max-width: none; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
  .single-enhancedcategory .dbcb-hub-gutter__main .max-w-prose,
  .single-enhancedcategory .dbcb-hub-gutter__main .max-w-shell { max-width: none; margin-left: 0; margin-right: auto; }
  /* zero the gutter side-padding ONLY on plain wrappers — NOT on colored/padded
     cards (bg-* / p-N) which need their own inner padding. (Tanya 2026-06-24) */
  .single-enhancedcategory .dbcb-hub-gutter__main .max-w-prose:not([class*="bg-"]):not([class*="p-"]),
  .single-enhancedcategory .dbcb-hub-gutter__main .max-w-shell:not([class*="bg-"]):not([class*="p-"]) { padding-left: 0; padding-right: 0; }
}

/* Gutter-CTA zones: re-apply standalone-heading typography to wrapped headings.
   Inside __main a heading is no longer a direct child of .content-body, so the
   `.content-body > hN { font-family: Cormorant }` rule stopped matching and the
   heading fell back to default sans. Re-apply it. (Card<->content alignment is
   done in JS — functions.php — WITHOUT stripping content margins, so the hero
   gap and bottom spacing are preserved.) */
.dbcb-home-gutter__main > :is(h1,h2,h3,h4,h5,h6),
.dbcb-hub-gutter__main  > :is(h1,h2,h3,h4,h5,h6) {
  font-family: "Cormorant Garamond", Georgia, serif;
  color: #2d2419;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  line-height: 1.15;
}

/* Hub content top spacing from hero (Tanya: min 3.5rem). content-body had no
   top padding → only the first heading's 1.5rem margin showed. Add padding so
   the gap is ~3.5rem (2rem padding + 1.5rem heading margin). */
/* Hub hero->content: standard gap 40 (mobile) / 56 (desktop) = py-10 lg:py-14.
   The top zone's first block margin is zeroed (CSS below + JS) so the gap equals
   this padding exactly, and the sticky CTA aligns to the same edge. */
.single-enhancedcategory .content-body { padding-top: 3.5rem; }
@media (min-width: 992px) { .single-enhancedcategory .content-body { padding-top: 5rem; } }
.single-enhancedcategory .content-body > .dbcb-hub-gutter:first-child .dbcb-hub-gutter__main > :first-child { margin-top: 0; }

/* ============================================================
   Review cards (2026-06-23, Tanya): fixed compact height with a
   scrollable quote; click opens a centered full-review modal with
   prev/next arrows to page through all reviews on the page.
   ============================================================ */
.dbcb-rev-card { height: 200px; display: flex; flex-direction: column; cursor: pointer; }
.dbcb-rev-card .dbcb-rev-quote {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding-right: 8px;
  scrollbar-width: thin; scrollbar-color: rgba(158,74,42,.35) transparent;
}
.dbcb-rev-card .dbcb-rev-quote::-webkit-scrollbar { width: 5px; }
.dbcb-rev-card .dbcb-rev-quote::-webkit-scrollbar-track { background: transparent; }
.dbcb-rev-card .dbcb-rev-quote::-webkit-scrollbar-thumb { background: rgba(158,74,42,.32); border-radius: 4px; }
.dbcb-rev-card:focus-visible { outline: 2px solid #9e4a2a; outline-offset: 2px; }

.dbcb-rev-modal { position: fixed; inset: 0; z-index: 90; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(45,36,25,.62); }
.dbcb-rev-modal.is-open { display: flex; }
.dbcb-rev-modal__card { position: relative; background: #fff; border-radius: 18px; width: 100%; max-width: 520px; max-height: 82vh; overflow-y: auto; padding: 48px 44px 40px; box-shadow: 0 24px 64px rgba(45,36,25,.28); }
.dbcb-rev-modal__stars { display: flex; gap: 3px; color: #9e4a2a; margin-bottom: 18px; }
.dbcb-rev-modal__quote { font-family: "Cormorant Garamond", Georgia, serif; font-size: 26px; line-height: 1.4; color: #2d2419; margin: 0; text-wrap: pretty; }
.dbcb-rev-modal__cite { font-size: 15px; color: #6b4a3a; margin-top: 20px; }
.dbcb-rev-modal__src { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; color: #9e4a2a; font-weight: 600; font-size: 15px; text-decoration: none; }
.dbcb-rev-modal__src:hover { color: #5a2917; }
.dbcb-rev-modal__count { position: absolute; bottom: 16px; right: 20px; font-size: 13px; color: #b09a8a; letter-spacing: .04em; }
.dbcb-rev-modal__close { position: absolute; top: 12px; right: 14px; width: 36px; height: 36px; border: 0; background: transparent; color: #6b4a3a; font-size: 26px; line-height: 1; cursor: pointer; border-radius: 50%; }
.dbcb-rev-modal__close:hover { background: #faf0ec; color: #5a2917; }
.dbcb-rev-modal__nav { position: absolute; z-index: 99; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; border: 0; background: #fff; color: #9e4a2a; font-size: 26px; line-height: 1; cursor: pointer; box-shadow: 0 6px 18px rgba(45,36,25,.22); display: flex; align-items: center; justify-content: center; }
.dbcb-rev-modal__nav:hover { background: #faf0ec; }
.dbcb-rev-modal__nav--prev { left: max(12px, calc(50% - 310px)); }
.dbcb-rev-modal__nav--next { right: max(12px, calc(50% - 310px)); }
@media (max-width: 640px) {
  .dbcb-rev-modal__nav--prev { left: 8px; } .dbcb-rev-modal__nav--next { right: 8px; }
  .dbcb-rev-modal__card { padding: 44px 22px 38px; }
}

/* Gutter zone: 3rem gap before the next section (Tanya). The CTA release is
   handled in JS (last block's bottom margin zeroed → CTA stops at content end);
   this margin sits on the wrapper, OUTSIDE the grid, so it doesn't extend the
   sticky column. */

/* ============================================================
   Gutter banner (2026-06-24) — UnveilYou cross-promo under the sticky CTA.
   Solid rosé-beige card (no photo), content-driven height. Secondary CTA.
   ============================================================ */
.gutter-banner { display: block; width: 100%; margin-top: 1rem; border-radius: 12px; background: linear-gradient(140deg, #fae8e5 0%, #f8efe8 100%); box-shadow: 0 6px 20px rgba(45,36,25,.08); }
.gutter-banner__content { display: flex; flex-direction: column; align-items: flex-start; padding: 24px 22px; }
.gutter-banner__pill { display: inline-flex; align-items: center; background: #5f6b4a; color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; }
.gutter-banner__title { font-family: "Cormorant Garamond", Georgia, serif; font-size: 26px; line-height: 1.1; color: #2d2419; font-weight: 600; margin-top: 14px; letter-spacing: -.01em; text-wrap: balance; }
.gutter-banner__title em { font-style: italic; color: #5f6b4a; }
.gutter-banner__sub { color: #5a4a3a; font-size: 13px; line-height: 1.5; margin: 10px 0 0; }
.gutter-banner__cta { margin-top: 18px; display: inline-flex; align-items: center; gap: 7px; background: transparent; border: 1.5px solid #5f6b4a; color: #3f4733; font-weight: 600; font-size: 13px; padding: 9px 16px; border-radius: 10px; text-decoration: none; transition: background-color .15s ease, color .15s ease; }
.gutter-banner__cta:hover { background: #5f6b4a; color: #fff; }

/* Gutter banner watermark (2026-06-24, Tanya): olive UnveilYou logo, top-right,
   semi-transparent. + content above it. */
.gutter-banner { position: relative; overflow: hidden; border: 1px solid rgba(95,107,74,.16); }
.gutter-banner__content { position: relative; z-index: 1; }
.gutter-banner__wm { position: absolute; top: 10px; right: 10px; height: calc(100% - 20px); width: auto; opacity: .2; pointer-events: none; z-index: 0; }

/* Gutter aside (CTA + banner) visibility: hubs & home from 992px (lg);
   treatment stays 1200px (its content column is fixed 800px). */
.dbcb-gutter-aside { display: none; }
@media (min-width: 992px) {
  .dbcb-home-gutter .dbcb-gutter-aside,
  .dbcb-hub-gutter  .dbcb-gutter-aside,
  .single-treatment .dbcb-gutter-aside { display: block; }
}

/* Gutter banner — STRIP variant (<992px): circle logo · text · CTA, ~88px.
   Hidden ≥992 (the card shows in the gutter instead). (2026-06-24, Tanya) */
.dbcb-banner-strip { display: block; margin: 3rem 0; }
@media (min-width: 992px) { .dbcb-banner-strip { display: none; } }
.dbcb-banner-strip__card { display: flex; align-items: center; gap: 18px; background: linear-gradient(140deg, #fae8e5 0%, #f8efe8 100%); border: 1px solid rgba(95,107,74,.16); border-radius: 16px; padding: 14px 18px; min-height: 88px; }
.dbcb-banner-strip__logo { width: 64px; height: 64px; flex-shrink: 0; display: block; }
.dbcb-banner-strip__text { flex: 1 1 auto; min-width: 0; text-align: center; }
.dbcb-banner-strip__title { display: block; font-family: "Cormorant Garamond", Georgia, serif; font-size: 20px; line-height: 1.15; color: #2d2419; font-weight: 600; }
.dbcb-banner-strip__title em { font-style: italic; color: #5f6b4a; }
.dbcb-banner-strip__sub { display: block; font-size: 12.5px; line-height: 1.4; color: #5a4a3a; margin-top: 3px; }
.dbcb-banner-strip__cta { flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px; background: transparent; border: 1.5px solid #5f6b4a; color: #3f4733; font-weight: 600; font-size: 13px; padding: 9px 16px; border-radius: 10px; text-decoration: none; transition: background-color .15s ease, color .15s ease; }
.dbcb-banner-strip__cta:hover { background: #5f6b4a; color: #fff; }
@media (max-width: 600px) {
  .dbcb-banner-strip__card { flex-wrap: wrap; justify-content: center; }
  .dbcb-banner-strip__text { flex-basis: 100%; order: 2; margin: 4px 0; }
  .dbcb-banner-strip__cta { order: 3; }
}

/* ============================================================
   VERTICAL RHYTHM (2026-06-24, Tanya): one token for the gap between all
   sections — 48px (mobile) / 64px (desktop ≥1024). dbcb blocks use my-12 (48)
   by default; desktop bumps to 64. Keeps every section gap equal.
   ============================================================ */
@media (min-width: 992px) {
  [class*="dbcb-"].my-12 { margin-top: 4rem; margin-bottom: 4rem; }
}
/* gutter zones + strip follow the same rhythm */
.dbcb-home-gutter, .dbcb-hub-gutter, .dbcb-banner-strip { margin-top: 3rem; margin-bottom: 3rem; }
@media (min-width: 992px) {
  .dbcb-home-gutter, .dbcb-hub-gutter, .dbcb-banner-strip { margin-top: 4rem; margin-bottom: 4rem; }
}
/* bg blocks (colored bands): internal padding = the rhythm so the colored
   band's edge sits the same distance as the gap that follows (balanced boundary). */
@media (min-width: 992px) {
  .dbcb-hub-cta > div.max-w-shell,
  .dbcb-visit-us > div.max-w-shell { padding-top: 4rem; padding-bottom: 4rem; }
}

/* Treatment: align the content's first block with the sticky CTA card top.
   The first heading's margin-top collapses out through the group/article,
   pushing content ~48px below the card. Zero it (the py-14 grid padding still
   gives the hero→content gap). (2026-06-24, Tanya) */
.single-treatment .content-body { display: flow-root; }
.single-treatment .content-body > p:empty { display: none; }
.single-treatment .content-body > *:first-child,
.single-treatment .content-body > p:empty + *,
.single-treatment .content-body > *:first-child > *:first-child,
.single-treatment .content-body > p:empty + * > *:first-child { margin-top: 0; }

/* Hub: the FIRST gutter zone sits right under the hero — the content-body
   padding-top already provides the hero→content gap, so don't ALSO add the
   rhythm margin-top (was doubling to ~120px). (2026-06-24, Tanya) */
.single-enhancedcategory .content-body > .dbcb-hub-gutter:first-child { margin-top: 0; }

/* Inline content links (prose) — same style as dbcb block links (Tanya 2026-06-24) */
.content-body p a:not([class*="text-"]):not([class*="inline-flex"]):not([class*="bg-"]):not([class*="font-"]),
.content-body li a:not([class*="text-"]):not([class*="inline-flex"]):not([class*="bg-"]):not([class*="font-"]),
.content-body dd a:not([class*="text-"]):not([class*="inline-flex"]):not([class*="bg-"]) {
  color: #9e4a2a; font-weight: 500; text-decoration: underline; text-underline-offset: 2px;
}
.content-body p a:not([class*="text-"]):not([class*="inline-flex"]):not([class*="bg-"]):not([class*="font-"]):hover,
.content-body li a:not([class*="text-"]):not([class*="inline-flex"]):not([class*="bg-"]):not([class*="font-"]):hover,
.content-body dd a:not([class*="text-"]):not([class*="inline-flex"]):not([class*="bg-"]):hover { color: #5a2917; }

/* Standfirst / lead line under a section H2 (italic Cormorant, terracotta).
   Add class "db-hero-tagline" to a paragraph — no inline styles needed.
   (Tanya 2026-06-24) */
.db-hero-tagline,
.content-body .db-hero-tagline {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 24px;
  line-height: 1.3;
  color: #a8654d;
  max-width: 800px;
  margin-top: 8px;
  margin-bottom: 0.75rem;
}

/* Mobile: narrow card blocks inside the gutter __main already get the page
   gutter from __main — their own px-5 double-pads (content was inset ~56px vs
   ~20px on full-bleed blocks = staircase). Drop the redundant side padding so
   the card fills the column (its inner p-4 keeps card padding). (Tanya 2026-06-24) */
@media (max-width: 991px) {
  .dbcb-hub-gutter__main .dbcb-spec-card,
  .dbcb-hub-gutter__main .dbcb-faq,
  .dbcb-hub-gutter__main .dbcb-references-section { padding-left: 0; padding-right: 0; }
}

/* Treatment: the content grid is `grid lg:grid-cols-[1fr_340px]` — on mobile it
   has no explicit columns, so the implicit auto column grew to the content's
   max-content (~896px) → horizontal overflow. Force block flow below lg so the
   content fills the viewport. Grid (2-col with CTA gutter) resumes at ≥992.
   (2026-06-24) */
@media (max-width: 991px) {
  .single-treatment .grid:has(> .content-body) { display: block; }
}

/* Hub: left-align standalone block sections' inner prose to the shell content
   edge (matches the gutter __main left). They were max-w-prose mx-auto =
   centered. New convention: everything flush-left. (Tanya 2026-06-24) */
@media (min-width: 992px) {
  .single-enhancedcategory .content-body > [class*="dbcb-"] .max-w-shell.mx-auto > .max-w-prose.mx-auto {
    margin-left: 0; margin-right: auto;
  }
}

/* Raw intro paragraphs in the gutter __main had no spacing (Tailwind resets <p>
   margins) → consecutive paragraphs stuck together. Add reading spacing.
   (Tanya 2026-06-24) */
.single-enhancedcategory .dbcb-hub-gutter__main > p + p,
.single-enhancedcategory .dbcb-hub-gutter__main > p + ul,
.single-enhancedcategory .dbcb-hub-gutter__main > ul + p { margin-top: 1rem; }

/* Hero→content double gap: content-body already has top padding for the hero
   gap; the first content block's own margin-top added on top (e.g. H2 48px →
   128 total). Zero it so the gap = content-body padding only. Covers non-gutter
   hubs too (gutter pages: first zone already handled). (Tanya 2026-06-24) */
.single-enhancedcategory .content-body > :first-child:not(.dbcb-section-nav) { margin-top: 0; }
.single-enhancedcategory .content-body > .dbcb-section-nav:first-child { margin-top: 0; margin-bottom: 0; }
.single-enhancedcategory .content-body > .dbcb-section-nav:first-child + * { margin-top: 0; }

/* Divider ::after drop before bg block — also when anchor <div> / comment <p>
   sit between the divider block and the bg section (1–2 intervening elements).
   (Tanya 2026-06-24) */
.dbcb-concern-router:has(+ * + section[class*="bg-"]:not([class*="bg-white"]))::after,
.dbcb-comparison:has(+ * + section[class*="bg-"]:not([class*="bg-white"]))::after,
.dbcb-face-zone-explorer:has(+ * + section[class*="bg-"]:not([class*="bg-white"]))::after,
.dbcb-path-router:has(+ * + section[class*="bg-"]:not([class*="bg-white"]))::after,
.dbcb-concern-router:has(+ * + * + section[class*="bg-"]:not([class*="bg-white"]))::after,
.dbcb-comparison:has(+ * + * + section[class*="bg-"]:not([class*="bg-white"]))::after,
.dbcb-face-zone-explorer:has(+ * + * + section[class*="bg-"]:not([class*="bg-white"]))::after,
.dbcb-path-router:has(+ * + * + section[class*="bg-"]:not([class*="bg-white"]))::after {
  display: none;
}

/* Left-align block inners (max-w-prose mx-auto = 800px centered) to the content
   column edge. In a constrained column (treatment grid / hub gutter) they
   centered → ~14px stagger vs headings/max-w-shell blocks. (Tanya 2026-06-24) */
@media (min-width: 992px) {
  .single-treatment .content-body .max-w-prose.mx-auto,
  .single-enhancedcategory .content-body .max-w-prose.mx-auto { margin-left: 0; margin-right: auto; }
}

/* Treatment: the content lives in the 1fr gutter column with the sticky CTA in
   the right column, so a full-bleed colored band can't cleanly span edge-to-edge
   (it gets cut at the CTA gutter). Per Tanya 2026-06-24: drop the colored bg on
   treatment for the light bands (cards keep their own borders). Dark bands
   (bg-primary-deep, white text) are left intact. */
.single-treatment article.content-body > section.bg-sand,
.single-treatment article.content-body > section.bg-cream,
.single-treatment article.content-body > section.bg-bloom-pink,
.single-treatment article.content-body > section.bg-primary-soft {
  background-color: transparent;
}

/* Treatment: cards lost the colored-band contrast (bg removed) → give them a
   soft elevation so they hold form on white. (Tanya 2026-06-24) */
.single-treatment .dbcb-brand-card,
.single-treatment .dbcb-procedure-card {
  background-color: rgb(250, 246, 243); /* sand — tint cards (no section band) Tanya 2026-06-24 */
  box-shadow: 0 1px 2px rgba(45, 36, 25, .04), 0 6px 18px rgba(45, 36, 25, .06);
}

/* Treatment: brand-cards / procedure-cards were full-bleed (neg-margin breakout)
   — with the colored bg gone, their full-width border-b ran under the CTA gutter.
   Keep them in the content column so the divider + cards stay aligned. (Tanya 2026-06-24) */


/* Treatment: drop the 800px prose cap inside the content column — the gutter
   column (828px) already constrains width, and the 800 cap left a ~28px gap on
   the right (comparison-table etc. = right-side stagger). Fill the column. (Tanya 2026-06-24) */
@media (min-width: 992px) {
  .single-treatment .content-body .max-w-prose { max-width: none; }
}
/* Card definition on treatment (bg bands removed): sand tint + soft shadow.
   brand-card done earlier; add procedure-cards' card links + the candidacy card. */
/* procedure-cards (has a photo) + face-zone-explorer: NO sand fill — only border
   + shadow. (Tanya 2026-06-24) */
.single-treatment .dbcb-procedure-cards a.flex-col,
.single-treatment .dbcb-face-zone-explorer__row {
  box-shadow: 0 1px 2px rgba(45, 36, 25, .04), 0 6px 18px rgba(45, 36, 25, .06);
}
.single-treatment .dbcb-candidacy {
  box-shadow: 0 1px 2px rgba(45, 36, 25, .04), 0 6px 18px rgba(45, 36, 25, .06);
}

/* Treatment: unify all card-type blocks to the same look (sand + soft shadow) so
   they match brand-cards / procedure-cards. (Tanya 2026-06-24) */
.single-treatment .dbcb-concern-router__card,
.single-treatment .dbcb-severity-tier__card,
.single-treatment .dbcb-path-router__card,
.single-treatment .dbcb-combinations:not(.bg-sand) .group.block {
  background-color: rgb(250, 246, 243);
  box-shadow: 0 1px 2px rgba(45, 36, 25, .04), 0 6px 18px rgba(45, 36, 25, .06);
}

/* Typography pass (Tanya 2026-06-24): text-h3 → 24px on desktop (PC) sitewide.
   Was 20px base; now matches text-h3-lg (24/1.3/-.005em) on ≥1024. Mobile stays 20px.
   Affects all plain `text-h3` (doctor-card name, faq question, card h3, etc.). */
@media (min-width: 992px) {
  .text-h3 { font-size: 24px; line-height: 1.3; letter-spacing: -0.005em; }
}

/* Treatment: unify the bottom divider across wide content blocks — all use the
   same spaced ::after as concern-router / comparison / face-zone / path-router.
   The border-b on brand-cards / procedure-cards / trust-strip looked stuck to the
   grid edge. Scoped to treatment (page-template colored bands keep their border-b).
   Tanya 2026-06-24. */
.single-treatment .dbcb-brand-cards,
.single-treatment .dbcb-procedure-cards,
.single-treatment .dbcb-trust-strip { border-bottom: none; }
.single-treatment .dbcb-brand-cards::after,
.single-treatment .dbcb-procedure-cards::after,
.single-treatment .dbcb-severity-tier::after,
.single-treatment .dbcb-combinations::after,
.single-treatment .dbcb-trust-strip::after,
.single-treatment .dbcb-bna-slider::after,
.single-treatment .dbcb-blog-card::after,
.single-treatment .dbcb-case-gallery::after {
  content: ''; display: block; height: 1px;
  background: rgb(229, 226, 217);
  margin: 3rem 1.25rem 0;
}
@media (min-width: 992px) {
  .single-treatment .dbcb-brand-cards::after,
  .single-treatment .dbcb-procedure-cards::after,
  .single-treatment .dbcb-severity-tier::after,
  .single-treatment .dbcb-combinations::after,
  .single-treatment .dbcb-trust-strip::after,
  .single-treatment .dbcb-bna-slider::after,
  .single-treatment .dbcb-blog-card::after,
  .single-treatment .dbcb-case-gallery::after { margin: 4rem 2rem 0; }
}

/* Treatment: bg bands are removed in the gutter column, so the ":has(+ section.bg-*)"
   rules that DROP the divider before a colored band wrongly hide it — the next block
   still carries its bg-* class but renders no band. Always show the divider here.
   (Tanya 2026-06-24 — concern-router line went missing after wide-blocks regroup.) */
.single-treatment article.content-body .dbcb-concern-router::after,
.single-treatment article.content-body .dbcb-face-zone-explorer::after,
.single-treatment article.content-body .dbcb-path-router::after {
  display: block !important;
}


/* comparison-table is an in-text block (flows with body copy), NOT a wide section —
   no bottom divider, paragraph-like spacing so it doesn't cut off the next paragraph.
   Tanya 2026-06-24. */
[class*="dbcb-"].dbcb-comparison.my-12 { margin-top: 1rem; margin-bottom: 1rem; }

/* Container-aware card grids (Tanya 2026-06-24): cards size to the CONTENT column
   width via auto-fit, NOT the viewport — so they never cram when the sticky-CTA
   gutter narrows the column at lg(992). The `cols` choice = the cap (max columns);
   a narrow column shows fewer. --card-min keeps cards readable. */
.dbcb-cardgrid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(max(var(--card-min, 220px), calc((100% - (var(--cols, 4) - 1) * 1.5rem) / var(--cols, 4))), 1fr));
}

/* timeline milestones: show the connecting top-line + dot at ALL sizes (was lg-only
   → disappeared ≤991 once milestones became multi-col via cardgrid). Targets the
   stable __milestone class so it doesn't depend on Tailwind lg: classes. Tanya 2026-06-24. */
.dbcb-timeline--milestones .dbcb-timeline__milestone,
.dbcb-timeline:not(.dbcb-timeline--steps):not(.dbcb-timeline--numbered) .dbcb-timeline__milestone {
  position: relative;
  border-top: 1px solid rgb(229, 226, 217);
  padding-top: 2rem;
}
.dbcb-timeline__milestone > span[aria-hidden="true"] {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-50%);
  box-shadow: 0 0 0 4px rgb(250, 246, 243);
}

/* home-hero: text+photo 2-col from md(768) per Tanya 2026-06-24 (arbitrary grid ratio, was lg 992). */
@media (min-width: 768px) { .dbcb-hh-grid { grid-template-columns: 1.05fr 0.95fr; } }

/* doctor-card: center photo + text on small screens (like the banner). Tanya 2026-06-24. */
@media (max-width: 480px) {
  .dbcb-doctor-card__strip { flex-direction: column; align-items: center; text-align: center; }
}

/* Hub: left-align ALL content-body narrow content outside the gutter zones (section
   labels, headings, paragraphs) — pin to the shell left edge (matches gutter content
   at L32) instead of centering at max-width. Tanya 2026-06-25 "всё к левому краю". */
@media (min-width: 992px) {
  .single-enhancedcategory .content-body > .wp-block-heading,
  .single-enhancedcategory .content-body > .wp-block-paragraph,
  .single-enhancedcategory .content-body > .wp-block-list,
  .single-enhancedcategory .content-body > .wp-block-quote,
  .single-enhancedcategory .content-body > figure {
    margin-left: auto;
    margin-right: auto;
  }
}

/* Hub: card blocks WITHOUT a section bg get the treatment card look (sand tint + soft
   shadow). With a sand band the cards stay plain for contrast. Tanya 2026-06-25
   "на треатмент карточки bg-sand — тут так же, когда фона нет". */
.single-enhancedcategory .dbcb-concern-router:not(.bg-sand) .dbcb-concern-router__card,
.single-enhancedcategory .dbcb-path-router:not(.bg-sand) .dbcb-path-router__card,
.single-enhancedcategory .dbcb-severity-tier:not(.bg-sand) .dbcb-severity-tier__card,
.single-enhancedcategory .dbcb-brand-cards:not(.bg-sand) .dbcb-brand-card,
.single-enhancedcategory .dbcb-combinations:not(.bg-sand) .group.block {
  background-color: rgb(250, 246, 243);
  box-shadow: 0 1px 2px rgba(45, 36, 25, .04), 0 6px 18px rgba(45, 36, 25, .06);
}
/* procedure-cards (has a photo) + face-zone-explorer: shadow only, no sand */
.single-enhancedcategory .dbcb-procedure-cards:not(.bg-sand) a.flex-col,
.single-enhancedcategory .dbcb-face-zone-explorer .dbcb-face-zone-explorer__row {
  box-shadow: 0 1px 2px rgba(45, 36, 25, .04), 0 6px 18px rgba(45, 36, 25, .06);
}


/* Hub: procedure-cards (no section bg) — tint the cards sand too (Tanya 2026-06-25
   "не прокрасил в bg-sand"). Shadow already applied above. */

/* Hub: blog-card + case-gallery — fixed 4-column grid at the largest size so each card
   is 1/4 width and does NOT stretch (2 cards = 2 cols + 50% empty; 3 cards = 3/4).
   Tanya 2026-06-25. */
@media (min-width: 1200px) {
  .single-enhancedcategory .dbcb-case-gallery .dbcb-cardgrid { grid-template-columns: repeat(4, 1fr); }
}

/* path-router cards: push the bottom link to the card's bottom edge so links align
   across cards of different heights (grid stretches cards equal-height). Tanya 2026-06-25. */
.dbcb-path-router__card { display: flex; flex-direction: column; }
.dbcb-path-router__card > a { margin-top: auto; }

/* Hub: left-align content-body narrow content at ALL widths (was ≥992 only → at 864-991
   headings re-centered while band content stayed left = staircase @991). Base = mobile
   shell padding 1.25rem; ≥992 = lg padding 2rem (matches band px-5 lg:px-8). Tanya 2026-06-25. */
.single-enhancedcategory .content-body > .wp-block-heading,
.single-enhancedcategory .content-body > .wp-block-paragraph,
.single-enhancedcategory .content-body > .wp-block-list,
.single-enhancedcategory .content-body > .wp-block-quote,
.single-enhancedcategory .content-body > figure {
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 992px) {
  .single-enhancedcategory .content-body > .wp-block-heading,
  .single-enhancedcategory .content-body > .wp-block-paragraph,
  .single-enhancedcategory .content-body > .wp-block-list,
  .single-enhancedcategory .content-body > .wp-block-quote,
  .single-enhancedcategory .content-body > figure {
    margin-left: auto;
  }
}

/* blog-card grid (all templates): 2 cols ≤767, 3 cols ≥768, 4 cols ≥1200. Tanya 2026-06-25. */
.dbcb-blog-card .dbcb-cardgrid { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) {
  .dbcb-blog-card .dbcb-cardgrid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1200px) {
  .dbcb-blog-card .dbcb-cardgrid { grid-template-columns: repeat(4, 1fr); }
}

/* Hub gutter: narrow blocks inside __main carry their OWN max-w-shell + px-5 lg:px-8
   on top of the gutter wrapper's padding → double padding = staircase (procedure-steps,
   feature, before-after, comparison-table, etc. "торчат" vs the labels). Neutralize their
   shell wrapper so they align at the column edge (gutter provides the padding). !important
   beats the bna-slider's own !important edge-padding rule. Tanya 2026-06-25. */
.single-enhancedcategory .dbcb-hub-gutter__main > [class*="dbcb-"] {
  margin-left: 0;
  margin-right: auto;
}
.single-enhancedcategory .dbcb-hub-gutter__main > [class*="dbcb-"]:not([class*="bg-"]) {
  padding-left: 0;
  padding-right: 0;
}

/* Hub gutter: also left-align nested width wrappers (max-w-prose / max-w-shell) inside
   __main — blocks like candidacy/alert/doctor-card/spec-card/inline-cta center their inner
   content (mx-auto) → offset vs the column edge. Left-align them too. Tanya 2026-06-25. */
.single-enhancedcategory .dbcb-hub-gutter__main .max-w-shell,
.single-enhancedcategory .dbcb-hub-gutter__main .max-w-prose {
  margin-left: 0;
  margin-right: auto;
}
.single-enhancedcategory .dbcb-hub-gutter__main .max-w-shell:not([class*="bg-"]),
.single-enhancedcategory .dbcb-hub-gutter__main .max-w-prose:not([class*="bg-"]) {
  padding-left: 0;
  padding-right: 0;
}
/* bg-white blocks (e.g. comparison-table) are NOT colored bands → strip their px too so
   they align at the column edge. Colored-bg cards keep their inner padding. Tanya 2026-06-25. */
.single-enhancedcategory .dbcb-hub-gutter__main > .bg-white {
  padding-left: 0;
  padding-right: 0;
}


/* ============================================================================
   CANON (Tanya 2026-06-25): card-grid blocks — when the section has NO colored band,
   tint every card sand + soft shadow, UNIFORMLY across all templates (hub/blog/page/
   treatment). With a colored band (bg-sand/etc.) the cards stay plain for contrast.
   High specificity (the :not chain) intentionally overrides the older per-template rules.
   ============================================================================ */
.dbcb-brand-cards:not(.bg-sand):not(.bg-bloom-pink):not(.bg-primary-soft):not(.bg-cream) .dbcb-brand-card,
.dbcb-concern-router:not(.bg-sand):not(.bg-bloom-pink):not(.bg-primary-soft):not(.bg-cream) .dbcb-concern-router__card,
.dbcb-severity-tier:not(.bg-sand):not(.bg-bloom-pink):not(.bg-primary-soft):not(.bg-cream) .dbcb-severity-tier__card,
.dbcb-path-router:not(.bg-sand):not(.bg-bloom-pink):not(.bg-primary-soft):not(.bg-cream) .dbcb-path-router__card,
.dbcb-combinations:not(.bg-sand):not(.bg-bloom-pink):not(.bg-primary-soft):not(.bg-cream) .group.block {
  background-color: rgb(250, 246, 243);
  box-shadow: 0 1px 2px rgba(45, 36, 25, .04), 0 6px 18px rgba(45, 36, 25, .06);
}
/* procedure-cards + face-zone-explorer: cards stay WHITE (they carry a photo) — shadow
   only, NO sand. Uniform across templates. Tanya 2026-06-25. */
.dbcb-procedure-cards:not(.bg-sand):not(.bg-bloom-pink):not(.bg-primary-soft):not(.bg-cream) a.flex-col,
.dbcb-face-zone-explorer .dbcb-face-zone-explorer__row {
  box-shadow: 0 1px 2px rgba(45, 36, 25, .04), 0 6px 18px rgba(45, 36, 25, .06);
}

/* trust-strip responsive (Tanya 2026-06-25): tablet/mobile (≤991) keep the logos in ONE
   row — a 5-col grid where logos scale to fit — all the way down to 500px; at ≤500px switch
   to a 3-col grid so they wrap into exactly 2 rows (3+2). Desktop (≥992) keeps the original
   left-packed flex row, untouched. */
@media (max-width: 991px) {
  .dbcb-trust-strip .flex.flex-wrap {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    justify-items: center;
    align-items: center;
    gap: 1rem;
  }
  .dbcb-trust-strip .flex.flex-wrap img { max-width: 100%; object-fit: contain; }
}
@media (max-width: 500px) {
  .dbcb-trust-strip .flex.flex-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .dbcb-trust-strip .flex.flex-wrap > * { flex: 0 0 calc(33.333% - 1rem); text-align: center; }
}

/* case-gallery (card mode): the "see all" link lives in the header row (right) on ≥600;
   the bottom link is the mobile-only fallback. Tanya 2026-06-25. */
@media (min-width: 600px) { .dbcb-case-gallery__foot-link { display: none; } }

/* Home cases/blog strips: show 3 per row at 992-1199 (hide the 4th), 4 at ≥1200. Tanya 2026-06-25. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .dbcb-home-cases-grid > :nth-child(4),
  .dbcb-home-blog-grid > :nth-child(4) { display: none; }
}

/* UnveilYou gutter banner — per-page background presets (ACF uy_bg). Tanya 2026-06-25 */
.gutter-banner--bg-cream{background:#FFF6F4}
.gutter-banner--bg-pink{background:linear-gradient(140deg,#fae8e5 0%,#f8efe8 100%)}
.gutter-banner--bg-sand{background:#FAF6F3}
.gutter-banner--bg-olive{background:#E8ECE0}
.gutter-banner--bg-white{background:#FFFFFF}
.dbcb-banner-strip--bg-cream .dbcb-banner-strip__card{background:#FFF6F4}
.dbcb-banner-strip--bg-pink .dbcb-banner-strip__card{background:linear-gradient(140deg,#fae8e5 0%,#f8efe8 100%)}
.dbcb-banner-strip--bg-sand .dbcb-banner-strip__card{background:#FAF6F3}
.dbcb-banner-strip--bg-olive .dbcb-banner-strip__card{background:#E8ECE0}
.dbcb-banner-strip--bg-white .dbcb-banner-strip__card{background:#FFFFFF}

/* trust-strip: eyebrow beside logos from 768px (md:flex-row not in prebuilt CSS). Tanya 2026-06-25 */
@media (min-width: 768px) { .dbcb-trust-strip .flex.flex-col { flex-direction: row; align-items: center; } }

/* blog-card on treatment: 3 per row (narrow gutter column can't fit 4). Tanya 2026-06-25 */
@media (min-width: 768px) {
  .single-treatment .dbcb-blog-card .dbcb-cardgrid { grid-template-columns: repeat(3, 1fr); }
}

/* Blog uses the .article wrapper (not .content-body), so the src "heading hugs its
   dbcb block" 24px rule missed it → heading→block gap was 64 on blog vs 24 on
   treatment/hub. Replicate the tightening for .article so it matches. Tanya 2026-06-25 */
.single-post .article h2.wp-block-heading + section[class*="dbcb-"],
.single-post .article h2.wp-block-heading + aside[class*="dbcb-"],
.single-post .article h2.wp-block-heading + div[class*="dbcb-"],
.single-post .article h3.wp-block-heading + section[class*="dbcb-"],
.single-post .article h3.wp-block-heading + aside[class*="dbcb-"],
.single-post .article h3.wp-block-heading + div[class*="dbcb-"] {
    margin-top: 1.5rem !important;
}

/* blog-card on the BLOG template (.article) — 3 per row like treatment (not 4). Tanya 2026-06-25 */
@media (min-width: 768px) {
  .single-post .article .dbcb-blog-card .dbcb-cardgrid { grid-template-columns: repeat(3, 1fr); }
}

/* Podcast hero: 2 columns from 992 (arbitrary grid-cols not in prebuilt CSS). Tanya 2026-06-25 */
@media (min-width: 992px) { .dbpod-hero-grid { grid-template-columns: 1.1fr 0.9fr; } }

/* Podcast platform chips (.plat) — replaces the old inline style removed with the mockup. Tanya 2026-06-25 */
.plat{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .95rem;background:#fff;border:1px solid #ece5df;border-radius:9999px;font-size:.875rem;font-weight:500;line-height:1;color:#2d2419;text-decoration:none;transition:border-color .2s,background .2s}
.plat:hover{border-color:#9e4a2a}
.plat-dark{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28);color:#fff}
.plat-dark:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.5)}
/* Podcast featured card: wider photo column 4:6 from 992 */
@media (min-width:768px){ .dbpod-feat-grid{ grid-template-columns:4fr 6fr } }

/* Podcast: hide hero photo below 992 (it duplicates the featured episode cover); episode cards = full link. Tanya 2026-06-25 */
@media (max-width: 991.98px) { .dbpod-hero-photo { display: none; } }
.dbpod-ep-card, .dbpod-ep-card:hover { text-decoration: none; color: inherit; }

/* Education-cards block: photo column. Tanya 2026-06-25 */
.dbcb-edu-card{ display:grid; grid-template-columns:1fr; gap:1.25rem; }
@media (min-width:640px){ .dbcb-edu-card{ grid-template-columns:140px 1fr; gap:1.75rem; align-items:start; } }
.dbcb-edu-card__photo{ width:100%; }

.dbcb-cert-grid__img{ aspect-ratio: 4 / 3; }
.dbcb-cert-details summary{ list-style:none; }
.dbcb-cert-details summary::-webkit-details-marker{ display:none; }
/* Sticky mobile CTA bar — reserve space + shadow. 2026-06-25 */
.db-mcta{ box-shadow: 0 -2px 12px rgba(0,0,0,0.08); }
@media (max-width: 991.98px){ body{ padding-bottom: 3.5rem; } }
.db-mcta a{ min-height:3.5rem; }
.db-mcta{ transition: transform .25s ease; }
.db-mcta.db-mcta--hidden{ transform: translateY(100%); }
/* Mobile CTA Book — trial bright red (Tanya 2026-06-26). Revert: remove this block. */
.db-mcta a:first-child{ background-color:#ff4243; }
.db-mcta a:first-child:hover{ background-color:#e83b3c; }
/* Content-body: first heading shouldn't double the article's top padding. 2026-06-26 */
.content-body > *:first-child{ margin-top:0 !important; }

/* Gutter content typography — plain Gutenberg headings/quote in .dbcb-hub-gutter__main
   (galleries, Dr.B bio) get the standard site sizes. 2026-06-26 */
.dbcb-hub-gutter__main > h2{ font-family:"Cormorant Garamond",Georgia,serif; font-weight:500; font-size:26px; line-height:1.2; color:#2d2419; margin-top:2.5rem; text-wrap:balance; }
.dbcb-hub-gutter__main > h3{ font-family:"Cormorant Garamond",Georgia,serif; font-weight:500; font-size:24px; line-height:1.25; color:#2d2419; margin-top:1.75rem; }
/* Hub-gutter heading rules above must not push dbcb block-internal headings
   (alert title is an <h3> with its own m-0 — the gutter margin-top shoved it
   down so the alert icon floated above it). Tanya 2026-06-26 */
.dbcb-hub-gutter__main .dbcb-alert__title { margin-top: 0; }
.dbcb-hub-gutter__main > p{ font-size:16px; line-height:1.7; color:#4f4334; margin-top:1rem; }
.dbcb-hub-gutter__main blockquote.wp-block-quote{ border-left:2px solid #9e4a2a; padding-left:1.25rem; margin:1.75rem 0; }
.dbcb-hub-gutter__main blockquote.wp-block-quote p{ font-family:"Cormorant Garamond",Georgia,serif; font-style:italic; font-size:22px; color:#2d2419; }
.dbcb-hub-gutter__main > :first-child{ margin-top:0; }

/* Gallery gutter content headings aligned to hub h2=40 / h3=28 (Tanya 2026-06-26) */
.dbcb-hub-gutter__main > h2{ font-size:32px; }
@media (min-width:1024px){ .dbcb-hub-gutter__main > h2{ font-size:40px; } .dbcb-hub-gutter__main > h3{ font-size:28px; } }

/* Gallery heading scale = hub canon: all section h2 = 40px. Tanya 2026-06-26 */
.single-gallery main h2 { font-size: 30px; }
@media (min-width: 1024px) { .single-gallery main h2 { font-size: 40px; } }

/* Dr.B (postid-1462) gutter: left-align + de-pad dbcb sections so the pull-quote sits flush with the body text. The .single-enhancedcategory left-align rule doesn't cover pages. 2026-06-26 */
.postid-1462 .dbcb-hub-gutter__main > [class*="dbcb-"],
.postid-1462 .dbcb-hub-gutter__main .max-w-shell,
.postid-1462 .dbcb-hub-gutter__main .max-w-prose{ margin-left:0; margin-right:auto; }
.postid-1462 .dbcb-hub-gutter__main > [class*="dbcb-"]{ padding-left:0; padding-right:0; }

/* Dr.B CTA: dark section keeps light text — .content-body restyles <p> to ink, beating Tailwind text-white/*. 2026-06-26 */
.content-body section.bg-primary-deep .text-white{ color:#fff; }
.content-body section.bg-primary-deep .text-white\/55{ color:rgba(255,255,255,.55); }
.content-body section.bg-primary-deep .text-white\/70{ color:rgba(255,255,255,.7); }
/* Dr.B (postid-1462): full-width dbcb bands stack flush with each other and the CTA. */
.postid-1462 .content-body > .dbcb-treatment-tiles{ margin-bottom:0; }

/* Editor-only labels for Dr.B shortcode blocks (hero/stats/cta) — hidden on front end, visible in the Gutenberg Custom HTML block. 2026-06-26 */
.drb-ed-label{ display:none !important; }

/* Dr.B (postid-1462) education-cards: lay the training cards 2-up on desktop so they fill the band instead of a narrow left column with a big right gap. 2026-06-26 */
@media (min-width:1024px){
  .postid-1462 .dbcb-education-cards ol{ max-width:none !important; display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; column-gap:48px !important; row-gap:0 !important; }
  .postid-1462 .dbcb-education-cards ol > .dbcb-edu-card{ border-top:0 !important; }
}

/* Homepage method-hubs: halve the inter-card gap on small mobile (gap-6 24px → 12px). Tanya 2026-06-26 */
@media (max-width: 500px) {
  .dbcb-method-hubs__grid { gap: 0.75rem; }
}