/* === DREAMY — prvky popisků postelí z masivu  ·  v1 NÁVRH · 2026-10-10 ===
 * Nadstavba nad popisky.css + popisky-dreamy.css (+ popisky-dreamy-prvky.css kvůli pruhu jistot .dy-trust).
 * Záhlaví (za popisky-dreamy-prvky.css): <link rel="stylesheet" href="/user/documents/upload/styles/popisky-postele.css?v=1">
 * Interaktivita jen přes existující popisky.js (.dpd-tabs → data-active na boxu). Žádný nový JS.
 * Vše je pod .dpd--dy → nic jiného na webu neovlivní.
 * Prvky:
 *  B1 .bd-joint     spoj čelo–bočnice, přepínač Smontovaná / Rozložená (animace přes data-active)
 *  B2 .bd-hard      tvrdost dřevin (Janka), tvrdé vs. měkké
 *  B3 .bd-finger    cinková spárovka, kreslený cinkový spoj
 *  B4 .bd-tones     přepínač odstínů s fotkou postele
 *  B5 .bd-models    srovnání modelů s fotkou (karty dpd-cmp)
 *  B6 .bd-try       „vyzkoušejte pevnost na prodejně“
 *  B7 .bd-design    návrh ložnice zdarma (architekti a designéři)
 *  B8 .bd-konti     kontinentální postel: nákres běžná vs. kontinentální (Aspen, Grande)
 *  B9 LED v čele    box .bd-more-tones v sekci Design (Grande)
 *  .bd-pillars      tři pilíře pevnosti (rozcestník)
 */

.dpd--dy { --wood: #c99a62; --wood-2: #b8864e; --wood-3: #dcb27c; --steel: #6f7378; }

/* Tři pilíře pevnosti */
.dpd--dy .bd-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 26px !important; counter-reset: pil; }
.dpd--dy .bd-pillars li { counter-increment: pil; padding: 22px 20px; border-radius: 18px; background: var(--blush); }
.dpd--dy .bd-pillars li::before { content: "0" counter(pil) !important; display: block !important; font-size: 13px; font-weight: 700; letter-spacing: .14em; color: var(--pink); margin-bottom: 8px; }
.dpd--dy .bd-pillars b { display: block; color: var(--ink); font-size: 17px; line-height: 1.3; margin-bottom: 6px; }
.dpd--dy .bd-pillars p { font-size: 14.5px; line-height: 1.55; }

/* Dvousloupec: text + ilustrace */
.dpd--dy .bd-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; margin-top: 26px !important; }
.dpd--dy .bd-points { display: grid; gap: 10px; }
.dpd--dy .bd-points li { display: grid; grid-template-columns: 30px 1fr; gap: 2px 12px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: #fff; }
.dpd--dy .bd-points li::before { content: "✓" !important; display: flex !important; grid-row: span 2; width: 30px; height: 30px; border-radius: 9px; background: var(--blush); color: var(--pink); font-weight: 700; align-items: center; justify-content: center; font-size: 15px; }
.dpd--dy .bd-points b { color: var(--ink); font-size: 15.5px; line-height: 1.35; }
.dpd--dy .bd-points p { font-size: 14.5px; line-height: 1.5; }
.dpd--dy p.bd-src { margin-top: 14px !important; font-size: 12.5px !important; line-height: 1.5; color: var(--muted) !important; }

/* B2 — tvrdost dřevin */
.dpd--dy .bd-hard { padding: 24px 24px 18px; border-radius: 20px; background: #fff; border: 1px solid var(--line); }
.dpd--dy .bd-hard-ttl { font-size: 13px !important; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted) !important; margin-bottom: 14px !important; }
.dpd--dy .bd-hard ul { display: grid; gap: 12px; }
.dpd--dy .bd-hard li { display: grid; grid-template-columns: 92px minmax(0, 1fr) 70px; gap: 12px; align-items: center; font-size: 14.5px; }
.dpd--dy .bd-hard li b { color: var(--ink); font-weight: 600; }
.dpd--dy .bd-hard li em { font-style: normal; text-align: right; font-weight: 600; color: var(--ink); white-space: nowrap; }
.dpd--dy .bd-hard .dpd-bar { margin: 0; height: 14px; border-radius: 4px; }
.dpd--dy .bd-hard li.is-soft b, .dpd--dy .bd-hard li.is-soft em { color: var(--muted); }
.dpd--dy .bd-hard li.is-soft .dpd-bar::before { background: #cfc6cb; }
.dpd--dy .bd-hard-sep { padding-top: 10px; margin-top: 2px; border-top: 1px dashed var(--blush-2); }
.dpd--dy .bd-hard-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 14px !important; font-size: 12.5px; color: var(--muted); }
.dpd--dy .bd-hard-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; background: var(--pink); }
.dpd--dy .bd-hard-legend span.is-soft::before { background: #cfc6cb; }

/* B3 — cinková spárovka (kreslený cinkový spoj, --t = hloubka cinku) */
.dpd--dy .bd-finger-box { padding: 26px 24px 20px; border-radius: 20px; background: var(--blush); }
.dpd--dy .bd-finger { --t: 26px; display: flex; height: 96px; filter: drop-shadow(0 10px 14px rgba(120, 70, 30, .18)); }
.dpd--dy .bd-finger i { flex: 1 1 0; font-size: 0; font-style: normal; background-color: var(--wood); background-image: repeating-linear-gradient(180deg, rgba(255,255,255,.0) 0 7px, rgba(120,70,30,.10) 7px 8px), linear-gradient(90deg, rgba(255,255,255,.12), rgba(0,0,0,.04)); }
.dpd--dy .bd-finger i + i { margin-left: calc(var(--t) * -1 + 2px); }
.dpd--dy .bd-finger i:nth-child(2) { background-color: var(--wood-3); }
.dpd--dy .bd-finger i:nth-child(3) { background-color: var(--wood-2); }
.dpd--dy .bd-finger i:nth-child(4) { background-color: #d6a970; }
.dpd--dy .bd-finger .bd-f-a { clip-path: polygon(0 0, calc(100% - var(--t)) 0, 100% 10%, calc(100% - var(--t)) 20%, 100% 30%, calc(100% - var(--t)) 40%, 100% 50%, calc(100% - var(--t)) 60%, 100% 70%, calc(100% - var(--t)) 80%, 100% 90%, calc(100% - var(--t)) 100%, 0 100%); border-radius: 8px 0 0 8px; }
.dpd--dy .bd-finger .bd-f-b { clip-path: polygon(0 0, calc(100% - var(--t)) 0, 100% 10%, calc(100% - var(--t)) 20%, 100% 30%, calc(100% - var(--t)) 40%, 100% 50%, calc(100% - var(--t)) 60%, 100% 70%, calc(100% - var(--t)) 80%, 100% 90%, calc(100% - var(--t)) 100%, 0 100%, var(--t) 90%, 0 80%, var(--t) 70%, 0 60%, var(--t) 50%, 0 40%, var(--t) 30%, 0 20%, var(--t) 10%); }
.dpd--dy .bd-finger .bd-f-c { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, var(--t) 90%, 0 80%, var(--t) 70%, 0 60%, var(--t) 50%, 0 40%, var(--t) 30%, 0 20%, var(--t) 10%); border-radius: 0 8px 8px 0; }
.dpd--dy .bd-finger-cap { display: flex; justify-content: space-between; gap: 10px; margin-top: 14px !important; font-size: 13px; color: var(--muted); }
.dpd--dy .bd-finger-cap b { color: var(--ink); font-weight: 600; }
.dpd.dpd-js .dpd-reveal .bd-finger i { transform: translateX(calc((var(--i, 0) - 1.5) * 26px)); opacity: .6; transition: transform 1s cubic-bezier(.2,.7,.2,1) .2s, opacity .6s ease .2s; }
.dpd.dpd-js .dpd-reveal.is-in .bd-finger i { transform: none; opacity: 1; }

/* B1 — spoj čelo–bočnice. Kresba v řezu: vlevo noha čela, vpravo bočnice.
   Přepínač (.dpd-tabs, popisky.js) nastaví data-active="apart" → díly se rozjedou. */
.dpd--dy .bd-joint-wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; align-items: center; }
.dpd--dy .bd-joint { position: relative; height: 230px; border-radius: 18px; background: #f7f3ef; overflow: hidden; }
.dpd--dy .bd-joint > * { position: absolute; font-style: normal; }
.dpd--dy .bd-j-post { left: 6%; top: 14px; bottom: 14px; width: 24%; border-radius: 10px; background-color: var(--wood-2); background-image: repeating-linear-gradient(90deg, rgba(0,0,0,0) 0 9px, rgba(90,50,20,.12) 9px 10px); }
.dpd--dy .bd-j-rail { left: 30%; right: 4%; top: 58px; height: 114px; border-radius: 0 10px 10px 0; background-color: var(--wood); background-image: repeating-linear-gradient(180deg, rgba(0,0,0,0) 0 9px, rgba(90,50,20,.10) 9px 10px); transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.dpd--dy .bd-j-lbl { font-size: 12px; font-weight: 600; color: #fff; letter-spacing: .06em; text-transform: uppercase; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.dpd--dy .bd-j-lbl--post { left: 6%; width: 24%; bottom: 24px; text-align: center; }
.dpd--dy .bd-j-lbl--rail { right: calc(4% + 14px); top: 66px; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
/* závitnice: hlava v noze čela, závit do bočnice */
.dpd--dy .bd-j-bolt { left: 11%; top: 111px; width: 41%; height: 8px; border-radius: 4px; background: repeating-linear-gradient(90deg, #9aa0a6 0 3px, #5d6268 3px 5px); transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.dpd--dy .bd-j-head { left: calc(11% - 6px); top: 101px; width: 12px; height: 28px; border-radius: 4px; background: #4f5459; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
/* závrtná matice v bočnici (válec napříč) */
.dpd--dy .bd-j-nut { left: calc(52% - 13px); top: 102px; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, #3f4348 0 5px, #8d9399 6px 100%); box-shadow: 0 0 0 3px rgba(255,255,255,.55); transition: transform .8s cubic-bezier(.2,.7,.2,1); }
/* bukové kolíky */
.dpd--dy .bd-j-dow { left: 24%; width: 15%; height: 12px; border-radius: 6px; background: #ecd2a6; box-shadow: inset 0 0 0 1.5px #c9a46d; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.dpd--dy .bd-j-dow1 { top: 74px; }
.dpd--dy .bd-j-dow2 { top: 144px; }
/* čísla k legendě */
.dpd--dy .bd-j-n { width: 24px; height: 24px; border-radius: 50%; background: var(--pink); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 3px #fff; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.dpd--dy .bd-j-n1 { left: 40%; top: 84px; }
.dpd--dy .bd-j-n2 { left: calc(52% + 18px); top: 132px; }
.dpd--dy .bd-j-n3 { left: 31%; top: 158px; }
/* rozložená postel */
.dpd--dy .dpd-tabs[data-active="apart"] .bd-j-rail,
.dpd--dy .dpd-tabs[data-active="apart"] .bd-j-lbl--rail,
.dpd--dy .dpd-tabs[data-active="apart"] .bd-j-nut,
.dpd--dy .dpd-tabs[data-active="apart"] .bd-j-n2 { transform: translateX(44px); }
.dpd--dy .dpd-tabs[data-active="apart"] .bd-j-bolt,
.dpd--dy .dpd-tabs[data-active="apart"] .bd-j-head,
.dpd--dy .dpd-tabs[data-active="apart"] .bd-j-n1 { transform: translateX(-30px); }
.dpd--dy .bd-joint-leg { display: grid; gap: 10px; counter-reset: jl; }
.dpd--dy .bd-joint-leg li { counter-increment: jl; display: grid; grid-template-columns: 28px 1fr; gap: 2px 12px; }
.dpd--dy .bd-joint-leg li::before { content: counter(jl) !important; display: flex !important; grid-row: span 2; width: 28px; height: 28px; border-radius: 50%; background: var(--pink); color: #fff; font-size: 13px; font-weight: 700; align-items: center; justify-content: center; }
.dpd--dy .bd-joint-leg b { color: var(--ink); font-size: 15.5px; line-height: 1.35; }
.dpd--dy .bd-joint-leg p { font-size: 14.5px; line-height: 1.5; }
.dpd--dy .bd-joint-note { margin-top: 16px !important; padding: 14px 16px; border-radius: 14px; background: var(--blush); font-size: 15px; }

/* B6 — vyzkoušejte pevnost */
.dpd--dy .bd-try { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); border-radius: 24px; overflow: hidden; background: #2b211c; color: #fff; }
.dpd--dy .bd-try-img { position: relative; min-height: 300px; background: #3a2c24; }
.dpd .bd-try-img img { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; }
.dpd--dy .bd-try-txt { padding: 40px 42px; }
.dpd--dy .bd-try-txt .dpd-eyebrow { color: #ff8fc2 !important; }
.dpd.dpd--dy .bd-try h2 { color: #fff !important; }
.dpd--dy .bd-try p { color: rgba(255,255,255,.86); }
.dpd--dy .bd-try-steps { display: grid; gap: 10px; margin: 20px 0 22px !important; counter-reset: ts; }
.dpd--dy .bd-try-steps li { counter-increment: ts; display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: center; color: #fff; font-size: 15.5px; }
.dpd--dy .bd-try-steps li::before { content: counter(ts) !important; display: flex !important; width: 34px; height: 34px; border-radius: 10px; background: rgba(255,255,255,.12); color: #ff8fc2; font-weight: 700; align-items: center; justify-content: center; }
.dpd--dy .bd-try .dpd-btn { background: var(--pink); color: #fff !important; }
.dpd--dy .bd-try .dpd-btn:hover { background: var(--pink-2); }
.dpd--dy .bd-try .dpd-btn--ghost { background: transparent; border: 1.5px solid rgba(255,255,255,.55); }

/* B4 — odstíny */
.dpd--dy .bd-tones { margin-top: 24px; padding: 0; border: 0; background: transparent; }
.dpd--dy .bd-tones .dpd-tablist { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; background: transparent; margin-bottom: 16px; }
.dpd--dy .bd-tones .dpd-tablist button { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border: 1px solid var(--line); background: #fff; font-size: 14px; border-radius: 12px; }
.dpd--dy .bd-tones .dpd-tablist button.is-on { background: var(--ink); color: #fff; border-color: var(--ink); box-shadow: none; }
.dpd--dy .bd-chip { display: inline-block; width: 24px; height: 24px; border-radius: 7px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.dpd--dy .bd-tone { margin: 0; border-radius: 22px; overflow: hidden; background: #f6f3f1; }
.dpd--dy .bd-tone[hidden] { display: none !important; }
.dpd--dy .bd-tone.is-on { animation: dpdIn .45s ease both; }
.dpd--dy .bd-tone img { display: block; width: 100%; height: auto !important; }
.dpd--dy .bd-tone figcaption { padding: 12px 18px; background: #fff; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 22px 22px; font-size: 14.5px; }
.dpd--dy .bd-more-tones { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; margin-top: 16px !important; padding: 16px 18px; border-radius: 16px; background: var(--blush); }
.dpd--dy .bd-more-tones .dpd-ico { width: 44px; height: 44px; margin: 0; background-color: #fff; box-shadow: none; border-radius: 12px; }
.dpd--dy .bd-more-tones p { font-size: 15px; }

/* B7 — návrh ložnice zdarma */
.dpd--dy .bd-design { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 0; border-radius: 24px; overflow: hidden; border: 1px solid var(--line); background: #fff; }
.dpd--dy .bd-design-txt { padding: 36px 38px; }
.dpd--dy .bd-design-side { padding: 36px 32px; background: var(--blush); display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.dpd--dy .bd-design-side b { display: block; font-size: 40px; line-height: 1; color: var(--pink); font-weight: 700; }
.dpd--dy .bd-design-side span { display: block; font-size: 15px; color: var(--ink); font-weight: 500; }
.dpd--dy .bd-design .dpd-cta-btns { margin-top: 20px; }
.dpd--dy .bd-design .dpd-btn { background: var(--pink); color: #fff !important; }
.dpd--dy .bd-design .dpd-btn:hover { background: var(--pink-2); }
.dpd--dy .bd-design .dpd-btn--ghost { background: #fff; color: var(--pink) !important; border: 1.5px solid #f0cfe0; }

/* B5 — srovnání modelů s fotkou */
.dpd--dy .bd-models .dpd-cmp { padding: 0 0 18px; overflow: hidden; }
.dpd--dy .bd-models .dpd-cmp > *:not(.bd-cmp-img) { margin-left: 18px !important; margin-right: 18px !important; }
.dpd--dy .bd-cmp-img { position: relative; aspect-ratio: 4 / 3; background: #f6f3f1; margin-bottom: 14px; }
.dpd .bd-cmp-img img { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; }
.dpd--dy .bd-models .dpd-cmp-tag { position: absolute; top: 12px; left: 12px; z-index: 1; margin: 0 !important; background: #fff; }
.dpd--dy .bd-models .dpd-cmp.is-current .dpd-cmp-tag { background: var(--pink); color: #fff; }

/* B8 — kontinentální postel: nákres běžná vs. kontinentální (výšky jsou orientační) */
.dpd--dy .bd-konti { display: grid; gap: 12px; padding: 22px; border-radius: 20px; background: var(--blush); }
.dpd--dy .bd-k-row { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 18px; align-items: center; padding: 16px; border-radius: 16px; background: #fff; }
.dpd--dy .bd-k-row.is-on { box-shadow: inset 0 0 0 2px var(--pink); }
.dpd--dy .bd-k-fig { position: relative; height: 96px; }
.dpd--dy .bd-k-fig > i { position: absolute; font-style: normal; font-size: 0; }
.dpd--dy .bd-k-leg { bottom: 0; width: 10px; height: 16px; border-radius: 2px; background: var(--wood-2); }
.dpd--dy .bd-k-leg--l { left: 10px; } .dpd--dy .bd-k-leg--r { right: 10px; }
.dpd--dy .bd-k-frame { left: 0; right: 0; border-radius: 4px; background-color: var(--wood); background-image: repeating-linear-gradient(90deg, rgba(0,0,0,0) 0 14px, rgba(90,50,20,.10) 14px 15px); }
.dpd--dy .bd-k-mat { left: 6px; right: 6px; border-radius: 7px; display: flex; align-items: center; justify-content: center; }
.dpd--dy .bd-k-fig--classic .bd-k-frame { bottom: 16px; height: 34px; }
.dpd--dy .bd-k-fig--classic .bd-k-mat { bottom: 34px; height: 32px; background: #ece3e8; border: 1px solid #d9cbd3; }
.dpd--dy .bd-k-fig--konti .bd-k-frame { bottom: 16px; height: 16px; }
.dpd--dy .bd-k-fig--konti .bd-k-mat { bottom: 32px; height: 56px; background: #f6c6dd; border: 1px solid #ec9cc3; }
.dpd--dy .bd-k-mat em { font-style: normal; font-size: 12.5px; font-weight: 700; color: #8a0049; }
.dpd--dy .bd-k-row p b { display: block; color: var(--ink); font-size: 15px; line-height: 1.3; }
.dpd--dy .bd-k-row p span { display: block; font-size: 13.5px; line-height: 1.4; color: var(--muted); margin-top: 2px; }
.dpd--dy .bd-more-tones + .bd-design { margin-top: 18px !important; }

/* B11 — rozměry a parametry (údaje ze Shoptetu) */
.dpd--dy .bd-specs { margin-top: 20px !important; padding: 22px 24px 12px; border-radius: 20px; background: #fff; border: 1px solid var(--line); }
.dpd--dy .bd-specs ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 34px; }
.dpd--dy .bd-specs li { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.dpd--dy .bd-specs li span { color: var(--muted); }
.dpd--dy .bd-specs li b { color: var(--ink); font-weight: 600; text-align: right; }

/* Odstíny bez fotek (statické čipy) */
.dpd--dy .bd-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px !important; }
.dpd--dy .bd-chips li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border-radius: 12px; border: 1px solid var(--line); background: #fff; font-size: 14px; font-weight: 500; color: var(--ink); }

/* Srovnání 9 modelů: 3 sloupce na PC */
.dpd--dy .dpd-cmps.bd-models { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Rozměry */
.dpd--dy .bd-sizes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px !important; }
.dpd--dy .bd-sizes li { padding: 10px 14px; border-radius: 10px; background: #fff; border: 1px solid var(--line); font-size: 15px; font-weight: 600; color: var(--ink); }

@media (max-width: 991px) {
  .dpd--dy .bd-pillars { grid-template-columns: 1fr; gap: 10px; }
  .dpd--dy .dpd-cmps.bd-models { grid-template-columns: 1fr 1fr; }
  .dpd--dy .bd-two, .dpd--dy .bd-joint-wrap { grid-template-columns: 1fr; gap: 22px; }
  .dpd--dy .bd-try, .dpd--dy .bd-design { grid-template-columns: 1fr; }
  .dpd--dy .bd-try-img { min-height: 240px; }
}
@media (max-width: 767px) {
  .dpd--dy .bd-hard { padding: 18px 16px 14px; }
  .dpd--dy .bd-hard li { grid-template-columns: 70px minmax(0, 1fr) 62px; gap: 8px; font-size: 13.5px; }
  .dpd--dy .bd-finger { --t: 16px; height: 72px; }
  .dpd--dy .bd-finger-box { padding: 20px 16px 16px; }
  .dpd--dy .bd-joint { height: 200px; }
  .dpd--dy .bd-j-rail { top: 48px; height: 104px; }
  .dpd--dy .bd-j-bolt { top: 96px; } .dpd--dy .bd-j-head { top: 86px; } .dpd--dy .bd-j-nut { top: 87px; }
  .dpd--dy .bd-j-dow1 { top: 62px; } .dpd--dy .bd-j-dow2 { top: 128px; }
  .dpd--dy .bd-j-n1 { top: 66px; } .dpd--dy .bd-j-n2 { top: 118px; } .dpd--dy .bd-j-n3 { top: 140px; }
  .dpd--dy .bd-j-lbl--rail { top: 54px; }
  .dpd--dy .bd-specs { padding: 16px 16px 6px; }
  .dpd--dy .bd-specs ul { grid-template-columns: 1fr; }
  .dpd--dy .bd-specs li { font-size: 14px; }
  .dpd--dy .dpd-cmps.bd-models { display: flex; }
  .dpd--dy .bd-konti { padding: 14px; }
  .dpd--dy .bd-k-row { grid-template-columns: 116px minmax(0, 1fr); gap: 12px; padding: 12px; }
  .dpd--dy .bd-try-txt, .dpd--dy .bd-design-txt { padding: 26px 20px; }
  .dpd--dy .bd-design-side { padding: 24px 20px; }
  .dpd--dy .bd-tones .dpd-tablist { flex-wrap: nowrap; overflow-x: auto; margin: 0 -20px 14px; padding: 0 20px 4px; scrollbar-width: none; }
  .dpd--dy .bd-tones .dpd-tablist::-webkit-scrollbar { display: none; }
  .dpd--dy .bd-tones .dpd-tablist button { flex: 0 0 auto; white-space: nowrap; font-size: 13px; padding: 6px 10px 6px 6px; }
  .dpd--dy .bd-chip { width: 20px; height: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .dpd--dy .bd-joint *, .dpd--dy .bd-finger i { transition: none !important; }
}