:root {
    --sw-shop-primary-color: #004998;
    --sw-shop-primary-transparent-color: rgba(220, 0, 46, .1);
    --sw-shop-light-color: #fff;
    --sw-shop-dark-color: #222;
    --sw-shop-product-item-bottom-background-color: #f1f1f1;
    --sw-shop-product-item-border-color: #dadada;
    --sw-shop-product-item-background-color: var(--sw-shop-light-color);
    --sw-shop-product-category-background-color: var(--sw-shop-primary-color);
    --sw-shop-product-category-color: var(--sw-shop-light-color);
    --sw-shop-product-item-title-color: var(--sw-shop-primary-color);
    --sw-shop-product-item-link-color: var(--sw-shop-dark-color);
    --sw-shop-border-radius: 25px;
    --sw-shop-success-color: #4caf50;
    --sw-shop-error-color: #f44336;
    --sw-shop-container-padding: 2rem;
}

[v-cloak] {
    display: none;
}


.sitewalk-shop-container .status-bubble {
    display: inline-block;
    width: 0.8rem;
    height: 0.8rem;
    margin-right: 0.4rem;
    background-color: #ccc;
    border-radius: 50%;
}

.sitewalk-shop-container .status-bubble--success {
    background-color: var(--sw-shop-success-color);
}

.sitewalk-shop-container .status-bubble--error {
    background-color: var(--sw-shop-error-color);
}

.sitewalk-shop-container .callout {
    margin: 0 0 4rem 0;
    color: var(--sw-shop-light-color) !important;
    border: none;
    border-radius: var(--sw-shop-border-radius);
    padding-right: 4em;
}

.sitewalk-shop-container .callout.alert {
    background-color: var(--sw-shop-error-color);
}

.sitewalk-shop-container .callout.success {
    background-color: var(--sw-shop-success-color);
}

.sitewalk-shop-container .callout.success a{
    color: inherit;
    text-decoration: underline;
}

.sitewalk-shop-container .callout .close-button {
    top: 1rem;
    color: var(--sw-shop-light-color);
}


.sitewalk-shop__shadow-item {
    background-color: var(--sw-shop-light-color);
    box-shadow: 5px 5px 10px -5px rgba(0, 0, 0, .2);
    border: 1px solid var(--sw-shop-product-item-border-color);
}

.sitewalk-shop__title-big {
    padding: 2rem;
    margin-bottom: 1.4rem;
}

.sitewalk-shop__title-big h1,
.sitewalk-shop__title-big h2,
.sitewalk-shop__title-big h3,
.sitewalk-shop__title-big h4 {
    margin: 0;
}


.product-variation-group.only-active > div {
    display: inline;
}


.price {
    color: var(--sw-shop-dark-color);
}

.sale-price + .price {
    text-decoration: line-through;
    font-weight: 400;
    margin-left: 1rem;
    color: red;
    font-size: 0.7em;
}


.sitewalk-shop-container .sitewalk-shop-btn {
    border: 2px solid var(--sw-shop-dark-color);
    color: var(--sw-shop-dark-color) !important;
    font-weight: bold !important;
    padding: 10px 15px;
    display: inline-block;
    margin-bottom: 1.4rem;
    text-align: center;
    cursor: pointer;
    border-radius: var(--sw-shop-border-radius);
    font-family: inherit;
}

.sitewalk-shop-btn:last-of-type {
    margin-bottom: 0;
}


.sitewalk-shop-btn:hover,
.sitewalk-shop-btn:focus {
    transition: all 100ms ease;
    background-color: var(--sw-shop-primary-color);
    color: var(--sw-shop-light-color) !important;
    border-color: var(--sw-shop-primary-color);
}

.sitewalk-shop-btn.primary {
    background-color: var(--sw-shop-primary-color);
    color: var(--sw-shop-light-color) !important;
    border-color: var(--sw-shop-primary-color);
}

.sitewalk-shop-btn.primary:hover,
.sitewalk-shop-btn.primary:focus {
    background-color: var(--sw-shop-dark-color) !important;
    color: var(--sw-shop-light-color) !important;
    border-color: var(--sw-shop-dark-color) !important;
}


.sitewalk-shop__widget {
    padding: var(--sw-shop-container-padding);
    margin-bottom: 1.4rem;
}


.sitewalk-shop-btn--full {
    width: 100%;
}

.sitewalk-shop-container .el-button:focus,
.sitewalk-shop-container .el-button:hover {
    color: var(--sw-shop-primary-color);
    border-color: var(--sw-shop-primary-color);
    background-color: var(--sw-shop-primary-transparent-color);
}

.sitewalk-shop-container .el-button {
    border-radius: 25px;
    padding: 3px 30px;
    display: inline-block;
    text-decoration: none !important;
    white-space: nowrap;
    background-color: #004998;
    color: #fff;
    margin-top: 20px;

    &:hover {
        background-color: var(--sw-shop-primary-color);
        color: #fff;
    }
}

.el-notification__content{
    text-align: left!important;
}

.product-variation-form .form-group {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.product-variation-form .form-group .control-label {
    color: var(--sw-shop-dark-color);
    font-weight: bold;
    min-width: 132px;
    line-height: normal;
    flex: none;
}

.product-variation-form .form-group .form-control {
    border: 2px solid var(--sw-shop-dark-color);
    width: auto;
    min-width: 150px;
}

.sitewalk-shop-product-detail .product-variation-form {
    max-width: 298px;
}

.sitewalk-shop-container input[type="number"]::-webkit-inner-spin-button,
.sitewalk-shop-container input[type="number"]::-webkit-outer-spin-button {
    opacity: 1;
}

.el-message-box__wrapper{
    padding: 1rem!important;
}

.el-message-box{
    max-width: 420px!important;
    width: 100% !important;
}


@media screen and (max-width: 680px) {
    .product-variation-form .form-group .form-control {
        width: 100%;
        min-width: unset;
    }

    .sitewalk-shop-container .el-form-item__label{
        width:100%!important;
    }

    .sitewalk-shop-container .el-form-item__content{
        margin-left: 0!important;
    }

}