@import url(https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap);


:root {
  /* Typography */
  --font-family: Inter, sans-serif;
  --font-size-title-xl: 24px;
  --font-size-title-lg: 22px;
  --font-size-title-md: 20px;
  --font-weight-title: 800;
  --font-size-body: 16px;
  --font-size-body-sm: 15px;
  --font-size-label: 12px;
  --font-size-input: 20px;
  --font-size-button: 16px;
  --auth-sdk-button-font-size: 16px;
  --auth-sdk-button-slot-height: 48px;
  --auth-sdk-button-border-radius: 17px;
  --font-size-button-sms: 14px;
  --line-height-button: 20px;
  --line-height-button-sms: 18px;
  --font-weight-input: 700;
  --font-weight-button: 600;

  /* Base palette */
  --color-bg: #f3efea;
  --color-text: #111111;
  --color-text-primary: #000000;
  --color-text-secondary: #9e9b98;
  --color-text-muted: #90908f;
  --color-text-input: #505050;
  --color-catalog-section-title: #5b514c;
  --color-label: #aeaeae;
  --color-border-input: #e1e1e1;
  --color-line: hsla(30, 3%, 53%, 0.2);
  --color-primary: #c45c26;

  /* Buttons */
  --color-button-primary-bg: #fce000;
  --color-button-primary-text: #21201f;
  --color-button-disabled-bg: #f7f6f6;
  --color-button-disabled-text: #90908f;
  --color-button-minor-bg: #efeeec;
  --color-button-yandex-bg: #000000;
  --color-button-yandex-text: #ffffff;
  --color-button-vk-bg: #0077ff;
  --color-button-vk-text: #ffffff;

  /* Auth MAX */
  --auth-max-gradient: linear-gradient(135deg, #44ccff 0%, #5533ee 66%, #9933dd 100%);
  --auth-max-icon-size: 26px;

  /* Modal */
  --modal-overlay-bg: #00000052;
  --modal-sheet-bg: #ffffff;
  --modal-sheet-radius: 30px;
  --modal-z-index: 30;
  --message-modal-z-index: calc(var(--modal-z-index) + 20);
  --modal-close-size: 46px;
  --modal-close-size-sm: 40px;
  --modal-close-icon-size: 24px;
  --modal-close-icon-size-sm: 16px;
  --modal-close-shadow: 0 0 40px 12px rgba(78, 78, 78, 0.1);

  /* Auth modal layout */
  --auth-modal-width: 415px;
  --auth-modal-height: 565px;
  --auth-modal-phone-max-height: 550px;
  --auth-modal-sms-code-min-height: 510px;
  --auth-modal-height-mobile: 65vh;
  --auth-modal-height-mobile-small: 80vh;
  --auth-modal-height-mobile-xxs: 90vh;
  --auth-modal-phone-width: 262px;
  --auth-modal-phone-height: 60px;
  --auth-modal-phone-radius: 12px;
  --auth-modal-sms-code-width: 262px;
  --auth-modal-sms-code-height: 68px;
  --auth-modal-sms-code-radius: 20px;

  /* Spacing */
  --space-popup-xl: 30px;
  --space-popup-lg: 20px;
  --space-content-md: 15px;
  --space-footer-gap: 15px;
  --space-sep-text-padding: 35px;

  /* Motion */
  --motion-duration-modal: 300ms;
  --auth-view-transition-duration: 180ms;
  --motion-duration-button: 450ms;
  --motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);

  /* Address modal (aligned with legacy site tokens) */
  --address-modal-width: 1050px;
  --address-modal-height: 590px;
  --address-modal-details-mobile-height: 52dvh;
  --address-modal-sheet-overlap: 16px;
  --address-modal-map-mobile-height: calc(100dvh - var(--address-modal-details-mobile-height) + var(--address-modal-sheet-overlap));
  --address-order-type-root-offset: 15px;
  --address-map-chrome-top: calc(var(--address-order-type-root-offset) + var(--order-type-switcher-height));
  --address-pin-anchor-height: 68px;
  --address-map-bottom-inset: 0;
  --address-map-placeholder-bg: #eeeeee;
  --address-input-bg: rgba(129, 119, 99, 0.1);
  --address-input-height: 53px;
  --address-input-radius: 15px;
  --address-input-font-size: 15px;
  --address-details-padding-x: 20px;
  --address-action-size: 46px;
  --address-btn-height: 53px;
  --address-accent-hover: #ae8755;
  --address-shadow-top: 0 -4px 20px rgba(0, 0, 0, 0.12);
  --address-shadow-bottom: 0 8px 20px rgba(0, 0, 0, 0.12);
  --order-type-switcher-width: 256px;
  --order-type-switcher-height: 52px;
  --order-type-switcher-padding: 3px;
  --order-type-switcher-thumb-bg: #fce000;
  --order-type-switcher-cart-bg: #e5e3df;
  --order-type-switcher-cart-radius: 20px;
  --order-type-switcher-cart-thumb-radius: calc(
    var(--order-type-switcher-cart-radius) - var(--order-type-switcher-padding)
  );
  --address-suggest-icon-color: #9e9b98;

  /* Main page layout */
  --main-content-width: 1120px;
  --main-catalog-width: 755px;
  --main-cart-width: 325px;
  --main-column-gap: 40px;
  --font-size-cart-title: 28px;
  --line-height-cart-title: 32px;
  --font-weight-cart-title: 700;
  --cart-section-header-padding-top: 20px;
  --cart-section-gap: 14px;
  --cart-section-order-chrome-gap: 10px;
  --cart-section-delivery-info-padding-top: 12px;
  --cart-section-items-padding-top: 12px;
  --cart-section-checkout-btn-height: 52px;
  --cart-section-checkout-bottom-offset: 50px;
  /* Breathing room над sticky/fixed низом (mobile); см. pageScrollSafeZoneLogic.cjs */
  --page-bottom-safe-gap: 48px;
  /* Body уже с safe-area padding — иначе 100dvh даёт вечный scroll на iPhone PWA */
  --app-page-min-height: calc(
    100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)
  );
  --cart-floating-btn-height: 52px;
  --cart-floating-btn-radius: 100px;
  --cart-floating-btn-gap: 12px;
  --cart-floating-btn-padding-left: 24px;
  --cart-floating-btn-padding-right: 20px;
  --cart-floating-btn-icon-size: 24px;
  --cart-floating-btn-offset-x: 16px;
  --cart-floating-btn-offset-y: 16px;
  --cart-floating-btn-z-index: 20;
  --cart-floating-btn-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  --color-cart-eta: #5f9f52;
  --delivery-fee-progress-accent: #206f5c;
  --delivery-fee-progress-bg: #e8e6e2;
  --delivery-fee-progress-track-bg: rgba(255, 255, 255, 0.85);
  --delivery-fee-progress-height: 36px;
  --cart-section-delivery-pin-size: 28px;
  --cart-item-media-size: 56px;
  --cart-item-media-radius: 12px;
  --cart-item-gap: 10px;
  --cart-item-body-padding-top: 3px;
  --cart-item-modifier-font-size: 14px;
  --cart-item-modifier-sign-gap: 4px;
  --cart-item-price-margin-top: 8px;
  --cart-item-row-gap: 24px;
  --cart-item-stepper-gap: 6px;
  --cart-item-stepper-btn-size: 24px;
  --cart-item-placeholder-bg: #e8e4df;
  --main-page-bg: #f3efea;
  --catalog-tabs-gap: 8px;
  --catalog-tabs-chip-radius: 12px;
  --catalog-tabs-padding-top: 12px;
  --catalog-tabs-padding-bottom: 10px;
  --catalog-tabs-scroll-gap: 8px;
  --catalog-tabs-chip-height: 36px;
  --catalog-tabs-sticky-offset-top: 0px;
  --catalog-tabs-compact-bar-height: 68px;
  --catalog-tabs-sticky-height: calc(
    var(--catalog-tabs-padding-top) + var(--catalog-tabs-chip-height) + var(--catalog-tabs-scroll-gap) + var(--catalog-tabs-padding-bottom)
  );
  --catalog-section-title-margin-bottom: 20px;
  --breakpoint-layout-mobile: 865px;
  --breakpoint-layout-cart: 1150px;

  /* Breakpoints (for reference in media queries) */
  --breakpoint-modal-mobile: 865px;
  --breakpoint-modal-narrow: 380px;
  --breakpoint-modal-animation-mobile: 786px;

  /* Dish modal */
  --dish-modal-width: 800px;
  --dish-modal-height: 500px;
  --dish-modal-desktop-width: 1060px;
  --dish-modal-desktop-height: 575px;
  --dish-modal-desktop-inset: 25px;
  --dish-modal-desktop-body-padding-top: 35px;
  --dish-modal-desktop-image-radius: var(--modal-sheet-radius);
  --dish-modal-scrollbar-size: 6px;
  --dish-modal-scrollbar-thumb: rgba(91, 81, 76, 0.26);
  --dish-modal-scrollbar-thumb-hover: rgba(91, 81, 76, 0.4);
  --dish-modal-mobile-padding: var(--space-content-md);
  --dish-modal-media-mobile-height: min(40dvh, 100vw);
  --dish-modal-body-radius: var(--modal-sheet-radius);
  --dish-modal-body-overlap: var(--dish-modal-body-radius);
  --dish-modal-body-padding-bottom: 70px;
  --dish-modal-add-btn-min-width: 235px;
  --dish-modal-add-btn-height: 52px;
  --dish-modal-add-btn-gap: 8px;
  --dish-modal-add-btn-gradient: linear-gradient(190deg, #fadea7 0%, #dabb7d 50%, #ae8755 100%);
  --pwa-ptr-loader-gradient: linear-gradient(190deg, #e8c078 0%, #c49452 50%, #8f6434 100%);
  --pwa-ptr-z-index: 25;
  --dish-modal-footer-padding-bottom: 8px;
  --dish-modal-title-padding-top: 4px;
  --dish-modal-description-margin-top: 6px;
  --dish-modal-nutrition-link-margin-top: 12px;
  --dish-modal-nutrition-link-gap: 2px;
  --dish-modal-remove-section-margin-top: 30px;
  --dish-modal-remove-title-font-size: 17px;
  --dish-modal-remove-title-margin-bottom: 15px;
  --dish-modal-remove-help-btn-size: 22px;
  --dish-modal-remove-help-icon-size: 18px;
  --dish-modal-remove-help-bg: #5b514c;
  --dish-modal-remove-help-tooltip-offset: 6px;
  --dish-modal-remove-help-tooltip-padding: 6px 9px;
  --dish-modal-remove-help-tooltip-radius: 8px;
  --dish-modal-remove-help-tooltip-font-size: 14px;
  --dish-modal-remove-help-tooltip-max-width: 290px;
  --dish-modal-remove-gap: 8px;
  --dish-modal-remove-chip-height: 36px;
  --dish-modal-remove-chip-radius: 999px;
  --dish-modal-remove-chip-bg: #f4f1ec;
  --dish-modal-remove-chip-bg-hover: #ece7df;
  --dish-modal-remove-chip-text: var(--color-catalog-section-title);
  --dish-modal-remove-chip-text-selected: var(--color-text-muted);
  --dish-modal-remove-chip-strike: #b5b2ae;
  --dish-modal-remove-chip-motion-duration: 160ms;
  --dish-modal-remove-chip-motion-delay: 45ms;
  --dish-modal-remove-skeleton-bg: rgba(91, 81, 76, 0.1);

  /* Add modifier cards */
  --add-modifier-card-radius: 20px;
  --add-modifier-card-bg: #f4f1ec;
  --add-modifier-card-bg-selected: var(--color-catalog-section-title);
  --add-modifier-card-text-selected: var(--color-bg);
  --add-modifier-card-media-height: 96px;
  --add-modifier-card-image-size: 96px;
  --add-modifier-card-name-font-size: 14px;
  --add-modifier-card-name-price-gap: 30px;
  --add-modifier-card-price-font-size: 15px;
  --add-modifier-card-footer-height: 32px;
  --add-modifier-card-counter-btn-size: 32px;
  --add-modifier-card-counter-btn-radius: 10px;
  --add-modifier-card-counter-btn-bg: var(--add-modifier-card-bg);
  --add-modifier-card-counter-icon-size: 14px;
  --add-modifier-card-counter-gap: 8px;
  --add-modifier-card-counter-max-width: 132px;
  --add-modifier-card-counter-value-font-size: 16px;
  --add-modifier-card-select-duration: 250ms;
  --dish-modal-add-section-margin-top: 30px;
  --dish-modal-add-title-margin-bottom: 15px;
  --dish-modal-add-title-font-size: 17px;
  --dish-modal-add-grid-gap: 10px;
  --dish-modal-add-skeleton-bg: rgba(91, 81, 76, 0.1);
  --dish-modal-nutrition-margin-top: 30px;
  --dish-modal-nutrition-card-bg: #f4f1ec;
  --dish-modal-nutrition-card-radius: 20px;
  --dish-modal-nutrition-card-padding: 18px 20px 18px;
  --dish-modal-nutrition-toggle-gap: 8px;
  --dish-modal-nutrition-toggle-font-size: var(--font-size-body-sm);
  --dish-modal-nutrition-value-font-size: 18px;
  --dish-modal-nutrition-label-font-size: 13px;
  --dish-modal-nutrition-grid-gap: 40px;

  /* PWA Install redesign (iOS) */
  --pwa-install-bg-base: #f3efea;
  --pwa-install-bg-warm: #faf6f0;
  --pwa-install-bg-cool: #f0f4f2;
  --pwa-install-page-bg:
    radial-gradient(ellipse 120% 80% at 100% 0%, rgba(252, 224, 0, 0.14) 0%, transparent 55%),
    radial-gradient(ellipse 90% 70% at 0% 100%, rgba(158, 201, 180, 0.18) 0%, transparent 50%),
    radial-gradient(ellipse 70% 50% at 50% 40%, rgba(218, 187, 125, 0.10) 0%, transparent 60%),
    linear-gradient(180deg, var(--pwa-install-bg-warm) 0%, var(--pwa-install-bg-base) 45%, var(--pwa-install-bg-cool) 100%);
  --pwa-install-step-shadow: drop-shadow(0 15px 40px rgba(91, 81, 76, 0.08));
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    height: 100%;
    font-family: Inter, sans-serif;
}

body {
    margin: 0;
    min-height: 100%;
    font-family: inherit;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: var(--color-bg, #fff);
    color: var(--color-text, #111);
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom)
        env(safe-area-inset-left);
}

#splash,
.splash {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f3efea;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom)
        env(safe-area-inset-left);
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.splash--hide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.splash__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--splash-logo-spinner-gap, 36px);
}

.splash__logo {
    display: block;
    width: min(72vw, 12.5rem);
    height: auto;
    max-height: 40vh;
}

.splash__spinner {
    flex: 0 0 auto;
    width: var(--splash-spinner-size, 32px);
    height: var(--splash-spinner-size, 32px);
    border: var(--splash-spinner-border, 2.5px) solid rgba(138, 135, 132, 0.28);
    border-top-color: #8a8784;
    border-radius: 50%;
    box-sizing: border-box;
    animation: splash-spin var(--splash-spinner-spin, 0.85s) linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
    .splash__spinner {
        animation: none;
        border-top-color: rgba(138, 135, 132, 0.28);
        border-right-color: #8a8784;
    }
}

/*
 * iOS Safari не поддерживает screen.orientation.lock() и может игнорировать
 * apple-mobile-web-app-orientations. В landscape контент поворачиваем обратно.
 */
html.pwa-portrait-lock.pwa-portrait-lock--landscape {
    position: fixed;
    top: 100%;
    left: 0;
    overflow: hidden;
    width: 100vh;
    width: 100dvh;
    height: 100vw;
    height: 100dvw;
    transform: rotate(-90deg);
    transform-origin: left top;
}

html.pwa-portrait-lock.pwa-portrait-lock--landscape body {
    width: 100vh;
    width: 100dvh;
    min-height: 100vw;
    min-height: 100dvw;
    overflow-x: hidden;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: var(--modal-overlay-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: var(--modal-z-index);
}

.modal-sheet {
  position: relative;
  background-color: var(--modal-sheet-bg);
  border-radius: var(--modal-sheet-radius);
}

.modal-sheet__close {
  position: relative;
  border: none;
  font-family: inherit;
  margin: 0;
  padding: 0;
  background-color: var(--modal-sheet-bg);
  background-image: var(--modal-close-icon-url);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--modal-close-icon-size) var(--modal-close-icon-size);
  box-shadow: var(--modal-close-shadow);
  border-radius: 50%;
  width: var(--modal-close-size);
  height: var(--modal-close-size);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
}

@media screen and (max-width: 865px) {
  .modal-overlay {
    align-items: flex-end;
  }
}

@media screen and (max-width: 380px) {
  .modal-sheet__close {
    width: var(--modal-close-size-sm);
    height: var(--modal-close-size-sm);
    background-size: var(--modal-close-icon-size-sm) var(--modal-close-icon-size-sm);
  }
}

.address-modal button {
  border: none;
  font-family: inherit;
  margin: 0;
  cursor: pointer;
}

.address-modal input {
  border: none;
  outline: none;
  font-family: inherit;
  margin: 0;
}

.address-modal {
  position: relative;
  width: var(--address-modal-width);
  height: var(--address-modal-height);
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
  margin: 0 var(--space-content-md);
  transition: var(--motion-duration-modal);
}

.address-modal__details {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 45%;
  padding: 30px var(--address-details-padding-x);
  z-index: 3;
  overflow: hidden;
}

.address-modal__details-host {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.address-modal__map-host {
  position: relative;
  width: 100%;
  height: 100%;
}

.address-modal__details-scroll {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.address-modal__details-scroll::-webkit-scrollbar {
  display: none;
}

.address-modal__map {
  position: relative;
  display: flex;
  width: 55%;
  background: var(--address-map-placeholder-bg);
  overflow: hidden;
}

.address-modal .modal-sheet__close {
  position: absolute;
}

@media screen and (min-width: 866px) {
  .address-modal > .modal-sheet__close {
    top: calc(var(--space-popup-xl) - 10px);
    right: calc(var(--space-popup-xl) - 10px);
  }
}

.address-modal__title {
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--font-size-title-xl);
  font-weight: var(--font-weight-title);
  white-space: nowrap;
}

.address-modal__title-row {
  display: flex;
  align-items: center;
  gap: 20px;
}

.address-modal__back {
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background-color: var(--color-text-primary);
  background-image: none;
  mask-image: var(--address-modal-back-icon-url);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 28px 28px;
  -webkit-mask-image: var(--address-modal-back-icon-url);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 28px 28px;
  cursor: pointer;
  flex-shrink: 0;
}

.address-modal__description {
  text-wrap: balance;
  color: var(--color-text-secondary);
  font-size: var(--font-size-body);
  margin-top: 3px;
}

.address-modal__fields {
  display: flex;
  flex-direction: column;
  gap: 15px;
  flex-grow: 1;
  margin-top: 30px;
}

.address-modal__address-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: var(--address-input-height);
  padding: 0 15px 0 12px;
  background: var(--address-input-bg);
  border: 1px solid transparent;
  border-radius: var(--address-input-radius);
  overflow: hidden;
}

.address-modal__address-input-wrap:focus-within {
  border-color: var(--color-button-primary-bg);
}

.address-modal__address-input-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
}

.address-modal__address-input {
  width: 100%;
  font-size: var(--address-input-font-size);
  font-weight: 500;
  color: var(--color-text-input);
  background: transparent;
  text-overflow: ellipsis;
}

.address-modal__address-input-clear {
  width: 30px;
  height: 30px;
  padding: 0;
  flex-shrink: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
  cursor: pointer;
}

.address-modal__details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.address-modal__details-grid > :last-child {
  grid-column: 1 / -1;
}

.address-modal__field-wrap {
  position: relative;
  flex-grow: 1;
}

.address-modal__field {
  border-radius: var(--address-input-radius);
  width: 100%;
  height: var(--address-input-height);
  padding: 0 15px;
  font-size: var(--address-input-font-size);
  font-weight: 500;
  color: var(--color-text-input);
  background: var(--address-input-bg);
  border: 1px solid transparent;
  box-sizing: border-box;
}

.address-modal__field-label {
  position: absolute;
  top: calc(50% - 11px);
  left: 15px;
  color: #a5a5a5;
  transition: 0.3s;
  pointer-events: none;
}

.address-modal__field:focus {
  border-color: var(--color-button-primary-bg);
}

.address-modal__field:focus,
.address-modal__field:not(:focus):valid {
  padding: 14px 15px 0;
}

.address-modal__field:focus ~ .address-modal__field-label,
.address-modal__field:not(:focus):valid ~ .address-modal__field-label {
  top: 5px;
  font-size: 11px;
}

.address-modal__suggests {
  display: none;
  flex-direction: column;
  width: 100%;
  max-height: 285px;
  padding-bottom: 30px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.address-modal__suggests--open {
  display: flex;
}

.address-modal__suggest {
  padding: 0;
  margin: 0;
  width: 100%;
  text-align: left;
  background: transparent;
  cursor: pointer;
}

.address-modal__suggest-row {
  display: flex;
  align-items: center;
  max-height: 62px;
  padding-right: 16px;
  overflow: hidden;
  white-space: nowrap;
}

.address-modal__suggest-icon-wrap {
  width: 62px;
  height: 62px;
  min-width: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.address-modal__suggest-icon-circle {
  width: 14px;
  height: 14px;
  border: 3px solid var(--address-suggest-icon-color);
  border-radius: 50%;
}

.address-modal__suggest-data {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

.address-modal__suggest-title {
  font-size: 15px;
  color: var(--color-text-primary);
}

.address-modal__suggest-subtitle {
  margin-top: -2px;
  font-size: 13px;
  color: var(--address-suggest-icon-color);
}

.address-modal__suggest-sep {
  height: 1px;
  border: none;
  background: var(--color-line);
  margin: 0 16px 0 62px;
}

.address-modal__suggest:last-of-type .address-modal__suggest-sep {
  display: none;
}

.address-modal__footer {
  position: sticky;
  bottom: 0;
  width: 100%;
  min-height: 60px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  background: var(--modal-sheet-bg);
  margin-top: auto;
  padding-top: 10px;
}

.address-modal__footer::before {
  position: absolute;
  top: -21px;
  display: block;
  content: '';
  width: 100%;
  height: 21px;
  background: linear-gradient(to top, var(--modal-sheet-bg) 10%, rgba(255, 255, 255, 0));
}

.address-modal__footer-actions {
  display: flex;
  gap: var(--space-footer-gap);
  width: 100%;
}

.address-modal__footer-actions .address-modal__btn {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
}

.address-modal__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--address-btn-height);
  padding: 0 20px;
  font-size: var(--font-size-button);
  line-height: var(--line-height-button);
  font-weight: var(--font-weight-button);
  border-radius: 17px;
  background: var(--color-button-primary-bg);
  color: var(--color-button-primary-text);
  transition:
    background-color var(--motion-duration-button) var(--motion-easing-standard),
    color var(--motion-duration-button) var(--motion-easing-standard);
}

.address-modal__btn.address-modal__btn--delete {
  background: var(--color-button-minor-bg);
  color: var(--color-text-secondary);
}

.address-modal__btn--disabled {
  background: var(--color-button-disabled-bg) !important;
  color: var(--color-button-disabled-text) !important;
  cursor: default;
}

.address-modal__btn:disabled {
  background: var(--color-button-disabled-bg);
  color: var(--color-button-disabled-text);
  cursor: not-allowed;
}

.address-modal__btn--loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.address-modal__btn--loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid rgba(33, 32, 31, 0.2);
  border-top-color: var(--color-button-primary-text);
  border-radius: 50%;
  animation: address-modal-btn-spin 0.8s linear infinite;
}

@keyframes address-modal-btn-spin {
  to {
    transform: rotate(360deg);
  }
}

.address-modal__restaurants {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
}

.address-modal__restaurant-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 0;
  padding: 14px 0;
  text-align: left;
  background: transparent;
  border-bottom: 1px solid var(--color-line);
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.address-modal__restaurant-item:last-of-type {
  border-bottom: none;
}

.address-modal__restaurant-item:hover {
  transform: translate3d(4px, 0, 0);
}

.address-modal__restaurant-item:hover .address-modal__restaurant-name {
  color: var(--address-accent-hover);
}

.address-modal__restaurant-col {
  display: flex;
  flex-direction: column;
}

.address-modal__restaurant-name {
  font-size: 17px;
  font-weight: 600;
  transition: color 0.25s ease-out;
  color: var(--color-text-primary);
}

.address-modal__restaurant-address {
  margin-top: 5px;
  font-size: 15px;
  color: var(--color-text-secondary);
}

.address-modal__restaurant-time {
  color: var(--color-text-secondary);
  font-size: var(--font-size-body-sm);
}

.address-modal__restaurant-time--muted {
  color: #ff4d4d;
}

.address-modal__restaurant-next {
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 17px 17px;
}

.address-modal__operability-notice {
  margin: 20px 0 0;
  width: 100%;
}

.address-modal__operability-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-button);
  line-height: 1.4;
  color: #ff4d4d;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--motion-duration-button) var(--motion-easing-standard);
}

.address-modal__operability-link:hover {
  color: #e04444;
}

.address-modal__operability-link:focus-visible {
  outline: 2px solid #ff4d4d;
  outline-offset: 2px;
  border-radius: 4px;
}

.address-modal__operability-link-icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  mask-image: var(--address-modal-operability-link-icon-url);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: var(--address-modal-operability-link-icon-url);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  transform: rotate(180deg);
}

.address-modal__restaurant-detail {
  display: flex;
  flex-direction: column;
  margin-top: 30px;
  margin-bottom: auto;
  padding-bottom: 70px;
}

.address-modal__info-item {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  width: 100%;
}

.address-modal__info-item:last-of-type {
  margin-bottom: 0;
}

.address-modal__info-icon {
  width: 25px;
  height: 25px;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 25px 25px;
}

.address-modal__info-text {
  font-size: var(--font-size-body-sm);
  color: var(--color-text-primary);
}

.address-modal__schedule-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.address-modal__schedule-row {
  display: flex;
  justify-content: space-between;
  padding-right: 10px;
  font-size: var(--font-size-body-sm);
  color: var(--color-text-primary);
}

.address-modal__schedule-row--today {
  color: var(--address-accent-hover);
  font-weight: var(--font-weight-button);
}

.address-modal__schedule-hours--off {
  color: var(--color-text-muted);
}

.address-modal__schedule-unset {
  margin: 0;
  font-size: var(--font-size-body-sm);
  color: var(--color-text-muted);
  line-height: 1.4;
}

.address-modal__empty {
  margin-top: 20px;
  color: var(--color-text-secondary);
  font-size: var(--font-size-body-sm);
}

/* Map placeholder */
.address-modal__map-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
}

.address-modal__map-loading {
  position: absolute;
  inset: 0;
  background: var(--address-map-placeholder-bg);
}

.address-modal__map-canvas {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: var(--address-map-bottom-inset);
  width: 100%;
  height: auto;
}

.address-modal__map-error {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 3;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--color-text-secondary);
  font-size: var(--font-size-body-sm);
  box-shadow: var(--address-shadow-bottom);
}

.address-modal__map-overlay {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: var(--address-map-bottom-inset);
  z-index: 2;
  pointer-events: none;
}

.address-modal__map-overlay--hidden {
  display: none;
}

.address-modal__details-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  color: var(--color-text-secondary);
  font-size: 14px;
}

.address-modal__restaurant-marker {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #5b514c;
  border: 3px solid #fff;
  box-shadow: 0 4px 12px rgba(91, 81, 76, 0.35);
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: box-shadow 0.2s ease;
}

.address-modal__restaurant-marker-icon {
  width: 15px;
  height: 15px;
  display: block;
  pointer-events: none;
  user-select: none;
}

.address-modal__restaurant-marker--active {
  background: linear-gradient(180deg, #fadea7 0%, #dabb7d 50%, #ae8755 100%);
  box-shadow: 0 6px 16px rgba(174, 135, 85, 0.5);
}

.address-modal__pin-root {
  position: absolute;
  left: 50%;
  top: calc((100% + var(--address-map-chrome-top)) / 2);
  display: flex;
  align-items: center;
  flex-direction: column;
  transform: translate(-50%, calc(var(--address-pin-anchor-height) * -1));
}

.address-modal__pin-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transition: 0.3s;
}

.address-modal__pin-cube1 {
  width: 44px;
  height: 44px;
  background: #fff;
  border-radius: 15px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
}

.address-modal__pin-cube2 {
  width: 36px;
  height: 36px;
  background: #21201f;
  border-radius: 11px;
}

.address-modal__pin-leg {
  width: 3px;
  height: 24px;
  background: #21201f;
  border-radius: 8px;
}

.address-modal__pin-shadow {
  width: 12px;
  height: 5px;
  background: rgba(54, 54, 54, 0.25);
  border-radius: 50%;
  transform: translateY(-25%);
  transition: 0.3s;
}

.address-modal__pin-wrap--lifted {
  transform: translateY(-25%);
}

.address-modal__pin-shadow--lifted {
  transform: translateY(-25%) scale(1.6);
  opacity: 0.35;
}

.address-modal__order-type-root {
  position: absolute;
  top: var(--address-order-type-root-offset);
  left: 50%;
  transform: translateX(-50%);
  z-index: 12;
  pointer-events: auto;
}

.address-modal__hidden {
  display: none !important;
}

@media screen and (max-width: 865px) {
  .modal-overlay:has(.address-modal) {
    align-items: flex-end;
  }

  .address-modal {
    --address-map-bottom-inset: 0;
    --order-type-switcher-height: 47px;
    flex-direction: column;
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    margin: 0;
    overflow: hidden;
    background: var(--modal-sheet-bg);
  }

  .address-modal__title {
    font-size: var(--font-size-title-lg);
  }

  .address-modal__description {
    display: none;
  }

  .address-modal__fields {
    gap: 10px;
    margin-top: 15px;
    margin-bottom: 0;
    padding-bottom: 24px !important;
    flex: 0 0 auto;
    min-height: auto;
  }

  .address-modal__footer {
    flex-shrink: 0;
    margin-top: auto;
  }

  .address-modal__details {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 6;
    width: 100%;
    height: var(--address-modal-details-mobile-height);
    max-height: var(--address-modal-details-mobile-height);
    min-height: 0;
    padding: 24px var(--address-details-padding-x) calc(20px + env(safe-area-inset-bottom));
    background: var(--modal-sheet-bg);
    box-shadow: var(--address-shadow-top);
    border-radius: var(--modal-sheet-radius) var(--modal-sheet-radius) 0 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .address-modal__details-host {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }

  .address-modal__details-scroll {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }

  .address-modal__title,
  .address-modal__title-row {
    flex-shrink: 0;
  }

  .address-modal__details-grid {
    gap: 10px;
  }

  .address-modal__suggests {
    max-height: unset;
    padding-bottom: 0;
  }

  .address-modal__suggest-icon-wrap {
    width: 56px;
    min-width: 56px;
  }

  .address-modal__map {
    position: relative;
    z-index: 1;
    order: -1;
    width: 100% !important;
    flex: 0 0 var(--address-modal-map-mobile-height);
    height: var(--address-modal-map-mobile-height);
    max-height: var(--address-modal-map-mobile-height);
    min-height: 0;
    overflow: hidden;
  }

  .address-modal__map-host {
    height: 100%;
    overflow: hidden;
  }

  .address-modal__pin-cube1 {
    width: 46px;
    height: 46px;
    border-radius: 15px;
  }

  .address-modal__pin-cube2 {
    width: 38px;
    height: 38px;
    border-radius: 12px;
  }

  .address-modal__pin-leg {
    height: 26px;
  }

  .address-modal__pin-root {
    --address-pin-anchor-height: 72px;
  }

  .address-modal__map-canvas,
  .address-modal__map-overlay {
    bottom: var(--address-modal-sheet-overlap);
  }

  .address-modal > .modal-sheet__close {
    top: auto;
    bottom: calc(var(--address-modal-details-mobile-height) + 10px);
    right: calc(var(--space-popup-xl) - 15px);
    z-index: 25;
  }

  .order-type-switcher {
    height: 47px;
    min-height: 47px;
  }

  .order-type-switcher__btn {
    font-size: 15px;
  }
}

@media screen and (max-width: 380px) {
  .address-modal__title {
    font-size: var(--font-size-title-md);
  }
}

.order-type-switcher {
  position: relative;
  width: var(--order-type-switcher-width);
  height: var(--order-type-switcher-height);
  padding: var(--order-type-switcher-padding);
  display: flex;
  border-radius: 50px;
  background: var(--modal-sheet-bg);
  box-shadow: var(--address-shadow-bottom);
}

.order-type-switcher__btn {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  padding: 0;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: var(--font-size-button);
  font-weight: 600;
  color: var(--color-text-secondary);
  background: transparent;
  transition: color 0.3s var(--motion-easing-standard);
}

.order-type-switcher__btn:focus {
  outline: none;
}

.order-type-switcher__btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.order-type-switcher__btn--selected {
  color: var(--color-text-primary);
}

.order-type-switcher__thumb {
  position: absolute;
  top: var(--order-type-switcher-padding);
  left: var(--order-type-switcher-padding);
  width: calc(50% - var(--order-type-switcher-padding));
  height: calc(100% - (var(--order-type-switcher-padding) * 2));
  background: var(--order-type-switcher-thumb-bg);
  border-radius: 50px;
  pointer-events: none;
  transition: 0.3s;
  z-index: 1;
}

.order-type-switcher--no-transition .order-type-switcher__thumb {
  transition: none;
}

.order-type-switcher--cart {
  width: 100%;
  background: var(--order-type-switcher-cart-bg);
  border-radius: var(--order-type-switcher-cart-radius);
  box-shadow: none;
}

.order-type-switcher--cart .order-type-switcher__thumb {
  background: #ffffff;
  border-radius: var(--order-type-switcher-cart-thumb-radius);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

#popup-message.modal-overlay {
  z-index: var(--message-modal-z-index);
}

.message-modal button {
  border: none;
  font-family: inherit;
  margin: 0;
  cursor: pointer;
}

.message-modal {
  position: relative;
  width: 420px;
  max-width: calc(100vw - 2 * var(--space-content-md));
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  margin: 0 var(--space-content-md);
  overflow: hidden;
  transition: var(--motion-duration-modal);
}

.message-modal .modal-sheet__close {
  position: absolute;
  top: calc(var(--space-popup-xl) - 10px);
  right: calc(var(--space-popup-xl) - 10px);
}

.message-modal__content {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  padding: var(--space-popup-xl);
  box-sizing: border-box;
}

.message-modal__title {
  margin: 0;
  padding-right: calc(var(--modal-close-size) + 8px);
  color: var(--color-text-primary);
  font-size: var(--font-size-title-xl);
  font-weight: var(--font-weight-title);
  line-height: 1.2;
}

.message-modal__heading {
  margin: 16px 0 0;
  color: var(--color-text-primary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-button);
  line-height: var(--line-height-body, 1.35);
}

.message-modal__heading:empty {
  display: none;
}

.message-modal__description {
  margin: 8px 0 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-body-sm);
  line-height: 1.45;
}

.message-modal__description:empty {
  display: none;
}

/* Без heading — тот же отступ от title, что даёт .message-modal__heading */
.message-modal__heading:empty + .message-modal__description {
  margin-top: 16px;
}

.message-modal__footer {
  margin-top: 24px;
  width: 100%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.message-modal__action-btn,
.message-modal__ok-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--address-btn-height, 52px);
  padding: 0 20px;
  border-radius: 17px;
  font-size: var(--font-size-button);
  line-height: var(--line-height-button);
  font-weight: var(--font-weight-button);
  transition:
    background-color var(--motion-duration-button) var(--motion-easing-standard),
    color var(--motion-duration-button) var(--motion-easing-standard);
}

.message-modal__action-btn {
  background: var(--color-button-primary-bg);
  color: var(--color-button-primary-text);
}

.message-modal__ok-btn {
  background: var(--color-button-primary-bg);
  color: var(--color-button-primary-text);
}

.message-modal__ok-btn--secondary {
  background: transparent;
  color: var(--color-text-primary);
  box-shadow: inset 0 0 0 1px var(--color-text-secondary);
}

@media screen and (max-width: 865px) {
  .message-modal {
    --message-modal-mobile-safe-max-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    max-height: min(70vh, var(--message-modal-mobile-safe-max-height));
    border-radius: var(--modal-sheet-radius) var(--modal-sheet-radius) 0 0;
    margin: 0;
    overflow: visible;
  }

  @supports (height: 100dvh) {
    .message-modal {
      --message-modal-mobile-safe-max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    }
  }

  .message-modal .modal-sheet__close {
    top: calc((var(--modal-close-size) + 10px) * -1);
    right: calc(var(--space-popup-lg) - 15px);
    z-index: 3;
  }

  .message-modal__content {
    padding-left: var(--space-popup-lg);
    padding-right: var(--space-popup-lg);
    padding-bottom: calc(var(--space-popup-lg) + env(safe-area-inset-bottom));
    overflow: auto;
  }

  .message-modal__title {
    font-size: var(--font-size-title-lg);
    padding-right: 0;
  }
}

@media screen and (max-width: 380px) {
  .message-modal__title {
    font-size: var(--font-size-title-md);
  }
}

.addresses-modal button {
  border: none;
  font-family: inherit;
  margin: 0;
  cursor: pointer;
}

.addresses-modal {
  position: relative;
  width: 485px;
  height: 590px;
  display: flex;
  flex-wrap: nowrap;
  margin: 0 var(--space-content-md);
  overflow: hidden;
  transition: var(--motion-duration-modal);
}

.addresses-modal .modal-sheet__close {
  position: absolute;
  top: calc(var(--space-popup-xl) - 10px);
  right: calc(var(--space-popup-xl) - 10px);
}

.addresses-modal__content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: var(--space-popup-xl);
}

.addresses-modal__title {
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--font-size-title-xl);
  font-weight: var(--font-weight-title);
  white-space: nowrap;
}

.addresses-modal__list-host {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 15px;
  margin-bottom: auto;
  overflow-y: auto;
  padding-bottom: 50px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.addresses-modal__list-host::-webkit-scrollbar {
  display: none;
}

.addresses-modal__loading,
.addresses-modal__empty {
  margin: 0;
  padding: 24px 8px;
  text-align: center;
  color: var(--color-text-secondary);
  font-size: var(--font-size-body);
}

.addresses-modal__list {
  display: flex;
  flex-direction: column;
}

.addresses-modal__item--out-of-zone {
  opacity: 0.72;
}

.addresses-modal__suggest-row {
  display: flex;
  align-items: center;
  min-height: 62px;
  padding-right: 8px;
  gap: 4px;
}

.addresses-modal__suggest-select {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  border: none;
  background: transparent;
  text-align: left;
  overflow: hidden;
  cursor: pointer;
  font-family: inherit;
}

.addresses-modal__suggest-select:disabled {
  cursor: not-allowed;
}

.addresses-modal__suggest-icon-wrap {
  width: 45px;
  min-width: 45px;
  max-width: 45px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
}

.addresses-modal__suggest-icon {
  width: 24px;
  height: 24px;
  background-size: 24px 24px;
  background-position: center;
  background-repeat: no-repeat;
}

.addresses-modal__suggest-data {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  width: 100%;
  overflow: hidden;
}

.addresses-modal__suggest-title {
  font-size: 15px;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.addresses-modal__suggest-subtitle {
  margin-top: -2px;
  font-size: 13px;
  color: var(--address-suggest-icon-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.addresses-modal__item-warning {
  margin-top: 2px;
  font-size: var(--font-size-label);
  color: #c0392b;
}

.addresses-modal__badge {
  margin-top: 2px;
  font-size: var(--font-size-label);
  color: var(--color-text-secondary);
}

.addresses-modal__suggest-sep {
  height: 1px;
  border: none;
  pointer-events: none;
  background: var(--color-line);
  margin: 0 16px 0 45px;
}

.addresses-modal__item:last-of-type .addresses-modal__suggest-sep {
  display: none;
}

.addresses-modal__action-btn {
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.addresses-modal__action-btn::after {
  content: '';
  width: 28px;
  height: 28px;
  background-color: var(--color-text-secondary);
  mask-image: var(--addresses-modal-icon-url);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: var(--addresses-modal-icon-url);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

.addresses-modal__footer {
  position: sticky;
  bottom: 0;
  width: 100%;
  min-height: 60px;
  display: flex;
  flex-direction: column;
  gap: var(--space-footer-gap);
  background: var(--modal-sheet-bg);
  flex-shrink: 0;
}

.addresses-modal__add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--address-btn-height);
  padding: 0 20px;
  border: none;
  border-radius: 17px;
  background: var(--color-button-primary-bg);
  color: var(--color-button-primary-text);
  font-family: inherit;
  font-size: var(--font-size-button);
  line-height: var(--line-height-button);
  font-weight: var(--font-weight-button);
  cursor: pointer;
  transition:
    background-color var(--motion-duration-button) var(--motion-easing-standard),
    color var(--motion-duration-button) var(--motion-easing-standard);
}

@media screen and (max-width: 865px) {
  .addresses-modal {
    --addresses-modal-mobile-safe-max-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    flex-direction: column;
    width: 100%;
    height: min(55vh, var(--addresses-modal-mobile-safe-max-height));
    max-height: var(--addresses-modal-mobile-safe-max-height);
    border-radius: var(--modal-sheet-radius) var(--modal-sheet-radius) 0 0;
    margin: 0;
    overflow: visible;
  }

  @supports (height: 100dvh) {
    .addresses-modal {
      --addresses-modal-mobile-safe-max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    }
  }

  .addresses-modal .modal-sheet__close {
    top: calc((var(--modal-close-size) + 10px) * -1);
    right: calc(var(--space-popup-xl) - 15px);
    z-index: 3;
  }

  .addresses-modal__title {
    font-size: var(--font-size-title-lg);
  }

  .addresses-modal__content {
    overflow: hidden;
    padding-left: var(--space-popup-lg);
    padding-right: var(--space-popup-lg);
  }

  .addresses-modal__footer {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

@media screen and (max-width: 380px) {
  .addresses-modal__title {
    font-size: var(--font-size-title-md);
  }
}

.main-page {
  --main-content-width: 1120px;
  --main-catalog-width: 755px;
  --main-cart-width: 325px;
  --main-column-gap: 40px;
  --main-page-bg: var(--color-bg);
  --main-page-padding-x: 16px;
  --main-page-padding-y: 16px;
  --cart-catalog-tabs-compact-offset: max(
    0px,
    calc(var(--catalog-tabs-compact-bar-height) - var(--main-page-padding-y))
  );

  min-height: var(--app-page-min-height);
  background: var(--main-page-bg);
  padding: var(--main-page-padding-y) var(--main-page-padding-x);
}

/* Mobile: контент уходит ниже floating chrome (корзина / progress) + breathing room */
@media (max-width: 1149px) {
  .main-page {
    padding-bottom: calc(
      var(--cart-floating-btn-offset-y)
      + var(--cart-floating-btn-height)
      + var(--page-bottom-safe-gap)
      + env(safe-area-inset-bottom, 0px)
    );
  }
}

.main-page__content {
  display: flex;
  gap: var(--main-column-gap);
  width: 100%;
  max-width: var(--main-content-width);
  margin: 0 auto;
}

.main-page__catalog {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  overflow: visible;
}

.main-page__cart.cart-section {
  display: none;
  flex: 0 0 var(--main-cart-width);
  flex-direction: column;
  min-width: 0;
  align-self: flex-start;
}

.main-page__catalog-main {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  overflow: visible;
}

.main-page__mobile-order-chrome {
  width: 100%;
  min-width: 0;
}

/* Свитчер → адрес и адрес → якоря: одинаковый ритм (gap колонки + padding якорей). */
@media (max-width: 1149px) {
  .main-page__mobile-order-chrome .cart-section__order-chrome {
    gap: 16px;
  }
}

.main-page__active-order {
  width: 100%;
  min-width: 0;
}

.main-page__active-order[hidden] {
  display: none;
}

/* Визуально как order-detail-panel__status-card, но кликабельно (→ /orders/{id}). */
.main-page__active-order .order-detail-panel__status-card {
  width: 100%;
  margin: 0 0 12px;
  box-shadow: none;
  cursor: pointer;
  pointer-events: auto;
}

.app-mobile-bottom-chrome {
  position: fixed;
  right: var(--cart-floating-btn-offset-x);
  bottom: calc(var(--cart-floating-btn-offset-y) + env(safe-area-inset-bottom, 0px));
  z-index: var(--cart-floating-btn-z-index);
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  max-width: calc(100vw - 2 * var(--cart-floating-btn-offset-x));
  pointer-events: none;
}

.app-mobile-bottom-chrome > * {
  pointer-events: auto;
}

@media (min-width: 1150px) {
  .app-mobile-bottom-chrome {
    display: none;
  }
}

/* Каркасные слоты */
.main-page__categories,
.main-page__catalog-body {
  min-height: 0;
}

.main-page__categories {
  overflow: visible;
  width: 100%;
  min-width: 0;
  flex: 0 0 auto;
}

.main-page__catalog-body {
  flex: 1 1 auto;
  min-height: 200px;
}

@media (min-width: 865px) {
  .main-page {
    --main-page-padding-x: 24px;
    --main-page-padding-y: 40px;
  }
}

@media (min-width: 1150px) {
  .main-page__catalog {
    flex: 0 0 var(--main-catalog-width);
  }

  .main-page__mobile-order-chrome {
    display: none;
  }

  .main-page__cart.cart-section {
    display: flex;
  }
}

.catalog-route-notice {
  margin: 0 0 16px;
  padding: 16px;
  border-radius: 12px;
  background: var(--color-bg-elevated, #fff);
  box-shadow: 0 1px 4px rgba(44, 42, 40, 0.08);
}

.catalog-route-notice[hidden] {
  display: none;
}

.catalog-route-notice__title {
  margin: 0 0 6px;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text-primary);
}

.catalog-route-notice__text {
  margin: 0 0 12px;
  color: var(--color-text-secondary, #8a8784);
  line-height: 1.4;
}

.catalog-route-notice__action {
  border: 0;
  border-radius: 999px;
  padding: 8px 16px;
  background: var(--color-text-primary);
  color: var(--color-bg, #f3efea);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

/* Цельный chip-скелетон; specificity выше .ui-skeleton. */
.catalog-loading-tabs__pill.ui-skeleton {
  flex: 0 0 auto;
  box-sizing: border-box;
  height: var(--catalog-tabs-chip-height, 36px);
  border-radius: var(--catalog-tabs-chip-radius, 12px);
}

.catalog-loading {
  margin-top: 0;
}

.catalog-loading__section {
  min-width: 0;
}

.catalog-loading__title.ui-skeleton {
  margin: 0 0 var(--catalog-section-title-margin-bottom, 20px) 5px;
  border-radius: 8px;
}

.catalog-loading__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px 12px;
}

.catalog-loading__card {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.catalog-loading__card-media.ui-skeleton {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 17px;
}

.catalog-loading__card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
  padding-left: 5px;
}

.catalog-loading__card-price.ui-skeleton,
.catalog-loading__card-name.ui-skeleton {
  border-radius: 6px;
}

@media (max-width: 864px) {
  .catalog-loading__title.ui-skeleton {
    margin-bottom: 16px;
  }

  .catalog-loading__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 38px 16px;
  }
}

:root {
  --ui-skeleton-bg: rgba(91, 81, 76, 0.1);
  --ui-skeleton-highlight: rgba(91, 81, 76, 0.18);
}

.ui-skeleton {
  display: block;
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    var(--ui-skeleton-bg) 25%,
    var(--ui-skeleton-highlight) 50%,
    var(--ui-skeleton-bg) 75%
  );
  background-size: 200% 100%;
  animation: ui-skeleton-shimmer 1.8s var(--motion-easing-standard, ease-in-out) infinite;
}

.ui-skeleton--inline {
  display: inline-block;
  vertical-align: middle;
}

@keyframes ui-skeleton-shimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

.dish-modal {
  position: relative;
  display: flex;
  flex-direction: column;
  width: var(--dish-modal-width);
  height: var(--dish-modal-height);
  max-width: calc(100vw - 2 * var(--space-content-md));
  overflow: hidden;
  margin: 0 var(--space-content-md);
}

.dish-modal > .modal-sheet__close {
  position: absolute;
  top: calc(var(--space-popup-xl) - 10px);
  right: calc(var(--space-popup-xl) - 10px);
  z-index: 4;
}

.dish-modal__layout {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

.dish-modal__media {
  flex: 0 0 50%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.65);
}

.dish-modal__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.dish-modal__image--placeholder {
  min-height: 100%;
  background: linear-gradient(135deg, #f3efe8 0%, #e7e1d8 100%);
}

.dish-modal__body {
  flex: 1 1 50%;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--dish-modal-scrollbar-thumb) transparent;
  padding:
    var(--dish-modal-title-padding-top)
    var(--space-popup-xl)
    var(--dish-modal-body-padding-bottom);
}

.dish-modal__body::-webkit-scrollbar {
  width: var(--dish-modal-scrollbar-size);
}

.dish-modal__body::-webkit-scrollbar-track {
  margin: 10px 0;
  background: transparent;
}

.dish-modal__body::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 100px;
  background-color: var(--dish-modal-scrollbar-thumb);
  background-clip: padding-box;
}

.dish-modal__body::-webkit-scrollbar-thumb:hover {
  background-color: var(--dish-modal-scrollbar-thumb-hover);
}

.dish-modal__title {
  margin: 0;
  color: var(--color-catalog-section-title);
  font-size: var(--font-size-title-xl);
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
}

.dish-modal__description {
  margin: var(--dish-modal-description-margin-top) 0 0;
  color: var(--color-catalog-section-title);
  font-size: var(--font-size-body-sm);
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
}

.dish-modal__nutrition-link {
  display: inline-flex;
  align-items: center;
  gap: var(--dish-modal-nutrition-link-gap);
  margin-top: var(--dish-modal-nutrition-link-margin-top);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-catalog-section-title);
  font: inherit;
  font-size: var(--font-size-body-sm);
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}

.dish-modal__nutrition-link:hover {
  color: var(--color-text-muted);
}

.dish-modal__nutrition-link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

.dish-modal__nutrition-link-icon {
  flex: 0 0 auto;
  display: block;
  width: 24px;
  height: 24px;
  filter: brightness(0) saturate(100%) invert(37%) sepia(8%) saturate(878%) hue-rotate(314deg) brightness(96%) contrast(88%);
  transition: filter var(--dish-modal-remove-chip-motion-duration) var(--motion-easing-standard);
}

.dish-modal__nutrition-link:hover .dish-modal__nutrition-link-icon {
  filter: brightness(0) saturate(100%) invert(55%) sepia(5%) saturate(620%) hue-rotate(314deg) brightness(94%) contrast(88%);
}

.dish-modal__remove-section {
  margin-top: var(--dish-modal-remove-section-margin-top);
}

.dish-modal__remove-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: var(--dish-modal-remove-title-margin-bottom);
}

.dish-modal__remove-title {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  color: var(--color-catalog-section-title);
  font-size: var(--dish-modal-remove-title-font-size);
  margin-left: 3px;
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
}

.dish-modal__remove-help {
  position: relative;
  flex: 0 0 auto;
}

.dish-modal__remove-help-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--dish-modal-remove-help-btn-size);
  height: var(--dish-modal-remove-help-btn-size);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--dish-modal-remove-help-bg);
  cursor: pointer;
}

.dish-modal__remove-help-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.dish-modal__remove-help-icon {
  display: block;
  width: var(--dish-modal-remove-help-icon-size);
  height: var(--dish-modal-remove-help-icon-size);
}

.dish-modal__remove-help-tooltip {
  position: absolute;
  right: 0;
  bottom: calc(100% + var(--dish-modal-remove-help-tooltip-offset));
  z-index: 6;
  width: max-content;
  max-width: min(var(--dish-modal-remove-help-tooltip-max-width), calc(100vw - 2 * var(--dish-modal-mobile-padding)));
  padding: var(--dish-modal-remove-help-tooltip-padding);
  border-radius: var(--dish-modal-remove-help-tooltip-radius);
  background: var(--dish-modal-remove-help-bg);
  color: #fff;
  font-size: var(--dish-modal-remove-help-tooltip-font-size);
  font-weight: 400;
  line-height: 1.3;
  text-align: left;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-4px);
  transition:
    opacity var(--dish-modal-remove-chip-motion-duration) var(--motion-easing-standard),
    transform var(--dish-modal-remove-chip-motion-duration) var(--motion-easing-standard),
    visibility var(--dish-modal-remove-chip-motion-duration) var(--motion-easing-standard);
}

.dish-modal__remove-help:hover .dish-modal__remove-help-tooltip,
.dish-modal__remove-help:focus-within .dish-modal__remove-help-tooltip,
.dish-modal__remove-help--open .dish-modal__remove-help-tooltip {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.dish-modal__remove-modifiers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dish-modal-remove-gap);
  justify-content: flex-start;
  width: 100%;
}

.dish-modal__remove-chip {
  display: inline-flex;
  align-items: center;
  flex: 0 1 auto;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  vertical-align: top;
}

.dish-modal__remove-modifiers--layout-measure .dish-modal__remove-chip-surface,
.dish-modal__remove-modifiers--layout-measure .dish-modal__remove-chip-icon,
.dish-modal__remove-modifiers--layout-measure .dish-modal__remove-chip-label,
.dish-modal__remove-modifiers--layout-measure .dish-modal__remove-chip-label::after {
  transition: none !important;
}

.dish-modal__remove-chip-surface {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-height: var(--dish-modal-remove-chip-height);
  padding: 0 14px 0 16px;
  border-radius: var(--dish-modal-remove-chip-radius);
  background: var(--dish-modal-remove-chip-bg);
  color: var(--dish-modal-remove-chip-text);
  font-size: var(--font-size-body-sm);
  font-weight: 500;
  line-height: 1.2;
  transition:
    background-color var(--dish-modal-remove-chip-motion-duration) var(--motion-easing-standard),
    gap var(--dish-modal-remove-chip-motion-duration) var(--motion-easing-standard),
    padding var(--dish-modal-remove-chip-motion-duration) var(--motion-easing-standard),
    max-width var(--dish-modal-remove-chip-motion-duration) var(--motion-easing-standard);
}

.dish-modal__remove-chip:hover:not(.dish-modal__remove-chip--selected) .dish-modal__remove-chip-surface {
  background: var(--dish-modal-remove-chip-bg-hover);
}

.dish-modal__remove-chip--selected .dish-modal__remove-chip-surface {
  gap: 0;
  padding-right: 14px;
}

.dish-modal__remove-chip:focus-visible {
  outline: none;
}

.dish-modal__remove-chip:focus-visible .dish-modal__remove-chip-surface {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.dish-modal__remove-chip-label {
  position: relative;
  display: inline-block;
  white-space: normal;
  font-weight: 500;
  text-align: left;
  transition: color var(--dish-modal-remove-chip-motion-duration) var(--motion-easing-standard);
}

.dish-modal__remove-chip-label::after {
  content: '';
  position: absolute;
  left: -1px;
  right: -1px;
  top: 50%;
  height: 1px;
  background-color: var(--dish-modal-remove-chip-strike);
  transform: translateY(-50%) rotate(355deg) scaleX(0);
  transform-origin: center center;
  opacity: 0;
  transition:
    transform var(--dish-modal-remove-chip-motion-duration) var(--motion-easing-standard),
    opacity calc(var(--dish-modal-remove-chip-motion-duration) * 0.65) var(--motion-easing-standard);
  pointer-events: none;
}

.dish-modal__remove-chip--selected .dish-modal__remove-chip-label {
  color: var(--dish-modal-remove-chip-text-selected);
}

.dish-modal__remove-chip--selected .dish-modal__remove-chip-label::after {
  transform: translateY(-50%) rotate(355deg) scaleX(1);
  opacity: 1;
  transition-delay: var(--dish-modal-remove-chip-motion-delay), var(--dish-modal-remove-chip-motion-delay);
}

.dish-modal__remove-chip:not(.dish-modal__remove-chip--selected) .dish-modal__remove-chip-label::after {
  transition-delay: 0ms, 0ms;
}

.dish-modal__remove-chip-icon {
  flex: 0 0 auto;
  width: 14px;
  max-width: 14px;
  height: 14px;
  opacity: 0.55;
  overflow: hidden;
  transform: scale(1);
  transform-origin: center center;
  transition:
    opacity calc(var(--dish-modal-remove-chip-motion-duration) * 0.75) var(--motion-easing-standard),
    max-width var(--dish-modal-remove-chip-motion-duration) var(--motion-easing-standard),
    width var(--dish-modal-remove-chip-motion-duration) var(--motion-easing-standard),
    transform calc(var(--dish-modal-remove-chip-motion-duration) * 0.75) var(--motion-easing-standard);
}

.dish-modal__remove-chip--selected .dish-modal__remove-chip-icon {
  width: 0;
  max-width: 0;
  opacity: 0;
  transform: scale(0.4);
}

.dish-modal__remove-skeleton {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dish-modal-remove-gap);
  justify-content: flex-start;
  width: 100%;
}

.dish-modal__remove-skeleton-pill {
  display: block;
  width: 112px;
  height: var(--dish-modal-remove-chip-height);
  border-radius: var(--dish-modal-remove-chip-radius);
  background: var(--dish-modal-remove-skeleton-bg);
  animation: dish-modal-remove-skeleton 1.8s var(--motion-easing-standard) infinite;
}

.dish-modal__remove-skeleton-pill:nth-child(2) {
  width: 132px;
  animation-delay: 0.2s;
}

.dish-modal__remove-skeleton-pill:nth-child(3) {
  width: 96px;
  animation-delay: 0.4s;
}

.dish-modal__add-section,
.dish-modal__add-sections-placeholder {
  margin-top: var(--dish-modal-add-section-margin-top);
}

.dish-modal__add-title {
  margin: 0 0 var(--dish-modal-add-title-margin-bottom);
  margin-left: 3px;
  color: var(--color-catalog-section-title);
  font-size: var(--dish-modal-add-title-font-size);
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
}

.dish-modal__add-grid,
.dish-modal__add-skeleton {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--dish-modal-add-grid-gap);
  width: 100%;
}

.dish-modal__add-skeleton-card {
  min-height: calc(var(--add-modifier-card-media-height) + 96px);
  border-radius: var(--add-modifier-card-radius);
  background: var(--dish-modal-add-skeleton-bg);
  animation: dish-modal-remove-skeleton 1.8s var(--motion-easing-standard) infinite;
}

.dish-modal__add-skeleton-card:nth-child(2) {
  animation-delay: 0.2s;
}

.dish-modal__add-skeleton-card:nth-child(3) {
  animation-delay: 0.4s;
}

.dish-modal__nutrition {
  margin-top: var(--dish-modal-nutrition-margin-top);
}

.dish-modal__nutrition-title {
  margin: 0 0 var(--dish-modal-add-title-margin-bottom);
  margin-left: 3px;
  color: var(--color-catalog-section-title);
  font-size: var(--dish-modal-add-title-font-size);
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
}

.dish-modal__nutrition-card {
  padding: var(--dish-modal-nutrition-card-padding);
  border-radius: var(--dish-modal-nutrition-card-radius);
  background: var(--dish-modal-nutrition-card-bg);
  text-align: left;
}

.dish-modal__nutrition-toggle {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: var(--dish-modal-nutrition-toggle-gap);
  margin-bottom: 14px;
}

.dish-modal__nutrition-toggle-btn {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--dish-modal-nutrition-toggle-font-size);
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
}

.dish-modal__nutrition-toggle-btn--active {
  color: var(--color-text-primary);
  font-weight: 700;
}

.dish-modal__nutrition-toggle-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

.dish-modal__nutrition-toggle-sep {
  color: var(--color-text-muted);
  font-size: var(--dish-modal-nutrition-toggle-font-size);
  line-height: 1;
}

.dish-modal__nutrition-grid {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--dish-modal-nutrition-grid-gap);
}

.dish-modal__nutrition-item {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-width: 0;
}

.dish-modal__nutrition-value {
  color: var(--color-text-primary);
  font-size: var(--dish-modal-nutrition-value-font-size);
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
}

.dish-modal__nutrition-label {
  color: var(--color-catalog-section-title);
  font-size: var(--dish-modal-nutrition-label-font-size);
  font-weight: 400;
  line-height: 1.15;
  white-space: nowrap;
}

.dish-modal__footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: flex;
  justify-content: center;
  padding-bottom: calc(var(--dish-modal-footer-padding-bottom) + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
}

.dish-modal__add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--dish-modal-add-btn-gap);
  min-width: var(--dish-modal-add-btn-min-width);
  height: var(--dish-modal-add-btn-height);
  padding: 0 24px;
  border: 0;
  border-radius: 100px;
  background: var(--dish-modal-add-btn-gradient);
  color: var(--color-text-primary);
  font: inherit;
  font-size: var(--font-size-button);
  font-weight: var(--font-weight-button);
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 4px 14px rgba(174, 135, 85, 0.35);
}

.dish-modal__add-btn:hover {
  filter: brightness(1.03);
}

.dish-modal__add-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

.dish-modal__add-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  filter: none;
}

.dish-modal__add-btn-icon {
  flex: 0 0 auto;
  display: block;
  width: 24px;
  height: 24px;
  filter: brightness(0);
}

.dish-modal__add-btn-price {
  flex: 0 0 auto;
  white-space: nowrap;
}

@keyframes dish-modal-remove-skeleton {
  0%,
  100% {
    opacity: 0.42;
  }

  50% {
    opacity: 0.88;
  }
}

@media screen and (min-width: 866px) {
  .dish-modal {
    width: var(--dish-modal-desktop-width);
    height: var(--dish-modal-desktop-height);
  }

  .dish-modal__layout {
    gap: var(--dish-modal-desktop-inset);
  }

  .dish-modal > .modal-sheet__close {
    top: calc(var(--dish-modal-desktop-inset) - 10px);
    right: calc(var(--dish-modal-desktop-inset) - 10px);
  }

  .dish-modal__media {
    padding:
      var(--dish-modal-desktop-inset)
      0
      var(--dish-modal-desktop-inset)
      var(--dish-modal-desktop-inset);
    background: transparent;
  }

  .dish-modal__image,
  .dish-modal__image--placeholder {
    border-radius: var(--dish-modal-desktop-image-radius);
  }

  .dish-modal__body {
    padding:
      var(--dish-modal-desktop-body-padding-top)
      var(--dish-modal-desktop-inset)
      calc(var(--dish-modal-add-btn-height) + var(--dish-modal-desktop-inset) + 12px)
      0;
  }

  .dish-modal__footer {
    left: 50%;
    right: 0;
    bottom: var(--dish-modal-desktop-inset);
    padding-bottom: 0;
    justify-content: center;
  }
}

@media screen and (max-width: 865px) {
  html.dish-modal-immersive body {
    padding-top: 0;
  }

  .modal-overlay:has(.dish-modal) {
    align-items: stretch;
    background: transparent;
  }

  html.dish-modal-immersive .modal-overlay:has(.dish-modal) {
    align-items: stretch;
  }

  html.dish-modal-immersive .dish-modal {
    overflow: visible;
  }

  html.dish-modal-immersive .dish-modal__layout {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  html.dish-modal-immersive .dish-modal__media {
    margin-top: calc(-1 * env(safe-area-inset-top, 0px));
    height: calc(var(--dish-modal-media-mobile-height) + env(safe-area-inset-top, 0px));
    max-height: calc(var(--dish-modal-media-mobile-height) + env(safe-area-inset-top, 0px));
    background: var(--modal-sheet-bg);
  }

  .dish-modal {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    height: 100vh;
    max-height: 100vh;
    margin: 0;
    padding: 0;
    border-radius: 0;
    overflow: hidden;
  }

  @supports (height: 100dvh) {
    .dish-modal {
      height: 100dvh;
      max-height: 100dvh;
    }
  }

  .dish-modal > .modal-sheet__close {
    top: calc(env(safe-area-inset-top, 0px) + var(--dish-modal-mobile-padding));
    right: calc(env(safe-area-inset-right, 0px) + var(--dish-modal-mobile-padding));
    z-index: 5;
  }

  .dish-modal__layout {
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--dish-modal-scrollbar-thumb) transparent;
  }

  .dish-modal__layout::-webkit-scrollbar {
    width: var(--dish-modal-scrollbar-size);
  }

  .dish-modal__layout::-webkit-scrollbar-track {
    margin: 10px 0;
    background: transparent;
  }

  .dish-modal__layout::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 100px;
    background-color: var(--dish-modal-scrollbar-thumb);
    background-clip: padding-box;
  }

  .dish-modal__layout::-webkit-scrollbar-thumb:hover {
    background-color: var(--dish-modal-scrollbar-thumb-hover);
  }

  .dish-modal__media {
    flex: 0 0 auto;
    width: 100%;
    height: var(--dish-modal-media-mobile-height);
    max-height: var(--dish-modal-media-mobile-height);
  }

  .dish-modal__body {
    position: relative;
    z-index: 2;
    flex: 1 0 auto;
    min-height: calc(
      100%
      - var(--dish-modal-media-mobile-height)
      + var(--dish-modal-body-overlap)
    );
    margin-top: calc(-1 * var(--dish-modal-body-overlap));
    overflow: visible;
    padding:
      calc(var(--dish-modal-body-overlap) + var(--dish-modal-title-padding-top))
      var(--dish-modal-mobile-padding)
      calc(var(--dish-modal-body-padding-bottom) + env(safe-area-inset-bottom, 0px));
    border-radius: var(--dish-modal-body-radius) var(--dish-modal-body-radius) 0 0;
    background: var(--modal-sheet-bg);
    transition: border-radius var(--motion-duration-modal) var(--motion-easing-standard);
  }

  html.dish-modal-immersive .dish-modal__body {
    min-height: calc(
      100%
      - var(--dish-modal-media-mobile-height)
      - env(safe-area-inset-top, 0px)
      + var(--dish-modal-body-overlap)
    );
  }

  .dish-modal__body--flush-top {
    border-radius: 0;
  }

  .dish-modal__title {
    text-align: center;
  }

  .dish-modal__description {
    text-align: center;
  }

  .dish-modal__nutrition-link {
    display: flex;
    justify-content: center;
    width: 100%;
  }
}

@media screen and (max-width: 380px) {
  .dish-modal {
    --dish-modal-mobile-padding: var(--space-content-md);
  }

  .dish-modal__add-grid,
  .dish-modal__add-skeleton {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dish-modal__title {
    font-size: var(--font-size-title-lg);
  }
}

.add-modifier-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  min-width: 0;
  padding: 12px 10px 14px;
  border-radius: var(--add-modifier-card-radius);
  background-color: var(--add-modifier-card-bg);
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--add-modifier-card-select-duration) var(--motion-easing-standard);
}

.add-modifier-card--selected {
  cursor: default;
  background-color: var(--add-modifier-card-bg-selected);
}

.add-modifier-card--selected .add-modifier-card__name,
.add-modifier-card--selected .add-modifier-card__counter-value {
  color: var(--add-modifier-card-text-selected);
}

.add-modifier-card--disabled {
  cursor: default;
  opacity: 0.45;
  pointer-events: none;
}

.add-modifier-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--add-modifier-card-media-height);
  margin-bottom: 10px;
}

.add-modifier-card__image {
  display: block;
  width: var(--add-modifier-card-image-size);
  height: var(--add-modifier-card-image-size);
  object-fit: contain;
  object-position: center;
}

.add-modifier-card__image--placeholder {
  width: 100%;
  height: var(--add-modifier-card-image-size);
  border-radius: 12px;
  background: linear-gradient(135deg, #f3efe8 0%, #e7e1d8 100%);
}

.add-modifier-card__name {
  width: 100%;
  margin: 0;
  color: var(--color-catalog-section-title);
  font-size: var(--add-modifier-card-name-font-size);
  font-weight: 600;
  line-height: 1.25;
  transition: color var(--add-modifier-card-select-duration) var(--motion-easing-standard);
}

.add-modifier-card__footer {
  display: grid;
  grid-template-areas: 'slot';
  flex-shrink: 0;
  align-items: center;
  justify-items: center;
  width: 100%;
  height: calc(var(--add-modifier-card-name-price-gap) + var(--add-modifier-card-counter-btn-size));
  margin-top: auto;
  padding-top: var(--add-modifier-card-name-price-gap);
}

.add-modifier-card__price,
.add-modifier-card__counter {
  grid-area: slot;
  transition:
    opacity var(--add-modifier-card-select-duration) var(--motion-easing-standard),
    visibility var(--add-modifier-card-select-duration) var(--motion-easing-standard);
}

.add-modifier-card__price {
  margin: 0;
  color: var(--color-catalog-section-title);
  font-size: var(--add-modifier-card-price-font-size);
  font-weight: 600;
  line-height: 1.2;
  opacity: 1;
  visibility: visible;
}

.add-modifier-card__price--unavailable {
  font-weight: 500;
}

.add-modifier-card__counter {
  display: grid;
  grid-template-columns: var(--add-modifier-card-counter-btn-size) 1fr var(--add-modifier-card-counter-btn-size);
  align-items: center;
  gap: var(--add-modifier-card-counter-gap);
  width: 100%;
  max-width: var(--add-modifier-card-counter-max-width);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.add-modifier-card--selected .add-modifier-card__price {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.add-modifier-card--selected .add-modifier-card__counter {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.add-modifier-card__counter[hidden] {
  display: none !important;
}

.add-modifier-card__price[hidden] {
  display: none !important;
}

.add-modifier-card__counter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--add-modifier-card-counter-btn-size);
  height: var(--add-modifier-card-counter-btn-size);
  padding: 0;
  border: 0;
  border-radius: var(--add-modifier-card-counter-btn-radius);
  background: var(--add-modifier-card-counter-btn-bg);
  cursor: pointer;
}

.add-modifier-card__counter-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.add-modifier-card__counter-btn--disabled {
  cursor: default;
  opacity: 0.38;
}

.add-modifier-card__counter-icon {
  display: block;
  width: var(--add-modifier-card-counter-icon-size);
  height: var(--add-modifier-card-counter-icon-size);
  filter: brightness(0);
}

.add-modifier-card__counter-value {
  color: var(--add-modifier-card-text-selected);
  font-size: var(--add-modifier-card-counter-value-font-size);
  font-weight: 600;
  line-height: 1;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .add-modifier-card,
  .add-modifier-card__name,
  .add-modifier-card__price,
  .add-modifier-card__counter {
    transition: none;
  }
}

.cart-fly-ghost {
  position: fixed;
  z-index: calc(var(--modal-z-index, 30) + 5);
  overflow: hidden;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  pointer-events: none;
  will-change: transform, opacity;
}

.cart-fly-ghost__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cart-fly-ghost--placeholder {
  background: linear-gradient(135deg, #f3efe8 0%, #e7e1d8 100%);
}

.cart-floating-btn--landing {
  animation: cart-fly-landing 280ms var(--motion-easing-standard);
}

@keyframes cart-fly-landing {
  0% {
    transform: scale(1);
  }

  45% {
    transform: scale(1.08);
  }

  100% {
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cart-fly-ghost,
  .cart-floating-btn--landing {
    animation: none !important;
  }
}

.catalog-hero {
  --catalog-hero-radius: 15px;

  display: block;
  width: 100%;
  aspect-ratio: 375 / 237;
  border-radius: 0 var(--catalog-hero-radius) var(--catalog-hero-radius) var(--catalog-hero-radius);
  overflow: hidden;
}

.catalog-hero__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media (min-width: 865px) {
  .catalog-hero {
    --catalog-hero-radius: 30px;
    aspect-ratio: 755 / 343;
  }
}

.catalog-category-tabs-sticky {
  position: sticky;
  top: var(--catalog-tabs-sticky-offset-top);
  z-index: 5;
  align-self: flex-start;
  width: calc(100% + (var(--main-page-padding-x) * 2));
  min-width: 0;
  margin-inline: calc(-1 * var(--main-page-padding-x));
  padding-block: var(--catalog-tabs-padding-top) var(--catalog-tabs-padding-bottom);
  padding-inline: 0;
  overflow-x: clip;
  overflow-y: visible;
  background: linear-gradient(
    to bottom,
    var(--main-page-bg, var(--color-bg)) 72%,
    transparent 100%
  );
}

.catalog-category-tabs__scroll {
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  touch-action: pan-x;
  padding-bottom: var(--catalog-tabs-scroll-gap);
}

.catalog-category-tabs__scroll--dragging {
  cursor: grabbing;
  user-select: none;
}

.catalog-category-tabs__scroll::-webkit-scrollbar {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .catalog-category-tabs__scroll--dragging {
    cursor: grabbing;
  }
}

.catalog-category-tabs {
  display: block;
  width: max-content;
  padding-inline: var(--main-page-padding-x);
}

.catalog-category-tabs__list {
  display: flex;
  gap: var(--catalog-tabs-gap);
  min-width: max-content;
  padding: 0;
  padding-inline-end: var(--main-page-padding-x);
}

.catalog-category-tabs__list::after {
  content: '';
  flex: 0 0 var(--catalog-tabs-scroll-end-spacer, 0px);
  width: var(--catalog-tabs-scroll-end-spacer, 0px);
  height: 1px;
}

.catalog-category-tabs__button {
  border: 0;
  border-radius: var(--catalog-tabs-chip-radius);
  background: #ffffff;
  color: var(--color-text, #111111);
  font-size: var(--font-size-body-sm, 15px);
  line-height: 20px;
  font-weight: 500;
  padding: 8px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.catalog-category-tabs__button--active {
  color: #ffffff;
  background: var(--color-catalog-section-title, #5b514c);
}

.catalog-category-tabs__button:focus-visible {
  outline: 2px solid var(--color-primary, #c45c26);
  outline-offset: 2px;
}

.catalog-category-section {
  scroll-margin-top: var(--catalog-tabs-sticky-height);
}

.catalog-category-section + .catalog-category-section {
  margin-top: 68px;
}

.catalog-category-section__title {
  margin: 0 0 var(--catalog-section-title-margin-bottom, 20px) 5px;
  color: var(--color-catalog-section-title, #5b514c);
  font-size: 23px;
  line-height: 26px;
  font-weight: 700;
}

.catalog-category-section__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px 12px;
}

.catalog-sections__empty {
  margin: 24px 0 0;
  color: rgba(0, 0, 0, 0.55);
  font-size: 16px;
  line-height: 22px;
}

@media (max-width: 864px) {
  .catalog-category-section__title {
    font-size: 23px;
    line-height: 26px;
  }

  .catalog-category-section__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 38px 16px;
  }
}

/* Вне потока: иначе flex gap родителя (.main-page__catalog-main) даёт лишний
   отступ над якорями — на мобилке визуально «адрес не по центру». */
.catalog-category-tabs__sticky-sentinel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  pointer-events: none;
  visibility: hidden;
}

@media (min-width: 865px) {
  .catalog-category-tabs-sticky {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
  }

  .catalog-category-tabs {
    padding-inline: 0;
  }

  .catalog-category-tabs__list {
    padding-inline-end: 0;
  }
}

@media (min-width: 1150px) {
  .catalog-category-tabs-sticky {
    min-height: calc(
      var(--catalog-tabs-padding-top)
      + var(--catalog-tabs-chip-height) * 2
      + var(--catalog-tabs-gap)
      + var(--catalog-tabs-scroll-gap)
      + var(--catalog-tabs-padding-bottom)
    );
  }

  .catalog-category-tabs__scroll {
    overflow-x: hidden;
  }

  .catalog-category-tabs {
    width: 100%;
  }

  .catalog-category-tabs__list {
    flex-wrap: wrap;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .catalog-category-tabs-sticky--compact {
    z-index: 20;
    width: var(--catalog-tabs-layout-width, 100%);
    max-width: var(--catalog-tabs-layout-width, 100%);
    margin-left: calc(-1 * var(--catalog-tabs-compact-left, 0px));
    min-height: 68px;
    height: 68px;
    padding-block: 12px;
    background: var(--main-page-bg, var(--color-bg));
  }

  .catalog-category-tabs-sticky--compact .catalog-category-tabs__scroll {
    overflow-x: auto;
    height: 44px;
    max-height: 44px;
    padding-bottom: 0;
  }

  .catalog-category-tabs-sticky--compact .catalog-category-tabs {
    width: max-content;
    height: 100%;
    padding-inline-start: var(--catalog-tabs-compact-left, 0px);
    padding-inline-end: 0;
  }

  .catalog-category-tabs-sticky--compact .catalog-category-tabs__list {
    flex-wrap: nowrap;
    align-items: center;
    width: max-content;
    min-width: max-content;
    height: 44px;
    padding-inline-end: var(--main-page-padding-x);
  }
}

.dish-card {
  display: flex;
  flex-direction: column;
  border: 0;
  padding: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.dish-card--disabled {
  cursor: default;
  opacity: 0.45;
  pointer-events: none;
}

.dish-card__media {
  position: relative;
  overflow: hidden;
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.65);
  aspect-ratio: 1 / 1;
}

.dish-card__image {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 17px;
  object-fit: cover;
  object-position: center;
}

.dish-card__image--placeholder {
  background: linear-gradient(135deg, #f3efe8 0%, #e7e1d8 100%);
}

.dish-card__add {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 999px;
  background: #ffffff;
  color: var(--color-text-primary, #000000);
  font-size: 24px;
  line-height: 1;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.dish-card__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 10px;
  padding-left: 5px;
}

.dish-card__price {
  margin: 0;
  color: var(--color-text-primary, #000000);
  font-size: 18px;
  line-height: 22px;
  font-weight: 600;
}

.dish-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 6px;
  margin: 0;
  font-size: 14px;
  line-height: 18px;
}

.dish-card__name {
  color: var(--color-text-primary, #000000);
  font-size: 15px;
  line-height: 18px;
  font-weight: 500;
}

.dish-card__weight {
  color: rgba(0, 0, 0, 0.45);
  font-size: 15px;
  line-height: 17px;
  font-weight: 400;
}

.dish-card:focus-visible {
  outline: 2px solid var(--color-primary, #c45c26);
  outline-offset: 4px;
  border-radius: 12px;
}

.dish-card__add:focus-visible {
  outline: 2px solid var(--color-primary, #c45c26);
  outline-offset: 2px;
}

.cart-section {
  flex-direction: column;
  gap: var(--cart-section-gap);
  min-width: 0;
}

.cart-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: var(--cart-section-header-padding-top);
}

.cart-section__title {
  margin: 0;
  min-width: 0;
  color: var(--color-text-primary);
  font-size: var(--font-size-cart-title);
  line-height: var(--line-height-cart-title);
  font-weight: var(--font-weight-cart-title);
}

.cart-section__profile-trigger {
  display: none;
  flex: 0 0 auto;
}

@media (min-width: 1150px) {
  .cart-section__profile-trigger {
    display: inline-flex;
  }
}

.cart-section__order-chrome {
  display: flex;
  flex-direction: column;
  gap: var(--cart-section-order-chrome-gap);
}

.cart-section__order-type-host {
  width: 100%;
}

.cart-section__delivery-info {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: var(--cart-section-delivery-info-padding-top) 3px 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.cart-section__delivery-info:focus {
  outline: none;
}

.cart-section__delivery-info:focus-visible {
  outline: 2px solid var(--color-focus-ring, #007aff);
  outline-offset: 2px;
  border-radius: 8px;
}

.cart-section__delivery-pin {
  flex: 0 0 auto;
  display: inline-flex;
}

.cart-section__delivery-pin-image {
  display: block;
  width: var(--cart-section-delivery-pin-size);
  height: var(--cart-section-delivery-pin-size);
}

.cart-section__delivery-copy {
  flex: 1 1 auto;
  min-width: 0;
}

.cart-section__delivery-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 8px;
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--font-size-body-sm);
  font-weight: 500;
  line-height: 1.35;
}

.cart-section__delivery-line--wrapped {
  justify-content: flex-start;
}

.cart-section__delivery-address {
  min-width: 0;
}

.cart-section__delivery-meta {
  flex: 0 0 auto;
  white-space: nowrap;
}

.cart-section__delivery-eta {
  color: var(--color-cart-eta);
  font-weight: 600;
}

.cart-section__delivery-fee {
  font-weight: 600;
}

.cart-section__delivery-fee-progress-host {
  padding-top: var(--cart-section-delivery-info-padding-top);
}

.cart-section__delivery-fee-progress-host[data-state='ready'] {
  cursor: pointer;
}

.cart-section__delivery-fee-progress-host[data-state='ready'] .cart-section__delivery-fee-progress-skeleton {
  display: none !important;
}

.cart-section__delivery-fee-progress-host[data-state='skeleton'] .delivery-fee-progress {
  display: none !important;
}

.cart-section__items {
  display: flex;
  flex-direction: column;
  gap: var(--cart-item-row-gap);
  min-height: 0;
  padding-top: var(--cart-section-items-padding-top);
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.cart-section__items::-webkit-scrollbar {
  display: none;
}

.cart-section__cta {
  flex: 0 0 auto;
  margin-top: auto;
  padding-top: 4px;
}

.cart-section__checkout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--cart-section-checkout-btn-height);
  padding: 0 20px;
  border: 0;
  border-radius: var(--order-type-switcher-cart-radius);
  background: var(--dish-modal-add-btn-gradient);
  color: var(--color-text-primary);
  font: inherit;
  font-size: var(--font-size-button);
  font-weight: var(--font-weight-button);
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.cart-section__checkout-btn.cart-cta--loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}

.cart-section__checkout-btn.cart-cta--loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid rgba(33, 32, 31, 0.2);
  border-top-color: var(--color-text-primary);
  border-radius: 50%;
  animation: cart-cta-spin 0.8s linear infinite;
}

@keyframes cart-cta-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (min-width: 1150px) {
  .main-page__cart.cart-section {
    display: flex;
    position: sticky;
    top: var(--main-page-padding-y);
    box-sizing: border-box;
    min-height: calc(100dvh - var(--main-page-padding-y));
    max-height: calc(100dvh - var(--main-page-padding-y));
    padding-bottom: var(--cart-section-checkout-bottom-offset);
  }

  .main-page--catalog-tabs-compact .main-page__cart.cart-section {
    padding-top: var(--cart-catalog-tabs-compact-offset);
  }

  .cart-section__items {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
  }

  .cart-section__cta {
    flex-shrink: 0;
    margin-top: auto;
    padding-top: 12px;
  }
}

.cart-section__checkout-btn:disabled {
  opacity: 0.55;
  cursor: default;
}

.cart-item {
  display: grid;
  grid-template-columns: var(--cart-item-media-size) minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--cart-item-gap);
}

.cart-item__media {
  width: var(--cart-item-media-size);
  height: var(--cart-item-media-size);
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: var(--cart-item-media-radius);
}

.cart-item__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cart-item__image--placeholder {
  background: var(--cart-item-placeholder-bg);
}

.cart-item__body {
  min-width: 0;
  padding-top: var(--cart-item-body-padding-top);
}

.cart-item__name {
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--font-size-body-sm);
  font-weight: 500;
  line-height: 1.25;
}

.cart-item__modifiers {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
}

.cart-item__modifier-line {
  display: flex;
  align-items: baseline;
  gap: var(--cart-item-modifier-sign-gap);
  margin: 0;
  color: var(--color-text-secondary, #6b7280);
  font-size: var(--cart-item-modifier-font-size);
  font-weight: 400;
  line-height: 1.3;
}

.cart-item__modifier-sign {
  flex: 0 0 auto;
}

.cart-item__price {
  margin: var(--cart-item-price-margin-top) 0 0;
  color: var(--color-text-primary);
  font-size: var(--font-size-body);
  font-weight: 600;
  line-height: 1.2;
}

.cart-item__stepper {
  display: inline-flex;
  align-items: center;
  gap: var(--cart-item-stepper-gap);
  padding: 4px 8px;
  border-radius: var(--cart-item-media-radius);
  background: var(--order-type-switcher-cart-bg);
}

.cart-item__stepper-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--cart-item-stepper-btn-size);
  height: var(--cart-item-stepper-btn-size);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text-primary);
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
}

.cart-item__stepper-btn:disabled {
  cursor: default;
  opacity: 0.4;
}

.cart-item__stepper-value {
  min-width: 12px;
  color: var(--color-text-primary);
  font-size: var(--font-size-body);
  font-weight: 600;
  line-height: 1;
  text-align: center;
}

.cart-item--readonly .cart-item__stepper {
  padding: 8px 12px;
  min-width: 40px;
  justify-content: center;
}

.cart-item--unavailable {
  opacity: 0.72;
}

.cart-item__unavailable {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  min-width: 88px;
}

.cart-item__unavailable-status {
  color: #ff4d4d;
  font-size: var(--font-size-body-sm);
  font-weight: 600;
  line-height: 1.2;
  text-align: right;
}

.cart-item__dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: var(--order-type-switcher-cart-bg, #f3f4f6);
  background-image: var(--cart-item-dismiss-icon-url);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
  cursor: pointer;
}

.auth-modal button {
  border: none;
  font-family: inherit;
  margin: 0;
}

.auth-modal input {
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  margin: 0;
  padding: 0;
}

.auth-modal {
  width: var(--auth-modal-width);
  height: var(--auth-modal-height);
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  margin: 0 var(--space-content-md);
  overflow: visible;
  transition:
    height var(--auth-view-transition-duration) var(--motion-easing-standard),
    max-height var(--auth-view-transition-duration) var(--motion-easing-standard);
}

.auth-modal__panel {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateX(0);
  opacity: 1;
  transition:
    transform var(--auth-view-transition-duration) var(--motion-easing-standard),
    opacity var(--auth-view-transition-duration) var(--motion-easing-standard);
}

.auth-modal[data-auth-view='services'] .auth-modal__panel {
  flex: 0 0 auto;
  height: auto;
  overflow: visible;
}

.auth-modal[data-auth-view='phone'] {
  height: min(var(--auth-modal-height), var(--auth-modal-phone-max-height));
  max-height: var(--auth-modal-phone-max-height);
}

.auth-modal[data-auth-view='sms-code'] {
  height: min(var(--auth-modal-height), var(--auth-modal-phone-max-height));
  max-height: var(--auth-modal-phone-max-height);
  min-height: var(--auth-modal-sms-code-min-height);
}

.auth-modal[data-auth-view='phone'] .auth-modal__panel {
  flex: 1 1 auto;
  height: 100%;
}

.auth-modal[data-auth-view='phone'] .auth-modal__content {
  flex: 1 1 auto;
  min-height: 0;
}

.auth-modal[data-auth-view='sms-code'] .auth-modal__panel {
  flex: 1 1 auto;
  height: 100%;
}

.auth-modal[data-auth-view='sms-code'] .auth-modal__content {
  flex: 1 1 auto;
  min-height: 0;
}

.auth-modal[data-auth-view='phone'] .auth-modal__description {
  margin-top: 10px;
}

.auth-modal--view-transitioning {
  pointer-events: none;
}

.auth-modal--view-exit-forward .auth-modal__panel {
  transform: translateX(-18px);
  opacity: 0;
}

.auth-modal--view-exit-back .auth-modal__panel {
  transform: translateX(18px);
  opacity: 0;
}

.auth-modal--view-enter-forward .auth-modal__panel {
  transform: translateX(18px);
  opacity: 0;
}

.auth-modal--view-enter-back .auth-modal__panel {
  transform: translateX(-18px);
  opacity: 0;
}

.auth-modal--view-enter-forward.auth-modal--view-enter-active .auth-modal__panel,
.auth-modal--view-enter-back.auth-modal--view-enter-active .auth-modal__panel {
  transform: translateX(0);
  opacity: 1;
}

.auth-modal .modal-sheet__close {
  position: absolute;
  top: calc(var(--space-popup-xl) - 10px);
  right: calc(var(--space-popup-xl) - 10px);
}

.auth-modal .modal-sheet__back {
  position: absolute;
  top: calc(var(--space-popup-xl) - 10px);
  left: calc(var(--space-popup-xl) - 10px);
  border: none;
  font-family: inherit;
  margin: 0;
  padding: 0;
  background-color: var(--modal-sheet-bg);
  background-image: none;
  box-shadow: var(--modal-close-shadow);
  border-radius: 50%;
  width: var(--modal-close-size);
  height: var(--modal-close-size);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
}

.auth-modal .modal-sheet__back::after {
  content: '';
  width: var(--modal-close-icon-size);
  height: var(--modal-close-icon-size);
  background-color: var(--color-text-primary);
  mask-image: var(--modal-back-icon-url);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: var(--modal-back-icon-url);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

.auth-modal__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: var(--space-popup-xl);
}

.auth-modal__title {
  display: flex;
  align-items: center;
  margin: var(--space-popup-xl) 0 0;
  color: var(--color-text-primary);
  font-size: var(--font-size-title-xl);
  font-weight: var(--font-weight-title);
  white-space: nowrap;
}

.auth-modal__title--phone {
  flex-direction: column;
  align-items: center;
  text-align: center;
  white-space: normal;
  text-wrap: balance;
  line-height: 1.15;
  row-gap: 2px;
}

.auth-modal__title-line {
  display: block;
}

.auth-modal__description {
  text-wrap: balance;
  text-align: center;
  margin: var(--space-content-md) 0 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-body);
}

.auth-modal__description--error {
  color: #ff4d4d;
}

.auth-modal__middle {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
}

.auth-modal__phone {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--auth-modal-phone-width);
  height: var(--auth-modal-phone-height);
  margin: 0;
  padding: 0 25px;
  border: 1px solid var(--color-border-input);
  border-radius: var(--auth-modal-phone-radius);
  flex-shrink: 0;
}

.auth-modal__phone-label {
  position: absolute;
  top: -6.5px;
  left: var(--space-popup-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 15px;
  padding: 0 8px;
  font-size: var(--font-size-label);
  color: var(--color-label);
  background: var(--modal-sheet-bg);
}

.auth-modal__phone-field {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.auth-modal__phone-input {
  width: 100%;
  font-size: var(--font-size-input);
  font-weight: var(--font-weight-input);
  color: var(--color-text-input);
}

.auth-modal__sms-code-field {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--auth-modal-sms-code-width);
  height: var(--auth-modal-sms-code-height);
  border-radius: var(--auth-modal-sms-code-radius);
  border: 1px solid var(--color-border-input);
}

.auth-modal__sms-code-field:focus-within:not(.auth-modal__sms-code-field--error):not(.auth-modal__sms-code-field--success) {
  border-width: 2px;
  border-color: var(--color-text-primary);
}

.auth-modal__sms-code-field--error {
  border-width: 2px;
  border-color: #ff4d4d;
}

.auth-modal__sms-code-field--success {
  border-width: 2px;
  border-color: #22c55e;
}

.auth-modal__sms-code-field--shake {
  animation: auth-sms-code-shake 0.42s ease;
}

@keyframes auth-sms-code-shake {
  0%,
  100% {
    transform: translateX(0);
  }

  20%,
  60% {
    transform: translateX(-8px);
  }

  40%,
  80% {
    transform: translateX(8px);
  }
}

.auth-modal__sms-code-input {
  position: absolute;
  inset: 0;
  z-index: 1;
  font-size: 16px;
  line-height: 1;
  caret-color: transparent;
  color: transparent;
}

.auth-modal__sms-code-input::selection {
  background: transparent;
}

.auth-modal__sms-code-visual {
  pointer-events: none;
  position: relative;
  width: 100%;
  height: 100%;
}

.auth-modal__sms-code-slots {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 20px 14px;
  list-style: none;
}

.auth-modal__sms-code-slot {
  flex: 0 0 34px;
  display: inline-flex;
  justify-content: center;
  align-items: flex-end;
  min-height: 40px;
  font-size: 34px;
  line-height: 1;
}

.auth-modal__sms-code-slot--digit {
  color: var(--color-text-primary);
}

.auth-modal__sms-code-slot--dash::after {
  content: '';
  width: 18px;
  height: 2px;
  margin-bottom: 2px;
  border-radius: 1px;
  background-color: #b3b8cc;
}

.auth-modal__footer {
  position: sticky;
  bottom: 0;
  width: 100%;
  min-height: 60px;
  height: fit-content;
  flex-shrink: 0;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  grid-row-gap: var(--space-footer-gap);
}

.auth-modal__footer::before {
  position: absolute;
  top: -21px;
  display: block;
  content: '';
  width: 100%;
  min-height: 21px;
  height: 21px;
  background: linear-gradient(to top, var(--modal-sheet-bg) 10%, rgba(255, 255, 255, 0));
}

.auth-modal__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  padding: 0 var(--space-popup-lg);
  font-size: var(--font-size-button);
  line-height: var(--line-height-button);
  font-weight: var(--font-weight-button);
  border-radius: 17px;
  background: var(--color-button-primary-bg);
  color: var(--color-button-primary-text);
  transition:
    background-color var(--motion-duration-button) var(--motion-easing-standard),
    color var(--motion-duration-button) var(--motion-easing-standard);
  cursor: pointer;
}

.auth-modal__btn--disabled {
  background: var(--color-button-disabled-bg) !important;
  color: var(--color-button-disabled-text) !important;
  cursor: default;
}

.auth-modal__btn--minor {
  background: var(--color-button-minor-bg);
  color: var(--color-button-primary-text);
}

.auth-modal__btn--sms {
  font-size: var(--font-size-button-sms);
  line-height: var(--line-height-button-sms);
}

.auth-modal__btn--max {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  column-gap: 12px;
  background: var(--color-button-disabled-bg);
  color: var(--color-button-disabled-text);
  padding: 14px;
  transition: color var(--motion-duration-button) var(--motion-easing-standard);
}

.auth-modal__btn--max-ready {
  color: var(--color-button-yandex-text);
  cursor: pointer;
}

.auth-modal__btn-max-bg {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--auth-max-gradient);
  opacity: 0;
  transition: opacity var(--motion-duration-button) var(--motion-easing-standard);
  pointer-events: none;
  z-index: 0;
}

.auth-modal__btn--max-ready .auth-modal__btn-max-bg {
  opacity: 1;
}

.auth-modal__btn-max-label {
  position: relative;
  z-index: 1;
}

.auth-modal__btn-max-icon {
  position: relative;
  z-index: 1;
  width: var(--auth-max-icon-size);
  height: var(--auth-max-icon-size);
  flex-shrink: 0;
}

.auth-modal__btn-max-icon-layer {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: opacity var(--motion-duration-button) var(--motion-easing-standard);
}

.auth-modal__btn-max-icon-layer--color {
  background-image: var(--auth-max-icon-color);
  opacity: 1;
}

.auth-modal__btn-max-icon-layer--mono {
  background-image: var(--auth-max-icon-mono);
  opacity: 0;
}

.auth-modal__btn--max-ready .auth-modal__btn-max-icon-layer--color {
  opacity: 0;
}

.auth-modal__btn--max-ready .auth-modal__btn-max-icon-layer--mono {
  opacity: 1;
}

.auth-modal__btn-slot {
  width: 100%;
  box-sizing: border-box;
}

@keyframes auth-sdk-slot-pulse {
  0%,
  100% {
    opacity: 0.55;
  }

  50% {
    opacity: 0.85;
  }
}

.auth-modal__btn-slot--loading {
  animation: auth-sdk-slot-pulse 1.1s ease-in-out infinite;
}

.auth-modal__btn-slot--vk.auth-modal__btn-slot--loading {
  background-color: var(--color-button-vk-bg);
}

.auth-modal__btn-slot--yandex.auth-modal__btn-slot--loading {
  background-color: var(--color-button-yandex-bg);
}

/* Слот SDK-кнопки: 48px (как .auth-modal__btn), полная ширина */
.auth-modal__btn-slot[data-auth-sdk] {
  position: relative;
  display: block;
  width: 100%;
  height: 48px;
  height: var(--auth-sdk-button-slot-height, 48px);
  min-height: 48px;
  min-height: var(--auth-sdk-button-slot-height, 48px);
  max-height: 48px;
  max-height: var(--auth-sdk-button-slot-height, 48px);
  overflow: hidden;
  border-radius: var(--auth-sdk-button-border-radius);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.auth-modal__btn-slot[data-auth-sdk]::-webkit-scrollbar {
  display: none;
}

.auth-modal__btn-slot[data-auth-sdk]:empty {
  min-height: var(--auth-sdk-button-slot-height);
}

/* Все прямые дочерние элементы SDK — на всю ширину */
.auth-modal__btn-slot[data-auth-sdk] > * {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* VK One Tap iframe — на всю высоту слота */
.auth-modal__btn-slot--vk iframe {
  display: block !important;
  width: 100% !important;
  height: 48px !important;
  height: var(--auth-sdk-button-slot-height, 48px) !important;
  min-height: 48px !important;
  min-height: var(--auth-sdk-button-slot-height, 48px) !important;
  border: 0 !important;
  scrollbar-width: none !important;
}

/* Яндекс: iframe на всю высоту слота; overflow:hidden — без системных скроллбаров */
.auth-modal__btn-slot--yandex iframe {
  display: block !important;
  width: 100% !important;
  height: 48px !important;
  height: var(--auth-sdk-button-slot-height, 48px) !important;
  min-height: 48px !important;
  min-height: var(--auth-sdk-button-slot-height, 48px) !important;
  max-height: 48px !important;
  max-height: var(--auth-sdk-button-slot-height, 48px) !important;
  border: 0 !important;
  overflow: hidden !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

/* Обёртки SDK Яндекса тоже не должны скроллиться */
.auth-modal__btn-slot--yandex,
.auth-modal__btn-slot--yandex * {
  overflow: hidden !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.auth-modal__btn-slot--yandex *::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* VK in-DOM кнопка до загрузки iframe */
.auth-modal__btn-slot--vk [class*='VkIdWebSdk__button_']:not([class*='_reset_']) {
  height: 48px !important;
  height: var(--auth-sdk-button-slot-height, 48px) !important;
  min-height: 48px !important;
  max-height: 48px !important;
  box-sizing: border-box !important;
}

/* Яндекс: обёртка на всю ширину/высоту слота */
.auth-modal__btn-slot--yandex .yaPreloadingSuggestBlockContainer {
  display: block !important;
  width: 100% !important;
  height: 48px !important;
  height: var(--auth-sdk-button-slot-height, 48px) !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  overflow: hidden !important;
  position: relative !important;
}

/* Preloading-блок с иконками скрываем — выглядит некорректно при растянутом контейнере */
.auth-modal__btn-slot--yandex .yaPreloadingSuggestBlock {
  display: none !important;
}

/* in-DOM кнопка Яндекса (до загрузки iframe) — на всю ширину */
.auth-modal__btn-slot--yandex .yaPersonalButton {
  display: flex !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

.auth-modal__btn--vk {
  column-gap: 12px;
  background-color: var(--color-button-vk-bg);
  color: var(--color-button-vk-text);
  padding: 14px;
}

.auth-modal__btn-vk-icon,
.auth-modal__btn-yandex-icon {
  width: var(--auth-max-icon-size);
  height: var(--auth-max-icon-size);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.auth-modal__btn-yandex-icon {
  border-radius: 50%;
}

.auth-modal__btn--yandex {
  column-gap: 12px;
  background-color: var(--color-button-yandex-bg);
  color: var(--color-button-yandex-text);
  padding: 14px;
}

.auth-modal__phone-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 4px 0;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-button);
  line-height: var(--line-height-button);
  color: var(--color-text-secondary);
  background: transparent;
  cursor: pointer;
}

.auth-modal[data-auth-view='services'] {
  height: auto;
}

.auth-modal[data-auth-view='services'] .auth-modal__content {
  height: auto;
}

.auth-modal[data-auth-view='services'] .auth-modal__title,
.auth-modal[data-auth-view='phone'] .auth-modal__title {
  margin: var(--space-content-md) 0 0;
}

.auth-modal[data-auth-view='services'] .auth-modal__description,
.auth-modal[data-auth-view='phone'] .auth-modal__description {
  margin: 10px 0 0;
}

.auth-modal__legal {
  margin: var(--space-content-md) 0 0;
  padding: 0 4px;
  font-size: 12px;
  line-height: 1.35;
  text-align: center;
  text-wrap: balance;
  color: var(--color-text-secondary);
}

.auth-modal__legal a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.auth-modal__footer--services {
  margin-top: 50px;
}

.auth-modal__separator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 20px;
  color: var(--color-text-secondary);
}

.auth-modal__separator-line {
  width: 80%;
  height: 1px;
  border: none;
  pointer-events: none;
  background: var(--color-line);
}

.auth-modal__separator-text {
  position: absolute;
  font-size: var(--font-size-body-sm);
  padding: 0 var(--space-sep-text-padding);
  background: var(--modal-sheet-bg);
}

@media (prefers-reduced-motion: reduce) {
  .auth-modal,
  .auth-modal__panel {
    transition: none;
  }

  .auth-modal__btn-max-bg,
  .auth-modal__btn-max-icon-layer,
  .auth-modal__btn,
  .auth-modal__btn-slot--loading,
  .auth-modal__sms-code-field--shake {
    transition: none;
    animation: none;
  }
}

@media screen and (max-width: 865px) {
  .auth-modal {
    --auth-modal-mobile-safe-max-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }

  @supports (height: 100dvh) {
    .auth-modal {
      --auth-modal-mobile-safe-max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    }
  }

  .auth-modal__title {
    font-size: var(--font-size-title-lg);
  }

  .auth-modal {
    flex-direction: column;
    width: 100%;
    height: min(var(--auth-modal-height-mobile), var(--auth-modal-mobile-safe-max-height));
    max-height: var(--auth-modal-mobile-safe-max-height);
    border-radius: var(--modal-sheet-radius) var(--modal-sheet-radius) 0 0;
    margin: 0;
  }

  .auth-modal[data-auth-view='phone'] {
    height: min(
      var(--auth-modal-height-mobile),
      var(--auth-modal-mobile-safe-max-height),
      var(--auth-modal-phone-max-height)
    );
    max-height: min(var(--auth-modal-mobile-safe-max-height), var(--auth-modal-phone-max-height));
  }

  .auth-modal[data-auth-view='sms-code'] {
    height: min(
      var(--auth-modal-height-mobile),
      var(--auth-modal-mobile-safe-max-height),
      var(--auth-modal-phone-max-height)
    );
    max-height: min(var(--auth-modal-mobile-safe-max-height), var(--auth-modal-phone-max-height));
    min-height: min(var(--auth-modal-sms-code-min-height), var(--auth-modal-mobile-safe-max-height));
  }

  .auth-modal .modal-sheet__close {
    position: absolute;
    top: calc((var(--modal-close-size) + 10px) * -1);
    right: calc(var(--space-popup-xl) - 15px);
    z-index: 3;
  }

  .auth-modal .modal-sheet__back {
    position: absolute;
    top: calc((var(--modal-close-size) + 10px) * -1);
    left: calc(var(--space-popup-xl) - 15px);
    z-index: 3;
  }

  .auth-modal__content {
    flex: 1;
    min-height: 0;
    padding: var(--space-popup-xl) var(--space-popup-lg);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .auth-modal__middle {
    flex: 1;
    margin-top: 0;
    min-height: 0;
  }

  .auth-modal__footer {
    position: static;
    margin-top: auto;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .auth-modal__footer::before {
    display: none;
  }

  .auth-modal[data-auth-view='services'] {
    height: auto;
    max-height: var(--auth-modal-mobile-safe-max-height);
  }

  .auth-modal[data-auth-view='services'] .auth-modal__content {
    flex: 0 0 auto;
  }

  .auth-modal[data-auth-view='services'] .auth-modal__footer {
    margin-top: 50px;
  }

  .auth-modal[data-auth-view='phone'] .auth-modal__panel {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
  }

  .auth-modal[data-auth-view='phone'] .auth-modal__content {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
}

@media screen and (max-width: 380px) {
  .auth-modal__title {
    font-size: var(--font-size-title-md);
  }

  .auth-modal .modal-sheet__back {
    width: var(--modal-close-size-sm);
    height: var(--modal-close-size-sm);
  }

  .auth-modal .modal-sheet__back::after {
    width: var(--modal-close-icon-size-sm);
    height: var(--modal-close-icon-size-sm);
  }
}

@media screen and (max-width: 865px) and (max-height: 740px) {
  .auth-modal[data-auth-view='phone'],
  .auth-modal[data-auth-view='sms-code'] {
    height: min(
      var(--auth-modal-height-mobile-small),
      var(--auth-modal-mobile-safe-max-height),
      var(--auth-modal-phone-max-height)
    );
  }
}

@media screen and (max-width: 865px) and (max-height: 640px) {
  .auth-modal[data-auth-view='phone'],
  .auth-modal[data-auth-view='sms-code'] {
    height: min(
      var(--auth-modal-height-mobile-xxs),
      var(--auth-modal-mobile-safe-max-height),
      var(--auth-modal-phone-max-height)
    );
  }
}

.ui-toast-host {
  --ui-toast-bg: #1f1f1f;
  --ui-toast-radius: 15px;
  --ui-toast-icon-size: 28px;
  --ui-toast-desktop-max-width: 360px;
  --ui-toast-mobile-edge: 16px;
  --ui-toast-gap: 12px;
  --ui-toast-padding-y: 12px;
  --ui-toast-padding-x: 16px;

  position: fixed;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  pointer-events: none;
  box-sizing: border-box;
}

/* Mobile: сверху; отступ = safe-area страницы + 16px как у контента */
.ui-toast-host {
  top: calc(env(safe-area-inset-top, 0px) + var(--ui-toast-mobile-edge));
  left: calc(env(safe-area-inset-left, 0px) + var(--ui-toast-mobile-edge));
  right: calc(env(safe-area-inset-right, 0px) + var(--ui-toast-mobile-edge));
  bottom: auto;
  width: auto;
  max-width: none;
  transform: none;
}

.ui-toast {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--ui-toast-gap);
  width: 100%;
  box-sizing: border-box;
  padding: var(--ui-toast-padding-y) var(--ui-toast-padding-x);
  border-radius: var(--ui-toast-radius);
  background: var(--ui-toast-bg);
  color: #ffffff;
  font-size: var(--font-size-body-sm, 15px);
  line-height: 1.35;
  font-weight: var(--font-weight-button, 600);
  text-align: left;
  opacity: 0;
  transform: translateY(-8px);
  transition:
    opacity 0.3s var(--motion-easing-standard, ease),
    transform 0.3s var(--motion-easing-standard, ease);
}

.ui-toast__icon {
  flex: 0 0 var(--ui-toast-icon-size);
  width: var(--ui-toast-icon-size);
  height: var(--ui-toast-icon-size);
  display: block;
  object-fit: contain;
}

.ui-toast__text {
  flex: 1 1 auto;
  min-width: 0;
}

.ui-toast--multiline .ui-toast__text {
  white-space: pre-line;
}

.ui-toast--visible {
  opacity: 1;
  transform: translateY(0);
}

/* Desktop: снизу, ограничение ширины, центр контентной полосы */
@media (min-width: 866px) {
  .ui-toast-host {
    top: auto;
    left: 50%;
    right: auto;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    width: min(
      100% - 32px,
      var(--ui-toast-desktop-max-width),
      var(--main-content-width, 1120px)
    );
    transform: translateX(-50%);
    align-items: stretch;
  }

  .ui-toast {
    transform: translateY(8px);
  }

  .ui-toast--visible {
    transform: translateY(0);
  }
}

.delivery-fee-progress {
  --delivery-fee-progress-accent: #206f5c;
  --delivery-fee-progress-bg: #e8e6e2;
  --delivery-fee-progress-track-bg: rgba(255, 255, 255, 0.85);
  --delivery-fee-progress-fill-ms: 380ms;
  --delivery-fee-progress-fade-ms: 220ms;
  --delivery-fee-progress-layout-ms: 220ms;
  --delivery-fee-progress-motion-easing: var(--motion-easing-standard);
  --delivery-fee-progress-radius-pill: 999px;
  --delivery-fee-progress-radius-card: var(--order-type-switcher-cart-radius, 20px);

  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  min-height: var(--delivery-fee-progress-height, 36px);
  padding: 8px 12px;
  border-radius: var(--delivery-fee-progress-radius-pill);
  background: var(--delivery-fee-progress-bg);
  color: var(--delivery-fee-progress-accent);
  box-sizing: border-box;
  transition:
    border-radius var(--delivery-fee-progress-layout-ms) var(--delivery-fee-progress-motion-easing),
    padding var(--delivery-fee-progress-layout-ms) var(--delivery-fee-progress-motion-easing);
}

.delivery-fee-progress--wrapped {
  border-radius: var(--delivery-fee-progress-radius-card);
}

.delivery-fee-progress[hidden] {
  display: none;
}

.delivery-fee-progress__icon {
  flex: 0 0 auto;
  display: block;
  width: 22px;
  height: 22px;
}

.delivery-fee-progress__current-slot {
  position: relative;
  flex: 0 0 auto;
  min-width: 44px;
}

.delivery-fee-progress__current-value {
  display: inline-block;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  transition:
    opacity var(--delivery-fee-progress-fade-ms) var(--delivery-fee-progress-motion-easing),
    transform var(--delivery-fee-progress-fade-ms) var(--delivery-fee-progress-motion-easing);
}

.delivery-fee-progress__track {
  flex: 1 1 48px;
  min-width: 48px;
  height: 4px;
  border-radius: 999px;
  background: var(--delivery-fee-progress-track-bg);
  overflow: hidden;
}

.delivery-fee-progress__fill {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--delivery-fee-progress-accent);
  transform: scaleX(0);
  transform-origin: left center;
}

.delivery-fee-progress__next-pill {
  flex: 0 0 auto;
  padding: 2px 8px;
  border: 1.5px dashed var(--delivery-fee-progress-accent);
  border-radius: 999px;
  background: transparent;
  transition:
    opacity var(--delivery-fee-progress-fade-ms) var(--delivery-fee-progress-motion-easing),
    transform var(--delivery-fee-progress-fade-ms) var(--delivery-fee-progress-motion-easing);
}

.delivery-fee-progress__next-pill--hidden,
.delivery-fee-progress__next-pill--leaving {
  opacity: 0;
  transform: scale(0.96);
}

.delivery-fee-progress__next-value {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.delivery-fee-progress__hint {
  flex: 0 0 auto;
  min-width: 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  transition:
    opacity var(--delivery-fee-progress-fade-ms) var(--delivery-fee-progress-motion-easing),
    transform var(--delivery-fee-progress-fade-ms) var(--delivery-fee-progress-motion-easing);
}

.delivery-fee-progress__hint[hidden] {
  display: none;
}

.delivery-fee-progress__hint--fading {
  opacity: 0;
  transform: translateY(2px);
  transition: none;
}

.delivery-fee-progress__hint--enter {
  animation: delivery-fee-progress-hint-in var(--delivery-fee-progress-fade-ms)
    var(--delivery-fee-progress-motion-easing) forwards;
  transition: none;
}

.delivery-fee-progress__final-label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
}

.delivery-fee-progress__progress-row[hidden],
.delivery-fee-progress__final-row[hidden] {
  display: none;
}

.delivery-fee-progress__progress-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  transition:
    opacity var(--delivery-fee-progress-fade-ms) var(--delivery-fee-progress-motion-easing),
    gap var(--delivery-fee-progress-layout-ms) var(--delivery-fee-progress-motion-easing);
}

.delivery-fee-progress__main-line {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.delivery-fee-progress--wrapped .delivery-fee-progress__progress-row {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}

.delivery-fee-progress--wrapped .delivery-fee-progress__main-line {
  width: 100%;
}

.delivery-fee-progress--wrapped .delivery-fee-progress__hint {
  width: 100%;
  text-align: center;
}

.delivery-fee-progress__final-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.delivery-fee-progress--tier-unlock .delivery-fee-progress__current-value {
  opacity: 0;
  transform: translateY(-2px);
}

.delivery-fee-progress--final-enter .delivery-fee-progress__final-row {
  animation: delivery-fee-progress-row-in var(--delivery-fee-progress-fade-ms)
    var(--delivery-fee-progress-motion-easing);
}

@keyframes delivery-fee-progress-hint-in {
  from {
    opacity: 0;
    transform: translateY(3px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes delivery-fee-progress-row-in {
  from {
    opacity: 0;
    transform: translateY(2px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .delivery-fee-progress,
  .delivery-fee-progress__current-value,
  .delivery-fee-progress__next-pill,
  .delivery-fee-progress__hint,
  .delivery-fee-progress__progress-row {
    transition: none;
  }

  .delivery-fee-progress__hint--enter,
  .delivery-fee-progress--final-enter .delivery-fee-progress__final-row {
    animation: none;
  }
}

.delivery-fee-tiers-modal button {
  border: none;
  font-family: inherit;
  margin: 0;
  cursor: pointer;
}

.delivery-fee-tiers-modal {
  position: relative;
  width: 420px;
  max-width: calc(100vw - 2 * var(--space-content-md));
  display: flex;
  flex-wrap: nowrap;
  margin: 0 var(--space-content-md);
  overflow: hidden;
  transition: var(--motion-duration-modal);
}

.delivery-fee-tiers-modal .modal-sheet__close {
  position: absolute;
  top: calc(var(--space-popup-xl) - 10px);
  right: calc(var(--space-popup-xl) - 10px);
}

.delivery-fee-tiers-modal__content {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  padding: var(--space-popup-xl);
  box-sizing: border-box;
}

.delivery-fee-tiers-modal__title {
  margin: 0;
  padding-right: calc(var(--modal-close-size) + 8px);
  color: var(--color-text-primary);
  font-size: var(--font-size-title-xl);
  font-weight: var(--font-weight-title);
}

.delivery-fee-tiers-modal__table-wrap {
  margin-top: 20px;
  overflow-x: auto;
}

.delivery-fee-tiers-modal__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

.delivery-fee-tiers-modal__table th,
.delivery-fee-tiers-modal__table td {
  padding: 10px 0;
  text-align: left;
  vertical-align: top;
}

.delivery-fee-tiers-modal__table th {
  color: var(--color-text-secondary);
  font-size: 14px;
  font-weight: var(--font-weight-medium, 500);
}

.delivery-fee-tiers-modal__table th:nth-child(2),
.delivery-fee-tiers-modal__table td:nth-child(2) {
  text-align: right;
}

.delivery-fee-tiers-modal__table td {
  color: var(--color-text-primary);
}

.delivery-fee-tiers-modal__delivery-content {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.delivery-fee-tiers-modal__courier-icon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  background-color: var(--color-text-secondary);
  mask-image: var(--delivery-fee-tiers-courier-icon-url);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: var(--delivery-fee-tiers-courier-icon-url);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

.delivery-fee-tiers-modal__delivery-label {
  min-width: 0;
  color: var(--color-text-primary);
}

.delivery-fee-tiers-modal__table tbody tr:last-child td {
  border-bottom: none;
}

.delivery-fee-tiers-modal__footer {
  margin-top: 24px;
  width: 100%;
  flex-shrink: 0;
}

.delivery-fee-tiers-modal__ok-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--address-btn-height, 52px);
  padding: 0 20px;
  border-radius: 17px;
  background: var(--color-button-primary-bg);
  color: var(--color-button-primary-text);
  font-size: var(--font-size-button);
  line-height: var(--line-height-button);
  font-weight: var(--font-weight-button);
  transition:
    background-color var(--motion-duration-button) var(--motion-easing-standard),
    color var(--motion-duration-button) var(--motion-easing-standard);
}

@media screen and (max-width: 865px) {
  .delivery-fee-tiers-modal {
    --delivery-fee-tiers-modal-mobile-safe-max-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    max-height: min(70vh, var(--delivery-fee-tiers-modal-mobile-safe-max-height));
    border-radius: var(--modal-sheet-radius) var(--modal-sheet-radius) 0 0;
    margin: 0;
    overflow: visible;
  }

  @supports (height: 100dvh) {
    .delivery-fee-tiers-modal {
      --delivery-fee-tiers-modal-mobile-safe-max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    }
  }

  .delivery-fee-tiers-modal .modal-sheet__close {
    top: calc((var(--modal-close-size) + 10px) * -1);
    right: calc(var(--space-popup-lg) - 15px);
    z-index: 3;
  }

  .delivery-fee-tiers-modal__title {
    font-size: var(--font-size-title-lg);
    padding-right: 0;
  }

  .delivery-fee-tiers-modal__content {
    padding-left: var(--space-popup-lg);
    padding-right: var(--space-popup-lg);
    padding-bottom: calc(var(--space-popup-lg) + env(safe-area-inset-bottom));
  }
}

@media screen and (max-width: 380px) {
  .delivery-fee-tiers-modal__title {
    font-size: var(--font-size-title-md);
  }
}

.profile-trigger-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--color-text-primary);
  font: inherit;
}

.profile-trigger-btn:focus {
  outline: none;
}

.profile-trigger-btn:focus-visible {
  outline: 2px solid var(--color-focus-ring, #007aff);
  outline-offset: 2px;
}

.profile-trigger-btn::before {
  content: '';
  display: block;
  width: 24px;
  height: 24px;
  background-color: currentColor;
  mask-image: var(--profile-trigger-icon-url);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: var(--profile-trigger-icon-url);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

.profile-trigger-btn--desktop {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 12px;
}

.profile-trigger-btn--desktop:focus-visible {
  border-radius: 12px;
}

.profile-trigger-btn--fab {
  position: fixed;
  left: var(--cart-floating-btn-offset-x);
  bottom: calc(var(--cart-floating-btn-offset-y) + env(safe-area-inset-bottom, 0px));
  z-index: var(--cart-floating-btn-z-index);
  width: var(--cart-floating-btn-height);
  height: var(--cart-floating-btn-height);
  border-radius: 50%;
  background: #ffffff;
  box-shadow: var(--cart-floating-btn-shadow);
  color: var(--color-text-primary);
}

.profile-trigger-btn--fab:focus-visible {
  border-radius: 50%;
}

@media (min-width: 1150px) {
  .profile-trigger-btn--fab {
    display: none;
  }
}

.profile-modal button {
  border: none;
  font-family: inherit;
  margin: 0;
  cursor: pointer;
}

.profile-modal {
  position: relative;
  width: 420px;
  max-width: calc(100vw - 2 * var(--space-content-md));
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  margin: 0 var(--space-content-md);
  overflow: hidden;
  transition: var(--motion-duration-modal);
}

.profile-modal .modal-sheet__close {
  position: absolute;
  top: calc(var(--space-popup-xl) - 10px);
  right: calc(var(--space-popup-xl) - 10px);
}

.profile-modal__content {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  padding: var(--space-popup-xl);
  box-sizing: border-box;
}

.profile-modal__title {
  margin: 0;
  padding-right: calc(var(--modal-close-size) + 8px);
  color: var(--color-text-primary);
  font-size: var(--font-size-title-xl);
  font-weight: var(--font-weight-title);
  line-height: 1.2;
}

.profile-modal__description {
  margin: 8px 0 0;
  padding-right: calc(var(--modal-close-size) + 8px);
  color: var(--color-text-secondary);
  font-size: var(--font-size-body-sm);
  line-height: 1.45;
}

.profile-modal__description[hidden] {
  display: none;
}

.profile-modal__info {
  margin-top: 16px;
}

.profile-modal__info[hidden] {
  display: none;
}

.profile-modal__identity {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  column-gap: 12px;
  row-gap: 4px;
  width: 100%;
}

.profile-modal__name {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--color-text-primary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-button);
  line-height: 1.35;
  text-align: left;
}

.profile-modal__phone {
  flex: 0 1 auto;
  margin: 0 0 0 auto;
  color: var(--color-text-secondary);
  font-size: var(--font-size-body-sm);
  line-height: 1.4;
  text-align: right;
  white-space: nowrap;
}

.profile-modal__identity:not(:has(.profile-modal__name)) .profile-modal__phone {
  margin-left: 0;
  text-align: left;
}

.profile-modal__notifications {
  width: 100%;
}

.profile-modal__notifications[hidden] {
  display: none;
}

.profile-modal__menu {
  display: flex;
  flex-direction: column;
  margin-top: 12px;
  gap: 4px;
}

.profile-modal__menu[hidden] {
  display: none;
}

.profile-modal__menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 10px 4px;
  background: transparent;
  color: var(--color-text-primary);
  font-size: var(--font-size-body);
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
}

.profile-modal__menu-item:focus {
  outline: none;
}

.profile-modal__menu-item:focus-visible {
  outline: 2px solid var(--color-focus-ring, #007aff);
  outline-offset: 2px;
  border-radius: 10px;
}

.profile-modal__menu-icon {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  background-color: currentColor;
  mask-image: var(--profile-menu-icon-url);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: var(--profile-menu-icon-url);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

.profile-modal__menu-label {
  min-width: 0;
}

.profile-modal__footer {
  margin-top: 40px;
  width: 100%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.profile-modal__auth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 48px;
  padding: 0 var(--space-popup-lg);
  border-radius: 17px;
  font-size: var(--font-size-button);
  line-height: var(--line-height-button);
  font-weight: var(--font-weight-button);
  transition:
    background-color var(--motion-duration-button) var(--motion-easing-standard),
    color var(--motion-duration-button) var(--motion-easing-standard);
}

.profile-modal__auth-btn:focus {
  outline: none;
}

.profile-modal__auth-btn:focus-visible {
  outline: 2px solid var(--color-focus-ring, #007aff);
  outline-offset: 2px;
}

.profile-modal__auth-btn-icon {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  background-color: currentColor;
  mask-image: var(--profile-menu-icon-url);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: var(--profile-menu-icon-url);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

.profile-modal__auth-btn--primary {
  background: var(--color-button-primary-bg);
  color: var(--color-button-primary-text);
}

.profile-modal__auth-btn--danger {
  background: rgba(255, 77, 77, 0.12);
  color: #ff4d4d;
}

.profile-modal__report-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 8px var(--space-popup-lg);
  background: transparent;
  color: var(--color-text-secondary);
  font-size: var(--font-size-body-sm);
  font-weight: 500;
  line-height: 1.3;
}

.profile-modal__report-btn:focus {
  outline: none;
}

.profile-modal__report-btn:focus-visible {
  outline: 2px solid var(--color-focus-ring, #007aff);
  outline-offset: 2px;
  border-radius: 10px;
}

.profile-modal__report-btn-icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  mask-image: var(--profile-menu-icon-url);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: var(--profile-menu-icon-url);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

@media screen and (max-width: 865px) {
  .profile-modal {
    width: 100%;
    max-width: none;
    margin: 0;
    border-radius: var(--modal-sheet-radius) var(--modal-sheet-radius) 0 0;
    overflow: visible;
  }

  .profile-modal .modal-sheet__close {
    top: calc((var(--modal-close-size) + 10px) * -1);
    right: calc(var(--space-popup-xl) - 15px);
    z-index: 3;
  }

  .profile-modal__title {
    padding-right: 0;
  }

  .profile-modal__description {
    padding-right: 0;
  }

  .profile-modal__footer {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

.my-promos-modal button {
  border: none;
  font-family: inherit;
  margin: 0;
  cursor: pointer;
}

.my-promos-modal {
  position: relative;
  width: 420px;
  max-width: calc(100vw - 2 * var(--space-content-md));
  max-height: min(590px, calc(100dvh - 2 * var(--space-content-md)));
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  margin: 0 var(--space-content-md);
  overflow: hidden;
  transition: var(--motion-duration-modal);
}

.my-promos-modal .modal-sheet__close {
  position: absolute;
  top: calc(var(--space-popup-xl) - 10px);
  right: calc(var(--space-popup-xl) - 10px);
  z-index: 3;
}

.my-promos-modal__content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  max-height: inherit;
  padding: var(--space-popup-xl);
  box-sizing: border-box;
}

.my-promos-modal__title {
  margin: 0;
  padding-right: calc(var(--modal-close-size) + 8px);
  color: var(--color-text-primary);
  font-size: var(--font-size-title-xl);
  font-weight: var(--font-weight-title);
  line-height: 1.2;
}

.my-promos-modal__list-host {
  --checkout-page-padding-x: 0;

  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 16px;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.my-promos-modal__list-host::-webkit-scrollbar {
  display: none;
}

.my-promos-modal__list-host .checkout-promo-list {
  min-width: 0;
}

.my-promos-modal__list-host .checkout-promo-list__scroll {
  width: 100%;
  margin-inline: 0;
}

.my-promos-modal__list-host .checkout-promo-list__items {
  padding-inline: 0;
}

.my-promos-modal__status {
  margin: 0;
  padding: 24px 8px;
  text-align: center;
  color: var(--color-text-secondary);
  font-size: var(--font-size-body);
  line-height: 1.45;
}

@media screen and (max-width: 865px) {
  .my-promos-modal {
    --my-promos-modal-mobile-safe-max-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    max-height: min(70vh, var(--my-promos-modal-mobile-safe-max-height));
    border-radius: var(--modal-sheet-radius) var(--modal-sheet-radius) 0 0;
    margin: 0;
    overflow: visible;
  }

  @supports (height: 100dvh) {
    .my-promos-modal {
      --my-promos-modal-mobile-safe-max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    }
  }

  .my-promos-modal .modal-sheet__close {
    top: calc((var(--modal-close-size) + 10px) * -1);
    right: calc(var(--space-popup-lg) - 15px);
    z-index: 3;
  }

  .my-promos-modal__content {
    padding-left: var(--space-popup-lg);
    padding-right: var(--space-popup-lg);
    padding-bottom: calc(var(--space-popup-lg) + env(safe-area-inset-bottom));
    overflow: auto;
  }

  .my-promos-modal__title {
    font-size: var(--font-size-title-lg);
    padding-right: 0;
  }
}

@media screen and (max-width: 380px) {
  .my-promos-modal__title {
    font-size: var(--font-size-title-md);
  }
}

.checkout-promo-list {
  --checkout-promo-card-width: 268px;
  --checkout-promo-active-bg: #dfe8e2;

  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
  min-width: 0;
  overflow: visible;
}

.checkout-promo-list--no-title {
  margin-top: 0;
  gap: 0;
}

.checkout-promo-list--readonly .checkout-promo-list__item {
  cursor: default;
}

.checkout-promo-list--readonly .checkout-promo-list__conditions {
  margin-left: 0;
}

.checkout-promo-list__title {
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--font-size-title-md);
  font-weight: 700;
}

.checkout-promo-list__empty {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-body-sm);
}

.checkout-promo-list__scroll {
  width: calc(100% + (2 * var(--checkout-page-padding-x, 16px)));
  min-width: 0;
  margin-inline: calc(-1 * var(--checkout-page-padding-x, 16px));
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.checkout-promo-list__scroll::-webkit-scrollbar {
  display: none;
}

.checkout-promo-list__items {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
  width: max-content;
  min-width: 0;
  padding-inline: var(--checkout-page-padding-x, 16px);
  box-sizing: border-box;
}

.checkout-promo-list__entry {
  display: flex;
  flex: 0 0 var(--checkout-promo-card-width);
  flex-direction: column;
  gap: 4px;
  width: var(--checkout-promo-card-width);
  min-width: 0;
}

.checkout-promo-list__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  min-height: var(--order-type-switcher-height);
  padding: 12px 14px;
  border: 0;
  border-radius: 14px;
  background: var(--order-type-switcher-cart-bg);
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.checkout-promo-list__item:has(.checkout-promo-list__toggle-input:checked) {
  background: var(--checkout-promo-active-bg);
}

.checkout-promo-list__toggle-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.checkout-promo-list__toggle-track {
  position: relative;
  flex: 0 0 auto;
  align-self: center;
  display: block;
  width: 44px;
  height: 26px;
  border-radius: 999px;
  background: #d8d5d0;
  transition: background-color 180ms ease;
}

.checkout-promo-list__toggle-track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  transition: transform 180ms ease;
}

.checkout-promo-list__toggle-input:checked + .checkout-promo-list__toggle-track {
  background: var(--delivery-fee-progress-accent);
}

.checkout-promo-list__toggle-input:checked + .checkout-promo-list__toggle-track::after {
  transform: translateX(18px);
}

.checkout-promo-list__toggle-input:focus-visible + .checkout-promo-list__toggle-track {
  outline: 2px solid var(--color-focus-ring, #007aff);
  outline-offset: 2px;
}

.checkout-promo-list__copy {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.checkout-promo-list__label {
  color: var(--color-text-primary);
  font-size: var(--font-size-body-sm);
  font-weight: 400;
  line-height: 1.25;
}

.checkout-promo-list__valid-until {
  display: block;
  color: var(--color-text-secondary);
  font-size: 12px;
  line-height: 1.25;
}

.checkout-promo-list__conditions {
  margin: 0 0 0 5px;
  color: var(--color-text-secondary);
  font-size: 12px;
  line-height: 1.25;
  margin-left: 5px;
  padding-bottom: 8px;
}

@media (min-width: 1150px) {
  .checkout-promo-list {
    margin-top: 24px;
  }

  .checkout-promo-list__scroll {
    width: 100%;
    margin-inline: 0;
    overflow: visible;
  }

  .checkout-promo-list__items {
    flex-wrap: wrap;
    width: 100%;
    padding-inline: 0;
  }

  .checkout-promo-list__entry {
    flex: 1 1 calc((100% - 8px) / 2);
    width: calc((100% - 8px) / 2);
    max-width: calc((100% - 8px) / 2);
  }
}

.saved-payment-methods-modal button {
  border: none;
  font-family: inherit;
  margin: 0;
  cursor: pointer;
}

.saved-payment-methods-modal {
  --saved-payment-methods-modal-card-width: 132px;
  --saved-payment-methods-modal-card-height: 86px;
  --saved-payment-methods-modal-card-padding: 10px;
  --saved-payment-methods-modal-control-bg: #eceae7;

  position: relative;
  width: 420px;
  max-width: calc(100vw - 2 * var(--space-content-md));
  max-height: min(590px, calc(100dvh - 2 * var(--space-content-md)));
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  margin: 0 var(--space-content-md);
  overflow: hidden;
  transition: var(--motion-duration-modal);
}

.saved-payment-methods-modal .modal-sheet__close {
  position: absolute;
  top: calc(var(--space-popup-xl) - 10px);
  right: calc(var(--space-popup-xl) - 10px);
  z-index: 3;
}

.saved-payment-methods-modal__content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  max-height: inherit;
  padding: var(--space-popup-xl);
  box-sizing: border-box;
}

.saved-payment-methods-modal__title {
  margin: 0;
  padding-right: calc(var(--modal-close-size) + 8px);
  color: var(--color-text-primary);
  font-size: var(--font-size-title-xl);
  font-weight: var(--font-weight-title);
  line-height: 1.2;
}

.saved-payment-methods-modal__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.saved-payment-methods-modal__toolbar[hidden] {
  display: none;
}

.saved-payment-methods-modal__mode-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 12px;
  background: var(--saved-payment-methods-modal-control-bg);
  color: var(--color-text-primary);
  font-size: var(--font-size-body-sm);
  font-weight: 600;
  line-height: 1.2;
}

.saved-payment-methods-modal__mode-btn.is-active {
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--color-text-primary);
}

.saved-payment-methods-modal__list-host {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 16px;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.saved-payment-methods-modal__list-host::-webkit-scrollbar {
  display: none;
}

.saved-payment-methods-modal__status {
  margin: 0;
  padding: 24px 8px;
  text-align: center;
  color: var(--color-text-secondary);
  font-size: var(--font-size-body);
  line-height: 1.45;
}

.saved-payment-methods-modal__scroll {
  width: 100%;
  min-width: 0;
}

.saved-payment-methods-modal__items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
}

.saved-payment-methods-modal__card {
  position: relative;
  flex: 0 0 calc((100% - 8px) / 2);
  width: calc((100% - 8px) / 2);
  max-width: calc((100% - 8px) / 2);
  height: var(--saved-payment-methods-modal-card-height);
  padding: var(--saved-payment-methods-modal-card-padding);
  border-radius: 12px;
  background-color: var(--saved-payment-methods-modal-control-bg);
  box-sizing: border-box;
  text-align: left;
  transition: background-color 0.3s var(--motion-easing-standard, ease);
}

.saved-payment-methods-modal__card:focus-visible {
  outline: 2px solid var(--color-focus-ring, #007aff);
  outline-offset: 2px;
}

.saved-payment-methods-modal__checkbox {
  position: absolute;
  top: var(--saved-payment-methods-modal-card-padding);
  right: var(--saved-payment-methods-modal-card-padding);
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1.5px solid var(--color-border, rgba(0, 0, 0, 0.2));
  background: var(--color-bg, #fff);
  box-sizing: border-box;
  pointer-events: none;
}

.saved-payment-methods-modal__checkbox.is-checked {
  border-color: var(--color-text-primary);
  background: var(--color-text-primary);
}

.saved-payment-methods-modal__checkbox.is-checked::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 6px;
  width: 5px;
  height: 9px;
  border: solid var(--color-bg, #fff);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.saved-payment-methods-modal__bank-icon,
.saved-payment-methods-modal__type-icon {
  display: block;
  object-fit: contain;
  pointer-events: none;
}

.saved-payment-methods-modal__bank-icon {
  position: absolute;
  top: var(--saved-payment-methods-modal-card-padding);
  left: var(--saved-payment-methods-modal-card-padding);
  width: 30px;
  height: 30px;
}

.saved-payment-methods-modal__type-icon {
  position: absolute;
  right: var(--saved-payment-methods-modal-card-padding);
  bottom: var(--saved-payment-methods-modal-card-padding);
  width: 32px;
  height: 20px;
}

.saved-payment-methods-modal__label {
  position: absolute;
  left: var(--saved-payment-methods-modal-card-padding);
  bottom: var(--saved-payment-methods-modal-card-padding);
  max-width: calc(100% - 56px);
  overflow: hidden;
  color: var(--color-text-primary);
  font-size: var(--font-size-body-sm);
  font-weight: 500;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.saved-payment-methods-modal__label--last4 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.saved-payment-methods-modal__label--last4::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
  .saved-payment-methods-modal__card {
    transition: none;
  }
}

@media screen and (max-width: 865px) {
  .saved-payment-methods-modal {
    --saved-payment-methods-modal-mobile-safe-max-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    max-height: min(70vh, var(--saved-payment-methods-modal-mobile-safe-max-height));
    border-radius: var(--modal-sheet-radius) var(--modal-sheet-radius) 0 0;
    margin: 0;
    overflow: visible;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-sizing: border-box;
  }

  @supports (height: 100dvh) {
    .saved-payment-methods-modal {
      --saved-payment-methods-modal-mobile-safe-max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    }
  }

  .saved-payment-methods-modal .modal-sheet__close {
    top: calc((var(--modal-close-size) + 10px) * -1);
    right: calc(var(--space-popup-lg) - 15px);
    z-index: 3;
  }

  .saved-payment-methods-modal__content {
    padding-left: var(--space-popup-lg);
    padding-right: var(--space-popup-lg);
    padding-bottom: var(--space-popup-lg);
    overflow: auto;
  }

  .saved-payment-methods-modal__title {
    font-size: var(--font-size-title-lg);
    padding-right: 0;
  }

  .saved-payment-methods-modal__list-host {
    overflow-x: visible;
    overflow-y: visible;
  }

  .saved-payment-methods-modal__scroll {
    width: calc(100% + (2 * var(--space-popup-lg)));
    margin-inline: calc(-1 * var(--space-popup-lg));
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .saved-payment-methods-modal__scroll::-webkit-scrollbar {
    display: none;
  }

  .saved-payment-methods-modal__items {
    flex-wrap: nowrap;
    width: max-content;
    padding-inline: var(--space-popup-lg);
  }

  .saved-payment-methods-modal__card {
    flex: 0 0 var(--saved-payment-methods-modal-card-width);
    width: var(--saved-payment-methods-modal-card-width);
    max-width: var(--saved-payment-methods-modal-card-width);
  }
}

@media screen and (max-width: 380px) {
  .saved-payment-methods-modal__title {
    font-size: var(--font-size-title-md);
  }
}

#popup-report-problem.modal-overlay {
  z-index: calc(var(--modal-z-index) + 10);
}

.report-problem-modal button {
  border: none;
  font-family: inherit;
  margin: 0;
  cursor: pointer;
}

.report-problem-modal input,
.report-problem-modal textarea {
  font-family: inherit;
  margin: 0;
}

.report-problem-modal {
  position: relative;
  width: 420px;
  max-width: calc(100vw - 2 * var(--space-content-md));
  max-height: min(90dvh, 760px);
  display: flex;
  flex-direction: column;
  margin: 0 var(--space-content-md);
  overflow: hidden;
  transition: var(--motion-duration-modal);
}

.report-problem-modal .modal-sheet__close {
  position: absolute;
  top: calc(var(--space-popup-xl) - 10px);
  right: calc(var(--space-popup-xl) - 10px);
  z-index: 2;
}

.report-problem-modal__content {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  padding: var(--space-popup-xl);
  box-sizing: border-box;
  overflow-y: auto;
}

.report-problem-modal__title {
  margin: 0;
  padding-right: calc(var(--modal-close-size) + 8px);
  color: var(--color-text-primary);
  font-size: var(--font-size-title-xl);
  font-weight: var(--font-weight-title);
  line-height: 1.2;
}

.report-problem-modal__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
}

.report-problem-modal__input,
.report-problem-modal__textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  border: none;
  border-radius: 14px;
  background: var(--address-input-bg, rgba(129, 119, 99, 0.1));
  color: var(--color-text-primary);
  font-size: var(--font-size-body);
  line-height: 1.35;
  resize: none;
}

.report-problem-modal__input:focus,
.report-problem-modal__textarea:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 0;
}

.report-problem-modal__textarea {
  min-height: 120px;
}

.report-problem-modal__photos-title {
  margin: 8px 0 0;
  color: var(--color-text-primary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-button);
  line-height: 1.3;
}

.report-problem-modal__photos {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.report-problem-modal__photo-slot {
  position: relative;
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
}

.report-problem-modal__photo-slot--add {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--address-input-bg, rgba(129, 119, 99, 0.1));
  color: var(--color-text-secondary);
}

.report-problem-modal__photo-slot--empty {
  border: 1.5px dashed var(--color-border-input, #e1e1e1);
  background: transparent;
}

.report-problem-modal__photo-slot--filled {
  background: var(--address-input-bg, rgba(129, 119, 99, 0.1));
}

.report-problem-modal__photo-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.report-problem-modal__photo-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(33, 32, 31, 0.72);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.report-problem-modal__photo-add-icon {
  width: 22px;
  height: 22px;
  background-color: currentColor;
  mask-image: var(--report-problem-add-icon-url);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: var(--report-problem-add-icon-url);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

.report-problem-modal__error {
  margin: 0;
  color: #ff4d4d;
  font-size: var(--font-size-body-sm);
  line-height: 1.35;
}

.report-problem-modal__error[hidden] {
  display: none;
}

.report-problem-modal__submit {
  width: 100%;
  height: 48px;
  margin-top: 4px;
  border-radius: 17px;
  background: var(--color-button-primary-bg);
  color: var(--color-button-primary-text);
  font-size: var(--font-size-button);
  font-weight: var(--font-weight-button);
  line-height: var(--line-height-button);
}

.report-problem-modal__submit:disabled {
  background: var(--color-button-disabled-bg);
  color: var(--color-button-disabled-text);
  cursor: default;
}

.report-problem-modal__legal {
  margin: 4px 0 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-label, 12px);
  line-height: 1.4;
  text-align: center;
}

.report-problem-modal__legal a {
  color: inherit;
  text-decoration: underline;
}

@media screen and (max-width: 865px) {
  .report-problem-modal {
    width: 100%;
    max-width: none;
    max-height: 92dvh;
    margin: 0;
    border-radius: var(--modal-sheet-radius) var(--modal-sheet-radius) 0 0;
  }

  .report-problem-modal .modal-sheet__close {
    top: calc((var(--modal-close-size) + 10px) * -1);
    right: calc(var(--space-popup-xl) - 15px);
  }

  .report-problem-modal__title {
    padding-right: 0;
  }

  .report-problem-modal__content {
    padding-bottom: calc(var(--space-popup-xl) + env(safe-area-inset-bottom));
  }
}

.profile-notifications-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  margin-top: 16px;
  padding: 10px 4px;
  box-sizing: border-box;
  color: var(--color-text-primary);
  font-size: var(--font-size-body);
  font-weight: 500;
  line-height: 1.35;
  user-select: none;
}

.profile-notifications-toggle.is-busy {
  opacity: 0.7;
  pointer-events: none;
}

.profile-notifications-toggle__icon {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  background-color: currentColor;
  mask-image: var(--profile-notifications-icon-url);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: var(--profile-notifications-icon-url);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

.profile-notifications-toggle__label {
  flex: 1 1 auto;
  min-width: 0;
}

.profile-notifications-toggle__switch {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.profile-notifications-toggle__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.profile-notifications-toggle__track {
  position: relative;
  display: block;
  width: 44px;
  height: 26px;
  border-radius: 999px;
  background: #d8d5d0;
  transition: background-color 180ms ease;
}

.profile-notifications-toggle__track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  transition: transform 180ms ease;
}

.profile-notifications-toggle__input:checked + .profile-notifications-toggle__track {
  background: #f5c518;
}

.profile-notifications-toggle__input:checked + .profile-notifications-toggle__track::after {
  transform: translateX(18px);
}

.profile-notifications-toggle__input:focus-visible + .profile-notifications-toggle__track {
  outline: 2px solid var(--color-focus-ring, #007aff);
  outline-offset: 2px;
}

.app-mobile-bottom-chrome .cart-floating-btn {
  position: relative;
  right: auto;
  bottom: auto;
}

.cart-floating-btn {
  position: fixed;
  right: var(--cart-floating-btn-offset-x);
  bottom: calc(var(--cart-floating-btn-offset-y) + env(safe-area-inset-bottom, 0px));
  z-index: var(--cart-floating-btn-z-index);
  display: inline-flex;
  align-items: center;
  gap: var(--cart-floating-btn-gap);
  height: var(--cart-floating-btn-height);
  padding: 0 var(--cart-floating-btn-padding-right) 0 var(--cart-floating-btn-padding-left);
  border: 0;
  border-radius: var(--cart-floating-btn-radius);
  background: var(--dish-modal-add-btn-gradient);
  color: var(--color-text-primary);
  font: inherit;
  font-size: var(--font-size-button);
  font-weight: var(--font-weight-button);
  line-height: 1;
  box-shadow: var(--cart-floating-btn-shadow);
  cursor: pointer;
}

.cart-floating-btn:focus {
  outline: none;
}

.cart-floating-btn:focus-visible {
  outline: 2px solid var(--color-focus-ring, #007aff);
  outline-offset: 2px;
}

.cart-floating-btn__total {
  min-width: 0;
}

.cart-floating-btn__icon {
  display: block;
  flex: 0 0 auto;
  width: var(--cart-floating-btn-icon-size);
  height: var(--cart-floating-btn-icon-size);
}

.cart-floating-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.cart-floating-btn.cart-cta--loading {
  /* relative нужен для ::after-спиннера; right/bottom сбрасываем,
     иначе наследуют оффсеты fixed-кнопки и «прыгают» в chrome */
  position: relative;
  right: auto;
  bottom: auto;
  color: transparent;
  pointer-events: none;
}

.cart-floating-btn.cart-cta--loading .cart-floating-btn__total,
.cart-floating-btn.cart-cta--loading .cart-floating-btn__icon {
  visibility: hidden;
}

.cart-floating-btn.cart-cta--loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid rgba(33, 32, 31, 0.2);
  border-top-color: var(--color-text-primary);
  border-radius: 50%;
  animation: cart-cta-spin 0.8s linear infinite;
}

@keyframes cart-cta-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (min-width: 1150px) {
  .cart-floating-btn {
    display: none;
  }
}

.order-list-card {
  --order-list-card-radius: 20px;
  --order-list-card-media-size: 56px;
  --order-list-card-gap: 12px;
  --order-list-card-progress-gap: 8px;
  /* Шире «Задержка» / «-99:59» / «+99 мин», чтобы тик таймера не дёргал сетку. */
  --order-list-card-right-width: 72px;
  --order-list-card-eta-ok: var(--color-cart-eta, #5f9f52);
  --order-list-card-eta-danger: #e53935;
  /* Золото ярче, без грязного коричневого */
  --order-list-card-icon-bg: linear-gradient(
    to top right,
    #ffe8b5 0%,
    #e8c98a 50%,
    #c4a05f 100%
  );
  /* Figma Glass: fill #FFF 50%, light −45°/80%, frost 3.46, depth ~17 */
  --order-list-card-glass-frost: 3.5px;
  --order-list-card-glass-fill: rgba(255, 255, 255, 0.5);

  display: grid;
  grid-template-columns:
    var(--order-list-card-media-size)
    minmax(0, 1fr)
    var(--order-list-card-right-width);
  gap: var(--order-list-card-gap);
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 14px;
  border: none;
  border-radius: var(--order-list-card-radius);
  background: #ffffff;
  font-family: var(--font-family, Inter, sans-serif);
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.order-list-card:focus {
  outline: none;
}

.order-list-card:focus-visible {
  outline: 2px solid var(--color-focus-ring, #007aff);
  outline-offset: 2px;
}

.order-list-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--order-list-card-media-size);
  height: var(--order-list-card-media-size);
  border-radius: 14px;
  background: var(--order-list-card-icon-bg);
  overflow: hidden;
  flex-shrink: 0;
  isolation: isolate;
}

.order-list-card__icon {
  display: block;
  flex-shrink: 0;
}

.order-list-card__icon--glass {
  width: 34px;
  height: 30px;
  position: relative;
  background:
    radial-gradient(
      ellipse 65% 55% at 100% 0%,
      rgba(255, 255, 255, 0.95) 0%,
      rgba(255, 255, 255, 0.35) 42%,
      transparent 70%
    ),
    linear-gradient(
      -45deg,
      rgba(255, 255, 255, 0.9) 0%,
      rgba(255, 255, 255, 0.55) 32%,
      rgba(255, 255, 255, 0.22) 62%,
      rgba(255, 255, 255, 0.4) 100%
    ),
    var(--order-list-card-glass-fill);
  -webkit-backdrop-filter: blur(var(--order-list-card-glass-frost)) saturate(1.35);
  backdrop-filter: blur(var(--order-list-card-glass-frost)) saturate(1.35);
  -webkit-mask-image: var(--order-list-card-glass-mask-url);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: var(--order-list-card-glass-mask-url);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

.order-list-card__icon--glass::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse 50% 45% at 100% 0%,
      rgba(255, 255, 255, 0.7) 0%,
      transparent 60%
    ),
    linear-gradient(
      -45deg,
      rgba(255, 255, 255, 0.75) 0%,
      rgba(255, 255, 255, 0.2) 38%,
      transparent 70%
    );
  opacity: 0.85;
  pointer-events: none;
  -webkit-mask-image: var(--order-list-card-glass-mask-url);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: var(--order-list-card-glass-mask-url);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

.order-list-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.order-list-card__title {
  color: var(--color-text-primary);
  font-size: 17px;
  line-height: 1.2;
  font-weight: 700;
}

.order-list-card__subtitle {
  color: var(--color-text-secondary);
  font-size: 13px;
  line-height: 1.3;
}

.order-list-card__progress {
  display: flex;
  gap: var(--order-list-card-progress-gap);
  margin-top: 8px;
}

.order-list-card__progress-segment {
  flex: 1 1 0;
  height: 3px;
  border-radius: 100px;
  background: #e8e4df;
}

.order-list-card__progress-segment--active {
  background: #dabb7d;
}

.order-list-card__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  width: var(--order-list-card-right-width);
  min-width: var(--order-list-card-right-width);
  max-width: var(--order-list-card-right-width);
  box-sizing: border-box;
  overflow: hidden;
}

.order-list-card__eta-caption {
  color: var(--color-text-secondary);
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
}

.order-list-card__eta-value {
  font-size: 20px;
  line-height: 1.15;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  white-space: nowrap;
}

.order-list-card__eta-value--ok {
  color: var(--order-list-card-eta-ok);
}

.order-list-card__eta-value--danger {
  color: var(--order-list-card-eta-danger);
}

.order-list-card__eta-buffer {
  color: var(--order-list-card-eta-ok);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  white-space: nowrap;
}

.order-list-card__status-glyph {
  width: 28px;
  height: 28px;
  display: block;
  flex-shrink: 0;
  background-color: currentColor;
  mask-image: var(--order-list-card-status-icon-url);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: var(--order-list-card-status-icon-url);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

.order-list-card__status-glyph--ready {
  color: var(--order-list-card-eta-ok);
}

.order-list-card__status-glyph--cancelled {
  color: var(--order-list-card-eta-danger);
}

.legal-footer {
  flex: 0 0 auto;
  width: 100%;
  margin-top: 24px;
  padding: 20px 0 4px;
  border-top: 1px solid var(--color-line);
}

.legal-footer__venues {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0 0 16px;
  padding: 0 5px;
}

.legal-footer__venues[hidden] {
  display: none;
}

.legal-footer__venue {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.legal-footer__address,
.legal-footer__hours,
.legal-footer__contact {
  margin: 0;
  color: var(--color-text-secondary);
  font-family: var(--font-family);
  font-size: var(--font-size-label);
  line-height: 1.45;
}

.legal-footer__contact {
  margin: 0 0 12px;
  padding: 0 5px;
}

.legal-footer__nav {
  width: 100%;
}

.legal-footer__list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin: 0;
  padding: 0 5px;
  list-style: none;
}

.legal-footer__item {
  min-width: 0;
}

.legal-footer__link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: var(--color-text-secondary);
  font-family: var(--font-family);
  font-size: var(--font-size-label);
  line-height: 1.35;
  text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: color 160ms var(--motion-easing-standard);
}

.legal-footer__contact .legal-footer__link {
  display: inline;
  min-height: 0;
}

.legal-footer__link:hover {
  color: var(--color-primary);
  text-decoration: none;
}

.legal-footer__link:focus-visible {
  outline: 2px solid var(--color-text-primary);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .legal-footer__link {
    transition: none;
  }
}

@media (min-width: 865px) {
  .legal-footer {
    margin-top: 40px;
    padding-top: 24px;
    padding-bottom: 0;
  }

  .legal-footer__list {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 28px;
  }

  .legal-footer__link {
    min-height: 28px;
  }

  .legal-footer__contact .legal-footer__link {
    min-height: 0;
  }
}

.delivery-fee-progress-sticky {
  --delivery-fee-progress-sticky-accent: #206f5c;
  --delivery-fee-progress-sticky-track: #b8d4cb;
  --delivery-fee-progress-sticky-enter-ms: 220ms;
  --delivery-fee-progress-sticky-motion-easing: var(--motion-easing-standard);

  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
  height: var(--cart-floating-btn-height);
  padding: 0 14px 0 12px;
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--cart-floating-btn-shadow);
  color: var(--delivery-fee-progress-sticky-accent);
  box-sizing: border-box;
  opacity: 0;
  transform: translateY(12px);
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--delivery-fee-progress-sticky-enter-ms) var(--delivery-fee-progress-sticky-motion-easing),
    transform var(--delivery-fee-progress-sticky-enter-ms) var(--delivery-fee-progress-sticky-motion-easing),
    visibility 0s linear var(--delivery-fee-progress-sticky-enter-ms);
}

.delivery-fee-progress-sticky[hidden] {
  display: none;
}

.delivery-fee-progress-sticky--visible {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
  cursor: pointer;
  transition:
    opacity var(--delivery-fee-progress-sticky-enter-ms) var(--delivery-fee-progress-sticky-motion-easing),
    transform var(--delivery-fee-progress-sticky-enter-ms) var(--delivery-fee-progress-sticky-motion-easing),
    visibility 0s linear 0s;
}

.delivery-fee-progress-sticky__border {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.delivery-fee-progress-sticky__border-track,
.delivery-fee-progress-sticky__border-progress {
  fill: none;
  stroke-width: 2;
}

.delivery-fee-progress-sticky__border-track {
  stroke: var(--delivery-fee-progress-sticky-track);
}

.delivery-fee-progress-sticky__border-progress {
  stroke: var(--delivery-fee-progress-sticky-accent);
}

.delivery-fee-progress-sticky__content {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.delivery-fee-progress-sticky__icon {
  flex: 0 0 auto;
  display: block;
  width: 22px;
  height: 22px;
}

.delivery-fee-progress-sticky__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  line-height: 1.15;
}

.delivery-fee-progress-sticky__primary {
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.delivery-fee-progress-sticky__secondary {
  font-size: 12px;
  font-weight: 400;
  opacity: 0.85;
  white-space: nowrap;
}

.delivery-fee-progress-sticky__secondary[hidden] {
  display: none;
}

.delivery-fee-progress-sticky--final .delivery-fee-progress-sticky__primary {
  font-size: 15px;
}

@media (prefers-reduced-motion: reduce) {
  .delivery-fee-progress-sticky {
    transition: none;
  }
}

@media (min-width: 1150px) {
  .delivery-fee-progress-sticky {
    display: none;
  }
}

body.route-cart {
  --cart-page-padding-x: 16px;
  --cart-page-sticky-cta-padding-y: 12px;
  --cart-page-sticky-cta-z-index: 15;
  --cart-page-sticky-cta-height: calc(
    var(--cart-page-sticky-cta-padding-y) * 2
    + var(--cart-section-checkout-btn-height)
    + env(safe-area-inset-bottom, 0px)
  );
}

.cart-page {
  --cart-page-header-gap: 12px;
  --cart-page-title-margin-bottom-mobile: 16px;

  min-height: var(--app-page-min-height);
  background: var(--main-page-bg, var(--color-bg));
  padding: 16px var(--cart-page-padding-x)
    calc(var(--cart-page-sticky-cta-height) + var(--page-bottom-safe-gap));
  box-sizing: border-box;
}

.cart-page__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--cart-page-header-gap);
  min-width: 0;
  padding-bottom: 8px;
}

.cart-page__back {
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background-color: var(--color-text-primary);
  background-image: none;
  mask-image: var(--cart-page-back-icon-url);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 28px 28px;
  -webkit-mask-image: var(--cart-page-back-icon-url);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 28px 28px;
  cursor: pointer;
  flex-shrink: 0;
}

.cart-page__back:focus {
  outline: none;
}

.cart-page__back:focus-visible {
  outline: 2px solid var(--color-focus-ring, #007aff);
  outline-offset: 2px;
  border-radius: 8px;
}

.cart-page__title {
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--font-size-cart-title);
  line-height: var(--line-height-cart-title);
  font-weight: var(--font-weight-cart-title);
}

.cart-page__section {
  min-width: 0;
}

.cart-page__section.cart-section {
  display: flex;
  flex-direction: column;
  gap: var(--cart-section-gap);
}

.cart-page__section.cart-section .cart-section__items {
  flex: none;
  overflow: visible;
  min-height: auto;
}

body.route-cart > .cart-page__sticky-cta.cart-section__cta {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--cart-page-sticky-cta-z-index);
  margin-top: 0;
  padding: var(--cart-page-sticky-cta-padding-y) var(--cart-page-padding-x);
  padding-bottom: calc(var(--cart-page-sticky-cta-padding-y) + env(safe-area-inset-bottom, 0px));
  background: var(--main-page-bg, var(--color-bg));
  box-sizing: border-box;
}

@media (max-width: 864px) {
  .cart-page__title {
    margin-bottom: var(--cart-page-title-margin-bottom-mobile);
  }
}

@media (min-width: 865px) {
  body.route-cart {
    --cart-page-padding-x: 24px;
  }

  .cart-page {
    padding-top: 24px;
  }
}

@media (min-width: 1150px) {
  .cart-page {
    display: none;
  }
}

body.route-checkout {
  --checkout-page-padding-x: 16px;
  --checkout-field-height: 56px;
  --checkout-page-sticky-cta-padding-y: 12px;
  --checkout-page-sticky-cta-z-index: 15;
  --checkout-page-sticky-cta-height: calc(
    var(--checkout-page-sticky-cta-padding-y) * 2
    + var(--cart-section-checkout-btn-height)
    + env(safe-area-inset-bottom, 0px)
  );
}

.checkout-page {
  --checkout-page-header-gap: 12px;
  --checkout-page-title-margin-bottom-mobile: 16px;
  --checkout-page-blocks-gap: 16px;

  min-height: var(--app-page-min-height);
  background: var(--main-page-bg, var(--color-bg));
  padding: 16px var(--checkout-page-padding-x)
    calc(var(--checkout-page-sticky-cta-height) + var(--page-bottom-safe-gap));
  box-sizing: border-box;
}

.checkout-page__content {
  display: flex;
  gap: var(--main-column-gap);
  width: 100%;
  max-width: var(--main-content-width);
  margin: 0 auto;
}

.checkout-page__main {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--checkout-page-blocks-gap);
  min-width: 0;
}

.checkout-page__sidebar {
  display: none;
  flex: 0 0 var(--main-cart-width);
  flex-direction: column;
  gap: var(--checkout-page-blocks-gap);
  min-width: 0;
  align-self: flex-start;
}

.checkout-page__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--checkout-page-header-gap);
  min-width: 0;
}

.checkout-page__back {
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background-color: var(--color-text-primary);
  mask-image: var(--checkout-page-back-icon-url);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 28px 28px;
  -webkit-mask-image: var(--checkout-page-back-icon-url);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 28px 28px;
  cursor: pointer;
  flex-shrink: 0;
}

.checkout-page__back:focus {
  outline: none;
}

.checkout-page__back:focus-visible {
  outline: 2px solid var(--color-focus-ring, #007aff);
  outline-offset: 2px;
  border-radius: 8px;
}

.checkout-page__title {
  margin: 0 0 var(--checkout-page-title-margin-bottom-mobile);
  color: var(--color-text-primary);
  font-size: var(--font-size-cart-title);
  line-height: var(--line-height-cart-title);
  font-weight: var(--font-weight-cart-title);
}

.checkout-page__blocks {
  display: flex;
  flex-direction: column;
  gap: var(--checkout-page-blocks-gap);
  min-width: 0;
}

.checkout-page__pay-cta {
  flex: 0 0 auto;
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.checkout-page__save-payment {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-left: 5px;
  padding-right: 5px;
  color: var(--color-text-secondary);
  font-size: var(--font-size-body-sm, 14px);
  line-height: 1.35;
  cursor: pointer;
}

.checkout-page__save-payment-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.checkout-page__save-payment-track {
  position: relative;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 6px;
  border: 1.5px solid var(--color-border, rgba(0, 0, 0, 0.2));
  background: var(--color-bg);
  box-sizing: border-box;
}

.checkout-page__save-payment-input:checked + .checkout-page__save-payment-track {
  border-color: var(--color-text-primary);
  background: var(--color-text-primary);
}

.checkout-page__save-payment-input:checked + .checkout-page__save-payment-track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 6px;
  width: 5px;
  height: 9px;
  border: solid var(--color-bg);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.checkout-page__save-payment-label {
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

.checkout-page__save-payment-label-short {
  display: none;
}

.checkout-order-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: var(--cart-section-header-padding-top);
}

.checkout-order-panel__title {
  margin: 0;
  min-width: 0;
  color: var(--color-text-primary);
  font-size: var(--font-size-cart-title);
  line-height: var(--line-height-cart-title);
  font-weight: var(--font-weight-cart-title);
}

.checkout-order-panel__profile-trigger {
  display: none;
  flex: 0 0 auto;
}

@media (min-width: 1150px) {
  .checkout-order-panel__profile-trigger {
    display: inline-flex;
  }
}

.checkout-page__sidebar .checkout-order-summary {
  flex: 0 0 auto;
  padding: 12px 0 0 0;
}

body.route-checkout > .checkout-page__pay-cta--sticky {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--checkout-page-sticky-cta-z-index);
  margin-top: 0;
  padding: var(--checkout-page-sticky-cta-padding-y) var(--checkout-page-padding-x);
  padding-bottom: calc(var(--checkout-page-sticky-cta-padding-y) + env(safe-area-inset-bottom, 0px));
  background: var(--main-page-bg, var(--color-bg));
  box-sizing: border-box;
}

/* Sticky CTA монтируется на body — скрываем вне checkout (в т.ч. на /checkout/payment). */
body:not(.route-checkout) > .checkout-page__pay-cta--sticky {
  display: none !important;
}

.checkout-page__pay-btn:disabled {
  opacity: 1;
  cursor: default;
}

@media (min-width: 865px) {
  body.route-checkout {
    --checkout-page-padding-x: 24px;
  }

  .checkout-page {
    padding-top: 24px;
  }
}

@media (min-width: 1150px) {
  body.route-checkout {
    padding-bottom: 40px;
  }

  .checkout-page {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .checkout-page__main {
    flex: 0 0 var(--main-catalog-width);
  }

  .checkout-page__sidebar {
    display: flex;
    position: sticky;
    top: var(--main-page-padding-y, 40px);
    box-sizing: border-box;
    min-height: calc(100dvh - var(--main-page-padding-y, 40px));
    max-height: calc(100dvh - var(--main-page-padding-y, 40px));
    padding-bottom: var(--cart-section-checkout-bottom-offset);
  }

  .checkout-page__pay-cta {
    padding-top: 12px;
  }

  /* Как у .checkout-order-summary в сайдбаре (padding: 12px 10px 0) */
  .checkout-page__sidebar .checkout-page__save-payment {
    padding-left: 10px;
    padding-right: 10px;
  }

  .checkout-page__save-payment-label-full {
    display: none;
  }

  .checkout-page__save-payment-label-short {
    display: inline;
  }

  .checkout-page__sidebar .checkout-order-summary {
    flex: 0 0 auto;
    padding: 12px 10px 0 10px;
  }
}

.duplicate-order-modal button {
  border: none;
  font-family: inherit;
  margin: 0;
  cursor: pointer;
}

.duplicate-order-modal {
  position: relative;
  width: 420px;
  max-width: calc(100vw - 2 * var(--space-content-md));
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  margin: 0 var(--space-content-md);
  overflow: hidden;
  transition: var(--motion-duration-modal);
}

.duplicate-order-modal .modal-sheet__close {
  position: absolute;
  top: calc(var(--space-popup-xl) - 10px);
  right: calc(var(--space-popup-xl) - 10px);
}

.duplicate-order-modal__content {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  padding: var(--space-popup-xl);
  box-sizing: border-box;
}

.duplicate-order-modal__title {
  margin: 0;
  padding-right: calc(var(--modal-close-size) + 8px);
  color: var(--color-text-primary);
  font-size: var(--font-size-title-xl);
  font-weight: var(--font-weight-title);
  line-height: 1.2;
}

.duplicate-order-modal__description {
  margin: 16px 0 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-body-sm);
  line-height: 1.45;
}

.duplicate-order-modal__footer {
  margin-top: 24px;
  width: 100%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.duplicate-order-modal__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--address-btn-height, 52px);
  padding: 0 20px;
  border-radius: 17px;
  font-size: var(--font-size-button);
  line-height: var(--line-height-button);
  font-weight: var(--font-weight-button);
  transition:
    background-color var(--motion-duration-button) var(--motion-easing-standard),
    color var(--motion-duration-button) var(--motion-easing-standard);
}

.duplicate-order-modal__btn--primary {
  background: var(--color-button-primary-bg);
  color: var(--color-button-primary-text);
}

.duplicate-order-modal__btn--secondary {
  background: transparent;
  color: var(--color-text-primary);
  box-shadow: inset 0 0 0 1px var(--color-text-secondary);
}

@media screen and (max-width: 865px) {
  .duplicate-order-modal {
    --duplicate-order-modal-mobile-safe-max-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    max-height: min(70vh, var(--duplicate-order-modal-mobile-safe-max-height));
    border-radius: var(--modal-sheet-radius) var(--modal-sheet-radius) 0 0;
    margin: 0;
    overflow: visible;
  }

  @supports (height: 100dvh) {
    .duplicate-order-modal {
      --duplicate-order-modal-mobile-safe-max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    }
  }

  .duplicate-order-modal .modal-sheet__close {
    top: calc((var(--modal-close-size) + 10px) * -1);
    right: calc(var(--space-popup-lg) - 15px);
    z-index: 3;
  }

  .duplicate-order-modal__content {
    padding-left: var(--space-popup-lg);
    padding-right: var(--space-popup-lg);
    padding-bottom: calc(var(--space-popup-lg) + env(safe-area-inset-bottom));
    overflow: auto;
  }

  .duplicate-order-modal__title {
    font-size: var(--font-size-title-lg);
    padding-right: 0;
  }
}

@media screen and (max-width: 380px) {
  .duplicate-order-modal__title {
    font-size: var(--font-size-title-md);
  }
}

.checkout-address-field {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  box-sizing: border-box;
}

.checkout-address-field__pin {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Высота = первая строка адреса; доп. детали ниже на иконку не влияют. */
  height: calc(var(--font-size-body-sm, 15px) * 1.35);
}

.checkout-address-field__pin-image {
  display: block;
  width: 28px;
  height: 28px;
}

.checkout-address-field__copy {
  flex: 1 1 auto;
  min-width: 0;
}

.checkout-address-field__line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 8px;
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--font-size-body-sm);
  font-weight: 500;
  line-height: 1.35;
}

.checkout-address-field__line--wrapped {
  justify-content: flex-start;
}

.checkout-address-field__address {
  min-width: 0;
}

.checkout-address-field__details {
  margin: 2px 0 0;
  color: var(--color-text-secondary, #9e9b98);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.35;
  text-align: left;
}

.checkout-address-field__meta {
  flex: 0 0 auto;
  white-space: nowrap;
}

.checkout-address-field__eta {
  color: var(--color-cart-eta);
  font-weight: 600;
}

.checkout-address-field__fee {
  font-weight: 600;
}

.checkout-address-field__skeleton {
  border-radius: 6px;
}

.checkout-floating-field {
  min-width: 0;
}

.checkout-floating-field__control {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: var(--checkout-field-height, var(--order-type-switcher-height));
  padding: 0 16px;
  border: 1px solid var(--color-border-input);
  border-radius: 14px;
  background: var(--order-type-switcher-cart-bg);
  box-sizing: border-box;
}

.checkout-floating-field__icon {
  flex: 0 0 auto;
  display: block;
  width: 24px;
  height: 24px;
}

.checkout-floating-field__trailing-icon {
  flex: 0 0 auto;
  display: block;
  width: 17px;
  height: 17px;
  pointer-events: none;
}

.checkout-floating-field__control--picker {
  cursor: pointer;
}

.checkout-floating-field__control--picker:focus {
  outline: none;
}

.checkout-floating-field__control--picker:focus-visible {
  outline: 2px solid var(--color-focus-ring, #007aff);
  outline-offset: 2px;
}

.checkout-floating-field__input--picker {
  cursor: pointer;
  pointer-events: none;
}

.checkout-floating-field__control--has-trailing-icon .checkout-floating-field__select,
.checkout-floating-field__control--has-trailing-icon .checkout-floating-field__input--picker {
  padding-right: 4px;
}

.checkout-floating-field__input-wrap {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  min-width: 0;
  height: 100%;
}

.checkout-floating-field__label {
  position: absolute;
  top: 50%;
  left: 0;
  max-width: 100%;
  color: var(--color-text-secondary);
  font-size: var(--font-size-body-sm);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  transform: translateY(-50%);
  transform-origin: left center;
  transition:
    transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.checkout-floating-field__control--focused .checkout-floating-field__label,
.checkout-floating-field__control--filled .checkout-floating-field__label {
  transform: translateY(calc(-50% - 12px)) scale(0.82);
}

.checkout-floating-field__input,
.checkout-floating-field__select {
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text-primary);
  font: inherit;
  font-size: var(--font-size-body-sm);
  line-height: 1.2;
  box-sizing: border-box;
  appearance: none;
  transition: padding-top 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.checkout-floating-field__control--focused .checkout-floating-field__input,
.checkout-floating-field__control--filled .checkout-floating-field__input,
.checkout-floating-field__control--focused .checkout-floating-field__select,
.checkout-floating-field__control--filled .checkout-floating-field__select {
  padding-top: 14px;
}

.checkout-floating-field__input::placeholder {
  color: transparent;
}

.checkout-floating-field__input:focus,
.checkout-floating-field__input:focus-visible,
.checkout-floating-field__select:focus,
.checkout-floating-field__select:focus-visible {
  outline: none;
}

.checkout-floating-field__select {
  cursor: pointer;
}

.checkout-floating-field__select option {
  color: var(--color-text-primary);
}

.checkout-order-time-modal {
  --checkout-order-time-active-bg: #dfe8e2;
  --checkout-order-time-option-bg: #f4f1ec;
}

.checkout-order-time-modal button {
  border: none;
  font-family: inherit;
  margin: 0;
  cursor: pointer;
}

.checkout-order-time-modal {
  position: relative;
  width: 420px;
  max-width: calc(100vw - 2 * var(--space-content-md));
  max-height: min(590px, calc(100dvh - 2 * var(--space-content-md)));
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  margin: 0 var(--space-content-md);
  overflow: hidden;
  transition: var(--motion-duration-modal);
}

.checkout-order-time-modal .modal-sheet__close {
  position: absolute;
  top: calc(var(--space-popup-xl) - 10px);
  right: calc(var(--space-popup-xl) - 10px);
  z-index: 3;
}

.checkout-order-time-modal__content {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  max-height: inherit;
  padding: var(--space-popup-xl);
  box-sizing: border-box;
  overflow: hidden;
}

.checkout-order-time-modal__title {
  flex: 0 0 auto;
  margin: 0;
  padding-right: calc(var(--modal-close-size) + 8px);
  color: var(--color-text-primary);
  font-size: var(--font-size-title-xl);
  font-weight: var(--font-weight-title);
}

.checkout-order-time-modal__days {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.checkout-order-time-modal__day {
  flex: 1 1 0;
  min-height: 40px;
  padding: 8px 12px;
  border: none;
  border-radius: 12px;
  background: var(--checkout-order-time-option-bg);
  color: var(--color-text-primary);
  font-family: inherit;
  font-size: var(--font-size-body-sm);
  cursor: pointer;
}

.checkout-order-time-modal__day--selected {
  background: var(--checkout-order-time-active-bg);
}

.checkout-order-time-modal__day:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.checkout-order-time-modal__loading,
.checkout-order-time-modal__empty {
  flex: 0 0 auto;
  margin: 20px 0 0;
  color: var(--color-text-secondary, #6f6a63);
  font-size: var(--font-size-body-sm);
}

.checkout-order-time-modal__list {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 10px;
  min-height: 0;
  margin-top: 20px;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--dish-modal-scrollbar-thumb) transparent;
}

.checkout-order-time-modal__list::-webkit-scrollbar {
  width: var(--dish-modal-scrollbar-size);
}

.checkout-order-time-modal__list::-webkit-scrollbar-track {
  margin: 4px 0;
  background: transparent;
}

.checkout-order-time-modal__list::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 100px;
  background-color: var(--dish-modal-scrollbar-thumb);
  background-clip: padding-box;
}

.checkout-order-time-modal__list::-webkit-scrollbar-thumb:hover {
  background-color: var(--dish-modal-scrollbar-thumb-hover);
}

.checkout-order-time-modal__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: var(--order-type-switcher-height);
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--checkout-order-time-option-bg);
  color: var(--color-text-primary);
  box-sizing: border-box;
  text-align: left;
  transition: background-color 0.2s ease;
}

.checkout-order-time-modal__option--selected,
.checkout-order-time-modal__option:focus-visible {
  background: var(--checkout-order-time-active-bg);
}

.checkout-order-time-modal__option:focus {
  outline: none;
}

.checkout-order-time-modal__main {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.checkout-order-time-modal__icon {
  flex: 0 0 auto;
  display: block;
  width: 24px;
  height: 24px;
}

.checkout-order-time-modal__label {
  min-width: 0;
  color: var(--color-text-primary);
  font-size: var(--font-size-body-sm);
  font-weight: 400;
  line-height: 1.25;
}

.checkout-order-time-modal__price {
  margin-left: auto;
  color: var(--color-text-secondary, #6f6a63);
  font-size: var(--font-size-body-sm);
  white-space: nowrap;
}

.checkout-order-time-modal__toggle-track {
  position: relative;
  flex: 0 0 auto;
  display: block;
  width: 44px;
  height: 26px;
  border-radius: 999px;
  background: #d8d5d0;
  transition: background-color 180ms ease;
}

.checkout-order-time-modal__toggle-track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  transition: transform 180ms ease;
}

.checkout-order-time-modal__option--selected .checkout-order-time-modal__toggle-track {
  background: var(--delivery-fee-progress-accent);
}

.checkout-order-time-modal__option--selected .checkout-order-time-modal__toggle-track::after {
  transform: translateX(18px);
}

.checkout-order-time-modal__option:focus-visible .checkout-order-time-modal__toggle-track {
  outline: 2px solid var(--color-focus-ring, #007aff);
  outline-offset: 2px;
}

@media screen and (max-width: 865px) {
  .checkout-order-time-modal {
    --checkout-order-time-modal-mobile-safe-max-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    max-height: min(70vh, var(--checkout-order-time-modal-mobile-safe-max-height));
    border-radius: var(--modal-sheet-radius) var(--modal-sheet-radius) 0 0;
    margin: 0;
    overflow: visible;
  }

  @supports (height: 100dvh) {
    .checkout-order-time-modal {
      --checkout-order-time-modal-mobile-safe-max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    }
  }

  .checkout-order-time-modal .modal-sheet__close {
    top: calc((var(--modal-close-size) + 10px) * -1);
    right: calc(var(--space-popup-lg) - 15px);
    z-index: 3;
  }

  .checkout-order-time-modal__title {
    font-size: var(--font-size-title-lg);
    padding-right: 0;
  }

  .checkout-order-time-modal__content {
    padding-left: var(--space-popup-lg);
    padding-right: var(--space-popup-lg);
    padding-bottom: calc(var(--space-popup-lg) + env(safe-area-inset-bottom));
  }
}

@media screen and (max-width: 380px) {
  .checkout-order-time-modal__title {
    font-size: var(--font-size-title-md);
  }
}

.checkout-pickup-at-table {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: var(--order-type-switcher-height);
  padding: 0;
  box-sizing: border-box;
  background: transparent;
  color: var(--color-text-primary);
  font-size: var(--font-size-body, 16px);
  line-height: 1.35;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.checkout-pickup-at-table:active,
.checkout-pickup-at-table:focus,
.checkout-pickup-at-table:focus-within {
  background: transparent;
  outline: none;
}

.checkout-pickup-at-table__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.checkout-pickup-at-table__track {
  position: relative;
  flex: 0 0 auto;
  display: block;
  width: 44px;
  height: 26px;
  border-radius: 999px;
  background: #d8d5d0;
  transition: background-color 180ms ease;
}

.checkout-pickup-at-table__track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  transition: transform 180ms ease;
}

.checkout-pickup-at-table__input:checked + .checkout-pickup-at-table__track {
  background: var(--delivery-fee-progress-accent);
}

.checkout-pickup-at-table__input:checked + .checkout-pickup-at-table__track::after {
  transform: translateX(18px);
}

.checkout-pickup-at-table__input:focus-visible + .checkout-pickup-at-table__track {
  outline: 2px solid var(--color-focus-ring, #007aff);
  outline-offset: 2px;
}

.checkout-pickup-at-table__label {
  flex: 1 1 auto;
}

.checkout-pickup-at-table--readonly {
  cursor: default;
  pointer-events: none;
}

.checkout-tip-selector {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
  min-width: 0;
}

.checkout-tip-selector__title {
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--font-size-title-md);
  font-weight: 700;
}

.checkout-tip-selector__switcher {
  position: relative;
  display: flex;
  width: 100%;
  min-width: 0;
  height: 60px;
  padding: 3px;
  border-radius: var(--order-type-switcher-cart-radius);
  background: var(--order-type-switcher-cart-bg);
  box-sizing: border-box;
}

.checkout-tip-selector__switcher--no-transition .checkout-tip-selector__thumb {
  transition: none;
}

.checkout-tip-selector__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  height: calc(100% - 6px);
  border-radius: var(--order-type-switcher-cart-thumb-radius);
  background: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  pointer-events: none;
  transition:
    left 0.3s var(--motion-easing-standard, ease),
    width 0.3s var(--motion-easing-standard, ease);
  z-index: 1;
}

.checkout-tip-selector__btn {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 100%;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--color-text-primary);
  font: inherit;
  cursor: pointer;
}

.checkout-tip-selector__btn-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  text-align: center;
}

.checkout-tip-selector__btn-line,
.checkout-tip-selector__btn-line--secondary,
.checkout-tip-selector__btn--selected .checkout-tip-selector__btn-line,
.checkout-tip-selector__btn--selected .checkout-tip-selector__btn-line--secondary {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.15;
}

.checkout-tip-selector__btn-line--secondary {
  color: var(--color-text-secondary);
}

.checkout-tip-selector__btn--selected .checkout-tip-selector__btn-line--secondary {
  color: var(--color-text-primary);
}

.checkout-tip-selector__btn:focus {
  outline: none;
}

.checkout-tip-selector__btn:focus-visible {
  outline: 2px solid var(--color-focus-ring, #007aff);
  outline-offset: 2px;
  border-radius: calc(var(--order-type-switcher-cart-radius) - 3px);
}

@media (min-width: 1150px) {
  .checkout-tip-selector {
    margin-top: 24px;
  }
}

.checkout-custom-tip-modal {
  position: relative;
  width: 420px;
  max-width: calc(100vw - 2 * var(--space-content-md));
  display: flex;
  flex-wrap: nowrap;
  margin: 0 var(--space-content-md);
  overflow: hidden;
}

.checkout-custom-tip-modal button {
  border: none;
  font-family: inherit;
  margin: 0;
  cursor: pointer;
}

.checkout-custom-tip-modal .modal-sheet__close {
  position: absolute;
  top: calc(var(--space-popup-xl) - 10px);
  right: calc(var(--space-popup-xl) - 10px);
}

.checkout-custom-tip-modal__content {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  padding: var(--space-popup-xl);
  box-sizing: border-box;
}

.checkout-custom-tip-modal__title {
  margin: 0;
  padding-right: calc(var(--modal-close-size) + 8px);
  color: var(--color-text-primary);
  font-size: var(--font-size-title-xl);
  font-weight: var(--font-weight-title);
}

.checkout-custom-tip-modal__form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 20px;
}

.checkout-custom-tip-modal .checkout-floating-field__control {
  background: #f4f1ec;
  border-color: transparent;
}

.checkout-custom-tip-modal__suffix {
  flex: 0 0 auto;
  color: var(--color-text-secondary);
  font-size: var(--font-size-body-sm);
  line-height: 1.2;
}

.checkout-custom-tip-modal__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--address-btn-height, 52px);
  padding: 0 20px;
  border-radius: 17px;
  background: var(--color-button-primary-bg);
  color: var(--color-button-primary-text);
  font-size: var(--font-size-button);
  line-height: var(--line-height-button);
  font-weight: var(--font-weight-button);
  transition:
    background-color var(--motion-duration-button) var(--motion-easing-standard),
    color var(--motion-duration-button) var(--motion-easing-standard),
    opacity var(--motion-duration-button) var(--motion-easing-standard);
}

.checkout-custom-tip-modal__submit:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

@media screen and (max-width: 865px) {
  .checkout-custom-tip-modal {
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    border-radius: var(--modal-sheet-radius) var(--modal-sheet-radius) 0 0;
    margin: 0;
    overflow: visible;
  }

  .checkout-custom-tip-modal .modal-sheet__close {
    top: calc((var(--modal-close-size) + 10px) * -1);
    right: calc(var(--space-popup-lg) - 15px);
    z-index: 3;
  }

  .checkout-custom-tip-modal__content {
    padding-left: var(--space-popup-lg);
    padding-right: var(--space-popup-lg);
    padding-bottom: calc(var(--space-popup-lg) + env(safe-area-inset-bottom));
  }

  .checkout-custom-tip-modal__title {
    font-size: var(--font-size-title-lg);
    padding-right: 0;
  }
}

@media screen and (max-width: 380px) {
  .checkout-custom-tip-modal__title {
    font-size: var(--font-size-title-md);
  }
}

.checkout-saved-payments {
  --checkout-saved-payment-card-width: 132px;
  --checkout-saved-payment-card-height: 86px;
  --checkout-saved-payment-card-padding: 10px;

  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
  min-width: 0;
}

.checkout-saved-payments[hidden] {
  display: none;
}

.checkout-saved-payments__title {
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--font-size-title-md);
  font-weight: 700;
}

.checkout-saved-payments__scroll {
  width: calc(100% + (2 * var(--checkout-page-padding-x, 16px)));
  min-width: 0;
  margin-inline: calc(-1 * var(--checkout-page-padding-x, 16px));
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.checkout-saved-payments__scroll::-webkit-scrollbar {
  display: none;
}

.checkout-saved-payments__items {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 8px;
  width: max-content;
  min-width: 0;
  padding-inline: var(--checkout-page-padding-x, 16px);
  box-sizing: border-box;
}

.checkout-saved-payments__card {
  position: relative;
  flex: 0 0 var(--checkout-saved-payment-card-width);
  width: var(--checkout-saved-payment-card-width);
  height: var(--checkout-saved-payment-card-height);
  padding: var(--checkout-saved-payment-card-padding);
  border: 0;
  border-radius: 12px;
  background-color: var(--order-type-switcher-cart-bg);
  box-sizing: border-box;
  cursor: pointer;
  text-align: left;
  transition: background-color 0.3s var(--motion-easing-standard, ease);
}

.checkout-saved-payments__card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: var(--dish-modal-add-btn-gradient);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--motion-easing-standard, ease);
}

.checkout-saved-payments__card.is-selected {
  background-color: #fff;
}

.checkout-saved-payments__card.is-selected::after {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .checkout-saved-payments__card,
  .checkout-saved-payments__card::after {
    transition: none;
  }
}

.checkout-saved-payments__card:focus-visible {
  outline: 2px solid var(--color-focus-ring, #007aff);
  outline-offset: 2px;
}

.checkout-saved-payments__bank-icon,
.checkout-saved-payments__type-icon {
  display: block;
  object-fit: contain;
  pointer-events: none;
}

.checkout-saved-payments__bank-icon {
  position: absolute;
  top: var(--checkout-saved-payment-card-padding);
  left: var(--checkout-saved-payment-card-padding);
  width: 30px;
  height: 30px;
}

.checkout-saved-payments__bank-icon--add {
  filter: brightness(0);
}

.checkout-saved-payments__type-icon {
  position: absolute;
  right: var(--checkout-saved-payment-card-padding);
  bottom: var(--checkout-saved-payment-card-padding);
  width: 32px;
  height: 20px;
}

.checkout-saved-payments__label {
  position: absolute;
  left: var(--checkout-saved-payment-card-padding);
  bottom: var(--checkout-saved-payment-card-padding);
  max-width: calc(100% - 56px);
  overflow: hidden;
  color: var(--color-text-primary);
  font-size: var(--font-size-body-sm);
  font-weight: 500;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.checkout-saved-payments__label--last4 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.checkout-saved-payments__label--last4::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.checkout-saved-payments__label--add {
  max-width: calc(100% - 24px);
  white-space: normal;
  line-height: 1.15;
}

@media (min-width: 1150px) {
  .checkout-saved-payments {
    margin-top: 24px;
  }

  .checkout-saved-payments__scroll {
    width: 100%;
    margin-inline: 0;
    overflow: visible;
  }

  .checkout-saved-payments__items {
    flex-wrap: wrap;
    width: 100%;
    padding-inline: 0;
  }
}

.checkout-order-items {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}

.checkout-order-items__list {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--cart-item-row-gap);
  min-height: 0;
  padding-top: var(--cart-section-items-padding-top);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.checkout-order-items__list::-webkit-scrollbar {
  display: none;
}

.checkout-order-summary {
  min-width: 0;
}

.checkout-order-summary__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}

.checkout-order-summary__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
}

.checkout-order-summary__label,
.checkout-order-summary__value {
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--font-size-body-sm);
  font-weight: 500;
  line-height: 1.35;
}

.checkout-order-summary__value {
  flex-shrink: 0;
  text-align: right;
}

.checkout-order-summary__row--discount .checkout-order-summary__value {
  color: var(--color-primary);
}

.checkout-order-summary__row--total {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--color-line);
}

.checkout-order-summary__row--total .checkout-order-summary__label,
.checkout-order-summary__row--total .checkout-order-summary__value {
  font-size: var(--font-size-body);
  font-weight: 700;
}

.checkout-order-summary--mobile {
  margin-top: 18px;
}

body.route-checkout-payment {
  /* На мобилке боковой padding страницы = 0: у виджета свои отступы. */
  --payment-page-padding-x: 0;
  --payment-page-padding-top: 56px;
  --payment-header-padding-x: 16px;
  --payment-shell-gap: 36px;
}

.checkout-payment-page {
  min-height: var(--app-page-min-height);
  background: var(--main-page-bg, var(--color-bg));
  padding:
    max(var(--payment-page-padding-top), calc(env(safe-area-inset-top, 0px) + 42px))
    var(--payment-page-padding-x)
    calc(var(--page-bottom-safe-gap) + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
}

.checkout-payment-page__shell {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--payment-shell-gap);
}

.checkout-payment-page__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 0 var(--payment-header-padding-x);
  box-sizing: border-box;
}

.checkout-payment-page__logo {
  display: block;
  width: min(42vw, 171px);
  aspect-ratio: 171 / 38;
  height: auto;
  background-color: #8a8784;
  mask-image: var(--payment-logo-url);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: var(--payment-logo-url);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

.checkout-payment-page__cancel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-shrink: 0;
  width: auto;
  height: 36px;
  padding: 0 14px;
  border: none;
  border-radius: 10px;
  background: rgba(255, 77, 77, 0.12);
  color: #ff4d4d;
  font-family: var(--font-family);
  font-size: var(--font-size-button-sms);
  font-weight: var(--font-weight-button);
  line-height: var(--line-height-button-sms);
  cursor: pointer;
  transition:
    background-color var(--motion-duration-button) var(--motion-easing-standard),
    color var(--motion-duration-button) var(--motion-easing-standard);
}

.checkout-payment-page__cancel-btn-icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  mask-image: var(--payment-cancel-icon-url);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: var(--payment-cancel-icon-url);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

.checkout-payment-page__cancel-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.checkout-payment-page__cancel-btn:focus {
  outline: none;
}

.checkout-payment-page__cancel-btn:focus-visible {
  outline: 2px solid var(--color-focus-ring, #007aff);
  outline-offset: 2px;
}

.checkout-payment-page__stage {
  position: relative;
  width: 100%;
}

.checkout-payment-page__status-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  padding: 8px var(--payment-header-padding-x) 0;
  box-sizing: border-box;
}

.checkout-payment-page__status-panel[hidden] {
  display: none;
}

.checkout-payment-page__loader {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: 2.5px solid rgba(138, 135, 132, 0.28);
  border-top-color: #8a8784;
  border-radius: 50%;
  box-sizing: border-box;
  animation: checkout-payment-spin 0.8s linear infinite;
}

.checkout-payment-page__loader[hidden] {
  display: none;
}

@keyframes checkout-payment-spin {
  to {
    transform: rotate(360deg);
  }
}

.checkout-payment-page__widget-host {
  width: 100%;
}

.checkout-payment-page__status {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-body-sm);
  line-height: 1.4;
  text-align: center;
}

.checkout-payment-page__status--error {
  color: #b3261e;
}

@media (min-width: 865px) {
  body.route-checkout-payment {
    --payment-page-padding-x: 24px;
    --payment-page-padding-top: 160px;
    --payment-header-padding-x: 0;
    --payment-shell-gap: 40px;
  }

  .checkout-payment-page__header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
}

body.route-orders {
  --orders-page-padding-x: 16px;
  --orders-list-width: 440px;
  --orders-detail-width: 640px;
  --orders-sticky-cta-padding-y: 12px;
  --orders-sticky-cta-z-index: 15;
  --orders-sticky-cta-height: calc(
    var(--orders-sticky-cta-padding-y) * 2
    + var(--cart-section-checkout-btn-height, 52px)
    + env(safe-area-inset-bottom, 0px)
  );
}

.orders-page {
  min-height: var(--app-page-min-height);
  background: var(--main-page-bg, var(--color-bg));
  padding: 16px var(--orders-page-padding-x);
  box-sizing: border-box;
  font-family: var(--font-family, Inter, sans-serif);
}

.orders-page--detail-only {
  padding-bottom: calc(var(--orders-sticky-cta-height) + var(--page-bottom-safe-gap));
}

.orders-page button,
.orders-page input,
.orders-page textarea,
.orders-page select {
  font-family: inherit;
}

.orders-page__content {
  display: flex;
  gap: var(--main-column-gap, 40px);
  width: 100%;
  max-width: var(--main-content-width, 1120px);
  margin: 0 auto;
}

.orders-page__list,
.orders-page__detail {
  min-width: 0;
}

.orders-page__list {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.orders-page--list-only .orders-page__list {
  min-height: calc(100dvh - 32px);
}

.orders-page__list[hidden],
.orders-page__detail[hidden] {
  display: none !important;
}

.orders-page__list-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

.orders-page__back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-text-primary);
  cursor: pointer;
  flex-shrink: 0;
}

.orders-page__back:focus {
  outline: none;
}

.orders-page__back:focus-visible {
  outline: 2px solid var(--color-focus-ring, #007aff);
  outline-offset: 2px;
  border-radius: 8px;
}

.orders-page__back-icon {
  display: block;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  background-color: currentColor;
  mask-image: var(--orders-page-back-icon-url);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 28px 28px;
  -webkit-mask-image: var(--orders-page-back-icon-url);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 28px 28px;
}

.orders-page__back-label {
  display: none;
  font-size: var(--font-size-body-sm, 14px);
  font-weight: 500;
  line-height: 1.3;
}

.orders-page__list-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
}

.orders-page__list-title {
  margin: 0;
  min-width: 0;
  color: var(--color-text-primary);
  font-size: var(--font-size-cart-title);
  line-height: var(--line-height-cart-title);
  font-weight: var(--font-weight-cart-title);
}

.orders-page__cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  /* Safe zone: отступ от последнего заказа до низа экрана (desktop + mobile). */
  padding-bottom: calc(var(--page-bottom-safe-gap) + env(safe-area-inset-bottom, 0px));
}

.orders-page__day-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.orders-page__day-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.orders-page__date {
  margin: 0;
  color: var(--color-text-secondary, #9e9b98);
  font-size: var(--font-size-body, 16px);
  line-height: 1.3;
  font-weight: 600;
}

.orders-page__list-status {
  margin: 0;
  color: var(--color-text-secondary, #6b7280);
  font-size: 14px;
  line-height: 1.4;
}

.orders-page__list-status--error {
  color: var(--color-danger, #d92d20);
}

.orders-page__loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 0;
  box-sizing: border-box;
}

.orders-page__loader[hidden] {
  display: none !important;
}

.orders-page--loading .orders-page__loader--initial {
  flex: 1 1 auto;
  min-height: min(420px, calc(100dvh - 120px));
}

.orders-page--loading .orders-page__cards,
.orders-page--loading .orders-page__list-status {
  display: none !important;
}

.orders-loading__spinner {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: 2.5px solid rgba(138, 135, 132, 0.28);
  border-top-color: #8a8784;
  border-radius: 50%;
  box-sizing: border-box;
  animation: orders-loading-spin 0.8s linear infinite;
}

.orders-loading__text {
  margin: 0;
  color: var(--color-text-secondary, #6b7280);
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
}

@keyframes orders-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

.orders-page__detail {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.orders-page__detail .order-detail-panel {
  flex: 1 1 auto;
}

.orders-page--detail-only .order-detail-panel {
  min-height: calc(100dvh - 32px - var(--orders-sticky-cta-height));
}

.orders-page--detail-only .order-detail-panel__loading {
  min-height: calc(100dvh - 32px - var(--orders-sticky-cta-height));
}

/* Как cart: CTA на body — иначе fixed ломается transform/overflow предков. */
body.route-orders > .order-detail-panel__cta--sticky {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--orders-sticky-cta-z-index);
  width: auto;
  margin: 0;
  padding: var(--orders-sticky-cta-padding-y) var(--orders-page-padding-x);
  padding-bottom: calc(var(--orders-sticky-cta-padding-y) + env(safe-area-inset-bottom, 0px));
  background: var(--main-page-bg, var(--color-bg));
  box-sizing: border-box;
}

body.route-orders > .order-detail-panel__cta--sticky[hidden] {
  display: none !important;
}

@media (min-width: 865px) {
  body.route-orders {
    --orders-page-padding-x: 24px;
  }

  .orders-page {
    padding-top: 24px;
  }

  .orders-page--detail-only .order-detail-panel {
    min-height: calc(100dvh - 48px - var(--orders-sticky-cta-height));
  }

  .orders-page--detail-only .order-detail-panel__loading {
    min-height: calc(100dvh - 48px - var(--orders-sticky-cta-height));
  }

  .orders-page--list-only .orders-page__list {
    min-height: calc(100dvh - 48px);
  }
}

@media (min-width: 1150px) {
  /* Список растёт со страницей — скролл у окна; тонкий скроллбар в стиле приложения. */
  html.route-orders {
    scrollbar-width: thin;
    scrollbar-color: var(--dish-modal-scrollbar-thumb) transparent;
  }

  html.route-orders::-webkit-scrollbar {
    width: var(--dish-modal-scrollbar-size);
  }

  html.route-orders::-webkit-scrollbar-track {
    background: transparent;
  }

  html.route-orders::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 100px;
    background-color: var(--dish-modal-scrollbar-thumb);
    background-clip: padding-box;
  }

  html.route-orders::-webkit-scrollbar-thumb:hover {
    background-color: var(--dish-modal-scrollbar-thumb-hover);
  }

  body.route-orders {
    padding-bottom: 0;
  }

  .orders-page {
    padding-top: 40px;
    padding-bottom: 0;
  }

  .orders-page--detail-only {
    padding-bottom: 0;
  }

  .orders-page--detail-only .order-detail-panel {
    min-height: 0;
  }

  /* Desktop: список слева (скролл страницы), детали справа sticky. */
  .orders-page__list {
    flex: 0 0 var(--orders-list-width);
  }

  .orders-page__detail {
    display: flex;
    flex: 0 0 var(--orders-detail-width);
    position: sticky;
    top: var(--main-page-padding-y, 40px);
    align-self: flex-start;
    box-sizing: border-box;
    max-height: calc(100dvh - var(--main-page-padding-y, 40px));
  }

  .orders-page__detail .order-detail-panel {
    flex: 1 1 auto;
    min-height: 0;
    max-height: 100%;
  }

  .orders-page__detail .order-detail-panel__content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }

  .orders-page__detail .order-detail-panel__content .checkout-order-items {
    flex: 1 1 auto;
    min-height: 0;
    margin-bottom: 0;
    padding-bottom: 0;
  }

  .orders-page__detail .order-detail-panel__content .checkout-order-items__list {
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--dish-modal-scrollbar-thumb) transparent;
    -ms-overflow-style: auto;
  }

  .orders-page__detail .order-detail-panel__content .checkout-order-items__list::-webkit-scrollbar {
    display: block;
    width: var(--dish-modal-scrollbar-size);
  }

  .orders-page__detail .order-detail-panel__content .checkout-order-items__list::-webkit-scrollbar-track {
    background: transparent;
  }

  .orders-page__detail .order-detail-panel__content .checkout-order-items__list::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 100px;
    background-color: var(--dish-modal-scrollbar-thumb);
    background-clip: padding-box;
  }

  .orders-page__detail .order-detail-panel__content .checkout-order-items__list::-webkit-scrollbar-thumb:hover {
    background-color: var(--dish-modal-scrollbar-thumb-hover);
  }

  /* Safe zone от кнопки «Повторить заказ» до низа экрана. */
  .orders-page__detail .order-detail-panel__cta {
    margin-top: 0;
    padding-top: 12px;
    padding-bottom: 40px;
  }

  .orders-page__back-label {
    display: inline;
  }
}

.order-detail-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  font-family: var(--font-family, Inter, sans-serif);
}

.order-detail-panel button,
.order-detail-panel input,
.order-detail-panel textarea,
.order-detail-panel select {
  font-family: inherit;
}

.order-detail-panel__header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  min-width: 0;
}

.order-detail-panel__back {
  width: 32px;
  height: 32px;
  margin-bottom: 12px;
  padding: 0;
  border: none;
  background-color: var(--color-text-primary);
  mask-image: var(--order-detail-back-icon-url);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 28px 28px;
  -webkit-mask-image: var(--order-detail-back-icon-url);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 28px 28px;
  cursor: pointer;
  flex-shrink: 0;
}

.order-detail-panel__back:focus {
  outline: none;
}

.order-detail-panel__back:focus-visible {
  outline: 2px solid var(--color-focus-ring, #007aff);
  outline-offset: 2px;
  border-radius: 8px;
}

.order-detail-panel__back[hidden] {
  display: none;
  margin-bottom: 0;
}

.order-detail-panel__title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
}

.order-detail-panel__payment-status {
  margin: 5px 0 0;
  text-align: center;
  font-size: var(--font-size-body-sm, 14px);
  font-weight: 400;
  line-height: 1.3;
}

.order-detail-panel__payment-status--success {
  color: var(--color-cart-eta, #5f9f52);
}

.order-detail-panel__payment-status--danger {
  color: var(--color-danger, #d92d20);
}

.order-detail-panel__title-copy {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  max-width: 100%;
}

.order-detail-panel__title-copy:focus {
  outline: none;
}

.order-detail-panel__title-copy:focus-visible {
  outline: 2px solid var(--color-focus-ring, #007aff);
  outline-offset: 2px;
  border-radius: 8px;
}

.order-detail-panel__title-copy[hidden] {
  display: none;
}

.order-detail-panel__title {
  margin: 0;
  color: #5b514c;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 700;
  min-width: 0;
}

.order-detail-panel__copy-icon-wrap {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
}

.order-detail-panel__copy-icon {
  display: block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.order-detail-panel__copy-tooltip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  z-index: 6;
  width: max-content;
  max-width: min(220px, calc(100vw - 32px));
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--dish-modal-remove-help-bg, #3a3532);
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;
  text-align: center;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -4px);
  transition:
    opacity var(--dish-modal-remove-chip-motion-duration, 160ms) var(--motion-easing-standard, ease),
    transform var(--dish-modal-remove-chip-motion-duration, 160ms) var(--motion-easing-standard, ease),
    visibility var(--dish-modal-remove-chip-motion-duration, 160ms) var(--motion-easing-standard, ease);
}

.order-detail-panel__title-copy--open .order-detail-panel__copy-tooltip {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

@media (min-width: 1150px) {
  /* На десктопе — над иконкой копирования, без наезда на заголовок. */
  .order-detail-panel__copy-tooltip {
    left: auto;
    right: 0;
    transform: translate(0, -4px);
  }

  .order-detail-panel__title-copy--open .order-detail-panel__copy-tooltip {
    transform: translate(0, 0);
  }
}

.order-detail-panel__empty {
  margin: 24px 0 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-body-sm, 14px);
  line-height: 1.4;
}

.order-detail-panel__loading {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: min(420px, 60dvh);
  box-sizing: border-box;
}

.order-detail-panel__loading[hidden] {
  display: none !important;
}

.order-detail-panel__empty[hidden],
.order-detail-panel__content[hidden] {
  display: none;
}

.order-detail-panel__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.order-detail-panel__status-card {
  width: 100%;
  margin: 4px 0 8px;
  cursor: default;
  pointer-events: none;
}

.order-detail-panel__content .checkout-address-field {
  justify-content: center;
  margin-top: 4px;
}

.order-detail-panel__content .order-courier-delivery {
  margin-top: 8px;
}

.order-detail-panel__content .checkout-address-field__copy {
  flex: 0 1 auto;
}

.order-detail-panel__content .checkout-address-field__line {
  justify-content: center;
  text-align: center;
}

.order-detail-panel__content .checkout-order-items {
  margin-bottom: 8px;
  padding-bottom: 16px;
}

.order-detail-panel__content .checkout-pickup-at-table {
  flex: 0 0 auto;
}

.order-detail-panel__cta {
  flex: 0 0 auto;
  width: 100%;
  margin-top: auto;
  padding-top: 12px;
  box-sizing: border-box;
}

.order-detail-panel__cta[hidden] {
  display: none !important;
}

.order-detail-panel__repeat {
  width: 100%;
  cursor: pointer;
}

.order-courier-delivery {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  width: 100%;
  min-width: 0;
}

.order-courier-delivery[hidden] {
  display: none;
}

.order-courier-delivery__code {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.order-courier-delivery__code[hidden] {
  display: none;
}

.order-courier-delivery__code-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.order-courier-delivery__code-value {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--color-text-primary, #1a1a1a);
}

.order-courier-delivery__code-icon {
  display: block;
  flex-shrink: 0;
}

.order-courier-delivery__code-label {
  margin: 0;
  font-size: var(--font-size-body-sm, 14px);
  font-weight: 400;
  line-height: 1.3;
  color: var(--color-text-secondary, #938984);
  text-align: center;
}

.order-courier-delivery__status {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 16px;
  column-gap: 15px;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 14px;
  border: none;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  text-align: left;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  box-sizing: border-box;
  font-family: inherit;
}

.order-courier-delivery__status:focus {
  outline: none;
}

.order-courier-delivery__status:focus-visible {
  outline: 2px solid var(--color-focus-ring, #007aff);
  outline-offset: 2px;
}

.order-courier-delivery__status--disabled {
  cursor: default;
}

.order-courier-delivery__status[hidden] {
  display: none;
}

.order-courier-delivery__status-media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.order-courier-delivery__status-icon {
  display: block;
  width: 22px;
  height: 22px;
}

.order-courier-delivery__status-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.order-courier-delivery__status-title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-text-primary, #1a1a1a);
}

.order-courier-delivery__status-subtitle {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-text-secondary, #938984);
}

.order-courier-delivery__status-chevron {
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--color-text-secondary, #938984);
  border-bottom: 2px solid var(--color-text-secondary, #938984);
  transform: rotate(-45deg);
  justify-self: end;
  opacity: 0.7;
}

.order-courier-delivery__status--disabled .order-courier-delivery__status-chevron {
  opacity: 0.25;
}

.dev-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  min-height: 50vh;
  padding: 24px;
  text-align: center;
}

.dev-page__back {
  align-self: flex-start;
  font-size: var(--font-size-body-sm);
  color: var(--color-text-secondary);
  text-decoration: none;
}

.dev-page__back:hover {
  color: var(--color-text-primary);
}

.dev-page__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  width: min(100%, 280px);
}

.dev-page__install-pwa,
.dev-page__open-auth,
.dev-page__open-addresses,
.dev-page__open-address {
  width: 100%;
}

.dev-page__install-pwa {
  font-family: inherit;
  padding: 12px 24px;
  font-size: var(--font-size-button);
  font-weight: var(--font-weight-button);
  border: 2px solid var(--color-button-primary-bg);
  border-radius: 12px;
  background: transparent;
  color: var(--color-button-primary-bg);
  cursor: pointer;
}

.dev-page__install-pwa[hidden] {
  display: none;
}

.dev-page__open-auth,
.dev-page__open-addresses,
.dev-page__open-address {
  font-family: inherit;
  padding: 12px 24px;
  font-size: var(--font-size-button);
  font-weight: var(--font-weight-button);
  border: none;
  border-radius: 12px;
  background: var(--color-button-primary-bg);
  color: var(--color-button-primary-text);
  cursor: pointer;
}

.order-address-bar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: min(100%, 360px);
  margin-bottom: 8px;
  padding: 12px 16px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  background: #fff;
  text-align: left;
  cursor: pointer;
}

.order-address-bar__type {
  font-size: 12px;
  font-weight: var(--font-weight-button);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.order-address-bar__address {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-button);
  color: var(--color-text-primary);
}

.order-address-bar__eta {
  font-size: 12px;
  color: var(--color-text-secondary);
}

.order-address-bar__eta--loading {
  display: inline-flex;
  align-items: center;
  min-height: 14px;
}

.order-address-bar__eta-skeleton {
  border-radius: 6px;
}

.about-page {
    min-height: var(--app-page-min-height);
    max-width: 720px;
    margin: 0 auto;
    padding: 16px 16px calc(24px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
}

.about-page__back {
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background-color: var(--color-text-primary);
    background-image: none;
    mask-image: var(--about-page-back-icon-url);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 28px 28px;
    -webkit-mask-image: var(--about-page-back-icon-url);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 28px 28px;
    cursor: pointer;
}

.about-page__title {
    margin: 16px 0 12px;
    color: var(--color-text-primary);
    font-size: 1.5rem;
    line-height: 1.3;
}

.about-page__text {
    margin: 0;
    white-space: pre-wrap;
    color: var(--color-text-primary);
    font-size: 1rem;
    line-height: 1.5;
}

.about-page__empty {
    color: var(--color-text-secondary, #8a8784);
}

.pwa-install-page {
    min-height: var(--app-page-min-height);
    max-width: 430px;
    margin: 0 auto;
    padding: 28px 20px calc(32px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    background: var(--main-page-bg, var(--color-bg));
    text-align: center;
}

.pwa-install-page__logo {
    display: block;
    width: 160px;
    height: auto;
    margin: 0 auto 28px;
}

.pwa-install-page__title {
    margin: 0 0 12px;
    color: var(--color-text-primary);
    font-size: var(--font-size-title-xl);
    font-weight: var(--font-weight-title);
    line-height: 1.2;
}

.pwa-install-page__subtitle {
    margin: 0 auto 28px;
    max-width: 340px;
    color: var(--color-primary);
    font-size: var(--font-size-body-sm);
    font-weight: 500;
    line-height: 1.4;
}

.pwa-install-page__install {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 188px;
    min-height: 52px;
    margin: 4px auto 32px;
    padding: 12px 28px;
    border: none;
    border-radius: 999px;
    background: linear-gradient(190deg, #fadea7 0%, #dabb7d 50%, #ae8755 100%);
    color: var(--color-text-primary);
    font-size: var(--font-size-button);
    font-weight: var(--font-weight-button);
    line-height: var(--line-height-button);
    cursor: pointer;
}

.pwa-install-page__install-icon {
    width: 22px;
    height: 22px;
    display: block;
}

.pwa-install-page__manual {
    margin: 0 0 12px;
    color: var(--color-text-primary);
    font-size: var(--font-size-body);
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
}

.pwa-install-page__steps {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
    text-align: left;
}

.pwa-install-page__step {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 70px;
    padding: 10px 14px 10px 10px;
    border-radius: 16px;
    background: rgba(129, 119, 99, 0.12);
}

.pwa-install-page__step-icon {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    overflow: hidden;
    border-radius: 12px;
    background: #fff;
}

.pwa-install-page__step-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.pwa-install-page__step-text {
    margin: 0;
    color: var(--color-text-primary);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.35;
}

.pwa-install-page__highlight {
    color: #327b69;
    text-decoration: none;
}

.pwa-install-page__about {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.pwa-install-page__quotes {
    display: block;
    color: #9ec9b4;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 36px;
    font-weight: 700;
    line-height: 1;
}

.pwa-install-page__about-text {
    margin: 0;
    max-width: 340px;
    color: var(--color-catalog-section-title);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
}

@media (min-width: 414px) {
    .pwa-install-page__quotes {
        font-size: 52px;
    }

    .pwa-install-page__about-text {
        max-width: 380px;
        font-size: 16px;
        line-height: 1.5;
    }
}

.pwa-install-redesign {
    box-sizing: border-box;
    min-height: var(--app-page-min-height);
    padding: 28px 16px calc(56px + env(safe-area-inset-bottom, 0px));
    background: var(--pwa-install-page-bg);
    text-align: center;
}

.pwa-install-redesign__title {
    margin: 0 auto 24px;
    max-width: 320px;
    color: var(--color-text-primary);
    font-size: var(--font-size-title-xl);
    font-weight: var(--font-weight-title);
    line-height: 1.2;
}

.pwa-install-redesign__steps {
    display: flex;
    flex-direction: column;
    gap: 25px;
    max-width: 845px;
    margin: 0 auto;
    padding: 0;
    overflow: visible;
    list-style: none;
}

.pwa-install-redesign__step {
    margin: 0;
    padding: 0;
    overflow: visible;
}

.pwa-install-redesign__step-image {
    display: block;
    width: 100%;
    height: auto;
    filter: var(--pwa-install-step-shadow);
}

.legal-page {
    --legal-page-header-height: 32px;
    --legal-page-logo-width: 171px;
    --legal-page-logo-height: 38px;
    --legal-page-padding-top: 40px;
    --legal-page-header-gap: 40px;

    min-height: var(--app-page-min-height);
    max-width: 800px;
    margin: 0 auto;
    padding: var(--legal-page-padding-top) 16px calc(24px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    background: var(--main-page-bg, var(--color-bg));
}

.legal-page__header {
    position: relative;
    display: flex;
    align-items: center;
    min-height: var(--legal-page-header-height);
    margin: 0 0 var(--legal-page-header-gap);
}

.legal-page__back {
    position: relative;
    z-index: 1;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background-color: var(--color-text-primary);
    background-image: none;
    mask-image: var(--legal-page-back-icon-url);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 28px 28px;
    -webkit-mask-image: var(--legal-page-back-icon-url);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 28px 28px;
    cursor: pointer;
    flex-shrink: 0;
}

.legal-page__back:focus {
    outline: none;
}

.legal-page__back:focus-visible {
    outline: 2px solid var(--color-focus-ring, #007aff);
    outline-offset: 2px;
    border-radius: 8px;
}

.legal-page__logo {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(42vw, var(--legal-page-logo-width));
    height: auto;
    aspect-ratio: 171 / 38;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.legal-page__document {
    color: var(--color-text-primary);
    font-family: var(--font-family);
    font-size: var(--font-size-body);
    line-height: 1.55;
}

.legal-page__document h1 {
    margin: 0 0 16px;
    font-size: var(--font-size-title-lg);
    font-weight: var(--font-weight-title);
    line-height: 1.3;
}

.legal-page__document h2 {
    margin: 28px 0 12px;
    font-size: var(--font-size-title-md);
    font-weight: var(--font-weight-title);
    line-height: 1.35;
}

.legal-page__document p {
    margin: 0 0 12px;
}

.legal-page__document ul {
    margin: 0 0 12px;
    padding: 0 0 0 1.2em;
}

.legal-page__document li {
    margin: 0 0 6px;
}

.legal-page__document a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.legal-page__document a:hover {
    text-decoration: none;
}

.legal-page .legal-footer {
    margin-top: 32px;
}

@media (min-width: 865px) {
    .legal-page {
        --legal-page-padding-top: 56px;
        --legal-page-header-gap: 56px;
        padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
    }

    .legal-page .legal-footer {
        margin-top: 40px;
    }
}

body.pwa-ptr-enabled {
  overflow-x: clip;
  overscroll-behavior-y: none;
}

.pwa-ptr-shell {
  width: 100%;
  min-height: 100%;
}

.pwa-ptr-shell__mover {
  width: 100%;
  min-height: 100%;
  will-change: transform;
  transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

.pwa-ptr-shell__mover--dragging {
  transition: none;
}

.pwa-ptr {
  --pwa-ptr-progress: 0;

  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 28px);
  left: 50%;
  z-index: var(--pwa-ptr-z-index);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-50%) scale(0.82);
  transition:
    opacity 0.16s ease,
    transform 0.16s ease;
}

.pwa-ptr--dragging {
  transition: none;
}

.pwa-ptr--visible {
  opacity: calc(0.4 + var(--pwa-ptr-progress) * 0.6);
  transform: translateX(-50%) scale(calc(0.82 + var(--pwa-ptr-progress) * 0.18));
}

.pwa-ptr--ready {
  opacity: 1;
}

.pwa-ptr__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 8px rgb(0 0 0 / 8%);
  transform-origin: center center;
}

.pwa-ptr--dragging .pwa-ptr__icon {
  transition: none;
}

.pwa-ptr--refreshing .pwa-ptr__icon {
  animation: pwa-ptr-spin 0.75s linear infinite;
}

.pwa-ptr__icon-svg {
  display: block;
}

@keyframes pwa-ptr-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pwa-ptr-shell__mover {
    transition: none;
  }

  .pwa-ptr {
    transition: none;
  }

  .pwa-ptr--refreshing .pwa-ptr__icon {
    animation: none;
  }
}