/* ─────────────────────────────────────────────────────────
   Article library styles (.dbtx-* classes used inside every article).
   Replaces the inline <style> blocks that were embedded in each post.
   ───────────────────────────────────────────────────────── */

.dbtx { color: var(--dbt-ink); line-height: 1.75; font-size: 17px; max-width: 100%; min-width: 0; }
.dbtx > * { max-width: 100%; }
.dbtx img { max-width: 100%; height: auto; }
.dbtx *, .dbtx *::before, .dbtx *::after { box-sizing: border-box; }
.dbtx h2, .dbtx h3 { line-height: 1.25; color: var(--dbt-primary); }
.dbtx h2 { font-size: 1.6rem; margin: 2.4rem 0 0.9rem; padding-bottom: 0.45rem; border-bottom: 3px solid var(--dbt-accent); }
.dbtx h3 { font-size: 1.22rem; margin: 1.7rem 0 0.6rem; }
.dbtx p { margin: 0 0 1.05rem; }
.dbtx ul, .dbtx ol { margin: 0 0 1.2rem; padding-left: 1.4rem; }
.dbtx li { margin-bottom: 0.5rem; }
.dbtx a { color: var(--dbt-secondary); }

/* Article intro block */
.dbtx-hero { background: var(--dbt-primary); color: #fff; padding: 30px 30px; border-radius: var(--dbt-radius-lg); margin-bottom: 26px; }
.dbtx-hero .dbtx-htitle { display: none; }
.dbtx-hero .dbtx-htitle--keep { font-size: 1.6rem; font-weight: 800; line-height: 1.25; color: #fff; margin: 0 0 0.6rem; font-family: var(--dbt-font-heading); }
.dbtx-hero p { color: rgba(255,255,255,0.88); font-size: 1.05rem; margin-bottom: 0; }
.dbtx-eyebrow { display: inline-block; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.3); padding: 5px 12px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 14px; color: #fff; }

/* Table of contents */
.dbtx-toc { background: var(--dbt-surface); border: 1px solid var(--dbt-border); border-left: 4px solid var(--dbt-secondary); border-radius: var(--dbt-radius); padding: 20px 24px; margin: 26px 0; }
.dbtx-toc h2 { margin: 0 0 0.7rem; border: 0; padding: 0; font-size: 1.1rem; }
.dbtx-toc ol { columns: 2; column-gap: 32px; margin-bottom: 0; }
.dbtx-toc li { break-inside: avoid; margin-bottom: 0.35rem; font-size: 15px; }
.dbtx-toc a { color: var(--dbt-primary); text-decoration: none; font-weight: 600; }
.dbtx-toc a:hover { text-decoration: underline; color: var(--dbt-secondary); }
@media (max-width: 640px) { .dbtx-toc ol { columns: 1; } .dbtx-hero { padding: 22px 20px; } }

/* Call-outs */
.dbtx-tip, .dbtx-warn, .dbtx-key { border-radius: var(--dbt-radius); padding: 18px 22px; margin: 22px 0; border-left: 5px solid; }
.dbtx-tip { background: var(--dbt-secondary-soft); border-color: var(--dbt-secondary); }
.dbtx-warn { background: #fbe9e6; border-color: var(--dbt-danger); }
.dbtx-key { background: var(--dbt-accent-soft); border-color: var(--dbt-accent); }
.dbtx-tip strong, .dbtx-warn strong, .dbtx-key strong { display: block; margin-bottom: 0.3rem; font-size: 1rem; }
.dbtx-tip p:last-child, .dbtx-warn p:last-child, .dbtx-key p:last-child { margin-bottom: 0; }
.dbtx blockquote { margin: 24px 0; padding: 18px 24px; border: 0; border-left: 4px solid var(--dbt-secondary); background: var(--dbt-surface-2); color: var(--dbt-ink); border-radius: 0 var(--dbt-radius) var(--dbt-radius) 0; font-size: 1.05rem; font-style: italic; }
.dbtx blockquote p { margin: 0; }

/* Tables */
.dbtx-tw { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 22px 0; border-radius: var(--dbt-radius); border: 1px solid var(--dbt-border-soft); }
.dbtx table { width: 100%; border-collapse: collapse; min-width: 620px; background: var(--dbt-surface); margin: 0; }
.dbtx thead th { background: var(--dbt-primary); color: #fff; padding: 13px 14px; text-align: left; font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 700; }
.dbtx tbody td { padding: 12px 14px; border-bottom: 1px solid var(--dbt-border-soft); vertical-align: top; font-size: 0.95rem; }
.dbtx tbody tr:nth-child(even) { background: var(--dbt-bg); }
.dbtx td strong { color: var(--dbt-primary); }

/* Product recommendation cards */
.dbtx-prod { border: 1px solid var(--dbt-border); border-radius: var(--dbt-radius-lg); overflow: hidden; margin: 28px 0; background: var(--dbt-surface); }
.dbtx-prod-top { background: var(--dbt-primary); color: #fff; padding: 18px 22px; }
.dbtx-badge { display: inline-block; background: var(--dbt-accent); color: #26312c; font-weight: 800; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; margin-bottom: 8px; }
.dbtx-prod-top h3 { color: #fff; margin: 0; font-size: 1.25rem; }
.dbtx-prod-body { padding: 22px; }
.dbtx-specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 0 0 16px; }
.dbtx-spec { background: var(--dbt-bg); border: 1px solid var(--dbt-border-soft); border-radius: var(--dbt-radius-sm); padding: 10px 12px; }
.dbtx-spec span { display: block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--dbt-muted); font-weight: 700; margin-bottom: 2px; }
.dbtx-spec b { font-size: 0.96rem; color: var(--dbt-primary); }
.dbtx-prod ul { margin-bottom: 16px; }
.dbtx-cta { display: inline-block; text-align: center; background: var(--dbt-accent); color: #26312c !important; font-weight: 800; font-family: var(--dbt-font-heading); font-size: 1rem; padding: 14px 24px; border-radius: var(--dbt-radius-sm); text-decoration: none !important; transition: var(--dbt-trans); }
.dbtx-cta:hover { background: var(--dbt-accent-dark); color: #fff !important; }
.dbtx-fine { font-size: 0.8rem; color: var(--dbt-muted); margin: 0.6rem 0 0; }

/* Checklists, FAQ, misc */
.dbtx-check { background: var(--dbt-surface); border: 1px solid var(--dbt-border); border-radius: var(--dbt-radius); padding: 22px 26px; margin: 24px 0; }
.dbtx-check h3 { margin-top: 0; }
.dbtx-faq { border: 1px solid var(--dbt-border-soft); border-radius: var(--dbt-radius); margin-bottom: 12px; overflow: hidden; background: var(--dbt-surface); }
.dbtx-faq h3 { background: var(--dbt-bg); margin: 0; padding: 14px 18px; font-size: 1.05rem; border-bottom: 1px solid var(--dbt-border-soft); }
.dbtx-faq div { padding: 14px 18px; }
.dbtx-faq div p:last-child { margin-bottom: 0; }
.dbtx-img { display: none; } /* placeholder boxes are removed server-side; hide any that slip through */
.dbtx-disc { background: var(--dbt-accent-soft); border-left: 4px solid var(--dbt-accent); border-radius: 0 var(--dbt-radius-sm) var(--dbt-radius-sm) 0; padding: 14px 18px; font-size: 0.9rem; color: var(--dbt-ink-soft); margin: 24px 0; }
.dbtx-card, .dbtx-vcard, .dbtx-hubcard { background: var(--dbt-surface); border: 1px solid var(--dbt-border); border-radius: var(--dbt-radius); padding: 18px 20px; margin: 16px 0; }
.dbtx-hub { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.dbtx-step, .dbtx-day { padding: 14px 18px; border-left: 4px solid var(--dbt-secondary); background: var(--dbt-bg); margin: 14px 0; border-radius: 0 var(--dbt-radius-sm) var(--dbt-radius-sm) 0; }
.dbtx-vet, .dbtx-emg, .dbtx-legal { background: #fbe9e6; border-left: 5px solid var(--dbt-danger); padding: 16px 20px; border-radius: var(--dbt-radius); margin: 22px 0; }
.dbtx-verdict { background: var(--dbt-primary-soft); border-radius: var(--dbt-radius); padding: 20px 24px; margin: 22px 0; }
.dbtx-score, .dbtx-m, .dbtx-form { background: var(--dbt-bg); border: 1px solid var(--dbt-border-soft); border-radius: var(--dbt-radius-sm); padding: 12px 16px; margin: 14px 0; }

/* Generic content inside articles/pages written without .dbtx */
.dbt-single-content table, .dbt-page-content table { width: 100%; border-collapse: collapse; }
.dbt-single-content th, .dbt-page-content th { background: var(--dbt-primary); color: #fff; text-align: left; padding: 10px 12px; }
.dbt-single-content td, .dbt-page-content td { padding: 10px 12px; border-bottom: 1px solid var(--dbt-border-soft); vertical-align: top; }
.dbt-page-content ul, .dbt-page-content ol, .dbt-single-content > ul, .dbt-single-content > ol { padding-left: 1.4rem; }
.dbt-page-content li { margin-bottom: 0.4rem; }
.dbt-spec-table { font-size: 15px; }
.dbt-spec-table td small { color: var(--dbt-muted); }

/* Name of the Amazon listing a product button links to */
.dbtx-linked { display: block; margin-top: 8px; font-size: 0.82rem; color: var(--dbt-muted); line-height: 1.4; }
