/* Stable cross-device layout overrides (loaded after styles.css). */
:root {
  --gp-ui-gap: 8px;
  --gp-desktop-card-min: 190px;
  --gp-desktop-card-max: 260px;
}

main {
  padding-top: 0 !important;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  overflow-x: hidden !important;
}

.topbar,
#ptr-content {
  padding-left: var(--app-gutter-x, 12px) !important;
  padding-right: var(--app-gutter-x, 12px) !important;
}

html.public-mode .topbar,
html.public-mode #balance-widget,
html.public-mode .balance-widget {
  display: none !important;
}

html:not(.tg-webapp) .topbar,
html:not(.tg-webapp) #balance-widget,
html:not(.tg-webapp) .balance-widget {
  display: none !important;
}

html.public-mode .gp-main-nav,
html.public-mode .gp-profile-root,
html:not(.tg-webapp) .gp-main-nav,
html:not(.tg-webapp) .gp-profile-root {
  display: none !important;
}

html.public-mode #ptr-content {
  padding-top: var(--gp-ui-gap) !important;
}

#top-banner,
#top-banner.top-promo-banner,
#top-banner.top-promo-banner--photo {
  margin-top: var(--gp-ui-gap) !important;
  margin-bottom: var(--gp-ui-gap) !important;
}

html.public-mode #top-banner,
html.public-mode #top-banner.top-promo-banner,
html.public-mode #top-banner.top-promo-banner--photo {
  margin-top: 0 !important;
  margin-bottom: var(--gp-ui-gap) !important;
}

#sticky-filters,
.sticky-filters,
#sticky-filters.advanced-open,
.sticky-filters.advanced-open {
  margin: 0 !important;
  padding-top: 0 !important;
  padding-bottom: var(--gp-ui-gap) !important;
  gap: 0 !important;
  row-gap: 0 !important;
  column-gap: 0 !important;
}

body.overlay-open #sticky-filters,
body.overlay-open .sticky-filters,
body.overlay-open #sticky-filters.advanced-open,
body.overlay-open .sticky-filters.advanced-open,
html.overlay-open #sticky-filters,
html.overlay-open .sticky-filters,
html.overlay-open #sticky-filters.advanced-open,
html.overlay-open .sticky-filters.advanced-open {
  margin: 0 !important;
  padding-top: 0 !important;
  padding-bottom: var(--gp-ui-gap) !important;
  gap: 0 !important;
  row-gap: 0 !important;
  column-gap: 0 !important;
}

#sticky-filters .filters-bar,
.sticky-filters .filters-bar {
  margin: 0 !important;
  gap: var(--gp-ui-gap) !important;
}

#advanced-panel,
#advanced-panel.open,
#advanced-panel.closing,
#sticky-filters #advanced-panel,
#sticky-filters #advanced-panel.open,
#sticky-filters #advanced-panel.closing,
.sticky-filters #advanced-panel,
.sticky-filters #advanced-panel.open,
.sticky-filters #advanced-panel.closing {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  transform: none !important;
  overflow: hidden !important;
}

#advanced-panel .advanced-panel-gap,
#sticky-filters #advanced-panel .advanced-panel-gap,
.sticky-filters #advanced-panel .advanced-panel-gap {
  height: var(--gp-ui-gap) !important;
}

@media (min-width: 521px) {
  html.public-mode main {
    padding-top: 0 !important;
  }

  html.public-mode #top-banner,
  html.public-mode #top-banner.top-promo-banner,
  html.public-mode #top-banner.top-promo-banner--photo {
    margin-top: 0 !important;
  }

  html.public-mode #sticky-filters,
  html.public-mode .sticky-filters {
    top: var(--gp-ui-gap) !important;
  }
}

#gift-grid,
#gift-grid.gift-grid,
.gift-grid {
  margin-top: 0 !important;
  margin-bottom: 20px !important;
  gap: var(--gp-ui-gap) !important;
  align-content: start !important;
}

#gift-grid .gift-card,
.gift-grid .gift-card,
#gift-grid > .gift-card,
.gift-grid > .gift-card {
  width: 100% !important;
  max-width: none !important;
  justify-self: stretch !important;
}

#sticky-filters .filter-value,
#sticky-filters .filter-value-text,
.sticky-filters .filter-value,
.sticky-filters .filter-value-text {
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

@media (max-width: 520px) {
  #gift-grid,
  #gift-grid.gift-grid,
  .gift-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #sticky-filters .filter-btn,
  .sticky-filters .filter-btn {
    min-height: 56px !important;
  }

  html.tg-webapp.tg-phone .topbar {
    padding-top: calc(var(--tg-sticky-top, 0px) + 8px) !important;
  }
}

/* Mobile hardening: avoid iOS layer clipping + stale hidden advanced panel traps. */
@media (max-width: 520px) {
  main {
    overscroll-behavior-y: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
  }

  html.tg-webapp-ios #top-banner,
  html.tg-webapp-ios #top-banner *,
  html.tg-webapp-ios #sticky-filters .filters-bar,
  html.tg-webapp-ios #sticky-filters .filter-btn,
  html.tg-webapp-ios #sticky-filters .inline-reset-btn {
    touch-action: pan-y !important;
  }

  #ptr-content,
  #ptr-content.ptr-content,
  main.ptr-active #ptr-content,
  main.ptr-active #ptr-content.ptr-content,
  #ptr-content.ptr-content.ptr-pulling,
  .ptr-content {
    transform: none !important;
    -webkit-transform: none !important;
    contain: none !important;
    will-change: auto !important;
    transition: none !important;
  }

  main,
  main.ptr-active {
    --ptr-offset: 0px !important;
  }

  #advanced-panel.open[aria-hidden="true"],
  #sticky-filters #advanced-panel.open[aria-hidden="true"],
  .sticky-filters #advanced-panel.open[aria-hidden="true"] {
    height: 0 !important;
    pointer-events: none !important;
  }

  #advanced-panel[aria-hidden="true"],
  #sticky-filters #advanced-panel[aria-hidden="true"],
  .sticky-filters #advanced-panel[aria-hidden="true"] {
    pointer-events: none !important;
  }
}

@media (min-width: 521px) {
  #gift-grid,
  #gift-grid.gift-grid,
  .gift-grid {
    grid-template-columns: repeat(auto-fill, minmax(var(--gp-desktop-card-min), 1fr)) !important;
    justify-content: stretch !important;
    justify-items: stretch !important;
    align-content: start !important;
  }

  #gift-grid.gift-grid .gift-card,
  #gift-grid.gift-grid > .gift-card,
  #gift-grid .gift-card,
  .gift-grid .gift-card,
  .gift-grid > .gift-card {
    width: 100% !important;
    max-width: none !important;
    justify-self: stretch !important;
  }
}

/* Keep shell height driven by Telegram viewport vars from runtime JS.
   Hard-forcing 100dvh on iOS can desync scrollable area after WebView UI changes. */

html.tg-webapp-ios main {
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
}

html.tg-webapp-ios .modal-overlay,
html.tg-webapp-ios .gift-sheet-overlay,
html.tg-webapp-ios .pay-sheet-overlay,
html.tg-webapp-ios .tonkeeper-overlay {
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}

html.tg-webapp-ios .modal,
html.tg-webapp-ios .gift-sheet,
html.tg-webapp-ios .pay-sheet,
html.tg-webapp-ios .tonkeeper-sheet {
  max-height: calc(100dvh - env(safe-area-inset-top, 0px)) !important;
}

html.gp-main-nav-enabled main {
  padding-bottom: calc(var(--gp-main-nav-safe-h, 66px) + 4px) !important;
}

.gp-main-nav {
  background: #242424 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#gp-sort-overlay .gp-sort-sheet {
  transform: translateY(100%) !important;
  -webkit-font-smoothing: auto !important;
  text-rendering: geometricPrecision !important;
}

#gp-sort-overlay.visible .gp-sort-sheet,
#gp-sort-overlay.closing-backdrop:not(.closing-sheet) .gp-sort-sheet {
  transform: translateY(0) !important;
}

/* Do not hide unavailable cards on desktop hover. */
.gift-card--unavailable:hover {
  opacity: 0.82 !important;
  transform: none !important;
  pointer-events: auto !important;
}

/* Mobile filter stack: keep every vertical gap visually identical. */
@media (max-width: 520px) {
  #sticky-filters,
  #sticky-filters.advanced-open,
  .sticky-filters,
  .sticky-filters.advanced-open {
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: var(--gp-ui-gap, 8px) !important;
  }

  #sticky-filters .filters-bar,
  .sticky-filters .filters-bar {
    margin: 0 !important;
    gap: var(--gp-ui-gap, 8px) !important;
  }

  #advanced-panel,
  #advanced-panel.open,
  #advanced-panel.closing,
  #sticky-filters #advanced-panel,
  #sticky-filters #advanced-panel.open,
  #sticky-filters #advanced-panel.closing,
  .sticky-filters #advanced-panel,
  .sticky-filters #advanced-panel.open,
  .sticky-filters #advanced-panel.closing {
    margin: 0 !important;
    padding: 0 !important;
  }

  #advanced-panel.open,
  #sticky-filters #advanced-panel.open,
  .sticky-filters #advanced-panel.open {
    margin-bottom: 0 !important;
  }

  #advanced-panel .advanced-panel-gap,
  #sticky-filters #advanced-panel .advanced-panel-gap,
  .sticky-filters #advanced-panel .advanced-panel-gap {
    height: var(--gp-ui-gap, 8px) !important;
  }

  #advanced-panel .advanced-row,
  #sticky-filters #advanced-panel .advanced-row,
  .sticky-filters #advanced-panel .advanced-row {
    margin: 0 !important;
    gap: var(--gp-ui-gap, 8px) !important;
  }

  #inline-reset-btn.inline-reset-btn--visible,
  #sticky-filters #inline-reset-btn.inline-reset-btn--visible,
  .sticky-filters #inline-reset-btn.inline-reset-btn--visible {
    margin-top: var(--gp-ui-gap, 8px) !important;
    margin-bottom: 0 !important;
  }
}

/* iOS compositing safety: prevents card clipping artifacts while scrolling. */
html.tg-webapp-ios #ptr-content,
html.tg-webapp-ios .ptr-content,
html.tg-webapp-ios main.ptr-active #ptr-content,
html.tg-webapp-ios main.ptr-active #ptr-content.ptr-content,
html.tg-webapp-ios #ptr-content.ptr-content.ptr-pulling,
html.tg-webapp-ios #gift-grid,
html.tg-webapp-ios .gift-grid {
  transform: none !important;
  contain: none !important;
  will-change: auto !important;
  transition: none !important;
}

html.tg-webapp-ios main,
html.tg-webapp-ios main.ptr-active {
  --ptr-offset: 0px !important;
}

/* iOS mobile scroll guard: no touch dead-zones near sticky filters/grid edge. */
@media (max-width: 520px) {
  html.tg-webapp-ios #sticky-filters,
  html.tg-webapp-ios #sticky-filters *,
  html.tg-webapp-ios #gift-grid,
  html.tg-webapp-ios #gift-grid .gift-card {
    touch-action: pan-y !important;
  }

  html.tg-webapp-ios #advanced-panel[aria-hidden="true"],
  html.tg-webapp-ios #sticky-filters #advanced-panel[aria-hidden="true"] {
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }
}

/* Card layout v2: stable geometry for both skeletons and loaded cards. */
#gift-grid,
#gift-grid.gift-grid,
.gift-grid {
  grid-template-columns: repeat(auto-fill, minmax(var(--gp-desktop-card-min), 1fr)) !important;
  justify-content: stretch !important;
  justify-items: stretch !important;
  align-content: start !important;
}

#gift-grid .gift-card,
#gift-grid > .gift-card,
#gift-grid.gift-grid .gift-card,
#gift-grid.gift-grid > .gift-card,
.gift-grid .gift-card,
.gift-grid > .gift-card {
  width: 100% !important;
  max-width: none !important;
  justify-self: stretch !important;
}

#gift-grid .gift-image-wrap,
.gift-grid .gift-image-wrap {
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
}

@media (max-width: 520px) {
  #gift-grid,
  #gift-grid.gift-grid,
  .gift-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    justify-content: stretch !important;
  }

  #gift-grid .gift-card,
  #gift-grid > .gift-card,
  #gift-grid.gift-grid .gift-card,
  #gift-grid.gift-grid > .gift-card,
  .gift-grid .gift-card,
  .gift-grid > .gift-card {
    max-width: none !important;
    justify-self: stretch !important;
  }
}