/*
 * 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, 56px);
}

/* =====================================================================
   Danube Home — Customized Sofas landing.
   Self-contained: this page is a separate landing page and does NOT import
   flooring-landing.css (see config/pages.mjs — its asset list is just
   theme.css + this file). Sofa-specific sections (fabric swatches, seating
   cards, premium strip, customizer, closing rules) are namespaced .dhc-*
   and scoped under [data-dh-slug="customized-sofas"]; the hero additionally
   has its own dedicated .dhc-hero__* classes (not shared with any other
   page at all). Scroll/entrance animation lives in customized-sofas-anim.js
   (GSAP) — all hidden-until-revealed states are set by that script, so
   content stays fully visible if GSAP fails to load.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Shared layout/typography/component primitives — forked from
   flooring-landing.css at the point this page stopped importing it, so
   behaviour stays identical to before the split. Only the pieces this
   page's markup (customized-sofas.mjs) actually uses are kept: base
   .dh-lp reset/fonts, .dh-wrap/.dh-sec, .dh-display/.dh-h2/.dh-sub
   typography, .dh-btn, the standalone .dh-header/.dh-footer/.dh-nav/
   .dh-logo, and the .dh-embla carousel system. Unscoped (like the
   original), which is safe here because this file is only ever loaded
   for the customized-sofas / customized-sofas-lp bundles.
   --------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@1,500;1,600;1,700&display=swap');

.dh-lp, .dh-lp * { box-sizing: border-box; }
.dh-lp {
  color: var(--dh-text);
  line-height: 1.55;
  background: var(--dh-cream);
  -webkit-font-smoothing: antialiased;
}
.dh-lp img { max-width: 100%; display: block; }
.dh-wrap { width: var(--dh-width, 90%); max-width: var(--dh-maxw, 1920px); margin-inline: auto; }
@media (max-width: 768px) { .dh-lp { --dh-maxw: 90%; --dh-gutter: 0px; } }

.dh-sec { padding-block: var(--dh-section-y); background: var(--dh-white); }
.dh-sec--cream { background: var(--dh-cream); }

/* ---------- Typography ---------- */
.dh-display {
  font-family: var(--dh-font-display);
  font-style: italic;
  font-weight: 600;
  color: var(--dh-display);
  font-size: clamp(28px, 3.6vw, 44px);
  text-align: center;
  margin: 0;
  line-height: 1.1;
}
.dh-h2 { font-size: clamp(22px, 4vw, 36px); line-height: calc(clamp(22px, 4vw, 36px) * 1.35); font-weight: var(--fw-semiBold); margin: 0; letter-spacing: -.5px; }
.dh-sub { text-align: center; color: var(--dh-text-muted); margin: 16px auto 0; font-weight: var(--fw-regular); font-size: clamp(var(--fs-16), 1.5vw, var(--fs-18)); }
.dh-sub--tight { margin-top: 6px; }
.dh-display + .dh-sub--tight { margin-top: 16px; }

/* ---------- Buttons ---------- */
.dh-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--dh-font); font-weight: var(--fw-regular); font-size: clamp(var(--fs-16), 1.6vw, var(--fs-20)); line-height: 1;
  padding: 20px 40px; border-radius: 12px; border: 1px solid transparent;
  cursor: pointer; text-decoration: none; transition: transform .15s, background .2s, opacity .2s; white-space: nowrap;
}
.dh-btn--sm { padding: 11px 20px; font-size: var(--fs-lg); border-radius: 10px; }
.dh-btn:active { transform: translateY(1px); }
.dh-btn--dark { background: var(--dh-ink); color: var(--white); }
.dh-btn--dark:hover { opacity: .9; }
.dh-btn--light { background: var(--white); color: var(--dh-ink); }
.dh-btn--light:hover { background: #f4f1ea; }
@media (max-width: 860px) {
  .dh-btn { padding: 14px 28px; }
}

/* ---------- Standalone header / footer ---------- */
.dh-header { position: sticky; top: 0; z-index: 50; background: var(--dh-cream); border-bottom: 1px solid var(--dh-line); }
.dh-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 16px; }
.dh-logo { font-weight: 700; font-style: italic; color: #d21e28; font-size: clamp(19px, 2.2vw, 25px); text-decoration: none; letter-spacing: .3px; white-space: nowrap; }
.dh-logo--light { color: var(--white); }
.dh-nav { display: none; gap: 30px; }
.dh-nav a { color: var(--dh-text); text-decoration: none; font-size: 15px; font-weight: 400; }
.dh-nav a:hover { color: var(--dh-rust); }
.dh-footer { background: var(--dh-black); color: rgba(255,255,255,.68); padding-block: 44px; text-align: center; }
.dh-footer__nav { margin: 16px 0 10px; }
.dh-footer__nav a { color: rgba(255,255,255,.85); text-decoration: none; margin: 0 12px; font-size: var(--fs-lg); }
.dh-footer__copy { font-size: 13px; opacity: .7; }
@media (min-width: 992px) { .dh-nav { display: flex; } }

/* ---------- Embla carousel (seating cards) ---------- */
.dh-embla { position: relative; margin-top: 34px; }
.dh-embla__viewport { overflow: hidden; }
.dh-embla__container { display: flex; gap: 14px; align-items: stretch; }
.dh-embla__slide { flex: 0 0 62%; min-width: 0; }
.dh-embla__slide:last-child { margin-right: 14px; }
@media (min-width: 560px) { .dh-embla__slide { flex-basis: 46%; } }
@media (min-width: 900px) { .dh-embla__slide { flex-basis: 30.5%; gap: 20px; } .dh-embla__slide:last-child { margin-right: 20px; } }
@media (min-width: 1200px) { .dh-embla__slide { flex-basis: 22%; } }
.dh-embla__btn {
  position: absolute; top: 42%; transform: translateY(-50%); z-index: 3;
  width: 48px; height: 48px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--white); color: var(--dh-ink); box-shadow: 0 8px 22px rgba(35,33,30,.18);
  display: flex; align-items: center; justify-content: center; transition: background .2s, transform .2s;
}
.dh-embla__btn:hover { background: var(--dh-ink); color: var(--white); }
.dh-embla__btn svg { width: 22px; height: 22px; }
.dh-embla__btn--prev { left: -10px; }
.dh-embla__btn--next { right: -10px; }
@media (max-width: 860px) { .dh-embla__btn { display: none; } }

[dir="rtl"] .dh-embla__slide:last-child { margin-right: 0; margin-left: 14px; }
@media (min-width: 900px) {
  [dir="rtl"] .dh-embla__slide:last-child { margin-right: 0; margin-left: 20px; }
}
[dir="rtl"] .dh-embla__btn--prev { left: auto; right: -10px; }
[dir="rtl"] .dh-embla__btn--next { right: auto; left: -10px; }

/* Smooth in-page nav (customized-sofas.js) scrolls these to the viewport top —
   offset by the sticky standalone header's height so it doesn't cover them. */
[data-dh-slug="customized-sofas"] #collection,
[data-dh-slug="customized-sofas"] #seating,
[data-dh-slug="customized-sofas"] #customize {
  scroll-margin-top: 88px;
}

/* ---------- Eyebrow tag (plain small-caps label — lighter than .dh-eyebrow) */
[data-dh-slug="customized-sofas"] .dhc-tag {
  display: block;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: clamp(11px, 1vw, 13px);
  font-weight: var(--fw-semiBold);
  color: var(--dh-text-muted);
  margin: 0 0 10px;
}
[data-dh-slug="customized-sofas"] .dhc-tag--light {
  color: rgba(255, 255, 255, 0.82);
  text-align: left;
  margin-bottom: 0;
}
[dir="rtl"][data-dh-slug="customized-sofas"] .dhc-tag--light { text-align: right; }

/* ---------- Hero — single full-bleed photo with a left-side gradient scrim
   at EVERY breakpoint. This page's hero looks nothing like the shared
   flooring hero (no solid side panel on desktop, no hidden body copy /
   re-centred button on mobile), so it doesn't reuse or override the shared
   .dh-hero__* primitives from flooring-landing.css at all — it's built
   end-to-end on its own .dhc-hero__* classes. That also sidesteps the
   unscoped `@media (max-width: 859px) { .dh-hero__panel, .dh-hero .dh-btn }`
   rules in flooring-landing.css, which used to bleed into this page's hero
   on mobile (mismatched padding/gap and a re-centred button) since only
   some of their properties were being patched back here.
   The shared .dh-wrap caps out at --dh-maxw (1920px) and centers with cream
   margins either side — overridden below so the hero spans the full screen
   width on every viewport, not just mobile. */
[data-dh-slug="customized-sofas"] .dhc-hero { background: var(--dh-cream); }
[data-dh-slug="customized-sofas"] .dhc-hero .dh-wrap {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}
[data-dh-slug="customized-sofas"] .dhc-hero__box {
  position: relative;
  overflow: hidden;
  display: grid;
}
/* Height clamp (not aspect-ratio) so the banner doesn't balloon on tall,
   narrow phones — scales with viewport HEIGHT, capped well short of
   full-bleed. */
[data-dh-slug="customized-sofas"] .dhc-hero__media {
  grid-area: 1 / 1;
  aspect-ratio: auto;
  height: clamp(300px, 44vh, 420px);
}
[data-dh-slug="customized-sofas"] .dhc-hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Two <video> elements (mobile clip + desktop clip), swapped via plain CSS
   display toggles since <video> has no <picture>-equivalent breakpoint
   mechanism of its own. */
[data-dh-slug="customized-sofas"] .dhc-hero__video--desktop { display: none; }
/* Mobile clip is framed for its bottom half (the sofa sits low in frame),
   so anchor the cover-crop there instead of the default center. */
[data-dh-slug="customized-sofas"] .dhc-hero__video--mobile { object-position: bottom; }
[data-dh-slug="customized-sofas"] .dhc-hero__panel {
  grid-area: 1 / 1;
  z-index: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 18px;
  padding: clamp(26px, 5vw, 54px);
  color: var(--white);
  text-align: left;
  background: linear-gradient(180deg, rgba(20, 17, 11, 0.55) 0%, rgba(20, 17, 11, 0.12) 32%, rgba(20, 17, 11, 0) 58%, rgba(20, 17, 11, 0.42) 100%);
}
[dir="rtl"][data-dh-slug="customized-sofas"] .dhc-hero__panel { text-align: right; }
[data-dh-slug="customized-sofas"] .dhc-hero__title {
  font-size: clamp(30px, 5vw, 52px);
  font-weight: 600;
  line-height: 1.04;
  margin: -10px 0 0;
  color: var(--white);
}
/* Second title line is regular weight (not the shared primitive's thin 300,
   and not matching the bold first line) and tightly-stacked (no big gap). */
[data-dh-slug="customized-sofas"] .dhc-hero__title span { display: block; font-weight: var(--fw-regular); margin-top: 0; }
[data-dh-slug="customized-sofas"] .dhc-hero__text {
  display: none;
  max-width: 420px;
  font-size: clamp(15px, 1.25vw, 17px);
  color: var(--white);
  line-height: 1.65;
  font-weight: var(--fw-regular);
}
[data-dh-slug="customized-sofas"] .dhc-hero .dh-btn {
  align-self: stretch;
  text-align: center;
  font-weight: var(--fw-semiBold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

@media (min-width: 860px) {
  [data-dh-slug="customized-sofas"] .dhc-hero__box { grid-template-columns: 1fr; }
  [data-dh-slug="customized-sofas"] .dhc-hero__text { display: block; }
  [data-dh-slug="customized-sofas"] .dhc-hero__panel { justify-content: center; }
  [data-dh-slug="customized-sofas"] .dhc-hero .dh-btn { align-self: flex-start; }
  /* Height clamp (not aspect-ratio) so the hero scales with the window's
     HEIGHT, not its width — on an ultra-wide/short window, a fixed
     width-based ratio would make the hero taller than the viewport and
     push the CTA button below the fold. */
  [data-dh-slug="customized-sofas"] .dhc-hero__media {
    aspect-ratio: auto;
    height: clamp(460px, 62vh, 640px);
  }
  [data-dh-slug="customized-sofas"] .dhc-hero__video--mobile { display: none; }
  [data-dh-slug="customized-sofas"] .dhc-hero__video--desktop { display: block; }
  [data-dh-slug="customized-sofas"] .dhc-hero__panel {
    background: linear-gradient(90deg, rgba(20, 17, 11, 0.74) 0%, rgba(20, 17, 11, 0.42) 46%, rgba(20, 17, 11, 0) 74%);
    max-width: 640px;
  }
  [dir="rtl"][data-dh-slug="customized-sofas"] .dhc-hero__panel {
    background: linear-gradient(270deg, rgba(20, 17, 11, 0.74) 0%, rgba(20, 17, 11, 0.42) 46%, rgba(20, 17, 11, 0) 74%);
    margin-left: auto;
  }
}

/* ---------- Fabric collection — colour-chip swatch grid ---------- */
[data-dh-slug="customized-sofas"] .dhc-swatches {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px 12px;
}
[data-dh-slug="customized-sofas"] .dhc-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  background: none;
  border: none;
  font: inherit;
}
[data-dh-slug="customized-sofas"] .dhc-swatch__chip {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 14px;
  background: var(--sw, #ccc);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08), 0 8px 18px rgba(35, 33, 30, 0.08);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
  will-change: transform;
}
[data-dh-slug="customized-sofas"] .dhc-swatch__chip[data-pattern="diamond"] {
  background-image:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.16) 0 7px, rgba(0, 0, 0, 0.08) 7px 14px),
    linear-gradient(var(--sw), var(--sw));
}
[data-dh-slug="customized-sofas"] .dhc-swatch:hover .dhc-swatch__chip,
[data-dh-slug="customized-sofas"] .dhc-swatch:focus-visible .dhc-swatch__chip {
  transform: translateY(-7px) rotate(-2deg) scale(1.05);
  box-shadow: 0 18px 30px rgba(35, 33, 30, 0.2);
}
[data-dh-slug="customized-sofas"] .dhc-swatch__name {
  font-size: clamp(12px, 1.2vw, 14px);
  font-weight: var(--fw-medium);
  text-align: center;
}
[data-dh-slug="customized-sofas"] .dhc-swatch--more .dhc-swatch__chip--more {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--dh-cream-2);
  color: var(--dh-ink);
}
[data-dh-slug="customized-sofas"] .dhc-swatch--more .dhc-swatch__chip--more svg { width: 26px; height: 26px; }
[data-dh-slug="customized-sofas"] .dhc-swatch--more:hover .dhc-swatch__chip--more svg { transform: translateX(4px); }
[data-dh-slug="customized-sofas"] .dhc-swatch--more .dhc-swatch__chip--more svg { transition: transform 0.25s ease; }
[dir="rtl"][data-dh-slug="customized-sofas"] .dhc-swatch--more .dhc-swatch__chip--more svg { transform: scaleX(-1); }
[dir="rtl"][data-dh-slug="customized-sofas"] .dhc-swatch--more:hover .dhc-swatch__chip--more svg { transform: scaleX(-1) translateX(4px); }

@media (min-width: 640px) {
  [data-dh-slug="customized-sofas"] .dhc-swatches { grid-template-columns: repeat(6, 1fr); gap: 20px; }
}

/* ---------- Seating cards (Embla carousel slides) ----------
   [data-dh-force-embla] on the markup makes carousel.js always initialise a
   real, draggable, looping Embla instance (with working prev/next arrows)
   instead of its default "5-or-fewer → static centered grid" shortcut. */
[data-dh-slug="customized-sofas"] .dhc-embla .dh-embla__slide { flex: 0 0 72%; }
@media (min-width: 560px) { [data-dh-slug="customized-sofas"] .dhc-embla .dh-embla__slide { flex-basis: 44%; } }
@media (min-width: 900px) { [data-dh-slug="customized-sofas"] .dhc-embla .dh-embla__slide { flex-basis: 23%; } }

[data-dh-slug="customized-sofas"] .dhc-pcard {
  display: block;
  background: var(--white);
  border-radius: var(--dh-radius);
  overflow: hidden;
  box-shadow: var(--dh-shadow-sm);
  text-decoration: none;
  color: inherit;
}
[data-dh-slug="customized-sofas"] .dhc-pcard__img { overflow: hidden; }
[data-dh-slug="customized-sofas"] .dhc-pcard__img img {
  width: 100%;
  height: 230px;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-dh-slug="customized-sofas"] .dhc-pcard:hover .dhc-pcard__img img { transform: scale(1.06); }
[data-dh-slug="customized-sofas"] .dhc-pcard__body { padding: 16px; }
[data-dh-slug="customized-sofas"] .dhc-pcard__title {
  color: var(--dh-rust);
  font-weight: var(--fw-semiBold);
  font-size: clamp(var(--fs-18), 1.9vw, var(--fs-20));
  margin-bottom: 4px;
}
[data-dh-slug="customized-sofas"] .dhc-pcard__sub {
  color: var(--dh-text-muted);
  font-weight: var(--fw-regular);
  font-size: clamp(13px, 1.3vw, 14px);
  line-height: 1.4;
  margin-bottom: 14px;
}
[data-dh-slug="customized-sofas"] .dhc-pcard__swatches { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
[data-dh-slug="customized-sofas"] .dhc-dot {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: var(--sw, #ccc);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
  flex: 0 0 auto;
}
[data-dh-slug="customized-sofas"] .dhc-dot[data-pattern="diamond"] {
  background-image:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 0 3px, rgba(0, 0, 0, 0.08) 3px 6px),
    linear-gradient(var(--sw), var(--sw));
}
[data-dh-slug="customized-sofas"] .dhc-pcard__more {
  font-size: clamp(11px, 1.1vw, 12.5px);
  color: var(--dh-text-muted);
  font-weight: var(--fw-regular);
  margin-left: 4px;
}
[dir="rtl"][data-dh-slug="customized-sofas"] .dhc-pcard__more { margin-left: 0; margin-right: 4px; }

/* ---------- Premium fabrics strip ---------- */
[data-dh-slug="customized-sofas"] .dhc-premium__grid {
  display: grid;
  gap: 28px;
}
[data-dh-slug="customized-sofas"] .dhc-premium__media {
  border-radius: var(--dh-radius-lg);
  overflow: hidden;
}
[data-dh-slug="customized-sofas"] .dhc-premium__media img { width: 100%; height: 100%; object-fit: cover; max-height: 420px; }
[data-dh-slug="customized-sofas"] .dhc-premium__copy h2 { margin-bottom: 20px; }
[data-dh-slug="customized-sofas"] .dhc-benefits {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px 18px;
  margin-bottom: 28px;
}
[data-dh-slug="customized-sofas"] .dhc-benefit__ic {
  display: inline-flex;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--dh-cream-2);
  color: var(--dh-ink);
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
[data-dh-slug="customized-sofas"] .dhc-benefit__ic svg,
[data-dh-slug="customized-sofas"] .dhc-benefit__ic img { width: 22px; height: 22px; }
[data-dh-slug="customized-sofas"] .dhc-benefit h3 {
  font-size: clamp(15px, 1.6vw, 17px);
  font-weight: var(--fw-semiBold);
  margin: 0 0 4px;
}
[data-dh-slug="customized-sofas"] .dhc-benefit p {
  font-size: clamp(12px, 1.3vw, 13px);
  color: var(--dh-text-muted);
  font-weight: var(--fw-regular);
  line-height: 1.5;
  margin: 0;
}
@media (min-width: 900px) {
  [data-dh-slug="customized-sofas"] .dhc-premium__grid { grid-template-columns: 42% 1fr; align-items: center; gap: 48px; }
  [data-dh-slug="customized-sofas"] .dhc-premium__media img { max-height: 520px; }
  [data-dh-slug="customized-sofas"] .dhc-benefits { grid-template-columns: repeat(4, 1fr); gap: 18px 20px; }
}

/* ---------- Customizer — ONE continuous rounded banner: a cream-to-photo
   bleed with the copy block on the cream end and a small floating white
   "family / fabric" card centered over the photo (not a dark boxed stage
   with a bottom-overlap panel). ---- */
[data-dh-slug="customized-sofas"] .dhc-custom { background: var(--white); }
[data-dh-slug="customized-sofas"] .dhc-tag--muted { text-align: left; color: #b7b2a8; }
[dir="rtl"][data-dh-slug="customized-sofas"] .dhc-tag--muted { text-align: right; }

[data-dh-slug="customized-sofas"] .dhc-custom__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--dh-radius-lg);
  overflow: hidden;
  background: linear-gradient(180deg, #f6f3ee 0%, #ece6db 100%);
}
[data-dh-slug="customized-sofas"] .dhc-custom__copy {
  padding: clamp(24px, 4vw, 40px) clamp(20px, 4vw, 40px) 4px;
  text-align: left;
}
[data-dh-slug="customized-sofas"] .dhc-custom__copy .dh-display { text-align: left; }
[dir="rtl"][data-dh-slug="customized-sofas"] .dhc-custom__copy .dh-display { text-align: right; }
[data-dh-slug="customized-sofas"] .dhc-custom__copy .dh-sub { text-align: left; margin-inline: 0; line-height: 1.6; }
[data-dh-slug="customized-sofas"] .dhc-custom__copy .dh-btn { margin-top: 16px; }
[dir="rtl"][data-dh-slug="customized-sofas"] .dhc-custom__copy,
[dir="rtl"][data-dh-slug="customized-sofas"] .dhc-custom__copy .dh-sub { text-align: right; }

[data-dh-slug="customized-sofas"] .dhc-custom__photo { position: relative; aspect-ratio: 16 / 11; }
[data-dh-slug="customized-sofas"] .dhc-custom__img {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
}
/* .dhc-custom__img is a <picture> (responsive desktop/mobile source) —
   sizing/object-fit apply to its rendered <img>, not the wrapper itself. */
[data-dh-slug="customized-sofas"] .dhc-custom__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
[data-dh-slug="customized-sofas"] .dhc-custom__img.is-on { opacity: 1; }

[data-dh-slug="customized-sofas"] .dhc-custom__panel {
  position: relative;
  margin: -40px 16px 16px;
  background: var(--white);
  border-radius: var(--dh-radius);
  padding: 16px;
  box-shadow: 0 18px 40px rgba(35, 33, 30, 0.14);
  display: flex;
  flex-direction: column;
  gap: 14px;
  z-index: 2;
}
[data-dh-slug="customized-sofas"] .dhc-custom__label {
  display: block;
  font-size: 14px;
  font-weight: var(--fw-semiBold);
  color: var(--dh-ink);
  margin-bottom: 8px;
}
[data-dh-slug="customized-sofas"] .dhc-custom__fams { display: flex; gap: 8px; }
[data-dh-slug="customized-sofas"] .dhc-custom__fam {
  flex: 1;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  border: 1px solid var(--dh-line);
  background: var(--white);
  padding: 0;
  overflow: hidden;
}
/* Real product photos fill the thumbnail edge-to-edge (like the seating
   cards), rather than the letterboxed `contain` fit the old flat-color
   placeholder images used. */
[data-dh-slug="customized-sofas"] .dhc-custom__fam img { width: 100%; height: 100%; object-fit: cover; display: block; }
[data-dh-slug="customized-sofas"] .dhc-custom__fabrics { display: flex; gap: 8px; flex-wrap: wrap; }
[data-dh-slug="customized-sofas"] .dhc-custom__fabric {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--sw, #ccc);
  border: 2px solid transparent;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  padding: 0;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
[data-dh-slug="customized-sofas"] .dhc-custom__fabric:hover { transform: scale(1.12); }
[data-dh-slug="customized-sofas"] .dhc-custom__fabric.is-on { border-color: var(--dh-ink); transform: scale(1.15); }

@media (min-width: 900px) {
  /* Full-bleed takeover: copy and photo share the same grid cell (photo
     behind, copy on top via z-index) instead of sitting side by side —
     the photo now reads as the stage's actual background, with the copy
     block's own cream gradient standing in for the old mask-fade/solid
     cream panel to keep the text legible over it. The family/fabric
     panel is a small frosted-glass card pinned to the side of the banner
     OPPOSITE the copy's gradient (right in ltr, left in rtl — see the
     dir="rtl" override below) rather than centered, so it never buries
     the stage photo under itself. */
  [data-dh-slug="customized-sofas"] .dhc-custom__stage { display: grid; min-height: 420px; }
  [data-dh-slug="customized-sofas"] .dhc-custom__copy {
    grid-area: 1 / 1;
    position: relative;
    z-index: 1;
    max-width: 560px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: clamp(28px, 3vw, 44px);
    background: linear-gradient(90deg, rgba(246, 243, 238, 0.96) 0%, rgba(246, 243, 238, 0.85) 46%, rgba(246, 243, 238, 0) 78%);
  }
  [data-dh-slug="customized-sofas"] .dhc-custom__photo { grid-area: 1 / 1; aspect-ratio: auto; }
  [data-dh-slug="customized-sofas"] .dhc-custom__panel {
    margin: 0;
    position: absolute;
    top: 50%;
    right: 24px;
    transform: translateY(-50%);
    width: clamp(240px, 22vw, 300px);
    background: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 14px 34px rgba(35, 33, 30, 0.14);
    padding: 14px;
    gap: 10px;
  }
  [data-dh-slug="customized-sofas"] .dhc-custom__fabrics { gap: 6px; }
  [data-dh-slug="customized-sofas"] .dhc-custom__fabric { width: 20px; height: 20px; }
}
[dir="rtl"][data-dh-slug="customized-sofas"] .dhc-custom__panel { right: auto; left: 16px; }
@media (min-width: 900px) {
  [dir="rtl"][data-dh-slug="customized-sofas"] .dhc-custom__copy {
    margin-left: auto;
    background: linear-gradient(270deg, rgba(246, 243, 238, 0.96) 0%, rgba(246, 243, 238, 0.85) 46%, rgba(246, 243, 238, 0) 78%);
  }
  [dir="rtl"][data-dh-slug="customized-sofas"] .dhc-custom__panel { right: auto; left: 24px; }
}

/* ---------- Closing "Your Space, Your Rules" ----------
   Mobile (default): .dhc-rules__sticky and .dhc-rules__steps are both
   `display: contents`, so their children (3 frames + 3 steps) become direct
   items of the single-column .dhc-rules__wrap grid; explicit grid-row
   placement interleaves them photo/text/photo/text/photo/text. Pure CSS,
   no JS required. .dhc-rules__wrap sits OUTSIDE .dh-wrap (a sibling, not a
   child — see the render markup), so it carries the same width/max-width/
   margin-inline as .dh-wrap directly (see the base rule below) to stay
   boxed to the same column the heading above it uses, rather than
   stretching edge-to-edge.

   Desktop (≥900px): a full-viewport-height (100vh) two-up layout within
   that boxed column — .dhc-rules__sticky is CSS position:sticky (NOT a JS
   scroll-pin) holding the full-height photo in view while
   .dhc-rules__steps (each step also 100vh) scrolls past normally beside
   it. customized-sofas-anim.js creates one ScrollTrigger
   per step (no pin:true) that toggles which frame has .is-on based on
   which step is centered in the viewport — steps change in order purely
   as a side effect of normal scrolling: no scroll-track math, no stuck
   state, no wheel interception, nothing to get wrong. Without JS, step
   0's frame (server-rendered with .is-on already) stays visible
   throughout — still fully readable, just without the crossfade.
   The last step's trigger needs a little scroll room below the section to
   activate — fine on pages with real trailing content (a footer, another
   section), but when this is the very last thing on the page (e.g. the
   embedded variant with no footer at all) there may not be quite enough,
   leaving the last step stuck just shy of activating. The extra
   padding-bottom below is a small, ordinary-looking amount of section
   spacing that closes that gap everywhere, rather than a conspicuous
   dedicated spacer element. */
[data-dh-slug="customized-sofas"] .dhc-rules__title { margin-bottom: 36px; text-align: center; }
[dir="rtl"][data-dh-slug="customized-sofas"] .dhc-rules__title { text-align: center; }
@media (min-width: 900px) {
  /* Hugs the right half of the centered .dh-wrap, roughly lining up with
     the full-bleed text column that starts at the 50% mark right below. */
  [data-dh-slug="customized-sofas"] .dhc-rules__title { text-align: center; }
  [dir="rtl"][data-dh-slug="customized-sofas"] .dhc-rules__title { text-align: center; }
}

[data-dh-slug="customized-sofas"] .dhc-rules__wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  width: var(--dh-width, 90%);
  max-width: var(--dh-maxw, 1920px);
  margin-inline: auto;
}
[data-dh-slug="customized-sofas"] .dhc-rules__sticky,
[data-dh-slug="customized-sofas"] .dhc-rules__steps { display: contents; }

[data-dh-slug="customized-sofas"] .dhc-rules__frame {
  position: relative;
  border-radius: var(--dh-radius-lg);
  overflow: hidden;
  opacity: 1;
  min-height: 320px;
}
[data-dh-slug="customized-sofas"] .dhc-rules__frame picture,
[data-dh-slug="customized-sofas"] .dhc-rules__frame img { display: block; width: 100%; height: 100%; }
[data-dh-slug="customized-sofas"] .dhc-rules__frame img { object-fit: cover; }

/* Decorative outsized step numeral in the photo's corner — borrows the
   serif display face for a numeral rather than a heading. */
[data-dh-slug="customized-sofas"] .dhc-rules__big-no {
  position: absolute;
  left: 20px;
  bottom: 10px;
  font-family: var(--dh-font-display);
  font-size: clamp(56px, 8vw, 96px);
  font-weight: 600;
  line-height: 1;
  color: rgba(255, 255, 255, 0.85);
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.85);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
[dir="rtl"][data-dh-slug="customized-sofas"] .dhc-rules__big-no { left: auto; right: 20px; }

/* Step indicator on the photo's edge — one segment per step; the segment
   matching the currently-showing frame is solid/tall, the rest are
   dim/short, so the highlighted position moves as the frames crossfade. */
[data-dh-slug="customized-sofas"] .dhc-rules__ticks {
  position: absolute;
  top: 24px;
  right: 24px;
  bottom: 24px;
  width: 2px;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  pointer-events: none;
}
[data-dh-slug="customized-sofas"] .dhc-rules__ticks i {
  width: 2px;
  height: 16px;
  border-radius: 1px;
  background: var(--white);
  opacity: 0.4;
  transform: scaleY(1);
  transform-origin: center;
  transition: height 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-dh-slug="customized-sofas"] .dhc-rules__ticks i.is-on {
  height: 46px;
  opacity: 1;
  transform: scaleY(1.04);
}
[dir="rtl"][data-dh-slug="customized-sofas"] .dhc-rules__ticks { right: auto; left: 24px; }

[data-dh-slug="customized-sofas"] .dhc-rules__step { opacity: 1; }
[data-dh-slug="customized-sofas"] .dhc-rules__no {
  display: block;
  font-size: 13px;
  font-weight: var(--fw-semiBold);
  letter-spacing: 0.05em;
  color: var(--dh-rust);
  margin-bottom: 8px;
}
[data-dh-slug="customized-sofas"] .dhc-rules__step h3 {
  font-size: clamp(20px, 2.6vw, 28px);
  font-weight: var(--fw-semiBold);
  margin: 0 0 10px;
}
[data-dh-slug="customized-sofas"] .dhc-rules__step p {
  font-size: clamp(13px, 1.4vw, 15px);
  color: var(--dh-text-muted);
  font-weight: var(--fw-regular);
  line-height: 1.6;
  margin: 0 0 18px;
  max-width: 440px;
}
/* Mobile interleave order: frame0, step0, frame1, step1, frame2, step2. */
[data-dh-slug="customized-sofas"] .dhc-rules__frame[data-dh-rules-frame="0"] { grid-row: 1; }
[data-dh-slug="customized-sofas"] .dhc-rules__step[data-dh-rules-step="0"] { grid-row: 2; }
[data-dh-slug="customized-sofas"] .dhc-rules__frame[data-dh-rules-frame="1"] { grid-row: 3; }
[data-dh-slug="customized-sofas"] .dhc-rules__step[data-dh-rules-step="1"] { grid-row: 4; }
[data-dh-slug="customized-sofas"] .dhc-rules__frame[data-dh-rules-frame="2"] { grid-row: 5; }
[data-dh-slug="customized-sofas"] .dhc-rules__step[data-dh-rules-step="2"] { grid-row: 6; }

@media (min-width: 900px) {
  /* Two-up takeover within the boxed .dh-wrap-width column (set on the
     base .dhc-rules__wrap rule above), no between-column gap.
     Progressive enhancement, two layers:

     1. Base (no JS, or JS/GSAP failed to load): `.dhc-rules__sticky`
        stays CSS position:sticky beside `.dhc-rules__steps`, which is
        left in NORMAL FLOW here (its own per-step sizing/layout rules
        live in the shared, non-media-queried block above) — so it's
        simply a tall column of 3 full-height steps with a sticky photo
        beside it, scrollable via the page's own ordinary scroll. Frame 0
        is server-rendered `.is-on`, so the photo is always legible even
        with zero JS; it just won't crossfade between frames without JS
        to drive it.

     2. Enhanced (`.dhc-rules__wrap.is-pin-ready`, added by
        customized-sofas-anim.js once it has GSAP/ScrollTrigger and
        successfully set up the pinned controller): `.dhc-rules__steps`
        becomes a positioned box and its 3 `.dhc-rules__step` children
        are stacked absolutely on top of each other (mirroring
        `.dhc-rules__frame`'s existing absolute+`.is-on` pattern below),
        so only the active step's text shows at a time. JS then pins
        `.dhc-rules__wrap` itself (GSAP ScrollTrigger `pin: true`) and
        swaps the active frame/step in lockstep as the user scrolls
        through the pin's extra scroll distance — see anim.js for the
        controller. GSAP's pin-spacer reserves its own scroll room for
        that distance, which is what makes this safe even on the
        embedded page variant that has no footer/trailing content below
        this section (a real `pin:true` section was tried and abandoned
        here before specifically over that "not enough room to release"
        concern — the pin-spacer is what actually solves it). */
  [data-dh-slug="customized-sofas"] .dhc-rules__wrap {
    /* Single source of truth for this section's pinned height — every
       other rule below reads it via inheritance instead of repeating
       `100vh`/a literal value, so resizing the section is a one-line
       change here. JS reads the same rendered value off `wrap` itself
       (see anim.js) rather than assuming `window.innerHeight`, so it
       always matches whatever this resolves to. */
    --dhc-rules-h: 88dvh;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: start;
    height: var(--dhc-rules-h);
  }
  [data-dh-slug="customized-sofas"] .dhc-rules__sticky {
    display: block;
    position: sticky;
    top: 0;
    height: var(--dhc-rules-h);
  }
  [data-dh-slug="customized-sofas"] .dhc-rules__frame {
    position: absolute;
    inset: 0;
    grid-row: auto;
    opacity: 0;
  }
  [data-dh-slug="customized-sofas"] .dhc-rules__frame.is-on { opacity: 1; }
  [data-dh-slug="customized-sofas"] .dhc-rules__ticks { display: flex; }
  [data-dh-slug="customized-sofas"] .dhc-rules__step {
    grid-row: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: var(--dhc-rules-h);
    padding-inline: clamp(32px, 6vw, 100px);
  }

  /* Enhanced/pinned mode only — see layer 2 above. `display: block`
     overrides the base rule's `display: contents` (line ~591, needed for
     the fallback mode's grid-row interleaving) — a `display: contents`
     box generates no principal box of its own, so `position: relative`
     on it would be completely inert and its absolutely-positioned
     `.dhc-rules__step` children would escape to the next positioned
     ancestor up the tree instead of stacking inside this element. */
  [data-dh-slug="customized-sofas"] .dhc-rules__wrap.is-pin-ready .dhc-rules__steps {
    display: block;
    position: relative;
    height: var(--dhc-rules-h);
  }
  [data-dh-slug="customized-sofas"] .dhc-rules__wrap.is-pin-ready .dhc-rules__step {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
  }
  [data-dh-slug="customized-sofas"] .dhc-rules__wrap.is-pin-ready .dhc-rules__step.is-on {
    opacity: 1;
    pointer-events: auto;
  }
}

/* ---------- FAQ "Before you ask." ----------
   Native <details>/<summary>, no JS: the browser's own open/close state and
   accessibility semantics drive this, same dependency-free pattern as the
   landscape page's FAQ. Chevron rotation and divider lines are pure CSS. */
[data-dh-slug="customized-sofas"] .dhc-faq__head { text-align: center; margin-bottom: 36px; }
[data-dh-slug="customized-sofas"] .dhc-tag--faq { color: var(--dh-rust); }
[data-dh-slug="customized-sofas"] .dhc-faq__title { text-align: center; font-weight: var(--fw-regular); }

[data-dh-slug="customized-sofas"] .dhc-faq__list {
  max-width: 900px;
  margin-inline: auto;
  border-top: 1px solid var(--dh-line);
}
[data-dh-slug="customized-sofas"] .dhc-faq__item { border-bottom: 1px solid var(--dh-line); }
[data-dh-slug="customized-sofas"] .dhc-faq__q {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 22px 36px 22px 0;
  font-size: var(--fs-14);
  font-weight: var(--fw-semiBold);
  color: var(--dh-ink);
  transition: color 0.2s ease;
}
[dir="rtl"][data-dh-slug="customized-sofas"] .dhc-faq__q { padding: 22px 0 22px 36px; }
[data-dh-slug="customized-sofas"] .dhc-faq__q::-webkit-details-marker { display: none; }
[data-dh-slug="customized-sofas"] .dhc-faq__q:hover { color: var(--dh-rust); }
[data-dh-slug="customized-sofas"] .dhc-faq__q::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--dh-rust);
  border-bottom: 2px solid var(--dh-rust);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.25s ease;
}
[dir="rtl"][data-dh-slug="customized-sofas"] .dhc-faq__q::after { right: auto; left: 4px; }
[data-dh-slug="customized-sofas"] .dhc-faq__item[open] .dhc-faq__q::after { transform: translateY(-30%) rotate(225deg); }
[data-dh-slug="customized-sofas"] .dhc-faq__a {
  margin: 0 36px 22px 0;
  color: var(--dh-text-muted);
  font-size: var(--fs-12);
  font-weight: var(--fw-regular);
  line-height: 1.65;
}
[dir="rtl"][data-dh-slug="customized-sofas"] .dhc-faq__a { margin: 0 0 22px 36px; }
@media (min-width: 900px) {
  [data-dh-slug="customized-sofas"] .dhc-faq__q { font-size: var(--fs-16); }
  [data-dh-slug="customized-sofas"] .dhc-faq__a { font-size: 15px; }
}

/* ---------- Buying guide (SEO copy) ----------
   Mirrors the gazebo landing page's own Story buying-guide block: collapsed
   to a fixed height with a gradient fade, expanding on "Read More" — toggled
   here by customized-sofas.js (plain class swap) since this page has no
   React state, rather than that page's useState-driven conditional render. */
[data-dh-slug="customized-sofas"] .dhc-guide { margin: 0 auto;
    padding: clamp(60px, 8vw, 100px) clamp(20px, 4vw, 32px) clamp(40px, 6vw, 70px); }
[data-dh-slug="customized-sofas"] .dhc-guide__body { position: relative; }
[data-dh-slug="customized-sofas"] .dhc-guide__content { height: 340px; overflow: hidden; }
[data-dh-slug="customized-sofas"] .dhc-guide__body.is-open .dhc-guide__content { height: auto; }
@media (max-width: 768px) {
  [data-dh-slug="customized-sofas"] .dhc-guide__content { height: 300px; }
}

[data-dh-slug="customized-sofas"] .dhc-guide__content h2 {
  margin: 0 0 18px;
  font-family: var(--dh-font);
  font-size: clamp(var(--fs-18), 3vw, var(--fs-22));
  font-weight: var(--fw-semiBold);
  line-height: 1.4;
  color: var(--dh-ink);
}
[data-dh-slug="customized-sofas"] .dhc-guide__content h3 {
  margin: 32px 0 12px;
  font-family: var(--dh-font);
  font-size: clamp(var(--fs-16), 2.2vw, var(--fs-20));
  font-weight: var(--fw-semiBold);
  line-height: 1.4;
  color: var(--dh-ink);
}
[data-dh-slug="customized-sofas"] .dhc-guide__content p {
  margin: 0 0 14px;
  font-size: var(--fs-14);
  line-height: 1.7;
  color: var(--dh-text-muted);
  font-weight: var(--fw-regular);
}
[data-dh-slug="customized-sofas"] .dhc-guide__content strong { color: var(--dh-ink); font-weight: var(--fw-semiBold); }
[data-dh-slug="customized-sofas"] .dhc-guide__content a { color: var(--dh-rust); font-weight: var(--fw-semiBold); }
[data-dh-slug="customized-sofas"] .dhc-guide__content ul,
[data-dh-slug="customized-sofas"] .dhc-guide__content ol {
  margin: 0 0 14px;
  padding-left: 20px;
}
[dir="rtl"][data-dh-slug="customized-sofas"] .dhc-guide__content ul,
[dir="rtl"][data-dh-slug="customized-sofas"] .dhc-guide__content ol {
  padding-left: 0;
  padding-right: 20px;
}
[data-dh-slug="customized-sofas"] .dhc-guide__content li {
  margin-bottom: 8px;
  font-size: var(--fs-14);
  line-height: 1.6;
  color: var(--dh-text-muted);
  font-weight: var(--fw-regular);
}

[data-dh-slug="customized-sofas"] .dhc-guide__content table {
  width: 100%;
  margin: 6px 0 22px;
  border: 1px solid var(--dh-line);
  border-collapse: collapse;
  border-radius: 10px;
  overflow: hidden;
}
@media (max-width: 900px) {
  [data-dh-slug="customized-sofas"] .dhc-guide__content table {
    display: block;
    width: auto;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
[data-dh-slug="customized-sofas"] .dhc-guide__content th,
[data-dh-slug="customized-sofas"] .dhc-guide__content td {
  padding: 12px 14px;
  border: 1px solid var(--dh-line);
  text-align: left;
  vertical-align: top;
  font-size: var(--fs-14);
  font-weight: var(--fw-regular);
  color: var(--dh-text);
  background: var(--dh-white);
}
[dir="rtl"][data-dh-slug="customized-sofas"] .dhc-guide__content th,
[dir="rtl"][data-dh-slug="customized-sofas"] .dhc-guide__content td {
  text-align: right;
}
[data-dh-slug="customized-sofas"] .dhc-guide__content th {
  background: var(--dh-cream-2);
  font-weight: var(--fw-semiBold);
  white-space: nowrap;
}
[data-dh-slug="customized-sofas"] .dhc-guide__content tr:nth-child(even) td { background: rgba(35, 33, 30, 0.02); }

[data-dh-slug="customized-sofas"] .dhc-guide__fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 130px;
  background: linear-gradient(180deg, transparent, var(--dh-white) 78%);
  pointer-events: none;
}
[data-dh-slug="customized-sofas"] .dhc-guide__body.is-open .dhc-guide__fade { display: none; }

[data-dh-slug="customized-sofas"] .dhc-guide__toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 22px;
  padding: 0 0 3px;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: none;
  cursor: pointer;
  font-family: var(--dh-font);
  font-size: var(--fs-14);
  font-weight: var(--fw-semiBold);
  color: var(--dh-rust);
  transition: gap 0.3s ease;
}

/* App mode (?isApp=1): the mobile app has its own native customizer, FAQ,
   and SEO-guide surfaces, so these sections are redundant inside its webview. */
.dh-app [data-dh-slug="customized-sofas"] .dhc-custom,
.dh-app [data-dh-slug="customized-sofas"] .dhc-rules,
.dh-app [data-dh-slug="customized-sofas"] .dhc-faq,
.dh-app [data-dh-slug="customized-sofas"] .dhc-guide {
  display: none;
}
[data-dh-slug="customized-sofas"] .dhc-guide__toggle:hover { gap: 14px; }