/**
 * Blog Redesign v2 — Completely Namespaced Stylesheet
 * 
 * ALL CLASSES ARE PREFIXED WITH .br-v2-* to prevent any style overrides.
 * Works with classic TinyMCE editor in backend.
 *
 * @package AlgodonesDentalCenter
 */

/* ==========================================================================
   DESIGN TOKENS — All prefixed with --brv2-

   REV 8 — full rebuild against the NEW Tailwind mockup's own literal
   tailwind.config token values (scratch_adc-new-design.html), copied
   verbatim rather than re-approximated through the old Material-3-style
   token set from the previous mockup pass. Anywhere the mockup used a
   raw Tailwind neutral (slate-100, emerald-700, amber-800, etc.) that
   value is copied as-is rather than mapped onto an existing --brv2-gray
   step, so colors stay pixel-identical to the reference file.
   ========================================================================== */
:root {
    --brv2-primary: #003481;          /* mockup "primary" */
    --brv2-primary-dark: #002359;     /* mockup "primary-dark" */
    --brv2-primary-light: #eef4ff;    /* mockup "primary-light" */
    --brv2-primary-accent: #003481;   /* kept as an alias of primary for older rules still referencing it */
    --brv2-navy: #0f172a;             /* mockup "on-surface" */
    --brv2-teal: #0f172a;
    --brv2-coral: #bc000c;            /* mockup "secondary" */
    --brv2-coral-dark: #99000a;       /* mockup "secondary-hover" */
    --brv2-coral-light: #fdf2f2;      /* mockup "secondary-subtle" */
    --brv2-success: #047857;          /* emerald-700, used for the warranty banner + "US:" savings hints */
    --brv2-success-bg: #ecfdf5;       /* emerald-50 */
    --brv2-success-border: #a7f3d0;   /* emerald-200 */
    --brv2-success-deep: #022c22;     /* emerald-950, warranty banner body text */
    --brv2-amber-bg: #fffbeb;         /* amber-50, "Flagship Tier" badge */
    --brv2-amber-text: #92400e;       /* amber-800 */
    --brv2-white: #ffffff;
    --brv2-warm-white: #f8fafc;       /* mockup "surface-subtle" — page background */
    --brv2-surface-elevated: #f1f5f9;
    --brv2-gray-50: #f8fafc;
    --brv2-gray-100: #f1f5f9;         /* mockup "surface-elevated" */
    --brv2-gray-200: #e2e8f0;         /* mockup "border-subtle" */
    --brv2-gray-300: #cbd5e1;         /* mockup "border-strong" */
    --brv2-gray-400: #94a3b8;
    --brv2-gray-500: #64748b;         /* mockup "text-muted" */
    --brv2-gray-600: #475569;
    --brv2-gray-700: #334155;
    --brv2-gray-800: #1e293b;
    --brv2-gray-900: #0f172a;         /* mockup "on-surface" */
    --brv2-text: #52607a;
    --brv2-error: #bc000c;
    --brv2-font-display: Arial, Helvetica, sans-serif;
    --brv2-font-body: "Plus Jakarta Sans", Arial, Helvetica, sans-serif;
    --brv2-radius-sm: 8px;             /* mockup rounded-lg */
    --brv2-radius-md: 12px;            /* mockup rounded-xl */
    --brv2-radius-lg: 16px;            /* mockup rounded-2xl */
    --brv2-radius-xl: 24px;            /* mockup rounded-3xl — most cards */
    --brv2-radius-full: 9999px;        /* pills, badges, avatar circles */
    --brv2-shadow-sm: 0 1px 2px 0 rgba(0,0,0,.05);
    --brv2-shadow-md: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
    --brv2-shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
    --brv2-shadow-xl: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1);
    /* One shared reading size for every place body copy actually gets
       read — article paragraphs, list items, table cells, and the
       doctor/package card lists — instead of each picking its own
       value (0.85rem here, 0.88rem there, table cells unset and
       falling back to the theme default) that made the same kind of
       content look like it belonged to different pages. Mockup's own
       body/list copy runs at 13-14px, so this replaces the previous
       1rem (16px) baseline. */
    --brv2-text-base: 1.125rem;
}


/* ==========================================================================
   BASE WRAPPER — Everything scoped under .br-v2-wrapper
   ========================================================================== */
.br-v2-wrapper {
    font-family: var(--brv2-font-body) !important;
    line-height: 1.8 !important;
    background: var(--brv2-warm-white) !important;
    color: var(--brv2-gray-700) !important;
    line-height: 1.65 !important;
    -webkit-font-smoothing: antialiased !important;
}

.br-v2-wrapper * { box-sizing: border-box !important; }

/* Reading Progress */
.br-v2-progress {
    position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important;
    height: 3px !important; background: transparent !important; z-index: 99999 !important;
}
.br-v2-progress__fill {
    height: 100% !important; width: 0% !important;
    background: linear-gradient(90deg, var(--brv2-primary), var(--brv2-teal), var(--brv2-coral)) !important;
}

/* Hero — light surface, brand eyebrow label, no dark gradient banner */
/* Bottom padding trimmed way down (was 3rem, matching the top) —
   between that, the anchor-menu-wrap's own top padding, and the pill
   bar's own top margin, the menu sat ~90px below the headline instead
   of reading as "right below" it. No border-bottom either now — the
   menu's own bar (white, bordered, shadowed) already reads as a
   distinct element without a second divider line above it. */
.br-v2-hero {
    background: var(--brv2-white) !important;
    padding: 3rem 0 0.5rem !important; position: relative !important;
}
.br-v2-hero__inner {
    max-width: 1200px !important; margin: 0 auto !important; padding: 0 1rem !important;
    position: relative !important; z-index: 1 !important;
}
/* The title/subtitle read as a pull-quote, not a page headline, when
   they're capped to the old 760px prose width — that width belongs to
   .br-v2-article's body copy, not the hero. The hero now matches
   .br-v2-grid's 1200px so it visually spans the same width as the
   article + sidebar below it, but the title itself stays capped so
   long headlines don't stretch edge to edge. */
.br-v2-hero__title { max-width: 46ch !important; }
.br-v2-breadcrumb { display: flex !important; gap: 0.5rem !important; margin-bottom: 1.1rem !important; font-size: 0.82rem !important; }
.br-v2-breadcrumb a { color: var(--brv2-gray-400) !important; text-decoration: none !important; }
.br-v2-breadcrumb a:hover { color: var(--brv2-primary) !important; }
.br-v2-breadcrumb__sep { color: var(--brv2-gray-300) !important; }
.br-v2-hero__title {
    font-family: var(--brv2-font-display) !important; font-size: clamp(2rem, 3.4vw, 3rem) !important;
    font-weight: 600 !important; color: var(--brv2-gray-900) !important; line-height: 1.15 !important;
    letter-spacing: -0.02em !important; margin: 0 0 1rem 0 !important; text-wrap: balance !important;
}
/* REV 3 — the mockup's hero has no excerpt subtitle and no trust-badge
   row; it's just the title, then one divider row with the reviewer
   credential on the left and a share button on the right. */
.br-v2-hero__meta-row {
    display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: space-between !important;
    gap: 1rem !important; padding-top: 1.4rem !important;
}
.br-v2-hero__badges-row { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 0.625rem !important; margin-bottom: 1rem !important; }
.br-v2-reviewer-pill {
    display: inline-flex !important; align-items: center !important; gap: 0.4rem !important;
    padding: 0.3rem 0.75rem !important; border-radius: var(--brv2-radius-full) !important;
    background: var(--brv2-gray-100) !important; border: 1px solid var(--brv2-gray-200) !important;
    font-size: 0.75rem !important; color: var(--brv2-gray-800) !important; text-decoration: none !important;
}
.br-v2-reviewer-pill svg { color: var(--brv2-primary) !important; flex: none !important; }
.br-v2-reviewer-pill strong { font-weight: 700 !important; color: var(--brv2-primary) !important; }
.br-v2-reviewer-pill__updated { color: var(--brv2-gray-500) !important; }
.br-v2-reviewer-pill:hover strong { text-decoration: underline !important; }

.br-v2-form-security {
    display: flex !important; align-items: center !important; justify-content: center !important; gap: 0.5rem !important;
    padding: 0.75rem 1rem !important; background: var(--brv2-gray-50) !important;
    border-radius: 0 0 var(--brv2-radius-xl) var(--brv2-radius-xl) !important;
    font-size: 0.75rem !important; color: var(--brv2-gray-500) !important;
}

/* Grid — 2fr/1fr matches the mockup's 8-col/4-col (2:1) split, scaling
   proportionally with the container instead of a fixed sidebar width. */
.br-v2-grid {
    max-width: 1200px !important; margin: 0 auto !important; padding: 0rem 1rem 5rem 1rem !important;
    display: grid !important; grid-template-columns: 2fr 1fr !important; gap: 2rem !important;
    min-width: 0 !important;
}
@media (min-width: 769px) {
    .br-v2-grid { padding-top: 30px !important; }
}

/* Article */
/* min-width: 0 overrides a grid item's default min-width:auto, which
   otherwise refuses to shrink the box below its content's min-content
   size. On mobile (.br-v2-grid collapses to a single 1fr column below
   768px) that meant the grid track itself was sized by the article's
   ~690px worth of content instead of the ~350px actually available,
   silently pushing the whole column wider than the viewport — with
   .site's own overflow:clip hiding the resulting horizontal overflow
   rather than showing a scrollbar, so body copy just got cut off
   mid-sentence with nothing visibly "wrong" to point at. */
.br-v2-article {
    max-width: 720px !important; background: var(--brv2-white) !important;
    border-radius: var(--brv2-radius-lg) !important; padding: 2rem !important;
    box-shadow: var(--brv2-shadow-sm) !important; min-width: 0 !important;
}
/* REV 3 — section headings switched from the numbered
   (01/02/03...) counter treatment to a colored vertical bar, matching
   the approved Stitch mockup's `<span class="w-1.5 h-6 bg-primary
   rounded-full">` + heading pattern. Drawn as ::before so no extra
   markup is needed in the_content(). */
.br-v2-article h2 {
    display: flex !important; align-items: center !important; gap: 0.6em !important;
    font-family: var(--brv2-font-display) !important; font-size: clamp(1.5rem, 2.2vw, 1.9rem) !important;
    color: var(--brv2-gray-900) !important; line-height: 1.25 !important; font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    margin: 2.6em 0 0.6em 0 !important; scroll-margin-top: 32px !important;
}
.br-v2-article h2:first-child { margin-top: 0 !important; }
.br-v2-article h2::before {
    content: '' !important; display: inline-block !important; flex: none !important;
    width: 6px !important; height: 1.5em !important; border-radius: 999px !important;
    background: var(--brv2-primary) !important;
}
.br-v2-article h3 {
    font-family: var(--brv2-font-display) !important; font-size: 1.375rem !important;
    color: var(--brv2-gray-800) !important; margin: 2rem 0 0.875rem 0 !important;
}
.br-v2-article h4 { font-size: 1.125rem !important; color: var(--brv2-gray-700) !important;
    margin: 1.5rem 0 0.75rem 0 !important; font-weight: 600 !important;
}
.br-v2-article p {
    font-family: var(--brv2-font-body) !important; font-size: var(--brv2-text-base) !important; line-height: 1.75 !important; color: var(--brv2-text) !important;
    margin: 0 0 1.25rem 0 !important;
}
.br-v2-article strong, .br-v2-article b { color: var(--brv2-gray-900) !important; font-weight: 600 !important; }
/* A paragraph that's entirely italic (e.g. "*Prices may vary based on
   your specific case.") or one right after a table reads as a caption
   or disclaimer, not body copy — sizing it down and muting the color
   matches that role instead of it looking like a stray, oddly-styled
   line of regular text. */
.br-v2-article p:has(> em:only-child),
.br-v2-article table + p,
.br-v2-article .table-wrapper + p {
    font-size: 0.8rem !important; color: var(--brv2-gray-500) !important; margin-top: -0.5rem !important;
}
.br-v2-article table + p em,
.br-v2-article .table-wrapper + p em {
    color: inherit !important;
}
.br-v2-article p a {
    color: var(--brv2-primary) !important; text-decoration: none !important;
    border-bottom: 1px solid rgba(41,76,162,0.25) !important;
}
.br-v2-article ul, .br-v2-article ol { margin: 1.25rem 0 !important; padding-left: 1.5rem !important; }
.br-v2-article li {
    font-family: var(--brv2-font-body) !important; font-size: var(--brv2-text-base) !important; margin-bottom: 0.5rem !important;
    line-height: 1.6 !important; color: var(--brv2-text) !important;
}
/* A "References" / "Scientific & Clinical References" list is
   footnote material, not body copy — reads as too heavy at the same
   size as everything else in the article. h2 ids are auto-slugified
   (see brv2_add_heading_ids() in single-blog-redesign.php), so a
   heading titled anything containing "reference" gets an id like
   "scientific-clinical-references" — matching on that substring finds
   this section without editors needing to add a class by hand. */
.br-v2-article h2[id*="reference"] + ol,
.br-v2-article h2[id*="reference"] + ul {
    font-size: 0.8rem !important;
}
.br-v2-article h2[id*="reference"] + ol li,
.br-v2-article h2[id*="reference"] + ul li {
    font-size: 0.8rem !important; color: var(--brv2-gray-500) !important; margin-bottom: 0.35rem !important;
}

/* Long source URLs in any list: wrap inside the column instead of running off
   its edge (the grid child has min-width:0, so only the text itself can wrap). */
.br-v2-article li, .br-v2-article li a { overflow-wrap: anywhere !important; word-break: break-word !important; }

/* Custom bullets */
.br-v2-article ul:not(.br-v2-toc-list):not(.kt-svg-icon-list) { list-style: none !important; padding-left: 0 !important; }
.br-v2-article ul:not(.br-v2-toc-list):not(.kt-svg-icon-list) li {
    position: relative !important; padding-left: 1.75rem !important;
}
/* Was --brv2-success (a status green) — not part of this theme's
   palette at all (navy + coral only), so a plain hand-typed bullet
   list stood out as visually unrelated to everything else on the
   page. Blue matches every other checkmark on this template. */
.br-v2-article ul:not(.br-v2-toc-list):not(.kt-svg-icon-list) li::before {
    content: '✓' !important; position: absolute !important; left: 0 !important; top: 2px !important;
    width: 18px !important; height: 18px !important; background: var(--brv2-primary-light) !important;
    color: var(--brv2-primary) !important; border-radius: 50% !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    font-size: 10px !important; font-weight: 700 !important;
}

/* Blockquotes — a single accent rule, not a tinted panel */
.br-v2-article blockquote {
    font-family: var(--brv2-font-display) !important; font-size: 1.3rem !important; font-weight: 500 !important;
    line-height: 1.45 !important; color: var(--brv2-primary-dark) !important; letter-spacing: -0.01em !important;
    margin: 2.2rem 0 !important; padding: 0.2rem 0 0.2rem 1.75rem !important;
    border-left: 3px solid var(--brv2-coral) !important; background: none !important; border-radius: 0 !important;
}
.br-v2-article blockquote p { color: inherit !important; font-size: inherit !important; margin: 0 !important; }

/* Single inline images/videos — a plain <img> dropped straight into
   the classic editor (not one of the adc_* shortcode elements) had NO
   styling at all: no radius, no shadow, no spacing, filename-looking
   caption text left at default tiny browser styling. This covers that
   plain case so any editor-pasted photo/video reads as a deliberate
   part of the page instead of a raw file dump. Scoped to images/videos
   that aren't already inside one of this template's own components
   (which each already have their own image treatment), so nothing
   here double-styles a package photo, doctor photo, before/after pane,
   carousel thumbnail, etc. */
/* REV 12 — .adc-image img and .wp-caption img were BOTH getting
   double-framed: their own rules reset margin/border/shadow to sit
   flush inside their figure wrapper, but this generic rule's :not()
   list didn't exclude them, and its 6-deep :not() chain (each :not()
   argument counts toward specificity same as a real class) out-ranks
   a plain 2-class override — so this rule kept winning anyway and
   re-applying its own border+shadow+radius+centered-margin onto the
   <img> a second time, nested inside the figure's already-framed
   card. That's what read as "the CSS doesn't look good" — a card
   inside a card with doubled borders/shadows and the image drifting
   off-center from its own margin:auto fighting the reset. */
.br-v2-article img:not(.card-package .image img):not(.card-doctor-landscape__info__image img):not(.adc-before-after__pane img):not(.adc-testimonial__media img):not(.adc-icon-item img):not(.adc-carousel img):not(.adc-image img):not(.wp-caption img) {
    display: block !important; max-width: 100% !important; height: auto !important;
    border-radius: var(--brv2-radius-lg) !important; box-shadow: var(--brv2-shadow-md) !important;
    border: 1px solid var(--brv2-gray-200) !important; margin: 1.75rem auto !important;
}
/* A classic-editor image with alignment (align="left"/"right" or the
   alignleft/alignright class) or a caption should sit inline with
   text wrapping it, not full-width and centered like a standalone
   figure. */
.br-v2-article img.alignleft, .br-v2-article .wp-caption.alignleft { float: left !important; margin: 0.3rem 1.75rem 1rem 0 !important; }
.br-v2-article img.alignright, .br-v2-article .wp-caption.alignright { float: right !important; margin: 0.3rem 0 1rem 1.75rem !important; }
.br-v2-article img.aligncenter, .br-v2-article .wp-caption.aligncenter { margin-left: auto !important; margin-right: auto !important; }
/* Classic-editor "Caption" option wraps the image + its caption text
   in .wp-caption — the wrapper (not the <img> alone) gets the frame
   treatment here so the caption sits inside the same card instead of
   as a stray line of text below an unrelated-looking photo. */
.br-v2-article .wp-caption {
    max-width: 100% !important; background: var(--brv2-white) !important;
    border: 1px solid var(--brv2-gray-200) !important; border-radius: var(--brv2-radius-lg) !important;
    box-shadow: var(--brv2-shadow-md) !important; overflow: hidden !important; margin: 1.75rem auto !important;
}
.br-v2-article .wp-caption img {
    display: block !important; width: 100% !important; height: auto !important;
    border: none !important; border-radius: 0 !important; box-shadow: none !important; margin: 0 !important;
}
.br-v2-article .wp-caption-text, .br-v2-article .wp-caption figcaption {
    font-size: 0.8rem !important; line-height: 1.4 !important; color: var(--brv2-gray-500) !important;
    text-align: center !important; padding: 0.65rem 1rem !important; margin: 0 !important;
    font-style: italic !important;
}

/* Single embedded video (a pasted YouTube/Vimeo URL auto-embedded by
   WordPress oEmbed as a raw <iframe>, or a self-hosted <video>) — the
   embed's own hardcoded width/height attributes otherwise force a
   fixed pixel size that either overflows a narrow mobile column or
   sits tiny and off-center on desktop. Forcing a real 16:9 box keeps
   it responsive and gives it the same card framing as everything
   else on the page instead of a bare rectangle floating in the text. */
.br-v2-article iframe,
.br-v2-article video,
.br-v2-article .wp-video {
    display: block !important; width: 100% !important; max-width: 100% !important;
    aspect-ratio: 16 / 9 !important; height: auto !important;
    border-radius: var(--brv2-radius-lg) !important; box-shadow: var(--brv2-shadow-md) !important;
    border: 1px solid var(--brv2-gray-200) !important; margin: 1.75rem 0 !important; background: var(--brv2-gray-900) !important;
}
/* Gutenberg embed blocks: core CSS makes the iframe absolute inside
   .wp-block-embed__wrapper. The generic iframe margin/height above pushed it
   out of that box so the caption below slid under the video. Give the
   wrapper its own relative 16:9 box and pin the iframe to it. */
.br-v2-article .wp-block-embed__wrapper {
    position: relative !important; aspect-ratio: 16 / 9 !important; width: 100% !important; margin: 1.75rem 0 !important;
}
.br-v2-article .wp-block-embed__wrapper::before { display: none !important; }
.br-v2-article .wp-block-embed__wrapper iframe {
    position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important;
    aspect-ratio: auto !important; margin: 0 !important;
}
.br-v2-article .wp-block-embed { margin: 0 !important; }
.br-v2-article .wp-video video { border-radius: 0 !important; box-shadow: none !important; border: none !important; margin: 0 !important; }
/* A YouTube/Vimeo oEmbed sometimes lands wrapped in WordPress's own
   .wp-embed-responsive/<p> wrapper rather than a bare iframe — same
   16:9 box, just letting the iframe inside fill it edge to edge. */
.br-v2-article .wp-embed-responsive .wp-embed-aspect-16-9 { position: relative !important; padding-top: 56.25% !important; }
.br-v2-article .wp-embed-responsive .wp-embed-aspect-16-9 iframe {
    position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important;
    aspect-ratio: auto !important; margin: 0 !important;
}

/* [adc_image] — a dedicated single-image element (see
   inc/blog-redesign-shortcodes.php) rather than relying on whatever
   the classic editor's own Caption option happens to output. Same
   framed-card treatment as the generic .br-v2-article img rule above,
   just on its own reliable class so it can carry left/right/center
   alignment as a real modifier instead of guessing from editor-added
   classes. */
.br-v2-article .adc-image {
    max-width: 100% !important; margin: 1.75rem auto !important;
    background: var(--brv2-white) !important; border: 1px solid var(--brv2-gray-200) !important;
    border-radius: var(--brv2-radius-lg) !important; box-shadow: var(--brv2-shadow-md) !important;
    overflow: hidden !important;
}
.br-v2-article .adc-image--left { float: left !important; margin: 0.3rem 1.75rem 1rem 0 !important; max-width: 45% !important; }
.br-v2-article .adc-image--right { float: right !important; margin: 0.3rem 0 1rem 1.75rem !important; max-width: 45% !important; }
.br-v2-article .adc-image img {
    display: block !important; width: 100% !important; height: auto !important; margin: 0 !important;
}
.br-v2-article .adc-image__caption {
    font-size: 0.8rem !important; line-height: 1.4 !important; color: var(--brv2-gray-500) !important;
    text-align: center !important; padding: 0.65rem 1rem !important; margin: 0 !important; font-style: italic !important;
}
@media (max-width: 640px) {
    .br-v2-article .adc-image--left, .br-v2-article .adc-image--right { float: none !important; max-width: 100% !important; margin: 1.75rem auto !important; }
}

/* [adc_video] — a dedicated single-video element, same reasoning as
   [adc_image]: a raw oEmbed <iframe> carries hardcoded pixel width/
   height and no caption. Real 16:9 box via the classic
   padding-top-percentage technique (not CSS aspect-ratio directly on
   the iframe) so the embed's own width/height attributes can't fight
   it — this wrapper controls the box, the iframe just fills it. */
.br-v2-article .adc-video { margin: 1.75rem 0 !important; }
.br-v2-article .adc-video__frame {
    position: relative !important; width: 100% !important; padding-top: 56.25% !important;
    border-radius: var(--brv2-radius-lg) !important; box-shadow: var(--brv2-shadow-md) !important;
    border: 1px solid var(--brv2-gray-200) !important; overflow: hidden !important; background: var(--brv2-gray-900) !important;
}
.br-v2-article .adc-video__frame iframe {
    position: absolute !important; top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important; border: 0 !important; margin: 0 !important;
}
.br-v2-article .adc-video__caption {
    font-size: 0.8rem !important; line-height: 1.4 !important; color: var(--brv2-gray-500) !important;
    text-align: center !important; padding: 0.65rem 0.25rem 0 !important; margin: 0 !important; font-style: italic !important;
}

/* [adc_columns]/[adc_col] — side-by-side layout (two images, two
   videos, image+text, video+text...). Each column stretches to the
   same height (align-items:stretch, the grid default) so an image
   column and a text column read as a matched pair, not one taller
   than the other. The image/video elements inside a column drop
   their own standalone top/bottom margin — the column gap already
   provides spacing, so keeping both would double it up unevenly
   between columns of different content types. */
.br-v2-article .adc-columns {
    display: grid !important; grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.75rem !important; margin: 1.75rem 0 !important;
}
.br-v2-article .adc-columns--3 { grid-template-columns: repeat(3, 1fr) !important; }
.br-v2-article .adc-columns--4 { grid-template-columns: repeat(4, 1fr) !important; }
.br-v2-article .adc-columns__col { min-width: 0 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; }
.br-v2-article .adc-columns__col .adc-image,
.br-v2-article .adc-columns__col .adc-video { margin: 0 !important; }
.br-v2-article .adc-columns__col p:first-child { margin-top: 0 !important; }
.br-v2-article .adc-columns__col p:last-child { margin-bottom: 0 !important; }
@media (max-width: 640px) {
    .br-v2-article .adc-columns,
    .br-v2-article .adc-columns--3,
    .br-v2-article .adc-columns--4 {
        grid-template-columns: 1fr !important; gap: 1.25rem !important;
    }
}

/* [adc_breakdown]/[adc_breakdown_row] — receipt-style itemized cost
   list, matching the reference file's own .breakdown component
   exactly: bold name + small muted note stacked on the left, bold
   right-aligned price on the right so every figure lines up in one
   column, zebra striping, and a heavier "total" row at the bottom. */
.br-v2-article .adc-breakdown {
    border: 1px solid var(--brv2-gray-300) !important; border-radius: var(--brv2-radius-md) !important;
    overflow: hidden !important; margin: 1.5rem 0 !important;
}
.br-v2-article .adc-breakdown__row {
    display: flex !important; justify-content: space-between !important; align-items: baseline !important;
    gap: 20px !important; padding: 14px 18px !important; border-bottom: 1px solid var(--brv2-gray-200) !important;
}
.br-v2-article .adc-breakdown__row:nth-child(even) { background: #fafbfd !important; }
.br-v2-article .adc-breakdown__row:last-child { border-bottom: none !important; }
.br-v2-article .adc-breakdown__item { display: flex !important; flex-direction: column !important; gap: 2px !important; min-width: 0 !important; }
.br-v2-article .adc-breakdown__name { font-size: 1.0625rem !important; font-weight: 700 !important; color: var(--brv2-gray-900) !important; }
.br-v2-article .adc-breakdown__note { font-size: 0.875rem !important; color: var(--brv2-gray-500) !important; line-height: 1.4 !important; }
.br-v2-article .adc-breakdown__price {
    font-size: 1.0625rem !important; font-weight: 700 !important; color: #0f4c9c !important;
    white-space: nowrap !important; font-variant-numeric: tabular-nums !important; flex-shrink: 0 !important;
}
.br-v2-article .adc-breakdown__row--total {
    background: var(--brv2-primary-light) !important; border-top: 2px solid var(--brv2-gray-300) !important;
}
.br-v2-article .adc-breakdown__row--total .adc-breakdown__name { color: var(--brv2-gray-900) !important; }
.br-v2-article .adc-breakdown__row--total .adc-breakdown__price { color: var(--brv2-gray-900) !important; font-size: 1.1875rem !important; }
@media (max-width: 480px) {
    .br-v2-article .adc-breakdown__row { flex-direction: column !important; gap: 4px !important; }
    .br-v2-article .adc-breakdown__price { font-size: 1.1875rem !important; }
}

/* Tables — font-size is a deliberate exception to --brv2-text-base:
   the mockup's tables genuinely use a smaller size (14px, its
   font-label-md/font-body-md) than article prose (16px). Header
   background is --brv2-primary (#003481, the mockup's actual bg-primary
   for these tables) — --brv2-navy is close to black and was never the
   color the mockup used here. */
.br-v2-article table {
    width: 100% !important; border-collapse: separate !important; border-spacing: 0 !important;
    background: var(--brv2-white) !important; border-radius: var(--brv2-radius-md) !important;
    overflow: hidden !important; border: 1px solid var(--brv2-gray-200) !important;
    margin: 1.5rem 0 !important; font-size: 0.875rem !important;
}
/* Mockup's own tables (comparison table, driving-distance table) both
   use a light bg-surface-elevated header row with dark bold text, not
   a solid-color banner — matching that here instead of the old solid
   primary header. */
.br-v2-article thead { background: var(--brv2-navy) !important; }
.br-v2-article thead th, .br-v2-article thead td {
    font-family: var(--brv2-font-body) !important; color: var(--brv2-white) !important; padding: 14px 18px !important;
    font-weight: 700 !important; text-align: left !important; font-size: 0.8125rem !important;
    text-transform: uppercase !important; letter-spacing: 0.04em !important; border-bottom: none !important;
}
.br-v2-article tbody td {
    font-family: var(--brv2-font-body) !important; padding: 0.85rem 1.25rem !important; border-bottom: 1px solid var(--brv2-gray-100) !important;
}
.br-v2-article tbody tr:hover td { background: var(--brv2-warm-white) !important; }
/* Column dividers — content pasted from TinyMCE has no vertical rules
   at all, which is what reads as an amateur/unfinished table. */
.br-v2-article table td, .br-v2-article table th {
    border-right: 1px solid var(--brv2-gray-100) !important;
}
.br-v2-article table td:last-child, .br-v2-article table th:last-child { border-right: none !important; }
/* Pasted classic-editor tables almost never carry a real <thead> —
   TinyMCE just bolds the first row of plain <td>s — so the .br-v2-article
   thead rule above never matches on real content and the "header" falls
   back to default/no styling. Style the first body row the same way,
   but only for tables that have no real <thead> (:not(:has(thead)))
   so a table that DOES have one doesn't get its first data row
   mistaken for the header too. */
.br-v2-article table:not(:has(thead)) tbody tr:first-child td {
    background: var(--brv2-navy) !important; color: var(--brv2-white) !important;
    font-weight: 700 !important; border-bottom: none !important; text-transform: uppercase !important; letter-spacing: 0.04em !important;
}
.br-v2-article table:not(:has(thead)) tbody tr:first-child td strong { color: inherit !important; font-weight: 700 !important; }
.br-v2-article table:not(:has(thead)) tbody tr:first-child:hover td { background: var(--brv2-navy) !important; }
/* Struck-through "average rate" price in comparison tables — was
   inheriting the plain cell text color, which read as a typo rather
   than a deliberately crossed-out old price. */
/* First column (the row label, e.g. "Starting Cost") bold; second
   column (e.g. the "Dental Implants" answer in a comparison table)
   reads as the winning option — green + bold, same convention as
   .brv2-savings/the cost table's own savings badge. Cost Table has
   its own dedicated classes so it's excluded here. */
.br-v2-article table:not(.adc-cost-table__table) tbody td:nth-child(1) {
    font-weight: 700 !important; color: var(--brv2-gray-900) !important;
}
.br-v2-article table:not(.adc-cost-table__table) tbody td:nth-child(2) {
    color: #157a3d !important; font-weight: 700 !important;
}
/* Header-less tables: the first row IS the header; the column-1/2 rules above
   (higher specificity via :not()) would otherwise turn "MEXICO" green on navy. */
.br-v2-article table:not(.adc-cost-table__table):not(:has(thead)) tbody tr:first-child td {
    color: var(--brv2-white) !important; font-weight: 700 !important;
}
.br-v2-article table del, .br-v2-article table s {
    color: var(--brv2-gray-400) !important; text-decoration: line-through !important;
}
/* "Real savings" cell — bold coral, matching the mockup's red
   "Save 70% ($18,890)" callout column. */
.br-v2-article table strong { color: inherit !important; }
.br-v2-article table td strong.brv2-savings, .br-v2-article table td .brv2-savings {
    color: #157a3d !important; font-weight: 700 !important;
}
/* "MOST POPULAR" row badge — wrap the cell's text in
   <span class="brv2-badge-popular">MOST POPULAR</span> to get the
   mockup's small navy pill next to that row's label. */
.br-v2-article .brv2-badge-popular {
    display: inline-block !important; background: var(--brv2-primary) !important; color: var(--brv2-white) !important;
    font-size: 0.65rem !important; font-weight: 700 !important; letter-spacing: 0.03em !important;
    text-transform: uppercase !important; padding: 0.2rem 0.6rem !important; border-radius: var(--brv2-radius-full) !important;
    margin-left: 0.5rem !important; vertical-align: middle !important;
}

/* Responsive tables — below the breakpoint, every table in the
   article (whatever its column count/meaning — a savings comparison,
   a protocol comparison, a driving-distance table all appear in this
   template's content) turns into a stack of cards instead of a
   sideways-scrolling table. initResponsiveTables() in blog-redesign.js
   copies each column's header text onto its cells as a data-label
   attribute, which the ::before below turns into a visible label —
   this CSS is generic and needs no per-table tuning. */
@media (max-width: 640px) {
    .br-v2-article .table-wrapper { overflow-x: visible !important; }
    /* Kadence's own responsive-table CSS sets a real min-width on
       <table> equal to its natural (desktop) content width, so its
       wrapper can scroll it horizontally — exactly what the stacked-
       card layout below is replacing, but that min-width rule doesn't
       know that and was still winning: the table stayed pinned at its
       desktop width (e.g. 400px) and quietly overflowed a 350px-wide
       mobile article. min-width always overrides a smaller `width` in
       the box model regardless of specificity, so this needs its own
       explicit reset — width:100% alone was never going to beat it. */
    .br-v2-article table {
        display: block !important; border-collapse: collapse !important;
        width: 100% !important; min-width: 0 !important;
    }
    .br-v2-article thead, .br-v2-article table .adc-table-header-row {
        display: none !important;
    }
    .br-v2-article tbody { display: block !important; }
    .br-v2-article tbody tr {
        display: block !important; background: var(--brv2-white) !important;
        border: 1px solid var(--brv2-gray-200) !important; border-radius: var(--brv2-radius-md) !important;
        padding: 0.85rem 1rem !important; margin: 0 0 0.75rem !important; box-shadow: var(--brv2-shadow-sm) !important;
    }
    .br-v2-article tbody tr:last-child { margin-bottom: 0 !important; }
    .br-v2-article tbody tr:nth-child(even) { background: var(--brv2-white) !important; }
    /* .br-v2-article.br-v2-article.br-v2-article — the desktop striping
       rule (.br-v2-article tbody tr:nth-child(even) td, further up this
       file) is (0,2,3): 2 classes (.br-v2-article + :nth-child) and 3
       elements (tbody, tr, td). A plain 1-class reset here is only
       (0,1,2), so it lost outright on class count alone — the zebra
       striping was still winning on every "row", now card, in the
       stacked layout. Tripling the class here reaches (0,3,3), which
       beats it on classes regardless of element count or source order. */
    .br-v2-article.br-v2-article.br-v2-article tbody td,
    .br-v2-article.br-v2-article.br-v2-article tbody th {
        display: block !important; padding: 0 !important; border: none !important; background: none !important;
    }
    .br-v2-article.br-v2-article.br-v2-article tbody tr:hover td { background: none !important; }
    /* Both of these lost to the tripled reset rule just above (2
       classes vs its 3 — the exact same specificity trap, again) so
       neither the title's divider/spacing nor the label/value flex
       layout was actually applying: every stacked row fell back to
       plain block flow, which is what let the ::before label and the
       value text run together and clip at the viewport edge instead
       of sitting side by side and wrapping. Matching the reset's own
       specificity here. */
    .br-v2-article.br-v2-article.br-v2-article tbody td.adc-table-card__title {
        font-family: var(--brv2-font-display) !important; font-weight: 700 !important; font-size: 0.95rem !important;
        color: var(--brv2-gray-900) !important; padding-bottom: 0.6rem !important; margin-bottom: 0.5rem !important;
        border-bottom: 1px solid var(--brv2-gray-100) !important;
    }
    .br-v2-article.br-v2-article.br-v2-article tbody td[data-label] {
        font-family: var(--brv2-font-body) !important; display: flex !important; justify-content: space-between !important; align-items: baseline !important;
        gap: 0.75rem !important; padding: 0.3rem 0 !important; font-size: 0.83rem !important;
        text-align: right !important; min-width: 0 !important; overflow-wrap: anywhere !important;
    }
    .br-v2-article.br-v2-article.br-v2-article tbody td[data-label]::before {
        content: attr(data-label); flex: none !important; max-width: 42% !important;
        font-size: 0.68rem !important; font-weight: 700 !important; text-transform: uppercase !important;
        letter-spacing: 0.02em !important; color: var(--brv2-gray-400) !important; text-align: left !important;
        line-height: 1.3 !important;
    }
}

/* Cost Highlight — a single inline price callout, dropped wherever
   the article mentions a specific procedure's cost. Struck-through
   US price small and muted, the real price large and red (this one
   IS meant to grab the eye like a price-drop sticker — not a
   decorative outline, so it's exempt from "red is CTA-only"), a dark
   savings pill underneath. */
.br-v2-article .adc-cost-highlight {
    display: inline-flex !important; flex-direction: column !important; align-items: flex-start !important;
    gap: 0.3rem !important; margin: 0.5rem 0 !important;
}
.br-v2-article .adc-cost-highlight__label {
    font-size: 0.72rem !important; font-weight: 700 !important; text-transform: uppercase !important;
    letter-spacing: 0.03em !important; color: var(--brv2-gray-500) !important;
}
.br-v2-article .adc-cost-highlight__old {
    font-size: 0.85rem !important; color: var(--brv2-gray-400) !important; text-decoration: line-through !important;
}
.br-v2-article .adc-cost-highlight__new {
    font-family: var(--brv2-font-display) !important; font-size: 1.9rem !important; font-weight: 700 !important;
    color: var(--brv2-coral) !important; line-height: 1.1 !important;
}
.br-v2-article .adc-cost-highlight__savings {
    background: var(--brv2-primary-dark) !important; color: var(--brv2-white) !important;
    font-size: 0.78rem !important; font-weight: 700 !important; padding: 0.3rem 0.75rem !important;
    border-radius: var(--brv2-radius-full) !important; margin-top: 0.15rem !important;
}
/* Metabox-driven [adc_cost_highlights_block] — several of these
   together, wrapping on narrow screens instead of a rigid grid since
   each one is a different width depending on its label/price length. */
.br-v2-article .adc-cost-highlights {
    display: flex !important; flex-wrap: wrap !important; gap: 1.5rem 2rem !important; margin: 1.75rem 0 !important;
}

/* Cost Table — [adc_cost_table_block] (dedicated element, separate
   from the generic "any pasted table becomes stacked cards" behavior
   in initResponsiveTables()/blog-redesign.js). Both a real <table> and
   a card-stack are rendered server-side from the same metabox data;
   CSS just shows one and hides the other per breakpoint, so each
   layout can be built exactly for its own width instead of one
   markup structure trying to serve both. */
.br-v2-article .adc-cost-table { margin: 1.75rem 0 !important; }
.br-v2-article .adc-cost-table__cards { display: none !important; }

.br-v2-article .adc-cost-table__table {
    width: 100% !important; border-collapse: separate !important; border-spacing: 0 !important;
    background: var(--brv2-white) !important; border-radius: var(--brv2-radius-md) !important;
    overflow: hidden !important; border: 1px solid var(--brv2-gray-200) !important; font-size: 0.875rem !important;
}
.br-v2-article .adc-cost-table__table thead th {
    font-family: var(--brv2-font-body) !important; background: var(--brv2-navy) !important; color: var(--brv2-white) !important;
    padding: 14px 18px !important; font-weight: 700 !important; text-align: left !important;
    font-size: 0.8125rem !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; border-bottom: none !important;
}
/* Columns 2-4 are numbers — right-aligned (both header and cells), a
   receipt-style layout so every figure lines up in one column instead
   of ragging left under a left-aligned label. */
.br-v2-article .adc-cost-table__table thead th:nth-child(2),
.br-v2-article .adc-cost-table__table thead th:nth-child(3),
.br-v2-article .adc-cost-table__table thead th:nth-child(4) { color: var(--brv2-white) !important; text-align: right !important; }
.br-v2-article .adc-cost-table__table tbody td {
    font-family: var(--brv2-font-body) !important; padding: 16px 18px !important; border-bottom: 1px solid var(--brv2-gray-100) !important; color: var(--brv2-gray-700) !important;
    font-size: 1.0625rem !important; vertical-align: middle !important;
}
.br-v2-article .adc-cost-table__table tbody td.adc-cost-table__acd,
.br-v2-article .adc-cost-table__table tbody td.adc-cost-table__us {
    text-align: right !important; font-variant-numeric: tabular-nums !important;
}
.br-v2-article .adc-cost-table__table tbody td.adc-cost-table__savings {
    text-align: center !important; vertical-align: middle !important; font-variant-numeric: tabular-nums !important;
}
.br-v2-article .adc-cost-table__table tbody tr:last-child td { border-bottom: none !important; }
.br-v2-article .adc-cost-table__table tbody tr:hover td { background: var(--brv2-primary-light) !important; }
.br-v2-article .adc-cost-table__subtitle { display: block !important; font-size: 0.875rem !important; color: var(--brv2-gray-500) !important; margin-top: 2px !important; }
/* Algodones price column is the one number this whole table exists to
   sell — bold and larger than the rest of the row, not just a plain
   cell like the other three columns. */
.br-v2-article .adc-cost-table__table .adc-cost-table__acd {
    font-family: var(--brv2-font-display) !important; font-weight: 800 !important; font-size: 1.25rem !important; color: #0f4c9c !important; white-space: nowrap !important;
}
.br-v2-article .adc-cost-table__table .adc-cost-table__name { font-size: 1.125rem !important; font-weight: 700 !important; color: var(--brv2-gray-900) !important; }
.br-v2-article .adc-cost-table__table .adc-cost-table__us { color: #a3adbf !important; font-size: 1.0625rem !important; }
.br-v2-article .adc-cost-table__table .adc-cost-table__us del { text-decoration-color: #a3adbf !important; }
/* REV — was display:inline-block !important directly on the <td>
   itself (the .adc-cost-table__savings class lived on the cell, not
   a child element). Forcing inline-block on a table cell makes the
   browser generate an invisible anonymous table-cell box to keep the
   column grid intact, with this element's own box shrink-wrapped and
   centered inside it — so the pill painted correctly, but the row's
   hover tint (which targets real <td> boxes) had no visible cell left
   to color around it: hovering the row visibly tinted the other three
   columns but this one looked frozen. Moving the pill styling onto a
   real child <span> (adc-cost-table__savings-pill) lets the <td>
   behave like a normal cell again — full column now tints on hover
   same as the rest of the row, with the pill just riding along inside
   it. */
.br-v2-article .adc-cost-table__table .adc-cost-table__savings-pill {
    color: #157a3d !important; font-weight: 800 !important; font-size: 1.0625rem !important;
    background: #e9f7ee !important; padding: 8px 18px !important; line-height: 1 !important;
    border-radius: 999px !important; display: inline-block !important; white-space: nowrap !important;
    vertical-align: middle !important; transition: background 0.15s !important;
}
.br-v2-article .adc-cost-table__table tbody tr:hover .adc-cost-table__savings-pill { background: #a7e8bc !important; }
/* The badge's own text is just the percentage — "off" is a separate,
   smaller/lighter suffix, not part of the same bold number. */
.br-v2-article .adc-cost-table__table .adc-cost-table__savings-pill::after {
    content: " off" !important; font-weight: 600 !important; font-size: 0.8125rem !important;
}

@media (max-width: 640px) {
    .br-v2-article .adc-cost-table__table { display: none !important; }
    .br-v2-article .adc-cost-table__cards { display: flex !important; flex-direction: column !important; gap: 0.75rem !important; }
    .br-v2-article .adc-cost-table__card {
        background: var(--brv2-white) !important; border: 1px solid var(--brv2-gray-200) !important;
        border-radius: var(--brv2-radius-md) !important; padding: 1rem !important; box-shadow: var(--brv2-shadow-sm) !important;
    }
    .br-v2-article .adc-cost-table__card-head {
        display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 0.75rem !important;
    }
    .br-v2-article .adc-cost-table__card-title { font-family: var(--brv2-font-display) !important; font-weight: 700 !important; font-size: 0.95rem !important; color: var(--brv2-gray-900) !important; }
    .br-v2-article .adc-cost-table__card-subtitle { font-size: 0.78rem !important; color: var(--brv2-gray-400) !important; margin-top: 0.1rem !important; }
    .br-v2-article .adc-cost-table__card-savings {
        flex: none !important; background: var(--brv2-success-bg) !important; color: var(--brv2-success) !important;
        font-size: 0.72rem !important; font-weight: 700 !important; padding: 0.25rem 0.6rem !important; border-radius: var(--brv2-radius-full) !important;
    }
    .br-v2-article .adc-cost-table__card-savings::after { content: " off" !important; font-weight: 600 !important; }
    .br-v2-article .adc-cost-table__card-prices {
        display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 0.75rem !important;
        margin-top: 0.75rem !important; padding: 0.65rem 0.85rem !important;
        background: var(--brv2-primary-light) !important; border-radius: var(--brv2-radius-md) !important;
    }
    .br-v2-article .adc-cost-table__card-us { font-size: 0.78rem !important; color: var(--brv2-gray-500) !important; }
    .br-v2-article .adc-cost-table__card-us del { color: var(--brv2-gray-400) !important; }
    .br-v2-article .adc-cost-table__card-price { font-family: var(--brv2-font-display) !important; font-weight: 700 !important; font-size: 1.25rem !important; color: #0f4c9c !important; }
}

/* Tags */
.br-v2-tags {
    display: flex !important; flex-wrap: wrap !important; gap: 0.5rem !important;
    margin-top: 3rem !important; padding-top: 2rem !important;
    border-top: 1px solid var(--brv2-gray-200) !important;
}
.br-v2-tag {
    padding: 0.5rem 1rem !important; background: var(--brv2-gray-100) !important;
    color: var(--brv2-gray-700) !important; border-radius: var(--brv2-radius-full) !important;
    font-size: 0.875rem !important; text-decoration: none !important;
    border: 1px solid var(--brv2-gray-200) !important; transition: all 0.2s !important;
}
.br-v2-tag:hover {
    background: var(--brv2-primary) !important; color: var(--brv2-white) !important;
    border-color: var(--brv2-primary) !important;
}

/* Share */
.br-v2-share {
    display: flex !important; align-items: center !important; gap: 0.75rem !important;
    margin-top: 2rem !important; padding-top: 2rem !important;
    border-top: 1px solid var(--brv2-gray-200) !important;
}
.br-v2-share__btn {
    display: inline-flex !important; align-items: center !important; gap: 0.375rem !important;
    padding: 0.5rem 1rem !important; background: var(--brv2-gray-100) !important;
    color: var(--brv2-gray-700) !important; border: 1px solid var(--brv2-gray-200) !important;
    border-radius: var(--brv2-radius-md) !important; font-size: 0.875rem !important;
    text-decoration: none !important; cursor: pointer !important; transition: all 0.2s !important;
}
.br-v2-share__btn:hover {
    background: var(--brv2-primary) !important; color: var(--brv2-white) !important;
}

/* Author Box */
.br-v2-author {
    display: flex !important; gap: 2rem !important; margin-top: 3rem !important;
    padding: 2rem !important; background: linear-gradient(135deg, var(--brv2-gray-50), var(--brv2-white)) !important;
    border-radius: var(--brv2-radius-lg) !important; border: 1px solid var(--brv2-gray-200) !important;
}
.br-v2-author__img {
    flex-shrink: 0 !important; width: 100px !important; height: 100px !important;
    border-radius: 50% !important; overflow: hidden !important;
    border: 3px solid var(--brv2-primary) !important; box-shadow: var(--brv2-shadow-md) !important;
}
.br-v2-author__img img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.br-v2-author__name {
    font-family: var(--brv2-font-display) !important; font-size: 1.25rem !important;
    font-weight: 600 !important; color: var(--brv2-gray-900) !important;
    text-decoration: none !important; display: block !important;
}

/* Related Posts */
.br-v2-related { margin-top: 5rem !important; }
.br-v2-related__heading {
    font-family: var(--brv2-font-display) !important; font-size: 1.5rem !important;
    color: var(--brv2-gray-900) !important; margin-bottom: 2rem !important;
}
.br-v2-related__grid {
    display: grid !important; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
    gap: 1.5rem !important;
}
.br-v2-related__card {
    display: flex !important; flex-direction: column !important; background: var(--brv2-white) !important;
    border-radius: var(--brv2-radius-md) !important; overflow: hidden !important;
    text-decoration: none !important; border: 1px solid var(--brv2-gray-200) !important;
    transition: all 0.3s !important;
}
.br-v2-related__card:hover { transform: translateY(-4px) !important; box-shadow: var(--brv2-shadow-lg) !important; }

/* Sidebar */
/* top offset includes --brv2-anchor-bar-height (set by
   initAnchorBarHeightVar() in blog-redesign.js from the anchor pill
   bar's real rendered height) — without it this sticks at the same
   24px offset as the anchor bar's own top:12px stick point, so the
   two sticky elements land almost on top of each other and the bar
   covers this card's top edge for as long as both are stuck near the
   top of the viewport, i.e. most of the scroll through the article. */
.br-v2-sidebar__sticky {
    position: sticky !important; top: calc(var(--brv2-anchor-bar-height, 0px) + 24px) !important; display: flex !important;
    flex-direction: column !important; gap: 1.25rem !important;
}

/* The sidebar's one job: a persistent, always-visible quote form —
   replaces the old "click to scroll up to the hero form" CTA card. Same
   card treatment the hero form used to have (white, bordered, shadow-lg)
   now lives here since this is the form's only home on the page. */
.br-v2-sidebar-form {
    background: var(--brv2-white) !important; border: 1px solid var(--brv2-gray-200) !important;
    border-radius: var(--brv2-radius-xl) !important; box-shadow: var(--brv2-shadow-xl) !important;
    overflow: hidden !important;
}
.br-v2-sidebar-form__head { padding: 1.5rem 1.5rem 0.5rem !important; text-align: center !important; }
.br-v2-sidebar-form__head h3 {
    font-family: var(--brv2-font-display) !important; font-size: 1.375rem !important; line-height: 1.75rem !important; font-weight: 700 !important;
    color: var(--brv2-gray-900) !important; margin: 0 !important; letter-spacing: -0.01em !important; text-align: center !important;
}
.br-v2-sidebar-form form { padding: 0.5rem 1.5rem 1.5rem !important; }

/* [mtcform] reskin — the shortcode ships its own inline <style> block
   (a hardcoded #1f4ba0 blue box, a duplicate white "Get FREE
   Consultation" heading, a red pill button) that rendered as a second,
   visually unrelated form stacked under our card head. That inline
   <style> sits later in the document than this stylesheet's <link>, so
   at equal specificity it wins the cascade — every override here needs
   !important to actually take. Goal: one seamless white card, our head
   copy is the only heading, inputs sit on our neutral scale, and the
   submit button reads as the same accent already used for every other
   CTA on the page. */
.br-v2-sidebar-form .mtc-form-wrapper { max-width: none !important; }
.br-v2-sidebar-form .mtc-form-wrapper .title,
.br-v2-sidebar-form .mtc-form-wrapper .mtc-form-header,
.br-v2-sidebar-form .mtc-form-wrapper .underline { display: none !important; }
/* NOTE: .mtc-form-wrapper .mtc-form (0,0,2,0) outranks .br-v2-sidebar-form
   form (0,0,1,1) even with matching !important, so the real padding has
   to be set HERE, not left to that other rule — an earlier version set
   padding:0 here, which silently cancelled the card's inner padding and
   made the fields sit flush against the card edges. */
.br-v2-sidebar-form .mtc-form-wrapper .mtc-form {
    background: transparent !important; padding: 0.25rem 1.5rem 1.5rem !important; border-radius: 0 !important;
    border: 0 !important; box-shadow: none !important; /* the site-wide card (style.css) — already inside our card */
}
.br-v2-sidebar-form .mtc-form-wrapper .form-group { margin-bottom: 0.85rem !important; }
.br-v2-sidebar-form .mtc-form-wrapper .form-group label {
    color: var(--brv2-gray-500) !important; font-family: var(--brv2-font-body) !important;
}
.br-v2-sidebar-form .mtc-form-wrapper .form-group input,
.br-v2-sidebar-form .mtc-form-wrapper .form-group textarea,
.br-v2-sidebar-form .mtc-form-wrapper .form-group select {
    background: var(--brv2-gray-50) !important; border: 1.5px solid var(--brv2-gray-200) !important;
    border-radius: var(--brv2-radius-md) !important; font-family: var(--brv2-font-body) !important;
    color: var(--brv2-gray-900) !important; box-shadow: none !important;
    transition: border-color 0.2s ease, background 0.2s ease !important;
}
.br-v2-sidebar-form .mtc-form-wrapper .form-group input:focus,
.br-v2-sidebar-form .mtc-form-wrapper .form-group textarea:focus,
.br-v2-sidebar-form .mtc-form-wrapper .form-group select:focus {
    background: var(--brv2-white) !important; border-color: var(--brv2-primary) !important; outline: none !important;
}
.br-v2-sidebar-form .mtc-form-wrapper .iti__selected-country {
    background: var(--brv2-gray-50) !important; border-radius: var(--brv2-radius-md) 0 0 var(--brv2-radius-md) !important;
}
.br-v2-sidebar-form .mtc-form-wrapper .languages_options label,
.br-v2-sidebar-form .mtc-form-wrapper .form-group.languages_spoken_cover > label {
    color: var(--brv2-gray-600) !important;
}
.br-v2-sidebar-form .mtc-form-wrapper input[type="submit"] {
    background: var(--brv2-coral) !important; border-radius: 20px !important;
    font-family: var(--brv2-font-display) !important; font-weight: 600 !important;
    letter-spacing: 0.01em !important; box-shadow: var(--brv2-shadow-sm) !important;
    transition: background 0.2s ease !important;
}
.br-v2-sidebar-form .mtc-form-wrapper input[type="submit"]:hover,
.br-v2-sidebar-form .mtc-form-wrapper input[type="submit"]:focus {
    background: var(--brv2-coral-dark) !important; color: var(--brv2-white) !important;
}
.br-v2-sidebar-form .mtc-form-wrapper .footer { color: var(--brv2-gray-500) !important; }

/* Mobile Bar */
.br-v2-mobile-bar {
    position: fixed !important; bottom: 0 !important; left: 0 !important; width: 100% !important;
    background: rgba(255,255,255,0.95) !important; backdrop-filter: blur(12px) !important;
    box-shadow: 0 -8px 24px rgba(0,0,0,0.08) !important; display: flex !important;
    padding: 0.75rem 1rem !important; gap: 0.75rem !important; z-index: 9999 !important;
    transform: translateY(100%) !important; transition: transform 0.35s !important;
}
.br-v2-mobile-bar.is-visible { transform: translateY(0) !important; }
.br-v2-mobile-bar__btn {
    flex: 1 !important; display: flex !important; align-items: center !important;
    justify-content: center !important; gap: 0.5rem !important; padding: 0.75rem !important;
    border-radius: 20px !important; text-decoration: none !important;
    font-size: 0.9375rem !important; font-weight: 600 !important;
}
.br-v2-mobile-bar__btn--primary {
    background: var(--brv2-primary) !important; color: var(--brv2-white) !important;
}
.br-v2-mobile-bar__btn--secondary {
    background: var(--brv2-gray-100) !important; color: var(--brv2-gray-700) !important;
}

/* ==========================================================================
   EMBEDDED CPT CARDS — doctor / package / clinic / hotel cards inserted
   into post content via the [pb_custom_blocks] shortcode.

   That shortcode already handles single vs. multiple correctly on its
   own (pb-custom-block-views/class-pb-custom-block-views.php,
   render_group()): [pb_custom_blocks id="123"] renders one raw card,
   [pb_custom_blocks ids="1,2"] wraps two in .pbcb-multi--columns, and
   three or more get .pbcb-multi--carousel with its own nav/track — the
   grid/carousel MECHANICS are already built and already responsive
   (pb-custom-block-views/views-extra.css). What follows only reskins
   the cards' colors/type/spacing to match this template's premium
   palette instead of the plugin's generic default look, and widens
   the multi-card layouts slightly beyond the 720px prose column so
   2-3 cards don't feel cramped.

   Specificity note: the plugin's own CSS intentionally doubles its
   class selectors (".card-doctor-landscape.card-doctor-landscape") to
   win over other rules. Every override below does the same so it
   can't lose that fight regardless of stylesheet load order — the
   same fix already applied to the homepage's own doctor cards
   (assets/css/home-redesign.css's .adc-doc-card system) after that
   exact collision caused visible styling bugs there.
   ========================================================================== */

.br-v2-article .pbcb-multi.pbcb-multi {
    margin: 2.5rem 0 !important;
}
.br-v2-article .pbcb-multi__grid.pbcb-multi__grid {
    display: grid !important; gap: 1.5rem !important;
    grid-template-columns: repeat(var(--pbcb-cols, 2), 1fr) !important;
}
@media (max-width: 640px) {
    .br-v2-article .pbcb-multi__grid.pbcb-multi__grid { grid-template-columns: 1fr !important; }
}
/* The theme's global button reset (15px/35px padding, no fixed width)
   was beating the plugin's own 40x40 circle, so the rendered button was
   a ~72x40 oval with an off-center glyph — this forces true geometry
   and swaps the ‹ › text glyph for a drawn chevron so it can't ever be
   thrown off by font metrics again. */
.br-v2-article .pbcb-carousel__nav.pbcb-carousel__nav {
    width: 44px !important; height: 44px !important; aspect-ratio: 1 / 1 !important;
    padding: 0 !important; margin: 0 !important; flex: none !important;
    box-sizing: border-box !important; font-size: 0 !important; line-height: 1 !important;
    background: var(--brv2-white) !important; border: 1.5px solid var(--brv2-gray-200) !important;
    color: var(--brv2-gray-700) !important; box-shadow: var(--brv2-shadow-md) !important;
    position: absolute !important; top: 50% !important; transform: translateY(-50%) !important;
}
.br-v2-article .pbcb-carousel__nav.pbcb-carousel__nav::before {
    content: "" !important; display: block !important;
    width: 9px !important; height: 9px !important;
    border-top: 2.5px solid currentColor !important; border-right: 2.5px solid currentColor !important;
}
.br-v2-article .pbcb-carousel__nav--prev.pbcb-carousel__nav--prev::before { transform: rotate(-135deg) translate(1px, -1px) !important; }
.br-v2-article .pbcb-carousel__nav--next.pbcb-carousel__nav--next::before { transform: rotate(45deg) translate(-1px, -1px) !important; }
.br-v2-article .pbcb-carousel__nav.pbcb-carousel__nav:hover {
    background: var(--brv2-primary) !important; border-color: var(--brv2-primary) !important; color: var(--brv2-white) !important;
}
.br-v2-article .pbcb-carousel__nav.pbcb-carousel__nav[disabled] { opacity: 0.35 !important; box-shadow: none !important; }

/* Doctor card's inner details column ships with overflow-y:scroll and
   max-height:min-content — the "scroll" value forces a visible native
   scrollbar track (with its up/down arrow buttons) even when the
   content fits, and min-content means the box height jumps around per
   card. Give it one fixed height and an invisible-but-functional
   scrollbar instead. */
/* Was ALSO scrolling (max-height:340px) nested inside
   .card-doctor-landscape__details' own scroll container below — two
   scrollable boxes nested inside each other is why the scroll "didn't
   work": wheel/touch input landed on whichever one intercepted it
   first, and this inner one's own scrollbar was hidden too, so there
   was no visible affordance either way. Only the outer container
   scrolls now. */
.br-v2-article .card-doctor-warppper.card-doctor-warppper {
    max-height: none !important; overflow: visible !important;
}

/* ---- Doctor card ---- */
/* The plugin's own style.css sets .card-doctor-landscape.card-doctor-landscape
   { font-family: "Segoe UI", Arial, sans-serif } — a direct match, not
   inherited, so it beats our Arial-everywhere rule on .br-v2-wrapper
   regardless of specificity (a direct rule always wins over an
   inherited one). The whole card silently fell back to Segoe UI. */
.br-v2-article .card-doctor-landscape.card-doctor-landscape {
    margin: 2rem 0 !important; background: var(--brv2-white) !important;
    border: 1px solid var(--brv2-gray-200) !important; border-radius: var(--brv2-radius-xl) !important;
    box-shadow: var(--brv2-shadow-sm) !important; overflow: hidden !important;
    transition: box-shadow 0.25s, transform 0.25s !important;
    font-family: var(--brv2-font-body) !important;
}
.br-v2-article .card-doctor-landscape.card-doctor-landscape:hover {
    box-shadow: var(--brv2-shadow-lg) !important; transform: translateY(-3px) !important;
}
/* REV 10 — matches the mockup's layout exactly: a compact 80x80 square
   (rounded-2xl) photo sits INLINE beside the name/badge/specialization
   block, in a flex row padded like the mockup's p-6 card interior —
   not a full-width circular photo centered above the name. doctor.php
   now nests the name block inside .card-doctor-landscape__info
   alongside the photo so both can sit in the same flex row. */
.br-v2-article .card-doctor-landscape.card-doctor-landscape .card-doctor-landscape__info {
    height: auto !important; min-height: 0 !important; padding: 1.5rem 1.5rem 0 !important; position: static !important;
    display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 1rem !important;
}
.br-v2-article .card-doctor-landscape.card-doctor-landscape .card-doctor-landscape__info::after {
    display: none !important;
}
.br-v2-article .card-doctor-landscape.card-doctor-landscape .card-doctor-landscape__info__image {
    position: static !important; transform: none !important; left: auto !important; bottom: auto !important;
    width: 80px !important; height: 80px !important; aspect-ratio: 1 / 1 !important; flex: none !important;
    border-radius: 50% !important; background: var(--brv2-primary) !important;
    border: 2px solid var(--brv2-primary-light) !important; box-sizing: border-box !important; overflow: hidden !important;
}
.br-v2-article .card-doctor-landscape.card-doctor-landscape .card-doctor-landscape__info__image img {
    width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: top center !important;
    border-radius: 50% !important;
}
.br-v2-article .card-doctor-landscape.card-doctor-landscape .card-doctor-landscape__info__name {
    flex: 1 1 auto !important; min-width: 0 !important;
}
/* Qualification + years badge — now sits above the name (moved there
   in doctor.php) instead of overlaid on the photo; light blue pill
   instead of solid navy, matching the reference. */
.br-v2-article .card-doctor__available-badge.card-doctor__available-badge {
    /* The plugin's original rule (written for when this badge floated
       over the photo) sets position:absolute; top/left:12px — moving
       the badge in doctor.php's markup doesn't touch that, so without
       resetting position here it kept rendering pinned to the card's
       top-left corner, overlapping the name, regardless of where it
       actually sits in the DOM now. */
    position: static !important;
    display: inline-block !important; background: var(--brv2-primary-light) !important; color: var(--brv2-primary) !important;
    font-family: var(--brv2-font-body) !important; font-size: 0.68rem !important;
    font-weight: 700 !important; letter-spacing: 0.02em !important;
    padding: 3px 10px !important; border-radius: var(--brv2-radius-full) !important;
    border: none !important; margin: 0 0 0.35rem !important;
}
.br-v2-article .card-doctor__available-badge.card-doctor__available-badge:empty {
    display: none !important;
}
/* The plugin has several competing .dv-name-group rules for other
   card style variants across the site — explicitly forcing column
   here guarantees name / badge / specialization stack as three
   separate lines on THIS card regardless of which one would otherwise
   win. */
.br-v2-article .card-doctor-landscape.card-doctor-landscape .dv-name-group {
    display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 0 !important;
}
.br-v2-article .dv-doctor-name.dv-doctor-name {
    font-family: var(--brv2-font-display) !important; font-size: 1.2rem !important;
    font-weight: 600 !important; color: var(--brv2-gray-900) !important;
}
/* Plain text, not a pill — the plugin's default wraps this in the
   exact same reddish-tinted pill box as the availability badge
   (padding, border-radius:20px, rgba(208,0,15,...) background/border),
   same "stray red mark" pattern already fixed on that badge. The
   reference design shows this as a plain line of gray text under the
   badge, not another chip. */
.br-v2-article .card-doctor-landscape.card-doctor-landscape .card-doctor-landscape__info__specialization {
    display: block !important; padding: 0 !important; border: none !important; background: none !important;
    border-radius: 0 !important; width: auto !important; margin-top: 0.35rem !important;
}
.br-v2-article .card-doctor-landscape__info__specialization.card-doctor-landscape__info__specialization h5 {
    font-family: var(--brv2-font-body) !important; font-size: 0.86rem !important;
    color: var(--brv2-gray-500) !important; font-weight: 500 !important; margin: 0 !important;
}
.br-v2-article .card-doctor__divider.card-doctor__divider {
    border-top: 1px solid var(--brv2-gray-200) !important; margin: 14px 0 !important;
}
/* Cards were only as short as their longest doctor's bio — one card
   with a brief Expertise/Education list and its neighbor with a much
   longer one made the row look mismatched and pushed both "Book
   Appointment" buttons out of alignment. Capping the details column's
   height and scrolling it internally (same hidden-scrollbar technique
   as .card-doctor-warppper above) keeps every card the same height
   with its own footer always visible, without a visible scrollbar
   competing with the card's own design. */
.br-v2-article .card-doctor-landscape__details.card-doctor-landscape__details {
    max-height: 340px !important; overflow-y: auto !important;
    scrollbar-width: none !important; -ms-overflow-style: none !important;
}
.br-v2-article .card-doctor-landscape__details.card-doctor-landscape__details::-webkit-scrollbar {
    display: none !important; width: 0 !important; height: 0 !important;
}
.br-v2-article .card-doctor__section-label.card-doctor__section-label {
    font-family: var(--brv2-font-body) !important; font-size: 0.64rem !important;
    text-transform: uppercase !important; letter-spacing: 0.06em !important;
    color: var(--brv2-gray-400) !important; font-weight: 700 !important;
}
/* Was standing out from the Education/Associations list right below
   it — bigger text and no bullet made it read as a separate,
   different kind of block instead of the same card. Matched to the
   same size/weight/color as that list now. */
/* Matches the Education/Associations *list items* right below it
   (.card-doctor-landscape__details__extra_info li, 13px from the
   plugin's own default) — not the extra_info container itself, whose
   18px only ever applies to that div's own direct text, never to its
   nested <li>s, so matching against it left this bigger than what
   people actually see printed below it. */
.br-v2-article .card-doctor-landscape__details__expertise.card-doctor-landscape__details__expertise,
.br-v2-article .card-doctor-landscape__details__expertise.card-doctor-landscape__details__expertise li {
    font-size: 0.8125rem !important; color: var(--brv2-gray-700) !important; line-height: 1.5 !important; font-weight: 400 !important;
}
/* "Extra Info for Doctor Card" (the doctor's Education/Associations
   text) is a free WYSIWYG field, not separate structured fields like
   Expertise — whoever wrote a doctor's bio just bolded "Education"/
   "Associations" as plain paragraph text, which inherited the
   article's default bold-text styling instead of matching the
   properly-labeled "Expertise" heading above it (small, uppercase,
   gray) elsewhere on the same card. Restyling <strong> here to match
   keeps the card visually consistent without rewriting every doctor's
   bio into structured fields. */
.br-v2-article .card-doctor-landscape__details__extra_info.card-doctor-landscape__details__extra_info {
    font-size: var(--brv2-text-base) !important; color: var(--brv2-gray-700) !important; line-height: 1.55 !important;
    margin-top: 0.75rem !important;
}
.br-v2-article .card-doctor-landscape__details__extra_info.card-doctor-landscape__details__extra_info strong,
.br-v2-article .card-doctor-landscape__details__extra_info.card-doctor-landscape__details__extra_info b {
    display: block !important; font-family: var(--brv2-font-body) !important; font-size: 0.64rem !important;
    text-transform: uppercase !important; letter-spacing: 0.06em !important;
    color: var(--brv2-gray-400) !important; font-weight: 700 !important; margin-top: 0.75rem !important;
}
.br-v2-article .card-doctor-landscape__details__extra_info.card-doctor-landscape__details__extra_info strong:first-child,
.br-v2-article .card-doctor-landscape__details__extra_info.card-doctor-landscape__details__extra_info b:first-child {
    margin-top: 0 !important;
}
.br-v2-article .card-doctor-landscape__details__extra_info.card-doctor-landscape__details__extra_info p { margin: 0 !important; }
.br-v2-article .card-doctor-landscape__details__extra_info.card-doctor-landscape__details__extra_info ul { list-style: none !important; margin: 0.4rem 0 0 !important; padding: 0 !important; }
/* The Education/Associations <li>s had no color of their own, so they
   fell back to the article's global checkmark-list color (gray-900,
   the same near-black used for the doctor's NAME) instead of this
   card's own body-text color (gray-700, same as Expertise right
   above it) — read as noticeably darker/heavier than everything
   around it. */
.br-v2-article .card-doctor-landscape__details__extra_info.card-doctor-landscape__details__extra_info ul li { color: var(--brv2-gray-700) !important; }
.br-v2-article .card-doctor__btn-primary.card-doctor__btn-primary {
    background: var(--brv2-primary) !important; color: var(--brv2-white) !important;
    font-family: var(--brv2-font-body) !important; font-weight: 600 !important;
    border-radius: 20px !important; text-decoration: none !important;
    transition: background 0.15s !important;
}
.br-v2-article .card-doctor__btn-primary.card-doctor__btn-primary:hover { background: var(--brv2-primary-dark) !important; }
.br-v2-article .card-doctor__btn-secondary.card-doctor__btn-secondary {
    border: 1.5px solid var(--brv2-gray-300) !important; color: var(--brv2-gray-700) !important;
    font-family: var(--brv2-font-body) !important; font-weight: 600 !important;
    border-radius: var(--brv2-radius-md) !important; text-decoration: none !important;
}
/* Now a single full-width button (the "View Profile" secondary button
   was dropped in doctor.php — it pointed at the same #form anchor as
   this one anyway), matching the mockup's one-button-per-card footer. */
/* Sticky within .card-doctor-landscape__details' own scroll box (see
   above) so the button stays pinned in view while the Expertise/
   Education/Associations content above it scrolls, instead of
   scrolling out of view along with everything else. */
.br-v2-article .card-doctor__footer.card-doctor__footer {
    display: flex !important; padding: 1rem 1.5rem !important;
    position: sticky !important; bottom: 0 !important; background: var(--brv2-white) !important;
    border-top: 1px solid var(--brv2-gray-100) !important;
}
.br-v2-article .card-doctor__footer.card-doctor__footer .card-doctor__btn-primary {
    display: flex !important; align-items: center !important; justify-content: center !important;
    width: 100% !important; padding: 0.65rem 1rem !important; text-align: center !important;
    font-size: 0.8125rem !important;
}

/* ---- Package card ---- */
/* The plugin's own package markup (pb-custom-block-views/views/package.php)
   has no badge/eyebrow element and no price+badge row — it's shared by
   the homepage and page-dental-packages.php too, so adding new markup
   there would leak an unstyled element onto pages this template never
   touches. A colored 2px border is the mockup's "featured package"
   signal we CAN reproduce with CSS alone, on the existing elements. */
/* REV — flex column so the button/footer can pin to the bottom
   (align-self: stretch on siblings of unequal bullet-list length —
   without this, whichever package has fewer inclusions gets a button
   that floats mid-card instead of lining up with its neighbor's) plus
   a colored top accent bar so every card reads as "branded" even
   before an editor fills in the optional highlight badge text. */
/* Cards render inside .pbcb-carousel__track / .pbcb-multi__item — a
   flex row with align-items:start (shared plugin markup, not
   something to override generically), so the wrapper never stretches
   items to a common height; each card is only ever as tall as its own
   content. flex column + margin-top:auto on the button still resolves
   correctly (just with no extra space to distribute when content is
   short), so it's harmless to keep for the day these DO render in a
   stretch context (e.g. .pbcb-multi's "columns" layout for exactly
   2 items). */
/* REV 2 — full redesign so this reads as an actual travel/treatment
   package card (photo up top, then what/where/how-much/what's-
   included in that order) instead of a plain price-then-list block.
   The plugin's own markup order is fixed (badge, price, image, title,
   location, bullets, expiry, button, footer — package.php in
   pb-custom-block-views/views), so every piece below is reordered
   visually with flex `order` rather than touching that shared file:
   badge(1) → image(2) → title(3) → location(4) → price(5) →
   bullets(6) → expiry(7) → button(8, via margin-top:auto) →
   footer(9). This also fixes source order being a poor reading
   order for screen readers/SEO (price before you even know what
   package it's for) without needing to edit the plugin. */
/* REV 4 — dropped the odd/even blue-vs-coral alternation entirely:
   card border, top accent bar, badge and button are now always
   coral, consistently across every package card. */
/* REV 5 — red is CTA-only on this template now: the card's own
   border/accent bar (not a call to action, just decoration) moved to
   blue, and only the "Book Now" button below stays coral. */
/* REV 6 — full re-match to a specific reference screenshot: a plain
   card (light blue border, no accent bar) with a two-badge eyebrow row
   (highlight label left, optional "Most Popular" pill right), the
   price struck-through/large-red/savings-pill stack (same visual
   language as the standalone Cost Highlight element), and plain blue
   checkmarks instead of filled circles. */
.br-v2-article .card-package.card-package {
    background: var(--brv2-white) !important; border: 1px solid var(--brv2-gray-200) !important;
    border-radius: var(--brv2-radius-xl) !important; box-shadow: var(--brv2-shadow-sm) !important;
    overflow: hidden !important; padding: 1.25rem 1.5rem 1.5rem !important; text-align: left !important;
    display: flex !important; flex-direction: column !important; height: 100% !important;
    box-sizing: border-box !important; position: relative !important;
    transition: box-shadow 0.25s, transform 0.25s, border-color 0.25s !important;
}
.br-v2-article .card-package.card-package:hover {
    box-shadow: var(--brv2-shadow-lg) !important; transform: translateY(-3px) !important;
    border-color: var(--brv2-primary-accent) !important;
}
/* justify-content was space-between, which reads fine with exactly
   one badge on each side but looks like a stray centered orphan once
   a long highlight name forces the expiry pill onto its own second
   line on a narrow card (each wrapped line only has one item, so
   space-between has nothing to "space" and the badge just floats).
   flex-start keeps both badges left-aligned and reading as one
   coherent group regardless of how they wrap. */
.br-v2-article .card-package.card-package .package-badges-row {
    order: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important;
    flex-wrap: wrap !important; gap: 0.5rem !important; margin-bottom: 0.6rem !important;
}
/* Highlight badge hidden — the long uppercase package name was the
   whole reason this row kept wrapping awkwardly on narrow cards.
   Just the expiry pill now, centered on its own. */
/* REV 9 — matches the mockup's category eyebrow pill exactly (a small
   rounded-full badge, not plain text) — kept for reference, but
   hidden per explicit request below; the display:none HAS to come
   after this rule (same selector/specificity, later wins on a tie),
   not before it like the previous attempt — that's why hiding it
   didn't actually stick the first time. */
.br-v2-article .card-package.card-package .package-highlight-badge {
    display: inline-block !important; font-size: 0.68rem !important; font-weight: 700 !important; text-transform: uppercase !important;
    letter-spacing: 0.03em !important; color: var(--brv2-primary) !important; font-family: var(--brv2-font-body) !important;
    background: var(--brv2-primary-light) !important; padding: 0.25rem 0.65rem !important; border-radius: var(--brv2-radius-full) !important;
}
.br-v2-article .card-package.card-package .package-highlight-badge { display: none !important; }
.br-v2-article .card-package.card-package .package-popular-badge {
    display: inline-block !important; font-size: 0.68rem !important; font-weight: 700 !important;
    text-transform: uppercase !important; letter-spacing: 0.02em !important; color: var(--brv2-primary) !important;
    background: var(--brv2-primary-light) !important; border: 1px solid var(--brv2-primary-accent) !important;
    padding: 0.25rem 0.65rem !important; border-radius: var(--brv2-radius-full) !important; white-space: nowrap !important;
}
/* Full-bleed photo — negative margins cancel the card's own padding
   on the sides (top stays, so it drops in below the badge row instead
   of colliding with it). A package with no photo just skips straight
   to the title. */
.br-v2-article .card-package.card-package .image {
    order: 2 !important; margin: 0 -1.5rem 1rem !important; aspect-ratio: 4 / 3 !important; overflow: hidden !important;
}
.br-v2-article .card-package.card-package .image img {
    width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important;
}
.br-v2-article .card-package.card-package .title {
    order: 3 !important;
    font-family: var(--brv2-font-display) !important; font-size: 1.2rem !important; font-weight: 700 !important;
    color: var(--brv2-gray-900) !important; margin: 0 !important;
}
.br-v2-article .card-package.card-package .location {
    order: 4 !important; display: flex !important; align-items: center !important;
    gap: 4px !important; font-size: 0.78rem !important; color: var(--brv2-gray-500) !important; margin: 0.35rem 0 0 !important;
}
.br-v2-article .card-package.card-package .location .dvi-geo { color: var(--brv2-gray-400) !important; font-size: 0.9em !important; }
/* Price — plain background (no tinted box), struck-through US price
   small and muted with a literal " US" suffix, the real price large
   and RED (matches the standalone Cost Highlight element — this is a
   price-drop sticker, not a decorative outline, so it's exempt from
   "red is CTA-only"), then a dark "X% Savings" pill computed at
   runtime by initPackageCardEnhancements() (blog-redesign.js) from
   the same two prices already in the DOM. */
.br-v2-article .card-package.card-package .price {
    order: 5 !important;
    display: flex !important; align-items: baseline !important; gap: 6px !important; flex-wrap: wrap !important;
    margin: 0.9rem 0 0 !important;
}
/* REV 9 — matches the new Tailwind mockup's package price treatment:
   large price is dark on-surface (not a red "price-drop sticker"
   anymore), sitting inside a tinted price box with the struck-through
   US price beside it, and savings called out as a small coral line —
   the mockup's own `text-3xl font-extrabold text-on-surface` +
   `text-secondary` "Save $X" pairing. */
/* REV — was a single row (struck old price beside the big price),
   which reads as two competing numbers side by side. Old price is now
   a small eyebrow line ABOVE the real price, and the "Save X%" line
   (a sibling element right after .price, inserted by
   initPackageCardEnhancements()) already sits below it — old price on
   top, real price in the middle, savings on the bottom. */
/* REV — the nested rounded/bordered gray box read as a "card inside
   a card". Matched to the reference's own flat price-block treatment
   instead: no border/radius, just top+bottom hairlines and a tint,
   sitting flush with the rest of the card's padding — reads as a
   section of the card, not a separate boxed widget floating inside
   it. Tighter gap between the old-price eyebrow and the real price
   too (was too airy). */
.br-v2-article .card-package.card-package .price {
    order: 5 !important; flex-direction: column !important; align-items: center !important; gap: 0.1rem !important;
    background: var(--brv2-warm-white) !important; border: none !important;
    border-top: 1px solid var(--brv2-gray-200) !important; border-bottom: 1px solid var(--brv2-gray-200) !important;
    border-radius: 0 !important; padding: 0.9rem 0 !important; margin-left: -1.5rem !important; margin-right: -1.5rem !important;
    padding-left: 1.5rem !important; padding-right: 1.5rem !important; text-align: center !important;
}
.br-v2-article .card-package.card-package .price p {
    font-family: var(--brv2-font-display) !important; font-size: 2rem !important;
    font-weight: 700 !important; color: var(--brv2-gray-900) !important; margin: 0 !important;
    flex-basis: auto !important; order: 1 !important;
}
.br-v2-article .card-package.card-package .price p::before { content: "$" !important; }
.br-v2-article .card-package.card-package .price del {
    font-size: 1rem !important; font-weight: 500 !important; color: var(--brv2-gray-400) !important; order: 0 !important; flex-basis: auto !important;
}
.br-v2-article .card-package.card-package .price del::before { content: "$" !important; }
.br-v2-article .card-package.card-package .price del::after { content: " US" !important; }
.br-v2-article .card-package.card-package .price-unit {
    font-size: 0.8rem !important; font-weight: 500 !important; color: var(--brv2-gray-400) !important;
    flex-basis: 100% !important;
}
/* Now a child of .price (JS appends it there — see
   initPackageCardEnhancements() in blog-redesign.js) so it sits
   inside the same grey price block as the old/new price instead of
   floating below it as a separate element; order:2 places it after
   del(0)/p(1) within .price's own flex context. */
/* Light-green pill, matching the Cost Table's own savings badge
   convention (was plain colored text with no background). */
.br-v2-article .card-package.card-package .price-savings-line {
    order: 2 !important; align-self: center !important; margin: 0.4rem 0 0 !important;
    background: #e9f7ee !important; color: #157a3d !important;
    font-size: 0.78rem !important; font-weight: 700 !important; padding: 0.3rem 0.75rem !important;
    border-radius: 999px !important; display: inline-block !important;
}
/* Checklist capped and internally scrollable (same hidden-scrollbar
   technique as the doctor card bios) so a package with a long
   inclusions list doesn't stretch the whole card — every card in a
   row stays the same height regardless of how many bullets each one
   has. */
.br-v2-article .card-package.card-package ul {
    order: 7 !important;
    list-style: none !important; padding: 0 !important; margin: 1.1rem 0 0 !important; text-align: left !important;
    max-height: 190px !important; overflow-y: auto !important;
    scrollbar-width: none !important; -ms-overflow-style: none !important;
}
.br-v2-article .card-package.card-package ul::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }
.br-v2-article .card-package.card-package ul li {
    display: flex !important; align-items: flex-start !important; gap: 8px !important;
    font-size: 0.9375rem !important; color: var(--brv2-gray-600) !important; margin-bottom: 10px !important;
    padding-left: 0 !important; line-height: 1.4 !important;
}
.br-v2-article .card-package.card-package ul li strong { color: var(--brv2-gray-900) !important; font-weight: 700 !important; }
.br-v2-article .card-package.card-package ul li:last-child { margin-bottom: 0 !important; }
/* The plugin's own package markup already renders a checkmark glyph
   inside each <li> — the article-wide ul li::before green check
   (added for hand-written content lists) was stacking a second tick
   on top of it. Strip ours here so the plugin's is the only one. */
.br-v2-article .card-package.card-package ul li::before { content: none !important; }
/* Plain blue checkmark glyph — no filled circle behind it, matching
   the reference's simple ✓ style instead of the earlier badge-style
   icon. */
.br-v2-article .card-package.card-package ul li .dvi-done {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    color: var(--brv2-primary) !important; font-size: 15px !important; font-weight: 700 !important;
    flex: none !important; margin-top: 0.1em !important;
}
/* REV — was position:absolute, top-right of the whole card, sitting
   directly on top of the highlight badge (which is in-flow at that
   same spot) whenever both existed — the two visibly overlapped, and
   the highlight badge's text looked "cut off" underneath it. Now a
   normal flex child of .package-badges-row instead (which already
   has justify-content:space-between), so it takes the right side of
   that row on its own with no collision, regardless of how long the
   highlight badge's text is. Also one solid color throughout instead
   of red label text next to a dark, differently-colored date. */
.br-v2-article .card-package.card-package .package-expiry {
    display: inline-flex !important; align-items: center !important; gap: 0.3rem !important; flex: none !important;
    font-family: var(--brv2-font-body) !important; font-size: 0.7rem !important; color: var(--brv2-coral) !important; font-weight: 700 !important;
    background: var(--brv2-coral-light) !important; padding: 0.25rem 0.6rem !important; border-radius: var(--brv2-radius-full) !important;
    white-space: nowrap !important;
}
.br-v2-article .card-package.card-package .package-expiry::before { content: "\23F1"; }
/* Moved out of .package-badges-row to render after "*Terms and
   Conditions" instead — a direct flex child of .card-package now
   (order:10 is the footer's own order, so 11 puts this right after
   it), centered via align-self since the card's children otherwise
   stretch full width by default. */
.br-v2-article .card-package.card-package .package-expiry--footer {
    order: 11 !important; align-self: center !important; margin-top: 0.6rem !important;
}
/* width:100% + box-sizing:border-box on both rules below, not just
   display:block/text-align:center — the card's own layout (whatever it
   is under the hood) was sizing these two elements to shrink-wrap their
   text instead of stretching them, so they sat off-center with
   mismatched left/right gaps no matter what text-align said. Also
   .package-book-btn never had its own font-family, so it was silently
   inheriting the theme's global button font ("Google Sans") instead of
   this template's type system. */
/* order:8 + margin-top:auto pushes this to the bottom of the card's
   flex column regardless of how many bullets the package above it
   has, so two cards side by side always line their buttons up on the
   same baseline instead of whichever has fewer inclusions floating
   its button higher. */
.br-v2-article .card-package.card-package .package-book-btn {
    order: 9 !important;
    display: block !important; box-sizing: border-box !important; width: 100% !important;
    text-align: center !important; color: var(--brv2-white) !important;
    font-family: var(--brv2-font-body) !important; font-weight: 600 !important; text-decoration: none !important;
    border-radius: var(--brv2-radius-full) !important; padding: 0.8rem 1.25rem !important;
    margin: 1.25rem 0 0.75rem !important; box-shadow: var(--brv2-shadow-sm) !important; transition: background 0.15s, transform 0.15s !important;
}
.br-v2-article .card-package.card-package .package-book-btn:active { transform: scale(0.98) !important; }
.br-v2-article .card-package.card-package .package-book-btn { background: var(--brv2-coral) !important; border-radius: 20px !important; }
.br-v2-article .card-package.card-package .package-book-btn:hover { background: var(--brv2-coral-dark) !important; }
.br-v2-article .card-package.card-package .package-footer {
    order: 10 !important;
    display: block !important; box-sizing: border-box !important; width: 100% !important;
    text-align: center !important; font-size: 0.7rem !important; font-style: normal !important;
    color: var(--brv2-gray-400) !important; margin: 0 !important; padding-top: 0.75rem !important;
    border-top: 1px solid var(--brv2-gray-100) !important;
}

/* ---- Interaction states used by blog-redesign.js ---- */
.br-v2-share__btn.is-copied {
    background: var(--brv2-success) !important; color: var(--brv2-white) !important;
    border-color: var(--brv2-success) !important;
}
/* JS targets #form (the sidebar quote card) for the "flash" highlight
   when scrolled to via the mobile bar or an in-article CTA — this rule
   was still keyed to .br-v2-hero__form, a class that stopped existing
   when the hero form moved to the sidebar, so the flash never showed. */
.br-v2-sidebar-form.is-flashed {
    box-shadow: 0 0 0 3px var(--brv2-primary), var(--brv2-shadow-lg) !important;
}

/* ==========================================================================
   CLINIC & HOTEL CARDS — photo + overlay-caption pattern (these two views
   render a background photo with the name/rating/address/features caption
   layered on top, unlike doctor/package's side-by-side layout — reskinned
   to the same brand language rather than restructured, since the markup
   itself is fixed by clinic.php/hotel.php).
   ========================================================================== */
.br-v2-article .card-clinic-landscape.card-clinic-landscape,
.br-v2-article .card-hotel-landscape.card-hotel-landscape {
    margin: 2rem 0 !important; position: relative !important; overflow: hidden !important;
    border-radius: var(--brv2-radius-lg) !important; box-shadow: var(--brv2-shadow-sm) !important;
    border: 1px solid var(--brv2-gray-200) !important; background: var(--brv2-gray-100) !important;
    min-height: 320px !important;
}
.br-v2-article .card-clinic-landscape.card-clinic-landscape img,
.br-v2-article .card-hotel-landscape.card-hotel-landscape img {
    width: 100% !important; height: 100% !important; object-fit: cover !important;
}
.br-v2-article .card-clinic-landscape__info.card-clinic-landscape__info,
.br-v2-article .card-hotel-landscape__info.card-hotel-landscape__info {
    position: absolute !important; inset: 0 !important;
}
.br-v2-article .card-clinic-landscape__details.card-clinic-landscape__details,
.br-v2-article .card-hotel-landscape__details.card-hotel-landscape__details,
.br-v2-article .hotel_name_location.hotel_name_location {
    position: relative !important; z-index: 2 !important; margin-top: auto !important;
    padding: 20px 22px !important;
    background: linear-gradient(180deg, transparent, rgba(22,35,61,0.92)) !important;
    color: var(--brv2-white) !important;
}
.br-v2-article .card-clinic-landscape.card-clinic-landscape,
.br-v2-article .card-hotel-landscape.card-hotel-landscape { display: flex !important; flex-direction: column !important; }
.br-v2-article .cname, .br-v2-article .hname {
    font-family: var(--brv2-font-display) !important; font-weight: 600 !important;
    font-size: 1.2rem !important; color: var(--brv2-white) !important;
}
.br-v2-article .rating_number { font-weight: 700 !important; color: var(--brv2-white) !important; }
.br-v2-article .dvi-star { color: #FBBF24 !important; }
.br-v2-article .address { font-size: 0.85rem !important; color: rgba(255,255,255,0.85) !important; margin-top: 4px !important; }
.br-v2-article .features { display: flex !important; gap: 8px !important; margin-top: 10px !important; }
.br-v2-article .feature {
    width: 30px !important; height: 30px !important; border-radius: 50% !important;
    background: rgba(255,255,255,0.15) !important; display: flex !important;
    align-items: center !important; justify-content: center !important; color: var(--brv2-white) !important;
}
.br-v2-article .card-clinic-landscape__details__extra_info.card-clinic-landscape__details__extra_info,
.br-v2-article .card-hotel-landscape__details__bullets.card-hotel-landscape__details__bullets {
    font-size: 0.82rem !important; color: rgba(255,255,255,0.85) !important; margin-top: 8px !important;
}
.br-v2-article .mobile-image, .br-v2-article .desktop-image { position: absolute !important; inset: 0 !important; }
@media (min-width: 641px) { .br-v2-article .mobile-image { display: none !important; } }
@media (max-width: 640px) { .br-v2-article .desktop-image { display: none !important; } }

/* ==========================================================================
   NEW EDITORIAL COMPONENTS — inserted via shortcodes registered in
   inc/blog-redesign-shortcodes.php ([adc_key_takeaways], [adc_pros_cons],
   [adc_cta], [adc_faq]). Classic-editor-friendly: no blocks required.
   ========================================================================== */

/* Key Takeaways summary box */
.br-v2-article .adc-takeaways {
    margin: 2rem 0 !important; background: var(--brv2-gray-50) !important;
    border: 1px solid var(--brv2-gray-200) !important; border-left: 4px solid var(--brv2-primary) !important;
    border-radius: var(--brv2-radius-md) !important; padding: 1.25rem 1.5rem !important;
}
.br-v2-article .adc-takeaways__head {
    display: flex !important; align-items: center !important; gap: 0.6rem !important;
    font-family: var(--brv2-font-display) !important; font-weight: 600 !important;
    font-size: 1.02rem !important; color: var(--brv2-gray-900) !important; margin-bottom: 0.6rem !important;
}
.br-v2-article .adc-takeaways__body ul { margin: 0 !important; padding-left: 1.1rem !important; }
.br-v2-article .adc-takeaways__body li {
    font-size: 0.96rem !important; color: var(--brv2-gray-700) !important; margin-bottom: 0.4rem !important;
}

/* Pros / Cons comparison */
.br-v2-article .adc-proscons {
    display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 1px !important;
    margin: 2rem 0 !important; background: var(--brv2-gray-200) !important;
    border: 1px solid var(--brv2-gray-200) !important; border-radius: var(--brv2-radius-md) !important; overflow: hidden !important;
}
.br-v2-article .adc-proscons__col { background: var(--brv2-white) !important; padding: 1.25rem 1.4rem !important; }
.br-v2-article .adc-proscons__label {
    font-size: 0.72rem !important; font-weight: 700 !important; text-transform: uppercase !important;
    letter-spacing: 0.06em !important; margin-bottom: 0.6rem !important;
}
.br-v2-article .adc-proscons__col--pros .adc-proscons__label { color: var(--brv2-success) !important; }
.br-v2-article .adc-proscons__col--cons .adc-proscons__label { color: var(--brv2-coral) !important; }
.br-v2-article .adc-proscons__col ul { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.br-v2-article .adc-proscons__col li {
    font-size: 0.9rem !important; color: var(--brv2-gray-700) !important;
    padding-left: 1.3rem !important; position: relative !important; margin-bottom: 0.5rem !important;
}
.br-v2-article .adc-proscons__col--pros li::before {
    content: "+" !important; position: absolute !important; left: 0 !important; color: var(--brv2-success) !important; font-weight: 700 !important;
}
.br-v2-article .adc-proscons__col--cons li::before {
    content: "–" !important; position: absolute !important; left: 0 !important; color: var(--brv2-coral) !important; font-weight: 700 !important;
}
@media (max-width: 560px) { .br-v2-article .adc-proscons { grid-template-columns: 1fr !important; } }

/* Inline mid-article CTA banner */
.br-v2-article .adc-inline-cta {
    margin: 2.2rem 0 !important; padding: 1.5rem 1.75rem !important;
    background: linear-gradient(135deg, var(--brv2-primary), var(--brv2-primary-dark)) !important;
    border-radius: var(--brv2-radius-lg) !important; color: var(--brv2-white) !important;
    display: flex !important; align-items: center !important; justify-content: space-between !important;
    gap: 1.25rem !important; flex-wrap: wrap !important;
}
.br-v2-article .adc-inline-cta p { margin: 0 !important; font-size: 1rem !important; font-weight: 500 !important; color: var(--brv2-white) !important; max-width: 32ch !important; }
.br-v2-article .adc-inline-cta__btn {
    flex: none !important; background: var(--brv2-white) !important; color: var(--brv2-primary-dark) !important;
    font-weight: 700 !important; font-size: 0.9rem !important; padding: 0.75rem 1.4rem !important;
    border-radius: 20px !important; text-decoration: none !important; white-space: nowrap !important;
}

/* FAQ accordion (collapsible — see blog-redesign.js) */
.br-v2-article .adc-faq-item { border-top: 1px solid var(--brv2-gray-200) !important; }
.br-v2-article .adc-faq-item:last-of-type { border-bottom: 1px solid var(--brv2-gray-200) !important; }
.br-v2-article .adc-faq-q {
    width: 100% !important; text-align: left !important; background: none !important; border: 0 !important;
    padding: 1.1rem 0 !important; display: flex !important; justify-content: space-between !important; gap: 1rem !important;
    align-items: center !important; font-family: var(--brv2-font-display) !important; font-weight: 600 !important;
    font-size: 1.125rem !important; line-height: 1.75rem !important; color: var(--brv2-gray-800) !important; cursor: pointer !important;
}
/* mockup's expand_more chevron flips a full 180deg (down-arrow to
   up-arrow) on open — a 45deg rotate is the plus-to-x pattern used
   elsewhere on the site, not this icon. */
.br-v2-article .adc-faq-chev { color: var(--brv2-gray-500) !important; transition: transform 0.2s !important; flex: none !important; }
.br-v2-article .adc-faq-q[aria-expanded="true"] .adc-faq-chev { transform: rotate(180deg) !important; }
/* max-height is NOT !important here on purpose — initFaqAccordion()
   in blog-redesign.js opens/closes each panel by setting an inline
   style.maxHeight, and a plain inline style can never beat an
   !important rule in the stylesheet, so the accordion looked
   completely dead (button toggled aria-expanded, chevron rotated, but
   the panel never actually grew) until this lost its !important. */
.br-v2-article .adc-faq-a { max-height: 0; overflow: hidden !important; transition: max-height 0.25s ease !important; }
.br-v2-article .adc-faq-a__inner p { margin: 0 0 1rem !important; font-family: var(--brv2-font-body) !important; font-size: var(--brv2-text-base) !important; color: var(--brv2-text) !important; line-height: 1.6 !important; }
.br-v2-article .adc-faq-a__inner p:last-child { margin-bottom: 1.1rem !important; }
/* Lists inside an FAQ answer only had the paragraph text sized down
   to match the answer's smaller type — a <ul>/<li> fell back to the
   article's base 16px, noticeably bigger than the surrounding 14px
   answer text right next to it. The global auto-checkmark bullet rule
   (.br-v2-article ul:not(...):not(...) li) is (0,3,2) — same
   specificity trap hit before elsewhere in this file: a 2-class
   selector here ties it on classes but loses on element count, so
   tripling .br-v2-article (0,4,1) is needed to beat it outright. */
.br-v2-article.br-v2-article.br-v2-article .adc-faq-a__inner li { font-family: var(--brv2-font-body) !important; font-size: var(--brv2-text-base) !important; line-height: 1.6 !important; color: var(--brv2-text) !important; }

/* ==========================================================================
   REV 3 COMPONENTS — ported from the approved Stitch mockup (preview
   (8).html / stitch-exports/allon4-dental-implants-guide). Icons here
   use the Material Symbols Outlined font (loaded in
   single-blog-redesign.php) rather than inline SVG, matching the
   mockup's own icon system.
   ========================================================================== */
/* Material Symbols renders icon names ("info", "biotech"...) as glyphs
   via OpenType ligature substitution — without an explicit font-family
   declaration and the liga feature setting, some browsers fall back to
   showing the literal icon-name text instead of the icon. */
.br-v2-article .material-symbols-outlined {
    font-family: 'Material Symbols Outlined' !important;
    font-weight: normal !important; font-style: normal !important;
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24 !important;
    font-size: 1.4em !important; line-height: 1 !important; vertical-align: middle !important;
    letter-spacing: normal !important; text-transform: none !important; white-space: nowrap !important;
    word-wrap: normal !important; direction: ltr !important;
    -webkit-font-feature-settings: 'liga' !important; font-feature-settings: 'liga' !important;
    -webkit-font-smoothing: antialiased !important;
}

/* Info callout box — mockup: bg-surface-container-low/80,
   border-surface-container/60, p-space-md(1rem), rounded-2xl(16px),
   icon text-[24px] fixed, body font-body-md(14px) text-on-surface. */
.br-v2-article .adc-info-box {
    display: flex !important; align-items: flex-start !important; gap: 0.75rem !important;
    background: var(--brv2-primary-light) !important; padding: 1rem !important;
    border: 1px solid var(--brv2-gray-200) !important;
    border-radius: var(--brv2-radius-lg) !important; margin: 1.75rem 0 !important;
}
.br-v2-article .adc-info-box__icon { color: var(--brv2-primary) !important; flex: none !important; margin-top: 0.1em !important; font-size: 24px !important; }
/* Uploaded "Icon Image" backup (adc_render_icon() in
   inc/blog-redesign-shortcodes.php) renders an <img> in place of the
   Material Symbols <span> — this sizes it to match wherever it's
   dropped in, since none of the font-size-based icon rules above do
   anything for an image. */
.br-v2-article .adc-custom-icon {
    width: 24px !important; height: 24px !important; object-fit: contain !important;
    border-radius: 4px !important; flex: none !important;
}
.br-v2-article .adc-info-box__body { font-size: 0.875rem !important; line-height: 1.55rem !important; color: var(--brv2-gray-900) !important; }
.br-v2-article .adc-info-box__title { display: block !important; color: var(--brv2-gray-900) !important; margin-bottom: 0.2rem !important; }

/* Icon grid — inclusions / perks / aftercare tips. Mockup:
   bg-surface-container-lowest(white), p-space-md(1rem),
   rounded-xl(12px, its OVERRIDDEN xl — not the default 16px),
   icon text-[24px] fixed text-primary, title font-title-lg(18px/700),
   body font-body-md(14px) text-on-surface-variant. */
.br-v2-article .adc-icon-grid {
    display: grid !important; gap: 1rem !important; margin: 1.75rem 0 !important;
    grid-template-columns: repeat(3, 1fr) !important;
    width: 100% !important; min-width: 0 !important; box-sizing: border-box !important;
}
.br-v2-article .adc-icon-grid > * { min-width: 0 !important; }
.br-v2-article .adc-icon-grid--2 { grid-template-columns: repeat(2, 1fr) !important; }
/* Checklist display style (Icon Grid metabox slots) — no bespoke
   bullet styling needed here; a plain <ul> in the article already
   gets a checkmark bullet from the article's own global list styling. */
.br-v2-article .adc-icon-checklist { margin: 1.75rem 0 !important; }
/* REV 9 — matches the new mockup's "Why Choose ADC" cards: stacked
   (icon above title, not inline beside it), p-5(1.25rem), rounded-2xl
   (16px), icon 28px fixed, title 15px/700, body 13px muted — smaller
   and airier than the earlier Material-3-mockup sizing this had. */
.br-v2-article .adc-icon-item {
    display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 0 !important;
    background: var(--brv2-white) !important; border: 1px solid var(--brv2-gray-200) !important;
    border-radius: var(--brv2-radius-lg) !important; padding: 1.25rem !important; box-shadow: none !important;
}
.br-v2-article .adc-icon-item__icon { color: var(--brv2-primary) !important; flex: none !important; font-size: 28px !important; margin-bottom: 0.5rem !important; }
.br-v2-article .adc-icon-item__title { font-family: var(--brv2-font-display) !important; font-size: 0.9375rem !important; line-height: 1.4 !important; font-weight: 700 !important; color: var(--brv2-gray-900) !important; margin: 0 !important; }
.br-v2-article .adc-icon-item__body p { font-size: 0.8125rem !important; line-height: 1.375rem !important; color: var(--brv2-gray-500) !important; margin: 0.25rem 0 0 !important; }

/* Benefits vs Risks split list — mockup: card bg-surface-container-lowest
   p-space-md(1rem) rounded-xl(12px), heading font-title-lg(18px/700),
   list items font-body-md(14px) text-on-surface, icon text-[18px] fixed. */
.br-v2-article .adc-benefits-risks {
    display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 1rem !important; margin: 1.75rem 0 !important;
}
.br-v2-article .adc-benefits-risks__col {
    background: var(--brv2-white) !important; border: 1px solid var(--brv2-gray-200) !important;
    border-radius: var(--brv2-radius-md) !important; padding: 1rem !important; box-shadow: var(--brv2-shadow-sm) !important;
}
/* Heading + list icons get a solid colored circle behind them (mockup
   shows thumb_up/warning and each check/X sitting on a filled circle,
   not a bare colored glyph — plain icons read as thinner/less finished
   than the mockup). */
.br-v2-article .adc-benefits-risks__heading .material-symbols-outlined,
.br-v2-article .adc-benefits-risks__heading .adc-custom-icon {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    width: 28px !important; height: 28px !important; border-radius: var(--brv2-radius-full) !important;
    font-size: 16px !important; flex: none !important;
}
.br-v2-article .adc-benefits-risks__col--benefits .adc-benefits-risks__heading .material-symbols-outlined {
    background: var(--brv2-primary-light) !important; color: var(--brv2-primary) !important;
}
.br-v2-article .adc-benefits-risks__col--risks .adc-benefits-risks__heading .material-symbols-outlined {
    background: #FDECEA !important; color: var(--brv2-error) !important;
}
.br-v2-article .adc-benefits-risks__heading {
    display: flex !important; align-items: center !important; gap: 0.5rem !important;
    font-family: var(--brv2-font-display) !important; font-weight: 700 !important; font-size: 1.125rem !important;
    margin-bottom: 0.75rem !important;
}
.br-v2-article .adc-benefits-risks__col--benefits .adc-benefits-risks__heading { color: var(--brv2-primary) !important; }
.br-v2-article .adc-benefits-risks__col--risks .adc-benefits-risks__heading { color: var(--brv2-error) !important; }
.br-v2-article .adc-benefits-risks ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }
/* Same specificity gap as the ::before override below: the global
   auto-checkmark rule (.br-v2-article ul:not(...):not(...) li) is
   (0,3,2) — 3 classes (.br-v2-article + the 2 :not() arguments) and 2
   elements (ul, li) — so the 28px padding-left meant for hand-typed
   lists' bullet space was leaking through as a dead gap in front of
   these icons (which position inline via flex/gap, not via that
   padding+::before technique). Doubling .br-v2-article only reaches
   (0,3,1) — classes tie at 3, and 1 element loses to the global
   rule's 2, so THAT still lost too (verified live: computed
   padding-left stayed 28px). Tripling it reaches (0,4,1), which beats
   (0,3,2) outright on class count alone, element count no longer
   even a factor. */
.br-v2-article.br-v2-article.br-v2-article .adc-benefits-risks li {
    display: flex !important; align-items: flex-start !important; gap: 0.5rem !important;
    font-size: 0.875rem !important; line-height: 1.375rem !important; color: var(--brv2-gray-900) !important; margin-bottom: 0.65rem !important;
    padding-left: 0 !important; position: static !important;
}
/* The global auto-checkmark bullet rule for hand-typed lists
   (.br-v2-article ul:not(...):not(...) li::before) has specificity
   (0,3,3) — 3 classes (.br-v2-article + the 2 :not() arguments, which
   count toward specificity same as a real class) and 3 elements (ul,
   li, ::before). A 3-class/2-element override ties on classes but
   loses on the element count, so it was STILL losing this fight
   despite matching the class count — this is what let a second green
   checkmark stack on top of this shortcode's own check/close icon.
   Repeating .br-v2-article pushes the class count to 4, which beats
   the global rule outright regardless of element count. */
.br-v2-article.br-v2-article .adc-benefits-risks .adc-benefits-risks__col li::before { content: none !important; }
/* Same solid-circle treatment for the per-row check/X — mockup uses a
   filled blue circle with a white check, filled red circle with a
   white X, not a plain colored glyph. */
.br-v2-article .adc-benefits-risks li .material-symbols-outlined {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    width: 20px !important; height: 20px !important; border-radius: var(--brv2-radius-full) !important;
    color: var(--brv2-white) !important; flex: none !important; margin-top: 0.1em !important; font-size: 14px !important;
}
.br-v2-article .adc-benefits-risks__col--benefits li .material-symbols-outlined { background: var(--brv2-primary) !important; }
.br-v2-article .adc-benefits-risks__col--risks li .material-symbols-outlined { background: var(--brv2-error) !important; }
@media (max-width: 640px) { .br-v2-article .adc-benefits-risks { grid-template-columns: 1fr !important; } }

/* Numbered stage/step timeline — mockup: card bg-surface-container-lowest
   p-space-md(1rem) rounded-xl(12px), number circle w-12 h-12(48px),
   title font-title-lg(18px/700), body font-body-md(14px)
   text-on-surface-variant. Circle color ALTERNATES per step in the
   mockup (1=bg-primary, 2=bg-surface-container-high text-primary,
   3=bg-secondary) rather than repeating one color — nth-child(3n+1/2/3)
   reproduces that cycle for however many steps an article uses. */
/* Now a real <ol> (see adc_timeline_shortcode()/adc_step_shortcode() in
   inc/blog-redesign-shortcodes.php) instead of a <div> with a
   PHP-tracked step number — the numbered circle is drawn from a CSS
   counter on the list itself (counter-reset/counter-increment) rather
   than a rendered element, so a screen reader still gets real
   "item N of M" semantics from the <ol> underneath the visual circle. */
/* REV 9 — matches the new mockup's timeline structure exactly: ONE
   bordered card wrapping every step (not a separate elevated card per
   step), steps separated by a divider instead of a gap, and a small
   28px number circle (not 48px) that alternates light-primary /
   surface-elevated / light-primary rather than solid-primary /
   light / dark. */
.br-v2-article .adc-timeline {
    display: flex !important; flex-direction: column !important; margin: 1.75rem 0 !important;
    list-style: none !important; padding: 1.5rem !important; counter-reset: adc-timeline-step !important;
    background: var(--brv2-white) !important; border: 1px solid var(--brv2-gray-200) !important;
    border-radius: var(--brv2-radius-lg) !important; box-shadow: var(--brv2-shadow-sm) !important;
}
.br-v2-article .adc-timeline__step {
    counter-increment: adc-timeline-step !important;
    display: flex !important; align-items: flex-start !important; gap: 1rem !important;
    padding: 0 0 1rem !important; margin: 0 0 1rem !important; border-bottom: 1px solid var(--brv2-gray-200) !important;
}
.br-v2-article .adc-timeline__step:last-child { padding-bottom: 0 !important; margin-bottom: 0 !important; border-bottom: none !important; }
.br-v2-article .adc-timeline__step::before {
    content: counter(adc-timeline-step) !important;
    width: 28px !important; height: 28px !important; border-radius: 50% !important; flex: none !important;
    background: var(--brv2-primary-light) !important; color: var(--brv2-primary) !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    font-family: var(--brv2-font-display) !important; font-weight: 700 !important; font-size: 0.8125rem !important;
    margin-top: 0.1rem !important;
}
.br-v2-article .adc-timeline__step:nth-child(3n+2)::before { background: var(--brv2-gray-100) !important; color: var(--brv2-gray-900) !important; }
.br-v2-article .adc-timeline__step:nth-child(3n+3)::before { background: var(--brv2-primary-light) !important; color: var(--brv2-primary) !important; }
.br-v2-article .adc-timeline__body { flex: 1 1 auto !important; min-width: 0 !important; }
.br-v2-article .adc-timeline__title { font-family: var(--brv2-font-display) !important; font-size: 0.9375rem !important; line-height: 1.4 !important; font-weight: 700 !important; color: var(--brv2-gray-900) !important; margin: 0 !important; }
.br-v2-article .adc-timeline__body p { font-size: 0.8125rem !important; line-height: 1.375rem !important; color: var(--brv2-gray-500) !important; margin: 0.25rem 0 0 !important; }

/* REV 9 — matches the new mockup's "Minimalist Conversion Banner"
   exactly: dark on-surface background (not blue), smaller title, a
   primary-blue button (not coral — coral is reserved for the sidebar
   form) plus a translucent white/10 secondary button. */
.br-v2-article .adc-bottom-cta {
    display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important;
    text-align: center !important;
    gap: 1.5rem !important; background: var(--brv2-navy) !important; color: var(--brv2-white) !important;
    border-radius: var(--brv2-radius-xl) !important; padding: 2rem !important; margin: 2.5rem 0 !important;
}
.br-v2-article .adc-bottom-cta__copy { display: flex !important; flex-direction: column !important; align-items: center !important; }
.br-v2-article .adc-bottom-cta__badge { display: none !important; }
/* Optional icon (Bottom CTA — Icon field) — a translucent circle on
   the band's own primary background, same treatment used for icons
   elsewhere against a colored ground (e.g. the testimonial play
   button), so it reads as intentional rather than a stray glyph. */
.br-v2-article .adc-bottom-cta__icon {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    width: 44px !important; height: 44px !important; border-radius: var(--brv2-radius-full) !important;
    background: rgba(255,255,255,0.16) !important; margin-bottom: 0.85rem !important;
}
.br-v2-article .adc-bottom-cta__icon .material-symbols-outlined { color: var(--brv2-white) !important; font-size: 22px !important; }
.br-v2-article .adc-bottom-cta__icon .adc-custom-icon { width: 22px !important; height: 22px !important; }
.br-v2-article .adc-bottom-cta__title { font-family: var(--brv2-font-display) !important; font-size: 1.75rem !important; line-height: 2.2rem !important; font-weight: 700 !important; color: var(--brv2-white) !important; margin: 0 0 0.4rem !important; letter-spacing: -0.01em !important; }
/* This title is an <h2> (so it's a real heading for a11y/SEO), but the
   generic .br-v2-article h2::before navy bar meant for section
   headings in the article body reads as a stray mark against this
   band's own dark background — hide it here specifically. */
.br-v2-article .adc-bottom-cta__copy h2::before { display: none !important; }
.br-v2-article .adc-bottom-cta__text { font-size: 0.875rem !important; color: var(--brv2-white) !important; opacity: 0.9 !important; margin: 0 auto !important; max-width: 44ch !important; text-align: center !important; }
.br-v2-article .adc-bottom-cta__actions { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 0.75rem !important; }
.br-v2-article .adc-bottom-cta__btn {
    display: inline-flex !important; align-items: center !important; gap: 0.4rem !important;
    padding: 0.85rem 1.5rem !important; border-radius: 20px !important;
    font-weight: 700 !important; text-decoration: none !important; white-space: nowrap !important;
}
.br-v2-article .adc-bottom-cta__btn--primary { background: var(--brv2-coral) !important; color: var(--brv2-white) !important; }
.br-v2-article .adc-bottom-cta__btn--primary:hover { background: var(--brv2-coral-dark) !important; }
.br-v2-article .adc-bottom-cta__btn--secondary { display: none !important; }
@media (max-width: 640px) {
    .br-v2-article .adc-icon-grid, .br-v2-article .adc-icon-grid--2 { grid-template-columns: 1fr !important; }
    .br-v2-article .adc-bottom-cta { flex-direction: column !important; align-items: flex-start !important; }
    .br-v2-article .adc-bottom-cta__actions { width: 100% !important; }
    .br-v2-article .adc-bottom-cta__btn { flex: 1 !important; justify-content: center !important; }
}

/* Video testimonial cards */
/* Now a carousel track (see .adc-carousel below) instead of a fixed
   grid — each card is a fixed width so 2+ can be visible at once on
   desktop, and it swipes/scrolls horizontally on any screen width
   rather than always wrapping to a single narrow column. */
.br-v2-article .adc-testimonials {
    display: flex !important; gap: 1.25rem !important;
}
/* REV 13 — full redesign to match the "Stories from Cross-Border
   Patients" reference exactly: 3-up (was 2-up), photo inset with
   visible padding inside the card (was full-bleed to the card's
   edges), a solid PRIMARY-blue play button (was coral — this is a
   media-preview affordance, not a call to action, so it follows the
   brand system's blue rather than the "red is CTA-only" exception),
   and location+procedure merged into one blue meta line under the
   name instead of two separate gray lines split above/below the
   quote. */
.br-v2-article .adc-testimonials .adc-testimonial { flex: 0 0 calc(33.333% - 0.834rem) !important; }
.br-v2-article .adc-testimonials--1 .adc-testimonial { flex: 0 0 100% !important; }
.br-v2-article .adc-testimonials--2 .adc-testimonial { flex: 0 0 calc(50% - 0.625rem) !important; }
@media (max-width: 900px) {
    .br-v2-article .adc-testimonials--3 .adc-testimonial { flex: 0 0 calc(50% - 0.625rem) !important; }
}
@media (max-width: 640px) {
    .br-v2-article .adc-testimonials .adc-testimonial { flex: 0 0 85% !important; }
}
.br-v2-article .adc-testimonial {
    background: var(--brv2-white) !important; border: 1px solid var(--brv2-gray-200) !important;
    border-radius: var(--brv2-radius-xl) !important; box-shadow: var(--brv2-shadow-md) !important; overflow: hidden !important;
    padding: 1rem !important; box-sizing: border-box !important;
}
/* aspect-ratio:16/9 (not a fixed rem height) so the box always matches
   a YouTube thumbnail's real proportions — a fixed height cropped
   whatever aspect ratio the thumbnail actually was, which combined
   with hqdefault.jpg's own baked-in 4:3 letterboxing (see
   adc_get_video_thumbnail_url() in inc/blog-redesign-shortcodes.php,
   now using mqdefault.jpg instead) is what read as black borders. */
.br-v2-article .adc-testimonial__media {
    position: relative !important; aspect-ratio: 16 / 9 !important; background: var(--brv2-gray-100) !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    border-radius: var(--brv2-radius-lg) !important; overflow: hidden !important;
}
.br-v2-article .adc-testimonial__media img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.br-v2-article .adc-testimonial__play {
    position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important;
    width: 44px !important; height: 44px !important; border-radius: 50% !important; background: var(--brv2-coral) !important;
    display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: var(--brv2-shadow-md) !important;
}
.br-v2-article .adc-testimonial__play .material-symbols-outlined { color: var(--brv2-white) !important; font-size: 22px !important; }
.br-v2-article .adc-testimonial__duration {
    position: absolute !important; bottom: 0.75rem !important; right: 0.75rem !important;
    background: rgba(18,28,44,0.8) !important; color: var(--brv2-white) !important; font-size: 0.7rem !important; font-weight: 700 !important;
    padding: 0.2rem 0.55rem !important; border-radius: var(--brv2-radius-full) !important;
}
.br-v2-article .adc-testimonial__body { padding: 1.1rem 0.25rem 0.25rem !important; }
.br-v2-article .adc-testimonial__head { display: flex !important; flex-direction: column !important; gap: 0.15rem !important; margin-bottom: 0.6rem !important; }
.br-v2-article .adc-testimonial__name { font-family: var(--brv2-font-display) !important; font-size: 1.05rem !important; font-weight: 700 !important; color: var(--brv2-gray-900) !important; }
.br-v2-article .adc-testimonial__meta { font-size: 0.8125rem !important; font-weight: 600 !important; color: var(--brv2-primary) !important; }
/* Clamped to 3 lines (-webkit-line-clamp) so a long quote doesn't
   stretch one card taller than its neighbors in the same row — cuts
   off with an ellipsis instead of growing the card. */
.br-v2-article .adc-testimonial__quote {
    font-size: 0.875rem !important; font-style: italic !important; line-height: 1.5rem !important; color: var(--brv2-gray-600) !important; margin: 0 !important;
    display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 3 !important;
    overflow: hidden !important; text-overflow: ellipsis !important;
}

/* Shared carousel chrome (adc_wrap_carousel() in
   inc/blog-redesign-shortcodes.php) — used by both the testimonials
   row and the before/after gallery. The track scrolls natively
   (scroll-snap, no JS required for touch/trackpad swiping); the two
   arrow buttons are a JS-driven convenience on top of that (see
   initCarousels() in blog-redesign.js), which also hides them
   entirely when a track has nothing to scroll. */
.br-v2-article .adc-carousel { position: relative !important; margin: 1.75rem 0 !important; }
.br-v2-article .adc-carousel__track {
    overflow-x: auto !important; scroll-snap-type: x mandatory !important; scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; -ms-overflow-style: none !important;
}
.br-v2-article .adc-carousel__track::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }
.br-v2-article .adc-carousel__track > * { scroll-snap-align: start !important; }
/* REV 11 — the old chevron (a thin 1px-bordered circle with a
   Material Symbols glyph, offset -20px so it straddled the seam
   between the image and the article's own edge) read as flat and
   half-clipped rather than a real floating control. This now sits
   INSET on top of the image itself (a standard, recognizable gallery
   affordance) with a real shadow for depth and a crisp CSS-drawn
   chevron (same reliable technique as .pbcb-carousel__nav elsewhere
   on this template) instead of relying on icon-font weight, which can
   render thin/faint at small sizes. */
.br-v2-article .adc-carousel__nav {
    position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; z-index: 3 !important;
    width: 44px !important; height: 44px !important; aspect-ratio: 1 / 1 !important; border-radius: 50% !important;
    border: none !important; padding: 0 !important; margin: 0 !important; box-sizing: border-box !important;
    background: var(--brv2-white) !important; color: var(--brv2-gray-700) !important; box-shadow: var(--brv2-shadow-lg) !important;
    display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important;
    transition: background 0.15s, color 0.15s, transform 0.15s !important; font-size: 0 !important; line-height: 1 !important;
}
.br-v2-article .adc-carousel__nav .material-symbols-outlined { display: none !important; }
.br-v2-article .adc-carousel__nav::before {
    content: "" !important; display: block !important; width: 10px !important; height: 10px !important;
    border-top: 2.5px solid currentColor !important; border-right: 2.5px solid currentColor !important;
}
.br-v2-article .adc-carousel__nav--prev::before { transform: rotate(-135deg) translate(1px, -1px) !important; }
.br-v2-article .adc-carousel__nav--next::before { transform: rotate(45deg) translate(-1px, -1px) !important; }
.br-v2-article .adc-carousel__nav:hover { background: var(--brv2-primary) !important; color: var(--brv2-white) !important; transform: translateY(-50%) scale(1.06) !important; }
.br-v2-article .adc-carousel__nav--prev { left: 12px !important; }
.br-v2-article .adc-carousel__nav--next { right: 12px !important; }
.br-v2-article .adc-carousel__nav[disabled] { opacity: 0 !important; visibility: hidden !important; cursor: default !important; }
.br-v2-article .adc-carousel.is-not-scrollable .adc-carousel__nav { display: none !important; }
@media (max-width: 640px) {
    .br-v2-article .adc-carousel__nav { display: none !important; }
}

/* Before & After gallery */
.br-v2-article .adc-before-after-gallery { display: flex !important; gap: 1.5rem !important; }
.br-v2-article .adc-before-after-gallery .adc-before-after { flex: 0 0 calc(50% - 0.75rem) !important; }
@media (max-width: 640px) {
    .br-v2-article .adc-before-after-gallery .adc-before-after { flex: 0 0 88% !important; }
}
.br-v2-article .adc-before-after { margin: 1.75rem 0 !important; }
/* REV 11 — "make the image look good": a real border (not just a
   barely-visible shadow-sm) so the photo reads as a deliberately
   framed card against the article's white background, a bigger
   radius to match every other card on this template, and a subtle
   hover lift since these sit in a carousel of tappable/swipeable
   items. */
.br-v2-article .adc-before-after__images {
    display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 2px !important;
    border-radius: var(--brv2-radius-xl) !important; overflow: hidden !important;
    border: 1px solid var(--brv2-gray-200) !important; box-shadow: var(--brv2-shadow-md) !important;
    transition: box-shadow 0.2s, transform 0.2s !important;
}
.br-v2-article .adc-before-after:hover .adc-before-after__images { box-shadow: var(--brv2-shadow-lg) !important; transform: translateY(-2px) !important; }
.br-v2-article .adc-before-after--single .adc-before-after__images { grid-template-columns: 1fr !important; }
.br-v2-article .adc-before-after__pane { position: relative !important; aspect-ratio: 4 / 5 !important; background: var(--brv2-gray-100) !important; overflow: hidden !important; }
.br-v2-article .adc-before-after__pane img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }
.br-v2-article .adc-before-after__tag {
    position: absolute !important; top: 0.6rem !important; left: 0.6rem !important; z-index: 2 !important;
    background: rgba(18,28,44,0.75) !important; color: var(--brv2-white) !important; font-size: 0.68rem !important;
    font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.04em !important;
    padding: 0.25rem 0.6rem !important; border-radius: var(--brv2-radius-full) !important;
}
.br-v2-article .adc-before-after__tag--after { background: var(--brv2-primary) !important; }
.br-v2-article .adc-before-after__label {
    font-size: 0.82rem !important; color: var(--brv2-gray-600) !important; margin-top: 0.6rem !important; text-align: center !important;
}

/* ==========================================================================
   ANCHOR MENU (pb-custom-block-views/anchor-menu.php) — the "jump to
   section" pill bar. REV 4 — now rendered directly by
   single-blog-redesign.php in its own full-width slot between the hero
   and the two-column grid (previously auto-inserted inside
   the_content(), which capped it to the narrow article column). Its
   own CSS (anchor-menu.css) is scoped to ".react-post-template" — a
   body class from the OLD "Modern React Blog Post" template — so on
   this template it rendered unstyled. These selectors are
   intentionally unscoped (not wrapped in .br-v2-wrapper) so they still
   apply on mobile, where the plugin's own JS reparents the bar to a
   direct child of <body>.
   ========================================================================== */
/* The pill bar itself is white, but its wrap had no background of its
   own — the margin/padding around the bar showed the page's gray
   body background through, reading as a distinct gray strip wedged
   between the (white) hero above and the (white) content cards
   below. Giving the wrap the same white keeps it visually part of
   the hero section it sits right under. */
/* Full viewport width, transparent — the band's only real job is
   giving the sticky pill bar a tall containing block (see the
   position:sticky rule below), not painting its own background. The
   pill bar itself (.pbcb-anchor-menu) already carries its own white
   fill/border/shadow, so it still reads as a distinct floating
   element without a second, redundant full-width white strip behind
   it — especially once it's stuck over content further down the page
   that isn't white. */
.br-v2-anchor-menu-band {
    width: 100% !important; background: none !important;
}
.br-v2-anchor-menu-wrap {
    max-width: 1200px !important; margin: 0 auto !important; padding: 0.75rem 1rem 0 !important;
}
.pbcb-anchor-menu {
    margin: 0.75rem 0 1.5rem !important; padding: 8px !important;
    background: var(--brv2-white) !important;
    border: 1px solid var(--brv2-gray-200) !important; border-radius: var(--brv2-radius-md) !important;
    box-shadow: 0 2px 10px rgba(15,23,42,0.04) !important; z-index: 999 !important;
    overflow-x: auto !important;
}
/* The plugin's own hybrid sticky behavior (native position:sticky on
   desktop, JS-driven fixed + reparent-to-<body> on mobile — see
   anchor-menu.js) is real and already wired up; only the CSS that
   turns it on was scoped to .react-post-template, so on this template
   the bar just sat inert at position:static, scrolling away with the
   rest of the page instead of sticking under the header. anchor-menu.js
   still writes the live header-height offset into --pbcb-anchor-offset
   on the element regardless of template, so reading that var here is
   enough — no JS changes needed.

   position:sticky was applied to .pbcb-anchor-menu itself, but its
   direct parent is .br-v2-anchor-menu-wrap — a div that wraps ONLY
   this bar, so it's only ~95px tall (barely taller than the bar's own
   54px). Sticky positioning is bounded by the sticky element's
   containing block (its nearest block-level ancestor), so with only
   ~40px of slack in that box the bar "ran out of room" and unstuck
   itself almost immediately after the page started scrolling — it
   never actually appeared to stick. Moving position:sticky to the
   wrap instead makes ITS containing block the real ancestor
   (.br-v2-wrapper, the full-height article container), giving it the
   whole page's worth of room to stay pinned while scrolling. */
/* position:sticky lives on the BAND (the full-width outer element,
   direct sibling of the hero) rather than the inner .br-v2-anchor-
   menu-wrap now that the wrap is nested inside it — the band's
   containing block is still the whole tall page wrapper, giving it
   real room to stay pinned while scrolling. Putting sticky on the
   wrap instead would mean its own immediate parent (the band, which
   is exactly as tall as the wrap since it has no other content) sets
   its containing block, leaving zero room to stick at all — the same
   failure mode as nesting it inside the hero section did. */
@media (min-width: 768px) {
    .br-v2-anchor-menu-band {
        position: sticky !important; top: var(--pbcb-anchor-offset, 12px) !important; z-index: 999 !important;
    }
}
/* Set by initAnchorMenuUnstick() in blog-redesign.js once the reader
   scrolls past #br-v2-article-end (the end of the article content) —
   without this, the sticky bar's containing block spans the WHOLE
   page (needed so it can be full-width above the two-column grid),
   so it would otherwise stay pinned all the way down and overlap the
   sidebar quote form on mobile, where the form stacks below the
   article instead of beside it. */
.br-v2-anchor-menu-band.br-v2-anchor-menu-band--past-article {
    position: static !important;
}
.pbcb-anchor-track {
    display: flex !important; align-items: center !important; gap: 0.5rem !important;
}
/* Matches the reference file's .section-nav a exactly: soft 8px
   rounded rectangles (not full pills), and hover uses the SAME light
   tint as the active state rather than flipping to a solid color —
   a gentler, more "menu tab" feeling than a colored button. */
.pbcb-pill {
    padding: 10px 18px !important; border-radius: 8px !important;
    background: none !important; color: var(--brv2-gray-700) !important;
    font-family: var(--brv2-font-body) !important; font-size: 0.9375rem !important; font-weight: 600 !important;
    border: 1px solid transparent !important; text-decoration: none !important; white-space: nowrap !important;
    transition: background 0.15s, color 0.15s !important;
}
.pbcb-pill:hover, .pbcb-pill:focus-visible {
    background: var(--brv2-primary-light) !important; color: var(--brv2-primary) !important;
}
.pbcb-pill.active {
    background: var(--brv2-primary-light) !important; color: var(--brv2-primary) !important;
    font-weight: 700 !important;
}

/* ==========================================================================
   MOTION — a staggered hero entrance on load, plus a scroll-reveal
   utility class blog-redesign.js applies to article-body elements as
   they enter the viewport. Both respect prefers-reduced-motion: the
   keyframes/transitions only exist inside the no-preference query, so
   a reduced-motion visitor just sees everything at rest, never a
   flash of hidden content.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
    @keyframes brv2HeroIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
    /* NOTE: opacity must NOT be !important here. CSS animation keyframe
       values sit BELOW !important author declarations in the cascade,
       so an !important opacity:0 on this base rule permanently pins
       the element invisible — the animation's "to { opacity: 1 }" can
       never win against it. That's exactly what made the whole hero
       disappear: it played the animation but stayed stuck at opacity 0
       forever. animation-delay below still needs !important since it's
       overriding nothing animated. */
    .br-v2-hero__inner > * {
        opacity: 0; animation: brv2HeroIn 0.7s cubic-bezier(.16,1,.3,1) forwards;
    }
    .br-v2-hero__inner > *:nth-child(1) { animation-delay: 0.05s !important; }
    .br-v2-hero__inner > *:nth-child(2) { animation-delay: 0.12s !important; }
    .br-v2-hero__inner > *:nth-child(3) { animation-delay: 0.19s !important; }
    .br-v2-hero__inner > *:nth-child(4) { animation-delay: 0.26s !important; }
    .br-v2-hero__inner > *:nth-child(5) { animation-delay: 0.33s !important; }
    .br-v2-hero__inner > *:nth-child(6) { animation-delay: 0.40s !important; }

    .br-v2-reveal {
        opacity: 0; transform: translateY(18px);
        transition: opacity 0.6s cubic-bezier(.16,1,.3,1), transform 0.6s cubic-bezier(.16,1,.3,1);
    }
    .br-v2-reveal.is-revealed { opacity: 1; transform: translateY(0); }
}

/* Responsive */
@media (max-width: 1024px) {
    .br-v2-grid { grid-template-columns: 1fr !important; gap: 2rem !important; }
    .br-v2-sidebar__sticky {
        position: static !important; display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    }
}

@media (max-width: 768px) {
    .br-v2-hero { padding: 2rem 0 !important; }
    .br-v2-hero__inner { padding: 0 1rem !important; }
    .br-v2-hero__title { font-size: 1.75rem !important; }
    /* Sidebar (quote form + tags) moves ahead of the article body on
       mobile, so the form sits right after the title/hero instead of
       scrolling all the way past the whole article to reach it — the
       mobile sticky bar covers the "still reading" case, this covers
       "landed on the page and wants to convert immediately". */
    .br-v2-grid { display: flex !important; flex-direction: column !important; }
    .br-v2-sidebar { order: -1 !important; }
    .br-v2-grid { padding: 2rem 0.75rem 3rem 0.75rem !important; }
    .br-v2-article { padding: 1.25rem !important; }
    .br-v2-article h2 { font-size: 1.375rem !important; margin: 1.75rem 0 0.875rem 0 !important; }
    .br-v2-mobile-bar { display: flex !important; }

    /* Icon/number-beside-body cards — Timeline step, Icon Grid item,
       Info Box — all share the same "flex row, icon on the left"
       layout. At full width that reads fine, but on a narrow phone
       screen it squeezes the body text into a tall, awkward column
       next to the icon; stacking the icon above the body instead
       gives the text its own full-width line to wrap in. Every block
       this pattern applies to gets the same treatment here rather
       than fixing them one at a time. */
    .br-v2-article .adc-timeline__step,
    .br-v2-article .adc-icon-item,
    .br-v2-article .adc-info-box {
        flex-direction: column !important;
    }
}

@media (min-width: 769px) {
    .br-v2-mobile-bar { display: none !important; }
}

/* Print */
@media print {
    .br-v2-progress, .br-v2-sidebar, .br-v2-mobile-bar, .br-v2-share { display: none !important; }
    .br-v2-grid { display: block !important; }
}