/* 1. RESET PROSTREDIA (Aby Shoptet nerobil bordel) */
.description-inner,
.basic-description {
    display: block !important;
    width: 100% !important;
}

/* 2. SECTION BREAK - TOTO JE TÁ TVOJA MAGICKÁ ČIARA */
/* Zabezpečí, že každá nová sekcia (Android, HDR...) začne na novom riadku */
.section-break {
    clear: both !important;
    display: block !important;
    width: 100% !important;
    height: 1px !important;
    margin-top: 20px !important;
    margin-bottom: 10px !important;
}

/* 3. OBRÁZKY (Zig-Zag) */
.basic-description img {
    width: 40% !important;
    /* Tvoja ideálna šírka */
    height: auto !important;
    margin-bottom: 10px !important;
    display: inline-block !important;
}

/* Nepárne obrázky -> VĽAVO */
.basic-description img:nth-of-type(odd) {
    float: left !important;
    margin-right: 30px !important;
    /* Medzera medzi fotkou a textom */
    clear: both !important;
}

/* Párne obrázky -> VPRAVO */
.basic-description img:nth-of-type(even) {
    float: right !important;
    margin-left: 30px !important;
    /* Medzera vľavo */
    clear: both !important;
}

/* 4. TEXTY A NADPISY */
/* Dôležité: clear: none, aby nadpis mohol ísť vedľa fotky */
.basic-description h2,
.basic-description h3 {
    clear: none !important;
    display: block !important;
    width: auto !important;
    /* Nech zaberie len toľko miesta, koľko je vedľa fotky */
    margin-top: 0 !important;
    /* Zarovnanie s hornou hranou fotky */
    padding-top: 0 !important;
    margin-bottom: 10px !important;
}

.basic-description p {
    margin-bottom: 10px !important;
}

/* 5. MOBIL - OPRAVENÁ VERZIA */
@media (max-width: 768px) {

    /* OPRAVA: selektory musia byť rovnako špecifické
       ako tie s :nth-of-type(odd/even) vyššie,
       inak !important neprepíše float na mobile */
    .basic-description img,
    .basic-description img:nth-of-type(odd),
    .basic-description img:nth-of-type(even) {
        float: none !important;
        width: 100% !important;
        margin: 20px 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        display: block !important;
        clear: both !important;
    }

    /* Clearfix – vyčistí float v kontajneri popisu */
    .basic-description::after {
        content: '' !important;
        display: block !important;
        clear: both !important;
    }

    /* Zabezpečí, že description-inner správne obsahuje obsah */
    #description .description-inner {
        overflow: hidden !important;
    }
}