/* v36.3 — resilient cart sheet for Safari and Telegram in-app browsers. */
.menu-page {
  --vv-height: 100dvh;
  --vv-bottom: 0px;
}

#cartSheet .sheet-panel {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  overflow: hidden;
}

#cartSheet .cart-items {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(41, 79, 67, .26) transparent;
}

#cartSheet .sheet-panel footer {
  position: static;
  bottom: auto;
  margin-inline: -20px;
  padding: 16px 20px calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(41, 79, 67, .12);
  box-shadow: 0 -14px 34px rgba(25, 47, 40, .08);
}

.cart-row > div:nth-child(2) {
  min-width: 0;
}

.cart-row h3 {
  line-height: 1.28;
  overflow-wrap: anywhere;
}

.cart-row img,
.cart-row .cart-initial {
  border: 1px solid rgba(41, 79, 67, .1);
  box-shadow: inset 0 1px rgba(255, 255, 255, .72);
}

.cart-row .cart-initial {
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, .85), transparent 34%),
    linear-gradient(145deg, rgba(229, 238, 233, .94), rgba(203, 220, 211, .72));
  color: var(--jade-deep);
}

.cart-row .cart-initial svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  opacity: .7;
}

.qty button,
.sheet-panel header > button,
.product-close {
  -webkit-appearance: none;
  appearance: none;
  color: var(--jade-deep);
  border: 1px solid rgba(41, 79, 67, .08);
  box-shadow: inset 0 1px rgba(255, 255, 255, .62);
}

.qty button:active,
.sheet-panel header > button:active,
.product-close:active {
  background: rgba(154, 186, 170, .5);
  transform: scale(.94);
}

.qty span {
  color: var(--jade-ink);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 760px) {
  .sheet-panel {
    bottom: max(var(--vv-bottom), env(safe-area-inset-bottom), 6px);
    width: calc(100% - 12px);
    max-height: calc(var(--vv-height) - 12px);
    border-radius: 26px;
  }

  #cartSheet .sheet-panel {
    height: min(var(--cart-sheet-height, 720px), calc(var(--vv-height) - 12px));
    max-height: none;
    padding: 9px 18px 0;
  }

  #cartSheet .sheet-handle {
    margin-bottom: 11px;
  }

  #cartSheet .sheet-panel header {
    padding-bottom: 13px;
  }

  #cartSheet .sheet-panel h2 {
    font-size: clamp(25px, 7.4vw, 30px);
  }

  #cartSheet .cart-items {
    max-height: none;
    padding-bottom: 4px;
  }

  #cartSheet .cart-row {
    grid-template-columns: 58px minmax(0, 1fr) auto;
    gap: 11px;
    padding: 13px 0;
  }

  #cartSheet .cart-row img,
  #cartSheet .cart-row .cart-initial {
    width: 58px;
    height: 58px;
    border-radius: 14px;
  }

  #cartSheet .cart-row h3 {
    margin-bottom: 4px;
    font-size: 13.5px;
  }

  #cartSheet .qty {
    grid-template-columns: 36px 24px 36px;
  }

  #cartSheet .qty button {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }

  #cartSheet .sheet-panel footer {
    margin-inline: -18px;
    padding: 14px 18px calc(14px + env(safe-area-inset-bottom));
    grid-template-columns: .8fr 1.45fr;
    gap: 12px;
  }

  #cartSheet .sheet-panel footer strong {
    font-size: 21px;
  }

  #cartSheet .primary-button {
    min-height: 52px;
  }
}

@media (max-width: 360px) {
  #cartSheet .cart-row {
    grid-template-columns: 52px minmax(0, 1fr) auto;
    gap: 9px;
  }

  #cartSheet .cart-row img,
  #cartSheet .cart-row .cart-initial {
    width: 52px;
    height: 52px;
  }

  #cartSheet .qty {
    grid-template-columns: 32px 22px 32px;
  }

  #cartSheet .qty button {
    width: 32px;
    height: 32px;
  }
}