/* === DREAMY — rozvržení pro vlastní kolekci Dreamy (Comfort / ProComfort)  ·  v2 NÁVRH · 2026-10-05 ===
 * Nadstavba nad popisky.css: popisek začíná <div class="dpd dpd--dy">.
 * Záhlaví (za popisky.css): <link rel="stylesheet" href="/user/documents/upload/styles/popisky-dreamy.css?v=2">
 * Barvy a písmo přebírá z popisky.css (stejné jako Dorelan: růžová, blush, Rubik). Liší se jen rozvržením sekcí.
 * Vše je pod .dpd--dy → Dorelan / Technogel ani zbytek webu neovlivní.
 */

/* 1) Úvod — panel s fotkou a velkými čísly */
.dy-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); border-radius: 24px; overflow: hidden; background: var(--blush); }
.dy-hero-txt { padding: 46px 44px 38px; display: flex; flex-direction: column; justify-content: center; }
.dpd.dpd--dy .dy-hero h2 { font-size: 36px !important; line-height: 1.15 !important; }
.dy-hero-img { position: relative; background: #f6f3f1; min-height: 320px; }
.dpd .dy-hero-img img { position: absolute; inset: 0; width: 100%; height: 100% !important; /* téma Shoptetu přebíjí výšku obrázků v popisu (na mobilu béžový pruh pod fotkou) */ object-fit: cover; object-position: 70% 50%; }
.dy-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 28px !important; border-top: 1px solid var(--blush-2); }
.dy-stats li { padding: 18px 10px 0 0; }
.dy-stats b { display: block; font-weight: 700; font-size: 32px; line-height: 1; color: var(--pink); }
.dy-stats b small { font-size: 15px; font-weight: 500; color: var(--muted); margin-left: 3px; }
.dy-stats span { display: block; margin-top: 6px; font-size: 13px; color: var(--muted); line-height: 1.35; }

/* 2) Citát značky */
.dy-quote { padding: 44px 50px; border-radius: 24px; background: #fff; border: 1px solid var(--line); }
.dy-quote blockquote { margin: 0; padding: 0; border: 0; font-size: 26px; line-height: 1.35; font-weight: 600; color: var(--ink); max-width: 30ch; }
.dy-quote-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 46px; align-items: center; }
.dy-quote-cols > blockquote { padding-left: 24px; border-left: 4px solid var(--pink); }
.dy-quote p { font-size: 16px; color: var(--body); }
.dy-quote p + p { margin-top: 10px !important; }
.dy-sign { margin-top: 18px !important; font-size: 14px !important; color: var(--muted) !important; }

/* 3) Pro koho — dlaždice */
.dy-who { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 26px !important; }
.dy-who li { padding: 20px 18px; border-radius: 18px; background: #fff; border: 1px solid var(--line); }
.dy-who .dpd-ico { background-color: var(--blush); box-shadow: none; margin-bottom: 12px; }
.dy-who b { display: block; color: var(--ink); font-size: 15.5px; margin-bottom: 4px; }
.dy-who p { font-size: 14px; line-height: 1.5; color: var(--body); }

/* 4) Řez matrací — vrstvy ve skutečném poměru výšek (--h = cm) */
.dy-cut { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 40px; align-items: stretch; margin-top: 28px !important; }
.dy-cut-col { display: flex; flex-direction: column; gap: 3px; padding: 6px; border-radius: 16px; background: var(--blush-2); }
.dy-cut-col div { flex: var(--h) 1 0; min-height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 10px; font-size: 13px; font-weight: 600; text-align: center; padding: 4px 8px; }
.dy-l1 { background: #fff; color: var(--ink); }
.dy-l2 { background: #f6c6dd; color: #8a0049; }
.dy-l3 { background: #fbe0ed; color: #8a0049; }
.dy-l4 { background: var(--pink); color: #fff; background-image: repeating-linear-gradient(90deg, transparent 0 22px, rgba(255,255,255,.18) 22px 24px); }
.dy-cut-list { display: grid; gap: 12px; }
.dy-cut-list li { display: grid; grid-template-columns: 14px 1fr; gap: 14px; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--line); background: #fff; }
.dy-cut-list li > i { width: 14px; height: 14px; border-radius: 4px; margin-top: 5px; font-style: normal; font-size: 0; border: 1px solid var(--blush-2); }
.dy-cut-list h3 { font-size: 17px !important; }
.dy-cut-list p { font-size: 15px; line-height: 1.55; }
.dy-cut-list .dy-cm { color: var(--muted); font-weight: 500; }

/* 5) Potah — složení jako proužek */
.dy-mix { display: flex; height: 16px; border-radius: 6px; overflow: hidden; margin: 24px 0 18px !important; background: var(--blush); }
.dy-mix i { flex: var(--w) 0 0; min-width: 6px; font-size: 0; font-style: normal; }
.dy-c1 { background: #d90074; } .dy-c2 { background: #ec6aa9; } .dy-c3 { background: #f6c6dd; } .dy-c4 { background: #2e8a86; }
.dy-mix-leg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.dy-mix-leg li { padding-top: 12px; border-top: 3px solid var(--c); }
.dy-mix-leg b { display: block; font-weight: 700; font-size: 24px; color: var(--ink); line-height: 1.1; }
.dy-mix-leg span { display: block; font-weight: 600; color: var(--ink); font-size: 15px; margin: 2px 0 4px; }
.dy-mix-leg p { font-size: 14px; line-height: 1.5; }
.dy-care { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px !important; }
.dy-care li { padding: 8px 14px; border-radius: 10px; background: var(--blush); font-size: 14px; color: var(--ink); font-weight: 500; }

/* 6) Řada — žebříček výšek (karty dpd-cmp z popisky.css) */
.dy-h { display: flex; align-items: flex-end; height: 70px; margin: 4px 0 12px; }
.dy-h span { display: flex; align-items: flex-end; padding-bottom: 5px; justify-content: center; width: 100%; height: calc(var(--h) * 2.2px); border-radius: 8px; background: linear-gradient(180deg, #fff 0 42%, #f6c6dd 42% 100%); border: 1px solid var(--blush-2); color: #8a0049; font-size: 12px; font-weight: 600; }
.dpd-cmp.is-current .dy-h span { background: linear-gradient(180deg, #fff 0 42%, var(--pink) 42% 100%); color: #fff; }
.dy-more { margin-top: 18px !important; font-size: 15px; }

/* 7) Certifikace */
.dy-certs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 24px !important; }
.dy-certs li { padding: 22px 20px; border-radius: 18px; background: var(--blush); }
.dy-certs b { display: block; font-weight: 600; font-size: 18px; color: var(--ink); margin-bottom: 6px; }
.dy-certs p { font-size: 14.5px; line-height: 1.55; }

@media (max-width: 991px) {
  .dy-hero { grid-template-columns: 1fr; }
  .dy-hero-img { order: -1; }
  .dy-who { grid-template-columns: 1fr 1fr; }
  .dy-mix-leg { grid-template-columns: 1fr 1fr; }
  .dy-quote-cols { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 767px) {
  .dy-hero { border-radius: 20px; }
  .dy-hero-txt { padding: 26px 20px 24px; }
  .dpd.dpd--dy .dy-hero h2 { font-size: 27px !important; }
  .dy-stats { grid-template-columns: 1fr 1fr; }
  .dy-stats li { padding-top: 14px; }
  .dy-stats b { font-size: 27px; }
  .dy-quote { padding: 28px 20px; border-radius: 20px; }
  .dy-quote blockquote { font-size: 21px; }
  .dy-who { grid-template-columns: 1fr; gap: 10px; }
  .dy-who li { display: grid; grid-template-columns: 44px 1fr; gap: 0 14px; align-items: start; padding: 16px; }
  .dy-who .dpd-ico { grid-row: span 2; margin: 0; }
  .dy-cut { grid-template-columns: 62px minmax(0, 1fr); gap: 12px; }
  .dy-cut-col div { font-size: 11px; min-height: 26px; padding: 0 2px; }
  .dy-cut-list li { padding: 14px; grid-template-columns: 12px 1fr; gap: 10px; }
  .dy-mix-leg { grid-template-columns: 1fr 1fr; gap: 16px 12px; }
  .dy-certs { grid-template-columns: 1fr; }
}

/* Žádné „pilulky" (Tomáš 5. 10.): štítky jsou obdélníky se zakulacenými rohy */
.dpd--dy .dpd-cmp-tag { border-radius: 8px; }
.dpd--dy .dpd-facts li { border-radius: 10px; }