/* Příběh OZDOBA: foukané sklo, navazuje na reference.css. Koule je WebGL, záponka, nit a vrstvy balení jsou svg nad plátnem. */
@font-face{font-family:"OzRukopis";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/OzRukopis/OzRukopis-Bold.woff2) format("woff2")}
.oz{--vh:100vh;--bg:#f7f2ea;--bg-soft:#efe6d9;--ink:#1d1512;--ink-2:#5f524a;--ink-3:#9a8c82;--line:rgba(29,21,18,.12);--line-strong:rgba(29,21,18,.24);--mint:#a51a20;--mint-ink:#8c141a;--marker:rgba(200,153,79,.3);--glow:rgba(200,153,79,.18);--glow-2:rgba(165,26,32,.08);--dot:rgba(29,21,18,.12);--card:#fffcf7;--card-2:#f1e9dd;--a-bar:#f1e9dd;--a-line:rgba(29,21,18,.1);--a-ink:#1d1512;--a-mute:#6b5d54;--a-dim:#a99a8f;--a-on-accent:#fff;--wc-ink:#120b08;--oz-z:#c8994f;--oz-z2:#8b6a35;--oz-zs:#d6b46a;--oz-t:#120b08;background:var(--bg)}
@supports (height:100svh){.oz{--vh:100svh}}
.oz .sv-fx-in{background:linear-gradient(180deg,#f9f4ec,#f5efe5)}
.oz .sv-lines i::after{background:linear-gradient(transparent,var(--oz-z),transparent)}
.oz .sv-lines i:nth-child(2)::after{background:linear-gradient(transparent,var(--mint),transparent)}
.oz-pozn{margin:12px 0 0;font:400 13px/1.4 var(--f-body);color:var(--ink-3)}

/* ── Scéna se sklem: plátno, náhradní obrázek, záponka a nit ── */
.oz-sc{--x:50%;--y:50%;--r:100px;overflow:hidden}
.oz-gl{position:absolute;inset:0;display:block;width:100%;height:100%;opacity:0;transition:opacity .7s ease}
.oz-sc.gl .oz-gl{opacity:1}
.oz-sc.bez-gl .oz-gl{display:none}
.oz-nh{position:absolute;left:calc(var(--x) - var(--r));top:calc(var(--y) - var(--r));display:none;width:calc(var(--r)*2);height:auto;pointer-events:none}
.oz-sc.bez-gl .oz-nh{display:block}
.oz-zap{position:absolute;left:var(--x);top:calc(var(--y) - var(--r));z-index:2;width:calc(var(--r)*.44);aspect-ratio:100/120;overflow:visible;transform:translate(-50%,-80%);filter:drop-shadow(0 calc(var(--r)*.02) calc(var(--r)*.03) rgba(40,22,6,.45));pointer-events:none}
.oz-nit{position:absolute;left:var(--x);top:0;z-index:1;width:1.5px;height:calc(var(--y) - var(--r)*1.4);background:linear-gradient(rgba(214,180,106,0),#d6b46a 34%,#b8913f);transform:translateX(-50%);pointer-events:none}

/* ── Úvod: trubice nad plamenem ── */
.oz-hero{align-items:flex-end;padding:96px 0 clamp(30px,4.4vw,64px);border-radius:0 0 clamp(22px,3vw,36px) clamp(22px,3vw,36px);background:#120b08 url(/assets/imgs/case/ozdoba/dilna.webp) 50% 50%/cover no-repeat}
.oz-hero .oz-sc{position:absolute;inset:0;z-index:-2}
.oz-hero::after{background:linear-gradient(90deg,rgba(14,8,6,.8) 0,rgba(14,8,6,.42) 40%,rgba(14,8,6,0) 62%),linear-gradient(180deg,rgba(14,8,6,0) 52%,rgba(14,8,6,.72) 100%)}
.oz .oz-hero .cs-h1{font-size:clamp(2.6rem,1rem + 5.2vw,5.6rem)}
.oz-hero .cs-h1 .ln{padding-bottom:.12em;margin-bottom:-.12em}
.oz-hero .cs-h1 .ln:nth-child(2)>span{background:linear-gradient(90deg,#f7dfa4,#d6aa5c 48%,#efc488);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:.72em;letter-spacing:-.025em}
.oz-hero .pulse{background:var(--oz-zs)}
.oz-hero .cs-sub{max-width:30em}

/* ── Web v akci: hlavička e-shopu má 172 px z 1440 a 100 px z 402 ── */
.oz .sc-nb .sc-hl{aspect-ratio:1600/191}
.oz .sc-tl .sc-hl{aspect-ratio:640/159}
.sv-page.sv-js.oz .cs-sc{height:calc(var(--vh)*2.5)}

/* ── Výzva ── */
.oz .cs-big em{background:linear-gradient(90deg,#8b6a35,#c8994f 46%,#a51a20);-webkit-background-clip:text;background-clip:text;color:transparent}
.oz-vy-g{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);align-items:start;gap:clamp(22px,5vw,88px);margin-top:clamp(26px,3.6vw,48px)}
.oz-vy-t .sv-tx+.sv-tx{margin-top:14px}
.oz-vy-t .cs-st{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:clamp(24px,3vw,40px)}
.oz-vy-t .cs-st b{font-size:clamp(2rem,1.3rem + 2vw,3.3rem)}
.oz-vy-t .cs-st i{font-style:normal}
.oz-vy-f{position:relative;margin:0}
.oz-vy-f img{display:block;width:100%;aspect-ratio:4/5;border-radius:22px;object-fit:cover;object-position:60% 50%;box-shadow:var(--shadow-s)}
.oz-vy-f figcaption{margin-top:10px;font:500 12.5px/1.3 var(--f-mono);color:var(--ink-3)}

/* ── Výroba: připnutá tmavá deska, rolování = sedm kroků ── */
.oz-vr{position:relative;height:calc(var(--vh)*4.6)}
.oz-vr-s{position:sticky;top:0;height:var(--vh);padding:clamp(8px,1vw,16px)}
.oz-vr-p{position:relative;height:100%;overflow:hidden;border-radius:clamp(22px,3vw,36px);background:#120b08;color:#fff;isolation:isolate}
.oz-vr-p .oz-sc{position:absolute;inset:0;z-index:0}
.oz-vr-p .oz-zap{opacity:var(--zap,0);transform:translate(-50%,calc(-80% - (1 - var(--zap,0))*70%))}
.oz-vr-p .oz-nit{opacity:var(--zap,0)}
.oz-vr-p::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,rgba(14,8,6,.82) 0,rgba(14,8,6,.45) 34%,rgba(14,8,6,0) 54%);pointer-events:none}
.oz-vr-g{position:relative;z-index:1;display:flex;align-items:center;height:100%}
.oz-vr-t{width:min(430px,40%)}
.oz-vr-p .sv-h2{color:#fff;font-size:clamp(1.8rem,1.05rem + 1.9vw,3rem)}
.oz-vr-t>.sv-tx{margin-top:12px;color:rgba(255,255,255,.7)}
.oz-kr{position:relative;margin:clamp(20px,2.6vw,34px) 0 0;padding:0;list-style:none}
.oz-kr::before{content:"";position:absolute;left:4px;top:14px;bottom:14px;width:1px;background:rgba(214,180,106,.22)}
.oz-kr li{position:relative;padding:7px 0 7px 28px;color:rgba(255,255,255,.4);transition:color .3s}
.oz-kr li::before{content:"";position:absolute;left:0;top:14px;width:9px;height:9px;border-radius:50%;background:#120b08;box-shadow:inset 0 0 0 1.5px rgba(214,180,106,.5);transition:background .3s,box-shadow .3s}
.oz-kr li.za{color:rgba(255,255,255,.62)}
.oz-kr li.za::before{background:rgba(214,180,106,.55);box-shadow:none}
.oz-kr li.on{color:#fff}
.oz-kr li.on::before{background:var(--oz-zs);box-shadow:0 0 0 5px rgba(214,180,106,.2)}
.oz-kr b{display:block;font-family:var(--f-display);font-stretch:125%;font-size:clamp(16px,.9rem + .35vw,20px);font-weight:600;line-height:1.25;letter-spacing:-.01em}
.oz-kr span{display:block;max-height:0;overflow:hidden;opacity:0;font:400 15px/1.5 var(--f-body);color:rgba(255,255,255,.74);transition:max-height .45s var(--ease),opacity .3s,margin .3s}
.oz-kr li.on span{max-height:140px;margin-top:6px;opacity:1}
.oz-kr-n{display:none;margin:10px 0 0;font:500 12px/1 var(--f-mono);color:rgba(255,255,255,.55)}
.oz-ob{position:absolute;left:calc(var(--x) - var(--r)*1.35);top:calc(var(--y) - var(--r)*1.52);z-index:1;width:calc(var(--r)*2.7);height:calc(var(--r)*2.72);overflow:visible;pointer-events:none}
.oz-ob rect{fill:none;stroke:rgba(214,180,106,.6);stroke-width:.24;stroke-dasharray:1 1;stroke-dashoffset:calc(1 - min(1,max(0,var(--ob,0)*4 - var(--i,0))))}
.oz-ob rect:nth-child(1){--i:3}
.oz-ob rect:nth-child(2){--i:2;stroke-dasharray:.006 .008;stroke-dashoffset:0;opacity:min(1,max(0,var(--ob,0)*4 - 2))}
.oz-ob rect:nth-child(3){--i:1;stroke-opacity:.85}
.oz-ob rect:nth-child(4){--i:0;stroke-dasharray:.01 .012;stroke-dashoffset:0;opacity:min(1,max(0,var(--ob,0)*4))}
.oz-ob-l{position:absolute;left:calc(var(--x) + var(--r)*1.48);top:calc(var(--y) - var(--r)*.62);z-index:1;display:grid;gap:9px;margin:0;padding:0;list-style:none;counter-reset:ob;font:500 12px/1.2 var(--f-mono);color:#e7cf9a;white-space:nowrap;pointer-events:none}
.oz-ob-l li{counter-increment:ob;opacity:min(1,max(0,var(--ob,0)*4 - var(--i,0)));transform:translateX(calc((1 - min(1,max(0,var(--ob,0)*4 - var(--i,0))))*-8px))}
.oz-ob-l li::before{content:counter(ob) "  ";color:rgba(231,207,154,.55)}
.oz-ob-l li:nth-child(2){--i:1}
.oz-ob-l li:nth-child(3){--i:2}
.oz-ob-l li:nth-child(4){--i:3}
.oz-fo{position:absolute;right:clamp(14px,2vw,28px);bottom:clamp(14px,2vw,28px);z-index:2;width:clamp(120px,10.5vw,168px);margin:0;opacity:0;transform:translateY(8px);transition:opacity .35s,transform .45s var(--ease)}
.oz-fo:has(img.on){opacity:1;transform:none}
.oz-fo img{position:absolute;left:0;top:0;width:100%;aspect-ratio:1;border-radius:14px;object-fit:cover;opacity:0;transition:opacity .4s}
.oz-fo img[data-k="0"]{object-position:40% 50%}
.oz-fo img.on{position:relative;opacity:1;box-shadow:0 0 0 1px rgba(214,180,106,.3),0 18px 30px -18px #000}
.oz-fo figcaption{margin-top:7px;font:500 11px/1 var(--f-mono);color:rgba(255,255,255,.62)}


/* ── Ozdoba se jménem ── */
.oz-jm-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(24px,5vw,88px)}
.oz-jm-t .sv-tx{margin-top:14px}
.oz-jm-f{margin:clamp(22px,3vw,36px) 0 0}
.oz-jm-l{display:block;margin-bottom:8px;font:500 12.5px/1 var(--f-mono);color:var(--ink-3)}
.oz-jm-i{position:relative;max-width:440px}
.oz-jm-i input{display:block;width:100%;height:64px;padding:0 64px 0 20px;border:1px solid var(--line-strong);border-radius:16px;background:var(--card);color:var(--ink);font:700 30px/1 "OzRukopis",var(--f-body);outline:none;transition:border-color .2s,box-shadow .2s}
.oz-jm-i input:focus{border-color:var(--oz-z2);box-shadow:0 0 0 4px rgba(200,153,79,.2)}
.oz-jm-i span{position:absolute;right:18px;top:50%;font:500 12px/1 var(--f-mono);color:var(--ink-3);transform:translateY(-50%)}
.oz-jm-b{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 0;padding:0;border:0}
.oz-jm-b legend{float:left;width:100%;margin-bottom:10px;padding:0;font:500 12.5px/1 var(--f-mono);color:var(--ink-3)}
.oz-jm-b label{position:relative;cursor:pointer}
.oz-jm-b input{position:absolute;opacity:0;pointer-events:none}
.oz-jm-b i{display:block;width:38px;height:38px;border-radius:50%;background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.55),transparent 34%),radial-gradient(circle at 50% 50%,var(--c),color-mix(in srgb,var(--c) 70%,#000) 100%);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12),0 0 0 0 var(--bg);transition:box-shadow .2s,transform .2s var(--ease)}
.oz-jm-b label:hover i{transform:translateY(-2px)}
.oz-jm-b input:checked+i{box-shadow:inset 0 0 0 1px rgba(0,0,0,.12),0 0 0 3px var(--bg),0 0 0 5px var(--oz-z2)}
.oz-jm-b input:focus-visible+i{box-shadow:inset 0 0 0 1px rgba(0,0,0,.12),0 0 0 3px var(--bg),0 0 0 5px var(--mint)}
.oz-jm-b span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.oz-jm-c{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin:22px 0 0}
.oz-jm-c b{font-family:var(--f-display);font-stretch:125%;font-size:clamp(26px,1.2rem + 1vw,34px);font-weight:700;letter-spacing:-.02em}
.oz-jm-c span{font:500 15px/1.2 var(--f-body);color:var(--ink-2)}
.oz-jm-c em{flex-basis:100%;font:400 13px/1.3 var(--f-body);font-style:normal;color:var(--ink-3)}
.oz-jm-v{display:grid;justify-items:center;gap:clamp(16px,2vw,26px)}
.oz-jm-o{position:relative;width:min(100%,520px);aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,#fffdf8 0,#fbf5ea 62%,rgba(247,242,234,0) 100%)}
.oz-jm-o::after{content:"";position:absolute;left:calc(var(--x) - var(--r)*.78);top:calc(var(--y) + var(--r)*1.06);width:calc(var(--r)*1.56);height:calc(var(--r)*.22);border-radius:50%;background:radial-gradient(closest-side,rgba(60,32,14,.28),rgba(60,32,14,0));pointer-events:none}
.oz-jm-j{position:absolute;left:var(--x);top:var(--y);z-index:1;display:none;margin:0;font:700 calc(var(--r)*.34)/1 "OzRukopis",cursive;color:#f2cf7a;text-shadow:0 1px 0 rgba(90,50,10,.4);white-space:nowrap;transform:translate(-50%,-50%);pointer-events:none}
.oz-jm-o.bez-gl .oz-jm-j{display:block}
.oz-jm-k{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;width:min(100%,560px);margin:0;padding:0;list-style:none;counter-reset:k}
.oz-jm-k li{counter-increment:k;padding:12px 12px 13px;border-radius:14px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.oz-jm-k b{display:block;font:600 14.5px/1.2 var(--f-body)}
.oz-jm-k b::before{content:counter(k) ". ";color:var(--oz-z2)}
.oz-jm-k span{display:block;margin-top:4px;font:400 12.5px/1.3 var(--f-body);color:var(--ink-2)}

.oz .cs-do{padding-top:clamp(40px,5vw,80px)}

/* ── Telefony a tablety ── */
@media (max-width:1199.98px){.oz-vr-t{width:min(400px,42%)}}
@media (max-width:991.98px){.oz-vy-g,.oz-jm-g{grid-template-columns:minmax(0,1fr)}
.oz-vy-f img{aspect-ratio:16/10}
.oz-vr-p::after{background:linear-gradient(180deg,rgba(14,8,6,0) 40%,rgba(14,8,6,.82) 66%,rgba(14,8,6,.94) 100%)}
.oz-vr-g{align-items:flex-end;padding-bottom:clamp(22px,4vw,40px)}
.oz-vr-t{width:100%;max-width:560px}
.oz-vr-t>.sv-tx{display:none}
.oz-kr{margin-top:14px}
.oz-kr::before{display:none}
.oz-kr li{display:none;padding:0}
.oz-kr li::before{display:none}
.oz-kr li.on{display:block}
.oz-kr li.on span{min-height:4.5em}
.oz-kr-n{display:block}
.oz-fo{display:none}
.oz-ob-l{left:calc(var(--x) - var(--r)*1.35);top:calc(var(--y) + var(--r)*1.28);display:flex;flex-wrap:wrap;justify-content:center;gap:4px 12px;width:calc(var(--r)*2.7);font-size:10.5px}
.oz-jm-v{order:-1}
.oz-hero::after{background:linear-gradient(180deg,rgba(14,8,6,0) 34%,rgba(14,8,6,.62) 60%,rgba(14,8,6,.86) 100%)}}
@media (max-width:767.98px){.oz-jm-k{grid-template-columns:repeat(2,minmax(0,1fr))}
.oz-jm-i input{height:58px;font-size:27px}
.oz-jm-b{gap:8px}
.oz-jm-b i{width:34px;height:34px}
.oz-vy-t .cs-st{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:991.98px) and (orientation:landscape){.oz-vr-p::after{background:linear-gradient(90deg,rgba(14,8,6,.86) 0,rgba(14,8,6,.5) 38%,rgba(14,8,6,0) 58%)}
.oz-vr-g{align-items:center;padding-bottom:0}
.oz-vr-t{width:50%}
.oz-vr-p .sv-h2{font-size:clamp(1.4rem,1rem + 1.6vw,2rem)}
.oz-ob-l{left:calc(var(--x) + var(--r)*1.46);top:calc(var(--y) - var(--r)*.62);display:grid;width:auto}}
@media (prefers-reduced-motion:reduce){.oz-vr{height:auto}
.oz-vr-s{position:relative;height:auto}
.oz-vr-p{height:auto;min-height:min(820px,var(--vh))}
.oz-vr-g{height:auto;min-height:inherit;padding-block:clamp(48px,6vw,88px)}
.oz-kr li{color:#fff}
.oz-kr li span{max-height:none;margin-top:6px;opacity:1}
.oz-fo,.oz-ob,.oz-ob-l{display:none}}
@media (prefers-reduced-motion:reduce) and (max-width:991.98px){.oz-vr-p .oz-sc{position:relative;inset:auto;height:min(64vw,420px)}
.oz-vr-p::after{display:none}
.oz-kr li{display:block;margin-top:14px}
.oz-kr-n{display:none}}