/* === DREAMY — popisky chráničů matrací (Shield Guard)  ·  v1 NÁVRH · 2026-10-11 ===
 * Nadstavba nad popisky.css + popisky-dreamy.css + popisky-textil.css (používá .dpd--tx, .tx-hero, .tx-specs…).
 * Záhlaví (za popisky-textil.css): <link rel="stylesheet" href="/user/documents/upload/styles/popisky-chranice.css?v=1">
 * Vše je pod .dpd--tx → ostatní popisky neovlivní.
 */

/* Tenký vs. prošívaný chránič — 2 fotky vedle sebe */
.dpd--tx .sg-vs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin-top: 24px; }
.dpd--tx .sg-vs figure { margin: 0; border-radius: 20px; overflow: hidden; background: #fff; border: 1px solid var(--line); }
.dpd--tx .sg-vs figure.is-hi { border-color: var(--pink); box-shadow: 0 16px 32px -24px rgba(217, 0, 116, .55); }
.dpd--tx .sg-vs img { display: block; width: 100%; height: auto !important; aspect-ratio: 4 / 3; object-fit: cover; }
.dpd--tx .sg-vs figcaption { padding: 16px 18px 18px; }
.dpd--tx .sg-vs h3 { margin: 0 0 6px !important; font-size: 18px; }
.dpd--tx .sg-vs p { margin: 0 !important; font-size: 15px; line-height: 1.55; }
.dpd--tx .sg-vs .sg-tag { display: inline-block; margin-bottom: 8px; padding: 3px 10px; border-radius: 999px; background: var(--blush); color: var(--pink); font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.dpd--tx .sg-vs figure:not(.is-hi) .sg-tag { background: var(--sand-2); color: #6b6258; }
.dpd--tx .sg-vs .sg-img { position: relative; display: block; }
/* „nedoporučujeme“ — přeškrtnutá fotka */
.dpd--tx .sg-vs figure.sg-no img { filter: grayscale(.45) brightness(.97); }
.dpd--tx .sg-vs figure.sg-no .sg-img::before,
.dpd--tx .sg-vs figure.sg-no .sg-img::after { content: "" !important; position: absolute; left: 50%; top: 50%; width: 78%; height: 8px; margin: -4px 0 0 -39%; border-radius: 8px; background: #d6283b; opacity: .9; box-shadow: 0 2px 10px rgba(0, 0, 0, .25); z-index: 2; pointer-events: none; }
.dpd--tx .sg-vs figure.sg-no .sg-img::before { transform: rotate(32deg); }
.dpd--tx .sg-vs figure.sg-no .sg-img::after { transform: rotate(-32deg); }
.dpd--tx .sg-vs figure.sg-no .sg-tag { background: #fde8ea; color: #c21f31; }
.dpd--tx .sg-after { margin-top: 22px !important; }

/* Chrániče nemají garanci výměny → skrýt položku „Garance výměny“ v pruhu jistot (produkt.js), jen na stránkách s tímto popiskem */
body.type-product:has(.dpd[data-bez-garance]) .dz-trust li:has(a[href="/garance/"]) { display: none !important; }
@media (min-width: 768px) {
  body.type-product:has(.dpd[data-bez-garance]) .dz-trust-band .dz-trust { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* Konstrukce — řez vrstvami (čisté CSS, tloušťky jsou schematické) */
.dpd--tx .sg-stack { list-style: none; margin: 22px 0 0 !important; padding: 0 !important; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); background: #fff; }
.dpd--tx .sg-stack li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); align-items: center; gap: 18px; margin: 0 !important; padding: 0 18px 0 0 !important; border-top: 1px solid var(--line); }
.dpd--tx .sg-stack li:first-child { border-top: 0; }
.dpd--tx .sg-stack li::before { content: none !important; }
.dpd--tx .sg-stack i { display: block; height: var(--h, 12px); background: var(--c, #fff); font-size: 0; line-height: 0; }
.dpd--tx .sg-stack span { padding: 12px 0; font-size: 15px; line-height: 1.45; }
.dpd--tx .sg-stack b { display: block; font-size: 15px; }
.dpd--tx .sg-stack small { display: block; color: #6b6258; font-size: 13px; }
.dpd--tx .sg-fab { --c: repeating-linear-gradient(90deg, #fbf8f4 0 3px, #f1ebe2 3px 5px); }
.dpd--tx .sg-mem { --c: linear-gradient(90deg, #9fd6d2, #c6e8e5); }
.dpd--tx .sg-mat { --c: radial-gradient(circle at 20% 30%, #ece5da 0 2px, transparent 3px) 0 0 / 14px 14px, radial-gradient(circle at 70% 60%, #e4dccf 0 2px, transparent 3px) 0 0 / 18px 18px, #f6f3ee; }
.dpd--tx .sg-you { --c: linear-gradient(180deg, #fff, #fdf1f7); }

/* Odsazení */
.dpd--tx .sg-roh, .dpd--tx .sg-specs { margin-top: 22px !important; }

/* Rozměry tohoto produktu */
.dpd--tx .sg-sizes { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0 !important; padding: 0 !important; list-style: none; }
.dpd--tx .sg-sizes li { margin: 0 !important; padding: 6px 12px !important; border-radius: 999px; background: var(--sand); font-size: 14px; }
.dpd--tx .sg-sizes li::before { content: none !important; }

/* Rozměry podle výšky (karta s variantami) */
.dpd--tx .sg-hrows { list-style: none; margin: 22px 0 0 !important; padding: 0 !important; display: grid; gap: 10px; }
.dpd--tx .sg-hrows > li { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 16px; align-items: center; margin: 0 !important; padding: 14px 18px !important; border-radius: 16px; background: #fff; border: 1px solid var(--line); }
.dpd--tx .sg-hrows > li::before { content: none !important; }
.dpd--tx .sg-hrows b { display: block; font-size: 16px; }
.dpd--tx .sg-hrows small { display: block; color: #6b6258; font-size: 13px; }
.dpd--tx .sg-hrows .sg-sizes { margin: 0 !important; }

@media (max-width: 767px) {
  .dpd--tx .sg-hrows > li { grid-template-columns: 1fr; gap: 8px; }
  .dpd--tx .sg-vs { grid-template-columns: 1fr; gap: 14px; }
  .dpd--tx .sg-stack li { grid-template-columns: 34% 1fr; gap: 12px; }
}