:root {

    --instock: #00D084;
    --outofstock: #CF2E2E;
    --onbackorder: #02b650;

    --padding: 1em;
    --border-radius: 0.5em;
    --border-color: #b3b3b6;

}

/* ==========================================================
   products catalogue 
   ========================================================== */

.wc-block-product-template__responsive.columns-5 {
    grid-template-columns: repeat(auto-fill, minmax(max(200px, calc(20% - 1em)), 1fr)) !important;
}

.wc-block-components-product-stock-indicator,
.stock {
    font-weight: bold;
}
    
.wc-block-components-product-stock-indicator::before,
.stock::before,
#status-instock::before ,
#status-outofstock::before ,
#status-onbackorder::before  {
    background: #000;
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    -moz-border-radius: 7.5px;
    -webkit-border-radius: 7.5px;
    border-radius: 7.5px;
    line-height: 2em;
    position: relative;
    bottom: -2px;
    margin-right: 8px;
}

.wc-block-components-product-stock-indicator--in-stock,
.in-stock {
    color: var(--instock);
}

.wc-block-components-product-stock-indicator--in-stock::before,
.in-stock::before ,
#status-instock::before {
    background-color: var(--instock);
}

.wc-block-components-product-stock-indicator--out-of-stock,
.out-of-stock {
    color: var(--outofstock);
}

.wc-block-components-product-stock-indicator--out-of-stock::before,
#status-outofstock::before,
.out-of-stock:before  {
    background-color: var(--outofstock);
}

.wc-block-components-product-stock-indicator--available-on-backorder,
.available-on-backorder {
    color: var(--onbackorder);
}

.wc-block-components-product-stock-indicator--available-on-backorder::before,
#status-onbackorder::before,
.available-on-backorder::before  {
    background-color: var(--onbackorder);
}

li.wc-block-product {
    padding: var(--padding);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    display: grid;
    background-color: var(--wp--preset--color--surface);
}

.wc-product-collection-carousel-header{
    padding-left: 0!important ;
}
@media (max-width: 480px) {
    li.wc-block-product {
        min-width: 70% !important;
    }
}

li.wc-block-product .wp-block-post-title {
    height: 5em;
    text-align: left;
}

/* li.wc-block-product .wp-block-post-title::after {
    height: 1em;
    width: 100%;
    background-color: var(--wp--preset--color--surface);
    content: "";
    display: block;
    position: relative;
} */

.wp-block-woocommerce-product-button>button>span::after {
    content: '\f07a';
    display: inline-block;
    text-rendering: auto;
    font: var(--fa-font-solid);
    margin-left: 1em;
}

/* ==========================================================
   products catalogue  pagination
   ========================================================== */

.wp-block-query-pagination {
    margin-block-end: 1em !important;
}

.wp-block-query-pagination .wp-block-query-pagination-numbers {
    display: none;
}

.wp-block-query-pagination .wp-block-query-pagination-next {
    font-size: 0;
    text-decoration: none;
    cursor: pointer;

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

    width: 48px;
    height: 48px;

    border-radius: 50%;
}

.wp-block-query-pagination .wp-block-query-pagination-next::after {
    content: '\f0ab';
    display: inline-block;

    font: var(--fa-font-solid);
    font-size: 48px;

    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

/* Loading state */
.wp-block-query-pagination .wp-block-query-pagination-next.zn-loading {
    pointer-events: none;
    opacity: .5;
}

.wp-block-query-pagination .wp-block-query-pagination-next.zn-loading::after {
    content: '\f110';
    animation: zn-spin 0.8s linear infinite;
}

@keyframes zn-spin {
    to {
        transform: rotate(360deg);
    }
}

/* products catalogue  pagination end  */

/* ==========================================================
   products catalogue sorting
   ========================================================== */

.zn-sorting-tab {
    background: #fff;
    border: 1px solid var(--border-color);
    padding: 0.5em 1em;
    border-radius: var(--border-radius);
}

/* =========================================================
   ZONAS Catalog Sorting
   ========================================================= */

.zn-catalog-sort {
    display: inline-flex;
    align-items: center;
    gap: 4px;

    max-width: 100%;
    padding: 4px;

    background: var(--wp--preset--color--background);
    border: 1px solid rgba(0, 34, 97, 0.12);
    border-radius: 10px;
}

.zn-catalog-sort__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 40px;
    padding: 0 16px;

    border: 0;
    border-radius: 7px;

    background: transparent;
    color: var(--wp--preset--color--heading);

    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;

    text-decoration: none;
    white-space: nowrap;

    cursor: pointer;

    transition:
        background-color 0.15s ease,
        color 0.15s ease,
        box-shadow 0.15s ease;
}

.zn-catalog-sort__item:hover {
    background: var(--wp--preset--color--surface);
    color: var(--wp--preset--color--primary);
}

.zn-catalog-sort__item.is-active {
    background: var(--wp--preset--color--surface);
    color: var(--wp--preset--color--primary);

    font-weight: 600;

    box-shadow:
        0 1px 2px rgba(0, 34, 97, 0.08),
        0 2px 8px rgba(0, 34, 97, 0.08);
}


.zn-catalog-sort-editor {
    width: 100%;
}


.added_to_cart.wc_forward {
    display: none !important;
}

[data-wp-bind--hidden="!state.displayViewCart"] {
    display: none !important;
}


@media (max-width: 768px) {

    .zn-catalog-sort {
        display: flex;
        width: 100%;

        overflow-x: auto;
        overflow-y: hidden;

        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .zn-catalog-sort::-webkit-scrollbar {
        display: none;
    }

    .zn-catalog-sort__item {
        flex: 0 0 auto;

        min-height: 38px;
        padding-inline: 14px;
    }
}

/* products catalogue sorting end */

@media (max-width: 768px) {

    .wp-block-search__button-inside {
        width: 100%;
    }
}

/* products catalogue  end  */

/* ==========================================================
   product detail
   ========================================================== */

.product main .wp-block-columns {
    background-color: var(--wp--preset--color--surface);
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);

    padding: var(--padding);
    margin-top: 0;
}

.wp-block-woocommerce-product-details {
    background-color: var(--wp--preset--color--surface);
    border: 1px solid var(--border-color);
    padding: var(--padding);
    margin-top: 0;
    border-top: none;
}

.wp-block-woocommerce-product-details {
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
}

.zn-prod-main .wc-block-breadcrumbs {
    background: var(--wp--preset--color--surface);
    padding: var(--padding);
    border: 1px solid var(--border-color);
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
}

.zn-prod-main .wc-block-breadcrumbs nav {
    margin-bottom: 0;
}

.wp-block-woocommerce-product-details .wc-tabs li{
    display: inline-block  !important;
    border: none !important;
}

.wp-block-woocommerce-product-details .wc-tabs li>a {
    padding-left: 0 !important;
}


.wp-block-woocommerce-product-details .wc-tabs li:hover,
.wp-block-woocommerce-product-details .wc-tabs li.active {
    color: var(--wp--preset--color--primary, #E91E63) !important;
}

.woocommerce-product-attributes.shop_attributes {
    text-align: left;
}


/* product detail end   */

.zn-header-desktop {
    padding-left: 0px !important;
}

.wc-block-components-product-price {
    text-align: left !important;

}

li.wc-block-product .woocommerce-Price-amount.amount {
    font-size: var(--wp--preset--font-size--large);
    font-style: normal;
    font-weight: 700;
    color: var(--wp--preset--color--primary);
}

li.wc-block-product .ajax_add_to_cart {
    width: 100% !important;
}

/* ==========================================================
   product search 
   ========================================================== */

.zn-product-search {
    position: relative;
}

.zn-product-search-results {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;

    z-index: 1000;

    overflow: hidden;

    background: var(--wp--preset--color--surface, #fff);

    border: 1px solid rgba(0, 34, 97, 0.12);
    border-radius: 10px;

    box-shadow:
        0 8px 24px rgba(0, 34, 97, 0.08),
        0 2px 6px rgba(0, 34, 97, 0.05);
}

.zn-product-search-item {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 10px 12px;

    text-decoration: none;

    transition: background-color 0.15s ease,
        color 0.15s ease;
}

.zn-product-search-item+.zn-product-search-item {
    border-top: 1px solid rgba(0, 34, 97, 0.08);
}

.zn-product-search-item:hover {
    background: var(--wp--preset--color--background, #f5f6ff);
}

.zn-product-search-image {
    flex: 0 0 58px;
    width: 58px;
    height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.zn-product-search-image img {
    display: block;

    max-width: 100%;
    max-height: 100%;

    width: auto;
    height: auto;

    object-fit: contain;
}

.zn-product-search-info {
    flex: 1;
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 4px;
}

.zn-product-search-name {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--wp--preset--color--heading, #002261);
}

.zn-product-search-price {
    font-size: 13px;
    font-weight: 600;
    color: var(--wp--preset--color--primary, #e91e63);
}

.zn-product-search-price del {
    opacity: 0.55;
    font-weight: 400;
}

.zn-product-search-price ins {
    text-decoration: none;
}

.zn-product-search-all {
    display: block;
    padding: 11px 14px;
    border-top: 1px solid rgba(0, 34, 97, 0.08);
    text-align: center;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    color: var(--wp--preset--color--primary, #e91e63);
    background: var(--wp--preset--color--background, #f5f6ff);
}

.zn-product-search-all:hover {
    color: var(--wp--preset--color--heading, #002261);
}

.zn-product-search-loading,
.zn-product-search-empty {
    padding: 16px;

    font-size: 13px;
    text-align: center;

    color: var(--wp--preset--color--text, #3a2b35);
}

/* product search end   */


/* ==========================================================
   ZONAS CATEGORY MENU
   ========================================================== */

.zn-category-menu .wc-block-product-categories-list-item__image {
    border: none;
}

.zn-category-menu {
    --zn-menu-bg: var(--wp--preset--color--surface, #ffffff);
    --zn-menu-text: var(--wp--preset--color--text, #3A2B35);
    --zn-menu-heading: var(--wp--preset--color--heading, #002261);
    --zn-menu-primary: var(--wp--preset--color--primary, #E91E63);
    --zn-menu-hover: #fff1f6;
    --zn-menu-border: #eceef2;
    --zn-menu-muted: #7b8496;

    position: relative;
    width: 100%;
    overflow: visible;
    z-index: 100;
}

.zn-category-menu ul,
.zn-category-menu li {
    margin: 0 !important;
    padding: 0 !important;

    list-style: none !important;
}

.zn-category-menu>.wc-block-product-categories-list--depth-0 {

    position: relative;

    width: 280px;

    padding: 8px 0 !important;

    background:
        var(--zn-menu-bg);

    border:
        1px solid var(--zn-menu-border);

    border-radius: 10px;

    box-shadow:
        0 8px 30px rgba(0, 34, 97, 0.08);
}


.zn-category-menu .wc-block-product-categories-list-item {

    position: static;
}

.zn-category-menu .wc-block-product-categories-list-item>a {

    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    padding: 6px 36px 6px 10px;

    color: var(--zn-menu-text);

    font-size: 13px;
    line-height: 1.3;
    font-weight: 500;
    text-decoration: none !important;

    background: transparent;
    box-sizing: border-box;

    transition: color .15s ease,
        background-color .15s ease;
}


.zn-category-menu .wc-block-product-categories-list-item>a:hover,

.zn-category-menu .wc-block-product-categories-list-item:hover>a,

.zn-category-menu .wc-block-product-categories-list-item:focus-within>a {

    color: var(--zn-menu-primary);
    background: var(--zn-menu-hover);
}

.zn-category-menu .wc-block-product-categories-list-item__image {

    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px;
    flex: 0 0 34px;
    margin: 0 !important;
    overflow: hidden;
    border-radius: 6px;
}


.zn-category-menu .wc-block-product-categories-list-item__image img {

    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    object-fit: contain;
}

.zn-category-menu .wc-block-product-categories-list-item__image--placeholder img {

    opacity: .55;
}

.zn-category-menu .wc-block-product-categories-list-item__name {

    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zn-category-menu .wc-block-product-categories-list-item:has(> ul)>a::after {

    content: "";
    position: absolute;
    right: 14px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    transform: translateY(-50%) rotate(45deg);
    opacity: .75;
}

.zn-category-menu .wc-block-product-categories-list-item>ul {

    position: absolute;
    top: 0;
    left: 100%;
    width: 310px;
    min-width: 310px;
    min-height: 100%;
    padding: 8px 0 !important;
    background: var(--zn-menu-bg);
    border: 1px solid var(--zn-menu-border);
    border-left: 1px solid var(--zn-menu-border);
    border-radius: 0 10px 10px 0;
    box-shadow: 6px 0 18px rgba(0, 34, 97, .05);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    z-index: 20;
    transition: opacity .12s ease;
}

.zn-category-menu .wc-block-product-categories-list-item:hover>ul,

.zn-category-menu .wc-block-product-categories-list-item:focus-within>ul {

    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.zn-category-menu .wc-block-product-categories-list-item:hover>a,

.zn-category-menu .wc-block-product-categories-list-item:focus-within>a {

    color: var(--zn-menu-primary);
    background: var(--zn-menu-hover);
}


.zn-category-menu .current-cat>a,

.zn-category-menu .current-cat-parent>a {

    color: var(--zn-menu-primary);
}


.zn-category-mobile {
    display: none;
}

@media (max-width: 1024px) {

    .zn-category-menu>.wc-block-product-categories-list--depth-0 {

        display: none;
    }

    .zn-category-mobile {

        display: block;
        width: 100%;
        background: var(--zn-menu-bg);
        border: 1px solid var(--zn-menu-border);
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 5px 20px rgba(0, 34, 97, .06);
    }

    .zn-category-mobile-header {

        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 58px;
        padding: 8px 12px;
        border-bottom: 1px solid var(--zn-menu-border);
        background: var(--zn-menu-bg);
    }

    .zn-category-mobile-title {

        flex: 1;
        min-width: 0;
        color: var(--zn-menu-heading);
        font-size: 17px;
        line-height: 1.25;
        font-weight: 700;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .zn-category-mobile-back {

        position: relative;
        display: none;
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
        margin: 0;
        padding: 0;
        border: 1px solid var(--zn-menu-primary);
        border-radius: 6px;
        background: var(--zn-menu-bg);
        color: var(--zn-menu-heading);
        cursor: pointer;
        appearance: none;
    }


    .zn-category-mobile-back.is-visible {

        display: block;
    }


    .zn-category-mobile-back::before {

        content: "";
        position: absolute;
        left: 15px;
        width: 8px;
        height: 8px;
        border-left: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: translateY(-50%) rotate(45deg);
    }


    .zn-category-mobile-back:hover {

        background:
            var(--zn-menu-hover);

        color:
            var(--zn-menu-primary);
    }

    .zn-category-mobile-content {

        width: 100%;
    }

    .zn-category-mobile-list {

        display: flex;
        flex-direction: column;
        width: 100%;
        margin: 0 !important;
        padding: 5px 0 !important;
    }

    .zn-category-mobile-item {

        width: 100%;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    .zn-category-mobile-link {

        display: grid;
        grid-template-columns: 38px minmax(0, 1fr) 18px;
        align-items: center;
        column-gap: 11px;
        width: 100%;
        min-height: 52px;
        margin: 0;
        padding: 6px 12px;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: var(--zn-menu-text);
        font-family: inherit;
        font-size: 14px;
        line-height: 1.3;
        font-weight: 500;
        text-align: left;
        text-decoration: none !important;
        box-sizing: border-box;
        cursor: pointer;
        appearance: none;
        transition: background-color .15s ease, color .15s ease;
    }


    .zn-category-mobile-link:hover,

    .zn-category-mobile-link:focus-visible {

        color: var(--zn-menu-primary);
        background: var(--zn-menu-hover);
        outline: none;
    }


    .zn-category-mobile-item+.zn-category-mobile-item {

        border-top: 1px solid rgba(236, 238, 242, .8);
    }

    .zn-category-mobile-image {

        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        flex: 0 0 36px;
        margin: 0 !important;
        overflow: hidden;
        border-radius: 6px;
    }

    .zn-category-mobile-image img {

        display: block;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        object-fit: contain;
    }


    .zn-category-mobile-image--empty {

        opacity: 0;
    }


    .zn-category-mobile-image .woocommerce-placeholder {

        opacity: .5;
    }

    .zn-category-mobile-label {

        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }



    .zn-category-mobile-arrow {

        justify-self: end;
        width: 7px;
        height: 7px;
        margin-right: 3px;
        border-top: 1.5px solid currentColor;
        border-right: 1.5px solid currentColor;
        transform: rotate(45deg);
        opacity: .75;
    }


    .zn-category-mobile-arrow-spacer {

        display: block;
        width: 18px;
        height: 1px;
    }


    .zn-category-mobile-item.has-children .zn-category-mobile-link:hover {

        color: var(--zn-menu-primary);
        background: var(--zn-menu-hover);
    }

}


@media (max-width: 480px) {

    .zn-category-mobile-header {

        min-height: 54px;
        padding: 7px 10px;
    }


    .zn-category-mobile-title {

        font-size: 16px;
    }


    .zn-category-mobile-link {

        grid-template-columns: 36px minmax(0, 1fr) 18px;
        min-height: 50px;
        column-gap: 10px;
        padding: 6px 10px;
        font-size: 13.5px;
    }


    .zn-category-mobile-image {

        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
    }

}


@media (min-width: 1025px) {

    .zn-category-mobile {

        display: none !important;
    }

}

/* zonas categories menu end   */

/* ==========================================================
   zonas  menu
   ========================================================== */

.wp-block-navigation__container .wp-block-navigation-item__content {
    position: relative;
    text-decoration: none !important;
    transition: color .18s ease;
}



.wp-block-navigation__container .wp-block-navigation-item__content mark {
    color: inherit !important;
}



.wp-block-navigation__container .wp-block-navigation-item__content:hover {
    color: var(--wp--preset--color--primary, #E91E63) !important;
}


.wp-block-navigation__container .wp-block-navigation-item__content::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -8px;
    height: 2px;
    background: var(--wp--preset--color--primary, #E91E63);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .18s ease;
}


.wp-block-navigation__container .wp-block-navigation-item__content:hover::after {
    transform: scaleX(1);
}

.wp-block-navigation__container .wp-block-navigation-item.current-menu-item>.wp-block-navigation-item__content,

.wp-block-navigation__container .wp-block-navigation-item.current-menu-ancestor>.wp-block-navigation-item__content,

.wp-block-navigation__container .wp-block-navigation-item__content[aria-current="page"] {
    color:        var(--wp--preset--color--primary, #E91E63) !important;
}


.wp-block-navigation__container .wp-block-navigation-item.current-menu-item>.wp-block-navigation-item__content::after,

.wp-block-navigation__container .wp-block-navigation-item.current-menu-ancestor>.wp-block-navigation-item__content::after,

.wp-block-navigation__container .wp-block-navigation-item__content[aria-current="page"]::after {
    transform: scaleX(1);
}

.zn-category-mobile {
    display: none;
}

@media (max-width: 1024px) {

    .zn-mobile-vertical.is-layout-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
        ;
    }

    .zn-category-menu>.wc-block-product-categories-list {
        display: none !important;
    }


    /* MOBILE VIEW */

    .zn-category-menu .zn-category-mobile {
        display: block;
        width: 100%;
        background: #fff;
        border-radius: 8px;
        overflow: hidden;
    }

    .zn-category-menu .zn-category-mobile-header {
        display: flex;
        align-items: center;

        min-height: 64px;

        padding: 10px 16px;

        background: #fff;

        border-bottom: 1px solid #eaecf0;
    }

    .zn-category-menu .zn-category-mobile-back {
        display: none;

        align-items: center;
        justify-content: center;

        width: 44px;
        height: 44px;

        margin-right: 14px;
        padding: 0;
        flex: 0 0 44px;
        color: var(--wp--preset--color--heading, #002261);
        background: #fff;
        border: 1px solid #e4e7ec;
        border-radius: 7px;

        cursor: pointer;
    }


    .zn-category-menu .zn-category-mobile-back.is-visible {
        display: flex;
    }


    .zn-category-menu .zn-category-mobile-back::before {
        content: "";

        width: 9px;
        height: 9px;

        border-left: 2px solid currentColor;
        border-bottom: 2px solid currentColor;

        transform: rotate(45deg);
    }

    .zn-category-menu .zn-category-mobile-title {
        color: var(--wp--preset--color--heading, #002261);

        font-size: 20px;
        line-height: 1.2;
        font-weight: 700;
    }

    .zn-category-menu .zn-category-mobile-list {
        margin: 0 !important;
        padding: 8px 12px 12px !important;

        list-style: none !important;

        background: #fff;
    }


    .zn-category-menu .zn-category-mobile-item {
        margin: 0 !important;
        padding: 0 !important;

        list-style: none !important;

        border-bottom: 1px solid #f0f1f3;
    }


    .zn-category-menu .zn-category-mobile-item:last-child {
        border-bottom: 0;
    }


    .zn-category-menu .zn-category-mobile-link {
        position: relative;

        display: flex;
        align-items: center;

        width: 100%;
        min-height: 50px;

        box-sizing: border-box;

        padding: 10px 42px 10px 12px;

        color: var(--wp--preset--color--text, #3A2B35);

        background: transparent;

        border: 0;
        border-radius: 7px;

        font: inherit;
        font-size: 14px;
        line-height: 1.3;
        font-weight: 500;

        text-align: left;
        text-decoration: none !important;

        cursor: pointer;
    }


    .zn-category-menu .zn-category-mobile-link:hover,
    .zn-category-menu .zn-category-mobile-link:focus-visible {
        color: var(--wp--preset--color--primary, #E91E63);

        background: rgba(233, 30, 99, .07);
    }

    .zn-category-menu .zn-category-mobile-item.has-children .zn-category-mobile-link::after {
        content: "";

        position: absolute;

        right: 17px;
        top: 50%;

        width: 7px;
        height: 7px;

        border-top: 1.5px solid currentColor;
        border-right: 1.5px solid currentColor;

        transform:
            translateY(-50%) rotate(45deg);
    }

}

/* zonas  menu end   */

/* ==========================================================
   products filter
   ========================================================== */

.wc-block-product-filters__open-overlay {
    display: flex !important;
    padding: var(--padding);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--wp--preset--color--surface);
    box-shadow: none !important;
    font-weight: bold;
}

.wc-block-product-filters__open-overlay:hover{
    border-color: var(--wp--preset--color--primary) !important;
    color: var(--wp--preset--color--primary) !important;
}

.is-overlay-opened .wc-block-product-filters__open-overlay {
    display: none !important;
}

.wc-block-product-filters__overlay {
    display: none !important;
}

.wc-block-product-filters.is-overlay-opened .wc-block-product-filters__overlay {
    display: block !important;
}
.wc-block-product-filters__overlay-header,
.wc-block-product-filters__overlay-footer
{
  display: flex !important;;
}

.wc-block-product-filters.is-overlay-opened .wc-block-product-filters__overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;
    width: 100vw !important;
    height: 100vh !important;
    overflow: hidden !important;
    background: rgba(0, 0, 0, 0.35) !important;
}

.wc-block-product-filters__overlay-wrapper {
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
}

.wc-block-product-filters__overlay-dialog {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    background: var(--wp--preset--color--surface) !important;
}

.wc-block-product-filters__overlay-header {
    flex: 0 0 auto !important;
}

.wc-block-product-filters__overlay-content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: var(--padding) !important;;
}

.wc-block-product-filters__overlay-footer {
    flex: 0 0 auto !important;
}

html:has(.wc-block-product-filters.is-overlay-opened),
body:has(.wc-block-product-filters.is-overlay-opened) {
    overflow: hidden;
}

.wc-block-product-filter-removable-chips button {
    border-color: var(--wp--preset--color--primary)  !important;
    border-radius: var(--border-radius);
    background: var(--wp--preset--color--surface);
    color: var(--wp--preset--color--primary)  !important;
    box-shadow: none !important;
}

.wc-block-product-filter-removable-chips button {
    border: 0 !important;
    border-radius: var(--border-radius);
    color: var(--wp--preset--color--primary)  !important;
    box-shadow: none !important;
}

.wc-block-product-filter-chips__item {
    min-height: 40px;
    margin: 0 !important;
    padding: 8px 14px !important;
    border: 1px solid #d7dce3 !important;
    background:var(--wp--preset--color--surface);
    border-radius: var(--border-radius);

    color: var(--zn-text) !important;
    font-size: 14px;
    font-weight: 500;
    box-shadow: none !important;
}

.wc-block-product-filter-chips__items {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.wc-block-product-filter-chips__item:hover,
.wc-block-product-filter-chips__item[aria-checked="true"] {
    border-color:var(--wp--preset--color--primary) !important;
    color: var(--wp--preset--color--primary) !important;
    background: color-mix(in srgb, var(--wp--preset--color--primary) 5%, white) !important;
}

.wc-block-product-filter-chips__show-more {
    margin-top: 10px;
    background: transparent;
    color: var(--wp--preset--color--primary) ;
    font-weight: 600;
}

.wc-block-product-filter-price-slider__range{
    --range-color: var(--wp--preset--color--primary);
}
/* products filter */




/* =========================
   ZONAS KONTAKT FORM zonas.sk/konakt... Začiatok
========================= */
.zn-contact-form-7 {
    width: 100%;
    height: 790px;

    box-sizing: border-box;
    padding: 0 !important;

    background: #fff;

    border: 1px solid #EAECF0;
    border-radius: 12px;

    overflow: hidden;

    box-shadow: 0 2px 8px rgba(16,24,40,.04);
}


/* =========================================================
   CONTACT FORM 7
========================================================= */

.zn-contact-form-7 .wpcf7 {
    width: 100%;
    height: 100%;
}


/* SAMOTNÝ FORM */

.zn-contact-form-7 .wpcf7-form {
    width: 100%;
    height: 100%;

    position: relative;

    box-sizing: border-box;

    padding: 22px 36px 28px !important;
    margin: 0 !important;
}


/* VNÚTORNÝ WRAPPER */

.zn-contact-form-7 .zn-contact-form {
    width: 100%;
    height: 100%;

    box-sizing: border-box;
}


/* =========================================================
   CF7 ODSTAVCE
========================================================= */

.zn-contact-form-7 p {
    position: relative;

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


/* =========================================================
   NADPIS
========================================================= */

.zn-contact-form-7 h2 {
    margin: 0 0 16px 0 !important;

    font-size: 30px !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;

    color: var(--wp--preset--color--foreground, #101828);
}


/* =========================================================
   PODNADPIS
========================================================= */

.zn-contact-form-7 .zn-form-subtitle {
    margin: 0 0 20px 0 !important;

    font-size: 14px !important;
    line-height: 1.55 !important;

    color: var(--wp--preset--color--contrast-2, #667085);
}


/* =========================================================
   LABEL
========================================================= */

.zn-contact-form-7 label {
    display: block;

    margin: 0 0 7px 0 !important;

    font-size: 14px !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;

    color: var(--wp--preset--color--foreground, #344054);
}


/* POVINNÁ HVIEZDIČKA */

.zn-contact-form-7 .required {
    color: var(--wp--preset--color--primary, #E91E63);
}


/* ODSTRÁNI BR MEDZI LABELOM A INPUTOM */

.zn-contact-form-7 label + br {
    display: none !important;
}


/* =========================================================
   WRAPPER POLÍ
========================================================= */

.zn-contact-form-7 .wpcf7-form-control-wrap {
    display: block;

    width: 100%;

    position: static !important;

    margin: 0 0 15px 0 !important;
}


/* =========================================================
   VŠETKY POLIA
========================================================= */

.zn-contact-form-7 input[type="text"],
.zn-contact-form-7 input[type="email"],
.zn-contact-form-7 input[type="tel"],
.zn-contact-form-7 select,
.zn-contact-form-7 textarea {

    display: block;

    width: 100% !important;
    max-width: 100% !important;

    box-sizing: border-box !important;

    margin: 0 !important;

    background: #fff !important;

    border: 1px solid #D0D5DD !important;
    border-radius: 12px !important;

    color: var(--wp--preset--color--foreground, #344054) !important;

    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 400 !important;

    outline: none !important;
    box-shadow: none !important;

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


/* =========================================================
   TEXT / EMAIL / TEL / SELECT
========================================================= */

.zn-contact-form-7 input[type="text"],
.zn-contact-form-7 input[type="email"],
.zn-contact-form-7 input[type="tel"],
.zn-contact-form-7 select {

    height: 52px !important;

    padding: 0 16px !important;
}


/* =========================================================
   TEXTAREA
========================================================= */

.zn-contact-form-7 textarea {

    height: 140px !important;
    min-height: 140px !important;
    max-height: 140px !important;

    padding: 14px 16px !important;

    resize: none !important;
}


/* =========================================================
   PLACEHOLDER
========================================================= */

.zn-contact-form-7 input::placeholder,
.zn-contact-form-7 textarea::placeholder {

    color: #98A2B3 !important;

    opacity: 1 !important;
}


/* =========================================================
   SELECT
========================================================= */

.zn-contact-form-7 select {

    cursor: pointer;

    color: var(--wp--preset--color--contrast-2, #667085) !important;

    background-color: #fff !important;
}


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

.zn-contact-form-7 input:focus,
.zn-contact-form-7 select:focus,
.zn-contact-form-7 textarea:focus {

    border-color:
        var(--wp--preset--color--primary, #E91E63) !important;

    box-shadow:
        0 0 0 3px rgba(233,30,99,.10) !important;
}


/* =========================================================
   BUTTON
========================================================= */

.zn-contact-form-7 input[type="submit"] {

    display: block !important;

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

    margin: 3px 0 0 0 !important;

    background:
        var(--wp--preset--color--primary, #E91E63) !important;

    color: #fff !important;

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

    font-family: inherit !important;

    font-size: 16px !important;
    font-weight: 600 !important;

    cursor: pointer !important;

    box-shadow:
        0 4px 12px rgba(233,30,99,.18) !important;

    transition:
        background .2s ease,
        box-shadow .2s ease;
}


.zn-contact-form-7 input[type="submit"]:hover {

    background: #D81758 !important;

    box-shadow:
        0 5px 14px rgba(233,30,99,.24) !important;
}


/* =========================================================
   VALIDÁCIA - ČERVENÝ INPUT
========================================================= */

.zn-contact-form-7 .wpcf7-not-valid {

    border-color: #D92D20 !important;
}


/* =========================================================
   VALIDÁCIA - HLÁŠKA VEDĽA LABELU
========================================================= */

.zn-contact-form-7 .wpcf7-not-valid-tip {

    position: absolute !important;

    top: 0 !important;
    right: 0 !important;

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

    font-size: 12px !important;
    line-height: 1.3 !important;
    font-weight: 400 !important;

    color: #D92D20 !important;

    white-space: nowrap;

    z-index: 5;
}


/* =========================================================
   HLAVNÁ CF7 SPRÁVA
   VŽDY NAD BUTTONOM
   NEPOSÚVA FORMULÁR
========================================================= */

.zn-contact-form-7 .wpcf7-response-output {

    position: absolute !important;

    left: 36px !important;
    right: 36px !important;

    /*
       poloha nad tlačidlom
       vyššie = väčšie číslo
       nižšie = menšie číslo
    */
    bottom: 88px !important;

    width: auto !important;

    box-sizing: border-box !important;

    margin: 0 !important;

    padding: 7px 12px !important;

    border-radius: 12px !important;

    font-size: 12px !important;
    line-height: 1.35 !important;
    font-weight: 500 !important;

    text-align: center;

    z-index: 20;
}


/* =========================================================
   ÚSPEŠNE ODOSLANÉ
========================================================= */

.zn-contact-form-7 .wpcf7-form.sent .wpcf7-response-output,
.zn-contact-form-7 .wpcf7-form[data-status="sent"] .wpcf7-response-output {

    background: #ECFDF3 !important;

    border: 1px solid #ABEFC6 !important;

    color: #067647 !important;
}


/* =========================================================
   CHYBA ODOSLANIA
========================================================= */

.zn-contact-form-7 .wpcf7-form.invalid .wpcf7-response-output,
.zn-contact-form-7 .wpcf7-form.failed .wpcf7-response-output,
.zn-contact-form-7 .wpcf7-form.aborted .wpcf7-response-output,
.zn-contact-form-7 .wpcf7-form.spam .wpcf7-response-output {

    background: #FEF3F2 !important;

    border: 1px solid #FECDCA !important;

    color: #B42318 !important;
}


/* =========================================================
   SPINNER
========================================================= */

.zn-contact-form-7 .wpcf7-spinner {

    position: absolute !important;
}


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

@media (max-width: 768px) {

    .zn-contact-form-7 {

        height: auto;

        border-radius: 12px;
    }


    .zn-contact-form-7 .wpcf7-form {

        height: auto;

        padding: 22px 18px 24px !important;
    }


    .zn-contact-form-7 h2 {

        font-size: 27px !important;
    }


    .zn-contact-form-7 input[type="text"],
    .zn-contact-form-7 input[type="email"],
    .zn-contact-form-7 input[type="tel"],
    .zn-contact-form-7 select {

        height: 50px !important;
    }


    .zn-contact-form-7 textarea {

        height: 130px !important;
        min-height: 130px !important;
        max-height: 130px !important;
    }


    .zn-contact-form-7 input[type="submit"] {

        height: 52px !important;
    }


    /* CHYBA VEDĽA LABELU */

    .zn-contact-form-7 .wpcf7-not-valid-tip {

        font-size: 11px !important;

        top: 1px !important;
        right: 0 !important;
    }


    /* HLÁŠKA NAD BUTTONOM */

    .zn-contact-form-7 .wpcf7-response-output {

        left: 18px !important;
        right: 18px !important;

        bottom: 82px !important;

        padding: 7px 10px !important;

        font-size: 11px !important;
    }
}


/* =========================
   ZONAS KONTAKT FORM zonas.sk/konakt... KONIEC
========================= */


/* =========================================================
   ZONAS - KDE NÁS NÁJDETE
   DESKTOP - FINÁLNE ROZLOŽENIE
========================================================= */


.zn-location {
  /* o trochu užšie ako rodič - zarovná sa s hornými kartami */
  width: 100% !important;
  max-width: 1300px !important;

  margin-left: auto !important;
  margin-right: auto !important;

  display: grid !important;

  /* ľavá časť pružná, mapa max 520px */
  grid-template-columns: minmax(0, 1fr) 520px !important;

  gap: 0 !important;

  align-items: stretch !important;

  box-sizing: border-box !important;

  background: #fff !important;

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

  overflow: hidden !important;

  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.05) !important;
}


/* =========================================================
   ĽAVÁ ČASŤ
========================================================= */

.zn-location-left {
  width: 100% !important;
  min-width: 0 !important;

  margin: 0 !important;

  padding: 28px 36px !important;

  box-sizing: border-box !important;

  background: #fff !important;

  border: none !important;
  border-radius: 0 !important;

  box-shadow: none !important;
}


/* =========================================================
   NADPIS
========================================================= */

.zn-location-left h2 {
  margin: 0 0 8px 0 !important;

  font-size: 26px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;

  color: var(--wp--preset--color--foreground, #101828);
}


/* =========================================================
   POPIS
========================================================= */

.zn-location-intro {
  margin: 0 0 18px 0 !important;

  font-size: 14px !important;
  line-height: 1.5 !important;

  color: var(--wp--preset--color--contrast-2, #667085);
}


/* =========================================================
   ADRESA / OTVÁRACIE HODINY
========================================================= */

.zn-location-row {
  display: flex !important;
  align-items: center !important;

  gap: 10px !important;

  margin: 0 0 10px 0 !important;
}

.zn-location-row strong {
  font-size: 14px !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;

  color: var(--wp--preset--color--foreground, #101828);
}


/* =========================================================
   IKONY
========================================================= */

.zn-location-icon {
  width: 22px;
  height: 22px;
  min-width: 22px;

  display: flex;
  align-items: center;
  justify-content: center;
}

.zn-location-icon svg {
  width: 19px;
  height: 19px;

  fill: none;

  stroke: var(--wp--preset--color--primary, #E91E63);
  stroke-width: 1.9;

  stroke-linecap: round;
  stroke-linejoin: round;
}


/* =========================================================
   TLAČIDLO ZÍSKAŤ TRASU
========================================================= */

.zn-location-button {
  width: fit-content;

  min-height: 40px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  margin-top: 6px;

  padding: 0 15px;

  box-sizing: border-box;

  background: #fff;

  border: 1px solid #C9D0D9;
  border-radius: 12px;

  color: var(--wp--preset--color--foreground, #101828);

  text-decoration: none;

  font-size: 13px;
  font-weight: 600;

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

.zn-location-button:hover {
  border-color: var(--wp--preset--color--primary, #E91E63);

  color: var(--wp--preset--color--primary, #E91E63);

  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.06);
}


/* =========================================================
   IKONA TLAČIDLA
========================================================= */

.zn-location-button-icon {
  width: 17px;
  height: 17px;

  display: flex;
  align-items: center;
  justify-content: center;
}

.zn-location-button-icon svg {
  width: 17px;
  height: 17px;

  fill: none;

  stroke: currentColor;
  stroke-width: 1.8;

  stroke-linecap: round;
  stroke-linejoin: round;
}


/* =========================================================
   PRAVÝ BIELY PRIESTOR PRE MAPU
========================================================= */

.zn-location-map {
  width: 520px !important;
  max-width: 520px !important;

  min-width: 0 !important;

  margin: 0 !important;

  padding: 10px 12px 12px 10px !important;

  box-sizing: border-box !important;

  background: #fff !important;

  border: none !important;
  border-radius: 0 !important;

  box-shadow: none !important;

  display: flex !important;

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

  overflow: hidden !important;
}


/* =========================================================
   SPECTRA GOOGLE MAP WRAPPER
========================================================= */

.zn-location-map .wp-block-uagb-google-map,
.zn-location-map .uagb-google-map,
.zn-location-map .uagb-google-map__wrap,
.zn-location-map > div {
  width: 100% !important;
  max-width: 492px !important;

  height: 230px !important;
  min-height: 230px !important;

  margin: auto !important;

  padding: 10px 12px 12px 10px !important;

  box-sizing: border-box !important;

  display: block !important;

  overflow: hidden !important;

  border: none !important;

  border-radius: 12px !important;
}


/* =========================================================
   SAMOTNÝ IFRAME MAPY
========================================================= */

.zn-location-map iframe,
.zn-location-map .uagb-google-map__iframe {
  width: 100% !important;
  height: 230px !important;
  min-height: 230px !important;

  display: block !important;

  margin: 0 !important;
  padding: 30px 12px 30px 10px !important;

  border: 0 !important;

  border-radius: 12px !important;
}


/* =========================================================
   ODSTRÁNENIE WORDPRESS / SPECTRA MEDZIER
========================================================= */

.zn-location > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* RUČNÁ POLOHA CELEJ MAPY */
.zn-location-map {
  transform: translateX(-4px) translateY(7px) !important;
  border-radius: 12px !important;
}



/* =========================================
   ZN-LOCATION LEN DESKTOP
========================================= */

@media (max-width: 1024px) {
  .zn-location {
    display: none !important;
  }
}



/* =========================================================
   KONIEC ZONAS - KDE NAS NAJDETE (KONTAKT)
========================================================= */





/* =========================================================
   ZONAS KONTAKT FORM
   TABLET + MOBIL
   CSS TRIEDA: zn-contact-form-7-mobil
========================================================= */


/* =========================================================
   DESKTOP - MOBILNÝ FORMULÁR SCHOVAŤ
========================================================= */

@media (min-width: 1025px) {

  .zn-contact-form-7-mobil {
    display: none !important;
  }

}


/* =========================================================
   TABLET + MOBIL
========================================================= */

@media (max-width: 1024px) {

  /* HLAVNÁ KARTA */
  .zn-contact-form-7-mobil {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    height: auto !important;

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

    box-sizing: border-box !important;

    background: #fff;

    border: 1px solid #EAECF0;
    border-radius: 12px;

    overflow: hidden;

    box-shadow: 0 2px 8px rgba(16,24,40,.04);

    font-family: var(--wp--preset--font-family--body, inherit);
  }


  /* CONTACT FORM 7 */
  .zn-contact-form-7-mobil .wpcf7 {
    width: 100% !important;
    height: auto !important;

    margin: 0 !important;
  }


  /* SAMOTNÝ FORM */
  .zn-contact-form-7-mobil .wpcf7-form {
    position: relative;

    width: 100% !important;
    height: auto !important;

    margin: 0 !important;

    padding: 28px 28px 26px !important;

    box-sizing: border-box !important;
  }


  /* VNÚTORNÝ WRAPPER */
  .zn-contact-form-7-mobil .zn-contact-form {
    width: 100% !important;
    height: auto !important;

    box-sizing: border-box !important;
  }


  /* ODSTAVCE */
  .zn-contact-form-7-mobil p {
    position: relative;

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


  /* =========================================================
     NADPIS
  ========================================================= */

  .zn-contact-form-7-mobil h2 {
    margin: 0 0 12px 0 !important;

    font-size: 29px !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;

    color: var(--wp--preset--color--foreground, #101828);
  }


  /* =========================================================
     PODNADPIS
  ========================================================= */

  .zn-contact-form-7-mobil .zn-form-subtitle {
    margin: 0 0 18px 0 !important;

    font-size: 14px !important;
    line-height: 1.5 !important;

    color: var(--wp--preset--color--contrast-2, #667085);
  }


  /* =========================================================
     LABEL
  ========================================================= */

  .zn-contact-form-7-mobil label {
    display: block;

    margin: 0 0 6px 0 !important;

    font-size: 14px !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;

    color: var(--wp--preset--color--foreground, #344054);
  }


  .zn-contact-form-7-mobil .required {
    color: var(--wp--preset--color--primary, #E91E63);
  }


  .zn-contact-form-7-mobil label + br {
    display: none !important;
  }


  /* =========================================================
     WRAPPER POLÍ
  ========================================================= */

  .zn-contact-form-7-mobil .wpcf7-form-control-wrap {
    display: block;

    width: 100%;

    position: static !important;

    margin: 0 0 14px 0 !important;
  }


  /* =========================================================
     VŠETKY POLIA
  ========================================================= */

  .zn-contact-form-7-mobil input[type="text"],
  .zn-contact-form-7-mobil input[type="email"],
  .zn-contact-form-7-mobil input[type="tel"],
  .zn-contact-form-7-mobil select,
  .zn-contact-form-7-mobil textarea {

    display: block;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;

    box-sizing: border-box !important;

    background: #fff !important;

    border: 1px solid #D0D5DD !important;
    border-radius: 12px !important;

    color: var(--wp--preset--color--foreground, #344054) !important;

    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 400 !important;

    outline: none !important;
    box-shadow: none !important;

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


  /* INPUTY + SELECT */
  .zn-contact-form-7-mobil input[type="text"],
  .zn-contact-form-7-mobil input[type="email"],
  .zn-contact-form-7-mobil input[type="tel"],
  .zn-contact-form-7-mobil select {

    height: 52px !important;

    padding: 0 16px !important;
  }


  /* TEXTAREA */
  .zn-contact-form-7-mobil textarea {

    height: 145px !important;
    min-height: 145px !important;
    max-height: 145px !important;

    padding: 14px 16px !important;

    resize: none !important;
  }


  /* =========================================================
     PLACEHOLDER
  ========================================================= */

  .zn-contact-form-7-mobil input::placeholder,
  .zn-contact-form-7-mobil textarea::placeholder {

    color: #98A2B3 !important;

    opacity: 1 !important;
  }


  /* SELECT */
  .zn-contact-form-7-mobil select {
    cursor: pointer;

    color: var(--wp--preset--color--contrast-2, #667085) !important;

    background-color: #fff !important;
  }


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

  .zn-contact-form-7-mobil input:focus,
  .zn-contact-form-7-mobil select:focus,
  .zn-contact-form-7-mobil textarea:focus {

    border-color:
      var(--wp--preset--color--primary, #E91E63) !important;

    box-shadow:
      0 0 0 3px rgba(233,30,99,.10) !important;
  }


  /* =========================================================
     BUTTON
  ========================================================= */

  .zn-contact-form-7-mobil input[type="submit"] {

    display: block !important;

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

    margin: 4px 0 0 0 !important;

    padding: 0 18px !important;

    box-sizing: border-box !important;

    background:
      var(--wp--preset--color--primary, #E91E63) !important;

    color: #fff !important;

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

    font-family: inherit !important;

    font-size: 16px !important;
    font-weight: 600 !important;

    cursor: pointer !important;

    box-shadow:
      0 4px 12px rgba(233,30,99,.18) !important;

    transition:
      background .2s ease,
      box-shadow .2s ease;
  }


  .zn-contact-form-7-mobil input[type="submit"]:hover {
    background: #D81758 !important;

    box-shadow:
      0 5px 14px rgba(233,30,99,.24) !important;
  }


  /* =========================================================
     VALIDÁCIA
  ========================================================= */

  .zn-contact-form-7-mobil .wpcf7-not-valid {
    border-color: #D92D20 !important;
  }


  /* HLÁŠKA VEDĽA LABELU */
  .zn-contact-form-7-mobil .wpcf7-not-valid-tip {

    position: absolute !important;

    top: 1px !important;
    right: 0 !important;

    max-width: 55%;

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

    font-size: 11px !important;
    line-height: 1.25 !important;
    font-weight: 400 !important;

    text-align: right;

    color: #D92D20 !important;

    z-index: 5;
  }


  /* =========================================================
     HLAVNÁ CF7 SPRÁVA
     NAD BUTTONOM
  ========================================================= */

  .zn-contact-form-7-mobil .wpcf7-response-output {

    position: absolute !important;

    left: 28px !important;
    right: 28px !important;

    bottom: 88px !important;

    width: auto !important;

    box-sizing: border-box !important;

    margin: 0 !important;

    padding: 7px 10px !important;

    border-radius: 12px !important;

    font-size: 11px !important;
    line-height: 1.35 !important;
    font-weight: 500 !important;

    text-align: center;

    z-index: 20;
  }


  /* ÚSPECH */
  .zn-contact-form-7-mobil .wpcf7-form.sent .wpcf7-response-output,
  .zn-contact-form-7-mobil .wpcf7-form[data-status="sent"] .wpcf7-response-output {

    background: #ECFDF3 !important;

    border: 1px solid #ABEFC6 !important;

    color: #067647 !important;
  }


  /* CHYBA */
  .zn-contact-form-7-mobil .wpcf7-form.invalid .wpcf7-response-output,
  .zn-contact-form-7-mobil .wpcf7-form.failed .wpcf7-response-output,
  .zn-contact-form-7-mobil .wpcf7-form.aborted .wpcf7-response-output,
  .zn-contact-form-7-mobil .wpcf7-form.spam .wpcf7-response-output {

    background: #FEF3F2 !important;

    border: 1px solid #FECDCA !important;

    color: #B42318 !important;
  }


  .zn-contact-form-7-mobil .wpcf7-spinner {
    position: absolute !important;
  }

}


/* =========================================================
   MOBIL - DO 768px
========================================================= */

@media (max-width: 768px) {

  .zn-contact-form-7-mobil {
    border-radius: 12px;
  }


  .zn-contact-form-7-mobil .wpcf7-form {
    padding: 20px 16px 22px !important;
  }


  .zn-contact-form-7-mobil h2 {
    font-size: 27px !important;

    margin-bottom: 10px !important;
  }


  .zn-contact-form-7-mobil .zn-form-subtitle {
    font-size: 14px !important;

    margin-bottom: 16px !important;
  }


  .zn-contact-form-7-mobil label {
    font-size: 14px !important;

    margin-bottom: 6px !important;
  }


  .zn-contact-form-7-mobil .wpcf7-form-control-wrap {
    margin-bottom: 13px !important;
  }


  .zn-contact-form-7-mobil input[type="text"],
  .zn-contact-form-7-mobil input[type="email"],
  .zn-contact-form-7-mobil input[type="tel"],
  .zn-contact-form-7-mobil select {

    height: 50px !important;

    font-size: 15px !important;

    padding: 0 14px !important;
  }


  .zn-contact-form-7-mobil textarea {

    height: 130px !important;
    min-height: 130px !important;
    max-height: 130px !important;

    padding: 13px 14px !important;
  }


  .zn-contact-form-7-mobil input[type="submit"] {

    height: 52px !important;

    font-size: 16px !important;
  }


  /* VALIDÁCIA */
  .zn-contact-form-7-mobil .wpcf7-not-valid-tip {

    font-size: 10px !important;

    max-width: 52%;

    top: 1px !important;
    right: 0 !important;
  }


  /* CF7 SPRÁVA NAD BUTTONOM */
  .zn-contact-form-7-mobil .wpcf7-response-output {

    left: 16px !important;
    right: 16px !important;

    bottom: 82px !important;

    font-size: 10.5px !important;
  }

}

/* =========================================================
   KONIEC ZONAS KONTAKT FORM
   TABLET + MOBIL
   CSS TRIEDA: zn-contact-form-7-mobil KONIEC
  =========================================================*/


/* ==========================================================
   ZONAS Footer
   ========================================================== */

footer.wp-block-template-part{
    margin-top: 1em;
}
   
 /* ZONAS Footer end   */