:root {
    font-size: 16px;
    font-family: var(--template-font), sans-serif
}

@media(max-width: 767px) {
    :root {
        font-size: 12px
    }
}

body {
    margin: 0
}

body.body-no-scroll {
    overflow: hidden
}

#popup-wrap {
    position: fixed;
    top: 0;
    z-index: 2147483001
}

#popup-wrap.popup-wrap {
    opacity: 0
}

#popup-wrap.popup-wrap.is-visible {
    opacity: 1;
    transition: all .35s ease
}

.c-modal {
    background: #f5f5f5;
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    overflow-y: scroll
}

.c-modal.c-modal--product-configuration.c-overlay-visible:after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .5);
    z-index: 9999
}

.c-modal__close {
    position: absolute;
    right: 2rem;
    top: 1.5rem;
    font-weight: 700;
    font-size: 1.5rem;
    color: #343434;
    cursor: pointer
}

.c-modal__inner {
    display: flex;
    padding-top: 7rem;
    padding-bottom: 2rem;
    height: 100vh;
    justify-content: center;
    align-items: flex-start;
    max-width: 1365px;
    margin: auto
}

@media(max-width: 1024px) {
    .c-modal__inner {
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        padding-top: 6rem
    }
}

@media(max-width: 575px) {
    .c-modal__inner {
        padding-top: 4rem
    }
}

@media(max-width: 575px) {
    .c-modal__inner input {
        font-size: 1rem
    }
}

.c-modal__inner .img-preview-wrap {
    flex-basis: 50%;
    display: flex;
    padding: 0 2rem;
    flex-wrap: wrap
}

@media(max-width: 1024px) {
    .c-modal__inner .img-preview-wrap {
        flex-basis: 30%;
        width: 100%;
        padding: 0 4rem
    }
}

.c-modal__inner .img-preview-wrap .figure-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    min-height: 326px;
    width: 100%;
    position: relative;
    margin-bottom: 1.25rem
}

@media(max-width: 575px) {
    .c-modal__inner .img-preview-wrap .figure-row {
        min-height: 180px
    }
}

.c-modal__inner .img-preview-wrap .figure-group {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    position: absolute
}

.c-modal__inner .img-preview-wrap .figure-group.is-newly-added figure {
    opacity: 1;
    transition: all .35s ease
}

.c-modal__inner .img-preview-wrap figure {
    flex-basis: calc(50% - 1rem);
    max-width: 320px;
    margin: auto;
    opacity: 0
}

.c-modal__inner .img-preview-wrap figure.is-thumb {
    opacity: 1
}

.c-modal__inner .img-preview-wrap figure.is-hidden {
    opacity: 0;
    transition: all .35s ease;
    display: none;
    transition-delay: .5s
}

.c-modal__inner .img-preview-wrap figure.is-newly-added {
    opacity: 1;
    transition: all .35s ease
}

.c-modal__inner .img-preview-wrap figure img {
    width: 100%
}

@media(max-width: 1024px) {
    .c-modal__inner .img-preview-wrap figure img {
        max-height: 30vh
    }
}

.c-modal__inner .img-preview-wrap .note {
    order: 3;
    flex-basis: 100%;
    padding: 1rem 5rem;
    line-height: 1.7;
    text-align: center
}

@media(max-width: 575px) {
    .c-modal__inner .img-preview-wrap .note {
        padding: .5rem;
        font-size: .95rem
    }
}

.c-modal__inner .form-configurator-wrap {
    flex-basis: 50%;
    gap: 19px
}

@media(max-width: 1024px) {
    .c-modal__inner .form-configurator-wrap {
        flex-basis: 100%;
        width: 100%;
        padding: 2rem 2rem 3rem
    }
}

@media(max-width: 575px) {
    .c-modal__inner .form-configurator-wrap {
        overflow-y: auto;
        padding-bottom: 8rem;
        padding-left: 3rem;
        padding-right: 3rem
    }
}

@media(max-width: 1024px) {
    .c-modal__inner .form-configurator-wrap .form-group {
        margin-bottom: 0
    }
}

.c-modal .c-list-inline {
    display: flex;
    list-style-type: none;
    padding-left: 0;
    gap: 1rem
}

@media(max-width: 575px) {
    .c-modal .c-list-inline {
        margin-top: 3rem
    }
}

.c-modal .c-list-inline li {
    list-style-type: none
}

.c-modal label {
    font-weight: 700;
    color: #343434
}

.c-modal .input--text {
    height: 48px;
    padding: 10px 12px;
    border-radius: 3px;
    box-shadow: none;
    max-width: 340px;
    border-color: #e6e6e6;
    background-color: #fff;
    border: 1px solid #666
}

.c-modal .btn-submit {
    padding: 10px 20px;
    line-height: 36px;
    font-family: var(--template-font), sans-serif;
    border: 1px solid;
    cursor: pointer;
    transition: all .35s ease;
    font-weight: 400;
    text-transform: uppercase
}

.c-modal .btn-submit--generate {
    color: #fff;
    border-color: #32cb00;
    background-color: #32cb00
}

.c-modal .btn-submit--generate:hover {
    background-color: #259800
}

.c-modal .btn-submit--add-to-cart {
    color: #fff;
    border-color: #001024;
    background-color: #001024;
    font-weight: bold;
    border-radius: 5px
}

.c-modal .btn-submit--add-to-cart:hover {
    border-color: #b5d2f5;
    color: #001024;
    background-color: #b5d2f5;
    transition: all .15s ease-in-out
}

.c-modal .form-group.buttons {
    padding-bottom: 1rem;
    padding-top: 0;
    display: flex;
    justify-content: space-between
}

@media(max-width: 768px) {
    .c-modal .form-group.buttons {
        padding-top: 3rem
    }
}

.c-modal .c-product-settings-field__item {
    margin-bottom: 2.25rem
}

.c-modal .c-product-settings-field__item:last-child {
    margin-bottom: 0
}

.c-modal .c-product-fields {
    display: flex;
    gap: 1.5rem;
    flex-direction: column
}

.c-modal .c-product-fields .c-product-fields__item {
    display: flex
}

@media(max-width: 575px) {
    .c-modal .c-product-fields .c-product-fields__item {
        flex-direction: column
    }
}

.c-modal .c-product-fields .c-product-fields__item label {
    margin-right: 10px;
    flex-basis: 175px
}

@media(max-width: 575px) {
    .c-modal .c-product-fields .c-product-fields__item label {
        flex-basis: auto
    }
}

.c-modal .c-product-fields .c-product-fields__item input {
    flex-basis: 100%
}

.c-modal .c-product-fields .c-product-fields__item input.is-caps {
    text-transform: uppercase
}

.c-modal .c-product-fields .c-product-fields__item input[data-font-color=white] {
    color: #fff;
    background: #666
}

.c-modal .c-product-fields .c-product-fields__item input[data-font-color=black] {
    color: #000;
    background: #fff
}

.c-modal .c-product-fields .c-product-fields__item input[data-font-color=blue] {
    color: #03037f;
    background: #fff
}

.c-modal .c-product-fields .c-product-fields__item input[data-font-color=green] {
    color: #258505;
    background: #fff
}

.c-modal .c-product-fields .c-product-fields__item input[data-font-color=red] {
    color: #b20000;
    background: #fff
}

.c-modal .c-product-fields .c-product-fields__item input[data-font-family="Open Sans"] {
    font-family: "Open Sans", sans-serif
}

.c-modal .c-product-fields .c-product-fields__item input[data-font-family="Patrick Hand SC"] {
    font-family: "Patrick Hand SC", sans-serif
}

.c-modal .c-product-fields .c-product-fields__item input[data-font-family="DM Serif Display"] {
    font-family: "DM Serif Display", sans-serif
}

.c-modal .c-product-fields .c-product-fields__item input[data-font-family=Roboto] {
    font-family: "Roboto", sans-serif
}

.c-modal .c-product-fields .c-product-fields__item input[data-font-family=Montserrat] {
    font-family: "Montserrat", sans-serif;
    font-weight: 400
}

.c-modal .c-product-fields .c-product-fields__item input[data-font-family="Montserrat SemiBold"] {
    font-family: "Montserrat", sans-serif;
    font-weight: 600
}

.c-modal .c-product-fields .c-product-fields__item input[data-font-family="Montserrat Medium"] {
    font-family: "Montserrat", sans-serif;
    font-weight: 500
}

.c-modal .settings--variant {
    padding-bottom: 1rem
}

.c-modal .settings--variant #simple-variants {
    display: flex
}

.c-modal .settings--variant label.advanced-parameter {
    width: auto;
    float: none;
    padding-right: 0;
    vertical-align: unset;
    height: auto;
    margin: 0
}

.c-modal .settings--variant label.advanced-parameter+.advanced-parameter {
    margin-left: 1rem
}

.c-modal .settings--variant .advanced-parameter-inner {
    width: 64px;
    height: 64px;
    border: 2px solid #cdcdcd;
    position: relative
}

@media(max-width: 575px) {
    .c-modal .settings--variant .advanced-parameter-inner {
        width: 40px;
        height: 40px
    }
}

.c-modal .settings--variant .advanced-parameter-inner.yes-before,
#modal-product-configuration .advanced-parameter-inner.yes-before {
    border-width: 2px;
    border-style: solid;
}

.c-modal .settings--variant .advanced-parameter-inner.yes-before:after {
    content: attr(data-original-title);
    position: absolute;
    top: -30px;
    background: #161616;
    color: #f5f5f5;
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 13px;
    white-space: nowrap;
    left: 50%;
    transform: translateX(-50%);
    opacity: 1;
    transition: all .35s ease;
    font-weight: 400;
    line-height: 1.4
}

@media(max-width: 575px) {
    .c-modal .settings--variant .advanced-parameter-inner #simple-variants {
        flex-wrap: wrap;
        gap: 1rem;
        justify-content: flex-start;
        align-items: center
    }
}

.c-modal .settings--variant .advanced-parameter-inner #simple-variants span {
    order: 9999
}

.c-modal .settings--variant .advanced-parameter-inner #simple-variants:before {
    display: none
}

.c-modal .settings--variant table.detail-parameters {
    float: none
}

.c-modal .settings--variant table.detail-parameters th,
.c-modal .settings--variant table.detail-parameters td {
    padding: 0
}

.c-modal .settings--variant table.detail-parameters th {
    float: left;
    width: 175px;
    margin-bottom: 0;
    padding-right: 20px;
    min-width: unset
}

@media(max-width: 575px) {
    .c-modal .settings--variant table.detail-parameters th {
        width: 100%;
        display: block;
        float: none
    }
}

.c-modal .settings--variant table.detail-parameters td {
    text-align: left
}

@media(max-width: 575px) {
    .c-modal .settings--variant table.detail-parameters td {
        margin-top: 3rem
    }
}

.c-modal .settings--variant .show-tooltip {
    cursor: pointer
}

.c-modal .settings--font .text-preview {
    width: 64px;
    height: 64px;
    padding: 10px;
    border-radius: 50%;
    display: flex;
    border: 1px solid #8e8e8e;
    background: #fff;
    color: #343434;
    justify-content: center;
    align-items: center;
    font-weight: 400
}

@media(max-width: 575px) {
    .c-modal .settings--font .text-preview {
        width: 34px;
        height: 34px
    }
}

.c-modal .settings--font .text-preview.is-font--poppins {
    font-family: "Poppins", sans-serif
}

.c-modal .settings--font .text-preview.is-font--sans-serif {
    font-family: sans-serif
}

.c-modal .settings--font .text-preview.is-font--roboto {
    font-family: "Roboto", sans-serif
}

.c-modal .settings--font .text-preview.is-font--lora {
    font-family: "Lora", sans-serif
}

.c-modal .settings--font .text-preview.is-font--montserrat {
    font-family: "Montserrat", sans-serif
}

.c-modal .settings--font .text-preview.is-font--opensans {
    font-family: "Open Sans", sans-serif
}

.c-modal .settings--font-color .color-preview {
    width: 64px;
    height: 64px;
    padding: 10px;
    border-radius: 50%;
    display: block;
    border: 1px solid #8e8e8e
}

@media(max-width: 575px) {
    .c-modal .settings--font-color .color-preview {
        width: 34px;
        height: 34px
    }
}

.c-modal .settings--font-color .color-preview.is-bg--green {
    background: #258505
}

.c-modal .settings--font-color .color-preview.is-bg--white {
    background: #fff
}

.c-modal .settings--font-color .color-preview.is-bg--black {
    background: #000
}

.c-modal .settings--font-color .color-preview.is-bg--blue {
    background: #03037f
}

.c-modal .settings--font-color .color-preview.is-bg--red {
    background: #b20000
}

.c-modal .c-custom-radio {
    position: relative
}

.c-modal .c-custom-radio input[type=radio] {
    width: 100%;
    height: 100%;
    position: absolute;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 10;
    clip: unset
}

.c-modal .c-custom-radio input[type=radio]:checked+span {
    border: 2px solid #32cb00
}

.c-modal .c-custom-radio input[type=radio]:checked+span:after {
    content: "";
    width: 30px;
    height: 30px;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxODk3MS42IiBoZWlnaHQ9IjE0MzM2LjMiIHZpZXdCb3g9IjAgMCAxNy43ODU5MTYgMTMuNDQwMjY3Ij48cGF0aCBkPSJNMTUgLjRsLTggOC00LTQtMi40IDJMNi43IDEzIDE3LjQgMi43eiIgZmlsbD0iI2ZmZiIgc3Ryb2tlPSJncmF5IiBzdHJva2Utd2lkdGg9Ii42Ii8+PC9zdmc+");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, -50%, 0);
    opacity: .95
}

.c-modal .c-custom-radio input[type=radio]:checked+span:before {
    opacity: 1;
    top: -30px
}

.c-modal .c-custom-radio input[type=radio]+span {
    cursor: pointer;
    border: 2px solid #cdcdcd;
    position: relative
}

.c-modal .c-custom-radio input[type=radio]+span:before {
    content: attr(data-radio-name);
    position: absolute;
    top: -40px;
    background: #161616;
    color: #f5f5f5;
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 13px;
    white-space: nowrap;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0
}

.btn-gen {
    padding: 13px 26px;
    border-style: solid;
    border-width: 1px;
    border-radius: 0;
    font-size: 14px;
    font-weight: 400;
    transition: all .35s ease;
    cursor: pointer
}

@media(max-width: 575px) {
    .btn-gen {
        padding: 7px 12px
    }
}

.btn-gen--primary {
    color: #fff;
    border-color: var(--color-primary);
    background-color: var(--color-primary);
    font-weight: bold;
    border-radius: 5px
}

.btn-gen--primary:hover {
    border-color: var(--color-primary-hover);
    color: #fff;
    background-color: var(--color-primary-hover)
}

.place-cart-here .cart-table .quantity-form.is-nonactive .increase,
.place-cart-here .cart-table .quantity-form.is-nonactive .decrease,
#cart-wrapper .cart-table .quantity-form.is-nonactive .increase,
#cart-wrapper .cart-table .quantity-form.is-nonactive .decrease {
    display: none
}

.place-cart-here .cart-table .quantity-form.is-nonactive input,
#cart-wrapper .cart-table .quantity-form.is-nonactive input {
    pointer-events: none
}

.place-cart-here .cart-table .quantity-form.is-nonactive .quantity,
#cart-wrapper .cart-table .quantity-form.is-nonactive .quantity {
    padding-left: 0;
    padding-right: 0;
    margin-left: 48px;
    margin-right: 48px
}

.place-cart-here .cart-table .p-customized-show,
#cart-wrapper .cart-table .p-customized-show {
    display: block
}

.place-cart-here .cart-table .p-customized-show.is-active:after,
#cart-wrapper .cart-table .p-customized-show.is-active:after {
    content: ""
}

.place-cart-here .cart-table .p-customized-show:after,
#cart-wrapper .cart-table .p-customized-show:after {
    content: "";
    padding-left: 1ex;
    font-size: 13px;
    display: inline-block;
    speak: none;
    vertical-align: middle;
    font-family: shoptet;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    line-height: 0;
    text-transform: none;
    text-decoration: none;
    transition: transform .3s ease-out
}

.place-cart-here .cart-table .tr-customized-products,
#cart-wrapper .cart-table .tr-customized-products {
    display: none
}

.place-cart-here .cart-table .tr-customized-products.is-visible,
#cart-wrapper .cart-table .tr-customized-products.is-visible {
    display: table-row
}

.place-cart-here .cart-table .tr-customized-products .item-fields,
#cart-wrapper .cart-table .tr-customized-products .item-fields {
    display: flex;
    flex-direction: column;
    flex-basis: 51.5%
}

.place-cart-here .cart-table .tr-customized-products .item-thumbs,
#cart-wrapper .cart-table .tr-customized-products .item-thumbs {
    max-width: 60px;
    display: flex;
    flex-direction: column;
    margin-right: 15px
}

.place-cart-here .cart-table .tr-customized-products .item-quantity,
#cart-wrapper .cart-table .tr-customized-products .item-quantity {
    flex-basis: 150px
}

.place-cart-here .cart-table .tr-customized-products .item-quantity .quantity,
#cart-wrapper .cart-table .tr-customized-products .item-quantity .quantity {
    display: block;
    min-height: 48px;
    max-width: 150px;
    margin: auto
}

.place-cart-here .cart-table .tr-customized-products__field,
#cart-wrapper .cart-table .tr-customized-products__field {
    margin-bottom: 5px
}

.place-cart-here .cart-table .tr-customized-products__field b,
#cart-wrapper .cart-table .tr-customized-products__field b {
    margin-right: 5px
}

.place-cart-here .cart-table .tr-customized-products .cart-customized-product,
#cart-wrapper .cart-table .tr-customized-products .cart-customized-product {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #e6e6e6;
    padding: 10px 10px 10px 90px;
    padding: 10px;
    flex-direction: row;
    align-items: center;
    position: relative
}

.place-cart-here .cart-table .tr-customized-products .cart-customized-product .custom-remove-item,
#cart-wrapper .cart-table .tr-customized-products .cart-customized-product .custom-remove-item {
    position: absolute;
    right: 0;
    font-style: normal;
    color: #b20303;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer
}

@media(max-width: 575px) {

    .place-cart-here .cart-table .tr-customized-products .cart-customized-product .custom-remove-item,
    #cart-wrapper .cart-table .tr-customized-products .cart-customized-product .custom-remove-item {
        position: relative;
        transition: unset;
        top: 0;
        margin-top: 3rem
    }
}

.place-cart-here .cart-table .tr-customized-products .cart-customized-product .custom-remove-item::before,
#cart-wrapper .cart-table .tr-customized-products .cart-customized-product .custom-remove-item::before {
    content: "";
    font-size: 10px;
    vertical-align: middle;
    position: relative;
    margin: 0;
    padding: 10px;
    font-family: shoptet;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    border: 0;
    text-align: right;
    line-height: 10px;
    background: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.c-modal--is-zones form#product-configurator .extra.discount {
    color: #000;
    padding-right: 0
}

.c-modal--is-zones form#product-configurator .extra.discount span {
    color: #000
}

@media(max-width: 575px) {
    .c-modal--is-zones form#product-configurator .extra.discount {
        display: none
    }

    .place-cart-here .cart-table .tr-customized-products .cart-customized-product {
        flex-direction: row;
        padding-bottom: 45px
    }

    .place-cart-here .cart-table .tr-customized-products .item-fields {
        flex-basis: 50% !important
    }

    .place-cart-here .cart-table .tr-customized-products .item-quantity {
        flex-basis: 100% !important
    }

    .place-cart-here .cart-table .tr-customized-products .item-quantity .quantity {
        margin-right: 0
    }

    .place-cart-here .cart-table .tr-customized-products .cart-customized-product .custom-remove-item {
        bottom: 0;
        top: unset
    }

    .place-cart-here .cart-table .tr-customized-products .item-thumbs {
        max-width: 40%;
        flex-direction: row;
        flex-wrap: wrap
    }

    img.tr-customized-products__thumb {
        flex-basis: 50%;
        max-width: unset;
        max-width: 50%
    }

    .c-modal .input--text {
        font-size: 16px
    }
}

#load-product-conf-popup {
    top: 5px;
    position: relative
}

.c-modal .settings--variant table.detail-parameters td {
    width: 100%
}

.c-modal .settings--variant table.detail-parameters {
    width: 100%
}

.c-modal .settings--variant table.detail-parameters td .hidden-split-parameter {
    display: flex;
    flex-wrap: wrap;
    max-width: 300px
}

.c-modal .settings--variant label.advanced-parameter {
    margin-left: 0;
    margin: 0 12px 12px 0
}

.c-modal .settings--variant .advanced-parameter-inner {
    width: 40px;
    height: 40px
}

.c-modal .settings--variant label.advanced-parameter+.advanced-parameter {
    margin-left: 0
}

.c-modal .settings--font .text-preview {
    width: 40px;
    height: 40px
}

.canvas-sidebar-controls {
    display: flex;
    flex-direction: column;
    gap: 1rem
}

.canvas-sidebar-controls h3 {
    color: #000;
    margin-top: 0;
    margin-bottom: 1rem
}

.canvas-sidebar-controls .settings--variant {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: #fff;
    padding: 2rem 2.375rem;
    box-shadow: 0 7px 47px 0 rgba(0, 0, 0, .07)
}

@media(max-width: 575px) {
    .canvas-sidebar-controls .settings--variant {
        margin-bottom: 0;
        background: rgba(0, 0, 0, 0);
        box-shadow: none;
        display: flex;
        flex-direction: row;
        position: absolute;
        bottom: 32px;
        left: 0;
        height: 100px;
        padding-left: 0;
        top: -160px;
        padding-top: 0;
        padding-bottom: 1rem
    }
}

@media(max-width: 375px) {
    .canvas-sidebar-controls .settings--variant {
        top: -150px
    }
}

.canvas-sidebar-controls .size-buttons-container {
    gap: 5px;
    display: flex;
    flex-wrap: wrap
}

.canvas-sidebar-controls .size-buttons-container button {
    border: 2px solid #d1d1d1;
    width: 43px;
    height: 43px;
    background: #fff;
    padding: 0;
    color: #000;
    text-align: center;
    font-weight: 700;
    font-size: 16px
}

.canvas-sidebar-controls .size-buttons-container button.active {
    border-color: #c50967
}

.canvas-sidebar-controls button {
    border: 2px solid;
    border-color: #3d3d3d;
    background: #626262;
    color: #fff;
    margin-bottom: 11px;
    text-align: left;
    border-radius: 0;
    padding-left: 4.5rem;
    background-position: 1.75rem;
    padding: 1.375rem 1.375rem 1.375rem 4.5rem;
    background-size: 24px
}

@media(max-width: 575px) {
    .canvas-sidebar-controls button {
        background-position: center;
        padding: 0;
        font-size: 0;
        width: 64px;
        height: 64px;
        background-size: 38px
    }
}

@media(max-width: 375px) {
    .canvas-sidebar-controls button {
        width: 54px;
        height: 54px;
        background-size: 32px
    }
}

.canvas-sidebar-controls button:hover {
    background-color: #000;
    color: #fff;
    transition: all .35s ease
}

.c-modal__inner.c-modal--is-zones .img-preview-wrap {
    flex-basis: 80%;
    display: flex;
    flex-direction: row;
    justify-content: space-between
}

.c-modal__inner.c-modal--is-zones .form-configurator-wrap {
    min-height: 500px;
    display: flex;
    justify-content: flex-start;
    align-items: center
}

.c-modal__inner.c-modal--is-zones .footer-controls-wrapper,
#modal-product-configuration .footer-controls-wrapper {
    gap: 1rem;
    display: flex;
    flex-direction: row;
    margin: 2rem auto;
    justify-content: center
}

.c-modal__inner.c-modal--is-zones .footer-controls-wrapper .footer-controls-inner-wrapper,
#modal-product-configuration .footer-controls-wrapper .footer-controls-inner-wrapper {
    background: #fff;
    padding: 2rem;
    box-shadow: 0 7px 47px 0 rgba(0, 0, 0, .07)
}

.c-modal__inner.c-modal--is-zones .footer-controls-wrapper h3,
#modal-product-configuration .footer-controls-wrapper h3 {
    color: #000;
    margin-top: 0;
    margin-bottom: 1rem
}

.c-modal__inner.c-modal--is-zones .footer-controls-wrapper .footer-controls,
#modal-product-configuration .footer-controls-wrapper .footer-controls {
    justify-content: center;
    align-items: center;
    display: flex;
    width: 100%;
    gap: 1rem
}

.c-modal__inner.c-modal--is-zones .footer-controls-wrapper .footer-controls .custom-radio,
#modal-product-configuration .footer-controls-wrapper .footer-controls .custom-radio {
    text-align: center
}

.c-modal__inner.c-modal--is-zones .footer-controls-wrapper .footer-controls .custom-radio__image,
#modal-product-configuration .footer-controls-wrapper .footer-controls .custom-radio__image {
    width: 83px;
    height: 83px;
    border-radius: 0;
    border: 2px solid #d2d2d2;
    background-size: 70%;
    background-repeat: no-repeat;
    background-position: center;
    margin-bottom: 0;
    display: block
}

@media(max-width: 575px) {
    .c-modal__inner.c-modal--is-zones .footer-controls-wrapper .footer-controls .custom-radio__image {
        width: 64px;
        height: 64px
    }
}

@media(max-width: 375px) {
    .c-modal__inner.c-modal--is-zones .footer-controls-wrapper .footer-controls .custom-radio__image {
        width: 54px;
        height: 54px
    }
}

#submodal {
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    max-height: 100vh;
    overflow-y: scroll;
    box-shadow: rgba(159, 159, 159, .5) 0 0 10px;
    display: none;
    position: fixed;
    padding: 2.5rem 2rem;
    border-radius: 5px;
    z-index: 2147483002;
    background-color: #fff;
    min-width: 520px;
    max-width: 520px;
    scrollbar-width: none
}

#submodal::-webkit-scrollbar {
    display: none
}

#submodal span.close-modal {
    font-weight: 700;
    border-radius: 100%;
    border: 2px solid #000;
    width: 20px;
    text-align: center;
    height: 20px;
    font-size: 14px;
    line-height: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 5px;
    right: 5px;
    position: absolute;
    cursor: pointer
}

#submodal input[type=text] {
    padding: 10px 12px;
    border-radius: 3px;
    box-shadow: none;
    max-width: 100%;
    border-color: #e6e6e6;
    background-color: #fff;
    border: 1px solid #666
}

#submodal #ffontPicker button {
    background: rgba(0, 0, 0, 0);
    color: #000
}

#submodal #ffontPicker button:hover {
    background: rgba(0, 0, 0, 0);
    color: #000;
    transition: all .35s ease
}

#submodal button:not(.layer-action) {
     border: 2px solid; 
     border-color: #001024; 
     font-weight: bold; 
    padding: 1.175rem; 
     font-size: 1rem; 
     background: #001024; 
    color: #fff; 
     width: 100%;
}

#submodal button#removeBackground {
    background: #fff;
    color: #000
}

#submodal button#removeBackground:hover {
    background-color: #f5f5f5;
    transition: all .35s ease
}

#submodal button:hover {
    background: #b5d2f5;
    border-color: #b5d2f5;
    color: #001024;
    transition: all .15s ease-in-out
}

#submodal button#submodal-add-to-cart {
    padding: .5rem;
    width: auto;
    margin-left: auto;
    flex-basis: 50%
}

#submodal .total-price {
    font-size: 1rem;
    display: flex;
    flex-direction: column;
}

@media(max-width: 575px) {
    #submodal .total-price {
        font-size: 11px
    }
}

#submodal .total-price #total-price {
    color: #000;
    font-size: 1.4rem;
    line-height: 1;
    font-weight: 700;
}

@media(max-width: 575px) {
    #submodal .total-price #total-price {
        font-size: 1.2rem
    }
}

#submodal .total-price #total-price .added-discount {
    color: #7cdb01;
    display: block;
    font-size: 14px;
    font-weight: 600
}

@media(max-width: 575px) {
    #submodal .total-price #total-price .added-discount {
        font-size: 11px
    }
}

#submodal .c-wt-quantity-wrapper {
    display: flex;
    margin: 0 1rem;
    justify-content: center
}

#submodal .c-wt-quantity-wrapper button {
    width: 18px;
    height: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    border-color: #d1d1d1;
    color: #000;
    padding: 14px
}

#submodal .c-wt-quantity-wrapper input[type=text] {
    height: 32px;
    border: 2px solid #d1d1d1;
    border-left: 0;
    border-right: 0;
    text-align: center;
    width: 48px;
    border-radius: 0
}

#submodal .c-wt-quantity-wrapper input[type=text]+button {
    margin: 0
}

#submodal .volume-discount {
    color: #000;
    gap: 5px;
    display: flex
}

@media(max-width: 575px) {
    #submodal .volume-discount {
        flex-direction: column
    }
}

#submodal .volume-discount p {
    color: #000
}

@media(max-width: 575px) {
    #submodal .volume-discount p {
        margin-bottom: 0;
        font-size: 10px
    }
}

#submodal .volume-discount__graph p {
    text-align: right;
    font-size: 12px;
    margin-bottom: 3px
}

@media(max-width: 575px) {
    #submodal .volume-discount__graph p {
        margin: 0;
        text-align: left;
        font-size: 10px
    }
}

#submodal .volume-discount__text {
    font-size: 12px
}

@media(max-width: 575px) {
    #submodal .volume-discount__text {
        font-size: 10px
    }
}

#submodal .volume-discount .volume-values {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 10px
}

#submodal .volume-discount .volume-values .discount-level {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

#submodal .volume-discount .volume-values .discount-level .discount-percent {
    font-weight: 600
}

@media(max-width: 575px) {
    #submodal .volume-discount .volume-values .discount-level .discount-percent {
        font-size: 11px
    }
}

#submodal .volume-discount .volume-values .discount-level.is--active .discount-value {
    background: #7cdb00
}

#submodal .volume-discount .volume-values .discount-level .discount-amount {
    font-size: 12px;
    white-space: nowrap
}

@media(max-width: 575px) {
    #submodal .volume-discount .volume-values .discount-level .discount-amount {
        font-size: 11px
    }
}

#submodal .volume-discount .volume-values .discount-level .discount-value {
    width: 20px;
    border-radius: 5px;
    background: gray
}

#submodal .volume-discount .volume-values .discount-level .discount-value[data-value="2"] {
    height: 20px
}

@media(max-width: 575px) {
    #submodal .volume-discount .volume-values .discount-level .discount-value[data-value="2"] {
        height: 5px
    }
}

#submodal .volume-discount .volume-values .discount-level .discount-value[data-value="5"] {
    height: 30px
}

@media(max-width: 575px) {
    #submodal .volume-discount .volume-values .discount-level .discount-value[data-value="5"] {
        height: 10px
    }
}

#submodal .volume-discount .volume-values .discount-level .discount-value[data-value="10"] {
    height: 40px
}

@media(max-width: 575px) {
    #submodal .volume-discount .volume-values .discount-level .discount-value[data-value="10"] {
        height: 15px
    }
}

#submodal .volume-discount .volume-values .discount-level .discount-value[data-value="15"] {
    height: 50px
}

@media(max-width: 575px) {
    #submodal .volume-discount .volume-values .discount-level .discount-value[data-value="15"] {
        height: 20px
    }
}

#submodal .volume-discount .volume-values .discount-level .discount-value[data-value="20"] {
    height: 60px
}

@media(max-width: 575px) {
    #submodal .volume-discount .volume-values .discount-level .discount-value[data-value="20"] {
        height: 25px
    }
}

#submodal table.size-quantity-table {
    width: 100%;
    margin: 1rem 0
}

@media(max-width: 575px) {
    #submodal table.size-quantity-table {
        font-size: .9rem
    }
}

#submodal table.size-quantity-table tr td,
#submodal table.size-quantity-table tr th {
    padding: 8px
}

@media(max-width: 575px) {

    #submodal table.size-quantity-table tr td,
    #submodal table.size-quantity-table tr th {
        padding: 2px 4px
    }
}

#submodal table.size-quantity-table tr th:first-child,
#submodal table.size-quantity-table tr th:nth-child(2) {
    text-align: left
}

#submodal table.size-quantity-table tbody tr td:first-child {
    font-weight: 700
}

#submodal input[type=text]+button {
    margin-left: 1rem
}

#submodal .submodal__footer {
    padding-top: 1rem;
    display: flex;
    gap: 1rem;
    align-items: center
}

#submodal h2 {
    font-size: 1.2625rem;
    line-height: 1.35;
    font-weight: 700;
    color: #000;
    text-align: left;
    margin-bottom: 20px;
    margin-top: 0
}

#submodal h3 {
    font-size: .9375rem;
    color: #a3a3a3;
    font-weight: 400;
    margin-bottom: 8px
}

#submodal .wt-submodal-row {
    display: flex;
    justify-content: center;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    margin-bottom: 1rem
}

#submodal .wt-submodal-row #textInput {
    width: 100%
}

#submodal #ffontPicker {
    margin: 1rem 0
}

#submodal #ffontPicker button {
    border: 0;
    border-radius: 0
}

#submodal #ffontPicker #font-picker-fontPicker {
    border-radius: 5px;
    border: 2px solid
}

#submodal .preview {
    margin: 1rem 0 0;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap
}

#submodal .preview .btn-wrap--row {
    flex-basis: 40%
}

#submodal .preview>div {
    flex-basis: 25%;
    margin-bottom: 1rem
}

#submodal .preview img {
    max-width: 140px;
    max-height: 140px;
    -o-object-fit: contain;
    object-fit: contain;
    border-radius: 5px;
    border: 2px solid var(--color-primary)
}

#submodal .preview img.ai-edited-img,
#submodal .preview img.background-removed-image,
#submodal .preview img.upscaled-image {
    padding: 0;
    border: 2px solid #d2d2d2;
    cursor: pointer;
    transition: border-color .3s, transform .3s;
    border-radius: 0
}

#submodal .preview img.ai-edited-img:hover,
#submodal .preview img.background-removed-image:hover,
#submodal .preview img.upscaled-image:hover {
    border-color: #c50967;
    transform: scale(1.05)
}

#submodal .preview img.ai-edited-img.is--active,
#submodal .preview img.background-removed-image.is--active,
#submodal .preview img.upscaled-image.is--active {
    border-color: #c50967
}

#submodal #cropperContainer {
    gap: 1rem;
    display: flex;
    flex-direction: column;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto
}

#submodal #cropperContainer img,
#submodal #cropperContainer .cropper-bg {
    max-height: 600px
}

.c-submodal-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    padding: 2rem 0 0
}

.custom-checkbox {
    position: relative;
    display: inline-block;
    padding-left: 25px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.custom-checkbox input[type=checkbox] {
    visibility: hidden;
    position: absolute
}

.custom-checkbox .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #eee;
    border-radius: 4px
}

.custom-checkbox input:checked~.checkmark {
    background-color: #2196f3
}

.custom-checkbox .checkmark:after {
    content: "";
    position: absolute;
    display: none
}

.custom-checkbox input:checked~.checkmark:after {
    display: block
}

.custom-checkbox .checkmark:after {
    left: 7px;
    top: 3px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg)
}

.c-modal__inner.c-modal--is-zones .footer-controls .is--active .custom-radio__image,
#modal-product-configuration .footer-controls .is--active .custom-radio__image {
    border-color: #c50967
}

.c-modal__inner.c-modal--is-zones .footer-controls .is--active {
    color: #008137
}

.c-generator-results {
    display: flex;
    flex-wrap: wrap;
    max-width: 960px;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 2rem;
    gap: 1rem;
    text-align: center
}

.c-generator-results img {
    flex-basis: calc(25% - 2rem);
    width: auto;
    max-width: unset;
    width: calc(25% - 2rem)
}

.c-generator-results__items {
    display: flex;
    gap: 1rem
}

.loading-spinner {
    border: 4px solid rgba(0, 0, 0, .1);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border-left-color: var(--color-primary);
    -webkit-animation: spin 1s infinite linear;
    animation: spin 1s infinite linear;
    margin: auto
}

.c-generator-loading-anim {
    padding: 4rem;
    text-align: center;
    display: flex;
    justify-content: center;
    display: none
}

img.generated-image.is--active {
    border: 4px solid var(--color-primary)
}

img.generated-image {
    cursor: pointer
}

.c-wrapper--flex-column {
    display: flex;
    flex-direction: column;
    gap: 0
}

.c-wrapper--ai-editor label {
    font-weight: 700
}

.c-wrapper--ai-editor select {
    margin-bottom: 2rem
}

.c-wrapper--ai-editor input {
    margin-bottom: 1rem
}

.c-wrapper--ai-editor #aiPromptInput {
    width: 100%;
    max-width: 400px
}

.canvas-container {
    margin: auto
}

.canvas-container.is-hidden {
    display: none !important
}

.c-ai-editor-styles {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 1rem 0 2rem 0;
    justify-content: flex-start;
    align-items: flex-start
}

.c-ai-editor-style {
    flex-basis: calc(33.3333333333% - 11px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px solid #ececec;
    cursor: pointer;
    transition: border-color .3s, transform .3s
}

.c-ai-editor-style img {
    width: 100%;
    height: auto
}

@media(max-width: 575px) {
    .c-ai-editor-style img {
        height: 64px;
        -o-object-fit: cover;
        object-fit: cover
    }
}

.c-ai-editor-style span {
    padding: 8px;
    font-size: 14px;
    font-weight: 400;
    text-align: center;
    color: #000
}

@media(max-width: 575px) {
    .c-ai-editor-style span {
        font-size: 11px
    }
}

.c-ai-editor-style:hover {
    border-color: #c50967;
    transform: scale(1.05)
}

.c-ai-editor-style.is--active {
    border-color: #c50967;
    box-shadow: 0 0 10px rgba(0, 0, 0, .5)
}

.c-generator-loading-anim {
    display: none;
    align-items: center;
    justify-content: center;
    margin-top: 16px
}

.loading-spinner {
    border: 4px solid rgba(0, 0, 0, .1);
    border-left-color: #007bff;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    -webkit-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite
}

.preview {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 16px
}

.preview img {
    max-width: 100%;
    max-height: 300px;
    border: 1px solid #ddd;
    border-radius: 8px
}

.c-generator-loading-anim {
    position: absolute;
    background: #fff;
    height: 90%;
    width: 100%;
    left: 0;
    top: 5%;
    opacity: .95;
    z-index: 99999
}

.c-generator-loading-anim:after {
    content: "Generujeme váš obrázek. Tento proces může trvat až minutu. Děkujeme za pochopení.";
    top: 25%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-weight: bold
}

.c-generator-loading-anim .loading-spinner {
    position: absolute;
    top: calc(50% - 16.5px);
    left: calc(50% - 16.5px)
}

.c-modal__inner.c-modal--is-zones .form-configurator-wrap {
    flex-direction: column-reverse;
    justify-content: flex-end
}

.layer-action:before {
    margin-right: 3px;
    font-size: 1.25rem
}

.zoom-info {
    position: absolute;
    bottom: -120px;
    left: 50%;
    display: none;
    align-items: center;
    font-size: 14px;
    cursor: pointer;
    z-index: 999999999;
    transform: translateX(-50%);
    gap: 21px
}

.zoom-info>span {
    margin-left: 5px;
    font-size: 18px;
    background-size: contain;
    opacity: 1;
    background-image: url(https://cdn.myshoptet.com/usr/webotvurci.myshoptet.com/user/documents/product-generator/img/ico--zoom3.svg);
    width: 66px;
    height: 66px;
    background-repeat: no-repeat
}

.zoom-info .info {
    max-width: 230px;
    color: #999;
    display: block;
    font-size: 15px;
    opacity: 1
}

.zoom-info .info span {
    color: #000;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.35;
    display: block
}

.zoom-info:hover .tooltip,
.zoom-info:focus .tooltip {
    display: block;
    opacity: 1;
    transition: all .35s ease
}

.img-preview-wrap {
    position: relative
}

@-webkit-keyframes spin {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

.c-modal__inner.c-modal--is-zones .canvas-sidebar-controls {
    order: 1;
    flex-basis: 25%
}

.c-modal__inner.c-modal--is-zones .img-preview-wrap {
    order: 2;
    flex-basis: 50%
}

.c-modal__inner.c-modal--is-zones .form-configurator-wrap {
    order: 3;
    flex-basis: 25%
}

.canvas-sidebar-controls__actions {
    background: #fff;
    padding: 2rem 2.375rem;
    box-shadow: 0 7px 47px 0 rgba(0, 0, 0, .07);
    display: flex;
    flex-direction: column
}

.canvas-sidebar-controls__actions button[name=ai_generator],
#modal-product-configuration button.sidebar-btn[data-action="ai-generator"] {
    background-image: url("https://cdn.myshoptet.com/usr/webotvurci.myshoptet.com/user/documents/product-generator/img/ico--ai.svg");
    background-repeat: no-repeat
}

.canvas-sidebar-controls__actions button[name=own_photo],
#modal-product-configuration button.sidebar-btn[data-action="add-image"] {
    background-image: url("https://cdn.myshoptet.com/usr/webotvurci.myshoptet.com/user/documents/product-generator/img/ico--photo.svg");
    background-repeat: no-repeat
}

.canvas-sidebar-controls__actions button[name=text],
#modal-product-configuration button.sidebar-btn[data-action="add-text"] {
    background-image: url("https://cdn.myshoptet.com/usr/webotvurci.myshoptet.com/user/documents/product-generator/img/ico--text.svg");
    background-repeat: no-repeat
}

.canvas-sidebar-controls__actions button[name=ai_editor],
#modal-product-configuration button.sidebar-btn[data-action="ai-editor"] {
    background-image: url("https://cdn.myshoptet.com/usr/webotvurci.myshoptet.com/user/documents/product-generator/img/ico--ai-app.png");
    background-repeat: no-repeat
}

.canvas-sidebar-controls__actions h3 {
    color: #000;
    margin-top: 0;
    margin-bottom: 1rem
}

.layer-manager-wrapper {
    background: #fff;
    padding: 2rem 2.375rem;
    box-shadow: 0 7px 47px 0 rgba(0, 0, 0, .07)
}

.layer-manager-wrapper h3 {
    color: #000;
    margin-top: 0;
    margin-bottom: 1rem
}

.layer-manager-wrapper .layer-item {
    border: 1px solid #f0f0f0;
    cursor: pointer;
    background: #f0f0f0;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background-color .3s;
    padding: 1rem 1rem 1rem 2.875rem;
    background-image: url(https://cdn.myshoptet.com/usr/webotvurci.myshoptet.com/user/documents/product-generator/img/ico--layer.svg);
    background-repeat: no-repeat;
    background-position: 12px;
    background-size: 19px;
    margin-bottom: 2px
}

.layer-manager-wrapper .layer-item.is--active {
    border: 1px solid #b00b5e
}

.layer-manager-wrapper .layer-item span.layer-name {
    color: #000;
    font-size: 13px;
    flex-grow: 1;
    white-space: nowrap;
    max-width: 86px;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 6px;
    font-weight: 600
}

.layer-manager-wrapper .layer-item .layer-action {
    height: 31px;
    width: 31px;
    border: none;
    color: #fff;
    cursor: pointer;
    margin-left: 5px;
    padding: 5px;
    transition: background-color .3s;
    font-size: 0
}

.layer-manager-wrapper .layer-item .layer-action.duplicate {
    background: #acacac
}

.layer-manager-wrapper .layer-item .layer-action.duplicate:before {
    content: "";
    background: url(https://cdn.myshoptet.com/usr/webotvurci.myshoptet.com/user/documents/product-generator/img/ico--copy.svg);
    width: 16px;
    height: 16px;
    display: block
}

.layer-manager-wrapper .layer-item .layer-action.duplicate:hover {
    background: #939393
}

.layer-manager-wrapper .layer-item .layer-action.rename {
    background: #656565
}

.layer-manager-wrapper .layer-item .layer-action.rename:before {
    content: "";
    background: url(https://cdn.myshoptet.com/usr/webotvurci.myshoptet.com/user/documents/product-generator/img/ico--rename.svg);
    width: 16px;
    height: 16px;
    display: block;
    background-size: contain
}

.layer-manager-wrapper .layer-item .layer-action.rename:hover {
    background: #4c4c4c
}

.layer-manager-wrapper .layer-item .layer-action.edit {
    background: #d2d2d2
}

.layer-manager-wrapper .layer-item .layer-action.edit:before {
    content: "";
    background: url(https://cdn.myshoptet.com/usr/webotvurci.myshoptet.com/user/documents/product-generator/img/ico--edit.svg);
    width: 16px;
    height: 16px;
    display: block;
    background-size: contain
}

.layer-manager-wrapper .layer-item .layer-action.edit:hover {
    background: #b9b9b9
}

.layer-manager-wrapper .layer-item .layer-action.delete {
    background: #c83535
}

.layer-manager-wrapper .layer-item .layer-action.delete:before {
    content: "";
    background: url(https://cdn.myshoptet.com/usr/webotvurci.myshoptet.com/user/documents/product-generator/img/ico--bin.svg);
    width: 16px;
    height: 16px;
    display: block
}

.layer-manager-wrapper .layer-item .layer-action.delete:hover {
    background: #a02a2a
}

.layer-manager-wrapper #layer-manager {
    min-width: 280px;
    overflow: hidden
}

.layer-action:hover {
    background-color: #555
}

.layer-action.move-up:before {
    content: "▲"
}

.layer-action.move-down:before {
    content: "▼"
}

.layer-action.duplicate:before {
    content: "⧉"
}

.layer-action.delete:before {
    content: "✖"
}

.layer-action.rename:before {
    content: "✎";
    font-size: 16px;
    cursor: pointer
}

.c-modal--is-zones form#product-configurator {
    background: #fff;
    padding: 2rem 2.375rem;
    box-shadow: 0 7px 47px 0 rgba(0, 0, 0, .07);
    display: flex;
    flex-direction: column;
    color: #000
}

.c-modal--is-zones form#product-configurator h3 {
    color: #000;
    margin-top: 0;
    margin-bottom: 1rem
}

.c-modal--is-zones form#product-configurator p {
    color: #999;
    margin-top: 0;
    font-size: 15px;
    margin-bottom: 1rem
}

.c-modal--is-zones button.btn-submit--add-to-cart.btn-submit,
#modal-product-configuration button#add-to-cart-btn {
    background-color: #001024;
    color: #fff;
    border-radius: 0;
    padding: 22px 22px 22px 54px;
    width: 100%;
    background-image: url("https://cdn.myshoptet.com/usr/webotvurci.myshoptet.com/user/documents/product-generator/img/ico--cart.svg");
    background-repeat: no-repeat;
    background-size: 24px;
    background-position: 30px;
    line-height: 1;
}

.c-modal--is-zones button.btn-submit--add-to-cart.btn-submit:hover,
#modal-product-configuration button#add-to-cart-btn:hover {
    background-color: #b5d2f5;
    color: #001024;
    transition: all .15s ease-in-out
}

.c-modal--is-zones .btn-submit--add-to-cart::before {
    content: "";
    background-image: url("https://cdn.myshoptet.com/usr/webotvurci.myshoptet.com/user/documents/product-generator/img/ico--cart.svg");
    background-repeat: no-repeat;
    background-size: 24px;
    background-position: 30px;
    display: block;
    display: none
}

.custom-file-input {
    display: block;
    width: 100%;
    margin-top: 10px
}

.custom-file-input .file-label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px 20px;
    background-color: #fff;
    border: 1px solid #001024;
    cursor: pointer;
    font-weight: 600;
    font-size: 12px;
    color: #000;
    transition: background-color .3s ease;
    box-sizing: border-box;
    padding: 13px
}

.custom-file-input .file-label img {
    margin-right: 10px
}

.custom-file-input .file-label:hover {
    background-color: #f5f5f5
}

.custom-file-input .file-name {
    font-size: 14px;
    color: #000;
    padding: 10px;
    display: inline-block;
    font-weight: bold;
    text-align: center;
    width: 100%
}

.hidden-input {
    display: none
}

.wt-lightbox {
    position: fixed;
    z-index: 3147483001;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .8);
    display: flex;
    justify-content: center;
    align-items: center
}

.wt-lightbox-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
    height: 100%
}

.wt-lightbox-content img {
    max-width: 100%;
    max-height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    cursor: -webkit-grab;
    cursor: grab
}

.wt-close-lightbox {
    position: absolute;
    top: -43px;
    right: -8px;
    font-size: 30px;
    color: #fff;
    cursor: pointer;
    background-color: rgba(0, 0, 0, .5);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color .3s ease
}

.wt-close-lightbox:hover {
    background-color: rgba(0, 0, 0, .8)
}

.wt-lightbox-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    color: #fff;
    background-color: rgba(0, 0, 0, .5);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background-color .3s ease;
    background-image: url(https://cdn.myshoptet.com/usr/webotvurci.myshoptet.com/user/documents/product-generator/img/ico--zoom3.svg);
    background-size: 18px;
    background-repeat: no-repeat;
    background-position: center
}

.wt-lightbox-icon:hover {
    background-color: rgba(0, 0, 0, .8)
}

.wt-final-image-wrap {
    position: relative;
    display: inline-block
}

#submodal .wt-lightbox-icon img {
    border: 0;
    width: 20px
}

.btn-wrap--row {
    display: flex;
    flex-direction: column;
    gap: 1rem
}

.btn-wrap--row.flex-dir--row {
    flex-direction: row
}

.has-visibility--hidden {
    visibility: hidden !important;
    opacity: 0
}

#submodal input#aiPromptInput {
    width: 100%;
    max-width: 100%;
}

select#aiStyleSelect {
    width: 100%;
    max-width: 100%
}

#popup-wrap .c-modal--product-configuration .price-wrapper,
#modal-product-configuration .price-wrapper {
    font-weight: 700;
    text-align: center;
    width: 100%;
    display: block;
    margin-bottom: 1rem;
    font-size: 1.45rem;
}

#showLayerManager {
    display: none
}

@media(max-width: 575px) {
    .c-modal .settings--variant .variant-wrapper .advanced-parameter {
        display: none
    }
}

@media(max-width: 575px) {
    .c-modal .settings--variant .variant-wrapper .advanced-parameter.is--active {
        display: block
    }
}

.c-modal .settings--variant .variant-wrapper.is--active {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    position: relative
}

.c-modal .settings--variant .variant-wrapper.is--active h3 {
    flex-basis: 100%
}

.c-modal .settings--variant .variant-wrapper.is--active label.advanced-parameter {
    margin: 0
}

.c-modal .settings--variant .variant-wrapper.is--active label.advanced-parameter:nth-child(n+3) {
    display: block
}

.c-modal .settings--variant .variant-wrapper.is--active .size-buttons-container {
    flex-basis: 100%;
    border: 2px solid #424242;
    position: absolute;
    bottom: 5px;
    width: 340px;
    background: #fff;
    display: flex;
    flex-wrap: wrap;
    left: -115px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 5px
}

.c-modal .settings--variant .variant-wrapper.is--active .size-buttons-container button:nth-child(n+2) {
    display: block
}

.c-modal .settings--variant .variant-wrapper.is--active .hidden-split-parameter {
    flex-basis: 100%;
    border: 2px solid #424242;
    position: absolute;
    bottom: 5px;
    width: 340px;
    background: #fff;
    display: flex;
    flex-wrap: wrap;
    left: -55px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 5px
}

.c-modal .settings--variant .variant-wrapper.is--active .hidden-split-parameter>span {
    display: none
}

.c-modal .settings--variant .advanced-parameter-inner.yes-before,
#modal-product-configuration .advanced-parameter-inner.yes-before {
    border-color: #c50967
}

.c-modal .settings--variant .advanced-parameter-inner,
#modal-product-configuration .advanced-parameter-inner {
    border-radius: 0
}

.c-modal .settings--variant label.advanced-parameter {
    margin: 0 5px 5px 0
}

.footer-controls-wrapper .advanced-parameter-inner.yes-before:before {
    display: none
}

.c-modal .settings--variant .advanced-parameter-inner {
    width: 43px;
    height: 43px;
    border-color: rgba(0, 0, 0, 0)
}

.c-modal .settings--variant .advanced-parameter-inner.yes-before:after {
    display: none
}

#submodal button.wt-btn--secondary {
    background: #fff;
    color: #000
}

#submodal button.wt-btn--secondary:hover {
    background-color: #f5f5f5;
    transition: all .35s ease
}

#submodal #resizeContainer label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-family: Arial, sans-serif;
    padding: 0 0 1rem 0
}

#submodal #resizeContainer input[type=checkbox] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #d1d1d1;
    border-radius: 0;
    margin-right: 10px;
    outline: none;
    cursor: pointer;
    position: relative
}

#submodal #resizeContainer input[type=checkbox]:checked {
    background-color: #c50967;
    border-color: #c50967
}

#submodal #resizeContainer input[type=checkbox]:checked::after {
    content: "✔";
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    color: #fff;
    font-size: 14px;
    font-weight: bold
}

#submodal #resizeContainer input[type=checkbox]:hover {
    border-color: #c50967
}

#submodal #resizeContainer input[type=checkbox]:focus {
    box-shadow: 0 0 0 2px rgba(197, 9, 103, .3)
}

.size-inputs {
    padding: 1rem 0
}

button#applyResize {
    margin-bottom: 1rem
}

.img-preview-wrap__inner {
    position: fixed
}

.c-modal__inner.c-modal--is-zones .img-preview-wrap {
    position: relative;
    height: 100%;
    justify-content: center
}

.c-ai-text-gen-aspect-ratio {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    flex-direction: row;
    align-items: flex-start;
    margin-bottom: 2rem
}

.c-ai-text-gen-aspect-ratio__item {
    border-radius: 0;
    border: 2px solid #d2d2d2;
    background-repeat: no-repeat;
    background-position: center;
    margin-bottom: 0;
    display: block;
    padding: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    color: #747474;
    text-align: center;
    cursor: pointer;
    flex-basis: 12.5%
}

.c-ai-text-gen-aspect-ratio__item:hover {
    border-color: #c50967;
    transform: scale(1.05)
}

.c-ai-text-gen-aspect-ratio__item.is--active {
    border-color: #c50967;
    box-shadow: 0 0 10px rgba(0, 0, 0, .5)
}

.variant-wrapper.variant-wrapper-0 {
    display: none !important
}

@media(max-width: 575px) {
    .c-modal .settings--variant .variant-wrapper .advanced-parameter.is--active+.advanced-parameter {
        display: block;
        width: 43px
    }

    .c-modal .settings--variant .variant-wrapper .advanced-parameter.is--active+.advanced-parameter+.advanced-parameter {
        display: block
    }

    #popup-wrap div#parameter-id-70 {
        min-width: 140px;
        display: flex
    }

    .c-modal .settings--variant .variant-wrapper .advanced-parameter.is--active {
        width: 43px
    }

    .c-modal .settings--variant .variant-wrapper.is--active .advanced-parameter {
        display: block
    }

    .c-modal .c-product-settings-field__item:last-child:after {
        content: "+ další";
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold
    }

    .variant-wrapper.variant-wrapper-1 {
        display: none !important
    }

    .img-preview-wrap__inner {
        position: relative;
        padding-top: 20px
    }

    #submodal {
        min-width: 360px;
        padding: 1.75rem 1rem;
        width: 100%
    }

    #showLayerManager {
        display: block
    }

    .c-modal__inner.c-modal--is-zones .form-configurator-wrap {
        order: 1;
        display: flex;
        flex-direction: row;
        padding: 0 2rem;
        min-height: 32px
    }

    .c-modal__inner.c-modal--is-zones .canvas-sidebar-controls {
        order: 2;
        flex-basis: 100%;
        justify-content: flex-start;
        padding-top: 0;
        position: relative
    }

    .c-modal__inner.c-modal--is-zones .img-preview-wrap {
        flex-basis: 100%
    }

    .canvas-sidebar-controls__actions h3 {
        display: none
    }

    .c-modal .form-group.buttons {
        padding: 0
    }

    .canvas-sidebar-controls__actions {
        flex-direction: row;
        gap: 1rem;
        background: rgba(0, 0, 0, 0);
        box-shadow: unset;
        padding: 0 0 1rem 0;
        justify-content: center
    }

    .canvas-sidebar-controls {
        gap: 0
    }

    .c-modal__inner.c-modal--is-zones .footer-controls-wrapper {
        background: rgba(0, 0, 0, 0);
        box-shadow: unset;
        padding: 1rem 0;
        display: flex;
        align-items: center
    }

    .c-modal__inner.c-modal--is-zones .footer-controls-wrapper h3 {
        font-size: 16px;
        line-height: 1.4
    }

    .zoom-info {
        bottom: 10px;
        left: calc(100% - 63px);
        transform: unset
    }

    .zoom-info .info {
        display: none
    }

    .zoom-info>span {
        height: 32px;
        width: 32px
    }

    .c-modal--is-zones form#product-configurator {
        order: 2;
        background: rgba(0, 0, 0, 0);
        box-shadow: unset;
        flex-basis: 50%;
        padding: 0
    }

    .c-modal--is-zones form#product-configurator .purchase-info h3,
    .c-modal--is-zones form#product-configurator .purchase-info p {
        display: none
    }

    #popup-wrap .c-modal--product-configuration .price-wrapper {
        position: absolute;
        right: 22.5%;
        top: 17px;
        display: inline;
        width: auto
    }

    .layer-manager-wrapper h3 {
        display: none
    }

    button#showLayerManager {
        color: #fff;
        background-color: #626262;
        border-radius: 0;
        width: 100%;
        background-image: url(https://cdn.myshoptet.com/usr/webotvurci.myshoptet.com/user/documents/product-generator/img/ico--layers.svg);
        background-repeat: no-repeat;
        line-height: 1;
        font-weight: 700;
        background-position: 10px;
        padding: 22px 12px 22px 34px;
        width: 160px;
        background-size: 19px
    }

    button#showLayerManager:hover {
        background-color: #242424
    }

    .layer-manager-wrapper #layer-manager {
        display: none
    }

    .layer-manager-wrapper {
        background: rgba(0, 0, 0, 0);
        box-shadow: unset;
        padding: 0;
        flex-basis: 50%
    }

    .c-modal--is-zones button.btn-submit--add-to-cart.btn-submit {
        text-transform: unset;
        background-position: 10px;
        padding: 22px 12px 22px 34px;
        width: 160px;
        background-size: 19px
    }

    .form-configurator-wrap {
        justify-content: center;
        align-items: center
    }

    .layer-manager-wrapper #layer-manager.is--active {
        display: block;
        position: absolute;
        background: #fff;
        padding: 1rem;
        z-index: 99999
    }

    .c-modal .settings--variant label.advanced-parameter:nth-child(n+3) {
        display: none
    }

    .canvas-sidebar-controls .size-buttons-container button:nth-child(n+2) {
        display: none
    }

    .c-modal .canvas-sidebar-controls .settings--variant h3 {
        color: #a0a0a0;
        font-size: 14px;
        font-weight: normal
    }

    .c-modal__inner.c-modal--is-zones .footer-controls-wrapper .footer-controls-inner-wrapper {
        background: rgba(0, 0, 0, 0);
        box-shadow: none;
        padding-bottom: 1rem
    }

    .c-modal__inner.c-modal--is-zones .footer-controls-wrapper .footer-controls .custom-radio {
        background-color: #fff
    }

    .c-modal__inner.c-modal--is-zones .footer-controls-wrapper {
        padding-bottom: 0;
        margin-bottom: 0;
        margin-top: 6rem
    }

    .canvas-sidebar-controls__actions {
        gap: 1rem
    }

    .c-wrapper--flex-column {
        width: auto
    }
}

div#submodal.submodal--active {
    display: block;
}

div#modal-product-configuration {
    display: none;
}

div#modal-product-configuration.modal--active {
    display: block;
    z-index: 111000;
    left: 0;
    top: 0;
}

div#modal-product-configuration {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
}

div#modal-product-configuration .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

div#modal-product-configuration .modal-content {
    padding: 2rem;
}

div#modal-product-configuration .configurator-layout {
    display: grid;
    grid-template-columns: 1fr 5fr 1.5fr;
}

div#modal-product-configuration {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
}

div#modal-product-configuration .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

div#modal-product-configuration .modal-content {
    padding: 2rem;
}

div#modal-product-configuration .configurator-layout {
    display: grid;
    grid-template-columns: 1fr 5fr 1.5fr;
}

div#modal-product-configuration .month-switcher {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

div#modal-product-configuration .month-btn__preview {
    max-height: 80px;
    height: 100%;
}

div#modal-product-configuration button.month-btn {
    display: flex;
    gap: 1rem;
    border: 1px solid #f0f0f0;
    cursor: pointer;
    background: #f0f0f0;
    color: #000;
    align-items: center;
    justify-content: space-between;
    transition: background-color .3s;
    padding: 1rem;
    margin-bottom: 2px;
}

div#modal-product-configuration .month-btn__preview img {
    height: 100%;
    width: auto;
    display: block;
    object-fit: contain;
    max-width: unset;
}

div#modal-product-configuration span.month-btn__label {
    font-weight: 600;
}

div#modal-product-configuration .sidebar-section {
    background: #fff;
    padding: 2rem 2rem;
    box-shadow: 0 7px 47px 0 rgba(0, 0, 0, .07);
}

div#modal-product-configuration button.month-btn:hover {
    background: #e3e3e3;
}

div#modal-product-configuration button.sidebar-btn {
    border: 2px solid;
    border-color: #3d3d3d;
    background-color: #626262;
    color: #fff;
    margin-bottom: 11px;
    text-align: left;
    border-radius: 0;
    padding-left: 4.5rem;
    background-position: 1.75rem;
    padding: 1.375rem 1.375rem 1.375rem 4.5rem;
    background-size: 24px;
    width: 100%;
}

div#modal-product-configuration button.sidebar-btn[data-action="upload-photo"] {
    background-image: url(https://cdn.myshoptet.com/usr/webotvurci.myshoptet.com/user/documents/product-generator/img/ico--photo.svg);
    background-repeat: no-repeat;
}

.configurator-sidebar.configurator-sidebar--right {
    gap: 1rem;
    display: flex;
    flex-direction: column;
}

div#submodal.submodal--active {
    display: block;
}

div#modal-product-configuration {
    display: none;
}

div#modal-product-configuration.modal--active {
    display: block;
    z-index: 2147482999;
}

#imagePreview img#previewImage {
    max-height: 320px;
}

#modal-product-configuration .c-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-direction: column;
}

#modal-product-configuration button#preview-all-btn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: auto;
    background: #ffffff;
}

#modal-product-configuration button#preview-all-btn:hover {
    background-color: #626262;
    transition: all .3s;
    color: #ffff;
}

#modal-product-configuration h3 {
    font-size: 1.25rem;
}

#modal-product-configuration .modal-body {
    padding: 1rem;
}

#modal-product-configuration .quantity-selector {
    border: 1px solid #cfcfcf;
    font-size: 1.1rem;
}

#modal-product-configuration .month-switcher .month-btn__label {
    font-weight: 700;
}

#modal-product-configuration .quantity-selector input {
    padding-left: 10px;
    padding-right: 0;
    text-align: center;
    border: 0;
    font-weight: 600;
}

#modal-product-configuration .quantity-selector button.quantity-btn {
    background: transparent;
    padding: 5px 15px;
    transition: all .3s;
    border: 0;
}

#modal-product-configuration .quantity-selector button.quantity-btn:hover {
    background: #3db852;
    color: #fff;
}

#modal-product-configuration .quantity-selector button.quantity-btn.quantity-btn--minus {
    border-right: 1px solid #cfcfcf;
}

#modal-product-configuration .quantity-selector button.quantity-btn.quantity-btn--plus {
    border-left: 1px solid #cfcfcf;
}

#submodal button.submodal__close.close-modal {
    padding: 0;
    margin-left: auto;
}

#modal-product-configuration .modal-header button.modal-close,
#submodal button.submodal__close.close-modal {
    border: 1px solid #000;
    color: #000;
    background: transparent;
    border-radius: 100%;
    width: 32px;
    height: 32px;
    font-size: 1.25rem;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .3s;
}

#modal-product-configuration .modal-header button.modal-close:hover,
#submodal button.submodal__close.close-modal:hover {
    background: #000;
    color: #fff;
}

#modal-product-configuration .image-uploader__preview {
    display: flex;
    flex-direction: row;
}

#modal-product-configuration div#imagePreview {
    display: flex;
}

#modal-product-configuration #imagePreview img#previewImage {
    float: left;
}

#modal-product-configuration #submodal button.submodal__close.close-modal {
    border: 1px solid #000;
    background: transparent;
    border-radius: 100%;
    width: 32px;
    height: 32px;
    font-size: 1.25rem;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .3s;
    color: #000;
    padding: 0;
    margin-left: auto;
}

#submodal button#selectFileBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px 20px;
    background-color: #fff;
    border: 1px solid #626262;
    border-radius: 0;
    cursor: pointer;
    font-weight: 600;
    font-size: 12px;
    color: #000;
    transition: background-color .3s ease;
    box-sizing: border-box;
    padding: 13px;
    line-height: 1.4;
}

#submodal button#selectFileBtn:hover {
    background-color: #f5f5f5;
    color: #000;
}

div#submodal button#insertPhotoBtn,
#submodal button#insertText {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
    line-height: 1;
}

div#submodal {
    min-width: 680px;
}

#submodal div#imagePreview {
    padding: 1rem;
}

#imagePreview img#previewImage {
    float: left;
    width: 50%;
    object-fit: contain;
}

#submodal .image-uploader__actions.btn-wrap--row button,
#submodal .image-uploader__cropper-actions button {
    line-height: 1;
    font-size: 13px;
    background: transparent;
    color: #000;
    border-color: #000;
}

#submodal .image-uploader__cropper-actions {
    display: flex;
    gap: 1rem;
}

#submodal .submodal__footer {
    clear: both;
}

#submodal .image-uploader__cropper #cropperWrapper {
    max-width: 420px;
    max-height: 420px;
    text-align: center;
    margin: 1rem auto;
}

#modal-product-configuration .photo-upload-item {
    border: 1px solid #f0f0f0;
    cursor: pointer;
    background: #f0f0f0;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background-color .3s;
    padding: 1rem;
    margin-bottom: 2px;
    flex-wrap: wrap;
}

#modal-product-configuration img.photo-upload-item__image {
    max-width: 64px;
}

#modal-product-configuration svg.photo-upload-item__icon {
    padding: 0;
    height: 42px;
    width: 42px;
}

#modal-product-configuration button.sidebar-btn[data-action="add-text"] {
    background-image: url(https://cdn.myshoptet.com/usr/webotvurci.myshoptet.com/user/documents/product-generator/img/ico--text.svg);
    background-repeat: no-repeat;
}

#modal-product-configuration button.sidebar-btn[data-action="add-symbol"] {
    background-image: url(https://cdn.myshoptet.com/usr/webotvurci.myshoptet.com/user/documents/product-generator/img/ico-heart.svg);
    background-repeat: no-repeat;
}

#modal-product-configuration button.sidebar-btn[data-action="rotate-orientation"],
#modal-product-configuration button.sidebar-btn[data-action="rotate-object"] {
    background-image: url(https://cdn.myshoptet.com/usr/webotvurci.myshoptet.com/user/documents/product-generator/img/ico--rotation.svg);
    background-repeat: no-repeat;
}

#modal-product-configuration .photo-upload-item__preview {
    background: #f5f5f5;
    margin-right: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#modal-product-configuration span.photo-upload-item__filename {
    display: none;
}

#modal-product-configuration button.photo-upload-item__btn.photo-upload-item__btn--remove {
    font-size: 0;
    color: #fff;
    background-color: #c83535;
    border: 0;
    width: 32px;
    background-image: url(https://cdn.myshoptet.com/usr/webotvurci.myshoptet.com/user/documents/product-generator/img/ico--bin.svg);
    display: block;
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: center;
    transition: all .3s;
}

#modal-product-configuration button.photo-upload-item__btn.photo-upload-item__btn--change {
    font-size: 13px;
    background: #656565;
    color: #fff;
    background-image: url(https://cdn.myshoptet.com/usr/webotvurci.myshoptet.com/user/documents/product-generator/img/ico--edit.svg);
    display: block;
    background-size: contain;
    background-position: 5px;
    padding-left: 28px;
    background-size: 16px;
    background-repeat: no-repeat;
}

button.mobile-action-btn[data-action*="duplicate-photo"],
button.photo-upload-item__btn.photo-upload-item__btn--duplicate {
    background-image: url(https://cdn.myshoptet.com/usr/webotvurci.myshoptet.com/user/documents/product-generator/img/ico--copy.svg);
    background-repeat: no-repeat;
    font-size: 0;
    background-color: #656565;
    color: #ffff;
    display: block;
    background-size: contain;
    background-position: 5px;
    padding-left: 28px;
    background-size: 16px;
    background-repeat: no-repeat;
}

#modal-product-configuration button.photo-upload-item__btn.photo-upload-item__btn--duplicate svg {
    display: none;
}

#modal-product-configuration button.photo-upload-item__btn.photo-upload-item__btn--remove svg {
    display: none;
}

#modal-product-configuration button.photo-upload-item__btn.photo-upload-item__btn--remove:hover {
    background-color: #a02a2a;
}

#modal-product-configuration button.photo-upload-item__btn.photo-upload-item__btn--change svg {
    display: none;
}

button.photo-upload-item__btn.photo-upload-item__btn--remove {
    font-size: 0;
    color: #fff;
    background-color: #c83535;
    border: 0;
    width: 32px;
    background-image: url(https://cdn.myshoptet.com/usr/webotvurci.myshoptet.com/user/documents/product-generator/img/ico--bin.svg);
    display: block;
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: center;
    transition: all .3s;
}

button.photo-upload-item__btn.photo-upload-item__btn--change {
    font-size: 13px;
}

button.photo-upload-item__btn.photo-upload-item__btn--remove svg {
    display: none;
}

button.photo-upload-item__btn.photo-upload-item__btn--remove:hover {
    background-color: #a02a2a;
}

#modal-product-configuration .background-option.background-option--active {
    border: 2px solid #000;
}

#modal-product-configuration div#background-options,
#modal-product-configuration div#shape-options {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: .5rem;
}

#modal-product-configuration .photo-upload-item.photo-upload-item--active {
    border-color: #000;
    background: #dcdcdc;
}

#modal-product-configuration .photo-upload-item:hover {
    background: #dcdcdc;
}

.photo-upload-item.photo-upload-item--uploaded {}

#modal-product-configuration .photo-upload-item--warning {
    border-color: #ff0000;
    background: #fff5f5;
}

#modal-product-configuration .photo-upload-item__preview {
    position: relative;
}

#modal-product-configuration .photo-upload-item__warning-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #ff0000;
    color: #ffffff;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
}

#modal-product-configuration .photo-upload-item__warning-badge svg {
    width: 14px;
    height: 14px;
}

#modal-product-configuration .photo-upload-item__warning-text {
    color: #ff0000;
    font-size: 11px;
    font-weight: 600;
    display: block;
    margin-top: 2px;
}

#modal-product-configuration .background-option {
    cursor: pointer;
}

#modal-product-configuration .configurator-sidebar.configurator-sidebar--left {
    gap: 1rem;
    display: flex;
    flex-direction: column;
}

#submodal .c-wrapper--flex-column {
    margin: 1rem 0;
}

#submodal input[type=text] {
    border-color: #e0e0e0;
}

#submodal button#boldToggle,
#submodal button#italicToggle {
    border-color: #000;
    color: #000;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

#submodal .text-style-toggles {
    display: flex;
}

#submodal .wt-submodal-row {
    align-items: flex-start;
}

#submodal .c-wrapper--ai-editor select {
    margin-bottom: 0;
}

#submodal .submodal__body input[type="number"] {
    margin-bottom: 0;
}

#modal-product-configuration .photo-upload-item__actions button {
    min-width: 32px;
    min-height: 28px;
}

#modal-product-configuration .photo-upload-item__actions {
    display: flex;
}

#modal-product-configuration .c-flex--column {
    flex-direction: column;
}

#modal-product-configuration .c-flex--center {
    justify-content: center;
    align-items: center;
}

#modal-product-configuration .canvas-placeholder {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    min-height: 400px;
    background-color: #f5f5f5;
    border: 2px dashed #ddd;
    border-radius: 8px;
    max-width: 640px;
    margin: auto;
    cursor: pointer;
    transition: all .3s ease;
}

#modal-product-configuration .canvas-placeholder:hover {
    background-color: #ebebeb;
    border-color: #999;
}

#modal-product-configuration .canvas-placeholder:hover .placeholder-content {
    color: #666;
}

#modal-product-configuration .placeholder-content {
    text-align: center;
    color: #999;
}

#modal-product-configuration .placeholder-content p {
    margin-top: 16px;
    font-size: 16px;
    font-weight: 500;
}

button.shape-btn {
    border: 1px solid #000;
    border-radius: 2px;
    background: #fff;
    transition: all .35s;
}

.shape-selector {
    display: flex;
    flex-wrap: wrap;
    gap: .30rem;
}

button.shape-btn.shape-btn--active {
    background: #000;
    color: #fff;
}

button.shape-btn.shape-btn:hover {
    background: #000;
    color: #fff;
}

div#modal-product-configuration button.sidebar-btn[disabled] {
    opacity: .15;
}

div#modal-product-configuration button.sidebar-btn[data-action="undo"],
div#modal-product-configuration button.sidebar-btn[data-action="redo"] {
    padding: 5px 10px;
    text-align: center;
}

#modal-product-configuration .image-zoom-controls {
    left: 50% !important;
    transform: translateX(-50%);
}

#submodal button#boldToggle[data-active="true"],
#submodal button#italicToggle[data-active="true"] {
    background: #000;
    color: #fff;
}

body.modal-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
}

.messages {
    z-index: 9999;
}

.mobile-photo-box {
    border: 1px solid #dddddd;
    padding: 16px;
    background: #e6e6e6;
}

div#mobile-photo-grid {
    gap: 1rem;
    display: flex;
    flex-direction: column;
}

.configurator-mobile-header {
    position: sticky;
    width: 100%;
    display: flex;
    gap: 1rem;
    z-index: 9999;
    padding: 0 0 2rem;
    align-items: flex-end;
    justify-content: center;
}

.mobile-photo-box__actions {
    display: flex;
    font-size: 13px;
    gap: 2px;
}

button.mobile-action-btn {
    border-color: #3d3d3d;
    background-color: #626262;
    color: #fff;
    padding: 5px;
    width: auto;
    font-size: 13px;
    height: auto;
    padding: 30px 5px 5px;
    background-position: 50% 9px;
    background-size: 18px;
    background-repeat: no-repeat;
}

button.mobile-action-btn[data-action="remove-photo-mobile"] {
    color: #fff;
    background-color: #c83535;
    border: 0;
    background-image: url(https://cdn.myshoptet.com/usr/webotvurci.myshoptet.com/user/documents/product-generator/img/ico--bin.svg);
    display: block;
    transition: all .3s;
}

button.mobile-action-btn svg {
    display: none;
}

button.mobile-action-btn[data-action="add-symbol"] {
    background-image: url(https://cdn.myshoptet.com/usr/webotvurci.myshoptet.com/user/documents/product-generator/img/ico-heart.svg);
    background-repeat: no-repeat;
}

button.mobile-action-btn[data-action="add-text"] {
    background-image: url(https://cdn.myshoptet.com/usr/webotvurci.myshoptet.com/user/documents/product-generator/img/ico--text.svg);
    background-repeat: no-repeat;
}

button.mobile-action-btn[data-action="rotate-orientation"] {
    background-image: url(https://cdn.myshoptet.com/usr/webotvurci.myshoptet.com/user/documents/product-generator/img/ico--rotation.svg);
    background-repeat: no-repeat;
}

button.mobile-action-btn[data-action="change-photo-mobile"] {
    background-image: url(https://cdn.myshoptet.com/usr/webotvurci.myshoptet.com/user/documents/product-generator/img/ico--edit.svg);
    background-size: 14px;
}

button#mobile-add-photo-btn {
    background: #f0f0f0;
    margin-right: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0;
    border: 0;
}

button#mobile-add-photo-btn svg {
    padding: 0;
    height: 42px;
    width: 42px;
}

h4.mobile-photo-box__title {
    font-size: 20px;
    margin-bottom: 0;
}

.mobile-photo-count {
    text-align: center;
    font-size: 13px;
    padding-bottom: 2rem;
}

.cropper-photos-configurator--mobile,
.fotostrip-configurator--mobile {
    padding-bottom: 6rem;
}

.fotostrip-configurator--mobile .configurator-canvas-wrapper--mobile {
    margin: 2rem auto;
}

div#mobile-action-buttons {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 2px;
    justify-content: center;
}

.mobile-photo-box__actions {
    justify-content: center;
}

.configurator-canvas-wrapper--mobile {
    position: relative;
}

.canvas-container {
    position: relative;
}

button.mobile-action-btn[data-action="upload-photo-mobile"] {
    background-image: url(https://cdn.myshoptet.com/usr/webotvurci.myshoptet.com/user/documents/product-generator/img/ico--photo.svg);
    background-repeat: no-repeat;
}

.backgrounds-grid {
    max-width: 100%;
    grid-template-columns: repeat(3, 1fr);
    padding-left: 0;
}

.backgrounds-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    padding: 20px;
    max-height: 60vh;
    overflow-y: auto;
}

.background-option {
    cursor: pointer;
    border: 3px solid #e0e0e0;
    border-radius: 8px;
    padding: 10px;
    transition: all .2s ease;
    background: #ffffff;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.background-option:hover {
    border-color: #3498db;
    background: #f8f9fa;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(52, 152, 219, .2);
}

.background-option:active {
    transform: scale(.98);
}

.background-option--active {
    border-color: #2ecc71;
    background: #e8f8f5;
    box-shadow: 0 0 0 3px rgba(46, 204, 113, .2);
}

.background-option--active::after {
    content: '✓';
    position: absolute;
    top: 5px;
    right: 5px;
    background: #2ecc71;
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
}

.background-option__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 4px;
}

.background-option__placeholder {
    font-size: 32px;
    font-weight: bold;
    color: #95a5a6;
}

.shapes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    padding: 20px;
    max-height: 60vh;
    overflow-y: auto;
}

.shape-option {
    cursor: pointer;
    border: 3px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    transition: all .2s ease;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
    position: relative;
}

.shape-option:hover {
    border-color: #3498db;
    background: #f8f9fa;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(52, 152, 219, .2);
}

.shape-option:active {
    transform: scale(.98);
}

.shape-option--active {
    border-color: #2ecc71;
    background: #e8f8f5;
    box-shadow: 0 0 0 3px rgba(46, 204, 113, .2);
}

.shape-option--active::after {
    content: '✓';
    position: absolute;
    top: 5px;
    right: 5px;
    background: #2ecc71;
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
}

.shape-option__label {
    font-size: 16px;
    font-weight: 500;
    color: #2c3e50;
    text-align: center;
}

.symbols-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 15px;
    padding: 20px;
    max-height: 60vh;
    overflow-y: auto;
}

.symbol-item {
    cursor: pointer;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    padding: 15px;
    transition: all .2s ease;
    background: #ffffff;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.symbol-item:hover {
    border-color: #3498db;
    background: #f8f9fa;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(52, 152, 219, .2);
}

.symbol-item:active {
    transform: scale(.98);
}

.symbol-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.c-wrapper--flex-column {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.wt-submodal-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.text-style-toggles {
    display: flex;
    gap: 5px;
}

.style-toggle {
    width: 40px;
    height: 40px;
    border: 2px solid #e0e0e0;
    background: #ffffff;
    cursor: pointer;
    font-weight: bold;
    font-size: 16px;
    border-radius: 4px;
    transition: all .2s ease;
}

.style-toggle:hover {
    border-color: #3498db;
    background: #f8f9fa;
}

.style-toggle[data-active="true"] {
    border-color: #3498db;
    background: #3498db;
    color: #ffffff;
}

.submodal__body .form-control,
#modal-product-configuration .form-control {
    padding: 10px;
    border: 2px solid #e0e0e0;
    border-radius: 4px;
    font-size: 14px;
    transition: border-color .2s ease;
    flex: 1;
}

.submodal__body .form-control:focus,
#modal-product-configuration .form-control {
    outline: none;
    border-color: #3498db;
}

.submodal__body input[type="color"] {
    width: 60px;
    height: 40px;
    border: 2px solid #e0e0e0;
    border-radius: 4px;
    cursor: pointer;
    padding: 2px;
}

.submodal__body input[type="number"] {
    max-width: 100px;
}

.submodal__body .btn {
    padding: 12px 24px;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all .2s ease;
}

.submodal__body .btn--primary {
    background: #3498db;
    color: #ffffff;
}

.submodal__body .btn--primary:hover {
    background: #2980b9;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(52, 152, 219, .3);
}

.submodal__body .btn--primary:active {
    transform: translateY(0);
}

.submodal__body h2 {
    margin: 0 0 20px 0;
    font-size: 24px;
    font-weight: 600;
    color: #2c3e50;
}

.submodal__body h3 {
    margin: 15px 0 10px 0;
    font-size: 16px;
    font-weight: 500;
    color: #34495e;
}

#modal-product-configuration span#cart-price-display {
    display: inline-block;
}

#modal-product-configuration button#add-to-cart-btn {
    line-height: 1.7;
    padding: 1rem;
}

.photo-upload-item--uploaded .photo-upload-item__info {
    line-height: 1.4;
}

div#modal-product-configuration button.sidebar-btn:hover {
    background-color: #000;
    color: #fff;
    transition: all .35s ease;
}

#modal-product-configuration .sidebar-section h3 {
    color: #000;
    margin-top: 0;
    margin-bottom: 1rem;
}

div#modal-product-configuration .sidebar-section span {
    color: #000;
}

div#modal-product-configuration .sidebar-section.sidebar-section--cart p {
    color: #999;
    margin-top: 0;
    font-size: 15px;
    margin-bottom: 1rem;
}

.layer-empty {
    color: #999;
}

h2.modal-title {
    color: #000;
    visibility: hidden;
}

.configurator-canvas-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
}



#submodal .style-toggle.active {
    border-color: rgba(197, 9, 103, 1) !important;
}

#modal-product-configuration .advanced-parameter {
    width: 43px;
    height: 43px;
    margin: 0 5px 5px 0;
}

#submodal .wt-submodal-row {
    align-items: center;
}

.c-progress-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2147483010;
}

.c-progress-modal__content {
    background: #fff;
    border-radius: 12px;
    padding: 40px 50px;
    text-align: center;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .3);
}

.c-progress-modal__spinner {
    margin-bottom: 20px;
}

.c-progress-modal__spinner .loading-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid #f0f0f0;
    border-top-color: #c50967;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto;
}

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

.c-progress-modal__text {
    font-size: 16px;
    color: #333;
    margin-bottom: 20px;
    font-weight: 500;
}

.c-progress-modal__bar {
    height: 8px;
    background: #f0f0f0;
    border-radius: 4px;
    overflow: hidden;
}

.c-progress-modal__bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #c50967, #ff6b9d);
    border-radius: 4px;
    transition: width .3s ease;
}

#modal-product-configuration .advanced-parameter-inner {
    cursor: pointer;
}

@media (max-width: 768px) {
    .c-progress-modal__content {
        padding: 30px 25px
    }

    .c-progress-modal__spinner .loading-spinner {
        width: 40px;
        height: 40px
    }

    .c-progress-modal__text {
        font-size: 14px
    }
}

@media (max-width: 1024px) {
    .symbols-grid {
        grid-template-columns: repeat(4, 1fr)
    }

    .backgrounds-grid {
        grid-template-columns: repeat(3, 1fr)
    }

    .shapes-grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (max-width: 768px) {
    .symbols-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        padding: 15px
    }

    .symbol-item {
        padding: 10px
    }

    .backgrounds-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        padding: 15px
    }

    .shapes-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        padding: 15px
    }
}

@media (max-width: 1600px) {
    div#modal-product-configuration .modal-content {
        padding: 1rem
    }

    #modal-product-configuration .photo-upload-item--uploaded .photo-upload-item__preview {
        margin-bottom: 1rem
    }

    .photo-upload-item--uploaded .photo-upload-item__info {
        margin-bottom: 1rem
    }

    div#modal-product-configuration .configurator-layout {
        grid-template-columns: 1.5fr 3.5fr 2fr
    }

    #modal-product-configuration .c-flex {
        flex-direction: column
    }

    div#modal-product-configuration .month-btn__preview {
        max-height: 46px
    }

    div#modal-product-configuration button.month-btn {
        gap: .25rem
    }
}

@media (max-width: 1280px) {
    div#modal-product-configuration button.sidebar-btn {
        padding: 16px 16px 16px 36px;
        background-size: 16px;
        background-position: 8px;
        font-size: 14px
    }

    div#modal-product-configuration .sidebar-section {
        padding: 2rem 1.5rem
    }

    #modal-product-configuration h3 {
        font-size: 1.25rem
    }

    button#add-to-cart-btn {
        font-size: 13px;
        padding: 0 22px;
        width: 100%;
        line-height: 1.8;
        padding: 11px 22px
    }

    span.photo-upload-item__label {
        font-size: 14px
    }
}

@media (max-width: 1024px) {
    #modal-product-configuration h3 {
        margin-top: 0
    }

    .sidebar-section.sidebar-section--history div {
        flex-wrap: wrap;
        display: flex;
        flex-direction: column
    }
}

@media (max-width: 767px) {

    button.mobile-action-btn[data-action*="duplicate-photo"],
    button.photo-upload-item__btn.photo-upload-item__btn--duplicate {
        font-size: 13px;
        background-position: 50% 9px;
        background-size: 18px;
        padding: 30px 5px 5px
    }

    #modal-product-configuration h2.modal-title {
        font-size: 26px
    }

    .image-zoom-controls button {
        touch-action: manipulation
    }

    .image-zoom-controls {
        touch-action: manipulation
    }

    .fotostrip-configurator {
        display: flex;
        flex-wrap: wrap
    }

    div#modal-product-configuration button.month-btn {
        gap: .5rem;
        font-size: 13px
    }

    div#modal-product-configuration .configurator-layout {
        display: flex;
        flex-wrap: wrap
    }

    .configurator-sidebar.configurator-sidebar--left {
        order: 3
    }

    .configurator-canvas-wrapper {
        order: 2
    }

    #modal-product-configuration div#background-options,
    #modal-product-configuration div#shape-options {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr
    }

    .canvas-container {
        padding: 30px 0
    }

    .configurator-sidebar.configurator-sidebar--right {
        order: 0;
        width: 100%;
        margin-top: 1rem
    }

    div#modal-product-configuration button.sidebar-btn {
        width: auto;
        font-size: 14px;
        height: auto;
        padding: 30px 10px 5px 10px;
        background-position: 50% 5px;
        background-size: 18px
    }

    div#modal-product-configuration button.sidebar-btn[data-action="undo"],
    div#modal-product-configuration button.sidebar-btn[data-action="redo"] {
        font-size: 16px
    }

    #modal-product-configuration .configurator-sidebar.configurator-sidebar--left {
        width: 100%
    }

    .configurator-canvas-wrapper {
        margin: 1rem auto
    }

    #modal-product-configuration .c-flex {
        flex-wrap: wrap;
        justify-content: center
    }

    div#submodal {
        width: 95%;
        min-width: auto
    }

    div#modal-product-configuration .sidebar-section {
        background: transparent;
        box-shadow: none;
        padding: 0
    }

    .sidebar-section.sidebar-section--history {
        display: none
    }

    #modal-product-configuration .sidebar-section.sidebar-section--cart .c-flex {
        display: flex;
        flex-direction: row
    }

    #modal-product-configuration .sidebar-section--cart button#add-to-cart-btn {
        flex-basis: 50%
    }

    .sidebar-section.sidebar-section--editing-options h3 {
        display: none
    }

    div#modal-product-configuration .sidebar-section.sidebar-section--editing-options {
        padding-top: 1rem;
        display: flex;
        justify-content: center;
        gap: 2px;
        font-size: 13px;
        gap: 2px
    }

    #modal-product-configuration .quantity-selector {
        background: #ffffff
    }

    .configurator-canvas-area {
        width: 100%
    }

    #modal-product-configuration .canvas-placeholder {
        max-width: 100%
    }

    #modal-product-configuration .canvas-placeholder {
        max-width: 100%;
        min-height: 300px;
        margin: 0 auto;
        width: 100%
    }

    .configurator-canvas-wrapper {
        width: 100%
    }
}

@media (max-width: 575px) {
    span#mobile-price-display {
        color: #000
    }

    #modal-product-configuration .variant-wrapper-mobile {
        padding: 0 2rem
    }

    #modal-product-configuration .mobile-color-picker {
        display: flex;
        padding: 0 5px
    }

    #modal-product-configuration .mobile-color-picker .advanced-parameter-inner,
    #modal-product-configuration .mobile-color-picker .advanced-parameter {
        width: 43px;
        height: 43px
    }

    #modal-product-configuration button.mobile-color-more {
        border: 0;
        background: transparent;
        font-weight: bold
    }

    button.mobile-action-btn[data-action="ai-generator"] {
        background-image: url("https://cdn.myshoptet.com/usr/webotvurci.myshoptet.com/user/documents/product-generator/img/ico--ai.svg");
        background-repeat: no-repeat
    }

    button.mobile-action-btn[data-action="add-image"] {
        background-image: url("https://cdn.myshoptet.com/usr/webotvurci.myshoptet.com/user/documents/product-generator/img/ico--photo.svg");
        background-repeat: no-repeat
    }

    button.mobile-action-btn[data-action="ai-editor"] {
        background-image: url("https://cdn.myshoptet.com/usr/webotvurci.myshoptet.com/user/documents/product-generator/img/ico--ai-app.png");
        background-repeat: no-repeat
    }

    button.mobile-action-btn[data-action="background-color"] {
        background-image: url(https://cdn.myshoptet.com/usr/webotvurci.myshoptet.com/user/documents/product-generator/img/fill-bg-icon.svg);
        background-repeat: no-repeat
    }



    button.mobile-action-btn {
        font-size: 0;
        width: 64px;
        height: 64px;
        background-size: 38px;
        background-position: center;
        flex-basis: 64px
    }

    .configurator-mobile-actions {
        display: flex;
        padding: 0 2rem;
        flex-wrap: wrap;
        gap: 1rem;
        justify-content: center
    }

    #modal-product-configuration .footer-controls-wrapper .footer-controls-inner-wrapper {
        background: #f4f4f4;
        box-shadow: none;
        padding: 1rem 2rem
    }

    #modal-product-configuration .footer-controls-wrapper .footer-controls .custom-radio__image {
        width: 64px;
        height: 64px;
        object-fit: contain;
        mix-blend-mode: darken
    }

    #modal-product-configuration .footer-controls-wrapper .footer-controls>label {
        background: #fff
    }

    #modal-product-configuration .footer-controls-wrapper {
        margin: 0
    }

    #submodal .backgrounds-grid {
        padding-left: 0;
        padding-right: 10px;
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        overflow-x: hidden;
        overflow-y: scroll
    }

    #submodal .background-option {
        flex-basis: calc(100% / 3 - 10px)
    }

    #modal-product-configuration button.mobile-action-btn {
        flex-basis: 64px
    }

    #modal-product-configuration .mobile-photo-box__actions {
        flex-wrap: wrap
    }

    .background-option {
        padding: 0
    }

    .backgrounds-grid,
    .shapes-grid {
        grid-template-columns: repeat(3, 1fr)
    }

    #modal-product-configuration .sidebar-section--cart button#add-to-cart-btn {
        flex-basis: 60%
    }

    div#modal-product-configuration button.sidebar-btn {
        border-color: #3d3d3d;
        background-color: #626262;
        color: #fff;
        padding: 5px;
        width: auto;
        font-size: 13px;
        height: auto;
        padding: 30px 5px 5px;
        background-position: 50% 9px;
        background-size: 18px;
        background-repeat: no-repeat
    }

    .configurator-sidebar.configurator-sidebar--left {
        padding-bottom: 7rem
    }

    div#submodal {
        padding: 2rem 1.5rem
    }

    .backgrounds-grid {
        padding-left: 0
    }

    div#submodal .symbols-grid {
        padding-left: 0;
        padding-right: 10px;
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        overflow-x: hidden;
        overflow-y: scroll
    }

    div#submodal .symbols-grid .symbol-item {
        flex-basis: calc(100% / 3 - 10px)
    }

    .c-wrapper--flex-column.c-wrapper--ai-editor {
        max-width: 100%
    }

    #modal-product-configuration span#cart-price-display {
        display: inline-block
    }

    #modal-product-configuration button#add-to-cart-btn {
        line-height: 1.74;
        padding: 10px;
        width: 100%
    }

    .canvas-container {
        min-height: unset
    }

    #modal-product-configuration .modal-body {
        padding: 1rem 0 3rem
    }

    button#showLayerManager {
        font-size: 14px;
        line-height: 1.4;
        text-transform: none;
        flex-basis: 160px;
        padding: 10px 12px 10px 34px
    }

    #modal-product-configuration button#add-to-cart-btn {
        flex-basis: calc(100% - 160px);
        color: #fff;
        font-weight: 700;
        background-position: 10px;
        padding: 10px 12px 10px 44px;
        text-transform: none;
        font-size: 14px;
        line-height: 1.4
    }

    #modal-product-configuration h2.modal-title {
        font-size: 14px
    }
}

.footer-controls-wrapper {
    width: 100%;
}




/*sss*/
.cmyk-picker-container {
    padding: 20px;
    background: #f5f5f5;
    border-radius: 8px;
    margin: 20px 0
}

.cmyk-picker-title {
    font-size: 18px;
    font-weight: 700;
    color: #343434;
    margin-bottom: 20px;
    text-align: center
}

.cmyk-presets {
    display: flex;
    gap: 10px;
    margin-bottom: 25px;
    padding: 15px 0;
    background: rgba(255, 255, 255, .7);
    border-radius: 8px;
    flex-direction: row;
    flex-wrap: wrap
}

.cmyk-preset {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #d1d1d1;
    cursor: pointer;
    transition: all .2s ease;
    position: relative
}

.cmyk-preset:hover {
    border-color: #c50967;
    transform: scale(1.1);
    box-shadow: 0 0 10px rgba(0, 0, 0, .3)
}

.cmyk-preset.selected {
    border-color: #c50967;
    border-width: 3px;
    box-shadow: 0 0 0 2px rgba(197, 9, 103, .3)
}

.cmyk-controls {
    background: rgba(255, 255, 255, .8);
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px
}

.cmyk-sliders {
    display: flex;
    flex-wrap: wrap
}

.cmyk-slider-group {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    flex-direction: column;
    width: calc(25% - 7.5px);
    flex-basis: 25%;
    padding: 8px 4px
}

.cmyk-slider-group:last-child {
    margin-bottom: 0
}

.cmyk-label {
    font-weight: 600;
    color: #343434;
    min-width: 20px;
    font-size: 14px
}

.cmyk-slider {
    flex: 1;
    height: 8px;
    border-radius: 4px;
    outline: none;
    background: linear-gradient(to right, #ddd, #666);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer
}

.cmyk-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #c50967;
    border: 2px solid #fff;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
    -webkit-transition: all .2s ease;
    transition: all .2s ease
}

.cmyk-slider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, .3)
}

.cmyk-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #c50967;
    border: 2px solid #fff;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
    -moz-transition: all .2s ease;
    transition: all .2s ease
}

.cmyk-number-input {
    width: 60px;
    padding: 6px 8px;
    border: 2px solid #d1d1d1;
    border-radius: 4px;
    text-align: center;
    font-size: 13px;
    color: #343434;
    background: #fff;
    transition: border-color .2s ease
}

.cmyk-number-input:focus {
    outline: none;
    border-color: #c50967;
    box-shadow: 0 0 0 2px rgba(197, 9, 103, .2)
}

.cmyk-quick-input-group {
    background: rgba(255, 255, 255, .8);
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px
}

.cmyk-quick-label {
    display: block;
    font-weight: 600;
    color: #343434;
    margin-bottom: 8px;
    font-size: 14px
}

.cmyk-quick-input {
    width: 100%;
    padding: 10px;
    border: 1px solid #a4a4a4;
    border-radius: 6px;
    font-size: 14px;
    color: #343434;
    background: #fff;
    transition: border-color .2s ease
}

.cmyk-quick-input:focus {
    outline: none;
    border-color: #c50967;
    box-shadow: 0 0 0 2px rgba(197, 9, 103, .2)
}

.cmyk-quick-input::-moz-placeholder {
    color: #a3a3a3;
    font-style: italic
}

.cmyk-quick-input:-ms-input-placeholder {
    color: #a3a3a3;
    font-style: italic
}

.cmyk-quick-input::placeholder {
    color: #a3a3a3;
    font-style: italic
}

.cmyk-quick-input button {
    margin-left: 0
}

.cmyk-preview-container {
    background: rgba(255, 255, 255, .8);
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    text-align: center
}

.cmyk-color-preview {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid #d1d1d1;
    margin: 0 auto 15px;
    display: block;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .1);
    transition: all .2s ease
}

.cmyk-color-preview:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(0, 0, 0, .15)
}

.cmyk-values-display {
    font-size: 12px;
    color: #3d3d3d;
    font-family: monospace;
    background: #f0f0f0;
    padding: 8px;
    border-radius: 4px;
    display: inline-block
}

.cmyk-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 20px
}

.cmyk-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s ease;
    min-width: 100px
}

.cmyk-btn-primary {
    background: #c50967;
    color: #fff
}

.cmyk-btn-primary:hover {
    background: #94074e;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, .2)
}

.cmyk-btn-secondary {
    background: #acacac;
    color: #fff
}

.cmyk-btn-secondary:hover {
    background: #939393;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, .2)
}

.cmyk-control-row {
    width: 100%
}

.cmyk-control-row>* {
    width: 100%
}

.color-preset {
    height: 32px;
    display: block;
    width: 100%;
    flex-basis: 14.2857142857%;
    border: 1px solid;
    cursor: pointer
}

#submodal button#applyCmykQuick {
    margin-left: 0
}

#submodal input#cmykQuickInput {
    width: 100%;
    max-width: 100%;
    margin-bottom: 1rem
}

.c-wrapper--flex-column {
    width: 100%
}

div#cmykDisplay {
    text-align: center;
    font-size: 14px;
    font-weight: 700
}

@media (max-width: 768px) {
    .cmyk-picker-container {
        padding: 15px;
        margin: 15px 0
    }

    .cmyk-presets {
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
        padding: 12px
    }

    .cmyk-preset {
        width: 35px;
        height: 35px
    }

    .cmyk-slider-group {
        flex-direction: column;
        align-items: stretch;
        gap: 8px
    }

    .cmyk-label {
        min-width: auto;
        margin-bottom: 5px
    }

    .cmyk-number-input {
        width: 80px;
        align-self: center
    }

    .cmyk-color-preview {
        width: 60px;
        height: 60px
    }

    .cmyk-actions {
        flex-direction: column;
        align-items: stretch
    }

    .cmyk-btn {
        min-width: auto
    }
}

@media (max-width: 480px) {
    .cmyk-presets {
        grid-template-columns: repeat(3, 1fr)
    }

    .cmyk-preset {
        width: 30px;
        height: 30px
    }

    .cmyk-picker-title {
        font-size: 16px
    }

    .cmyk-color-preview {
        width: 50px;
        height: 50px
    }
}



#modal-product-configuration button.sidebar-btn[data-action="background-color"] {
    background-image: url("https://cdn.myshoptet.com/usr/webotvurci.myshoptet.com/user/documents/product-generator/img/fill-bg-icon.svg");
    background-repeat: no-repeat;
    background-size: 32px;
    background-position: 1.55rem
}

#variant-controls .hidden-split-parameter {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 5px
}

#variant-controls .advanced-parameter .advanced-parameter-inner.yes-before::before {
    display: none;
}

#variant-modal-content .advanced-parameter .advanced-parameter-inner.yes-before::before {
    display: none;
}

#modal-product-configuration .mobile-color-picker {
    padding-left: 2rem;
    padding-bottom: 1rem;
}

#variant-modal-content .advanced-parameter .advanced-parameter-inner {
    border-radius: 0;
}

@media (max-width: 1800px) {
    .drexiss-configurator .canvas-container {
        width: 100% !important;
    }

    .configurator-canvas-wrapper__inner {
        width: 100%;
    }

    .drexiss-configurator .canvas-container>canvas {

        margin-left: auto !important;
        margin-right: auto !important;
        left: 50% !important;
        transform: translateX(-50%);
    }
}