• Volitelné webfonty: odkomentuj @import níže, jinak běží na systémovém
písmu (nejrychlejší, bez závislosti na načtení fontu).
===================================================================== */
/* @import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700&family=Inter:wght@400;500;600&display=swap'); */
.do-pdp {
/* --- tokeny --- */
--do-ink: #17161a;
--do-stone: #6e6a63;
--do-paper: #fbfaf8;
--do-surface: #f2efe9;
--do-line: #e6e2db;
--do-accent: #8a5a34; /* walnut — přepiš per produkt inline */
--do-font-display: "Bricolage Grotesque", "Inter Tight", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
--do-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
--do-radius: 18px;
--do-gap: clamp(14px, 2.4vw, 26px);
--do-block: clamp(40px, 6vw, 76px); /* svislý rytmus mezi bloky */
font-family: var(--do-font-body);
color: var(--do-ink);
line-height: 1.62;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* jemný reset jen uvnitř popisu */
.do-pdp *,
.do-pdp *::before,
.do-pdp *::after { box-sizing: border-box; }
.do-pdp h2,
.do-pdp h3 {
font-family: var(--do-font-display);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.1;
margin: 0;
color: var(--do-ink);
}
.do-pdp p { margin: 0; }
.do-pdp img { display: block; max-width: 100%; height: auto; }
.do-pdp a { color: var(--do-accent); text-decoration: none; }
.do-pdp a:hover { text-decoration: underline; }
/* společný odstup mezi bloky */
.do-pdp > section + section { margin-top: var(--do-block); }
/* struktura: eyebrow / lead ---------------------------------------- */
.do-eyebrow {
font-family: var(--do-font-display);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--do-accent);
margin: 0 0 14px;
}
.do-lead {
font-size: clamp(16px, 1.5vw, 18px);
color: var(--do-stone);
max-width: 46ch;
}
/* obrázek se „zoomem" na hover a kurzorem lupa (otevře lightbox) --- */
.do-pdp .do-zoom { cursor: zoom-in; }
.do-pdp .do-zoom img,
.do-pdp img.do-zoom { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
/* ===================== HERO ===================== */
.do-hero {
display: grid;
grid-template-columns: 1.05fr 1fr;
align-items: center;
gap: clamp(20px, 4vw, 56px);
}
.do-hero__media {
position: relative;
border-radius: var(--do-radius);
overflow: hidden;
aspect-ratio: 4 / 3;
/* „měsíční" scéna za produktem — akcent produktu, ne systému */
background:
radial-gradient(120% 90% at 70% 20%, color-mix(in srgb, var(--do-accent) 30%, #fff) 0%, transparent 55%),
linear-gradient(160deg, #efeae2 0%, #e2ddd3 100%);
}
.do-hero__media img {
width: 100%; height: 100%;
object-fit: cover;
}
.do-hero__media:hover img { transform: scale(1.04); }
.do-hero__title {
font-size: clamp(26px, 3.4vw, 40px);
margin-bottom: 18px;
}
.do-hero__body .do-lead { margin-top: 4px; }
.do-chips {
list-style: none; padding: 0;
margin: 22px 0 0;
display: flex; flex-wrap: wrap; gap: 8px;
}
.do-chips li {
font-size: 13px; font-weight: 500;
padding: 7px 14px;
border: 1px solid var(--do-line);
border-radius: 999px;
background: var(--do-paper);
color: var(--do-ink);
}
/* ===================== FEATURES (dlaždice) ===================== */
.do-features {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--do-gap);
}
.do-feature {
background: var(--do-surface);
border-radius: var(--do-radius);
padding: 24px 22px;
transition: transform .25s ease, box-shadow .25s ease;
}
.do-feature:hover {
transform: translateY(-3px);
box-shadow: 0 14px 30px -18px rgba(23,22,26,.35);
}
.do-feature__icon {
display: block;
width: 30px; height: 30px;
margin-bottom: 16px;
background: var(--do-accent);
-webkit-mask-position: center; mask-position: center;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-size: contain; mask-size: contain;
}
.do-feature h3 { font-size: 16px; margin-bottom: 8px; letter-spacing: -0.01em; }
.do-feature p { font-size: 14px; color: var(--do-stone); line-height: 1.55; }
/* ===================== KNIHOVNA IKON (dlaždice) =====================
Použití:
Ikony jsou CSS mask → dědí barvu akcentu (--do-accent), v HTML popisu
tedy není žádné SVG (bezpečné pro Shoptet editor).
==================================================================== */
.do-ico--design {
-webkit-mask-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%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%278%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%273%27%2F%3E%3C%2Fsvg%3E");
mask-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%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%278%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%273%27%2F%3E%3C%2Fsvg%3E");
}
.do-ico--award {
-webkit-mask-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%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%279%27%20r%3D%275%27%2F%3E%3Cpath%20d%3D%27M8.5%2013.5%207%2021l5-2.5%205%202.5-1.5-7.5%27%2F%3E%3C%2Fsvg%3E");
mask-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%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%279%27%20r%3D%275%27%2F%3E%3Cpath%20d%3D%27M8.5%2013.5%207%2021l5-2.5%205%202.5-1.5-7.5%27%2F%3E%3C%2Fsvg%3E");
}
.do-ico--gift {
-webkit-mask-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%23000%27%20stroke-width%3D%271.6%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%274%27%20rx%3D%271%27%2F%3E%3Cpath%20d%3D%27M5%2012v8h14v-8M12%208v12%27%2F%3E%3Cpath%20d%3D%27M12%208S9%208%208%206.5%209%204%2012%208ZM12%208s3%200%204-1.5S15%204%2012%208Z%27%2F%3E%3C%2Fsvg%3E");
mask-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%23000%27%20stroke-width%3D%271.6%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%274%27%20rx%3D%271%27%2F%3E%3Cpath%20d%3D%27M5%2012v8h14v-8M12%208v12%27%2F%3E%3Cpath%20d%3D%27M12%208S9%208%208%206.5%209%204%2012%208ZM12%208s3%200%204-1.5S15%204%2012%208Z%27%2F%3E%3C%2Fsvg%3E");
}
.do-ico--hand {
-webkit-mask-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%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M9%2011V6a2%202%200%200%201%204%200v5%27%2F%3E%3Cpath%20d%3D%27M13%208a2%202%200%200%201%204%200v6a5%205%200%200%201-5%205h-1.5a4%204%200%200%201-3.2-1.6L4%2013.5a1.6%201.6%200%200%201%202.6-1.9L8%2013%27%2F%3E%3C%2Fsvg%3E");
mask-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%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M9%2011V6a2%202%200%200%201%204%200v5%27%2F%3E%3Cpath%20d%3D%27M13%208a2%202%200%200%201%204%200v6a5%205%200%200%201-5%205h-1.5a4%204%200%200%201-3.2-1.6L4%2013.5a1.6%201.6%200%200%201%202.6-1.9L8%2013%27%2F%3E%3C%2Fsvg%3E");
}
.do-ico--set {
-webkit-mask-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%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%277%27%20width%3D%279%27%20height%3D%2714%27%20rx%3D%271.5%27%2F%3E%3Crect%20x%3D%2714%27%20y%3D%273%27%20width%3D%277%27%20height%3D%2718%27%20rx%3D%271.5%27%2F%3E%3C%2Fsvg%3E");
mask-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%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%277%27%20width%3D%279%27%20height%3D%2714%27%20rx%3D%271.5%27%2F%3E%3Crect%20x%3D%2714%27%20y%3D%273%27%20width%3D%277%27%20height%3D%2718%27%20rx%3D%271.5%27%2F%3E%3C%2Fsvg%3E");
}
.do-ico--ruler {
-webkit-mask-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%23000%27%20stroke-width%3D%271.6%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%278%27%20rx%3D%271%27%2F%3E%3Cpath%20d%3D%27M7%208v3M11%208v4M15%208v3M19%208v4%27%2F%3E%3C%2Fsvg%3E");
mask-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%23000%27%20stroke-width%3D%271.6%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%278%27%20rx%3D%271%27%2F%3E%3Cpath%20d%3D%27M7%208v3M11%208v4M15%208v3M19%208v4%27%2F%3E%3C%2Fsvg%3E");
}
.do-ico--shield {
-webkit-mask-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%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203l7%203v5c0%204.5-3%208-7%2010-4-2-7-5.5-7-10V6l7-3Z%27%2F%3E%3C%2Fsvg%3E");
mask-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%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203l7%203v5c0%204.5-3%208-7%2010-4-2-7-5.5-7-10V6l7-3Z%27%2F%3E%3C%2Fsvg%3E");
}
.do-ico--feather {
-webkit-mask-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%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M20%204c-6%200-11%204-13%2010l-3%206%27%2F%3E%3Cpath%20d%3D%27M20%204c0%207-5%2012-12%2013l-2%20.5%27%2F%3E%3Cpath%20d%3D%27M14%206l1%205-5%201%27%2F%3E%3C%2Fsvg%3E");
mask-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%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M20%204c-6%200-11%204-13%2010l-3%206%27%2F%3E%3Cpath%20d%3D%27M20%204c0%207-5%2012-12%2013l-2%20.5%27%2F%3E%3Cpath%20d%3D%27M14%206l1%205-5%201%27%2F%3E%3C%2Fsvg%3E");
}
.do-ico--circle {
-webkit-mask-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%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%278%27%2F%3E%3Cpath%20d%3D%27M4%2012h16%27%2F%3E%3C%2Fsvg%3E");
mask-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%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%278%27%2F%3E%3Cpath%20d%3D%27M4%2012h16%27%2F%3E%3C%2Fsvg%3E");
}
.do-ico--stone {
-webkit-mask-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%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2014c0-4%203-7%208-7s8%203%208%207-3%204-8%204-8%200-8-4Z%27%2F%3E%3Cpath%20d%3D%27M8%2012.5h.01M12%2011h.01M16%2012.5h.01%27%2F%3E%3C%2Fsvg%3E");
mask-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%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2014c0-4%203-7%208-7s8%203%208%207-3%204-8%204-8%200-8-4Z%27%2F%3E%3Cpath%20d%3D%27M8%2012.5h.01M12%2011h.01M16%2012.5h.01%27%2F%3E%3C%2Fsvg%3E");
}
.do-ico--origin {
-webkit-mask-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%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%278.5%27%2F%3E%3Cpath%20d%3D%27M3.5%2012h17M12%203.5c2.2%202.4%203.4%205.4%203.4%208.5s-1.2%206.1-3.4%208.5c-2.2-2.4-3.4-5.4-3.4-8.5S9.8%205.9%2012%203.5Z%27%2F%3E%3C%2Fsvg%3E");
mask-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%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%278.5%27%2F%3E%3Cpath%20d%3D%27M3.5%2012h17M12%203.5c2.2%202.4%203.4%205.4%203.4%208.5s-1.2%206.1-3.4%208.5c-2.2-2.4-3.4-5.4-3.4-8.5S9.8%205.9%2012%203.5Z%27%2F%3E%3C%2Fsvg%3E");
}
.do-ico--water {
-webkit-mask-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%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203s6%206.5%206%2010.5A6%206%200%200%201%206%2013.5C6%209.5%2012%203%2012%203Z%27%2F%3E%3C%2Fsvg%3E");
mask-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%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203s6%206.5%206%2010.5A6%206%200%200%201%206%2013.5C6%209.5%2012%203%2012%203Z%27%2F%3E%3C%2Fsvg%3E");
}
.do-ico--sound {
-webkit-mask-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%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%2013c1.5-2%203-2%204.5%200S10.5%2015%2012%2013s3-2%204.5%200%203%202%204.5%200%27%2F%3E%3Cpath%20d%3D%27M3%208c1.5-2%203-2%204.5%200S10.5%2010%2012%208s3-2%204.5%200%203%202%204.5%200%27%2F%3E%3C%2Fsvg%3E");
mask-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%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%2013c1.5-2%203-2%204.5%200S10.5%2015%2012%2013s3-2%204.5%200%203%202%204.5%200%27%2F%3E%3Cpath%20d%3D%27M3%208c1.5-2%203-2%204.5%200S10.5%2010%2012%208s3-2%204.5%200%203%202%204.5%200%27%2F%3E%3C%2Fsvg%3E");
}
.do-ico--bird {
-webkit-mask-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%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M16%207.5a1%201%200%201%200%200-.01%27%2F%3E%3Cpath%20d%3D%27M20%206.5c-1.5-1-3.5-1-5%200l-6%204c-2%201.3-3%203.3-3%205.5v3h3l2-3h4c2.8%200%205-2.2%205-5V6.5Z%27%2F%3E%3Cpath%20d%3D%27M11%2019l-1%202M15%2019l1%202%27%2F%3E%3C%2Fsvg%3E");
mask-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%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M16%207.5a1%201%200%201%200%200-.01%27%2F%3E%3Cpath%20d%3D%27M20%206.5c-1.5-1-3.5-1-5%200l-6%204c-2%201.3-3%203.3-3%205.5v3h3l2-3h4c2.8%200%205-2.2%205-5V6.5Z%27%2F%3E%3Cpath%20d%3D%27M11%2019l-1%202M15%2019l1%202%27%2F%3E%3C%2Fsvg%3E");
}
.do-ico--leaf {
-webkit-mask-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%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2020c0-9%206-14%2016-15%200%2010-5%2015-13%2015H4Z%27%2F%3E%3Cpath%20d%3D%27M4%2020c3-5%207-8%2012-9.5%27%2F%3E%3C%2Fsvg%3E");
mask-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%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2020c0-9%206-14%2016-15%200%2010-5%2015-13%2015H4Z%27%2F%3E%3Cpath%20d%3D%27M4%2020c3-5%207-8%2012-9.5%27%2F%3E%3C%2Fsvg%3E");
}
.do-ico--plant {
-webkit-mask-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%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6%2010h12l-1.2%209a2%202%200%200%201-2%201.8H9.2a2%202%200%200%201-2-1.8L6%2010Z%27%2F%3E%3Cpath%20d%3D%27M12%2010c0-3%201.5-5%204.5-5.5C16%208%2014.5%2010%2012%2010Z%27%2F%3E%3Cpath%20d%3D%27M12%2010C12%207.5%2010.5%206%208%205.5%208.3%208.5%209.7%2010%2012%2010Z%27%2F%3E%3C%2Fsvg%3E");
mask-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%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6%2010h12l-1.2%209a2%202%200%200%201-2%201.8H9.2a2%202%200%200%201-2-1.8L6%2010Z%27%2F%3E%3Cpath%20d%3D%27M12%2010c0-3%201.5-5%204.5-5.5C16%208%2014.5%2010%2012%2010Z%27%2F%3E%3Cpath%20d%3D%27M12%2010C12%207.5%2010.5%206%208%205.5%208.3%208.5%209.7%2010%2012%2010Z%27%2F%3E%3C%2Fsvg%3E");
}
.do-ico--steam {
-webkit-mask-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%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M5%2021h14M6%2012h12v3a5%205%200%200%201-5%205h-2a5%205%200%200%201-5-5v-3Z%27%2F%3E%3Cpath%20d%3D%27M9.5%208c0-1.5%201-1.5%201-3s-1-1.5-1-3M14.5%208c0-1.5%201-1.5%201-3s-1-1.5-1-3%27%2F%3E%3C%2Fsvg%3E");
mask-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%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M5%2021h14M6%2012h12v3a5%205%200%200%201-5%205h-2a5%205%200%200%201-5-5v-3Z%27%2F%3E%3Cpath%20d%3D%27M9.5%208c0-1.5%201-1.5%201-3s-1-1.5-1-3M14.5%208c0-1.5%201-1.5%201-3s-1-1.5-1-3%27%2F%3E%3C%2Fsvg%3E");
}
.do-ico--knife {
-webkit-mask-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%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2017%2017%204c1.5%201.5%202%203.5%201.5%205.5L9%2019H4v-2Z%27%2F%3E%3Cpath%20d%3D%27M14%207l3%203%27%2F%3E%3C%2Fsvg%3E");
mask-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%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2017%2017%204c1.5%201.5%202%203.5%201.5%205.5L9%2019H4v-2Z%27%2F%3E%3Cpath%20d%3D%27M14%207l3%203%27%2F%3E%3C%2Fsvg%3E");
}
.do-ico--fresh {
-webkit-mask-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%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%2021c-4%200-7-3-7-7%200-5%204-9%209-11%201%206-1%2010-4%2012%27%2F%3E%3Cpath%20d%3D%27M8%2018c1-4%204-7%208-8.5%27%2F%3E%3C%2Fsvg%3E");
mask-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%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%2021c-4%200-7-3-7-7%200-5%204-9%209-11%201%206-1%2010-4%2012%27%2F%3E%3Cpath%20d%3D%27M8%2018c1-4%204-7%208-8.5%27%2F%3E%3C%2Fsvg%3E");
}
.do-ico--volume {
-webkit-mask-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%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6%204h12l-1%2015a2%202%200%200%201-2%201.8H9a2%202%200%200%201-2-1.8L6%204Z%27%2F%3E%3Cpath%20d%3D%27M6.6%2012h10.8%27%2F%3E%3C%2Fsvg%3E");
mask-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%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6%204h12l-1%2015a2%202%200%200%201-2%201.8H9a2%202%200%200%201-2-1.8L6%204Z%27%2F%3E%3Cpath%20d%3D%27M6.6%2012h10.8%27%2F%3E%3C%2Fsvg%3E");
}
.do-ico--care {
-webkit-mask-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%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203s5.5%206%205.5%2010a5.5%205.5%200%200%201-11%200C6.5%209%2012%203%2012%203Z%27%2F%3E%3Cpath%20d%3D%27M9.5%2014a2.5%202.5%200%200%200%202.5%202.5%27%2F%3E%3C%2Fsvg%3E");
mask-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%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203s5.5%206%205.5%2010a5.5%205.5%200%200%201-11%200C6.5%209%2012%203%2012%203Z%27%2F%3E%3Cpath%20d%3D%27M9.5%2014a2.5%202.5%200%200%200%202.5%202.5%27%2F%3E%3C%2Fsvg%3E");
}
.do-ico--power {
-webkit-mask-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%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203v9%27%2F%3E%3Cpath%20d%3D%27M7%206.5a8%208%200%201%200%2010%200%27%2F%3E%3C%2Fsvg%3E");
mask-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%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203v9%27%2F%3E%3Cpath%20d%3D%27M7%206.5a8%208%200%201%200%2010%200%27%2F%3E%3C%2Fsvg%3E");
}
.do-ico--magnet {
-webkit-mask-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%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M5%204v9a7%207%200%200%200%2014%200V4h-5v9a2%202%200%200%201-4%200V4H5Z%27%2F%3E%3Cpath%20d%3D%27M5%208h5M14%208h5%27%2F%3E%3C%2Fsvg%3E");
mask-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%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M5%204v9a7%207%200%200%200%2014%200V4h-5v9a2%202%200%200%201-4%200V4H5Z%27%2F%3E%3Cpath%20d%3D%27M5%208h5M14%208h5%27%2F%3E%3C%2Fsvg%3E");
}
.do-ico--metal {
-webkit-mask-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%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203%203%208v8l9%205%209-5V8l-9-5Z%27%2F%3E%3Cpath%20d%3D%27M3%208l9%205%209-5M12%2013v8%27%2F%3E%3C%2Fsvg%3E");
mask-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%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203%203%208v8l9%205%209-5V8l-9-5Z%27%2F%3E%3Cpath%20d%3D%27M3%208l9%205%209-5M12%2013v8%27%2F%3E%3C%2Fsvg%3E");
}
.do-ico--organize {
-webkit-mask-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%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%274%27%20width%3D%277%27%20height%3D%277%27%20rx%3D%271%27%2F%3E%3Crect%20x%3D%2714%27%20y%3D%274%27%20width%3D%277%27%20height%3D%277%27%20rx%3D%271%27%2F%3E%3Crect%20x%3D%273%27%20y%3D%2714%27%20width%3D%277%27%20height%3D%277%27%20rx%3D%271%27%2F%3E%3Crect%20x%3D%2714%27%20y%3D%2714%27%20width%3D%277%27%20height%3D%277%27%20rx%3D%271%27%2F%3E%3C%2Fsvg%3E");
mask-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%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%274%27%20width%3D%277%27%20height%3D%277%27%20rx%3D%271%27%2F%3E%3Crect%20x%3D%2714%27%20y%3D%274%27%20width%3D%277%27%20height%3D%277%27%20rx%3D%271%27%2F%3E%3Crect%20x%3D%273%27%20y%3D%2714%27%20width%3D%277%27%20height%3D%277%27%20rx%3D%271%27%2F%3E%3Crect%20x%3D%2714%27%20y%3D%2714%27%20width%3D%277%27%20height%3D%277%27%20rx%3D%271%27%2F%3E%3C%2Fsvg%3E");
}
.do-ico--wood {
-webkit-mask-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%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%276%27%20width%3D%2718%27%20height%3D%2712%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M8%206v12%27%2F%3E%3Cellipse%20cx%3D%278%27%20cy%3D%2712%27%20rx%3D%272.2%27%20ry%3D%273.5%27%2F%3E%3Cpath%20d%3D%27M13%209h5M13%2012h5M13%2015h5%27%2F%3E%3C%2Fsvg%3E");
mask-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%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%276%27%20width%3D%2718%27%20height%3D%2712%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M8%206v12%27%2F%3E%3Cellipse%20cx%3D%278%27%20cy%3D%2712%27%20rx%3D%272.2%27%20ry%3D%273.5%27%2F%3E%3Cpath%20d%3D%27M13%209h5M13%2012h5M13%2015h5%27%2F%3E%3C%2Fsvg%3E");
}
.do-ico--scent {
-webkit-mask-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%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%2021v-6%27%2F%3E%3Cpath%20d%3D%27M12%2015c-3%200-5-2-5-4.5S9%206%2012%206s5%202%205%204.5S15%2015%2012%2015Z%27%2F%3E%3Cpath%20d%3D%27M9%204.5c.8-1%201.8-1.5%203-1.5s2.2.5%203%201.5%27%2F%3E%3Cpath%20d%3D%27M6%2019c1-1.5%202.5-2.5%206-2.5s5%201%206%202.5%27%2F%3E%3C%2Fsvg%3E");
mask-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%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%2021v-6%27%2F%3E%3Cpath%20d%3D%27M12%2015c-3%200-5-2-5-4.5S9%206%2012%206s5%202%205%204.5S15%2015%2012%2015Z%27%2F%3E%3Cpath%20d%3D%27M9%204.5c.8-1%201.8-1.5%203-1.5s2.2.5%203%201.5%27%2F%3E%3Cpath%20d%3D%27M6%2019c1-1.5%202.5-2.5%206-2.5s5%201%206%202.5%27%2F%3E%3C%2Fsvg%3E");
}
.do-ico--levitation {
-webkit-mask-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%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%279%27%20r%3D%275%27%2F%3E%3Cpath%20d%3D%27M5%2018h14M7%2021h10%27%2F%3E%3C%2Fsvg%3E");
mask-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%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%279%27%20r%3D%275%27%2F%3E%3Cpath%20d%3D%27M5%2018h14M7%2021h10%27%2F%3E%3C%2Fsvg%3E");
}
.do-ico--light {
-webkit-mask-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%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M9%2018h6M10%2021h4%27%2F%3E%3Cpath%20d%3D%27M12%203a6%206%200%200%200-4%2010.5c.6.6%201%201.3%201%202.5h6c0-1.2.4-1.9%201-2.5A6%206%200%200%200%2012%203Z%27%2F%3E%3C%2Fsvg%3E");
mask-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%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M9%2018h6M10%2021h4%27%2F%3E%3Cpath%20d%3D%27M12%203a6%206%200%200%200-4%2010.5c.6.6%201%201.3%201%202.5h6c0-1.2.4-1.9%201-2.5A6%206%200%200%200%2012%203Z%27%2F%3E%3C%2Fsvg%3E");
}
.do-ico--touch {
-webkit-mask-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%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M9%2011V6a2%202%200%200%201%204%200v5%27%2F%3E%3Cpath%20d%3D%27M13%208a2%202%200%200%201%204%200v6a5%205%200%200%201-5%205h-1.5a4%204%200%200%201-3.2-1.6L4%2013.5a1.6%201.6%200%200%201%202.6-1.9L8%2013%27%2F%3E%3C%2Fsvg%3E");
mask-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%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M9%2011V6a2%202%200%200%201%204%200v5%27%2F%3E%3Cpath%20d%3D%27M13%208a2%202%200%200%201%204%200v6a5%205%200%200%201-5%205h-1.5a4%204%200%200%201-3.2-1.6L4%2013.5a1.6%201.6%200%200%201%202.6-1.9L8%2013%27%2F%3E%3C%2Fsvg%3E");
}
/* ===================== CARE / ÚDRŽBA ===================== */
.do-care {
border: 1px solid var(--do-line);
border-left: 3px solid var(--do-accent);
border-radius: 12px;
padding: 20px 24px;
background: var(--do-paper);
}
.do-care h3 {
font-size: 15px;
margin-bottom: 6px;
color: var(--do-accent);
letter-spacing: 0;
}
.do-care p { font-size: 14px; color: var(--do-stone); line-height: 1.6; }
/* ===================== SPLIT (obrázek + text) ===================== */
.do-split {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: clamp(20px, 4vw, 56px);
}
.do-split--reverse .do-split__media { order: 2; }
.do-split__media {
border-radius: var(--do-radius);
overflow: hidden;
aspect-ratio: 4 / 3;
background: var(--do-surface);
}
.do-split__media img { width: 100%; height: 100%; object-fit: cover; }
.do-split__media:hover img { transform: scale(1.04); }
.do-split__body h3 { font-size: clamp(21px, 2.4vw, 28px); margin-bottom: 14px; }
.do-split__body p { color: var(--do-stone); max-width: 44ch; }
/* ===================== VIDEO ===================== */
.do-video__facade {
position: relative; display: block;
border-radius: var(--do-radius);
overflow: hidden;
aspect-ratio: 16 / 9;
background: #0d0d10;
cursor: pointer;
}
.do-video__facade img {
width: 100%; height: 100%; object-fit: cover;
opacity: .82; transition: opacity .3s, transform .6s;
}
.do-video__facade:hover img { opacity: .95; transform: scale(1.03); }
.do-video__play {
position: absolute; inset: 0; margin: auto;
width: 74px; height: 74px; border-radius: 50%;
background: rgba(255,255,255,.92);
box-shadow: 0 10px 30px -8px rgba(0,0,0,.5);
transition: transform .25s ease;
}
.do-video__play::after {
content: ""; position: absolute; inset: 0; margin: auto;
width: 0; height: 0;
border-style: solid;
border-width: 12px 0 12px 20px;
border-color: transparent transparent transparent var(--do-ink);
transform: translateX(3px);
}
.do-video__facade:hover .do-video__play { transform: scale(1.08); }
.do-video__label {
position: absolute; left: 20px; bottom: 18px;
color: #fff; font-family: var(--do-font-display);
font-weight: 600; font-size: clamp(14px,1.4vw,17px);
text-shadow: 0 2px 12px rgba(0,0,0,.6);
}
.do-video iframe {
width: 100%; aspect-ratio: 16/9; border: 0;
border-radius: var(--do-radius); display: block;
}
/* ===================== GALLERY ===================== */
.do-gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--do-gap);
}
.do-gallery img {
width: 100%; aspect-ratio: 1/1; object-fit: cover;
border-radius: var(--do-radius);
cursor: zoom-in;
transition: transform .5s cubic-bezier(.2,.7,.2,1), filter .3s;
filter: saturate(1);
}
.do-gallery img:hover { transform: scale(1.03); filter: saturate(1.06); }
/* ===================== SPECS ===================== */
/* Bez vnitřních
— jen
- (Shoptet editor
v
maže). */
.do-specs__title {
font-size: clamp(20px,2.2vw,26px);
margin-bottom: 20px;
}
.do-specs__grid {
display: grid;
grid-template-columns: max-content 1fr max-content 1fr;
column-gap: clamp(20px, 4vw, 56px);
margin: 0;
border-top: 1px solid var(--do-line);
}
.do-specs__grid dt,
.do-specs__grid dd {
padding: 13px 0;
border-bottom: 1px solid var(--do-line);
font-size: 14px;
margin: 0;
}
.do-specs__grid dt { color: var(--do-stone); white-space: nowrap; }
.do-specs__grid dd { font-weight: 500; }
@media (max-width: 720px) {
.do-specs__grid { grid-template-columns: max-content 1fr; }
}
/* ===================== BRAND ===================== */
.do-brand {
background: var(--do-ink);
color: #efece6;
border-radius: var(--do-radius);
padding: clamp(26px, 4vw, 48px);
}
.do-brand__kicker {
font-family: var(--do-font-display);
font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
color: color-mix(in srgb, var(--do-accent) 60%, #fff);
margin: 0 0 12px;
}
.do-brand__text {
font-size: clamp(16px,1.6vw,19px);
color: #efece6; margin: 0;
}
.do-brand__text strong { color: #fff; }
.do-brand__links { margin: 18px 0 0; font-size: 14px; }
.do-brand__links a { color: color-mix(in srgb, var(--do-accent) 55%, #fff); }
/* ===================== LIGHTBOX (vkládá JS) ===================== */
.do-lightbox {
position: fixed; inset: 0; z-index: 9999;
display: flex; align-items: center; justify-content: center;
background: rgba(12,12,14,.92);
opacity: 0; visibility: hidden; transition: opacity .25s;
padding: 4vw;
}
.do-lightbox.is-open { opacity: 1; visibility: visible; }
.do-lightbox img {
max-width: 100%; max-height: 90vh; object-fit: contain;
border-radius: 8px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.7);
}
.do-lightbox__btn {
position: absolute; top: 50%; transform: translateY(-50%);
width: 52px; height: 52px; border-radius: 50%;
border: 0; cursor: pointer;
background: rgba(255,255,255,.12); color: #fff; font-size: 26px;
display: flex; align-items: center; justify-content: center;
transition: background .2s;
}
.do-lightbox__btn:hover { background: rgba(255,255,255,.25); }
.do-lightbox__prev { left: 3vw; }
.do-lightbox__next { right: 3vw; }
.do-lightbox__close { top: 3vh; right: 3vw; transform: none; }
/* ===================== RESPONSIVE ===================== */
@media (max-width: 900px) {
.do-features { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
.do-hero,
.do-split { grid-template-columns: 1fr; }
.do-split--reverse .do-split__media { order: 0; }
.do-hero__media { aspect-ratio: 3/2; }
/* galerie zůstává 3 vedle sebe (jen užší mezery) — 2+1 by rozbilo rytmus */
.do-pdp .do-gallery {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 8px !important;
}
.do-lightbox__prev { left: 2vw; }
.do-lightbox__next { right: 2vw; }
}
@media (max-width: 460px) {
.do-features { grid-template-columns: 1fr; }
.do-pdp .do-gallery {
grid-template-columns: repeat(3, 1fr) !important;
gap: 6px !important;
}
.do-gallery img { border-radius: 10px; }
}
/* přístupnost */
.do-pdp a:focus-visible,
.do-video__facade:focus-visible,
.do-pdp .do-zoom:focus-visible,
.do-lightbox__btn:focus-visible {
outline: 2px solid var(--do-accent);
outline-offset: 3px;
border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
.do-pdp * { transition: none !important; }
}
/* =====================================================================
SHOPTET OVERRIDES (mimo .do-pdp — cílí na nativní prvky šablony)
---------------------------------------------------------------------
DŮLEŽITÉ: pravidla platí POUZE na produktech s novým popisem.
Třídu .do-has-pdp přidává do-popis.js na .description-inner, pokud
uvnitř najde .do-pdp. Produkty se starým popisem zůstávají nedotčené
a parametry se u nich zobrazují normálně.
(Dřív řešeno přes CSS :has() — nespolehlivé napříč prohlížeči.)
Skryje nativní blok „Doplňkové parametry" (celý pravý sloupec vč.
nadpisu) a roztáhne popis na celou šířku.
Struktura šablony DecorOnline (Bronze):
.description-inner
├── .basic-description (náš popis .do-pdp)
└── .extended-description (h3 „Doplňkové parametry" + table.detail-parameters)
DATA (EAN, hmotnost, záruka) zůstávají uložená v administraci → dál
se posílají do feedů. Skrývá se jen vizuálně na frontendu.
===================================================================== */
.description-inner.do-has-pdp .extended-description { display: none !important; }
.description-inner.do-has-pdp { display: block !important; }
.description-inner.do-has-pdp .basic-description {
width: 100% !important;
max-width: 100% !important;
float: none !important;
padding-left: 0 !important;
padding-right: 0 !important;
}