/* FRANK TEST V50 — docasny testovaci subor (21.8.2026, v5: gramaz ako pilulka + vacsia medzera ku cene; v4: CZ flag-zachran-zbozi, mobil: stitky hore sa zalamuju, vacsi chip kodu; v3: riadok stitkov pod fotkou; v2: aj karusely .products-block). Po nasadeni do nutiva-custom.css v8.9 zmazat zo Spravcu suborov aj zo Zahlavia oboch domen. */
/* ===== V50 — DLAŽDICA PRODUKTU V KATALÓGU A KARUSELOCH (v8.9, 21.8.2026) ===== */
/* Rozhodnuté so Šimonom v živom náhľade (7 kôl, hodnoty zamrazené 21.8.2026).
   Platí pre hlavný výpis kategórie (#products) AJ pre karusely (.products-block:
   homepage Novinky/Najpredávanejšie, súvisiace produkty na detaile) — rozšírené
   na žiadosť Šimona 21.8.2026, aby karta vyzerala všade rovnako. Karusely
   majú užšiu kartu (207 px na homepage), preto je tam cenový riadok tesnejší.
   Stavba karty zhora nadol: pás so štítkami (24 px) → fotka → značka (z poľa
   Výrobca, vkladá nutiva-custom.js) → názov max 2 riadky → info riadok
   „500 g (21,42 €/1 kg)“ (vkladá JS z mernej ceny Shoptetu) → cena [nová]
   [stará] [bublina %] → tlačidlo. Textový blok začína v rovine pod fotkou,
   cenový blok sedí na spodku karty — voľné miesto pri krátkom názve je medzi
   názvom a cenou (výber Šimona, kolo 7).
   PASCE, na ktoré sa tu naráža:
   - .p-in::before — šablóna kreslí 20 px biely pás NAD kartu; pri tieni karty
     ho prekrýval ako „zlomený tieň“. Vypnuté.
   - Master má pre mobil na bubline min-height 44px — tu prebité na 0.
   - Šablónový 1px rám a biele pozadie .p-in zostávajú, tieň je na .p.
   - Bublina % sedí na desktope pri cene (JS ju presúva do .prices), na mobile
     vedľa štítku Akcia (JS ju presúva do .flags-default). Bez JS ostáva
     v páse nad fotkou vpravo ako pilulka — to je zámerný fallback. */

/* --- karta --- */
:is(#products, .products-block) .product { margin-bottom: 40px !important; }
:is(#products, .products-block) .product .p {
    margin: 0 6px !important;
    padding: 12px 9px 14px !important;
    border: 0 !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.09) !important;
    background: #fff !important;
}
:is(#products, .products-block) .product .p .p-in::before { display: none !important; content: none !important; }
:is(#products, .products-block) .product .p a.image { display: block !important; padding-top: 24px !important; margin-bottom: 12px !important; }
:is(#products, .products-block) .product .p .p-in { padding: 0 2px !important; }
:is(#products, .products-block) .product .p .p-in-in { flex: 0 0 auto !important; margin-top: 0 !important; }

/* --- značka (vkladá JS z poľa Výrobca) --- */
:is(#products, .products-block) .product .p .nv-brand {
    display: block; margin: 0 0 2px; font-size: 12px; line-height: 1.2; font-weight: 600;
    letter-spacing: .04em; text-transform: uppercase; color: #8a8a8a;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* --- názov: max 2 riadky, bez rezervy --- */
:is(#products, .products-block) .product .p a.name {
    display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important;
    overflow: hidden !important; text-overflow: ellipsis !important;
    line-height: 1.25 !important; min-height: 0 !important; max-height: 37.5px !important;
    margin: 0 0 6px !important;
}
:is(#products, .products-block) .product .p a.name span { font-size: 15px !important; font-weight: 500 !important; line-height: 1.25 !important; }

/* --- hviezdičky vľavo v medzere pod fotkou --- */
:is(#products, .products-block) .product .p .ratings-wrapper { height: 0 !important; min-height: 0 !important; display: flex !important; justify-content: flex-start !important; }
:is(#products, .products-block) .product .p .stars-wrapper { position: absolute !important; left: 0 !important; top: -20px !important; bottom: auto !important; transform: none !important; }

/* --- cenový blok = mriežka: riadok 1 info, riadok 2 [nová][stará][bublina →].
       Riadok 1 = gramáž ako PILULKA „500 g“ (svetlozelené pole, tmavý text) + merná cena sivo v zátvorke,
       obe zarovnané na stred; medzera k cene 9 px (row-gap). Dôvod (Šimon 21.8.2026, 2. kolo): tučná
       tmavá gramáž nad tučnou cenou sa plietla — najmä v Kč („500 g“ nad „500 Kč“). Pilulka číta ako
       vlastnosť, cena ostáva jediné veľké číslo. Výška riadku min. 24 px (mobil 22), s pilulkou ~23 px. --- */
:is(#products, .products-block) .product .p .p-bottom { min-height: 0 !important; padding: 0 !important; margin-top: auto !important; }
:is(#products, .products-block) .product .p .p-bottom > div {
    display: flex !important; flex-direction: column !important; align-items: stretch !important;
    justify-content: space-between !important; gap: 8px !important; flex-wrap: nowrap !important; height: auto !important;
}
:is(#products, .products-block) .product .p .prices {
    display: grid !important; grid-template-columns: max-content max-content 1fr !important; grid-template-rows: minmax(24px, auto) auto !important;
    column-gap: 6px !important; row-gap: 9px !important; align-items: last baseline !important;
    flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; margin: 0 !important; text-align: left !important;
}
:is(#products, .products-block) .product .p .prices .nv-info {
    grid-row: 1; grid-column: 1 / -1; align-self: start;
    display: flex; align-items: center; gap: 5px;
    font-size: 13px; line-height: 1.2; font-weight: 500; color: #8a8a8a;
    white-space: nowrap; overflow: hidden;
}
:is(#products, .products-block) .product .p .prices .nv-info b {
    display: inline-flex; align-items: center; flex: 0 0 auto;
    font-size: 15px; font-weight: 600; line-height: 1.25; color: #1f1f1f;
    background: #e3f5e4; padding: 4px 10px; border-radius: 999px;
}
:is(#products, .products-block) .product .p .prices .price-final { grid-row: 2; grid-column: 1; margin: 0 !important; white-space: nowrap !important; }
:is(#products, .products-block) .product .p .prices .price-final strong { font-size: 20px !important; line-height: 1.15 !important; }
:is(#products, .products-block) .product:has(.custom-old-price) .p .prices .price-final strong { color: #d42424 !important; }
:is(#products, .products-block) .product .p .custom-old-price {
    grid-row: 2; grid-column: 2; margin: 0 !important; font-size: 13px !important; font-weight: 500 !important; color: #555 !important;
    text-decoration: line-through !important; text-decoration-thickness: 1px !important; text-decoration-color: #999 !important;
    line-height: 1.2 !important; white-space: nowrap !important;
}

/* --- bublina so zľavou: pilulka; pri cene (desktop, presúva JS) --- */
html body :is(#products, .products-block) .product .flags-extra { padding: 0 !important; }
html body :is(#products, .products-block) .product .prices .flags-extra {
    position: static !important; grid-row: 2; grid-column: 3; justify-self: end; align-self: center !important;
    display: flex !important; margin: 0 !important;
}
html body :is(#products, .products-block) .product a.image > .flags-extra { top: 0 !important; right: 0 !important; bottom: auto !important; }  /* fallback bez JS */
html body :is(#products, .products-block) .product .flags-extra .flag.flag-discount {
    width: auto !important; height: 24px !important; min-height: 0 !important; border-radius: 12px !important; padding: 0 7px !important;
}
html body :is(#products, .products-block) .product .flags-extra .flag.flag-discount .price-save { font-size: 12px !important; }

/* --- cena s kódom: chip vpravo od ceny, popis hore, cena dole, na spodnej linke ceny --- */
:is(#products, .products-block) .product .p .custom-code-price {
    grid-row: 2; grid-column: 2 / -1; justify-self: start; align-self: last baseline;
    display: inline-flex !important; flex-direction: column !important; align-items: baseline;
    margin: 0 !important; padding: 3px 9px !important; line-height: 1.15 !important; white-space: nowrap !important;
    font-size: 12px !important; background: #F3F7ED !important; box-sizing: border-box;
}
:is(#products, .products-block) .product .p .custom-code-price .nv-code-l { order: 0; font-size: 12px; font-weight: 600; color: #555; }
:is(#products, .products-block) .product .p .custom-code-price .nv-code-l i { font-style: normal; font-weight: 500; }
:is(#products, .products-block) .product .p .custom-code-price .nv-code-p { order: 1; font-size: 14px; font-weight: 800; }

/* --- tlačidlo --- */
:is(#products, .products-block) .product .p .p-tools { width: 100% !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; flex: 0 0 auto !important; display: block !important; }
:is(#products, .products-block) .product .p form.pr-action { width: auto !important; display: block !important; }
:is(#products, .products-block) .product .p .add-to-cart-button {
    width: 100% !important; height: 44px !important; min-height: 0 !important; font-size: 17px !important;
    padding: 0 18px !important; display: inline-flex !important; white-space: nowrap !important;
}

/* --- štítky: v páse nad fotkou, v rade, bez tieňa; poradie Akcia → % → kupón → BIO/Tip/New --- */
html body :is(#products, .products-block) .product .p .flags.flags-default {
    top: 0 !important; left: 0 !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
    gap: 4px !important; padding: 0 !important; width: auto !important; max-width: 100% !important; overflow: hidden !important; align-items: flex-start !important;
}
html body :is(#products, .products-block) .product .p .flags.flags-default .flag { margin: 0 !important; box-shadow: none !important; }
:is(#products, .products-block) .product .p .flags.flags-default .flag { order: 5; }   /* ostatné (napr. „1ks = 100g“) až za BIO/Tip/New */
:is(#products, .products-block) .product .p .flags.flags-default .flag-action,
:is(#products, .products-block) .product .p .flags.flags-default .flag-zachran-tovar,
:is(#products, .products-block) .product .p .flags.flags-default .flag-zachran-zbozi { order: 0; }   /* CZ má inú triedu než SK */
html body :is(#products, .products-block) .product .flags-default .flags-extra { position: static !important; order: 1; display: flex !important; margin: 0 !important; top: auto !important; right: auto !important; bottom: auto !important; }
:is(#products, .products-block) .product .p .flags.flags-default .nv-coupon { order: 2; }
:is(#products, .products-block) .product .p .flags.flags-default .flag-custom2,
:is(#products, .products-block) .product .p .flags.flags-default .flag-tip,
:is(#products, .products-block) .product .p .flags.flags-default .flag-new { order: 3; }
:is(#products, .products-block) .product .p .flags.flags-default .flag-custom3 { order: 9; }

/* --- štítky POD fotkou: „Zachráň ma“ (SK flag-zachran-tovar) / „Zachraň mě“ (CZ flag-zachran-zbozi),
       „Bez obalu“ (flag-custom1), „Novinka“ (flag-new), „Najvýhodnejšie“ (flag-custom3) —
       JS ich presúva z pásu nad fotkou do <div class="flags nv-flags-under"> nad značku (Šimon 21.8.2026).
       Menšie ako štítky hore (11 px), bez tieňa; keď sa nezmestia do šírky, zalomia sa do druhého riadku.
       Karta s týmto riadkom je v textovej časti o ~24 px vyššia. --- */
html body :is(#products, .products-block) .product .p .nv-flags-under {
    position: static !important; display: flex !important; flex-direction: row !important; flex-wrap: wrap !important;
    gap: 4px !important; margin: 0 0 6px !important; padding: 0 !important; width: auto !important; max-width: 100% !important;
    overflow: visible !important; align-items: flex-start !important; top: auto !important; left: auto !important; z-index: auto !important;
}
html body :is(#products, .products-block) .product .p .nv-flags-under .flag {
    position: static !important; display: block !important; margin: 0 !important; box-shadow: none !important;
    font-size: 11px !important; line-height: 1.2 !important; padding: 3px 8px !important; border-radius: 7px !important; white-space: nowrap !important;
}

/* --- hlavička pri skrole: viditeľná spodná hrana (karty pod ňu vchádzajú) --- */
#header.fixed-menu { box-shadow: 0 2px 10px rgba(0,0,0,.12) !important; }

/* --- MOBIL (do 767 px): dve karty v rade, menšie štítky, bublina vedľa Akcie, stará cena vedľa novej.
       Pás štítkov nad fotkou je na mobile V TOKU (nie absolútne): a.image je stĺpcový flex, pás ide
       pred obrázok (order -1). Keď sa 3 štítky do šírky karty nezmestia, posledný sa zalomí o riadok
       nižšie a fotka sa posunie (poistka, Šimon 21.8.2026). Bez JS to funguje tiež. --- */
@media (max-width: 767px) {
    :is(#products, .products-block) .product .p a.image { padding-top: 0 !important; display: flex !important; flex-direction: column !important; }
    html body :is(#products, .products-block) .product .p .flags.flags-default {
        position: static !important; order: -1 !important; flex-wrap: wrap !important; row-gap: 4px !important;
        min-height: 24px !important; margin: 0 0 0 !important; overflow: visible !important; align-content: flex-start !important;
        padding-bottom: 5px !important; box-sizing: border-box !important;
    }
    :is(#products, .products-block) .product .p a.image:not(:has(.flags-default)) { padding-top: 24px !important; }   /* karta bez štítkov: rovnaký odsadený vrch */
    html body :is(#products, .products-block) .product .p a.image > img { order: 0; }
    html body :is(#products, .products-block) .product .p a.image > .flags-extra { order: -1; }   /* fallback bez JS: bublina vpravo v páse */
    :is(#products, .products-block) .product { margin-bottom: 16px !important; }
    :is(#products, .products-block) .product .p { padding-top: 5px !important; padding-bottom: 8px !important; }
    :is(#products, .products-block) .product .p .p-in { padding: 0 !important; }
    :is(#products, .products-block) .product .p .nv-brand { font-size: 11px; }
    :is(#products, .products-block) .product .p a.name { max-height: 32.5px !important; }
    :is(#products, .products-block) .product .p a.name span { font-size: 13px !important; }
    html body :is(#products, .products-block) .product .p .flags.flags-default .flag { font-size: 11px !important; padding: 3px 8px !important; }
    html body :is(#products, .products-block) .product .p .flags.flags-default > *:nth-child(n+4) { display: none !important; }
    html body :is(#products, .products-block) .product .p .nv-flags-under { margin-bottom: 4px !important; }
    html body :is(#products, .products-block) .product .p .nv-flags-under .flag { font-size: 10px !important; padding: 2px 6px !important; border-radius: 6px !important; }
    :is(#products, .products-block) .product .p .prices { grid-template-rows: minmax(22px, auto) auto !important; }
    :is(#products, .products-block) .product .p .prices .nv-info { font-size: 11px; }
    :is(#products, .products-block) .product .p .prices .nv-info b { font-size: 13px; padding: 3px 7px; }
    :is(#products, .products-block) .product .p .prices .price-final strong { font-size: 18px !important; }
    :is(#products, .products-block) .product .p .custom-old-price { font-size: 12px !important; }
    html body :is(#products, .products-block) .product .flags-extra .flag.flag-discount { height: 19px !important; padding: 0 7px !important; border-radius: 10px !important; }
    html body :is(#products, .products-block) .product .flags-extra .flag.flag-discount .price-save { font-size: 11px !important; }
    :is(#products, .products-block) .product .p .custom-code-price { padding: 3px 6px !important; }   /* o stupeň väčší chip (Šimon 21.8.2026) */
    :is(#products, .products-block) .product .p .custom-code-price .nv-code-l { font-size: 11px; }
    :is(#products, .products-block) .product .p .custom-code-price .nv-code-l i { display: none; }
    :is(#products, .products-block) .product .p .custom-code-price .nv-code-l::before { content: 'kód '; font-weight: 500; }
    :is(#products, .products-block) .product .p .custom-code-price .nv-code-p { font-size: 13px; }
    :is(#products, .products-block) .product .p .add-to-cart-button { height: 36px !important; font-size: 15px !important; }
}

/* --- karusely (.products-block): šablóna centruje texty, karta V50 je zarovnaná vľavo --- */
.products-block .product .p .nv-brand,
.products-block .product .p a.name,
.products-block .product .p .prices { text-align: left !important; }
.products-block .product .p .p-in-in { width: 100% !important; }
.products-block .slick-track { display: flex !important; align-items: stretch !important; }
.products-block .slick-slide { height: auto !important; }