/* =========================================================
   QR MENU — ULTRA COMPACT CSS
========================================================= */

:root {
   
         --main-color: #142634;
         --main-color-dark: #142634;
         --main-color-light: #eef2f5;
         --scroll-button-color: #2f485b;
     


          
   --page-bg: #f4f4f4;
   --card-bg: #fff;

   --text-color: #222;
   --text-muted: #666;
   --white: #fff;

   --accent-color: #ff6600;
   --border-color: rgba(0, 0, 0, 0.1);

   --shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
   --shadow-modal: 0 18px 50px rgba(0, 0, 0, 0.3);

   --content-width: 1200px;
   --list-width: 900px;
   --radius: 16px;
}

/* =========================================================
   RESET
========================================================= */

*,
*::before,
*::after {
   box-sizing: border-box;
}
html,
body {
   width: 100%;
   max-width: 100%;
   overflow-x: hidden;
   background: var(--main-color);
}
/* Пока меню не готово — не показываем основную страницу */
body.app-not-ready .site-header,
body.app-not-ready .page-content,
body.app-not-ready footer,
body.app-not-ready #dailyOfferBox {
   visibility: hidden;
}

/* Во время загрузки тоже держим меню скрытым */
body.menu-is-loading .site-header,
body.menu-is-loading .page-content,
body.menu-is-loading footer,
body.menu-is-loading #dailyOfferBox {
   visibility: hidden;
}
html {
   scroll-behavior: smooth;
}

body {
   margin: 0;
   min-height: 100vh;
   font-family: Arial, "Segoe UI", sans-serif;
   color: var(--text-color);
   background: var(--main-color);
}
html.page-scroll-locked,
body.page-scroll-locked {
   overflow: hidden;
   height: 100%;
}

/* =========================================================
   LANGUAGE SCREEN
========================================================= */
.language-start-screen {
   position: fixed;

   top: calc(-1 * env(safe-area-inset-top, 0px));
   left: 0;
   right: 0;
   bottom: calc(-1 * env(safe-area-inset-bottom, 0px));

   z-index: 99999;

   display: flex;
   align-items: center;
   justify-content: center;

   min-height: calc(100dvh + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px));

   padding:
      calc(20px + env(safe-area-inset-top, 0px)) 20px calc(20px + env(safe-area-inset-bottom, 0px));

   background: var(--main-color);
}
.language-start-screen::before {
   content: "";

   position: fixed;
   left: 0;
   right: 0;
   top: 0;

   height: env(safe-area-inset-top, 0px);

   background: var(--main-color);

   pointer-events: none;
}

.language-start-screen::after {
   content: "";

   position: fixed;
   left: 0;
   right: 0;
   bottom: 0;

   height: env(safe-area-inset-bottom, 0px);

   background: var(--main-color);

   pointer-events: none;
}

.language-start-screen.hidden {
   display: none;
}

.language-start-box {
   position: relative;

   width: min(420px, 94vw);
   min-height: 300px;
   padding: 28px 22px;

   display: grid;
   place-items: center;

   text-align: center;

   background: var(--card-bg);
   border-radius: 20px;
   box-shadow: var(--shadow-modal);

   overflow: hidden;
}

.language-start-box h2 {
   margin: 0 0 8px;
   color: var(--main-color);
   font-size: 26px;
}

.language-start-box p {
   margin: 0 0 20px;
   color: var(--text-muted);
   line-height: 1.45;
}

.language-start-buttons {
   display: grid;
   gap: 10px;
}  

.language-start-buttons button {
   min-height: 46px;
   border-radius: 12px;

   color: var(--white);
   background: var(--main-color);

   font-weight: 700;
}

.language-start-buttons button:hover {
   background: var(--main-color-dark);
}
#languageChooseContent,
.language-loading-content {
   grid-area: 1 / 1;

   width: 100%;

   transition:
      opacity 0.28s ease,
      transform 0.28s ease,
      visibility 0.28s ease;
}

#languageChooseContent {
   opacity: 1;
   visibility: visible;
   transform: translateY(0) scale(1);
}

.language-loading-content {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 18px;

   opacity: 0;
   visibility: hidden;
   pointer-events: none;

   transform: translateY(14px) scale(0.97);
}

.language-start-screen.is-loading #languageChooseContent {
   opacity: 0;
   visibility: hidden;
   pointer-events: none;

   transform: translateY(-14px) scale(0.97);
}

.language-start-screen.is-loading .language-loading-content {
   opacity: 1;
   visibility: visible;
   pointer-events: auto;

   transform: translateY(0) scale(1);
}

.language-start-screen.fade-out {
   animation: languageScreenOut 0.35s ease forwards;
}

@keyframes languageScreenOut {
   from {
      opacity: 1;
   }

   to {
      opacity: 0;
   }
}

/* =========================================================
   HEADER
========================================================= */

.site-header {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 50000;

   display: grid;
   grid-template-columns: 1fr auto;
   grid-template-areas:
      "brand languages"
      "filters filters"
      "search search"
      "actions actions";
   align-items: center;
   gap: 10px 16px;

   width: 100%;
   padding: 12px 20px;

   overflow: hidden;

   color: var(--white);
   background: var(--main-color);
   box-shadow: 0 3px 14px rgba(0, 0, 0, 0.16);

   transform: translateY(0);
   transition:
         padding 1.20s ease,
         gap 1.20s ease,
         box-shadow 1.20s ease;
}

.header-spacer {
   height: var(--header-height, 170px);
   background: var(--main-color);
   transition: height 0.3s ease;
}

body.app-not-ready .header-spacer,
body.menu-is-loading .header-spacer {
   visibility: hidden;
}
.site-header h1 {
   grid-area: brand;
   justify-self: center;

   max-height: 60px;
   margin: 0;

   color: var(--white);

   font-size: 30px;
   line-height: 1.1;
   text-align: center;

   opacity: 1;
   transition:
      max-height 0.3s ease,
      opacity 0.2s ease,
      transform 0.3s ease;
}


/* ---------- LANGUAGES ---------- */

.header-langs {
   grid-area: languages;
   justify-self: end;
}

.language-switch {
   display: flex;
   gap: 6px;
}

.language-switch a {
   min-width: 36px;
   height: 30px;
   padding: 0 8px;

   display: flex;
   align-items: center;
   justify-content: center;

   color: var(--white);
   background: rgba(255, 255, 255, 0.16);

   border-radius: 20px;

   font-size: 12px;
   font-weight: 700;
   text-decoration: none;
   text-transform: uppercase;
}

.language-switch a:hover,
.language-switch a.active {
   color: var(--main-color);
   background: var(--white);
}


/* ---------- FILTERS ---------- */

.header-filters {
   grid-area: filters;

   max-height: 180px;

   display: flex;
   justify-content: center;

   overflow: hidden;
   opacity: 1;

   transition:
      max-height 0.3s ease,
      opacity 0.2s ease,
      transform 0.3s ease;
}

.filters {
   width: 100%;
   max-width: 1100px;

   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   gap: 8px;
}

.filters button {
   min-height: 34px;
   padding: 6px 14px;

   border-radius: 20px;

   color: var(--text-color);
   background: var(--white);

   font-size: 13px;
   font-weight: 700;
   white-space: nowrap;
}

.filters button:hover,
.filters button.active {
   color: var(--main-color);
   background: var(--main-color-light);
}


/* ---------- SEARCH ---------- */

.header-search {
   grid-area: search;

   display: flex;
   justify-content: center;

   width: 100%;
}

.header-search input {
   width: min(520px, 94%);
   height: 42px;
   padding: 0 18px;

   border: 0;
   outline: 0;
   border-radius: 22px;

   color: var(--text-color);
   background: var(--white);

   font-size: 15px;
   font-weight: 600;

   box-shadow: var(--shadow);

   transition: height 0.25s ease;
}

.header-search input::placeholder {
   color: #777;
}

.header-search input:focus {
   box-shadow:
      0 0 0 2px rgba(255, 255, 255, 0.3),
      var(--shadow);
}


/* ---------- BOTTOM ---------- */

.header-bottom-row {
   grid-area: actions;

   max-height: 50px;
   overflow: hidden;
   opacity: 1;

   transition:
      max-height 0.3s ease,
      opacity 0.2s ease;
}
.site-header.header-search-only {
   padding: 12px 20px;
   gap: 0;
   
}
.site-header.header-search-only h1,
.site-header.header-search-only .header-filters,
.site-header.header-search-only .header-bottom-row {
   display: none;
}

.site-header.header-search-only .header-search {
   display: flex;
   justify-content: center;
   width: 100%;
}

.site-header.header-search-only .header-search input {
   width: min(520px, 94%);
   height: 42px;
}
/* =========================================================
   PAGE
========================================================= */

.page-content {
   min-height: 60vh;
   padding-top: 20px;
}

.menu-grid {
   width: 100%;
   max-width: var(--content-width);

   margin: auto;
   padding: 20px;

   gap: 20px;
}

.category {
   grid-column: 1 / -1;

   margin: 16px 0 4px;

   font-size: 22px;
   font-weight: 700;
}

.empty-message {
   grid-column: 1 / -1;

   padding: 40px 20px;

   color: var(--text-muted);

   font-size: 18px;
   font-weight: 700;
   text-align: center;
}

.empty-message p {
   margin: 0 0 16px;
}

.menu-retry-btn {
   padding: 10px 18px;
   border: 0;
   border-radius: 10px;
   background: var(--main-color);
   color: #fff;
   font: inherit;
   cursor: pointer;
}

.page-content {
   min-height: 60vh;
   padding-top: 20px;
   background: #fff;
}

.menu-white-box {
   width: 100%;
   background: #fff;
}

.menu-white-box .menu-grid {
   margin: 0 auto;
}
/* =========================================================
   COMMON CARD
========================================================= */

.menu-item {
   min-width: 0;

   color: var(--text-color);
   background: var(--card-bg);

   content-visibility: auto;
   contain-intrinsic-size: auto 300px;
}

.menu-item h2,
.menu-item h3,
.menu-item p {
   overflow-wrap: anywhere;
}

.food-card>img {
   width: 100%;
   aspect-ratio: 4 / 3;

   object-fit: cover;

   background: #eee;
}


/* =========================================================
   VIEW GRID
========================================================= */

.menu-grid.view-grid,
.menu-grid.view-alt {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
}

.view-grid .menu-item {
   overflow: hidden;

   border-radius: var(--radius);
   box-shadow: var(--shadow);
}

.view-grid .menu-item>img {
   height: 180px;
}

.view-grid .menu-item h3 {
   margin: 12px 12px 7px;

   font-size: 18px;
   line-height: 1.3;
}

.view-grid .short {
   margin: 0 12px 7px;

   color: var(--text-muted);

   font-size: 14px;
   line-height: 1.4;
}

.view-grid .price {
   display: block;

   margin: 0 12px 12px;

   color: var(--main-color-dark);

   font-size: 16px;
   font-weight: 800;
}


/* ---------- PLACEHOLDER ---------- */

.image-placeholder {
   display: none;
}

.view-grid .image-placeholder {
   width: 100%;
   height: 180px;

   display: flex;
   align-items: center;
   justify-content: center;

   background: #eee;
}

.view-grid .image-placeholder .imgg {
   width: 50px;
   height: 50px;

   object-fit: contain;
   opacity: 0.4;
}


/* =========================================================
   VIEW ALT
========================================================= */

.view-alt .menu-item {
   padding: 18px;

   border: 1px solid var(--border-color);
   border-radius: var(--radius);

   box-shadow: var(--shadow);
}

.view-alt .menu-item>img {
   display: none;
}

.alt-top {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   gap: 12px;
}

.alt-top h3 {
   margin: 0;
   font-size: 18px;
}

.price-badge {
   flex: 0 0 auto;

   padding: 6px 10px;

   border-radius: 10px;

   color: var(--white);
   background: var(--main-color-dark);

   font-size: 13px;
   font-weight: 800;
   white-space: nowrap;
}

.divider {
   height: 1px;
   margin: 12px 0;

   background: var(--border-color);
}

.view-alt .short {
   margin: 0;

   color: var(--text-muted);

   font-size: 13px;
   line-height: 1.45;
}


/* =========================================================
   VIEW V3
========================================================= */

.menu-grid.view-v3,
.menu-grid.view-v4 {
   display: block;
   max-width: var(--list-width);
}

.view-v3 .category,
.view-v4 .category {
   margin: 22px 0 12px;
}

.view-v3 .menu-item {
   width: 100%;
   padding: 14px 10px;

   display: flex;
   align-items: center;

   border-bottom: 1px solid var(--border-color);

   background: transparent;
}

.line-left {
   min-width: 180px;
   max-width: 55%;
}

.line-left h3 {
   margin: 0;
   font-size: 18px;
}

.line-left p {
   margin: 3px 0 0;

   color: var(--text-muted);

   font-size: 13px;
   line-height: 1.35;
}

.line-middle {
   flex: 1;
   min-width: 20px;
   padding: 0 12px;
}

.line-dots {
   border-bottom: 2px dotted #ccc;
}

.line-right {
   color: var(--main-color-dark);

   font-size: 18px;
   font-weight: 800;
   white-space: nowrap;
}


/* =========================================================
   VIEW V4
========================================================= */

.view-v4 .menu-item {
   margin-bottom: 10px;
   padding: 14px;

   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;

   border-radius: 12px;

   box-shadow: var(--shadow);
}

.mini-left {
   min-width: 0;
}

.mini-left h3 {
   margin: 0;
   font-size: 16px;
}

.mini-left p {
   margin: 3px 0 0;

   color: var(--text-muted);

   font-size: 13px;
   line-height: 1.35;
}

.mini-right {
   flex: 0 0 auto;
}

.mini-right span {
   color: var(--main-color-dark);

   font-size: 16px;
   font-weight: 800;
   white-space: nowrap;
}


/* =========================================================
   VIEW V5
========================================================= */

.menu-grid.view-v5 {
   max-width: 100%;
   padding: 0;

   display: flex;
   gap: 0;

   overflow-x: auto;

   scroll-snap-type: x mandatory;
   scrollbar-width: none;
}

.menu-grid.view-v5::-webkit-scrollbar,
.story-container::-webkit-scrollbar,
.filters::-webkit-scrollbar {
   display: none;
}

.view-v5 .category {
   display: none;
}

.view-v5 .menu-item {
   position: relative;

   flex: 0 0 100%;

   height: 60vh;
   min-height: 420px;

   overflow: hidden;

   background: #111;

   scroll-snap-align: start;
}

.view-v5 .menu-item>img {
   width: 100%;
   height: 100%;

   object-fit: cover;
}

.view-v5 .menu-item::after {
   content: "";

   position: absolute;
   inset: 0;
   z-index: 1;

   background: rgba(0, 0, 0, 0.35);
}

.story-v5-content,
.story-content {
   position: absolute;
   left: 20px;
   right: 20px;
   bottom: 40px;
   z-index: 2;

   color: var(--white);
}

.story-v5-content h2,
.story-content h2 {
   margin: 0;
   font-size: 28px;
}

.story-v5-content p,
.story-content p {
   margin: 6px 0;
   line-height: 1.4;
}

.story-v5-content span,
.story-content span {
   color: var(--accent-color);

   font-size: 20px;
   font-weight: 800;
}


/* =========================================================
   LOAD MORE
========================================================= */

.load-more-wrapper {
   grid-column: 1 / -1;

   width: 100%;
   padding: 20px 0;

   display: flex;
   justify-content: center;
}

.load-more-button {
   min-width: 220px;
   min-height: 44px;
   padding: 10px 22px;

   border-radius: 12px;

   color: var(--white);
   background: var(--main-color-dark);

   font-weight: 700;

   box-shadow: var(--shadow);
}


/* =========================================================
   DAILY OFFER
========================================================= */
.fixed-daily-offer {
   position: fixed;
   right: 16px;
   bottom: 16px;
   z-index: 2000;

   width: 68px;
   height: 68px;
   padding: 3px;

   overflow: hidden;

   border: 0 !important;
   border-radius: 50%;

   background: var(--main-color-light) !important;
   box-shadow: var(--shadow);
}

.fixed-daily-offer img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: 50%;
}

.fixed-daily-offer::after {
   content: "";

   position: absolute;
   inset: 3px;
   z-index: 1;

   border-radius: 50%;
   background: rgba(0, 0, 0, 0.3);
}

.fixed-daily-offer .offer-text {
   position: absolute;
   inset: 3px;
   z-index: 2;

   display: flex;
   align-items: center;
   justify-content: center;

   padding: 6px;

   color: var(--white);

   font-size: 9px;
   font-weight: 800;
   line-height: 1.1;
   text-align: center;

   
}
/* =========================================================
   MODAL
========================================================= */

.modal {
   position: fixed;
   inset: 0;
   z-index: 9999;

   display: none;
   align-items: center;
   justify-content: center;

   padding: 16px;

   background: rgba(0, 0, 0, 0.78);
}

.modal.show {
   display: flex;
}

.modal-content-pro,
.offer-modal-box {
   position: relative;

   overflow: hidden;

   border-radius: 18px;

   box-shadow: var(--shadow-modal);
}

.modal-content-pro {
   width: min(420px, 95vw);
   max-height: 90vh;

   background: #fff;
}

.offer-modal-box {
   width: min(420px, 92vw);
   height: min(80vh, 720px);

   background: #000;
}

.modal-close,
.close-offer {
   position: absolute;
   top: 12px;
   right: 12px;
   z-index: 10;

   width: 36px;
   height: 36px;
   padding: 0;

   display: flex;
   align-items: center;
   justify-content: center;

   border-radius: 50%;

   color: var(--white);
   background: rgba(0, 0, 0, 0.5);

   font-size: 18px;
}

.modal-img {
   position: relative;
}

.modal-img img {
   width: 100%;
   height: 220px;

   object-fit: cover;

   background: #eee;
}

.price-floating {
   position: absolute;
   right: 10px;
   bottom: 10px;

   padding: 8px 12px;

   border-radius: 10px;

   color: var(--white);
   background: var(--main-color-dark);

   font-weight: 800;
}

.modal-body {
   padding: 16px;
}

.modal-body h2 {
   margin: 0 0 10px;
}

.modal-body .short,
.modal-body .desc {
   margin: 0;

   color: var(--text-muted);

   font-size: 14px;
   line-height: 1.45;
}


/* =========================================================
   OFFER STORY
========================================================= */

.story-container {
   width: 100%;
   height: 100%;

   display: flex;

   overflow-x: auto;

   scroll-snap-type: x mandatory;
   scrollbar-width: none;
}

.story-slide {
   position: relative;

   flex: 0 0 100%;

   height: 100%;

   background-position: center;
   background-size: cover;

   scroll-snap-align: start;
}

.overlay {
   position: absolute;
   inset: 0;

   background: rgba(0, 0, 0, 0.35);
}

/* =========================================================
   LOADING
========================================================= */

.menu-loading-overlay {
   position: fixed;
   inset: 0;
   z-index: 200000;

   display: none;
   align-items: center;
   justify-content: center;

   padding: 20px;

   background: var(--main-color);

   opacity: 0;
   transform: scale(1.02);

   pointer-events: none;
}

.menu-loading-overlay.show {
   display: flex;
   pointer-events: auto;

   animation: loadingOverlayIn 0.35s ease forwards;
}

.menu-loading-overlay.show.hide {
   animation: loadingOverlayOut 0.35s ease forwards;
}

.menu-loading-box {
   width: min(320px, 90vw);
   min-height: 210px;
   padding: 30px 24px;

   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 18px;

   border-radius: 24px;

   color: var(--text-color);
   background: rgba(255, 255, 255, 0.92);

   box-shadow: var(--shadow-modal);
   backdrop-filter: blur(14px);

   opacity: 0;
   transform: translateY(18px) scale(0.96);

   animation: loadingBoxIn 0.45s ease 0.08s forwards;
}

.menu-loading-logo {


   display: flex;
   align-items: center;
   justify-content: center;

   border-radius: 18px;

   color: transparent;
   background: transparent;

   font-size: 24px;
   font-weight: 900;
   letter-spacing: 1px;

}

.menu-loading-logo-img {
   width: 220px;
   height: 90px;

   object-fit: contain;
}

.menu-loading-spinner {
   width: 46px;
   height: 46px;

   border: 5px solid var(--main-color-light);
   border-top-color: var(--main-color);
   border-radius: 50%;

   animation: spin 0.7s linear infinite;
}

.menu-loading-text {
   color: var(--main-color);
   font-size: 16px;
   font-weight: 700;
   text-align: center;
}

@keyframes loadingOverlayIn {
   from {
      opacity: 0;
      transform: scale(1.02);
   }

   to {
      opacity: 1;
      transform: scale(1);
   }
}

@keyframes loadingOverlayOut {
   from {
      opacity: 1;
      transform: scale(1);
   }

   to {
      opacity: 0;
      transform: scale(0.98);
   }
}

@keyframes loadingBoxIn {
   from {
      opacity: 0;
      transform: translateY(18px) scale(0.96);
   }

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

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


/* =========================================================
   FOOTER
========================================================= */
footer {
   min-height: 80px;
   padding: 0 16px;

   display: flex;
   align-items: center;
   justify-content: center;

   color: var(--text-muted);
   text-align: center;
}

footer p {
   margin: 0;
   font-size: 12px;
   line-height: 1.2;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {
   .site-header {
      padding: 11px 14px;
   }

   .site-header h1 {
      font-size: 27px;
   }

   .menu-grid.view-grid,
   .menu-grid.view-alt {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {
   .site-header {
      padding: 9px 10px;
      gap: 8px;
   }

   .site-header h1 {
      width: 100%;

      justify-self: start;

      font-size: 22px;
      text-align: center;
   }

   .language-switch {
      gap: 4px;
   }

   .language-switch a {
      min-width: 28px;
      height: 26px;
      padding: 0 5px;

      font-size: 11px;
   }
    
      .filters {
         justify-content: center;
         flex-wrap: wrap;
   
         overflow-x: visible;
         scrollbar-width: none;
      }

   .filters button {
      min-height: 32px;
      padding: 6px 11px;

      font-size: 12px;
   }

   .header-search input {
      width: 100%;
      height: 39px;

      font-size: 14px;
   }

   .menu-grid {
      padding: 14px;
      gap: 14px;
   }

   .menu-grid.view-grid,
   .menu-grid.view-alt {
      grid-template-columns: 1fr;
   }

   .category {
      margin-top: 12px;
      font-size: 20px;
   }

   .view-grid .menu-item>img,
   .view-grid .image-placeholder {
      height: 200px;
   }

   .view-v3 .menu-item {
      align-items: flex-start;
   }

   .line-left {
      min-width: 0;
      max-width: 65%;
   }

   .line-left h3,
   .line-right {
      font-size: 16px;
   }

   .line-middle {
      padding: 10px 8px 0;
   }

   .view-v5 .menu-item {
      height: 52vh;
      min-height: 360px;
   }

   .story-v5-content h2,
   .story-content h2 {
      font-size: 24px;
   }

   .fixed-daily-offer {
      right: 12px;
      bottom: 12px;

      width: 62px;
      height: 62px;
   }

   .modal {
      padding: 10px;
   }

   .modal-content-pro {
      width: 96vw;
   }

   .offer-modal-box {
      width: 94vw;
      height: 82vh;
   }

   .load-more-button {
      width: 100%;
   }
.site-header.header-search-only {
   padding: 9px 10px;
}

.site-header.header-search-only .header-search input {
   width: 100%;
   height: 39px;
}
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

   *,
   *::before,
   *::after {
      scroll-behavior: auto !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
   }
}

@media (hover: none) {

   .menu-item,
   .filters button,
   .fixed-daily-offer,
   .load-more-button {
      transform: none !important;
   }
}
/* =========================================================
   MENU REVEAL ANIMATION
========================================================= */
body.menu-ready .category,
body.menu-ready .menu-item,
body.menu-ready .fixed-daily-offer {
   animation: softMenuReveal 0.25s ease both;
}

@keyframes softMenuReveal {
   from {
      opacity: 0.96;
      transform: translateY(4px);
   }

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


.scroll-top-btn {
   position: fixed;
   left: 16px;
   bottom: 16px;
   z-index: 2100;

   width: 52px;
   height: 52px;
   padding: 0;

   display: flex;
   align-items: center;
   justify-content: center;

   border: 0;
   border-radius: 50%;

   color: var(--white);
background: rgba(47, 72, 91, 0.55);

   font-size: 24px;
   font-weight: 900;

   box-shadow: var(--shadow);

   opacity: 0;
   visibility: hidden;
   transform: translateY(12px) scale(0.92);

   cursor: pointer;

   transition:
      opacity 0.25s ease,
      visibility 0.25s ease,
      transform 0.25s ease,
      background 0.25s ease;
}

.scroll-top-btn.show {
   opacity: 1;
   visibility: visible;
   transform: translateY(0) scale(1);
}

.scroll-top-btn:hover {
   background: var(--main-color);
}

body.app-not-ready .scroll-top-btn,
body.menu-is-loading .scroll-top-btn {
   visibility: hidden;
   opacity: 0;
   pointer-events: none;
}
.site-header::before {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   top: calc(-1 * env(safe-area-inset-top, 0px));
   height: env(safe-area-inset-top, 0px);
   background: var(--main-color);
}


.filters {
   flex-wrap: wrap;
   overflow-x: visible;
   justify-content: center;
}

.header-filters {
   max-height: none;
   overflow: visible;
}
.forPrice {
   width: calc(100% + 40px);
   min-height: 220px;
   margin-bottom: -100px;
   margin-left: -20px;
   padding: 16px 20px;

   background-color: rgba(10, 0, 10, 0.45);
   border-radius: 5px;
}

.forPrice h2 {
   margin: 0 0 8px;
}

.forPrice p {
   margin: 0 0 10px;
}

.forPrice span {
   color: #fff;
   font-size: 22px;
   font-weight: 900;
}

.Pricee{
   color: white;
}

body.menu-ready .fixed-daily-offer {
   animation: dailyOfferAlwaysShake 0.55s ease-in-out infinite !important;
   transform-origin: center;
}

@keyframes dailyOfferAlwaysShake {
   0% {
      transform: translateX(0) rotate(0deg);
   }

   25% {
      transform: translateX(-2px) rotate(-3deg);
   }

   50% {
      transform: translateX(2px) rotate(3deg);
   }

   75% {
      transform: translateX(-1px) rotate(-2deg);
   }

   100% {
      transform: translateX(0) rotate(0deg);
   }
}


.start-view-block {
   width: 100%;
   margin-top: 20px;
}

.start-view-title {
   margin-bottom: 10px;

   color: var(--main-color);

   font-size: 14px;
   font-weight: 800;
}

.start-view-buttons {
   width: 100%;

   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 8px;
}

.start-view-btn {
   min-height: 38px;
   padding: 8px 10px;

   border: 1px solid rgba(20, 38, 52, 0.18);
   border-radius: 12px;

   color: var(--main-color);
   background: var(--main-color-light);

   font-size: 13px;
   font-weight: 800;

   cursor: pointer;
}

.start-view-btn.active {
   color: var(--white);
   background: var(--main-color);
}

.start-view-btn[data-view="v5"] {
   grid-column: 1 / -1;
}

@media (max-width: 420px) {
   .language-start-box {
      min-height: 360px;
      padding: 24px 18px;
   }

   .start-view-buttons {
      gap: 7px;
   }

   .start-view-btn {
      min-height: 36px;
      font-size: 12px;
   }
}

.language-start-box {
   width: min(420px, 94vw);
   min-height: 430px;
   padding: 26px 22px;

   display: grid;
   place-items: center;

   text-align: center;

   background: var(--card-bg);
   border-radius: 20px;
   box-shadow: var(--shadow-modal);

   overflow: hidden;
}

.language-start-buttons {
   display: grid;
   gap: 10px;
   margin-bottom: 18px;
}

.start-view-block {
   width: 100%;
   margin-top: 4px;
}

.start-view-title {
   margin-bottom: 10px;

   color: var(--main-color);

   font-size: 15px;
   font-weight: 800;
   line-height: 1.2;
}

.start-view-buttons {
   width: 100%;

   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 8px;
}

.start-view-btn {
   min-height: 38px;
   padding: 8px 10px;

   border: 1px solid rgba(20, 38, 52, 0.18);
   border-radius: 12px;

   color: var(--main-color);
   background: var(--main-color-light);

   font-size: 13px;
   font-weight: 800;

   cursor: pointer;

   appearance: none;
   -webkit-appearance: none;
}

.start-view-btn.active {
   color: var(--white);
   background: var(--main-color);
   border-color: var(--main-color);
}

.start-view-btn[data-view="v5"] {
   grid-column: 1 / -1;
}

@media (max-width: 420px) {
   .language-start-box {
      width: min(390px, 94vw);
      min-height: 420px;
      padding: 24px 18px;
   }

   .start-view-title {
      font-size: 14px;
   }

   .start-view-btn {
      min-height: 36px;
      font-size: 12px;
   }
}

.start-view-hidden {
   display: none !important;
}


.language-start-box.view-options-hidden {
   min-height: 300px;
   padding: 28px 22px;
}

.language-start-box.view-options-visible {
   min-height: 430px;
   padding: 26px 22px;
}

@media (max-width: 420px) {
   .language-start-box.view-options-hidden {
      min-height: 300px;
      padding: 26px 18px;
   }

   .language-start-box.view-options-visible {
      min-height: 420px;
      padding: 24px 18px;
   }
}
body.story-view-active .page-content {
   padding-top: 0 !important;
   background: #111 !important;
}

body.story-view-active .menu-white-box {
   background: #111 !important;
}

body.story-view-active .menu-grid.view-v5 {
   width: 100% !important;
   max-width: none !important;
   margin: 0 !important;
   padding: 0 !important;
   gap: 0 !important;

   background: #111 !important;
}

body.story-view-active .view-v5 .menu-item {
   margin: 0 !important;
   border: 0 !important;
   background: #111 !important;
}

body.story-view-active .view-v5 .menu-item>img {
   display: block;
}

.story-v5-content span,
.story-content span,
.forPrice span {
   display: inline-block;

   margin-top: 8px;
   padding: 7px 12px;

   border-radius: 12px;

   color: var(--main-color) !important;
   background: rgba(255, 255, 255, 0.78);

   font-size: 20px;
   font-weight: 900;

   backdrop-filter: blur(6px);
   -webkit-backdrop-filter: blur(6px);

   box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
body.story-view-active footer {
   min-height: 34px !important;
   padding: 4px 12px !important;

   background: #142634 !important;
   color: rgba(255, 255, 255, 0.65) !important;
}

body.story-view-active footer p {
   font-size: 11px !important;
   line-height: 1.1 !important;
}
:root {
   --story-footer-height: 34px;
}

body.story-view-active .page-content {
   min-height: auto !important;
   padding-top: 0 !important;
   background: #111 !important;
}

body.story-view-active .view-v5 .menu-item {
   height: calc(100dvh - var(--header-height, 170px) - var(--story-footer-height)) !important;
   min-height: calc(100dvh - var(--header-height, 170px) - var(--story-footer-height)) !important;
}

body.story-view-active footer {
   min-height: var(--story-footer-height) !important;
   padding: 4px 12px !important;

   background: #111 !important;
   color: rgba(255, 255, 255, 0.65) !important;
}
body.story-view-active footer {
   min-height: 34px !important;
   padding: 4px 12px !important;

   background: #142634 !important;
   color: var(--text-muted) !important;
}

body.story-view-active footer p {
   margin: 0 !important;
   font-size: 11px !important;
   line-height: 1.1 !important;
}

body.story-view-active #dailyOfferBox,
body.story-view-active .header-filters,
body.story-view-active .header-search,
body.story-view-active .header-bottom-row {
   display: none !important;
}

body.story-view-active .site-header {
   grid-template-columns: 1fr auto;
   grid-template-areas: "brand languages";

   padding: 8px 14px !important;
   gap: 0 !important;
}

body.story-view-active .site-header h1 {
   max-height: 34px !important;
   font-size: 22px !important;
   line-height: 1.1 !important;
}