.header-eshop-block{
    width: 80px;
    margin: 0 auto;
}
.basket-form {
    width: 100%;
    display: none;
}
.background-white-smoke {
    background-color: #f1f1f1;
}
.basket-form.is-visible {
    display: inline-block;
}
.button-basket{
    display: flex;
    gap: 1rem;
    align-items: center;
}
.summarization-block {
    padding: 1rem;
}
.summarization-block__heading{
    text-transform: uppercase;
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
}
.summarization-block__measurement-line{
    text-transform: uppercase;
}
.summarization-block__measurement-line a{
    display: flex;
    justify-content: space-between;
    color: var(--color-black);
}
.summarization-block__measurement-line:not(:last-child){
    padding-bottom: 0.5rem;
}
.header-eshop-block .basket-count {
    width: 2.25rem;
    height: 2.25rem;
    text-align: center;
    display: inline-block;
    line-height: 2.25rem;
    color: var(--color-brown);
    font-size: 0.9rem;
    border: 1px solid #333;
}
.basket-top{
    position: relative;
}
.basket-top .price {
    position: absolute;
    top: -2rem;
    right: 1rem;
    color: #bdbdbd;
    text-transform: uppercase;
    font-weight: 600;
}
.basket-item {
    position: relative;
}
.basket-item .image,
.basket-item .add {
    width: 100%;
    height: 13.750rem;
    display: block;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}
.basket-item .image {
    background-size: cover;
}
.basket-item .add {
    background-image: url("../images/theme/icon/add.png");
    background-size: 40% auto;
}
.basket-item .text {
    margin-top: 1.25rem;
    text-align: center;
}
.basket-item span {
    display: block;
}
.basket-item .name {
    font-size: 0.875rem;
    text-transform: uppercase;
    font-weight: 300;
}
.basket-item .price {
    color: #bdbdbd;
}
.basket-item .delete {
    display: inline-block;
    position: absolute;
    top: 0rem;
    right: 0.5rem;
    font-size: 1.75rem;
}
.basket-item-list ul li{
    list-style: none;
}
.basket__grid{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    column-gap: 0.7rem;
    row-gap: 2rem;
}
.basket-item a{
    color: black;
}

.special-border {
    border: 2px dashed var(--color-grey-3);
}
.special-border-bottom-gray {
    border-bottom: 2px dashed var(--color-grey-3);
}
.special-border-top-gray,
.special-border-top-gray td{
    border-top: 2px dashed var(--color-grey-3);
}
.summarization-block .final-price td {
    padding-top: 1rem;
}
.summarization-delivery__form{
    display: flex;
    flex-wrap: wrap;
}
.summarization-delivery__form input,
.summarization-delivery__form select{
    box-sizing: border-box;
    width: 100%;
    background: transparent;
    border: 1px solid var(--color-black);
}
.summarization-delivery__input{
    padding: 0.5rem;
}
.summarization-delivery__input--half{
    width: 50%;
    box-sizing: border-box;
}
.summarization-delivery__input--full{
    width: 100%;
    box-sizing: border-box;
}

.size-item .size-item-image {
    height: 5rem;
    display: none;
    text-align: center;
    overflow: hidden;
}

.size-item .size-item-image.is-visible {
    display: block;
    display: flex;
    justify-content: center;
}
.size-icons{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    row-gap:2rem;
}
.size-radios__options{
    display: flex;
    flex-direction: column;
    align-items: start;
    row-gap: 0.5rem;
    margin-top: 1rem;
}
.size-radio__title{
    text-transform: uppercase;
    margin: 0 auto;
}
.size-item {
    padding: 1rem 0.5rem;
}
.basket__row{
    display: flex;
    flex-direction: column;
    gap: 4rem;
}
.basket-progres,
.basket-form-switcher{
    display: none;
}
.basket__form{
    display: flex;
    flex-direction: column;
    row-gap: 2rem;
    max-width: 500px;
    text-align: left;
    margin: 0 auto;
    width: 100%;
}

.basket-form__row{
    display: grid;
    grid-template-columns: 40% 60%;
    align-items: center;
}
.basket-form__label{
    text-transform: uppercase;
    font-weight: 400;
    text-align: left;
    padding-right: 1rem;
}
.basket-form-element__wrapper{
    display: flex;
    align-items: center;
    gap: 1rem;
}
.basket-buttons__container{
    margin-top: 2rem;
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 1rem;
}
.video iframe{
    max-width: 100%;
}
.basket-form-element__wrapper input{
    max-width: 80%;
    box-sizing: border-box;
}
.basket-confection__row{
    display: flex;
    flex-direction: column;
    gap:2rem;
}
.basket-summarization__row{
    display: flex;
    flex-direction: column;
    gap:2rem;
}
.summarization-block table {
    width: 100%;
}
.summarization-block table td {
    padding-bottom: 0.75rem;
    padding-left: 1rem;
    text-transform: uppercase;
    font-size: 0.875rem;
    vertical-align: top;
}

.custom-file-upload {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px dashed var(--color-grey-3);
    padding: 10px;
    border-radius: 4px;
    position: relative;
}

.file-input {
    position: absolute;
    opacity: 0;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%; 
    cursor: pointer; 
}

.button-label {
    background-color: #f0f0f0;
    padding: 5px 10px;
    border: 1px solid var(--color-black);
    cursor: pointer;
}

#file-name {
    font-size: 14px;
    color: #888;
    margin-left: 10px;
    flex-grow: 1;
    text-align: right;
}

@media only screen and (min-width: 40.0625em) {
    .basket-buttons__container{
        flex-direction: row;
    }
    .size-icons{
        grid-template-columns: repeat(4,1fr);
    }
    .basket__grid{
        display: grid;
        grid-template-columns: repeat(4,1fr);
    }
    .basket-progres {
        display: block;
        background-image: url("../images/theme/basket/progres-line.png");
        background-size: auto 0.75rem;
        background-position: 50% 0.9rem;
        background-repeat: no-repeat;
    }

    .basket-progres-item {
        width: 6.875rem;
        margin: 0 0.5rem;
        display: inline-block;
        text-align: center;
    }
    .basket-progres-item .circle {
        width: 2.5rem;
        height: 2.5rem;
        display: inline-block;
        color: #bdbdbd;
        font-size: 1.5rem;
        line-height: 2.5rem;
        background-image: url("../images/theme/basket/progres-circle.png");
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-color: #f1f1f1;
    }
    .basket-progres-item span {
        margin-top: 0.5rem;
        display: block;
        font-size: 0.688rem;
        text-transform: uppercase;
        font-weight: 400;
        color: #bdbdbd;
    }
    .basket-progres-item:hover .circle, .basket-progres-item.is-active .circle {
        color: #000000;
        background-image: url("../images/theme/basket/progres-circle-2.png");
    }
    .basket-progres-item:hover span, .basket-progres-item.is-active span {
        color: #000000;
    }

    .basket-form-switcher {
        margin: 0 0 2.5rem 0;
        display: inline-block;
        border: 1px solid #bdbdbd;
        list-style: none;
    }
    .basket-form-switcher li {
        width: 4.25rem;
        float: left;
        margin-left: -1px;
        border-left: 1px solid #bdbdbd;
    }
    .basket-form-switcher a {
        padding: 0.5rem 0;
        display: block;
        font-size: 0.65rem;
        text-transform: uppercase;
    }
    .basket-form-switcher a.is-active {
        color: #FFFFFF;
        background: #000000;
    }
    .basket-form label {
        font-size: 0.875rem;
    }
    .basket-form .table .title {
        text-align: center;
    }
    .basket-form .table label {
        padding: 0 0.5rem;
    }

    .basket-content .next,
    .basket-content .prev {
        width: 12rem;
        padding-left: 0;
        padding-right: 0;
    }
}
@media only screen and (min-width: 64.0625em) {
    .basket-confection__row,
    .basket-summarization__row{
        display: grid;
        grid-template-columns: repeat(3,1fr);
    }
    .basket-form {
        width: 80%;
        margin: 0 auto;
    }
    .basket__row{
        display: grid;
        grid-template-columns: 60% 40%;
    }
    .basket__grid{
        display: grid;
        grid-template-columns: repeat(5,1fr);
    }
    .basket-top .price {
        top: 0.85rem;
    }

    .basket-form-switcher li {
        width: 6.5rem;
    }
    .basket-form-switcher a {
        font-size: 0.8rem;
    }

    .basket-form .table {
        margin: 0;
    }

    .summarization-block {
        margin-bottom: 0;
    }
}