/* Geist, variabilní řez. Vercel a basement.studio, licence SIL Open Font
   License 1.1, uložená vedle písma v assets/pismo/OFL-Geist.txt. Soubor leží
   na našem serveru, takže web nedělá žádný požadavek ven. Jeden řez pokryje
   všechny tloušťky od 100 do 900. */
@font-face{font-family:"Geist";font-style:normal;font-weight:100 900;
  font-display:swap;src:url(pismo/Geist-Variable.woff2) format("woff2")}

/* ===========================================================================
   Rozvržení s lištou nahoře. Načítá se za vzhled.css a přepisuje z něj to,
   co se změnilo. Zbytek, tedy životopis, lightbox a drobné prvky, zůstává tam.

   VŠECHNY MEZERY STOJÍ NA JEDNOM KROKU: 8 px. Nic se nepíše "od oka",
   každý odstup je některý z --g*. Když je něco nalepené, zvedne se krok,
   ne jedno pravidlo. Okraj stránky je --okraj a je to jediná vodorovná míra;
   stránka jde přes celou šířku okna, žádný strop uprostřed.
   =========================================================================== */
:root{
  --g:8px; --g2:16px; --g3:24px; --g4:32px; --g6:48px; --g8:64px; --g12:96px; --g16:128px;
  --okraj:var(--g4);
  --grotesk:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  /* Text se nemá táhnout přes celou obrazovku, i když se stránka táhne. */
  --text-s:760px; --obraz-s:960px;
  /* Bloky, které mají v editoru vybrané písmo z palety, berou tyhle proměnné.
     Bez jejich přepsání by na stránce Info naskočila antikva uprostřed Geistu. */
  --wp--preset--font-family--serif:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --wp--preset--font-family--sans:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  /* Teplá šedobílá místo čistě bílé. Papír, ne zářivka. */
  --papir:#f2f1ed; --text:#141413; --seda:#73726b; --linka:#dcdbd4; --tlum:#e8e7e1; --modra:#0000ff;
  --wp--preset--color--papir:#f2f1ed;
  --wp--preset--color--text:#141413;
  --wp--preset--color--seda:#73726b;
  --wp--preset--color--linka:#dcdbd4;
  --wp--preset--color--tlum:#e8e7e1;
}
/* Tmavý režim. Ve vzhled.css byl jen pod prefers-color-scheme, takže ruční
   přepnutí na tmu nemělo co chytit a tlačítko zdánlivě nefungovalo. */
:root[data-theme=dark],
:root[data-theme=dark] body{
  --papir:#121211; --text:#efeee8; --seda:#94938b; --linka:#2b2b27; --tlum:#1d1d1a; --modra:#8d8dff;
  --wp--preset--color--papir:#121211;
  --wp--preset--color--text:#efeee8;
  --wp--preset--color--seda:#94938b;
  --wp--preset--color--linka:#2b2b27;
  --wp--preset--color--tlum:#1d1d1a;
  --wp--preset--color--modra:#8d8dff;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]){
    --papir:#121211; --text:#efeee8; --seda:#94938b; --linka:#2b2b27; --tlum:#1d1d1a; --modra:#8d8dff;
    --wp--preset--color--papir:#121211;
    --wp--preset--color--text:#efeee8;
    --wp--preset--color--seda:#94938b;
    --wp--preset--color--linka:#2b2b27;
    --wp--preset--color--tlum:#1d1d1a;
    --wp--preset--color--modra:#8d8dff;
  }
}
body{background:var(--papir);color:var(--text);font-family:var(--grotesk)}
h1,h2,h3,h4,h5,h6,.titul,.heslo,.cv-kde,.stitek{font-family:var(--grotesk)}
/* Šablona nemá border-box globálně, takže by se odsazení přičítalo nad šířku.
   Nastavuju ho jen tam, kde sám měřím; měnit ho pro celý web by rozhodilo obchod. */
.lista,.wp-site-blocks > main,.paticka,.obsah-clanku,.dopis,.prekryv{box-sizing:border-box}

/* ---- stránka přes celou šířku, bez postranního sloupce ---- */
.wp-site-blocks{display:block;max-width:none;margin:0;padding:0}
.wp-site-blocks > header,
.wp-site-blocks > main,
.wp-site-blocks > footer{grid-column:auto;grid-row:auto;max-width:none}
header.wp-block-template-part{position:static;top:auto;align-self:auto;font-size:inherit}
.wp-site-blocks > main{margin:0;padding:0 var(--okraj) var(--g16)}

/* ---- lišta ---- */
.lista{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--g3);
       margin:0;padding:var(--g3) var(--okraj);position:relative}
/* WordPress dává potomkům skupiny margin-block-start, takže druhý a další
   prvek v liště odskakoval dolů. V liště žádné svislé okraje nechceme. */
.lista > *,.lista-l > *,.lista-p > *{margin-block-start:0;margin-block-end:0;margin-top:0;margin-bottom:0}
.lista-l{display:flex;align-items:center;gap:var(--g3);min-width:0}
.lista-p{display:flex;align-items:center;justify-content:flex-end;gap:var(--g3);min-width:0}
.lista .odkazy-lista{display:flex;align-items:center;gap:var(--g3);margin:0;padding:0;list-style:none}
.lista .odkazy-lista li{margin:0}
.lista .odkazy-lista a{font-size:15px;color:var(--text);text-decoration:none}
.lista .odkazy-lista a:hover{color:var(--modra)}
.znacka{margin:0;line-height:0}
.znacka svg{width:78px;height:auto;display:block}
/* Značka se při načtení nakreslí zleva doprava. Je to jediná křivka s tahem
   dlouhá 2879 jednotek, takže stačí odkrývat čárkování. Délka je změřená
   přes getTotalLength; kdyby se logo překreslilo, musí se přeměřit. */
.znacka path{stroke-dasharray:2879;stroke-dashoffset:2879;
             animation:kresli 1.5s cubic-bezier(.45,.05,.3,1) .12s forwards}
@keyframes kresli{to{stroke-dashoffset:0}}
:root[data-znacka=hotovo] .znacka path{animation:none;stroke-dashoffset:0}
@media (prefers-reduced-motion:reduce){.znacka path{animation:none;stroke-dashoffset:0}}

/* Polylang vykresluje <nav> a v něm <ul>, kterému svojí třídou nastavuje
   svislý směr. Bez přepsání směru se jazyky stohovaly pod sebe a roztáhly
   lištu přes půl obrazovky. */
.lista .pll-switcher{display:block;width:auto;flex:0 0 auto}
.lista .pll-switcher ul,
.lista .pll-switcher.pll-layout-vertical ul{display:flex;flex-direction:row;gap:var(--g2);
       margin:0;padding:0;list-style:none;align-items:center}
.lista .pll-switcher li,.lista .kosik-odkaz li{margin:0}
.lista .kosik-odkaz{display:flex;gap:var(--g2);margin:0;padding:0;list-style:none}
.lista .pll-switcher a,.lista .kosik-odkaz a{font:400 11.5px/1 var(--mono);letter-spacing:.07em;
       text-transform:uppercase;color:var(--seda);text-decoration:none;white-space:nowrap}
.lista .pll-switcher .current-lang a{color:var(--text)}
.lista .pll-switcher a:hover,.lista .kosik-odkaz a:hover{color:var(--modra)}
.lista .kosik-odkaz .pocet{font:inherit;color:inherit}
.lista .stitek{display:none}

/* přepínač světla a tmy */
.rezim{position:relative;flex:none;width:46px;height:26px;padding:0;cursor:pointer;
       border:1px solid var(--linka);border-radius:999px;background:var(--tlum);
       transition:background .18s,border-color .18s;display:none}
.js .rezim{display:block}
.rezim:hover{border-color:var(--seda)}
.knoflik{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;
         background:var(--papir);box-shadow:0 1px 2px rgba(0,0,0,.2);
         display:grid;place-items:center;color:var(--text);
         transition:transform .2s cubic-bezier(.3,.7,.3,1)}
.rezim[aria-checked=true] .knoflik{transform:translateX(20px)}
.knoflik svg{display:block;width:12px;height:12px}
.knoflik .mesic{display:none}
.rezim[aria-checked=true] .knoflik .slunce{display:none}
.rezim[aria-checked=true] .knoflik .mesic{display:block}
@media (prefers-reduced-motion:reduce){.knoflik{transition:none}}

/* ---- heslo a filtry ---- */
.heslo{font-size:clamp(34px,6.4vw,76px);line-height:1.04;letter-spacing:-.025em;font-weight:600;
       margin:var(--g16) auto 0;max-width:12em;text-align:center;text-wrap:balance}
.podheslo{font-size:17px;color:var(--seda);margin:var(--g3) auto 0;max-width:32em;
          text-align:center;text-wrap:balance}
/* Předložka svázaná s dalším slovem, aby nezůstala viset na konci řádku. */
.nedel{white-space:nowrap}

.filtry{display:flex;gap:var(--g);flex-wrap:wrap;justify-content:center;
        margin:var(--g8) 0 0;padding:0;list-style:none}
.filtry li{margin:0}
.filtr{font-family:var(--grotesk);font-size:14.5px;line-height:1;display:inline-flex;
       align-items:center;gap:var(--g);border:1px solid var(--linka);border-radius:999px;
       padding:var(--g2) var(--g3);color:var(--text);text-decoration:none;font-weight:400;
       transition:background .14s,border-color .14s,color .14s}
.filtr:hover{border-color:var(--seda);color:var(--text)}
.filtr .pocet{font:400 10px/1 var(--mono);color:var(--seda)}
.filtr[aria-current=page],.filtr[aria-pressed=true]{background:var(--text);border-color:var(--text);
       color:var(--papir);font-weight:400}
.filtr[aria-current=page] .pocet,.filtr[aria-pressed=true] .pocet{color:var(--papir);opacity:.6}
.skupina:has(.filtry) .stitek{display:none}
.skupina:has(.filtry){margin:0}

/* ---- mřížka prací ---- */
/* Sloupce se dopočítají podle šířky okna. Na 1440 jich vyjde pět, na telefonu
   dva, a dlaždice si drží rozumnou šířku místo toho, aby se na velkém monitoru
   roztáhla přes čtvrt obrazovky. */
.index-praci{margin-top:var(--g8)}
/* Čtyři sloupce jsou strop. Na širokém monitoru se dlaždice roztáhnou,
   ale nepřibývají; úzká okna jdou po krocích na tři, dva a jeden. */
.index-praci .seznam,
[data-pohled=mrizka] .index-praci .seznam,
.woocommerce ul.products{display:grid;grid-template-columns:repeat(4,1fr);
       gap:var(--g8) var(--g3);padding:0;margin:0;list-style:none}
/* Podbarvení při najetí leží na podkladu za dlaždicí a přesahuje ven, aniž by
   s dlaždicí hnulo. Záporné okraje to uměly taky, ale posunuly první řádek
   do filtrů a levý sloupec ven z okraje stránky. */
.index-praci .polozka,
[data-pohled=mrizka] .index-praci .polozka{display:grid;grid-template-columns:auto 1fr;
       grid-template-areas:"obraz obraz" "rok druh" "titul titul" "perex perex" "dale dale";
       align-items:baseline;align-content:start;padding:0;margin:0;
       border-bottom:0;position:relative}
.index-praci .polozka::before{content:"";position:absolute;inset:-10px;z-index:-1;
       border-radius:var(--g2);background:transparent;transition:background .16s ease}
/* Dva snímky nad sebou. Druhý se odkryje při najetí, mění se obraz, ne jeho
   velikost. Stahuje se až při prvním najetí, jinak by stránka táhla dvojnásobek
   obrázků, které většina návštěv neuvidí. */
.index-praci .ramecek{grid-area:obraz;display:block;position:relative;width:100%;
       aspect-ratio:4/5;overflow:hidden;border-radius:var(--g);background:var(--tlum);
       margin:0 0 var(--g2);line-height:0}
.index-praci .ramecek img{position:absolute;inset:0;width:100%;height:100%;
       object-fit:cover;display:block}
.index-praci .druhy{opacity:0;transition:opacity .35s ease}
.index-praci .miniatura,
[data-pohled=mrizka] .index-praci .miniatura{display:block;width:100%;
       aspect-ratio:4/5;object-fit:cover;background:var(--tlum)}
.index-praci .rok,[data-pohled=mrizka] .index-praci .rok{grid-area:rok;font-size:11.5px}
.index-praci .meta,[data-pohled=mrizka] .index-praci .meta{grid-area:druh;justify-self:start;font-size:11.5px}
.index-praci .meta::before{content:"·";margin:0 var(--g)}
.index-praci .titul,[data-pohled=mrizka] .index-praci .titul{grid-area:titul;font-size:15px;
       line-height:1.3;margin:var(--g) 0 0}
.index-praci .perex,[data-pohled=mrizka] .index-praci .perex{grid-area:perex;display:-webkit-box;
       -webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;color:var(--seda);
       font-size:13px;line-height:1.5;margin:var(--g) 0 0}
.index-praci .dale,[data-pohled=mrizka] .index-praci .dale{grid-area:dale;display:block;
       margin:var(--g2) 0 0;font:400 10.5px/1.4 var(--mono);color:var(--modra)}
@media (hover:hover) and (pointer:fine){
  .index-praci .polozka:hover::before{background:var(--tlum)}
  .index-praci .polozka:hover .druhy{opacity:1}
  .index-praci .polozka:hover .dale{text-decoration:underline;text-underline-offset:3px}
}
@media (prefers-reduced-motion:reduce){.index-praci .druhy{transition:none}}
/* Počítadlo a přepínač pohledu nad mřížkou. Počty jsou v pilulkách, takže na
   úvodní stránce je ten řádek navíc. Na archivu druhu je ale jeho nadpis
   jediným h1 stránky, proto se schovává jen tam, kde je z něj h2. */
.index-praci .hlava-seznamu:has(h2#pocitadlo){display:none}
.index-praci .hlava-seznamu{margin:var(--g8) 0 var(--g6);padding-bottom:var(--g2)}
.pohledy{display:none!important}

/* ---- obchod ve stejné podobě jako index ----
   Výpis obchodu kreslí WooCommerce vlastní značkou, ne naším blokem, takže se
   srovnává zvlášť. Cíl je, aby dlaždice produktu byla k nerozeznání od dlaždice
   práce: stejný ořez, stejné písmo, stejné popisky, žádná modrá tlačítka. */
.woocommerce ul.products::before,.woocommerce ul.products::after{content:none;display:none}
.woocommerce ul.products li.product{width:auto!important;margin:0!important;padding:0;
       float:none;position:relative;text-align:left;clear:none}
.woocommerce ul.products li.product::before{content:"";position:absolute;inset:-10px;z-index:-1;
       border-radius:var(--g2);background:transparent;transition:background .16s ease}
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link{display:block;color:var(--text)}
.woocommerce ul.products li.product img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
       border-radius:var(--g);background:var(--tlum);margin:0 0 var(--g2)!important;display:block}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-family:var(--grotesk);
       font-size:15px;line-height:1.3;font-weight:400;color:var(--text);padding:0!important;margin:0}
.woocommerce ul.products li.product .price{display:block;margin:var(--g) 0 0;
       font:400 12px/1.5 var(--mono);color:var(--seda)}
.woocommerce ul.products li.product .price *{font:inherit;color:var(--seda)}
/* Tlačítko do košíku v přehledu nepotřebujeme, kupuje se na stránce produktu.
   Zároveň to byla ta modrá, která na obchodu křičela. */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart,
.woocommerce ul.products li.product .onsale{display:none}
@media (hover:hover) and (pointer:fine){
  .woocommerce ul.products li.product:hover::before{background:var(--tlum)}
}

/* Pravidla obchodu jsou na konci souboru, u ostatních výpisů. */

/* ---- text na stránkách a v článcích ---- */
.obsah-clanku,.dopis{max-width:var(--text-s);margin:0 auto}
/* Životopis na stránce Info je tabulka roku, názvu a role, té je text úzký. */
.dopis .cv{max-width:var(--obraz-s);margin-inline:auto}
.obsah-clanku > h1,.obsah-clanku .wp-block-post-title,
.dopis > h1,.dopis .wp-block-post-title{text-align:center;
       font-size:clamp(34px,5vw,56px);line-height:1.06;letter-spacing:-.025em;font-weight:600;
       margin:var(--g16) 0 var(--g8);text-wrap:balance}
.obsah-clanku p,.dopis p{font-size:17px;line-height:1.62;margin:0 0 var(--g3)}
.obsah-clanku h2,.dopis h2{font-size:22px;line-height:1.25;letter-spacing:-.015em;
       font-weight:600;margin:var(--g8) 0 var(--g3)}
.obsah-clanku .wp-block-image,.obsah-clanku figure,
.dopis .wp-block-image,.dopis figure{max-width:var(--obraz-s);margin:var(--g8) auto;
       width:100%}
.obsah-clanku .alignwide,.dopis .alignwide{max-width:none}
.obsah-clanku img,.dopis img{border-radius:var(--g)}
.obsah-clanku figcaption,.dopis figcaption{font:400 11px/1.5 var(--mono);letter-spacing:.04em;
       color:var(--seda);text-align:center;margin-top:var(--g2)}
.dopis .stitek{margin:var(--g12) 0 var(--g3)}

/* ---- patička ---- */
.paticka{margin:0;padding:var(--g8) var(--okraj) var(--g12);border-top:1px solid var(--linka)}

/* ---- překryvné menu ---- */
.hamburger{background:none;border:0;cursor:pointer;padding:var(--g2) 0 var(--g2) var(--g2);
           display:none;position:absolute;right:var(--okraj);top:50%;transform:translateY(-50%)}
.hamburger span{display:block;width:22px;height:1.5px;background:var(--text);margin:4px 0}
.prekryv{position:fixed;inset:0;z-index:30;background:var(--papir);
         padding:var(--g8) var(--okraj) var(--g4);display:none;flex-direction:column}
.prekryv.vidi{display:flex}
.prekryv > a{font-family:var(--grotesk);font-size:30px;line-height:1.25;padding:var(--g2) 0;
             display:block;color:var(--text);text-decoration:none}
.zavrit{position:absolute;top:var(--g3);right:var(--okraj);background:none;border:0;cursor:pointer;
        font:400 12px/1 var(--mono);letter-spacing:.08em;color:var(--seda);padding:var(--g2) 0}
/* Patka menu: jazyk a přepínač světla. Na telefonu je lišta schovaná, takže
   tohle je jediné místo, kde se k obojímu dá dostat. */
.prekryv .spodek{margin-top:auto;display:flex;align-items:center;justify-content:space-between;
        gap:var(--g3);border-top:1px solid var(--linka);padding-top:var(--g3)}
.prekryv .jazyky-menu{font:400 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
        color:var(--seda)}
.prekryv .jazyky-menu b{color:var(--text);font-weight:400}
.prekryv .jazyky-menu a{color:var(--seda);text-decoration:none;font-size:inherit;font-family:inherit}
.prekryv .jazyky-menu a:hover{color:var(--modra)}
.js .prekryv .spodek .rezim{display:block}

/* ---- užší okna: ubývají sloupce, nic jiného se nemění ---- */
@media (max-width:1180px){
  .index-praci .seznam,[data-pohled=mrizka] .index-praci .seznam,
  .seznam-produktu,.woocommerce ul.products{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:560px){
  .index-praci .seznam,[data-pohled=mrizka] .index-praci .seznam,
  .seznam-produktu,.woocommerce ul.products{grid-template-columns:1fr}
}

/* ---- telefon ---- */
@media (max-width:860px){
  :root{--okraj:var(--g2)}
  .lista{padding:var(--g2) var(--okraj)}
  .lista .odkazy-lista,.lista .pll-switcher{display:none}
  .js .hamburger{display:block}
  .znacka svg{width:66px}
  .heslo{font-size:clamp(28px,8vw,40px);margin-top:var(--g8)}
  .podheslo{font-size:15px;margin-top:var(--g2)}
  /* Pilulky v jednom pásu, který se posouvá do strany. Vycentrované by při
     přetečení schovaly první z nich za levý okraj, odkud se k ní nedoscrolluje. */
  .filtry{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;justify-content:flex-start;
          margin-top:var(--g6)}
  .filtry::-webkit-scrollbar{display:none}
  .filtr{white-space:nowrap;padding:var(--g2)}
  .index-praci .seznam,[data-pohled=mrizka] .index-praci .seznam,
  .seznam-produktu,.woocommerce ul.products{grid-template-columns:repeat(2,1fr);
         gap:var(--g6) var(--g2)}
  .obsah-clanku > h1,.obsah-clanku .wp-block-post-title,
  .dopis > h1,.dopis .wp-block-post-title{margin-top:var(--g8);margin-bottom:var(--g6)}
  .obsah-clanku .wp-block-image,.obsah-clanku figure,
  .dopis .wp-block-image,.dopis figure{margin:var(--g6) auto}
  .wp-site-blocks > main{padding-bottom:var(--g12)}
}

/* ===========================================================================
   Detail práce, produkt a košík. Všechno v téže řeči jako index: Geist,
   mezery z kroku 8 px, text v úzkém sloupci, obrázky zaoblené.
   =========================================================================== */

/* ---- detail práce ---- */
.hlava-prace{max-width:var(--text-s);margin:0 auto;text-align:center;padding:var(--g16) 0 0}
.hlava-prace .wp-block-post-title{font-size:clamp(34px,5vw,56px);line-height:1.06;
       letter-spacing:-.025em;font-weight:600;margin:var(--g3) 0 0;text-wrap:balance}
.hlava-prace .stitek{font:400 11px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;
       color:var(--seda);margin:0}
.hlava-prace .wp-block-post-terms{margin:var(--g3) 0 0}
.hlava-prace .wp-block-post-terms a{color:var(--seda);text-decoration:none}
.hlava-prace .wp-block-post-terms a:hover{color:var(--modra)}
.hero{max-width:var(--obraz-s);margin:var(--g8) auto 0}
.hero img{width:100%;height:auto;border-radius:var(--g);display:block}
.obsah-clanku{padding-top:var(--g8)}
.prodej,.galerie-projektu{max-width:var(--obraz-s);margin:var(--g12) auto 0}

/* ---- rámeček se dvěma snímky i v obchodu ---- */
.woocommerce ul.products li.product .ramecek{display:block;position:relative;width:100%;
       aspect-ratio:4/5;overflow:hidden;border-radius:var(--g);background:var(--tlum);
       margin:0 0 var(--g2);line-height:0}
.woocommerce ul.products li.product .ramecek img{position:absolute;inset:0;width:100%;height:100%;
       object-fit:cover;margin:0!important;border-radius:0;display:block}
.woocommerce ul.products li.product .ramecek .druhy{opacity:0;transition:opacity .35s ease}
@media (hover:hover) and (pointer:fine){
  .woocommerce ul.products li.product:hover .ramecek .druhy{opacity:1}
}
@media (prefers-reduced-motion:reduce){.woocommerce ul.products li.product .ramecek .druhy{transition:none}}

/* ---- stránka produktu ---- */
/* Drobečky jsou cesta, kterou nikdo nepoužívá, a hned nahoře tříští pozornost. */
.woocommerce-breadcrumb{display:none}
.woocommerce .wp-block-post-title,.wp-block-woocommerce-product-image-gallery + * .wp-block-post-title{
       font-size:clamp(30px,4vw,44px);line-height:1.08;letter-spacing:-.025em;font-weight:600}
.wp-block-woocommerce-product-image-gallery img,
.woocommerce-product-gallery__image img{border-radius:var(--g)}
.wp-block-woocommerce-product-price,.woocommerce div.product p.price,
.woocommerce div.product span.price{font-family:var(--grotesk);font-size:22px;font-weight:600;
       letter-spacing:-.01em;color:var(--text);margin:var(--g3) 0}
.woocommerce div.product p.price *,.woocommerce div.product span.price *{color:inherit;font:inherit}
.woocommerce div.product .stock{font:400 11.5px/1.5 var(--mono);letter-spacing:.05em;color:var(--seda)}
.woocommerce div.product .wp-block-post-excerpt__excerpt{font-size:17px;line-height:1.62;color:var(--seda)}
.woocommerce div.product form.cart{margin:var(--g6) 0 0;display:flex;gap:var(--g2);
       align-items:center;flex-wrap:wrap}
.woocommerce div.product form.cart .quantity input{font-family:var(--mono);font-size:14px;
       padding:var(--g2);border:1px solid var(--linka);border-radius:var(--g2);
       background:var(--papir);color:var(--text);width:72px}

/* ---- tlačítka v jedné řeči ---- */
/* Ve výchozím stavu je WooCommerce i WordPress kreslí modrou plochou. Tady je
   to tmavá pilulka, stejná jako všude jinde na webu. */
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce a.button.alt,.woocommerce button.button.alt,
.wc-block-components-button,.wp-element-button,
.wp-block-button__link{background:var(--text);color:var(--papir);
       border:1px solid var(--text);border-radius:999px;font-family:var(--grotesk);
       font-size:15px;font-weight:500;line-height:1;padding:14px 28px;text-decoration:none;
       text-transform:none;letter-spacing:0}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover,
.wc-block-components-button:hover,.wp-element-button:hover,
.wp-block-button__link:hover{background:var(--text);color:var(--papir);opacity:.84}

/* ---- košík a pokladna ---- */
.wp-block-woocommerce-cart,.wp-block-woocommerce-checkout{max-width:none}
.woocommerce .wc-block-components-product-name,
.wc-block-components-product-name{font-family:var(--grotesk);font-size:16px;color:var(--text);
       text-decoration:none}
.wc-block-components-product-price,.wc-block-components-totals-item__value{font-family:var(--mono);
       font-size:13px;color:var(--text)}
.wc-block-components-totals-item__label{font-family:var(--grotesk);font-size:15px;color:var(--seda)}
.wc-block-cart-items__header{font:400 11px/1 var(--mono);letter-spacing:.09em;
       text-transform:uppercase;color:var(--seda)}
.wc-block-components-sidebar,.wc-block-components-order-summary{border-radius:var(--g2)}
.wc-block-components-text-input input,.wc-block-components-textarea,
.wc-block-components-form input,.wc-block-components-select__container{font-family:var(--grotesk)}
/* Obrázek v košíku ve stejném ořezu jako dlaždice. */
.wc-block-cart-item__image img{border-radius:var(--g);aspect-ratio:1;object-fit:cover}

/* ---- písmo i tam, kam si WooCommerce nosí vlastní ---- */
.woocommerce,.woocommerce button,.woocommerce input,.woocommerce select,.woocommerce textarea,
.wc-block-components-button,.wc-block-grid,
[class^="wc-block-"],[class*=" wc-block-"]{font-family:var(--grotesk)}

@media (max-width:860px){
  .hlava-prace{padding-top:var(--g8)}
  .hero{margin-top:var(--g6)}
  .obsah-clanku{padding-top:var(--g6)}
  .prodej,.galerie-projektu{margin-top:var(--g8)}
}

/* ===========================================================================
   Doladění po měření na živém webu.
   =========================================================================== */

/* Nadpis stránky i práce nosí z palety třídu has-claim-font-size, která drží
   velikost s !important. Přebít ji selektorem nejde, ale dá se přenastavit
   ta proměnná, ze které čerpá. Tím se srovnají titulky všech stránek naráz. */
:root{--wp--preset--font-size--claim:clamp(34px,5vw,56px)}

/* Sloupec s textem. Psáno s vyšší vahou a bez proměnné, protože na detailu
   práce se šířka neprosadila a text se táhl přes celou obrazovku. */
main .obsah-clanku,main .dopis{max-width:760px;margin-left:auto;margin-right:auto}
main .obsah-clanku .alignwide,main .dopis .alignwide,
main .obsah-clanku .alignfull,main .dopis .alignfull{max-width:none}

/* Výpis produktů v prázdném košíku kreslí WooCommerce ještě jinou značkou
   než obchod. Stejné dlaždice, stejné popisky, žádné modré názvy. */
.wc-block-grid__products{display:grid;grid-template-columns:repeat(4,1fr);
       gap:var(--g8) var(--g3);margin:var(--g8) 0 0;padding:0;list-style:none}
.wc-block-grid__product{width:auto;margin:0;padding:0;text-align:left;position:relative}
.wc-block-grid__product::before{content:"";position:absolute;inset:-10px;z-index:-1;
       border-radius:var(--g2);background:transparent;transition:background .16s ease}
.wc-block-grid__product-link{display:block}
.wc-block-grid__product-image img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
       border-radius:var(--g);background:var(--tlum);margin:0 0 var(--g2);display:block}
.wc-block-grid__product-title{font-family:var(--grotesk);font-size:15px;line-height:1.3;
       font-weight:400;color:var(--text);margin:0}
.wc-block-grid__product-link,.wc-block-grid__product-title a{color:var(--text);text-decoration:none}
.wc-block-grid__product-price{display:block;margin:var(--g) 0 0;
       font:400 12px/1.5 var(--mono);color:var(--seda)}
.wc-block-grid__product-price *{font:inherit;color:var(--seda)}
.wc-block-grid__product-add-to-cart{display:none}
@media (hover:hover) and (pointer:fine){
  .wc-block-grid__product:hover::before{background:var(--tlum)}
}
@media (max-width:1180px){.wc-block-grid__products{grid-template-columns:repeat(3,1fr)}}
@media (max-width:860px){.wc-block-grid__products{grid-template-columns:repeat(2,1fr);gap:var(--g6) var(--g2)}}
@media (max-width:560px){.wc-block-grid__products{grid-template-columns:1fr}}

/* Šířku textového sloupce se nepodařilo prosadit běžnou cestou: pravidlo
   v souboru je, selektor na prvek sedí, značka nemá vlastní zápis a styl je
   platný, a přesto zůstávala vypočtená hodnota "none". Zdroj jsem nenašel,
   protože styl se servíruje z jiného původu než stránka a jeho pravidla se
   nedají z prohlížeče přečíst. Tohle je proto hrubší nástroj, ne řešení.
   Až poběží web v Localu, patří sem vrátit obyčejné pravidlo. */
main .obsah-clanku,main .dopis{max-width:760px!important}
main .obsah-clanku .alignwide,main .obsah-clanku .alignfull,
main .dopis .alignwide,main .dopis .alignfull{max-width:none!important}

/* ===========================================================================
   MĚŘÍTKO WEBU. Jedno místo, odkud se berou všechny mezery, šířky, zaoblení
   a velikosti písma. Když něco někde nesedí, mění se hodnota tady, ne
   jednotlivé pravidlo. Všechno je násobek osmi.
   =========================================================================== */
:root{
  /* mezery */
  --g:8px; --g2:16px; --g3:24px; --g4:32px; --g6:48px; --g8:64px; --g12:96px; --g16:128px;
  /* zaoblení: obrázky a dlaždice mají jedno, podbarvení při najetí druhé */
  --r:8px; --r2:16px; --r-pilulka:999px;
  /* šířky: okraj stránky, sloupec textu, obrázek v článku */
  --okraj:var(--g4); --text-s:760px; --obraz-s:960px;
  /* velikosti písma */
  --f-drobne:11px; --f-mono:12px; --f-popisek:13px; --f-zakl:15px; --f-text:17px;
  --f-nadpis2:22px; --f-nadpis1:clamp(34px,5vw,56px); --f-heslo:clamp(34px,6.4vw,76px);
  /* Nadpisy stránek nosí z palety třídu has-claim-font-size s !important,
     přebít ji selektorem nejde, zato se dá přenastavit její proměnná. */
  --wp--preset--font-size--claim:var(--f-nadpis1);
}

/* ---- písmo na celém webu ----
   Psáno přes :root, a to schválně. Paleta z theme.json sází tělo i nadpisy
   obyčejným selektorem prvku a tiskne se do stránky jako vložený styl, takže
   o vítězi rozhodovalo pořadí a nadpis na Info zůstával antikvou. Selektor
   s :root má vyšší váhu, takže je výsledek stejný bez ohledu na pořadí. */
:root body,:root h1,:root h2,:root h3,:root h4,:root h5,:root h6,
:root p,:root a,:root li,:root button,:root input,:root select,:root textarea,
:root .titul,:root .heslo,:root .podheslo,:root .stitek,
:root .wp-block-post-title,:root [class*="wc-block-"],
:root .woocommerce,:root .woocommerce *{font-family:var(--grotesk)}
/* Drobné popisky a čísla zůstávají strojopisem, ten nese jinou funkci. */
:root .rok,:root .meta,:root .pocet,:root .drobne,:root .drobne-meta,
:root .stitek,:root .dale,:root .zavrit,:root figcaption,
:root .wc-block-grid__product-price,:root .polozka-produkt .rok{font-family:var(--mono)}

/* ---- zaoblení jednotně ---- */
:root .index-praci .ramecek,:root .woocommerce ul.products li.product .ramecek,
:root .hero img,:root .obsah-clanku img,:root .dopis img,
:root .wc-block-grid__product-image img,:root .wc-block-cart-item__image img,
:root .wp-block-woocommerce-product-image-gallery img{border-radius:var(--r)}
:root .index-praci .polozka::before,:root .woocommerce ul.products li.product::before,
:root .wc-block-grid__product::before{border-radius:var(--r2)}
:root .filtr,:root .rezim,:root .tlacitko,
:root .woocommerce a.button,:root .woocommerce button.button,
:root .wc-block-components-button,:root .wp-element-button{border-radius:var(--r-pilulka)}

/* ---- jedna mřížka pro všechny výpisy ----
   Index prací, obchod i výpis v košíku sdílejí tatáž čísla. Čtyři sloupce
   jsou strop, pak se ubírá po jednom. */
:root .index-praci .seznam,
:root .seznam-produktu,
:root .woocommerce ul.products,
:root .wc-block-grid__products{display:grid;grid-template-columns:repeat(4,1fr);
       gap:var(--g8) var(--g3);margin:var(--g8) 0 0;padding:0;list-style:none}
@media (max-width:1180px){
  :root .index-praci .seznam,:root .seznam-produktu,:root .woocommerce ul.products,
  :root .wc-block-grid__products{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:860px){
  :root .index-praci .seznam,:root .seznam-produktu,:root .woocommerce ul.products,
  :root .wc-block-grid__products{grid-template-columns:repeat(2,1fr);gap:var(--g6) var(--g2)}
}
/* Jeden sloupec až na opravdu úzké obrazovce. Na běžném telefonu drží dva:
   u dvaatřiceti prací je jeden sloupec nekonečné rolování. */
@media (max-width:359px){
  :root .index-praci .seznam,:root .seznam-produktu,:root .woocommerce ul.products,
  :root .wc-block-grid__products{grid-template-columns:1fr}
}

/* ---- obchod: dvě různé značky, jedna podoba ----
   Živý web kreslí výpis starým způsobem (ul.products), místní kopie novější
   blokovou šablonou (ul.wc-block-product-template). Verze WooCommerce se tedy
   liší a styl musí sednout na obojí, jinak vypadá obchod jinde než doma.
   Položka naštěstí v obou případech nese třídu .product. */
:root ul.wc-block-product-template{display:grid;grid-template-columns:repeat(4,1fr);
       gap:var(--g8) var(--g3);margin:var(--g8) 0 0;padding:0;list-style:none}
ul.wc-block-product-template > li.product{width:auto!important;margin:0!important;padding:0;
       position:relative;text-align:left;float:none}
ul.wc-block-product-template > li.product::before{content:"";position:absolute;inset:-10px;
       z-index:-1;border-radius:var(--r2);background:transparent;transition:background .16s ease}
ul.wc-block-product-template .wc-block-components-product-image img{width:100%;height:auto;
       aspect-ratio:4/5;object-fit:cover;border-radius:var(--r);background:var(--tlum);
       display:block;margin:0 0 var(--g2)}
ul.wc-block-product-template .wp-block-post-title,
ul.wc-block-product-template .wp-block-post-title a{font-size:var(--f-zakl);line-height:1.3;
       font-weight:400;color:var(--text);margin:0;text-decoration:none}
ul.wc-block-product-template .wc-block-components-product-price,
ul.wc-block-product-template .wp-block-woocommerce-product-price{display:block;
       margin:var(--g) 0 0;font:400 var(--f-mono)/1.5 var(--mono);color:var(--seda)}
ul.wc-block-product-template .wc-block-components-product-price *{font:inherit;color:var(--seda)}
/* Tlačítko do košíku se kupuje na stránce produktu, ve výpisu jen křičí. */
ul.wc-block-product-template .wp-block-woocommerce-product-button,
ul.wc-block-product-template .wc-block-components-product-button{display:none}
@media (hover:hover) and (pointer:fine){
  ul.wc-block-product-template > li.product:hover::before{background:var(--tlum)}
}
@media (max-width:1180px){:root ul.wc-block-product-template{grid-template-columns:repeat(3,1fr)}}
@media (max-width:860px){:root ul.wc-block-product-template{grid-template-columns:repeat(2,1fr);
       gap:var(--g6) var(--g2)}}
@media (max-width:560px){:root ul.wc-block-product-template{grid-template-columns:1fr}}
/* Řazení a počet výsledků nad výpisem patří k sobě, ne na dva konce. */
.woocommerce-result-count,.woocommerce-ordering{font:400 var(--f-mono)/1.5 var(--mono);
       color:var(--seda);margin:0}
.woocommerce-ordering select{font-family:var(--mono);font-size:var(--f-mono);
       border:1px solid var(--linka);border-radius:var(--r-pilulka);padding:var(--g) var(--g2);
       background:var(--papir);color:var(--text)}

/* ---- obchod kreslí náš vlastní blok ----
   Výpis obchodu teď používá tutéž značku a tytéž třídy jako index prací:
   .polozka-produkt je sourozenec .polozka. Dřív to byla značka WooCommerce,
   která si navíc psala poměr stran přímo do atributu, takže šla přebít jen
   vykřičníkem. Vlastní šablona je méně kódu a stejná podoba doma i na ostrém. */
.hlava-vypisu{max-width:var(--text-s);margin:0 auto;text-align:center;padding:var(--g16) 0 0}
.hlava-vypisu h1,.hlava-vypisu .wp-block-query-title{font-size:var(--f-nadpis1);
       line-height:1.06;letter-spacing:-.025em;font-weight:600;margin:0;text-wrap:balance}

.polozka-produkt{display:grid;grid-template-columns:auto 1fr;
       grid-template-areas:"obraz obraz" "titul titul" "cena druh";
       align-items:baseline;align-content:start;gap:0;padding:0;margin:0;
       border-bottom:0;color:var(--text);text-decoration:none;position:relative}
.polozka-produkt::before{content:"";position:absolute;inset:-10px;z-index:-1;
       border-radius:var(--r2);background:transparent;transition:background .16s ease}
.polozka-produkt .ramecek{grid-area:obraz;display:block;position:relative;width:100%;
       aspect-ratio:4/5;overflow:hidden;border-radius:var(--r);background:var(--tlum);
       margin:0 0 var(--g2);line-height:0}
.polozka-produkt .ramecek img{position:absolute;inset:0;width:100%;height:100%;
       object-fit:cover;display:block}
.polozka-produkt .druhy{opacity:0;transition:opacity .35s ease}
.polozka-produkt .titul{grid-area:titul;font-size:var(--f-zakl);line-height:1.3;color:var(--text)}
/* Cena přichází z WooCommerce zabalená ve vlastních značkách, proto i potomci. */
.polozka-produkt .rok{grid-area:cena;width:auto;min-width:0;margin:var(--g) 0 0}
.polozka-produkt .rok,.polozka-produkt .rok *{font:400 var(--f-mono)/1.5 var(--mono);
       color:var(--seda)}
.polozka-produkt .meta{grid-area:druh;justify-self:end;font-size:var(--f-drobne);
       color:var(--seda);margin:var(--g) 0 0}
.polozka-produkt .meta::before{content:none}
.polozka-produkt.vyprodano .titul{color:var(--seda)}
@media (hover:hover) and (pointer:fine){
  .polozka-produkt:hover::before{background:var(--tlum)}
  .polozka-produkt:hover .druhy{opacity:1}
}
@media (prefers-reduced-motion:reduce){.polozka-produkt .druhy{transition:none}}
@media (max-width:860px){.hlava-vypisu{padding-top:var(--g8)}}

/* Výpis produktů nepatří do textového sloupce. Česká verze obchodu je obyčejná
   stránka, takže ji šablona obalí do .obsah-clanku a mřížka se vměstnala do
   760 px: čtyři sloupce po 172 px místo po 322. Anglická verze jede přes
   archiv produktů, kde ten obal není, a proto vypadala jinak. */
main .woocommerce,main ul.products,main .seznam-produktu,
main .wc-block-grid__products{max-width:none!important;width:auto}

/* Strop 760 px drží textový sloupec, ne mřížka, takže ji nestačí uvolnit samu.
   Na stránce, která nese výpis produktů, se sloupec roztáhne na celou šířku. */
main .obsah-clanku:has(ul.products),
main .obsah-clanku:has(.seznam-produktu),
main .obsah-clanku:has(.wc-block-grid__products){max-width:none!important}

/* Odfiltrovaná položka musí zmizet ve všech výpisech. Vykřičník tu má důvod:
   pravidla mřížky nastavují display se stejnou vahou, takže by o výsledku
   rozhodovalo pořadí řádků. Tohle pravidlo bylo ve vzhled.css uvnitř bloku
   s pohledy na index a smazal jsem ho s ním jako mrtvé. Mrtvé nebylo: filtry
   pak položky schovaly jen v paměti a na stránce zůstaly všechny. */
:root .index-praci .polozka[hidden],
:root .seznam-produktu .polozka-produkt[hidden],
:root .woocommerce ul.products li.product[hidden]{display:none!important}

/* Hlavní obrázek práce: na střed, s odstupem od hlavičky. Psáno s vyšší vahou,
   protože okraje mu přebíjela dvě pravidla ze sloupcového rozvržení. */
:root main .hero{max-width:var(--obraz-s);margin:var(--g8) auto var(--g8)}
:root main .hero img{width:100%;height:auto;display:block;border-radius:var(--r)}
@media (max-width:860px){
  :root main .hero{margin:var(--g6) auto var(--g6)}
}

/* ---- nabídka produktu v příspěvku ----
   Projekt je jediná stránka věci, takže když se dá koupit, koupí se z ní.
   Je to táž dlaždice jako v obchodu, jen přibyl krátký popis a tlačítko.
   Obojí jsou přímí potomci, jinak by je mřížka nerozmístila do oblastí. */
.polozka-produkt{grid-template-areas:"obraz obraz" "titul titul" "cena druh" "popis popis" "koupit koupit"}
.polozka-produkt .ramecek{grid-area:obraz}
.polozka-produkt .popis{grid-area:popis;font-size:var(--f-popisek);line-height:1.5;
       color:var(--seda);margin:var(--g2) 0 0;display:-webkit-box;-webkit-line-clamp:4;
       -webkit-box-orient:vertical;overflow:hidden}
.polozka-produkt .do-kosiku{grid-area:koupit;margin:var(--g3) 0 0}
.tlacitko-kosik{font-family:var(--grotesk);font-size:var(--f-zakl);font-weight:500;line-height:1;
       background:var(--text);color:var(--papir);border:1px solid var(--text);
       border-radius:var(--r-pilulka);padding:var(--g2) var(--g3);cursor:pointer}
.tlacitko-kosik:hover{opacity:.84}
/* Název je teď odkaz, ne jen text uvnitř odkazu. */
a.titul{text-decoration:none;color:var(--text)}
@media (hover:hover) and (pointer:fine){a.titul:hover{color:var(--modra)}}

/* Nabídka má nejčastěji jeden nebo dva produkty. Ve čtyřsloupcové mřížce by
   z nich byly úzké proužky u levého kraje, proto si drží vlastní šířku. */
/* Nabídka v příspěvku zabírá celou šířku obsahu. Úzký pruh na střed vypadal,
   jako by vedle měly dorazit další produkty, i když je u projektu jediný.
   Obrázek vlevo, text vpravo, stejná řeč jako detail práce. */
:root .seznam-produktu.nabidka{grid-template-columns:1fr;gap:var(--g8);
       margin:var(--g8) 0 0;max-width:none}
:root .nabidka .polozka-produkt{grid-template-columns:320px auto 1fr;
       grid-template-areas:"obraz titul titul" "obraz cena druh" "obraz popis popis" "obraz koupit koupit";
       column-gap:var(--g6);align-content:start}
:root .nabidka .ramecek{margin:0}
:root .nabidka .titul{font-size:var(--f-nadpis2);line-height:1.25;letter-spacing:-.015em}
:root .nabidka .rok{margin:var(--g2) 0 0}
:root .nabidka .meta{margin:var(--g2) 0 0}
:root .nabidka .popis{-webkit-line-clamp:6;font-size:var(--f-zakl);margin:var(--g3) 0 0}
:root .nabidka .do-kosiku{margin:var(--g6) 0 0;align-self:start}
@media (max-width:700px){
  /* Na úzké obrazovce se karta skládá pod sebe, obrázek nahoru. */
  :root .nabidka .polozka-produkt{grid-template-columns:auto 1fr;
         grid-template-areas:"obraz obraz" "titul titul" "cena druh" "popis popis" "koupit koupit";
         column-gap:var(--g3)}
  :root .nabidka .ramecek{margin:0 0 var(--g3)}
  :root .nabidka .titul{font-size:var(--f-zakl)}
  :root .nabidka .do-kosiku{margin:var(--g4) 0 0}
}