/*
 * Danube Home — Flooring landing tokens.
 * Colors sampled directly from FLOORING LANDING PAGE-2026 PDF.
 * Namespaced under .dh-lp so they never fight ally's globals (embedded mode).
 */
.dh-lp {
  /* Surfaces */
  --dh-cream: #f2eeeb; /* header + alternating sections */
  --dh-cream-2: #efe9df;
  --dh-white: #ffffff;
  --dh-est-grey: #f4f3f1; /* estimator card */
  --dh-est-grey-2: #e4e3e0; /* estimator result panel */

  /* Brand accents (sampled) */
  --dh-taupe: #806941; /* hero split panel */
  --dh-olive: #b09657; /* highlighted stat card */
  --dh-orange: #cf691c; /* promo band */
  --dh-rust: #c1632b; /* product-card titles */
  --dh-display: #8a6a3f; /* Playfair section headings */
  --dh-copper: #c0854f; /* final-CTA button */
  --dh-tan: #c19a6b; /* final-CTA heading */
  --dh-star: #eea41f;

  --dh-ink: #1b1a18; /* dark buttons */
  --dh-black: #121212; /* final CTA bg */
  --dh-text: #24231f;
  --dh-text-muted: #6f6b64;
  --dh-line: rgba(35, 33, 30, 0.14);

  /* Type */
  --dh-font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --dh-font-display: 'Playfair Display', Georgia, serif;
  --dh-fw-light: 300;
  --dh-fw-regular: 400;
  --dh-fw-medium: 500;
  --dh-fw-semibold: 600;
  --dh-fw-bold: 700;

  /* Rhythm */
  --dh-radius: 16px;
  --dh-radius-lg: 24px;
  --dh-shadow-sm: 0 6px 20px rgba(35, 33, 30, 0.07);
  --dh-width: 90%; /* .dh-wrap width — override per breakpoint (e.g. 90%) */
  --dh-maxw: 1920px; /* .dh-wrap max-width — override per breakpoint */
  --dh-gutter: clamp(18px, 4vw, 48px);
  --dh-section-y: clamp(24px, 3vw, 36px);
}

/*
 * Smartpedia article bundles (smartpedia/{slug}).
 * The HTML renders inside the smartpedia article body (below the article
 * title, above the helpful-votes section), so styles are scoped to
 * .sp-article and stay typographic — no page-level layout or chrome.
 */
.sp-article {
  line-height: 1.7;
  color: #333;
}

.sp-article .sp-article__lead {
  font-size: 1.05em;
  font-weight: 500;
}

.sp-article h2 {
  margin: 1.4em 0 0.5em;
  font-size: 1.25em;
}

.sp-article p {
  margin: 0 0 1em;
}

.sp-article ul {
  margin: 0 0 1em;
  padding-inline-start: 1.4em;
}

.sp-article li {
  margin-bottom: 0.4em;
}

.sp-article a {
  color: #b12b36;
  text-decoration: underline;
}

.sp-article .sp-article__byline {
  margin-bottom: 1.4em;
}

.sp-article .sp-article__author {
  margin: 0;
  font-size: 1.1em;
  font-weight: 700;
}

.sp-article .sp-article__role {
  margin: 0;
  color: #666;
}

.sp-article .sp-article__quote {
  margin: 1.6em 0 0;
  padding-inline-start: 1em;
  border-inline-start: 3px solid #b12b36;
  font-size: 1.1em;
  font-style: italic;
  font-weight: 600;
}

/*
 * Smartpedia — About Danube Home (smartpedia/about-danube-home).
 * Card-based layout: headed content blocks with dividers + stat tiles,
 * product-range category cards, awards grid. Scoped to .sp-about; renders
 * inside the smartpedia article body (white page, own chrome).
 */
.sp-about {
  --abt-gold: #c9a04d;
  --abt-cream: #faf7f1;
  --abt-line: #ececec;
  --abt-card-line: #eee7da;
  --abt-ink: #1c1b19;
  --abt-muted: #6f6b64;
  /* fill the host's content column but NEVER exceed it: width must stay
     auto (100% would resolve against the host's flex row incl. sidebar and
     overflow), capped at the parent, shrinkable inside flex layouts */
  width: auto !important;
  max-width: 100% !important;
  min-width: 0;
  box-sizing: border-box;
  overflow-x: clip;
}

.dh-lp.sp-article[data-dh-slug="smartpedia/about-danube-home"] {
  width: auto !important;
  max-width: 100% !important;
  min-width: 0;
  flex: 1 1 0%; /* if the host lays the article out with flex, take the column, don't overflow it */
}

/* !important + .dh-lp prefix: the smartpedia host page sets its own large
   heading/paragraph margins on article content — 16px max must win over them */
.dh-lp .sp-about h2,
.sp-about h2 {
  margin: 0 0 12px !important;
  padding: 0 !important;
  font-size: 18px;
  font-weight: 700;
  color: var(--abt-ink);
}

.sp-about h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--abt-ink);
}

.dh-lp .sp-about p,
.sp-about p {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.7;
  color: #444;
}

/* ---- Hero banner ---- */
.sp-about__hero {
  margin: 0 0 clamp(20px, 3vw, 36px);
}

.sp-about__hero img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
}

/* ---- Top: content blocks ---- */

.sp-about__block {
  padding: 0;
  margin: 0 0 16px;
}

.sp-about__block:last-child {
  margin-bottom: 0;
}

/* ---- Product range ---- */
.sp-about__range {
  padding-block: 24px 16px;
}

.sp-about__range-intro h2 {
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.2;
}

/* ---- Awards: roadmap timeline (center rail, cards alternate sides) ---- */
.sp-about__awards {
  padding-top: 24px; /* same top spacing as the "Everything Your Home Needs" section */
}

.sp-about__awards h2 {
  font-size: 26px;
}

.sp-about__awards-sub {
  margin: 0;
  color: var(--abt-muted);
}

/* ---- Awards ---- */
.sp-about__awards {
  max-width: 100%;
  min-width: 0;
}