.mobile-nav,
.site-header__back,
.site-header__screen {
  display: none;
}

@media (max-width: 767.98px) {

  :root {

    --container-pad: 18px;
  }

  .has-promo .site-header,
  .no-promo .site-header {

    top: 0;
  }

  body {
    padding-bottom: var(--mob-nav-total);
  }

  .mobile-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: var(--mob-nav-bg);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-top: var(--border-width) solid var(--color-border-soft);

    padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px));
  }

  .mobile-nav__tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 8px 0 6px;

    min-height: var(--tap-min);
    color: var(--color-text-label);
    text-decoration: none;
  }

  .mobile-nav__tab--active {
    color: var(--color-accent-text);
  }

  .mobile-nav__tab:active {
    background: var(--color-surface-soft);
  }

  .mobile-nav__mark {
    position: relative;
    display: grid;
    place-items: center;
  }

  .mobile-nav__mark svg,
  .site-header__back svg {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .mobile-nav__mark svg { stroke-width: 1.7; }
  .site-header__back svg { stroke-width: 1.8; }

  .mobile-nav__label {
    font-family: var(--font-text);
    font-weight: var(--weight-medium);
    font-size: var(--mob-text-nav);
    line-height: var(--leading-flat);
    letter-spacing: var(--mob-tracking-nav);
  }

  .mobile-nav__count {
    position: absolute;
    top: -5px;
    right: -9px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: var(--radius-pill);
    background: var(--color-accent-fill);
    color: var(--color-accent-contrast);
    display: grid;
    place-items: center;
    font-family: var(--font-text);
    font-weight: var(--weight-semibold);
    font-size: var(--mob-text-nav);
    line-height: var(--leading-flat);
  }

  body.order-typing .mobile-nav {
    display: none;
  }

  .site-header__inner {

    gap: 12px;
    padding-top: 14px;
    padding-bottom: 12px;
    min-height: var(--mob-header-h);
  }

  .site-header__switch:checked ~ .site-header__panel {
    max-height: calc(100dvh - var(--mob-header-h) - var(--mob-nav-total));
    overflow-y: auto;
  }

  .site-header__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: var(--mob-icon-btn);
    height: var(--mob-icon-btn);
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-text);
  }

  .site-header__back:active {
    background: var(--color-surface-soft);
  }

  .site-header__screen {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex: 1 1 0;
    min-width: 0;
  }

  .site-header__screen-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-display);
    font-weight: var(--weight-regular);
    font-size: 22px;
    line-height: 1.1;
    color: var(--color-text);
  }

  .site-header__screen-meta {
    flex: none;
    font-weight: var(--weight-medium);
    font-size: var(--mob-text-label);
    line-height: var(--leading-flat);
    letter-spacing: var(--tracking-promo);
    text-transform: uppercase;
    color: var(--color-text-label);
  }

  body:not(.page-index) .logo--header,
  body:not(.page-index) .cart-link {
    display: none;
  }

  .order-bar,
  .order-dock {
    bottom: var(--mob-nav-total);
  }

  .order-bar {
    padding-bottom: var(--space-3);
  }

  .order-dock {
    padding-bottom: 12px;
  }

  .product-sticky {
    bottom: var(--mob-nav-total);
  }

  body.has-order-bar {
    padding-bottom: calc(
      var(--order-bar-height, calc(var(--tap-min) + var(--space-6)))
      + var(--mob-nav-total));
  }

  .mob-scroller {
    display: flex;
    gap: var(--mob-gap-xs);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
  }

  .mob-scroller::-webkit-scrollbar {
    display: none;
  }

  .mob-scroller > * {
    flex: none;
    scroll-snap-align: start;
  }

  .mob-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--border-width);
    background: var(--color-border-soft);
    border-radius: var(--radius-card-sm);
    overflow: hidden;
  }

  .mob-tiles > * {
    background: var(--color-surface);
    padding: 16px 15px;
  }

  .mob-actionbar {
    position: sticky;
    bottom: var(--mob-nav-total);
    z-index: 10;
    display: flex;
    align-items: center;
    gap: var(--mob-gap-xs);
    padding: 14px var(--container-pad) 18px;
    border-top: var(--border-width) solid var(--color-border-soft);
    background: var(--header-bg);
    -webkit-backdrop-filter: blur(var(--header-blur));
    backdrop-filter: blur(var(--header-blur));
  }

  body.order-typing .mob-actionbar {
    display: none;
  }

  .page-index .hero__photo {
    inset: 0;
    height: auto;
  }
}