/* =========================================================
   Creona videá — knižnica, série, prehrávač
   Farby a písma berie z témy (premenné --brown, --serif…),
   takže sa plugin prispôsobí ktorémukoľvek webu Creona.
   ========================================================= */

.creona-serie{
  /* Rovnomerné stĺpce namiesto troch obrovských kariet na stred —
     pri piatich programoch to inak vyzerá ako nedorobené. */
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:22px;
  justify-content:start;
  /* Nech dlaždice nezačínajú hneď pod podnadpisom sekcie. */
  margin-top:38px
}
.creona-videa{margin-top:38px}
.creona-filter + .creona-videa{margin-top:22px}
.creona-seria{
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
  background:var(--paper,#fff);border:1px solid rgba(121,91,51,.12);
  border-radius:20px;overflow:hidden;transition:.28s
}
.creona-seria:hover{transform:translateY(-3px);box-shadow:0 14px 40px rgba(121,91,51,.1)}
.creona-seria-obr{display:block;position:relative;padding-top:56%;background:var(--cream,#ECDFC1)}
.creona-seria-obr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Program bez obrázka nemá vyzerať ako chyba — dostane tichý farebný podklad
   so značkou. Odtiene sa striedajú, aby dlaždice vedľa seba neboli rovnaké. */
.creona-seria-obr.je-prazdna::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,var(--cream,#ECDFC1),#e0d3b4)
}
.creona-seria-obr.je-prazdna::after{
  content:"";position:absolute;inset:0;opacity:.22;
  background:no-repeat center/38% url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23795B33' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M32 12c6 6 9 12 9 18s-3 12-9 18c-6-6-9-12-9-18s3-12 9-18z'/%3E%3Cpath d='M32 48c-9 0-16-5-16-11 0-3 2-5 5-5 4 0 7 4 11 10 4-6 7-10 11-10 3 0 5 2 5 5 0 6-7 11-16 11z'/%3E%3C/svg%3E")
}
.creona-seria:nth-child(3n+2) .creona-seria-obr.je-prazdna::before{background:linear-gradient(135deg,#e6e2cf,#d5d0b4)}
.creona-seria:nth-child(3n+3) .creona-seria-obr.je-prazdna::before{background:linear-gradient(135deg,#efe2d3,#e3cdb6)}
.creona-seria-telo{display:block;padding:22px 24px 24px}
.creona-seria-telo h3{margin:0 0 8px;font-family:var(--serif,serif);font-weight:400;font-size:1.25rem;color:var(--brown,#795B33)}
.creona-seria-telo p{margin:0 0 12px;font-size:.93rem;color:var(--muted,#6b6b6b)}
/* Vzťah medzi programom a jeho časťami — aby dve podobné dlaždice
   vedľa seba nevyzerali ako dvakrát to isté. */
.creona-seria-vztah{
  display:block;margin:0 0 8px;font-family:var(--sans,sans-serif);
  font-size:.76rem;color:var(--muted,#6b6b6b);opacity:.85
}
.creona-seria-pocet{
  font-family:var(--sans,sans-serif);font-size:.72rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--terra,#B4693B)
}
.creona-seria.je-odomknuta .eyebrow{color:var(--sage,#858160)}

/* `auto-fill`, nie `auto-fit`: keď na poslednej strane ostanú tri dlaždice,
   `auto-fit` by prázdne stĺpce zrušil a dlaždice roztiahol cez celú šírku.
   Pri plnej strane sa obe správajú rovnako, takže sa nič nemení. */
.creona-videa{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:22px
}
.creona-video{
  position:relative;display:flex;flex-direction:column;
  background:var(--paper,#fff);border:1px solid rgba(121,91,51,.12);
  border-radius:16px;overflow:hidden;transition:.28s
}
/* Filter skrýva dlaždice atribútom hidden — vlastný display ho musí pustiť. */
.creona-video[hidden],.creona-filter-prazdno[hidden]{display:none}
.creona-video:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(121,91,51,.1)}
.creona-video-odkaz{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.creona-video-obr{display:block;position:relative;padding-top:56%;background:var(--cream,#ECDFC1)}
.creona-video-obr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* prehrať — kruh v strede */
.creona-video-hrat{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center
}
.creona-video-hrat::before{
  content:"";width:62px;height:62px;border-radius:50%;
  background:#FCF8EF;box-shadow:0 8px 24px rgba(43,34,20,.34);
  transition:transform .25s ease
}
.creona-video-hrat::after{
  content:"";position:absolute;
  border-left:19px solid var(--terra,#B4693B);
  border-top:12px solid transparent;border-bottom:12px solid transparent;
  margin-left:5px;transition:transform .25s ease
}
.creona-video:hover .creona-video-hrat::before,
.creona-video:hover .creona-video-hrat::after{transform:scale(1.07)}

/* zámok — odsadený štítok v ľavom hornom rohu */
/* Zámok sedí tam, kde je pri prehrateľnom videu tlačidlo „prehrať" —
   oko tak rozdiel nájde bez čítania. Výzva stojí hneď pod ním. */
.creona-video-stred{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;padding:14px
}
.creona-video-zamok{
  display:inline-flex;align-items:center;justify-content:center;
  width:62px;height:62px;border-radius:50%;
  background:#FCF8EF;color:var(--brown,#795B33);box-shadow:0 8px 24px rgba(43,34,20,.34);
  transition:transform .25s ease
}
.creona-video-zamok svg{fill:currentColor;display:block;width:28px;height:28px}
.creona-video:hover .creona-video-zamok{transform:scale(1.07)}

.creona-video.je-zamknute .creona-video-obr img{filter:grayscale(.75) brightness(.62)}
.creona-video-telo{display:block;padding:16px 18px 18px}
.creona-video-telo h3{margin:0 0 6px;font-family:var(--serif,serif);font-weight:400;font-size:1.05rem;color:var(--brown,#795B33)}
.creona-ikonky{display:flex;align-items:center;gap:7px;margin:0 0 7px;color:var(--gold,#AB8D59)}
.creona-ikonky .creona-ikona{flex:none}
.creona-seria-telo h3 .creona-ikona{vertical-align:-3px;margin-right:7px;color:var(--gold,#AB8D59)}
/* Dĺžka pri názve sa ukazuje len na telefóne (pravidlo nižšie).
   Obal `creona-video-linka` na počítači nerobí nič. */
.creona-video-linka{display:contents}
.creona-video-min{display:none}
.creona-video-popis{
  display:block;font-family:var(--sans,sans-serif);font-size:.82rem;line-height:1.45;
  color:var(--muted,#6b6b6b);margin:0 0 10px
}
.creona-video-meta{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-family:var(--sans,sans-serif);font-size:.75rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted,#6b6b6b)
}
/* Dĺžka patrí do pravého dolného rohu dlaždice — nech je stále na
   tom istom mieste, aj keď vľavo nič nestojí. */
.creona-video-dlzka{margin-left:auto;white-space:nowrap}
.creona-video-stav:empty{display:none}

/* srdiečko a odcvičené */
.creona-akcie{display:flex;gap:8px;padding:0 18px 16px;margin-top:auto}
.creona-akcie-dlazdica{padding-top:2px}
.creona-akcia{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  border:1px solid rgba(121,91,51,.18);background:transparent;color:var(--muted,#6b6b6b);
  border-radius:999px;padding:6px 12px;font-family:var(--sans,sans-serif);font-size:.78rem;
  line-height:1;transition:.2s
}
.creona-akcia:hover{border-color:var(--sand,#D8A77A);color:var(--brown,#795B33)}
.creona-akcia svg{fill:currentColor;display:block;width:16px;height:16px}
.creona-srdce.je-aktivna{color:var(--terra,#B4693B);border-color:rgba(180,105,59,.45);background:rgba(180,105,59,.08)}
.creona-cvik.je-aktivna{color:var(--sage,#858160);border-color:rgba(133,129,96,.45);background:rgba(133,129,96,.10)}
.creona-akcia.je-chyba{border-color:#c0392b;color:#c0392b}
.creona-pocet{font-weight:600;font-variant-numeric:tabular-nums}
.creona-akcie-stranka{padding:0;margin:0 0 26px}
.creona-akcie-stranka .creona-akcia{padding:9px 16px;font-size:.85rem}

/* filter nad zoznamom */
.creona-filter{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:46px 0 22px;
  padding:14px 16px;background:var(--paper,#fff);
  border:1px solid rgba(121,91,51,.12);border-radius:16px
}
.creona-filter input[type=search],.creona-filter select{
  border:1px solid rgba(121,91,51,.18);border-radius:999px;padding:9px 16px;
  font-family:var(--sans,sans-serif);font-size:.9rem;background:#fff;color:var(--ink,#4B3A22);
  min-width:180px
}
/* Filtrovanie je hlavná akcia nad zoznamom — nech je vidieť. Terakota
   je jediná výrazná farba značky, ktorá sa inde v zozname nepoužíva. */
.creona-filter .creona-vyber-serie,
.creona-filter .cvyber-tlacidlo{
  background:var(--terra,#B4693B);border-color:var(--terra,#B4693B);color:#FFF6EC;font-weight:500
}
.creona-filter .creona-vyber-serie option{background:var(--paper,#FCF8EF);color:var(--ink,#4B3A22)}
.creona-filter .cvyber-tlacidlo::after{border-color:#FFF6EC}
.creona-filter .cvyber-tlacidlo:hover{background:var(--brown-mid,#8E6E42);border-color:var(--brown-mid,#8E6E42)}
.creona-filter input[type=search]:focus,.creona-filter select:focus{
  outline:2px solid var(--sand,#D8A77A);outline-offset:1px
}
/* Hľadanie a výbery si berú, koľko potrebujú — na počítači to vyzerá ako
   predtým, na telefóne sa vďaka tomu zmestia do jedného riadka. */
.creona-filter-hladanie{flex:0 1 auto;min-width:0}
.creona-filter-seria,.creona-filter .cvyber{flex:0 1 auto;min-width:0}
.creona-filter input[type=search]{width:100%}
.creona-filter-stavy{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto}
.creona-stav{
  cursor:pointer;border:1px solid rgba(121,91,51,.18);background:transparent;
  color:var(--muted,#6b6b6b);border-radius:999px;padding:8px 14px;
  font-family:var(--sans,sans-serif);font-size:.8rem;transition:.2s
}
.creona-stav:hover{border-color:var(--sand,#D8A77A);color:var(--brown,#795B33)}
.creona-stav.je-aktivna{background:var(--brown,#795B33);border-color:var(--brown,#795B33);color:var(--paper,#FCF8EF)}
/* Tlačidlo so značkou — srdiečko a fajka. Kruh, nie kapsula, nech je
   na prvý pohľad jasné, že nejde o slovo. */
.creona-stav--znacka{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;padding:0;flex:0 0 auto
}
.creona-stav--znacka .creona-ikona{display:block;line-height:0}
.creona-stav--znacka svg{display:block;fill:currentColor}
.creona-filter-prazdno{margin:18px 0 0;color:var(--muted,#6b6b6b);text-align:center}
/* ---------------------------------------------------------------------
   Filter na telefóne — dva riadky, oba cez celú šírku
   ---------------------------------------------------------------------
   Prvý riadok: hľadanie a Filtrovať. Druhý: stavy. Obidva sa roztiahnu
   na celú šírku lišty, takže nič nevisí v polovici riadka.
   --------------------------------------------------------------------- */
@media(max-width:640px){
  .creona-filter{gap:8px;padding:12px 14px}
  .creona-filter-hladanie{flex:1 1 90px}
  .creona-filter input[type=search]{padding:9px 12px;min-width:0}
  .creona-filter-seria,.creona-filter .cvyber{flex:0 0 auto}
  .creona-filter select{min-width:0;padding:9px 14px}
  /* Stavy: Všetko a Odomknuté sa rozťahujú, značky si držia kruh. */
  .creona-filter-stavy{flex:1 0 100%;margin-left:0;flex-wrap:nowrap;gap:6px}
  .creona-stav{flex:1 1 auto;padding:8px 6px;font-size:.78rem;white-space:nowrap;text-align:center}
  .creona-stav--znacka{flex:0 0 38px}
}

/* ---------------------------------------------------------------------
   Vysvetlivka pri značke
   ---------------------------------------------------------------------
   Len na počítači — na dotykovom zariadení sa nabehnúť myšou nedá
   a bublina by sa po klepnutí len zasekla cez obsah.
   --------------------------------------------------------------------- */
@media(hover:hover) and (pointer:fine){
  [data-tip]{position:relative}
  [data-tip]::after{
    content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 8px);
    transform:translateX(-50%);z-index:5;
    background:var(--brown,#795B33);color:var(--paper,#FCF8EF);
    font-family:var(--sans,sans-serif);font-size:.72rem;line-height:1.3;
    letter-spacing:normal;text-transform:none;white-space:nowrap;
    padding:6px 10px;border-radius:8px;
    opacity:0;visibility:hidden;transition:opacity .15s ease;pointer-events:none
  }
  [data-tip]:hover::after,[data-tip]:focus-visible::after{opacity:1;visibility:visible}
  /* Dlaždica má orezaný presah, takže bublina nesmie vyčnievať bokom —
     rastie od ľavého okraja tlačidla doprava, nie na obe strany. */
  .creona-video [data-tip]::after{left:0;transform:none;max-width:230px;white-space:normal;text-align:left}
}

/* prehrávač */
.creona-prehravac{margin:0 0 28px;border-radius:var(--r,18px);overflow:hidden;background:#1b1710}
.creona-prehravac video,.creona-prehravac iframe{display:block;width:100%;aspect-ratio:16/9;border:0}

/* Nadpis zámku nad ukážkou. Pozadie nemá — to patrí ponuke pod videom,
   tu by len odrezalo nadpis od prehrávača, ku ktorému sa viaže. */
.creona-zamok-hlava{text-align:center;margin:0 0 22px}
.creona-zamok-hlava h2{margin:0}

/* zámok */
.creona-zamok{
  background:var(--cream,#ECDFC1);border-radius:20px;padding:34px 36px;margin:0 0 26px;text-align:center
}
.creona-zamok h2{margin:0 0 .4em}
.creona-zamok p{margin:0 0 1em}
.creona-zamok-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:0}
.creona-zamok-jedno{text-align:center;margin:0 0 26px}
.creona-zamok-uvod{margin:0 0 22px;color:var(--muted,#6b6b6b)}
.creona-zamok-uz{margin:22px 0 0;font-size:.92rem;color:var(--muted,#6b6b6b)}
.creona-moznosti{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;
  text-align:left;margin:0
}
.creona-moznost{
  display:flex;flex-direction:column;background:var(--paper,#FCF8EF);
  border:1px solid rgba(121,91,51,.14);border-radius:16px;padding:22px 22px 24px
}
.creona-moznost.je-hlavna{border-color:var(--terra,#B4693B);box-shadow:0 8px 26px rgba(180,105,59,.12)}
.creona-moznost h3{margin:2px 0 8px;font-family:var(--serif,serif);font-weight:400;font-size:1.12rem;color:var(--brown,#795B33)}
.creona-moznost-cena{margin:0 0 10px;font-family:var(--serif,serif);font-size:1.45rem;color:var(--gold,#AB8D59)}
.creona-moznost-cena del{opacity:.55;font-size:.7em;margin-right:.35em}
.creona-moznost-popis{margin:0 0 18px;font-size:.9rem;color:var(--muted,#6b6b6b);line-height:1.6}
.creona-moznost .btn{margin-top:auto;align-self:flex-start}
.creona-seria-stav{font-size:.95rem;color:var(--muted,#6b6b6b)}

/* zoznam prístupov v účte */
.creona-pristupy{list-style:none;margin:0 0 18px;padding:0}
.creona-pristupy li{padding:10px 0;border-bottom:1px solid rgba(121,91,51,.12)}
.creona-pristupy li:last-child{border-bottom:0}

/* prepínač kvality */
.creona-prehravac{position:relative}
.creona-kvalita{position:absolute;right:12px;top:12px;z-index:2;font-family:var(--sans,sans-serif)}
.creona-kvalita-tlacidlo{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;border:0;
  background:rgba(27,23,16,.62);color:#FCF8EF;border-radius:999px;
  padding:7px 13px;font-size:.78rem;line-height:1;backdrop-filter:blur(3px);
  transition:background .2s ease
}
.creona-kvalita-tlacidlo:hover{background:rgba(27,23,16,.82)}
.creona-kvalita-tlacidlo svg{fill:currentColor;display:block}
.creona-kvalita-ponuka{
  list-style:none;margin:8px 0 0;padding:6px;position:absolute;right:0;min-width:150px;
  background:rgba(27,23,16,.94);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.28)
}
.creona-kvalita-ponuka li{margin:0;padding:0}
.creona-kvalita-ponuka li::before{display:none}
.creona-kvalita-ponuka button{
  display:block;width:100%;text-align:left;cursor:pointer;border:0;background:transparent;
  color:#FCF8EF;border-radius:8px;padding:9px 12px;font-size:.85rem;font-family:inherit
}
.creona-kvalita-ponuka button:hover{background:rgba(252,248,239,.12)}
.creona-kvalita-ponuka button.je-aktivna{background:var(--terra,#B4693B)}
@media(max-width:520px){
  .creona-kvalita{right:8px;top:8px}
  .creona-kvalita-tlacidlo{padding:6px 10px;font-size:.72rem}
}

/* krátka ukážka nad zamknutým videom */
.creona-ukazka{margin:0 0 26px}
.creona-ukazka .creona-prehravac{margin:0 0 10px}
.creona-ukazka-popis{
  margin:0;text-align:center;font-family:var(--sans,sans-serif);
  font-size:.85rem;color:var(--muted,#6b6b6b)
}

/* plagát zamknutého videa bez ukážky */
.creona-plagat{position:relative;margin:0 0 26px;border-radius:18px;overflow:hidden;background:var(--cream,#ECDFC1)}
.creona-plagat img{display:block;width:100%;height:auto}
.creona-plagat-znak{
  position:absolute;inset:auto 0 0 0;margin:0;padding:14px 18px;
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:linear-gradient(to top,rgba(27,23,16,.72),rgba(27,23,16,0));
  color:#FCF8EF;font-family:var(--sans,sans-serif);font-size:.85rem;
  letter-spacing:.06em;text-transform:uppercase
}
.creona-zamka{
  width:13px;height:16px;border-radius:3px;background:currentColor;position:relative;display:inline-block
}
.creona-zamka::before{
  content:"";position:absolute;left:50%;top:-8px;width:9px;height:10px;transform:translateX(-50%);
  border:2px solid currentColor;border-bottom:0;border-radius:5px 5px 0 0
}

/* „Všetky" — rozbalenie zvyšku kategórie */
.creona-viac-obal{margin:22px 0 0;text-align:center}

/* stránkovanie zoznamu videí */
.creona-strany{
  display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:26px 0 0
}
.creona-strany[hidden]{display:none}
.creona-strana{
  min-width:38px;padding:7px 11px;cursor:pointer;border-radius:999px;
  border:1px solid rgba(121,91,51,.18);background:transparent;
  color:var(--muted,#6b6b6b);font-family:var(--sans,sans-serif);font-size:.85rem;
  transition:border-color .2s ease,color .2s ease,background-color .2s ease
}
.creona-strana:hover:not(:disabled){border-color:var(--sand,#D8A77A);color:var(--brown,#795B33)}
.creona-strana.je-aktivna{
  background:var(--brown,#795B33);border-color:var(--brown,#795B33);color:#FCF8EF
}
.creona-strana:disabled{opacity:.35;cursor:default}
.creona-strany-pocet{
  align-self:center;padding:0 10px;
  color:var(--muted,#6b6b6b);font-family:var(--sans,sans-serif);
  font-size:.85rem;font-variant-numeric:tabular-nums;white-space:nowrap
}

/* popis pod prehrávačom */
.video-popis{margin:26px 0 0}
.video-popis > :first-child{margin-top:0}

/* skryté prvky musia ostať skryté aj pri vlastnom display */
.creona-filter[hidden],
.creona-viac-obal[hidden],
.creona-video[hidden]{display:none!important}

/* WooCommerce nasadzuje `.woocommerce-page img{height:auto}` a keďže má
   rovnakú váhu a načíta sa neskôr, prebilo by nám výšku v dlaždiciach.
   Preto tu rovnaké pravidlá zopakujeme s vyššou váhou. */
.creona-serie .creona-seria-obr img,
.creona-videa .creona-video-obr img{
  position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover
}

/* ---------- štítky ----------
   Štítok varuje, nefiltruje. Preto vyzerá ako poznámka, nie ako tlačidlo. */
.creona-stitky{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px;padding:0}
.creona-stitok{
  display:inline-block;border:1px solid rgba(121,91,51,.2);border-radius:999px;
  padding:3px 10px;font-family:var(--sans,sans-serif);font-size:.72rem;
  letter-spacing:.02em;color:var(--muted,#6b6b6b);background:transparent;line-height:1.5
}
.creona-stitok.je-varovny{
  border-color:rgba(180,105,59,.35);color:var(--terra,#B4693B);background:rgba(180,105,59,.07)
}
.creona-stitky.na-dlazdici{margin:2px 0 8px}
.creona-stitky.nad-prehravacom{margin:0 0 14px}

/* vysvetľujúci riadok pod filtrom */
.creona-filter-poznamka{
  flex:0 0 100%;margin:2px 0 0;font-size:.8rem;color:var(--muted,#6b6b6b);line-height:1.5
}
.creona-filter-poznamka[hidden]{display:none}

/* ---------- potvrdenie pred prehratím ---------- */
.creona-potvrdenie{
  background:var(--cream,#ECDFC1);border-radius:var(--r,18px);
  padding:24px 26px;margin:0 0 28px
}
.creona-potvrdenie-riadok{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.creona-potvrdenie-riadok input{margin-top:.25em;flex:0 0 auto}
.creona-potvrdenie p{margin:14px 0 0}
.creona-potvrdenie .btn[disabled]{opacity:.45;cursor:not-allowed}
.creona-za-potvrdenim[hidden]{display:none}

/* ---------- texty na stránke videa ---------- */
.creona-text-blok{margin:0 0 26px}
.creona-text-blok h2{font-size:1.15rem;margin:0 0 .5em}
.creona-text-blok ul{margin:0;padding-left:1.1em}
.creona-text-blok li{margin:0 0 .35em}

.creona-pokyny{
  border:1px solid rgba(121,91,51,.16);border-radius:var(--r,18px);
  padding:14px 18px;margin:0 0 28px;background:var(--paper,#fff)
}
.creona-pokyny summary{
  cursor:pointer;font-family:var(--sans,sans-serif);font-size:.9rem;
  color:var(--brown,#795B33);list-style-position:inside
}
.creona-pokyny summary:focus-visible{outline:2px solid var(--sand,#D8A77A);outline-offset:2px}
.creona-pokyny-telo{margin-top:12px;font-size:.92rem;line-height:1.7}

/* cena na zamknutej dlaždici — hovorí viac než slovo „zamknuté" */
.creona-video-cena{color:var(--gold,#AB8D59);font-weight:500}
.creona-video-cena del{opacity:.55;font-size:.86em;margin-right:.3em}
.creona-video-cena ins{text-decoration:none}
.creona-prazdne{margin:0;color:var(--muted,#6b6b6b)}

/* ---------- vlastný rozbaľovač vo filtri ----------
   Otvorený natívny `<select>` si kreslí operačný systém a jeho modrý pruh
   sa z CSS ovplyvniť nedá. Zoznam si preto kreslíme sami; pôvodný select
   ostáva v stránke ako zdroj pravdy, len ho nevidno. */
.cvyber{position:relative;display:block}
.cvyber select{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.cvyber-tlacidlo{
  display:flex;align-items:center;gap:10px;width:100%;
  border:1px solid rgba(121,91,51,.18);border-radius:999px;padding:9px 38px 9px 16px;
  font-family:var(--sans,sans-serif);font-size:.9rem;background:#fff;color:var(--ink,#4B3A22);
  text-align:left;cursor:pointer;min-width:180px;position:relative
}
.cvyber-tlacidlo::after{
  content:"";position:absolute;right:16px;top:calc(50% - 3px);
  width:7px;height:7px;border-right:1.6px solid var(--brown,#795B33);
  border-bottom:1.6px solid var(--brown,#795B33);transform:rotate(45deg);transition:transform .2s
}
.cvyber.je-otvoreny .cvyber-tlacidlo::after{transform:rotate(-135deg);top:calc(50% - 1px)}
.cvyber-tlacidlo:hover{border-color:var(--sand,#D8A77A)}
.cvyber-tlacidlo:focus-visible{outline:2px solid var(--sand,#D8A77A);outline-offset:1px}

.cvyber-zoznam{
  position:absolute;z-index:20;top:calc(100% + 6px);left:0;min-width:100%;
  margin:0;padding:6px;list-style:none;max-height:320px;overflow-y:auto;
  background:var(--paper,#FCF8EF);border:1px solid rgba(121,91,51,.16);
  border-radius:16px;box-shadow:0 18px 44px rgba(121,91,51,.16)
}
.cvyber-zoznam[hidden]{display:none}
.cvyber-zoznam li{
  margin:0;padding:9px 14px;border-radius:999px;cursor:pointer;
  font-family:var(--sans,sans-serif);font-size:.9rem;color:var(--ink,#4B3A22);
  white-space:nowrap
}
/* téma dáva položkám zoznamu ozdobnú bodku — tu ju nechceme */
.cvyber-zoznam li::before{display:none}
.cvyber-zoznam li.je-pod{padding-left:30px;color:var(--muted,#6b6b6b)}
.cvyber-zoznam li.je-pod::after{
  content:"";position:absolute;margin-left:-18px;margin-top:.62em;
  width:8px;height:1px;background:currentColor;opacity:.5
}
.cvyber-zoznam li:hover{background:var(--cream,#ECDFC1)}
.cvyber-zoznam li.je-vybrana{background:var(--brown,#795B33);color:var(--paper,#FCF8EF)}
.cvyber-zoznam li.je-vybrana.je-pod{color:var(--paper,#FCF8EF)}

@media(max-width:640px){
  .cvyber-tlacidlo{min-width:0}
}

/* Spodný riadok dlaždice — srdiečko, fajka a vpravo dĺžka.
   Dĺžka bola predtým vyššie samostatne a na mobile to vyzeralo,
   akoby k dlaždici nepatrila. */
.creona-video-spodok{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:0 18px 16px;margin-top:auto;min-height:40px
}
.creona-video-spodok .creona-akcie{padding:0;margin:0}
.creona-video-spodok .creona-video-dlzka{
  margin-left:auto;white-space:nowrap;
  font-family:var(--sans,sans-serif);font-size:.75rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted,#6b6b6b)
}

/* Podnadpis na dlaždici — nahradil rad piktogramov. */
.creona-video-podnadpis{
  display:block;font-family:var(--sans,sans-serif);font-size:.8rem;line-height:1.45;
  color:var(--gold,#AB8D59);margin:0 0 8px
}

/* Cena zamknutého videa — má byť vidieť na prvý pohľad, preto je veľká,
   v terakotovej a vľavo dole v spodnom riadku dlaždice. */
.creona-video-spodok .creona-video-cena{
  margin-right:auto;font-family:var(--serif,serif);font-size:1.45rem;line-height:1;
  color:var(--terra,#B4693B);letter-spacing:0;text-transform:none;font-weight:500
}
.creona-video-spodok .creona-video-cena.je-zadarmo{color:var(--salvia,#858160)}
.creona-video-spodok .creona-video-cena del{opacity:.5;font-size:.72em;margin-right:.3em}
.creona-video-spodok .creona-video-cena ins{text-decoration:none}
/* Dĺžka patrí vždy do pravého dolného rohu — aj keď vľavo nič nestojí. */
.creona-video-spodok .creona-video-dlzka{margin-left:auto}

/* Výzva pod zámkom — čierne písmo na bielom, nech sa dá prečítať
   aj cez tmavý obrázok. */
.creona-video-vyzva{
  display:block;max-width:90%;padding:9px 13px;border-radius:10px;
  font-family:var(--sans,sans-serif);font-size:.74rem;line-height:1.4;
  color:var(--ink,#4B3A22);text-align:center;
  background:rgba(252,248,239,.94);box-shadow:0 6px 18px rgba(43,34,20,.25)
}

/* Veta „Už si ho kúpila?" potrebuje odstup od kariet. */
.creona-zamok-uz{margin-top:26px}

/* ---------- ukážka v okne s ponukou ---------- */
.creona-okno-ukazka{
  display:grid;grid-template-columns:minmax(0,420px) 1fr;gap:26px;align-items:center;text-align:left;
  background:var(--paper,#FCF8EF);border:1px solid rgba(121,91,51,.14);border-radius:16px;
  padding:16px;margin:16px 0 22px
}
.creona-okno-ukazka[hidden]{display:none}
.creona-okno-prehravac{border-radius:12px;overflow:hidden;background:#2B2214;line-height:0}
.creona-okno-prehravac video{display:block;width:100%;aspect-ratio:16/9;background:#2B2214}
.creona-okno-stitok{
  display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:100px;
  background:var(--salvia,#858160);color:#FCF8EF;font-family:var(--sans,sans-serif);
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600
}
.creona-okno-ukazka-text h3{
  margin:12px 0 6px;font-family:var(--serif,serif);font-weight:400;font-size:1.4rem;color:var(--brown,#795B33)
}
.creona-okno-ukazka-text p{
  margin:0;font-family:var(--sans,sans-serif);font-size:.86rem;line-height:1.6;color:var(--muted,#8A7658)
}
.creona-okno-ukazka-meta{
  margin-top:12px!important;font-size:.72rem!important;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gold,#AB8D59)!important
}
.creona-okno-ukazka-meta:empty{display:none}
@media (max-width:760px){
  .creona-okno-ukazka{grid-template-columns:1fr;gap:16px}
}

/* ---------- okno s ponukou ---------- */
.creona-okno{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px}
.creona-okno[hidden]{display:none}
.creona-okno-plachta{position:absolute;inset:0;background:rgba(43,34,20,.55);backdrop-filter:blur(2px)}
.creona-okno-telo{
  position:relative;z-index:1;width:min(980px,100%);max-height:88vh;overflow-y:auto;
  background:var(--cream,#ECDFC1);border-radius:var(--r,20px);padding:38px 34px 30px;text-align:center;
  box-shadow:0 30px 80px rgba(43,34,20,.3)
}
/* Nadpis stojí pod ukážkou — pozri poradie v `creona_videa_okno()`. */
.creona-okno-telo h2{margin:2px 0 22px}
.creona-okno-x{
  position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:999px;
  border:1px solid rgba(121,91,51,.2);background:var(--paper,#FCF8EF);color:var(--brown,#795B33);
  cursor:pointer;display:grid;place-items:center
}
.creona-okno-x::before{content:"\00d7";font-size:1.25rem;line-height:1}
.creona-okno-x:hover{background:#fff}
.creona-okno .creona-moznosti{margin-top:0}
.creona-okno-pozn{
  margin:22px auto 0;max-width:640px;font-size:.78rem;line-height:1.55;
  color:var(--muted,#6b6b6b);font-style:italic
}
body.ma-okno{overflow:hidden}

/* stužka „Najvýhodnejšie" nad zvýraznenou kartou */
.creona-moznost{position:relative}
.creona-moznost-stuzka{
  position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  background:var(--terra,#B4693B);color:#FCF8EF;border-radius:999px;
  padding:4px 14px;font-family:var(--sans,sans-serif);font-size:.68rem;
  letter-spacing:.1em;text-transform:uppercase;white-space:nowrap
}
.creona-moznost.je-hlavna{margin-top:12px}

/* zamknutá dlaždica s cenou sa otvára do okna — nech je to cítiť */
.creona-video.je-zamknute[data-kupa] .creona-video-odkaz{cursor:pointer}

/* ---------------------------------------------------------------------
   Knižnica na telefóne — zoznam v riadkoch
   ---------------------------------------------------------------------
   Veľká dlaždica ukázala na telefóne jeden a pol cviku. V riadkoch ich je
   sedem a podnadpis ostáva. Značka vpravo: srdiečko nad fajkou, obe pri
   pravom okraji, nech sa dajú trafiť palcom bez otvárania cviku.

   Je to len iné rozloženie tých istých prvkov — na počítači ostávajú
   dlaždice, aké boli.
   --------------------------------------------------------------------- */
@media(max-width:640px){
  .creona-videa{grid-template-columns:1fr;gap:0;margin-top:20px}

  .creona-video{
    display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;
    gap:10px;padding:9px 0;
    background:transparent;border:0;border-bottom:1px solid rgba(121,91,51,.14);
    border-radius:0;box-shadow:none;transform:none
  }
  .creona-video:hover{transform:none;box-shadow:none}

  .creona-video-odkaz{
    display:grid;grid-template-columns:92px minmax(0,1fr);gap:11px;align-items:center;min-width:0
  }
  .creona-video-obr{width:92px;aspect-ratio:16/10;border-radius:9px;margin:0}
  .creona-video-hrat{transform:scale(.62)}
  .creona-video-stred{transform:scale(.72)}
  .creona-video-vyzva{display:none}

  .creona-video-telo{display:flex;flex-direction:column;padding:0;gap:2px;min-width:0}
  .creona-video-telo h3{
    font-size:.95rem;line-height:1.25;margin:0;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap
  }
  /* Podnadpis a dĺžka na jednej linke; keď sa nezmestí, skráti sa. */
  .creona-video-linka{
    display:block;min-width:0;font-size:.78rem;line-height:1.35;color:var(--muted,#6b6b6b);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap
  }
  .creona-video-podnadpis{display:inline;font-size:inherit}
  .creona-video-min{display:inline}
  .creona-video-podnadpis + .creona-video-min::before{content:" · "}
  /* Štítky a popis sa do riadka nezmestia — v zozname ide o názov. */
  .creona-video .creona-stitky,
  .creona-video-popis{display:none}

  /* Pravý stĺpec: značky pod sebou, zarovnané vpravo. */
  .creona-video-spodok{
    flex-direction:column;align-items:flex-end;justify-content:center;
    gap:6px;padding:0;border:0;margin:0;max-width:74px
  }
  .creona-video-spodok .creona-akcie{flex-direction:column;gap:6px;margin:0}
  .creona-video-dlzka{display:none}
  /* Cena aj „Zadarmo" sú v riadku len poznámka vpravo, nie nadpis. */
  .creona-video-spodok .creona-video-cena{
    font-family:var(--sans,sans-serif);font-size:.76rem;font-weight:600;
    line-height:1.3;text-align:right
  }

  /* Stránkovanie ostáva aj tu — osem na stranu, pod nimi šípky. */
  .creona-strany{margin:18px 0 0}
}