/* #21406 (Andrés 22-10-2026): colour block on the model pages, in place of the embedded configurator.
   Colours as configurator-steps.css: navy #003459, accent #2F5D7C, ink #111827, muted #6B7280, line #E5E7EB. */
.dbc { --dbc-navy: #003459; --dbc-accent: #2F5D7C; --dbc-ink: #111827; --dbc-muted: #6B7280; --dbc-line: #E5E7EB;
  color: var(--dbc-ink); }
/* #25621 r33 (Tinoush 22-10): button on the line of the title, colour groups spread over the full width up to the button's right edge. */
.dbc .dbc-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 32px; align-items: start; margin-bottom: 40px; }
.dbc .dbc-head-txt { display: contents; }
.dbc p.dbc-eyebrow { grid-column: 1; grid-row: 1; }
.dbc h2.dbc-title { grid-column: 1; grid-row: 2; }
.dbc p.dbc-intro { grid-column: 1; grid-row: 3; max-width: 760px; }
.dbc a.dbc-btn { grid-column: 2; grid-row: 2; align-self: center; justify-self: end; margin-bottom: 12px; }
.dbc p.dbc-eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--dbc-accent);
  margin: 0 0 10px; padding: 0; line-height: 1.3; }
.dbc h2.dbc-title { font-family: 'Decaydence Straight', Helvetica, Arial, sans-serif; font-size: 40px; font-weight: 800; line-height: 1.1;
  text-transform: uppercase; color: var(--dbc-ink); margin: 0; padding: 0 0 12px; }
.dbc p.dbc-intro { font-size: 15px; line-height: 1.6; color: var(--dbc-muted); margin: 0; padding: 0; }
.dbc a.dbc-btn { flex: none; display: inline-flex; align-items: center; gap: 12px; padding: 15px 28px; border-radius: 999px;
  background: var(--dbc-navy); color: #fff; font-size: 16px; font-weight: 600; line-height: 1.2; white-space: nowrap;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; transition: background .2s ease, transform .2s ease; }
.dbc a.dbc-btn:hover, .dbc a.dbc-btn:focus-visible { background: var(--dbc-accent); color: #fff; transform: translateY(-1px); }
.dbc .dbc-arrow { position: relative; width: 18px; height: 2px; background: currentColor; border-radius: 2px; }
.dbc .dbc-arrow::after { content: ''; position: absolute; right: 0; top: -4px; width: 8px; height: 8px;
  border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); }
.dbc .dbc-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(370px, 100%), 1fr)); gap: 36px 80px; }
.dbc h3.dbc-group-title { font-size: 14px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--dbc-ink);
  margin: 0 0 18px; padding: 0 0 10px; border-bottom: 1px solid var(--dbc-line); line-height: 1.3; }
.dbc ul.dbc-swatches { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 88px); gap: 18px 6px; }
.dbc ul.dbc-swatches li { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.dbc .dbc-dot { display: block; width: 56px; height: 56px; border-radius: 50%; border: 1px solid rgba(17, 24, 39, .14);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .55), 0 4px 10px rgba(17, 24, 39, .08); }
.dbc .dbc-name { margin-top: 8px; font-size: 11px; font-weight: 500; line-height: 1.35; letter-spacing: .08em; text-transform: uppercase;
  color: #374151; overflow-wrap: normal; word-break: keep-all; }
@media (max-width: 980px) {
  .dbc .dbc-head { grid-template-columns: minmax(0, 1fr); margin-bottom: 32px; }
  .dbc a.dbc-btn { grid-column: 1; grid-row: 4; justify-self: start; align-self: start; margin: 20px 0 0; }
  .dbc .dbc-groups { gap: 32px 40px; }
  .dbc h2.dbc-title { font-size: 32px; }
}
@media (max-width: 600px) {
  .dbc h2.dbc-title { font-size: 26px; }
  .dbc .dbc-groups { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .dbc ul.dbc-swatches { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 8px; }
  .dbc .dbc-dot { width: 48px; height: 48px; }
  .dbc .dbc-name { font-size: 10px; letter-spacing: .03em; }
  .dbc a.dbc-btn { justify-self: stretch; justify-content: center; white-space: normal; }
}