/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Aug 23 2026 | 15:39:03 */
/* ==========================================================
   HARMONY CLINIC — GLOBAL TYPOGRAPHY
   ========================================================== */


/* ==========================================================
   GLOBAL FONT FAMILY
   ========================================================== */

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
a,
li,
label,
blockquote,
cite,
figcaption,
input,
textarea,
select,
button,
.elementor-widget-heading .elementor-heading-title,
.elementor-widget-text-editor,
.elementor-widget-text-editor *,
.elementor-button,
.elementor-button-text,
.elementor-field-group input,
.elementor-field-group textarea,
.elementor-field-group select,
.elementor-tab-title,
.elementor-tab-content,
.elementor-accordion-title,
.elementor-toggle-title,
.elementor-price-table *,
.elementor-testimonial *,
.elementor-menu-cart__container,
.woocommerce,
.woocommerce *,
.woocommerce-page,
.woocommerce-page *,
.wp-block-button__link,
.widget,
.widget * {
    font-family: 'Work Sans', sans-serif !important;
}

h6.footer-menu,
.elementor-widget-heading.footer-menu .elementor-heading-title,
.footer-menu.elementor-widget-heading .elementor-heading-title,
.elementor-heading-title.footer-menu {
    font-size: clamp(
        16px,
        calc(14.59px + 0.38vw),
        20px
    ) !important;

    font-weight: 600 !important;

    line-height: clamp(
        16px,
        calc(14.59px + 0.38vw),
        20px
    ) !important;
}


/* ==========================================================
   ICON FONT PROTECTION
   ========================================================== */

[class*="fa-"] {
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands" !important;
}

i[class*="eicon-"],
span[class*="eicon-"],
[class^="eicon-"],
[class*=" eicon-"] {
    font-family: "eicons" !important;
}

.dashicons,
.dashicons-before::before {
    font-family: "dashicons" !important;
}


/* ==========================================================
   H1
   Desktop: 72px / 600 / 72px
   Mobile: 42px / 600 / 42px
   ========================================================== */

h1,
.elementor-widget-heading h1.elementor-heading-title {
    font-size: clamp(
        35px,
        calc(31.44px + 2.82vw),
        72px
    ) !important;

    font-weight: 600 !important;

    line-height: clamp(
        42px,
        calc(31.44px + 2.82vw),
        72px
    ) !important;
}


/* ==========================================================
   H2 — H6
   Desktop: 44px / 600 / 44px
   Mobile: 32px / 600 / 32px

   Elementor Icon Box titles jsou úmyslně vyjmuté.
   ========================================================== */

h2:not(.elementor-icon-box-title),
h3:not(.elementor-icon-box-title),
h4:not(.elementor-icon-box-title),
h5:not(.elementor-icon-box-title),
h6:not(.elementor-icon-box-title),
.elementor-widget-heading h2.elementor-heading-title,
.elementor-widget-heading h3.elementor-heading-title,
.elementor-widget-heading h4.elementor-heading-title,
.elementor-widget-heading h5.elementor-heading-title,
.elementor-widget-heading h6.elementor-heading-title {
    font-size: clamp(
        32px,
        calc(27.78px + 1.13vw),
        44px
    ) !important;

    font-weight: 600 !important;

    line-height: clamp(
        32px,
        calc(27.78px + 1.13vw),
        44px
    ) !important;
}


/* ==========================================================
   SUBHERO TEXT
   Class na Heading widgetu: .subhero-text

   Desktop: 32px / 600 / 36px
   Mobile: 22px / 600 / 28px
   ========================================================== */

.elementor-widget-heading.subhero-text .elementor-heading-title,
.subhero-text.elementor-widget-heading .elementor-heading-title,
.elementor-heading-title.subhero-text {
    font-size: clamp(
        22px,
        calc(18.48px + 0.94vw),
        32px
    ) !important;

    font-weight: 600 !important;

    line-height: clamp(
        28px,
        calc(25.18px + 0.75vw),
        36px
    ) !important;
}


/* ==========================================================
   BOX HEADINGS
   Class na Heading widgetu: .box-heading

   Desktop: 30px / 600 / 30px
   Mobile: 24px / 600 / 24px
   ========================================================== */

.elementor-widget-heading.box-heading .elementor-heading-title,
.box-heading.elementor-widget-heading .elementor-heading-title,
.elementor-heading-title.box-heading {
    font-size: clamp(
        24px,
        calc(21.89px + 0.56vw),
        30px
    ) !important;

    font-weight: 600 !important;

    line-height: clamp(
        24px,
        calc(21.89px + 0.56vw),
        30px
    ) !important;
}


/* ==========================================================
   ICON BOX HEADINGS
   Např.:
   <span class="cislo">20+</span><br>Ošetření a procedur

   Běžný text:
   Desktop: 20px
   Mobile: 16px

   Číslo:
   Desktop: 65px
   Mobile: 48px
   ========================================================== */

.elementor-widget-icon-box .elementor-icon-box-title {
    font-size: clamp(
        16px,
        calc(14.59px + 0.38vw),
        20px
    ) !important;

    font-weight: 600 !important;
}

.elementor-widget-icon-box .elementor-icon-box-title .cislo,
.elementor-widget-icon-box .cislo,
.cislo {
    font-size: clamp(
        48px,
        calc(42.01px + 1.60vw),
        65px
    ) !important;
}


/* ==========================================================
   BODY TEXT
   ========================================================== */

body,
p,
li,
.elementor-widget-text-editor {
    font-weight: 400 !important;
}


/* ==========================================================
   BUTTONS
   ========================================================== */

.elementor-button,
.elementor-button-text,
button,
input[type="submit"] {
    font-weight: 600 !important;
}

.hover-zoom-bg,
.elementor-element.hover-zoom-bg {
    position: relative !important;
    z-index: 0 !important;
    overflow: hidden !important;
}

.hover-zoom-bg::after,
.elementor-element.hover-zoom-bg::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background-image: inherit !important;
    background-size: cover !important;
    background-position: center center !important;
    transform: scale(1) !important;
    transition: transform 0.5s ease !important;
    z-index: -2 !important;
}

.hover-zoom-bg:hover::after,
.elementor-element.hover-zoom-bg:hover::after {
    transform: scale(1.15) !important;
}

.cislo{
    font-size: 65px;
}

.hlavicka {
    transition: background-color 0.3s ease !important;
}
 
.hlavicka.is-scrolled {
    background-color: #274C77 !important;
}
 
/* Vnitřní kontejner .hlavicka-ramecek má spodní border (Rámeček → Šířka okraje
   dole: 1px) - při scrollu (přilepený stav) ho chceme skrýt, protože v tu
   chvíli header stojí na vlastní barvě (#274C77) a border už opticky ruší. */
.hlavicka.is-scrolled .hlavicka-ramecek {
    border-bottom-color: transparent !important;
}

.produkty .woocommerce-loop-product__title {
    font-size: clamp(
        18px,
        calc(15.89px + 0.56vw),
        24px
    ) !important;

    font-weight: 600 !important;

    line-height: clamp(
        22px,
        calc(19.89px + 0.56vw),
        28px
    ) !important;
}

/* ==========================================================
   WOOCOMMERCE — SUCCESS NOTICE / TOAST
   ========================================================== */

body .woocommerce-message {
    position: fixed !important;

    top: 20px !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;

    transform: translateX(-50%) !important;

    width: auto !important;
    min-width: 320px !important;
    max-width: min(560px, calc(100vw - 32px)) !important;

    margin: 0 !important;

    /* vlevo necháváme místo na fajfku */
    padding: 16px 22px 16px 52px !important;

    background: #28a745 !important;
    color: #ffffff !important;

    border: none !important;
    border-radius: 8px !important;

    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;

    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18) !important;

    z-index: 9999999 !important;

    box-sizing: border-box !important;
}


/* Zrušit WooCommerce horní zelený border */
body .woocommerce-message {
    border-top: none !important;
}


/* ==========================================================
   SUCCESS CHECK ICON
   ========================================================== */

body .woocommerce-message::before {
    content: "✓" !important;

    position: absolute !important;

    left: 18px !important;
    top: 50% !important;

    transform: translateY(-50%) !important;

    width: 22px !important;
    height: 22px !important;

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

    background: rgba(255, 255, 255, 0.20) !important;
    color: #ffffff !important;

    border-radius: 50% !important;

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


/* ==========================================================
   HIDE "ZOBRAZIT KOŠÍK"
   ========================================================== */

body .woocommerce-message .button,
body .woocommerce-message a.button {
    display: none !important;
}


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

@media (max-width: 767px) {

    body .woocommerce-message {
        top: 12px !important;

        width: calc(100vw - 24px) !important;
        min-width: 0 !important;
        max-width: none !important;

        padding: 14px 16px 14px 48px !important;

        font-size: 14px !important;

        border-radius: 7px !important;
    }

    body .woocommerce-message::before {
        left: 16px !important;
    }
}