/* === DREAMY — popisky textilu (prostěradla, později povlečení) · v1 NÁVRH · 2026-10-09 === * Nadstavba nad popisky.css (a popisky-dreamy.css kvůli dlaždicím .dy-who). * Cotton Comfort:
(světlá, běžný vzhled Dreamy) * PIMA Royale:
(luxusní černá + zlatá podle obalu PIMA Royale) * Záhlaví (za popisky-dreamy.css): * Vše je pod .dpd--tx → ostatní popisky neovlivní. Grafika (vlákna, příze, sloupce) je čisté CSS/SVG, bez obrázků. */ .dpd.dpd--tx { --sand: #f6f3ee; --sand-2: #ece5da; --fc: var(--pink); --fc-2: #f6c6dd; --track: #f3eee7; } .dpd.dpd--pima { --pink: #9a7440; --pink-2: #7d5d31; --blush: #f7f2ea; --blush-2: #ebe1d1; --line: #ece5da; --gold: #c9a66b; --night: #17151a; --fc: #9a7440; --fc-2: #e3d3b6; } .dpd.dpd--pima h2 { font-weight: 400 !important; letter-spacing: -.005em; } /* 1) Úvod */ .tx-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); border-radius: 24px; overflow: hidden; background: var(--sand); } .tx-hero-txt { padding: 46px 44px 38px; display: flex; flex-direction: column; justify-content: center; } .dpd.dpd--tx .tx-hero h2 { font-size: 38px !important; line-height: 1.12 !important; } .tx-hero-img { position: relative; background: #fff; min-height: 340px; margin: 16px 16px 16px 0; border-radius: 16px; overflow: hidden; /* fotky mají bílé pozadí → rámeček uvnitř panelu, aby nesplývaly se stránkou */ } .dpd .tx-hero-img img { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; object-position: 62% 50%; } .tx-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 28px !important; border-top: 1px solid var(--sand-2); } .tx-stats li { padding: 18px 10px 0 0; } .tx-stats b { display: block; font-weight: 700; font-size: 30px; line-height: 1; color: var(--pink); white-space: nowrap; } .tx-stats b small { font-size: 15px; font-weight: 500; color: var(--muted); margin-left: 3px; } .tx-stats span { display: block; margin-top: 6px; font-size: 13px; color: var(--muted); line-height: 1.35; } .tx-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px !important; } .tx-tags li { padding: 7px 13px; border-radius: 10px; background: #fff; font-size: 13.5px; font-weight: 500; color: var(--ink); } .dpd--pima .tx-hero { background: var(--night); } .dpd.dpd--pima .tx-hero h2 { color: #fff !important; font-weight: 300 !important; } .dpd.dpd--pima .tx-hero p.dpd-lead { color: rgba(255, 255, 255, .8) !important; } .dpd.dpd--pima .tx-hero p.dpd-eyebrow { color: var(--gold) !important; } .dpd--pima .tx-stats { border-top-color: rgba(255, 255, 255, .14); } .dpd--pima .tx-stats b { color: var(--gold); font-weight: 500; } .dpd--pima .tx-stats b small, .dpd--pima .tx-stats span { color: rgba(255, 255, 255, .62); } .dpd--pima .tx-tags li { background: transparent; border: 1px solid rgba(201, 166, 107, .5); color: #f3e9d8; } /* 2) Výběr barvy, rozměru a výšky (každá kombinace = samostatný produkt) */ .tx-pick { display: grid; grid-template-columns: minmax(0, 1.5fr) auto auto; gap: 18px 40px; margin-top: 22px; padding: 22px 24px; border-radius: 20px; border: 1px solid var(--line); background: #fff; } .dpd p.tx-pick-lbl { font-size: 12.5px !important; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--muted) !important; margin-bottom: 10px !important; } .tx-sw, .tx-chips { display: flex; flex-wrap: wrap; gap: 8px; } .dpd .tx-sw a, .tx-sw li > span, .dpd .tx-chips a, .tx-chips li > span { display: inline-flex; align-items: center; gap: 9px; min-height: 42px; padding: 6px 14px; border-radius: 12px; border: 1px solid var(--line); background: #fff; color: var(--ink); font-weight: 500; font-size: 14.5px; transition: border-color .2s, box-shadow .2s; } .dpd .tx-sw a { padding-left: 7px; } .tx-sw li > span { padding-left: 7px; } .dpd .tx-sw a:hover, .dpd .tx-chips a:hover { border-color: var(--pink); color: var(--ink); } .tx-sw i { display: inline-block; width: 28px; height: 28px; border-radius: 8px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); font-size: 0; line-height: 0; color: transparent; } .tx-sw li.is-on > span, .tx-chips li.is-on > span { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); font-weight: 600; } /* 3) Délka vlákna */ .tx-fib { display: grid; gap: 18px; margin-top: 28px !important; } .tx-fib li { display: grid; grid-template-columns: 170px minmax(0, 1fr) 130px; gap: 18px; align-items: center; } .tx-fib li > span { font-weight: 600; color: var(--ink); font-size: 15.5px; } .tx-fib li > b { font-weight: 700; color: var(--ink); font-size: 15.5px; text-align: right; white-space: nowrap; } .tx-fib li.is-hi > span, .tx-fib li.is-hi > b { color: var(--pink); } .tx-fib i, .tx-bars i { display: block; height: 10px; border-radius: 5px; font-size: 0; line-height: 0; color: transparent; background-color: var(--track); background-image: linear-gradient(90deg, var(--bc, #c9bba3) 0, var(--bc, #c9bba3) var(--a), var(--bc2, #e6ddcd) var(--a), var(--bc2, #e6ddcd) var(--b, var(--a)), transparent var(--b, var(--a))); } .tx-fib li.is-hi i, .tx-bars li.is-hi i { --bc: var(--fc); --bc2: var(--fc-2); height: 14px; border-radius: 7px; } .tx-ruler { display: flex; justify-content: space-between; margin: 8px 148px 0 188px !important; font-size: 12px; color: var(--muted); border-top: 1px dashed var(--sand-2); padding-top: 6px; } .dpd.dpd-js .dpd-reveal .tx-fib i, .dpd.dpd-js .dpd-reveal .tx-bars i { transform: scaleX(0); transform-origin: left center; transition: transform 1.1s cubic-bezier(.2,.7,.2,1) .25s; } .dpd.dpd-js .dpd-reveal.is-in .tx-fib i, .dpd.dpd-js .dpd-reveal.is-in .tx-bars i { transform: none; } .dpd.dpd-js .dpd-reveal.is-in .tx-fib li:nth-child(2) i, .dpd.dpd-js .dpd-reveal.is-in .tx-bars li:nth-child(2) i { transition-delay: .45s; } .dpd.dpd-js .dpd-reveal.is-in .tx-bars li:nth-child(3) i { transition-delay: .65s; } .dpd.dpd-js .dpd-reveal.is-in .tx-bars li:nth-child(4) i { transition-delay: .85s; } /* příze — krátké vs. dlouhé vlákno (SVG v CSS, editor nic nesmaže) */ .tx-yarns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 26px !important; } .tx-yarn { padding: 18px 20px 20px; border-radius: 18px; background: var(--sand); } .tx-yarn-img { height: 78px; margin-bottom: 10px; background: no-repeat center / contain; font-size: 0; line-height: 0; color: transparent; } .tx-yarn-img--short { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20260%2070%27%3E%3Cdefs%3E%3CclipPath%20id%3D%27y%27%3E%3Crect%20x%3D%274%27%20y%3D%2725%27%20width%3D%27252%27%20height%3D%2720%27%20rx%3D%2710%27%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Crect%20x%3D%274%27%20y%3D%2725%27%20width%3D%27252%27%20height%3D%2720%27%20rx%3D%2710%27%20fill%3D%27%23efe6d6%27%2F%3E%3Cg%20clip-path%3D%27url(%23y)%27%20stroke%3D%27%23c8b89c%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M-8%2045l11-20%27%2F%3E%3Cpath%20d%3D%27M-1%2045l11-20%27%2F%3E%3Cpath%20d%3D%27M6%2045l11-20%27%2F%3E%3Cpath%20d%3D%27M13%2045l11-20%27%2F%3E%3Cpath%20d%3D%27M20%2045l11-20%27%2F%3E%3Cpath%20d%3D%27M27%2045l11-20%27%2F%3E%3Cpath%20d%3D%27M34%2045l11-20%27%2F%3E%3Cpath%20d%3D%27M41%2045l11-20%27%2F%3E%3Cpath%20d%3D%27M48%2045l11-20%27%2F%3E%3Cpath%20d%3D%27M55%2045l11-20%27%2F%3E%3Cpath%20d%3D%27M62%2045l11-20%27%2F%3E%3Cpath%20d%3D%27M69%2045l11-20%27%2F%3E%3Cpath%20d%3D%27M76%2045l11-20%27%2F%3E%3Cpath%20d%3D%27M83%2045l11-20%27%2F%3E%3Cpath%20d%3D%27M90%2045l11-20%27%2F%3E%3Cpath%20d%3D%27M97%2045l11-20%27%2F%3E%3Cpath%20d%3D%27M104%2045l11-20%27%2F%3E%3Cpath%20d%3D%27M111%2045l11-20%27%2F%3E%3Cpath%20d%3D%27M118%2045l11-20%27%2F%3E%3Cpath%20d%3D%27M125%2045l11-20%27%2F%3E%3Cpath%20d%3D%27M132%2045l11-20%27%2F%3E%3Cpath%20d%3D%27M139%2045l11-20%27%2F%3E%3Cpath%20d%3D%27M146%2045l11-20%27%2F%3E%3Cpath%20d%3D%27M153%2045l11-20%27%2F%3E%3Cpath%20d%3D%27M160%2045l11-20%27%2F%3E%3Cpath%20d%3D%27M167%2045l11-20%27%2F%3E%3Cpath%20d%3D%27M174%2045l11-20%27%2F%3E%3Cpath%20d%3D%27M181%2045l11-20%27%2F%3E%3Cpath%20d%3D%27M188%2045l11-20%27%2F%3E%3Cpath%20d%3D%27M195%2045l11-20%27%2F%3E%3Cpath%20d%3D%27M202%2045l11-20%27%2F%3E%3Cpath%20d%3D%27M209%2045l11-20%27%2F%3E%3Cpath%20d%3D%27M216%2045l11-20%27%2F%3E%3Cpath%20d%3D%27M223%2045l11-20%27%2F%3E%3Cpath%20d%3D%27M230%2045l11-20%27%2F%3E%3Cpath%20d%3D%27M237%2045l11-20%27%2F%3E%3Cpath%20d%3D%27M244%2045l11-20%27%2F%3E%3Cpath%20d%3D%27M251%2045l11-20%27%2F%3E%3Cpath%20d%3D%27M258%2045l11-20%27%2F%3E%3Cpath%20d%3D%27M265%2045l11-20%27%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23b39f7e%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M18%2027c-3-6%203-9-1-16%27%2F%3E%3Cpath%20d%3D%27M40%2043c3%206-2%2010%202%2015%27%2F%3E%3Cpath%20d%3D%27M57%2027c2-7%207-8%205-14%27%2F%3E%3Cpath%20d%3D%27M80%2043c-4%205%201%209-3%2014%27%2F%3E%3Cpath%20d%3D%27M96%2027c-5-4-2-10-7-13%27%2F%3E%3Cpath%20d%3D%27M118%2043c4%204%201%2010%206%2012%27%2F%3E%3Cpath%20d%3D%27M136%2027c1-7-4-9%200-15%27%2F%3E%3Cpath%20d%3D%27M152%2043c-2%207%204%208%201%2015%27%2F%3E%3Cpath%20d%3D%27M171%2027c4-5%200-10%205-13%27%2F%3E%3Cpath%20d%3D%27M190%2043c-5%203-1%209-6%2012%27%2F%3E%3Cpath%20d%3D%27M206%2027c-2-6%203-8%200-14%27%2F%3E%3Cpath%20d%3D%27M226%2043c3%206-2%209%202%2014%27%2F%3E%3Cpath%20d%3D%27M244%2027c-4-4%200-9-4-13%27%2F%3E%3Cpath%20d%3D%27M66%2043c2%205%207%205%206%2010%27%2F%3E%3Cpath%20d%3D%27M180%2027c-1-5-6-6-4-11%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); } .tx-yarn-img--long { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20260%2070%27%3E%3Cdefs%3E%3CclipPath%20id%3D%27y%27%3E%3Crect%20x%3D%274%27%20y%3D%2725%27%20width%3D%27252%27%20height%3D%2720%27%20rx%3D%2710%27%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Crect%20x%3D%274%27%20y%3D%2725%27%20width%3D%27252%27%20height%3D%2720%27%20rx%3D%2710%27%20fill%3D%27%23efe6d6%27%2F%3E%3Cg%20clip-path%3D%27url(%23y)%27%20stroke%3D%27%23d90074%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20opacity%3D%27.85%27%3E%3Cpath%20d%3D%27M-80%2045l72-20%27%2F%3E%3Cpath%20d%3D%27M-68%2045l72-20%27%2F%3E%3Cpath%20d%3D%27M-56%2045l72-20%27%2F%3E%3Cpath%20d%3D%27M-44%2045l72-20%27%2F%3E%3Cpath%20d%3D%27M-32%2045l72-20%27%2F%3E%3Cpath%20d%3D%27M-20%2045l72-20%27%2F%3E%3Cpath%20d%3D%27M-8%2045l72-20%27%2F%3E%3Cpath%20d%3D%27M4%2045l72-20%27%2F%3E%3Cpath%20d%3D%27M16%2045l72-20%27%2F%3E%3Cpath%20d%3D%27M28%2045l72-20%27%2F%3E%3Cpath%20d%3D%27M40%2045l72-20%27%2F%3E%3Cpath%20d%3D%27M52%2045l72-20%27%2F%3E%3Cpath%20d%3D%27M64%2045l72-20%27%2F%3E%3Cpath%20d%3D%27M76%2045l72-20%27%2F%3E%3Cpath%20d%3D%27M88%2045l72-20%27%2F%3E%3Cpath%20d%3D%27M100%2045l72-20%27%2F%3E%3Cpath%20d%3D%27M112%2045l72-20%27%2F%3E%3Cpath%20d%3D%27M124%2045l72-20%27%2F%3E%3Cpath%20d%3D%27M136%2045l72-20%27%2F%3E%3Cpath%20d%3D%27M148%2045l72-20%27%2F%3E%3Cpath%20d%3D%27M160%2045l72-20%27%2F%3E%3Cpath%20d%3D%27M172%2045l72-20%27%2F%3E%3Cpath%20d%3D%27M184%2045l72-20%27%2F%3E%3Cpath%20d%3D%27M196%2045l72-20%27%2F%3E%3Cpath%20d%3D%27M208%2045l72-20%27%2F%3E%3Cpath%20d%3D%27M220%2045l72-20%27%2F%3E%3Cpath%20d%3D%27M232%2045l72-20%27%2F%3E%3Cpath%20d%3D%27M244%2045l72-20%27%2F%3E%3Cpath%20d%3D%27M256%2045l72-20%27%2F%3E%3Cpath%20d%3D%27M268%2045l72-20%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); } .dpd--pima .tx-yarn-img--long { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20260%2070%27%3E%3Cdefs%3E%3CclipPath%20id%3D%27y%27%3E%3Crect%20x%3D%274%27%20y%3D%2725%27%20width%3D%27252%27%20height%3D%2720%27%20rx%3D%2710%27%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Crect%20x%3D%274%27%20y%3D%2725%27%20width%3D%27252%27%20height%3D%2720%27%20rx%3D%2710%27%20fill%3D%27%23efe6d6%27%2F%3E%3Cg%20clip-path%3D%27url(%23y)%27%20stroke%3D%27%239a7440%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20opacity%3D%27.85%27%3E%3Cpath%20d%3D%27M-80%2045l72-20%27%2F%3E%3Cpath%20d%3D%27M-68%2045l72-20%27%2F%3E%3Cpath%20d%3D%27M-56%2045l72-20%27%2F%3E%3Cpath%20d%3D%27M-44%2045l72-20%27%2F%3E%3Cpath%20d%3D%27M-32%2045l72-20%27%2F%3E%3Cpath%20d%3D%27M-20%2045l72-20%27%2F%3E%3Cpath%20d%3D%27M-8%2045l72-20%27%2F%3E%3Cpath%20d%3D%27M4%2045l72-20%27%2F%3E%3Cpath%20d%3D%27M16%2045l72-20%27%2F%3E%3Cpath%20d%3D%27M28%2045l72-20%27%2F%3E%3Cpath%20d%3D%27M40%2045l72-20%27%2F%3E%3Cpath%20d%3D%27M52%2045l72-20%27%2F%3E%3Cpath%20d%3D%27M64%2045l72-20%27%2F%3E%3Cpath%20d%3D%27M76%2045l72-20%27%2F%3E%3Cpath%20d%3D%27M88%2045l72-20%27%2F%3E%3Cpath%20d%3D%27M100%2045l72-20%27%2F%3E%3Cpath%20d%3D%27M112%2045l72-20%27%2F%3E%3Cpath%20d%3D%27M124%2045l72-20%27%2F%3E%3Cpath%20d%3D%27M136%2045l72-20%27%2F%3E%3Cpath%20d%3D%27M148%2045l72-20%27%2F%3E%3Cpath%20d%3D%27M160%2045l72-20%27%2F%3E%3Cpath%20d%3D%27M172%2045l72-20%27%2F%3E%3Cpath%20d%3D%27M184%2045l72-20%27%2F%3E%3Cpath%20d%3D%27M196%2045l72-20%27%2F%3E%3Cpath%20d%3D%27M208%2045l72-20%27%2F%3E%3Cpath%20d%3D%27M220%2045l72-20%27%2F%3E%3Cpath%20d%3D%27M232%2045l72-20%27%2F%3E%3Cpath%20d%3D%27M244%2045l72-20%27%2F%3E%3Cpath%20d%3D%27M256%2045l72-20%27%2F%3E%3Cpath%20d%3D%27M268%2045l72-20%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); } .tx-yarn h3 { font-size: 16.5px !important; } .tx-yarn p { font-size: 14.5px; line-height: 1.55; } /* sloupce: savost, gramáž */ .tx-bars { display: grid; gap: 14px; margin-top: 26px !important; } .tx-bars li { display: grid; grid-template-columns: 250px minmax(0, 1fr) 110px; gap: 18px; align-items: center; } .tx-bars li > span { font-size: 15px; color: var(--body); line-height: 1.35; } .tx-bars li > b { font-weight: 700; color: var(--ink); font-size: 15.5px; text-align: right; white-space: nowrap; } .tx-bars li.is-hi > span { color: var(--ink); font-weight: 600; } .tx-bars li.is-hi > b { color: var(--pink); } .dpd p.tx-bars-lbl { font-size: 13px !important; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted) !important; margin-top: 26px !important; } /* výška matrace */ .tx-cmps--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; } .tx-mat { display: flex; align-items: flex-end; height: 108px; margin: 2px 0 14px; font-size: 0; line-height: 0; color: transparent; } .tx-mat::before { content: ""; display: block; width: 100%; height: calc(var(--h) * 2.5px); border-radius: 12px 12px 6px 6px; background: repeating-linear-gradient(0deg, #fff 0 9px, #f6f1ea 9px 10px); border: 5px solid var(--sheet, #ddd2c1); border-bottom-width: 0; box-shadow: 0 8px 0 -3px var(--sheet, #ddd2c1); } .dpd-cmp.is-current .tx-mat::before { --sheet: var(--fc); } .tx-mlist { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px !important; } .tx-mlist li { padding: 7px 12px; border-radius: 10px; background: var(--sand); font-size: 14px; color: var(--ink); } .tx-mlist li b { font-weight: 600; } /* složení a péče (vzor Lejaan: Konstrukce / Vlastnosti / Péče) */ .tx-specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 24px !important; } .tx-specs > div { padding: 22px 22px 14px; border-radius: 18px; background: var(--sand); } .tx-specs h3 { font-size: 13px !important; letter-spacing: .14em; text-transform: uppercase; color: var(--pink) !important; margin-bottom: 8px !important; } .tx-rows li { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--sand-2); font-size: 14.5px; line-height: 1.4; } .tx-rows li:last-child { border-bottom: 0; } .tx-rows li > span:first-child { color: var(--muted); } .tx-rows li > span:last-child { color: var(--ink); font-weight: 500; text-align: right; } /* v1.1 — přepínač barev (dpd-tabs z popisky.js), výběr jen rozměru, štítky ve sloupcích */ .tx-pick--2 { grid-template-columns: auto auto; justify-content: start; } .dpd-tabs.tx-colors { margin-top: 22px; } .tx-colors .dpd-tablist { display: flex; flex-wrap: wrap; } .tx-colors .dpd-tablist button { display: inline-flex; align-items: center; gap: 9px; } .tx-colors .dpd-tablist button i { display: inline-block; width: 20px; height: 20px; border-radius: 6px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18), 0 0 0 1.5px rgba(255, 255, 255, .7); font-size: 0; line-height: 0; color: transparent; } .dpd-panel.tx-cpanel { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 32px; align-items: center; } .tx-cimg { border-radius: 16px; overflow: hidden; background: var(--sand); } .tx-cimg img { width: 100%; } .tx-cpanel h3 { font-size: 26px !important; font-weight: 400 !important; margin-bottom: 8px !important; } .dpd p.tx-cpanel-txt, .tx-cpanel p { font-size: 16px !important; } .dpd a.tx-cbtn { margin-top: 18px; background: var(--pink); color: #fff !important; } .dpd a.tx-cbtn:hover { background: var(--pink-2); } .tx-flag { display: inline-block; margin-left: 6px; padding: 3px 8px; border-radius: 7px; background: var(--pink); color: #fff; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; vertical-align: 2px; white-space: nowrap; } .tx-flag--muted { background: var(--sand-2); color: var(--ink); } .dpd--pima .dpd-cta .dpd-btn--ghost { color: #fff !important; } .dpd--pima .dpd-cta .dpd-btn--ghost:hover { background: rgba(255, 255, 255, .12); } @media (max-width: 767px) { .tx-pick--2 { grid-template-columns: 1fr; } .tx-colors .dpd-tablist { display: grid; grid-template-columns: 1fr 1fr; } .tx-colors .dpd-tablist button { justify-content: flex-start; padding: 10px 10px; } .dpd-panel.tx-cpanel { grid-template-columns: 1fr; gap: 14px; } .tx-cpanel h3 { font-size: 22px !important; } .dpd a.tx-cbtn { width: 100%; } } /* certifikace — 2 dlaždice (dy-certs z popisky-dreamy.css má 3 sloupce) */ .dy-certs.tx-certs--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dpd--tx .dy-certs { margin-top: 14px !important; } /* kategorie — druhý popis pod výpisem produktů */ .category__secondDescription > .dpd { margin-top: 40px; } /* ikony textilu */ .dpd .tx-i-drop { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23d90074%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%2021a7%207%200%200%201-7-7c0-5%207-11%207-11s7%206%207%2011a7%207%200%200%201-7%207z%27%2F%3E%3Cpath%20d%3D%27M9%2014a3%203%200%200%200%203%203%27%2F%3E%3C%2Fsvg%3E"); } .dpd.dpd--pima .tx-i-drop { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%239a7440%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%2021a7%207%200%200%201-7-7c0-5%207-11%207-11s7%206%207%2011a7%207%200%200%201-7%207z%27%2F%3E%3Cpath%20d%3D%27M9%2014a3%203%200%200%200%203%203%27%2F%3E%3C%2Fsvg%3E"); } .dpd .tx-i-fit { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23d90074%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%278%27%20width%3D%2718%27%20height%3D%279%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M3%2012h18M7%2017v2M17%2017v2%27%2F%3E%3C%2Fsvg%3E"); } .dpd.dpd--pima .tx-i-fit { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%239a7440%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%278%27%20width%3D%2718%27%20height%3D%279%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M3%2012h18M7%2017v2M17%2017v2%27%2F%3E%3C%2Fsvg%3E"); } .dpd .tx-i-height { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23d90074%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203v18M8%207l4-4%204%204M8%2017l4%204%204-4%27%2F%3E%3C%2Fsvg%3E"); } .dpd.dpd--pima .tx-i-height { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%239a7440%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203v18M8%207l4-4%204%204M8%2017l4%204%204-4%27%2F%3E%3C%2Fsvg%3E"); } .dpd .tx-i-star { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23d90074%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203l2.8%205.7%206.2.9-4.5%204.4%201%206.2L12%2017.3l-5.5%202.9%201-6.2L3%209.6l6.2-.9z%27%2F%3E%3C%2Fsvg%3E"); } .dpd.dpd--pima .tx-i-star { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%239a7440%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203l2.8%205.7%206.2.9-4.5%204.4%201%206.2L12%2017.3l-5.5%202.9%201-6.2L3%209.6l6.2-.9z%27%2F%3E%3C%2Fsvg%3E"); } .dpd .tx-i-feather { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23d90074%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M20%204C11%204%205%2010%205%2019%27%2F%3E%3Cpath%20d%3D%27M5%2019c6%200%2012-4%2013-11M9%2015h6M12%2011h5%27%2F%3E%3C%2Fsvg%3E"); } .dpd.dpd--pima .tx-i-feather { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%239a7440%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M20%204C11%204%205%2010%205%2019%27%2F%3E%3Cpath%20d%3D%27M5%2019c6%200%2012-4%2013-11M9%2015h6M12%2011h5%27%2F%3E%3C%2Fsvg%3E"); } .dpd .tx-i-shield { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23d90074%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%2022s8-4%208-10V5l-8-3-8%203v7c0%206%208%2010%208%2010z%27%2F%3E%3Cpath%20d%3D%27M9%2012l2%202%204-4%27%2F%3E%3C%2Fsvg%3E"); } .dpd.dpd--pima .tx-i-shield { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%239a7440%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%2022s8-4%208-10V5l-8-3-8%203v7c0%206%208%2010%208%2010z%27%2F%3E%3Cpath%20d%3D%27M9%2012l2%202%204-4%27%2F%3E%3C%2Fsvg%3E"); } .dpd .tx-i-wash { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23d90074%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%207h16l-2%2013H6z%27%2F%3E%3Cpath%20d%3D%27M4%207c2-3%2014-3%2016%200M9%2012c1%201%205%201%206%200%27%2F%3E%3C%2Fsvg%3E"); } .dpd.dpd--pima .tx-i-wash { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%239a7440%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%207h16l-2%2013H6z%27%2F%3E%3Cpath%20d%3D%27M4%207c2-3%2014-3%2016%200M9%2012c1%201%205%201%206%200%27%2F%3E%3C%2Fsvg%3E"); } .dpd .tx-i-dot { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23d90074%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%273%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%278%27%2F%3E%3C%2Fsvg%3E"); } .dpd.dpd--pima .tx-i-dot { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%239a7440%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%273%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%278%27%2F%3E%3C%2Fsvg%3E"); } .dpd .dpd-ico[class*="tx-i-"] { background-size: 22px 22px; background-repeat: no-repeat; background-position: center; font-size: 0; line-height: 0; color: transparent; } /* PIMA — doladění sdílených komponent do černozlaté */ .dpd--pima .dpd-checks li { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%2711%27%20fill%3D%27%23f7f2ea%27%2F%3E%3Cpath%20d%3D%27M7%2012.5l3.2%203.2L17%209%27%20fill%3D%27none%27%20stroke%3D%27%239a7440%27%20stroke-width%3D%272.2%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E"); } .dpd--pima .dpd-cmp.is-current { background: linear-gradient(180deg, #fff 0%, #f7f2ea 100%); } .dpd--pima .dpd-cmp-tag { background: #f3ece0; color: #7d5d31; } .dpd--pima .dpd-cmp.is-current .dpd-cmp-tag { background: var(--night); color: var(--gold); } .dpd--pima a.dpd-cmp:hover, .dpd--pima .dpd-cmp--link:hover { box-shadow: 0 16px 30px -20px rgba(23, 21, 26, .45); border-color: #e3d3b6; } .dpd--pima .dpd-card--blush { background: var(--blush); } .dpd--pima .dpd-cta { background: var(--night); } .dpd--pima .dpd-cta h2 { font-weight: 300 !important; } .dpd--pima .dpd-btn { color: var(--night) !important; } .dpd--pima .dpd-btn:hover { background: #f7f2ea; } .dpd--pima .dy-who .dpd-ico { background-color: var(--blush); } @media (max-width: 991px) { .tx-hero { grid-template-columns: 1fr; } .tx-hero-img { order: -1; min-height: 260px; margin: 12px 12px 0; } .tx-specs { grid-template-columns: 1fr; } .tx-pick { grid-template-columns: 1fr; gap: 18px; } } @media (max-width: 767px) { .tx-hero { border-radius: 20px; } .tx-hero-txt { padding: 26px 20px 24px; } .dpd.dpd--tx .tx-hero h2 { font-size: 28px !important; } .tx-hero-img { min-height: 220px; } .tx-stats { grid-template-columns: 1fr 1fr; } .tx-stats li { padding-top: 14px; } .tx-stats b { font-size: 26px; } .tx-pick { padding: 18px 16px; } .tx-fib li, .tx-bars li { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; } .tx-fib li > i, .tx-bars li > i { grid-column: 1 / -1; order: 3; } .tx-ruler { margin: 6px 0 0 !important; } .tx-yarns { grid-template-columns: 1fr; } .dy-certs.tx-certs--2 { grid-template-columns: 1fr; } .tx-cmps--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0 0; padding: 0; overflow: visible; } .tx-cmps--2 .dpd-cmp { padding: 16px 14px; } .tx-mat { height: 90px; } .tx-mat::before { height: calc(var(--h) * 2px); } }