/* Příběh Black Food Market: černá stránka, růžový roj bodů na plátně za obsahem */
.bf{color-scheme:dark;--bg:#0b0b0d;--bg-soft:#151518;--ink:#f6f3f1;--ink-2:#b9b3b3;--ink-3:#807a7b;--line:rgba(255,255,255,.1);--line-strong:rgba(255,255,255,.24);--mint:#ff4873;--mint-ink:#ff6f92;--marker:rgba(255,72,115,.38);--glow:rgba(255,72,115,.2);--glow-2:rgba(255,72,115,.08);--dot:rgba(255,255,255,.12);--card:#141417;--card-2:#1f1f23;--a-on-accent:#fff;--wc-ink:#0b0b0d;--e-pink:#ff4873;background:var(--bg);color:var(--ink)}
.bf>section{position:relative;z-index:1}
.bf :is(.cs-big,.sv-h2,.cs-h1) em{font-style:normal;background:none;color:var(--mint);-webkit-text-fill-color:currentColor}
.bf-fx{position:absolute;inset:0;z-index:0;pointer-events:none}
.bf-fx canvas{position:sticky;top:0;display:block;width:100%;height:100vh}
@supports (height:100lvh){.bf-fx canvas{height:100lvh}}
.bf-sw{display:inline-flex;gap:3px;padding:4px;border-radius:999px;background:rgba(255,255,255,.08)}
.bf-sw button{height:36px;padding:0 15px;border:0;border-radius:999px;background:none;color:var(--ink-2);font:600 14px/1 var(--f-body);cursor:pointer;transition:background .2s,color .2s}
.bf-sw button:hover{color:var(--ink)}
.bf-sw button[aria-pressed="true"]{background:var(--mint);color:#fff}

/* ── Úvod ── */
.bf-hero{display:flex;align-items:flex-end;min-height:100vh;padding:calc(var(--hl-h,80px) + 24px) 0 clamp(36px,5vw,72px);color:#fff;overflow:hidden}
@supports (height:100svh){.bf-hero{min-height:100svh}}
.bf-hero-w{position:relative;width:100%}
.bf-hero-w>*{max-width:min(58%,720px)}
.bf .bf-hero .cs-h1{font-size:clamp(3rem,1.2rem + 5.6vw,7rem);line-height:.98}
.bf .bf-hero .cs-sub{max-width:27em;color:rgba(255,255,255,.8)}
.bf .bf-hero .cs-fa{max-width:none;grid-template-columns:repeat(4,minmax(0,auto));gap:12px clamp(20px,3vw,48px)}
.bf-br{position:absolute;right:max(2vw,calc((100vw - var(--wrap,1320px))/2 - 20px));top:50%;width:min(50vw,84vh);aspect-ratio:1;transform:translateY(-52%)}

/* ── Web v akci ── */
.bf .cs-sc .cs-hd{align-items:end}
.bf-pr{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:10px}
.bf .sc-v img+img{position:absolute;left:0;top:0;opacity:0;transition:opacity .35s ease}
.bf .sc-v img:first-child{transition:opacity .35s ease}
.bf .sc[data-web="f"] .sc-v img:first-child{opacity:0}
.bf .sc[data-web="f"] .sc-v img+img{opacity:1}
.bf .sc-nv{box-shadow:inset 0 0 0 1px #5a5d63,0 40px 90px -40px rgba(255,72,115,.3)}
.bf .sc-tf{box-shadow:inset 0 0 0 1.5px #6a6e74,inset 0 0 0 3px #17191c,0 40px 70px -30px rgba(255,72,115,.3)}

/* ── Výzva a čísla ── */
.bf .cs-big{max-width:15.5em}
.bf-vy{padding-bottom:clamp(30px,4vw,60px)}
.bf-ci{margin-top:clamp(26px,3.4vw,52px)}
.bf-ci-o{width:100%;height:clamp(110px,24.6vw,380px)}
.bf-ci-p{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-top:clamp(10px,1.6vw,22px);padding-top:clamp(12px,1.4vw,18px);border-top:1px solid var(--line)}
.bf-ci-p p{margin:0;font:500 clamp(16px,.9rem + .4vw,20px)/1.3 var(--f-body);color:var(--ink)}

/* ── Obchod ── */
.bf-ob-g{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);align-items:stretch;gap:clamp(12px,1.6vw,22px);margin-top:clamp(24px,3vw,44px)}
.bf-ob-l{display:grid;align-content:start;gap:4px;margin:0;padding:0;list-style:none}
.bf-ob-l button{display:block;width:100%;padding:12px 15px;border:0;border-radius:14px;background:none;color:var(--ink);text-align:left;cursor:pointer;transition:background .18s}
.bf-ob-l button:hover{background:rgba(255,255,255,.06)}
.bf-ob-l button[aria-pressed="true"]{background:rgba(255,72,115,.16)}
.bf-ob-l b{display:block;font:600 clamp(15px,.9rem + .15vw,16.5px)/1.25 var(--f-body)}
.bf-ob-l span{display:block;margin-top:3px;font:400 13px/1.25 var(--f-body);color:var(--ink-2)}
.bf-ob-p{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.98fr);min-height:clamp(400px,31vw,452px);border-radius:26px;box-shadow:inset 0 0 0 1px var(--line)}
.bf-ok{min-width:0;margin:clamp(14px,1.8vw,24px)}
.bf-kt{display:flex;flex-direction:column;min-width:0;margin:8px;padding:clamp(16px,1.8vw,24px);border-radius:20px;background:#fff;color:#16161a;font-family:var(--f-body)}
.bf-kt-h{display:grid;grid-template-columns:92px minmax(0,1fr);align-items:center;gap:14px}
.bf-kt-h img{display:block;width:92px;height:92px;border-radius:14px;object-fit:cover}
.bf-kt-h em{display:inline-block;margin-bottom:5px;font:600 12.5px/1 var(--f-body);font-style:normal;color:#1a8a4a}
.bf-kt-h em.z{color:#b26a00}
.bf-kt-h strong{display:block;font:600 clamp(17px,.95rem + .35vw,20px)/1.2 var(--f-body);letter-spacing:-.01em}
.bf-kt-m{margin:12px 0 0;font-size:14px;line-height:1.4;color:#5e5e66}
.bf-kt-v{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.bf-kt-v[hidden]{display:none}
.bf-kt-v button{min-height:36px;padding:0 12px;border:1px solid #dcdce2;border-radius:10px;background:#fff;color:#16161a;font:500 13.5px/1 var(--f-body);cursor:pointer;transition:border-color .15s,background .15s}
.bf-kt-v button:hover{border-color:#16161a}
.bf-kt-v button[aria-pressed="true"]{border-color:var(--e-pink);background:#fff0f4;color:#c01f4a}
.bf-kt-q{display:inline-flex;align-items:center;align-self:flex-start;gap:4px;margin-top:14px;padding:3px;border:1px solid #dcdce2;border-radius:11px}
.bf-kt-q[hidden]{display:none}
.bf-kt-q button{width:34px;height:34px;border:0;border-radius:8px;background:#f1f1f4;color:#16161a;font:600 18px/1 var(--f-body);cursor:pointer}
.bf-kt-q button:disabled{opacity:.35;cursor:default}
.bf-kt-q output{min-width:62px;text-align:center;font:600 14px/1 var(--f-body)}
.bf-kt-c{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;margin-top:auto;padding-top:14px}
.bf-kt-c b{font:700 clamp(22px,1.1rem + .6vw,27px)/1 var(--f-body);letter-spacing:-.02em}
.bf-do{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px;border:0;border-radius:10px;background:var(--e-pink);color:#fff;font:600 14.5px/1 var(--f-body);cursor:pointer;transition:background .18s,transform .18s}
.bf-do:hover{background:#e62e5a;transform:translateY(-1px)}
.bf-do svg,.bf-ko svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bf-kt-p{min-height:17px;margin:7px 0 0;font-size:12.5px;line-height:1.3;color:#5e5e66}
.bf-kt-p:empty{min-height:0;margin:0}
.bf-ko{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 10px;margin-top:12px;padding:10px 12px;border-radius:12px;background:#f5f5f7;font-size:13.5px}
.bf-ko p{display:flex;align-items:center;gap:7px;margin:0;font-weight:500}
.bf-ko b{font-weight:700}
.bf-ko ul{grid-column:1/-1;margin:0;padding:0;list-style:none}
.bf-ko li{display:flex;justify-content:space-between;gap:10px;margin-top:4px;font-size:12.5px;color:#5e5e66}
.bf-ko li span:first-child{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.bf-ko li span:last-child{flex:none}
.bf-ko.nv{animation:bfKo .4s var(--ease)}
@keyframes bfKo{30%{background:#ffe3ea}}
.bf-pozn{margin:12px 0 0;font:400 13px/1.3 var(--f-body);color:var(--ink-3)}
.bf-pozn a{color:var(--ink-2);text-decoration:underline;text-underline-offset:2px}
.bf-pozn a:hover{color:var(--ink)}

/* ── Cesty zákazníků ── */
.bf-ce-g{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:stretch;gap:clamp(18px,3vw,48px);margin-top:clamp(24px,3vw,44px)}
.bf-ce-k{display:flex;flex-wrap:wrap;gap:6px}
.bf-ce-k button{height:40px;padding:0 15px;border:1px solid var(--line-strong);border-radius:999px;background:none;color:var(--ink);font:600 14px/1 var(--f-body);cursor:pointer;transition:background .18s,border-color .18s}
.bf-ce-k button:hover{border-color:var(--ink)}
.bf-ce-k button[aria-pressed="true"]{border-color:var(--mint);background:var(--mint);color:#fff}
.bf-ce-w{margin:clamp(20px,2.6vw,34px) 0 12px;font:500 13px/1 var(--f-mono);color:var(--mint-ink)}
.bf-ce-r{position:relative;display:grid;gap:0;margin:0;padding:0;list-style:none;counter-reset:k}
.bf-ce-r li{position:relative;padding:0 0 18px 30px;font:500 clamp(17px,.95rem + .45vw,22px)/1.25 var(--f-body);color:var(--ink);opacity:1}
.bf-ce-r li::before{content:"";position:absolute;left:0;top:.42em;width:11px;height:11px;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 2px var(--mint)}
.bf-ce-r li::after{content:"";position:absolute;left:5px;top:calc(.42em + 13px);bottom:-.32em;width:1px;background:var(--line-strong)}
.bf-ce-r li.k{padding-bottom:0;font-weight:700;color:var(--mint-ink)}
.bf-ce-r li.k::before{background:var(--mint)}
.bf-ce-r li.k::after{display:none}
.bf-ce-r.go li{animation:bfKrok .36s var(--ease) calc(var(--i)*70ms) backwards}
@keyframes bfKrok{from{opacity:0;transform:translateX(-10px)}}
.bf-ce-f{position:relative;min-height:280px;overflow:hidden;border-radius:22px;background:var(--card)}
.bf-ce-f img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s ease}
.bf-ce-f img.on,.bf-ce-f img:only-child{opacity:1}

/* ── Kruh farmy ── */
.bf-kr-g{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);align-items:center;gap:clamp(18px,4vw,72px)}
.bf-kr-t .sv-tx{margin-top:14px}
.bf-kr-l{display:grid;gap:2px;margin:clamp(18px,2.4vw,30px) 0 0;padding:0;list-style:none}
.bf-kr-l li{padding:9px 0 9px 15px;border-left:2px solid var(--line);font:400 15px/1.35 var(--f-body);color:var(--ink-2);transition:border-color .3s,color .3s}
.bf-kr-l b{display:block;font-weight:600;font-size:16.5px;color:var(--ink)}
.bf-kr-l li.on{border-left-color:var(--mint);color:var(--ink)}
.bf-kr-v{position:relative;display:grid;place-items:center;aspect-ratio:1;width:100%;max-width:min(620px,80vh);margin:0 auto}
.bf-kr-v p{max-width:46%;margin:0;font:400 clamp(13.5px,.8rem + .25vw,16px)/1.3 var(--f-body);text-align:center;color:var(--ink-2)}
.bf-kr-v p b{display:block;margin-bottom:6px;font:600 clamp(24px,1.1rem + 1.5vw,42px)/1.05 var(--f-display);font-stretch:125%;letter-spacing:-.02em;color:var(--ink)}
.bf-kr-v span{position:absolute;font:500 12.5px/1 var(--f-mono);color:var(--ink-3);transition:color .3s}
.bf-kr-v span.on{color:var(--mint-ink)}
.bf-kr-v span:nth-child(1){top:17%;left:50%;transform:translateX(-50%)}
.bf-kr-v span:nth-child(2){top:50%;right:15.5%;transform:translateY(-50%)}
.bf-kr-v span:nth-child(3){bottom:17%;left:50%;transform:translateX(-50%)}
.bf-kr-v span:nth-child(4){top:50%;left:15.5%;transform:translateY(-50%)}

/* ── Závěr ── */
.bf-en-g{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:center;gap:clamp(16px,3vw,56px)}
.bf .bf-en .sv-endc{max-width:none;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
.bf-en .nz{white-space:nowrap}
.bf-en-k{aspect-ratio:1;width:100%;max-width:440px;margin:0 auto}
.sv-page:not(.sv-js) .bf-ob-g,.sv-page:not(.sv-js) .bf-ce-g{display:none}

/* ── Telefony a tablety ── */
@media (max-width:1199.98px){.bf-ob-g{grid-template-columns:minmax(0,1fr)}
.bf-ob-l{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:991.98px){.bf-hero{display:block;padding-top:calc(var(--hl-h,56px) + 8px)}
.bf-hero-w>*{max-width:none}
.bf-br{position:relative;right:auto;top:auto;width:min(92vw,52vh);margin:0 auto 6px;transform:none}
.bf .bf-hero .cs-fa{grid-template-columns:repeat(2,minmax(0,1fr))}
.bf-pr{justify-content:flex-start}
.bf-ce-g,.bf-kr-g,.bf-en-g{grid-template-columns:minmax(0,1fr)}
.bf-en-k{order:-1;max-width:300px}
.bf-ce-f{aspect-ratio:3/2;min-height:0}
.bf .cs-sc .cs-hd{grid-template-columns:minmax(0,1fr)}}
@media (max-width:767.98px){.bf-ob-l{display:flex;gap:6px;margin:0 -12px;padding:0 12px 4px;overflow-x:auto;scrollbar-width:none}
.bf-ob-l::-webkit-scrollbar{display:none}
.bf-ob-l li{flex:none;width:170px}
.bf-ob-l button{height:100%;background:rgba(255,255,255,.06)}
.bf-ob-p{grid-template-columns:minmax(0,1fr);min-height:0}
.bf-ok{height:150px;margin:14px 18px 6px}
.bf-kt{min-height:330px}
.bf-ci-p{flex-direction:column;align-items:flex-start}}
@media (prefers-reduced-motion:reduce){.bf-ce-r.go li{animation:none}
.bf-ce-f img{transition:none}}