/* Start:/pokupatelyam/zakaz-tortov/style.css?178068177077194*/
main {
    --bg: white;
    --text: #303030;
    --accent: #FFF5EB;
    --bprimary: #EACCAE;
    --bprimary-hover: #DEB995;
    --bprimary-active: #D6B390;
    --button-border: #DEB995;
    --control-text: #4E4E4E;
    --radius-xl: 28px;
    --radius-l: 24px;
    --radius-m: 20px;
    --radius-s: 16px;
    --button-height: 44px;
    --button-padding-y: 12px;
    --button-padding-x: 32px;
    --qty-height: 44px;
    --qty-radius: 24px;
    --qty-font-size: 38px;
    --container: 1200px;
    --container-hero: 1360px;
    --shadow: 0 8px 24px rgba(0,0,0,.08);

    color: var(--text);
    font-family: "Nunito", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

.container {
    max-width: var(--container);
    width: calc(100% - 40px);
    margin: 0 auto;
}
.container.hero__grid {
    max-width: var(--container-hero);
}
.hero {
    margin-top: 40px;
}
.hero__grid {
    display:grid;
    grid-template-columns: .9fr 1.25fr;
    align-items: stretch;
}
.hero__content {
    align-self: start;
}
.hero__title {
    font-weight: 700;
    font-size: 44px;
    line-height: 110%;
    border-radius: var(--radius-xl) var(--radius-xl) 0 var(--radius-xl);
    background: var(--accent);
}
.hero__title h1 {
    padding: 20px 80px;
    margin: unset;
    border-radius: var(--radius-xl);
    background: var(--bg);
}
.hero__desc {
    padding: 40px 80px 60px;
    border-radius: var(--radius-xl) 0 0 var(--radius-xl);
    background: var(--accent);
}
.hero__text {
    font-weight: 400;
    font-size: 20px;
    line-height: 120%;
}
.hero__text ol {
    padding-left: 24px;
    margin: 12px 0 72px;
}
.hero__text ol li {
    position: relative;
}
.hero__text ol li:before {
    content: '';
    position: absolute;
    left: -26px;
    top: 1px;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    background: linear-gradient(0deg, #EDC882 0.01%, #E5C080 19.01%, #C38417 60%, #E6B972 82%, #EEC586 87%, #F0E3CD 100%), #DBB26B;
    opacity: 0.3;
    transform: rotate(40.41deg);
}

.hero__text-head {
    font-weight: 700;
    font-size: 26px;
    line-height: 110%;
}

.btn--primary,
.btn--secondary {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: var(--button-padding-y) var(--button-padding-x);
    min-height: var(--button-height);
    border-radius: var(--radius-l);
    font-weight: 700;
    font-size: 16px;
    line-height: 120%;
    transition: all .3s ease;
}
.btn--primary {
    width: 100%;
    border: 0;
    background: var(--bprimary);
}
.btn--primary:hover {
    background: var(--bprimary-hover);
}
.btn--primary:active {
    background: var(--bprimary-active);
}
.btn:disabled,
.btn.is-disabled {
    background: #F4F5F7 !important;
    color: #C1C3C5;
}
.btn.is-disabled {
    cursor: pointer;
}
.btn--secondary {
    border: 1px solid var(--button-border);
    background: var(--bg);
}
.btn--secondary:hover {
    background: var(--bprimary);
}
.btn--secondary:active {
    background: var(--bprimary-hover);
}
.hero__cta--mobile {
    display: none;
}
.hero__media {
    background: var(--accent);
    border-radius: var(--radius-xl) var(--radius-xl) var(--radius-xl) 0;
    min-height: 0;
    overflow: hidden;
}
.hero__image {
    position: relative;
    height: 100%;
    overflow: hidden;
}
.hero__image img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 690px;
    max-width: none;
    height: auto;
}
.facts {
    margin-top: 100px;
}
.facts__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    gap: 24px;
}
.facts__grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.fact__tile {
    position: relative;
    min-height: 170px;
    border-radius: 28px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    user-select: none;
    padding: 40px 20px 20px 36px;
    gap: 16px;
    isolation: isolate;
    border: 1px solid #D9D9D9;
}
.fact__badge {
    position: absolute;
    width: 60px;
    height: 60px;
    left: 10px;
    top: 10px;
    border-radius: 999px;
    background: #F9EFE0;
    opacity: 0.7;
}
.fact__title {
    font-weight: 700;
    font-size: 26px;
    margin: unset;
    line-height: 110%;
    color: #AC7619;
    z-index: 1;
}
.fact__text {
    font-weight: 400;
    font-size: 16px;
    line-height: 120%;
}

.section-title {
    font-weight: 700;
    font-size: 44px;
    line-height: 110%;
}

.constructor {
    margin-top: 100px;
}

.stepper {
    display: flex;
    min-width: 280px;
}
.stepper__step {
    position: relative;
    padding: 10px 20px 20px;
    background: white;
    z-index: 2;
}
.stepper__bg {
    position: absolute;
    inset: 0;
    background: white;
    z-index: 0;
}
.stepper__step.is-active {
    background: var(--accent);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.stepper__step.is-active .stepper__bg {
    display: none;
}
.stepper__step.is-prev,
.stepper__step.is-next {
    background: var(--accent);
}
.stepper__step.is-next .stepper__bg {
    border-radius: 0 0 0 var(--radius-xl);
}
.stepper__step.is-prev .stepper__bg {
    border-radius: 0 0 var(--radius-xl) 0;
}
.stepper__button {
    position: relative;
    z-index: 1;
    color: #CBCCCD;
    background: #F4F5F7;
    border-radius: var(--radius-m);
    padding: 12px 32px;
    width: 186px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}
.stepper__cart-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    min-width: 32px;
    height: 32px;
    border-radius: 999px;
    background: #E7C9A8;
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 22px;
    line-height: 1;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
    z-index: 3;
    opacity: 90%;
    pointer-events: none;
}
.stepper__step.is-active .stepper__cart-badge {
    display: none;
}
.stepper__skip-popup {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    z-index: 100;
    min-width: 220px;
    max-width: 230px;
    padding: 8px;
    background: #FFFFFF;
    border-radius: 14px;
    box-shadow: var(--shadow);
    font-size: 14px;
    line-height: 1.2;
    font-weight: 400;
    color: #4E4E4E;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(6px);
    pointer-events: none;
    transition: opacity .2s, visibility .2s, transform .2s;
}
.stepper__step.has-skip-tooltip:hover .stepper__skip-popup,
.stepper__step.has-skip-tooltip:focus-within .stepper__skip-popup,
.stepper__step.has-skip-tooltip.is-tooltip-open .stepper__skip-popup {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.stepper__step.is-active .stepper__button {
    color: var(--text);
    background: white;
}
.stepper__step.is-available .stepper__button {
    color: var(--text);
    background: #FFF5EB;
}
.stepper__step.is-disabled .stepper__button {
    color: #CBCCCD;
    background: #F4F5F7;
    cursor: default;
}
.stepper__head {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 5px;
}
.stepper__text,
.stepper__num {
    font-weight: 700;
    font-size: 24px;
    line-height: 120%;
}
.stepper__label {
    font-weight: 400;
    font-size: 16px;
    line-height: 120%;
}
.panel-wrap {
    background: var(--accent);
    border-radius: 0 var(--radius-xl) var(--radius-xl) var(--radius-xl);
    padding: 32px 40px;
    min-width: 290px;
}
.panel-wrap.fullrounded {
    border-radius: var(--radius-xl);
}
.panel { display:none; }
.panel.is-active { display:block; }

.panel__head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 12px;
    margin-bottom: 32px;
}
.panel__title {
    font-weight: 700;
    font-size: 32px;
    line-height: 110%;
    margin-bottom: unset;
}
.panel__actions { display:none; gap: 10px; }

.icon-pill {
    border:1px solid var(--line);
    background: var(--card);
    padding: 10px 12px;
    border-radius: 999px;
    cursor:pointer;
    font-weight: 700;
}
.panel__categories {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    align-content: flex-start;
    gap: 8px;
    margin-bottom: 16px;
}
.panel__category {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 12px 32px;
    background: white;
    border: 1px solid transparent;
    border-radius: var(--radius-xl);
    font-weight: 400;
    font-size: 16px;
    line-height: 120%;
    cursor: pointer;
    transition: all .3s;
}
.panel__category.is-active {
    border: 1px solid #DEB995;
    font-weight: 700;
}
.panel__category:hover {
    background: #E9E9EB;
}
.panel__filters {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    align-content: flex-start;
    gap: 8px;
    margin-bottom: 20px;
}
.panel__filter {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 12px 32px;
    border: 1px solid #CBCCCD;
    border-radius: var(--radius-xl);
    font-weight: 400;
    font-size: 16px;
    line-height: 120%;
    cursor: pointer;
    transition: all .3s;
    background: transparent;
}
.panel__filter.is-active {
    border: 1px solid #DEB995;
    font-weight: 700;
}
.panel__filter:hover {
    background: white;
    border: 1px solid #DEB995;
}
.panel__filter.disabled,
.panel__filter[disabled] {
    border: 1px solid #CBCCCD;
    color: #CBCCCD;
    cursor: default;
    background: transparent;
}
.grid-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}
.grid-cards .cake-card {
    min-width: 0;
}
.grid-cards .cake-big {
    grid-row: span 2;
}
.grid-cards .cake-big--right {
    grid-column: 3 / span 2;
}
.grid-cards .cake-big--left {
    grid-column: 1 / span 2;
}
.grid-cards__more {
    grid-column: 1 / -1;
}
.grid-cards__more .btn {
    width: max-content;
    margin: auto;
}
.grid-cards__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    grid-column: 1 / -1;

}
.grid-cards__empty-header {
    font-weight: 700;
    font-size: 20px;
    line-height: 120%;
    text-align: center;
    color: #303030;
}
.grid-cards__empty-description {
    font-weight: 400;
    font-size: 16px;
    line-height: 120%;
    text-align: center;
    color: #303030;
}
.grid-cards__empty-image {
    margin-top: 10px;
}
.cake-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 16px;
    gap: 8px;
    background: white;
    cursor: default;
    border-radius: var(--radius-m);
    transition: all .3s;
}
.cake-card:hover {
    box-shadow: var(--shadow);
}
.cake-card__badge-container {
    display: flex;
    gap: 4px;
    flex-direction: row;
    flex-wrap: wrap;
}
.cake-card__badge {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 4px 12px;
    background: #F4F5F7;
    border-radius: var(--radius-s);
    font-weight: 400;
    font-size: 12px;
    line-height: 120%;
    align-self: flex-start;
}
.cake-big .cake-card__badge-container {
    position: absolute;
    z-index: 5;
}
.cake-card__img {
    position: relative;
    width: 100%;
    margin-bottom: 8px;
    aspect-ratio: 23 / 20;
    cursor: pointer;
    border-radius: var(--radius-s);
    overflow: hidden;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.cake-big .cake-card__img {
    aspect-ratio: unset;
    width: calc(100% + 32px);
    margin: -16px -16px 0;
    background-size: cover;
    height: 100%;
    border-radius: var(--radius-s) var(--radius-s) 0 0;
    min-height: 480px;
}
.cake-card__img::before{
    content: "";
    position: absolute;
    inset: 0;
    transition: background .3s;
    will-change: background;
}
.cake-card__img::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:44px;
    height:44px;
    transform: translate(-50%,-50%) scale(.9);
    opacity: 0;
    transition: transform 220ms ease;
    background: url(/pokupatelyam/zakaz-tortov/assets/magnifier.svg) center / contain no-repeat;
}
.cake-card__img:hover::before{
    background: rgba(255, 255, 255, 0.6);
}
.cake-card__img:hover::after{
    opacity: 1;
    transform: translate(-50%,-50%) scale(1);
}
.cake-card__title {
    font-weight: 700;
    font-size: 16px;
    line-height: 120%;
}
.cake-card__desc{
    position: relative;
    font-weight: 400;
    font-size: 16px;
    line-height: 120%;
    min-height: 60px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
}

.cake-card__desc::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height: .8em;
    background: linear-gradient(to bottom, rgba(255,255,255,0), #fff);
    pointer-events:none;
}
.cake-card__desc:empty::after{ display:none; }
.cake-card__price {
    margin-top: auto;
    font-weight: 400;
    font-size: 16px;
    line-height: 120%;
}

.cake-card__price-offer {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.cake-card__discount {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 14px;
    border-radius: 24px;
    background: #8ebd40;
    color: #fff;
    line-height: 1;
    flex: 0 0 auto;
}

.cake-card__price-box {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.cake-card__price-old {
    color: #8B8B8B;
    text-decoration: line-through;
    font-size: 13px;
    line-height: 1.2;
}

.cake-card__promo-date {
    margin-top: 6px;
    margin-bottom: -6px;
    font-size: 12px;
    line-height: 1.25;
    color: #8B8B8B;
}

.cake-card__desc,
.cake-card__price{
    transition: all .3s ease;
    will-change: opacity, transform;
}

.cake-card__btn {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
}
.cake-card:hover .cake-card__btn{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.cake-card:hover .cake-card__desc,
.cake-card:hover .cake-card__price{
    opacity: 0;
    transform: translateY(-12px);
}
.cake-card.is-selected {
    outline: 1px solid #DEB995;
    box-shadow: var(--shadow);
}
.cake-card.is-selected::after,
.fill-card.is-selected::after {
    content: url(/pokupatelyam/zakaz-tortov/assets/check.svg);
    position: absolute;
    top: -6px;
    right: -6px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #7DBE2B;
    color: #fff;
    font-size: 28px;
    line-height: 1;
    font-weight: 700;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
    z-index: 6;
}
.cake-card.is-selected .cake-card__btn,
.cake-card.is-selected:hover .cake-card__btn {
    opacity: 0;
    pointer-events: none;
}
.cake-card.is-selected .cake-card__desc,
.cake-card.is-selected .cake-card__price,
.cake-card.is-selected:hover .cake-card__desc,
.cake-card.is-selected:hover .cake-card__price {
    opacity: 1;
    transform: none;
}
.chips {
    display:flex;
    flex-wrap:wrap;
    gap: 10px;
    margin-bottom: 14px;
}
.chip {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 12px 32px;
    gap: 12px;
    background: white;
    border-radius: var(--radius-xl);
    font-weight: 400;
    font-size: 16px;
    line-height: 120%;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all .3s;
}
.chip span {
    width: 16px;
    height: 16px;
    border-radius: 50%;
}
.chip.is-active {
    border: 1px solid #DEB995;
    font-weight: 700;
    font-size: 16px;
    line-height: 120%;
}
.chip[disabled],
.chip.is-disabled{
    opacity: .45;
    cursor: default;
}
.chip:hover {
    background: #E9E9EB;
}
.fillings-wrap {
    display:flex;
    flex-direction:column;
    gap: 14px;
}
.grid-fillings{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.fill-card.is-hidden{
    display:none;
}
.fill-card {
    display: flex;
    flex-direction: column;
    align-items: start;
    padding: 16px;
    gap: 8px;
    background: #FFFFFF;
    border-radius: 20px;
    transition: all .3s;
}
.fill-card:hover {
    box-shadow: var(--shadow);
    cursor: pointer;
}
.fill-card__img {
    width: 100%;
    margin-bottom: 16px;
    border-radius: 8px;
    padding: 16px 24px;
}
.fill-card__img img {
    display: block;
    width: 100%;
    border-radius: 8px;
}
.fill-card__title {
    font-weight: 700;
    font-size: 16px;
    line-height: 120%;
}
.fill-card__text{ color: var(--muted); margin-bottom: 10px; }
.fill-card__actions{ display:flex; gap: 10px; }

.props {
    display:grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 40px;
    margin-bottom: 18px;
}
.props .btn--primary {
    grid-column: 1 / -1;
    width: max-content;
    margin: auto;
}
.cake-preview {
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 24px;
}
.segmented {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
}
.segmented__btn {
    padding: 12px 32px;
    background: white;
    border-radius: 24px;
    border: 1px solid transparent;
    font-weight: 400;
    font-size: 16px;
    line-height: 120%;
    text-align: center;
    cursor: pointer;
    transition: all .3s;
}
.segmented__btn.is-active {
    border: 1px solid #DEB995;
    font-weight: 700;
}
.segmented__btn:hover {
    background: #E9E9EB;
}
.field{ margin-bottom: 12px; }
.label {
    font-weight: 700;
    font-size: 16px;
    line-height: 120%;
    margin-bottom: 6px;
}
.hint{ color: var(--muted); font-size: 12px; margin-top: 6px; }

.control-row{ display:flex; gap: 10px; align-items:center; }
.input, .select, .textarea {
    width: 100%;
    min-height: 48px;
    padding: 10px 12px;
    border-radius: 24px;
    border: 1px solid transparent;
    background: #fff;
    outline: none;
    transition: all .3s;
}
.input:hover, .select:hover, .textarea:hover {
    border: 1px solid #CBCCCD;
}
.input:focus, .select:focus, .textarea:focus {
    border: 1px solid #DEB995;
}
.input--center{ text-align:center; font-weight: 900; }
.textarea {
    resize: vertical;
}

.addon{ margin-top: 36px; }
.addon__header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 16px;
    margin-bottom: 20px;
}
.addon__title {
    font-weight: 700;
    font-size: 32px;
    line-height: 110%;
}
.checkout{
    display:grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 40px;
}
.help {
    margin: 100px 0;
}
.help__block {
    display: flex;
    flex-direction: column;
}
.help__head,
.help__body {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}
.help__head-left {
    width: 45%;
    background: #F4F5F7;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.help__head-left .section-title {
    padding: 20px 40px;
    margin-bottom: unset;
}
.help__head-right {
    background: #F4F5F7;
    width: 55%;
}
.help__head-rounder {
    background: white;
    border-radius: 0 0 0 var(--radius-xl);
    width: 100%;
    height: 100%;
}
.help__body {
    background: #F4F5F7;
    border-radius: 0 var(--radius-xl) var(--radius-xl) var(--radius-xl);
    padding: 40px;
    gap: 40px;
}
.help__description {
    flex: 1 1 100%;
    font-weight: 400;
}
.help__block1 {
    font-size: 24px;
    color: #4E4E4E;
    line-height: 120%;
}
.help__block2 {
    font-size: 16px;
    color: #4E4E4E;
    margin: 28px 0 80px;
    line-height: 120%;
}
.help__block3 {
    font-size: 16px;
    color: #6E6E6E;
    line-height: 120%;
}
.help__form {
    flex: 1 1 100%;
    display: flex;
    gap: 12px;
    flex-direction:column;
    justify-content: space-between;
}
.help__form input {
    margin-top: 4px;
}
.help_button {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.help__input.is-error .input {
    border-color: #cf4b3f;
}
.help__check.is-error input {
    box-shadow: 0 0 0 1px #cf4b3f;
    border-radius: 4px;
}
.help__error {
    display: none;
    margin-top: 6px;
    font-size: 12px;
    color: #cf4b3f;
    font-weight: 700;
}
.help__error--agree {
    margin-top: -14px;
}
.help__status {
    display: none;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 700;
}
.help__status.is-success {
    color: #3a7d44;
}
.help__status.is-error {
    color: #cf4b3f;
}
.check {
    display:flex;
    gap: 10px;
    align-items:flex-start;
    font-weight: 400;
    font-size: 16px;
    line-height: 120%;
}
.check span a {
    color: #126DF7;
}
.check input {
    width: 24px;
    height: 24px;
    accent-color: var(--bprimary);
    cursor: pointer;
}
.modal {
    display:none;
    position: fixed;
    inset:0;
    z-index: 1000;
}
.modal.is-open {
    display:block;
    align-content: center;
}
.modal__backdrop {
    position:absolute;
    inset:0;
    background: rgba(0,0,0,.45);
}
.modal__dialog {
    position: relative;
    width: min(560px, calc(100% - 60px));
    max-height: calc(100% - 120px);
    margin: 60px auto;
    background: var(--card);
    box-shadow: var(--shadow);
    display: flex;
    overflow: auto;
    flex-direction: column;
    align-items: flex-start;
    padding: 40px;
    gap: 32px;
    isolation: isolate;
    background: #FFFFFF;
    border-radius: 28px;
}
.modal__dialog--wide{ width: min(860px, calc(100% - 60px)); }
.modal__close {
    position: absolute;
    right: 24px;
    top: 24px;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 20px;
    color: #4E4E4E;
    font-weight: 600;
    opacity: 0.8;
    transition: color .3s;
}
.modal__close:hover {
    color: var(--text);
}
.modal__footer {
    width: 100%;
    margin-top: 12px;
}
.filling-modal {
    display:grid;
    grid-template-columns: 240px 1fr;
    gap: 32px;
}
.filling-modal__img {
    padding: 14px;
    width: 100%;
    height: fit-content;
    border-radius: 20px;
}
.filling-modal__img img {
    display: block;
    width: 100%;
    border-radius: 14px;
}
.modal__title-torts {
    font-size: 32px;
    font-weight: 700;
    line-height: 110%;
    margin-bottom: 12px;
}
.filling-modal__text {
    margin-bottom: 24px;
    font-weight: 400;
    font-size: 16px;
    line-height: 120%;
    color: #4E4E4E;
}
.filling-modal__subtitle {
    font-weight: 700;
    font-size: 20px;
    line-height: 120%;
    margin-bottom: 12px;
}
.nutri {
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.nutri__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 12px;
    gap: 4px;
    border: 1px solid #E9E9EB;
    border-radius: 12px;
}
.nutri__k {
    font-weight: 700;
    font-size: 16px;
    line-height: 120%;
}
.nutri__v {
    font-weight: 400;
    font-size: 16px;
    line-height: 120%;
    color: #4E4E4E;
}
.filling-modal .btn--primary {
    grid-column: 1/-1;
}
.decor-photo {
    --w: 100%;
    --h: 100%;
    --r: 220px;
    --r0: 0px;
    --frame-pad: 36px;
    --cream: transparent;
    --line: rgba(237, 200, 130, 0.22);
    --gold: rgba(237, 200, 130, 0.95);
    --gold-soft: rgba(237, 200, 130, 0.55);
    position: relative;
    width: var(--w);
    height: var(--h);
    border-radius: 40px;
    justify-items: center;
    align-content: center;
    overflow: visible;
    background:
            repeating-linear-gradient(
                    90deg,
                    rgba(255,245,235,1) 0 18.5px,
                    rgba(255,245,235,0.7) 18.5px 20px
            ),

            linear-gradient(
                    180deg,
                    #f8e7c7 -0.17%,
                    #E5C080 18.89%,
                    #C38417 57.24%,
                    #E6B972 82.11%,
                    #EEC586 87.13%,
                    #f5eee2 100.17%
            );
}

.decor-photo::before {
    content: url(/pokupatelyam/zakaz-tortov/assets/stars.svg);
    position: absolute;
    left: 35.5px;
    top: 30px;
    width: 110px;
    height: 90px;
    pointer-events: none;
    z-index: 2;
}
.decor-photo__img {
    position: absolute;
    max-width: 540px;
    transform: translateY(-50%);
    width: 85%;
    height: 85%;
    border-radius: var(--r) var(--r0) var(--r) var(--r0);
    background: var(--img) center / cover no-repeat;
}
.decor-photo__img::before{
    content:"";
    position:absolute;
    left: -20px;
    right: 20px;
    top: 20px;
    bottom: 0;
    border-radius: var(--r) var(--r0) var(--r) var(--r0);
    padding: 2px;
    background:
            linear-gradient(
                    90deg,
                    #FFE3AE -0.17%,
                    #E5C080 18.89%,
                    #C38417 57.24%,
                    #E6B972 82.11%,
                    #EEC586 87.13%,
                    #F0E3CD 100.17%
            );
    -webkit-mask: linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;

    mask:
            linear-gradient(#000 0 0) content-box,
            linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events:none;
}

.fill-card.is-selected {
    outline: 1px solid #DEB995;
    box-shadow: var(--shadow);
}

.fill-card.is-selected .fill-card__btn,
.fill-card.is-selected:hover .fill-card__btn {
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
}

.fill-card.is-selected .fill-card__text,
.fill-card.is-selected:hover .fill-card__text {
    opacity: 1;
    transform: none;
}
.fill-card__img {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.step2-placeholder,
.step2-empty {
    padding: 24px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid #e7d8c8;
    font-size: 16px;
    line-height: 1.4;
}

.step3-placeholder {
    padding: 24px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid #e7d8c8;
    font-size: 16px;
    line-height: 1.4;
}
.cake-preview--photo {
    background-color: #fff;
}
.props__tab[hidden] {
    display: none !important;
}
.step3-title {
    font-weight: 700;
    font-size: 28px;
    line-height: 1.15;
    margin-bottom: 10px;
}
.step3-price {
    margin-bottom: 18px;
    font-weight: 700;
    font-size: 26px;
    line-height: 110%;
    color: #6E6E6E;
}
.step3-price__offer {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}
.step3-price__discount {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 14px;
    border-radius: 999px;
    background: #8ebd40;
    color: #fff;
    font-weight: 700;
    font-size: 18px;
    line-height: 1;
}
.step3-price__box {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.step3-price__old {
    color: #8B8B8B;
    font-size: 15px;
    line-height: 1.2;
    text-decoration: line-through;
}
.step3-price__current {
    font-weight: 700;
    font-size: 26px;
    line-height: 110%;
    color: #6E6E6E;
}
.step3-price__note {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.25;
    color: #8B8B8B;
}
.step3-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.field--half {
    margin-bottom: 12px;
}
.step3-filling {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 24px;
    border: 1px solid transparent;
    border-radius: 24px;
    background: #fff;
    cursor: pointer;
    transition: all .3s;
}
.step3-filling:hover {
    box-shadow: var(--shadow);
}
.step3-filling__img {
    width: 85px;
    height: 72px;
    border-radius: 10px;
    flex: 0 0 auto;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.step3-filling__name {
    font-weight: 400;
    font-size: 16px;
    line-height: 120%;
}
.step3-total {
    margin: 16px 0 14px;
    font-size: 16px;
    line-height: 1.3;
}
.btn.step3 {
    grid-column: 1 / -1;
    width: fit-content;
    margin: auto;
}
.step3-description {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.step3-description__block .label {
    padding: 10px 0;
}

.checkout--order {
    grid-template-columns: .98fr 1.02fr;
    align-items: start;
}
.checkout-order__head {
    margin-bottom: 18px;
}
.checkout-order__title {
    margin-bottom: 6px;
    font-weight: 700;
    font-size: 24px;
    line-height: 120%;
}
.checkout-order__meta {
    font-weight: 400;
    font-size: 16px;
    line-height: 120%;
}
.checkout-order__cart {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 14px;
    cursor: default;
}
.checkout-cart__item {
    position: relative;
    padding: 20px;
    border-radius: 24px;
    background: #fff;
}
.checkout-cart__main {
    display: flex;
    gap: 16px;
    align-items: center;
}
.checkout-cart__img {
    width: 150px;
    height: 125px;
    flex: 0 0 150px;
}
.checkout-cart__content {
    min-width: 0;
    flex: 1;
}
.checkout-cart__title {
    margin: 0 28px 8px 0;
    font-weight: 700;
    font-size: 20px;
    line-height: 120%;
}
.checkout-cart__price {
    margin-bottom: 8px;
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    color: #6E6E6E;
    font-weight: 700;
    font-size: 22px;
    line-height: 120%;
}
.checkout-cart__discount {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 14px;
    border-radius: 999px;
    background: #8ebd40;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    line-height: 1;
    flex: 0 0 auto;
}
.checkout-cart__price-old {
    color: #6E6E6E;
    font-size: 12px;
    line-height: 1.2;
    text-decoration: line-through;
}
.checkout-cart__price-current {
    color: #6E6E6E;
    font-weight: 700;
    font-size: 22px;
    line-height: 120%;
}
.checkout-cart__promo {
    margin-bottom: 12px;
    font-weight: 400;
    font-size: 12px;
    line-height: 1.2;
    color: #7A7A7A;
}
.checkout-cart__meta {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    padding-top: 12px;
    font-size: 13px;
    color: var(--muted);
}
.checkout-cart__meta span {
    display: block;
    flex: 1;
    font-weight: 400;
    font-size: 16px;
    padding: 0 12px;
    line-height: 120%;
    color: #4E4E4E;
}
.checkout-cart__meta span + span {
    border-left: 1px solid #CBCCCD;
}
.checkout-cart__meta strong {
    display: block;
    margin-bottom: 4px;
    font-weight: 700;
    color: var(--text);
}
.checkout-cart__remove {
    position: absolute;
    opacity: 0;
    top: 14px;
    right: 14px;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: #F4F5F7;
    cursor: pointer;
    font-size: 16px;
    line-height: 28px;
    transition: all .3s;
}
.checkout-cart__remove:before {
    content: url(/pokupatelyam/zakaz-tortov/assets/basket.svg);
    position: absolute;
    pointer-events: none;
    width: 100%;
    height: 100%;
    left: 50%;
    top: 25%;
    transform: translate(-50%);
}
.checkout-cart__remove:hover {
    background: #EACCAE;
}
.checkout-cart__remove:active {
    background: #DEB995;
}
.checkout-cart__item:hover .checkout-cart__remove,
.checkout-cart__item:focus-within .checkout-cart__remove {
    opacity: 1;
}
.checkout-order__add {
    padding: 8px;
    gap: 10px;
    background: #FFFFFF;
    border-radius: 28px;
    font-weight: 700;
    font-size: 16px;
    line-height: 120%;
    display: flex;
    flex-direction: row;
    align-items: center;
    transition: box-shadow .3s;
}
.checkout-order__add span {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-size: 38px;
    font-weight: 100;
    width: 40px;
    height: 40px;
    background: #EACCAE;
    border-radius: 28px;
    transition: background-color .3s;
}
.checkout-order__add:hover {
    box-shadow: var(--shadow);
}
.checkout-order__add:hover span {
    background: #DEB995;
}
.checkout-order__add:active span {
    background: #D6B390;
}
.field--order {
    margin-bottom: 14px;
}
.checkout-order__row--double {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.dropdown-select {
    position: relative;
}
.dropdown-select__trigger {
    width: 100%;
    min-height: 48px;
    padding: 14px 16px;
    border-radius: 24px;
    border: 1px solid transparent;
    background: #fff;
    color: var(--text);
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
}
.dropdown-select__arrow {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    transform-origin: center center;
    transition: transform .2s ease;
    pointer-events: none;
}
.dropdown-select__arrow svg {
    display: block;
    width: 18px;
    height: 10px;
}
.dropdown-select.is-open .dropdown-select__arrow {
    transform: rotate(180deg);
}
.dropdown-select__menu {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    z-index: 30;
    padding: 8px;
    border-radius: 24px;
    border: 1px solid #ece8e4;
    background: #fff;
    box-shadow: var(--shadow);
}
.dropdown-select.is-open .dropdown-select__menu {
    display: block;
}
.dropdown-select__options {
    max-height: 196px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, .25) transparent;
}
.dropdown-select__option,
.dropdown-select__empty {
    width: 100%;
    padding: 8px 12px;
    border-radius: 24px;
    border: 0;
    background: transparent;
    text-align: left;
}
.dropdown-select__option {
    cursor: pointer;
}
.dropdown-select__option:hover,
.dropdown-select__option.is-selected {
    background: #fff5eb;
}
.dropdown-select__empty {
    color: var(--muted);
    font-size: 13px;
}
.dropdown-select__options--calendar {
    max-height: none;
    overflow: visible;
    display: block;
}
.calendar-dropdown {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.calendar-dropdown__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.calendar-dropdown__title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    text-align: center;
    flex: 1 1 auto;
}
.calendar-dropdown__nav {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #ece8e4;
    background: #fff;
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, opacity .2s ease;
}
.calendar-dropdown__nav:hover {
    background: #fff5eb;
    border-color: #deb995;
}
.calendar-dropdown__nav:disabled {
    opacity: .35;
    cursor: default;
    pointer-events: none;
}
.calendar-dropdown__weekdays,
.calendar-dropdown__grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
}
.calendar-dropdown__weekday {
    font-size: 12px;
    line-height: 1.2;
    font-weight: 600;
    color: var(--muted);
    text-align: center;
    padding: 4px 0;
}
.calendar-dropdown__day {
    aspect-ratio: 1/1;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 50%;
    background: #fff5eb;
    color: var(--text);
    font: inherit;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease;
}
.calendar-dropdown__day:hover {
    background: #fff1e1;
    border-color: #deb995;
}
.calendar-dropdown__day.is-selected {
    background: #f4d1ae;
    border-color: #deb995;
    font-weight: 600;
}
.calendar-dropdown__day.is-today:not(.is-selected):not(.is-disabled) {
    border-color: #deb995;
}
.calendar-dropdown__day.is-disabled {
    background: #f3f1ef;
    color: #a7a19b;
    cursor: default;
}
.calendar-dropdown__day.is-outside {
    background: transparent;
    color: #d0cac4;
}
.calendar-dropdown__hint {
    font-size: 12px;
    line-height: 1.4;
    color: var(--muted);
}
.field--order.is-error .input,
.field--order.is-error .select,
.field--order.is-error .textarea,
.field--order.is-error .dropdown-select__trigger,
.check--order.is-error {
    border-color: #CA3611;
}
.field__error {
    display: none;
    margin-top: 6px;
    font-size: 12px;
    color: #CA3611;
    font-weight: 700;
}
.field__error--agree {
    margin: -2px 0 14px;
}
.order-submit-error {
    display: none;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    color: #CA3611;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.2;
}
.order-submit-error.is-show {
    display: flex;
}
.order-submit-error::before {
    content: '!';
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    border-radius: 50%;
    background: #CA3611;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
    line-height: 1;
}
.checkout-order__form .input,
.checkout-order__form .select,
.checkout-order__form .textarea {
    padding: 14px 16px;
    border-radius: 24px;
    background: #fff;
    border-color: transparent;
    min-height: 48px;
    cursor: pointer;
}
.checkout-order__form .input:hover,
.checkout-order__form .select:hover,
.checkout-order__form .textarea:hover {
    border-color: #CBCCCD;
}
.checkout-order__form .input:focus,
.checkout-order__form .select:focus,
.checkout-order__form .textarea:focus {
    border-color: #DEB995;
}
.check--order {
    margin: 8px 0 6px;
    color: var(--text);
    cursor: pointer;
}
.check--order a {
    color: #2a6acb;
}
.checkout-empty {
    padding: 20px;
    border-radius: 22px;
    background: #fff;
    border: 1px dashed #d9c1a7;
    color: var(--muted);
}

.restore-modal__text {
    margin: 0;
    color: #666;
    line-height: 1.45;
}
.restore-modal__actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.restore-modal__actions .btn {
    width: 100%;
}
.modal__dialog--design-change {
    width: min(760px, calc(100% - 60px));
    align-items: stretch;
    text-align: center;
    gap: 24px;
}
.design-change-modal__text {
    margin: 0;
    font-size: 20px;
    line-height: 1.35;
    color: #4E4E4E;
}
.design-change-modal__text strong {
    color: #303030;
}
.modal__dialog--cart-remove {
    width: min(520px, calc(100% - 32px));
    align-items: stretch;
    text-align: center;
    gap: 20px;
    padding: 28px;
}
.cart-remove-modal__actions {
    gap: 8px;
}
.cart-remove-modal__actions .btn {
    min-height: 46px;
    font-size: 14px;
}
.btn--ghost-soft {
    background: #FFF5EB;
    color: var(--text);
}
.panel__mobile-trigger {
    display: none;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: #fff;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.2;
    cursor: pointer;
    transition: all .3s;
}
.panel__mobile-trigger:hover,
.panel__mobile-trigger:active,
.panel__mobile-trigger:focus {
    border: 1px solid #DEB995;
    box-shadow: var(--shadow);
}
.fill-card {
    position: relative;
}
.fill-card__text {
    position: relative;
    min-height: 72px;
    transition: opacity .2s ease, transform .2s ease;
}
.fill-card__text::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: .8em;
    background: linear-gradient(to bottom, rgba(255,255,255,0), #fff);
    pointer-events: none;
}
.fill-card__actions {
    width: 100%;
    margin-top: auto;
}
.fill-card__btn {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
}
.fill-card:hover .fill-card__btn {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.fill-card:hover .fill-card__text {
    opacity: 0;
    transform: translateY(-12px);
}
.modal__dialog--filters {
    width: min(520px, calc(100% - 32px));
}
.modal__dialog--filters .modal__body {
    width: 100%;
}
.modal__dialog--filters .panel__categories,
.modal__dialog--filters [data-design-filters],
.modal__dialog--filters .chips {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
}
.modal__dialog--filters .panel__categories {
    margin-bottom: 24px;
}
.modal__dialog--filters .panel__category,
.modal__dialog--filters .panel__filter,
.modal__dialog--filters .chip {
    width: 100%;
    justify-content: flex-start;
    padding: 14px 15px;
    border-radius: 24px;
    background: #F4F5F7;
    border: 1px solid transparent;
    font-size: 14px;
    line-height: 1.2;
}
.modal__dialog--filters .panel__category.is-active,
.modal__dialog--filters .panel__filter.is-active,
.modal__dialog--filters .chip.is-active {
    background: #fff;
    border-color: #DEB995;
}
.modal__dialog--image {
    width: min(860px, calc(100% - 32px));
    padding: 20px;
    align-items: stretch;
}
.image-modal__img {
    width: 100%;
    min-height: 420px;
    border-radius: 24px;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.modal__dialog--success {
    width: min(790px, calc(100% - 32px));
    align-items: center;
    text-align: center;
    gap: 18px;
}
.success-modal__subtitle,
.success-modal__note {
    margin: 0;
    color: #6E6E6E;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 400;
}
.success-modal__icon {
    font-size: 72px;
    line-height: 1;
}
.success-modal__question {
    font-size: 24px;
    line-height: 1.2;
    font-weight: 700;
}
.success-modal__btn {
    width: auto;
    min-width: 220px;
}

.step3-summary {
    margin: 12px 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.step3-summary .hint {
    margin: 0;
    font-size: 13px;
    line-height: 1.3;
    color: #6E6E6E;
}
.step3-summary strong {
    font-weight: 600;
}
.cselect {
    position: relative;
    width: 100%;
}
.cselect .dropdown-select__trigger {
    padding: 8px 16px;
}
.cselect__left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.cselect__swatch {
    width: 56px;
    height: 30px;
    border-radius: 48px;
    border: 1px solid #cfcfcf;
    background: #D9D9D9;
    flex: 0 0 auto;
}
.cselect__label {
    min-width: 0;
    font-size: 14px;
    line-height: 1.2;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cselect .dropdown-select__option {
    border-radius: 24px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
    cursor: pointer;
    text-align: left;
}
.cselect__option:hover,
.cselect__option:hover,
.cselect__option.is-selected {
    background: rgba(0,0,0,.06);
    background: #fff5eb;
}
.cselect__native {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
.field--step3 {
    margin-bottom: 0;
}
.field--step3 .label {
    gap: 6px;
}
.field .label-note {
    font-weight: 400;
    color: #6E6E6E;
}
.control-row--step3 {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr) 78px;
    align-items: center;
    gap: 0;
    padding: 0;
    overflow: hidden;
    transition: box-shadow .3s ease;
}
.qty-btn--step3,
.addon-card__qty-btn,
.checkout-extra__btn {
    width: 100%;
    height: var(--qty-height);
    border: 1px solid transparent;
    background: var(--bprimary);
    color: var(--control-text);
    font-weight: 100;
    font-size: var(--qty-font-size);
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.qty-btn--step3 {
    border-radius: 0;
}
.qty-btn--step3:hover,
.addon-card__qty-btn:hover,
.checkout-extra__btn:hover {
    background: var(--bprimary-hover);
}
.qty-btn--step3:active,
.addon-card__qty-btn:active,
.checkout-extra__btn:active {
    background: var(--bprimary-active);
}
.qty-btn--step3.is-disabled,
.qty-btn--step3:disabled {
    background: var(--bprimary);
    color: white;
    cursor: default;
}
.control-row--step3 > .qty-btn--step3:first-child,
.addon-card__qty-btn--dec,
.checkout-extra__btn--dec {
    border-radius: var(--qty-radius) 0 0 var(--qty-radius);
}
.control-row--step3 > .qty-btn--step3:last-child,
.addon-card__qty-btn--inc,
.checkout-extra__btn--inc {
    border-radius: 0 var(--qty-radius) var(--qty-radius) 0;
}
.step3-value {
    height: var(--qty-height);
    border-radius: var(--qty-radius);
    background: #fff;
    white-space: nowrap;
    margin: 0 -15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 18px;
    min-width: 0;
    z-index: 1;
}
.input--step3 {
    width: auto;
    min-width: 2ch;
    max-width: 5ch;
    padding: 0;
    margin: 0;
    border: 0 !important;
    background: transparent !important;
    font-weight: 400;
    font-size: 16px;
    line-height: 1;
    color: #4E4E4E;
    text-align: center;
    box-shadow: none;
    pointer-events: none;
    flex: 0 1 auto;
}
.step3-unit {
    flex: 0 0 auto;
    font-size: 16px;
    line-height: 1;
    color: #4E4E4E;
}
.step3-hint {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    font-size: 16px;
    line-height: 1.25;
    color: #6E6E6E;
}
.step3-hint__icon {
    width: 24px;
    height: 24px;
    border: 1.5px solid #6E6E6E;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    line-height: 1;
    font-weight: 700;
    flex: 0 0 24px;
}

.step3-filling-wrap {
    position: relative;
    z-index: 500;
    cursor: pointer;
}

.step3-filling-popup {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
    z-index: 10;
}
.step3-filling-wrap.is-open .step3-filling-popup {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    transition-delay: 0s;
}
.step3-filling-popup__inner {
    min-height: 100%;
    padding: 10px 24px;
    border-radius: 24px;
    background: white;
    box-shadow: var(--shadow);
    cursor: pointer;
}
.step3-filling,
.step3-filling__name,
.step3-filling__img {
    cursor: pointer;
}
.step3-filling-popup__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.step3-filling-popup__title {
    font-weight: 700;
    font-size: 16px;
    line-height: 1.2;
    color: #303030;
}
.step3-filling-popup__text {
    font-weight: 400;
    font-size: 16px;
    line-height: 1.2;
    color: #4E4E4E;
}
.step3-filling-wrap.is-open .step3-filling {
    border-radius: 44px;
    background: transparent;
    box-shadow: none;
}

.step3-value__num {
    display: inline-block;
    font-size: 16px;
    line-height: 1;
    font-weight: 400;
    color: #4E4E4E;
    text-align: center;
}
.step3-description-text {
    margin-bottom: 28px;
}
.step3-description-text p {
    margin: 0 0 28px;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.35;
    color: #4E4E4E;
}
.step3-description-text h3 {
    margin: 0 0 10px;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.2;
    color: #303030;
}
.step3-accordion {
    border-top: 1px solid transparent;
}
.step3-accordion__item {
    border-bottom: 1px solid #DEB995;
}
.step3-accordion__head {
    width: 100%;
    padding: 10px 0;
    border: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    text-align: left;
    cursor: pointer;
}
.step3-accordion__title {
    font-weight: 700;
    font-size: 16px;
    line-height: 1.2;
    color: #303030;
}
.step3-accordion__icon {
    position: relative;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
}
.step3-accordion__icon::before,
.step3-accordion__icon::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    background: #4E4E4E;
    border-radius: 2px;
    transform: translate(-50%, -50%);
    transition: opacity .2s ease, transform .2s ease;
}
.step3-accordion__icon::before {
    width: 22px;
    height: 2px;
}
.step3-accordion__icon::after {
    width: 2px;
    height: 22px;
}
.step3-accordion__item.is-open .step3-accordion__icon::after {
    opacity: 0;
}
.step3-accordion__body {
    display: grid;
    grid-template-rows: 0fr;
    padding: 0;
    overflow: hidden;
    transition: grid-template-rows .28s ease, padding .28s ease;
}
.step3-accordion__item.is-open .step3-accordion__body {
    grid-template-rows: 1fr;
    padding: 0 0 14px;
}
.step3-accordion__content {
    min-height: 0;
    overflow: hidden;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.35;
    color: #4E4E4E;
}
.step3-accordion__content > * + * {
    margin-top: 4px;
}

.hint-tip {
    position: relative;
    display: inline-flex;
    align-items: center;
    vertical-align: top;
}
.hint-tip__trigger {
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #6E6E6E;
    transition: filter .3s;
    filter: brightness(0.5);
}
.hint-tip__trigger:hover {
    filter: brightness(0.7);
}
.hint-tip__icon {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 24px;
}
.hint-tip__icon svg {
    display: block;
    width: 100%;
    height: 100%;
}
.hint-tip__popup {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    z-index: 100;
    min-width: 240px;
    max-width: 420px;
    padding: 8px;
    background: #FFFFFF;
    border-radius: 14px;
    box-shadow: var(--shadow);
    font-size: 14px;
    line-height: 1.2;
    font-weight: 400;
    color: #4E4E4E;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(6px);
    pointer-events: none;
    transition: opacity .2s, visibility .2s, transform .2s;
}
.hint-tip:hover .hint-tip__popup,
.hint-tip:focus-within .hint-tip__popup,
.hint-tip.is-open .hint-tip__popup {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.field--step3-weight {
    position: relative;
    z-index: 5;
}
.step3-weight-limit-popup {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 120;
    box-sizing: border-box;
    padding: 8px;
    background: #FFFFFF;
    border-radius: 14px;
    box-shadow: var(--shadow);
    font-size: 14px;
    line-height: 1.2;
    font-weight: 400;
    color: #4E4E4E;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    pointer-events: none;
    transition: opacity .2s, visibility .2s, transform .2s;
}
.step3-weight-limit-popup.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
@media (hover: hover) and (pointer: fine) {
    .field--step3-weight.has-weight-min-limit:has([data-step3-dec='weight']:hover) .step3-weight-limit-popup,
    .field--step3-weight.has-weight-min-limit:has([data-step3-dec='weight']:focus-visible) .step3-weight-limit-popup,
    .field--step3-weight.has-weight-max-limit:has([data-step3-inc='weight']:hover) .step3-weight-limit-popup,
    .field--step3-weight.has-weight-max-limit:has([data-step3-inc='weight']:focus-visible) .step3-weight-limit-popup {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
}
.carousel__nav.is-disabled,
.carousel__nav:disabled {
    opacity: .35;
    pointer-events: none;
    cursor: default;
}
.dropdown-select__trigger {
    transition: border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.dropdown-select__trigger:hover {
    border-color: #CBCCCD;
}
.dropdown-select.is-open .dropdown-select__trigger {
    border-color: #DEB995;
}
.checkout-order__extras {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 14px;
}
.addon--step3 {
    margin-top: 36px;
}
.addon--step3 .addon__header {
    margin-bottom: 28px;
}
.addon--step3 .addon__title {
    font-weight: 700;
    font-size: 44px;
    line-height: 110%;
}
.addon--step3 .carousel {
    position: relative;
    display: flex;
    align-items: center;
    gap: 24px;
}
.addon--step3 .carousel__nav {
    position: absolute;
    z-index: 20;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 6px 18px rgba(0,0,0,.10);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .3s ease;
}
.addon--step3 .carousel__nav:hover {
    background: #DEB995;
}
.addon--step3 .carousel__nav:active {
    background: #D6B290;
}
.addon--step3 .carousel__nav:first-of-type {
    left: -10px;
}
.addon--step3 .carousel__nav:last-of-type {
    right: -10px;
}
.addon--step3 .carousel__nav:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(0,0,0,.14);
}
.addon--step3 .carousel__nav.is-disabled,
.addon--step3 .carousel__nav:disabled {
    opacity: .35;
    pointer-events: none;
    box-shadow: none;
}
.addon--step3 .carousel__track {
    flex: 1;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max(200px, calc((100% - 72px) / 4));
    gap: 24px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding: 20px;
}
.addon--step3 .carousel__track::-webkit-scrollbar {
    display: none;
}
.addon-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 380px;
    padding: 18px 18px 16px;
    background: #fff;
    border-radius: 28px;
    overflow: hidden;
    transition: box-shadow .3s ease, border-color .3s ease;
}
.addon-card:hover {
    box-shadow: var(--shadow);
}
.addon-card__img {
    width: 100%;
    aspect-ratio: 1 / 0.86;
    margin-bottom: 18px;
    border-radius: 18px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    flex: 0 0 auto;
}
.addon-card__title {
    font-weight: 700;
    font-size: 16px;
    line-height: 1.2;
    color: #303030;
    margin-bottom: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 3.6em;
}
.addon-card__meta {
    margin-top: auto;
    transition: opacity .22s ease, transform .22s ease;
}
.addon-card__offer {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}
.addon-card__discount {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 14px;
    border-radius: 24px;
    background: #8ebd40;
    color: #fff;
    font-weight: 700;
    font-size: 18px;
    line-height: 1;
    flex: 0 0 auto;
}
.addon-card__pricebox {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.addon-card__old-price {
    color: #8B8B8B;
    text-decoration: line-through;
    font-size: 13px;
    line-height: 1.2;
}
.addon-card__price {
    font-weight: 700;
    font-size: 18px;
    line-height: 1.15;
    color: #303030;
}
.addon-card__note {
    margin-top: 12px;
    font-size: 12px;
    line-height: 1.25;
    color: #8B8B8B;
}
.addon-card__actions {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 16px;
    opacity: 0;
    transform: translateY(14px);
    pointer-events: none;
    transition: opacity .22s ease, transform .22s ease;
}
.addon-card:hover .addon-card__actions,
.addon-card.is-selected .addon-card__actions {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.addon-card:hover .addon-card__meta,
.addon-card.is-selected .addon-card__meta {
    opacity: 0;
    transform: translateY(-12px);
    pointer-events: none;
}
.addon-card__choose {
    width: 100%;
}
.addon-card__qty-control {
    display: none;
    grid-template-columns: 72px minmax(0, 1fr) 72px;
    align-items: center;
    gap: 0;
    overflow: hidden;
    border-radius: 999px;
}
.addon-card.is-selected .addon-card__choose {
    display: none;
}
.addon-card.is-selected .addon-card__qty-control {
    display: grid;
}
.addon-card__qty-btn--dec,
.checkout-extra__btn--dec {
    position: relative;
}
.addon-card__qty-btn--dec.is-remove,
.checkout-extra__btn--dec.is-remove {
    font-size: 0;
}
.addon-card__qty-btn--dec.is-remove::before,
.checkout-extra__btn--dec.is-remove::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url(/pokupatelyam/zakaz-tortov/assets/basket.svg);
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
}
.addon-card__qty-btn--dec.is-remove::before {
    background-size: 18px 18px;
}
.checkout-extra__btn--dec.is-remove::before {
    background-size: 22px 22px;
}
.addon-card__qty-value {
    height: var(--qty-height);
    margin: 0 -16px;
    border-radius: var(--qty-radius);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 18px;
    position: relative;
    z-index: 1;
    white-space: nowrap;
}

.constructor-toast {
    position: fixed;
    left: 50%;
    bottom: 100px;
    transform: translate(-50%, 18px);
    max-width: min(420px, calc(100% - 32px));
    padding: 18px 24px;
    border-radius: 24px;
    background: #fff;
    color: #303030;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.2;
    box-shadow: 0 12px 30px rgba(0,0,0,.14);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 1200;
    transition: opacity .28s ease, transform .28s ease, visibility .28s ease;
}
.constructor-toast.is-show {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.checkout-order__extras {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 14px;
}
.checkout-extra__item {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 20px;
    align-items: center;
    padding: 20px;
    background: white;
    border-radius: 24px;
}
.checkout-extra__img {
    width: 150px;
    height: 125px;
    flex: 0 0 150px;
}
.checkout-extra__content {
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.checkout-extra__title {
    margin-bottom: 12px;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.2;
}
.checkout-extra__offer {
    display: flex;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.checkout-extra__discount {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 14px;
    border-radius: 24px;
    background: #8ebd40;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.2;
}
.checkout-extra__pricebox {
    display: flex;
    flex-direction: column;
}
.checkout-extra__old {
    color: #6E6E6E;
    text-decoration: line-through;
    font-size: 12px;
    line-height: 1.2;
}
.checkout-cart__price-box {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.checkout-extra__price {
    font-weight: 700;
    font-size: 22px;
    line-height: 1.2;
    color: #6E6E6E;
}
.checkout-extra__note {
    margin-bottom: 12px;
    font-weight: 400;
    font-size: 12px;
    line-height: 1.2;
    color: #7A7A7A;
}
.checkout-extra__controls {
    display: grid;
    grid-template-columns: 30% 40% 30%;
    width: 100%;
    max-width: 270px;
    align-items: center;
    gap: 0;
    overflow: hidden;
    border-radius: 24px;
}

.checkout-extra__qty {
    height: var(--qty-height);
    margin: 0 -16px;
    border-radius: var(--qty-radius);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 24px;
    position: relative;
    z-index: 1;
    white-space: nowrap;
    font-weight: 400;
    font-size: 16px;
    line-height: 1;
    color: #4E4E4E;
}
.modal__dialog--promo-warning {
    width: min(590px, calc(100vw - 32px));
    padding: 40px;
    border-radius: 28px;
    gap: 20px;
}
.promo-warning__title {
    font-weight: 700;
    font-size: 32px;
    line-height: 1.1;
    color: #3d3d3d;
    align-self: center;
}
.promo-warning__text {
    font-weight: 400;
    font-size: 16px;
    line-height: 1.2;
}
.promo-warning__list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.checkout-extra__item--promo-modal .checkout-extra__note,
.checkout-extra__item--promo-modal .checkout-extra__price {
    color: #CA3611;
    font-weight: 700;
}
.modal__dialog--promo-warning .checkout-extra__item {
    margin: 0;
}
.mobile-filters-section + .mobile-filters-section {
    margin-top: 24px;
}
.mobile-filters-section__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.mobile-filters-section__title {
    font-size: 14px;
    line-height: 1.2;
    color: #4E4E4E;
    white-space: nowrap;
}
.mobile-filters-section__head::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background: #A9A9A9;
}
.mobile-filters-section__note {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 14px;
    line-height: 1.25;
    color: #666;
}
.mobile-filters-section__note-icon {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    border: 1px solid #888;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1;
}
@media (max-width: 1260px) {
    .addon--step3 .carousel__track {
        grid-auto-columns: max(200px, calc((100% - 48px) / 3));
    }
    .hero__title h1 {
        padding: 20px 40px;
        font-size: 40px;
    }
    .section-title {
        font-size: 40px;
    }
    .hero__text-head,
    .fact__title {
        font-size: 24px;
    }
    .help__block1 {
        font-size: 20px;
    }
    .hero__text {
        font-size: 18px;
    }
    .hero__desc {
        padding: 40px;
    }
    .fact__tile {
        padding: 30px 20px 20px 30px;
    }
    .facts,
    .constructor,
    .help {
        margin-top: 80px;
    }
    .panel__category,
    .panel__filter,
    .chip {
        padding: 10px 24px;
    }
    .grid-cards {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .props {
        gap: 30px;
    }
}

@media (max-width: 991px) {
    main {
        --radius-m: 12px;
        --radius-xl: 20px;
        --mobile-tooltip-container-width: calc(100vw - 40px);
    }
    .modal__title-torts {
        font-size: 28px;
    }
    .step3-row {
        grid-template-columns: 1fr;
    }
    .hint-tip__popup,
    .stepper__skip-popup,
    .step3-weight-limit-popup {
        box-sizing: border-box;
        min-width: 0;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .hint-tip__popup {
        width: max-content;
        max-width: var(--mobile-tooltip-container-width);
    }
    .label:has(.hint-tip) {
        position: relative;
    }
    .label > .hint-tip {
        position: static;
    }
    .label > .hint-tip .hint-tip__popup {
        top: calc(100% + 8px);
        left: 0;
        right: 0;
        width: auto;
        max-width: none;
        transform: translateY(6px);
    }
    .label > .hint-tip.is-open .hint-tip__popup {
        transform: translateY(0);
    }
    .stepper__skip-popup {
        width: auto;
        min-width: 0;
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .hint-tip:not(.is-open):hover .hint-tip__popup,
    .hint-tip:not(.is-open):focus-within .hint-tip__popup,
    .stepper__step.has-skip-tooltip:not(.is-tooltip-open):hover .stepper__skip-popup,
    .stepper__step.has-skip-tooltip:not(.is-tooltip-open):focus-within .stepper__skip-popup {
        opacity: 0;
        visibility: hidden;
        transform: translateY(6px);
    }
    .checkout--order,
    .checkout-order__row--double {
        grid-template-columns: 1fr;
    }
    .checkout-order__summary,
    .checkout-order__form {
        border-radius: 22px;
    }
    .checkout-cart__main {
        align-items: center;
    }
    .checkout-cart__img {
        width: 80px;
        height: 80px;
        flex-basis: 80px;
    }
    .checkout-cart__remove {
        opacity: 1;
    }
    .checkout-extra__img {
        width: 80px;
        height: 80px;
        flex: 0 0 80px;
    }
    .panel__mobile-trigger {
        display: inline-flex;
    }
    .panel[data-panel="1"] > .panel__categories,
    .panel[data-panel="1"] > .panel__filters,
    .panel[data-panel="2"] .fillings-wrap > .chips {
        display: none;
    }
    .grid-cards,
    .grid-fillings {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .grid-cards .cake-big {
        grid-row: auto;
        grid-column: 1 / span 2;
    }
    .cake-card__btn,
    .fill-card__btn {
        position: static;
        left: auto;
        right: auto;
        bottom: auto;
        width: 100%;
        opacity: 1;
        transform: none;
        pointer-events: auto;
        margin-top: auto;
    }
    .cake-card__price {
        opacity: 1;
        transform: none;
    }
    .cake-card__desc,
    .fill-card__text {
        display: none;
    }
    .cake-card__desc::after,
    .fill-card__text::after {
        display: none;
    }
    .cake-card:hover .cake-card__desc,
    .cake-card:hover .cake-card__price,
    .fill-card:hover .fill-card__text {
        opacity: 1;
        transform: none;
    }
    .cake-card:hover .cake-card__btn,
    .fill-card:hover .fill-card__btn {
        transform: none;
    }
    .modal__dialog {
        padding: 32px 20px 20px;
        gap: 20px;
    }
    .modal__dialog--image {
        padding: 16px;
    }
    .image-modal__img {
        min-height: 260px;
    }
    .success-modal__question {
        font-size: 18px;
    }
    .step3-filling-popup__text {
        font-size: 16px;
        line-height: 1.4;
    }
    .step3-description-text {
        margin-bottom: 20px;
    }
    .step3-description-text p {
        margin-bottom: 20px;
        font-size: 15px;
    }
    .step3-accordion__head {
        padding: 16px 0;
    }
    .step3-accordion__title,
    .step3-accordion__content {
        font-size: 15px;
    }
    .addon--step3 {
        padding: 28px 20px;
        border-radius: 28px;
    }
    .addon--step3 .addon__title {
        font-size: 32px;
    }
    .addon--step3 .carousel {
        gap: 14px;
    }
    .addon--step3 .carousel__track {
        grid-auto-columns: max(200px, calc((100% - 24px) / 2));
        gap: 16px;
    }
    .addon-card {
        min-height: auto;
        padding: 16px;
    }
    .addon-card__title {
        font-size: 16px;
        min-height: auto;
    }
    .addon-card__actions {
        position: static;
        opacity: 1;
        transform: none;
        pointer-events: auto;
        margin-top: 14px;
    }
    .addon-card__meta,
    .addon-card:hover .addon-card__meta,
    .addon-card.is-selected .addon-card__meta {
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }
    .addon-card__qty-control {
        grid-template-columns: 64px minmax(0, 1fr) 64px;
    }
    .addon-card__qty-btn,
    .addon-card__qty-value {
        height: 48px;
    }
    .stepper__step.is-disabled .stepper__label,
    .stepper__step.is-disabled .stepper__text,
    .stepper__step.is-available .stepper__label,
    .stepper__step.is-available .stepper__text {
        display: none;
    }
    .stepper__text, .stepper__num,
    .hero__text-head, .fact__title {
        font-size: 20px;
    }
    .stepper__label {
        font-size: 14px;
    }
    .stepper__button,
    .stepper__step {
        width: unset;
        min-width: 48px;
        min-height: 48px;
        padding: 10px 12px;
        align-content: center;
    }
    .stepper__step:not(.is-active) .stepper__head {
        align-self: center;
    }
    .stepper__step.is-prev {
        padding-right: 8px;
    }
    .stepper__step.is-next {
        padding-left: 8px;
    }
    .panel__filters .hint-tip {
        display: none;
    }
    .hero__text ol {
        margin: 12px 0 36px;
    }
    .hero__grid {
        grid-template-columns: .9fr 1.1fr;
    }
    .hero__title {
        font-size: 32px;
    }
    .hero__title h1 {
        padding: 20px;
        font-size: 32px;
    }
    .hero__desc {
        padding: 20px;
    }
    #modal-filters .modal__dialog--filters {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: stretch;

        width: min(520px, calc(100% - 32px));
        max-height: calc(100dvh - 32px);
        margin: 16px auto;
        padding: 0;

        overflow: hidden;
        background: #fff;
        border-radius: 28px;
    }
    @supports not (height: 100dvh) {
        #modal-filters .modal__dialog--filters {
            max-height: calc(100vh - 32px);
        }
    }
    #modal-filters .modal__body {
        width: 100%;
        max-height: calc(100dvh - 32px);

        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;

        padding: 70px 20px;
        box-sizing: border-box;
    }
    @supports not (height: 100dvh) {
        #modal-filters .modal__body {
            max-height: calc(100vh - 32px);
        }
    }
    #modal-filters .modal__title-torts {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        z-index: 5;

        padding: 24px 48px 36px 20px;
        box-sizing: border-box;

        background: linear-gradient(
                to bottom,
                rgba(255, 255, 255, 1) 0%,
                rgba(255, 255, 255, 0.98) 48%,
                rgba(255, 255, 255, 0.78) 72%,
                rgba(255, 255, 255, 0) 100%
        );

        pointer-events: none;
    }
    #modal-filters .modal__close {
        z-index: 7;
    }
    #modal-filters .modal__footer {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 5;

        width: 100%;
        margin: 0;
        padding: 48px 20px 20px;
        box-sizing: border-box;

        background: linear-gradient(
                to top,
                rgba(255, 255, 255, 1) 0%,
                rgba(255, 255, 255, 0.98) 52%,
                rgba(255, 255, 255, 0.76) 76%,
                rgba(255, 255, 255, 0) 100%
        );

        pointer-events: none;
    }
    #modal-filters .modal__footer .btn {
        pointer-events: auto;
    }
}

@media (max-width: 767px) {
    .facts, .constructor, .help {
        margin-top: 60px;
    }
    .hero__grid {
        grid-template-columns: 1fr;
        border-radius: var(--radius-xl);
        background-color: var(--accent);
    }
    .hero__image {
        height: unset;
        width: 90%;
        aspect-ratio: 27 / 26;
        justify-self: center;
    }
    .hero__title h1,
    .hero__desc {
        background-color: unset;
        border-radius: unset;
    }
    .decor-photo__img,
    .decor-photo__img::before {
        border-radius: 120px 0 120px 0;
    }
    .modal__dialog {
        width: min(100% - 24px, 560px);
    }
    .modal__close {
        right: 14px;
        top: 14px;
    }
    .modal__dialog--promo-warning {
        width: calc(100vw - 20px);
        padding: 24px 18px 20px;
        border-radius: 24px;
    }
    .modal__title-torts {
        font-size: 26px;
    }
    .filling-modal__text {
        font-size: 14px;
    }
    .step3-price__current {
        font-size: 20px;
    }
    .step3-price__discount {
        font-size: 16px;
    }
    .hero__text ol {
        margin: 12px 0 0;
    }
    .step3-title {
        font-size: 16px;
    }
    .stepper__skip-popup {
        min-width: 150px;
    }
    .filling-modal__img {
        padding: 36px 14px;
    }
    .filling-modal {
        gap: 24px;
        grid-template-columns: 1fr;
    }
    .nutri {
        grid-template-columns: repeat(2, 1fr);
    }
    .props {
        grid-template-columns: 1fr;
    }
    .segmented__btn {
        flex: 1;
    }
    .promo-warning__title {
        margin-bottom: 16px;
        font-size: 28px;
        line-height: 1.1;
    }
    .promo-warning__text {
        margin-bottom: 20px;
        font-size: 16px;
    }
    .promo-warning__list {
        gap: 14px;
    }
    .section-title {
        font-size: 32px;
    }
    .panel__title {
        font-size: 22px;
    }
    .panel-wrap {
        padding: 16px;
    }
    .grid-cards {
        gap: 12px;
    }
    .hero__cta--desktop {
        display: none;
    }
    .hero__cta--mobile {
        display: flex;
        width: auto;
        margin: 16px 20px 20px;
    }
    .facts__grid {
        display: grid;
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 80%;
        gap: 12px;

        overflow-x: auto;
        overflow-y: hidden;

        --facts-side-offset: 16px;
        width: calc(100% + var(--facts-side-offset) * 2);
        margin-inline: calc(var(--facts-side-offset) * -1);
        padding-inline: var(--facts-side-offset);

        scroll-padding-inline: var(--facts-side-offset);
        scroll-snap-type: x mandatory;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .facts__grid::-webkit-scrollbar {
        display: none;
    }
    .fact__tile {
        min-height: 160px;
        padding: 24px 16px 16px 20px;
        scroll-snap-align: center;
        scroll-snap-stop: always;
    }
    .fact__tile:first-child {
        scroll-snap-align: start;
    }
    .fact__tile:last-child {
        scroll-snap-align: end;
    }
    .fact__title {
        font-size: 22px;
    }
    .fact__text {
        font-size: 14px;
    }
    .help__body {
        flex-direction: column;
        gap: 20px;
    }
    .help__head-left {
        width: 60%;
    }
    .help__block2 {
        margin: 12px 0;
    }
    .modal__dialog--design-change {
        width: min(100% - 24px, 760px);
        padding: 32px 20px;
    }
    .modal__dialog--design-change .modal__title-torts {
        padding-right: 28px;
        font-size: 24px;
    }
    .design-change-modal__text {
        font-size: 16px;
    }
    .restore-modal__actions {
        grid-template-columns: 1fr;
    }
    .modal__dialog--cart-remove {
        padding: 28px 24px;
        gap: 18px;
    }
    .cart-remove-modal__actions {
        grid-template-columns: 1fr 1fr;
    }
    .cart-remove-modal__actions .btn {
        padding-left: 12px;
        padding-right: 12px;
    }
    .stepper__cart-badge {
        top: -6px;
        right: -6px;
        min-width: 20px;
        height: 20px;
        padding: 0;
        font-size: 14px;
    }
    .modal__dialog--filters .panel__category, .modal__dialog--filters .panel__filter, .modal__dialog--filters .chip {
        padding: 12px 16px;
    }
    .props .btn--primary {
        width: 100%;
    }
}
@media (max-width: 640px) {
    main {
        --mobile-tooltip-container-width: calc(100vw - 32px);
    }
    .hero {
        margin-top: 12px;
    }
    .container {
        width: calc(100% - 32px);
    }
    .section-title,
    .hero__title h1 {
        font-size: 26px;
        line-height: 110%;
    }
    .hero__title h1,
    .hero__desc {
        padding-bottom: 8px;
    }
    .help__head-left .section-title,
    .help__body {
        padding: 20px;
    }
    .stepper__step {
        padding: 4px 6px;
    }
    .stepper__step.is-active {
        padding: 8px;
    }
    .grid-fillings {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .addon--step3 .carousel__nav {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
        font-size: 34px;
    }
    .addon--step3 .carousel__track {
        grid-auto-columns: minmax(220px, 82vw);
    }
    .constructor-toast {
        padding: 16px 18px;
        font-size: 14px;
        border-radius: 18px;
        text-align: center;
    }
    .checkout-cart__item,
    .checkout-extra__item {
        padding: 8px;
    }
    .checkout-extra__controls {
        grid-template-columns: minmax(60px, 30%) minmax(auto, 40%) minmax(60px, 30%);
    }
    .checkout-cart__meta span {
        padding: 0 8px;
    }
    .btn--primary, .btn--secondary {
        padding: 8px 24px;
        min-height: 40px;
    }
    .cake-card__title,
    .cake-card__price,
    .cake-card__btn {
        font-size: 14px;
    }
}
/* End */
/* /pokupatelyam/zakaz-tortov/style.css?178068177077194 */