
@import "theme/theme-imports";

@import "base";

@import "theme/shortcodes/countdown";
@import "theme/shortcodes/heading";
.porto-u-heading .porto-u-main-heading {
    margin: 0;
    padding: 0;
    line-height: normal;
}
@import "theme/shortcodes/icon";
@import "theme/shortcodes/icons";
@import "theme/shortcodes/info_box";
@import "theme/shortcodes/interactive_banner";
@import "theme/shortcodes/stat_counter";
@import "theme/shortcodes/grid_container";
@import "theme/shortcodes/hotspot";
@import "theme/shortcodes/fancytext";
@import "theme/shortcodes/vc_row";

.porto-grid-container .porto-grid-item { min-width: 5% }
.porto-grid-container .block-list-appender { width: 100% }

@import "theme/base/grid";
@import "theme/base/sidebar-menu";
@import "theme/gui/buttons";
@import "theme/gui/social-icons";
@import "theme/base/footer";
.product-share .share-links a { color: #fff; }
.share-links .block-editor-block-list__layout{
    vertical-align: middle;
    i[class*="share-"] {
        font-style: normal;
        &:before {
            font-family: var(--fa-style-family-brands, "Font Awesome 6 Brands");
            text-indent: 0;
            position: absolute;
            left: 0; right: 0; top: 0; bottom: 0;
            line-height: 23px;
            height: 22px;
            margin: auto;
            z-index: 2;
        }

        &:hover, &:focus {
            opacity: 0.9;
            color: #fff;
        }
    }
}
.share-links .share-email:before { font-family: var(--fa-style-family-classic, "Font Awesome 6 Free"); font-weight: 900; }
.star-rating:before { color: #ddd }
.star-rating { position: relative !important; font-family: var(--fa-style-family-classic, "Font Awesome 6 Free"); font-weight: 900 }
@import "theme/gui/star-rating";
@import "theme/gui/carousels";
@import "theme/gui/timeline";
@import "theme/gui/images";
@import "theme/blog/post";
@import "theme/blog/blog";
@import "theme/portfolio/portfolio";
@import "theme/member/member";

@import "theme/shop/price";
@import "theme/shop/qty";
@import "theme/shop/image";
@import "theme/shop/add-links";
@import "theme/shop/category";
@import "theme/shop/widgets";
@import "theme/shop/toolbar";

.menu-item {
    &[class*="col-"] {
        flex: none;
        width: auto;
        max-width: none;
        min-height: 0;
        padding-left: 0;
        padding-right: 0;
    }
}
.mega-menu>li.menu-item>a { display: inline-block }
.mega-menu .popup { display: none }
@import "theme/base/header";
@import "theme/base/mega-menu";
.header-col, .header-col-wide {
    > *:not(.header-col-wide) {
        margin-#{$left}: .875rem !important;
        &:first-child {
            margin-#{$left}: 0 !important;
        }
    }
}

.block-editor .price {
    font-size: 1.5rem;
    line-height: 1;
    font-weight: 600;
    letter-spacing: -0.02em;
}
h2.resp-accordion { display: none; }
.summary-before {
    position: relative;
    @media #{$screen-normal} {
        margin-left: auto;
        margin-right: auto;
    }

    .labels {
        position: absolute;
        line-height: 1;
        color: $color-white;
        font-weight: $font-weight-bold;
        text-transform: uppercase;
        margin: 0;
        z-index: 7;
        top: .8em;
        #{$left}: .8em;

        .onhot,
        .onsale,
        .onnew {
            font-size: .8571em;
            padding: .5833em .6333em;
            margin-bottom: 5px;
            display: block;
        }
    }
}
.product-images {
    position: relative;

    .zoom {
        bottom: 4px;
        background-color: var(--porto-primary-color);
        color: #FFF;
        height: 30px;
        position: absolute;
        #{$right}: 4px;
        text-align: center;
        width: 30px;
        z-index: 1;
        i {
            font-size: 14px;
            line-height: 28px;
        }
    }
}
.variations {
    td > br {
        display: none;
    }
    .label {
        font-size: 1em;
        color: inherit;
        text-align: $left;
        padding-#{$left}: 0;
        vertical-align: baseline;
    }
    .reset_variations {
        display: inline-block;
        line-height: 1;
        padding: .4375rem .5rem;
        margin-top: .7em;
        background: #f4f4f4;
        color: inherit;
        font-size: .625rem;
        text-transform: uppercase;
        text-decoration: none;
    }
    tr {
        td {
            padding-top: 2px;
            label {
                padding-top: 10px;
            }
        }
    }
    tr:last-child {
        select {
            margin-bottom: 0;
        }
    }
    select {
        display: block;
        height: 2.625rem;
        font-size: .8571em;
        font-weight: 600;
        text-transform: uppercase;
        box-shadow: none;
        width: 100%;
    }
}
.single_variation_wrap,
.single-product .cart:not(.variations_form) {
    padding: 1.25rem 0 1rem;
    border-top: 1px solid #e7e7e7;
    border-bottom: 1px solid #e7e7e7;
    margin-top: 1.625rem;
}
.filter-item-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 0;
    margin: 0 !important;
    list-style: none !important;

    .filter-color {
        display: block;
        position: relative;
        --porto-sw-size: 24px;
        width: var(--porto-sw-size);
        height: var(--porto-sw-size);
        margin: side-values(3px 6px 3px 0);
        padding-#{$right}: 0 !important;
        
        border-radius: 50%;
        text-indent: -9999px;
        font-size: 0;
        white-space: nowrap;
        &:is([style*="#ffffff"],[style*="#FFFFFF"],[style*="255,255,255"]) {
            border-color: #222529 !important;
            outline: 1px solid #e8e8e8 !important;
        }
    }
    .chosen, .active {
        .filter-color:before {
            content: '';
            position: absolute;
            --porto-sw-offset: -4px;
            left: var(--porto-sw-offset);
            top: var(--porto-sw-offset);
            right: var(--porto-sw-offset);
            bottom: var(--porto-sw-offset);
            border-radius: 50%;
        }
    }

    & + select {
        visibility: hidden;
        width: 0;
        height: 0;
        min-height: 0;
        overflow: hidden;
        margin: 0;
        padding: 0;
        float: $right;
        border: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        -ms-appearance: none;
    }

    a.disabled {
        cursor: not-allowed;
        text-decoration: none;
        opacity: 0.5;
    }
}

.woocommerce-widget-layered-nav-list a:not(.filter-color),
.filter-item-list .filter-item {
    border: 1px solid #e9e9e9;
    display: block;
    line-height: 24px;
    padding: 0 8px;
    margin: side-values(3px 6px 3px 0);
    min-width: 20px;
    text-align: center;
    font-size: 11px;
    color: inherit;
    text-decoration: none;
}

.filter-item-list .filter-item:not(.disabled):hover {
    color: $color-white;
}

.filter-item-list .filter-image {
    width: 25px;
    height: 25px;
    text-indent: -9999px;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: transparent !important;
    box-sizing: border-box;
}

/* -------- render controls -------- */
.components-base-control__label {
    text-transform: none !important;
    font-size: 13px !important;
}
.components-base-control.porto-image-choose {
    display: flex;
    flex-wrap: wrap;
    > label {
        flex: 0 0 100%;
        width: 100%;
    }
    & > img {
        flex: 0 0 calc(50% - 5px); width: calc(50% - 5px);
        padding: 2px;
        margin: 2.5px;
        border: 2px solid #e1e1e1;
        cursor: pointer;
    }

    & > .active {
        border-color: #08c
    }
}
.wp-core-ui select[multiple] {
    height: auto !important;
    & + .components-input-control__suffix {
        display: none
    }
}

/* -------- elements -------- */
.editor-styles-wrapper .thumb-info {
    display: block;
    position: relative;
    text-decoration: none;
    max-width: 100%;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
}
.editor-styles-wrapper .thumb-info .thumb-info-title {
    transition: .3s;
    #{$left}: 0;
    position: absolute;
    font-weight: 600;
    z-index: 2;
    color: #fff;
}
.editor-styles-wrapper .thumb-info .thumb-info-wrapper {
    display: block;
    position: relative
}
.editor-styles-wrapper .thumb-info .thumb-info-wrapper:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    transition: .3s
}
.editor-styles-wrapper .thumb-info img {
    display: block;
    transition: .3s;
    position: relative;
    width: 100%;
}
.editor-styles-wrapper .thumb-info .zoom {
    border-radius: 100%;
    bottom: 4px;
    cursor: pointer;
    color: #fff;
    display: block;
    height: 30px;
    padding: 0;
    position: absolute;
    #{$right}: 4px;
    text-align: center;
    width: 30px;
    opacity: 0;
    transition: .1s;
    z-index: 2;
}
.post-carousel h3 { font-size: 14px; }
.post-carousel .post-item, .widget .row .post-item-small { margin: 0 10px; }

.posts-container[class*="columns-"] { margin-top: 1.5em; margin-bottom: 1.5em; display: grid; grid-column-gap: 30px; grid-row-gap: 30px; }

.porto-blog .post { margin-bottom: 30px; }

.posts-container.columns-2 { grid-template-columns: 1fr 1fr; }
.posts-container.columns-3 { grid-template-columns: 1fr 1fr 1fr; }
.posts-container.columns-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
.posts-container.columns-5 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
.posts-container.columns-6 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; }
.posts-container.columns-7 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
.posts-container.columns-8 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }


.posts-medium .post-medium .post-image,
.posts-medium-alt .post-medium-alt .post-image { float: $left; width: 30%; margin-#{$right}: 20px; }
.posts-medium .post-medium { content: ''; display: table; clear: both; }
.post-medium-alt:after { content: ''; display: table; clear: both }
.posts-medium .post-medium .post-image,
.posts-medium-alt .post-medium-alt .post-image { margin-#{$right}: 20px; }
.posts-container .entry-title { margin-top: 2px; }

$spacer: 1rem;
$spacers: () !default;
$spacers: map-merge(
  (
    0: 0,
    1: ($spacer * .25),
    2: ($spacer * .5),
    3: $spacer,
    4: ($spacer * 1.5),
    5: ($spacer * 3)
  ),
  $spacers
);
@each $size, $length in $spacers {
    .mt-#{$size}, .my-#{$size} { margin-top: $length !important }
    .mb-#{$size}, .my-#{$size} { margin-bottom: $length !important }
    .ms-#{$size} { margin-#{$left}: $length !important }
    .me-#{$size} { margin-#{$right}: $length !important }
    .pt-#{$size}, .py-#{$size} { padding-top: $length !important }
    .pb-#{$size}, .py-#{$size} { padding-bottom: $length !important }
    .ps-#{$size}, .px-#{$size} { padding-#{$left}: $length !important }
    .pe-#{$size}, .px-#{$size} { padding-#{$right}: $length !important }
    .p-#{$size} { padding: $length !important }
    .m-#{$size} { margin: $length !important }
}
[data-class~=ml-auto], .ml-auto { margin-left: auto !important; }
[data-class~=mr-auto], .mr-auto { margin-right: auto !important; }
[data-class~=ms-auto], .ms-auto { margin-#{$left}: auto !important; }
[data-class~=me-auto], .me-auto { margin-#{$right}: auto !important; }
[data-class~=mx-auto], .mx-auto { margin-left: auto !important; margin-right: auto !important; }
.m-t-sm { margin-top: 10px !important }
.m-t-md { margin-top: 20px !important }
.m-t-lg { margin-top: 30px !important }
.m-b-sm { margin-bottom: 10px !important }
.m-b-md { margin-bottom: 20px !important }
.m-b-lg { margin-bottom: 30px !important }
.m-b-xl { margin-bottom: 40px !important }
.m-r-md { margin-#{$right}: 20px !important }
.m-r-lg { margin-#{$right}: 30px !important }
.p-t-sm { padding-top: 10px !important }
.p-t { padding-top: 15px !important; }
.p-t-md { padding-top: 20px !important }
.p-t-lg { padding-top: 30px !important }
.p-t-xlg { padding-top: 50px !important }
.p-b { padding-bottom: 15px !important }
.p-b-lg { padding-bottom: 30px !important }
.p-b-xlg { padding-bottom: 50px !important }
.p-r-xs { padding-#{$right}: 5px !important }
.p-l-sm { padding-#{$left}: 10px !important }
.p-r-sm { padding-#{$right}: 10px !important }
.p-l-md { padding-#{$left}: 20px !important }
.p-r-md { padding-#{$right}: 20px !important }
.p-l-lg { padding-#{$left}: 30px !important }
.p-r-lg { padding-#{$right}: 30px !important }
.font-weight-bold { font-weight: 700 !important }
.font-weight-semibold { font-weight: 600 !important }
[data-class~=align-middle], .align-middle { vertical-align: middle !important }
[data-class~=d-none], .d-none { display: none !important }
[data-class~=d-block], .d-block { display: block !important }
[data-class~=d-inline-block], .d-inline-block { display: inline-block !important }
[data-class~=d-inline-flex], .d-inline-flex { display: inline-flex !important }
.text-uppercase { text-transform: uppercase !important }
.text-left, .text-start { text-align: $left !important }
[data-class~=text-end], .text-right, .text-end { text-align: $right !important }
[data-class~=text-center], .text-center { text-align: center !important }
[data-class~=position-relative], .position-relative { position: relative !important }
[data-class~=position-absolute], .position-absolute { position: absolute !important }
.overflow-hidden { overflow: hidden !important }
.overflow-visible { overflow: visible !important }
.z-index-1 { z-index: 1 }
.float-start, .pull-left { float: $left !important }
[data-class~=float-end], .float-end, .pull-right { float: $right !important }
[data-class~=w-100], .w-100 { width: 100% !important }
[data-class~=h-100], .h-100 { height: 100% !important }
[data-class~=h-50], .h-50 { height: 50% !important }
[data-class~=pull-left], .pull-left, [data-class~=float-start], .float-start { float: $left !important }
[data-class~=pull-right], .pull-right, [data-class~=float-end], .float-end { float: $right !important }
[data-class~=float-left], .float-left { float: left !important }
[data-class~=float-right], .float-right { float: right !important }
[data-class~=flex-grow-1], .flex-grow-1 {
    &>.components-disabled>div { display: flex; }
}
@media (min-width: 576px) {
    .float-sm-right,
    .float-sm-start { float: $right !important }
    .text-sm-start {
        text-align: $left !important;
    }
    [data-class~=d-sm-flex], .d-sm-flex { display: flex !important }
    [data-class~=d-sm-block], .d-sm-block { display: block !important }
    [data-class~=d-sm-inline-block], .d-sm-inline-block { display: inline-block !important }
    [data-class~=d-sm-none], .d-sm-none { display: none !important }
    [data-class~=ml-sm-auto], .ml-sm-auto { margin-left: auto !important; }
    [data-class~=mr-sm-auto], .mr-sm-auto { margin-right: auto !important; }
    [data-class~=ms-sm-auto], .ms-sm-auto { margin-#{$left}: auto !important; }
    [data-class~=me-sm-auto], .me-sm-auto { margin-#{$right}: auto !important; }
    [data-class~=mx-sm-auto], .mx-sm-auto { margin-left: auto !important; margin-right: auto !important; }
    [data-class~=flex-sm-grow-1], .flex-sm-grow-1 { flex-grow: 1 !important; }
    [data-class~=flex-sm-grow-1], .flex-sm-grow-1 {
        &>.components-disabled>div { display: flex; }
    }
    @each $size, $length in $spacers {
        .ps-sm-#{$size} { padding-#{$left}: $length !important }
    }
}
@media (min-width: 768px) {
    .text-md-left, .text-md-start { text-align: $left !important }
    .text-md-right, .text-md-end { text-align: $right !important }
    .text-md-center { text-align: center !important }
    [data-class~=ml-md-auto], .ml-md-auto { margin-left: auto !important; }
    [data-class~=mr-md-auto], .mr-md-auto { margin-right: auto !important; }
    [data-class~=ms-md-auto], .ms-md-auto { margin-#{$left}: auto !important; }
    [data-class~=me-md-auto], .me-md-auto { margin-#{$right}: auto !important; }
    [data-class~=mx-md-auto], .mx-md-auto { margin-left: auto !important; margin-right: auto !important; }
    [data-class~=flex-md-grow-1], .flex-md-grow-1 { flex-grow: 1 !important; }
    [data-class~=flex-md-grow-1], .flex-md-grow-1 {
        &>.components-disabled>div { display: flex; }
    }
    [data-class~=d-md-flex], .d-md-flex { display: flex !important }
    [data-class~=d-md-block], .d-md-block { display: block !important }
    [data-class~=d-md-none], .d-md-none { display: none !important }
    [data-class~=d-md-inline-block], .d-md-inline-block { display: inline-block !important }
}
@media (min-width: 992px) {
    .text-lg-left, .text-lg-start { text-align: $left !important }
    .text-lg-right, .text-lg-end { text-align: $right !important }
    .text-lg-center { text-align: center !important }
    [data-class~=ml-lg-auto], .ml-lg-auto { margin-left: auto !important; }
    [data-class~=mr-lg-auto], .mr-lg-auto { margin-right: auto !important; }
    [data-class~=ms-lg-auto], .ms-lg-auto { margin-#{$left}: auto !important; }
    [data-class~=me-lg-auto], .me-lg-auto { margin-#{$right}: auto !important; }
    [data-class~=mx-lg-auto], .mx-lg-auto { margin-left: auto !important; margin-right: auto !important; }
    [data-class~=flex-lg-grow-1], .flex-lg-grow-1 {
        &>.components-disabled>div { display: flex; }
    }
    [data-class~=flex-lg-grow-1], .flex-lg-grow-1 { flex-grow: 1 !important; }
    [data-class~=d-lg-block], .d-lg-block { display: block !important; }
    [data-class~=d-lg-flex], .d-lg-flex { display: flex !important;  }
    [data-class~=d-lg-none], .d-lg-none { display: none !important }
    [data-class~=d-lg-inline-block], .d-lg-inline-block { display: inline-block !important }
    
    @each $size, $length in $spacers {
        .me-lg-#{$size} { margin-#{$right}: $length !important }
        .pe-lg-#{$size} { padding-#{$right}: $length !important }
    }
}
@media (min-width: 1400px) {
    .d-xxl-flex { display: flex !important }
    [data-class~=ml-xl-auto], .ml-xl-auto { margin-left: auto !important; }
    [data-class~=mr-xl-auto], .mr-xl-auto { margin-right: auto !important; }
    [data-class~=ms-xl-auto], .ms-xl-auto { margin-#{$left}: auto !important; }
    [data-class~=me-xl-auto], .me-xl-auto { margin-#{$right}: auto !important; }
    [data-class~=mx-xl-auto], .mx-xl-auto { margin-left: auto !important; margin-right: auto !important; }
    [data-class~=flex-xl-grow-1], .flex-xl-grow-1 {
        &>.components-disabled>div { display: flex; }
    }
    [data-class~=flex-xl-grow-1], .flex-xl-grow-1 { flex-grow: 1 !important; }
    [data-class~=d-xl-flex], .d-xl-flex { display: flex !important; }
    [data-class~=d-xl-block], .d-xl-block { display: block !important; }
    [data-class~=d-xl-none], .d-xl-none { display: none !important }
    [data-class~=d-xl-inline-block], .d-xl-inline-block { display: inline-block !important }
    
    @each $size, $length in $spacers {
        .ms-xl-#{$size} { margin-#{$left}: $length !important }
        .ps-xl-#{$size} { padding-#{$left}: $length !important }
    }
}
.flex-wrap { flex-wrap: wrap !important; }
.editor-styles-wrapper b, strong { font-weight: 700 }
.editor-styles-wrapper hr { margin: 22px 0; border-color: rgba(0,0,0,.06) }
.editor-styles-wrapper hr.solid { border-bottom: none; border-top: 1px solid rgba(0, 0, 0, .06); margin: 22px 0 }
.editor-styles-wrapper hr.tall { margin: 44px 0; }
.editor-styles-wrapper ul.mega-menu { list-style: none; padding-#{$left}: 0; margin-#{$left}: 0; margin-top: 0 }
.editor-styles-wrapper .invisible { visibility: hidden !important }
.editor-styles-wrapper .list li { margin-bottom: 13px }
.editor-styles-wrapper p.wp-block {
    margin-bottom: 1.25rem
}
.editor-styles-wrapper .porto-ibanner p {
    margin-bottom: 0;
}

/* layout */
.container,
.block-editor-block-list__block .block-list-appender { margin-left: auto; margin-right: auto }
.editor-styles-wrapper { --wp--style--block-gap: var(--porto-grid-gutter-width,1.5rem); }
.editor-styles-wrapper .block-editor-block-list__block:not(.wp-block-heading) { margin-top: 0; margin-bottom: 0 }
.editor-styles-wrapper .wp-block-separator { margin-top: 22px; margin-bottom: 22px }
.editor-styles-wrapper .wp-block-columns { margin-bottom: 1.75em; --wp--style--block-gap: calc( 2 * var(--porto-column-spacing) ) }
.editor-styles-wrapper .row { display: flex; flex-wrap: wrap; width: auto }
.editor-styles-wrapper .row, .portfolio-row { margin-left: calc(-1 * var(--porto-column-spacing)); margin-right: calc(-1 * var(--porto-column-spacing)) }

.editor-styles-wrapper .row > [class*="col-"] { margin-left: 0; margin-right: 0 }
[data-class~=col-auto], .col-auto { width: auto !important; }
[data-class~=flex-1], .flex-1 { flex: 1 !important; }
[data-class~=flex-grow-1], .flex-grow-1 { flex-grow: 1 !important; }
[data-class~=flex-none], .flex-none { flex: none !important; }
/*.wp-block { max-width: none }*/
.interface-interface-skeleton__editor { max-width: 100% }
.interface-interface-skeleton__sidebar .edit-post-sidebar input {
    color: #2c3338;
}
@media (min-width: 576px) and (max-width: 767px) {
    .wp-block-column:not(:only-child) {
        flex-grow: 0;
        flex-basis: calc(50% - var(--porto-column-spacing, 10px)) !important;
    }
}
@media (min-width: 768px) {
    .wp-block-columns.alignwide { max-width: none; width: auto }
    [data-class~=col-md-auto], .col-md-auto { width: auto !important; }
    .col-md-5 { flex: 0 0 auto; width: 41.6666% }
    .col-md-7 { flex: 0 0 auto; width: 58.3333% }
    .order-md-2 { order: 2 !important }
    .wp-block, .container { max-width: 800px }
    .wp-block[data-align=wide] { max-width: var(--porto-container-width, 1200px); }

    .wp-block-column { flex-grow: 1; flex-basis: 0 }
}
@media (min-width: 992px) {
    .col-lg-6 { flex: 0 0 auto; width: 50% }
    [data-class~=col-lg-auto], .col-lg-auto { width: auto !important; }
}
@media (min-width: 1400px) {
    [data-class~=col-xl-auto], .col-xl-auto { width: auto !important; }
}
@media (min-width: 1600px) {
	.wp-block, .container { max-width: var(--porto-container-width, 1200px); }
}

/* elements */
.editor-styles-wrapper .sidebar-menu { margin: 0; padding: 0; list-style: none }
.editor-styles-wrapper ul.list,
.editor-styles-wrapper .list-unstyled { list-style: none; padding: 0; margin-#{$left}: 0 }
.widget_sidebar_menu .widget-title, .porto-links-block .links-title {
    background: #f5f5f5;
    border-bottom-color: #ddd;
}
.sidebar-menu > li.menu-item > a, .sidebar-menu .menu-custom-block a {
    border-top: 1px solid #ddd;
}
.sidebar-menu li.menu-item > a > i {
    margin-#{$right}: 0.5rem;
}
.widget_sidebar_menu .widget-title, .sidebar-menu > li.menu-item > a, .sidebar-menu .menu-custom-block a {
    color: #444
}
#header .my-wishlist, #header .my-account, #header .yith-woocompare-open {
    display: inline-block;
    font-size: 26px;
    vertical-align: middle;
}
#header .logo {
    max-width: var(--porto-logo-mw, 170px);
}
#header.sticky-header .logo {
    max-width: var(--porto-sticky-logo-mw, 80px);
}
.side-header-narrow-bar-logo {
    max-width: var(--porto-side-logo-mw, 170px);
}
.porto-products .product-categories { margin-#{$left}: 0; }
.porto_google_map { background: #e5e3df }
.porto-heading > a { color: inherit; pointer-events: auto;}
.wp-block.porto-gb-btn-block { display: block !important; } // For button block option
/* carousel */
.fullscreen-carousel { min-height: 100vh; height: auto }
.fullscreen-carousel .owl-carousel:not(.owl-loaded)>.wp-block { height: auto }
.fullscreen-carousel .owl-carousel:not(.owl-loaded)>.wp-block>* { height: 80vh }
.owl-carousel .owl-dots { text-align: center }
.owl-carousel .owl-dot { display: inline-block; outline: none }
.owl-carousel .owl-dot span { display: block; transition: opacity .2s; width: 14px; height: 14px; margin: 5px 2px }
.owl-carousel .owl-nav button.owl-prev, .owl-carousel .owl-nav button.owl-next { color: #fff }
.porto-carousel {
    margin-bottom: 0
}
.porto-carousel .wp-block-image .components-resizable-box__container { display: block; }
@for $i from 2 through 8 {
    .ccols-#{$i} > div { width: percentage( 1 / $i ) }
}

/* banner */
.editor-styles-wrapper .block-editor-block-list__block[data-type="porto/porto-interactive-banner-layer"] {
    position: static !important;
    &.is-highlighted, &.is-selected {
        .porto-ibanner-layer {
            outline: 2px solid var(--wp-admin-theme-color);
        }
    }
}
.porto-preset-layout .block-editor-block-list__block[data-type="porto/porto-grid-item"] > div,
.porto-preset-layout .block-editor-block-list__block[data-type="porto/porto-grid-item"] > div > .block-editor-inner-blocks,
.porto-preset-layout .block-editor-block-list__block[data-type="porto/porto-grid-item"] > div > .block-editor-inner-blocks > .block-editor-block-list__layout,
.porto-preset-layout .block-editor-block-list__block[data-type="porto/porto-grid-item"] > div > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block {
    height: 100%
}
.porto-ibanner .porto-ibanner-desc, .porto-ibanner .porto-ibanner-link {
    z-index: 1
}

/* products */
.editor-styles-wrapper .products-title { font-size: 1.1429em; line-height: 1.4; text-transform: uppercase; margin-bottom: 1.25rem;
 position: relative; }
.editor-styles-wrapper .products { list-style: none; padding-left: 0; padding-right: 0 }
ul.grid.divider-line { width: auto; margin-left: 0 !important; margin-right: 0 !important }
.editor-styles-wrapper .posts-container[class*="columns-"] { grid-row-gap: var(--porto-grid-gutter-width); grid-column-gap: var(--porto-grid-gutter-width) }

.products-slider.owl-carousel .owl-stage-outer { padding-top: 10px; margin-top: -10px; }
ul.grid-creative li.product-col { width: 100% }
.products.grid-creative li.product-col {
    padding-bottom: var(--porto-grid-gutter-width);
    margin-bottom: 0
}
.editor-styles-wrapper ul.product_list_widget { padding-#{$left}: 0; margin-#{$left}: 0 }
.product_list_widget .product-details a {
    color: #474747;
}
ul.product_list_widget li .product-details .amount {
    color: #444
}
.divider-line.grid > .product-col {
    border-right: 1px solid rgba(0,0,0,0.09);
    border-bottom: 1px solid rgba(0,0,0,0.09);
}
.components-placeholder.components-placeholder,
.shop-loop-before.shop-builder {
    min-height: 40px
}
.shop-loop-before.shop-builder .block-editor-block-list__layout {
    display: flex;
    align-items: center;
}
.shop-loop-before.shop-builder .block-editor-block-list__layout .wp-block {
    width: auto;
    margin-#{$left}: 0;
    margin-#{$right}: 1em;
}
.shop-loop-before .porto-product-filters-toggle svg {
    stroke: #222529;
}

/* posts */
.editor-styles-wrapper .post .read-more,
.editor-styles-wrapper .post-item .read-more { color: $color-dark; font-size: .9em; font-weight: 600; }
.editor-styles-wrapper .btn.read-more { display: inline-block; padding: 0.2rem .5rem; border-radius: 0; border: 1px solid rgba(0,0,0,.09); border-bottom-color: rgba(0,0,0,.2); font-size: 10px; font-weight: 400; text-transform: uppercase; background: #fff }
.blog-posts .post .entry-title { font-size: 1.5em; line-height: 1.3; font-weight: 600; margin-bottom: 1rem; }
.editor-styles-wrapper article.post .post-meta { font-size: .9em; margin-bottom: 8px; }

/* portfolios */
.editor-styles-wrapper .nav { display: flex; flex-wrap: wrap; padding-left: 0; margin-#{$left}: 0; list-style: none; }
.editor-styles-wrapper .portfolio-details { list-style: none }
.editor-styles-wrapper .portfolio-carousel { padding-left: 0; padding-right: 0; width: 100% }
.portfolio-carousel .portfolio-item { margin-left: var(--porto-column-spacing); margin-right: var(--porto-column-spacing) }
.portfolio-row .portfolio {
    position: relative;
    padding-left: var(--porto-column-spacing, 10px);
    padding-right: var(--porto-column-spacing, 10px);
    padding-bottom: var(--porto-grid-gutter-width, 20px);
}
.member-row .member {
    padding: 0 var(--porto-column-spacing, 10px) 1px;
    margin-bottom: var(--porto-grid-gutter-width, 20px);
    /*width: 100%;*/
}
.member-row-advanced .member { padding: 0 }

/* Interactive Banner */
.porto-ibanner { text-align: $left; min-height: 60px; }
.porto-ibanner .banner-empty-img { font-size: 45px; line-height: 1; }
.porto-ibanner-desc > .block-editor-inner-blocks > .block-editor-block-list__layout { position: static }

/* Button */
.editor-styles-wrapper .btn { text-shadow: none; border-radius: 0 }
.btn-block { display: block; padding-right: 0; padding-left: 0; width: 100% }

/* Section */
.porto-section {
    padding: 50px 0;
    > .block-editor-inner-blocks {
        width: 100%;
    }
}
.flex-container {
    display: flex;
    padding: 0;
    &.flex-wrap > .block-editor-inner-blocks > .block-editor-block-list__layout {
        flex-wrap: wrap;
    }
    > .block-editor-inner-blocks {
        width: 100%;
        flex-direction: inherit;
        align-items: inherit;
        justify-content: inherit;
        > .block-editor-block-list__layout {
            position: static;
            display: flex !important;
            flex-direction: inherit;
            align-items: inherit;
            justify-content: inherit;
        }
    }

    .wp-block {
        position: static;
        margin-left: 0;
        margin-right: 0;
    }
}
.d-flex {
    display: flex !important
}
.align-items-center {
    align-items: center !important
}
.align-items-end {
    align-items: flex-end !important;
}
.justify-content-start {
    justify-content: flex-start !important;
}
.justify-content-center {
    justify-content: center !important;
}
.justify-content-end {
    justify-content: flex-end !important;
}
.justify-content-between {
    justify-content: space-between !important;
}
.justify-content-around {
    justify-content: space-around !important;
}
.flex-column {
    flex-direction: column !important;
}
/*.porto-section .porto-section {
    margin-left: 0;
    margin-right: 0
}*/
.section-with-shape-divider {
    position: relative;
    overflow: hidden;
    .shape-divider {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 80px;
        z-index: 1;
        svg {
            position: absolute;
            width: 100%;
            top: 0;
            left: 50%;
            height: 100%;
            transform: translate3d(-50%, 0, 0);
        }
        &.shape-divider-bottom {
            top: auto;
            bottom: 0;
        }
        &.shape-divider-reverse-x {
            transform: rotateX(180deg);
        }
        &.shape-divider-reverse-y {
            transform: rotateY(180deg);
        }
        &.shape-divider-reverse-xy {
            transform: rotateY(180deg) rotateX(180deg);
        }
    }
}
/* Core blocks */
.editor-styles-wrapper *,.editor-styles-wrapper *:before,.editor-styles-wrapper *:after { box-sizing: border-box }
.editor-styles-wrapper .wp-block-categories > ul,
.editor-styles-wrapper .wp-block-archives-list,
.editor-styles-wrapper .wp-block-latest-posts { list-style: none; }
.editor-styles-wrapper .wp-block-categories > ul li,
.editor-styles-wrapper .wp-block-archives-list li,
.editor-styles-wrapper .wp-block-latest-posts li { padding: 6px 0 6px 15px; margin-bottom: 0; }
.editor-styles-wrapper .wp-block-categories > ul li:before,
.editor-styles-wrapper .wp-block-archives-list li:before,
.editor-styles-wrapper .wp-block-latest-posts li:before { content: '\f054'; font-family: var(--fa-style-family-classic, "Font Awesome 6 Free"); font-weight: 900; margin-#{$left}: -11px; margin-#{$right}: 6px; font-size: .45rem; opacity: .7; vertical-align: middle; }
.editor-styles-wrapper .wp-block-categories,
.editor-styles-wrapper .wp-block-categories ul,
.editor-styles-wrapper ul.wp-block-archives-list,
.editor-styles-wrapper ul.wp-block-latest-posts { list-style: none; padding-#{$left}: 0; }
.editor-styles-wrapper .wp-block-categories li > ul,
.editor-styles-wrapper .wp-block-archives-list li > ul,
.editor-styles-wrapper .wp-block-latest-posts li > ul { margin-top: 8px; margin-bottom: -8px; margin-#{$left}: -5px; }

.editor-styles-wrapper blockquote { border-#{$left}: 5px solid #eee; margin: 0 0 1rem 0; }
.editor-styles-wrapper .wp-block-quote:not(.is-large):not(.is-style-large) { border-#{$left}: 5px solid #eee; margin-bottom: 1rem; padding: 0.5rem 1rem; }
.editor-styles-wrapper .wp-block-pullquote { border: none; padding: 0; }
.editor-styles-wrapper .wp-block-pullquote .wp-block-pullquote__citation { color: #666; }
.editor-styles-wrapper .wp-block-pullquote blockquote { border-#{$left}-color: var(--porto-primary-color); text-align: $left; padding: 2em; }


/* Inspector Controls */
.components-panel textarea {
    color: #2c3338;
}
.tab-panel-full-width {
    .components-tab-panel__tabs-item {
        flex: 1;
        justify-content: center;
    }
}
.porto-ajaxselect2 select { width: 100% }
.components-base-control,
.components-panel__body + p, .components-base-control + p,
.components-panel__body + h3, .components-base-control + h3 { padding-left: 15px; padding-right: 15px; word-break: break-word }
.components-panel__body .components-base-control,
.components-panel__body .components-base-control + p,
.components-panel__body .components-base-control + h3 { padding-left: 0; padding-right: 0 }
.components-panel__body + .components-base-control {
    margin-top: 8px
}
.components-base-control + p { margin-top: -8px }
.porto-typography-control {
    border: 1px solid #e1e1e1;
    margin: 1rem 1rem 1.5rem;
    > h3 {
        padding-left: 0;
        padding-right: 0;
        margin-top: -.6rem;
        width: fit-content;
        background: #fff;
        margin-#{$left}: 15px;
    }
}
.components-panel__body .porto-typography-control {
    padding: 0 1rem 1rem;
    margin-left: 0;
    margin-right: 0;
}
.porto-dimension-control {
    display: flex;
    flex-wrap: wrap;

    > div {
        width: 100%;
        flex: 0 0 auto;
    }

    .components-unit-control-wrapper {
        flex: 1;

        .components-input-control__label {
            font-size: 10px;
            text-transform: uppercase
        }
        padding: 0 2px;
    }

    .components-base-control {
        margin-bottom: 10px
    }

    .components-color-picker__body {
        padding: 16px 0 12px 4px;
    }

    .components-color-picker__inputs-wrapper {
        min-width: auto
    }
}

.components-panel__body .porto-dimension-control {
    padding: 0 13px 1rem;
}

.porto-color-show { display: inline-block; vertical-align: middle; width: 18px; height: 18px; border-radius: 50%; margin-left: 10px; }
.css-1wkpk1y-Flex-ItemsColumn,
.css-rnkj6t-Flex-ItemsColumn { height: auto; }
.components-upload-show-img {
    border: 1px solid #e1e1e1;
    border-radius: 2px;
    padding: 10px;
}
/* dynamic styles */
article.post .post-date .month, article.post .post-date .format, .post-item .post-date .month, .post-item .post-date .format,
ul.list li.product .add_to_cart_button,
ul.list li.product .add_to_cart_read_more,
ul.products li.product-default:hover .add-links .add_to_cart_button,
.product-image .viewcart:hover,
li.product-outimage_aq_onimage .add-links .quickview,
li.product-onimage .product-content .quickview,
li.product-onimage2 .quickview,
li.product-wq_onimage .links-on-image .quickview,
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel .owl-nav button.owl-next,
.thumb-info .thumb-info-type,
.sort-source-style-2 { background-color: var(--porto-primary-color); border-color: var(--porto-primary-color) }

ul.category-color-primary li.product-category .thumb-info-title,
article.post .post-date .day { color: var(--porto-primary-color) }
ul.category-color-secondary li.product-category .thumb-info-title { color: var(--porto-secondary-color) }
.btn-borders.btn-primary { border-color: var(--porto-primary-color); color: var(--porto-primary-color) }
.sort-source-style-2 > li.active > a:after { border-top-color: var(--porto-primary-color) }
ul.category-color-dark li.product-category .thumb-info-title,
ul.products li.cat-has-icon .thumb-info > i { color: var(--porto-dark-color, $color-dark ) }

/* Porto Blocks */
article.post .post-date .day, .post-item .post-date .day, ul.comments .comment-block { background: #f4f4f4 }
.owl-carousel.show-dots-title-right .owl-dots { right: calc(var(--porto-grid-gutter-width) / 2 - 2px) }
.blog-posts article, .member-row-advanced .member:not(:last-child) { border-bottom: 1px solid rgba(0,0,0,0.06); }

section.timeline .timeline-box { border: 1px solid #e5e5e5; background: #fff; border-radius: 4px }
section.timeline .timeline-date { background: #fff; border: 1px solid #e5e5e5 }
section.timeline .timeline-box.left:after { background: #fff; border-#{$right}: 1px solid #e5e5e5; border-top: 1px solid #e5e5e5; }
section.timeline .timeline-box.right:after { background: #fff; border-#{$left}: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; }
section.timeline .timeline-box.left:before,
section.timeline .timeline-box.right:before {
    background: var(--porto-primary-color);
    box-shadow: 0 0 0 3px #ffffff, 0 0 0 6px var(--porto-primary-color);
}

.main-sidebar-menu .sidebar-menu > li.menu-item > a,
.main-sidebar-menu .sidebar-menu .menu-custom-block span,
.main-sidebar-menu .sidebar-menu .menu-custom-block a {
    font: var(--porto-sm-fs, 14px)/var(--porto-sm-lh, 1.4) var(--porto-sm-ff, var(--porto-body-ff)), sans-serif;
    font-weight: var(--porto-sm-fw, 600);
    letter-spacing: var(--porto-sm-ls, 0);
}

.editor-styles-wrapper .add-links .add_to_cart_button,
.editor-styles-wrapper .add-links .add_to_cart_read_more,
.editor-styles-wrapper .add-links .quickview,
.editor-styles-wrapper .yith-wcwl-add-to-wishlist span { background-color: var(--porto-shop-add-links-bg-color); border: 1px solid var(--porto-shop-add-links-border-color); color: var(--porto-shop-add-links-color); border-radius: 0 }
.porto-products.title-border-bottom > .section-title { border-bottom: 1px solid rgba(0, 0, 0, .06); }
li.product-onimage .product-content { background: #fff; border-top: 1px solid rgba(0, 0, 0, .09) }

.wp-block {
    &[data-type="porto/porto-single-icon"],
    &[data-type="porto-tb/porto-woo-buttons"],
    &[data-type="porto/porto-button"],
    &[data-type="porto-tb/porto-meta"] {
        display: inline-block;
        margin-right: 3px
    }
}
.porto-u-icons {
    &.d-flex {
        > .block-editor-inner-blocks {
            justify-content: inherit;
            align-items: inherit;
            > .block-editor-block-list__layout {
                display: flex;
                justify-content: inherit;
                align-items: inherit;
            }
        }
    }
}

/* Templates builder */
.gutenberg-hb.editor-styles-wrapper { padding-left: 20px; padding-right: 20px }
.gutenberg-hb .block-editor-block-list__layout.is-root-container,
.gutenberg-hb .porto-section > .block-editor-inner-blocks > .block-editor-block-list__layout,
.gutenberg-hb .porto-section > .container > .block-editor-inner-blocks > .block-editor-block-list__layout {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.gutenberg-hb .wp-block:not([data-type="porto/porto-section"]) {
    width: auto;
    margin-left: 0;
    margin-#{$right}: .875rem;
}
.gutenberg-hb .wp-block[data-type="porto/porto-section"] {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
}
.post-type-porto_builder .porto-ibanner>img {
    width: auto;
}

/* Add box-sizing */
.wp-block>.components-disabled>div>[class^=porto-],
.products li.product-category,
.products li.product,
.porto-portfolios article.portfolio,
.porto-members .member,
.porto-carousel > * {
    box-sizing: border-box;
}
/* Type Builder */
.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted,
.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted~.is-multi-selected,
.block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable]):focus,
.block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected {
    position: relative;
}
.block-editor-block-inspector label + .components-color-picker {
    margin-top: 3px
}
.block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable]).is-selected:after { box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); border-radius: 2px; top: 1px; left: 1px; right: 1px; bottom: 1px; }
[data-type="porto-tb/porto-featured-image"] *,
.wp-block[data-type="porto-tb/porto-featured-image"] .block-editor-block-list__block,
.block-editor-block-list__block[data-type="porto/porto-single-icon"] {
    position: static
}
[data-type="porto-tb/porto-featured-image"] .css-u2jump,
[data-type="porto-tb/porto-featured-image"] .components-disabled {
    position: static;
}
[data-type="porto-tb/porto-featured-image"] .block-editor-block-list__block[data-type^="porto"]:not([contenteditable]).is-selected:after,
.flex-container .block-editor-block-list__block[data-type^="porto"]:not([contenteditable]).is-selected:after { content: none; }
[data-type="porto-tb/porto-featured-image"] .block-editor-block-list__block[data-type^="porto"]:not([contenteditable]).is-selected [class^="porto-"],
[data-type="porto-tb/porto-featured-image"] .block-editor-block-list__block[data-type^="porto"]:not([contenteditable]).is-selected [class^="tb-"],
.flex-container .block-editor-block-list__block[data-type^="porto"]:not([contenteditable]).is-selected { outline: var(--wp-admin-border-width-focus) solid var(--wp-admin-theme-color); }
.wp-block[data-type="porto-tb/porto-featured-image"] .wp-block {
    margin: 0;
}
[data-type="porto-tb/porto-featured-image"] .block-editor-block-list__block:not([contenteditable]):focus {
    position: static;
}
div.quantity .qty {
    margin: 0;
    border-radius: 0;
    box-shadow: none
}
.editor-styles-wrapper .porto-tb-woo-link {
    vertical-align: middle;
    color: var(--porto-dark-color, #222529);
}
.editor-styles-wrapper .porto-tb-featured-image {
    pointer-events: auto
}
.wp-block[data-class^="swatch-"] {
    display: block;
}
.porto-tb-woo-link {
    height: var(--porto-height);
}
.wp-block[data-type="porto-tb/porto-featured-image"] > .block-editor-inner-blocks {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 4;
}
.wp-block[data-type="porto-tb/porto-featured-image"] > .block-editor-inner-blocks > .block-editor-block-list__layout {
	background: rgba(255, 255, 255, .8);
	display: flex !important;
	flex-direction: column;
	flex-wrap: wrap;
	height: 100%;
}
.tb-woo-stock p { margin-bottom: 0; }
.wp-block[data-type="porto-tb/porto-featured-image"] [data-type="porto-tb/porto-woo-stock"] { width: 10em; height: 3em; line-height: 3em; position: static; top: 0; bottom: 0; left: 0; right: 0; }

// meta-absolute
.meta-absolute [data-type="porto-tb/porto-meta"] {
    width: 100%;
}

.porto-page-content {
    padding: 16px 32px;
    background: #d5dadfcc;
    color: #212529;
    text-align: center;
    opacity: 0.6;
}
/* Widget */
.widget {
    margin-bottom: 1.875rem;
    margin-top: 1.875rem;

    &:first-child {
        margin-top: 0;
    }
    .wp-block-group h2, .wp-block-search__label {
        margin-bottom: 15px;
        font-size: 1em;
        margin-top: 0;
        line-height: 1.4;
        font-weight: $font-weight-bold;
        text-transform: uppercase;
        text-decoration: none;
    }
    .widget-title {
        &, a {
            color: var(--porto-heading-color);
        }
    }
    .widget-title, .widgettitle {
        margin-bottom: 15px;
        font-size: 1em;
        margin-top: 0;

        &,
        a {
            line-height: 1.4;
            font-weight: $font-weight-bold;
            text-transform: uppercase;
        }

        img {
            margin-#{$right}: 3px;
            margin-top: -2px;
        }
    }

    > div > ul,
    > ul {
        font-size: .9286em;
        border-bottom: 1px solid var(--porto-input-bc);
        margin-top: -8px;
        margin-bottom: 0;

        > li:first-child {
            border-top-width: 0;
        }

        li {
            position: relative;
            margin: 0;
            padding: 5px 0;
            border-top: 1px solid var(--porto-input-bc);
            transition: .3s;

            p {
                margin-bottom: 0;
            }

            > ul,
            > ol {
                margin-top: 8px;
                margin-bottom: -8px;
                /*margin-#{$left}: -5px;*/
                margin-#{$left}: 10px;
            }
        }
    }
    
    ul,
    ol {
        list-style: none;
        padding: 0;
    }

    select {
        max-width: 100%;
        font-size: .9em;
    }

    .rss-date,
    .post-date {
        display: inline;
        font-size: .9em;
    }
    .rss-date,
    .post-date {
        display: block;
    }
    .rss-date {
        margin-bottom: 3px;
    }

    .rssSummary {
        font-size: .95em;
        line-height: 1.42857;
    }

    cite {
        display: block;
        font-size: .9em;
        text-align: $right;
    }

    .view-more {
        padding: 12px;
    }

    .owl-carousel .owl-dots {
        margin-bottom: -10px;
    }

    .slick-dots {
        margin-bottom: -5px;
    }

    li.current-cat,
    li.current-cat-parent,
    li.current-menu-item {
        > a {
            font-weight: 700;
        }
    }
}
// Widget tag cloud - legacy and gutenberg
.widget {
    .tagcloud,
    .wp-block-tag-cloud {
        margin-top: -.3846em;
        margin-bottom: -.3846em;
        a {
            margin: side-values(.3846em .3846em .3846em 0);
            padding: .25rem .5rem;
            line-height: 1;
            display: inline-block;
            font-size: 10px !important;
            text-transform: uppercase;
            font-weight: 700;
            border-radius: 10px;
            background: var(--porto-heading-color);
            color: var(--porto-body-bg);
        }
    }
}