/* =====================================================
   SKIMAX UI SYSTEM

   COLORS
   BACKGROUNDS
   FULL BLEED
   BORDERS
   UNDERLINES
   BUTTONS

   COLOR CODES:

   dg = DARK SKIMAX    #2cb9bb
   lg = LIGHT SKIMAX   #d5f1f1

   do = DARK ORANGE    #f08205
   lo = LIGHT ORANGE   #ffe2c2

   db = DARK BLUE      #0f65e6
   lb = LIGHT BLUE     #c9e9ff

   dp = DARK PINK      #d81b60
   lp = LIGHT PINK     #fde1ea

   dr = DARK RED       #ff3342
   lr = LIGHT RED      #ffc0c0
        pouze background / full-bleed

   g  = GREY           #dee2e6
        pouze background / full-bleed
===================================================== */


/* =====================================================
   1) COLOR PALETTE
===================================================== */

:root {

    /* SKIMAX */
    --skimax-dg: #2cb9bb;
    --skimax-lg: #d5f1f1;

    /* ORANGE */
    --skimax-do: #f08205;
    --skimax-lo: #ffe2c2;

    /* BLUE */
    --skimax-db: #0f65e6;
    --skimax-lb: #c9e9ff;

    /* PINK */
    --skimax-dp: #d81b60;
    --skimax-lp: #fde1ea;

    /* RED */
    --skimax-dr: #ff3342;
    --skimax-lr: #ffc0c0;

    /* GREY */
    --skimax-g: #dee2e6;

    /* TEXT / WHITE */
    --skimax-dark: #09171a;
    --skimax-light: #f9fdfe;
}



/* =====================================================
   2) COLOR MAP
===================================================== */


/* =========================
   DARK SKIMAX
========================= */

:is(
    .background-dg,
    .full-bleed-dg,
    .border-dg,
    .underline-dg,
    .button-dg,

    .background-dg-h,
    .full-bleed-dg-h,
    .underline-dg-h,

    .bgfbutton,
    .bgbutton,
    .sgfbutton,
    .sgbutton
) {
    --ui-color: var(--skimax-dg);
    --ui-text: var(--skimax-light);

    --ui-active: var(--skimax-lg);
    --ui-active-text: var(--skimax-dg);
}


/* =========================
   LIGHT SKIMAX
========================= */

:is(
    .background-lg,
    .full-bleed-lg,
    .border-lg,
    .underline-lg,
    .button-lg
) {
    --ui-color: var(--skimax-lg);
    --ui-text: var(--skimax-dark);

    --ui-active: var(--skimax-dg);
    --ui-active-text: var(--skimax-light);
}


/* =========================
   DARK ORANGE
========================= */

:is(
    .background-do,
    .full-bleed-do,
    .border-do,
    .underline-do,
    .button-do,

    .background-do-h,
    .full-bleed-do-h
) {
    --ui-color: var(--skimax-do);
    --ui-text: var(--skimax-light);

    --ui-active: var(--skimax-lo);
    --ui-active-text: var(--skimax-do);
}


/* =========================
   LIGHT ORANGE
========================= */

:is(
    .background-lo,
    .full-bleed-lo,
    .border-lo,
    .underline-lo,
    .button-lo
) {
    --ui-color: var(--skimax-lo);
    --ui-text: var(--skimax-dark);

    --ui-active: var(--skimax-do);
    --ui-active-text: var(--skimax-light);
}


/* =========================
   DARK BLUE
========================= */

:is(
    .background-db,
    .full-bleed-db,
    .border-db,
    .underline-db,
    .button-db,

    .background-db-h,
    .full-bleed-db-h,

    .bbfbutton,
    .bbbutton,
    .sbfbutton,
    .sbbutton
) {
    --ui-color: var(--skimax-db);
    --ui-text: var(--skimax-light);

    --ui-active: var(--skimax-lb);
    --ui-active-text: var(--skimax-db);
}


/* =========================
   LIGHT BLUE
========================= */

:is(
    .background-lb,
    .full-bleed-lb,
    .border-lb,
    .underline-lb,
    .button-lb,

    .full-bleed-lb-h
) {
    --ui-color: var(--skimax-lb);
    --ui-text: var(--skimax-dark);

    --ui-active: var(--skimax-db);
    --ui-active-text: var(--skimax-light);
}


/* =========================
   DARK PINK
========================= */

:is(
    .background-dp,
    .full-bleed-dp,
    .border-dp,
    .underline-dp,
    .button-dp,

    .bpfbutton,
    .bpbutton,
    .spfbutton,
    .spbutton
) {
    --ui-color: var(--skimax-dp);
    --ui-text: var(--skimax-light);

    --ui-active: var(--skimax-lp);
    --ui-active-text: var(--skimax-dp);
}


/* =========================
   LIGHT PINK
========================= */

:is(
    .background-lp,
    .full-bleed-lp,
    .border-lp,
    .underline-lp,
    .button-lp
) {
    --ui-color: var(--skimax-lp);
    --ui-text: var(--skimax-dark);

    --ui-active: var(--skimax-dp);
    --ui-active-text: var(--skimax-light);
}


/* =========================
   DARK RED

   pouze background + full bleed
========================= */

:is(
    .background-dr,
    .full-bleed-dr
) {
    --ui-color: var(--skimax-dr);
    --ui-text: var(--skimax-light);
}


/* =========================
   LIGHT RED

   pouze background + full bleed
========================= */

:is(
    .background-lr,
    .full-bleed-lr
) {
    --ui-color: var(--skimax-lr);
    --ui-text: var(--skimax-dark);
}


/* =========================
   GREY

   pouze background + full bleed
========================= */

:is(
    .background-g,
    .full-bleed-g
) {
    --ui-color: var(--skimax-g);
    --ui-text: var(--skimax-dark);
}



/* =====================================================
   3) BACKGROUND SYSTEM
===================================================== */

:is(
    .background-dg,
    .background-lg,

    .background-do,
    .background-lo,

    .background-db,
    .background-lb,

    .background-dp,
    .background-lp,

    .background-dr,
    .background-lr,

    .background-g
) {
    position: relative;

    background-color: var(--ui-color);
    color: var(--ui-text);

    padding: 3rem;

    border-radius: 3rem;

    box-sizing: border-box;
}


/* =========================
   TEXT UVNITŘ
========================= */

:is(
    .background-dg,
    .background-lg,

    .background-do,
    .background-lo,

    .background-db,
    .background-lb,

    .background-dp,
    .background-lp,

    .background-dr,
    .background-lr,

    .background-g
) :is(
    p,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    a
) {
    color: var(--ui-text) !important;
}


/* =========================
   MOBILE
========================= */

@media (max-width: 990px) {

    :is(
        .background-dg,
        .background-lg,

        .background-do,
        .background-lo,

        .background-db,
        .background-lb,

        .background-dp,
        .background-lp,

        .background-dr,
        .background-lr,

        .background-g
    ) {
        padding: 1.5rem;
        border-radius: 1.5rem;
    }

}



/* =====================================================
   4) LEGACY BACKGROUND -H
===================================================== */

:is(
    .background-dg-h,
    .background-do-h,
    .background-db-h
) {
    position: relative;

    background-color: var(--ui-color);
    color: var(--ui-text) !important;

    padding: 3rem !important;

    border-radius: 3rem;

    box-sizing: border-box;
}


:is(
    .background-dg-h,
    .background-do-h,
    .background-db-h
) :is(
    p,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    a,
    span,
    strong,
    li
) {
    color: var(--ui-text) !important;
}


:is(
    .background-dg-h,
    .background-do-h,
    .background-db-h
) > :is(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6
) {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


@media (max-width: 990px) {

    :is(
        .background-dg-h,
        .background-do-h,
        .background-db-h
    ) {
        padding: 1.5rem !important;
        border-radius: 1.5rem;
    }

}



/* =====================================================
   5) FULL BLEED SYSTEM
===================================================== */

:is(
    .full-bleed-dg,
    .full-bleed-lg,

    .full-bleed-do,
    .full-bleed-lo,

    .full-bleed-db,
    .full-bleed-lb,

    .full-bleed-dp,
    .full-bleed-lp,

    .full-bleed-dr,
    .full-bleed-lr,

    .full-bleed-g
) {
    position: relative;

    width: 100vw;

    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);

    background-color: var(--ui-color);
    color: var(--ui-text);

    padding: 3rem 15%;

    box-sizing: border-box;
}


/* =========================
   TEXT UVNITŘ
========================= */

:is(
    .full-bleed-dg,
    .full-bleed-lg,

    .full-bleed-do,
    .full-bleed-lo,

    .full-bleed-db,
    .full-bleed-lb,

    .full-bleed-dp,
    .full-bleed-lp,

    .full-bleed-dr,
    .full-bleed-lr,

    .full-bleed-g
) :is(
    p,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    a
) {
    color: var(--ui-text) !important;
}


/* =========================
   MOBILE
========================= */

@media (max-width: 990px) {

    :is(
        .full-bleed-dg,
        .full-bleed-lg,

        .full-bleed-do,
        .full-bleed-lo,

        .full-bleed-db,
        .full-bleed-lb,

        .full-bleed-dp,
        .full-bleed-lp,

        .full-bleed-dr,
        .full-bleed-lr,

        .full-bleed-g
    ) {
        padding: 3rem 10%;
    }

}



/* =====================================================
   6) LEGACY FULL BLEED -H
===================================================== */

:is(
    .full-bleed-db-h,
    .full-bleed-lb-h,
    .full-bleed-dg-h,
    .full-bleed-do-h
) {
    position: relative;

    width: 100vw;

    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);

    background-color: var(--ui-color);
    color: var(--ui-text);

    padding: 1rem 15%;

    box-sizing: border-box;
}


:is(
    .full-bleed-db-h,
    .full-bleed-lb-h,
    .full-bleed-dg-h,
    .full-bleed-do-h
) :is(
    p,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    a
) {
    color: var(--ui-text) !important;
}


@media (max-width: 990px) {

    :is(
        .full-bleed-db-h,
        .full-bleed-lb-h,
        .full-bleed-dg-h,
        .full-bleed-do-h
    ) {
        padding: 1rem 10%;
    }

}



/* =====================================================
   7) BORDER SYSTEM
===================================================== */

:is(
    .border-dg,
    .border-lg,

    .border-do,
    .border-lo,

    .border-db,
    .border-lb,

    .border-dp,
    .border-lp
) {
    position: relative;

    border: 1px solid var(--ui-color);

    border-radius: 3rem;

    padding: 3rem;

    overflow: hidden;

    box-sizing: border-box;
}


@media (max-width: 990px) {

    :is(
        .border-dg,
        .border-lg,

        .border-do,
        .border-lo,

        .border-db,
        .border-lb,

        .border-dp,
        .border-lp
    ) {
        padding: 1.5rem;
        border-radius: 1.5rem;
    }

}



/* =====================================================
   8) UNDERLINE SYSTEM
===================================================== */

:is(
    .underline-dg,
    .underline-lg,

    .underline-do,
    .underline-lo,

    .underline-db,
    .underline-lb,

    .underline-dp,
    .underline-lp,

    .underline-dg-h
) {
    position: relative !important;

    display: block !important;

    width: 100% !important;

    padding-bottom: 0 !important;
}


:is(
    .underline-dg,
    .underline-lg,

    .underline-do,
    .underline-lo,

    .underline-db,
    .underline-lb,

    .underline-dp,
    .underline-lp,

    .underline-dg-h
)::after {
    content: "" !important;

    position: absolute !important;

    left: 0 !important;
    bottom: -10px !important;

    width: 100% !important;
    height: 1px !important;

    background-color: var(--ui-color) !important;
}



/* =====================================================
   9) NEUTRAL FULL BLEED
===================================================== */


/* =========================
   WHITE
========================= */

.full-bleed-w,
.full-bleed-lw {
    position: relative;

    width: 100vw;

    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);

    background: #f9fdfe;

    padding: 3rem 15%;

    box-sizing: border-box;
}


@media (max-width: 990px) {

    .full-bleed-w,
    .full-bleed-lw {
        padding: 3rem 10%;
    }

}


/* =========================
   TRANSPARENT
========================= */

.full-bleed-t {
    position: relative;

    width: 100vw;

    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);

    background: transparent;

    padding: 1.5rem 12% 0;

    box-sizing: border-box;
}


/* =========================
   TRANSPARENT LOW PADDING
========================= */

.full-bleed-lz {
    position: relative;

    width: 100vw;

    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);

    background: transparent;

    padding: 1.5rem;

    box-sizing: border-box;
}



/* =====================================================
   10) BUTTON SYSTEM

   NOVÝ ZÁPIS:

   .skimax-button
   +
   .button-big / .button-small
   +
   .button-full
   +
   BARVA:

   .button-dg
   .button-lg

   .button-do
   .button-lo

   .button-db
   .button-lb

   .button-dp
   .button-lp


   HOVER:

   background = #f9fdfe
   text       = barva borderu
   border     = původní barva tlačítka
===================================================== */


/* =====================================================
   10.1 BASE
===================================================== */

:is(
    .skimax-button,

    .bgfbutton,
    .bgbutton,
    .sgfbutton,
    .sgbutton,

    .bpfbutton,
    .bpbutton,
    .spfbutton,
    .spbutton,

    .bbfbutton,
    .bbbutton,
    .sbfbutton,
    .sbbutton
) {
    display: inline-block;

    background-color: var(--ui-color);

    color: var(--ui-text);

    border: 1px solid var(--ui-color);

    text-align: center;
    text-decoration: none;

    cursor: pointer;

    box-sizing: border-box;

    transform: scale(1);

    transition:
        background-color .5s ease,
        color .5s ease,
        border-color .5s ease,
        transform .5s ease;
}



/* =====================================================
   10.2 BIG
===================================================== */

:is(
    .skimax-button.button-big,

    .bgfbutton,
    .bgbutton,

    .bpfbutton,
    .bpbutton,

    .bbfbutton,
    .bbbutton
) {
    padding: 1.5rem 3rem;

    border-radius: 1.5rem;

    font-weight: 700;

    text-transform: uppercase;
}



/* =====================================================
   10.3 SMALL
===================================================== */

:is(
    .skimax-button.button-small,

    .sgfbutton,
    .sgbutton,

    .spfbutton,
    .spbutton,

    .sbfbutton,
    .sbbutton
) {
    padding: .75rem 2rem;

    border-radius: 1rem;

    font-weight: 700;

    text-transform: none;
}



/* =====================================================
   10.4 FULL WIDTH
===================================================== */

:is(
    .skimax-button.button-full,

    .bgfbutton,
    .sgfbutton,

    .bpfbutton,
    .spfbutton,

    .bbfbutton,
    .sbfbutton
) {
    width: 100%;
}



/* =====================================================
   10.5 HOVER

   BACKGROUND = #f9fdfe
   TEXT = STEJNÁ BARVA JAKO BORDER
===================================================== */

@media (hover: hover) and (pointer: fine) {

    /* =========================
       NOVÝ BUTTON SYSTEM
    ========================= */

    .skimax-button:hover {
        background-color: #f9fdfe !important;

        color: var(--ui-color) !important;

        border-color: var(--ui-color) !important;

        transform: scale(1.03);
    }


    /* =========================
       SKIMAX – DARK GREEN
       #2cb9bb
    ========================= */

    .bgfbutton:hover,
    .bgbutton:hover,
    .sgfbutton:hover,
    .sgbutton:hover {
        background-color: #f9fdfe !important;

        color: #2cb9bb !important;

        border-color: #2cb9bb !important;

        transform: scale(1.03);
    }


    /* =========================
       BLUE – DARK BLUE
       #0f65e6
    ========================= */

    .bbfbutton:hover,
    .bbbutton:hover,
    .sbfbutton:hover,
    .sbbutton:hover {
        background-color: #f9fdfe !important;

        color: #0f65e6 !important;

        border-color: #0f65e6 !important;

        transform: scale(1.03);
    }


    /* =========================
       PINK – DARK PINK
       #d81b60
    ========================= */

    .bpfbutton:hover,
    .bpbutton:hover,
    .spfbutton:hover,
    .spbutton:hover {
        background-color: #f9fdfe !important;

        color: #d81b60 !important;

        border-color: #d81b60 !important;

        transform: scale(1.03);
    }

}



/* =====================================================
   10.6 ACTIVE
===================================================== */

:is(
    .skimax-button,

    .bgfbutton,
    .bgbutton,
    .sgfbutton,
    .sgbutton,

    .bpfbutton,
    .bpbutton,
    .spfbutton,
    .spbutton,

    .bbfbutton,
    .bbbutton,
    .sbfbutton,
    .sbbutton
):active {
    background-color: var(--ui-active);

    color: var(--ui-active-text);

    border-color: var(--ui-color);

    transform: scale(.99);
}



/* =====================================================
   10.7 FOCUS
===================================================== */

:is(
    .skimax-button,

    .bgfbutton,
    .bgbutton,
    .sgfbutton,
    .sgbutton,

    .bpfbutton,
    .bpbutton,
    .spfbutton,
    .spbutton,

    .bbfbutton,
    .bbbutton,
    .sbfbutton,
    .sbbutton
):focus {
    background-color: var(--ui-active);

    color: var(--ui-active-text);

    border-color: var(--ui-color);

    transform: scale(1.01);
}



/* =====================================================
   11) BUTTON COLORS

   .button-dg
   .button-lg

   .button-do
   .button-lo

   .button-db
   .button-lb

   .button-dp
   .button-lp
===================================================== */



/* =====================================================
   12) LEGACY BUTTON MAP

   SKIMAX:
   bgfbutton
   bgbutton
   sgfbutton
   sgbutton

   PINK:
   bpfbutton
   bpbutton
   spfbutton
   spbutton

   BLUE:
   bbfbutton
   bbbutton
   sbfbutton
   sbbutton
===================================================== */



/* =====================================================
   13) DKLAB FORM BUTTON
===================================================== */

.dklabFormsButtonWrapper .btn {
    width: 100%;

    border-radius: 1.5rem;

    font-size: 2rem;

    text-transform: uppercase;
}

.btn.btn-conversion.dklabFormsButton {
    line-height: 1.25 !important;
}

/* =====================================================
   VÝJIMKY Z .MY-PAGE

   ZÁKLADNÍ .my-page TYPOGRAFIE NESMÍ OVLIVŇOVAT:
   - .on-card a nic uvnitř
   - třídy obsahující p-card- a nic uvnitř
   - třídy obsahující k-card a nic uvnitř
   - .news-wrapper a nic uvnitř

   MT-* a MB-* utility zůstávají plně funkční a nejsou touto výjimkou dotčené.
===================================================== */

/* =====================================================
   14) MY PAGE – FINÁLNÍ OVERRIDE
===================================================== */


/* =====================================================
   VÝCHOZÍ VERTIKÁLNÍ MEZERY – DESKTOP
   3 REM

   Platí pro:
   - h1–h6
   - p
   - ul / ol
   - pouze přímé DIV uvnitř .my-page

   Neplatí pro:
   - vt-faq
   - p uvnitř column-text-2
   - samotné news-grid-*
   - column1 / column2 / column3
===================================================== */

.my-page h1:not(.vt-faq *):not(:where(.on-card, .on-card *, [class*="p-card-"], [class*="p-card-"] *, [class*="k-card"], [class*="k-card"] *, .news-wrapper, .news-wrapper *)),
.my-page h2:not(.vt-faq *):not(:where(.on-card, .on-card *, [class*="p-card-"], [class*="p-card-"] *, [class*="k-card"], [class*="k-card"] *, .news-wrapper, .news-wrapper *)),
.my-page h3:not(.vt-faq *):not(:where(.on-card, .on-card *, [class*="p-card-"], [class*="p-card-"] *, [class*="k-card"], [class*="k-card"] *, .news-wrapper, .news-wrapper *)),
.my-page h4:not(.vt-faq *):not(:where(.on-card, .on-card *, [class*="p-card-"], [class*="p-card-"] *, [class*="k-card"], [class*="k-card"] *, .news-wrapper, .news-wrapper *)),
.my-page h5:not(.vt-faq *):not(:where(.on-card, .on-card *, [class*="p-card-"], [class*="p-card-"] *, [class*="k-card"], [class*="k-card"] *, .news-wrapper, .news-wrapper *)),
.my-page h6:not(.vt-faq *):not(:where(.on-card, .on-card *, [class*="p-card-"], [class*="p-card-"] *, [class*="k-card"], [class*="k-card"] *, .news-wrapper, .news-wrapper *)),

.my-page p:not(.vt-faq *):not(.column-text-2 *):not(:where(.on-card, .on-card *, [class*="p-card-"], [class*="p-card-"] *, [class*="k-card"], [class*="k-card"] *, .news-wrapper, .news-wrapper *)),

.my-page ul:not(.vt-faq *):not(:where(.on-card, .on-card *, [class*="p-card-"], [class*="p-card-"] *, [class*="k-card"], [class*="k-card"] *, .news-wrapper, .news-wrapper *)),
.my-page ol:not(.vt-faq *):not(:where(.on-card, .on-card *, [class*="p-card-"], [class*="p-card-"] *, [class*="k-card"], [class*="k-card"] *, .news-wrapper, .news-wrapper *)),

.my-page > div:not(.vt-faq):not([class*="news-grid-"]):not([class*="background-"]):not(.column1):not(.column2):not(.column3):not(:where(.on-card, [class*="p-card-"], [class*="k-card"], .news-wrapper)){

    margin-top: 3rem !important;
    margin-bottom: 3rem !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;
}



/* =========================
   P-CONTENT – LINE HEIGHT
========================= */

.my-page .p-content h4:not(:where(.on-card *, [class*="p-card-"] *, [class*="k-card"] *)){
    line-height: 1.3 !important;
}


.my-page .p-content p:not(:where(.on-card *, [class*="p-card-"] *, [class*="k-card"] *)){
    line-height: 1.5 !important;
}



/* =====================================================
   NEWS GRID – HLAVNÍ BLOK BEZ VERTIKÁLNÍHO MARGINU
===================================================== */

html body .my-page.my-page [class*="news-grid-"] {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}



/* =====================================================
   NEWS GRID – COLUMN1 / COLUMN2 / COLUMN3
   MEZERU ŘEŠÍ GAP GRIDU
===================================================== */

html body .my-page.my-page [class*="news-grid-"] > .column1,
html body .my-page.my-page [class*="news-grid-"] > .column2,
html body .my-page.my-page [class*="news-grid-"] > .column3 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}



/* =====================================================
   VLASTNÍ VERTIKÁLNÍ MEZERY
   FORCE OVERRIDE

   DESKTOP:

   0  = 0
   15 = 1.5rem
   30 = 3rem
   45 = 4.5rem
   60 = 6rem
   90 = 9rem
===================================================== */


/* =====================================================
   TOP – 0
===================================================== */

html body .my-page.my-page .mt-0.mt-0 {
    margin-top: 0 !important;
}


html body .my-page.my-page .mt-0.mt-0 > :first-child {
    margin-top: 0 !important;
}



/* =====================================================
   TOP – 1.5 REM
===================================================== */

html body .my-page.my-page .mt-15.mt-15 {
    margin-top: 1.5rem !important;
}


html body .my-page.my-page .mt-15.mt-15 > :first-child {
    margin-top: 0 !important;
}



/* =====================================================
   TOP – 3 REM
===================================================== */

html body .my-page.my-page .mt-30.mt-30 {
    margin-top: 3rem !important;
}


html body .my-page.my-page .mt-30.mt-30 > :first-child {
    margin-top: 0 !important;
}



/* =====================================================
   TOP – 4.5 REM
===================================================== */

html body .my-page.my-page .mt-45.mt-45 {
    margin-top: 4.5rem !important;
}


html body .my-page.my-page .mt-45.mt-45 > :first-child {
    margin-top: 0 !important;
}



/* =====================================================
   TOP – 6 REM
===================================================== */

html body .my-page.my-page .mt-60.mt-60 {
    margin-top: 6rem !important;
}


html body .my-page.my-page .mt-60.mt-60 > :first-child {
    margin-top: 0 !important;
}



/* =====================================================
   TOP – 9 REM
===================================================== */

html body .my-page.my-page .mt-90.mt-90 {
    margin-top: 9rem !important;
}


html body .my-page.my-page .mt-90.mt-90 > :first-child {
    margin-top: 0 !important;
}



/* =====================================================
   BOTTOM – 0
===================================================== */

html body .my-page.my-page .mb-0.mb-0 {
    margin-bottom: 0 !important;
}


html body .my-page.my-page .mb-0.mb-0 > :last-child {
    margin-bottom: 0 !important;
}


html body .my-page.my-page .mb-0.mb-0 + * {
    margin-top: 0 !important;
}



/* =====================================================
   BOTTOM – 1.5 REM
===================================================== */

html body .my-page.my-page .mb-15.mb-15 {
    margin-bottom: 1.5rem !important;
}


html body .my-page.my-page .mb-15.mb-15 > :last-child {
    margin-bottom: 0 !important;
}


html body .my-page.my-page .mb-15.mb-15 + * {
    margin-top: 0 !important;
}



/* =====================================================
   BOTTOM – 3 REM
===================================================== */

html body .my-page.my-page .mb-30.mb-30 {
    margin-bottom: 3rem !important;
}


html body .my-page.my-page .mb-30.mb-30 > :last-child {
    margin-bottom: 0 !important;
}


html body .my-page.my-page .mb-30.mb-30 + * {
    margin-top: 0 !important;
}



/* =====================================================
   BOTTOM – 4.5 REM
===================================================== */

html body .my-page.my-page .mb-45.mb-45 {
    margin-bottom: 4.5rem !important;
}


html body .my-page.my-page .mb-45.mb-45 > :last-child {
    margin-bottom: 0 !important;
}


html body .my-page.my-page .mb-45.mb-45 + * {
    margin-top: 0 !important;
}



/* =====================================================
   BOTTOM – 6 REM
===================================================== */

html body .my-page.my-page .mb-60.mb-60 {
    margin-bottom: 6rem !important;
}


html body .my-page.my-page .mb-60.mb-60 > :last-child {
    margin-bottom: 0 !important;
}


html body .my-page.my-page .mb-60.mb-60 + * {
    margin-top: 0 !important;
}



/* =====================================================
   BOTTOM – 9 REM
===================================================== */

html body .my-page.my-page .mb-90.mb-90 {
    margin-bottom: 9rem !important;
}


html body .my-page.my-page .mb-90.mb-90 > :last-child {
    margin-bottom: 0 !important;
}


html body .my-page.my-page .mb-90.mb-90 + * {
    margin-top: 0 !important;
}



/* =====================================================
   MOBILE – MY PAGE
   DO 990 PX

   VÝCHOZÍ:
   3rem → 1.5rem

   UTILITY:
   0   → 0
   1.5 → 0.75rem
   3   → 1.5rem
   4.5 → 2.25rem
   6   → 3rem
   9   → 4.5rem
===================================================== */

@media (max-width: 990px) {


    /* =================================================
       VÝCHOZÍ TYPOGRAFIE + PŘÍMÉ DIVY
       3 REM → 1.5 REM
    ================================================= */

    .my-page h1:not(.vt-faq *):not(:where(.on-card, .on-card *, [class*="p-card-"], [class*="p-card-"] *, [class*="k-card"], [class*="k-card"] *, .news-wrapper, .news-wrapper *)),
    .my-page h2:not(.vt-faq *):not(:where(.on-card, .on-card *, [class*="p-card-"], [class*="p-card-"] *, [class*="k-card"], [class*="k-card"] *, .news-wrapper, .news-wrapper *)),
    .my-page h3:not(.vt-faq *):not(:where(.on-card, .on-card *, [class*="p-card-"], [class*="p-card-"] *, [class*="k-card"], [class*="k-card"] *, .news-wrapper, .news-wrapper *)),
    .my-page h4:not(.vt-faq *):not(:where(.on-card, .on-card *, [class*="p-card-"], [class*="p-card-"] *, [class*="k-card"], [class*="k-card"] *, .news-wrapper, .news-wrapper *)),
    .my-page h5:not(.vt-faq *):not(:where(.on-card, .on-card *, [class*="p-card-"], [class*="p-card-"] *, [class*="k-card"], [class*="k-card"] *, .news-wrapper, .news-wrapper *)),
    .my-page h6:not(.vt-faq *):not(:where(.on-card, .on-card *, [class*="p-card-"], [class*="p-card-"] *, [class*="k-card"], [class*="k-card"] *, .news-wrapper, .news-wrapper *)),

    .my-page p:not(.vt-faq *):not(.column-text-2 *):not(:where(.on-card, .on-card *, [class*="p-card-"], [class*="p-card-"] *, [class*="k-card"], [class*="k-card"] *, .news-wrapper, .news-wrapper *)),

    .my-page ul:not(.vt-faq *):not(:where(.on-card, .on-card *, [class*="p-card-"], [class*="p-card-"] *, [class*="k-card"], [class*="k-card"] *, .news-wrapper, .news-wrapper *)),
    .my-page ol:not(.vt-faq *):not(:where(.on-card, .on-card *, [class*="p-card-"], [class*="p-card-"] *, [class*="k-card"], [class*="k-card"] *, .news-wrapper, .news-wrapper *)),

    .my-page > div:not(.vt-faq):not([class*="news-grid-"]):not([class*="background-"]):not(.column1):not(.column2):not(.column3):not(:where(.on-card, [class*="p-card-"], [class*="k-card"], .news-wrapper)){

        margin-top: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }



    /* =================================================
       TOP – 50 %
    ================================================= */

    html body .my-page.my-page .mt-0.mt-0 {
        margin-top: 0 !important;
    }


    html body .my-page.my-page .mt-15.mt-15 {
        margin-top: 0.75rem !important;
    }


    html body .my-page.my-page .mt-30.mt-30 {
        margin-top: 1.5rem !important;
    }


    html body .my-page.my-page .mt-45.mt-45 {
        margin-top: 2.25rem !important;
    }


    html body .my-page.my-page .mt-60.mt-60 {
        margin-top: 3rem !important;
    }


    html body .my-page.my-page .mt-90.mt-90 {
        margin-top: 4.5rem !important;
    }



    /* =================================================
       BOTTOM – 50 %
    ================================================= */

    html body .my-page.my-page .mb-0.mb-0 {
        margin-bottom: 0 !important;
    }


    html body .my-page.my-page .mb-15.mb-15 {
        margin-bottom: 0.75rem !important;
    }


    html body .my-page.my-page .mb-30.mb-30 {
        margin-bottom: 1.5rem !important;
    }


    html body .my-page.my-page .mb-45.mb-45 {
        margin-bottom: 2.25rem !important;
    }


    html body .my-page.my-page .mb-60.mb-60 {
        margin-bottom: 3rem !important;
    }


    html body .my-page.my-page .mb-90.mb-90 {
        margin-bottom: 4.5rem !important;
    }

}

/* =====================================================
   P OBSAHUJÍCÍ BUTTON V COLUMN
   BEZ MY-PAGE MARGINU
===================================================== */

html body .my-page.my-page .column1 p:has([class*="button"]),
html body .my-page.my-page .column2 p:has([class*="button"]),
html body .my-page.my-page .column3 p:has([class*="button"]) {
    margin-top: 0.75rem !important;
    margin-bottom: 0.75rem !important;
}

/* =====================================================
   BACKGROUND -H – FINAL OVERRIDE PRO MY-PAGE
   Desktop: 2rem ze všech stran
   Mobil: 1rem ze všech stran
   Pouze varianty s -h
===================================================== */

html body .my-page.my-page :is(
    .background-dg-h,
    .background-do-h,
    .background-db-h
) {
    padding: 2rem !important;
}

html body .my-page.my-page :is(
    .background-dg-h,
    .background-do-h,
    .background-db-h
) > :is(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6
) {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

@media (max-width: 990px) {
    html body .my-page.my-page :is(
        .background-dg-h,
        .background-do-h,
        .background-db-h
    ) {
        padding: 1rem !important;
    }
}

/* =====================================================
   15) MT / MB – FINÁLNÍ GLOBÁLNÍ OVERRIDE
   Utility mají poslední slovo uvnitř .my-page.
===================================================== */

html body .my-page.my-page .mt-0.mt-0.mt-0.mt-0,
html body .my-page.my-page.mt-0.mt-0.mt-0.mt-0 { margin-top: 0 !important; }
html body .my-page.my-page .mt-15.mt-15.mt-15.mt-15,
html body .my-page.my-page.mt-15.mt-15.mt-15.mt-15 { margin-top: 1.5rem !important; }
html body .my-page.my-page .mt-30.mt-30.mt-30.mt-30,
html body .my-page.my-page.mt-30.mt-30.mt-30.mt-30 { margin-top: 3rem !important; }
html body .my-page.my-page .mt-45.mt-45.mt-45.mt-45,
html body .my-page.my-page.mt-45.mt-45.mt-45.mt-45 { margin-top: 4.5rem !important; }
html body .my-page.my-page .mt-60.mt-60.mt-60.mt-60,
html body .my-page.my-page.mt-60.mt-60.mt-60.mt-60 { margin-top: 6rem !important; }
html body .my-page.my-page .mt-90.mt-90.mt-90.mt-90,
html body .my-page.my-page.mt-90.mt-90.mt-90.mt-90 { margin-top: 9rem !important; }

html body .my-page.my-page .mb-0.mb-0.mb-0.mb-0,
html body .my-page.my-page.mb-0.mb-0.mb-0.mb-0 { margin-bottom: 0 !important; }
html body .my-page.my-page .mb-15.mb-15.mb-15.mb-15,
html body .my-page.my-page.mb-15.mb-15.mb-15.mb-15 { margin-bottom: 1.5rem !important; }
html body .my-page.my-page .mb-30.mb-30.mb-30.mb-30,
html body .my-page.my-page.mb-30.mb-30.mb-30.mb-30 { margin-bottom: 3rem !important; }
html body .my-page.my-page .mb-45.mb-45.mb-45.mb-45,
html body .my-page.my-page.mb-45.mb-45.mb-45.mb-45 { margin-bottom: 4.5rem !important; }
html body .my-page.my-page .mb-60.mb-60.mb-60.mb-60,
html body .my-page.my-page.mb-60.mb-60.mb-60.mb-60 { margin-bottom: 6rem !important; }
html body .my-page.my-page .mb-90.mb-90.mb-90.mb-90,
html body .my-page.my-page.mb-90.mb-90.mb-90.mb-90 { margin-bottom: 9rem !important; }

html body .my-page.my-page :is(.mt-0,.mt-15,.mt-30,.mt-45,.mt-60,.mt-90) > :first-child {
    margin-top: 0 !important;
}
html body .my-page.my-page :is(.mb-0,.mb-15,.mb-30,.mb-45,.mb-60,.mb-90) > :last-child {
    margin-bottom: 0 !important;
}
html body .my-page.my-page :is(.mb-0,.mb-15,.mb-30,.mb-45,.mb-60,.mb-90) + * {
    margin-top: 0 !important;
}

@media (max-width: 990px) {
    html body .my-page.my-page .mt-0.mt-0.mt-0.mt-0,
    html body .my-page.my-page.mt-0.mt-0.mt-0.mt-0 { margin-top: 0 !important; }
    html body .my-page.my-page .mt-15.mt-15.mt-15.mt-15,
    html body .my-page.my-page.mt-15.mt-15.mt-15.mt-15 { margin-top: .75rem !important; }
    html body .my-page.my-page .mt-30.mt-30.mt-30.mt-30,
    html body .my-page.my-page.mt-30.mt-30.mt-30.mt-30 { margin-top: 1.5rem !important; }
    html body .my-page.my-page .mt-45.mt-45.mt-45.mt-45,
    html body .my-page.my-page.mt-45.mt-45.mt-45.mt-45 { margin-top: 2.25rem !important; }
    html body .my-page.my-page .mt-60.mt-60.mt-60.mt-60,
    html body .my-page.my-page.mt-60.mt-60.mt-60.mt-60 { margin-top: 3rem !important; }
    html body .my-page.my-page .mt-90.mt-90.mt-90.mt-90,
    html body .my-page.my-page.mt-90.mt-90.mt-90.mt-90 { margin-top: 4.5rem !important; }

    html body .my-page.my-page .mb-0.mb-0.mb-0.mb-0,
    html body .my-page.my-page.mb-0.mb-0.mb-0.mb-0 { margin-bottom: 0 !important; }
    html body .my-page.my-page .mb-15.mb-15.mb-15.mb-15,
    html body .my-page.my-page.mb-15.mb-15.mb-15.mb-15 { margin-bottom: .75rem !important; }
    html body .my-page.my-page .mb-30.mb-30.mb-30.mb-30,
    html body .my-page.my-page.mb-30.mb-30.mb-30.mb-30 { margin-bottom: 1.5rem !important; }
    html body .my-page.my-page .mb-45.mb-45.mb-45.mb-45,
    html body .my-page.my-page.mb-45.mb-45.mb-45.mb-45 { margin-bottom: 2.25rem !important; }
    html body .my-page.my-page .mb-60.mb-60.mb-60.mb-60,
    html body .my-page.my-page.mb-60.mb-60.mb-60.mb-60 { margin-bottom: 3rem !important; }
    html body .my-page.my-page .mb-90.mb-90.mb-90.mb-90,
    html body .my-page.my-page.mb-90.mb-90.mb-90.mb-90 { margin-bottom: 4.5rem !important; }
}

/* =====================================================
   16) UNDERLINE – SAMOSTATNÝ ODDĚLOVAČ
   -----------------------------------------------------
   Pokud je underline-* použit jako prázdný DIV s  ,
   nesmí vlastní řádek vytvářet nechtěnou mezeru.
===================================================== */

html body .my-page.my-page div:is(
    .underline-dg,
    .underline-lg,
    .underline-do,
    .underline-lo,
    .underline-db,
    .underline-lb,
    .underline-dp,
    .underline-lp,
    .underline-dg-h
):not(:has(*)) {
    height: 0 !important;
    min-height: 0 !important;

    font-size: 0 !important;
    line-height: 0 !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

html body .my-page.my-page div:is(
    .underline-dg,
    .underline-lg,
    .underline-do,
    .underline-lo,
    .underline-db,
    .underline-lb,
    .underline-dp,
    .underline-lp,
    .underline-dg-h
):not(:has(*))::after {
    bottom: 0 !important;
}

/* =====================================================
   17) PADDING UTILITY
   -----------------------------------------------------
   DESKTOP:

   0  = 0
   15 = 1.5rem
   30 = 3rem
   45 = 4.5rem
   60 = 6rem
   90 = 9rem

   MOBILE DO 990 PX:
   hodnoty = 50 %
===================================================== */


/* =====================================================
   PADDING TOP
===================================================== */

html body .my-page.my-page .pt-0.pt-0 {
    padding-top: 0 !important;
}

html body .my-page.my-page .pt-15.pt-15 {
    padding-top: 1.5rem !important;
}

html body .my-page.my-page .pt-30.pt-30 {
    padding-top: 3rem !important;
}

html body .my-page.my-page .pt-45.pt-45 {
    padding-top: 4.5rem !important;
}

html body .my-page.my-page .pt-60.pt-60 {
    padding-top: 6rem !important;
}

html body .my-page.my-page .pt-90.pt-90 {
    padding-top: 9rem !important;
}


/* =====================================================
   PADDING BOTTOM
===================================================== */

html body .my-page.my-page .pb-0.pb-0 {
    padding-bottom: 0 !important;
}

html body .my-page.my-page .pb-15.pb-15 {
    padding-bottom: 1.5rem !important;
}

html body .my-page.my-page .pb-30.pb-30 {
    padding-bottom: 3rem !important;
}

html body .my-page.my-page .pb-45.pb-45 {
    padding-bottom: 4.5rem !important;
}

html body .my-page.my-page .pb-60.pb-60 {
    padding-bottom: 6rem !important;
}

html body .my-page.my-page .pb-90.pb-90 {
    padding-bottom: 9rem !important;
}


/* =====================================================
   PADDING LEFT
===================================================== */

html body .my-page.my-page .pl-0.pl-0 {
    padding-left: 0 !important;
}

html body .my-page.my-page .pl-15.pl-15 {
    padding-left: 1.5rem !important;
}

html body .my-page.my-page .pl-30.pl-30 {
    padding-left: 3rem !important;
}

html body .my-page.my-page .pl-45.pl-45 {
    padding-left: 4.5rem !important;
}

html body .my-page.my-page .pl-60.pl-60 {
    padding-left: 6rem !important;
}

html body .my-page.my-page .pl-90.pl-90 {
    padding-left: 9rem !important;
}


/* =====================================================
   PADDING RIGHT
===================================================== */

html body .my-page.my-page .pr-0.pr-0 {
    padding-right: 0 !important;
}

html body .my-page.my-page .pr-15.pr-15 {
    padding-right: 1.5rem !important;
}

html body .my-page.my-page .pr-30.pr-30 {
    padding-right: 3rem !important;
}

html body .my-page.my-page .pr-45.pr-45 {
    padding-right: 4.5rem !important;
}

html body .my-page.my-page .pr-60.pr-60 {
    padding-right: 6rem !important;
}

html body .my-page.my-page .pr-90.pr-90 {
    padding-right: 9rem !important;
}


/* =====================================================
   MOBILE – PADDING 50 %
===================================================== */

@media (max-width: 990px) {


    /* =========================
       TOP
    ========================= */

    html body .my-page.my-page .pt-0.pt-0 {
        padding-top: 0 !important;
    }

    html body .my-page.my-page .pt-15.pt-15 {
        padding-top: 0.75rem !important;
    }

    html body .my-page.my-page .pt-30.pt-30 {
        padding-top: 1.5rem !important;
    }

    html body .my-page.my-page .pt-45.pt-45 {
        padding-top: 2.25rem !important;
    }

    html body .my-page.my-page .pt-60.pt-60 {
        padding-top: 3rem !important;
    }

    html body .my-page.my-page .pt-90.pt-90 {
        padding-top: 4.5rem !important;
    }


    /* =========================
       BOTTOM
    ========================= */

    html body .my-page.my-page .pb-0.pb-0 {
        padding-bottom: 0 !important;
    }

    html body .my-page.my-page .pb-15.pb-15 {
        padding-bottom: 0.75rem !important;
    }

    html body .my-page.my-page .pb-30.pb-30 {
        padding-bottom: 1.5rem !important;
    }

    html body .my-page.my-page .pb-45.pb-45 {
        padding-bottom: 2.25rem !important;
    }

    html body .my-page.my-page .pb-60.pb-60 {
        padding-bottom: 3rem !important;
    }

    html body .my-page.my-page .pb-90.pb-90 {
        padding-bottom: 4.5rem !important;
    }


    /* =========================
       LEFT
    ========================= */

    html body .my-page.my-page .pl-0.pl-0 {
        padding-left: 0 !important;
    }

    html body .my-page.my-page .pl-15.pl-15 {
        padding-left: 0.75rem !important;
    }

    html body .my-page.my-page .pl-30.pl-30 {
        padding-left: 1.5rem !important;
    }

    html body .my-page.my-page .pl-45.pl-45 {
        padding-left: 2.25rem !important;
    }

    html body .my-page.my-page .pl-60.pl-60 {
        padding-left: 3rem !important;
    }

    html body .my-page.my-page .pl-90.pl-90 {
        padding-left: 4.5rem !important;
    }


    /* =========================
       RIGHT
    ========================= */

    html body .my-page.my-page .pr-0.pr-0 {
        padding-right: 0 !important;
    }

    html body .my-page.my-page .pr-15.pr-15 {
        padding-right: 0.75rem !important;
    }

    html body .my-page.my-page .pr-30.pr-30 {
        padding-right: 1.5rem !important;
    }

    html body .my-page.my-page .pr-45.pr-45 {
        padding-right: 2.25rem !important;
    }

    html body .my-page.my-page .pr-60.pr-60 {
        padding-right: 3rem !important;
    }

    html body .my-page.my-page .pr-90.pr-90 {
        padding-right: 4.5rem !important;
    }

}