/* Obchody postáv (arling.sk/walt/, /june/, /olive/), STAV-40, 28. 9. 2026.
   Zdroj: ops/strategia/instagram/obchody/spolocne/obchod.css, do priečinkov postáv ho kopíruje postav.mjs.
   Tokeny podľa paper.css (písma, polomer, krivky, medzery 8 px), farby podľa témy postavy (STRANKY-POSTAV.md časť 2). */
@font-face{font-family:"ARLing Sans";src:url(/fonts/arling-sans.woff2) format("woff2-variations"),url(/fonts/arling-sans.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"ARLing Serif";src:url(/fonts/arling-serif.woff2) format("woff2-variations"),url(/fonts/arling-serif.woff2) format("woff2");font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:"ARLing Serif";src:url(/fonts/arling-serif-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}

:root{
  --sans:"ARLing Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"ARLing Serif",Georgia,"Times New Roman",serif;
  --radius:14px;--radius-s:8px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --out:cubic-bezier(.16,1,.3,1);
  --wrap:min(1180px,calc(100vw - 32px));
}
.t-walt{--bg:#f4efe4;--paper:#fbf8f1;--ink:#1c2433;--body:#394050;--muted:#5a5f6c;--line:#ddd5c4;
  --accent:#23395b;--accent-ink:#ffffff;--accent-edge:#23395b;--mark:#b98a3e;--mark-text:#7a5a22;--head:var(--serif);--head-w:600}
.t-june{--bg:#fbf7ee;--paper:#fffdf8;--ink:#1e1a14;--body:#3f382d;--muted:#665c4c;--line:#eadfc8;
  --accent:#141414;--accent-ink:#fbf7ee;--accent-edge:#e0a526;--mark:#e0a526;--mark-text:#855700;--head:var(--sans);--head-w:700}
.t-olive{--bg:#f6f1e7;--paper:#fcfaf4;--ink:#1b2116;--body:#394033;--muted:#5c6256;--line:#e2dacb;
  --accent:#3f6b1e;--accent-ink:#ffffff;--accent-edge:#3f6b1e;--mark:#b08d3c;--mark-text:#6f5518;--moss:#5e8c31;--head:var(--sans);--head-w:700}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--body);font:17px/1.55 var(--serif);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:var(--ink);text-decoration-thickness:1px;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.wrap{width:var(--wrap);margin:0 auto}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;background:var(--paper);border:1px solid var(--ink);padding:8px 12px;z-index:9;font-family:var(--sans)}
h1,h2,h3{font-family:var(--head);font-weight:var(--head-w);color:var(--ink);margin:0;letter-spacing:-.01em;text-wrap:balance}
p{margin:0}
.malo{font-family:var(--sans);font-size:14px;line-height:1.5;color:var(--muted)}

/* Lišta postavy: žiadne menu ARLing, len kto tu hovorí. */
.lista{border-bottom:1px solid var(--line)}
.lista .wrap{display:flex;align-items:center;gap:12px;min-height:64px}
.lista img{width:40px;height:40px;border-radius:50%;object-fit:cover}
.lista b{font-family:var(--sans);font-weight:700;color:var(--ink);font-size:16px}
.stitok-ai{margin-left:auto;font-family:var(--sans);font-size:13px;line-height:1.2;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:6px 12px;white-space:nowrap}

.navrat{margin-top:16px;padding:16px;border:1px solid var(--ink);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:16px;line-height:1.5}
.navrat[hidden]{display:none}
.navrat b{color:var(--ink)}

/* Hlava */
.hlava{padding:24px 0 40px}
.hlava .wrap{display:grid;gap:24px}
.tvar{margin:0;border-radius:var(--radius);overflow:hidden;background:var(--line);height:min(40svh,420px)}
.tvar img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.hlava h1{font-size:clamp(40px,9vw,72px);line-height:1.02}
.hlava .veta{font-size:clamp(20px,4.6vw,26px);line-height:1.35;color:var(--ink);margin-top:12px;max-width:34ch}
.hlava .kto{margin-top:24px;max-width:52ch}
.hlava .dalej{margin-top:24px}
.ciara{display:block;width:56px;height:3px;background:var(--mark);border-radius:2px;margin:0 0 16px}

.btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:12px 24px;border-radius:var(--radius-s);
  background:var(--accent);color:var(--accent-ink);border:2px solid var(--accent-edge);font:600 17px/1.25 var(--sans);text-decoration:none;text-align:center;
  transition:transform .16s var(--ease),box-shadow .16s var(--ease)}
.btn:hover{box-shadow:0 6px 18px -8px rgba(0,0,0,.45)}
.btn:active{transform:scale(.98)}
.btn.vypnute{background:var(--paper);color:var(--muted);border-color:var(--line);border-style:dashed;cursor:not-allowed;box-shadow:none;transform:none}
[hidden]{display:none !important}
.btn-tichy{display:inline-flex;align-items:center;min-height:44px;font-family:var(--sans);font-size:16px;color:var(--ink)}
/* STAV-52: odkaz k nákupu bez href (skript ho ešte nezapol, alebo ho test vypol) nevyzerá klikateľne */
a.btn-tichy:not([href]){color:var(--muted);text-decoration:none;cursor:not-allowed}

/* Obchod: zoznam volieb a jedno tlačidlo */
.obchod{padding:48px 0;border-top:1px solid var(--line)}
.obchod h2,.sekcia h2{font-size:clamp(28px,6vw,40px);line-height:1.1}
.obchod .uvod{margin-top:8px;max-width:52ch}
.obchod-mriezka{display:grid;gap:32px;margin-top:24px}
.nahlad-velky{display:none}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{font-family:var(--sans);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:0;margin:24px 0 8px}
fieldset:first-of-type legend{margin-top:0}
.volba{position:relative;display:grid;grid-template-columns:72px 1fr auto;gap:16px;align-items:start;min-height:96px;padding:12px;margin-bottom:8px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
/* STAV-57: bez skriptu má každý produkt vlastné tlačidlo a nič sa nevyberá; klikateľná karta až so skriptom */
.s-vyberom .volba{cursor:pointer}
.volba .kupa-polozka{grid-column:1/-1;display:grid;gap:8px}
.volba .kupa-polozka .btn{width:100%}
.obchod-mriezka:has(> .nahlad-velky[hidden]){grid-template-columns:minmax(0,760px)}
.volba input{position:absolute;opacity:0;width:1px;height:1px}
.volba img{width:72px;height:72px;object-fit:cover;border-radius:var(--radius-s);background:var(--line)}
.volba .t b{display:block;font-family:var(--sans);font-weight:700;font-size:17px;line-height:1.3;color:var(--ink)}
.volba .t span{display:block;font-size:15px;line-height:1.45;margin-top:4px}
.volba .t i{display:block;font-style:normal;font-family:var(--sans);font-size:13px;line-height:1.4;color:var(--muted);margin-top:6px}
.volba .c{font-family:var(--sans);font-weight:700;font-size:17px;color:var(--ink);white-space:nowrap}
.volba .znak{position:absolute;top:10px;left:10px;width:24px;height:24px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;
  opacity:0;transform:scale(.6);transition:opacity .18s var(--ease),transform .22s var(--out)}
.volba .znak svg{width:14px;height:14px}
.volba:has(input:checked){border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.volba:has(input:checked) .znak{opacity:1;transform:none}
.volba:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:3px}
/* výber vo farbe témy: June horčica, Olive mach, Walt námornícka */
.volba:has(input:checked){border-color:var(--vyber,var(--ink));box-shadow:0 0 0 1px var(--vyber,var(--ink))}
.volba .znak{background:var(--vyber,var(--accent));color:var(--vyber-ink,var(--accent-ink))}
.t-june{--vyber:#b27a00;--vyber-ink:#141414}
.t-june .volba .znak{background:#e0a526}
.t-june .volba:has(input:checked){background:#fff8e6}
.t-olive{--vyber:#3f6b1e}
.t-olive .volba:has(input:checked){background:#f3f7ec}
.t-walt .volba:has(input:checked){background:#f7f3ea}
.volba .stitok{display:inline-block;font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mark-text);margin-bottom:2px}
.kupa{margin-top:16px}
.kupa .btn{width:100%}
.kupa .pod{margin-top:12px}
.kupa .pod a{color:var(--muted)}
.istota{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:8px;font-family:var(--sans);font-size:15px;line-height:1.45;color:var(--body)}
.istota li{display:grid;grid-template-columns:20px 1fr;gap:8px}
.istota svg{width:18px;height:18px;margin-top:2px;color:var(--mark-text)}

/* Detail zvolenej položky */
.detail{margin-top:24px;padding-top:24px;border-top:1px solid var(--line)}
.detail[hidden]{display:none}
.detail h3{font-size:22px;line-height:1.25}
.detail ul{margin:12px 0 0;padding-left:20px}
.detail li{margin:4px 0}
.strany{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:16px 0 0;padding:0;list-style:none}
.strany a{display:block;border-radius:6px;overflow:hidden;border:1px solid var(--line);background:#fff}
.strany img{width:100%;aspect-ratio:600/849;object-fit:cover;object-position:top}
.strany.siroke{grid-template-columns:repeat(2,minmax(0,1fr))}
.strany.siroke img{aspect-ratio:4/3}
.strany.jedna{grid-template-columns:minmax(0,260px)}
.strany-popis{margin-top:8px}
.detail .ukazka{margin-top:12px}

/* Pohybový moment */
.moment{padding:48px 0;border-top:1px solid var(--line)}
.moment .wrap{display:grid;gap:24px;align-items:center}
.moment .popis{max-width:44ch}
.moment h2{font-size:clamp(26px,5.6vw,36px);line-height:1.15}
.moment .popis p{margin-top:12px}

/* Walt: kniha, strana sa otočí */
.kniha{position:relative;width:100%;max-width:560px;aspect-ratio:1440/963;perspective:1800px;margin:0 auto}
.kniha .obal{position:absolute;inset:0;transform:translateX(-25%);transition:transform 1.2s cubic-bezier(.45,.05,.2,1);transform-style:preserve-3d}
.kniha.hraj .obal,.kniha.hotovo .obal{transform:none}
.kniha.hotovo .obal{transition:none}
.kniha .strana{position:absolute;top:0;width:50%;height:100%;border-radius:3px 6px 6px 3px;overflow:hidden;background:#fff;box-shadow:0 1px 0 var(--line),0 18px 32px -22px rgba(28,36,51,.55)}
.kniha .vpravo{right:0}
.kniha .vpravo img{width:100%;height:100%;object-fit:cover}
.kniha .list{position:absolute;top:0;right:0;width:50%;height:100%;transform-origin:0 50%;transform-style:preserve-3d;will-change:transform;
  transition:transform 1.2s cubic-bezier(.45,.05,.2,1)}
.kniha .list>div{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:3px 6px 6px 3px;overflow:hidden}
.kniha .predok img{width:100%;height:100%;object-fit:cover}
.kniha .zadok{transform:rotateY(180deg);background:var(--paper);border-radius:6px 3px 3px 6px;display:flex;flex-direction:column;justify-content:center;padding:10%;
  font-family:var(--serif);color:var(--ink);box-shadow:inset -14px 0 18px -16px rgba(28,36,51,.35)}
.kniha .zadok b{font-weight:600;font-size:clamp(15px,3.2vw,22px);line-height:1.2}
.kniha .zadok span{font-family:var(--sans);font-size:clamp(11px,2.2vw,13px);color:var(--muted);margin-top:8px;line-height:1.4}
.kniha.hraj .list,.kniha.hotovo .list{transform:rotateY(-180deg)}
.kniha.hotovo .list{transition:none}

/* June: čísla v zošite sa sčítajú */
.zosit{position:relative;max-width:460px;width:100%;margin:0 auto;background:#fffef9;border-radius:6px;padding:28px 24px 24px 56px;
  box-shadow:0 1px 0 var(--line),0 22px 36px -26px rgba(30,26,20,.55);
  background-image:linear-gradient(90deg,transparent 43px,#e8b4a8 43px,#e8b4a8 45px,transparent 45px),repeating-linear-gradient(180deg,transparent 0,transparent 35px,#d8e2ee 35px,#d8e2ee 36px);
  background-position:0 0,0 22px}
.zosit h3{font-family:var(--serif);font-weight:600;font-size:20px;line-height:36px;margin:0 0 0}
.zosit ol{list-style:none;margin:0;padding:0}
.zosit li{display:flex;justify-content:space-between;gap:16px;font-family:var(--serif);font-style:italic;font-size:18px;line-height:36px;color:#2c2a26;
  opacity:0;transform:translateY(6px);transition:opacity .3s var(--ease),transform .4s var(--out)}
.zosit li b{font-style:normal;font-family:var(--sans);font-weight:600;font-variant-numeric:tabular-nums}
.zosit .suma{position:relative;display:flex;justify-content:space-between;font-family:var(--sans);font-weight:700;font-size:20px;line-height:36px;color:var(--ink);margin-top:6px}
.zosit .suma::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:#2c2a26;transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--out)}
.zosit .suma b{font-variant-numeric:tabular-nums;opacity:0;transition:opacity .2s linear}
.zosit .poznamka{margin-top:12px}
.zosit.hraj li,.zosit.hotovo li{opacity:1;transform:none}
.zosit.hraj .suma::before,.zosit.hotovo .suma::before{transform:scaleX(1)}
.zosit.hraj .suma b,.zosit.hotovo .suma b{opacity:1}
.zosit.hraj li:nth-child(2){transition-delay:.12s}.zosit.hraj li:nth-child(3){transition-delay:.24s}
.zosit.hraj li:nth-child(4){transition-delay:.36s}.zosit.hraj li:nth-child(5){transition-delay:.48s}
.zosit.hraj .suma::before{transition-delay:.7s}
.zosit.hotovo *{transition:none!important}

/* Olive: šifrovacie koliesko sa otočí na odpoveď */
.koleso-obal{display:grid;justify-items:center;gap:16px}
.koleso{position:relative;width:min(320px,80vw);aspect-ratio:1;border-radius:50%;overflow:hidden}
.koleso>div{position:absolute;inset:0}
.koleso svg{width:100%;height:100%;display:block}
.koleso .vnutro{transform:rotate(58deg);will-change:transform;transition:transform 1.6s cubic-bezier(.3,1.25,.4,1)}
.koleso.hraj .vnutro,.koleso.hotovo .vnutro{transform:rotate(-41.538deg)}
.koleso.hotovo .vnutro{transition:none}
.sifra{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 12px;font-family:var(--sans)}
.sifra .slovo{display:flex;gap:4px}
.sifra .slovo span{display:grid;place-items:center;width:30px;height:40px;border-bottom:2px solid var(--ink);font-weight:700;font-size:18px;color:var(--ink)}
.sifra .slovo span i{font-style:normal;opacity:0;transform:translateY(4px);transition:opacity .25s var(--ease),transform .3s var(--out)}
.koleso-obal.hraj .sifra .slovo span i,.koleso-obal.hotovo .sifra .slovo span i{opacity:1;transform:none}
.koleso-obal.hotovo .sifra .slovo span i{transition:none}
.kod{font-family:var(--sans);font-size:15px;letter-spacing:.12em;color:var(--muted)}

/* STAV-57: bez skriptu je moment rovno v konečnom stave (kniha otvorená, riadky a súčet v zošite, rozlúštená
   veta); počiatočný stav nastaví až obchod.js triedou .pripravene, na jednu snímku bez prechodov */
.kniha:not(.pripravene) .obal{transform:none;transition:none}
.kniha:not(.pripravene) .list{transform:rotateY(-180deg);transition:none}
.zosit:not(.pripravene) li{opacity:1;transform:none;transition:none}
.zosit:not(.pripravene) .suma::before{transform:scaleX(1);transition:none}
.zosit:not(.pripravene) .suma b{opacity:1;transition:none}
.koleso-obal:not(.pripravene) .vnutro{transform:rotate(-41.538deg);transition:none}
.koleso-obal:not(.pripravene) .sifra .slovo span i{opacity:1;transform:none;transition:none}
.bez-prechodu,.bez-prechodu *,.bez-prechodu ::before{transition:none!important}

/* Balík, dôvera, otázky, poznámka */
.sekcia{padding:48px 0;border-top:1px solid var(--line)}
.dovera{display:grid;gap:0;margin:24px 0 0}
.dovera div{padding:16px 0;border-top:1px solid var(--line)}
.dovera dt{font-family:var(--sans);font-weight:700;color:var(--ink);font-size:16px}
.dovera dd{margin:4px 0 0;max-width:62ch}
.otazky{margin-top:16px;max-width:760px}
.otazky details{border-top:1px solid var(--line)}
.otazky details:last-child{border-bottom:1px solid var(--line)}
.otazky summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:56px;padding:12px 0;
  font-family:var(--sans);font-weight:600;font-size:17px;color:var(--ink)}
.otazky summary::-webkit-details-marker{display:none}
.otazky summary::after{content:"+";font-size:22px;line-height:1;color:var(--muted);transition:transform .2s var(--ease)}
.otazky details[open] summary::after{transform:rotate(45deg)}
.otazky details p{padding:0 0 16px;max-width:62ch}
.list-od{max-width:640px}
.list-od blockquote{margin:16px 0 0;font-size:clamp(19px,4.4vw,23px);line-height:1.5;color:var(--ink)}
.list-od .podpis{margin-top:16px;font-style:italic;font-size:20px;color:var(--ink)}

/* Päta (povinná) */
.pata{border-top:1px solid var(--line);padding:32px 0 48px;font-family:var(--sans);font-size:14px;line-height:1.6;color:var(--muted)}
.pata p+p{margin-top:8px}
.pata .ai{color:var(--ink);font-weight:600}
.pata nav{display:flex;flex-wrap:wrap;gap:0 16px;margin-top:8px}
.pata nav a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;color:var(--ink)}

@media (min-width:860px){
  body{font-size:18px}
  .hlava{padding:48px 0 72px}
  .hlava .wrap{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:64px;align-items:center}
  .tvar{height:auto;aspect-ratio:4/5}
  .hlava .dalej .btn{display:inline-flex;min-width:280px}
  .obchod,.moment,.sekcia{padding:80px 0}
  .obchod-mriezka{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:64px;align-items:start}
  .nahlad-velky{display:block;position:sticky;top:24px;margin:0}
  .nahlad-velky img{width:100%;border-radius:var(--radius);border:1px solid var(--line);background:#fff}
  /* strana knihy na výšku (600x848) by pri šírke stĺpca mala okolo 820 px; strop ju drží v okne */
  .nahlad-velky img[width="600"]{width:auto;max-width:100%;height:auto;max-height:min(72vh,640px)}
  .nahlad-velky figcaption{margin-top:12px}
  .moment .wrap{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:64px}
  .dovera{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px}
}
@media (prefers-reduced-motion:reduce){
  .btn,.volba,.volba .znak{transition:none}
}