/* Mobile layout and mobile theme overrides. */

@media (max-width: 760px) {
  html {
    scroll-padding-top: calc(var(--mobile-topbar-height, 0px) + 6px);
  }

  body {
    background: var(--bg);
    overflow-x: hidden;
    padding-top: var(--mobile-topbar-height, 0);
  }

  .topbar {
    --mobile-topbar-inset: clamp(14px, 3vw, 34px);
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 60;
    display: grid;
    align-items: center;
    width: 100vw;
    max-width: 100vw;
    grid-template-columns: minmax(0, 1fr);
    padding-right: var(--mobile-topbar-inset);
    padding-left: var(--mobile-topbar-inset);
  }

  .topbar-social {
    position: fixed;
    top: 11px;
    right: var(--mobile-topbar-inset);
    z-index: 25;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .brand {
    max-width: calc(100% - 108px);
  }

  .topbar .brand-mark {
    display: none;
  }

  .topbar .brand strong {
    display: inline-grid;
    min-height: 42px;
    align-items: center;
    padding: 0 16px;
    color: #fff;
    background: var(--pink);
    border-radius: 999px;
  }

  .topbar-social .social-link {
    width: 44px;
    height: 44px;
    border-radius: 8px;
  }

  .topbar-social .social-link img {
    width: 21px;
    height: 21px;
  }

  .topbar-social .social-link-telegram img {
    width: 24px;
    height: 24px;
  }

  .nav {
    display: flex;
    width: 100%;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0;
    font-size: 10px;
  }

  .nav a {
    display: inline-flex;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
  }

  .nav-label-desktop {
    display: none;
  }

  .nav-label-mobile {
    display: inline;
  }

  body.registration-screen .nav a[href="#loyalty"] {
    min-height: 44px;
    color: #fff;
    background: var(--pink);
    border-radius: 999px;
    box-shadow: 0 8px 18px rgba(41, 37, 82, 0.14);
  }

  body.contacts-screen .nav a[href="#contacts"] {
    min-height: 44px;
    color: #fff;
    background: var(--pink);
    border-radius: 999px;
    box-shadow: 0 8px 18px rgba(41, 37, 82, 0.14);
  }

  .nav-order-link {
    min-height: 44px;
    padding: 0 13px;
    color: #000;
    background: #fbdc5a;
    border-radius: 999px;
    box-shadow: 0 8px 18px rgba(41, 37, 82, 0.14);
  }

  .nav-order-link img {
    display: block;
    width: 78px;
    height: auto;
  }

  .nav-order-link:hover {
    color: #000;
    background: #ffd84f;
  }

  .button {
    min-height: 44px;
  }

  .home-layout {
    display: grid;
    grid-template-columns: 1fr;
    width: 100vw;
    max-width: 100vw;
    padding: 6px;
  }

  .hero-intro {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    min-height: auto;
    width: 100vw;
    max-width: 100vw;
    row-gap: 14px;
    align-content: start;
    padding: 6px 0 10px;
    overflow: hidden;
  }

  .hero-menu-head {
    padding-right: 14px;
    padding-left: 14px;
  }

  .hero-body {
    grid-template-columns: 1fr;
    width: 100%;
    gap: 8px;
    align-items: start;
    padding: 0 14px;
  }

  .hero-copy {
    max-width: none;
    gap: 6px;
  }

  .hero-copy h1 {
    font-size: clamp(32px, 10vw, 40px);
  }

  .hero-subtitle {
    font-size: clamp(14px, 4.2vw, 18px);
    line-height: 1.08;
  }

  .hero-text {
    font-size: 11px;
    line-height: 1.16;
  }

  .hero-menu-button {
    display: none;
  }

  .hero-menu-arrow {
    display: none;
  }

  .hero-photos {
    display: flex;
    --mobile-scrollbar-color: var(--pink);
    width: 100%;
    height: auto;
    max-width: 100%;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 6px;
    scroll-snap-type: x proximity;
    scrollbar-color: var(--mobile-scrollbar-color) transparent;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .hero-photos::-webkit-scrollbar {
    height: 6px;
  }

  .hero-photos::-webkit-scrollbar-track {
    background: transparent;
  }

  .hero-photos::-webkit-scrollbar-thumb {
    background: var(--mobile-scrollbar-color);
    border-radius: 999px;
  }

  .hero-photo-grid {
    display: contents;
  }

  .hero-photo {
    flex: 0 0 clamp(112px, 31vw, 142px);
    aspect-ratio: 2 / 3;
    border-radius: 16px;
    scroll-snap-align: start;
  }

  .hero-photo-main {
    flex-basis: clamp(126px, 35vw, 160px);
    width: auto;
  }

  .hero-photo-pink,
  .hero-photo-yellow {
    aspect-ratio: 2 / 3;
  }

  @media (max-height: 720px) {
    .hero-intro {
      row-gap: 4px;
      padding-bottom: 6px;
    }

    .hero-body {
      gap: 8px;
    }

    .hero-copy {
      gap: 5px;
    }

    .hero-copy h1 {
      font-size: clamp(32px, 10.5vw, 42px);
    }

    .hero-subtitle {
      font-size: clamp(15px, 4.8vw, 20px);
    }

    .hero-text {
      font-size: 12px;
      line-height: 1.16;
    }

    .hero-menu-button {
      min-height: 46px;
    }

    .hero-photo {
      flex-basis: clamp(112px, 32vw, 148px);
    }

    .hero-photo-main {
      flex-basis: clamp(128px, 38vw, 168px);
    }
  }

  .qr-generator-row {
    grid-template-columns: 1fr;
  }

  .menu-panel {
    overflow: hidden;
    scroll-margin-top: 0;
  }

  .menu-head {
    display: none;
  }

  .menu-panel > .menu-head {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
    margin: 0 0 6px;
    padding: 8px 128px 8px 10px;
    border-radius: 12px;
  }

  .menu-panel > .menu-head h1 {
    font-size: 22px;
    line-height: 1;
  }

  .menu-panel > .menu-head .menu-size-note {
    position: absolute;
    right: 10px;
    top: 50%;
    text-align: right;
    font-size: 11px;
    line-height: 1;
    white-space: nowrap;
    transform: translateY(-50%);
  }

  .menu-filter {
    display: flex;
    width: calc(100vw - 12px);
    max-width: calc(100vw - 12px);
    gap: 1px;
    margin: 0 0 6px;
    overflow: hidden;
    padding: 0 0 5px;
    scrollbar-color: var(--pink) transparent;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .menu-filter::-webkit-scrollbar {
    height: 6px;
  }

  .menu-filter::-webkit-scrollbar-track {
    background: transparent;
  }

  .menu-filter::-webkit-scrollbar-thumb {
    background: var(--pink);
    border-radius: 999px;
  }

  .menu-filter-button {
    flex: 1 1 auto;
    min-width: 44px;
    min-height: 44px;
    padding: 0 5px;
    color: var(--navy);
    font-family: "TTFors", Arial, sans-serif;
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(41, 37, 82, 0.08);
    border-radius: 999px;
    box-shadow: 0 5px 12px rgba(41, 37, 82, 0.08);
  }

  .menu-filter-button.is-active {
    color: #fff;
    background: var(--pink);
  }

  .drink-group.is-filter-hidden {
    display: none;
  }

  .drink-card.is-filter-hidden {
    display: none;
  }

  h1 {
    font-size: clamp(30px, 9vw, 42px);
  }

  .drink-catalog {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    justify-items: stretch;
    gap: 6px;
    min-height: var(--menu-catalog-min-height, 0);
    overflow: hidden;
  }

  .drink-group {
    --mobile-scrollbar-color: var(--pink);
    width: 100%;
    max-width: 100%;
    justify-self: stretch;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 5px;
    border-radius: 12px;
    scrollbar-color: var(--mobile-scrollbar-color) transparent;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .drink-group::-webkit-scrollbar {
    height: 6px;
  }

  .drink-group::-webkit-scrollbar-track {
    background: transparent;
  }

  .drink-group::-webkit-scrollbar-thumb {
    background: var(--mobile-scrollbar-color);
    border-radius: 999px;
  }

  .drink-group h3 {
    margin-bottom: 6px;
    font-size: 16px;
  }

  .drink-grid {
    grid-auto-flow: column;
    grid-auto-columns: 96px;
    grid-template-columns: none;
    width: max-content;
    min-width: 100%;
    gap: 4px;
    padding-right: 0;
  }

  .drink-card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 22px 54px 16px;
    width: auto;
    min-width: 0;
    max-width: 100%;
    margin-right: 0;
    gap: 0;
    align-items: stretch;
    height: 96px;
    padding: 0 2px 3px;
    border-radius: 10px;
    overflow: hidden;
  }

  .drink-visual {
    top: 0;
    right: 2px;
    left: 2px;
    height: 76px;
    border-radius: 7px;
  }

  .drink-icons {
    right: 2px;
    bottom: 2px;
    gap: 2px;
    height: 58px;
    justify-content: flex-start;
  }

  .drink-icon {
    width: 18px;
    height: 18px;
  }

  .drink-icon svg {
    width: 11px;
    height: 11px;
  }

  .drink-icons .drink-icon::after {
    right: calc(100% + 4px);
    max-width: 62px;
    padding: 3px 4px;
    font-size: 6px;
    border-radius: 5px;
  }

  .drink-card img {
    align-self: center;
    justify-self: center;
    width: 100%;
    height: calc(100% - 16px);
    margin-top: 16px;
    object-fit: cover;
    object-position: center;
  }

  .drink-status {
    position: fixed;
    top: calc(var(--mobile-topbar-height, 64px) + 12px);
    right: 14px;
    bottom: auto;
    left: 14px;
    z-index: 120;
    width: auto;
    max-height: calc(100dvh - var(--mobile-topbar-height, 64px) - 28px);
    align-content: start;
    gap: 8px;
    padding: 12px;
    overflow-y: auto;
    border-radius: 18px;
    box-shadow: 0 18px 42px rgba(79, 69, 61, 0.22);
    transform: translateY(10px) scale(0.98);
    -webkit-overflow-scrolling: touch;
  }

  .drink-status-image {
    display: block;
    width: 100%;
    height: clamp(210px, 42vh, 300px);
    margin: 0 auto 6px;
    object-fit: cover;
    object-position: center;
    background: #fffaf0;
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 16px;
    box-shadow: inset 0 0 0 1px rgba(79, 69, 61, 0.06);
  }

  .drink-card:hover .drink-status,
  .drink-card:focus-visible .drink-status,
  .drink-card.is-status-open .drink-status,
  .drink-status.is-status-open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
  }

  .drink-status-head {
    gap: 4px;
  }

  .drink-status-title {
    font-size: 20px;
    line-height: 1.08;
  }

  .drink-status-price {
    min-height: 28px;
    padding: 0 10px;
    font-size: 13px;
  }

  .drink-status-list {
    gap: 6px;
  }

  .drink-status-description {
    font-size: 15px;
    line-height: 1.35;
  }

  .drink-status-chip,
  .drink-status-note {
    min-height: 26px;
    padding: 0 9px;
    font-size: 12px;
  }

  .drink-info {
    display: contents;
  }

  .drink-card h4 {
    grid-row: 1;
    width: 100%;
    height: 20px;
    margin: 0;
    padding: 0 2px;
    font-size: 6px;
    line-height: 1.04;
  }

  .price-row {
    grid-row: 3;
  }

  .price-row span {
    min-height: 14px;
    padding: 0 3px;
    font-size: 5.5px;
  }

  .registration-panel {
    display: none;
  }

  .footer {
    grid-template-columns: 1fr;
    gap: 10px 16px;
  }

  .footer-contact {
    justify-self: start;
    flex-wrap: wrap;
  }

  .yandex-rating-badge {
    width: min(100%, 200px);
  }

  body.registration-screen,
  body.contacts-screen {
    min-height: 100vh;
    background: var(--surface-soft);
  }

  body.registration-screen .hero-intro,
  body.registration-screen .menu-panel,
  body.registration-screen .footer,
  body.contacts-screen .hero-intro,
  body.contacts-screen .menu-panel,
  body.contacts-screen .footer {
    display: none;
  }

  body.registration-screen .home-layout,
  body.contacts-screen .home-layout {
    padding: 0;
  }

  body.registration-screen .registration-panel,
  body.contacts-screen .registration-panel {
    display: block;
    min-height: 100vh;
    padding: 14px 26px 14px 14px;
  }

  body.contacts-screen .registration-panel {
    padding: 14px;
  }

  .registration-sticky {
    position: static;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .mobile-menu-link {
    display: none;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    color: var(--navy);
    font-family: "DelaGothicOne", Arial, sans-serif;
    font-size: 12px;
    text-decoration: none;
    text-transform: uppercase;
    background: #fff;
    border-radius: 999px;
    box-shadow: var(--shadow);
  }

  .loyalty-copy,
  .loyalty-form {
    width: calc(100vw - 52px);
    max-width: 100%;
    margin-right: 12px;
    border-radius: 20px;
  }

  .map-card {
    display: none;
  }

  body.registration-screen .order-card,
  body.registration-screen .map-link,
  body.registration-screen .map-address,
  body.registration-screen .social-panel {
    display: none;
  }

  body.contacts-screen .mobile-menu-link,
  body.contacts-screen .order-card,
  body.contacts-screen .loyalty-copy,
  body.contacts-screen .loyalty-form,
  body.contacts-screen .social-panel {
    display: none;
  }

  body.contacts-screen .map-card {
    display: grid;
    width: calc(100vw - 28px);
    max-width: 100%;
    height: min(58vh, 420px);
    min-height: 280px;
    border-radius: 20px;
  }

  body.contacts-screen .map-link {
    display: inline-flex;
    width: calc(100vw - 28px);
    max-width: 100%;
    min-height: 44px;
    margin-top: 0;
  }

  body.contacts-screen .map-address {
    display: block;
    width: calc(100vw - 28px);
    max-width: 100%;
    margin: 0;
    padding: 14px 12px;
    background: #fff;
    border-radius: 20px;
    box-shadow: var(--shadow);
  }
}

@media (max-width: 760px) {
  .design-switcher,
  body[data-design] .design-switcher {
    display: none;
  }

  body[data-design] .home-layout {
    padding-bottom: 6px;
  }

  body[data-design] .hero-photos,
  body[data-design] .drink-group,
  body[data-design] .menu-filter {
    --mobile-scrollbar-color: var(--pink);
    scrollbar-color: var(--mobile-scrollbar-color) transparent;
  }

  body[data-design] .menu-filter::-webkit-scrollbar-thumb {
    background: var(--mobile-scrollbar-color);
  }

  body[data-design="banana"] .hero-photos,
  body[data-design="banana"] .drink-group,
  body[data-design="banana"] .menu-filter {
    --mobile-scrollbar-color: #ffcf01;
  }

  body[data-design] .menu-filter-button {
    color: var(--navy);
    background: var(--design-panel-bg);
    border: var(--design-panel-border);
    border-radius: var(--design-button-radius);
    font-family: "TTFors", Arial, sans-serif;
  }

  body[data-design] .menu-filter-button.is-active {
    color: var(--design-order-badge-text);
    background: var(--pink);
  }

  body[data-design="banana"] .menu-filter-button.is-active {
    color: #4f453d;
    background: #ffcf01;
  }

  body[data-design] .drink-grid {
    grid-auto-flow: column;
    grid-auto-columns: 118px;
    grid-template-columns: none;
    width: max-content;
    min-width: 100%;
    gap: 6px;
  }

  body[data-design] .drink-card {
    grid-template-rows: 28px 84px 20px;
    height: 138px;
    padding: 0 4px 4px;
  }

  body[data-design] .drink-visual {
    right: 4px;
    left: 4px;
    height: 112px;
  }

  body[data-design] .drink-card img {
    width: 100%;
    height: calc(100% - 26px);
    margin-top: 26px;
    object-fit: cover;
    object-position: center;
  }

  body[data-design] .drink-card h4 {
    height: 26px;
    font-size: 10px;
    line-height: 1.05;
  }

  body[data-design] .price-row span {
    min-height: 18px;
    padding: 0 5px;
    font-size: 7px;
  }

  body.registration-screen[data-design] .registration-panel {
    padding: 14px;
  }

  body.registration-screen[data-design] .loyalty-copy,
  body.registration-screen[data-design] .loyalty-form {
    width: calc(100vw - 28px);
    margin-right: 0;
    border-radius: var(--design-panel-radius);
  }

  header.topbar .topbar-social {
    position: fixed;
    top: 11px;
    right: var(--mobile-topbar-inset);
    z-index: 25;
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
  }

  body[data-design] .topbar .brand strong {
    color: var(--design-order-badge-text);
    background: var(--pink);
  }

  body[data-design="banana"] .topbar .brand strong {
    color: #4f453d;
    background: #ffcf01;
  }

  body.registration-screen[data-design] .nav a[href="#loyalty"] {
    color: var(--design-order-badge-text);
    background: var(--pink);
  }

  body.contacts-screen[data-design] .nav a[href="#contacts"] {
    color: var(--design-order-badge-text);
    background: var(--pink);
  }

  body.registration-screen[data-design="banana"] .nav a[href="#loyalty"] {
    color: #4f453d;
    background: #ffcf01;
  }

  body.contacts-screen[data-design="banana"] .nav a[href="#contacts"] {
    color: #4f453d;
    background: #ffcf01;
  }
}