/* --- MOBILNÍ DESIGN: ATOMOVÝ RESET (Grid logika) --- */
@media (max-width: 768px) {
    
    /* 1. Skrytí textů */
    .products-block .product .p-desc,
    .products-block .product .p-short-description,
    .products-block .product .p-params {
        display: none !important;
    }

    /* 2. CENA */
    .products-block .product .price-final-holder,
    .products-block .product .price-final {
        font-size: 18px !important;
        font-weight: 700 !important;
        color: #000 !important;
        text-align: center !important;
        margin-bottom: 8px !important;
    }

    /* 3. TOTÁLNÍ ROZTAŽENÍ PŘES CSS GRID */
    /* Vynutíme, aby p-tools byl kontejner, který vše uvnitř roztáhne na max */
    .p-tools {
        display: grid !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .p-tools form, 
    .pr-action {
        display: grid !important;
        width: 100% !important;
        margin: 0 !important;
    }

    /* 4. TLAČÍTKO - Totální dominance */
    .add-to-cart-button, 
    .btn-cart {
        display: flex !important; /* Změna na flex pro centrování spanu */
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        
        /* Design */
        padding: 10px 0 !important;
        font-size: 14px !important;
        border-radius: 4px !important;
        
        /* Resetování vnitřních prvků (spanu) */
        margin: 5px 0 0 0 !important;
    }

    .add-to-cart-button span {
        display: inline !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
    }
}

/* --- OPRAVA RESPONZIVITY OBRÁZKŮ V OBSAHU --- */

/* Toto pravidlo zajistí, že žádný obrázek vložený do textu (např. Doprava a platba) 
   nepřesáhne šířku displeje a zachová si poměr stran. */
.content-inner img, 
.custom-content img,
#content img {
    max-width: 100% !important;
    height: auto !important;
}

/* Pojistka pro obrázky, které by mohly být vloženy v tabulce */
table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    word-wrap: break-word !important;
}

/* 1. Detail produktu */
.p-detail-inner .price-final-holder,
.p-detail-inner .price-final-holder * {
    color: #000000 !important;
}

/* 2. Výpis produktů (kategorie, homepage) - AGRESIIVNÍ METODA */
/* Cílí na kontejner ceny a vynucuje černou pro vše uvnitř */
.products-block .price-final,
.products-block .price-final *,
.products-block .p-final-price,
.products-block .p-final-price * {
    color: #000000 !important;
    fill: #000000 !important; /* Pro případné SVG ikony měny */
}

/* 3. Speciální fix pro šablony, které balí cenu do odkazu */
a.price-final,
.price-final > a {
    color: #000000 !important;
    text-decoration: none !important; /* Volitelné: odstraní podtržení */
}

/* =========================================================
   FINÁLNÍ OPRAVA: MŘÍŽKA 2x2 (Dle analýzy kódu)
   ========================================================= */

@media (max-width: 768px) {

    /* 1. ZAPNUTÍ MŘÍŽKY (Cílíme na body.type-category a #products) */
    body.type-category #products {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important; /* Dva sloupce */
        gap: 6px !important; /* Mezera mezi kartami */
        padding: 5px !important;
        margin: 0 !important;
    }

    /* Vypnutí starého stylu (flex/float), který to držel pod sebou */
    body.type-category #products::before,
    body.type-category #products::after { 
        display: none !important; 
    }

    /* 2. OPRAVA BUŇKY PRODUKTU */
    /* Musíme ji vynulovat, aby se podřídila mřížce */
    body.type-category #products .product {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important; /* Aby se výška karty roztáhla */
        height: auto !important;
        border: none !important; /* Rámeček dáme až vnitřnímu prvku */
        background: transparent !important;
    }

    /* 3. STYLOVÁNÍ VNITŘNÍ KARTY (.p) */
    /* Toto je ten bílý boxík s obsahem */
    body.type-category #products .product .p {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important; /* Seřadit prvky pod sebe */
        justify-content: space-between !important;
        
        box-sizing: border-box !important;
        background: #fff !important;
        border: 1px solid #e0e0e0 !important; /* Jemný rámeček */
        border-radius: 6px !important;
        padding: 8px !important;
        height: 100% !important; /* Aby byly všechny karty stejně vysoké */
    }

    /* 4. OBRÁZEK - Musí být nahoře a uprostřed */
    body.type-category #products .product .image {
        float: none !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        height: 140px !important; /* Fixní výška, aby texty neposkakovaly */
        margin: 0 0 10px 0 !important;
    }
    
    body.type-category #products .product .image img {
        max-height: 100% !important;
        max-width: 100% !important;
        width: auto !important;
        margin: 0 auto !important;
    }

    /* 5. TEXTY A CENA */
    body.type-category #products .product .p-in {
        padding: 0 !important;
        margin: 0 !important;
        text-align: center !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        flex-grow: 1 !important;
    }

    body.type-category #products .product .name {
        font-size: 13px !important;
        height: 40px !important; /* Omezení na 2-3 řádky */
        overflow: hidden !important;
        margin-bottom: 5px !important;
        text-align: center !important;
    }

    /* 6. SKRYTÍ PŘEKÁŽEJÍCÍHO BALASTU */
    /* Skryjeme zelené fajfky (.p-params), popisky a dostupnost v mřížce */
    body.type-category #products .product .p-desc,
    body.type-category #products .product .p-short-description,
    body.type-category #products .product .p-params, 
    body.type-category #products .product .availability,
    body.type-category #products .product .p-code {
        display: none !important;
    }

    /* 7. CENA A TLAČÍTKO */
    body.type-category #products .product .price-final-holder {
        margin-top: auto !important; /* Odtlačí cenu dolů */
        margin-bottom: 5px !important;
        text-align: center !important;
        justify-content: center !important;
    }

    body.type-category #products .product .p-tools {
        margin-top: 0 !important;
    }

    /* Zmenšení tlačítek, aby se vešla */
    body.type-category #products .product .add-to-cart-button,
    body.type-category #products .product .btn {
        padding: 8px 0 !important;
        font-size: 12px !important;
        width: 100% !important;
    }
}

/* --- DOPLNĚK: OPRAVA TEXTŮ A TLAČÍTEK UVNITŘ MŘÍŽKY --- */
@media (max-width: 768px) {

    /* 1. SEŘAZENÍ SPODNÍ ČÁSTI POD SEBE */
    /* Změníme směr z "řádku" na "sloupec", aby cena a tlačítko nebyly vedle sebe */
    body.type-category .product .p-bottom {
        display: flex !important;
        flex-direction: column !important; 
        justify-content: flex-end !important;
        position: static !important; /* Zrušíme fixní pozicování, které dělá překryv */
        height: auto !important;
        padding: 0 !important;
        background: transparent !important;
        margin-top: auto !important; /* Odtlačí se co nejníže */
    }

    /* 2. SKRYTÍ TOHO DLOUHÉHO POPISU S FAJFKAMI */
    /* Toto je hlavní viník rozbitého vzhledu na screenshotech */
    body.type-category .product .p-desc {
        display: none !important;
    }

    /* 3. CENA - Vycentrování */
    body.type-category .product .prices {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        margin-bottom: 5px !important;
    }

    /* 4. OPRAVA TLAČÍTEK (Detail vs Do košíku) */
    /* Sjednotíme vzhled: ať je to odkaz (Detail) nebo tlačítko, bude to vypadat stejně */
    body.type-category .product .p-tools {
        width: 100% !important;
        display: block !important;
        margin: 0 !important;
    }

    body.type-category .product .p-tools a,
    body.type-category .product .p-tools button {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        background-color: #548994 !important; /* Tvá barva e-shopu */
        color: #ffffff !important;
        padding: 8px 0 !important;
        text-align: center !important;
        border-radius: 4px !important;
        text-decoration: none !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        font-size: 12px !important;
        border: none !important;
        margin-top: 0 !important;
    }

    /* Skrytí malé šipky ">", která je u odkazů */
    body.type-category .product .p-tools a::after {
        display: none !important;
    }
}

/* --- DOPLNĚK 2: FINALIZACE CENY A TEXTŮ TLAČÍTEK --- */
@media (max-width: 768px) {

    /* 1. OPRAVA PŘEKRÝVÁNÍ CENY (To je ten hlavní problém) */
    /* Vynutíme, aby cena spadla dolů pod název */
    body.type-category .product .prices,
    body.type-category .product .price-final-holder {
        position: static !important; /* Zruší "plovoucí" pozici */
        display: block !important;
        margin-top: 15px !important; /* Odstrčí cenu od názvu směrem dolů */
        margin-bottom: 8px !important;
        height: auto !important;
        width: 100% !important;
        transform: none !important;
    }

    /* 2. ZVIDITELNĚNÍ TEXTU V TLAČÍTKU */
    /* Text tam je, ale pravděpodobně má špatnou barvu nebo je skrytý */
    body.type-category .product .p-tools a,
    body.type-category .product .p-tools button {
        color: #ffffff !important; /* Vynutíme bílou barvu textu */
        display: flex !important;
        align-items: center !important;   /* Vycentrování svisle */
        justify-content: center !important; /* Vycentrování vodorovně */
        text-indent: 0 !important; /* Zruší případné odsazení textu */
    }

    /* 3. POJISTKA PRO VNITŘNÍ TEXT TLAČÍTKA (SPAN) */
    /* Někdy je text schovaný uvnitř značky <span>, musíme ji odhalit */
    body.type-category .product .p-tools a span,
    body.type-category .product .p-tools button span {
        display: inline-block !important;
        color: #ffffff !important;
        font-size: 12px !important;
        font-weight: 700 !important; /* Tučnější písmo, aby bylo čitelné */
        opacity: 1 !important;
        visibility: visible !important;
        width: auto !important;
    }
    
    /* Zajištění, že kontejner s cenou a tlačítkem má dost místa */
    body.type-category .product .p-bottom {
        height: auto !important;
        min-height: 80px !important; /* Rezerva pro cenu i tlačítko */
    }
}

/* --- DOPLNĚK: ZÁCHRANA NEVIDITELNÉ CENY --- */
@media (max-width: 768px) {

    /* 1. ROZTAŽENÍ SPODNÍHO KONTEJNERU */
    /* Zásadní krok: Musíme tomu boxu říct, ať se nafoukne, jinak se tam cena nevejde */
    body.type-category .product .p-bottom {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        height: auto !important;
        min-height: 90px !important; /* Vynucujeme místo pro cenu i tlačítko! */
        padding-top: 10px !important;
        position: static !important;
        overflow: visible !important; /* Zabrání oříznutí obsahu */
    }

    /* 2. CENA - Vynucení viditelnosti a pozice */
    body.type-category .product .prices,
    body.type-category .product .price-final-holder {
        display: block !important;
        order: -1 !important; /* Musí být úplně nahoře */
        width: 100% !important;
        text-align: center !important;
        margin-bottom: 5px !important;
        position: relative !important;
        z-index: 10 !important; /* Vytáhneme ji do popředí */
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
    }

    /* 3. BARVA CENY */
    body.type-category .product .price-final {
        color: #000000 !important;
        font-size: 16px !important;
        font-weight: 800 !important;
        display: inline-block !important;
    }

    /* 4. TLAČÍTKO - Pod cenou */
    body.type-category .product .p-tools {
        order: 10 !important; /* Musí být dole */
        width: 100% !important;
        margin-top: 0 !important;
    }
    
    /* Pojistka: Skrytí staré přeškrtnuté ceny, aby nezabírala místo */
    body.type-category .product .old-price {
        display: none !important;
    }
}

/* --- DOPLNĚK 4: FINÁLNÍ POSUN CENY NAHORU --- */
@media (max-width: 768px) {

    /* 1. ODBLOKOVÁNÍ "PRUŽINY" (.p-bottom) */
    /* Změníme 'margin-top: auto' na '0', aby se to netlačilo dolů, ale drželo u textu */
    body.type-category .product .p-bottom {
        margin-top: 0 !important; 
        padding-top: 5px !important;
        position: static !important;
        justify-content: flex-start !important; /* Zarovná obsah na začátek (nahoru) */
    }

    /* 2. CENA - ÚPLNÝ RESET POZICE */
    /* Tímto zajistíme, že cena nebude lítat přes obrázek ani nebude mít mezeru */
    body.type-category .product .prices,
    body.type-category .product .price-final-holder {
        position: static !important; /* Zruší absolutní pozici (fix lítání přes foto) */
        display: block !important;
        margin-top: 5px !important; /* Jen malá mezera od názvu */
        margin-bottom: 5px !important;
        transform: none !important;
        height: auto !important;
        line-height: 1.2 !important;
    }

    /* 3. NÁZEV PRODUKTU - POJISTKA */
    /* Ujistíme se, že název má svůj prostor a cena do něj nezasahuje */
    body.type-category .product .p-in {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    
    /* 4. TLAČÍTKO */
    /* Tlačítko se posune hned pod cenu */
    body.type-category .product .p-tools {
        margin-top: 0 !important;
    }
}

/* --- DOPLNĚK 5 (FIX): VYNUCENÍ VIDITELNOSTI TLAČÍTKA DETAIL --- */
@media (max-width: 768px) {

    /* 1. Zacílíme na odkaz, který se tváří jako tlačítko (.btn) */
    body.type-category .product .p-tools a.btn {
        /* Vzhled - Barva a pozadí */
        background-color: #548994 !important; /* Tvá modro-šedá */
        color: #ffffff !important; /* Bílé písmo */
        border: none !important;
        border-radius: 4px !important;

        /* Rozměry */
        display: flex !important;
        width: 100% !important;
        padding: 10px 0 !important;
        margin-top: 5px !important;
        
        /* TEXT - TOTO JE KLÍČOVÉ */
        font-size: 12px !important; /* Pokud šablona dává 0px, toto to přebije */
        line-height: normal !important;
        text-indent: 0 !important; /* Vrátí text, pokud byl odsunutý */
        text-align: center !important;
        justify-content: center !important;
        align-items: center !important;
        text-transform: uppercase !important;
        font-weight: 700 !important;
        text-decoration: none !important;
        
        /* Viditelnost */
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* 2. Pojistka: Pokud je text schovaný uvnitř <span> */
    body.type-category .product .p-tools a.btn span {
        display: inline-block !important;
        font-size: 12px !important;
        color: #ffffff !important;
        visibility: visible !important;
    }

    /* 3. ZÁCHRANNÁ BRZDA (Pseudo-element) */
    /* Pokud je tlačítko prázdné (text zmizel úplně), tento řádek tam nápis "DETAIL" vloží znovu */
    body.type-category .product .p-tools a.btn::before {
        content: "DETAIL" !important; /* Vynutíme nápis */
        display: block !important;
        font-size: 12px !important;
        color: #ffffff !important;
    }
    
    /* Skryjeme původní text, pokud tam je dvakrát (kvůli bodu 3) */
    /* Použijeme trik: zprůhledníme originál text a zobrazíme jen náš ::before */
    body.type-category .product .p-tools a.btn {
        position: relative !important;
    }
}