/* Obsah jen pro odecitace obrazovky a vyhledavace: z obrazovky zmizi,
   ale z pristupnostniho stromu ne (na rozdil od display:none). */
.mf-sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
/* =========================================================================
   MF Art — layout (mimo tokeny, které jsou v tokens.css beze změny).
   Breakpointy odpovídají prototypu: mob() <=760px, tab()/stack() <=1100/1150px.
   ========================================================================= */

img { max-width: 100%; }
button, a.mf-tile__btn, a.mf-hero__stage, a.mf-hero__cta, a.mf-pick { font: inherit; cursor: pointer; appearance: none; -webkit-appearance: none; background: none; border: 0; }

/* --- Header --- */
/* Byly tu puvodne 3 sloupce (1fr auto 1fr), ale header ma jen dva
   skutecne prvky -- logo a .mf-header__right (nav + kosik/prepinac).
   Prostredni sloupec tak zustaval prazdny a pravy dostaval jen
   poloviny sirky headeru at chtel cokoliv, takze se nav zbytecne brzy
   lamal na druhy radek, i kdyz vlevo od nej zbyvalo hodne mista. */
/* Vyska hlavicky je token: pouziva ji i zaporny margin pod hero, odsazeni
   mainu a scroll-margin galerie -- musi to byt vsude stejne cislo. */
:root{ --header-h:88px; }
.mf-header{
  position:sticky; top:0; z-index:40;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:var(--s-3);
  min-height:var(--header-h); padding:var(--s-2) var(--pad-x);
  background:var(--chrome); backdrop-filter:blur(8px); border-bottom:1px solid var(--paper-hairline);
}
.mf-header__logo{ grid-column:1; justify-self:start; display:flex; align-items:center; }
.mf-header__logo img{ height:36px; width:auto; display:block; }
[data-theme="noir"] .mf-header__logo img{ filter:invert(1); }
/* Nav uprostred, prepinace+skin vpravo -- puvodne bylo vsechno v jednom
   pravem sloupci (auto 1fr), takze se to na strednich sirkach zbytecne
   brzy tisklo k sobe. Treti sloupec dava navu vlastni stred bez ohledu
   na sirku praveho bloku. */
.mf-nav{ grid-column:2; justify-self:center; }
.mf-header__right{ grid-column:3; justify-self:end; display:flex; align-items:center; gap:var(--s-4); }
.mf-burger{
  display:none; align-items:center; justify-content:center; width:44px; height:44px;
  background:transparent; border:1px solid var(--paper-hairline); color:var(--sanctuary);
  font-size:var(--t-lead); line-height:1; transition:border-color var(--motion-state);
}

.mf-burger{ position:relative; }
.mf-burger__badge{
  position:absolute; top:-4px; right:-4px; min-width:16px; height:16px; padding:0 3px;
  border-radius:50%; background:var(--power); color:var(--ink);
  font-family:var(--font-body); font-size:10px; font-weight:600; line-height:16px; text-align:center;
}
.mf-burger:hover{ border-color:var(--power); }
.mf-nav{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-4); font-size:var(--t-body); }
.mf-nav a{ text-decoration:none; transition:color var(--motion-state), transform var(--motion-state); }
.mf-nav a:hover{ color:var(--fg-strong); transform:translateY(-2px); }
.mf-nav a.is-active{ color:var(--fg-strong); }
.mf-nav__sep{ width:1px; height:20px; background:var(--paper-hairline); }
.mf-cart-btn{ min-height:var(--touch-min); padding:0; background:transparent; border:0; color:var(--sanctuary); transition:color var(--motion-state), transform var(--motion-state); }
.mf-cart-btn:hover{ color:var(--fg-strong); transform:translateY(-2px); }
.mf-skin-toggle{
  position:relative; width:98px; height:30px; padding:0; background:var(--chrome-solid);
  border:1px solid var(--paper-hairline); display:flex; align-items:center;
  transition:border-color var(--motion-state), transform var(--motion-state);
}
.mf-skin-toggle:hover{ border-color:var(--power); transform:translateY(-2px); }
.mf-skin-toggle__thumb{ position:absolute; top:50%; left:2px; width:22px; height:22px; margin-top:-11px; background:var(--power); transition:left var(--motion-state); }
[data-theme="galerie"] .mf-skin-toggle__thumb{ left:calc(100% - 24px); }
/* Popisek prepinace ma stejnou typografii jako polozky navigace vedle nej --
   telo pisma, normalni rez, bez verzalek a bez rozpalovani. Drive to byl
   drobny letterspacovany kapitalkovy popisek, ktery vedle navigace pusobil
   jako cizi prvek. */
.mf-skin-toggle__label{ position:relative; z-index:1; font-family:var(--font-body); font-size:var(--t-small); font-weight:400; letter-spacing:normal; text-transform:none; color:var(--sanctuary); padding:0 10px; margin-left:auto; }
[data-theme="galerie"] .mf-skin-toggle__label{ margin-left:0; margin-right:auto; }


/* --- Prepinac jazyka CZ / EN (header + mobilni menu) ---
   Stejny vzor jako .mf-nav odkazy / .mf-skin-toggle vedle nej: zadny
   vlastni box, jen text s tlumenou/aktivni barvou -- drobny prvek, ktery
   designove splyva s hlavni linkou, misto ciziho pluginoveho widgetu. */
.mf-lang-toggle{ display:flex; align-items:center; gap:6px; font-family:var(--font-body); font-size:var(--t-small); }
.mf-lang-toggle__opt{ color:var(--sanctuary); text-decoration:none; transition:color var(--motion-state); }
.mf-lang-toggle__opt:hover{ color:var(--fg-strong); }
.mf-lang-toggle__opt.is-active{ color:var(--fg-strong); font-weight:600; pointer-events:none; }
.mf-lang-toggle__sep{ color:var(--paper-hairline); }

/* --- Prepinac meny CZK / EUR / USD -- stejny vzor jako .mf-lang-toggle,
   jen s vlastnim gap pred/za prvni polozkou (mala mezera navic od
   jazykoveho prepinace vedle). --- */
.mf-currency-toggle{ display:flex; align-items:center; gap:6px; margin-left:10px; font-family:var(--font-body); font-size:var(--t-small); }
.mf-currency-toggle__opt{ color:var(--sanctuary); text-decoration:none; transition:color var(--motion-state); }
.mf-currency-toggle__opt:hover{ color:var(--fg-strong); }
.mf-currency-toggle__opt.is-active{ color:var(--fg-strong); font-weight:600; pointer-events:none; }
.mf-currency-toggle__sep{ color:var(--paper-hairline); }

@media (max-width:1150px){
  .mf-burger{ display:flex; }
  .mf-nav{ display:none; }
  .mf-header__right > .mf-skin-toggle{ display:none; }
  .mf-header__right > .mf-lang-toggle{ display:none; }
  .mf-header__right > .mf-currency-toggle{ display:none; }
}

/* Mobilni menu -- stejna velikost jako ostatni polozky (nav odkazy tam maji
   font-family:var(--font-display); font-size:var(--t-lead)). */
.mf-mobile-nav .mf-lang-toggle{ font-family:var(--font-display); font-size:var(--t-lead); gap:10px; }
.mf-mobile-nav .mf-currency-toggle{ font-family:var(--font-display); font-size:var(--t-lead); gap:10px; margin-left:0; }

/* --- Mobilní menu --- */
.mf-mobile-nav{
  position:fixed; top:88px; right:16px; z-index:39; display:none; flex-direction:column; gap:var(--s-3);
  width:min(76vw, 300px); max-height:calc(100vh - 108px); overflow-y:auto;
  padding:var(--s-5) var(--s-5) var(--s-6); background:var(--chrome-solid); border:1px solid var(--paper-hairline);
  box-shadow:var(--shadow-canvas);
  font-family:var(--font-display); font-size:var(--t-lead); animation:barIn 200ms ease;
}
.mf-mobile-nav.is-open{ display:flex; }
/* Zamknuti scrollu pozadi, dokud je mobilni menu otevrene (viz app.js
   open/closeMobileNav) -- drive pod menu slo scrollovat dal, jen se na nej
   nedalo kliknout. --mf-scrollbar-w kompenzuje mizejici scrollbar, aby
   obsah vodorovne nepoposkocil. */
/* overflow:hidden jen na body, ne na html -- html s hidden overflow v
   nekterych prohlizecich (WebKit/Blink) rozbiji position:sticky u
   .mf-header, kdyz je stranka odscrollovana (hlavicka pak zmizi misto
   aby zustala pripnuta nahore). Stejny vzor uz pouziva body.mf-detail-open
   nize -- jen body, zadne html. */
html.mf-scroll-locked{ padding-right:var(--mf-scrollbar-w, 0px); }
html.mf-scroll-locked body{ overflow:hidden; }
/* Vse pod otevrenym mobilnim menu (hlavni obsah, paticka, skryte panely)
   se rozostri a ztmavi -- stejny princip jako scrim u kosiku, jen navic
   s blur. Hlavicka pred menu v DOM zustava ostra. */
@media (max-width:1150px){
  /* Drive tu byl blur(6px) na cely zbytek stranky -- na telefonu to znamena
     rasterizaci desitek fotek pri kazdem otevreni menu a viditelne sekani.
     Ztlumeni jasu dela tuz praci a je zdarma. */
  .mf-mobile-nav.is-open ~ *{ filter:brightness(.45); pointer-events:none; transition:filter 220ms ease; }
}
.mf-mobile-nav a{ min-height:var(--touch-min); text-decoration:none; display:flex; align-items:center; }
.mf-mobile-nav button{ align-self:flex-start; min-height:var(--touch-min); padding:0; background:transparent; border:0; color:var(--sanctuary); font-family:var(--font-display); font-size:var(--t-lead); }
/* Prepinac rezimu je taky <button> uvnitr menu, takze na nej dopadalo
   pravidlo vys: min-height 44 px pretlacilo jeho height 30 px, jezdec
   zustal prilepeny nahore a popisek 27px rozhodil rozvrzeni. Tady dostane
   vlastni rozmery -- vetsi nez v hlavicce, protoze se na nej na telefonu
   klika prstem. Pravidlo MUSI zustat az za .mf-mobile-nav button. */
.mf-mobile-nav .mf-skin-toggle{
  margin-top:var(--s-3); align-self:flex-start;
  width:120px; height:var(--touch-min); min-height:var(--touch-min);
  padding:0; border:1px solid var(--paper-hairline); border-radius:0;
  font-family:var(--font-body); font-size:var(--t-label);
}
.mf-mobile-nav .mf-skin-toggle__thumb{ width:32px; height:32px; margin-top:-16px; }
[data-theme="galerie"] .mf-mobile-nav .mf-skin-toggle__thumb{ left:calc(100% - 34px); }
.mf-mobile-nav .mf-skin-toggle__label{ font-size:var(--t-body); letter-spacing:normal; padding:0 var(--s-3); }

/* --- Galerie (hero carousel) --- */
#galerie{ display:flex; flex-direction:column; min-height:calc(100vh - 88px); }
@media (max-width:1100px){ #galerie{ min-height:0; } }
.mf-gal-head{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:var(--s-2) var(--s-5); padding:var(--s-6) var(--pad-x) var(--s-4); }
.mf-gal-head h2{ font-family:var(--font-display); font-weight:600; font-size:var(--t-h2); line-height:1.1; letter-spacing:-0.01em; }
.mf-gal-head__lede{ display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--s-2) var(--s-4); min-width:0; }
.mf-gal-head__lede p{ margin:0; color:var(--paper-soft); }
.mf-gal-head__counter{ white-space:nowrap; font-size:var(--t-label); font-weight:700; letter-spacing:.2em; color:var(--paper-soft); }
@media (max-width:1100px){ .mf-gal-head{ padding:var(--s-4) var(--pad-x) var(--s-3); } .mf-gal-head__counter{ display:none; } }
.mf-gal-body{ display:grid; grid-template-columns:280px 1fr; flex:1 1 auto; min-height:0; }
.mf-picks-col{ display:flex; flex-direction:column; min-width:0; max-width:100%; overflow:hidden; border-right:0; padding:0 var(--s-4) var(--s-4); }
.mf-picks{ display:flex; flex-direction:column; justify-content:center; gap:var(--s-1); flex:1; min-width:0; max-width:100%; overflow-y:auto; padding-bottom:var(--s-1); }
.mf-pick{
  display:flex; flex:none; align-items:center; gap:var(--s-3); width:100%; min-height:var(--touch-min);
  padding:var(--s-1) var(--s-2); background:transparent; border:0; border-left:2px solid transparent; color:var(--paper-soft); text-decoration:none;
  font-family:var(--font-body); font-size:var(--t-small); text-align:left; transition:background var(--motion-state), transform var(--motion-state);
}
.mf-pick:hover{ transform:translateY(-2px); background:var(--pick-bg); }
.mf-pick.is-active{ border-left-color:var(--power); color:var(--sanctuary); }
.mf-pick__thumb{ flex:none; display:block; width:28px; height:28px; background-color:var(--paper-hairline); }
.mf-pick__thumb img{ object-fit:contain; width:100%; height:100%; display:block; filter:brightness(.55); transition:filter 700ms ease; }
.mf-pick.is-active .mf-pick__thumb img{ filter:brightness(1); }
.mf-gal-all-link{ display:flex; align-self:flex-start; align-items:center; min-height:var(--touch-min); margin:auto 0 0 var(--s-2); padding:0; font-size:var(--t-body); text-decoration:none; border-bottom:1px solid var(--power); transition:transform var(--motion-state); }
.mf-gal-all-link:hover{ transform:translateY(-2px); }

/* Na mobilu/tabletu se sloupec s vyberem obrazu (mala miniatura + jmeno,
   pusobi jako textovy seznam) schova a necha mluvit jen velky hero obraz --
   presne jak zada prototyp ("jen obrazy, ne seznam"). Toto pravidlo MUSI
   byt az po zakladnich .mf-picks/.mf-gal-body pravidlech vyse, jinak ho
   pozdejsi nepodminene pravidlo se stejnou specificitou v cascade prebije
   (presne tenhle bug se tu driv stal). */
@media (max-width:1100px){
  .mf-gal-body{ grid-template-columns:1fr; }
  .mf-picks-col{ border-right:0; padding:0 var(--pad-x) var(--s-4); order:2; }
  .mf-hero{ order:1; }
  .mf-picks{ display:none; }
  /* Sloupec s vyberem se skryva, ale odkaz do mrizky ne -- bez nej neexistuje
     na mobilu z galerie zadna cesta dolu krome burger menu. */
  .mf-gal-all-link{ align-self:center; margin:0 auto; }
}
/* Telo galerie drzi stejny sloupec jako zbytek webu. Bez tohohle slo
   .mf-gal-body od kraje ke kraji, zatimco nadpis nad nim uz byl odsazeny
   pres --pad-x, takze vyber obrazu vlevo zacinal na hrane obrazovky a k
   nadpisu nesedel. Pouziva se --pad-center, ne --pad-x: pod 1440 px je
   nulove, takze uzsi desktop si nechava plnou sirku pro platno (jinak
   se odsazeni ukroji primo z obrazu -- na 1100 px to bylo videt hned).
   Levy padding vyberu se o stejnou hodnotu zmensuje, takze pod 1440 px
   zustava dnesnich 24 px a na sirokem monitoru klesne na nulu a seznam
   zacina presne pod nadpisem. */
@media (min-width:1101px){
  .mf-gal-body{ padding-inline:var(--pad-center); }
  .mf-picks-col{ padding:0 var(--s-4) var(--s-4) max(0px, var(--s-4) - var(--pad-center)); }
}
.mf-hero{ position:relative; min-width:0; max-width:100%; display:grid; grid-template-columns:44px 1fr 44px; align-items:center; gap:var(--s-4); padding:var(--s-4) clamp(12px,3vw,48px); overflow:hidden; }
@media (max-width:1100px){ .mf-hero{ padding:var(--s-2) clamp(12px,3vw,32px) var(--s-4); } }
.mf-hero__arrow{ width:100%; height:100%; max-height:60px; display:flex; align-items:center; justify-content:center; background:transparent; border:0; color:var(--sanctuary); transition:color var(--motion-state), transform var(--motion-state); }
.mf-hero__arrow:hover{ color:var(--power); transform:translateY(-2px); }
.mf-hero__arrow svg{ width:46%; height:46%; fill:currentColor; }
@media (min-width:1101px){ .mf-hero{ grid-template-columns:60px 1fr 60px; } .mf-hero__arrow{ max-height:76px; } }
.mf-hero__row{ display:flex; flex-direction:row-reverse; flex-wrap:nowrap; align-items:center; justify-content:center; gap:var(--s-5) var(--s-6); min-height:420px; min-width:0; }
@media (max-width:1100px){ .mf-hero__row{ flex-direction:column; min-height:0; gap:var(--s-3); } .mf-hero__stage{ order:1; } .mf-hero__info{ order:2; gap:var(--s-2); } }
.mf-hero__info{ flex:0 0 340px; min-width:0; width:100%; max-width:400px; display:flex; flex-direction:column; gap:var(--s-3); transition:opacity var(--motion-state); }
@media (max-width:1100px){ .mf-hero__info{ align-items:center; text-align:center; max-width:520px; } }
.mf-hero__eyebrow{ font-size:var(--t-label); font-weight:700; letter-spacing:.2em; color:var(--paper-soft); }
.mf-hero__title{ font-family:var(--font-title); font-weight:600; font-size:var(--t-h2); line-height:1.2; }
.mf-hero__sub{ font-family:var(--font-display); font-weight:500; font-size:var(--t-lead); color:var(--paper-soft); line-height:1.3; }
.mf-hero__size{ font-size:var(--t-small); color:var(--paper-soft); }
.mf-hero__price{ font-size:var(--t-lead); }
a.mf-hero__cta, button.mf-hero__cta{ align-self:flex-start; display:inline-flex; align-items:center; min-height:var(--touch-min); margin-top:var(--s-2); padding:0 var(--s-5); background:var(--power); border:0; color:var(--ink); text-decoration:none; font-family:var(--font-display); font-weight:600; font-size:var(--t-body); transition:transform var(--motion-state), background var(--motion-state); }
a.mf-hero__cta:hover, button.mf-hero__cta:hover{ transform:translateY(-2px); background:var(--illumination); }
@media (max-width:1100px){ a.mf-hero__cta, button.mf-hero__cta{ align-self:center; margin-top:var(--s-1); } .mf-hero__title{ font-size:var(--t-h3); } }
.mf-hero__stage{ position:relative; flex:1 1 auto; min-width:0; width:100%; display:flex; align-items:center; justify-content:center; height:auto; padding:var(--s-4); border:0; }
@media (max-width:1100px){ .mf-hero__stage{ padding:var(--s-2); } }
.mf-hero__stage img{ max-height:72vh; width:auto; height:auto; max-width:100%; object-fit:contain; box-shadow:var(--shadow-canvas); transition:opacity var(--motion-state), transform var(--motion-state); }
@media (max-width:1100px){ .mf-hero__stage img{ max-height:38vh; } }
/* Animace jedou na obalu .mf-canvas, ne na samotnem <img>. Diky tomu se
   stitek Prodano posouva a mizi spolu s obrazem -- driv zustaval stat na
   miste, zatimco platno pod nim odjelo, a chvili visel nad prazdnem.

   Zkraceno z 480/620ms. Puvodni casovani bylo pri proklikavani vyberu
   citelne jako cekani -- musi zustat pomalejsi nez rozhrani, ne pomale.
   Hodnoty musi zustat synchronni s heroCarousel() v app.js. */
.mf-hero__stage.is-anim-out-left .mf-canvas{ animation:slideOutLeft 300ms cubic-bezier(.4,0,.2,1) both; }
.mf-hero__stage.is-anim-out-right .mf-canvas{ animation:slideOutRight 300ms cubic-bezier(.4,0,.2,1) both; }
.mf-hero__stage.is-anim-in-left .mf-canvas{ animation:slideInLeft 380ms cubic-bezier(.4,0,.2,1) both; }
.mf-hero__stage.is-anim-in-right .mf-canvas{ animation:slideInRight 380ms cubic-bezier(.4,0,.2,1) both; }

.mf-detail__stage.is-nav-out-left .mf-canvas{ animation:slideOutLeft 200ms cubic-bezier(.4,0,.2,1) both; }
.mf-detail__stage.is-nav-out-right .mf-canvas{ animation:slideOutRight 200ms cubic-bezier(.4,0,.2,1) both; }
.mf-detail__stage.is-nav-in-left .mf-canvas{ animation:slideInLeft 260ms cubic-bezier(.4,0,.2,1) both; }
.mf-detail__stage.is-nav-in-right .mf-canvas{ animation:slideInRight 260ms cubic-bezier(.4,0,.2,1) both; }

/* Popisky (info panel) pri prepnuti obrazu -- fade misto instant swapu.
   Casovani sladene s existujicim slide obrazku (hero 480/620ms, detail 200/260ms). */
.mf-hero__info.is-fading-out{ animation:fadeOut 300ms cubic-bezier(.4,0,.2,1) both; }
.mf-hero__info.is-fading-in{ animation:fadeIn 380ms cubic-bezier(.4,0,.2,1) both; }
.mf-detail__info.is-fading-out,
.mf-detail__cta.is-fading-out{ animation:fadeOut 200ms cubic-bezier(.4,0,.2,1) both; }
.mf-detail__info.is-fading-in,
.mf-detail__cta.is-fading-in{ animation:fadeIn 260ms cubic-bezier(.4,0,.2,1) both; }

/* --- Serie (radky obrazu ze stejne serie, mezi Galerii a Obrazy) --- */
#serie{ display:flex; flex-direction:column; gap:var(--s-6); padding:var(--s-7) var(--pad-x); }
.mf-series-head h2{ font-family:var(--font-display); font-weight:600; font-size:var(--t-h2); line-height:1.1; letter-spacing:-0.01em; }
.mf-series-row{ display:flex; flex-direction:column; gap:var(--s-3); }
.mf-series-row__title{ font-family:var(--font-title); font-weight:600; font-size:var(--t-lead); color:var(--paper-soft); }
.mf-series-row__subtitle{ font-family:var(--font-display); font-weight:500; font-size:var(--t-body); line-height:1.3; color:var(--paper-soft); max-width:640px; }
.mf-series-row__desc{ font-family:var(--font-body); font-weight:400; font-size:var(--t-small); line-height:1.5; color:var(--paper-soft); max-width:640px; }
.mf-series-row__price{ display:block; margin-top:var(--s-2); font-size:var(--t-small); }
.mf-series-row__price--sold, .mf-tile__price--sold, .mf-hero__price--sold{ color:var(--mystic-on-dark, var(--paper-soft)); }
.mf-tile__caption{ font-size:var(--t-small); color:var(--paper-soft); }
.mf-series-row__track{ display:flex; gap:var(--s-4); overflow-x:auto; padding-bottom:var(--s-2); scroll-snap-type:x proximity; }
/* Jeden wheel-tick dokaze na kratkych tratich prehnat scrollLeft za
   fyzicky konec obsahu; bez tohle prekroceni chytne overscroll a posle
   ho jako normalni scroll strance ("jede to dal dolu"). Vodorovny smer
   staci -- svisly kanal tady neni v sazce. */
.mf-series-row__track{ overscroll-behavior-x:contain; }
/* Viewport drzi sipky vedle tratě, aniz by menil jeji vlastni box (grid s
   fixni vyskou medii pro ucari popisku, viz .mf-tile nize) -- proto je to
   samostatny obal okolo, ne totez co .mf-series-row__track. */
.mf-series-row__viewport{ position:relative; }
/* Nativni scrollbar schovany na vsech sirkach -- rada se ovlada tazenim
   (dotyk), koleckem pri hoveru (viz wheel listener v seriesSliders,
   app.js) nebo sipkami/tabem (focus zustava funkcni, jen bez viditelne
   listy). Duvod schovani: tenky sedy pruh sam o sobe nebyl dost jasne
   vodidko, ze rada pokracuje -- to ted rika probleskujici dlazdice u
   okraje (mobil) / sama moznost prejet koleckem (desktop). */
.mf-series-row__track{ scrollbar-width:none; }
.mf-series-row__track::-webkit-scrollbar{ display:none; }
/* Serie, ktera se cela vejde do sirky, se neposouva vubec -- jen sedi
   vycentrovana. Trida se nastavuje v JS podle skutecne namerene sirky
   (viz seriesSliders v app.js). Rada nema auto-drift -- posouva ji jen
   navstevnik, ne skript. */
/* Vycentrovani kratke rady, ktera se cela vejde, bylo puvodni zamer,
   ale odporovalo hlavnimu pravidlu sekce: vsechny rady zacinaji na
   stejne levé hrane jako nadpis "Serie". Na sirokem desktopu se vejde
   vic rad (Vlci maky, Shift, Starcase) a vycentrovane pak vizualne
   'utikaly' od nadpisu i od ostatnich rad. Zarovnani vlevo plati bez
   vyjimky. */
.mf-series-row__track.is-static{
  overflow-x:hidden; justify-content:flex-start; scroll-snap-type:none;
}

/* Dlazdice v serii maji pevnou VYSKU obrazove plochy (ne pevnou sirku
   jako v #obrazy) -- sirka jde podle pomeru stran obrazu (contain,
   zadny orez). Grid o dvou radcich: media (pevna vyska) a text
   (minimalni pevna vyska), aby popisky pod ruzne vysokymi/sirokymi
   platny zacinaly vzdy ve stejne vysce. Druhy radek smi narust delsim
   popiskem, nikdy se needne neoreze. */
.mf-series-row__track .mf-tile{
  display:grid;
  grid-template-rows:300px minmax(84px,auto);
  flex:0 0 auto;
  scroll-snap-align:start;
}
.mf-series-row__track .mf-tile__btn{ width:auto; justify-self:start; }
.mf-series-row__track .mf-tile__frame{ width:auto; height:300px; }

/* Sipky vedle rady -- vizualni potvrzeni, ze rada pokracuje (nejen tenky
   scrollbar, ktery je schovany), a klikatelna alternativa ke kolecku/tahu.
   Stejny vizualni jazyk jako sipky v detailu obrazu (.mf-detail__sidebtn).
   Vertikalne centrovane na obrazovou cast dlazdice (300px), ne na cely
   grid vcetne popisku, aby sedely opticky na stred platna. */
.mf-series-row__navbtn{
  position:absolute; top:150px; transform:translateY(-50%);
  width:44px; height:44px; z-index:2;
  display:flex; align-items:center; justify-content:center;
  background:var(--chrome-solid); border:1px solid var(--paper-hairline); color:var(--sanctuary);
  transition:border-color var(--motion-state), transform var(--motion-state), opacity var(--motion-state);
}
.mf-series-row__navbtn:hover{ border-color:var(--power); }
.mf-series-row__navbtn svg{ width:40%; height:40%; fill:currentColor; }
.mf-series-row__navbtn--prev{ left:8px; }
.mf-series-row__navbtn--next{ right:8px; }
.mf-series-row__navbtn[hidden]{ display:none; }

@media (max-width:760px){
  .mf-series-row__track .mf-tile{ grid-template-rows:230px minmax(84px,auto); }
  .mf-series-row__track .mf-tile__frame{ height:230px; }
  /* Napovedny orez dalsi dlazdice (width:74vw) na mobilu spis matl nez
     pomahal -- rada misto toho jede na celou sirku a ze pokracuje dal
     zase rikaji viditelne sipky (na desktopu jsou nenapadne, tady jsou
     hlavni ovladaci prvek vedle tahu prstem). Sipky se centruji na nizsi
     230px obrazovou cast dlazdice, ne na puvodni desktopovych 300px. */
  .mf-series-row__navbtn{ top:115px; }
  .mf-series-row__track:not(.is-static){ scroll-snap-type:x proximity; }
}
/* --- Obrazy (grid + pagination) --- */
#obrazy{ display:flex; flex-direction:column; gap:var(--s-7); padding:var(--s-8) var(--pad-x) var(--s-9); }
.mf-tiles-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:var(--s-4) var(--s-6); }
.mf-tiles-head h2{ font-family:var(--font-display); font-weight:600; font-size:var(--t-h2); line-height:1.1; letter-spacing:-0.01em; }
.mf-tiles-head p{ color:var(--paper-soft); max-width:640px; }
.mf-tiles-head__count{ font-size:var(--t-small); color:var(--paper-soft); white-space:nowrap; }
@keyframes mfShimmer{ 0%{ background-position:-120% 0; } 100%{ background-position:220% 0; } }
.mf-tiles{ position:relative; display:flex; flex-wrap:wrap; gap:var(--s-6); align-items:flex-end; justify-content:center; }
.mf-tile{ display:flex; flex-direction:column; gap:var(--s-3); padding-bottom:var(--s-2); }
@media (max-width:760px){
  .mf-tiles{ gap:var(--s-5); }
  /* Scoped na .mf-tiles (#obrazy) -- bez tohoto scope tohle pravidlo
     (puvodne psane jako holé .mf-tile) prebijelo i sirku dlazdic v
     #serie (.mf-series-row__track .mf-tile), ktere maji mit sirku podle
     pomeru stran obrazu, ne pevnych 50 %. Dusledek: obrazy v serii se
     na mobilu prekryvaly, protoze ramecek (frame) byl siroky podle
     obrazu, ale sama dlazdice (flex/grid box) byla vnucena na 50 %. */
  .mf-tiles .mf-tile{ width:calc(50% - var(--s-5)/2) !important; }
}
.mf-tile__btn{ display:block; width:100%; padding:0; background:transparent; border:0; transition:transform var(--motion-state); }
.mf-tile__btn:hover{ transform:translateY(-2px); }
.mf-tile__frame{ position:relative; display:block; width:100%; box-shadow:var(--shadow-canvas); background-color:var(--paper-hairline); background-image:linear-gradient(100deg, transparent 35%, var(--chrome-solid) 50%, transparent 65%); background-size:250% 100%; animation:mfShimmer 1.6s ease-in-out infinite; }
/* --- Obal platna -------------------------------------------------------
   Stitek Prodano je position:absolute, takze se rovnal podle nejblizsiho
   pozicovaneho predka. V galerii i v detailu to byla cela stage -- plocha
   mnohem vetsi nez samotny obraz -- a stitek proto visel v prazdnu nekde
   nad platnem, ne na nem. Tenhle obal se smrskne presne na rozmer obrazu,
   takze stitek sedi v jeho rohu. */
.mf-canvas{ position:relative; display:inline-flex; max-width:100%; line-height:0; }
.mf-canvas > img{ display:block; }
.mf-sold-badge{
  position:absolute; bottom:var(--s-3); left:var(--s-3); z-index:2;
  background:var(--ink-fixed); color:#FFFFFF;
  font-size:9.5px; font-weight:700; letter-spacing:.14em; line-height:1;
  padding:var(--s-1) var(--s-2); pointer-events:none; transition:opacity var(--motion-state);
}
/* --- Definujici dilo -- misto textoveho stitku uz jen zlata hvezdicka
   (viz mf_art_render_featured_badge v inc/render-helpers.php), vysvetleni
   je v FAQ. Zustava vpravo nahore, Prodano je ted vlevo dole, takze uz
   neni potreba resit kolizi rohu. --- */
.mf-featured-badge{
  position:absolute; top:var(--s-3); right:var(--s-3); z-index:2;
  color:var(--gold); line-height:0; cursor:default;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.55));
  transition:opacity var(--motion-state);
}
.mf-featured-badge svg{ display:block; width:18px; height:18px; }
/* Featured badge v detailu obrazu -- hvezdicka za nazvem (mf-detail__title
   / mf-hero__title), ne na samotnem obrazku. */
.mf-title-badge{
  display:inline-flex; vertical-align:middle; margin-left:var(--s-2);
  color:var(--gold); position:relative; top:-.08em;
}
.mf-title-badge svg{ display:block; width:.62em; height:.62em; }
/* Popisek u hvezdicky (mf-featured-badge / mf-title-badge) -- vykresluje
   ho JS (viz app.js) jako samostatny prvek pripojeny primo k <body>,
   position:fixed, mimo DOM strom hvezdicky. Duvod: kdyz hvezdicka sedi
   uvnitr kontejneru s overflow:hidden/auto (napr. sloupec vyberu vlevo),
   puvodni CSS ::after pristup se oriznul o hranici rodice bez ohledu na
   z-index -- absolutne pozicovany potomek nemuze prerust overflow rodice.
   Fixed pozice mimo strom rodicu a vysoky z-index tohle resi uplne.
   Bez stinu -- jen ostry obrys jako zbytek chromu stranky. */
.mf-tooltip{
  position:fixed; z-index:9999; opacity:0; pointer-events:none;
  background:var(--chrome-solid); color:var(--sanctuary);
  border:1px solid var(--paper-hairline);
  font-family:var(--font-body); font-size:var(--t-label); font-weight:400; line-height:1.4;
  padding:var(--s-2) var(--s-3); max-width:min(220px, calc(100vw - 32px)); text-align:left;
  transition:opacity var(--motion-state);
}
.mf-tooltip.is-visible{ opacity:1; }
/* Pri priblizeni obrazu v detailu stitek ustoupi -- v tu chvili se clovek
   diva na strukturu malby a cedule pres roh platna tam prekazi. Vrati se,
   jakmile mys odjede. */
.mf-detail__stage .mf-canvas:hover .mf-sold-badge{ opacity:0; }
/* Shimmer je jen cekaci stav. Po nacteni fotky musi zmiznout -- jinak u
   kazdeho obrazu, jehoz pomer stran se lisi od pomeru podle cm, blika
   donekonecna prouzek vedle platna. */
.mf-tile.is-loaded .mf-tile__frame{ animation:none; background-image:none; }
@media (prefers-reduced-motion: reduce){ .mf-tile__frame{ animation:none; } }
.mf-tile__frame img{ object-fit:contain; width:100%; height:100%; display:block; filter:brightness(var(--dim)) saturate(.9); transition:filter 700ms ease; }
.mf-tile__btn:hover .mf-tile__frame img{ filter:brightness(1) saturate(1); }
.mf-tile figcaption{ display:flex; flex-direction:column; gap:var(--s-2); opacity:0; transform:translateY(6px); transition:opacity var(--motion-enter), transform var(--motion-enter); }
.mf-tile.is-loaded figcaption{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .mf-tile figcaption{ transition:none; } }
.mf-tile__name{ font-family:var(--font-title); font-weight:600; font-size:var(--t-body); }
.mf-tile__size{ font-size:var(--t-small); color:var(--paper-soft); }
.mf-tile__price{ font-size:var(--t-small); }
.mf-pagination{ display:flex; flex-direction:column; align-items:center; gap:var(--s-3); padding-top:var(--s-5); border-top:1px solid var(--paper-hairline); }
.mf-pagination__more{ display:inline-flex; align-items:center; min-height:var(--touch-min); padding:0; background:transparent; border:0; border-bottom:1px solid var(--power); color:var(--sanctuary); font-family:var(--font-body); font-size:var(--t-body); transition:transform var(--motion-state); }
.mf-pagination__more:hover{ transform:translateY(-2px); }
.mf-pagination__more[hidden]{ display:none; }
.mf-pagination__range{ font-size:var(--t-small); color:var(--paper-soft); }

/* --- Příběh --- */
#pribeh{ background:var(--sanctuary); color:var(--ink); }
.mf-story{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:clamp(24px,4vw,96px); padding:var(--s-9) var(--pad-x); }
.mf-story__col{ display:flex; flex-direction:column; gap:var(--s-4); }
.mf-story__eyebrow{ font-size:var(--t-label); font-weight:700; letter-spacing:.2em; color:var(--ink-soft); }
.mf-story__col h2{ font-family:var(--font-display); font-weight:600; font-size:var(--t-h2); line-height:1.1; letter-spacing:-0.01em; }
.mf-story__col p{ line-height:1.5; color:var(--ink-soft); max-width:640px; }
.mf-story__scroll-wrap{ position:relative; max-width:640px; }
.mf-story__scroll{
  --story-fade-top:0px; --story-fade-bottom:0px; --story-fade-clear:0px;
  display:flex; flex-direction:column; gap:var(--s-4);
  max-height:clamp(220px, 46vh, 560px);
  /* POZOR: overscroll-behavior:contain plati jen dokud je box opravdu
     scrollovatelny uzivatelem (overflow-y:auto nize). Jakmile se nekde
     prepne na overflow:hidden, box porad zustane scroll containerem, ale
     uz se v nem neda tahnout prstem -- a contain zaroven zakaze predani
     gesta strance, takze tah po textu neudela vubec nic. Bud overflow
     nechat visible (jako .mf-detail__body na mobilu), nebo spolu s
     overflow:hidden vratit overscroll-behavior:auto (viz mobilni blok). */
  overflow-y:auto; overscroll-behavior:contain;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 var(--story-fade-top), #000 calc(100% - var(--story-fade-bottom)), transparent calc(100% - var(--story-fade-clear)), transparent 100%);
  mask-image:linear-gradient(to bottom, transparent 0, #000 var(--story-fade-top), #000 calc(100% - var(--story-fade-bottom)), transparent calc(100% - var(--story-fade-clear)), transparent 100%);
  scrollbar-width:none; -ms-overflow-style:none;
}
.mf-story__scroll::-webkit-scrollbar{ width:0; height:0; }
.mf-story__scroll.is-fade-top{ --story-fade-top:32px; }
.mf-story__scroll.is-fade-bottom{ --story-fade-bottom:88px; --story-fade-clear:30px; }
.mf-story__scroll:focus-visible{ outline:1px solid var(--ink-hairline); outline-offset:8px; }
/* Sipka je jen ukazatel (pointer-events:none), stejne jako u detailu obrazu --
   sedi na obalu, ne uvnitr scrolleru (maska je na textu, uvnitr by vybledla s nim).
   Tridu has-more prepina JS (updateStoryFade, sdilena funkce s detailem). */
.mf-story__scroll-wrap::after{
  content:''; position:absolute; left:50%; bottom:10px; width:9px; height:9px; margin-left:-5px;
  border-right:1.5px solid var(--ink-soft); border-bottom:1.5px solid var(--ink-soft);
  transform:rotate(45deg); opacity:0; transition:opacity 200ms ease; pointer-events:none;
}
.mf-story__scroll-wrap.has-more::after{ opacity:.8; animation:mfStoryHint 2s ease-in-out infinite; }
@media (max-width:1100px){
  /* Cely pribeh najednou je na mobilu prilis dlouhy -- misto scroll+fade
     boxu (ten je jen pro sirsi obrazovky, viz vyse) se text orizne na pevnou
     vysku (zhruba tretina), podobny princip jako u orezavani citaci v
     Referencich (.mf-ref-testimonial__quote / data-ref-toggle), jen misto
     -webkit-line-clamp obycejny max-height (viz duvod uvnitr pravidla nize)
     a vlastnim tlacitkem "Pokracovat ve cteni" (data-story-toggle). */
  .mf-story__scroll{
    /* Misto -webkit-line-clamp (vyzaduje display:-webkit-box) proste vyska --
       ten legacy box model na dotykovych zarizenich (ne jen iOS) obcas
       zabranoval prekleknuti tahu prstem na scroll stranky, i s overflow:
       hidden. Bezny flex box s omezenou vyskou tenhle problem nema. */
    max-height:480px; overflow:hidden;
    /* Tohle je ta oprava: s overflow:hidden zustava box scroll containerem,
       ale uzivatel v nem scrollovat nemuze. Zdedeny overscroll-behavior:
       contain pak spolknul tah prstem po textu a nepredal ho strance --
       stranka proto pri dotyku na pribeh nescrollovala. auto = gesto se
       normalne preleje na stranku. */
    overscroll-behavior:auto;
    -webkit-mask-image:none; mask-image:none;
  }
  .mf-story__scroll-wrap.is-expanded .mf-story__scroll{
    max-height:none; overflow:visible;
  }
  .mf-story__scroll-wrap::after{ display:none; }
  .mf-story__toggle{
    align-self:flex-start; display:inline-flex; align-items:center; min-height:var(--touch-min);
    padding:0; margin-top:var(--s-2); background:transparent; border:0;
    border-bottom:1px solid var(--power); color:inherit; font-family:var(--font-body);
    font-size:var(--t-small); cursor:pointer; transition:transform var(--motion-state);
  }
  .mf-story__toggle:hover{ transform:translateY(-2px); }
}
.mf-story__quote{ margin:var(--s-3) 0; padding-left:var(--s-4); border-left:2px solid var(--mystic); font-family:var(--font-display); font-weight:500; font-size:var(--t-h3); line-height:1.3; color:var(--ink); max-width:640px; }
.mf-story__photo{
  /* Zadne pozadi -- puvodni tmave var(--ph-dark) bylo jen mockup zastupny
     stav, dokud fotky nebyly nahrane. Skutecna fotka uz je vzdy, takze mezera
     po strankach (kdyz se pomer dalsi fotky ve slideru lisi od prvni, ktera
     drzi aspect-ratio boxu) prosviti proste sekci pod tim (--sanctuary),
     ne umely placeholder. Prelinani (viz .mf-story__photo--slider img) je
     tak jen mezi samotnymi fotkami. Fotka ma pevny pomer stran (aspect-ratio),
     takze v gridu nemuze stretch natahnout na vysku textoveho sloupce --
     bez align-self by tak visela nahore a pod ni zbyla prazdna mezera do
     konce radku. Center rozdeli tu mezeru rovnomerne nad/pod, misto aby
     byla cela dole. */
  position:relative; overflow:hidden; aspect-ratio:4 / 3; align-self:center;
  border:1px solid var(--ink-hairline); display:flex; align-items:center; justify-content:center;
}
/* Nativni pomer stran fotky -- box dostane aspect-ratio inline z render.php
   (podle skutecne sirky/vysky prvni fotky), tohle je jen zaloha pro pripad,
   ze by se nepodarilo rozmery zjistit. object-fit:contain misto cover --
   fotka se nikdy neorizne, stejne pravidlo jako u obrazu v galerii. */
.mf-story__photo img{ width:100%; height:100%; object-fit:contain; display:block; }
/* Autoprehravany fotoslider ateliéru (viz blocks/pribeh/render.php) --
   vic snimku nad sebou, crossfade resi cistě CSS keyframes generovane
   inline podle poctu fotek, animation-delay tady jen staggeruje start.
   Bez JS, bez sipek/tecek -- prehrava se poradne porad dokola samo. */
.mf-story__photo--slider img{ position:absolute; inset:0; opacity:0; animation-name:mfStoryPhotoFade; animation-timing-function:ease-in-out; animation-iteration-count:infinite; }
@media (prefers-reduced-motion: reduce){
  .mf-story__photo--slider img{ animation:none !important; opacity:0 !important; }
  .mf-story__photo--slider img:first-child{ opacity:1 !important; }
}

.mf-stats{ display:flex; flex-wrap:wrap; gap:var(--s-6) var(--s-8); padding:0 var(--pad-x) var(--s-9); }
.mf-stats__item{ flex:1 1 200px; display:flex; flex-direction:column; gap:var(--s-2); padding-top:var(--s-5); border-top:1px solid var(--ink-hairline); }
.mf-stats__item strong{ font-family:var(--font-display); font-weight:600; font-size:var(--t-h3); line-height:1.15; letter-spacing:-0.01em; color:var(--ink); font-variant-numeric:tabular-nums; }
.mf-stats__item span{ font-size:var(--t-small); line-height:1.4; color:var(--ink-soft); }

/* --- Kontakt --- */
#kontakt{ display:block; padding:var(--s-8) var(--pad-x); }
.mf-contact__col{ display:flex; flex-direction:column; gap:var(--s-5); }
.mf-contact__head{ display:flex; flex-direction:column; gap:var(--s-2); }
.mf-contact__head h2{ font-family:var(--font-display); font-weight:600; font-size:var(--t-h2); line-height:1.1; letter-spacing:-0.01em; }
.mf-contact__head p{ color:var(--paper-soft); }
.mf-form{ display:flex; flex-direction:column; gap:var(--s-4); }
.mf-contact__after{ margin:var(--s-3) 0 0; font-size:var(--t-small); color:var(--paper-soft); }
.mf-form label{ display:flex; flex-direction:column; gap:var(--s-2); font-size:var(--t-small); color:var(--paper-soft); }
.mf-form input, .mf-form textarea{ min-height:var(--touch-min); padding:0 var(--s-3); background:transparent; border:1px solid var(--paper-hairline); color:var(--sanctuary); font-family:var(--font-body); font-size:var(--t-body); }
.mf-form textarea{ padding:var(--s-3); resize:vertical; min-height:120px; }
/* Puvodne outline:none + zmena barvy ramecku. Zlata na tmavem hnede ma
   maly kontrast a samotna zmena barvy je pro cast lidi neviditelna --
   obrys musi zustat. */
.mf-form input:focus-visible, .mf-form textarea:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; border-color:var(--gold-50); }
.mf-form input:focus, .mf-form textarea:focus{ border-color:var(--gold-50); }
.mf-form__hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.mf-form button[type="submit"]{ align-self:flex-start; min-height:var(--touch-min); padding:0 var(--s-5); background:var(--gold); color:var(--ink-fixed); font-family:var(--font-display); font-weight:600; font-size:var(--t-body); border:0; transition:background var(--motion-state), transform var(--motion-state); }
.mf-form button[type="submit"]:hover{ background:var(--gold-hover); transform:translateY(-2px); }
.mf-form .mf-form__consent{ display:flex; flex-direction:row; align-items:center; gap:var(--s-2); font-size:var(--t-small); color:var(--paper-soft); }
.mf-form__consent input[type=checkbox]{
  appearance:none; -webkit-appearance:none;
  width:18px; height:18px; min-height:18px; margin:0; padding:0; flex:none;
  border:1px solid var(--paper-hairline); border-radius:0; background:transparent;
  position:relative; cursor:pointer;
}
.mf-form__consent input[type=checkbox]:checked{ background:var(--gold); border-color:var(--gold); }
.mf-form__consent input[type=checkbox]:checked::after{
  content:""; position:absolute; left:5px; top:2px; width:4px; height:9px;
  border:solid var(--ink-fixed); border-width:0 2px 2px 0; transform:rotate(45deg);
}
.mf-form__consent input[type=checkbox]:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; border-color:var(--gold-50); }
.mf-form__sent{ display:flex; flex-direction:column; gap:var(--s-2); padding:var(--s-5); border:1px solid var(--power); animation:fadeIn 260ms ease; }
.mf-facts{ display:flex; flex-direction:column; gap:var(--s-5); font-size:var(--t-small); color:var(--paper-soft); }
.mf-facts__item{ display:flex; flex-direction:column; gap:var(--s-2); }
.mf-facts__item strong{ font-family:var(--font-display); font-weight:600; font-size:var(--t-body); color:var(--sanctuary); }
.mf-facts__legal{ padding-top:var(--s-4); border-top:1px solid var(--paper-hairline); }

/* --- Footer --- */
/* Ctyri sloupce (kontakt, socialni site, fakturacni udaje, pravni), ktere
   se same skryvaji, kdyz pro ne neni obsah (viz footer.php) -- na sirokem
   viewportu vedle sebe, na uzsim se lame do dvou a pak jednoho sloupce.
   Cilem bylo, aby paticka sama vyplnila prostor misto tenke listy. */
.mf-footer{ padding:var(--s-6) var(--pad-x) var(--s-5); border-top:1px solid var(--paper-hairline); font-size:var(--t-small); }
/* --- Newsletter (FAQ + paticka) --- */
.mf-newsletter{ display:flex; flex-direction:column; gap:var(--s-4); }
.mf-newsletter__lede{ color:var(--paper-soft); line-height:1.6; max-width:520px; margin:0; }
.mf-newsletter__note{ opacity:.75; }
.mf-form--newsletter{ max-width:420px; }
.mf-footer__cols{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--s-6) var(--s-5);
}
@media (max-width:900px){ .mf-footer__cols{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:520px){ .mf-footer__cols{ grid-template-columns:1fr; gap:var(--s-5); } }
.mf-footer__col{ display:flex; flex-direction:column; gap:var(--s-2); min-width:0; }
.mf-footer__label{
  font-family:var(--font-display); font-weight:700; font-size:var(--t-label);
  letter-spacing:.18em; text-transform:uppercase; color:var(--fg-strong);
  margin-bottom:var(--s-1);
}
.mf-footer__col a{ color:var(--paper-soft); text-decoration:none; }
.mf-footer__col a:hover{ color:var(--fg-strong); }
/* Skutecne tlacitko (ne klikaci text) -- stejny vzorec jako zbytek CTA na
   webu (.mf-hero__cta, .mf-form button[type=submit]): plna zlata plocha,
   tmavy text, hover barva+posun. align-self, protoze sloupec paticky je
   flex column a bez toho by se tlacitko roztahlo na celou sirku sloupce. */
.mf-footer__newsletter-btn{
  align-self:flex-start; margin-top:var(--s-1); min-height:var(--touch-min);
  padding:0 var(--s-4); background:var(--power); color:var(--ink);
  font-family:var(--font-display); font-weight:600; font-size:var(--t-small);
  border:0; cursor:pointer;
  transition:background var(--motion-state), transform var(--motion-state);
}
.mf-footer__newsletter-btn:hover{ background:var(--illumination); transform:translateY(-2px); }
.mf-footer__newsletter-btn:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; }
.mf-footer__text{ color:var(--paper-soft); line-height:1.6; }
.mf-footer__bottom{
  display:flex; justify-content:flex-end; margin-top:var(--s-6); padding-top:var(--s-4);
  border-top:1px solid var(--paper-hairline);
}
.mf-footer__site{ color:var(--paper-soft); font-size:12px; text-decoration:none; }
a.mf-footer__site:hover{ color:var(--fg-strong); }

/* --- Detail overlay (dialog) --- */
.mf-detail{ position:fixed; inset:0; z-index:60; background-color:var(--shadow); background-image:var(--wall); background-repeat:no-repeat; background-size:cover; --wall-edge-scale:.5; display:none; grid-template-columns:1fr; grid-template-rows:auto auto auto; overflow-y:auto; padding:0; opacity:0; transition:opacity 220ms ease; }
.mf-detail.is-open{ display:grid; opacity:1; }
/* Samostatna stranka obrazu (single-product.php) sdili tridy s JS
   overlayem, ale neni to overlay -- normalni soucast stranky POD
   hlavickou webu, ne fixed vrstva pres cely viewport. Bez tohohle
   prepisu .mf-detail.is-open (position:fixed; inset:0; z-index:60)
   lezela nad hlavickou (z-index 40) a schovavala ji, i kdyz byla v
   HTML porad pritomna. Stejna specificita jako .mf-detail.is-open
   (dve tridy), vyhrava diky pozdejsi pozici v souboru. */
.mf-detail.mf-detail--page{
  position:static; inset:auto; z-index:auto;
  overflow-y:visible; opacity:1; transition:none;
}
/* Nav pruh (cislovani, sipky, zavrit) byl sticky top:0 stejne jako
   hlavicka -- pri scrollu by se s ni pralo o stejne misto. Na
   samostatne strance staci, aby jel s obsahem normalne. */
.mf-detail--page .mf-detail__nav{ position:static; top:auto; }
.mf-detail__nav{ position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:flex-end; gap:var(--s-3); padding:var(--s-3) clamp(16px,4vw,48px); background:var(--chrome); border-bottom:1px solid var(--paper-hairline); backdrop-filter:blur(8px); }
.mf-detail__counter{ font-size:var(--t-small); color:var(--paper-soft); margin-right:auto; }
.mf-detail__navbtn{ width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:transparent; border:1px solid var(--paper-hairline); color:var(--sanctuary); transition:border-color var(--motion-state), transform var(--motion-state); }
.mf-detail__navbtn:hover{ border-color:var(--power); transform:translateY(-2px); }
/* Sipky se skryvaji u jednoprvkove sady. Samotny atribut hidden by proti
   display:flex vyse v cascade prohral, proto explicitne. */
.mf-detail__navbtn[hidden]{ display:none; }
.mf-detail__navbtn svg{ width:40%; height:40%; fill:currentColor; }
/* min-height:64vh (strop, ktery uz ma i samotny obrazek pres max-height)
   rezervuje prostor jeste pred nactenim -- JS vklada <img> do overlaye
   bez width/height atributu, takze bez tohohle mela stage do nacteni
   nulovou vysku a po dotazeni obrazku se cela mrizka (obrazek, info
   sloupec, CTA) prepocitala a "skocila". */
.mf-detail__stage{ position:relative; display:flex; align-items:center; justify-content:center; min-width:0; padding:var(--s-5) clamp(16px,4vw,48px); overflow:hidden; min-height:64vh; }
.mf-detail__stage img{ max-height:64vh; max-width:100%; width:auto; height:auto; object-fit:contain; box-shadow:var(--shadow-canvas); transition:transform 200ms cubic-bezier(.2,.7,.3,1); will-change:transform; }
/* Klik na obraz detail zavira -- kurzor to musi rict dopredu, jinak to
   vypada jako lupa, ktera nahodou zhasne stranku. Krizek v kruhu, sviti
   pres tmavou i svetlou malbu, fallback zoom-out pro stara prohlizece.

   POZOR na specificitu: tokens.css ma [data-theme="galerie"] [data-zoom]:hover
   s kurzorem lupy (spravne pro dlazdice a hero -- tam klik znamena
   "podivat se bliz"). To je 0,3,0 a prebijelo to samotne
   .mf-detail__stage img[data-zoom] (0,2,1). Proto je selektor nize vazany
   na [data-detail], cimz se dostava na 0,3,1 a vyhrava.

   Plati zamerne JEN pro overlay. Na samostatne strance obrazu
   (.mf-detail--page) klik nic nezavira, tam lupa zustava. */
[data-detail] .mf-detail__stage img[data-zoom],
[data-detail] .mf-detail__stage img[data-zoom]:hover{
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='14' fill='rgba(21,17,12,.72)' stroke='%23F6F0E3' stroke-width='1.5'/%3E%3Cpath d='M11 11 L21 21 M21 11 L11 21' stroke='%23F6F0E3' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E") 16 16, zoom-out;
}
/* Sipky na dalsi/predchozi obraz sedi po stranach platna, ne v horni liste --
   maly chevron bez ramecku a bez pozadi. Obal .mf-detail__canvas je tu proto,
   ze renderStageMedia() v app.js prepisuje cely innerHTML .mf-detail__stage
   pri kazdem prepnuti obrazu; uvnitr stage by se tlacitka smazala. Canvas
   zabira stejnou grid-area jako stage (na strance, kde canvas neni, zustava
   grid-area primo na stage -- proto ji ma oboje).
   Legibilita bez pozadi: drop-shadow v barve podkladu (--shadow) udela kolem
   chevronu jemne haleni, takze je videt i pres svetlou i pres tmavou malbu,
   a pritom to porad nevypada jako tlacitko s vypni. */
.mf-detail__canvas{ position:relative; display:flex; min-width:0; }
.mf-detail__canvas .mf-detail__stage{ flex:1 1 auto; min-width:0; }
.mf-detail__sidebtn{
  position:absolute; top:50%; z-index:3;
  width:56px; height:56px;
  display:flex; align-items:center; justify-content:center;
  padding:0; background:transparent; border:0;
  color:var(--sanctuary); opacity:.65;
  filter:drop-shadow(0 0 5px var(--shadow));
  transition:opacity var(--motion-state), transform var(--motion-state);
}
.mf-detail__sidebtn svg{ width:22px; height:30px; fill:currentColor; }
.mf-detail__sidebtn[hidden]{ display:none; }
.mf-detail__sidebtn--prev{ left:var(--s-3); transform:translateY(-50%); }
.mf-detail__sidebtn--next{ right:var(--s-3); transform:translateY(-50%); }
/* Vetsi bocni odsazeni samotneho platna, aby sipky nesedely tesne u obrazu a
   mely kolem sebe prostor. Plati jen v overlayi (canvas na samostatne strance
   neexistuje), kde jsou sipky. */
.mf-detail__canvas .mf-detail__stage{ padding-inline:clamp(64px, 7vw, 120px); }
.mf-detail__sidebtn:hover{ opacity:1; }
.mf-detail__sidebtn--prev:hover{ transform:translateY(-50%) translateX(-3px); }
.mf-detail__sidebtn--next:hover{ transform:translateY(-50%) translateX(3px); }

.mf-detail__thumbs{ display:flex; flex-wrap:wrap; justify-content:center; gap:var(--s-2); padding:0 var(--s-3) var(--s-4); }
.mf-detail__thumb{ display:block; flex:none; width:64px; height:64px; padding:0; background-color:var(--paper-hairline); border:0; outline:1px solid transparent; transition:transform var(--motion-state); }
.mf-detail__thumb:hover{ transform:translateY(-2px); }
.mf-detail__thumb.is-active{ outline-color:var(--power); }
.mf-detail__thumb img{ object-fit:cover; width:100%; height:100%; display:block; filter:brightness(.6); transition:filter 400ms ease; }
.mf-detail__thumb.is-active img{ filter:brightness(1); }
/* Spodni odsazeni bylo var(--s-9) = 128px -- rezerva z doby, kdy byl box s
   cenou na mobilu sticky u spodni hrany a obsah pod nim musel mit kam zajet.
   Box uz je na mobilu v toku (position:static nize), takze z te rezervy bylo
   jen prazdne misto mezi koncem pribehu a specifikacemi. */
.mf-detail__info{ display:flex; flex-direction:column; gap:var(--s-4); min-width:0; width:100%; max-width:760px; margin:0 auto; padding:0 clamp(16px,4vw,48px) var(--s-4); }
.mf-detail__specs{ display:flex; flex-direction:column; gap:0; }
/* Vsechny udaje pod pribehem (technika, rok, rozmer, veta o certifikatu) jsou
   zamerne JEDNA typograficka skupina -- stejna rodina, velikost, rez i barva.
   Drive mely specifikace --t-small + letter-spacing:.04em, coz byl zbytek po
   verzalkach; jakmile verzalky zmizely, pusobilo to jen jako nesourody mix. */
.mf-detail__spec,
.mf-detail__provenance{ font-family:var(--font-body); font-size:var(--t-body); font-weight:400; line-height:1.5; letter-spacing:normal; color:var(--paper-soft); }
/* Veta o podpisu/certifikatu ma byt normalni text, ne drobne pismo pod cenou. */
.mf-detail__provenance{ margin:0; }
.mf-detail__title{ font-family:var(--font-title); font-weight:600; font-size:var(--t-h2); line-height:1.1; letter-spacing:-0.01em; }
/* Sdilet -- vedle tlacitka Pridat do kosiku/napsat, ne u nadpisu (tam
   byla ikona nepomerne velka, protoze 1.5em pocitalo z velikosti pisma
   h2). Pevna velikost v px, zarovnano na spodni hranu tlacitka. */
.mf-detail__buy-wrap{ display:flex; align-items:flex-end; gap:var(--s-3); }
.mf-detail__share{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:40px; height:40px; padding:0;
  background:transparent; border:1px solid var(--paper-hairline); color:var(--paper-soft); cursor:pointer;
  transition:color var(--motion-state), border-color var(--motion-state), transform var(--motion-state);
}
.mf-detail__share:hover{ color:var(--fg-strong); border-color:var(--power); transform:translateY(-2px); }
.mf-detail__share svg{ width:16px; height:16px; display:block; }
.mf-detail__sub{ font-family:var(--font-display); font-weight:500; font-size:var(--t-h3); line-height:1.25; color:var(--paper-soft); margin-top:calc(-1 * var(--s-2)); }
.mf-detail__body p{ color:var(--paper-soft); margin-bottom:var(--s-3); }
/* Nadpisy (h2-h6) vlozene do popisu pres editor jinak dedi vychozi svetlou
   barvu textu tmave sekce (--paper) a vedle odstavcu v --paper-soft pusobi
   jako chyba/zvyrazneni, ktere tam nepatri. Sjednoceno na stejny odstin. */
.mf-detail__body h1,
.mf-detail__body h2,
.mf-detail__body h3,
.mf-detail__body h4,
.mf-detail__body h5,
.mf-detail__body h6{ color:var(--paper-soft); margin:0 0 var(--s-2); }

/* --- Pribeh v detailu: vlastni scrollovaci oblast (10. 9. 2026, pate kolo) ---

   Predchozi reseni bylo "oriznout na pevnou vysku + sipka na rozbaleni".
   Melo tri vady: sipka byla pokazde jinde, casto uplne mimo viditelnou cast
   (musel se scrollovat cely panel, aby se vubec ukazala) a i potom bylo
   potreba jeste kliknout. Ted je pribeh sam scrollovatelny box s pevnou
   vyskou:
     - dolni hrana je VZDY na stejnem miste (spodek boxu), ne podle toho,
       kde zrovna skoncil text
     - cte se scrollem, zadny klik navic, zadny scrollbar
     - specifikace/cena pod nim drzi konstantni pozici u vsech obrazu
     - v JS se nedopocitava zadna vyska, takze layout uz pri nacteni neposkakuje

   Fade na obou hranach je zaroven ukazatel scrollu: nahore se objevi az kdyz
   je co odscrollovane, dole zmizi, jakmile jsi na konci (tridy prepina
   updateStoryFade v app.js -- meni se jen maska, nikdy ne layout; zadny
   prechod, transition pres @property se v nekterych stavech zasekne na nule
   a fade pak vubec nenabehne). Diky tomu
   nikdy nevybleda prvni ani posledni radek, jen text, ktery skutecne
   pokracuje za hranou. Maska drzi u hran boxu, protoze mask-image se
   aplikuje na vykresleny box, ne na scrollovany obsah. */
/* Odsazeni titulku od horni hrany. Je to promenna, protoze o stejnou hodnotu
   se musi zkratit i pribehovy box nize -- jinak by info sloupec pretekl a zase
   vznikl skryty druhy scroller. */
.mf-detail{ --detail-info-top:22vh; }
.mf-detail.mf-detail--page{ --detail-info-top:var(--s-6); }
.mf-detail__body-wrap{ position:relative; }
.mf-detail__body{
  --detail-fade-top:0px;
  --detail-fade-bottom:0px;
  --detail-fade-clear:0px;
  /* Vyska: co nejvic dolu k boxu s cenou, ale s odstupem. Samotne vh nejde --
     CTA radek a titulek ukrajeji pevnou cast vysky, takze na nizke obrazovce by
     to preteklo (a info sloupec by zase zacal scrollovat) a na vysoke by to
     zbytecne setrilo. Proto min() s odpoctem te pevne casti. */
  max-height:clamp(240px, min(72vh, calc(100vh - var(--detail-info-top) - 460px)), 1080px);
  overflow-y:auto;
  overscroll-behavior:contain;
  /* Posledni --detail-fade-clear px je uplne pruhlednych, ne jen vyblednutych:
     v tom pruhu sedi sipka a potrebuje cisty prostor, jinak lezi na sotva
     viditelnem textu a pusobi to jako nepovedeny orez. */
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 var(--detail-fade-top), #000 calc(100% - var(--detail-fade-bottom)), transparent calc(100% - var(--detail-fade-clear)), transparent 100%);
  mask-image:linear-gradient(to bottom, transparent 0, #000 var(--detail-fade-top), #000 calc(100% - var(--detail-fade-bottom)), transparent calc(100% - var(--detail-fade-clear)), transparent 100%);
  scrollbar-width:none;
  -ms-overflow-style:none;
}
/* Sipka dole je UKAZATEL, ne tlacitko (pointer-events:none) -- fade sam o sobe
   nebyl vzdycky na prvni pohled jasny signal, ze text pokracuje. Sedi na obalu,
   ne uvnitr scrolleru: maska je na samotnem textu, takze uvnitr by vybledla
   spolu s nim. Tridu has-more prepina updateStoryFade v app.js, mizi tedy ve
   chvili, kdy jsi na konci. Utlumeny pohyb resi globalni pravidlo
   prefers-reduced-motion v tokens.css (animation:none), sipka zustane staticka. */
.mf-detail__body-wrap::after{
  content:'';
  position:absolute; left:50%; bottom:10px; width:9px; height:9px; margin-left:-5px;
  border-right:1.5px solid var(--paper-soft); border-bottom:1.5px solid var(--paper-soft);
  transform:rotate(45deg);
  opacity:0; transition:opacity 200ms ease;
  pointer-events:none;
}
.mf-detail__body-wrap.has-more::after{ opacity:.8; animation:mfStoryHint 2s ease-in-out infinite; }
@keyframes mfStoryHint{
  0%, 100%{ transform:translateY(0) rotate(45deg); }
  50%{ transform:translateY(4px) rotate(45deg); }
}
.mf-detail__body.is-fade-top{ --detail-fade-top:32px; }
.mf-detail__body.is-fade-bottom{ --detail-fade-bottom:88px; --detail-fade-clear:30px; }
/* Box je scrollovatelny, takze na nej musi jit i z klavesnice (tabindex=0 v
   sablonach). Ramecek jen pri skutecne klavesove navigaci. */
.mf-detail__body:focus-visible{ outline:1px solid var(--paper-hairline); outline-offset:8px; }
/* Scrollbar (ani u info sloupce) se schvalne nezobrazuje -- signalem, ze
   text pokracuje, je fade, ne postranni pruh. */
.mf-detail__body::-webkit-scrollbar,
.mf-detail__info::-webkit-scrollbar{ width:0; height:0; }
.mf-detail__info{ scrollbar-width:none; -ms-overflow-style:none; }
/* Na mobilu se uvnitr boxu nescrolluje -- vnoreny scroll v uz scrollovane
   strance je na dotyku otravny a neni tam k nicemu: cena/CTA je na mobilu
   stejne sticky u spodni hrany, takze pribeh muze tect cely a pozici ceny to
   neovlivni. Fade se vypne sam, protoze neni co scrollovat. */
@media (max-width:1100px){
  .mf-detail__body{ max-height:none; overflow:visible; }
  /* Bez tohohle grid pri kratkem obsahu rozdeli zbylou vysku mezi auto radky
     (align-content se chova jako stretch) a mezi obrazem, textem a cenou
     vzniknou mezery, ktere v CSS nikde nejsou napsane. */
  .mf-detail{ align-content:start; }
}
/* Vetsi spodni odsazeni: na mobilu je box sticky u spodni hrany a cena s
   tlacitkem sedely tesne na kraji obrazovky (a na telefonech s gesty i pod
   spodni listou prohlizece). env(safe-area-inset-bottom) prida jeste rezervu
   podle konkretniho zarizeni, na desktopu se cele pravidlo prepisuje. */
.mf-detail__cta{ position:sticky; bottom:0; z-index:2; display:flex; flex-direction:column; gap:var(--s-4); margin-top:var(--s-4); padding:var(--s-4) clamp(16px,4vw,48px) calc(var(--s-6) + env(safe-area-inset-bottom)); background:var(--chrome-solid); border-top:1px solid var(--paper-hairline); }
/* Udaje pod pribehem tvori JEDEN sevreny blok: mezery mezi radky delá jen
   line-height, zadne dodatecne gapy -- proto gap:0 u .mf-detail__meta i
   .mf-detail__specs. Ctyri radky (technika+rozmer / rok / signatura /
   certifikat) tak maji stejny rytmus, i kdyz jsou ve dvou ruznych elementech. */
.mf-detail__meta{ display:flex; flex-direction:column; gap:0; }
/* Cena ma vlastni radek nad tlacitkem, vse zarovnane na jeden levy okraj --
   drive stala cena a tlacitko vedle sebe, coz rozbijelo hierarchii sloupce. */
.mf-detail__buy{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--s-3); }
.mf-detail__price{ font-family:var(--font-display); font-weight:500; font-size:var(--t-h3); white-space:nowrap; }
.mf-detail__addbtn{ min-height:var(--touch-min); padding:0 var(--s-5); background:var(--gold); color:var(--ink-fixed); font-family:var(--font-display); font-weight:600; font-size:var(--t-body); white-space:nowrap; border:0; transition:background var(--motion-state), transform var(--motion-state), box-shadow var(--motion-state); }
.mf-detail__addbtn:hover{ background:var(--gold-hover); transform:translateY(-2px); }
/* Stav po pridani do kosiku ("Zobrazit kosik") -- jedine misto na webu
   s fialovou vyplni tlacitka misto zlate. Zamerne: zlata je vyhrazena
   pro akci "koupit", fialova tu oznacuje zmenu stavu (uz je v kosiku),
   ne novou vyzvu k akci. Kratky pulz pri prepnuti, aby zmena tlacitka
   (jinak jen zmena textu) byla postrehnutelna, ne bleskovka. */
.mf-detail__addbtn[data-cart-added="1"]{
  /* DULEZITE: --mystic neni fixni brand barva, je to "naladovy" token,
     ktery se v "galerie" skinu preklopi ze tmave (#4B135E) na SVETLOU
     levandulovou (#d8c8e2) -- viz tokens.css, [data-theme="galerie"]. Proto
     tu NELZE pouzit var(--mystic): v galerie skinu by tlacitko zesvetlalo
     a vypadalo jako spatne nastaveny/chybejici token. Tohle je jediny
     fialovy prvek na webu se zamerne PEVNOU barvou nezavislou na skinu --
     stejny princip jako --cursor-line (viz sekce Kurzor nize v tomto
     souboru), ktery je tez schvalne mimo prepinac rezimu. */
  background:#4B135E; color:#F6F0E3;
  animation:mfAddedPulse 420ms var(--motion-enter);
}
.mf-detail__addbtn[data-cart-added="1"]:hover{ background:#4B135E; box-shadow:0 0 0 2px rgba(246,240,227,.35) inset; transform:translateY(-2px); }
@keyframes mfAddedPulse{
  0%{ transform:scale(1); }
  40%{ transform:scale(1.06); }
  100%{ transform:scale(1); }
}
@media (prefers-reduced-motion:reduce){
  .mf-detail__addbtn[data-cart-added="1"]{ animation:none; }
}
/* Prodany obraz v detailu: misto ceny tichy stitek, pod nim cesta napsat
   autorovi. Drive tu bylo tlacitko na reprodukci -- to z webu zmizelo. */
.mf-detail__soldnote{ font-family:var(--font-display); font-weight:600; font-size:var(--t-lead); color:var(--mystic-on-dark, var(--paper-soft)); }
/* Vlastni obsah uvodni obrazovky (vnorene bloky). Sirka drzi text ctivy,
   zarovnani kopiruje zbytek clony. */
/* Vizualne sekundarni protejsek .mf-detail__addbtn (stejna velikost --
   touch-min vyska, s-5 padding, t-body pismo -- jen bez zlate vyplne),
   aby prodane dilo bylo stejne vyrazna vyzva k akci jako dostupne. Drive
   to byl nenapadny podtrzeny textovy odkaz uplne dole. */
/* Stejny vzhled jako .mf-hero__cta ("Podivat se bliz"). Puvodni varianta
   mela pruhledne pozadi + hover background:var(--paper-soft) -- ve svetlem
   skinu je --paper-soft tmava barva a --sanctuary (text) taky tmava, takze
   po najeti byl text na tmavem pozadi necitelny. */
.mf-detail__askbtn{
  min-height:var(--touch-min); padding:0 var(--s-5);
  background:var(--power); border:0; color:var(--ink);
  font-family:var(--font-display); font-weight:600; font-size:var(--t-body);
  white-space:nowrap; transition:transform var(--motion-state), background var(--motion-state);
}
.mf-detail__askbtn:hover{ transform:translateY(-2px); background:var(--illumination); }
/* .mf-canvas je inline-flex bez vlastni sirky -- u obrazku to nevadi
   (rozmery da intrinsicni velikost <img>), ale u videa je width:100%
   dole kruhova zavislost (dite chce procenta z rodice, ktery se sam
   snazi zabalit podle obsahu) a v nekterych prohlizecich to spadne na
   0. Kdyz .mf-canvas obsahuje video, potrebuje pevny zaklad sirky. */
.mf-canvas:has(.mf-detail__video){ width:min(900px, 100%); }
.mf-detail__video{ position:relative; width:100%; max-width:900px; aspect-ratio:16/9; background:#000; box-shadow:var(--shadow-canvas); margin:0 auto; }
.mf-detail__video img{ width:100%; height:100%; object-fit:cover; display:block; opacity:.78; }
.mf-detail__video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.mf-detail__playbtn{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.5); color:#fff; transition:transform var(--motion-state), background var(--motion-state); }
.mf-detail__playbtn:hover{ background:var(--power); transform:translate(-50%,-50%) scale(1.06); }
.mf-detail__playbtn svg{ width:38%; height:38%; fill:currentColor; margin-left:3px; }
.mf-detail__thumb--video{ position:relative; }
.mf-detail__thumb-play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.mf-detail__thumb-play::after{ content:''; width:0; height:0; border-style:solid; border-width:6px 0 6px 10px; border-color:transparent transparent transparent #fff; filter:drop-shadow(0 0 2px rgba(0,0,0,.8)); }
@media (max-width:1100px){
  .mf-detail.is-open{ display:flex; flex-direction:column; }
  .mf-detail.is-open > *{ flex-shrink:0; }
  .mf-detail__cta{ position:static; margin-top:var(--s-3); box-shadow:none; }
  .mf-detail__cta.is-pinned{ position:fixed; left:0; right:0; bottom:0; z-index:5; box-shadow:0 -4px 16px rgba(0,0,0,.35); }
  .mf-detail__thumb{ width:44px; height:44px; }
  .mf-detail__nav{ position:absolute; top:0; left:0; right:0; height:0; padding:0; margin:0; background:none; border:0; backdrop-filter:none; pointer-events:none; overflow:visible; }
  .mf-detail__counter{ display:none; }
  /* Vsechny tri musi mit aspon 44x44 px -- driv 36 a 32. */
  .mf-detail__navbtn{ pointer-events:auto; position:absolute; top:30vh; transform:translateY(-50%); width:var(--touch-min); height:var(--touch-min); z-index:3; background:var(--chrome-solid); border-radius:0; border:none; backdrop-filter:blur(8px); }
  .mf-detail__navbtn[data-detail-prev]{ left:8px; }
  .mf-detail__navbtn[data-detail-next]{ right:8px; }
  .mf-detail__navbtn[data-detail-close]{ position:fixed; top:8px; right:8px; left:auto; transform:none; width:var(--touch-min); height:var(--touch-min); background:var(--chrome-solid); border-color:var(--paper-soft); }
  .mf-detail__navbtn[data-detail-close] svg{ width:34%; height:34%; }
}
@media (min-width:1101px){
  .mf-detail{
    grid-template-columns: minmax(320px,1.35fr) 88px minmax(360px,560px);
    grid-template-rows: 1fr auto;
    grid-template-areas: "stage thumbs info" "stage thumbs cta";
    align-items:stretch;
    padding:0;
  }
  /* Na samostatne strance (position:static, viz .mf-detail.mf-detail--page
     vyse) nema grid definovanou vysku kontejneru, takze "1fr" rada prestava
     byt zlomek pevne vysky a misto toho se rovna nejvyssimu sloupci --
     dlouhy pribeh v "info" pak natahoval i "stage" (obraz) na stejnou
     vysku pres align-items:stretch. Projevovalo se to jako skok layoutu
     pri otevreni /obrazy/{slug}/ (obraz nejdriv velky, pak se zmensil,
     jakmile JS dopocital oriznuti pribehu). Na strance kazdy sloupec
     roste podle sveho vlastniho obsahu, obraz uz na delce textu nezavisi. */
  .mf-detail.mf-detail--page{ align-items:start; }
  /* V overlayi je titulek zakotveny nahore, aby u kazdeho obrazu zacinal na
     stejnem miste (proklikava se mezi nimi). Na samostatne strance se mezi
     obrazy neprepina, tam vypada lip vycentrovani k obrazu. */
  .mf-detail--page .mf-detail__info{ align-self:center; }
  .mf-detail__nav{
    position:fixed; top:var(--s-4); right:var(--s-5); left:auto; z-index:61;
    background:transparent; border:0; backdrop-filter:none; padding:0; justify-content:flex-end;
  }
  /* Nav na desktopu visi primo nad platnem v plnem jasu. S pruhlednym
     pozadim a hairline ramecke (kryti 14 %) byl krizek pres svetlejsi
     malbu neviditelny -- tlacitka proto dostavaji vlastni tmavy podklad,
     stejny jako lista v hlavicce. */
  .mf-detail__nav .mf-detail__navbtn{
    background:var(--chrome-solid);
    border-color:var(--paper-soft);
    backdrop-filter:blur(8px);
  }
  .mf-detail__nav .mf-detail__navbtn[data-detail-close] svg{ width:34%; height:34%; }
  /* Bez vlastniho tmaveho podkladu jako tlacitka vedle -- cislovani je jen
     text, chip pozadi pusobilo jako zbytecny box navic. Bez text-shadow
     (Misha 2026-09-21) -- stin pusobil spinave. */
  .mf-detail__counter{
    margin-right:var(--s-2);
  }
  /* grid-area drzi obal (canvas), pokud existuje; na samostatne strance
     canvas neni a grid-area musi zustat primo na stage. Obe deklarace vedle
     sebe se nebijou -- stage uvnitr canvasu neni grid item, tam se ignoruje. */
  .mf-detail__canvas{ grid-area:stage; }
  .mf-detail__stage{ grid-area:stage; height:100%; }
  .mf-detail__stage img{ max-height:82vh; }
  .mf-detail__thumbs{
    grid-area:thumbs; flex-direction:column; flex-wrap:wrap; align-items:center;
    align-self:center; justify-content:center; padding:0; overflow-y:auto; max-height:100%;
  }
  /* Drive tu bylo padding-top:25vh (aby titulek zacinal zhruba ve ctvrtine
     vysky, opticky proti obrazu). S pevnou vyskou pribehoveho boxu ale
     odsazeni + titulek + box dohromady prerostly vysku radku, takze info
     sloupec sam o sobe zacal scrollovat -- druhy, skryty scroller vedle toho
     pribehoveho. Vycentrovani udela opticky totez, ale podle skutecne vysky
     obsahu, takze uz nic nepreteka a scrolluje se jen uvnitr pribehu. */
  .mf-detail__info{
    grid-area:info; align-self:start; max-width:none; width:100%; margin:0;
    max-height:100%; overflow-y:auto; overscroll-behavior:contain;
    /* Vertikalni odsazeni je tu proto, ze na samostatne strance rostou radky
       podle obsahu -- u dlouheho pribehu urcuje vysku radku prave info sloupec,
       takze vycentrovani uz zadny prostor nevytvori a text by koncil tesne nad
       specifikacemi. V overlayi (pevna vyska kontejneru) se to jen odecte z
       prostoru, ktery stejne zbyva. */
    padding:var(--detail-info-top) clamp(24px,3vw,56px) var(--s-7) var(--s-6);
  }
  .mf-detail__cta{
    grid-area:cta; align-self:start; position:static; flex-direction:column; align-items:flex-start;
    background:transparent; border-top:0; box-shadow:none; margin-top:var(--s-5);
    padding:0 clamp(24px,3vw,56px) var(--s-6) var(--s-6);
  }
}
body.mf-detail-open{ overflow:hidden; }

/* --- Košík (slide-out panel) --- */
.mf-cart-panel{ position:fixed; top:0; right:0; bottom:0; width:min(420px,100vw); z-index:65; background:var(--chrome-solid); border-left:1px solid var(--paper-hairline); display:flex; flex-direction:column; transform:translateX(100%); transition:transform 260ms ease; }
.mf-cart-panel.is-open{ transform:translateX(0); }
.mf-cart-panel__scrim{ position:fixed; inset:0; z-index:64; background:rgba(0,0,0,.5); opacity:0; pointer-events:none; transition:opacity 260ms ease; }
.mf-cart-panel__scrim.is-open{ opacity:1; pointer-events:auto; }
.mf-cart-panel__head{ display:flex; align-items:center; justify-content:space-between; padding:var(--s-4) var(--s-5); border-bottom:1px solid var(--paper-hairline); }
.mf-cart-panel__head h2{ font-family:var(--font-display); font-weight:600; font-size:var(--t-h3); }
.mf-cart-panel__close{ width:40px; height:40px; background:transparent; border:1px solid var(--paper-hairline); color:var(--sanctuary); }
.mf-cart-panel__body{ flex:1; overflow-y:auto; padding:0 var(--s-5); }
.mf-cart-row{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-3); padding:var(--s-4) 0; border-top:1px solid var(--paper-hairline); }
.mf-cart-row img{ width:64px; height:64px; object-fit:contain; }
.mf-cart-row__meta{ flex:1 1 140px; min-width:120px; display:flex; flex-direction:column; gap:var(--s-1); }
.mf-cart-row__name{ font-family:var(--font-title); font-weight:600; font-size:var(--t-body); }
.mf-cart-row__price{ font-size:var(--t-body); white-space:nowrap; }
.mf-cart-row__remove{ min-height:36px; padding:0 var(--s-2); background:transparent; border:0; color:var(--paper-soft); font-size:var(--t-small); text-decoration:underline; }
.mf-cart-panel__foot{ padding:var(--s-4) var(--s-5) var(--s-5); border-top:1px solid var(--paper-hairline); display:flex; flex-direction:column; gap:var(--s-3); }
.mf-cart-panel__total{ display:flex; justify-content:space-between; align-items:baseline; }
.mf-cart-panel__checkout{ display:flex; align-items:center; justify-content:center; min-height:var(--touch-min); padding:0 var(--s-5); background:var(--gold); color:var(--ink-fixed); text-decoration:none; font-family:var(--font-display); font-weight:600; border:0; transition:background var(--motion-state), transform var(--motion-state); }
.mf-cart-panel__checkout:hover{ background:var(--gold-hover); transform:translateY(-2px); }
.mf-cart-panel__empty{ padding:var(--s-6) 0; color:var(--paper-soft); }

/* --- Welcome gate (non-blocking) ------------------------------------
   Clona pred vstupem do galerie. Je svetla vzdy, i pri tmavem rezimu --
   sadu svetlych tokenu prebira .mf-welcome primo v tokens.css. Pozadi je
   tedy stejna vineta jako na zbytku webu, jen ve svetle variante.
   Barvy: na svetle plose je text --sanctuary (ve svetlem skinu tmavy),
   tlumeny text --paper-soft. --ink patri naopak do tmavych sekci. */
.mf-welcome{
  /* Vrstva PRES stranku (ne sekce v toku): diky tomu galerie pod ni pri
     odchodu hero nikam neuhne -- posouva se jen obsah hero. Hero se
     neschovava scrollem samo od sebe: jeden pohyb koleckem/prstem ho posle
     pryc celym prechodem (app.js), stejnym pohybem nahoru na uplnem vrcholu
     stranky se vrati. Zadne mezistavy. */
  position:fixed; inset:0; z-index:90;
  /* Pojistka: nic z hero nesmi pretect do hlavicky a galerie pod ni.
     clip (ne hidden) -- nedela z hero scroll kontejner. */
  overflow:clip;
  display:flex; align-items:center; justify-content:center;
  /* Clona ma vlastni, uzsi odsazeni -- nedrzi --pad-x jako zbytek webu.
     Duvod: --pad-x na sirokem monitoru narusta az na stovky px (stahuje
     obsah do sloupce 1440 px), coz je spravne pro cteni stranky, ale clona
     je jeden obraz pres celou obrazovku a tam to jen ubira misto.
     Zdola nic: snimek stoji primo na spodni hrane okna. */
  --welcome-pad-x:clamp(20px,3vw,56px);
  padding:var(--s-5) var(--welcome-pad-x) 0;
  align-items:stretch;
  background-color:var(--shadow); background-image:var(--wall);
  background-repeat:no-repeat; background-size:cover;
  color:var(--sanctuary);
}
/* Dva sloupce: snimek a text. minmax(0,...) drzi obrazek smrstitelny, aby
   na uzsim okne nepretlacil textovy sloupec. */
.mf-welcome__inner{
  /* Snimek dostava dve tretiny sirky. Neni to jen estetika: obrazek ma pomer
     skoro 1:1, takze pri uzkem sloupci ho zaskrtil max-width driv, nez se
     projevila nastavena vyska, a nastaveni velikosti pak smerem nahoru
     nedelalo nic. */
  display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr);
  align-items:center; gap:clamp(24px,5vw,72px);
  width:100%; max-width:min(1680px, 100%);
}
/* Snimek stoji na spodni hrane: sloupec je pres celou vysku a obrazek se
   v nem zarovnava dolu. Textovy sloupec zustava svisle na stredu. */
.mf-welcome__figure{ margin:0; min-width:0; align-self:stretch; display:flex; align-items:flex-end; justify-content:flex-end; }
/* Snimek je vyriznuty a stin uz ma v sobe, takze zadny ramecek ani box-shadow.
   contain, nikdy cover -- obraz na nem se nesmi oriznout. */
.mf-welcome__shot{
  /* Vysku ridí --mf-shot-size (procenta vysky okna) z editoru, sirka se
     dopocita podle pomeru. max-width hlida, aby siroky snimek nepretekl
     sloupec na uzsim okne. */
  display:block; height:calc(var(--mf-shot-size, 88) * 1svh); width:auto;
  /* Strop na vysku sloupce: pri nastaveni 100 % by snimek jinak pretekl o
     horni odsazeni clony a uriznul by se. */
  max-height:calc(100svh - var(--s-5)); max-width:100%; object-fit:contain; object-position:bottom center;
}
.mf-welcome__text{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:var(--s-4); min-width:0; max-width:560px;
}
.mf-welcome__kicker{
  font-family:var(--font-body); font-weight:600; font-size:var(--t-small);
  letter-spacing:.18em; text-transform:uppercase; color:var(--paper-soft);
}
.mf-welcome__title{
  margin:0; font-family:var(--font-display); font-weight:600;
  font-size:clamp(26px,3.2vw,44px); line-height:1.2; letter-spacing:-0.01em;
  color:var(--sanctuary);
}
.mf-welcome__content{ max-width:520px; color:var(--paper-soft); font-size:var(--t-body); line-height:1.6; }
.mf-welcome__content p{ margin:0 0 var(--s-3); }
.mf-welcome__content :last-child{ margin-bottom:0; }
/* Prazdny obsah (zadne vnorene bloky) by jinak zabral dve mezery ve
   sloupci textu a rozhodil rytmus mezi nadpisem a tlacitkem. */
.mf-welcome__content:empty{ display:none; }
/* Tlacitko podle navrhu: plna tmava plocha se svetlym textem. Pohyb pri
   hoveru je povinny (interaktivni prvek nikdy nemeni jen barvu). */
.mf-welcome__enter{
  min-height:var(--touch-min); padding:0 var(--s-5);
  background:var(--sanctuary); border:1px solid var(--sanctuary); color:var(--shadow);
  font-family:var(--font-body); font-size:var(--t-body);
  transition:background var(--motion-state), transform var(--motion-state);
}
.mf-welcome__enter:hover{ background:var(--illumination); border-color:var(--illumination); transform:translateY(-2px); }
.mf-welcome__lang-hint{
  display:inline-block; margin-top:var(--s-3);
  font-family:var(--font-body); font-size:var(--t-small); color:var(--paper-soft);
  text-decoration:underline; text-underline-offset:3px; opacity:.75;
  transition:opacity var(--motion-state);
}
.mf-welcome__lang-hint:hover{ opacity:1; }
/* Logo stoji nad nadpisem, tedy uvnitr textoveho sloupce -- proto se ridi
   jeho zarovnanim (vlevo na desktopu, na stred na telefonu) a neni na nem
   zadne absolutni pozicovani. */
.mf-welcome__logo{
  --welcome-logo-w:clamp(110px,10vw,150px);
  display:block; width:var(--welcome-logo-w); margin-bottom:var(--s-2);
  /* Logo ma v PNG pruhledny okraj 304 z 2510 px, tedy 12,1 % sirky. Bez
     tohohle posunu by znacka zacinala o tuhle mezeru vpravo od svislice,
     na ktere zacina text. Zlomek je odmereny ze souboru, ne odhadnuty --
     pri vymene loga za jinak orezane ho je potreba premerit. */
  margin-left:calc(var(--welcome-logo-w) * -0.1211);
}
/* Logo v hlavicce se v tmavem rezimu invertuje. Tady ne -- clona je svetla
   vzdy, takze by inverze udelala bile logo na svetlem pozadi. */
.mf-welcome__logo img{ display:block; width:100%; height:auto; filter:none; }
/* Telefon: pod sebe, obrazek nahore. Clona smi scrollovat, aby se na nizkem
   displeji dalo dostat k tlacitku. Logo prestava byt v rohu a jde na konec. */
@media (max-width:900px){
  /* Telefon: jeden svisly sloupec pro VSECHNY prvky. Obal i textovy sloupec
     se tu vypinaji (display:contents), takze logo, nadtitulek, nadpis,
     tlacitko i snimek jsou primo polozkami clony. Jen tak muze
     space-between rozdelit zbyle misto rovnomerne mezi vsechny mezery.
     Vnorene kontejnery si volno rozdelit neumi -- cely zbytek proto vzdycky
     spadl do jedne mezery (nad snimek, po zarovnani dolu zase nad logo).
     Zdola zadne odsazeni, aby snimek dosedl na spodni hranu okna. */
  .mf-welcome{
    --welcome-pad-x:clamp(16px,5vw,28px);
    flex-direction:column; align-items:center; justify-content:space-between;
    gap:var(--s-4);
    /* Nizky displej (napr. telefon na sirku): hero se nevejde a smi
       scrollovat samo v sobe -- stranka pod nim je zamcena, takze se tim
       nic nepreklada. Vodorovne ale NIKDY: obe osy se urcuji explicitne,
       protoze overflow:clip vyse se ve dvojici se scrollovatelnou osou
       dopocitava a snimek presahujici odsazeni by na telefonu mohl zacit
       nabizet posun do strany. */
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:var(--s-5) var(--welcome-pad-x) 0;
  }
  .mf-welcome__inner,
  .mf-welcome__text{ display:contents; }
  /* V HTML je figure pred textem; na telefonu patri snimek az dolu. */
  .mf-welcome__logo{ order:1; }
  .mf-welcome__kicker{ order:2; }
  .mf-welcome__title{ order:3; }
  .mf-welcome__content{ order:4; }
  .mf-welcome__enter{ order:5; flex:none; }
  .mf-welcome__figure{ order:6; align-self:stretch; width:100%; justify-content:center; }
  .mf-welcome__kicker,
  .mf-welcome__title,
  .mf-welcome__content{ width:min(100%, 520px); text-align:center; }
  /* Snimek se ridi sirkou a smi pretect bocni odsazeni clony az k okrajum
     displeje -- na uzkem telefonu je sirka to, co ho omezuje. */
  /* Snimek se ridi sirkou a smi pretect bocni odsazeni clony az k okrajum
     displeje -- dosedne tak vzdy na spodni hranu hero sekce. */
  .mf-welcome__shot{ width:calc(100% + 2 * var(--welcome-pad-x)); height:auto; max-width:none; max-height:none; margin-inline:calc(-1 * var(--welcome-pad-x)); }
  .mf-welcome__title{ font-size:clamp(24px,6.4vw,33px); }
  /* Znacka je v PNG vodorovne vycentrovana (okraje 304 a 303 px), takze pri
     centrovani zadny posun netreba -- naopak by ho rozhodil. */
  .mf-welcome__logo{ --welcome-logo-w:126px; margin-left:0; margin-bottom:0; }
}

/* --- Toast --- */
.mf-toast{ position:fixed; left:var(--s-6); bottom:var(--s-6); z-index:70; display:flex; align-items:center; gap:var(--s-4); padding:var(--s-3) var(--s-4); background:var(--chrome-toast); border:1px solid var(--paper-hairline); animation:barIn 220ms ease; opacity:0; pointer-events:none; transition:opacity 200ms ease; }
.mf-toast.is-open{ opacity:1; pointer-events:auto; }
.mf-toast button{ min-height:32px; padding:0; background:transparent; border:0; border-bottom:1px solid var(--power); color:var(--sanctuary); font-family:var(--font-body); font-size:var(--t-small); }

main{ animation:fadeIn 200ms ease; }
.mf-form__sent{ animation:fadeIn 260ms ease; }

.mf-visually-hidden{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* --- Obecna stranka (pravni stranky, kosik, pokladna, ucet, stare stranky) --- *
   Pozor na tokeny: --ink je PLOCHA, ne text. V noir je tmava, ve svetlem
   rezimu svetla -- puvodni color:var(--ink) tady tedy delal text v barve
   pozadi v obou rezimech a cela pokladna byla necitelna. Text dedi barvu
   z body (--sanctuary), ktera se prepina spravne. */
/* Pozor: var(--pad-x) obsahuje --pad-center = max(0, (100vw - 1600px)/2) --
   neomezeny narustajici prostor navic nad --content-max, urceny pro
   .mf-gal-body (plati bez vlastni max-width, potrebuje si hlidat stred sam).
   .mf-page uz ma vlastni max-width + margin:auto, ktere ji centruji -- kdyz
   by pouzila i rostouci --pad-x, na sirokych monitorech (>1600px) by ten
   padding sezral skoro celou sirku boxu a obsah byl paradoxne UZSI, cim
   sirsi obrazovka (presne tenhle bug hlasil Misha na dekovaci strance).
   Proto tady jen pevny pohodlny okraj, ne --pad-x. */
.mf-page{ max-width:900px; margin:0 auto; padding:var(--s-8) clamp(20px,5vw,72px) var(--s-9); font-family:var(--font-body); }
@media (max-width:760px){ .mf-page{ padding-top:var(--s-6); padding-bottom:var(--s-7); } }
.woocommerce-cart .mf-page,
.woocommerce-checkout .mf-page,
.woocommerce-account .mf-page{ max-width:1400px; }
.mf-404__links{ display:flex; flex-wrap:wrap; gap:var(--s-4); margin-top:var(--s-6); }
.mf-404__links a{ text-decoration-color:var(--power); }
.mf-page__legal{ margin-top:var(--s-7); padding-top:var(--s-4); border-top:1px solid var(--paper-hairline); font-size:var(--t-small); color:var(--paper-soft); }
.mf-page__title{ font-family:var(--font-title); font-size:var(--t-h2); margin:0 0 var(--s-5); }
.mf-page__content{ font-size:var(--t-body); line-height:1.7; } .mf-page__content a{ overflow-wrap:anywhere; }
.mf-page__content p{ margin:0 0 var(--s-4); }
.mf-page__content h2{ font-family:var(--font-title); font-size:var(--t-h3); margin:var(--s-6) 0 var(--s-3); }
.mf-page__content h3{ font-family:var(--font-title); font-size:var(--t-lead); margin:var(--s-5) 0 var(--s-2); }
.mf-page__content ul, .mf-page__content ol{ margin:0 0 var(--s-4); padding-left:var(--s-5); }
.mf-page__content a{ color:inherit; text-decoration-color:var(--paper-hairline); text-underline-offset:3px; }
.mf-page__content a:hover{ text-decoration-color:var(--power); }
.mf-page__content table{ width:100%; border-collapse:collapse; margin:0 0 var(--s-4); }
.mf-page__content th, .mf-page__content td{ padding:var(--s-2); border:1px solid var(--paper-hairline); text-align:left; }

/* --- WooCommerce (kosik, pokladna, ucet) ---
   Woo si nese vlastni styly s vlastni paletou (fialova tlacitka, sede
   ramecky, zaoblene rohy). Tady se jen prevlekaji do tokenu tematu --
   zadna zmena chovani, jen aby pokladna vypadala jako tenhle web. */
.mf-page .woocommerce{ color:inherit; }
.mf-page .woocommerce a{ color:inherit; }
.mf-page .woocommerce .button,
.mf-page .woocommerce button.button,
.mf-page .woocommerce a.button,
.mf-page .woocommerce input.button,
.mf-page .woocommerce #respond input#submit,
.mf-page .woocommerce button.button.alt,
.mf-page .woocommerce a.button.alt,
.mf-page .woocommerce input.button.alt,
.mf-page #place_order{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--touch-min); padding:0 var(--s-5);
  background:var(--power); color:var(--ink); border:0; border-radius:0;
  font-family:var(--font-display); font-weight:600; font-size:var(--t-body);
  text-decoration:none; text-shadow:none;
  transition:background var(--motion-state), transform var(--motion-state);
}
.mf-page .woocommerce .button:hover,
.mf-page .woocommerce button.button:hover,
.mf-page .woocommerce a.button:hover,
.mf-page .woocommerce input.button:hover,
.mf-page .woocommerce button.button.alt:hover,
.mf-page .woocommerce a.button.alt:hover,
.mf-page .woocommerce input.button.alt:hover,
.mf-page #place_order:hover{ background:var(--illumination); color:var(--ink); transform:translateY(-2px); }

/* Kosik a pokladna: primarni CTA (Do pokladny / Provest objednavku /
   Aktualizovat kosik) je pevne zlata stejne jako Pridat do kosiku a
   odeslat formular -- vyssi specificita (telova trida navic) prebije
   obecne pravidlo vyse jen na techto dvou strankach, ucet zustava na --power. */
.woocommerce-cart .mf-page .woocommerce .button,
.woocommerce-cart .mf-page .woocommerce button.button,
.woocommerce-cart .mf-page .woocommerce a.button,
.woocommerce-cart .mf-page .woocommerce input.button,
.woocommerce-cart .mf-page .woocommerce button.button.alt,
.woocommerce-cart .mf-page .woocommerce a.button.alt,
.woocommerce-cart .mf-page .woocommerce input.button.alt,
.woocommerce-checkout .mf-page .woocommerce .button,
.woocommerce-checkout .mf-page .woocommerce button.button,
.woocommerce-checkout .mf-page .woocommerce a.button,
.woocommerce-checkout .mf-page .woocommerce input.button,
.woocommerce-checkout .mf-page .woocommerce #respond input#submit,
.woocommerce-checkout .mf-page .woocommerce button.button.alt,
.woocommerce-checkout .mf-page .woocommerce a.button.alt,
.woocommerce-checkout .mf-page .woocommerce input.button.alt,
.woocommerce-checkout .mf-page #place_order{
  background:var(--gold); color:var(--ink-fixed);
}
.woocommerce-cart .mf-page .woocommerce .button:hover,
.woocommerce-cart .mf-page .woocommerce button.button:hover,
.woocommerce-cart .mf-page .woocommerce a.button:hover,
.woocommerce-cart .mf-page .woocommerce input.button:hover,
.woocommerce-cart .mf-page .woocommerce button.button.alt:hover,
.woocommerce-cart .mf-page .woocommerce a.button.alt:hover,
.woocommerce-cart .mf-page .woocommerce input.button.alt:hover,
.woocommerce-checkout .mf-page .woocommerce .button:hover,
.woocommerce-checkout .mf-page .woocommerce button.button:hover,
.woocommerce-checkout .mf-page .woocommerce a.button:hover,
.woocommerce-checkout .mf-page .woocommerce input.button:hover,
.woocommerce-checkout .mf-page .woocommerce button.button.alt:hover,
.woocommerce-checkout .mf-page .woocommerce a.button.alt:hover,
.woocommerce-checkout .mf-page .woocommerce input.button.alt:hover,
.woocommerce-checkout .mf-page #place_order:hover{
  background:var(--gold-hover); color:var(--ink-fixed);
}

.mf-page .woocommerce-info,
.mf-page .woocommerce-message,
.mf-page .woocommerce-error,
.mf-page .woocommerce-notice{
  background:transparent; border-top:0; border-left:2px solid var(--power);
  color:inherit; padding:var(--s-3) var(--s-4); margin:0 0 var(--s-5); border-radius:0;
}
.mf-page .woocommerce-error{ border-left-color:var(--mystic); }
.mf-page .woocommerce-info::before,
.mf-page .woocommerce-message::before,
.mf-page .woocommerce-error::before,
.mf-page .woocommerce-notice::before{ display:none; }

.mf-page .woocommerce form .form-row label,
.mf-page .woocommerce-billing-fields label,
.mf-page .woocommerce-additional-fields label{ font-size:var(--t-small); color:var(--paper-soft); }
.mf-page .woocommerce form .form-row input.input-text,
.mf-page .woocommerce form .form-row textarea,
.mf-page .woocommerce form .form-row select,
.mf-page .select2-container .select2-selection--single{
  min-height:var(--touch-min); padding:0 var(--s-3);
  background:transparent; border:1px solid var(--paper-hairline); border-radius:0;
  color:inherit; font-family:var(--font-body); font-size:var(--t-body);
}
.mf-page .woocommerce form .form-row textarea{ padding:var(--s-3); min-height:120px; }
.mf-page .woocommerce form .form-row input.input-text:focus-visible,
.mf-page .woocommerce form .form-row textarea:focus-visible,
.mf-page .woocommerce form .form-row select:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; }

/* Minimalisticky styl: zadne mrizkove ramecky ani vodorovne linky uvnitr
   souhrnu objednavky/platby -- radky rozlisuje jen odsazeni a typografie,
   ne cary. Border se necha jen tam, kde nese funkci (fokus, chybovy stav). */
.mf-page .woocommerce table.shop_table,
.mf-page .woocommerce table.shop_table td,
.mf-page .woocommerce table.shop_table th,
.mf-page .woocommerce table.shop_table tfoot td{
  border:0; border-radius:0; background:transparent; color:inherit; padding-block:var(--s-2);
}
.mf-page .woocommerce table.shop_table thead th{ border-bottom:1px solid var(--paper-hairline); }
.mf-page .woocommerce table.shop_table tfoot tr:first-child td,
.mf-page .woocommerce table.shop_table tfoot tr:first-child th{ border-top:1px solid var(--paper-hairline); padding-top:var(--s-3); }
.mf-page .woocommerce table.shop_table img{ width:64px; height:auto; object-fit:contain; }
.mf-page .woocommerce .cart_totals h2,
.mf-page .woocommerce-checkout h3{ font-family:var(--font-title); font-size:var(--t-h3); margin:0 0 var(--s-3); }
.mf-page .woocommerce-checkout #payment,
.mf-page .woocommerce-checkout #payment ul.payment_methods,
.mf-page .woocommerce-checkout #payment div.form-row{
  background:transparent; border-radius:0; border:0;
}
.mf-page .woocommerce-checkout #payment ul.payment_methods li{ border:0; padding-block:var(--s-2); }
.mf-page .woocommerce-checkout #payment{ border-top:1px solid var(--paper-hairline); padding-top:var(--s-5); }
/* Apple Pay / Google Pay (WooCommerce Payments Express Checkout): plugin
   si tlacitko renderuje s opacity 0 -> 1 a min-height:0 -> auto pres
   vlastni .3s prechod (dist/express-checkout.css), dokud Stripe.js nedobehne.
   V tu chvili muze kratce prekryvat text pod nim (souhlas se zpracovanim
   udaju pred tlacitkem Objednat). Vypnuto zde -- tlacitko se objevi rovnou
   v cilove vysce, zadny prechodovy stav, ktery by neco prekryval. */
.woocommerce-checkout .wcpay-express-checkout-wrapper #wcpay-express-checkout-element{ transition:none !important; }
.mf-page .woocommerce-checkout #payment div.payment_box{ background:var(--pick-bg); border-radius:0; border:0; color:inherit; }
.mf-page .woocommerce-checkout #payment div.payment_box::before{ display:none; }
.mf-page .woocommerce-order-overview.order_details{ border:0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-6); }
.mf-page .woocommerce-order-overview.order_details li{ border:0; padding:0; margin:0; }
.mf-page .woocommerce hr{ border:0; border-top:1px solid var(--paper-hairline); }
.mf-page .woocommerce .quantity input.qty{ min-height:var(--touch-min); background:transparent; border:1px solid var(--paper-hairline); color:inherit; }
.mf-page .woocommerce-form-coupon-toggle,
.mf-page .woocommerce-form-login-toggle{ font-size:var(--t-small); }

/* Zaskrtavatka a prepinace v pokladne -- prohlizecova modra nahrazena
   brand zlatou, stejny token jako fokus ramecky a primarni tlacitka. */
.mf-page .woocommerce input[type="checkbox"],
.mf-page .woocommerce input[type="radio"]{ accent-color:var(--gold); }

/* select2 (rozbalovaci seznamy staty/kraj v pokladne) -- popup (.select2-
   dropdown) se pripojuje primo do <body>, mimo .mf-page, takze ho tamni
   selektory netrefi a bez tohohle zustava na vychozim bilem pozadi s
   modrym zvyraznenim. Barvy jedou z tokenu tematu (--shadow/--sanctuary...),
   ktere se dedi na cely dokument bez ohledu na to, kde v DOM popup sedi --
   proto funguji spravne i v galerijnim (svetlem) skinu, aniz by se cokoliv
   psalo natvrdo. */
.select2-container .select2-selection__rendered{ color:inherit; line-height:var(--touch-min); }
.select2-container .select2-selection__arrow{ height:var(--touch-min); }
.select2-dropdown{
  background:var(--shadow); border:1px solid var(--paper-hairline); border-radius:0;
  color:var(--sanctuary); font-family:var(--font-body); font-size:var(--t-body);
}
.select2-search--dropdown{ background:var(--shadow); padding:var(--s-2); }
.select2-search--dropdown .select2-search__field{
  background:transparent; border:1px solid var(--paper-hairline); border-radius:0;
  color:var(--sanctuary); padding:var(--s-2);
}
.select2-results__option{ color:var(--sanctuary); }
.select2-container--default .select2-results__option[aria-selected="true"]{ background:var(--pick-bg); }
.select2-container--default .select2-results__option--highlighted[aria-selected]{
  background:var(--gold); color:var(--ink-fixed);
}

/* Pokladna: jeden sloupec pro fakturacni/dodaci udaje, souhrn objednavky
   (#order_review) vpravo jako pripevneny (sticky) druhy sloupec. Zadny
   zasah do PHP sablon -- #customer_details a #order_review jsou uz
   sourozenci uvnitr form.checkout, jen se prerozmisti gridem. */
@media (min-width:901px){
  .woocommerce-checkout form.checkout{
    display:grid; grid-template-columns:1fr 400px; column-gap:var(--s-8); align-items:start;
  }
  /* Apple Pay / Google Pay / WooPay (WooCommerce Payments Express Checkout)
     nejsou v PHP vystupu vubec -- plugin je vklada vlastnim JS az po
     nacteni stranky, do mista, kam je PHP hook 'woocommerce_checkout_before_
     customer_details' rekl (tedy PRED fakturacni formular, jako .wcpay-
     express-checkout-wrapper primo v form.checkout). Bez vlastni pozice v
     gridu je auto-placement zaradil nekam za jiz explicitne umistene bunky
     #customer_details/#order_review -- proto skoncily nekde dole a
     prekryvaly text pod sebou. Explicitni misto: cely prvni radek, na sirku
     obou sloupcu, presne tam, kde je plugin cekal.  */
  .woocommerce-checkout form.checkout > .wcpay-express-checkout-wrapper{ grid-column:1 / -1; grid-row:1; margin-bottom:var(--s-6); }
  .woocommerce-checkout form.checkout > #customer_details{ grid-column:1; grid-row:2 / span 2; }
  .woocommerce-checkout form.checkout > #order_review_heading{ grid-column:2; grid-row:2; margin-top:0; }
  .woocommerce-checkout form.checkout > #order_review{ grid-column:2; grid-row:3; position:sticky; top:var(--s-6); align-self:start; }
}
.woocommerce-checkout .col2-set#customer_details{ display:block; }
.woocommerce-checkout .col2-set#customer_details .col-1,
.woocommerce-checkout .col2-set#customer_details .col-2{ width:100%; float:none; margin:0 0 var(--s-6); }
.woocommerce-checkout .col2-set#customer_details .col-2{ margin-bottom:0; }

/* =========================================================================
   Kurzor -- jeden tvar pro cely web (viz assets/js/cursor.js).

   Stavy se nevymenuji, prelevaji se do sebe: tecka -> krouzek -> lupa ->
   krizek. Kruh je porad tentyz prvek, jen meni polomer; rukojet lupy a
   ramena krizku se dokresluji pres stroke-dashoffset, takze doopravdy
   vyjizdeji, ne problikavaji.

   Zadna vypln. Tvar je jen tenka linka o sile 1,5 px -- cistotu drzi to,
   ze pres malbu nelezi zadna plocha. Citelnost pres barevne obrazy
   obstarava stin, ne podklad.

   Barvy jsou zamerne mimo prepinac rezimu: malby maji vsechny mozne
   odstiny a kurzor navazany na rezim se v nich ztracel.
   ========================================================================= */
:root{
  --cursor-line:#F6F0E3;
  --cursor-speed:190ms;
  --cursor-ease:cubic-bezier(.34,1.2,.64,1);
}

/* Nativni kurzor se schova az ve chvili, kdy vlastni doopravdy bezi --
   kdyby skript neprosel, zustanou puvodni kurzory z tokens.css. Pravidlo
   musi byt !important, protoze tokens.css nastavuje kurzor desitkami
   selektoru vcetne :hover stavu. */
html.mf-has-cursor, html.mf-has-cursor *{ cursor:none !important; }

/* Textova pole si nechavaji puvodni psaci kurzor z tokens.css -- tenka
   svisla ryska v barve rezimu, pri fokusu zlata. Nakresleny tvar by tu
   nenesl informaci o miste zapisu. Hodnoty jsou opsane z tokens.css,
   protoze prekryte !important uz odtamtud nejde vratit zpet. */
html.mf-has-cursor[data-theme=galerie] input:not([type=checkbox]):not([type=radio]),
html.mf-has-cursor[data-theme=galerie] textarea{
  cursor:url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%222%22 height=%2222%22%3E%3Crect width=%222%22 height=%2222%22 fill=%22%23191510%22/%3E%3C/svg%3E') 1 11, text !important;
}
html.mf-has-cursor[data-theme=noir] input:not([type=checkbox]):not([type=radio]),
html.mf-has-cursor[data-theme=noir] textarea{
  cursor:url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%222%22 height=%2222%22%3E%3Crect width=%222%22 height=%2222%22 fill=%22%23e8e2d4%22/%3E%3C/svg%3E') 1 11, text !important;
}
html.mf-has-cursor input:not([type=checkbox]):not([type=radio]):focus,
html.mf-has-cursor textarea:focus{
  cursor:url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%222%22 height=%2222%22%3E%3Crect width=%222%22 height=%2222%22 fill=%22%23FFB411%22/%3E%3C/svg%3E') 1 11, text !important;
}
html.mf-has-cursor select{ cursor:pointer !important; }

.mf-cursor{
  position:fixed; top:0; left:0; z-index:9999;
  width:40px; height:40px; margin:-20px 0 0 -20px;
  pointer-events:none; opacity:0;
  transition:opacity 160ms ease;
}
.mf-cursor.is-on{ opacity:1; }
.mf-cursor svg{ display:block; width:100%; height:100%; overflow:visible;
  filter:drop-shadow(0 0 1.5px rgba(0,0,0,.9)) drop-shadow(0 1px 3px rgba(0,0,0,.5)); }

.mf-cursor__ring,
.mf-cursor__dot,
.mf-cursor__handle,
.mf-cursor__x line{
  transition:transform var(--cursor-speed) var(--cursor-ease),
             stroke-dashoffset var(--cursor-speed) var(--cursor-ease),
             opacity 140ms ease;
}

/* Kruh se nezvetsuje zmenou polomeru (to Firefox u SVG dlouho neumel), ale
   skalovanim -- tah se pritom nesmi roztahovat, od toho je vector-effect. */
.mf-cursor__ring{
  fill:none; stroke:var(--cursor-line); stroke-width:1.5;
  vector-effect:non-scaling-stroke; transform:scale(0);
}
.mf-cursor__dot{ fill:var(--cursor-line); transform:scale(1); }

/* Rukojet i ramena krizku se kresli od sveho zacatku ven. */
.mf-cursor__handle{
  stroke:var(--cursor-line); stroke-width:1.5; stroke-linecap:round;
  vector-effect:non-scaling-stroke;
  stroke-dasharray:7; stroke-dashoffset:7;
}
.mf-cursor__x line{
  stroke:var(--cursor-line); stroke-width:1.5; stroke-linecap:round;
  vector-effect:non-scaling-stroke;
  stroke-dasharray:13; stroke-dashoffset:13;
}

/* Odkaz, tlacitko, zaskrtavatko: tecka se schova a zustane jen drobny
   krouzek. Kruh s teckou uvnitr byl na tenhle stav prilis. */
.mf-cursor[data-cursor-state=link] .mf-cursor__dot{ transform:scale(0); }
.mf-cursor[data-cursor-state=link] .mf-cursor__ring{ transform:scale(.38); }

/* Obraz k otevreni: z tecky krouzek, ze ktereho vyjede rukojet.
   Prumer kolem 14 px -- lupa ma byt znamenko, ne predmet. */
.mf-cursor[data-cursor-state=zoom] .mf-cursor__dot{ transform:scale(0); }
.mf-cursor[data-cursor-state=zoom] .mf-cursor__ring{ transform:scale(.54); }
.mf-cursor[data-cursor-state=zoom] .mf-cursor__handle{ stroke-dashoffset:0; }

/* Obraz v detailu: samotny krizek, bez kruhu kolem. Dva tahy staci --
   kruh navic uz jen pridaval hmotu, kterou tvar nepotreboval. */
.mf-cursor[data-cursor-state=close] .mf-cursor__dot{ transform:scale(0); }
.mf-cursor[data-cursor-state=close] .mf-cursor__ring{ transform:scale(0); }
.mf-cursor[data-cursor-state=close] .mf-cursor__x line{ stroke-dashoffset:0; }

/* Nad textovym polem kurzor ustupuje tomu nativnimu (viz vyse). */
.mf-cursor[data-cursor-state=text]{ opacity:0; }

/* Stisk: tvar se na okamzik stlaci. */
.mf-cursor.is-down svg{ transform:scale(.84); transition:transform 110ms ease; }

@media (prefers-reduced-motion: reduce){
  .mf-cursor__ring, .mf-cursor__dot, .mf-cursor__handle, .mf-cursor__x line{ transition:none; }
  .mf-cursor.is-down svg{ transition:none; }
}
/* --- FAQ --- */
/* --- Caste dotazy + Kontakt v jedne rade ------------------------------
   Formular sedi vpravo od dotazu: kdo si projde otazky a nenajde tu svou,
   ma odpoved po ruce, ne o obrazovku niz. Dotazy dostavaji vic mista,
   protoze jsou to dlouhe radky textu; formular je uzky sloupec.
   Vodorovne odsazeni nese tenhle obal, sekce uvnitr uz zadne nemaji. */
.mf-faq-contact{
  display:grid; grid-template-columns:minmax(0,820px) minmax(0,1fr);
  gap:var(--s-6) clamp(32px,5vw,96px);
  align-items:start;
  padding:var(--s-8) var(--pad-x);
}
.mf-faq-contact > #faq,
.mf-faq-contact > #kontakt{
  padding:0; border-top:0; margin:0;
}
.mf-faq-contact > #faq{ gap:var(--s-5); }
.mf-faq-contact .mf-sec-head,
.mf-faq-contact .mf-faq-list{ padding:0; }
/* Formular se pri dlouhem seznamu otazek drzi v dohledu. */
@media (min-width:1101px){
  .mf-faq-contact > #kontakt{ position:sticky; top:calc(88px + var(--s-5)); }
}
@media (max-width:900px){
  .mf-faq-contact{ grid-template-columns:1fr; gap:var(--s-8); }
}#faq{ display:flex; flex-direction:column; gap:var(--s-6); padding:var(--s-8) 0; }
.mf-faq-list{ padding:0 var(--pad-x); }
.mf-faq-head h2{ font-family:var(--font-display); font-weight:600; font-size:var(--t-h2); line-height:1.1; letter-spacing:-0.01em; }
.mf-faq-list{ display:flex; flex-direction:column; max-width:820px; }
.mf-faq-item{ border-top:1px solid var(--paper-hairline); padding:var(--s-4) 0; }
.mf-faq-item:last-child{ border-bottom:1px solid var(--paper-hairline); }
.mf-faq-item__q{ cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:var(--s-4); font-family:var(--font-display); font-weight:600; font-size:var(--t-lead); line-height:1.3; }
.mf-faq-item__q::-webkit-details-marker{ display:none; }
/* Plus/minus se driv prepinal zamenou glyfu (content "+" -> minus), coz
   se neda animovat. Znamenko je proto nakreslene dvema prouzky pozadi:
   vodorovny zustava, svisly se pri otevreni stahne na nulu -- plus se
   plynule zmeni v minus a jeste se otoci. (Misha 2026-09-21) */
.mf-faq-item__q::after{
  content:""; flex:none; width:16px; height:16px;
  background:
    linear-gradient(var(--power),var(--power)) center/100% 1.5px no-repeat,
    linear-gradient(var(--power),var(--power)) center/1.5px 100% no-repeat;
  transition:transform var(--motion-enter), background-size var(--motion-enter);
}
.mf-faq-item[open] .mf-faq-item__q::after{
  background-size:100% 1.5px, 0 100%;
  transform:rotate(180deg);
}
/* Rozbalovani odpovedi. details je nativni prvek, ktery sel donedavna
   jen skokem -- dnes uz se da animovat pres ::details-content a
   interpolate-size (height:auto se stane animovatelnou hodnotou).
   Prohlizec, ktery to neumi, prepne obsah skokem jako driv; nic se
   nerozbije. transition-behavior:allow-discrete je nutne, jinak by se
   content-visibility prepla hned na zacatku a obsah by pri zavirani
   zmizel driv, nez se stihne sbalit. */
@supports (interpolate-size: allow-keywords){
  .mf-faq-list{ interpolate-size: allow-keywords; }
}
.mf-faq-item::details-content{
  block-size:0; overflow:hidden;
  transition:block-size var(--motion-enter), content-visibility var(--motion-enter);
  transition-behavior:allow-discrete;
}
.mf-faq-item[open]::details-content{ block-size:auto; }
/* Jemne doplneni k vysce: text se pri otevirani jeste prisune zdola.
   Bez podpory ::details-content zustava jen tenhle fade. */
.mf-faq-item__a{ padding-top:var(--s-3); color:var(--paper-soft); line-height:1.6; max-width:640px; opacity:0; transform:translateY(-6px); transition:opacity var(--motion-enter), transform var(--motion-enter); }
.mf-faq-item[open] .mf-faq-item__a{ opacity:1; transform:none; }

.mf-faq-item__a p{ margin:0 0 var(--s-3); }
.mf-faq-item__a p:last-child{ margin-bottom:0; }
.mf-faq-item__a ul{ margin:0 0 var(--s-3); padding-left:1.2em; }

/* --- Reference --- */
/* Reference, Caste dotazy a Kontakt maji stejny svisly rytmus -- driv
   mela kazda jine odsazeni nahore i dole a prechody mezi nimi skakaly.
   Vodorovne odsazeni nesou vnitrni prvky, protoze pruh recenzi musi
   scrollovat pres celou sirku okna. */
#reference{ display:flex; flex-direction:column; gap:var(--s-6); padding:var(--s-8) 0; }
@media (max-width:760px){
  /* Sekce mely na mobilu stejne velke svisle odsazeni jako na desktopu --
     mezi sousednimi sekcemi (napr. Reference -> Caste dotazy) tak vznikal
     zbytecne velky prazdny pas. Vertikalni padding se o stupen zmensuje,
     vodorovny padding a mezery uvnitr sekce (gap) se nemeni. */
  #serie{ padding-top:var(--s-5); padding-bottom:var(--s-5); }
  #obrazy{ padding-top:var(--s-6); padding-bottom:var(--s-7); }
  #faq{ padding-top:var(--s-6); padding-bottom:var(--s-6); }
  #reference{ padding-top:var(--s-6); padding-bottom:var(--s-6); }
  .mf-story{ padding-top:var(--s-7); padding-bottom:var(--s-7); }
  .mf-stats{ padding-bottom:var(--s-7); }
}

/* --- Spolecna hlavicka sekce -------------------------------------------
   Reference, Caste dotazy a Kontakt mely kazda vlastni hlavicku s jinym
   odsazenim a jinou mezerou pod nadpisem, takze nadpisy pod sebou
   neseděly na jedne svisle lince. Tohle je jeden vzorec pro vsechny --
   stejny jako uz mela Galerie a Vsechny obrazy. */
.mf-sec-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--s-5); flex-wrap:wrap;
  padding:0 var(--pad-x);
}
.mf-sec-head__text{ display:flex; flex-direction:column; gap:var(--s-2); max-width:640px; }
.mf-sec-head__text h2{
  font-family:var(--font-display); font-weight:600; font-size:var(--t-h2);
  line-height:1.1; letter-spacing:-0.01em; margin:0;
}
.mf-sec-head__text p{ margin:0; color:var(--paper-soft); }
.mf-sec-head__count{
  font-size:var(--t-label); letter-spacing:.2em; text-transform:uppercase;
  color:var(--paper-soft); flex:none;
}
.mf-ref-head{ padding:0 var(--pad-x); }
.mf-ref-head h2{ font-family:var(--font-display); font-weight:600; font-size:var(--t-h2); line-height:1.1; letter-spacing:-0.01em; }

/* Slider recenzi. Snap je mandatory -- karta se vzdy dorovna na okraj,
   protoze se posouva po jedne (viz refSlider v app.js), ne volne. */
/* Obal slideru nese vodorovne odsazeni sekce a sipky po stranach. Sipky
   jsou uvnitr odsazeni, ne nad kartami -- pres text recenze by prekazely. */
.mf-ref-slider{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:var(--s-3); padding:0 var(--pad-x);
}
.mf-ref-arrow{
  width:var(--touch-min); height:var(--touch-min); flex:none;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--paper-hairline); border-radius:0;
  color:var(--paper-soft); cursor:pointer;
  transition:border-color var(--motion-state), color var(--motion-state), transform var(--motion-state);
}
.mf-ref-arrow:hover{ border-color:var(--power); color:var(--sanctuary); transform:translateY(-2px); }
.mf-ref-arrow svg{ width:32%; height:32%; fill:currentColor; }
.mf-ref-arrow[hidden]{ display:none; }
@media (max-width:760px){
  /* Na telefonu se listuje prstem, sipky by jen ubiraly sirku karte. */
  .mf-ref-slider{ grid-template-columns:1fr; padding:0 var(--pad-x); }
  .mf-ref-arrow{ display:none; }
}
.mf-ref-testimonials{ display:flex; align-items:flex-start; gap:var(--s-5); padding:var(--s-2) 0 var(--s-3); overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.mf-ref-testimonials::-webkit-scrollbar{ display:none; }
/* Karta recenze. Text je hlavni obsah, proto ma velikost body, ne small;
   fotka je doplnek, takze jde pod text a je jasne mensi. Karty maji stejnou
   vysku, at pruh nevypada jako rozsypany caj. */
/* Karta recenze na celou sirku pruhu (misto pevnych 460 px) -- driv byl
   u okraje videt kus dalsi karty orizly hranou viewportu, coz vypadalo
   jako chyba. Na sirokem displeji strop 640 px, at radek nerozteka. */
.mf-ref-testimonial{
  flex:0 0 100%; max-width:640px; scroll-snap-align:start;
  display:flex; flex-direction:column; gap:var(--s-4);
  margin:0 auto; padding:var(--s-6) var(--s-5);
  border:1px solid var(--paper-hairline);
  background:var(--pick-bg);
  transition:border-color var(--motion-state), background var(--motion-state);
}
/* Sirka karty deli radek bezezbytku -- 3 nebo 4 kusy presne, nikdy
   "3,5 karty". Soucet N * sirka + (N-1) * mezera musi vyjit na 100 %,
   jinak zbytek visi jako uriznuty kus dalsi karty. */
@media (min-width:761px){
  .mf-ref-testimonial{ flex:0 0 calc((100% - 2 * var(--s-5)) / 3); max-width:none; margin:0; }
}
@media (min-width:1100px){
  .mf-ref-testimonial{ flex:0 0 calc((100% - 3 * var(--s-5)) / 4); }
}
.mf-ref-testimonial:hover{ border-color:var(--paper-soft); }
/* Fotky jsou snimky obrazu na zdi u zakazniku -- na vysku i na sirku.
   Pevny pomer 4:3 je krajove orezaval; pruh s pevnou vyskou drzi rytmus
   karet a orizne min. */
.mf-ref-testimonial__photo{ width:100%; height:200px; aspect-ratio:auto; object-fit:cover; object-position:center; }
/* Orez na 4 radky -- delsi text dostane "Cist vice" (data-ref-toggle v
   app.js), misto aby karta natahovala cely radek na svou vysku. */
.mf-ref-testimonial__quote{
  margin:0; font-size:var(--t-body); line-height:1.7;
  color:var(--sanctuary);
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:10; overflow:hidden;
  position:relative;
}
/* Uvozovka je uvnitr -webkit-boxu vlastni radkovy box -- zabirala tedy
   jeden z orezanych radku navic ke sve vysce. Mensi kegl a stlacena
   radkova vyska ji posunou nahoru a uvolni misto textu; clamp zvednut
   z 8 na 10 radku (Misha 2026-09-21: "dat vyse, videt vic radku"). */
.mf-ref-testimonial__quote::before{
  content:"\201e";
  display:block;
  font-size:2.25rem;
  line-height:.55;
  margin:0 0 .15em;
  color:var(--accent);
  font-family:Georgia,serif;
}
.mf-ref-testimonial.is-expanded .mf-ref-testimonial__quote{
  display:block; -webkit-line-clamp:unset; overflow:visible;
}
.mf-ref-testimonial__quote p{ margin:0 0 var(--s-3); }
.mf-ref-testimonial__quote p:last-child{ margin-bottom:0; }
.mf-ref-testimonial__toggle{
  align-self:flex-start; display:inline-flex; align-items:center; min-height:var(--touch-min);
  padding:0; margin-top:calc(-1 * var(--s-3)); background:transparent; border:0;
  border-bottom:1px solid var(--power); color:inherit; font-family:var(--font-body);
  font-size:var(--t-small); cursor:pointer; transition:transform var(--motion-state);
}
.mf-ref-testimonial__toggle:hover{ transform:translateY(-2px); }
.mf-ref-testimonial__toggle[hidden]{ display:none; }
/* Zadna pridana uvozovka: texty recenzi zacinaji uvozovkou uz samy a
   vychazely pak dve pod sebou. */
/* Podpis, ne nadpis: pomlcka pred jmenem a vlasova linka nad nim. */
.mf-ref-testimonial__name{
  font-family:var(--font-display); font-weight:600;
  font-size:var(--t-small); letter-spacing:.03em; color:var(--paper-soft);
  padding-top:var(--s-3); border-top:1px solid var(--paper-hairline);
}
.mf-ref-testimonial__name::before{ content:"\2014\00a0"; color:var(--power); }


/* --- Modal "Chci podobny obraz" / "Chtel bych dalsi dilo teto serie"
   (viz header.php + app.js openAskModal/closeAskModal). Stejny vzor jako
   .mf-cart-panel__scrim (scrim + is-open trida na obou), ale vystredeny
   dialog misto bocniho panelu -- ma pusobit jako "otevrelo se to nad
   obrazem", ne jako odchod jinam. z-index nad vsim vcetne kosiku (65) i
   uvodni clony (90). */
.mf-ask-modal, .mf-newsletter-modal{ position:fixed; inset:0; z-index:95; display:flex; align-items:center; justify-content:center; padding:var(--s-4); pointer-events:none; }
.mf-ask-modal.is-open, .mf-newsletter-modal.is-open{ pointer-events:auto; }
.mf-ask-modal__scrim, .mf-newsletter-modal__scrim{ position:absolute; inset:0; background:rgba(0,0,0,.6); opacity:0; transition:opacity 260ms ease; }
.mf-ask-modal.is-open .mf-ask-modal__scrim, .mf-newsletter-modal.is-open .mf-newsletter-modal__scrim{ opacity:1; }
.mf-ask-modal__card, .mf-newsletter-modal__card{
  position:relative; z-index:1; width:min(480px,100%); max-height:88vh; overflow-y:auto;
  background:var(--chrome-solid); border:1px solid var(--paper-hairline);
  padding:var(--s-5); opacity:0; transform:translateY(12px) scale(.98);
  transition:opacity 260ms ease, transform 260ms ease;
}
.mf-ask-modal.is-open .mf-ask-modal__card, .mf-newsletter-modal.is-open .mf-newsletter-modal__card{ opacity:1; transform:none; }
.mf-ask-modal__close, .mf-newsletter-modal__close{
  position:absolute; top:var(--s-3); right:var(--s-3); width:36px; height:36px;
  display:flex; align-items:center; justify-content:center; background:transparent;
  border:1px solid var(--paper-hairline); color:var(--sanctuary); font-size:20px; line-height:1;
  transition:border-color var(--motion-state);
}
.mf-ask-modal__close:hover, .mf-newsletter-modal__close:hover{ border-color:var(--gold); }
.mf-ask-modal__title, .mf-newsletter-modal__title{
  font-family:var(--font-title); font-weight:600; font-size:var(--t-h3); line-height:1.25;
  margin:0 var(--s-6) var(--s-4) 0;
}
@media (prefers-reduced-motion: reduce){
  .mf-ask-modal__scrim, .mf-ask-modal__card, .mf-newsletter-modal__scrim, .mf-newsletter-modal__card{ transition:none; }
}

/* Odstoupeni od smlouvy -- tlacitko + skryty formular na strankach
   objednavky (my-account, order-tracking, thank-you). Sdili tokeny
   s .mf-form, aby fungovalo ve svetlem i tmavem skinu beze zmeny. */
.mf-withdraw{ margin-top:var(--s-7); }
.mf-withdraw__toggle{ min-height:var(--touch-min); padding:0; background:transparent; color:var(--sanctuary); font-family:var(--font-display); font-weight:600; font-size:var(--t-body); border:0; text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--paper-hairline); transition:text-decoration-color var(--motion-state); }
.mf-withdraw__toggle:hover{ text-decoration-color:var(--sanctuary); }
.mf-withdraw__form{ margin-top:var(--s-4); max-width:420px; }
.mf-withdraw__done{ color:var(--paper-soft); font-size:var(--t-small); }

/* Souhlasova lista (vlastni, misto Complianz -- viz inc/consent.php).
   Spodni pruh, ne modal -- nezakryva obsah, jen se ptA na souhlas. */
.mf-consent{ position:fixed; left:0; right:0; bottom:0; z-index:95; display:flex; flex-wrap:wrap; gap:var(--s-4); align-items:center; justify-content:space-between; padding:var(--s-4) var(--s-5); background:var(--shadow); border-top:1px solid var(--paper-hairline); }
.mf-consent[hidden]{ display:none; }
.mf-consent__text{ margin:0; max-width:640px; color:var(--paper-soft); font-size:var(--t-small); }
.mf-consent__actions{ display:flex; gap:var(--s-3); flex-shrink:0; }
.mf-consent__accept, .mf-consent__reject{ min-height:var(--touch-min); padding:0 var(--s-4); border:0; font-family:var(--font-display); font-weight:600; font-size:var(--t-small); transition:background var(--motion-state), transform var(--motion-state); }
.mf-consent__accept{ background:var(--gold); color:var(--ink-fixed); }
.mf-consent__accept:hover{ background:var(--gold-hover); transform:translateY(-2px); }
.mf-consent__reject{ background:transparent; color:var(--paper-soft); border:1px solid var(--paper-hairline); }
.mf-consent__reject:hover{ color:var(--sanctuary); border-color:var(--paper-soft); }
@media (max-width:600px){ .mf-consent{ flex-direction:column; align-items:stretch; } .mf-consent__actions{ justify-content:stretch; } .mf-consent__accept, .mf-consent__reject{ flex:1; } }

/* --- Odchod a navrat hero -------------------------------------------------
   Galerie pod hero nikam neuhne -- hero je vrstva pres ni. Odchod je JEDEN
   pohyb: cely obsah odjede doleva a zaroven zmizi. Zadne rozfazovani po
   prvcich, zadne nadechy -- drzi to pohromade jako jeden list, ktery nekdo
   odsune stranou.

   Posouva se jen obsah; pozadi (nasvicena zed) stoji a jen zhasne spolu s
   nim. Ve svetlem skinu je shodne s pozadim stranky, takze se vizualne
   nemeni nic krome toho, co je na nem.

   Prusvitnost resi cela vrstva najednou (opacity na .mf-welcome), proto
   maji polozky jen posun -- jinak by se kryti nasobilo a obsah by zmizel
   drive nez pozadi. */
.mf-welcome__logo,
.mf-welcome__kicker,
.mf-welcome__title,
.mf-welcome__content,
.mf-welcome__enter,
.mf-welcome__figure{
  transition:transform 900ms cubic-bezier(.36,0,.24,1);
}
.mf-welcome.is-leaving .mf-welcome__logo,
.mf-welcome.is-leaving .mf-welcome__kicker,
.mf-welcome.is-leaving .mf-welcome__title,
.mf-welcome.is-leaving .mf-welcome__content,
.mf-welcome.is-leaving .mf-welcome__enter,
.mf-welcome.is-leaving .mf-welcome__figure{
  transform:translateX(-28vw);
}
/* Kryti jde soubezne s posunem, jen o chlup kratceji, aby obsah dozmizel
   jeste v pohybu a nedojel "nasucho" do konce drahy. */
.mf-welcome{ transition:opacity 780ms ease; }
.mf-welcome.is-leaving{ opacity:0; }
/* Po dojeti se vrstva uplne vyradi, aby nesbirala kliky ani fokus. */
.mf-welcome.is-gone{ visibility:hidden; }
/* Kdyz je hero videt, stranka pod nim nescrolluje -- jeden pohyb koleckem
   nebo prstem hero posle pryc (resi app.js), takze se nikdy nescrolluje
   "za" clonou. Tridu nastavuje JS, bez nej se nezamyka vubec nic. */
body.mf-welcome-open{ overflow:hidden; }
/* Misto pro svisly scrollbar je rezervovane vzdycky. Bez toho se stranka
   pri kazdem zamceni scrollu (hero, detail obrazu, kosik) rozsiri o sirku
   scrollbaru a zase zuzi -- obsah poskoci do strany a co si JS zmeril pri
   zamku (masonry) neodpovida stavu po odemceni. Na telefonu, kde je
   scrollbar plovouci, nema pravidlo zadny efekt. */
html{ scrollbar-gutter:stable; }
/* Obsah stranky se vykresli az po tom, co hero odjede -- jinak se galerie
   prolinala pres pulprusvitnou odchazejici vrstvu a byl z toho gulas.
   Tridu mf-page-hidden nasazuje a sundava app.js presne na hranicich
   prechodu; bez JS se nic neskryva.

   Obema smery stejne dlouhy a stejne mekky prechod, jen v opacnem poradi:
   pri prichodu se stranka sklada shora (hlavicka, pak plocha), pri odchodu
   se nejdriv vypne plocha a hlavicka jde posledni. Diky tomu galerie mizi
   presne tak, jak se objevila -- a stihne zmizet drive, nez hero prijede
   (poradi hlida app.js). */
.mf-header,
body > main,
body > footer{ transition:opacity 620ms ease; }
body > main,
body > footer{ transition-delay:120ms; }
body.mf-page-hidden .mf-header{ opacity:0; transition-delay:120ms; }
body.mf-page-hidden > main,
body.mf-page-hidden > footer{ opacity:0; transition-delay:0s; }
@media (prefers-reduced-motion: reduce){
  .mf-welcome,
  .mf-welcome__logo,
  .mf-welcome__kicker,
  .mf-welcome__title,
  .mf-welcome__content,
  .mf-welcome__enter,
  .mf-welcome__figure{ transition:none; }
}


/* --- Nabehnuti hlavicek sekci (viz headReveals() v app.js) ---------------
   Tridu mf-reveal pridava az JS, takze bez JS je vse od zacatku videt.
   Jen opacity a transform -- obe se skladaji na GPU, zadny reflow pri
   scrollovani. (Misha 2026-09-21) */
.mf-reveal{
  opacity:0; transform:translateY(16px);
  transition:opacity 560ms cubic-bezier(.2,.7,.3,1), transform 560ms cubic-bezier(.2,.7,.3,1);
  will-change:opacity, transform;
}
.mf-reveal.is-in{ opacity:1; transform:none; will-change:auto; }

/* --- Zaviraci animace mobilniho menu -------------------------------------
   Otevirani uz animaci melo (barIn na .mf-mobile-nav), zavirani bylo
   skokem pres display:none -- nesouměrne. is-closing drzi menu jeste
   viditelne po dobu odchodu, app.js pak teprve odebere is-open. */
@keyframes mfNavOut{ from{ opacity:1; transform:none; } to{ opacity:0; transform:translateY(8px); } }
.mf-mobile-nav.is-closing{ display:flex; animation:mfNavOut 160ms ease forwards; pointer-events:none; }