/* ══════════════════════════════════════════════════════════════════
   PUK PAK PIVO  ·  HUB TÉMA PRE pukpakpivo.store
   ──────────────────────────────────────────────────────────────────
   Shoptet šablóna 13.

   Návrhová zásada: PPP zostáva presne taký, aký je dnes. Tento
   súbor mu nemení ani jednu farbu — PPP vetva je zámerne prázdna.
   Všetko sa deje až pod [data-brand="df"].

   Šablóna 13 je postavená na tokenoch (173 premenných), takže DF
   režim je prepísanie pätnástich hodnôt namiesto stoviek
   selektorov. Komponenty sa prefarbia samy.
   ══════════════════════════════════════════════════════════════════ */


/* ─── 0. VLASTNÉ TOKENY ───────────────────────────────────────────
   Pozor: PPP vetva NEPREPISUJE ani jednu premennú šablóny. Len
   pridáva vlastné --b-*, z ktorých čerpajú naše komponenty.
   Vďaka tomu zostáva PPP presne taký, aký je dnes.               */

:root,
[data-brand="ppp"] {
    --b-bg:      #ffffff;
    --b-surface: #ffffff;
    --b-text:    #1f1f1f;
    --b-muted:   #767676;
    --b-accent:  #ffcd23;   /* žltá značky */
    --b-ink:     #001b51;   /* text NA žltej — navy */
}


/* ─── 1. DEFINICE FOTBALU — MINTOVÁ VETVA ─────────────────────────
   DF stojí na tom istom svetlom podklade ako PPP. Mení sa jediná
   vec: akcent. Táto vetva preto NEPREPISUJE povrchy ani text
   šablóny — čím menej prepíšeme, tým menej sa dá rozbiť a tým
   pokojnejšie DF prežije ďalšiu aktualizáciu šablóny.

   Mintové hodnoty sú dve, nie jedna:
     #5ebda3  výplň a plochy — na bielej má kontrast 2,3 : 1,
              čo stačí na plochu, ale nie na text
     #1f7f68  tá istá farba o stupeň hlbšie, na text 4,9 : 1
   Preto je primary tá tmavšia (nesie text a rámiky) a secondary
   tá svetlá (nesie plochy).                                      */

[data-brand="df"] {
    /* Značkové farby — jediné, čo sa oproti PPP mení */
    --color-primary:         #1f7f68;   /* bolo #001b51 navy */
    --color-primary-h: 166; --color-primary-s: 61%; --color-primary-l: 31%;
    --color-primary-hover:   #5ebda3;
    --color-secondary:       #5ebda3;   /* bolo #ffcd23 žltá */
    --color-secondary-h: 164; --color-secondary-s: 42%; --color-secondary-l: 55%;
    --color-secondary-hover: #1f7f68;
    --color-tertiary:        #5ebda3;

    /* Vlastné tokeny tejto témy */
    --b-bg:      #ffffff;
    --b-surface: #ffffff;
    --b-text:    #1f1f1f;
    --b-muted:   #767676;
    --b-accent:  #5ebda3;
    --b-ink:     #06231c;   /* text NA minte */
}


/* ─── 2. PRÚŽOK ZNAČKY POD HLAVIČKOU ──────────────────────────────
   Prepínač projektov je len v menu (sekcia 10). Tu zostáva jediná
   vec z pôvodnej hornej lišty: tenký prúžok v akcente značky.
   Drží signál, v ktorom svete zákazník je, aj keď mu hlavička
   odscrolluje — a stojí nula miesta.

   Hornú lištu sme odstránili zámerne: prepínať sa dá chipom
   v menu a logami v pätičke, dva rozcestníky nad sebou si len
   konkurovali.                                                   */

#header { border-bottom: 3px solid var(--b-accent) !important; }


/* ─── 3. VLAJKY ───────────────────────────────────────────────────
   Dnes je NOVINKA zelená — farba, ktorá s PPP nemá nič spoločné.
   Nový systém sa odvodzuje z tokenov, takže drží na oboch
   značkách aj na tretej, ktorá pribudne.                         */

.flag, .flag-new, .flag-action, .flag-tip,
.flag-custom1, .flag-custom2, .flag-custom3 {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    border-radius: 0 !important;
    border: 1px solid transparent !important;
}

.flag.flag-new {
    background-color: var(--b-accent) !important;
    border-color: var(--b-accent) !important;
    color: var(--b-ink) !important;
}
.flag.flag-tip {
    background-color: transparent !important;
    border-color: var(--b-text) !important;
    color: var(--b-text) !important;
}
.flag.flag-action, .flag.flag-custom1 {
    background-color: var(--b-text) !important;
    border-color: var(--b-text) !important;
    color: var(--b-bg) !important;
}


/* ─── 4. LOGO V HLAVIČKE ──────────────────────────────────────────
   Zväčšenie loga bez zásahu do výšky hlavičky.

   Pôvodný snippet mieril na .header__branding / .header__logo —
   triedy z inej šablóny, ktoré na šablóne 13 neexistujú, takže
   nerobil nič. Skutočné značenie je .site-name > a > img.

   Mieru si ladíš jednou premennou nižšie, nie hľadaním scale()
   v troch pravidlách.                                             */

:root {
    --ppp-logo-scale:        1.8;   /* desktop */
    --ppp-logo-scale-mobile: 1.3;   /* do 768 px */
    --ppp-logo-posun:        5px;   /* zvislé dorovnanie */
}

/* Obal musí dovoliť presah, inak sa zväčšenie oreže */
.site-name,
.site-name a {
    overflow: visible !important;
    height: auto !important;
}

.site-name a img {
    display: block !important;
    transform: scale(var(--ppp-logo-scale))
               translateY(var(--ppp-logo-posun));
    /* Zľava, nie od stredu — logo je pri ľavom okraji, takže
       pri scale od stredu by polovica rástla mimo plochu. */
    transform-origin: left center;
    transition: transform .3s ease;
}

.site-name a:hover img {
    transform: scale(calc(var(--ppp-logo-scale) * 1.06))
               translateY(var(--ppp-logo-posun));
}

@media (max-width: 768px) {
    .site-name a img {
        transform: scale(var(--ppp-logo-scale-mobile)) translateY(3px);
    }
    .site-name a:hover img {
        transform: scale(var(--ppp-logo-scale-mobile)) translateY(3px);
    }
}

/* Transformácia nerezervuje miesto, takže logo sa môže prekryť
   s menu. Ak sa to stane, zdvihni odsadenie namiesto zmenšovania. */
.site-name { padding-right: 12px; }


/* ─── 5. LOGO PODĽA ZNAČKY ────────────────────────────────────────
   Výmenu rieši skript v hlavičke — prehadzuje src obrázka, takže
   logo zostáva skutočným obrázkom so správnymi rozmermi a platí
   naň aj zväčšenie zo sekcie 4.

   Nahraj DF logo do Správcu súborov pod názvom df-logo.png
   a nemusíš meniť nič iné. Iný názov → uprav LOGA v hlavičke.

   Ak sa logo nepodarí načítať, skript vráti pôvodné — radšej
   zlé logo než prázdne miesto.                                   */

/* Šírka obalu sa môže medzi značkami líšiť (DF logo býva širšie) */
[data-brand="df"] .site-name a img { max-width: 220px; }

/* ─── 6. VLASTNÁ PÄTIČKA ──────────────────────────────────────────
   Štýly presunuté z HTML bloku v tele stránky sem, aby pätička
   reagovala na prepnutie značky. Predtým mala farby natvrdo,
   takže by v DF režime zostala tyrkysová na čiernom webe.

   V tele stránky nechaj LEN značenie a skript — <style> odtiaľ
   zmaž, inak bude prebíjať toto.                                 */

:root, [data-brand="ppp"] {
    --b-footer-bg:    #00dfff;
    --b-footer-text:  #001b51;   /* biela mala na tyrkysovej 1.6:1,
                                    navy má 10.2:1 */
    --b-footer-head:  #001b51;
    --b-footer-icon:  #001b51;
    --b-footer-hover: #001b51;   /* žltá by tu mala 1.1:1 — stav
                                    hoveru nesie priehľadnosť a zväčšenie */
}
[data-brand="df"] {
    --b-footer-bg:    #0B0D0C;
    --b-footer-text:  #FFFFFF;
    --b-footer-head:  #5ebda3;
    --b-footer-icon:  #FFFFFF;
    --b-footer-hover: #5ebda3;
}

/* Písmo nadpisov. Nahraj bc-dres-three.woff2 do Správcu súborov —
   z Google Disku ho prehliadač odmieta (chýba CORS hlavička). */
@font-face {
    font-family: "BC Dres Three";
    src: url("/user/documents/upload/bc-dres-three.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Celoplošné pozadie. overflow-x: clip na stránke rieši vodorovný
   posuvník, ktorý 100vw robí vždy, keď je prítomný zvislý —
   clip na rozdiel od hidden nerozbije position: sticky. */
html, body { overflow-x: clip; }

/* Shoptet vkladá "telo stránky" na ZAČIATOK body, takže pätička
   sa najprv vykreslí hore. Skript ju presunie dolu; dovtedy ju
   skryjeme, aby neprebliklo. Animácia je poistka — keby skript
   zlyhal, pätička sa po 2 s ukáže aj tak, len hore. */
#custom-footer { visibility: hidden; animation: pbOdkry 0s 2s forwards; }
#custom-footer[data-umiestnene] { visibility: visible; animation: none; }
@keyframes pbOdkry { to { visibility: visible; } }

#custom-footer {
    position: relative;
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    background-color: var(--b-footer-bg);
    color: var(--b-footer-text);
    padding: 60px 5vw 20px;
    box-sizing: border-box;
    z-index: 1;
}

#custom-footer .footer-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 40px 48px;
    text-align: center;
}
#custom-footer .footer-column { flex: 0 1 auto; }
#custom-footer .footer-social { flex: 1 1 auto; min-width: 360px; }
#custom-footer .footer-logo    { flex: 0 0 auto; }
#custom-footer .footer-contact { flex: 0 0 auto; }

#custom-footer .footer-logo {
    display: flex;
    align-items: center;
    gap: 26px;
    flex-wrap: wrap;
}
#custom-footer .pb-logo {
    opacity: .4;
    transition: opacity .3s ease, transform .3s ease;
}
#custom-footer .pb-logo:hover { opacity: .75; }
[data-brand="ppp"] #custom-footer .pb-logo[data-logo="ppp"],
[data-brand="df"]  #custom-footer .pb-logo[data-logo="df"] { opacity: 1; }
#custom-footer .logo-img {
    width: 140px;
    height: auto;
    transition: transform .45s ease, filter .45s ease;
}
#custom-footer .logo-img:hover {
    transform: scale(1.08);
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, .5));
}

#custom-footer h4 {
    font-family: "BC Dres Three", sans-serif !important;
    font-size: 26px;
    margin-bottom: 24px;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: normal;
    color: var(--b-footer-head) !important;
}

#custom-footer .footer-contact { text-align: right; }
#custom-footer .footer-contact p { font-size: 15px; line-height: 1.6; margin: 0; }
#custom-footer .footer-site {
    font-size: 18px;
    font-weight: 700;
    color: var(--b-footer-text) !important;
}
#custom-footer a { color: var(--b-footer-text) !important; text-decoration: none; }
#custom-footer .footer-contact a:hover { text-decoration: underline; }

/* Ikony farbíme maskou, nie reťazcom filtrov. Tvar berie z alfa
   kanála PNG, farbu z tokenu — takže sa prefarbí so značkou
   a netreba prepočítavať invert/sepia/hue-rotate. */
#custom-footer .social-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    /* Na šírke desktopu musia zostať v jednom rade. Zalomenie
       povolíme až tam, kde sa naozaj nezmestia. */
    flex-wrap: nowrap;
}
#custom-footer .icon {
    display: block;
    opacity: .75;
    background-color: var(--b-footer-icon);
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-size: contain;    mask-size: contain;
    transition: background-color .3s, opacity .3s, transform .3s;
}
/* Masky sú tu, nie v style="" na elemente. Shoptet pri ukladaní
   HTML kódu atribúty osekáva a inline maska bola prvá na rane —
   zostal by holý farebný štvorec alebo nič.                      */
#custom-footer .icon-instagram {
    width: 34px; height: 34px;
    -webkit-mask-image: url("/user/documents/upload/instagram-yellow.png");
            mask-image: url("/user/documents/upload/instagram-yellow.png");
}
#custom-footer .icon-facebook {
    width: 34px; height: 34px;
    -webkit-mask-image: url("/user/documents/upload/facebook-yellow.png");
            mask-image: url("/user/documents/upload/facebook-yellow.png");
}
#custom-footer .icon-youtube {
    width: 38px; height: 38px;
    -webkit-mask-image: url("/user/documents/upload/youtube-yellow.png");
            mask-image: url("/user/documents/upload/youtube-yellow.png");
}
#custom-footer .icon-spotify {
    width: 33px; height: 33px;
    -webkit-mask-image: url("/user/documents/upload/spotify-yellow.png");
            mask-image: url("/user/documents/upload/spotify-yellow.png");
}
#custom-footer .icon-apple {
    width: 35px; height: 35px;
    -webkit-mask-image: url("/user/documents/upload/apple-podcast-yellow.png");
            mask-image: url("/user/documents/upload/apple-podcast-yellow.png");
}
#custom-footer .icon-vlny {
    width: 74px; height: 62px;
    -webkit-mask-image: url("/user/documents/upload/vlny-yellow.png");
            mask-image: url("/user/documents/upload/vlny-yellow.png");
}

/* Poistka: keby prehliadač masky nepodporoval, ukáž pôvodné
   obrázky namiesto farebných štvorcov. */
@supports not ((-webkit-mask-image: url("x")) or (mask-image: url("x"))) {
    #custom-footer .icon {
        background-color: transparent !important;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }
    #custom-footer .icon-instagram { background-image: url("/user/documents/upload/instagram-yellow.png"); }
    #custom-footer .icon-facebook  { background-image: url("/user/documents/upload/facebook-yellow.png"); }
    #custom-footer .icon-youtube   { background-image: url("/user/documents/upload/youtube-yellow.png"); }
    #custom-footer .icon-spotify   { background-image: url("/user/documents/upload/spotify-yellow.png"); }
    #custom-footer .icon-apple     { background-image: url("/user/documents/upload/apple-podcast-yellow.png"); }
    #custom-footer .icon-vlny      { background-image: url("/user/documents/upload/vlny-yellow.png"); }
}

#custom-footer .icon { opacity: .72; }
#custom-footer .social-icons a:hover .icon {
    opacity: 1;
    background-color: var(--b-footer-hover);
    transform: scale(1.16);
}

/* Shoptetov copyright pruh pod našou pätičkou */
#footer .footer-bottom, footer .footer-bottom {
    background-color: var(--b-footer-bg) !important;
    color: var(--b-footer-text) !important;
    border: none !important;
    padding: 10px 4vw;
}
#footer .footer-bottom a, footer .footer-bottom a {
    color: var(--b-footer-text) !important;
    text-decoration: underline;
}

@media (max-width: 1024px) {
    #custom-footer .social-icons { flex-wrap: wrap; }
    #custom-footer .footer-social { min-width: 0; }
    #custom-footer .footer-inner {
        flex-direction: column; align-items: center; text-align: center; gap: 35px;
    }
    #custom-footer .footer-logo,
    #custom-footer .footer-contact { text-align: center; transform: none; }
    #custom-footer .logo-img { width: 150px; margin-bottom: 0; }
    #custom-footer .social-icons { transform: none; }
}
@media (max-width: 768px) {
    #custom-footer { padding: 40px 3vw 20px; }
    #custom-footer .footer-inner { gap: 30px; }
    #custom-footer .logo-img { width: 120px; }
    #custom-footer .icon-instagram, #custom-footer .icon-facebook,
    #custom-footer .icon-youtube, #custom-footer .icon-spotify,
    #custom-footer .icon-apple { width: 28px; height: 28px; }
    #custom-footer .icon-vlny { width: 55px; height: 46px; }
}

/* Nábeh. Bez animácie musí pätička zostať viditeľná, preto
   sa opacita nastavuje až vnútri samotnej animácie. */
@media (prefers-reduced-motion: no-preference) {
    #custom-footer .fade-in { animation: fadeInSmooth .75s ease both; }
    @keyframes fadeInSmooth {
        from { opacity: 0; transform: translateY(12px); }
        to   { opacity: 1; transform: translateY(0); }
    }
}


/* ─── 7. OBSAH PÄTIČKY PODĽA ZNAČKY ───────────────────────────────
   Pätička nemá meniť len farby, ale aj logo, siete a kontakt.
   V značení sú obe varianty, zobrazí sa tá, ktorá patrí
   k aktívnemu projektu. Tretí projekt = ďalší blok.              */

/* Skrývame IBA neaktívnu značku. Pôvodné riešenie zobrazovalo
   aktívnu cez display:revert — lenže revert vráti elementu
   východziu hodnotu prehliadača, čo je pri <div> block. Tým si
   prepísalo vlastné display:flex a ikony sa postavili pod seba.
   Takto sa aktívneho prvku vôbec nedotýkame a jeho rozloženie
   zostáva, aké mu patrí. */
[data-brand="ppp"] [data-pre="df"],
[data-brand="df"]  [data-pre="ppp"] { display: none !important; }

/* DF pätička má vlastné pozadie aj akcent */
[data-brand="df"] #custom-footer .logo-img {
    filter: none;
}


/* ─── 9. ODSTUPY SEKCIÍ NA TITULKE ────────────────────────────────
   Šablóna sčítava štyri vrstvy odsadenia nad sebou:
     products-wrapper  padding-bottom  44
     nadpis sekcie     margin-top      66
     nadpis sekcie     margin-bottom   44
     products-wrapper  padding-top     44
   Výsledkom je 235 px prázdna medzi kategóriami. Sťahujeme to
   zhruba na tretinu — stále je vidno, kde jedna sekcia končí,
   ale stránka sa nerozťahuje do nekonečna.

   Ladíš jednou premennou, nie štyrmi číslami.                    */

:root {
    --ppp-odstup: 26px;
}

.homepage-group-title {
    margin-top: calc(var(--ppp-odstup) * 1.3) !important;
    margin-bottom: calc(var(--ppp-odstup) * .7) !important;
}

.products-wrapper.product-slider-holder,
.homepage-group .products-wrapper {
    padding-top: calc(var(--ppp-odstup) * .6) !important;
    padding-bottom: calc(var(--ppp-odstup) * .6) !important;
}

@media (max-width: 768px) {
    :root { --ppp-odstup: 18px; }
}


/* ─── 10. PREPNUTIE NA DRUHÝ PROJEKT V HLAVNOM MENU ──────────────
   V menu visí vždy len jeden chip — ten druhý obchod, na ktorom
   práve nie si. Chip pre obchod, kde stojíš, nemá čo robiť:
   je to odkaz sám na seba a celá hlavička už aj tak kričí, kde si.

   Preto nejde o dvojicu "aktívny/neaktívny", ale o jediné tlačidlo
   "prejsť vedľa". Tomu zodpovedá aj farba — plná výplň, ktorá na
   svojom pozadí svieti: v Puk Pak Pive zelená Definice, v Definici
   biele PPP.

   Cielime podľa adresy, nie podľa tried menu-item-707/736. Tie sú
   odvodené od ID kategórií a zmenili by sa pri znovuvytvorení.     */

:root            { --b-chip-ciara: rgba(0, 27, 81, .32); }
[data-brand="df"]{ --b-chip-ciara: rgba(6, 35, 28, .30); }

/* Chip obchodu, na ktorom práve si — preč. */
[data-brand="ppp"] #header .menu-level-1 > li:has(> a[href="/ppp/"]),
[data-brand="df"]  #header .menu-level-1 > li:has(> a[href="/definice-fotbalu/"]) {
    display: none !important;
}

@media (min-width: 1025px) {
    /* order presunie položku na koniec radu. Bez neho by ju
       margin-left:auto odtlačil len za predchádzajúcu položku.
       Pravidlo je na oboch chipoch, lebo ktorýkoľvek z nich môže
       byť ten zostávajúci. */
    #header .menu-level-1 > li:has(> a[href="/ppp/"]),
    #header .menu-level-1 > li:has(> a[href="/definice-fotbalu/"]) {
        order: 99;
        margin-left: auto;
        padding-left: 20px;
        border-left: 1px solid var(--b-chip-ciara);
    }
}

/* Spoločný tvar */
#header .menu-level-1 > li > a[href="/ppp/"],
#header .menu-level-1 > li > a[href="/definice-fotbalu/"] {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 7px 16px !important;
    border-radius: 999px;
    border: 1px solid transparent;
    font-weight: 700;
    opacity: 1 !important;
    transition: background-color .2s, color .2s, box-shadow .2s, transform .2s;
}

#header .menu-level-1 > li > a[href="/ppp/"]::before,
#header .menu-level-1 > li > a[href="/definice-fotbalu/"]::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: none;
}

/* ── V Puk Pak Pive: biela pilulka, zelené svetlo ──
   Biela plocha na bielej lište by splynula, preto chip svieti
   mintovým obrysom a prstencom okolo. Text je tmavší odtieň tej
   istej zelenej — čistý mint má na bielej kontrast 2,3 : 1, čo je
   pod čitateľnou hranicou; #1f7f68 má 4,9 : 1 a farbu drží.
   Prstenec je box-shadow, nie hrubší rám, takže chip nezmení
   výšku a nerozhodí riadok menu. */
[data-brand="ppp"] #header .menu-level-1 > li > a[href="/definice-fotbalu/"] {
    background: #ffffff;
    color: #1f7f68 !important;
    border-color: #5ebda3;
    box-shadow: 0 0 0 3px rgba(94, 189, 163, .20),
                0 2px 12px rgba(94, 189, 163, .35);
}
[data-brand="ppp"] #header .menu-level-1 > li > a[href="/definice-fotbalu/"]::before {
    background: #5ebda3;
}
[data-brand="ppp"] #header .menu-level-1 > li > a[href="/definice-fotbalu/"]:hover {
    background: #5ebda3;
    color: #06231c !important;
    box-shadow: 0 0 0 4px rgba(94, 189, 163, .28),
                0 3px 16px rgba(94, 189, 163, .55);
    transform: translateY(-1px);
}
[data-brand="ppp"] #header .menu-level-1 > li > a[href="/definice-fotbalu/"]:hover::before {
    background: #06231c;
}

/* ── V Definici: PPP má biele pozadie ──
   Na čiernej hlavičke je biela to isté, čím je mint na bielej.
   Text aj bodka sú z loga Puk Pak Piva — modrá a žltá. */
[data-brand="df"] #header .menu-level-1 > li > a[href="/ppp/"] {
    background: #ffffff;
    color: #001b51 !important;
    border-color: #001b51;
    box-shadow: 0 0 0 3px rgba(0, 27, 81, .14),
                0 2px 12px rgba(0, 27, 81, .22);
}
/* Prstenec je modrý, nie žltý: žltá má na bielej kontrast 1,6 : 1
   a rám by sa stratil. Značkovú farbu nesie bodka. */
[data-brand="df"] #header .menu-level-1 > li > a[href="/ppp/"]::before {
    background: #ffcd23;
}
[data-brand="df"] #header .menu-level-1 > li > a[href="/ppp/"]:hover {
    background: #ffcd23;
    color: #001b51 !important;
    border-color: #ffcd23;
    box-shadow: 0 0 0 4px rgba(255, 205, 35, .35),
                0 3px 16px rgba(255, 205, 35, .45);
    transform: translateY(-1px);
}


/* ─── 11. MENU UKAZUJE LEN KATEGÓRIE AKTÍVNEHO PROJEKTU ───────────
   V DF režime nemá zmysel ponúkať pivné kategórie a naopak.
   Oba chipy projektov zostávajú vždy — bez nich by sa zákazník
   nemal ako prepnúť späť.

   Rozdelenie nerobí CSS, ale skript v hlavičke: každej položke
   hlavného menu dá data-kat="ppp" alebo data-kat="df" podľa adresy.
   Dôvod: kategórie Definice sú v Shoptete podkategórie, takže v
   hlavnom rade nie sú vôbec — skript ich tam vytiahne. Zároveň
   platí, že čokoľvek nové bez DF predpony je automaticky PPP, takže
   pri zakladaní ďalších kategórií sa už netreba o nič starať.      */

[data-brand="ppp"] #header .menu-level-1 > li[data-kat]:not([data-kat="ppp"]),
[data-brand="df"]  #header .menu-level-1 > li[data-kat]:not([data-kat="df"]) {
    display: none !important;
}

/* Vytiahnuté podkategórie vyzerajú ako ostatné položky menu,
   nie ako chip — chipy sú cielené presnou adresou projektu.      */
#header .menu-level-1 > li[data-klon] > a {
    opacity: 1;
}


/* ─── 12. BOČNÝ STROM KATEGÓRIÍ TIEŽ LEN PRE AKTÍVNY PROJEKT ──────
   Inak by na stránke Definice visel v ľavom stĺpci "Merch PPP" a
   celá pivná vetva — presne to, čo sme z menu odstránili.
   Prepnúť sa dá lištou hore aj chipom v menu, takže tu odkaz na
   druhý projekt chýbať nebude.

   Tretí projekt = pridať jeho koreňovú adresu do oboch riadkov.   */

[data-brand="ppp"] #categories > .categories:has(> .topic > a[href="/definice-fotbalu/"]),
[data-brand="df"]  #categories > .categories:has(> .topic > a[href="/ppp/"]) {
    display: none !important;
}