/* Mood stránky kategorií – vzhled bloků, které skládá mood editor TextilAppu.
 *
 * ZDROJ: https://www.textilapp.com/static/app/css/mood-page.css (v TextilAppu static/app/css/mood-page.css).
 * Tenhle soubor je jeho KOPIE pro e-shopy, ne originál. Když se mood editor změní, je potřeba zdroj znovu
 * stáhnout a rozdíl přenést sem – jinak se náhled v editoru a živý e-shop rozejdou. Stav zdroje: 15. 11. 2026.
 *
 * Nasazení: z repa jde soubor na CDN jako cdn.textilapp.com/stores/vyprodej/mood-categories.css a v šabloně
 * Shoptetu se načítá na stránkách kategorií – za categories.css, ať je pořadí při stejné specifičnosti jasné.
 * Nezapomenout na ?v=, bez něj si prohlížeče drží starou verzi až týden.
 *
 * Značkování vkládá mood editor do popisku kategorie (detail kategorie › Popisky):
 * <div class="mood-page" data-mood-page="N"> a v něm <section class="mood-block mood-<kód>">.
 * Barvy bloků jsou CSS proměnné (--mood-header-*, --mood-marked-*), výchozí hodnoty jsou níž.
 *
 * POZOR na výprodejích: s popiskem kategorie si hraje main.js. Viz blok „Soužití s .vpk-perex“ na konci.
 */
.mood-page {
    --mood-gap: 32px;
    --mood-radius: 12px;
    --mood-accent: #16b6b8;
    display: flex;
    flex-direction: column;
    gap: var(--mood-gap);
    margin: 0 0 var(--mood-gap);
}
.mood-page .mood-block { margin: 0; }
/* H1 stránky je v hlavičce mood stránky → nadpis kategorie od Shoptetu skrýt. Sidebar a filtry tady NE —
   o nich rozhoduje nastavení kategorie (show_sidebar, filters_mode), které aplikuje main.js. */
body.type-category:has(.mood-page) .category-top h1.category-title { display: none; }
/* Popisek kategorie je na e-shopu omezený na šířku textu (inline styl e-shopu: body.type-category:not(:has(.custom-category-
   with-video)) … .category-top .category-perex:not(.vpk-moved) { max-width: 820px }, specifičnost 0,6,1) — mood stránka jde
   přes celý obsah. Selektor schválně 0,7,1 (bez !important). Čistší je přidat :not(:has(.mood-page)) do toho inline stylu. */
body.type-category .category-top .category-perex.category-perex.category-perex:not(.vpk-moved):has(> .mood-page) {
    flex: 1 1 100%; width: 100%; max-width: none;
}
.mood-page .mood-block[hidden], .mood-page .mood-block--empty { display: none; }
.mood-page .mood-block__title { margin: 0 0 12px; font-size: 22px; line-height: 1.3; font-weight: 700; }

/* ── hlavička ── */
.mood-page .mood-header {
    --mood-header-bg: #f3e9dc;
    --mood-header-title: #4a2c1d;
    --mood-header-text: #6b4a36;
    --mood-header-button: #4a2c1d;
    --mood-header-button-hover-bg: #ffffff;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    border-radius: var(--mood-radius);
    background: var(--mood-header-bg);
}
.mood-page .mood-header__media { flex: 0 0 55%; min-height: 260px; }
.mood-page .mood-header__video, .mood-page .mood-header__image { display: block; width: 100%; height: 100%; object-fit: cover; }
.mood-page .mood-header__body { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 32px 40px; }
.mood-page .mood-header--plain .mood-header__body { padding: 40px; }
.mood-page .mood-header__title { margin: 0; font-size: 40px; line-height: 1.15; font-weight: 700; color: var(--mood-header-title); }
.mood-page .mood-header__lead { color: var(--mood-header-text); font-size: 16px; line-height: 1.6; }
.mood-page .mood-header__lead p { margin: 0 0 8px; }
.mood-page .mood-header__lead p:last-child { margin-bottom: 0; }
.mood-page .mood-header__lead a { color: inherit; text-decoration: underline; }
.mood-page .mood-header__button {
    align-self: flex-start;
    padding: 10px 22px;
    border: 2px solid var(--mood-header-button);
    border-radius: 6px;
    color: var(--mood-header-button);
    background: transparent;
    font-weight: 700;
    text-decoration: none;
    transition: background-color .15s;
}
.mood-page .mood-header__button:hover { background: var(--mood-header-button-hover-bg); color: var(--mood-header-button); }

/* ── text ── */
.mood-page .mood-text__body { font-size: 15px; line-height: 1.7; }
.mood-page .mood-text__body p { margin: 0 0 12px; }
.mood-page .mood-text__body p:last-child { margin-bottom: 0; }

/* zvýrazněný nadpis (Text, Dlaždice) */
.mood-page .mood-block--marked {
    --mood-marked-text: #000000;
    --mood-marked-bg: #f7faf9;
    --mood-marked-border: #b2ccc0;
}
.mood-page .mood-block--marked .mood-block__title {
    padding: 8px 14px;
    border-left: 5px solid var(--mood-marked-border);
    border-radius: 6px;
    background: var(--mood-marked-bg);
    color: var(--mood-marked-text);
}

/* ── dlaždice ── */
.mood-page .mood-tiles__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.mood-page .mood-tiles__item a {
    display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%;
    padding: 14px 10px; border: 1px solid #e9ecef; border-radius: 10px;
    color: inherit; text-align: center; text-decoration: none; transition: border-color .15s, box-shadow .15s;
}
.mood-page .mood-tiles__item a:hover { border-color: var(--mood-accent); box-shadow: 0 2px 10px rgba(0, 0, 0, .06); }
.mood-page .mood-tiles__item img { width: 96px; height: 96px; object-fit: contain; }
.mood-page .mood-tiles__item span { font-weight: 600; font-size: 14px; }

/* ── Shop the look (obsah dotáhne main.js; podle data-ratio vyhradí místo) ── */
.mood-page .mood-looks .shop-the-look:empty { min-height: 200px; }

/* ── vlastní HTML a vlastní widgety ── */
.mood-page .mood-html img, .mood-page .mood-custom img { max-width: 100%; height: auto; }

@media (max-width: 767px) {
    .mood-page { --mood-gap: 24px; }
    .mood-page .mood-header { flex-direction: column; }
    .mood-page .mood-header__media { flex-basis: auto; min-height: 0; aspect-ratio: 16 / 10; }
    .mood-page .mood-header__body, .mood-page .mood-header--plain .mood-header__body { padding: 22px 20px; }
    .mood-page .mood-header__title { font-size: 28px; }
    .mood-page .mood-tiles__list { grid-template-columns: repeat(2, 1fr); }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Jak to žije s perexem na výprodejích (poznámka, pravidla jsou jinde)

   Popisek kategorie si na výprodejích bere initPerex() v main.js: udělá z něj
   kopii v .vpk-perex zkrácenou na dva řádky s tlačítkem „Číst více“ a originál
   označí .vpk-moved, který categories.css schová.

   Mood stránku to zdvojilo včetně videa a oříznulo na dva řádky, proto:
     • main.js (initPerex) se vrátí hned, když je v popisku .mood-page,
     • categories.css má u pravidel pro perex :not(:has(.mood-page)),
       takže mood stránku neořezává ani nestahuje na 820 px.

   Pravidlo na celou šířku je v tomhle souboru výš (u .category-perex).
   Když se bude mood stránka na kategorii chovat jako ustřižený perex, je
   skoro jistě na e-shopu stará verze main.js nebo categories.css – zkontrolovat
   ?v= v šabloně. Všechny tři soubory patří k sobě. */

/* ─────────────────────────────────────────────────────────────────────────────
   Boční panel: na mood stránce nikdy

   Mood stránka je rozvržení přes celou šířku – vlastní hlavička, dlaždice,
   shop the look. Boční panel do ní nepatří nikdy, proto je to tady v CSS
   a ne věc nastavení: na mood stránce se na show_sidebar z
   /content/category-page/ nečeká ani nekouká.

   Pro ostatní kategorie zůstává boční panel volitelný (show_sidebar) a řeší se
   jinde. Staré stránky s .custom-category-with-video mají vlastní blok na
   začátku categories.css, který si panel schovává sám – ten se nemění, ty
   stránky se budou postupně nahrazovat mood stránkami.

   Visí to na .mood-page, které vykresluje server v popisku kategorie, takže se
   panel nejdřív neukáže a pak nezmizí – není co probliknout.

   #content má od Shoptetu třídu narrow (zúžená na místo pro panel), proto se
   k schování panelu musí přidat i vrácení šířky. Jinak by vedle mood stránky
   zůstal prázdný pruh.

   POZOR: v bočním panelu sedí i náš filtrovací panel (.vpf-side, main.js ho
   vkládá před #filters). Na mood kategorii tedy na velké obrazovce filtry
   nejsou vidět, dokud se nezavede filters_mode: button z téhož endpointu.
   Na telefonu se nic nemění, tam je .vpf-side skrytý vždy a filtry jsou
   v liště nad výpisem. */
body.type-category:has(.mood-page) .content-wrapper-in > aside.sidebar { display: none; }
body.type-category:has(.mood-page) #content.narrow { width: 100%; max-width: none; }

/* ─────────────────────────────────────────────────────────────────────────────
   Hlavička přes celou šířku – stejně jako na starých mood stránkách

   Staré stránky (.custom-category-with-video) nechávají hlavičku vystoupit
   z obsahu negativním okrajem: na desktopu −40 px, na telefonu −15 px
   (categories.css, blok na začátku a jeho media query na 767 px). Hlavička tím
   přesahuje #content o 20 px na každou stranu a je zřetelně širší než výpis.
   Změřeno na /oslava-dne-zen/ v okně 1280: #content 1178 px, výpis 1138 px,
   hlavička 1218 px.

   Mood hlavička sedí ve stejném místě dokumentu (v popisku kategorie), takže
   stačí stejné okraje. Platí jen na hlavičku, ne na zbytek mood stránky –
   dlaždice, texty a shop the look zůstávají v šířce výpisu.

   body.type-category je tu proto, aby se to nechytlo v náhledu mood editoru
   v TextilAppu, kde mood stránka stojí sama bez obsahu kategorie. */
body.type-category .mood-page .mood-header {
    margin-left: -40px;
    margin-right: -40px;
}
@media (max-width: 767px) {
    body.type-category .mood-page .mood-header {
        margin-left: -15px;
        margin-right: -15px;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Drobečková navigace nalepená na hlavičku + hranaté rohy (jako na staré mood)

   Staré stránky vytáhnou drobečkovou navigaci z toku (position:absolute,
   z-index:1) a zruší jí pozadí, takže leží přes horní pás hlavičky a hlavička
   začíná hned pod hlavičkou stránky. Stejné tři věci dělá blok
   .custom-category-with-video na začátku categories.css. Hlavička je tam navíc
   hranatá, žádné zaoblení.

   Aby hlavička mohla být nahoře, musí být v .category-top první. Mood stránka
   je v popisku kategorie, který má order 0, ale karusel podkategorií (.vpk-subcats)
   má order −6, takže by se vecpal nad ni a hlavičku odtlačil (změřeno: hlavička
   začínala na 460 px místo 175 px). Proto popisku s mood stránkou dáváme order −8
   a nulujeme mu horní okraj – podkategorie se tím posunou pod mood stránku,
   stejně jako je to na starých stránkách, kde jsou až pod hlavičkou.

   Selektor na popisek má schválně stejný tvar (trojité .category-perex) jako
   pravidlo na celou šířku výš – pravidla pro perex v categories.css jsou
   vnořená v obalu, který jim přes :is() zvedá specifičnost na 0,6,1, a tohle je
   musí přebít bez !important.

   Pozor: drobečková navigace má tmavý text, takže hlavička potřebuje světlý
   horní pás (--mood-header-bg nebo světlý obrázek/video). U tmavé hlavičky
   bude potřeba barvu písma v drobečkové navigaci řešit zvlášť. */
body.type-category:has(.mood-page) .breadcrumbs-wrapper {
    position: absolute;
    z-index: 1;
}
body.type-category:has(.mood-page) .breadcrumbs-wrapper .breadcrumbs {
    background-color: unset;
}
body.type-category .category-top .category-perex.category-perex.category-perex:not(.vpk-moved):has(> .mood-page) {
    order: -8 !important;   /* !important kvůli shopové old.css, viz níž */
    margin-top: 0;
}

/* Rezervované místo pro hodnocení na mood stránce nechceme.
   categories.css drží nad obsahem prázdný řádek (.category-top::after, 16 px
   + 6 px mezera), dokud se neozve API recenzí – na běžné kategorii je to
   správně, protože tam pak naskočí hvězdičky pod nadpisem. Mood stránka má
   nadpis ve vlastní hlavičce, takže se tam žádné hvězdičky nevykreslí a to
   místo jen drží bílý pruh nad hlavičkou, který po odpovědi API zmizí.
   Změřeno na /netflix-a-chill/: hlavička skočila ze 180 px na 158 px mezi
   DOMContentLoaded a load.

   Trojitá .category-top je kvůli specifičnosti: původní pravidlo je
   v categories.css vnořené v obalu, který mu přes :is() zvedá specifičnost
   na 0,5,1 – jednoduchý zápis by prohrál. */
body.type-category:has(.mood-page) .category-top.category-top.category-top:not(.crs-resolved)::after {
    content: none;
}

/* Hodnocení (když ho kategorie má zapnuté) patří až pod hlavičku.
   categories.css mu dává order −8 !important, tedy stejnou hodnotu jako má
   hlavička – a protože skript vkládá plaketku do DOMu před popisek kategorie,
   skončila by nad hlavičkou a po odpovědi API by ji odsunula dolů. */
body.type-category:has(.mood-page) .category-top > .crs-summary {
    order: -2 !important;
}

/* Proč to !important výš: shopová old.css v administraci má
   „.type-category #content .category-perex { order: -3 }“ – díky ID je
   specifičtější (1,2,1) než cokoli, co sem můžeme napsat bez !important.
   Bez toho zůstane popisek na −3 a karusel podkategorií (−6 !important)
   se vyšplhá nad hlavičku. */
body.type-category .mood-page .mood-header { border-radius: 0; }