• 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; }
/* ikony přes CSS mask → v HTML popisu žádné SVG (bezpečné pro editor) */
.do-feature--levitation .do-feature__icon {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='5'/%3E%3Cpath d='M5 18h14M7 21h10'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='5'/%3E%3Cpath d='M5 18h14M7 21h10'/%3E%3C/svg%3E");
}
.do-feature--light .do-feature__icon {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4'/%3E%3Cpath d='M12 3a6 6 0 0 0-4 10.5c.6.6 1 1.3 1 2.5h6c0-1.2.4-1.9 1-2.5A6 6 0 0 0 12 3Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4'/%3E%3Cpath d='M12 3a6 6 0 0 0-4 10.5c.6.6 1 1.3 1 2.5h6c0-1.2.4-1.9 1-2.5A6 6 0 0 0 12 3Z'/%3E%3C/svg%3E");
}
.do-feature--touch .do-feature__icon {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11V6a2 2 0 0 1 4 0v5'/%3E%3Cpath d='M13 8a2 2 0 0 1 4 0v6a5 5 0 0 1-5 5h-1.5a4 4 0 0 1-3.2-1.6L4 13.5a1.6 1.6 0 0 1 2.6-1.9L8 13'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11V6a2 2 0 0 1 4 0v5'/%3E%3Cpath d='M13 8a2 2 0 0 1 4 0v6a5 5 0 0 1-5 5h-1.5a4 4 0 0 1-3.2-1.6L4 13.5a1.6 1.6 0 0 1 2.6-1.9L8 13'/%3E%3C/svg%3E");
}
.do-feature--gift .do-feature__icon {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='4' rx='1'/%3E%3Cpath d='M5 12v8h14v-8M12 8v12'/%3E%3Cpath d='M12 8S9 8 8 6.5 9 4 12 8ZM12 8s3 0 4-1.5S15 4 12 8Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='4' rx='1'/%3E%3Cpath d='M5 12v8h14v-8M12 8v12'/%3E%3Cpath d='M12 8S9 8 8 6.5 9 4 12 8ZM12 8s3 0 4-1.5S15 4 12 8Z'/%3E%3C/svg%3E");
}
/* ===================== 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(24px,4vw,40px);
}
.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-bottom: 10px;
}
.do-brand__text { font-size: clamp(16px,1.6vw,19px); max-width: 60ch; color: #efece6; }
.do-brand__text strong { color: #fff; }
.do-brand__links { margin-top: 16px; 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; }
.do-gallery { grid-template-columns: repeat(2, 1fr); }
.do-lightbox__prev { left: 2vw; }
.do-lightbox__next { right: 2vw; }
}
@media (max-width: 460px) {
.do-features { grid-template-columns: 1fr; }
}
/* 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)
---------------------------------------------------------------------
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 .extended-description { display: none !important; }
.description-inner { display: block !important; }
.description-inner .basic-description {
width: 100% !important;
max-width: 100% !important;
float: none !important;
padding-right: 0 !important;
}