.wccp-step-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    margin: 0 0 8px;
    border-radius: 10px;
}

.wccp-step-nav__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 16px;
    line-height: 1;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #ff7a00;
    padding: 6px 8px;
    border-radius: 8px;
}

.wccp-step-nav__btn:hover {
    background: rgba(255, 122, 0, .08);
}

.wccp-step-nav__btn:disabled {
    color: #c8c8c8;
    cursor: not-allowed;
    background: transparent;
}

.wccp-step-nav__icon {
    width: 18px;
    font-size: 18px;
    line-height: 1;
}

.wccp-step-nav__spacer {
    flex: 1;
}
.wccp-variation-select{
    width: 100%;
    max-width: 100%;
}

.wccp-constructor-preloader{
    width: 50px;
    height: 50px;
    background:url("../images/loader.svg");
    background-size: contain;
}

.wccp-atc-btn{
    width: 100%;
    margin-top: 30px;
    background: #ff7a00 !important;
    font-size: 15px !important;
    border: none !important;
    font-weight: bold !important;
}

.component_option_thumbnail_container .image.thumbnail_image {
    display: flex;
    justify-content: center;
    height: 100%;
}

.component_option_thumbnail_container .image.thumbnail_image img {
    width: 100%;
    height: 100%;
}


.component_option_thumbnail_container .thumbnail_description {
    margin-top: 25px;
}

.component_option_thumbnail_container .thumbnail_description {
    font-weight: 600;
    text-align: center;
}

/***** LABELS *****/

.wccp-labels-wrap {
    position: absolute;
    top: -25px;
    left: -6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
    z-index: 5;
}

.wccp-label {
    font-size: 12px;
    font-weight: 600;
    border-radius: 4px;
    padding: 3px 8px;
    line-height: 1.4;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    white-space: nowrap;
}

.component_option_thumbnail {
    position: relative;
    overflow: hidden;
}

/*** Progress Bar ***/
:root {
    --bg: #f6f7f9;
    --panel: #fff;
    --txt: #1f2937;
    --muted: #7c7f86;
    --line: #e7e7e9;
    --brand: #f47820;
    --edit-bg: #f5f6f8;
    --edit-bdr: #dfe2e7;
    --progress: 0.0;
}

.wccp__progress-bar {
    width: 100%;
}


.summary {
    position: sticky;
    top: 16px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .03)
}

.summary__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 12px
}

.summary__title {
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .3px;
    text-transform: uppercase
}

.summary__reset {
    font-size: 12px;
    color: var(--brand);
    text-decoration: none
}

.summary__reset:hover {
    text-decoration: underline
}

.summary__bar {
    height: 2px;
    background: linear-gradient(90deg, var(--brand), #ff7a73);
    opacity: .9
}

.summary__progress {
    height: 4px;
    background: #f0f2f5;
    position: relative;
    display: none
}

.summary[data-progress] .summary__progress {
    display: block
}

.summary__progress::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: calc(var(--progress) * 100%);
    background: var(--brand)
}

.summary__list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 400px;
    overflow-y: auto;
}

.summary__item {
    display: grid;
    grid-template-columns:1fr auto;
    gap: 10px;
    align-items: center;
    padding: 12px;
    border-top: 1px solid var(--line)
}

.summary__item:first-child {
    border-top: 1px solid var(--line)
}

.summary__meta {
    display: flex;
    flex-direction: column;
    gap: 2px
}

.summary__label {
    font-size: 11px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .35px
}

.summary__value {
    font-weight: 600;
    font-size: 14px;
    color: #2b2f36
}

.summary__edit {
    font-size: 11px;
    letter-spacing: .3px;
    text-transform: uppercase;
    padding: 6px 10px;
    border-radius: 20px;
    border: 1px solid var(--edit-bdr);
    background: var(--edit-bg);
    cursor: pointer;
    color: #444
}

.summary__edit:hover {
    filter: brightness(.98)
}

@media (max-width: 980px) {
    .page {
        grid-template-columns:1fr
    }

    .summary {
        position: static
    }
}

.summary__bar {
    position: relative;
    height: 6px;
    background: #eee;
    border-radius: 6px;
    overflow: hidden
}

.summary__progress {
    position: absolute;
    left: 0;
    top: 49px;
    bottom: 0;
    width: 0%;
    height: 6px;
    background: #0a7cff;
    border-radius: 6px;
    transition: width .25s ease;
    display: block;
}

.summary__item.is-complete .summary__label {
    opacity: .85
}

.summary__item .summary__value {
    font-weight: 600
}

.ct-code-block:has(> .summary) {
  width: 100%;
  flex: 0 0 100%;
}

.summary__reset.is-disabled {
    opacity: 0.4;
    pointer-events: none;
    cursor: not-allowed;
}

ul.component_option_thumbnails_container .component_option_thumbnail_container {
    padding: 40px 5px 5px !important;
    overflow: visible;
}

.component_option_thumbnail{
    overflow: visible !important;
}
.component_option_thumbnails_container .component_option_thumbnail_container:has(.component_option_thumbnail.selected)::before,
.component_option_thumbnail_container.selected::before {
    top: 13px !important;
    right: 17px !important;
}


/**/
.component_option_thumbnails_container {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 20px !important;
}

.component_option_thumbnails_container.columns-2 .component_option_thumbnail_container {
    flex: 0 0 calc(50% - 20px);
    max-width: calc(50% - 20px);
}


.component_option_thumbnails_container.columns-3 .component_option_thumbnail_container {
    flex: 0 0 calc(33.333% - 20px);
    max-width: calc(33.333% - 20px);
}

.component_option_thumbnails_container.columns-4 .component_option_thumbnail_container {
    flex: 0 0 calc(25% - 20px);
    max-width: calc(25% - 20px);
}

@media (max-width: 1200px) {
    .component_option_thumbnails_container.columns-4
    .component_option_thumbnail_container {
        flex: 0 0 calc(33.333% - 20px);
        max-width: calc(33.333% - 20px);
    }
}

@media (max-width: 768px) {
    .component_option_thumbnails_container.columns-3
    .component_option_thumbnail_container,
    .component_option_thumbnails_container.columns-4
    .component_option_thumbnail_container {
        flex: 0 0 calc(50% - 20px);
        max-width: calc(50% - 20px);
    }
}

@media (max-width: 480px) {
    .component_option_thumbnails_container
    .component_option_thumbnail_container {
        flex-basis: 100% !important;
        max-width: 100% !important;
    }
}

.accessories-step {
    .component_option_thumbnail.accessory-option {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .component_option_thumbnail_container {
        .image.thumbnail_image {
            height: auto;
        }

        .thumbnail_description {
            display: flex;
            flex-direction: column;
            flex-grow: 1;
            row-gap: 10px;
        }
    }

    .accessory-group-title {
        font-size: 16px;
        padding: 0 10px;
        margin: 20px 0 10px;
    }

    .accessory-qty-controls {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        margin-top: auto;
        cursor: default;

        .qty-display {
            min-width: 50px;
            height: 30px;
            text-align: center;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
            padding: 2px;
            user-select: none;
            cursor: default;
        }

        .qty-btn {
            display: flex !important;
            align-items: center;
            justify-content: center;
            width: 30px;
            height: 30px;
            border: 1px solid #ccc;
            border-radius: 4px;
            background-color: #fff;
            font-size: 20px;
            transition: all 0.2s;
            line-height: 1;
            padding: 0;
            cursor: pointer;

            &:hover:not(:disabled) {
                background-color: #f0f0f0;
                border-color: #999;
            }

            &:disabled,
            &.is-disabled {
                opacity: 0.3;
                cursor: not-allowed;
                background-color: #eee !important;
                border-color: #ddd !important;
                color: #aaa;
                transform: none;
            }
        }
    }
}