/* =========================================
   THERAPEA - ZAOBLENE PRODUKTOVE KARTY
   Homepage + kategorie + standardne vypisy
   ========================================= */


/* =========================================
   1. PRODUKTOVA KARTA
   ========================================= */

.p[data-micro="product"] {
    position: relative;

    background: #fff !important;

    border: 1px solid rgba(23, 76, 60, 0.14) !important;
    border-radius: 22px !important;

    overflow: hidden !important;

    box-shadow:
        0 8px 24px rgba(23, 76, 60, 0.035),
        0 2px 6px rgba(23, 76, 60, 0.02) !important;

    height: 100%;
    margin-bottom: 0;

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}


/* =========================================
   2. OBRAZOK PRODUKTOVEJ KARTY
   ========================================= */

.p[data-micro="product"] > .image {
    display: block;
    overflow: hidden !important;
}


/* =========================================
   3. HOVER - DESKTOP
   ========================================= */

@media (hover: hover) {

    .p[data-micro="product"]:hover {
        border-color: rgba(23, 76, 60, 0.24) !important;

        box-shadow:
            0 10px 28px rgba(23, 76, 60, 0.05),
            0 3px 8px rgba(23, 76, 60, 0.025) !important;
    }

}


/* =========================================
   4. PRODUKTOVE KARTY - MOBIL
   ========================================= */

@media (max-width: 767px) {

    .p[data-micro="product"] {
        border-radius: 20px !important;
    }


    /* Jemne kompaktnejsia textova cast */

    .p[data-micro="product"] .p-in {
        padding-left: 10px;
        padding-right: 10px;
    }


    .p[data-micro="product"] .p-in-in {
        margin-bottom: 4px;
    }


    .p[data-micro="product"] .p-bottom {
        padding-bottom: 14px;
    }

}



/* =========================================================
   5. THERAPEA - STICKY HLAVNY PRODUKTOVY OBRAZOK
   ---------------------------------------------------------
   Desktop:
   Hlavny produktovy obrazok zostava pri scrollovani
   prilepeny k obrazovke.

   Sticky je aplikovane na .p-image,
   NIE na cely .p-image-wrapper.

   .p-image-wrapper tvori hranicu sticky efektu.
   ========================================================= */

@media (min-width: 1200px) {

    .p-detail-inner .p-image-wrapper {
        position: relative !important;
        overflow: visible !important;
    }

    .p-detail-inner .p-image-wrapper > .p-image {
        position: sticky !important;
        top: 110px !important;
        z-index: 10;
    }

}



/* =========================================================
   6. THERAPEA - ZLAVOVE KOLIESKO
   ---------------------------------------------------------
   Brand farba:
   tlmena ruzova #B1848B

   Zakladna farba plati na vsetky zariadenia.
   ========================================================= */

.flags-extra .flag.flag-discount {
    background-color: #B1848B !important;
    color: #ffffff !important;
}

.flags-extra .flag.flag-discount .price-standard,
.flags-extra .flag.flag-discount .price-save {
    color: #ffffff !important;
}



/* =========================================================
   7. ZLAVOVE KOLIESKO - DESKTOP
   ---------------------------------------------------------
   Vacsi badge, vacsie pismo a pozicia blizsie
   k hlavnemu produktu.
   ========================================================= */

@media (min-width: 1200px) {

    .p-detail-inner .p-image-wrapper .flags-extra {
        position: absolute !important;

        top: 500px !important;
        right: 55px !important;
        bottom: auto !important;
        left: auto !important;

        margin: 0 !important;

        z-index: 20 !important;
    }


    .p-detail-inner
    .p-image-wrapper
    .flags-extra
    .flag.flag-discount {

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        width: 116px !important;
        height: 116px !important;

        min-width: 116px !important;
        min-height: 116px !important;

        margin: 0 !important;
        padding: 0 !important;

        border-radius: 50% !important;

        background-color: #B1848B !important;
        color: #ffffff !important;

        text-align: center !important;
        line-height: 1.05 !important;
    }


    /* Povodna cena */

    .p-detail-inner
    .p-image-wrapper
    .flags-extra
    .flag.flag-discount
    .price-standard {

        display: block !important;

        margin: 0 0 5px !important;

        color: #ffffff !important;

        font-size: 16px !important;
        font-weight: 500 !important;
        line-height: 1.05 !important;
    }


    /* Percento zlavy */

    .p-detail-inner
    .p-image-wrapper
    .flags-extra
    .flag.flag-discount
    .price-save {

        display: block !important;

        margin: 0 !important;

        color: #ffffff !important;

        font-size: 20px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
    }

}



/* =========================================================
   8. THERAPEA - BREADCRUMB NAVIGACIA
   ---------------------------------------------------------
   Shoptet standardne pouziva:
   .breadcrumbs { font-size: 90%; }

   Pri zakladnych 14 px vznikne 12.6 px.
   Tu breadcrumb natvrdo vraciame na 14 px.
   ========================================================= */

body .breadcrumbs.navigation-home-icon-wrapper {
    font-size: 14px !important;
}

body .breadcrumbs.navigation-home-icon-wrapper a,
body .breadcrumbs.navigation-home-icon-wrapper [itemprop="name"] {
    font-size: 14px !important;
}